From 70846273d15c75daa522e2edeac6f041cba8a900 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Murat=20=C3=87orlu?=
 <127687+muratcorlu@users.noreply.github.com>
Date: Thu, 17 Nov 2022 09:45:55 +0100
Subject: [PATCH] feat: radio component (#301)

---
 commitlint.config.js                          |   3 +-
 package-lock.json                             | 781 ++++--------------
 package.json                                  |   2 +-
 src/baklava.ts                                |  20 +-
 src/components/radio-group/bl-radio-group.css |  21 +
 .../radio-group/bl-radio-group.stories.mdx    |  96 +++
 .../radio-group/bl-radio-group.test.ts        | 248 ++++++
 src/components/radio-group/bl-radio-group.ts  | 133 +++
 src/components/radio-group/radio/bl-radio.css |  64 ++
 .../radio-group/radio/bl-radio.stories.mdx    |  76 ++
 .../radio-group/radio/bl-radio.test.ts        |  34 +
 src/components/radio-group/radio/bl-radio.ts  | 138 ++++
 12 files changed, 969 insertions(+), 647 deletions(-)
 create mode 100644 src/components/radio-group/bl-radio-group.css
 create mode 100644 src/components/radio-group/bl-radio-group.stories.mdx
 create mode 100644 src/components/radio-group/bl-radio-group.test.ts
 create mode 100644 src/components/radio-group/bl-radio-group.ts
 create mode 100644 src/components/radio-group/radio/bl-radio.css
 create mode 100644 src/components/radio-group/radio/bl-radio.stories.mdx
 create mode 100644 src/components/radio-group/radio/bl-radio.test.ts
 create mode 100644 src/components/radio-group/radio/bl-radio.ts

diff --git a/commitlint.config.js b/commitlint.config.js
index 88293ac3..04ace809 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -19,7 +19,8 @@ module.exports = {
         'alert',
         'select',
         'pagination',
-        'dialog'
+        'radio',
+        'dialog',
       ],
     ],
   },
diff --git a/package-lock.json b/package-lock.json
index 76d5880c..c4e589fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@lit-labs/react": "^1.0.7",
         "@open-wc/form-control": "^0.4.1",
         "@open-wc/form-helpers": "^0.1.2",
-        "element-internals-polyfill": "^1.1.11",
+        "element-internals-polyfill": "^1.1.15",
         "lit": "^2.2.3"
       },
       "devDependencies": {
@@ -6632,8 +6632,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@types/command-line-args/-/command-line-args-5.2.0.tgz",
       "integrity": "sha512-UuKzKpJJ/Ief6ufIaIzr3A/0XnluX7RvFgwkV89Yzvm77wCh1kFaFmqN8XEnGcN62EuHdedQjEMb8mYxFLGPyA==",
-      "dev": true,
-      "license": "MIT"
+      "dev": true
     },
     "node_modules/@types/connect": {
       "version": "3.4.35",
@@ -7481,6 +7480,35 @@
         "node": ">=10"
       }
     },
+    "node_modules/@web/dev-server": {
+      "version": "0.1.35",
+      "resolved": "https://registry.npmjs.org/@web/dev-server/-/dev-server-0.1.35.tgz",
+      "integrity": "sha512-E7TSTSFdGPzhkiE3kIVt8i49gsiAYpJIZHzs1vJmVfdt8U4rsmhE+5roezxZo0hkEw4mNsqj9zCc4Dzqy/IFHg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.12.11",
+        "@types/command-line-args": "^5.0.0",
+        "@web/config-loader": "^0.1.3",
+        "@web/dev-server-core": "^0.3.19",
+        "@web/dev-server-rollup": "^0.3.19",
+        "camelcase": "^6.2.0",
+        "command-line-args": "^5.1.1",
+        "command-line-usage": "^6.1.1",
+        "debounce": "^1.2.0",
+        "deepmerge": "^4.2.2",
+        "ip": "^1.1.5",
+        "nanocolors": "^0.2.1",
+        "open": "^8.0.2",
+        "portfinder": "^1.0.32"
+      },
+      "bin": {
+        "wds": "dist/bin.js",
+        "web-dev-server": "dist/bin.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@web/dev-server-core": {
       "version": "0.3.19",
       "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.3.19.tgz",
@@ -7580,15 +7608,16 @@
       }
     },
     "node_modules/@web/dev-server-rollup": {
-      "version": "0.3.17",
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@web/dev-server-rollup/-/dev-server-rollup-0.3.19.tgz",
+      "integrity": "sha512-IwiwI+fyX0YuvAOldStlYJ+Zm/JfSCk9OSGIs7+fWbOYysEHwkEVvBwoPowaclSZA44Tobvqt+6ej9udbbZ/WQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@rollup/plugin-node-resolve": "^13.0.4",
-        "@web/dev-server-core": "^0.3.16",
+        "@web/dev-server-core": "^0.3.19",
         "nanocolors": "^0.2.1",
         "parse5": "^6.0.1",
-        "rollup": "^2.66.1",
+        "rollup": "^2.67.0",
         "whatwg-url": "^11.0.0"
       },
       "engines": {
@@ -7647,16 +7676,17 @@
       }
     },
     "node_modules/@web/test-runner": {
-      "version": "0.13.27",
+      "version": "0.13.31",
+      "resolved": "https://registry.npmjs.org/@web/test-runner/-/test-runner-0.13.31.tgz",
+      "integrity": "sha512-QMj/25U25AkhN4ffBoMMPdpQLNojL8cAzlyIh/oyVp385Cjmd4Hz8S0u4PvWJmDRmPerbJRNtsWafB8/EcQ1rA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@web/browser-logs": "^0.2.2",
         "@web/config-loader": "^0.1.3",
-        "@web/dev-server": "^0.1.24",
+        "@web/dev-server": "^0.1.32",
         "@web/test-runner-chrome": "^0.10.7",
-        "@web/test-runner-commands": "^0.6.0",
-        "@web/test-runner-core": "^0.10.22",
+        "@web/test-runner-commands": "^0.6.3",
+        "@web/test-runner-core": "^0.10.27",
         "@web/test-runner-mocha": "^0.7.5",
         "camelcase": "^6.2.0",
         "command-line-args": "^5.1.1",
@@ -7706,12 +7736,11 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/@web/test-runner-commands/node_modules/@web/test-runner-core": {
+    "node_modules/@web/test-runner-core": {
       "version": "0.10.27",
       "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.10.27.tgz",
       "integrity": "sha512-ClV/hSxs4wDm/ANFfQOdRRFb/c0sYywC1QfUXG/nS4vTp3nnt7x7mjydtMGGLmvK9f6Zkubkc1aa+7ryfmVwNA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.12.11",
         "@types/babel__code-frame": "^7.0.2",
@@ -7744,73 +7773,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/@web/test-runner-commands/node_modules/globby": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.9",
-        "ignore": "^5.2.0",
-        "merge2": "^1.4.1",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@web/test-runner-commands/node_modules/source-map": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@web/test-runner-core": {
-      "version": "0.10.25",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.12.11",
-        "@types/babel__code-frame": "^7.0.2",
-        "@types/co-body": "^6.1.0",
-        "@types/convert-source-map": "^1.5.1",
-        "@types/debounce": "^1.2.0",
-        "@types/istanbul-lib-coverage": "^2.0.3",
-        "@types/istanbul-reports": "^3.0.0",
-        "@web/browser-logs": "^0.2.1",
-        "@web/dev-server-core": "^0.3.16",
-        "chokidar": "^3.4.3",
-        "cli-cursor": "^3.1.0",
-        "co-body": "^6.1.0",
-        "convert-source-map": "^1.7.0",
-        "debounce": "^1.2.0",
-        "dependency-graph": "^0.11.0",
-        "globby": "^11.0.1",
-        "ip": "^1.1.5",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-reports": "^3.0.2",
-        "log-update": "^4.0.0",
-        "nanocolors": "^0.2.1",
-        "nanoid": "^3.1.25",
-        "open": "^8.0.2",
-        "picomatch": "^2.2.2",
-        "source-map": "^0.7.3"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/@web/test-runner-core/node_modules/globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -7832,24 +7794,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@web/test-runner-core/node_modules/open": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
-      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "define-lazy-prop": "^2.0.0",
-        "is-docker": "^2.1.1",
-        "is-wsl": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@web/test-runner-core/node_modules/source-map": {
       "version": "0.7.3",
       "dev": true,
@@ -7887,13 +7831,14 @@
       }
     },
     "node_modules/@web/test-runner-playwright": {
-      "version": "0.8.8",
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-playwright/-/test-runner-playwright-0.8.10.tgz",
+      "integrity": "sha512-DEnPihsxjJAPU/UPe3Wb6GVES4xICUrue0UVVxJL651m4zREuUHwSFm4S+cVq78qYcro3WuvCAnucdVB8bUCNw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@web/test-runner-core": "^0.10.20",
         "@web/test-runner-coverage-v8": "^0.4.8",
-        "playwright": "^1.14.0"
+        "playwright": "^1.22.2"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -7914,46 +7859,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/@web/test-runner/node_modules/@web/dev-server": {
-      "version": "0.1.30",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.12.11",
-        "@types/command-line-args": "^5.0.0",
-        "@web/config-loader": "^0.1.3",
-        "@web/dev-server-core": "^0.3.17",
-        "@web/dev-server-rollup": "^0.3.13",
-        "camelcase": "^6.2.0",
-        "command-line-args": "^5.1.1",
-        "command-line-usage": "^6.1.1",
-        "debounce": "^1.2.0",
-        "deepmerge": "^4.2.2",
-        "ip": "^1.1.5",
-        "nanocolors": "^0.2.1",
-        "open": "^8.0.2",
-        "portfinder": "^1.0.28"
-      },
-      "bin": {
-        "wds": "dist/bin.js",
-        "web-dev-server": "dist/bin.js"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/@web/test-runner/node_modules/@web/test-runner-commands": {
-      "version": "0.6.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@web/test-runner-core": "^0.10.20",
-        "mkdirp": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/@web/test-runner/node_modules/globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -7975,24 +7880,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@web/test-runner/node_modules/open": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
-      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "define-lazy-prop": "^2.0.0",
-        "is-docker": "^2.1.1",
-        "is-wsl": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@web/test-runner/node_modules/source-map": {
       "version": "0.7.3",
       "dev": true,
@@ -10541,7 +10428,6 @@
       "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.1.tgz",
       "integrity": "sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "array-back": "^3.1.0",
         "find-replace": "^3.0.0",
@@ -10553,13 +10439,14 @@
       }
     },
     "node_modules/command-line-usage": {
-      "version": "6.1.1",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/command-line-usage/-/command-line-usage-6.1.3.tgz",
+      "integrity": "sha512-sH5ZSPr+7UStsloltmDh7Ce5fb8XPlHyoPzTpyyMuYCtervL65+ubVZ6Q61cFtFl62UyJlc8/JwERRbAFPUqgw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "array-back": "^4.0.1",
+        "array-back": "^4.0.2",
         "chalk": "^2.4.2",
-        "table-layout": "^1.0.1",
+        "table-layout": "^1.0.2",
         "typical": "^5.2.0"
       },
       "engines": {
@@ -10571,7 +10458,6 @@
       "resolved": "https://registry.npmjs.org/array-back/-/array-back-4.0.2.tgz",
       "integrity": "sha512-NbdMezxqf94cnNfWLL7V/im0Ub+Anbb0IoZhvzie8+4HJ4nMQuzHuy49FkGYCJK2yAloZ3meiB6AVMClbrI1vg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -10581,7 +10467,6 @@
       "resolved": "https://registry.npmjs.org/typical/-/typical-5.2.0.tgz",
       "integrity": "sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -12884,9 +12769,9 @@
       "license": "ISC"
     },
     "node_modules/element-internals-polyfill": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.1.11.tgz",
