diff --git a/.gitignore b/.gitignore
index b9e7d8c..e3d3d5f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,9 +10,8 @@ log.txt
 *.tgz
 
 .idea/
-.vscode/**
+.vscode/
 !.vscode/extensions.json
-!.vscode/settings.json
 .sass-cache/
 .versions/
 coverage/
@@ -22,9 +21,6 @@ dist-transpiled/
 node_modules/
 tmp/
 temp/
-core/theme-builder/
-core/test-components/
-core/css/
 $RECYCLE.BIN/
 
 .DS_Store
@@ -58,12 +54,17 @@ prerender-hydrated.html
 prerender-static.html
 
 # stencil
+packages/angular/css/
 packages/react/css/
+packages/react/src/components.ts
 packages/vue/css/
+packages/vue/src/components.ts
 packages/core/components/
 packages/core/css/
 packages/core/hydrate/
 packages/core/loader/
+packages/core/src/components.d.ts
+packages/core/src/components-config.d.ts
 packages/core/www/
 packages/.stencil/
 
@@ -73,17 +74,13 @@ packages/core/playwright-report/
 packages/core/**/*-snapshots
 
 # angular
-packages/angular/css/
-packages/angular/test/build/
+tests/angular/build/
 .angular/
 
 # vue
-packages/vue/test/build/
+tests/vue/build/
 
 # react
-packages/react/test/build/
-
-# react router
-packages/react-router/test/build/
+tests/react/build/
 
 .npmrc
diff --git a/package-lock.json b/package-lock.json
index ad5abd3..e98da54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "@biomejs/biome": "^1.9.4",
         "@commitlint/cli": "^19.6.1",
         "@commitlint/config-conventional": "^19.6.0",
-        "@types/node": "^22.10.2",
+        "@types/node": "^22.12.0",
         "audit-ci": "^7.1.0"
       },
       "engines": {
@@ -991,9 +991,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
+      "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==",
       "cpu": [
         "ppc64"
       ],
@@ -1004,13 +1004,13 @@
         "aix"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.2.tgz",
+      "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==",
       "cpu": [
         "arm"
       ],
@@ -1021,13 +1021,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.2.tgz",
+      "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==",
       "cpu": [
         "arm64"
       ],
@@ -1038,13 +1038,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.2.tgz",
+      "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==",
       "cpu": [
         "x64"
       ],
@@ -1055,13 +1055,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.2.tgz",
+      "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==",
       "cpu": [
         "arm64"
       ],
@@ -1072,13 +1072,13 @@
         "darwin"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.2.tgz",
+      "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==",
       "cpu": [
         "x64"
       ],
@@ -1089,13 +1089,13 @@
         "darwin"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==",
       "cpu": [
         "arm64"
       ],
@@ -1106,13 +1106,13 @@
         "freebsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.2.tgz",
+      "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==",
       "cpu": [
         "x64"
       ],
@@ -1123,13 +1123,13 @@
         "freebsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.2.tgz",
+      "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==",
       "cpu": [
         "arm"
       ],
@@ -1140,13 +1140,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.2.tgz",
+      "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==",
       "cpu": [
         "arm64"
       ],
@@ -1157,13 +1157,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.2.tgz",
+      "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==",
       "cpu": [
         "ia32"
       ],
@@ -1174,13 +1174,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.2.tgz",
+      "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==",
       "cpu": [
         "loong64"
       ],
@@ -1191,13 +1191,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.2.tgz",
+      "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==",
       "cpu": [
         "mips64el"
       ],
@@ -1208,13 +1208,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.2.tgz",
+      "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==",
       "cpu": [
         "ppc64"
       ],
@@ -1225,13 +1225,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.2.tgz",
+      "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==",
       "cpu": [
         "riscv64"
       ],
@@ -1242,13 +1242,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.2.tgz",
+      "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==",
       "cpu": [
         "s390x"
       ],
@@ -1259,13 +1259,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz",
+      "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==",
       "cpu": [
         "x64"
       ],
@@ -1276,13 +1276,30 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.2.tgz",
+      "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==",
       "cpu": [
         "x64"
       ],
@@ -1293,13 +1310,30 @@
         "netbsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.2.tgz",
+      "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==",
       "cpu": [
         "x64"
       ],
@@ -1310,13 +1344,13 @@
         "openbsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.2.tgz",
+      "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==",
       "cpu": [
         "x64"
       ],
@@ -1327,13 +1361,13 @@
         "sunos"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.2.tgz",
+      "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==",
       "cpu": [
         "arm64"
       ],
@@ -1344,13 +1378,13 @@
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.2.tgz",
+      "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==",
       "cpu": [
         "ia32"
       ],
@@ -1361,13 +1395,13 @@
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.2.tgz",
+      "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==",
       "cpu": [
         "x64"
       ],
@@ -1378,7 +1412,7 @@
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@isaacs/cliui": {
@@ -2355,13 +2389,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.49.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.1.tgz",
-      "integrity": "sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==",
+      "version": "1.50.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.50.1.tgz",
+      "integrity": "sha512-Jii3aBg+CEDpgnuDxEp/h7BimHcUTDlpEtce89xEumlJ5ef2hqepZ+PWp1DDpYC/VO9fmWVI1IlEaoI5fK9FXQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.49.1"
+        "playwright": "1.50.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -2433,9 +2467,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.28.1.tgz",
-      "integrity": "sha512-2aZp8AES04KI2dy3Ss6/MDjXbwBzj+i0GqKtWXgw2/Ma6E4jJvujryO6gJAghIRVz7Vwr9Gtl/8na3nDUKpraQ==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.32.1.tgz",
+      "integrity": "sha512-/pqA4DmqyCm8u5YIDzIdlLcEmuvxb0v8fZdFhVMszSpDTgbQKdw3/mB3eMUHIbubtJ6F9j+LtmyCnHTEqIHyzA==",
       "cpu": [
         "arm"
       ],
@@ -2447,9 +2481,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.28.1.tgz",
-      "integrity": "sha512-EbkK285O+1YMrg57xVA+Dp0tDBRB93/BZKph9XhMjezf6F4TpYjaUSuPt5J0fZXlSag0LmZAsTmdGGqPp4pQFA==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.32.1.tgz",
+      "integrity": "sha512-If3PDskT77q7zgqVqYuj7WG3WC08G1kwXGVFi9Jr8nY6eHucREHkfpX79c0ACAjLj3QIWKPJR7w4i+f5EdLH5Q==",
       "cpu": [
         "arm64"
       ],
@@ -2461,9 +2495,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.28.1.tgz",
-      "integrity": "sha512-prduvrMKU6NzMq6nxzQw445zXgaDBbMQvmKSJaxpaZ5R1QDM8w+eGxo6Y/jhT/cLoCvnZI42oEqf9KQNYz1fqQ==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.32.1.tgz",
+      "integrity": "sha512-zCpKHioQ9KgZToFp5Wvz6zaWbMzYQ2LJHQ+QixDKq52KKrF65ueu6Af4hLlLWHjX1Wf/0G5kSJM9PySW9IrvHA==",
       "cpu": [
         "arm64"
       ],
@@ -2475,9 +2509,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.28.1.tgz",
-      "integrity": "sha512-WsvbOunsUk0wccO/TV4o7IKgloJ942hVFK1CLatwv6TJspcCZb9umQkPdvB7FihmdxgaKR5JyxDjWpCOp4uZlQ==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.32.1.tgz",
+      "integrity": "sha512-sFvF+t2+TyUo/ZQqUcifrJIgznx58oFZbdHS9TvHq3xhPVL9nOp+yZ6LKrO9GWTP+6DbFtoyLDbjTpR62Mbr3Q==",
       "cpu": [
         "x64"
       ],
@@ -2489,9 +2523,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.28.1.tgz",
-      "integrity": "sha512-HTDPdY1caUcU4qK23FeeGxCdJF64cKkqajU0iBnTVxS8F7H/7BewvYoG+va1KPSL63kQ1PGNyiwKOfReavzvNA==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.32.1.tgz",
+      "integrity": "sha512-NbOa+7InvMWRcY9RG+B6kKIMD/FsnQPH0MWUvDlQB1iXnF/UcKSudCXZtv4lW+C276g3w5AxPbfry5rSYvyeYA==",
       "cpu": [
         "arm64"
       ],
@@ -2503,9 +2537,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.28.1.tgz",
-      "integrity": "sha512-m/uYasxkUevcFTeRSM9TeLyPe2QDuqtjkeoTpP9SW0XxUWfcYrGDMkO/m2tTw+4NMAF9P2fU3Mw4ahNvo7QmsQ==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.32.1.tgz",
+      "integrity": "sha512-JRBRmwvHPXR881j2xjry8HZ86wIPK2CcDw0EXchE1UgU0ubWp9nvlT7cZYKc6bkypBt745b4bglf3+xJ7hXWWw==",
       "cpu": [
         "x64"
       ],
@@ -2517,9 +2551,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.28.1.tgz",
-      "integrity": "sha512-QAg11ZIt6mcmzpNE6JZBpKfJaKkqTm1A9+y9O+frdZJEuhQxiugM05gnCWiANHj4RmbgeVJpTdmKRmH/a+0QbA==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.32.1.tgz",
+      "integrity": "sha512-PKvszb+9o/vVdUzCCjL0sKHukEQV39tD3fepXxYrHE3sTKrRdCydI7uldRLbjLmDA3TFDmh418XH19NOsDRH8g==",
       "cpu": [
         "arm"
       ],
@@ -2531,9 +2565,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.28.1.tgz",
-      "integrity": "sha512-dRP9PEBfolq1dmMcFqbEPSd9VlRuVWEGSmbxVEfiq2cs2jlZAl0YNxFzAQS2OrQmsLBLAATDMb3Z6MFv5vOcXg==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.32.1.tgz",
+      "integrity": "sha512-9WHEMV6Y89eL606ReYowXuGF1Yb2vwfKWKdD1A5h+OYnPZSJvxbEjxTRKPgi7tkP2DSnW0YLab1ooy+i/FQp/Q==",
       "cpu": [
         "arm"
       ],
@@ -2545,9 +2579,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.28.1.tgz",
-      "integrity": "sha512-uGr8khxO+CKT4XU8ZUH1TTEUtlktK6Kgtv0+6bIFSeiSlnGJHG1tSFSjm41uQ9sAO/5ULx9mWOz70jYLyv1QkA==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.32.1.tgz",
+      "integrity": "sha512-tZWc9iEt5fGJ1CL2LRPw8OttkCBDs+D8D3oEM8mH8S1ICZCtFJhD7DZ3XMGM8kpqHvhGUTvNUYVDnmkj4BDXnw==",
       "cpu": [
         "arm64"
       ],
@@ -2559,9 +2593,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.28.1.tgz",
-      "integrity": "sha512-QF54q8MYGAqMLrX2t7tNpi01nvq5RI59UBNx+3+37zoKX5KViPo/gk2QLhsuqok05sSCRluj0D00LzCwBikb0A==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.32.1.tgz",
+      "integrity": "sha512-FTYc2YoTWUsBz5GTTgGkRYYJ5NGJIi/rCY4oK/I8aKowx1ToXeoVVbIE4LGAjsauvlhjfl0MYacxClLld1VrOw==",
       "cpu": [
         "arm64"
       ],
@@ -2573,9 +2607,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.28.1.tgz",
-      "integrity": "sha512-vPul4uodvWvLhRco2w0GcyZcdyBfpfDRgNKU+p35AWEbJ/HPs1tOUrkSueVbBS0RQHAf/A+nNtDpvw95PeVKOA==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.32.1.tgz",
+      "integrity": "sha512-F51qLdOtpS6P1zJVRzYM0v6MrBNypyPEN1GfMiz0gPu9jN8ScGaEFIZQwteSsGKg799oR5EaP7+B2jHgL+d+Kw==",
       "cpu": [
         "loong64"
       ],
@@ -2587,9 +2621,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.28.1.tgz",
-      "integrity": "sha512-pTnTdBuC2+pt1Rmm2SV7JWRqzhYpEILML4PKODqLz+C7Ou2apEV52h19CR7es+u04KlqplggmN9sqZlekg3R1A==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.32.1.tgz",
+      "integrity": "sha512-wO0WkfSppfX4YFm5KhdCCpnpGbtgQNj/tgvYzrVYFKDpven8w2N6Gg5nB6w+wAMO3AIfSTWeTjfVe+uZ23zAlg==",
       "cpu": [
         "ppc64"
       ],
@@ -2601,9 +2635,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.28.1.tgz",
-      "integrity": "sha512-vWXy1Nfg7TPBSuAncfInmAI/WZDd5vOklyLJDdIRKABcZWojNDY0NJwruY2AcnCLnRJKSaBgf/GiJfauu8cQZA==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.32.1.tgz",
+      "integrity": "sha512-iWswS9cIXfJO1MFYtI/4jjlrGb/V58oMu4dYJIKnR5UIwbkzR0PJ09O0PDZT0oJ3LYWXBSWahNf/Mjo6i1E5/g==",
       "cpu": [
         "riscv64"
       ],
@@ -2615,9 +2649,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.28.1.tgz",
-      "integrity": "sha512-/yqC2Y53oZjb0yz8PVuGOQQNOTwxcizudunl/tFs1aLvObTclTwZ0JhXF2XcPT/zuaymemCDSuuUPXJJyqeDOg==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.32.1.tgz",
+      "integrity": "sha512-RKt8NI9tebzmEthMnfVgG3i/XeECkMPS+ibVZjZ6mNekpbbUmkNWuIN2yHsb/mBPyZke4nlI4YqIdFPgKuoyQQ==",
       "cpu": [
         "s390x"
       ],
@@ -2629,9 +2663,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.28.1.tgz",
-      "integrity": "sha512-fzgeABz7rrAlKYB0y2kSEiURrI0691CSL0+KXwKwhxvj92VULEDQLpBYLHpF49MSiPG4sq5CK3qHMnb9tlCjBw==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.32.1.tgz",
+      "integrity": "sha512-WQFLZ9c42ECqEjwg/GHHsouij3pzLXkFdz0UxHa/0OM12LzvX7DzedlY0SIEly2v18YZLRhCRoHZDxbBSWoGYg==",
       "cpu": [
         "x64"
       ],
@@ -2643,9 +2677,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.28.1.tgz",
-      "integrity": "sha512-xQTDVzSGiMlSshpJCtudbWyRfLaNiVPXt1WgdWTwWz9n0U12cI2ZVtWe/Jgwyv/6wjL7b66uu61Vg0POWVfz4g==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.32.1.tgz",
+      "integrity": "sha512-BLoiyHDOWoS3uccNSADMza6V6vCNiphi94tQlVIL5de+r6r/CCQuNnerf+1g2mnk2b6edp5dk0nhdZ7aEjOBsA==",
       "cpu": [
         "x64"
       ],
@@ -2657,9 +2691,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.28.1.tgz",
-      "integrity": "sha512-wSXmDRVupJstFP7elGMgv+2HqXelQhuNf+IS4V+nUpNVi/GUiBgDmfwD0UGN3pcAnWsgKG3I52wMOBnk1VHr/A==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.32.1.tgz",
+      "integrity": "sha512-w2l3UnlgYTNNU+Z6wOR8YdaioqfEnwPjIsJ66KxKAf0p+AuL2FHeTX6qvM+p/Ue3XPBVNyVSfCrfZiQh7vZHLQ==",
       "cpu": [
         "arm64"
       ],
@@ -2671,9 +2705,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.28.1.tgz",
-      "integrity": "sha512-ZkyTJ/9vkgrE/Rk9vhMXhf8l9D+eAhbAVbsGsXKy2ohmJaWg0LPQLnIxRdRp/bKyr8tXuPlXhIoGlEB5XpJnGA==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.32.1.tgz",
+      "integrity": "sha512-Am9H+TGLomPGkBnaPWie4F3x+yQ2rr4Bk2jpwy+iV+Gel9jLAu/KqT8k3X4jxFPW6Zf8OMnehyutsd+eHoq1WQ==",
       "cpu": [
         "ia32"
       ],
@@ -2685,9 +2719,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.1.tgz",
-      "integrity": "sha512-ZvK2jBafvttJjoIdKm/Q/Bh7IJ1Ose9IBOwpOXcOvW3ikGTQGmKDgxTC6oCAzW6PynbkKP8+um1du81XJHZ0JA==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.32.1.tgz",
+      "integrity": "sha512-ar80GhdZb4DgmW3myIS9nRFYcpJRSME8iqWgzH2i44u+IdrzmiXVxeFnExQ5v4JYUSpg94bWjevMG8JHf1Da5Q==",
       "cpu": [
         "x64"
       ],
@@ -2729,7 +2763,9 @@
       "version": "4.23.0",
       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.23.0.tgz",
       "integrity": "sha512-9vI8ywhoqlaDEmrcntejrZ9X76Tddv2JyWakjVpqJAdDNXgf520sYkyjzGT0p8VJfPtSaKm6pMtl5sAH1r9cFg==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -2772,13 +2808,22 @@
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.9",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.9.tgz",
-      "integrity": "sha512-1yuapCWYViLlxGlEaeta2wryq4M5zZxxBa+4rEBp54VwW2W/trlzPv0IJyw6I3Il51rHYm2WmWlBLOGmoMyW9Q==",
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.9.4.tgz",
+      "integrity": "sha512-nXt1ZKjQ8n+ZaKbj1gcutqcgt7SCwVYzNxa1LfKpKz4L1DST33k1/goahvFeWO/lJzLm47spPtHfcjeaLUg/iQ==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
+        "@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/babel__core": {
@@ -2892,9 +2937,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.10.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz",
-      "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==",
+      "version": "22.12.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.12.0.tgz",
+      "integrity": "sha512-Fll2FZ1riMjNmlmJOdAyY5pUbkftXslB5DgEzlIuNaiWhXd00FhWxVC/r4yV/4wBb9JfImTu+jiSvXTkJ7F/gA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3036,17 +3081,17 @@
       "license": "MIT"
     },
     "node_modules/@vue/language-core": {
-      "version": "2.1.10",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.10.tgz",
-      "integrity": "sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.0.tgz",
+      "integrity": "sha512-O1ZZFaaBGkKbsRfnVH1ifOK1/1BUkyK+3SQsfnh6PmMmD4qJcTU8godCeA96jjDRTL6zgnK7YzCHfaUlH2r0Mw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "~2.4.8",
+        "@volar/language-core": "~2.4.11",
         "@vue/compiler-dom": "^3.5.0",
         "@vue/compiler-vue2": "^2.7.16",
         "@vue/shared": "^3.5.0",
-        "alien-signals": "^0.2.0",
+        "alien-signals": "^0.4.9",
         "minimatch": "^9.0.3",
         "muggle-string": "^0.4.1",
         "path-browserify": "^1.0.1"
@@ -3154,9 +3199,9 @@
       }
     },
     "node_modules/alien-signals": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-0.2.2.tgz",
-      "integrity": "sha512-cZIRkbERILsBOXTQmMrxc9hgpxglstn69zm+F1ARf4aPAzdAFYd6sBq87ErO0Fj3DV94tglcyHG5kQz9nDC/8A==",
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-0.4.14.tgz",
+      "integrity": "sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==",
       "dev": true,
       "license": "MIT"
     },
@@ -4078,9 +4123,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
-      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
+      "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -4088,32 +4133,34 @@
         "esbuild": "bin/esbuild"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.21.5",
