diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7012a98..8a69b5e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,17 +14,24 @@ miru.ink / Changelog
 - Add: New `body` slot on `DialogStd` component to replace inner `<article>` structure.
 - Add: New `escape` property on `DialogStd` component to allow closing the modal using the ESC key.
 - Add: New wobble animation when trying to close a static modal by an click outside.
+- Add: `CheckCircle` / `XCircle` lucide icon components.
 - Update: Change the `AvatarGroup` limit class and label when not enough space is available.
 - Update: `package.json` dependencies.
 - Update: Decrease height (by lower the padding) on `BadgeStd` component.
 - Update: Minor styling changes on `TableStd` to support usage inside `CardStd` (using new content slot).
 - Update: Change font-size and icons on `AlertMessage` component.
 - Update: Change font-size on `AlertStd` component.
+- Update: Apply new 32 / 40 / 56 px height system on `BallonSelector` control field.
+- Update: Apply new 32 / 40 / 56 px height system on `InputField` control field.
+- Update: Apply new 32 / 40 / 56 px height system on `NumberField` control field.
+- Update: Apply new 32 / 40 / 56 px height system on `PasswordField` control field.
+- Update: Apply new 32 / 40 / 56 px height system on `SelectField` control field.
 - Fix: Add media-query based `max-width` stylings on `DialogStd` to support some space to screen-borders.
 - Fix: Demo-Icons on histoire stories.
 - Fix: Minor styling changes on `TooltipStd` component.
 - Fix: TypeScript type issues on dts plugin / vite build process.
 - Fix: Re-Using same tooltip instance resulted in broken animation on `v-tooltip` directive.
+- Fix: Styling issues on lg-sized `NumberField` and `PasswordField` component.
 
 ## Version 0.0.9 - Experimental
 - Add: `AlertMessage` / `AlertStd` components & basic story demonstration.
diff --git a/package-lock.json b/package-lock.json
index 03e9516..4e875db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
                 "@rushstack/eslint-patch": "^1.10.1",
                 "@tailwindcss/typography": "^0.5.12",
                 "@tsconfig/node20": "^20.1.4",
-                "@types/node": "^20.12.2",
+                "@types/node": "^20.12.5",
                 "@vitejs/plugin-vue": "^5.0.4",
                 "@vue/eslint-config-typescript": "^13.0.0",
                 "@vue/tsconfig": "^0.5.1",
@@ -32,14 +32,14 @@
                 "npm-run-all2": "^6.1.2",
                 "postcss": "^8.4.38",
                 "postcss-import": "^16.1.0",
-                "rollup": "^4.13.2",
+                "rollup": "^4.14.1",
                 "tailwindcss": "^3.4.3",
-                "typescript": "~5.4.3",
-                "vite": "^5.2.7",
+                "typescript": "~5.4.4",
+                "vite": "^5.2.8",
                 "vite-plugin-dts": "^3.8.1",
                 "vitepress": "^1.0.2",
                 "vue": "^3.4.21",
-                "vue-tsc": "^2.0.7"
+                "vue-tsc": "^2.0.11"
             },
             "engines": {
                 "node": "^20"
@@ -1356,9 +1356,9 @@
             }
         },
         "node_modules/@rollup/rollup-android-arm-eabi": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.0.tgz",
-            "integrity": "sha512-jwXtxYbRt1V+CdQSy6Z+uZti7JF5irRKF8hlKfEnF/xJpcNGuuiZMBvuoYM+x9sr9iWGnzrlM0+9hvQ1kgkf1w==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.1.tgz",
+            "integrity": "sha512-fH8/o8nSUek8ceQnT7K4EQbSiV7jgkHq81m9lWZFIXjJ7lJzpWXbQFpT/Zh6OZYnpFykvzC3fbEvEAFZu03dPA==",
             "cpu": [
                 "arm"
             ],
@@ -1369,9 +1369,9 @@
             ]
         },
         "node_modules/@rollup/rollup-android-arm64": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.0.tgz",
-            "integrity": "sha512-fI9nduZhCccjzlsA/OuAwtFGWocxA4gqXGTLvOyiF8d+8o0fZUeSztixkYjcGq1fGZY3Tkq4yRvHPFxU+jdZ9Q==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.1.tgz",
+            "integrity": "sha512-Y/9OHLjzkunF+KGEoJr3heiD5X9OLa8sbT1lm0NYeKyaM3oMhhQFvPB0bNZYJwlq93j8Z6wSxh9+cyKQaxS7PQ==",
             "cpu": [
                 "arm64"
             ],
@@ -1382,9 +1382,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-arm64": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.0.tgz",
-            "integrity": "sha512-BcnSPRM76/cD2gQC+rQNGBN6GStBs2pl/FpweW8JYuz5J/IEa0Fr4AtrPv766DB/6b2MZ/AfSIOSGw3nEIP8SA==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.1.tgz",
+            "integrity": "sha512-+kecg3FY84WadgcuSVm6llrABOdQAEbNdnpi5X3UwWiFVhZIZvKgGrF7kmLguvxHNQy+UuRV66cLVl3S+Rkt+Q==",
             "cpu": [
                 "arm64"
             ],
@@ -1395,9 +1395,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-x64": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.0.tgz",
-            "integrity": "sha512-LDyFB9GRolGN7XI6955aFeI3wCdCUszFWumWU0deHA8VpR3nWRrjG6GtGjBrQxQKFevnUTHKCfPR4IvrW3kCgQ==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.1.tgz",
+            "integrity": "sha512-2pYRzEjVqq2TB/UNv47BV/8vQiXkFGVmPFwJb+1E0IFFZbIX8/jo1olxqqMbo6xCXf8kabANhp5bzCij2tFLUA==",
             "cpu": [
                 "x64"
             ],
@@ -1408,9 +1408,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.0.tgz",
-            "integrity": "sha512-ygrGVhQP47mRh0AAD0zl6QqCbNsf0eTo+vgwkY6LunBcg0f2Jv365GXlDUECIyoXp1kKwL5WW6rsO429DBY/bA==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.1.tgz",
+            "integrity": "sha512-mS6wQ6Do6/wmrF9aTFVpIJ3/IDXhg1EZcQFYHZLHqw6AzMBjTHWnCG35HxSqUNphh0EHqSM6wRTT8HsL1C0x5g==",
             "cpu": [
                 "arm"
             ],
@@ -1421,9 +1421,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-gnu": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.0.tgz",
-            "integrity": "sha512-x+uJ6MAYRlHGe9wi4HQjxpaKHPM3d3JjqqCkeC5gpnnI6OWovLdXTpfa8trjxPLnWKyBsSi5kne+146GAxFt4A==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.1.tgz",
+            "integrity": "sha512-p9rGKYkHdFMzhckOTFubfxgyIO1vw//7IIjBBRVzyZebWlzRLeNhqxuSaZ7kCEKVkm/kuC9fVRW9HkC/zNRG2w==",
             "cpu": [
                 "arm64"
             ],
@@ -1434,9 +1434,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-musl": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.0.tgz",
-            "integrity": "sha512-nrRw8ZTQKg6+Lttwqo6a2VxR9tOroa2m91XbdQ2sUUzHoedXlsyvY1fN4xWdqz8PKmf4orDwejxXHjh7YBGUCA==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.1.tgz",
+            "integrity": "sha512-nDY6Yz5xS/Y4M2i9JLQd3Rofh5OR8Bn8qe3Mv/qCVpHFlwtZSBYSPaU4mrGazWkXrdQ98GB//H0BirGR/SKFSw==",
             "cpu": [
                 "arm64"
             ],