-      "integrity": "sha512-+izpja9BOt31/LK/p/sjyN5x0Vu6STkwnBju5e9X3yIARrzgOz83M9QZE0Kn42v4Z7dKHhXG4AIYPwXvkzkEyQ=="
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.1.15.tgz",
+      "integrity": "sha512-LwCoE6/Q2TEWo0ohm1v+hLeH4J72c7RlOO0U+pik1LIkeosrMB9qA9JZx6WkGcJcAsq/JnxhiWpd2ykwJH+uKA=="
     },
     "node_modules/element-resize-detector": {
       "version": "1.2.4",
@@ -17779,11 +17664,6 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
-    "node_modules/jpeg-js": {
-      "version": "0.4.3",
-      "dev": true,
-      "license": "BSD-3-Clause"
-    },
     "node_modules/js-string-escape": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
@@ -19619,17 +19499,6 @@
       "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
       "dev": true
     },
-    "node_modules/mime": {
-      "version": "3.0.0",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -21279,100 +21148,31 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.19.2",
+      "version": "1.27.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.27.1.tgz",
+      "integrity": "sha512-xXYZ7m36yTtC+oFgqH0eTgullGztKSRMb4yuwLPl8IYSmgBM88QiB+3IWb1mRIC9/NNwcgbG0RwtFlg+EAFQHQ==",
       "dev": true,
       "hasInstallScript": true,
-      "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.19.2"
+        "playwright-core": "1.27.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=14"
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.19.2",
+      "version": "1.27.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.27.1.tgz",
+      "integrity": "sha512-9EmeXDncC2Pmp/z+teoVYlvmPWUC6ejSSYZUln7YaP89Z6lpAaiaAnqroUt/BoLo8tn7WYShcfaCh+xofZa44Q==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "commander": "8.3.0",
-        "debug": "4.3.3",
-        "extract-zip": "2.0.1",
-        "https-proxy-agent": "5.0.0",
-        "jpeg-js": "0.4.3",
-        "mime": "3.0.0",
-        "pngjs": "6.0.0",
-        "progress": "2.0.3",
-        "proper-lockfile": "4.1.2",
-        "proxy-from-env": "1.1.0",
-        "rimraf": "3.0.2",
-        "socks-proxy-agent": "6.1.1",
-        "stack-utils": "2.0.5",
-        "ws": "8.4.2",
-        "yauzl": "2.10.0",
-        "yazl": "2.5.1"
-      },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/playwright-core/node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
-    "node_modules/playwright-core/node_modules/commander": {
-      "version": "8.3.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/playwright-core/node_modules/https-proxy-agent": {
-      "version": "5.0.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/playwright-core/node_modules/ws": {
-      "version": "8.4.2",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
+        "node": ">=14"
       }
     },
     "node_modules/please-upgrade-node": {
@@ -21385,14 +21185,6 @@
         "semver-compare": "^1.0.0"
       }
     },
-    "node_modules/pngjs": {
-      "version": "6.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.13.0"
-      }
-    },
     "node_modules/pnp-webpack-plugin": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@@ -21430,15 +21222,14 @@
       }
     },
     "node_modules/portfinder": {
-      "version": "1.0.28",
-      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
-      "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
+      "version": "1.0.32",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+      "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "async": "^2.6.2",
-        "debug": "^3.1.1",
-        "mkdirp": "^0.5.5"
+        "async": "^2.6.4",
+        "debug": "^3.2.7",
+        "mkdirp": "^0.5.6"
       },
       "engines": {
         "node": ">= 0.12.0"
@@ -21449,17 +21240,17 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.1"
       }
     },
     "node_modules/portfinder/node_modules/mkdirp": {
-      "version": "0.5.5",
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "minimist": "^1.2.5"
+        "minimist": "^1.2.6"
       },
       "bin": {
         "mkdirp": "bin/cmd.js"
@@ -22032,16 +21823,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/proper-lockfile": {
-      "version": "4.1.2",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "retry": "^0.12.0",
-        "signal-exit": "^3.0.2"
-      }
-    },
     "node_modules/property-information": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