-        "@esbuild/android-arm": "0.21.5",
-        "@esbuild/android-arm64": "0.21.5",
-        "@esbuild/android-x64": "0.21.5",
-        "@esbuild/darwin-arm64": "0.21.5",
-        "@esbuild/darwin-x64": "0.21.5",
-        "@esbuild/freebsd-arm64": "0.21.5",
-        "@esbuild/freebsd-x64": "0.21.5",
-        "@esbuild/linux-arm": "0.21.5",
-        "@esbuild/linux-arm64": "0.21.5",
-        "@esbuild/linux-ia32": "0.21.5",
-        "@esbuild/linux-loong64": "0.21.5",
-        "@esbuild/linux-mips64el": "0.21.5",
-        "@esbuild/linux-ppc64": "0.21.5",
-        "@esbuild/linux-riscv64": "0.21.5",
-        "@esbuild/linux-s390x": "0.21.5",
-        "@esbuild/linux-x64": "0.21.5",
-        "@esbuild/netbsd-x64": "0.21.5",
-        "@esbuild/openbsd-x64": "0.21.5",
-        "@esbuild/sunos-x64": "0.21.5",
-        "@esbuild/win32-arm64": "0.21.5",
-        "@esbuild/win32-ia32": "0.21.5",
-        "@esbuild/win32-x64": "0.21.5"
+        "@esbuild/aix-ppc64": "0.24.2",
+        "@esbuild/android-arm": "0.24.2",
+        "@esbuild/android-arm64": "0.24.2",
+        "@esbuild/android-x64": "0.24.2",
+        "@esbuild/darwin-arm64": "0.24.2",
+        "@esbuild/darwin-x64": "0.24.2",
+        "@esbuild/freebsd-arm64": "0.24.2",
+        "@esbuild/freebsd-x64": "0.24.2",
+        "@esbuild/linux-arm": "0.24.2",
+        "@esbuild/linux-arm64": "0.24.2",
+        "@esbuild/linux-ia32": "0.24.2",
+        "@esbuild/linux-loong64": "0.24.2",
+        "@esbuild/linux-mips64el": "0.24.2",
+        "@esbuild/linux-ppc64": "0.24.2",
+        "@esbuild/linux-riscv64": "0.24.2",
+        "@esbuild/linux-s390x": "0.24.2",
+        "@esbuild/linux-x64": "0.24.2",
+        "@esbuild/netbsd-arm64": "0.24.2",
+        "@esbuild/netbsd-x64": "0.24.2",
+        "@esbuild/openbsd-arm64": "0.24.2",
+        "@esbuild/openbsd-x64": "0.24.2",
+        "@esbuild/sunos-x64": "0.24.2",
+        "@esbuild/win32-arm64": "0.24.2",
+        "@esbuild/win32-ia32": "0.24.2",
+        "@esbuild/win32-x64": "0.24.2"
       }
     },
     "node_modules/escalade": {
@@ -6543,13 +6590,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.49.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.1.tgz",
-      "integrity": "sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==",
+      "version": "1.50.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.50.1.tgz",
+      "integrity": "sha512-G8rwsOQJ63XG6BbKj2w5rHeavFjy5zynBA9zsJMMtBoe/Uf757oG12NXz6e6OirF7RCrTVAKFXbLmn1RbL7Qaw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.49.1"
+        "playwright-core": "1.50.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -6562,9 +6609,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.49.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.1.tgz",
-      "integrity": "sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==",
+      "version": "1.50.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.50.1.tgz",
+      "integrity": "sha512-ra9fsNWayuYumt+NiM069M6OkcRb1FZSK8bgi66AtpFoWkg2+y0bJSNmkFrWhMbEBbVKC/EruAHH3g0zmtwGmQ==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -6879,9 +6926,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.28.1.tgz",
-      "integrity": "sha512-61fXYl/qNVinKmGSTHAZ6Yy8I3YIJC/r2m9feHo6SwVAVcLT5MPwOUFe7EuURA/4m0NR8lXG4BBXuo/IZEsjMg==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.32.1.tgz",
+      "integrity": "sha512-z+aeEsOeEa3mEbS1Tjl6sAZ8NE3+AalQz1RJGj81M+fizusbdDMoEJwdJNHfaB40Scr4qNu+welOfes7maKonA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6895,25 +6942,25 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.28.1",
-        "@rollup/rollup-android-arm64": "4.28.1",
-        "@rollup/rollup-darwin-arm64": "4.28.1",
-        "@rollup/rollup-darwin-x64": "4.28.1",
-        "@rollup/rollup-freebsd-arm64": "4.28.1",
-        "@rollup/rollup-freebsd-x64": "4.28.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.28.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.28.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.28.1",
-        "@rollup/rollup-linux-arm64-musl": "4.28.1",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.28.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.28.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.28.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.28.1",
-        "@rollup/rollup-linux-x64-gnu": "4.28.1",
-        "@rollup/rollup-linux-x64-musl": "4.28.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.28.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.28.1",
-        "@rollup/rollup-win32-x64-msvc": "4.28.1",
+        "@rollup/rollup-android-arm-eabi": "4.32.1",
+        "@rollup/rollup-android-arm64": "4.32.1",
+        "@rollup/rollup-darwin-arm64": "4.32.1",
+        "@rollup/rollup-darwin-x64": "4.32.1",
+        "@rollup/rollup-freebsd-arm64": "4.32.1",
+        "@rollup/rollup-freebsd-x64": "4.32.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.32.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.32.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.32.1",
+        "@rollup/rollup-linux-arm64-musl": "4.32.1",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.32.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.32.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.32.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.32.1",
+        "@rollup/rollup-linux-x64-gnu": "4.32.1",
+        "@rollup/rollup-linux-x64-musl": "4.32.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.32.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.32.1",
+        "@rollup/rollup-win32-x64-msvc": "4.32.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -6939,9 +6986,9 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.83.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.0.tgz",
-      "integrity": "sha512-qsSxlayzoOjdvXMVLkzF84DJFc2HZEL/rFyGIKbbilYtAvlCxyuzUeff9LawTn4btVnLKg75Z8MMr1lxU1lfGw==",
+      "version": "1.83.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.4.tgz",
+      "integrity": "sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7391,9 +7438,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
-      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+      "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": {
@@ -7478,21 +7525,21 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.12",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.12.tgz",
-      "integrity": "sha512-KwUaKB27TvWwDJr1GjjWthLMATbGEbeWYZIbGZ5qFIsgPP3vWzLu4cVooqhm5/Z2SPDUMjyPVjTztm5tYKwQxA==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
+      "integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.21.3",
-        "postcss": "^8.4.43",
-        "rollup": "^4.20.0"
+        "esbuild": "^0.24.2",
+        "postcss": "^8.4.49",
+        "rollup": "^4.23.0"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^18.0.0 || >=20.0.0"
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
@@ -7501,19 +7548,25 @@
         "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": "^18.0.0 || >=20.0.0",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
         "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
-        "terser": "^5.4.0"
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
       },
       "peerDependenciesMeta": {
         "@types/node": {
           "optional": true
         },
+        "jiti": {
+          "optional": true
+        },
         "less": {
           "optional": true
         },
@@ -7534,6 +7587,12 @@
         },
         "terser": {
           "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
         }
       }
     },
@@ -7581,15 +7640,14 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "2.1.10",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.10.tgz",
-      "integrity": "sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.0.tgz",
+      "integrity": "sha512-gtmM1sUuJ8aSb0KoAFmK9yMxb8TxjewmxqTJ1aKphD5Cbu0rULFY6+UQT51zW7SpUcenfPUuflKyVwyx9Qdnxg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/typescript": "~2.4.8",
-        "@vue/language-core": "2.1.10",
-        "semver": "^7.5.4"
+        "@volar/typescript": "~2.4.11",
+        "@vue/language-core": "2.2.0"
       },
       "bin": {
         "vue-tsc": "bin/vue-tsc.js"
@@ -7746,25 +7804,38 @@
       "version": "0.4.0",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.23.0"
+        "@stencil/core": "4.25.1"
       },
       "devDependencies": {
         "@cheese-grinder/stencil-component-config": "^0.4.1",
         "@cheese-grinder/stencil-custom-readme": "^0.1.7",
         "@cheese-grinder/stencil-sass-alias": "~0.2.4",
-        "@playwright/test": "^1.49.1",
+        "@playwright/test": "^1.50.1",
         "@stencil/playwright": "^0.2.1",
         "@stencil/sass": "^3.0.12",
-        "@stencil/vue-output-target": "0.8.9",
+        "@stencil/vue-output-target": "0.9.4",
         "@types/jest": "^29.5.14",
-        "@types/node": "~22.10.2",
+        "@types/node": "~22.12.0",
         "clean-css-cli": "^5.6.3",
         "jest": "^29.7.0",
         "jest-cli": "^29.7.0",
         "key-definitions": "^2.0.3",
         "rimraf": "^6.0.1",
-        "sass": "^1.83.0",
-        "typescript": "^5.7.2"
+        "sass": "^1.83.4",
+        "typescript": "^5.7.3"
+      }
+    },
+    "packages/core/node_modules/@stencil/core": {
+      "version": "4.25.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.25.1.tgz",
+      "integrity": "sha512-SJhAAN6nHj7l2n2F7H6NoOUFhXC5tYXSvOpAaNFi5As6c2jOvaDOvAH+om4OKmw8U2kHI9yihEqpZrtY1J20dQ==",
+      "license": "MIT",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
       }
     },
     "packages/docs": {
@@ -7785,8 +7856,8 @@
         "@rollup/plugin-typescript": "^12.1.2",
         "change-case": "^5.4.4",
         "rimraf": "^6.0.1",
-        "rollup": "^4.28.1",
-        "typescript": "^5.7.2",
+        "rollup": "^4.32.1",
+        "typescript": "^5.7.3",
         "vue": "3.5.13"
       }
     },
@@ -7794,154 +7865,15 @@
       "name": "test-vue",
       "version": "0.4.0",
       "dependencies": {
-        "@poppy-ui/vue": "0.3.9",
-        "vue": "3.5.11",
-        "vue-router": "^4.4.5"
+        "@poppy-ui/vue": "0.4.0",
+        "vue": "3.5.13",
+        "vue-router": "^4.5.0"
       },
       "devDependencies": {
-        "@vitejs/plugin-vue": "^5.1.4",
-        "typescript": "^5.6.2",
-        "vite": "^5.4.12",
-        "vue-tsc": "^2.1.6"
-      }
-    },
-    "tests/vue/node_modules/@poppy-ui/core": {
-      "version": "0.3.12",
-      "resolved": "https://registry.npmjs.org/@poppy-ui/core/-/core-0.3.12.tgz",
-      "integrity": "sha512-E8+79XCJr60ORlqh4lPtSVWnBMe9Rn9CTla482qpkhdWiXbOtLTXqPR7dusrNdwoZHdsSsJYnBZJPK1SmvuWnQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@stencil/core": "4.23.0"
-      }
-    },
-    "tests/vue/node_modules/@poppy-ui/vue": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/@poppy-ui/vue/-/vue-0.3.9.tgz",
-      "integrity": "sha512-nN2lYl9aceKhclmKuofc09dwyCN+Wd3vVtRRNFJDKPCyQNRzLm5EaNZtGnmNyYzhbnI8VqzVC0NDx1QEo6X4Fw==",
-      "license": "MIT",
-      "dependencies": {
-        "@poppy-ui/core": "^0.3.9"
-      }
-    },
-    "tests/vue/node_modules/@vue/compiler-core": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.11.tgz",
-      "integrity": "sha512-PwAdxs7/9Hc3ieBO12tXzmTD+Ln4qhT/56S+8DvrrZ4kLDn4Z/AMUr8tXJD0axiJBS0RKIoNaR0yMuQB9v9Udg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.11",
-        "entities": "^4.5.0",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "tests/vue/node_modules/@vue/compiler-dom": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.11.tgz",
-      "integrity": "sha512-pyGf8zdbDDRkBrEzf8p7BQlMKNNF5Fk/Cf/fQ6PiUz9at4OaUfyXW0dGJTo2Vl1f5U9jSLCNf0EZJEogLXoeew==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/compiler-core": "3.5.11",
-        "@vue/shared": "3.5.11"
-      }
-    },
-    "tests/vue/node_modules/@vue/compiler-sfc": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.11.tgz",
-      "integrity": "sha512-gsbBtT4N9ANXXepprle+X9YLg2htQk1sqH/qGJ/EApl+dgpUBdTv3yP7YlR535uHZY3n6XaR0/bKo0BgwwDniw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.5.11",
-        "@vue/compiler-dom": "3.5.11",
-        "@vue/compiler-ssr": "3.5.11",
-        "@vue/shared": "3.5.11",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.11",
-        "postcss": "^8.4.47",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "tests/vue/node_modules/@vue/compiler-ssr": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.11.tgz",
-      "integrity": "sha512-P4+GPjOuC2aFTk1Z4WANvEhyOykcvEd5bIj2KVNGKGfM745LaXGr++5njpdBTzVz5pZifdlR1kpYSJJpIlSePA==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/compiler-dom": "3.5.11",
-        "@vue/shared": "3.5.11"
-      }
-    },
-    "tests/vue/node_modules/@vue/reactivity": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.11.tgz",
-      "integrity": "sha512-Nqo5VZEn8MJWlCce8XoyVqHZbd5P2NH+yuAaFzuNSR96I+y1cnuUiq7xfSG+kyvLSiWmaHTKP1r3OZY4mMD50w==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/shared": "3.5.11"
-      }
-    },
-    "tests/vue/node_modules/@vue/runtime-core": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.11.tgz",
-      "integrity": "sha512-7PsxFGqwfDhfhh0OcDWBG1DaIQIVOLgkwA5q6MtkPiDFjp5gohVnJEahSktwSFLq7R5PtxDKy6WKURVN1UDbzA==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/reactivity": "3.5.11",
-        "@vue/shared": "3.5.11"
-      }
-    },
-    "tests/vue/node_modules/@vue/runtime-dom": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.11.tgz",
-      "integrity": "sha512-GNghjecT6IrGf0UhuYmpgaOlN7kxzQBhxWEn08c/SQDxv1yy4IXI1bn81JgEpQ4IXjRxWtPyI8x0/7TF5rPfYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/reactivity": "3.5.11",
-        "@vue/runtime-core": "3.5.11",
-        "@vue/shared": "3.5.11",
-        "csstype": "^3.1.3"
-      }
-    },
-    "tests/vue/node_modules/@vue/server-renderer": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.11.tgz",
-      "integrity": "sha512-cVOwYBxR7Wb1B1FoxYvtjJD8X/9E5nlH4VSkJy2uMA1MzYNdzAAB//l8nrmN9py/4aP+3NjWukf9PZ3TeWULaA==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/compiler-ssr": "3.5.11",
-        "@vue/shared": "3.5.11"
-      },
-      "peerDependencies": {
-        "vue": "3.5.11"
-      }
-    },
-    "tests/vue/node_modules/@vue/shared": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.11.tgz",
-      "integrity": "sha512-W8GgysJVnFo81FthhzurdRAWP/byq3q2qIw70e0JWblzVhjgOMiC2GyovXrZTFQJnFVryYaKGP3Tc9vYzYm6PQ==",
-      "license": "MIT"
-    },
-    "tests/vue/node_modules/vue": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.11.tgz",
-      "integrity": "sha512-/8Wurrd9J3lb72FTQS7gRMNQD4nztTtKPmuDuPuhqXmmpD6+skVjAeahNpVzsuky6Sy9gy7wn8UadqPtt9SQIg==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/compiler-dom": "3.5.11",
-        "@vue/compiler-sfc": "3.5.11",
-        "@vue/runtime-dom": "3.5.11",
-        "@vue/server-renderer": "3.5.11",
-        "@vue/shared": "3.5.11"
-      },
-      "peerDependencies": {
-        "typescript": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+        "@vitejs/plugin-vue": "^5.2.1",
+        "typescript": "^5.7.3",
+        "vite": "^6.0.11",
+        "vue-tsc": "^2.2.0"
       }
     }
   }
diff --git a/package.json b/package.json
index 0bd6465..7d2ee61 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@biomejs/biome": "^1.9.4",
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.12.0",
     "audit-ci": "^7.1.0"
   },
   "engines": {
diff --git a/packages/core/package.json b/packages/core/package.json
index e261a0c..80fb292 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -62,24 +62,24 @@
     "stencil": "stencil"
   },
   "dependencies": {
-    "@stencil/core": "4.23.0"
+    "@stencil/core": "4.25.1"
   },
   "devDependencies": {
     "@cheese-grinder/stencil-component-config": "^0.4.1",
     "@cheese-grinder/stencil-custom-readme": "^0.1.7",
     "@cheese-grinder/stencil-sass-alias": "~0.2.4",
-    "@playwright/test": "^1.49.1",
+    "@playwright/test": "^1.50.1",
     "@stencil/playwright": "^0.2.1",
     "@stencil/sass": "^3.0.12",
-    "@stencil/vue-output-target": "0.8.9",
+    "@stencil/vue-output-target": "0.9.4",
     "@types/jest": "^29.5.14",
-    "@types/node": "~22.10.2",
+    "@types/node": "~22.12.0",
     "clean-css-cli": "^5.6.3",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "key-definitions": "^2.0.3",
     "rimraf": "^6.0.1",
-    "sass": "^1.83.0",
-    "typescript": "^5.7.2"
+    "sass": "^1.83.4",
+    "typescript": "^5.7.3"
   }
 }