@@ -1447,9 +1447,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.0.tgz",
-            "integrity": "sha512-xV0d5jDb4aFu84XKr+lcUJ9y3qpIWhttO3Qev97z8DKLXR62LC3cXT/bMZXrjLF9X+P5oSmJTzAhqwUbY96PnA==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.1.tgz",
+            "integrity": "sha512-im7HE4VBL+aDswvcmfx88Mp1soqL9OBsdDBU8NqDEYtkri0qV0THhQsvZtZeNNlLeCUQ16PZyv7cqutjDF35qw==",
             "cpu": [
                 "ppc64le"
             ],
@@ -1460,9 +1460,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.0.tgz",
-            "integrity": "sha512-SDDhBQwZX6LPRoPYjAZWyL27LbcBo7WdBFWJi5PI9RPCzU8ijzkQn7tt8NXiXRiFMJCVpkuMkBf4OxSxVMizAw==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.1.tgz",
+            "integrity": "sha512-RWdiHuAxWmzPJgaHJdpvUUlDz8sdQz4P2uv367T2JocdDa98iRw2UjIJ4QxSyt077mXZT2X6pKfT2iYtVEvOFw==",
             "cpu": [
                 "riscv64"
             ],
@@ -1473,9 +1473,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-s390x-gnu": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.0.tgz",
-            "integrity": "sha512-RxB/qez8zIDshNJDufYlTT0ZTVut5eCpAZ3bdXDU9yTxBzui3KhbGjROK2OYTTor7alM7XBhssgoO3CZ0XD3qA==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.1.tgz",
+            "integrity": "sha512-VMgaGQ5zRX6ZqV/fas65/sUGc9cPmsntq2FiGmayW9KMNfWVG/j0BAqImvU4KTeOOgYSf1F+k6at1UfNONuNjA==",
             "cpu": [
                 "s390x"
             ],
@@ -1486,9 +1486,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-gnu": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.0.tgz",
-            "integrity": "sha512-C6y6z2eCNCfhZxT9u+jAM2Fup89ZjiG5pIzZIDycs1IwESviLxwkQcFRGLjnDrP+PT+v5i4YFvlcfAs+LnreXg==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.1.tgz",
+            "integrity": "sha512-9Q7DGjZN+hTdJomaQ3Iub4m6VPu1r94bmK2z3UeWP3dGUecRC54tmVu9vKHTm1bOt3ASoYtEz6JSRLFzrysKlA==",
             "cpu": [
                 "x64"
             ],
@@ -1499,9 +1499,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-musl": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.0.tgz",
-            "integrity": "sha512-i0QwbHYfnOMYsBEyjxcwGu5SMIi9sImDVjDg087hpzXqhBSosxkE7gyIYFHgfFl4mr7RrXksIBZ4DoLoP4FhJg==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.1.tgz",
+            "integrity": "sha512-JNEG/Ti55413SsreTguSx0LOVKX902OfXIKVg+TCXO6Gjans/k9O6ww9q3oLGjNDaTLxM+IHFMeXy/0RXL5R/g==",
             "cpu": [
                 "x64"
             ],
@@ -1512,9 +1512,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-arm64-msvc": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.0.tgz",
-            "integrity": "sha512-Fq52EYb0riNHLBTAcL0cun+rRwyZ10S9vKzhGKKgeD+XbwunszSY0rVMco5KbOsTlwovP2rTOkiII/fQ4ih/zQ==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.1.tgz",
+            "integrity": "sha512-ryS22I9y0mumlLNwDFYZRDFLwWh3aKaC72CWjFcFvxK0U6v/mOkM5Up1bTbCRAhv3kEIwW2ajROegCIQViUCeA==",
             "cpu": [
                 "arm64"
             ],
@@ -1525,9 +1525,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-ia32-msvc": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.0.tgz",
-            "integrity": "sha512-e/PBHxPdJ00O9p5Ui43+vixSgVf4NlLsmV6QneGERJ3lnjIua/kim6PRFe3iDueT1rQcgSkYP8ZBBXa/h4iPvw==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.1.tgz",
+            "integrity": "sha512-TdloItiGk+T0mTxKx7Hp279xy30LspMso+GzQvV2maYePMAWdmrzqSNZhUpPj3CGw12aGj57I026PgLCTu8CGg==",
             "cpu": [
                 "ia32"
             ],
@@ -1538,9 +1538,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-x64-msvc": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.0.tgz",
-            "integrity": "sha512-aGg7iToJjdklmxlUlJh/PaPNa4PmqHfyRMLunbL3eaMO0gp656+q1zOKkpJ/CVe9CryJv6tAN1HDoR8cNGzkag==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.1.tgz",
+            "integrity": "sha512-wQGI+LY/Py20zdUPq+XCem7JcPOyzIJBm3dli+56DJsQOHbnXZFEwgmnC6el1TPAfC8lBT3m+z69RmLykNUbew==",
             "cpu": [
                 "x64"
             ],