@@ -23066,7 +22847,6 @@
       "resolved": "https://registry.npmjs.org/reduce-flatten/-/reduce-flatten-2.0.0.tgz",
       "integrity": "sha512-EJ4UNY/U1t2P/2k6oqotuX2Cc3T6nxJwsM0N0asT7dhrtH1ltUxDn4NalSYmPE2rCkVpcf/X6R0wDwcFpzhd4w==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -23654,14 +23434,6 @@
         "node": ">=0.12"
       }
     },
-    "node_modules/retry": {
-      "version": "0.12.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -24561,15 +24333,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/smart-buffer": {
-      "version": "4.2.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6.0.0",
-        "npm": ">= 3.0.0"
-      }
-    },
     "node_modules/snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -24788,43 +24551,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/socks": {
-      "version": "2.6.2",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ip": "^1.1.5",
-        "smart-buffer": "^4.2.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0",
-        "npm": ">= 3.0.0"
-      }
-    },
-    "node_modules/socks-proxy-agent": {
-      "version": "6.1.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "agent-base": "^6.0.2",
-        "debug": "^4.3.1",
-        "socks": "^2.6.1"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/socks-proxy-agent/node_modules/agent-base": {
-      "version": "6.0.2",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -25001,25 +24727,6 @@
       "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
       "dev": true
     },
-    "node_modules/stack-utils": {
-      "version": "2.0.5",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "escape-string-regexp": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/stack-utils/node_modules/escape-string-regexp": {
-      "version": "2.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/state-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
@@ -25901,8 +25608,9 @@
     },
     "node_modules/table-layout": {
       "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-1.0.2.tgz",
+      "integrity": "sha512-qd/R7n5rQTRFi+Zf2sk5XVVd9UQl6ZkduPFC3S7WEGJAmetDTjY3qPN50eSKzwuzEyQKy5TN2TiZdkIjos2L6A==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "array-back": "^4.0.1",
         "deep-extend": "~0.6.0",
@@ -25918,7 +25626,6 @@
       "resolved": "https://registry.npmjs.org/array-back/-/array-back-4.0.2.tgz",
       "integrity": "sha512-NbdMezxqf94cnNfWLL7V/im0Ub+Anbb0IoZhvzie8+4HJ4nMQuzHuy49FkGYCJK2yAloZ3meiB6AVMClbrI1vg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -25928,7 +25635,6 @@
       "resolved": "https://registry.npmjs.org/typical/-/typical-5.2.0.tgz",
       "integrity": "sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -28806,7 +28512,6 @@
       "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-4.0.1.tgz",
       "integrity": "sha512-kKlNACbvHrkpIw6oPeYDSmdCTu2hdMHoyXLTcUKala++lx5Y+wjJ/e474Jqv5abnVmwxw08DiTuHmw69lJGksA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "reduce-flatten": "^2.0.0",
         "typical": "^5.2.0"
@@ -28820,7 +28525,6 @@
       "resolved": "https://registry.npmjs.org/typical/-/typical-5.2.0.tgz",
       "integrity": "sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -29024,14 +28728,6 @@
         "fd-slicer": "~1.1.0"
       }
     },
-    "node_modules/yazl": {
-      "version": "2.5.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "buffer-crc32": "~0.2.3"
-      }
-    },
     "node_modules/ylru": {
       "version": "1.2.1",
       "dev": true,
@@ -34345,6 +34041,28 @@
         }
       }
     },
+    "@web/dev-server": {
+      "version": "0.1.35",
+      "resolved": "https://registry.npmjs.org/@web/dev-server/-/dev-server-0.1.35.tgz",
+      "integrity": "sha512-E7TSTSFdGPzhkiE3kIVt8i49gsiAYpJIZHzs1vJmVfdt8U4rsmhE+5roezxZo0hkEw4mNsqj9zCc4Dzqy/IFHg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.12.11",
+        "@types/command-line-args": "^5.0.0",
+        "@web/config-loader": "^0.1.3",
+        "@web/dev-server-core": "^0.3.19",
+        "@web/dev-server-rollup": "^0.3.19",
+        "camelcase": "^6.2.0",
+        "command-line-args": "^5.1.1",
+        "command-line-usage": "^6.1.1",
+        "debounce": "^1.2.0",
+        "deepmerge": "^4.2.2",
+        "ip": "^1.1.5",
+        "nanocolors": "^0.2.1",
+        "open": "^8.0.2",
+        "portfinder": "^1.0.32"
+      }
+    },
     "@web/dev-server-core": {
       "version": "0.3.19",
       "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.3.19.tgz",
@@ -34420,14 +34138,16 @@
       }
     },
     "@web/dev-server-rollup": {
-      "version": "0.3.17",
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@web/dev-server-rollup/-/dev-server-rollup-0.3.19.tgz",
+      "integrity": "sha512-IwiwI+fyX0YuvAOldStlYJ+Zm/JfSCk9OSGIs7+fWbOYysEHwkEVvBwoPowaclSZA44Tobvqt+6ej9udbbZ/WQ==",
       "dev": true,
       "requires": {
         "@rollup/plugin-node-resolve": "^13.0.4",
-        "@web/dev-server-core": "^0.3.16",
+        "@web/dev-server-core": "^0.3.19",
         "nanocolors": "^0.2.1",
         "parse5": "^6.0.1",
-        "rollup": "^2.66.1",
+        "rollup": "^2.67.0",
         "whatwg-url": "^11.0.0"
       },
       "dependencies": {
@@ -34469,15 +34189,17 @@
       }
     },
     "@web/test-runner": {
-      "version": "0.13.27",
+      "version": "0.13.31",
+      "resolved": "https://registry.npmjs.org/@web/test-runner/-/test-runner-0.13.31.tgz",
+      "integrity": "sha512-QMj/25U25AkhN4ffBoMMPdpQLNojL8cAzlyIh/oyVp385Cjmd4Hz8S0u4PvWJmDRmPerbJRNtsWafB8/EcQ1rA==",
       "dev": true,
       "requires": {
         "@web/browser-logs": "^0.2.2",
         "@web/config-loader": "^0.1.3",
-        "@web/dev-server": "^0.1.24",
+        "@web/dev-server": "^0.1.32",
         "@web/test-runner-chrome": "^0.10.7",
-        "@web/test-runner-commands": "^0.6.0",
-        "@web/test-runner-core": "^0.10.22",
+        "@web/test-runner-commands": "^0.6.3",
+        "@web/test-runner-core": "^0.10.27",
         "@web/test-runner-mocha": "^0.7.5",
         "camelcase": "^6.2.0",
         "command-line-args": "^5.1.1",
@@ -34490,34 +34212,6 @@
         "source-map": "^0.7.3"
       },
       "dependencies": {
-        "@web/dev-server": {
-          "version": "0.1.30",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.12.11",
-            "@types/command-line-args": "^5.0.0",
-            "@web/config-loader": "^0.1.3",
-            "@web/dev-server-core": "^0.3.17",
-            "@web/dev-server-rollup": "^0.3.13",
-            "camelcase": "^6.2.0",
-            "command-line-args": "^5.1.1",
-            "command-line-usage": "^6.1.1",
-            "debounce": "^1.2.0",
-            "deepmerge": "^4.2.2",
-            "ip": "^1.1.5",
-            "nanocolors": "^0.2.1",
-            "open": "^8.0.2",
-            "portfinder": "^1.0.28"
-          }
-        },
-        "@web/test-runner-commands": {
-          "version": "0.6.1",
-          "dev": true,
-          "requires": {
-            "@web/test-runner-core": "^0.10.20",
-            "mkdirp": "^1.0.4"
-          }
-        },
         "globby": {
           "version": "11.1.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -34532,17 +34226,6 @@
             "slash": "^3.0.0"
           }
         },