diff --git a/packages/core/src/custom-type.d.ts b/packages/core/src/component-types.ts
similarity index 100%
rename from packages/core/src/custom-type.d.ts
rename to packages/core/src/component-types.ts
diff --git a/packages/core/src/components-config.d.ts b/packages/core/src/components-config.d.ts
deleted file mode 100644
index 2f2ed40..0000000
--- a/packages/core/src/components-config.d.ts
+++ /dev/null
@@ -1,868 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-/**
- * This is an autogenerated file created by the Cheese-grinder stencil Plugin.
- * It contains typing information for all configurable components that exist in this project.
- */
-import type { BadgeAs, BadgeColor } from "./components/badge/badge.type";
-import type { AutoCapitalize, Color, EnterKeyHint, KeyboardType, Size } from "./interface.d";
-import type { ButtonColor, ButtonExpand, ButtonShape } from "./components/button/button.type";
-import type { CheckboxPlacement } from "./components/checkbox/checkbox.type";
-import type { DividerColor, DividerOrientation, DividerPlacement } from "./components/divider/divider.type";
-import type { TriggerAction } from "./utils/trigger";
-import type { DrawerSide } from "./components/drawer/drawer.type";
-import type { DropdownAlign, DropdownSide } from "./components/dropdown/dropdown.type";
-import type { IndicatorPosition, IndicatorSide } from "./components/indicator/indicator.type";
-import type { InputColor } from "./components/input/input.type";
-import type { InputFileColor } from "./components/input-file/input-file.type";
-import type { JoinOrientation } from "./components/join/join.type";
-import type { ListOrientation } from "./components/list/list.type";
-import type { LoadingType } from "./components/loading/loading.type";
-import type { MaskType } from "./components/mask/mask.type";
-import type { RadioGroupCompareFn } from "./components/radio-group/radio-group.type";
-import type { RangeColor } from "./components/range/range.type";
-import type { SelectColor, SelectCompareFn } from "./components/select/select.type";
-import type { SwapType } from "./components/swap/swap.type";
-import type { TextareaColor, Wrap } from "./components/textarea/textarea.type";
-import type { ToggleColor } from "./components/toggle/toggle.type";
-import type { TooltipPosition } from "./components/tooltip/tooltip.type";
-
-export namespace Configuration {
-  interface ComponentsConfig {
-    'pop-accordion-group'?: {
-      /**
-       * If `true`, the user cannot interact with the element.
-       * @default false
-       */
-      readonly?: boolean;
-      /**
-       * If `true`, the user cannot interact with the element.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * If `true`, the user can open multiple accordion.
-       * @default false
-       */
-      multiple?: boolean;
-    };
-    'pop-avatar'?: {
-      /**
-       * To show some letters as avatar placeholder
-       * @default false
-       */
-      placeholder?: boolean;
-    };
-    'pop-badge'?: {
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"neutral"`, `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: BadgeColor;
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * @default "md"
-       */
-      size?: Size;
-      /**
-       * Transparent Badge with colored border
-       * @default false
-       */
-      outlined?: boolean;
-      /**
-       * Used HTML element for
-       * @default "div"
-       */
-      as?: BadgeAs;
-    };
-    'pop-button'?: {
-      /**
-       * If `true`, the user cannot interact with the element.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"neutral"`, `"ghost"`, `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: ButtonColor;
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * @default "md"
-       */
-      size?: Size;
-      /**
-       * Transparent Button with colored border
-       * @default false
-       */
-      outlined?: boolean;
-      /**
-       * `square` set button width and heigth with 1:1 ratio
-       * `round` set button width and heigth with 1:1 ratio and rounded corners.
-       */
-      shape?: ButtonShape;
-      /**
-       * `wide` Add more horizontal padding
-       * `block` make a full width button
-       */
-      expand?: ButtonExpand;
-      /**
-       * Force the button to have `hover` style
-       * @default false
-       */
-      active?: boolean;
-    };
-    'pop-card'?: {
-      /**
-       * Applies smaller padding
-       * @default false
-       */
-      compact?: boolean;
-    };
-    'pop-checkbox'?: {
-      /**
-       * If `true`, the user must fill in a value before submitting a form.
-       * @default false
-       */
-      required?: boolean;
-      /**
-       * If `true`, the user cannot modify the value.
-       * @default false
-       */
-      readonly?: boolean;
-      /**
-       * If `true`, the toggle is selected.
-       * @default false
-       */
-      checked?: boolean;
-      /**
-       * If a developer want to use `indeterminate`, `checked` property should be set to `false`
-       * @default false
-       */
-      indeterminate?: boolean;
-      /**
-       * If true, the user cannot interact with the native element.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: Color;
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * @default "md"
-       */
-      size?: Size;
-      /**
-       * Where to place the label relative to the checkbox.
-       * - `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
-       * - `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
-       * @default "start"
-       */
-      placement?: CheckboxPlacement;
-    };
-    'pop-divider'?: {
-      /**
-       * Define content disposition orientation
-       * @default "horizontal"
-       */
-      orientation?: DividerOrientation;
-      /**
-       * Where to place the content.
-       * - `"left"`: The content will appear to the left of the divider in LTR and RTL.
-       * - `"start"`: The content will appear to the left of the divider in LTR and to the right in RTL.
-       * - `"center"`: The content will appear to the center of the divider.
-       * - `"end"`: The content will appear to the right of the divider in LTR and to the left in RTL.
-       * - `"right"`: The content will appear to the right of the divider in LTR and RTL.
-       * @default "center"
-       */
-      placement?: DividerPlacement;
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"primary"`, `"secondary"`, `"accent"`, `"neutral"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: DividerColor;
-    };
-    'pop-drawer'?: {
-      /**
-       * Describes what kind of interaction with the trigger that should
-       * cause the sidebar to open. Does not apply when the `trigger` property is `undefined`.
-       * - `"click"`: the sidebar will be presented when the trigger is left clicked.
-       * - `"hover"`: the sidebar will be presented when a pointer hovers over the trigger.
-       * - `"context-menu"`: the sidebar will be presented when the trigger is right
-       * clicked on desktop and long pressed on mobile. This will also prevent your
-       * device's normal context menu from appearing.
-       * @default "click"
-       */
-      triggerAction?: TriggerAction;
-      /**
-       * Where to place the sidebar relative to the screen.
-       * - `"start"`: The sidebar will appear to the left of the screen in LTR and to the right in RTL.
-       * - `"end"`: The sidebar will appear to the right of the screen in LTR and to the left in RTL.
-       * @default "start"
-       */
-      side?: DrawerSide;
-      /**
-       * Forces the drawer to be open
-       * @default false
-       */
-      open?: boolean;
-    };
-    'pop-dropdown'?: {
-      /**
-       * Describe where the content is displayed relatively to the trigger element
-       * - `"start"`: Open on the left in LTR and to the right in RTL.
-       * - `"end"`: Open on the right in LTR and to the left in RTL.
-       * - `"left"`: Open on left
-       * - `"right"`: Open on right
-       * - `"top"`: Open on top
-       * - `"bottom"`: Open on bottom
-       * @default "bottom"
-       */
-      side?: DropdownSide;
-      /**
-       * Describes how the dropdown has to be alined
-       * - `"start"`: Align to the left in LTR and to the right in RTL.
-       * - `"center"`: Align to the left in LTR and to the right in RTL.
-       * - `"end"`: Align to the right in LTR and to the left in RTL.
-       * @default "start"
-       */
-      align?: DropdownAlign;
-      /**
-       * Force the dropdown to be shown
-       * @default false
-       */
-      open?: boolean;
-      /**
-       * Describes what kind of intertion with the trigger (sloted element) that should cause the dropdown to open.
-       * - `"click"`: the dropdown will be presented when the trigger is left clicked.
-       * - `"hover"`: the dropdown will be presented when a pointer hovers over the trigger.
-       * - `"context-menu"`: the dropdown will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
-       * @default "click"
-       */
-      triggerAction?: TriggerAction;
-      /**
-       * Set the amount of time, in milliseconds after the user no longer hover the trigger or dropdown, will dismiss.
-       * Only apply on `triggerAction=hover`
-       * @default 100
-       */
-      debounce?: number;
-      /**
-       * If `true`, a backdrop will be displayed behind the modal.
-       * This property controls whether or not the backdrop
-       * darkens the screen when the modal is presented.
-       * @default false
-       */
-      showBackdrop?: boolean;
-    };
-    'pop-indicator'?: {
-      /**
-       * Align horizontally the indicator.
-       * @default "left"
-       */
-      side?: IndicatorSide;
-      /**
-       * Align vertically the indicator.
-       * @default "top"
-       */
-      position?: IndicatorPosition;
-    };
-    'pop-input'?: {
-      /**
-       * The minimum value, which must not be greater than its maximum (max attribute) value.
-       */
-      min?: number | string;
-      /**
-       * The maximum value, which must not be less than its minimum (min attribute) value.
-       */
-      max?: number | string;
-      /**
-       * Works with the min and max attributes to limit the increments at which a value can be set.
-       * Possible values are: `"any"` or a positive floating point number.
-       */
-      step?: string;
-      /**
-       * This attribute specifies the minimum number of characters that the user can enter.
-       */
-      minLength?: number;
-      /**
-       * This attribute specifies the maximum number of characters that the user can enter.
-       */
-      maxLength?: number;
-      /**
-       * If `true`, the user must fill in a value before submitting a form.
-       * @default false
-       */
-      required?: boolean;
-      /**
-       * If `true`, the user cannot modify the value.
-       * @default false
-       */
-      readonly?: boolean;
-      /**
-       * If `true`, the user cannot interact with the element.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * If `true`, the element will be focused on page load.
-       * @default false
-       */
-      autoFocus?: boolean;
-      /**
-       * A hint to the browser for which keyboard to display.
-       * That specifies what action label (or icon) to present for the enter key on virtual keyboards.
-       * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute}
-       */
-      enterkeyhint?: EnterKeyHint;
-      /**
-       * If `true`, the element will have its spelling and grammar checked.
-       * By default the User Agent make their own default behavior.
-       * @default false
-       */
-      spellcheck?: boolean;
-      /**
-       * This features work only on mobile and tablet devices.
-       * By default the User Agent and input make their own determination.
-       * @default "off"
-       * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization}
-       */
-      autoCapitalize?: AutoCapitalize;
-      /**
-       * if `true`, adds border to input when `color` property is not set.
-       * @default false
-       */
-      bordered?: boolean;
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: InputColor;
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * @default "md"
-       */
-      size?: Size;
-      /**
-       * If `true`, a character counter will display the ratio of characters used and the total character limit.
-       * Developers must also set the `maxlength` property for the counter to be calculated correctly.
-       * @default false
-       */
-      counter?: boolean;
-      /**
-       * A callback used to format the counter text.
-       * By default the counter text is set to "itemLength / maxLength".
-       */
-      counterFormatter?: (inputLength: number, maxLength: number) => string;
-      /**
-       * Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke.
-       * @default 0
-       */
-      debounce?: number;
-    };
-    'pop-input-file'?: {
-      /**
-       * If `true`, the user can enter more than one value.
-       * This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
-       * @default false
-       */
-      multiple?: boolean;
-      /**
-       * If `true`, the user must fill in a value before submitting a form.
-       * @default false
-       */
-      required?: boolean;
-      /**
-       * If `true`, the user cannot modify the value.
-       * @default false
-       */
-      readonly?: boolean;
-      /**
-       * If `true`, the user cannot interact with the element.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * If `true`, the element will be focused on page load.
-       * @default false
-       */
-      autoFocus?: boolean;
-      /**
-       * if `true`, adds border to textarea when `color` property is not set.
-       * @default false
-       */
-      bordered?: boolean;
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: InputFileColor;
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * @default "md"
-       */
-      size?: Size;
-    };
-    'pop-item'?: {
-      /**
-       * If `true`, the user cannot interact with the item.
-       * @default false
-       */
-      disabled?: boolean;
-    };
-    'pop-join'?: {
-      /**
-       * Define content disposition orientation
-       * @default "horizontal"
-       */
-      orientation?: JoinOrientation;
-    };
-    'pop-kbd'?: {
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * @default "md"
-       */
-      size?: Size;
-    };
-    'pop-list'?: {
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * $
-       * @default "md"
-       */
-      size?: Size;
-      /**
-       * Define content disposition orientation
-       * @default "vertical"
-       */
-      orientation?: ListOrientation;
-    };
-    'pop-loading'?: {
-      /**
-       * Apply different animation
-       * @default "spinner"
-       */
-      type?: LoadingType;
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * @default "md"
-       */
-      size?: Size;
-    };
-    'pop-mask'?: {
-      /**
-       * Mask that should be applied
-       * @default "squircle"
-       */
-      type?: MaskType;
-    };
-    'pop-modal'?: {
-      /**
-       * If `true`, a backdrop will be displayed behind the modal.
-       * This property controls whether or not the backdrop
-       * darkens the screen when the modal is presented.
-       * @default false
-       */
-      showBackdrop?: boolean;
-      /**
-       * If `true`, the modal will be dismissed when the backdrop is clicked.
-       * @default false
-       */
-      backdropDismiss?: boolean;
-      /**
-       * If `true`, the modal will open. If `false`, the modal will close.
-       * Use this if you need finer grained control over presentation, otherwise
-       * just use the modalController or the `trigger` property.
-       * Note: `open` will automatically be set back to `false` when
-       * the modal dismisses.
-       * @default false
-       */
-      open?: boolean;
-    };
-    'pop-popover'?: {
-      /**
-       * If `true`, the popover will open. If `false`, the popover will close.
-       * Use this if you need finer grained control over presentation, otherwise
-       * just use the popoverController or the `trigger` property.
-       * Note: `open` will not automatically be set back to `false` when
-       * the popover dismisses. You will need to do that in your code.
-       * @default false
-       */
-      open?: boolean;
-      /**
-       * If `true`, the popover will animate.
-       * @default false
-       */
-      animated?: any;
-      /**
-       * If `true`, a backdrop will be displayed behind the popover.
-       * This property controls whether or not the backdrop
-       * darkens the screen when the popover is presented.
-       * It does not control whether or not the backdrop
-       * is active or present in the DOM.
-       * @default false
-       */
-      showBackdrop?: boolean;
-      /**
-       * If `true`, the popover will be dismissed when the backdrop is clicked.
-       * @default false
-       */
-      backdropDismiss?: boolean;
-      /**
-       * Describes what kind of interaction with the trigger that
-       * should cause the popover to open. Does not apply when the `trigger`
-       * property is `undefined`.
-       * If `"click"`, the popover will be presented when the trigger is left clicked.
-       * If `"hover"`, the popover will be presented when a pointer hovers over the trigger.
-       * If `"context-menu"`, the popover will be presented when the trigger is right
-       * clicked on desktop and long pressed on mobile. This will also prevent your
-       * device's normal context menu from appearing.
-       * @default "click"
-       */
-      triggerAction?: TriggerAction;
-    };
-    'pop-progress'?: {
-      max?: number;
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: Color;
-    };
-    'pop-radio'?: {
-      /**
-       * If `true`, the user cannot interact with the element.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: Color;
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * @default "md"
-       */
-      size?: Size;
-    };
-    'pop-radio-group'?: {
-      /**
-       * If `true`, apply the required property to every `pop-radio`.
-       * @default false
-       */
-      required?: boolean;
-      /**
-       * If `true`, apply the readonly property to every `pop-radio`.
-       * @default false
-       */
-      readonly?: boolean;
-      /**
-       * If `true`, apply the disabled property to every `pop-radio`.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * If `true`, the radios can be deselected.
-       * @default false
-       */
-      allowEmpty?: boolean;
-      /**
-       * This property allows developers to specify a custom function
-       * for comparing objects when determining the selected option in the
-       * ion-radio-group. When not specified, the default behavior will use strict
-       * equality (===) for comparison.
-       */
-      compare?: RadioGroupCompareFn | string | null;
-    };
-    'pop-range'?: {
-      /**
-       * The minimum value, which must not be greater than its maximum (max attribute) value.
-       * @default 0
-       */
-      min?: number;
-      /**
-       * The maximum value, which must not be less than its minimum (min attribute) value.
-       * @default 100
-       */
-      max?: number;
-      /**
-       * Works with the min and max attributes to limit the increments at which a value can be set.
-       * @default 1
-       */
-      step?: number;
-      /**
-       * If `true`, the user must fill in a value before submitting a form.
-       * @default false
-       */
-      required?: boolean;
-      /**
-       * If `true`, the user cannot interact with the element.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: RangeColor;
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * @default "md"
-       */
-      size?: Size;
-      /**
-       * Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke.
-       * @default 0
-       */
-      debounce?: number;
-    };
-    'pop-select'?: {
-      /**
-       * If `true`, the user can select more than one value.
-       * @default false
-       */
-      multiple?: boolean;
-      /**
-       * Only apply when `multiple` property is used.
-       * The minimum amount of values that can be selected, which must not be greater than its maximum (max attribute) value.
-       */
-      min?: number;
-      /**
-       * Only apply when `multiple` property is used.
-       * The maximum amount of values that can be selected, which must not be less than its minimum (min attribute) value.
-       */
-      max?: number;
-      /**
-       * If `true`, the user must fill in a value before submitting a form.
-       * @default false
-       */
-      required?: boolean;
-      /**
-       * If `true`, the user cannot modify the value.
-       * @default false
-       */
-      readonly?: boolean;
-      /**
-       * If `true`, the user cannot interact with the element.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * if `true`, adds border to select when `color` property is not set.
-       * @default false
-       */
-      bordered?: boolean;
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: SelectColor;
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * @default "md"
-       */
-      size?: Size;
-      /**
-       * This property allows developers to specify a custom function
-       * for comparing objects when determining the selected option in the
-       * ion-radio-group. When not specified, the default behavior will use strict
-       * equality (===) for comparison.
-       */
-      compare?: SelectCompareFn | string | null;
-    };
-    'pop-swap'?: {
-      /**
-       * Choose what animation is used on click.
-       * @default "rotate"
-       */
-      type?: SwapType;
-      /**
-       * Activates the swap.
-       * Show whats inside the slot `on`
-       * @default false
-       */
-      active?: boolean;
-    };
-    'pop-textarea'?: {
-      /**
-       * This attribute specifies the minimum number of characters that the user can enter.
-       */
-      minLength?: number;
-      /**
-       * This attribute specifies the maximum number of characters that the user can enter.
-       */
-      maxLength?: number;
-      /**
-       * The visible width of the text control, in average character widths.
-       * If it is specified, it must be a positive integer.
-       */
-      cols?: number;
-      /**
-       * The number of visible text lines for the control.
-       */
-      rows?: number;
-      /**
-       * If `true`, the user must fill in a value before submitting a form.
-       * @default false
-       */
-      required?: boolean;
-      /**
-       * If `true`, the user cannot modify the value.
-       * @default false
-       */
-      readonly?: boolean;
-      /**
-       * If `true`, the user cannot interact with the element.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * A hint to the browser for which virtual keyboard to display.
-       * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode}
-       */
-      keyboard?: KeyboardType;
-      /**
-       * A hint to the browser for which keyboard to display.
-       * That specifies what action label (or icon) to present for the enter key on virtual keyboards.
-       * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute}
-       */
-      enterkeyhint?: EnterKeyHint;
-      /**
-       * If `true`, the element will have its spelling and grammar checked.
-       * By default the User Agent make their own default behavior.
-       * @default false
-       */
-      spellcheck?: boolean;
-      /**
-       * This features work only on mobile and tablet devices.
-       * By default the User Agent and input make their own determination.
-       * @default "off"
-       * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization}
-       */
-      autoCapitalize?: AutoCapitalize;
-      /**
-       * Indicates how the control wraps text.
-       * If wrap attribute is in the `hard` state, the `cols` property must be specified.
-       * @default "soft"
-       * @see cols *
-       * @see {@link https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-wrap}
-       */
-      wrap?: Wrap;
-      /**
-       * if `true`, adds border to textarea when `color` property is not set.
-       * @default false
-       */
-      bordered?: boolean;
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: TextareaColor;
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * @default "md"
-       */
-      size?: Size;
-      /**
-       * If `true`, a character counter will display the ratio of characters used and the total character limit.
-       * Developers must also set the `maxlength` property for the counter to be calculated correctly.
-       * @default false
-       */
-      counter?: boolean;
-      /**
-       * A callback used to format the counter text.
-       * By default the counter text is set to "itemLength / maxLength".
-       */
-      counterFormatter?: (inputLength: number, maxLength: number) => string;
-      /**
-       * Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke.
-       * @default 0
-       */
-      debounce?: number;
-    };
-    'pop-toggle'?: {
-      /**
-       * If `true`, the user must fill in a value before submitting a form.
-       * @default false
-       */
-      required?: boolean;
-      /**
-       * If `true`, the user cannot modify the value.
-       * @default false
-       */
-      readonly?: boolean;
-      /**
-       * If `true`, the toggle is selected.
-       * @default false
-       */
-      checked?: boolean;
-      /**
-       * If a developer want to use `indeterminate`, `checked` property should be set to `false`
-       * @default false
-       */
-      indeterminate?: boolean;
-      /**
-       * If true, the user cannot interact with the native element.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: ToggleColor;
-      /**
-       * Change size of the component
-       * Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-       * @default "md"
-       */
-      size?: Size;
-    };
-    'pop-tooltip'?: {
-      /**
-       * The color to use from your application's color palette.
-       * Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`.
-       * For more information on colors, see [theming](/docs/theming/basics).
-       */
-      color?: Color;
-      /**
-       * Define the position of tooltip
-       * By default the tootip appear on top
-       * @default "top"
-       */
-      position?: TooltipPosition;
-      /**
-       * Force open tooltip
-       * @default false
-       */
-      open?: boolean;
-    };
-  }
-}
\ No newline at end of file
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
deleted file mode 100644
index 99d0e09..0000000
--- a/packages/core/src/components.d.ts
+++ /dev/null
@@ -1,3587 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-/**
- * This is an autogenerated file created by the Stencil compiler.
- * It contains typing information for all components that exist in this project.
- */
-import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group.type";
-import { BadgeAs, BadgeColor } from "./components/badge/badge.type";
-import { AutoCapitalize, Color, ComponentProps, ComponentRef, EnterKeyHint, KeyboardType, Size } from "./interface.d";
-import { ButtonColor, ButtonExpand, ButtonShape, ButtonType } from "./components/button/button.type";
-import { CheckboxChangeEventDetail, CheckboxPlacement } from "./components/checkbox/checkbox.type";
-import { DividerColor, DividerOrientation, DividerPlacement } from "./components/divider/divider.type";
-import { TriggerAction } from "./utils/trigger";
-import { DrawerSide } from "./components/drawer/drawer.type";
-import { DropdownAlign, DropdownSide } from "./components/dropdown/dropdown.type";
-import { IndicatorPosition, IndicatorSide } from "./components/indicator/indicator.type";
-import { Autocomplete, InputChangeEventDetail, InputColor, InputInputEventDetail, InputType } from "./components/input/input.type";
-import { InputFileChangeEventDetail, InputFileColor } from "./components/input-file/input-file.type";
-import { JoinOrientation } from "./components/join/join.type";
-import { ListOrientation } from "./components/list/list.type";
-import { LoadingType } from "./components/loading/loading.type";
-import { MaskType } from "./components/mask/mask.type";
-import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group.type";
-import { RangeChangeEventDetail, RangeColor } from "./components/range/range.type";
-import { SelectChangeEventDetail, SelectColor, SelectCompareFn } from "./components/select/select.type";
-import { SwapChangeEventDetail, SwapType } from "./components/swap/swap.type";
-import { TextareaChangeEventDetail, TextareaColor, TextareaInputEventDetail, Wrap } from "./components/textarea/textarea.type";
-import { ToggleChangeEventDetail, ToggleColor } from "./components/toggle/toggle.type";
-import { TooltipPosition } from "./components/tooltip/tooltip.type";
-export { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group.type";
-export { BadgeAs, BadgeColor } from "./components/badge/badge.type";
-export { AutoCapitalize, Color, ComponentProps, ComponentRef, EnterKeyHint, KeyboardType, Size } from "./interface.d";
-export { ButtonColor, ButtonExpand, ButtonShape, ButtonType } from "./components/button/button.type";
-export { CheckboxChangeEventDetail, CheckboxPlacement } from "./components/checkbox/checkbox.type";
-export { DividerColor, DividerOrientation, DividerPlacement } from "./components/divider/divider.type";
-export { TriggerAction } from "./utils/trigger";
-export { DrawerSide } from "./components/drawer/drawer.type";
-export { DropdownAlign, DropdownSide } from "./components/dropdown/dropdown.type";
-export { IndicatorPosition, IndicatorSide } from "./components/indicator/indicator.type";
-export { Autocomplete, InputChangeEventDetail, InputColor, InputInputEventDetail, InputType } from "./components/input/input.type";
-export { InputFileChangeEventDetail, InputFileColor } from "./components/input-file/input-file.type";
-export { JoinOrientation } from "./components/join/join.type";
-export { ListOrientation } from "./components/list/list.type";
-export { LoadingType } from "./components/loading/loading.type";
-export { MaskType } from "./components/mask/mask.type";
-export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group.type";
-export { RangeChangeEventDetail, RangeColor } from "./components/range/range.type";
-export { SelectChangeEventDetail, SelectColor, SelectCompareFn } from "./components/select/select.type";
-export { SwapChangeEventDetail, SwapType } from "./components/swap/swap.type";
-export { TextareaChangeEventDetail, TextareaColor, TextareaInputEventDetail, Wrap } from "./components/textarea/textarea.type";
-export { ToggleChangeEventDetail, ToggleColor } from "./components/toggle/toggle.type";
-export { TooltipPosition } from "./components/tooltip/tooltip.type";
-export namespace Components {
-    /**
-     * Accordion is used for showing and hiding content.
-     */
-    interface PopAccordion {
-        /**
-          * If `true`, the user cannot interact with the element.
-         */
-        "disabled"?: boolean;
-        /**
-          * Close the accordion. If the method returns `false`, the accordion was already closed. otherwise it returns `true`
-         */
-        "hide": () => Promise<boolean>;
-        /**
-          * name of the accordion
-         */
-        "name": string;
-        /**
-          * If `true`, the accordion is open.  The developer must not set this value to `true` if the accordion is used in `<accordion-group>` element and set the active property to the name of the accordion.
-         */
-        "open"?: boolean;
-        /**
-          * If `true`, the user cannot interact with the element.
-         */
-        "readonly"?: boolean;
-        /**
-          * Open the accordion. If the method returns `false`, the accordion was already open. otherwise it returns `true`
-         */
-        "show": () => Promise<boolean>;
-        /**
-          * Open or close the accordion depending on his actual state
-         */
-        "toggle": () => Promise<void>;
-    }
-    interface PopAccordionGroup {
-        /**
-          * name of the active the accordion.
-         */
-        "active"?: string | string[];
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * If `true`, the user can open multiple accordion.
-          * @config 
-          * @default false
-         */
-        "multiple": boolean;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-    }
-    /**
-     * Avatars are used to show a thumbnail representation of an individual or business in the interface.
-     */
-    interface PopAvatar {
-        /**
-          * To show some letters as avatar placeholder
-          * @config 
-          * @default false
-         */
-        "placeholder": boolean;
-    }
-    /**
-     * Badges are used to inform the user of the status of specific data.
-     */
-    interface PopBadge {
-        /**
-          * Used HTML element for
-          * @config 
-          * @default "div"
-         */
-        "as"?: BadgeAs;
-        /**
-          * The color to use from your application's color palette. Default options are: `"neutral"`, `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: BadgeColor;
-        /**
-          * Transparent Badge with colored border
-          * @config 
-          * @default false
-         */
-        "outlined"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-    }
-    /**
-     * Buttons allow the user to take actions or make choices.
-     */
-    interface PopButton {
-        /**
-          * Force the button to have `hover` style
-          * @config 
-          * @default false
-         */
-        "active"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"neutral"`, `"ghost"`, `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: ButtonColor;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * `wide` Add more horizontal padding `block` make a full width button
-          * @config
-         */
-        "expand"?: ButtonExpand;
-        /**
-          * The HTML form element id. Used to submit a form when the button is not a child of the form.
-         */
-        "form"?: string | HTMLFormElement;
-        /**
-          * Transparent Button with colored border
-          * @config 
-          * @default false
-         */
-        "outlined"?: boolean;
-        /**
-          * `square` set button width and heigth with 1:1 ratio `round` set button width and heigth with 1:1 ratio and rounded corners.
-          * @config
-         */
-        "shape"?: ButtonShape;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * The type of the button.
-         */
-        "type"?: ButtonType;
-    }
-    /**
-     * Cards are used to group and display content in a way that is easily readable.
-     */
-    interface PopCard {
-        /**
-          * Applies smaller padding
-          * @config 
-          * @default false
-         */
-        "compact": boolean;
-    }
-    /**
-     * Cards are used to group and display content in a way that is easily readable.
-     */
-    interface PopCardActions {
-    }
-    /**
-     * Cards are used to group and display content in a way that is easily readable.
-     */
-    interface PopCardBody {
-    }
-    /**
-     * Cards are used to group and display content in a way that is easily readable.
-     */
-    interface PopCardTitle {
-    }
-    /**
-     * Toggles are switches that change the state of a single option.
-     * They can be switched on or off by pressing.
-     * Toggles can also be `"checked"` programmatically by setting the checked property.
-     */
-    interface PopCheckbox {
-        /**
-          * If `true`, the toggle is selected.
-          * @config 
-          * @default false
-         */
-        "checked"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: Color;
-        /**
-          * If true, the user cannot interact with the native element.
-          * @config 
-          * @default false
-         */
-        "disabled": boolean;
-        /**
-          * If a developer want to use `indeterminate`, `checked` property should be set to `false`
-          * @config 
-          * @default false
-         */
-        "indeterminate"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name": string;
-        /**
-          * Where to place the label relative to the checkbox. - `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. - `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
-          * @config 
-          * @default "start"
-         */
-        "placement"?: CheckboxPlacement;
-        /**
-          * If `true`, the user cannot modify the value.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * Sets focus on the native `input` in `pop-checkbox`. Use this method instead of the global `input.focus()`.
-         */
-        "setFocus": () => Promise<void>;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * 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>`.
-         */
-        "value"?: string | null;
-    }
-    /**
-     * Divider will be used to separate content vertically or horizontally.
-     */
-    interface PopDivider {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"neutral"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color": DividerColor;
-        /**
-          * Define content disposition orientation
-          * @config 
-          * @default "horizontal"
-         */
-        "orientation": DividerOrientation;
-        /**
-          * Where to place the content. - `"left"`: The content will appear to the left of the divider in LTR and RTL. - `"start"`: The content will appear to the left of the divider in LTR and to the right in RTL. - `"center"`: The content will appear to the center of the divider. - `"end"`: The content will appear to the right of the divider in LTR and to the left in RTL. - `"right"`: The content will appear to the right of the divider in LTR and RTL.
-          * @config 
-          * @default "center"
-         */
-        "placement": DividerPlacement;
-    }
-    /**
-     * Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
-     */
-    interface PopDrawer {
-        "dismiss": () => Promise<boolean>;
-        /**
-          * Forces the drawer to be open
-          * @config 
-          * @default false
-         */
-        "open"?: boolean;
-        "present": () => Promise<boolean>;
-        /**
-          * Where to place the sidebar relative to the screen. - `"start"`: The sidebar will appear to the left of the screen in LTR and to the right in RTL. - `"end"`: The sidebar will appear to the right of the screen in LTR and to the left in RTL.
-          * @config 
-          * @default "start"
-         */
-        "side"?: DrawerSide;
-        "toggle": () => Promise<void>;
-        /**
-          * An ID corresponding to the trigger element that causes the drawer to open. Use the `trigger-action` property to customize the interaction that results in the sidebar opening.
-         */
-        "trigger"?: string;
-        /**
-          * Describes what kind of interaction with the trigger that should cause the sidebar to open. Does not apply when the `trigger` property is `undefined`. - `"click"`: the sidebar will be presented when the trigger is left clicked. - `"hover"`: the sidebar will be presented when a pointer hovers over the trigger. - `"context-menu"`: the sidebar will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
-          * @config 
-          * @default "click"
-         */
-        "triggerAction"?: TriggerAction;
-    }
-    /**
-     * Dropdown can open a menu or any other element when the trigger element is clicked.
-     */
-    interface PopDropdown {
-        /**
-          * Describes how the dropdown has to be alined - `"start"`: Align to the left in LTR and to the right in RTL. - `"center"`: Align to the left in LTR and to the right in RTL. - `"end"`: Align to the right in LTR and to the left in RTL.
-          * @config 
-          * @default "start"
-         */
-        "align"?: DropdownAlign;
-        /**
-          * Set the amount of time, in milliseconds after the user no longer hover the trigger or dropdown, will dismiss. Only apply on `triggerAction=hover`
-          * @config 
-          * @default 100
-         */
-        "debounce"?: number;
-        /**
-          * Close the dropdown.
-          * @returns return `true` if the dropdown has been closed, otherwise `false`.
-         */
-        "dismiss": (data?: any) => Promise<boolean>;
-        /**
-          * Force the dropdown to be shown
-          * @config 
-          * @default false
-         */
-        "open"?: boolean;
-        /**
-          * Open the dropdown.
-          * @returns return `true` if the dropdown has been opened, otherwise `false`.
-         */
-        "present": () => Promise<boolean>;
-        /**
-          * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented.
-          * @config 
-          * @default false
-         */
-        "showBackdrop"?: boolean;
-        /**
-          * Describe where the content is displayed relatively to the trigger element - `"start"`: Open on the left in LTR and to the right in RTL. - `"end"`: Open on the right in LTR and to the left in RTL. - `"left"`: Open on left - `"right"`: Open on right - `"top"`: Open on top - `"bottom"`: Open on bottom
-          * @config 
-          * @default "bottom"
-         */
-        "side"?: DropdownSide;
-        /**
-          * Toggle the select dropdown
-         */
-        "toggle": () => Promise<boolean>;
-        /**
-          * Describes what kind of intertion with the trigger (sloted element) that should cause the dropdown to open. - `"click"`: the dropdown will be presented when the trigger is left clicked. - `"hover"`: the dropdown will be presented when a pointer hovers over the trigger. - `"context-menu"`: the dropdown will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
-          * @config 
-          * @default "click"
-         */
-        "triggerAction": TriggerAction;
-    }
-    interface PopImg {
-        /**
-          * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
-         */
-        "alt"?: string;
-        /**
-          * The image URL. This attribute is mandatory for the `<img>` element.
-         */
-        "src": string;
-    }
-    /**
-     * Indicators are used to place an element on the corner of another element.
-     */
-    interface PopIndicator {
-        /**
-          * Align vertically the indicator.
-          * @config 
-          * @default "top"
-         */
-        "position"?: IndicatorPosition;
-        /**
-          * Align horizontally the indicator.
-          * @config 
-          * @default "left"
-         */
-        "side"?: IndicatorSide;
-    }
-    /**
-     * Text Input is a simple input field.
-     */
-    interface PopInput {
-        /**
-          * This features work only on mobile and tablet devices. By default the User Agent and input make their own determination.
-          * @config 
-          * @default "off"
-          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization}
-         */
-        "autoCapitalize"?: AutoCapitalize;
-        /**
-          * Indicates whether the value of the control can be automatically completed by the browser.
-         */
-        "autoComplete"?: Autocomplete;
-        /**
-          * If `true`, the element will be focused on page load.
-          * @config 
-          * @default false
-         */
-        "autoFocus"?: boolean;
-        /**
-          * if `true`, adds border to input when `color` property is not set.
-          * @config 
-          * @default false
-         */
-        "bordered"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: InputColor;
-        /**
-          * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
-          * @config 
-          * @default false
-         */
-        "counter"?: boolean;
-        /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
-          * @config
-         */
-        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
-        /**
-          * Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke.
-          * @config 
-          * @default 0
-         */
-        "debounce"?: number;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * A hint to the browser for which keyboard to display. That specifies what action label (or icon) to present for the enter key on virtual keyboards.
-          * @config 
-          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute}
-         */
-        "enterkeyhint"?: EnterKeyHint;
-        /**
-          * Text that is placed under the input and displayed when an error is detected.
-         */
-        "errorText": string;
-        /**
-          * Text that is placed under the input and displayed when no error is detected.
-         */
-        "helperText": string;
-        /**
-          * A hint to the browser for which virtual keyboard to display.
-          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode}
-         */
-        "keyboard"?: KeyboardType;
-        /**
-          * The maximum value, which must not be less than its minimum (min attribute) value.
-          * @config
-         */
-        "max"?: number | string;
-        /**
-          * This attribute specifies the maximum number of characters that the user can enter.
-          * @config
-         */
-        "maxLength"?: number;
-        /**
-          * The minimum value, which must not be greater than its maximum (max attribute) value.
-          * @config
-         */
-        "min"?: number | string;
-        /**
-          * This attribute specifies the minimum number of characters that the user can enter.
-          * @config
-         */
-        "minLength"?: number;
-        /**
-          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
-         */
-        "multiple"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name": string;
-        /**
-          * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.
-         */
-        "pattern"?: string;
-        /**
-          * Instructional text that shows before the input has a value.  This property applies only when the `type` property is set to `"email"`, `"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, or `"url"`, otherwise it is ignored.
-         */
-        "placeholder"?: string;
-        /**
-          * If `true`, the user cannot modify the value.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * Sets focus on the native `input` in `pop-input`. Use this method instead of the global `input.focus()`.
-         */
-        "setFocus": () => Promise<void>;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * If `true`, the element will have its spelling and grammar checked. By default the User Agent make their own default behavior.
-          * @config 
-          * @default false
-         */
-        "spellcheck": boolean;
-        /**
-          * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
-          * @config
-         */
-        "step"?: string;
-        /**
-          * The type of control to display. The default type is text.
-         */
-        "type": InputType;
-        /**
-          * 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>`.
-         */
-        "value"?: string | number | null;
-    }
-    /**
-     * File Input is a an input field for uploading files.
-     */
-    interface PopInputFile {
-        /**
-          * If `true`, the element will be focused on page load.
-          * @config 
-          * @default false
-         */
-        "autoFocus"?: boolean;
-        /**
-          * if `true`, adds border to textarea when `color` property is not set.
-          * @config 
-          * @default false
-         */
-        "bordered"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: InputFileColor;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * Text that is placed under the input-file and displayed when an error is detected.
-         */
-        "errorText": string;
-        /**
-          * Text that is placed under the input-file and displayed when no error is detected.
-         */
-        "helperText": string;
-        /**
-          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
-          * @config 
-          * @default false
-         */
-        "multiple"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name": string;
-        /**
-          * If `true`, the user cannot modify the value.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * Sets focus on the native `input` in `pop-input-file`. Use this method instead of the global `input.focus()`.
-         */
-        "setFocus": () => Promise<void>;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * 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>`.
-          * @default null
-         */
-        "value"?: File | File[] | null;
-    }
-    interface PopItem {
-        /**
-          * If `true`, the user cannot interact with the item.
-          * @config 
-          * @default false
-         */
-        "disabled": boolean;
-    }
-    /**
-     * Join is a container for grouping multiple items, it can be used to group buttons, inputs, or any other element.
-     * Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.
-     */
-    interface PopJoin {
-        /**
-          * Define content disposition orientation
-          * @config 
-          * @default "horizontal"
-         */
-        "orientation": JoinOrientation;
-    }
-    /**
-     * Kbd is used to display keyboard shortcuts.
-     */
-    interface PopKbd {
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-    }
-    interface PopList {
-        /**
-          * Define content disposition orientation
-          * @config 
-          * @default "vertical"
-         */
-        "orientation"?: ListOrientation;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. $
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-    }
-    /**
-     * Loading shows an animation to indicate that something is loading.
-     */
-    interface PopLoading {
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * Apply different animation
-          * @config 
-          * @default "spinner"
-         */
-        "type"?: LoadingType;
-    }
-    /**
-     * Mask crops the content of the element to common shapes.
-     */
-    interface PopMask {
-        /**
-          * Mask that should be applied
-          * @config 
-          * @default "squircle"
-         */
-        "type": MaskType;
-    }
-    /**
-     * Modal is used to show a dialog or a box when you click on the trigger element.
-     */
-    interface PopModal {
-        /**
-          * If `true`, the modal will be dismissed when the backdrop is clicked.
-          * @config 
-          * @default false
-         */
-        "backdropDismiss"?: boolean;
-        /**
-          * The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `pop-popover`.
-         */
-        "component"?: ComponentRef;
-        /**
-          * The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component.
-         */
-        "componentProps"?: ComponentProps;
-        /**
-          * Close the modal
-          * @param data Data to return on close
-          * @returns `true` if the modal has been closed, otherwise `false`.
-         */
-        "dismiss": (data: any) => Promise<boolean>;
-        /**
-          * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `open` will automatically be set back to `false` when the modal dismisses.
-          * @config 
-          * @default false
-         */
-        "open"?: boolean;
-        /**
-          * Open the modal
-          * @returns `true` if the modal has been opened, otherwise `false`.
-         */
-        "present": () => Promise<boolean>;
-        /**
-          * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented.
-          * @config 
-          * @default false
-         */
-        "showBackdrop"?: boolean;
-        /**
-          * An ID corresponding to the trigger element that causes the modal to open when clicked.
-         */
-        "trigger"?: string;
-    }
-    /**
-     * Navbar is used to show a navigation bar on the top of the page.
-     */
-    interface PopNavbar {
-    }
-    interface PopPopover {
-        /**
-          * If `true`, the popover will animate.
-          * @config 
-          * @default false
-         */
-        "animated": any;
-        /**
-          * If `true`, the popover will be dismissed when the backdrop is clicked.
-          * @config 
-          * @default false
-         */
-        "backdropDismiss": boolean;
-        /**
-          * The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `pop-popover`.
-         */
-        "component"?: ComponentRef;
-        /**
-          * The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component.
-         */
-        "componentProps"?: ComponentProps;
-        "dismiss": (data?: any) => Promise<boolean>;
-        /**
-          * The event to pass to the popover animation.
-         */
-        "event": Event;
-        /**
-          * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `open` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.
-          * @config 
-          * @default false
-         */
-        "open": boolean;
-        "present": () => Promise<boolean>;
-        /**
-          * If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM.
-          * @config 
-          * @default false
-         */
-        "showBackdrop": boolean;
-        /**
-          * An ID corresponding to the trigger element that causes the popover to open. Use the `trigger-action` property to customize the interaction that results in the popover opening.
-         */
-        "trigger"?: string;
-        /**
-          * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `"click"`, the popover will be presented when the trigger is left clicked. If `"hover"`, the popover will be presented when a pointer hovers over the trigger. If `"context-menu"`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
-          * @config 
-          * @default "click"
-         */
-        "triggerAction": TriggerAction;
-    }
-    /**
-     * Progress bar can be used to show the progress of a task or to show the passing of time.
-     */
-    interface PopProgress {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: Color;
-        /**
-          * @config 
-          * @default 100
-         */
-        "max"?: number;
-        /**
-          * The value of a progress is analogous to the value of a `<progress>`
-         */
-        "value"?: number;
-    }
-    /**
-     * Radio buttons allow the user to select one option from a set.
-     */
-    interface PopRadio {
-        /**
-          * If `true`, the element will be focused on page load.
-         */
-        "autoFocus"?: boolean;
-        /**
-          * If `true`, the radio is selected.
-         */
-        "checked"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: Color;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name": string;
-        /**
-          * If `true`, the user cannot interact with the element.
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-         */
-        "required"?: boolean;
-        /**
-          * Sets focus on the native `textarea` in `pop-textarea`. Use this method instead of the global `textarea.focus()`.
-         */
-        "setFocus": () => Promise<void>;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * The value of the radio does not mean if it's checked or not, use the `checked` property for that.  The value of a radio is analogous to the value of a `<input type="radio">`, it's only used when the radio participates in a native `<form>`.
-         */
-        "value"?: any | null;
-    }
-    interface PopRadioGroup {
-        /**
-          * If `true`, the radios can be deselected.
-          * @config 
-          * @default false
-         */
-        "allowEmpty"?: boolean;
-        /**
-          * This property allows developers to specify a custom function for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
-          * @config
-         */
-        "compare"?: RadioGroupCompareFn | string | null;
-        /**
-          * If `true`, apply the disabled property to every `pop-radio`.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name": string;
-        /**
-          * If `true`, apply the readonly property to every `pop-radio`.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, apply the required property to every `pop-radio`.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * the value of the radio group.
-         */
-        "value"?: any | null;
-    }
-    /**
-     * Range slider is used to select a value by sliding a handle.
-     */
-    interface PopRange {
-        /**
-          * If `true`, the element will be focused on page load.
-         */
-        "autoFocus"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: RangeColor;
-        /**
-          * Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke.
-          * @config 
-          * @default 0
-         */
-        "debounce"?: number;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * The maximum value, which must not be less than its minimum (min attribute) value.
-          * @config 
-          * @default 100
-         */
-        "max"?: number;
-        /**
-          * The minimum value, which must not be greater than its maximum (max attribute) value.
-          * @config 
-          * @default 0
-         */
-        "min"?: number;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name": string;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * Sets focus on the native `input` in `pop-range`. Use this method instead of the global `input.focus()`.
-         */
-        "setFocus": () => Promise<void>;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * Works with the min and max attributes to limit the increments at which a value can be set.
-          * @config 
-          * @default 1
-         */
-        "step"?: number;
-        /**
-          * 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>`.
-         */
-        "value"?: number | null;
-    }
-    /**
-     * Select is used to pick a value from a list of options.
-     */
-    interface PopSelect {
-        /**
-          * If `true`, the element will be focused on page load.
-         */
-        "autoFocus"?: boolean;
-        /**
-          * if `true`, adds border to select when `color` property is not set.
-          * @config 
-          * @default false
-         */
-        "bordered"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: SelectColor;
-        /**
-          * This property allows developers to specify a custom function for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
-          * @config
-         */
-        "compare"?: SelectCompareFn | string | null;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * Close the select dropdown
-          * @returns `true` if the select dropdown has been closed, otherwise `false`.
-         */
-        "dismiss": () => Promise<boolean>;
-        /**
-          * Text that is placed under the select and displayed when no error is detected.
-         */
-        "helperText"?: string;
-        /**
-          * Only apply when `multiple` property is used. The maximum amount of values that can be selected, which must not be less than its minimum (min attribute) value.
-          * @config
-         */
-        "max"?: number;
-        /**
-          * Only apply when `multiple` property is used. The minimum amount of values that can be selected, which must not be greater than its maximum (max attribute) value.
-          * @config
-         */
-        "min"?: number;
-        /**
-          * If `true`, the user can select more than one value.
-          * @config 
-          * @default false
-         */
-        "multiple"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name": string;
-        /**
-          * Only apply when `multiple` property is used. Text that is placed under the select and displayed when the amount of selected option is below of the `min` property.
-         */
-        "notEnoughErrorText"?: string;
-        /**
-          * Instructional text that shows before the input has a value.  This property replace the `<option disabled selected>`
-         */
-        "placeholder"?: string;
-        /**
-          * Open the select dropdown
-          * @returns `true` if the select dropdown has been opened, otherwise `false`.
-         */
-        "present": () => Promise<boolean>;
-        /**
-          * If `true`, the user cannot modify the value.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * Sets focus on the native `select` in `pop-select`. Use this method instead of the global `select.focus()`.
-         */
-        "setFocus": () => Promise<void>;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * Toggle the select dropdown
-         */
-        "toggle": () => Promise<boolean>;
-        /**
-          * Only apply when `multiple` property is used. Text that is placed under the select and displayed when the amount of selected option is greater of the `max` property.
-         */
-        "tooManyErrorText"?: string;
-        /**
-          * The value of a select is analogous to the value of a `<select>`, it's only used when the toggle participates in a native `<form>`.
-         */
-        "value"?: any | null;
-    }
-    interface PopSelectOption {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-         */
-        "color"?: Color;
-        /**
-          * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
-         */
-        "disabled"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-         */
-        "size"?: Size;
-        /**
-          * The text value of the option.
-         */
-        "value"?: any | null;
-    }
-    /**
-     * Swap allows you to toggle the visibility of two elements.
-     */
-    interface PopSwap {
-        /**
-          * Activates the swap. Show whats inside the slot `on`
-          * @config 
-          * @default false
-         */
-        "active"?: boolean;
-        /**
-          * Choose what animation is used on click.
-          * @config 
-          * @default "rotate"
-         */
-        "type"?: SwapType;
-    }
-    /**
-     * Textarea allows users to enter text in multiple lines.
-     */
-    interface PopTextarea {
-        /**
-          * This features work only on mobile and tablet devices. By default the User Agent and input make their own determination.
-          * @config 
-          * @default "off"
-          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization}
-         */
-        "autoCapitalize"?: AutoCapitalize;
-        /**
-          * If `true`, the element will be focused on page load.
-         */
-        "autoFocus"?: boolean;
-        /**
-          * if `true`, adds border to textarea when `color` property is not set.
-          * @config 
-          * @default false
-         */
-        "bordered"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: TextareaColor;
-        /**
-          * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
-          * @config
-         */
-        "cols"?: number;
-        /**
-          * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
-          * @config 
-          * @default false
-         */
-        "counter"?: boolean;
-        /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
-          * @config
-         */
-        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
-        /**
-          * Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke.
-          * @config 
-          * @default 0
-         */
-        "debounce"?: number;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * A hint to the browser for which keyboard to display. That specifies what action label (or icon) to present for the enter key on virtual keyboards.
-          * @config 
-          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute}
-         */
-        "enterkeyhint"?: EnterKeyHint;
-        /**
-          * Text that is placed under the textarea and displayed when an error is detected.
-         */
-        "errorText": string;
-        /**
-          * Text that is placed under the textarea and displayed when no error is detected.
-         */
-        "helperText": string;
-        /**
-          * A hint to the browser for which virtual keyboard to display.
-          * @config 
-          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode}
-         */
-        "keyboard"?: KeyboardType;
-        /**
-          * This attribute specifies the maximum number of characters that the user can enter.
-          * @config
-         */
-        "maxLength"?: number;
-        /**
-          * This attribute specifies the minimum number of characters that the user can enter.
-          * @config
-         */
-        "minLength"?: number;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name": string;
-        /**
-          * Instructional text that shows before the input has a value.
-         */
-        "placeholder"?: string;
-        /**
-          * If `true`, the user cannot modify the value.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * The number of visible text lines for the control.
-          * @config
-         */
-        "rows"?: number;
-        /**
-          * Sets focus on the native `textarea` in `pop-textarea`. Use this method instead of the global `textarea.focus()`.
-         */
-        "setFocus": () => Promise<void>;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * If `true`, the element will have its spelling and grammar checked. By default the User Agent make their own default behavior.
-          * @config 
-          * @default false
-         */
-        "spellcheck": boolean;
-        /**
-          * The value of the textarea.
-          * @default ""
-         */
-        "value"?: string;
-        /**
-          * Indicates how the control wraps text.  If wrap attribute is in the `hard` state, the `cols` property must be specified.
-          * @config 
-          * @default "soft"
-          * @see cols *
-          * @see {@link https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-wrap}
-         */
-        "wrap"?: Wrap;
-    }
-    /**
-     * Toggle is a checkbox that is styled to look like a switch button.
-     */
-    interface PopToggle {
-        /**
-          * If `true`, the toggle is selected.
-          * @config 
-          * @default false
-         */
-        "checked"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: ToggleColor;
-        /**
-          * If true, the user cannot interact with the native element.
-          * @config 
-          * @default false
-         */
-        "disabled": boolean;
-        /**
-          * If a developer want to use `indeterminate`, `checked` property should be set to `false`
-          * @config 
-          * @default false
-         */
-        "indeterminate"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name": string;
-        /**
-          * If `true`, the user cannot modify the value.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * Sets focus on the native `input` in `pop-toggle`. Use this method instead of the global `input.focus()`.
-         */
-        "setFocus": () => Promise<void>;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * 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>`.
-         */
-        "value"?: string | null;
-    }
-    /**
-     * Tooltip can be used to show a message when hovering over an element.
-     */
-    interface PopTooltip {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: Color;
-        /**
-          * Force open tooltip
-          * @config 
-          * @default false
-         */
-        "open": boolean;
-        /**
-          * Define the position of tooltip By default the tootip appear on top
-          * @config 
-          * @default "top"
-         */
-        "position"?: TooltipPosition;
-        /**
-          * Text to show on hover
-         */
-        "value": string;
-    }
-}
-export interface PopAccordionGroupCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopAccordionGroupElement;
-}
-export interface PopButtonCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopButtonElement;
-}
-export interface PopCheckboxCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopCheckboxElement;
-}
-export interface PopDrawerCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopDrawerElement;
-}
-export interface PopDropdownCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopDropdownElement;
-}
-export interface PopImgCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopImgElement;
-}
-export interface PopInputCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopInputElement;
-}
-export interface PopInputFileCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopInputFileElement;
-}
-export interface PopModalCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopModalElement;
-}
-export interface PopPopoverCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopPopoverElement;
-}
-export interface PopRadioCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopRadioElement;
-}
-export interface PopRadioGroupCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopRadioGroupElement;
-}
-export interface PopRangeCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopRangeElement;
-}
-export interface PopSelectCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopSelectElement;
-}
-export interface PopSwapCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopSwapElement;
-}
-export interface PopTextareaCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopTextareaElement;
-}
-export interface PopToggleCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLPopToggleElement;
-}
-declare global {
-    /**
-     * Accordion is used for showing and hiding content.
-     */
-    interface HTMLPopAccordionElement extends Components.PopAccordion, HTMLStencilElement {
-    }
-    var HTMLPopAccordionElement: {
-        prototype: HTMLPopAccordionElement;
-        new (): HTMLPopAccordionElement;
-    };
-    interface HTMLPopAccordionGroupElementEventMap {
-        "popChange": AccordionGroupChangeEventDetail;
-        "popActiveChange": AccordionGroupChangeEventDetail;
-    }
-    interface HTMLPopAccordionGroupElement extends Components.PopAccordionGroup, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopAccordionGroupElementEventMap>(type: K, listener: (this: HTMLPopAccordionGroupElement, ev: PopAccordionGroupCustomEvent<HTMLPopAccordionGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopAccordionGroupElementEventMap>(type: K, listener: (this: HTMLPopAccordionGroupElement, ev: PopAccordionGroupCustomEvent<HTMLPopAccordionGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopAccordionGroupElement: {
-        prototype: HTMLPopAccordionGroupElement;
-        new (): HTMLPopAccordionGroupElement;
-    };
-    /**
-     * Avatars are used to show a thumbnail representation of an individual or business in the interface.
-     */
-    interface HTMLPopAvatarElement extends Components.PopAvatar, HTMLStencilElement {
-    }
-    var HTMLPopAvatarElement: {
-        prototype: HTMLPopAvatarElement;
-        new (): HTMLPopAvatarElement;
-    };
-    /**
-     * Badges are used to inform the user of the status of specific data.
-     */
-    interface HTMLPopBadgeElement extends Components.PopBadge, HTMLStencilElement {
-    }
-    var HTMLPopBadgeElement: {
-        prototype: HTMLPopBadgeElement;
-        new (): HTMLPopBadgeElement;
-    };
-    interface HTMLPopButtonElementEventMap {
-        "popFocus": void;
-        "popBlur": void;
-    }
-    /**
-     * Buttons allow the user to take actions or make choices.
-     */
-    interface HTMLPopButtonElement extends Components.PopButton, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopButtonElementEventMap>(type: K, listener: (this: HTMLPopButtonElement, ev: PopButtonCustomEvent<HTMLPopButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopButtonElementEventMap>(type: K, listener: (this: HTMLPopButtonElement, ev: PopButtonCustomEvent<HTMLPopButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopButtonElement: {
-        prototype: HTMLPopButtonElement;
-        new (): HTMLPopButtonElement;
-    };
-    /**
-     * Cards are used to group and display content in a way that is easily readable.
-     */
-    interface HTMLPopCardElement extends Components.PopCard, HTMLStencilElement {
-    }
-    var HTMLPopCardElement: {
-        prototype: HTMLPopCardElement;
-        new (): HTMLPopCardElement;
-    };
-    /**
-     * Cards are used to group and display content in a way that is easily readable.
-     */
-    interface HTMLPopCardActionsElement extends Components.PopCardActions, HTMLStencilElement {
-    }
-    var HTMLPopCardActionsElement: {
-        prototype: HTMLPopCardActionsElement;
-        new (): HTMLPopCardActionsElement;
-    };
-    /**
-     * Cards are used to group and display content in a way that is easily readable.
-     */
-    interface HTMLPopCardBodyElement extends Components.PopCardBody, HTMLStencilElement {
-    }
-    var HTMLPopCardBodyElement: {
-        prototype: HTMLPopCardBodyElement;
-        new (): HTMLPopCardBodyElement;
-    };
-    /**
-     * Cards are used to group and display content in a way that is easily readable.
-     */
-    interface HTMLPopCardTitleElement extends Components.PopCardTitle, HTMLStencilElement {
-    }
-    var HTMLPopCardTitleElement: {
-        prototype: HTMLPopCardTitleElement;
-        new (): HTMLPopCardTitleElement;
-    };
-    interface HTMLPopCheckboxElementEventMap {
-        "popChange": CheckboxChangeEventDetail;
-        "popFocus": void;
-        "popBlur": void;
-    }
-    /**
-     * Toggles are switches that change the state of a single option.
-     * They can be switched on or off by pressing.
-     * Toggles can also be `"checked"` programmatically by setting the checked property.
-     */
-    interface HTMLPopCheckboxElement extends Components.PopCheckbox, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopCheckboxElementEventMap>(type: K, listener: (this: HTMLPopCheckboxElement, ev: PopCheckboxCustomEvent<HTMLPopCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopCheckboxElementEventMap>(type: K, listener: (this: HTMLPopCheckboxElement, ev: PopCheckboxCustomEvent<HTMLPopCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopCheckboxElement: {
-        prototype: HTMLPopCheckboxElement;
-        new (): HTMLPopCheckboxElement;
-    };
-    /**
-     * Divider will be used to separate content vertically or horizontally.
-     */
-    interface HTMLPopDividerElement extends Components.PopDivider, HTMLStencilElement {
-    }
-    var HTMLPopDividerElement: {
-        prototype: HTMLPopDividerElement;
-        new (): HTMLPopDividerElement;
-    };
-    interface HTMLPopDrawerElementEventMap {
-        "popDidPresent": void;
-        "popDidDismiss": void;
-    }
-    /**
-     * Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
-     */
-    interface HTMLPopDrawerElement extends Components.PopDrawer, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopDrawerElementEventMap>(type: K, listener: (this: HTMLPopDrawerElement, ev: PopDrawerCustomEvent<HTMLPopDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopDrawerElementEventMap>(type: K, listener: (this: HTMLPopDrawerElement, ev: PopDrawerCustomEvent<HTMLPopDrawerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopDrawerElement: {
-        prototype: HTMLPopDrawerElement;
-        new (): HTMLPopDrawerElement;
-    };
-    interface HTMLPopDropdownElementEventMap {
-        "present": void;
-        "dismiss": void;
-    }
-    /**
-     * Dropdown can open a menu or any other element when the trigger element is clicked.
-     */
-    interface HTMLPopDropdownElement extends Components.PopDropdown, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopDropdownElementEventMap>(type: K, listener: (this: HTMLPopDropdownElement, ev: PopDropdownCustomEvent<HTMLPopDropdownElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopDropdownElementEventMap>(type: K, listener: (this: HTMLPopDropdownElement, ev: PopDropdownCustomEvent<HTMLPopDropdownElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopDropdownElement: {
-        prototype: HTMLPopDropdownElement;
-        new (): HTMLPopDropdownElement;
-    };
-    interface HTMLPopImgElementEventMap {
-        "popWillLoad": void;
-        "popDidLoad": void;
-        "popError": void;
-    }
-    interface HTMLPopImgElement extends Components.PopImg, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopImgElementEventMap>(type: K, listener: (this: HTMLPopImgElement, ev: PopImgCustomEvent<HTMLPopImgElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopImgElementEventMap>(type: K, listener: (this: HTMLPopImgElement, ev: PopImgCustomEvent<HTMLPopImgElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopImgElement: {
-        prototype: HTMLPopImgElement;
-        new (): HTMLPopImgElement;
-    };
-    /**
-     * Indicators are used to place an element on the corner of another element.
-     */
-    interface HTMLPopIndicatorElement extends Components.PopIndicator, HTMLStencilElement {
-    }
-    var HTMLPopIndicatorElement: {
-        prototype: HTMLPopIndicatorElement;
-        new (): HTMLPopIndicatorElement;
-    };
-    interface HTMLPopInputElementEventMap {
-        "popChange": InputChangeEventDetail;
-        "popInput": InputInputEventDetail;
-        "popFocus": void;
-        "popBlur": void;
-    }
-    /**
-     * Text Input is a simple input field.
-     */
-    interface HTMLPopInputElement extends Components.PopInput, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopInputElementEventMap>(type: K, listener: (this: HTMLPopInputElement, ev: PopInputCustomEvent<HTMLPopInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopInputElementEventMap>(type: K, listener: (this: HTMLPopInputElement, ev: PopInputCustomEvent<HTMLPopInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopInputElement: {
-        prototype: HTMLPopInputElement;
-        new (): HTMLPopInputElement;
-    };
-    interface HTMLPopInputFileElementEventMap {
-        "popChange": InputFileChangeEventDetail;
-        "popFocus": void;
-        "popBlur": void;
-    }
-    /**
-     * File Input is a an input field for uploading files.
-     */
-    interface HTMLPopInputFileElement extends Components.PopInputFile, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopInputFileElementEventMap>(type: K, listener: (this: HTMLPopInputFileElement, ev: PopInputFileCustomEvent<HTMLPopInputFileElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopInputFileElementEventMap>(type: K, listener: (this: HTMLPopInputFileElement, ev: PopInputFileCustomEvent<HTMLPopInputFileElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopInputFileElement: {
-        prototype: HTMLPopInputFileElement;
-        new (): HTMLPopInputFileElement;
-    };
-    interface HTMLPopItemElement extends Components.PopItem, HTMLStencilElement {
-    }
-    var HTMLPopItemElement: {
-        prototype: HTMLPopItemElement;
-        new (): HTMLPopItemElement;
-    };
-    /**
-     * Join is a container for grouping multiple items, it can be used to group buttons, inputs, or any other element.
-     * Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.
-     */
-    interface HTMLPopJoinElement extends Components.PopJoin, HTMLStencilElement {
-    }
-    var HTMLPopJoinElement: {
-        prototype: HTMLPopJoinElement;
-        new (): HTMLPopJoinElement;
-    };
-    /**
-     * Kbd is used to display keyboard shortcuts.
-     */
-    interface HTMLPopKbdElement extends Components.PopKbd, HTMLStencilElement {
-    }
-    var HTMLPopKbdElement: {
-        prototype: HTMLPopKbdElement;
-        new (): HTMLPopKbdElement;
-    };
-    interface HTMLPopListElement extends Components.PopList, HTMLStencilElement {
-    }
-    var HTMLPopListElement: {
-        prototype: HTMLPopListElement;
-        new (): HTMLPopListElement;
-    };
-    /**
-     * Loading shows an animation to indicate that something is loading.
-     */
-    interface HTMLPopLoadingElement extends Components.PopLoading, HTMLStencilElement {
-    }
-    var HTMLPopLoadingElement: {
-        prototype: HTMLPopLoadingElement;
-        new (): HTMLPopLoadingElement;
-    };
-    /**
-     * Mask crops the content of the element to common shapes.
-     */
-    interface HTMLPopMaskElement extends Components.PopMask, HTMLStencilElement {
-    }
-    var HTMLPopMaskElement: {
-        prototype: HTMLPopMaskElement;
-        new (): HTMLPopMaskElement;
-    };
-    interface HTMLPopModalElementEventMap {
-        "present": void;
-        "dismiss": void;
-    }
-    /**
-     * Modal is used to show a dialog or a box when you click on the trigger element.
-     */
-    interface HTMLPopModalElement extends Components.PopModal, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopModalElementEventMap>(type: K, listener: (this: HTMLPopModalElement, ev: PopModalCustomEvent<HTMLPopModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopModalElementEventMap>(type: K, listener: (this: HTMLPopModalElement, ev: PopModalCustomEvent<HTMLPopModalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopModalElement: {
-        prototype: HTMLPopModalElement;
-        new (): HTMLPopModalElement;
-    };
-    /**
-     * Navbar is used to show a navigation bar on the top of the page.
-     */
-    interface HTMLPopNavbarElement extends Components.PopNavbar, HTMLStencilElement {
-    }
-    var HTMLPopNavbarElement: {
-        prototype: HTMLPopNavbarElement;
-        new (): HTMLPopNavbarElement;
-    };
-    interface HTMLPopPopoverElementEventMap {
-        "willPresent": void;
-        "didPresent": void;
-        "willDismiss": void;
-        "didDismiss": void;
-    }
-    interface HTMLPopPopoverElement extends Components.PopPopover, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopPopoverElementEventMap>(type: K, listener: (this: HTMLPopPopoverElement, ev: PopPopoverCustomEvent<HTMLPopPopoverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopPopoverElementEventMap>(type: K, listener: (this: HTMLPopPopoverElement, ev: PopPopoverCustomEvent<HTMLPopPopoverElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopPopoverElement: {
-        prototype: HTMLPopPopoverElement;
-        new (): HTMLPopPopoverElement;
-    };
-    /**
-     * Progress bar can be used to show the progress of a task or to show the passing of time.
-     */
-    interface HTMLPopProgressElement extends Components.PopProgress, HTMLStencilElement {
-    }
-    var HTMLPopProgressElement: {
-        prototype: HTMLPopProgressElement;
-        new (): HTMLPopProgressElement;
-    };
-    interface HTMLPopRadioElementEventMap {
-        "popFocus": void;
-        "popBlur": void;
-    }
-    /**
-     * Radio buttons allow the user to select one option from a set.
-     */
-    interface HTMLPopRadioElement extends Components.PopRadio, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopRadioElementEventMap>(type: K, listener: (this: HTMLPopRadioElement, ev: PopRadioCustomEvent<HTMLPopRadioElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopRadioElementEventMap>(type: K, listener: (this: HTMLPopRadioElement, ev: PopRadioCustomEvent<HTMLPopRadioElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopRadioElement: {
-        prototype: HTMLPopRadioElement;
-        new (): HTMLPopRadioElement;
-    };
-    interface HTMLPopRadioGroupElementEventMap {
-        "popChange": RadioGroupChangeEventDetail;
-        "popValueChange": RadioGroupChangeEventDetail;
-    }
-    interface HTMLPopRadioGroupElement extends Components.PopRadioGroup, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopRadioGroupElementEventMap>(type: K, listener: (this: HTMLPopRadioGroupElement, ev: PopRadioGroupCustomEvent<HTMLPopRadioGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopRadioGroupElementEventMap>(type: K, listener: (this: HTMLPopRadioGroupElement, ev: PopRadioGroupCustomEvent<HTMLPopRadioGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopRadioGroupElement: {
-        prototype: HTMLPopRadioGroupElement;
-        new (): HTMLPopRadioGroupElement;
-    };
-    interface HTMLPopRangeElementEventMap {
-        "popChange": RangeChangeEventDetail;
-        "popFocus": void;
-        "popBlur": void;
-    }
-    /**
-     * Range slider is used to select a value by sliding a handle.
-     */
-    interface HTMLPopRangeElement extends Components.PopRange, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopRangeElementEventMap>(type: K, listener: (this: HTMLPopRangeElement, ev: PopRangeCustomEvent<HTMLPopRangeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopRangeElementEventMap>(type: K, listener: (this: HTMLPopRangeElement, ev: PopRangeCustomEvent<HTMLPopRangeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopRangeElement: {
-        prototype: HTMLPopRangeElement;
-        new (): HTMLPopRangeElement;
-    };
-    interface HTMLPopSelectElementEventMap {
-        "present": void;
-        "dismiss": void;
-        "popChange": SelectChangeEventDetail;
-        "popFocus": void;
-        "popBlur": void;
-    }
-    /**
-     * Select is used to pick a value from a list of options.
-     */
-    interface HTMLPopSelectElement extends Components.PopSelect, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopSelectElementEventMap>(type: K, listener: (this: HTMLPopSelectElement, ev: PopSelectCustomEvent<HTMLPopSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopSelectElementEventMap>(type: K, listener: (this: HTMLPopSelectElement, ev: PopSelectCustomEvent<HTMLPopSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopSelectElement: {
-        prototype: HTMLPopSelectElement;
-        new (): HTMLPopSelectElement;
-    };
-    interface HTMLPopSelectOptionElement extends Components.PopSelectOption, HTMLStencilElement {
-    }
-    var HTMLPopSelectOptionElement: {
-        prototype: HTMLPopSelectOptionElement;
-        new (): HTMLPopSelectOptionElement;
-    };
-    interface HTMLPopSwapElementEventMap {
-        "popSwap": SwapChangeEventDetail;
-    }
-    /**
-     * Swap allows you to toggle the visibility of two elements.
-     */
-    interface HTMLPopSwapElement extends Components.PopSwap, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopSwapElementEventMap>(type: K, listener: (this: HTMLPopSwapElement, ev: PopSwapCustomEvent<HTMLPopSwapElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopSwapElementEventMap>(type: K, listener: (this: HTMLPopSwapElement, ev: PopSwapCustomEvent<HTMLPopSwapElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopSwapElement: {
-        prototype: HTMLPopSwapElement;
-        new (): HTMLPopSwapElement;
-    };
-    interface HTMLPopTextareaElementEventMap {
-        "popChange": TextareaChangeEventDetail;
-        "popInput": TextareaInputEventDetail;
-        "popFocus": void;
-        "popBlur": void;
-    }
-    /**
-     * Textarea allows users to enter text in multiple lines.
-     */
-    interface HTMLPopTextareaElement extends Components.PopTextarea, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopTextareaElementEventMap>(type: K, listener: (this: HTMLPopTextareaElement, ev: PopTextareaCustomEvent<HTMLPopTextareaElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopTextareaElementEventMap>(type: K, listener: (this: HTMLPopTextareaElement, ev: PopTextareaCustomEvent<HTMLPopTextareaElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopTextareaElement: {
-        prototype: HTMLPopTextareaElement;
-        new (): HTMLPopTextareaElement;
-    };
-    interface HTMLPopToggleElementEventMap {
-        "popChange": ToggleChangeEventDetail;
-        "popFocus": void;
-        "popBlur": void;
-    }
-    /**
-     * Toggle is a checkbox that is styled to look like a switch button.
-     */
-    interface HTMLPopToggleElement extends Components.PopToggle, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPopToggleElementEventMap>(type: K, listener: (this: HTMLPopToggleElement, ev: PopToggleCustomEvent<HTMLPopToggleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPopToggleElementEventMap>(type: K, listener: (this: HTMLPopToggleElement, ev: PopToggleCustomEvent<HTMLPopToggleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLPopToggleElement: {
-        prototype: HTMLPopToggleElement;
-        new (): HTMLPopToggleElement;
-    };
-    /**
-     * Tooltip can be used to show a message when hovering over an element.
-     */
-    interface HTMLPopTooltipElement extends Components.PopTooltip, HTMLStencilElement {
-    }
-    var HTMLPopTooltipElement: {
-        prototype: HTMLPopTooltipElement;
-        new (): HTMLPopTooltipElement;
-    };
-    interface HTMLElementTagNameMap {
-        "pop-accordion": HTMLPopAccordionElement;
-        "pop-accordion-group": HTMLPopAccordionGroupElement;
-        "pop-avatar": HTMLPopAvatarElement;
-        "pop-badge": HTMLPopBadgeElement;
-        "pop-button": HTMLPopButtonElement;
-        "pop-card": HTMLPopCardElement;
-        "pop-card-actions": HTMLPopCardActionsElement;
-        "pop-card-body": HTMLPopCardBodyElement;
-        "pop-card-title": HTMLPopCardTitleElement;
-        "pop-checkbox": HTMLPopCheckboxElement;
-        "pop-divider": HTMLPopDividerElement;
-        "pop-drawer": HTMLPopDrawerElement;
-        "pop-dropdown": HTMLPopDropdownElement;
-        "pop-img": HTMLPopImgElement;
-        "pop-indicator": HTMLPopIndicatorElement;
-        "pop-input": HTMLPopInputElement;
-        "pop-input-file": HTMLPopInputFileElement;
-        "pop-item": HTMLPopItemElement;
-        "pop-join": HTMLPopJoinElement;
-        "pop-kbd": HTMLPopKbdElement;
-        "pop-list": HTMLPopListElement;
-        "pop-loading": HTMLPopLoadingElement;
-        "pop-mask": HTMLPopMaskElement;
-        "pop-modal": HTMLPopModalElement;
-        "pop-navbar": HTMLPopNavbarElement;
-        "pop-popover": HTMLPopPopoverElement;
-        "pop-progress": HTMLPopProgressElement;
-        "pop-radio": HTMLPopRadioElement;
-        "pop-radio-group": HTMLPopRadioGroupElement;
-        "pop-range": HTMLPopRangeElement;
-        "pop-select": HTMLPopSelectElement;
-        "pop-select-option": HTMLPopSelectOptionElement;
-        "pop-swap": HTMLPopSwapElement;
-        "pop-textarea": HTMLPopTextareaElement;
-        "pop-toggle": HTMLPopToggleElement;
-        "pop-tooltip": HTMLPopTooltipElement;
-    }
-}
-declare namespace LocalJSX {
-    /**
-     * Accordion is used for showing and hiding content.
-     */
-    interface PopAccordion {
-        /**
-          * If `true`, the user cannot interact with the element.
-         */
-        "disabled"?: boolean;
-        /**
-          * name of the accordion
-         */
-        "name": string;
-        /**
-          * If `true`, the accordion is open.  The developer must not set this value to `true` if the accordion is used in `<accordion-group>` element and set the active property to the name of the accordion.
-         */
-        "open"?: boolean;
-        /**
-          * If `true`, the user cannot interact with the element.
-         */
-        "readonly"?: boolean;
-    }
-    interface PopAccordionGroup {
-        /**
-          * name of the active the accordion.
-         */
-        "active"?: string | string[];
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * If `true`, the user can open multiple accordion.
-          * @config 
-          * @default false
-         */
-        "multiple"?: boolean;
-        /**
-          * Emitted when the `active` property has changed. This is used to ensure that `pop-accordion` can respond to any value property changes from the group.
-         */
-        "onPopActiveChange"?: (event: PopAccordionGroupCustomEvent<AccordionGroupChangeEventDetail>) => void;
-        /**
-          * The `popChange` event is fired when the user select an open of close an accordion.
-         */
-        "onPopChange"?: (event: PopAccordionGroupCustomEvent<AccordionGroupChangeEventDetail>) => void;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-    }
-    /**
-     * Avatars are used to show a thumbnail representation of an individual or business in the interface.
-     */
-    interface PopAvatar {
-        /**
-          * To show some letters as avatar placeholder
-          * @config 
-          * @default false
-         */
-        "placeholder"?: boolean;
-    }
-    /**
-     * Badges are used to inform the user of the status of specific data.
-     */
-    interface PopBadge {
-        /**
-          * Used HTML element for
-          * @config 
-          * @default "div"
-         */
-        "as"?: BadgeAs;
-        /**
-          * The color to use from your application's color palette. Default options are: `"neutral"`, `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: BadgeColor;
-        /**
-          * Transparent Badge with colored border
-          * @config 
-          * @default false
-         */
-        "outlined"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-    }
-    /**
-     * Buttons allow the user to take actions or make choices.
-     */
-    interface PopButton {
-        /**
-          * Force the button to have `hover` style
-          * @config 
-          * @default false
-         */
-        "active"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"neutral"`, `"ghost"`, `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: ButtonColor;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * `wide` Add more horizontal padding `block` make a full width button
-          * @config
-         */
-        "expand"?: ButtonExpand;
-        /**
-          * The HTML form element id. Used to submit a form when the button is not a child of the form.
-         */
-        "form"?: string | HTMLFormElement;
-        /**
-          * Emitted when the button loses focus.
-         */
-        "onPopBlur"?: (event: PopButtonCustomEvent<void>) => void;
-        /**
-          * Emitted when the button has focus.
-         */
-        "onPopFocus"?: (event: PopButtonCustomEvent<void>) => void;
-        /**
-          * Transparent Button with colored border
-          * @config 
-          * @default false
-         */
-        "outlined"?: boolean;
-        /**
-          * `square` set button width and heigth with 1:1 ratio `round` set button width and heigth with 1:1 ratio and rounded corners.
-          * @config
-         */
-        "shape"?: ButtonShape;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * The type of the button.
-         */
-        "type"?: ButtonType;
-    }
-    /**
-     * Cards are used to group and display content in a way that is easily readable.
-     */
-    interface PopCard {
-        /**
-          * Applies smaller padding
-          * @config 
-          * @default false
-         */
-        "compact"?: boolean;
-    }
-    /**
-     * Cards are used to group and display content in a way that is easily readable.
-     */
-    interface PopCardActions {
-    }
-    /**
-     * Cards are used to group and display content in a way that is easily readable.
-     */
-    interface PopCardBody {
-    }
-    /**
-     * Cards are used to group and display content in a way that is easily readable.
-     */
-    interface PopCardTitle {
-    }
-    /**
-     * Toggles are switches that change the state of a single option.
-     * They can be switched on or off by pressing.
-     * Toggles can also be `"checked"` programmatically by setting the checked property.
-     */
-    interface PopCheckbox {
-        /**
-          * If `true`, the toggle is selected.
-          * @config 
-          * @default false
-         */
-        "checked"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: Color;
-        /**
-          * If true, the user cannot interact with the native element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * If a developer want to use `indeterminate`, `checked` property should be set to `false`
-          * @config 
-          * @default false
-         */
-        "indeterminate"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * Emitted when the input loses focus.
-         */
-        "onPopBlur"?: (event: PopCheckboxCustomEvent<void>) => void;
-        /**
-          * Emitted when the user switches the toggle on or off.
-         */
-        "onPopChange"?: (event: PopCheckboxCustomEvent<CheckboxChangeEventDetail>) => void;
-        /**
-          * Emitted when the input has focus.
-         */
-        "onPopFocus"?: (event: PopCheckboxCustomEvent<void>) => void;
-        /**
-          * Where to place the label relative to the checkbox. - `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. - `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
-          * @config 
-          * @default "start"
-         */
-        "placement"?: CheckboxPlacement;
-        /**
-          * If `true`, the user cannot modify the value.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * 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>`.
-         */
-        "value"?: string | null;
-    }
-    /**
-     * Divider will be used to separate content vertically or horizontally.
-     */
-    interface PopDivider {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"neutral"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: DividerColor;
-        /**
-          * Define content disposition orientation
-          * @config 
-          * @default "horizontal"
-         */
-        "orientation"?: DividerOrientation;
-        /**
-          * Where to place the content. - `"left"`: The content will appear to the left of the divider in LTR and RTL. - `"start"`: The content will appear to the left of the divider in LTR and to the right in RTL. - `"center"`: The content will appear to the center of the divider. - `"end"`: The content will appear to the right of the divider in LTR and to the left in RTL. - `"right"`: The content will appear to the right of the divider in LTR and RTL.
-          * @config 
-          * @default "center"
-         */
-        "placement"?: DividerPlacement;
-    }
-    /**
-     * Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
-     */
-    interface PopDrawer {
-        /**
-          * Emitted when the drawer has been opened.
-         */
-        "onPopDidDismiss"?: (event: PopDrawerCustomEvent<void>) => void;
-        /**
-          * Emitted when the drawer has been opened.
-         */
-        "onPopDidPresent"?: (event: PopDrawerCustomEvent<void>) => void;
-        /**
-          * Forces the drawer to be open
-          * @config 
-          * @default false
-         */
-        "open"?: boolean;
-        /**
-          * Where to place the sidebar relative to the screen. - `"start"`: The sidebar will appear to the left of the screen in LTR and to the right in RTL. - `"end"`: The sidebar will appear to the right of the screen in LTR and to the left in RTL.
-          * @config 
-          * @default "start"
-         */
-        "side"?: DrawerSide;
-        /**
-          * An ID corresponding to the trigger element that causes the drawer to open. Use the `trigger-action` property to customize the interaction that results in the sidebar opening.
-         */
-        "trigger"?: string;
-        /**
-          * Describes what kind of interaction with the trigger that should cause the sidebar to open. Does not apply when the `trigger` property is `undefined`. - `"click"`: the sidebar will be presented when the trigger is left clicked. - `"hover"`: the sidebar will be presented when a pointer hovers over the trigger. - `"context-menu"`: the sidebar will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
-          * @config 
-          * @default "click"
-         */
-        "triggerAction"?: TriggerAction;
-    }
-    /**
-     * Dropdown can open a menu or any other element when the trigger element is clicked.
-     */
-    interface PopDropdown {
-        /**
-          * Describes how the dropdown has to be alined - `"start"`: Align to the left in LTR and to the right in RTL. - `"center"`: Align to the left in LTR and to the right in RTL. - `"end"`: Align to the right in LTR and to the left in RTL.
-          * @config 
-          * @default "start"
-         */
-        "align"?: DropdownAlign;
-        /**
-          * Set the amount of time, in milliseconds after the user no longer hover the trigger or dropdown, will dismiss. Only apply on `triggerAction=hover`
-          * @config 
-          * @default 100
-         */
-        "debounce"?: number;
-        /**
-          * Emitted after the modal has dismissed.
-         */
-        "onDismiss"?: (event: PopDropdownCustomEvent<void>) => void;
-        /**
-          * Emitted after the modal has presented.
-         */
-        "onPresent"?: (event: PopDropdownCustomEvent<void>) => void;
-        /**
-          * Force the dropdown to be shown
-          * @config 
-          * @default false
-         */
-        "open"?: boolean;
-        /**
-          * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented.
-          * @config 
-          * @default false
-         */
-        "showBackdrop"?: boolean;
-        /**
-          * Describe where the content is displayed relatively to the trigger element - `"start"`: Open on the left in LTR and to the right in RTL. - `"end"`: Open on the right in LTR and to the left in RTL. - `"left"`: Open on left - `"right"`: Open on right - `"top"`: Open on top - `"bottom"`: Open on bottom
-          * @config 
-          * @default "bottom"
-         */
-        "side"?: DropdownSide;
-        /**
-          * Describes what kind of intertion with the trigger (sloted element) that should cause the dropdown to open. - `"click"`: the dropdown will be presented when the trigger is left clicked. - `"hover"`: the dropdown will be presented when a pointer hovers over the trigger. - `"context-menu"`: the dropdown will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
-          * @config 
-          * @default "click"
-         */
-        "triggerAction"?: TriggerAction;
-    }
-    interface PopImg {
-        /**
-          * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
-         */
-        "alt"?: string;
-        /**
-          * Emitted when the image has finished loading
-         */
-        "onPopDidLoad"?: (event: PopImgCustomEvent<void>) => void;
-        /**
-          * Emitted when the img fails to load
-         */
-        "onPopError"?: (event: PopImgCustomEvent<void>) => void;
-        /**
-          * Emitted when the img src has been set
-         */
-        "onPopWillLoad"?: (event: PopImgCustomEvent<void>) => void;
-        /**
-          * The image URL. This attribute is mandatory for the `<img>` element.
-         */
-        "src"?: string;
-    }
-    /**
-     * Indicators are used to place an element on the corner of another element.
-     */
-    interface PopIndicator {
-        /**
-          * Align vertically the indicator.
-          * @config 
-          * @default "top"
-         */
-        "position"?: IndicatorPosition;
-        /**
-          * Align horizontally the indicator.
-          * @config 
-          * @default "left"
-         */
-        "side"?: IndicatorSide;
-    }
-    /**
-     * Text Input is a simple input field.
-     */
-    interface PopInput {
-        /**
-          * This features work only on mobile and tablet devices. By default the User Agent and input make their own determination.
-          * @config 
-          * @default "off"
-          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization}
-         */
-        "autoCapitalize"?: AutoCapitalize;
-        /**
-          * Indicates whether the value of the control can be automatically completed by the browser.
-         */
-        "autoComplete"?: Autocomplete;
-        /**
-          * If `true`, the element will be focused on page load.
-          * @config 
-          * @default false
-         */
-        "autoFocus"?: boolean;
-        /**
-          * if `true`, adds border to input when `color` property is not set.
-          * @config 
-          * @default false
-         */
-        "bordered"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: InputColor;
-        /**
-          * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
-          * @config 
-          * @default false
-         */
-        "counter"?: boolean;
-        /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
-          * @config
-         */
-        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
-        /**
-          * Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke.
-          * @config 
-          * @default 0
-         */
-        "debounce"?: number;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * A hint to the browser for which keyboard to display. That specifies what action label (or icon) to present for the enter key on virtual keyboards.
-          * @config 
-          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute}
-         */
-        "enterkeyhint"?: EnterKeyHint;
-        /**
-          * Text that is placed under the input and displayed when an error is detected.
-         */
-        "errorText"?: string;
-        /**
-          * Text that is placed under the input and displayed when no error is detected.
-         */
-        "helperText"?: string;
-        /**
-          * A hint to the browser for which virtual keyboard to display.
-          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode}
-         */
-        "keyboard"?: KeyboardType;
-        /**
-          * The maximum value, which must not be less than its minimum (min attribute) value.
-          * @config
-         */
-        "max"?: number | string;
-        /**
-          * This attribute specifies the maximum number of characters that the user can enter.
-          * @config
-         */
-        "maxLength"?: number;
-        /**
-          * The minimum value, which must not be greater than its maximum (max attribute) value.
-          * @config
-         */
-        "min"?: number | string;
-        /**
-          * This attribute specifies the minimum number of characters that the user can enter.
-          * @config
-         */
-        "minLength"?: number;
-        /**
-          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
-         */
-        "multiple"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * Emitted when the input loses focus.
-         */
-        "onPopBlur"?: (event: PopInputCustomEvent<void>) => void;
-        /**
-          * The `popChange` event is fired when the user modifies the input's value. Unlike the ionInput event, the `popChange` event is fired when the element loses focus after its value has been modified.
-         */
-        "onPopChange"?: (event: PopInputCustomEvent<InputChangeEventDetail>) => void;
-        /**
-          * Emitted when the input has focus.
-         */
-        "onPopFocus"?: (event: PopInputCustomEvent<void>) => void;
-        /**
-          * The `popInput` event is fired each time the user modifies the Input's value. Unlike the `popChange` event, the `popInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types.  This event can be debounced by the `debounce` property.
-         */
-        "onPopInput"?: (event: PopInputCustomEvent<InputInputEventDetail>) => void;
-        /**
-          * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.
-         */
-        "pattern"?: string;
-        /**
-          * Instructional text that shows before the input has a value.  This property applies only when the `type` property is set to `"email"`, `"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, or `"url"`, otherwise it is ignored.
-         */
-        "placeholder"?: string;
-        /**
-          * If `true`, the user cannot modify the value.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * If `true`, the element will have its spelling and grammar checked. By default the User Agent make their own default behavior.
-          * @config 
-          * @default false
-         */
-        "spellcheck"?: boolean;
-        /**
-          * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
-          * @config
-         */
-        "step"?: string;
-        /**
-          * The type of control to display. The default type is text.
-         */
-        "type"?: InputType;
-        /**
-          * 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>`.
-         */
-        "value"?: string | number | null;
-    }
-    /**
-     * File Input is a an input field for uploading files.
-     */
-    interface PopInputFile {
-        /**
-          * If `true`, the element will be focused on page load.
-          * @config 
-          * @default false
-         */
-        "autoFocus"?: boolean;
-        /**
-          * if `true`, adds border to textarea when `color` property is not set.
-          * @config 
-          * @default false
-         */
-        "bordered"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: InputFileColor;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * Text that is placed under the input-file and displayed when an error is detected.
-         */
-        "errorText"?: string;
-        /**
-          * Text that is placed under the input-file and displayed when no error is detected.
-         */
-        "helperText"?: string;
-        /**
-          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
-          * @config 
-          * @default false
-         */
-        "multiple"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * Emitted when the input loses focus.
-         */
-        "onPopBlur"?: (event: PopInputFileCustomEvent<void>) => void;
-        /**
-          * The `popChange` event is fired when the user modifies the input-file's value.
-         */
-        "onPopChange"?: (event: PopInputFileCustomEvent<InputFileChangeEventDetail>) => void;
-        /**
-          * Emitted when the input has focus.
-         */
-        "onPopFocus"?: (event: PopInputFileCustomEvent<void>) => void;
-        /**
-          * If `true`, the user cannot modify the value.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * 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>`.
-          * @default null
-         */
-        "value"?: File | File[] | null;
-    }
-    interface PopItem {
-        /**
-          * If `true`, the user cannot interact with the item.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-    }
-    /**
-     * Join is a container for grouping multiple items, it can be used to group buttons, inputs, or any other element.
-     * Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.
-     */
-    interface PopJoin {
-        /**
-          * Define content disposition orientation
-          * @config 
-          * @default "horizontal"
-         */
-        "orientation"?: JoinOrientation;
-    }
-    /**
-     * Kbd is used to display keyboard shortcuts.
-     */
-    interface PopKbd {
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-    }
-    interface PopList {
-        /**
-          * Define content disposition orientation
-          * @config 
-          * @default "vertical"
-         */
-        "orientation"?: ListOrientation;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. $
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-    }
-    /**
-     * Loading shows an animation to indicate that something is loading.
-     */
-    interface PopLoading {
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * Apply different animation
-          * @config 
-          * @default "spinner"
-         */
-        "type"?: LoadingType;
-    }
-    /**
-     * Mask crops the content of the element to common shapes.
-     */
-    interface PopMask {
-        /**
-          * Mask that should be applied
-          * @config 
-          * @default "squircle"
-         */
-        "type"?: MaskType;
-    }
-    /**
-     * Modal is used to show a dialog or a box when you click on the trigger element.
-     */
-    interface PopModal {
-        /**
-          * If `true`, the modal will be dismissed when the backdrop is clicked.
-          * @config 
-          * @default false
-         */
-        "backdropDismiss"?: boolean;
-        /**
-          * The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `pop-popover`.
-         */
-        "component"?: ComponentRef;
-        /**
-          * The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component.
-         */
-        "componentProps"?: ComponentProps;
-        /**
-          * Emitted after the modal has dismissed.
-         */
-        "onDismiss"?: (event: PopModalCustomEvent<void>) => void;
-        /**
-          * Emitted after the modal has presented.
-         */
-        "onPresent"?: (event: PopModalCustomEvent<void>) => void;
-        /**
-          * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `open` will automatically be set back to `false` when the modal dismisses.
-          * @config 
-          * @default false
-         */
-        "open"?: boolean;
-        /**
-          * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented.
-          * @config 
-          * @default false
-         */
-        "showBackdrop"?: boolean;
-        /**
-          * An ID corresponding to the trigger element that causes the modal to open when clicked.
-         */
-        "trigger"?: string;
-    }
-    /**
-     * Navbar is used to show a navigation bar on the top of the page.
-     */
-    interface PopNavbar {
-    }
-    interface PopPopover {
-        /**
-          * If `true`, the popover will animate.
-          * @config 
-          * @default false
-         */
-        "animated"?: any;
-        /**
-          * If `true`, the popover will be dismissed when the backdrop is clicked.
-          * @config 
-          * @default false
-         */
-        "backdropDismiss"?: boolean;
-        /**
-          * The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `pop-popover`.
-         */
-        "component"?: ComponentRef;
-        /**
-          * The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component.
-         */
-        "componentProps"?: ComponentProps;
-        /**
-          * The event to pass to the popover animation.
-         */
-        "event"?: Event;
-        /**
-          * Emitted after the popover has dismissed.
-         */
-        "onDidDismiss"?: (event: PopPopoverCustomEvent<void>) => void;
-        /**
-          * Emitted after the popover has presented.
-         */
-        "onDidPresent"?: (event: PopPopoverCustomEvent<void>) => void;
-        /**
-          * Emitted before the popover has dismissed.
-         */
-        "onWillDismiss"?: (event: PopPopoverCustomEvent<void>) => void;
-        /**
-          * Emitted before the popover has presented.
-         */
-        "onWillPresent"?: (event: PopPopoverCustomEvent<void>) => void;
-        /**
-          * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `open` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.
-          * @config 
-          * @default false
-         */
-        "open"?: boolean;
-        /**
-          * If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM.
-          * @config 
-          * @default false
-         */
-        "showBackdrop"?: boolean;
-        /**
-          * An ID corresponding to the trigger element that causes the popover to open. Use the `trigger-action` property to customize the interaction that results in the popover opening.
-         */
-        "trigger"?: string;
-        /**
-          * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `"click"`, the popover will be presented when the trigger is left clicked. If `"hover"`, the popover will be presented when a pointer hovers over the trigger. If `"context-menu"`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
-          * @config 
-          * @default "click"
-         */
-        "triggerAction"?: TriggerAction;
-    }
-    /**
-     * Progress bar can be used to show the progress of a task or to show the passing of time.
-     */
-    interface PopProgress {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: Color;
-        /**
-          * @config 
-          * @default 100
-         */
-        "max"?: number;
-        /**
-          * The value of a progress is analogous to the value of a `<progress>`
-         */
-        "value"?: number;
-    }
-    /**
-     * Radio buttons allow the user to select one option from a set.
-     */
-    interface PopRadio {
-        /**
-          * If `true`, the element will be focused on page load.
-         */
-        "autoFocus"?: boolean;
-        /**
-          * If `true`, the radio is selected.
-         */
-        "checked"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: Color;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * Emitted when the input loses focus.
-         */
-        "onPopBlur"?: (event: PopRadioCustomEvent<void>) => void;
-        /**
-          * Emitted when the input has focus.
-         */
-        "onPopFocus"?: (event: PopRadioCustomEvent<void>) => void;
-        /**
-          * If `true`, the user cannot interact with the element.
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-         */
-        "required"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * The value of the radio does not mean if it's checked or not, use the `checked` property for that.  The value of a radio is analogous to the value of a `<input type="radio">`, it's only used when the radio participates in a native `<form>`.
-         */
-        "value"?: any | null;
-    }
-    interface PopRadioGroup {
-        /**
-          * If `true`, the radios can be deselected.
-          * @config 
-          * @default false
-         */
-        "allowEmpty"?: boolean;
-        /**
-          * This property allows developers to specify a custom function for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
-          * @config
-         */
-        "compare"?: RadioGroupCompareFn | string | null;
-        /**
-          * If `true`, apply the disabled property to every `pop-radio`.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * The `popChange` event is fired when the user select an option. Unlike the ionInput event, the `popChange` event is fired when the user click on the element.
-         */
-        "onPopChange"?: (event: PopRadioGroupCustomEvent<RadioGroupChangeEventDetail>) => void;
-        /**
-          * Emitted when the `value` property has changed. This is used to ensure that `ion-radio` can respond to any value property changes from the group.
-         */
-        "onPopValueChange"?: (event: PopRadioGroupCustomEvent<RadioGroupChangeEventDetail>) => void;
-        /**
-          * If `true`, apply the readonly property to every `pop-radio`.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, apply the required property to every `pop-radio`.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * the value of the radio group.
-         */
-        "value"?: any | null;
-    }
-    /**
-     * Range slider is used to select a value by sliding a handle.
-     */
-    interface PopRange {
-        /**
-          * If `true`, the element will be focused on page load.
-         */
-        "autoFocus"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: RangeColor;
-        /**
-          * Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke.
-          * @config 
-          * @default 0
-         */
-        "debounce"?: number;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * The maximum value, which must not be less than its minimum (min attribute) value.
-          * @config 
-          * @default 100
-         */
-        "max"?: number;
-        /**
-          * The minimum value, which must not be greater than its maximum (max attribute) value.
-          * @config 
-          * @default 0
-         */
-        "min"?: number;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * Emitted when the input loses focus.
-         */
-        "onPopBlur"?: (event: PopRangeCustomEvent<void>) => void;
-        /**
-          * The `popChange` event is fired when the user modifies the input's value. Unlike the popInput event, the `popChange` event is fired when the element loses focus after its value has been modified.
-         */
-        "onPopChange"?: (event: PopRangeCustomEvent<RangeChangeEventDetail>) => void;
-        /**
-          * Emitted when the input has focus.
-         */
-        "onPopFocus"?: (event: PopRangeCustomEvent<void>) => void;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * Works with the min and max attributes to limit the increments at which a value can be set.
-          * @config 
-          * @default 1
-         */
-        "step"?: number;
-        /**
-          * 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>`.
-         */
-        "value"?: number | null;
-    }
-    /**
-     * Select is used to pick a value from a list of options.
-     */
-    interface PopSelect {
-        /**
-          * If `true`, the element will be focused on page load.
-         */
-        "autoFocus"?: boolean;
-        /**
-          * if `true`, adds border to select when `color` property is not set.
-          * @config 
-          * @default false
-         */
-        "bordered"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: SelectColor;
-        /**
-          * This property allows developers to specify a custom function for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
-          * @config
-         */
-        "compare"?: SelectCompareFn | string | null;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * Text that is placed under the select and displayed when no error is detected.
-         */
-        "helperText"?: string;
-        /**
-          * Only apply when `multiple` property is used. The maximum amount of values that can be selected, which must not be less than its minimum (min attribute) value.
-          * @config
-         */
-        "max"?: number;
-        /**
-          * Only apply when `multiple` property is used. The minimum amount of values that can be selected, which must not be greater than its maximum (max attribute) value.
-          * @config
-         */
-        "min"?: number;
-        /**
-          * If `true`, the user can select more than one value.
-          * @config 
-          * @default false
-         */
-        "multiple"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * Only apply when `multiple` property is used. Text that is placed under the select and displayed when the amount of selected option is below of the `min` property.
-         */
-        "notEnoughErrorText"?: string;
-        /**
-          * Emitted when the overlay is dismissed.
-         */
-        "onDismiss"?: (event: PopSelectCustomEvent<void>) => void;
-        /**
-          * Emitted when the input loses focus.
-         */
-        "onPopBlur"?: (event: PopSelectCustomEvent<void>) => void;
-        /**
-          * The `popChange` event is fired when the user modifies the select's value. Unlike the ionInput event, the `popChange` event is fired when the element loses focus after its value has been modified.
-         */
-        "onPopChange"?: (event: PopSelectCustomEvent<SelectChangeEventDetail>) => void;
-        /**
-          * Emitted when the input has focus.
-         */
-        "onPopFocus"?: (event: PopSelectCustomEvent<void>) => void;
-        /**
-          * Emitted when the overlay is presented.
-         */
-        "onPresent"?: (event: PopSelectCustomEvent<void>) => void;
-        /**
-          * Instructional text that shows before the input has a value.  This property replace the `<option disabled selected>`
-         */
-        "placeholder"?: string;
-        /**
-          * If `true`, the user cannot modify the value.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * Only apply when `multiple` property is used. Text that is placed under the select and displayed when the amount of selected option is greater of the `max` property.
-         */
-        "tooManyErrorText"?: string;
-        /**
-          * The value of a select is analogous to the value of a `<select>`, it's only used when the toggle participates in a native `<form>`.
-         */
-        "value"?: any | null;
-    }
-    interface PopSelectOption {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-         */
-        "color"?: Color;
-        /**
-          * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
-         */
-        "disabled"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-         */
-        "size"?: Size;
-        /**
-          * The text value of the option.
-         */
-        "value"?: any | null;
-    }
-    /**
-     * Swap allows you to toggle the visibility of two elements.
-     */
-    interface PopSwap {
-        /**
-          * Activates the swap. Show whats inside the slot `on`
-          * @config 
-          * @default false
-         */
-        "active"?: boolean;
-        /**
-          * Emitted when the swap active attribut change
-         */
-        "onPopSwap"?: (event: PopSwapCustomEvent<SwapChangeEventDetail>) => void;
-        /**
-          * Choose what animation is used on click.
-          * @config 
-          * @default "rotate"
-         */
-        "type"?: SwapType;
-    }
-    /**
-     * Textarea allows users to enter text in multiple lines.
-     */
-    interface PopTextarea {
-        /**
-          * This features work only on mobile and tablet devices. By default the User Agent and input make their own determination.
-          * @config 
-          * @default "off"
-          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization}
-         */
-        "autoCapitalize"?: AutoCapitalize;
-        /**
-          * If `true`, the element will be focused on page load.
-         */
-        "autoFocus"?: boolean;
-        /**
-          * if `true`, adds border to textarea when `color` property is not set.
-          * @config 
-          * @default false
-         */
-        "bordered"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: TextareaColor;
-        /**
-          * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
-          * @config
-         */
-        "cols"?: number;
-        /**
-          * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
-          * @config 
-          * @default false
-         */
-        "counter"?: boolean;
-        /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
-          * @config
-         */
-        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
-        /**
-          * Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke.
-          * @config 
-          * @default 0
-         */
-        "debounce"?: number;
-        /**
-          * If `true`, the user cannot interact with the element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * A hint to the browser for which keyboard to display. That specifies what action label (or icon) to present for the enter key on virtual keyboards.
-          * @config 
-          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute}
-         */
-        "enterkeyhint"?: EnterKeyHint;
-        /**
-          * Text that is placed under the textarea and displayed when an error is detected.
-         */
-        "errorText"?: string;
-        /**
-          * Text that is placed under the textarea and displayed when no error is detected.
-         */
-        "helperText"?: string;
-        /**
-          * A hint to the browser for which virtual keyboard to display.
-          * @config 
-          * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode}
-         */
-        "keyboard"?: KeyboardType;
-        /**
-          * This attribute specifies the maximum number of characters that the user can enter.
-          * @config
-         */
-        "maxLength"?: number;
-        /**
-          * This attribute specifies the minimum number of characters that the user can enter.
-          * @config
-         */
-        "minLength"?: number;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * Emitted when the input loses focus.
-         */
-        "onPopBlur"?: (event: PopTextareaCustomEvent<void>) => void;
-        /**
-          * The `popChange` event is fired when the user modifies the textarea's value. Unlike the ionInput event, the `popChange` event is fired when the element loses focus after its value has been modified.
-         */
-        "onPopChange"?: (event: PopTextareaCustomEvent<TextareaChangeEventDetail>) => void;
-        /**
-          * Emitted when the input has focus.
-         */
-        "onPopFocus"?: (event: PopTextareaCustomEvent<void>) => void;
-        /**
-          * The `popInput` event is fired each time the user modifies the textarea's value. Unlike the `popChange` event, the `popInput` event is fired for each alteration to the textarea's value. This typically happens for each keystroke as the user types.  This event can be debouced by the `debounce` property.
-         */
-        "onPopInput"?: (event: PopTextareaCustomEvent<TextareaInputEventDetail>) => void;
-        /**
-          * Instructional text that shows before the input has a value.
-         */
-        "placeholder"?: string;
-        /**
-          * If `true`, the user cannot modify the value.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * The number of visible text lines for the control.
-          * @config
-         */
-        "rows"?: number;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * If `true`, the element will have its spelling and grammar checked. By default the User Agent make their own default behavior.
-          * @config 
-          * @default false
-         */
-        "spellcheck"?: boolean;
-        /**
-          * The value of the textarea.
-          * @default ""
-         */
-        "value"?: string;
-        /**
-          * Indicates how the control wraps text.  If wrap attribute is in the `hard` state, the `cols` property must be specified.
-          * @config 
-          * @default "soft"
-          * @see cols *
-          * @see {@link https://html.spec.whatwg.org/multipage/form-elements.html#attr-textarea-wrap}
-         */
-        "wrap"?: Wrap;
-    }
-    /**
-     * Toggle is a checkbox that is styled to look like a switch button.
-     */
-    interface PopToggle {
-        /**
-          * If `true`, the toggle is selected.
-          * @config 
-          * @default false
-         */
-        "checked"?: boolean;
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: ToggleColor;
-        /**
-          * If true, the user cannot interact with the native element.
-          * @config 
-          * @default false
-         */
-        "disabled"?: boolean;
-        /**
-          * If a developer want to use `indeterminate`, `checked` property should be set to `false`
-          * @config 
-          * @default false
-         */
-        "indeterminate"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * Emitted when the input loses focus.
-         */
-        "onPopBlur"?: (event: PopToggleCustomEvent<void>) => void;
-        /**
-          * Emitted when the input checked attribut change
-         */
-        "onPopChange"?: (event: PopToggleCustomEvent<ToggleChangeEventDetail>) => void;
-        /**
-          * Emitted when the input has focus.
-         */
-        "onPopFocus"?: (event: PopToggleCustomEvent<void>) => void;
-        /**
-          * If `true`, the user cannot modify the value.
-          * @config 
-          * @default false
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the user must fill in a value before submitting a form.
-          * @config 
-          * @default false
-         */
-        "required"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-          * @config 
-          * @default "md"
-         */
-        "size"?: Size;
-        /**
-          * 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>`.
-         */
-        "value"?: string | null;
-    }
-    /**
-     * Tooltip can be used to show a message when hovering over an element.
-     */
-    interface PopTooltip {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-          * @config
-         */
-        "color"?: Color;
-        /**
-          * Force open tooltip
-          * @config 
-          * @default false
-         */
-        "open"?: boolean;
-        /**
-          * Define the position of tooltip By default the tootip appear on top
-          * @config 
-          * @default "top"
-         */
-        "position"?: TooltipPosition;
-        /**
-          * Text to show on hover
-         */
-        "value": string;
-    }
-    interface IntrinsicElements {
-        "pop-accordion": PopAccordion;
-        "pop-accordion-group": PopAccordionGroup;
-        "pop-avatar": PopAvatar;
-        "pop-badge": PopBadge;
-        "pop-button": PopButton;
-        "pop-card": PopCard;
-        "pop-card-actions": PopCardActions;
-        "pop-card-body": PopCardBody;
-        "pop-card-title": PopCardTitle;
-        "pop-checkbox": PopCheckbox;
-        "pop-divider": PopDivider;
-        "pop-drawer": PopDrawer;
-        "pop-dropdown": PopDropdown;
-        "pop-img": PopImg;
-        "pop-indicator": PopIndicator;
-        "pop-input": PopInput;
-        "pop-input-file": PopInputFile;
-        "pop-item": PopItem;
-        "pop-join": PopJoin;
-        "pop-kbd": PopKbd;
-        "pop-list": PopList;
-        "pop-loading": PopLoading;
-        "pop-mask": PopMask;
-        "pop-modal": PopModal;
-        "pop-navbar": PopNavbar;
-        "pop-popover": PopPopover;
-        "pop-progress": PopProgress;
-        "pop-radio": PopRadio;
-        "pop-radio-group": PopRadioGroup;
-        "pop-range": PopRange;
-        "pop-select": PopSelect;
-        "pop-select-option": PopSelectOption;
-        "pop-swap": PopSwap;
-        "pop-textarea": PopTextarea;
-        "pop-toggle": PopToggle;
-        "pop-tooltip": PopTooltip;
-    }
-}
-export { LocalJSX as JSX };
-declare module "@stencil/core" {
-    export namespace JSX {
-        interface IntrinsicElements {
-            /**
-             * Accordion is used for showing and hiding content.
-             */
-            "pop-accordion": LocalJSX.PopAccordion & JSXBase.HTMLAttributes<HTMLPopAccordionElement>;
-            "pop-accordion-group": LocalJSX.PopAccordionGroup & JSXBase.HTMLAttributes<HTMLPopAccordionGroupElement>;
-            /**
-             * Avatars are used to show a thumbnail representation of an individual or business in the interface.
-             */
-            "pop-avatar": LocalJSX.PopAvatar & JSXBase.HTMLAttributes<HTMLPopAvatarElement>;
-            /**
-             * Badges are used to inform the user of the status of specific data.
-             */
-            "pop-badge": LocalJSX.PopBadge & JSXBase.HTMLAttributes<HTMLPopBadgeElement>;
-            /**
-             * Buttons allow the user to take actions or make choices.
-             */
-            "pop-button": LocalJSX.PopButton & JSXBase.HTMLAttributes<HTMLPopButtonElement>;
-            /**
-             * Cards are used to group and display content in a way that is easily readable.
-             */
-            "pop-card": LocalJSX.PopCard & JSXBase.HTMLAttributes<HTMLPopCardElement>;
-            /**
-             * Cards are used to group and display content in a way that is easily readable.
-             */
-            "pop-card-actions": LocalJSX.PopCardActions & JSXBase.HTMLAttributes<HTMLPopCardActionsElement>;
-            /**
-             * Cards are used to group and display content in a way that is easily readable.
-             */
-            "pop-card-body": LocalJSX.PopCardBody & JSXBase.HTMLAttributes<HTMLPopCardBodyElement>;
-            /**
-             * Cards are used to group and display content in a way that is easily readable.
-             */
-            "pop-card-title": LocalJSX.PopCardTitle & JSXBase.HTMLAttributes<HTMLPopCardTitleElement>;
-            /**
-             * Toggles are switches that change the state of a single option.
-             * They can be switched on or off by pressing.
-             * Toggles can also be `"checked"` programmatically by setting the checked property.
-             */
-            "pop-checkbox": LocalJSX.PopCheckbox & JSXBase.HTMLAttributes<HTMLPopCheckboxElement>;
-            /**
-             * Divider will be used to separate content vertically or horizontally.
-             */
-            "pop-divider": LocalJSX.PopDivider & JSXBase.HTMLAttributes<HTMLPopDividerElement>;
-            /**
-             * Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
-             */
-            "pop-drawer": LocalJSX.PopDrawer & JSXBase.HTMLAttributes<HTMLPopDrawerElement>;
-            /**
-             * Dropdown can open a menu or any other element when the trigger element is clicked.
-             */
-            "pop-dropdown": LocalJSX.PopDropdown & JSXBase.HTMLAttributes<HTMLPopDropdownElement>;
-            "pop-img": LocalJSX.PopImg & JSXBase.HTMLAttributes<HTMLPopImgElement>;
-            /**
-             * Indicators are used to place an element on the corner of another element.
-             */
-            "pop-indicator": LocalJSX.PopIndicator & JSXBase.HTMLAttributes<HTMLPopIndicatorElement>;
-            /**
-             * Text Input is a simple input field.
-             */
-            "pop-input": LocalJSX.PopInput & JSXBase.HTMLAttributes<HTMLPopInputElement>;
-            /**
-             * File Input is a an input field for uploading files.
-             */
-            "pop-input-file": LocalJSX.PopInputFile & JSXBase.HTMLAttributes<HTMLPopInputFileElement>;
-            "pop-item": LocalJSX.PopItem & JSXBase.HTMLAttributes<HTMLPopItemElement>;
-            /**
-             * Join is a container for grouping multiple items, it can be used to group buttons, inputs, or any other element.
-             * Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.
-             */
-            "pop-join": LocalJSX.PopJoin & JSXBase.HTMLAttributes<HTMLPopJoinElement>;
-            /**
-             * Kbd is used to display keyboard shortcuts.
-             */
-            "pop-kbd": LocalJSX.PopKbd & JSXBase.HTMLAttributes<HTMLPopKbdElement>;
-            "pop-list": LocalJSX.PopList & JSXBase.HTMLAttributes<HTMLPopListElement>;
-            /**
-             * Loading shows an animation to indicate that something is loading.
-             */
-            "pop-loading": LocalJSX.PopLoading & JSXBase.HTMLAttributes<HTMLPopLoadingElement>;
-            /**
-             * Mask crops the content of the element to common shapes.
-             */
-            "pop-mask": LocalJSX.PopMask & JSXBase.HTMLAttributes<HTMLPopMaskElement>;
-            /**
-             * Modal is used to show a dialog or a box when you click on the trigger element.
-             */
-            "pop-modal": LocalJSX.PopModal & JSXBase.HTMLAttributes<HTMLPopModalElement>;
-            /**
-             * Navbar is used to show a navigation bar on the top of the page.
-             */
-            "pop-navbar": LocalJSX.PopNavbar & JSXBase.HTMLAttributes<HTMLPopNavbarElement>;
-            "pop-popover": LocalJSX.PopPopover & JSXBase.HTMLAttributes<HTMLPopPopoverElement>;
-            /**
-             * Progress bar can be used to show the progress of a task or to show the passing of time.
-             */
-            "pop-progress": LocalJSX.PopProgress & JSXBase.HTMLAttributes<HTMLPopProgressElement>;
-            /**
-             * Radio buttons allow the user to select one option from a set.
-             */
-            "pop-radio": LocalJSX.PopRadio & JSXBase.HTMLAttributes<HTMLPopRadioElement>;
-            "pop-radio-group": LocalJSX.PopRadioGroup & JSXBase.HTMLAttributes<HTMLPopRadioGroupElement>;
-            /**
-             * Range slider is used to select a value by sliding a handle.
-             */
-            "pop-range": LocalJSX.PopRange & JSXBase.HTMLAttributes<HTMLPopRangeElement>;
-            /**
-             * Select is used to pick a value from a list of options.
-             */
-            "pop-select": LocalJSX.PopSelect & JSXBase.HTMLAttributes<HTMLPopSelectElement>;
-            "pop-select-option": LocalJSX.PopSelectOption & JSXBase.HTMLAttributes<HTMLPopSelectOptionElement>;
-            /**
-             * Swap allows you to toggle the visibility of two elements.
-             */
-            "pop-swap": LocalJSX.PopSwap & JSXBase.HTMLAttributes<HTMLPopSwapElement>;
-            /**
-             * Textarea allows users to enter text in multiple lines.
-             */
-            "pop-textarea": LocalJSX.PopTextarea & JSXBase.HTMLAttributes<HTMLPopTextareaElement>;
-            /**
-             * Toggle is a checkbox that is styled to look like a switch button.
-             */
-            "pop-toggle": LocalJSX.PopToggle & JSXBase.HTMLAttributes<HTMLPopToggleElement>;
-            /**
-             * Tooltip can be used to show a message when hovering over an element.
-             */
-            "pop-tooltip": LocalJSX.PopTooltip & JSXBase.HTMLAttributes<HTMLPopTooltipElement>;
-        }
-    }
-}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 91b4334..e81dc59 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -10,7 +10,7 @@
 
 export type * from './components';
 export type { PoppyUserConfig } from './config';