@@ -1790,9 +1790,9 @@
             "dev": true
         },
         "node_modules/@types/node": {
-            "version": "20.12.4",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.4.tgz",
-            "integrity": "sha512-E+Fa9z3wSQpzgYQdYmme5X3OTuejnnTx88A6p6vkkJosR3KBz+HpE3kqNm98VE6cfLFcISx7zW7MsJkH6KwbTw==",
+            "version": "20.12.5",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.5.tgz",
+            "integrity": "sha512-BD+BjQ9LS/D8ST9p5uqBxghlN+S42iuNxjsUGjeZobe/ciXzk2qb1B6IXc6AnRLS+yFJRpN2IPEHMzwspfDJNw==",
             "dev": true,
             "dependencies": {
                 "undici-types": "~5.26.4"
@@ -2067,28 +2067,28 @@
             }
         },
         "node_modules/@volar/typescript": {
-            "version": "2.2.0-alpha.5",
-            "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.0-alpha.5.tgz",
-            "integrity": "sha512-9UKZSDTcgvKMXz9TiU1kHmu3uMuH8+M7oZ6/CzBt8LvFda+ec/ZDcvBjQg2rU5EVn4d+YPYcqenkeHre3tO7Og==",
+            "version": "2.2.0-alpha.6",
+            "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.0-alpha.6.tgz",
+            "integrity": "sha512-wTr0jO3wVXQ9FjBbWE2iX8GgDoiHp1Nttsb+tKk5IeUUb6f1uOjyeIXuS4KfeMBpCufthRO2st2O2uatAs/UXQ==",
             "dev": true,
             "dependencies": {
-                "@volar/language-core": "2.2.0-alpha.5",
+                "@volar/language-core": "2.2.0-alpha.6",
                 "path-browserify": "^1.0.1"
             }
         },
         "node_modules/@volar/typescript/node_modules/@volar/language-core": {
-            "version": "2.2.0-alpha.5",
-            "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0-alpha.5.tgz",
-            "integrity": "sha512-RqERQ8HXxKC/HAGpDg7oG/Yg8n3rC3KEnYE3D7lcKIblU59JEZX73IWD/L3fdjzyeSglDWjL91iOblU8MuKEoA==",
+            "version": "2.2.0-alpha.6",
+            "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0-alpha.6.tgz",
+            "integrity": "sha512-GmT28LX2w4x82uuQqNN/P94VOCsZRHBbGcGe+5bFtA2hbIbH6f8tFdMfgXFtyhbft/pj6f3xl37xe+t+nomLIA==",
             "dev": true,
             "dependencies": {
-                "@volar/source-map": "2.2.0-alpha.5"
+                "@volar/source-map": "2.2.0-alpha.6"
             }
         },
         "node_modules/@volar/typescript/node_modules/@volar/source-map": {
-            "version": "2.2.0-alpha.5",
-            "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0-alpha.5.tgz",
-            "integrity": "sha512-Lw1LOPgt1QGaQX9HstRTlBz5x6d5mGq9ZTFMeyWVr8/5YOv3hCU0ehtMTwmCiAX/ZyNSINFI01ODePy2hwy06A==",
+            "version": "2.2.0-alpha.6",
+            "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0-alpha.6.tgz",
+            "integrity": "sha512-EztD2zoUopETY+ZCUZAGUHKgj4gOkY/2WnaOS+RSTc56xm85miSA4qOBS8Lt1Ruu5vV52WIZKHW/R9PbjkZWFA==",
             "dev": true,
             "dependencies": {
                 "muggle-string": "^0.4.0"
@@ -2799,9 +2799,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001605",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001605.tgz",
-            "integrity": "sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==",
+            "version": "1.0.30001606",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001606.tgz",
+            "integrity": "sha512-LPbwnW4vfpJId225pwjZJOgX1m9sGfbw/RKJvw/t0QhYOOaTXHvkjVGFGPpvwEzufrjvTlsULnVTxdy4/6cqkg==",
             "dev": true,
             "funding": [
                 {
@@ -3184,9 +3184,9 @@
             "dev": true
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.727",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.727.tgz",
-            "integrity": "sha512-brpv4KTeC4g0Fx2FeIKytLd4UGn1zBQq5Lauy7zEWT9oqkaj5mgsxblEZIAOf1HHLlXxzr6adGViiBy5Z39/CA==",
+            "version": "1.4.729",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.729.tgz",
+            "integrity": "sha512-bx7+5Saea/qu14kmPTDHQxkp2UnziG3iajUQu3BxFvCOnpAJdDbMV4rSl+EqFDkkpNNVUFlR1kDfpL59xfy1HA==",
             "dev": true
         },
         "node_modules/emoji-regex": {
@@ -5443,9 +5443,9 @@
             }
         },
         "node_modules/rollup": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.0.tgz",
-            "integrity": "sha512-Qe7w62TyawbDzB4yt32R0+AbIo6m1/sqO7UPzFS8Z/ksL5mrfhA0v4CavfdmFav3D+ub4QeAgsGEe84DoWe/nQ==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.1.tgz",
+            "integrity": "sha512-4LnHSdd3QK2pa1J6dFbfm1HN0D7vSK/ZuZTsdyUAlA6Rr1yTouUTL13HaDOGJVgby461AhrNGBS7sCGXXtT+SA==",
             "dev": true,
             "dependencies": {
                 "@types/estree": "1.0.5"
@@ -5458,21 +5458,21 @@
                 "npm": ">=8.0.0"
             },
             "optionalDependencies": {
-                "@rollup/rollup-android-arm-eabi": "4.14.0",
-                "@rollup/rollup-android-arm64": "4.14.0",
-                "@rollup/rollup-darwin-arm64": "4.14.0",
-                "@rollup/rollup-darwin-x64": "4.14.0",
-                "@rollup/rollup-linux-arm-gnueabihf": "4.14.0",
-                "@rollup/rollup-linux-arm64-gnu": "4.14.0",
-                "@rollup/rollup-linux-arm64-musl": "4.14.0",
-                "@rollup/rollup-linux-powerpc64le-gnu": "4.14.0",
-                "@rollup/rollup-linux-riscv64-gnu": "4.14.0",
-                "@rollup/rollup-linux-s390x-gnu": "4.14.0",
-                "@rollup/rollup-linux-x64-gnu": "4.14.0",
-                "@rollup/rollup-linux-x64-musl": "4.14.0",
-                "@rollup/rollup-win32-arm64-msvc": "4.14.0",
-                "@rollup/rollup-win32-ia32-msvc": "4.14.0",
-                "@rollup/rollup-win32-x64-msvc": "4.14.0",
+                "@rollup/rollup-android-arm-eabi": "4.14.1",
+                "@rollup/rollup-android-arm64": "4.14.1",
+                "@rollup/rollup-darwin-arm64": "4.14.1",
+                "@rollup/rollup-darwin-x64": "4.14.1",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.14.1",
+                "@rollup/rollup-linux-arm64-gnu": "4.14.1",
+                "@rollup/rollup-linux-arm64-musl": "4.14.1",
+                "@rollup/rollup-linux-powerpc64le-gnu": "4.14.1",
+                "@rollup/rollup-linux-riscv64-gnu": "4.14.1",
+                "@rollup/rollup-linux-s390x-gnu": "4.14.1",
+                "@rollup/rollup-linux-x64-gnu": "4.14.1",
+                "@rollup/rollup-linux-x64-musl": "4.14.1",
+                "@rollup/rollup-win32-arm64-msvc": "4.14.1",
+                "@rollup/rollup-win32-ia32-msvc": "4.14.1",
+                "@rollup/rollup-win32-x64-msvc": "4.14.1",
                 "fsevents": "~2.3.2"
             }
         },
@@ -6511,13 +6511,13 @@
             }
         },
         "node_modules/vue-tsc": {
-            "version": "2.0.10",
-            "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.10.tgz",
-            "integrity": "sha512-XD9GuUuc40fdL6VrfbFS5PehxK6exhKGEkzCbMjT01HcJVNuJxXaPFIhMEfxn581eryX7LBygAH6YYqnXQGElA==",
+            "version": "2.0.11",
+            "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.11.tgz",
+            "integrity": "sha512-dl5MEU4VGZdQFGBnKfPpAfV3SQmBDWs9o4YhUPvDmwk+zmb/RprzFJK2sagR6EWazogZhXENvykd3wBXWS9kng==",
             "dev": true,
             "dependencies": {
-                "@volar/typescript": "~2.2.0-alpha.5",
-                "@vue/language-core": "2.0.10",
+                "@volar/typescript": "~2.2.0-alpha.6",
+                "@vue/language-core": "2.0.11",
                 "semver": "^7.5.4"
             },
             "bin": {
@@ -6528,30 +6528,30 @@
             }
         },
         "node_modules/vue-tsc/node_modules/@volar/language-core": {
-            "version": "2.2.0-alpha.5",
-            "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0-alpha.5.tgz",
-            "integrity": "sha512-RqERQ8HXxKC/HAGpDg7oG/Yg8n3rC3KEnYE3D7lcKIblU59JEZX73IWD/L3fdjzyeSglDWjL91iOblU8MuKEoA==",
+            "version": "2.2.0-alpha.6",
+            "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0-alpha.6.tgz",
+            "integrity": "sha512-GmT28LX2w4x82uuQqNN/P94VOCsZRHBbGcGe+5bFtA2hbIbH6f8tFdMfgXFtyhbft/pj6f3xl37xe+t+nomLIA==",
             "dev": true,
             "dependencies": {
-                "@volar/source-map": "2.2.0-alpha.5"
+                "@volar/source-map": "2.2.0-alpha.6"
             }
         },
         "node_modules/vue-tsc/node_modules/@volar/source-map": {
-            "version": "2.2.0-alpha.5",
-            "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0-alpha.5.tgz",
-            "integrity": "sha512-Lw1LOPgt1QGaQX9HstRTlBz5x6d5mGq9ZTFMeyWVr8/5YOv3hCU0ehtMTwmCiAX/ZyNSINFI01ODePy2hwy06A==",
+            "version": "2.2.0-alpha.6",
+            "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0-alpha.6.tgz",
+            "integrity": "sha512-EztD2zoUopETY+ZCUZAGUHKgj4gOkY/2WnaOS+RSTc56xm85miSA4qOBS8Lt1Ruu5vV52WIZKHW/R9PbjkZWFA==",
             "dev": true,
             "dependencies": {
                 "muggle-string": "^0.4.0"
             }
         },
         "node_modules/vue-tsc/node_modules/@vue/language-core": {
-            "version": "2.0.10",
-            "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.10.tgz",
-            "integrity": "sha512-3ULtX6hSPJNdNChi6aJ4FfdJNs5EShBLxnwLFTqrk2N1385WOwGVlbHeS2R6W9s9lXZ0+mC2bv4VlFSyeNPNGA==",
+            "version": "2.0.11",
+            "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.11.tgz",
+            "integrity": "sha512-5ivg8Vem/yckzXI3L3n0mdKBPRcHSlsGt6/dpbEx42PcH3MIHAjSAJBYvENXeWJxv2ClQc8BS2mH1Ho2U7jZig==",
             "dev": true,
             "dependencies": {
-                "@volar/language-core": "~2.2.0-alpha.5",
+                "@volar/language-core": "~2.2.0-alpha.6",
                 "@vue/compiler-dom": "^3.4.0",
                 "@vue/shared": "^3.4.0",
                 "computeds": "^0.0.1",
diff --git a/package.json b/package.json
index 75e3afb..7e12a84 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
         "@rushstack/eslint-patch": "^1.10.1",
         "@tailwindcss/typography": "^0.5.12",
         "@tsconfig/node20": "^20.1.4",
-        "@types/node": "^20.12.4",
+        "@types/node": "^20.12.5",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/eslint-config-typescript": "^13.0.0",
         "@vue/tsconfig": "^0.5.1",
@@ -63,14 +63,14 @@
         "npm-run-all2": "^6.1.2",
         "postcss": "^8.4.38",
         "postcss-import": "^16.1.0",
-        "rollup": "^4.14.0",
+        "rollup": "^4.14.1",
         "tailwindcss": "^3.4.3",
         "typescript": "~5.4.4",
         "vite": "^5.2.8",
         "vite-plugin-dts": "^3.8.1",
         "vitepress": "^1.0.2",
         "vue": "^3.4.21",
-        "vue-tsc": "^2.0.10"
+        "vue-tsc": "^2.0.11"
     },
     "peerDependencies": {
         "postcss": "^8.3.0",
diff --git a/src/components/control/BalloonSelector.story.vue b/src/components/control/BalloonSelector.story.vue
index 90fbca5..c907908 100644
--- a/src/components/control/BalloonSelector.story.vue
+++ b/src/components/control/BalloonSelector.story.vue
@@ -1,72 +1,79 @@
 <template>
     <Story title="Form/Control/BalloonSelector" :layout="{ type: 'grid', width: '800px' }">
         <Variant title="Default" :init-state="stateDefault" v-slot="{ state }">
-            <BalloonSelector v-bind="state" v-model="state.value" />
+            <div class="p-2">
+                <BalloonSelector v-bind="state" v-model="state.value" />
+            </div>
         </Variant>
 
         <Variant title="Unselectable" :init-state="stateUnselectable" v-slot="{ state }">
-            <BalloonSelector v-bind="state" v-model="state.value" />
+            <div class="p-2">
+                <BalloonSelector v-bind="state" v-model="state.value" />
+            </div>
         </Variant>
 
         <Variant title="Multiple" :init-state="stateMultiple" v-slot="{ state }">
-            <BalloonSelector v-bind="state" v-model="state.value" />
+            <div class="p-2">
+                <BalloonSelector v-bind="state" v-model="state.value" />
+            </div>
         </Variant>
 
         <Variant title="Sizes" :init-state="stateSizes" v-slot="{ state }">
-            <div class="flex flex-col gap-4">
-                <BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
-                <BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
-                <BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
+            <div class="flex flex-col gap-4 p-2">
+                <div class="flex flex-row items-center gap-2">
+                    <BalloonSelector v-bind="state" size="sm" v-model="state.valueSM" />
+                    <BadgeStd label="32px" size="sm" class="ml-auto" />
+                </div>
+                <div class="flex flex-row items-center gap-2">
+                    <BalloonSelector v-bind="state" v-model="state.valueMD" />
+                    <BadgeStd label="default" size="sm" color="primary" class="ml-auto" />
+                    <BadgeStd label="40px" size="sm" />
+                </div>
+                <div class="flex flex-row items-center gap-2">
+                    <BalloonSelector v-bind="state" size="lg" v-model="state.valueLG" />
+                    <BadgeStd label="56px" size="sm" class="ml-auto" />
+                </div>
             </div>
         </Variant>
 
         <Variant title="Icons" :init-state="stateIcons" v-slot="{ state }">
-            <div class="flex flex-col gap-4">
+            <div class="flex flex-col gap-4 p-2">
                 <div class="flex flex-row gap-4">
-                    <BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
-                    <BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
+                    <BalloonSelector v-bind="state" size="sm" v-model="state.valueSM" />
                 </div>
                 <div class="flex flex-row gap-4">
-                    <BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
-                    <BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
+                    <BalloonSelector v-bind="state" v-model="state.valueMD" />
                 </div>
                 <div class="flex flex-row gap-4">
-                    <BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
-                    <BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
+                    <BalloonSelector v-bind="state" size="lg" v-model="state.valueLG" />
                 </div>
             </div>
         </Variant>
 
         <Variant title="Connected" :init-state="stateConnected" v-slot="{ state }">
-            <div class="flex flex-col gap-4">
+            <div class="flex flex-col gap-4 p-2">
                 <div class="flex flex-row gap-4">
-                    <BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
-                    <BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
+                    <BalloonSelector v-bind="state" size="sm" v-model="state.valueSM" />
                 </div>
                 <div class="flex flex-row gap-4">
-                    <BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
-                    <BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
+                    <BalloonSelector v-bind="state" v-model="state.valueMD" />
                 </div>
                 <div class="flex flex-row gap-4">
-                    <BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
-                    <BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
+                    <BalloonSelector v-bind="state" size="lg" v-model="state.valueLG" />
                 </div>
             </div>
         </Variant>
 
         <Variant title="Condensed" :init-state="stateCondensed" v-slot="{ state }">
-            <div class="flex flex-col gap-4">
+            <div class="flex flex-col gap-4 p-2">
                 <div class="flex flex-row gap-4">
-                    <BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
-                    <BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
+                    <BalloonSelector v-bind="state" size="sm" v-model="state.valueSM" />
                 </div>
                 <div class="flex flex-row gap-4">
-                    <BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
-                    <BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
+                    <BalloonSelector v-bind="state" v-model="state.valueMD" />
                 </div>
                 <div class="flex flex-row gap-4">
-                    <BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
-                    <BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
+                    <BalloonSelector v-bind="state" size="lg" v-model="state.valueLG" />
                 </div>
             </div>
         </Variant>
@@ -74,36 +81,36 @@
         <Variant title="States" :init-state="stateStates" v-slot="{ state }">
             <div class="flex flex-col flex-1 gap-4">
                 <div class="flex flex-row items-center flex-1 gap-4">
-                    <div class="basis-36">Default</div>
                     <BalloonSelector v-bind="state" v-model="state.valueNormal" />
+                    <BadgeStd label="Default" color="primary" size="sm" class="ml-auto" />
                 </div>
                 <div class="flex flex-row items-center flex-1 gap-4">
-                    <div class="basis-36">Selected</div>
                     <BalloonSelector v-bind="state" v-model="state.valueSelected" />
+                    <BadgeStd label="Selected" size="sm" class="ml-auto" />
                 </div>
                 <div class="flex flex-row items-center flex-1 gap-4">
-                    <div class="basis-36">Disabled</div>
                     <BalloonSelector v-bind="state" disabled v-model="state.valueDisabled" />
+                    <BadgeStd label="Disabled" size="sm" class="ml-auto" />
                 </div>
                 <div class="flex flex-row items-center flex-1 gap-4">
-                    <div class="basis-36">Disabled Selected</div>
                     <BalloonSelector v-bind="state" disabled v-model="state.valueDisabledSelected" />
+                    <BadgeStd label="Disabled Selected" size="sm" class="ml-auto" />
                 </div>
                 <div class="flex flex-row items-center flex-1 gap-4">
-                    <div class="basis-36">Valid</div>
                     <BalloonSelector v-bind="state" validation="valid" v-model="state.valueValid" />
+                    <BadgeStd label="Valid" size="sm" class="ml-auto" />
                 </div>
                 <div class="flex flex-row items-center flex-1 gap-4">
-                    <div class="basis-36">Valid Selected</div>
                     <BalloonSelector v-bind="state" validation="valid" v-model="state.valueValidSelected" />
+                    <BadgeStd label="Valid Selected" size="sm" class="ml-auto" />
                 </div>
                 <div class="flex flex-row items-center flex-1 gap-4">
-                    <div class="basis-36">Invalid</div>
                     <BalloonSelector v-bind="state" validation="invalid" v-model="state.valueInvalid" />
+                    <BadgeStd label="Invalid" size="sm" class="ml-auto" />
                 </div>
                 <div class="flex flex-row items-center flex-1 gap-4">
-                    <div class="basis-36">Invalid Selected</div>
                     <BalloonSelector v-bind="state" validation="invalid" v-model="state.valueInvalidSelected" />
+                    <BadgeStd label="Invalid Selected" size="sm" class="ml-auto" />
                 </div>
             </div>
         </Variant>
@@ -112,6 +119,7 @@
 
 <script lang="ts" setup>
 import { h, ref } from 'vue';
+import BadgeStd from '../badge/BadgeStd.vue';
 import BalloonSelector from './BalloonSelector.vue';
 
 
@@ -120,11 +128,11 @@ const AlignLeft = {
     props: {
         size: Number
     },
-    render(ctx: any) {
+    render(props: any) {
         return h('svg', {
             xmlns: "http://www.w3.org/2000/svg",
-            width: ctx?.props?.size ?? 16,
-            height: ctx?.props?.size ?? 16,
+            width: props?.size ?? 16,
+            height: props?.size ?? 16,
             viewBox: "0 0 24 24",
             fill: "none",
             stroke: "currentColor",
@@ -145,11 +153,11 @@ const AlignCenter = {
     props: {
         size: Number
     },
-    render(ctx: any) {
+    render(props: any) {
         return h('svg', {
             xmlns: "http://www.w3.org/2000/svg",
-            width: ctx?.props?.size ?? 16,
-            height: ctx?.props?.size ?? 16,
+            width: props?.size ?? 16,
+            height: props?.size ?? 16,
             viewBox: "0 0 24 24",
             fill: "none",
             stroke: "currentColor",
@@ -170,11 +178,11 @@ const AlignRight = {
     props: {
         size: Number
     },
-    render(ctx: any) {
+    render(props: any) {
         return h('svg', {
             xmlns: "http://www.w3.org/2000/svg",
-            width: ctx?.props?.size ?? 16,
-            height: ctx?.props?.size ?? 16,
+            width: props?.size ?? 16,
+            height: props?.size ?? 16,
             viewBox: "0 0 24 24",
             fill: "none",
             stroke: "currentColor",
diff --git a/src/components/control/BalloonSelector.vue b/src/components/control/BalloonSelector.vue
index f257170..e7635c0 100644
--- a/src/components/control/BalloonSelector.vue
+++ b/src/components/control/BalloonSelector.vue
@@ -282,7 +282,7 @@ function onSelect(option: BalloonSelectorOptionTypes) {
 
 <style scoped>
 .field-balloon-selector {
-    @apply flex flex-col gap-2;
+    @apply h-10 flex flex-col gap-2;
 
     @screen lg {
         @apply flex-row;
@@ -290,29 +290,24 @@ function onSelect(option: BalloonSelectorOptionTypes) {
 }
 
 .balloon-item {
-    @apply w-full relative cursor-pointer border border-solid;
+    @apply w-full relative cursor-pointer border border-solid first:rounded-t-md last:rounded-b-md;
     @apply transition-colors duration-300 ease-in-out;
 
-    &:first-child {
-        @apply rounded-t-md;
+    @screen md {
+        @apply w-auto first:rounded-l-md first:rounded-r-none last:rounded-r-md last:rounded-l-none;
     }
 
-    &:last-child {
-        @apply rounded-b-md;
+    & input {
+        @apply invisible absolute right-0 w-0 h-0;
     }
 
-    @screen md {
-        @apply w-auto;
-
-        &:first-child {
-            @apply rounded-l-md rounded-r-none;
-        }
-
-        &:last-child {
-            @apply rounded-r-md rounded-l-none;
-        }
+    & :slotted(.item-label) {
+        @apply h-full inline-flex flex-row gap-2 text-sm font-semibold px-5 py-2 items-center whitespace-nowrap;
     }
+}
 
+/** States */
+.balloon-item {
     &.item-disabled {
         @apply cursor-not-allowed;
         @apply bg-gray-100 border-gray-300 text-gray-400;
@@ -358,31 +353,22 @@ function onSelect(option: BalloonSelectorOptionTypes) {
             @apply dark:bg-success-900 dark:text-success-300;
         }
     }
-
-    & input {
-        @apply invisible absolute right-0 w-0 h-0;
-    }
-
-    & :slotted(.item-label) {
-        @apply h-full inline-flex flex-row gap-2 text-sm font-semibold px-5 items-center;
-        padding-top: calc(0.875rem - 1px);
-        padding-bottom: calc(0.875rem - 1px);
-    }
 }
 
 /** Sizes */
 .field-balloon-selector.field-sm {
+    @apply h-8;
+
     & .balloon-item :slotted(.item-label) {
-        @apply text-xs px-3.5;
-        padding-top: calc(0.75rem - 1px);
-        padding-bottom: calc(0.75rem - 1px);
+        @apply px-3.5 py-1.5 text-xs;
     }
 }
+
 .field-balloon-selector.field-lg {
+    @apply h-14;
+    
     & .balloon-item :slotted(.item-label) {
-        @apply text-base px-7;
-        padding-top: calc(1.0rem - 1px);
-        padding-bottom: calc(1.0rem - 1px);
+        @apply px-7 py-3.5 text-base;
     }
 }
 
diff --git a/src/components/control/CalendarField.story.vue b/src/components/control/CalendarField.story.vue
index 230cb66..0f6e5e2 100644
--- a/src/components/control/CalendarField.story.vue
+++ b/src/components/control/CalendarField.story.vue
@@ -1,31 +1,45 @@
 <template>
-    <Story title="Form/Control/CalendarField" :layout="{ type: 'grid', width: '400px' }">
+    <Story title="Form/Control/CalendarField" :layout="{ type: 'grid', width: '800px' }">
         <Variant title="Default" :init-state="stateDefault" v-slot="{ state }">
-            <CalendarField v-bind="state" v-model="state.value" />
+            <div class="p-2 max-w-[360px] mx-auto">
+                <CalendarField v-bind="state" v-model="state.value" />
+            </div>
         </Variant>
 
         <Variant title="Monday" :init-state="stateMonday" v-slot="{ state }">
-            <CalendarField v-bind="state" v-model="state.value" />
+            <div class="p-2 max-w-[360px] mx-auto">
+                <CalendarField v-bind="state" v-model="state.value" />
+            </div>
         </Variant>
 
         <Variant title="Week Numbers" :init-state="stateNumbers" v-slot="{ state }">
-            <CalendarField v-bind="state" v-model="state.value" />
+            <div class="p-2 max-w-[360px] mx-auto">
+                <CalendarField v-bind="state" v-model="state.value" />
+            </div>
         </Variant>
 
         <Variant title="Austrian" :init-state="stateAustrian" v-slot="{ state }">
-            <CalendarField v-bind="state" v-model="state.value" />
+            <div class="p-2 max-w-[360px] mx-auto">
+                <CalendarField v-bind="state" v-model="state.value" />
+            </div>
         </Variant>
 
         <Variant title="Min/Max Range" :init-state="stateRange" v-slot="{ state }">
-            <CalendarField v-bind="state" v-model="state.value" />
+            <div class="p-2 max-w-[360px] mx-auto">
+                <CalendarField v-bind="state" v-model="state.value" />
+            </div>
         </Variant>
 
         <Variant title="Date Ranges" :init-state="stateRanges" v-slot="{ state }">
-            <CalendarField v-bind="state" v-model="state.value" />
+            <div class="p-2 max-w-[360px] mx-auto">
+                <CalendarField v-bind="state" v-model="state.value" />
+            </div>
         </Variant>
 
         <Variant title="Time" :init-state="stateTime" v-slot="{ state }">
-            <CalendarField v-bind="state" v-model="state.value" />
+            <div class="p-2 max-w-[360px] mx-auto">
+                <CalendarField v-bind="state" v-model="state.value" />
+            </div>
         </Variant>
     </Story>
 </template>
diff --git a/src/components/control/InputField.story.vue b/src/components/control/InputField.story.vue
index 74b4cf3..737ee2e 100644
--- a/src/components/control/InputField.story.vue
+++ b/src/components/control/InputField.story.vue
@@ -8,8 +8,8 @@
         
         <Variant title="Sizes" :init-state="stateSizes" v-slot="{ state }">
             <div class="flex flex-col gap-4 p-2">
-                <InputField v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
-                <InputField v-bind="state" placeholder="48px height" v-model="state.valueMD" />
+                <InputField v-bind="state" size="sm" placeholder="32px height" v-model="state.valueSM" />
+                <InputField v-bind="state" placeholder="40px height" v-model="state.valueMD" />
                 <InputField v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
             </div>
         </Variant>
diff --git a/src/components/control/InputField.vue b/src/components/control/InputField.vue
index b3b4942..beeac06 100644
--- a/src/components/control/InputField.vue
+++ b/src/components/control/InputField.vue
@@ -227,7 +227,7 @@ const isDateTime = computed<boolean>(() => {
 
 <style scoped>
 .field-input {
-    @apply w-full h-12 px-4 py-2.5 border border-solid rounded-md outline-none shadow-none;
+    @apply w-full h-10 px-4 py-2.5 border border-solid rounded-md outline-none shadow-none;
     @apply duration-300 ease-in-out;
     @apply bg-transparent border-gray-400;
     @apply dark:bg-gray-900 dark:border-gray-700;
@@ -266,7 +266,7 @@ const isDateTime = computed<boolean>(() => {
 
 /** Sizes */
 .field-input.field-sm {
-    @apply h-10 py-1.5;
+    @apply h-8 py-1.5;
     /* required to prevent zoom-behaviour on apple devices */
     /* @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
     font-size: 16px;
diff --git a/src/components/control/NumberField.story.vue b/src/components/control/NumberField.story.vue
index 0e8b4f7..b89b32a 100644
--- a/src/components/control/NumberField.story.vue
+++ b/src/components/control/NumberField.story.vue
@@ -1,10 +1,37 @@
 <template>
     <Story title="Form/Control/NumberField" :layout="{ type: 'grid', width: '800px' }">
         <Variant title="Default" :init-state="stateDefault" v-slot="{ state }">
-            <div class="p-2">
+            <div class="max-w-[400px] mx-auto p-2">
                 <NumberField v-bind="state" v-model="state.value" />
             </div>
         </Variant>
+        
+        <Variant title="Sizes" :init-state="stateSizes" v-slot="{ state }">
+            <div class="max-w-[400px] mx-auto flex flex-col gap-4 p-2">
+                <NumberField v-bind="state" size="sm" placeholder="32px height" v-model="state.valueSM" />
+                <NumberField v-bind="state" placeholder="40px height" v-model="state.valueMD" />
+                <NumberField v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
+            </div>
+        </Variant>
+        
+        <Variant title="States" :init-state="stateStates" v-slot="{ state }">
+            <div class="max-w-[600px] mx-auto flex flex-row gap-4 p-2">
+                <div class="flex flex-col flex-1 gap-4">
+                    <NumberField v-bind="state" placeholder="Default State" v-model="state.placeholderValueNormal" />
+                    <NumberField v-bind="state" placeholder="Disabled State" disabled v-model="state.placeholderValueDisabled" />
+                    <NumberField v-bind="state" placeholder="Readonly State" readonly v-model="state.placeholderValueReadonly" />
+                    <NumberField v-bind="state" placeholder="Valid State" validation="valid" v-model="state.placeholderValueValid" />
+                    <NumberField v-bind="state" placeholder="Invalid State" validation="invalid" v-model="state.placeholderValueInvalid" />
+                </div>
+                <div class="flex flex-col flex-1 gap-4">
+                    <NumberField v-bind="state" v-model="state.valueNormal" />
+                    <NumberField v-bind="state" v-model="state.valueDisabled" disabled />
+                    <NumberField v-bind="state" v-model="state.valueReadonly" readonly />
+                    <NumberField v-bind="state" v-model="state.valueValid" validation="valid" />
+                    <NumberField v-bind="state" v-model="state.valueInvalid" validation="invalid" />
+                </div>
+            </div>
+        </Variant>
     </Story>
 </template>
 
@@ -17,6 +44,30 @@ function stateDefault() {
         value: ref(),
     }
 }
+
+function stateSizes() {
+    return {
+        placeholder: 'Placeholder',
+        valueSM: ref(),
+        valueMD: ref(),
+        valueLG: ref(),
+    }
+}
+
+function stateStates() {
+    return {
+        placeholderValueNormal: ref<string>(''),
+        placeholderValueDisabled: ref<string>(''),
+        placeholderValueReadonly: ref<string>(''),
+        placeholderValueValid: ref<string>(''),
+        placeholderValueInvalid: ref<string>(''),
+        valueNormal: ref<string>('Default State'),
+        valueDisabled: ref<string>('Disabled State'),
+        valueReadonly: ref<string>('Readonly State'),
+        valueValid: ref<string>('Valid State'),
+        valueInvalid: ref<string>('Invalid State'),
+    }
+}
 </script>
 
 <docs lang="md">
diff --git a/src/components/control/NumberField.vue b/src/components/control/NumberField.vue
index 984a69a..4d7a6ee 100644
--- a/src/components/control/NumberField.vue
+++ b/src/components/control/NumberField.vue
@@ -1,8 +1,23 @@
 <template>
-    <div class="field-group">
-        <ActionButton :icon="LucideMinusSign" :size="props.size || 'md'" @click="onDecrease" :disabled="reachedMin" />
-        <InputField v-bind="props" type="text" @keydown="onKeyDown" @input.prevent="onInput" inputmode="numeric" v-model="value" />
-        <ActionButton :icon="LucidePlusSign" :size="props.size || 'md'" @click="onIncrease" :disabled="reachedMax" />
+    <div class="field-group" :class="[`field-group-${props.size || 'md'}`]">
+        <ActionButton 
+            :icon="LucideMinusSign" 
+            :iconProps="{ size: 16 }" 
+            :size="(props.size || 'md') == 'sm' ? 'sm' : 'md'" 
+            :disabled="reachedMin"
+            @click="onDecrease" />
+        <InputField v-bind="props" 
+            type="text" 
+            @keydown="onKeyDown" 
+            @input.prevent="onInput" 
+            inputmode="numeric" 
+            v-model="value" />
+        <ActionButton 
+            :icon="LucidePlusSign" 
+            :iconProps="{ size: 16 }" 
+            :size="(props.size || 'md') == 'sm' ? 'sm' : 'md'" 
+            :disabled="reachedMax"
+            @click="onIncrease" />
     </div>
 </template>
 
@@ -13,12 +28,11 @@ import type { MaybeRef } from 'vue';
  * NumberField Properties
  */
 export interface NumberFieldProps {
-
     /**
      * A custom number field id, usually passed by the FormControl component. The default value is an 
      * auto-generated UUID.
      */
-     id?: null | string;
+    id?: null | string;
 
     /**
      * The name attribute for this number field.
@@ -205,10 +219,20 @@ function onIncrease() {
 }
 
 :deep(.btn-action:first-child) {
-    @apply top-2 left-2 absolute;
+    @apply top-1 left-1 absolute;
 }
 
 :deep(.btn-action:last-child) {
-    @apply top-2 right-2 absolute;
+    @apply top-1 right-1 absolute;
+}
+
+.field-group-lg {
+    & :deep(.btn-action:first-child) {
+        @apply top-3 left-2;
+    }
+
+    & :deep(.btn-action:last-child) {
+        @apply top-3 right-2;
+    }
 }
 </style>
diff --git a/src/components/control/PasswordField.story.vue b/src/components/control/PasswordField.story.vue
index 34987c5..ee8d34e 100644
--- a/src/components/control/PasswordField.story.vue
+++ b/src/components/control/PasswordField.story.vue
@@ -1,21 +1,21 @@
 <template>
     <Story title="Form/Control/PasswordField" :layout="{ type: 'grid', width: '800px' }">
         <Variant title="Default" :init-state="stateDefault" v-slot="{ state }">
-            <div class="p-2">
+            <div class="max-w-[400px] mx-auto p-2">
                 <PasswordField v-bind="state" v-model="state.value" />
             </div>
         </Variant>
         
         <Variant title="Sizes" :init-state="stateSizes" v-slot="{ state }">
-            <div class="flex flex-col gap-4 p-2">
-                <PasswordField v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
-                <PasswordField v-bind="state" placeholder="48px height" v-model="state.valueMD" />
+            <div class="max-w-[400px] mx-auto flex flex-col gap-4 p-2">
+                <PasswordField v-bind="state" size="sm" placeholder="32px height" v-model="state.valueSM" />
+                <PasswordField v-bind="state" placeholder="40px height" v-model="state.valueMD" />
                 <PasswordField v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
             </div>
         </Variant>
         
         <Variant title="States" :init-state="stateStates" v-slot="{ state }">
-            <div class="flex flex-row gap-4 p-2">
+            <div class="max-w-[600px] mx-auto flex flex-row gap-4 p-2">
                 <div class="flex flex-col flex-1 gap-4">
                     <PasswordField v-bind="state" placeholder="Default State" v-model="state.placeholderValueNormal" />
                     <PasswordField v-bind="state" placeholder="Disabled State" disabled v-model="state.placeholderValueDisabled" />
diff --git a/src/components/control/PasswordField.vue b/src/components/control/PasswordField.vue
index a4a47f6..7b78df8 100644
--- a/src/components/control/PasswordField.vue
+++ b/src/components/control/PasswordField.vue
@@ -1,7 +1,12 @@
 <template>
-    <div class="field-group">
-        <InputField v-bind="props" :type="visible ? 'text' : 'password'" v-model="value" />
-        <ActionButton :icon="visible ? LucideEyeOn : LucideEyeOff" :size="props.size || 'md'" @click="visible = !visible" />
+    <div class="field-group" :class="[`field-group-${props.size || 'md'}`]">
+        <InputField v-bind="props" 
+            :type="visible ? 'text' : 'password'" 
+            v-model="value" />
+        <ActionButton 
+            :icon="visible ? LucideEyeOn : LucideEyeOff" 
+            :size="(props.size || 'md') == 'sm' ? 'sm' : 'md'" 
+             @click="visible = !visible" />
     </div>
 </template>
 
@@ -121,6 +126,12 @@ const value = computed({
 }
 
 :deep(.btn-action) {
-    @apply top-2 right-2 absolute;
+    @apply top-1 right-1 absolute;
+}
+
+.field-group-lg {
+    & :deep(.btn-action) {
+        @apply top-3 right-2;
+    }
 }
 </style>
diff --git a/src/components/control/PriceField.story.vue b/src/components/control/PriceField.story.vue
index c32c7c6..c963c34 100644
--- a/src/components/control/PriceField.story.vue
+++ b/src/components/control/PriceField.story.vue
@@ -1,13 +1,13 @@
 <template>
     <Story title="Form/Control/PriceField" :layout="{ type: 'grid', width: '800px' }">
         <Variant title="Default" :init-state="stateDefault" v-slot="{ state }">
-            <div class="p-2">
+            <div class="max-w-[400px] mx-auto p-2">
                 <PriceField v-bind="state" v-model="state.value" />
             </div>
         </Variant>
         
         <Variant title="Currencies" :init-state="stateCurrencies" v-slot="{ state }">
-            <div class="flex flex-col gap-4 p-2">
+            <div class="max-w-[400px] mx-auto flex flex-col gap-4 p-2">
                 <PriceField v-bind="state" v-model="state.value" placeholder="currency" icon="currency" />
                 <PriceField v-bind="state" v-model="state.value" placeholder="bitcoin" icon="bitcoin" />
                 <PriceField v-bind="state" v-model="state.value" placeholder="dollar" icon="dollar" />
@@ -21,6 +21,33 @@
                 <PriceField v-bind="state" v-model="state.value" placeholder="Custom Icon" :icon="icon" />
             </div>
         </Variant>
+        
+        <Variant title="Sizes" :init-state="stateSizes" v-slot="{ state }">
+            <div class="max-w-[400px] mx-auto flex flex-col gap-4 p-2">
+                <PriceField v-bind="state" size="sm" placeholder="32px height" v-model="state.valueSM" />
+                <PriceField v-bind="state" placeholder="40px height" v-model="state.valueMD" />
+                <PriceField v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
+            </div>
+        </Variant>
+        
+        <Variant title="States" :init-state="stateStates" v-slot="{ state }">
+            <div class="max-w-[600px] mx-auto flex flex-row gap-4 p-2">
+                <div class="flex flex-col flex-1 gap-4">
+                    <PriceField v-bind="state" placeholder="Default State" v-model="state.placeholderValueNormal" />
+                    <PriceField v-bind="state" placeholder="Disabled State" disabled v-model="state.placeholderValueDisabled" />
+                    <PriceField v-bind="state" placeholder="Readonly State" readonly v-model="state.placeholderValueReadonly" />
+                    <PriceField v-bind="state" placeholder="Valid State" validation="valid" v-model="state.placeholderValueValid" />
+                    <PriceField v-bind="state" placeholder="Invalid State" validation="invalid" v-model="state.placeholderValueInvalid" />
+                </div>
+                <div class="flex flex-col flex-1 gap-4">
+                    <PriceField v-bind="state" v-model="state.valueNormal" />
+                    <PriceField v-bind="state" v-model="state.valueDisabled" disabled />
+                    <PriceField v-bind="state" v-model="state.valueReadonly" readonly />
+                    <PriceField v-bind="state" v-model="state.valueValid" validation="valid" />
+                    <PriceField v-bind="state" v-model="state.valueInvalid" validation="invalid" />
+                </div>
+            </div>
+        </Variant>
     </Story>
 </template>
 
@@ -68,6 +95,30 @@ function stateCurrencies() {
 
     }
 }
+
+function stateSizes() {
+    return {
+        placeholder: 'Placeholder',
+        valueSM: ref(),
+        valueMD: ref(),
+        valueLG: ref(),
+    }
+}
+
+function stateStates() {
+    return {
+        placeholderValueNormal: ref<string>(''),
+        placeholderValueDisabled: ref<string>(''),
+        placeholderValueReadonly: ref<string>(''),
+        placeholderValueValid: ref<string>(''),
+        placeholderValueInvalid: ref<string>(''),
+        valueNormal: ref<string>('Default State'),
+        valueDisabled: ref<string>('Disabled State'),
+        valueReadonly: ref<string>('Readonly State'),
+        valueValid: ref<string>('Valid State'),
+        valueInvalid: ref<string>('Invalid State'),
+    }
+}
 </script>
 
 <docs lang="md">
diff --git a/src/components/control/SelectField.story.vue b/src/components/control/SelectField.story.vue
index 2426b61..f779899 100644
--- a/src/components/control/SelectField.story.vue
+++ b/src/components/control/SelectField.story.vue
@@ -1,13 +1,13 @@
 <template>
     <Story title="Form/Control/SelectField" :layout="{ type: 'grid', width: '800px' }">
         <Variant title="Default" :init-state="stateDefault" v-slot="{ state }">
-            <div class="p-2">
+            <div class="max-w-[400px] mx-auto p-2">
                 <SelectField v-bind="state" v-model="state.value" />
             </div>
         </Variant>
         
         <Variant title="Sizes" :init-state="stateSizes" v-slot="{ state }">
-            <div class="flex flex-col gap-4 p-2">
+            <div class="max-w-[400px] mx-auto flex flex-col gap-4 p-2">
                 <SelectField v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
                 <SelectField v-bind="state" placeholder="48px height" v-model="state.valueMD" />
                 <SelectField v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
@@ -15,7 +15,7 @@
         </Variant>
 
         <Variant title="States" :init-state="stateStates" v-slot="{ state }">
-            <div class="flex flex-row gap-4 p-2">
+            <div class="max-w-[600px] mx-auto flex flex-row gap-4 p-2">
                 <div class="flex flex-col flex-1 gap-4">
                     <SelectField v-bind="state" placeholder="Default State" v-model="state.placeholderValueNormal" />
                     <SelectField v-bind="state" placeholder="Disabled State" disabled v-model="state.placeholderValueDisabled" />
diff --git a/src/components/control/SelectField.vue b/src/components/control/SelectField.vue
index 0549154..47a3b15 100644
--- a/src/components/control/SelectField.vue
+++ b/src/components/control/SelectField.vue
@@ -132,7 +132,7 @@ const fieldId = computed<string>(() => props.id || `field-${uuid().replace(/-/g,
 
 <style scoped>
 .field-select {
-    @apply w-full h-12 px-4 py-2.5 border border-solid rounded-md outline-none shadow-none appearance-none;
+    @apply w-full h-10 px-4 py-2 border border-solid rounded-md outline-none shadow-none appearance-none;
     @apply duration-300 ease-in-out;
     @apply bg-transparent border-gray-400;
     @apply dark:bg-gray-900 dark:border-gray-700;
@@ -174,7 +174,7 @@ const fieldId = computed<string>(() => props.id || `field-${uuid().replace(/-/g,
 
 /** Sizes */
 .field-select.field-sm {
-    @apply h-10 py-1.5;
+    @apply h-8 py-1;
     /* required to prevent zoom-behaviour on apple devices, added here too for consistency */
     /* @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
     font-size: 16px;
@@ -184,6 +184,6 @@ const fieldId = computed<string>(() => props.id || `field-${uuid().replace(/-/g,
     }
 }
 .field-select.field-lg {
-    @apply h-14 py-4 text-lg;
+    @apply h-14 py-3 text-lg;
 }
 </style>
diff --git a/src/components/control/TextareaField.story.vue b/src/components/control/TextareaField.story.vue
index 8f65552..3ccde16 100644
--- a/src/components/control/TextareaField.story.vue
+++ b/src/components/control/TextareaField.story.vue
@@ -1,21 +1,21 @@
 <template>
     <Story title="Form/Control/TextareaField" :layout="{ type: 'grid', width: '800px' }">
         <Variant title="Default" :init-state="stateDefault" v-slot="{ state }">
-            <div class="p-2">
+            <div class="max-w-[400px] mx-auto p-2">
                 <TextareaField v-bind="state" v-model="state.value" />
             </div>
         </Variant>
         
         <Variant title="Sizes" :init-state="stateSizes" v-slot="{ state }">
-            <div class="flex flex-col gap-4 p-2">
-                <TextareaField v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
-                <TextareaField v-bind="state" placeholder="48px height" v-model="state.valueMD" />
-                <TextareaField v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
+            <div class="max-w-[400px] mx-auto flex flex-col gap-4 p-2">
+                <TextareaField v-bind="state" size="sm" placeholder="Placeholder" v-model="state.valueSM" />
+                <TextareaField v-bind="state" placeholder="Placeholder" v-model="state.valueMD" />
+                <TextareaField v-bind="state" size="lg" placeholder="Placeholder" v-model="state.valueLG" />
             </div>
         </Variant>
         
         <Variant title="States" :init-state="stateStates" v-slot="{ state }">
-            <div class="flex flex-row gap-4 p-2">
+            <div class="max-w-[600px] mx-auto flex flex-row gap-4 p-2">
                 <div class="flex flex-col flex-1 gap-4">
                     <TextareaField v-bind="state" placeholder="Default State" v-model="state.placeholderValueNormal" />
                     <TextareaField v-bind="state" placeholder="Disabled State" disabled v-model="state.placeholderValueDisabled" />
diff --git a/src/components/control/TimeFrameField.story.vue b/src/components/control/TimeFrameField.story.vue
index 1e90b16..606e793 100644
--- a/src/components/control/TimeFrameField.story.vue
+++ b/src/components/control/TimeFrameField.story.vue
@@ -1,16 +1,24 @@
 <template>
     <Story title="Form/Control/TimeFrameField" :layout="{ type: 'grid', width: '800px' }">
         <Variant title="Default" :init-state="stateDefault" v-slot="{ state }">
-            <div class="p-2">
+            <div class="max-w-[400px] mx-auto p-2">
                 <TimeFrameField v-bind="state" v-model="state.value" />
             </div>
         </Variant>
 
         <Variant title="Between" :init-state="stateBetween" v-slot="{ state }">
-            <div class="p-2">
+            <div class="max-w-[400px] mx-auto p-2">
                 <TimeFrameField v-bind="state" v-model="state.value" />
             </div>
         </Variant>
+        
+        <Variant title="Sizes" :init-state="stateSizes" v-slot="{ state }">
+            <div class="max-w-[400px] mx-auto flex flex-col gap-4 p-2">
+                <TimeFrameField v-bind="state" size="sm" placeholder="32px height" v-model="state.valueSM" />
+                <TimeFrameField v-bind="state" placeholder="40px height" v-model="state.valueMD" />
+                <TimeFrameField v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
+            </div>
+        </Variant>
     </Story>
 </template>
 
@@ -30,6 +38,15 @@ function stateBetween() {
         value: ref()
     }
 }
+
+function stateSizes() {
+    return {
+        placeholder: 'Placeholder',
+        valueSM: ref(),
+        valueMD: ref(),
+        valueLG: ref(),
+    }
+}
 </script>
 
 <docs lang="md">
diff --git a/src/components/dialog/ConfirmDialog.story.vue b/src/components/dialog/ConfirmDialog.story.vue
index 783d0f5..e5eb940 100644
--- a/src/components/dialog/ConfirmDialog.story.vue
+++ b/src/components/dialog/ConfirmDialog.story.vue
@@ -22,7 +22,6 @@ import { ref } from 'vue';
 import ButtonStd from '../button/ButtonStd.vue';
 import ConfirmDialog from './ConfirmDialog.vue';
 
-
 function stateDefault() {
     const visible = ref<boolean>(false);
     const loading = ref<boolean>(false);