-        "open": {
-          "version": "8.4.0",
-          "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
-          "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
-          "dev": true,
-          "requires": {
-            "define-lazy-prop": "^2.0.0",
-            "is-docker": "^2.1.1",
-            "is-wsl": "^2.2.0"
-          }
-        },
         "source-map": {
           "version": "0.7.3",
           "dev": true
@@ -34569,66 +34252,12 @@
       "requires": {
         "@web/test-runner-core": "^0.10.27",
         "mkdirp": "^1.0.4"
-      },
-      "dependencies": {
-        "@web/test-runner-core": {
-          "version": "0.10.27",
-          "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.10.27.tgz",
-          "integrity": "sha512-ClV/hSxs4wDm/ANFfQOdRRFb/c0sYywC1QfUXG/nS4vTp3nnt7x7mjydtMGGLmvK9f6Zkubkc1aa+7ryfmVwNA==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.12.11",
-            "@types/babel__code-frame": "^7.0.2",
-            "@types/co-body": "^6.1.0",
-            "@types/convert-source-map": "^1.5.1",
-            "@types/debounce": "^1.2.0",
-            "@types/istanbul-lib-coverage": "^2.0.3",
-            "@types/istanbul-reports": "^3.0.0",
-            "@web/browser-logs": "^0.2.1",
-            "@web/dev-server-core": "^0.3.18",
-            "chokidar": "^3.4.3",
-            "cli-cursor": "^3.1.0",
-            "co-body": "^6.1.0",
-            "convert-source-map": "^1.7.0",
-            "debounce": "^1.2.0",
-            "dependency-graph": "^0.11.0",
-            "globby": "^11.0.1",
-            "ip": "^1.1.5",
-            "istanbul-lib-coverage": "^3.0.0",
-            "istanbul-lib-report": "^3.0.0",
-            "istanbul-reports": "^3.0.2",
-            "log-update": "^4.0.0",
-            "nanocolors": "^0.2.1",
-            "nanoid": "^3.1.25",
-            "open": "^8.0.2",
-            "picomatch": "^2.2.2",
-            "source-map": "^0.7.3"
-          }
-        },
-        "globby": {
-          "version": "11.1.0",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-          "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-          "dev": true,
-          "requires": {
-            "array-union": "^2.1.0",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.2.9",
-            "ignore": "^5.2.0",
-            "merge2": "^1.4.1",
-            "slash": "^3.0.0"
-          }
-        },
-        "source-map": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-          "dev": true
-        }
       }
     },
     "@web/test-runner-core": {
-      "version": "0.10.25",
+      "version": "0.10.27",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.10.27.tgz",
+      "integrity": "sha512-ClV/hSxs4wDm/ANFfQOdRRFb/c0sYywC1QfUXG/nS4vTp3nnt7x7mjydtMGGLmvK9f6Zkubkc1aa+7ryfmVwNA==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.11",
@@ -34639,7 +34268,7 @@
         "@types/istanbul-lib-coverage": "^2.0.3",
         "@types/istanbul-reports": "^3.0.0",
         "@web/browser-logs": "^0.2.1",
-        "@web/dev-server-core": "^0.3.16",
+        "@web/dev-server-core": "^0.3.18",
         "chokidar": "^3.4.3",
         "cli-cursor": "^3.1.0",
         "co-body": "^6.1.0",
@@ -34673,17 +34302,6 @@
             "slash": "^3.0.0"
           }
         },
-        "open": {
-          "version": "8.4.0",
-          "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
-          "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
-          "dev": true,
-          "requires": {
-            "define-lazy-prop": "^2.0.0",
-            "is-docker": "^2.1.1",
-            "is-wsl": "^2.2.0"
-          }
-        },
         "source-map": {
           "version": "0.7.3",
           "dev": true
@@ -34711,12 +34329,14 @@
       }
     },
     "@web/test-runner-playwright": {
-      "version": "0.8.8",
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-playwright/-/test-runner-playwright-0.8.10.tgz",
+      "integrity": "sha512-DEnPihsxjJAPU/UPe3Wb6GVES4xICUrue0UVVxJL651m4zREuUHwSFm4S+cVq78qYcro3WuvCAnucdVB8bUCNw==",
       "dev": true,
       "requires": {
         "@web/test-runner-core": "^0.10.20",
         "@web/test-runner-coverage-v8": "^0.4.8",
-        "playwright": "^1.14.0"
+        "playwright": "^1.22.2"
       }
     },
     "@web/test-runner-puppeteer": {
@@ -36647,12 +36267,14 @@
       }
     },
     "command-line-usage": {
-      "version": "6.1.1",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/command-line-usage/-/command-line-usage-6.1.3.tgz",
+      "integrity": "sha512-sH5ZSPr+7UStsloltmDh7Ce5fb8XPlHyoPzTpyyMuYCtervL65+ubVZ6Q61cFtFl62UyJlc8/JwERRbAFPUqgw==",
       "dev": true,
       "requires": {
-        "array-back": "^4.0.1",
+        "array-back": "^4.0.2",
         "chalk": "^2.4.2",
-        "table-layout": "^1.0.1",
+        "table-layout": "^1.0.2",
         "typical": "^5.2.0"
       },
       "dependencies": {
@@ -38413,9 +38035,9 @@
       "dev": true
     },
     "element-internals-polyfill": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.1.11.tgz",
-      "integrity": "sha512-+izpja9BOt31/LK/p/sjyN5x0Vu6STkwnBju5e9X3yIARrzgOz83M9QZE0Kn42v4Z7dKHhXG4AIYPwXvkzkEyQ=="
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.1.15.tgz",
+      "integrity": "sha512-LwCoE6/Q2TEWo0ohm1v+hLeH4J72c7RlOO0U+pik1LIkeosrMB9qA9JZx6WkGcJcAsq/JnxhiWpd2ykwJH+uKA=="
     },
     "element-resize-detector": {
       "version": "1.2.4",
@@ -41954,10 +41576,6 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
-    "jpeg-js": {
-      "version": "0.4.3",
-      "dev": true
-    },
     "js-string-escape": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
@@ -43350,10 +42968,6 @@
         }
       }
     },
-    "mime": {
-      "version": "3.0.0",
-      "dev": true
-    },
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -44625,61 +44239,19 @@
       }
     },
     "playwright": {
-      "version": "1.19.2",
+      "version": "1.27.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.27.1.tgz",
+      "integrity": "sha512-xXYZ7m36yTtC+oFgqH0eTgullGztKSRMb4yuwLPl8IYSmgBM88QiB+3IWb1mRIC9/NNwcgbG0RwtFlg+EAFQHQ==",
       "dev": true,
       "requires": {
-        "playwright-core": "1.19.2"
+        "playwright-core": "1.27.1"
       }
     },
     "playwright-core": {
-      "version": "1.19.2",
-      "dev": true,
-      "requires": {
-        "commander": "8.3.0",
-        "debug": "4.3.3",
-        "extract-zip": "2.0.1",
-        "https-proxy-agent": "5.0.0",
-        "jpeg-js": "0.4.3",
-        "mime": "3.0.0",
-        "pngjs": "6.0.0",
-        "progress": "2.0.3",
-        "proper-lockfile": "4.1.2",
-        "proxy-from-env": "1.1.0",
-        "rimraf": "3.0.2",
-        "socks-proxy-agent": "6.1.1",
-        "stack-utils": "2.0.5",
-        "ws": "8.4.2",
-        "yauzl": "2.10.0",
-        "yazl": "2.5.1"
-      },
-      "dependencies": {
-        "agent-base": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-          "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-          "dev": true,
-          "requires": {
-            "debug": "4"
-          }
-        },
-        "commander": {
-          "version": "8.3.0",
-          "dev": true
-        },
-        "https-proxy-agent": {
-          "version": "5.0.0",
-          "dev": true,
-          "requires": {
-            "agent-base": "6",
-            "debug": "4"
-          }
-        },
-        "ws": {
-          "version": "8.4.2",
-          "dev": true,
-          "requires": {}
-        }
-      }
+      "version": "1.27.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.27.1.tgz",
+      "integrity": "sha512-9EmeXDncC2Pmp/z+teoVYlvmPWUC6ejSSYZUln7YaP89Z6lpAaiaAnqroUt/BoLo8tn7WYShcfaCh+xofZa44Q==",
+      "dev": true
     },
     "please-upgrade-node": {
       "version": "3.2.0",
@@ -44690,10 +44262,6 @@
         "semver-compare": "^1.0.0"
       }
     },