-export type * from './custom-type';
+export type * from './component-types';
 export type * from './interface';
 
 export { initialize } from './global/poppy';
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 2b0b2ef..c099fd5 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -49,8 +49,8 @@
     "@rollup/plugin-typescript": "^12.1.2",
     "change-case": "^5.4.4",
     "rimraf": "^6.0.1",
-    "rollup": "^4.28.1",
-    "typescript": "^5.7.2",
+    "rollup": "^4.32.1",
+    "typescript": "^5.7.3",
     "vue": "3.5.13"
   },
   "vetur": {
diff --git a/packages/vue/src/framework-delegate.ts b/packages/vue/src/framework-delegate.ts
deleted file mode 100644
index 4e3cd22..0000000
--- a/packages/vue/src/framework-delegate.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { FrameworkDelegate } from '@poppy-ui/core/components';
-import type { VNode } from 'vue';
-import { Teleport, h, shallowRef } from 'vue';
-
-const userComponents = shallowRef([]);
-/**
- * When rendering user components inside of
- * ion-modal, or ion-popover the component
- * needs to be created inside of the current application
- * context otherwise libraries such as vue-i18n or vuex
- * will not work properly.
- *
- * `userComponents` renders teleported components as children
- * of `ion-app` within the current application context.
- */
-export const addTeleportedUserComponent = (component: VNode) => {
-  userComponents.value = [...userComponents.value, component];
-};
-
-export const removeTeleportedUserComponent = (component: VNode) => {
-  userComponents.value = userComponents.value.filter(cmp => cmp !== component);
-};
-
-export const VueDelegate = (
-  addFn = addTeleportedUserComponent,
-  removeFn = removeTeleportedUserComponent,
-): FrameworkDelegate => {
-  // `h` doesn't provide a type for the component argument
-  const refMap = new WeakMap<any, VNode>();
-
-  const attachViewToDom = (
-    parentElement: HTMLElement,
-    componentOrTagName: any | string,
-    componentProps: any = {},
-    classes?: string[],
-  ) => {
-    const div = document.createElement('div');
-    classes && div.classList.add(...classes);
-    parentElement.appendChild(div);
-
-    const hostComponent = h(Teleport, { to: div }, h(componentOrTagName, { ...componentProps }));
-
-    /**
-     * Ionic Framework will use what is returned from `attachViewToDom`
-     * as the `component` argument in `removeViewFromDom`.
-     *
-     * We will store a reference to the div element and the host component,
-     * so we can later look-up and unmount the correct instance.
-     */
-    refMap.set(div, hostComponent);
-
-    addFn(hostComponent);
-
-    return Promise.resolve(div);
-  };
-
-  const removeViewFromDom = (_container: any, component: any) => {
-    const hostComponent = refMap.get(component);
-    hostComponent && removeFn(hostComponent);
-
-    return Promise.resolve();
-  };
-
-  return { attachViewToDom, removeViewFromDom };
-};
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
deleted file mode 100644
index c532dc6..0000000
--- a/packages/vue/src/proxies.ts
+++ /dev/null
@@ -1,444 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-/* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
-
-import type { JSX } from '@poppy-ui/core/components';
-
-import { defineCustomElement as definePopAccordion } from '@poppy-ui/core/components/pop-accordion.js';
-import { defineCustomElement as definePopAccordionGroup } from '@poppy-ui/core/components/pop-accordion-group.js';
-import { defineCustomElement as definePopAvatar } from '@poppy-ui/core/components/pop-avatar.js';
-import { defineCustomElement as definePopBadge } from '@poppy-ui/core/components/pop-badge.js';
-import { defineCustomElement as definePopButton } from '@poppy-ui/core/components/pop-button.js';
-import { defineCustomElement as definePopCard } from '@poppy-ui/core/components/pop-card.js';
-import { defineCustomElement as definePopCardActions } from '@poppy-ui/core/components/pop-card-actions.js';
-import { defineCustomElement as definePopCardBody } from '@poppy-ui/core/components/pop-card-body.js';
-import { defineCustomElement as definePopCardTitle } from '@poppy-ui/core/components/pop-card-title.js';
-import { defineCustomElement as definePopCheckbox } from '@poppy-ui/core/components/pop-checkbox.js';
-import { defineCustomElement as definePopDivider } from '@poppy-ui/core/components/pop-divider.js';
-import { defineCustomElement as definePopDrawer } from '@poppy-ui/core/components/pop-drawer.js';
-import { defineCustomElement as definePopDropdown } from '@poppy-ui/core/components/pop-dropdown.js';
-import { defineCustomElement as definePopImg } from '@poppy-ui/core/components/pop-img.js';
-import { defineCustomElement as definePopIndicator } from '@poppy-ui/core/components/pop-indicator.js';
-import { defineCustomElement as definePopInput } from '@poppy-ui/core/components/pop-input.js';
-import { defineCustomElement as definePopInputFile } from '@poppy-ui/core/components/pop-input-file.js';
-import { defineCustomElement as definePopItem } from '@poppy-ui/core/components/pop-item.js';
-import { defineCustomElement as definePopJoin } from '@poppy-ui/core/components/pop-join.js';
-import { defineCustomElement as definePopKbd } from '@poppy-ui/core/components/pop-kbd.js';
-import { defineCustomElement as definePopList } from '@poppy-ui/core/components/pop-list.js';
-import { defineCustomElement as definePopLoading } from '@poppy-ui/core/components/pop-loading.js';
-import { defineCustomElement as definePopMask } from '@poppy-ui/core/components/pop-mask.js';
-import { defineCustomElement as definePopModal } from '@poppy-ui/core/components/pop-modal.js';
-import { defineCustomElement as definePopNavbar } from '@poppy-ui/core/components/pop-navbar.js';
-import { defineCustomElement as definePopPopover } from '@poppy-ui/core/components/pop-popover.js';
-import { defineCustomElement as definePopProgress } from '@poppy-ui/core/components/pop-progress.js';
-import { defineCustomElement as definePopRadio } from '@poppy-ui/core/components/pop-radio.js';
-import { defineCustomElement as definePopRadioGroup } from '@poppy-ui/core/components/pop-radio-group.js';
-import { defineCustomElement as definePopRange } from '@poppy-ui/core/components/pop-range.js';
-import { defineCustomElement as definePopSelect } from '@poppy-ui/core/components/pop-select.js';
-import { defineCustomElement as definePopSelectOption } from '@poppy-ui/core/components/pop-select-option.js';
-import { defineCustomElement as definePopSwap } from '@poppy-ui/core/components/pop-swap.js';
-import { defineCustomElement as definePopTextarea } from '@poppy-ui/core/components/pop-textarea.js';
-import { defineCustomElement as definePopToggle } from '@poppy-ui/core/components/pop-toggle.js';
-import { defineCustomElement as definePopTooltip } from '@poppy-ui/core/components/pop-tooltip.js';
-
-
-export const PopAccordion = /*@__PURE__*/ defineContainer<JSX.PopAccordion>('pop-accordion', definePopAccordion, [
-  'readonly',
-  'disabled',
-  'name',
-  'open'
-]);
-
-
-export const PopAccordionGroup = /*@__PURE__*/ defineContainer<JSX.PopAccordionGroup, JSX.PopAccordionGroup["active"]>('pop-accordion-group', definePopAccordionGroup, [
-  'readonly',
-  'disabled',
-  'multiple',
-  'active',
-  'popChange',
-  'popActiveChange'
-],
-'active', 'pop-change');
-
-
-export const PopAvatar = /*@__PURE__*/ defineContainer<JSX.PopAvatar>('pop-avatar', definePopAvatar, [
-  'placeholder'
-]);
-
-
-export const PopBadge = /*@__PURE__*/ defineContainer<JSX.PopBadge>('pop-badge', definePopBadge, [
-  'color',
-  'size',
-  'outlined',
-  'as'
-]);
-
-
-export const PopButton = /*@__PURE__*/ defineContainer<JSX.PopButton>('pop-button', definePopButton, [
-  'type',
-  'form',
-  'disabled',
-  'color',
-  'size',
-  'outlined',
-  'shape',
-  'expand',
-  'active',
-  'popFocus',
-  'popBlur'
-]);
-
-
-export const PopCard = /*@__PURE__*/ defineContainer<JSX.PopCard>('pop-card', definePopCard, [
-  'compact'
-]);
-
-
-export const PopCardActions = /*@__PURE__*/ defineContainer<JSX.PopCardActions>('pop-card-actions', definePopCardActions);
-
-
-export const PopCardBody = /*@__PURE__*/ defineContainer<JSX.PopCardBody>('pop-card-body', definePopCardBody);
-
-
-export const PopCardTitle = /*@__PURE__*/ defineContainer<JSX.PopCardTitle>('pop-card-title', definePopCardTitle);
-
-
-export const PopCheckbox = /*@__PURE__*/ defineContainer<JSX.PopCheckbox, JSX.PopCheckbox["checked"]>('pop-checkbox', definePopCheckbox, [
-  'name',
-  'value',
-  'required',
-  'readonly',
-  'checked',
-  'indeterminate',
-  'disabled',
-  'color',
-  'size',
-  'placement',
-  'popChange',
-  'popFocus',
-  'popBlur'
-],
-'checked', 'pop-change');
-
-
-export const PopDivider = /*@__PURE__*/ defineContainer<JSX.PopDivider>('pop-divider', definePopDivider, [
-  'orientation',
-  'placement',
-  'color'
-]);
-
-
-export const PopDrawer = /*@__PURE__*/ defineContainer<JSX.PopDrawer>('pop-drawer', definePopDrawer, [
-  'trigger',
-  'triggerAction',
-  'side',
-  'open',
-  'popDidPresent',
-  'popDidDismiss'
-]);
-
-
-export const PopDropdown = /*@__PURE__*/ defineContainer<JSX.PopDropdown>('pop-dropdown', definePopDropdown, [
-  'side',
-  'align',
-  'open',
-  'triggerAction',
-  'debounce',
-  'showBackdrop',
-  'present',
-  'dismiss'
-]);
-
-
-export const PopImg = /*@__PURE__*/ defineContainer<JSX.PopImg>('pop-img', definePopImg, [
-  'src',
-  'alt',
-  'popWillLoad',
-  'popDidLoad',
-  'popError'
-]);
-
-
-export const PopIndicator = /*@__PURE__*/ defineContainer<JSX.PopIndicator>('pop-indicator', definePopIndicator, [
-  'side',
-  'position'
-]);
-
-
-export const PopInput = /*@__PURE__*/ defineContainer<JSX.PopInput, JSX.PopInput["value"]>('pop-input', definePopInput, [
-  'name',
-  'type',
-  'placeholder',
-  'value',
-  'min',
-  'max',
-  'step',
-  'minLength',
-  'maxLength',
-  'multiple',
-  'pattern',
-  'required',
-  'readonly',
-  'disabled',
-  'autoFocus',
-  'keyboard',
-  'enterkeyhint',
-  'spellcheck',
-  'autoComplete',
-  'autoCapitalize',
-  'bordered',
-  'color',
-  'size',
-  'helperText',
-  'errorText',
-  'counter',
-  'counterFormatter',
-  'debounce',
-  'popChange',
-  'popInput',
-  'popFocus',
-  'popBlur'
-],
-'value', 'pop-input');
-
-
-export const PopInputFile = /*@__PURE__*/ defineContainer<JSX.PopInputFile>('pop-input-file', definePopInputFile, [
-  'name',
-  'value',
-  'multiple',
-  'required',
-  'readonly',
-  'disabled',
-  'autoFocus',
-  'bordered',
-  'color',
-  'size',
-  'helperText',
-  'errorText',
-  'popChange',
-  'popFocus',
-  'popBlur'
-]);
-
-
-export const PopItem = /*@__PURE__*/ defineContainer<JSX.PopItem>('pop-item', definePopItem, [
-  'disabled'
-]);
-
-
-export const PopJoin = /*@__PURE__*/ defineContainer<JSX.PopJoin>('pop-join', definePopJoin, [
-  'orientation'
-]);
-
-
-export const PopKbd = /*@__PURE__*/ defineContainer<JSX.PopKbd>('pop-kbd', definePopKbd, [
-  'size'
-]);
-
-
-export const PopList = /*@__PURE__*/ defineContainer<JSX.PopList>('pop-list', definePopList, [
-  'size',
-  'orientation'
-]);
-
-
-export const PopLoading = /*@__PURE__*/ defineContainer<JSX.PopLoading>('pop-loading', definePopLoading, [
-  'type',
-  'size'
-]);
-
-
-export const PopMask = /*@__PURE__*/ defineContainer<JSX.PopMask>('pop-mask', definePopMask, [
-  'type'
-]);
-
-
-export const PopModal = /*@__PURE__*/ defineContainer<JSX.PopModal>('pop-modal', definePopModal, [
-  'trigger',
-  'component',
-  'componentProps',
-  'showBackdrop',
-  'backdropDismiss',
-  'open',
-  'present',
-  'dismiss'
-]);
-
-
-export const PopNavbar = /*@__PURE__*/ defineContainer<JSX.PopNavbar>('pop-navbar', definePopNavbar);
-
-
-export const PopPopover = /*@__PURE__*/ defineContainer<JSX.PopPopover>('pop-popover', definePopPopover, [
-  'open',
-  'animated',
-  'showBackdrop',
-  'backdropDismiss',
-  'event',
-  'trigger',
-  'triggerAction',
-  'component',
-  'componentProps',
-  'willPresent',
-  'didPresent',
-  'willDismiss',
-  'didDismiss'
-]);
-
-
-export const PopProgress = /*@__PURE__*/ defineContainer<JSX.PopProgress>('pop-progress', definePopProgress, [
-  'value',
-  'max',
-  'color'
-]);
-
-
-export const PopRadio = /*@__PURE__*/ defineContainer<JSX.PopRadio, JSX.PopRadio["value"]>('pop-radio', definePopRadio, [
-  'name',
-  'value',
-  'checked',
-  'required',
-  'readonly',
-  'disabled',
-  'autoFocus',
-  'color',
-  'size',
-  'popFocus',
-  'popBlur'
-],
-'value', 'pop-change');
-
-
-export const PopRadioGroup = /*@__PURE__*/ defineContainer<JSX.PopRadioGroup, JSX.PopRadioGroup["value"]>('pop-radio-group', definePopRadioGroup, [
-  'name',
-  'value',
-  'required',
-  'readonly',
-  'disabled',
-  'allowEmpty',
-  'compare',
-  'popChange',
-  'popValueChange'
-],
-'value', 'pop-change');
-
-
-export const PopRange = /*@__PURE__*/ defineContainer<JSX.PopRange, JSX.PopRange["value"]>('pop-range', definePopRange, [
-  'name',
-  'value',
-  'min',
-  'max',
-  'step',
-  'required',
-  'disabled',
-  'autoFocus',
-  'color',
-  'size',
-  'debounce',
-  'popChange',
-  'popFocus',
-  'popBlur'
-],
-'value', 'pop-change');
-
-
-export const PopSelect = /*@__PURE__*/ defineContainer<JSX.PopSelect, JSX.PopSelect["value"]>('pop-select', definePopSelect, [
-  'name',
-  'placeholder',
-  'value',
-  'multiple',
-  'min',
-  'max',
-  'required',
-  'readonly',
-  'disabled',
-  'autoFocus',
-  'bordered',
-  'color',
-  'size',
-  'helperText',
-  'notEnoughErrorText',
-  'tooManyErrorText',
-  'compare',
-  'present',
-  'dismiss',
-  'popChange',
-  'popFocus',
-  'popBlur'
-],
-'value', 'pop-change');
-
-
-export const PopSelectOption = /*@__PURE__*/ defineContainer<JSX.PopSelectOption>('pop-select-option', definePopSelectOption, [
-  'value',
-  'disabled',
-  'color',
-  'size'
-]);
-
-
-export const PopSwap = /*@__PURE__*/ defineContainer<JSX.PopSwap, JSX.PopSwap["active"]>('pop-swap', definePopSwap, [
-  'type',
-  'active',
-  'popSwap'
-],
-'active', 'pop-change');
-
-
-export const PopTextarea = /*@__PURE__*/ defineContainer<JSX.PopTextarea, JSX.PopTextarea["value"]>('pop-textarea', definePopTextarea, [
-  'name',
-  'placeholder',
-  'value',
-  'minLength',
-  'maxLength',
-  'cols',
-  'rows',
-  'required',
-  'readonly',
-  'disabled',
-  'autoFocus',
-  'keyboard',
-  'enterkeyhint',
-  'spellcheck',
-  'autoCapitalize',
-  'wrap',
-  'bordered',
-  'color',
-  'size',
-  'helperText',
-  'errorText',
-  'counter',
-  'counterFormatter',
-  'debounce',
-  'popChange',
-  'popInput',
-  'popFocus',
-  'popBlur'
-],
-'value', 'pop-input');
-
-
-export const PopToggle = /*@__PURE__*/ defineContainer<JSX.PopToggle, JSX.PopToggle["checked"]>('pop-toggle', definePopToggle, [
-  'name',
-  'value',
-  'required',
-  'readonly',
-  'checked',
-  'indeterminate',
-  'disabled',
-  'color',
-  'size',
-  'popChange',
-  'popFocus',
-  'popBlur'
-],
-'checked', 'pop-change');
-
-
-export const PopTooltip = /*@__PURE__*/ defineContainer<JSX.PopTooltip>('pop-tooltip', definePopTooltip, [
-  'value',
-  'color',
-  'position',
-  'open'
-]);
-
diff --git a/tests/vue/package.json b/tests/vue/package.json
index 55fd50c..fcb6ced 100644
--- a/tests/vue/package.json
+++ b/tests/vue/package.json
@@ -9,17 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@poppy-ui/vue": "0.3.9",
-    "vue": "3.5.11",
-    "vue-router": "^4.4.5"
+    "@poppy-ui/vue": "0.4.0",
+    "vue": "3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.4",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.12",
-    "vue-tsc": "^2.1.6"
-  },
-  "overrides": {
-    "@poppy-ui/core": "0.3.9"
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11",
+    "vue-tsc": "^2.2.0"
   }
 }