-    "pngjs": {
-      "version": "6.0.0",
-      "dev": true
-    },
     "pnp-webpack-plugin": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@@ -44722,14 +44290,14 @@
       }
     },
     "portfinder": {
-      "version": "1.0.28",
-      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
-      "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
+      "version": "1.0.32",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+      "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
       "dev": true,
       "requires": {
-        "async": "^2.6.2",
-        "debug": "^3.1.1",
-        "mkdirp": "^0.5.5"
+        "async": "^2.6.4",
+        "debug": "^3.2.7",
+        "mkdirp": "^0.5.6"
       },
       "dependencies": {
         "debug": {
@@ -44742,10 +44310,12 @@
           }
         },
         "mkdirp": {
-          "version": "0.5.5",
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+          "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
           "dev": true,
           "requires": {
-            "minimist": "^1.2.5"
+            "minimist": "^1.2.6"
           }
         }
       }
@@ -45152,15 +44722,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "proper-lockfile": {
-      "version": "4.1.2",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.2.4",
-        "retry": "^0.12.0",
-        "signal-exit": "^3.0.2"
-      }
-    },
     "property-information": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
@@ -46350,10 +45911,6 @@
       "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
       "dev": true
     },
-    "retry": {
-      "version": "0.12.0",
-      "dev": true
-    },
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -47057,10 +46614,6 @@
         }
       }
     },
-    "smart-buffer": {
-      "version": "4.2.0",
-      "dev": true
-    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -47229,32 +46782,6 @@
         }
       }
     },
-    "socks": {
-      "version": "2.6.2",
-      "dev": true,
-      "requires": {
-        "ip": "^1.1.5",
-        "smart-buffer": "^4.2.0"
-      }
-    },
-    "socks-proxy-agent": {
-      "version": "6.1.1",
-      "dev": true,
-      "requires": {
-        "agent-base": "^6.0.2",
-        "debug": "^4.3.1",
-        "socks": "^2.6.1"
-      },
-      "dependencies": {
-        "agent-base": {
-          "version": "6.0.2",
-          "dev": true,
-          "requires": {
-            "debug": "4"
-          }
-        }
-      }
-    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -47399,19 +46926,6 @@
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
       "dev": true
     },
-    "stack-utils": {
-      "version": "2.0.5",
-      "dev": true,
-      "requires": {
-        "escape-string-regexp": "^2.0.0"
-      },
-      "dependencies": {
-        "escape-string-regexp": {
-          "version": "2.0.0",
-          "dev": true
-        }
-      }
-    },
     "state-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
@@ -48101,6 +47615,8 @@
     },
     "table-layout": {
       "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-1.0.2.tgz",
+      "integrity": "sha512-qd/R7n5rQTRFi+Zf2sk5XVVd9UQl6ZkduPFC3S7WEGJAmetDTjY3qPN50eSKzwuzEyQKy5TN2TiZdkIjos2L6A==",
       "dev": true,
       "requires": {
         "array-back": "^4.0.1",
@@ -50416,13 +49932,6 @@
         "fd-slicer": "~1.1.0"
       }
     },
-    "yazl": {
-      "version": "2.5.1",
-      "dev": true,
-      "requires": {
-        "buffer-crc32": "~0.2.3"
-      }
-    },
     "ylru": {
       "version": "1.2.1",
       "dev": true
diff --git a/package.json b/package.json
index 957ffedb..b5df0635 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
     "@lit-labs/react": "^1.0.7",
     "@open-wc/form-control": "^0.4.1",
     "@open-wc/form-helpers": "^0.1.2",
-    "element-internals-polyfill": "^1.1.11",
+    "element-internals-polyfill": "^1.1.15",
     "lit": "^2.2.3"
   },
   "engines": {
diff --git a/src/baklava.ts b/src/baklava.ts
index 8b415697..ae47eea7 100644
--- a/src/baklava.ts
+++ b/src/baklava.ts
@@ -1,16 +1,18 @@
-export { default as BlIcon } from './components/icon/bl-icon';
-export { default as BlButton } from './components/button/bl-button';
+export { default as BlAlert } from './components/alert/bl-alert';
 export { default as BlBadge } from './components/badge/bl-badge';
+export { default as BlButton } from './components/button/bl-button';
+export { default as BlCheckbox } from './components/checkbox/bl-checkbox';
+export { default as BlDialog } from './components/dialog/bl-dialog';
+export { default as BlIcon } from './components/icon/bl-icon';
 export { default as BlInput } from './components/input/bl-input';
+export { default as BlPagination } from './components/pagination/bl-pagination';
+export { default as BlProgressIndicator } from './components/progress-indicator/bl-progress-indicator';
+export { default as BlRadioGroup } from './components/radio-group/bl-radio-group';
+export { default as BlRadio } from './components/radio-group/radio/bl-radio';
+export { default as BlSelect } from './components/select/bl-select';
+export { default as BlSelectOption } from './components/select/option/bl-select-option';
 export { default as BlTab } from './components/tab-group/tab/bl-tab';
 export { default as BlTabGroup } from './components/tab-group/bl-tab-group';
 export { default as BlTabPanel } from './components/tab-group/tab-panel/bl-tab-panel';
 export { default as BlTooltip } from './components/tooltip/bl-tooltip';
-export { default as BlProgressIndicator } from './components/progress-indicator/bl-progress-indicator';
-export { default as BlCheckbox } from './components/checkbox/bl-checkbox';
-export { default as BlAlert } from './components/alert/bl-alert';
-export { default as BlSelect } from './components/select/bl-select';
-export { default as BlSelectOption } from './components/select/option/bl-select-option';
-export { default as BlPagination } from './components/pagination/bl-pagination';
-export { default as BlDialog } from './components/dialog/bl-dialog';
 export { getIconPath, setIconPath } from './utilities/asset-paths';
diff --git a/src/components/radio-group/bl-radio-group.css b/src/components/radio-group/bl-radio-group.css
new file mode 100644
index 00000000..d84834d0
--- /dev/null
+++ b/src/components/radio-group/bl-radio-group.css
@@ -0,0 +1,21 @@
+:host {
+  display: flex;
+  flex-direction: row;
+}
+
+fieldset {
+  border: none;
+  padding: 0;
+}
+
+legend {
+  font: var(--bl-font-title-3-medium);
+  color: var(--bl-color-content-primary);
+}
+
+.options {
+  display: flex;
+  flex-flow: var(--bl-radio-direction, column) wrap;
+  gap: 16px;
+  margin-block: var(--bl-size-xs);
+}
diff --git a/src/components/radio-group/bl-radio-group.stories.mdx b/src/components/radio-group/bl-radio-group.stories.mdx
new file mode 100644
index 00000000..5365dba2
--- /dev/null
+++ b/src/components/radio-group/bl-radio-group.stories.mdx
@@ -0,0 +1,96 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addon-docs';
+import { userEvent } from '@storybook/testing-library';
+
+<Meta
+  title="Components/Radio Group"
+  component="bl-radio-group"
+  argTypes={{
+    label: {
+      control: 'text',
+      type: 'string'
+    },
+    name: {
+      control: 'text',
+      type: 'string'
+    },
+    value: {
+      control: 'text',
+      type: 'string'
+    },
+    required: {
+      control: 'boolean',
+    },
+  }}
+/>
+
+export const RadioGroupTemplate = (args) => html`
+<bl-radio-group
+    class='${ifDefined(args.class)}'
+    label='${ifDefined(args.label)}'
+    name='${ifDefined(args.name)}'
+    value='${ifDefined(args.value)}'
+    ?required=${args.required}
+    >${args.options.map((option) =>
+      html`\n  <bl-radio value=${option.value}>${option.label}</bl-radio>`
+    )}
+</bl-radio-group>`
+
+export const StyledTemplate = (args) => html`
+<style>
+  .${args.class} {
+    --bl-radio-direction: row;
+  }
+</style>
+${RadioGroupTemplate(args)}
+`
+
+export const KeyboardNavigationTemplate = (args) => html`
+<input id="previnput" placeholder="Previous Input" autofocus>
+${RadioGroupTemplate(args)}
+`
+
+export const focusSecondOption = async ({ }) => {
+  await userEvent.keyboard('[Tab]');
+  await userEvent.keyboard('[ArrowRight]');
+}
+
+# Radio Group Component
+
+Radio Group component is a form field component to take a selection from user with a list of options. It needs to be used with `bl-radio` component.
+
+<Canvas>
+  <Story name="Basic Usage" args={{ label: 'Payment Type', name: 'paymentType', options: [{ value: 'cc', label: 'Credit Card'}, {value: 'ideal', label: 'iDeal'}] }}>
+    {RadioGroupTemplate.bind({})}
+  </Story>
+</Canvas>
+
+If you set a `value`, the option with that value will be selected.
+
+<Canvas>
+  <Story name="Value set" args={{ label: 'Payment Type', name: 'paymentType', value: 'ideal', options: [{ value: 'cc', label: 'Credit Card'}, {value: 'ideal', label: 'iDeal'}] }}>
+    {RadioGroupTemplate.bind({})}
+  </Story>
+</Canvas>
+
+Radio Group component handles keyboard navigation and highlights active radio option while navigating with keyboard. First `Tab` focuses on first available option and user can navigate with arrow keys within options, and `Space` key for selecting it.
+
+<Canvas>
+  <Story name="Focused option" args={{ label: 'Payment Type', name: 'paymentType', value: 'cc', options: [{ value: 'cc', label: 'Credit Card'}, {value: 'ideal', label: 'iDeal'}] }} play={focusSecondOption}>
+    {KeyboardNavigationTemplate.bind({})}
+  </Story>
+</Canvas>
+
+By default radio options are listed in vertical stack. You can change this by setting `--bl-radio-direction` CSS variable as `row`.
+
+<Canvas>
+  <Story name="Horizontal Stack" args={{ label: 'Payment Type', name: 'paymentType', value: 'ideal', class: 'payment-type-field', options: [{ value: 'cc', label: 'Credit Card'}, {value: 'ideal', label: 'iDeal'}] }}>
+    {StyledTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Reference
+
+<ArgsTable of="bl-radio-group" />
diff --git a/src/components/radio-group/bl-radio-group.test.ts b/src/components/radio-group/bl-radio-group.test.ts
new file mode 100644
index 00000000..ed10608a
--- /dev/null
+++ b/src/components/radio-group/bl-radio-group.test.ts
@@ -0,0 +1,248 @@
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import BlRadioGroup from './bl-radio-group';
+
+describe('bl-radio-group', () => {
+  it('should be defined radio group instance', () => {
+    //when
+    const el = document.createElement('bl-radio-group');
+
+    //then
+    expect(el).instanceOf(BlRadioGroup);
+  });
+
+  it('should be rendered with default values', async () => {
+    //when
+    const el = await fixture<BlRadioGroup>(
+      html`<bl-radio-group label="Payment Type" name="pt">
+        <bl-radio value="cc">Credit Card</bl-radio>
+        <bl-radio value="ch">Cash</bl-radio>
+      </bl-radio-group>`
+    );
+
+    //then
+    expect(el).shadowDom.equal(
+      `<fieldset
+        aria-labelledby="label"
+        aria-required="false"
+        role="radiogroup"
+       >
+        <legend>Payment Type</legend>
+        <div class="options">
+          <slot></slot>
+        </div>
+      </fieldset>`
+    );
+  });
+
+  it('should set correct option selected with a value', async () => {
+    //when
+    const el = await fixture<BlRadioGroup>(
+      html`<bl-radio-group label="Payment Type" name="pt" value="cc">
+        <bl-radio value="cc">Credit Card</bl-radio>
+        <bl-radio value="ch">Cash</bl-radio>
+      </bl-radio-group>`
+    );
+
+    //then
+    expect(el.options[0].checked).to.be.true;
+    expect(el.options[1].checked).to.be.false;
+  });
+
+  describe('keyboard navigation', () => {
+    it('should focus first option with tab key', async () => {
+      //when
+      const el = await fixture(
+        html`<div><input id="previnput"><bl-radio-group label="Payment Type" name="pt" value="cc">
+          <bl-radio value="cc">Credit Card</bl-radio>
+          <bl-radio value="ch">Cash</bl-radio>
+        </bl-radio-group><input id="nextinput"></div>`
+      );
+
+      await elementUpdated(el);
+
+      el.querySelector<HTMLInputElement>('#previnput')?.focus();
+
+      const radioGroup = el.querySelector('bl-radio-group');
+
+      //given
+      await sendKeys({
+        press: 'Tab',
+      });
+
+      //then
+      expect(document.activeElement).to.equal(radioGroup?.options[0]);
+    });
+
+    it('should focus next option with right arrow key', async () => {
+      //when
+      const el = await fixture(
+        html`<div><input id="previnput"><bl-radio-group label="Payment Type" name="pt" value="cc">
+          <bl-radio value="cc">Credit Card</bl-radio>
+          <bl-radio value="ch">Cash</bl-radio>
+        </bl-radio-group><input id="nextinput"></div>`
+      );
+
+      await elementUpdated(el);
+
+      el.querySelector<HTMLInputElement>('#previnput')?.focus();
+
+      const radioGroup = el.querySelector('bl-radio-group');
+
+      //given
+      await sendKeys({
+        press: 'Tab',
+      });
+      await sendKeys({
+        press: 'ArrowRight',
+      });
+
+      //then
+      expect(document.activeElement).to.equal(radioGroup?.options[1]);
+    });
+
+    it('should focus next option with down arrow key', async () => {
+      //when
+      const el = await fixture(
+        html`<div><input id="previnput"><bl-radio-group label="Payment Type" name="pt" value="cc">
+          <bl-radio value="cc">Credit Card</bl-radio>
+          <bl-radio value="ch">Cash</bl-radio>
+        </bl-radio-group><input id="nextinput"></div>`
+      );
+
+      await elementUpdated(el);
+
+      el.querySelector<HTMLInputElement>('#previnput')?.focus();
+
+      const radioGroup = el.querySelector('bl-radio-group');
+
+      //given
+      await sendKeys({
+        press: 'Tab',
+      });
+      await sendKeys({
+        press: 'ArrowDown',
+      });
+
+      //then
+      expect(document.activeElement).to.equal(radioGroup?.options[1]);
+    });
+
+    it('should focus previous option with up arrow key', async () => {
+      //when
+      const el = await fixture(
+        html`<div><input id="previnput"><bl-radio-group label="Payment Type" name="pt" value="cc">
+          <bl-radio value="cc">Credit Card</bl-radio>
+          <bl-radio value="ch">Cash</bl-radio>
+        </bl-radio-group><input id="nextinput"></div>`
+      );
+
+      await elementUpdated(el);
+
+      el.querySelector<HTMLInputElement>('#previnput')?.focus();
+
+      const radioGroup = el.querySelector('bl-radio-group');
+
+      //given
+      await sendKeys({
+        press: 'Tab',
+      });
+      await sendKeys({
+        press: 'ArrowDown',
+      });
+      await sendKeys({
+        press: 'ArrowUp',
+      });
+
+      //then
+      expect(document.activeElement).to.equal(radioGroup?.options[0]);
+    });
+  });
+
+  it('should focus previous option with left arrow key', async () => {
+    //when
+    const el = await fixture(
+      html`<div><input id="previnput"><bl-radio-group label="Payment Type" name="pt" value="cc">
+        <bl-radio value="cc">Credit Card</bl-radio>
+        <bl-radio value="ch">Cash</bl-radio>
+      </bl-radio-group><input id="nextinput"></div>`
+    );
+
+    await elementUpdated(el);
+
+    el.querySelector<HTMLInputElement>('#previnput')?.focus();
+
+    const radioGroup = el.querySelector('bl-radio-group');
+
+    //given
+    await sendKeys({
+      press: 'Tab',
+    });
+    await sendKeys({
+      press: 'ArrowRight',
+    });
+    await sendKeys({
+      press: 'ArrowLeft',
+    });
+
+    //then
+    expect(document.activeElement).to.equal(radioGroup?.options[0]);
+  });
+
+  it('should select current option with space key', async () => {
+    //when
+    const el = await fixture(
+      html`<div><input id="previnput"><bl-radio-group label="Payment Type" name="pt" value="cc">
+        <bl-radio value="cc">Credit Card</bl-radio>
+        <bl-radio value="ch">Cash</bl-radio>
+      </bl-radio-group><input id="nextinput"></div>`
+    );
+
+    await elementUpdated(el);
+
+    el.querySelector<HTMLInputElement>('#previnput')?.focus();
+
+    const radioGroup = el.querySelector('bl-radio-group');
+
+    //given
+    await sendKeys({
+      press: 'Tab',
+    });
+    await sendKeys({
+      press: 'ArrowRight',
+    });
+    await sendKeys({
+      press: ' ',
+    });
+
+    //then
+    expect(radioGroup?.value).to.equal('cc');
+  });
+
+  it('should not respond any other keys', async () => {
+    //when
+    const el = await fixture(
+      html`<div><input id="previnput"><bl-radio-group label="Payment Type" name="pt" value="cc">
+        <bl-radio value="cc">Credit Card</bl-radio>
+        <bl-radio value="ch">Cash</bl-radio>
+      </bl-radio-group><input id="nextinput"></div>`
+    );
+
+    await elementUpdated(el);
+
+    el.querySelector<HTMLInputElement>('#previnput')?.focus();
+
+    const radioGroup = el.querySelector('bl-radio-group');
+
+    //given
+    await sendKeys({
+      press: 'Tab',
+    });
+    await sendKeys({
+      press: 'A',
+    });
+
+    //then
+    expect(document.activeElement).to.equal(radioGroup?.options[0]);
+  });
+});
diff --git a/src/components/radio-group/bl-radio-group.ts b/src/components/radio-group/bl-radio-group.ts
new file mode 100644
index 00000000..0f6cbb7e
--- /dev/null
+++ b/src/components/radio-group/bl-radio-group.ts
@@ -0,0 +1,133 @@
+import { FormControlMixin } from '@open-wc/form-control';
+import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import 'element-internals-polyfill';
+import { event, EventDispatcher } from '../../utilities/event';
+import style from './bl-radio-group.css';
+import BlRadio, { blRadioTag } from './radio/bl-radio';
+
+export const blRadioGroupTag = 'bl-radio-group';
+
+export const blChangeEventName = 'bl-radio-change';
+
+/**
+ * @tag bl-radio-group
+ * @summary Baklava Button component
+ *
+ * @cssproperty --bl-radio-direction - Can be used for showing radio options as columns instead of rows. Options are `row` or `column`
+ */
+@customElement(blRadioGroupTag)
+export default class BlRadioGroup extends FormControlMixin(LitElement) {
+  static get styles(): CSSResultGroup {
+    return [style];
+  }
+
+  /**
+   * Sets the radio group label
+   */
+  @property({ type: String })
+  label: string;
+
+  /**
+   * Set and gets the actual value of the field
+   */
+  @property()
+  value = '';
+
+  /**
+   * Sets option as required
+   */
+  @property({ type: Boolean, reflect: true })
+  required = false;
+
+  get options(): BlRadio[] {
+    return [].slice.call(this.querySelectorAll(blRadioTag));
+  }
+
+  get availableOptions(): BlRadio[] {
+    return this.options.filter(option => !option.disabled);
+  }
+
+  updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has('value')) {
+      this.setValue(this.value);
+      this.onChange(this.value);
+    }
+  }
+
+  /**
+   * Fires when radio group value changed
+   */
+  @event('bl-radio-change') private onChange: EventDispatcher<string>;
+
+  private focusedOptionIndex = 0;
+
+  private handleOptionChecked(event: CustomEvent) {
+    const checkedOption = event.target as BlRadio;
+    this.setValue(checkedOption.value);
+    this.onChange(checkedOption.value);
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    // Next option
+    if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
+      this.focusedOptionIndex++;
+
+      // Previous option
+    } else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {
+      this.focusedOptionIndex--;
+
+      // Select option
+    } else if ([' '].includes(event.key)) {
+      this.availableOptions[this.focusedOptionIndex].select();
+      return;
+    } else {
+      // Other keys are not our interest here
+      return;
+    }
+
+    // Don't exceed array indexes
+    this.focusedOptionIndex = Math.max(
+      0,
+      Math.min(this.focusedOptionIndex, this.availableOptions.length - 1)
+    );
+
+    this.availableOptions[this.focusedOptionIndex].focus();
+
+    event.preventDefault();
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    this.tabIndex = 0;
+    this.addEventListener('focus', this.handleFocus);
+    this.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  private handleFocus() {
+    this.availableOptions[this.focusedOptionIndex].focus();
+  }
+
+  render(): TemplateResult {
+    return html`<fieldset
+      role="radiogroup"
+      aria-labelledby="label"
+      aria-required=${this.required}
+    >
+      <legend>${this.label}</legend>
+      <div class="options" @bl-checked=${this.handleOptionChecked}>
+        <slot></slot>
+      </div>
+    </fieldset>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [blRadioGroupTag]: BlRadioGroup;
+  }
+  interface HTMLElementEventMap {
+    [blChangeEventName]: CustomEvent<string>;
+  }
+}
diff --git a/src/components/radio-group/radio/bl-radio.css b/src/components/radio-group/radio/bl-radio.css
new file mode 100644
index 00000000..95e528f8
--- /dev/null
+++ b/src/components/radio-group/radio/bl-radio.css
@@ -0,0 +1,64 @@
+:host {
+  display: inline-block;
+  cursor: pointer;
+  outline: none;
+}
+
+.wrapper {
+  outline: none;
+}
+
+#label {
+  display: flex;
+  font: var(--bl-font-title-3-regular);
+  height: var(--bl-size-m);
+  line-height: normal;
+  vertical-align: middle;
+  margin-block: 0;
+  color: var(--bl-color-content-primary);
+}
+
+#label::before {
+  content: '';
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--bl-size-m);
+  height: var(--bl-size-m);
+  background-color: white;
+  border-radius: var(--bl-border-radius-circle);
+  border: solid 1px var(--bl-color-border);
+  margin-right: var(--bl-size-2xs);
+  vertical-align: middle;
+}
+
+.selected #label::before {
+  border-width: 4px;
+  border-color: var(--bl-color-primary);
+}
+
+:host(:hover) #label,
+.selected #label {
+  color: var(--bl-color-primary);
+}
+
+:host([disabled]) {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+:host([disabled]) #label {
+  color: var(--bl-color-content-passive);
+}
+
+:host([disabled]) #label::before {
+  background-color: var(--bl-color-secondary-background);
+}
+
+:host([disabled]) .selected #label::before {
+  background-color: var(--bl-color-content-passive);
+  border-color: var(--bl-color-secondary-background);
+}
+
+.wrapper:focus-visible #label::before {
+  box-shadow: 0 0 0 1px white, 0 0 0 3px var(--bl-color-primary);
+}
diff --git a/src/components/radio-group/radio/bl-radio.stories.mdx b/src/components/radio-group/radio/bl-radio.stories.mdx
new file mode 100644
index 00000000..b6d1beb5
--- /dev/null
+++ b/src/components/radio-group/radio/bl-radio.stories.mdx
@@ -0,0 +1,76 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addon-docs';
+
+<Meta
+  title="Components/Radio"
+  component="bl-radio"
+  argTypes={{
+    label: {
+      control: 'text',
+      type: 'string'
+    },
+    value: {
+      control: 'text',
+      type: 'string'
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  }}
+/>
+
+export const RadioTemplate = (args) => html`
+<bl-radio
+    class=${ifDefined(args.class)}
+    value=${ifDefined(args.value)}
+    ?disabled=${args.disabled}
+    >${args.label}</bl-radio>`
+
+export const RadioGroupTemplate = (args) => html`
+<bl-radio-group value=${args.value}>
+  <bl-radio
+    class=${ifDefined(args.class)}
+    value=${ifDefined(args.value)}
+    ?disabled=${args.disabled}
+    >${args.label}</bl-radio>
+</bl-radio-group>`
+
+# Radio Component
+
+Radio component is the component for adding options for a `bl-radio-group` component.
+
+<Canvas>
+  <Story name="Basic Usage" args={{ label: 'Credit Card', value: 'cc' }}>
+    {RadioTemplate.bind({})}
+  </Story>
+</Canvas>
+
+If wrapping `bl-radio-group` component has the same `value` with an option value, then it becomes selected.
+
+<Canvas>
+  <Story name="Selected option" args={{ label: 'Credit Card', value: 'cc' }}>
+    {RadioGroupTemplate.bind({})}
+  </Story>
+</Canvas>
+
+You can set a radio option non-selectable by adding `disabled` attribute.
+
+<Canvas>
+  <Story name="Disabled option" args={{ label: 'Cash Payment', value: 'cash', disabled: true }}>
+    {RadioTemplate.bind({})}
+  </Story>
+</Canvas>
+
+An option can be disabled and selected at the same time if value of `radio-group` is same with disabled option value.
+
+<Canvas>
+  <Story name="Disabled and selected option" args={{ label: 'Cash Payment', value: 'cash', disabled: true }}>
+    {RadioGroupTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Reference
+
+<ArgsTable of="bl-radio" />
diff --git a/src/components/radio-group/radio/bl-radio.test.ts b/src/components/radio-group/radio/bl-radio.test.ts
new file mode 100644
index 00000000..caca44aa
--- /dev/null
+++ b/src/components/radio-group/radio/bl-radio.test.ts
@@ -0,0 +1,34 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import BlRadio from './bl-radio';
+
+describe('bl-radio', () => {
+  it('should be defined radio instance', () => {
+    //when
+    const el = document.createElement('bl-radio');
+
+    //then
+    expect(el).instanceOf(BlRadio);
+  });
+
+  it('should be rendered with default values', async () => {
+    //when
+    const el = await fixture<BlRadio>(
+      html`<bl-radio value="cc">Credit Card</bl-radio>`
+    );
+
+    //then
+    expect(el).shadowDom.equal(
+      `<div
+        aria-disabled="false"
+        aria-labelledby="label"
+        aria-readonly="false"
+        class="wrapper"
+        role="radio"
+       >
+        <p id="label">
+          <slot></slot>
+       </p>
+      </div>`
+    );
+  });
+});
diff --git a/src/components/radio-group/radio/bl-radio.ts b/src/components/radio-group/radio/bl-radio.ts
new file mode 100644
index 00000000..c2d4f54d
--- /dev/null
+++ b/src/components/radio-group/radio/bl-radio.ts
@@ -0,0 +1,138 @@
+import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { event, EventDispatcher } from '../../../utilities/event';
+import type BlRadioGroup from '../bl-radio-group';
+import { blChangeEventName, blRadioGroupTag } from '../bl-radio-group';
+import style from './bl-radio.css';
+
+
+export const blRadioTag = 'bl-radio';
+
+export const blCheckedEventName = 'bl-checked';
+
+/**
+ * @tag bl-radio
+ * @summary Baklava Radio Option component
+ */
+@customElement(blRadioTag)
+export default class BlRadio extends LitElement {
+  static get styles(): CSSResultGroup {
+    return [style];
+  }
+
+  @property()
+  name: string;
+
+  @property()
+  value: string;
+
+  /**
+   * Sets option as disabled
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+
+  @state() private selected = false;
+
+  /**
+   * Fires when radio is checked
+   */
+  @event('bl-checked') private onChecked: EventDispatcher<string>;
+
+  /**
+   * Fires when radio is blurred
+   */
+   @event('bl-focus') private onFocus: EventDispatcher<string>;
+
+  /**
+   * Fires when radio is blurred
+   */
+  @event('bl-blur') private onBlur: EventDispatcher<string>;
+
+  /**
+   * Sets this option selected
+   */
+  select() {
+    this.selected = true;
+    this.onChecked(this.value);
+  }
+
+  /**
+   * Readonly property to determine if option is currently checked
+   */
+  get checked() {
+    return this.selected;
+  }
+
+  @query('[role=radio]') private radioElement: HTMLElement;
+
+  /**
+   * Focuses this option
+   */
+  focus() {
+    this.radioElement.tabIndex = 0;
+    this.radioElement.focus();
+    this.onFocus(this.value);
+  }
+
+  /**
+   * Blurs from this option
+   */
+   blur() {
+    this.radioElement.tabIndex = -1;
+    this.onBlur(this.value);
+  }
+
+  private handleFieldValueChange = (event: CustomEvent<string>) => {
+    const newValue = event.detail;
+    this.selected = newValue === this.value;
+  }
+
+  private field: BlRadioGroup | null;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    this.field = this.closest<BlRadioGroup>(blRadioGroupTag);
+
+    if (!this.field) {
+      console.warn('bl-radio is designed to be used inside a bl-radio-group', this);
+    }
+
+    this.field?.addEventListener(blChangeEventName, this.handleFieldValueChange);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.field?.removeEventListener(blChangeEventName, this.handleFieldValueChange);
+  }
+
+  render(): TemplateResult {
+    const classes = classMap({
+      wrapper: true,
+      selected: this.selected
+    });
+
+    return html`<div
+      class=${classes}
+      role="radio"
+      aria-labelledby="label"
+      aria-disabled=${this.disabled}
+      aria-readonly=${this.disabled}
+      @blur=${this.blur}
+      @click=${this.select}>
+      <p id="label"><slot></slot></p>
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [blRadioTag]: BlRadio;
+  }
+  interface HTMLElementEventMap {
+    [blCheckedEventName]: CustomEvent<string>
+  }
+}