From 958f0c8b6fc3ccf0edfe65f07b9719d445ac314e Mon Sep 17 00:00:00 2001
From: CyanSalt <c.salt@hotmail.com>
Date: Tue, 4 Jul 2023 19:42:58 +0800
Subject: [PATCH] feat: add switch

---
 docs/.vitepress/config.ts   |   1 +
 docs/components/checkbox.md |   4 +-
 docs/components/details.md  |   2 +-
 docs/components/select.md   |   2 +-
 docs/components/switch.md   | 187 ++++++++++++++++++
 docs/guide/theme.md         |   4 +-
 package-lock.json           | 379 ++++++++++++++++++------------------
 src/alert/index.vue         |  15 +-
 src/checkbox/index.vue      |  10 +-
 src/components.ts           |   1 +
 src/select/index.vue        |  11 +-
 src/switch/index.vue        | 128 ++++++++++++
 12 files changed, 535 insertions(+), 209 deletions(-)
 create mode 100644 docs/components/switch.md
 create mode 100644 src/switch/index.vue

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 8b9beb1..ef5cbda 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -41,6 +41,7 @@ export default defineConfig({
             items: [
               { text: 'Checkbox', link: '/components/checkbox' },
               { text: 'Select', link: '/components/select' },
+              { text: 'Switch', link: '/components/switch' },
             ],
           },
           {
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index 9506a4d..ff799b9 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -191,7 +191,7 @@ import { RCheckbox } from 'roughness'
   </template>
   <template #body:reactions.default>
 
-  `['focus', 'active']`
+  `['focus-within', 'active']`
 
   </template>
   <template #body:reactions.description>
@@ -228,7 +228,7 @@ import { RCheckbox } from 'roughness'
 
   </template>
   <template #body:update:checked.description>
-    Callback function triggered when checked state of the checkbox are changed.
+    Callback function triggered when checked state of the checkbox is changed.
   </template>
 </RTable>
 </RSpace>
diff --git a/docs/components/details.md b/docs/components/details.md
index 522caaf..232ad7d 100644
--- a/docs/components/details.md
+++ b/docs/components/details.md
@@ -117,7 +117,7 @@ function toggle() {
 
   </template>
   <template #body:update:open.description>
-    Callback function triggered when visibility of the details are changed.
+    Callback function triggered when visibility of the detail is changed.
   </template>
 </RTable>
 </RSpace>
diff --git a/docs/components/select.md b/docs/components/select.md
index 1375085..51679f0 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RCheckbox, RSelect, RDetails, RSpace, RTable } from 'roughness'
+import { RCheckbox, RDetails, RSelect, RSpace, RTable } from 'roughness'
 </script>
 
 # Select
diff --git a/docs/components/switch.md b/docs/components/switch.md
new file mode 100644
index 0000000..7baf421
--- /dev/null
+++ b/docs/components/switch.md
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import { RDetails, RSpace, RSwitch, RTable } from 'roughness'
+</script>
+
+# Switch
+
+Everybody 1-2-Switch!
+
+## Example
+
+<RDetails>
+  <template #summary>Show Code</template>
+
+```vue
+<script lang="ts" setup>
+import { RSwitch } from 'roughness'
+</script>
+
+<template>
+  <RSwitch>Airplane Mode</RSwitch>
+</template>
+```
+
+</RDetails>
+
+<RSwitch>Airplane Mode</RSwitch>
+
+## Usage
+
+### Props
+
+<RSpace overflow>
+<RTable
+  :columns="['name', 'type', 'default', 'description']"
+  :rows="['model-value', 'reactions']"
+>
+  <template #body:*.name="{ row }">{{ row }}</template>
+
+  <template #body:model-value.type>
+
+  `boolean`
+
+  </template>
+  <template #body:model-value.default>
+
+  `false`
+
+  </template>
+  <template #body:model-value.description>
+    State of the switch.
+  </template>
+
+  <template #body:reactions.type>
+
+  `string[]`
+
+  </template>
+  <template #body:reactions.default>
+
+  `['focus-within', 'active']`
+
+  </template>
+  <template #body:reactions.description>
+
+  States that trigger graphics redrawing.
+
+  See [Reactions](/guide/theme#reactions).
+
+  </template>
+</RTable>
+</RSpace>
+
+### Event
+
+<RSpace overflow>
+<RTable
+  :columns="['name', 'parameters', 'description']"
+  :rows="['update:model-value']"
+>
+  <template #body:*.name="{ row }">{{ row }}</template>
+
+  <template #body:update:model-value.parameters>
+
+  `(value: boolean)`
+
+  </template>
+  <template #body:update:model-value.description>
+    Callback function triggered when state of the switch is changed.
+  </template>
+</RTable>
+</RSpace>
+
+### Slots
+
+<RSpace overflow>
+<RTable
+  :columns="['name', 'parameters', 'description']"
+  :rows="['default']"
+>
+  <template #body:*.name="{ row }">{{ row }}</template>
+
+  <template #body:default.description>
+    Label of the switch.
+  </template>
+</RTable>
+</RSpace>
+
+### Styles
+
+<RSpace overflow>
+<RTable
+  :columns="['name', 'values', 'default', 'description']"
+  :rows="['border-color', 'border-width', 'control-size', 'track-color', 'handle-color']"
+>
+  <template #body:*.name="{ row }">--r-switch-{{ row }}</template>
+
+  <template #body:border-color.values>
+
+  `<color>`
+
+  </template>
+  <template #body:border-color.default>
+
+  `var(--r-common-text-color)`
+
+  </template>
+  <template #body:border-color.description>
+    Color of the switch control border.
+  </template>
+
+  <template #body:border-width.values>
+
+  `<integer>`
+
+  </template>
+  <template #body:border-width.default>
+
+  `2` when focused or active, `1` else
+
+  </template>
+  <template #body:border-width.description>
+    Width of the switch control border.
+  </template>
+
+  <template #body:control-size.values>
+
+  `<length>`
+
+  </template>
+  <template #body:control-size.default>
+
+  `var(--r-common-line-height)`
+
+  </template>
+  <template #body:control-size.description>
+    Size of the switch control.
+  </template>
+
+  <template #body:track-color.values>
+
+  `<color>`
+
+  </template>
+  <template #body:track-color.default>
+
+  `var(--r-common-primary-color)`
+
+  </template>
+  <template #body:track-color.description>
+    Color of the switch track when open.
+  </template>
+
+  <template #body:handle-color.values>
+
+  `<color>`
+
+  </template>
+  <template #body:handle-color.default>
+
+  `var(--r-common-background-color)`
+
+  </template>
+  <template #body:handle-color.description>
+    Color of the switch handle.
+  </template>
+</RTable>
+</RSpace>
diff --git a/docs/guide/theme.md b/docs/guide/theme.md
index 483f877..f7546d5 100644
--- a/docs/guide/theme.md
+++ b/docs/guide/theme.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RButton, RCheckbox, RDetails, RSpace, RTable, RText, useDark } from 'roughness'
+import { RButton, RDetails, RSpace, RSwitch, RTable, RText, useDark } from 'roughness'
 
 const dark = useDark()
 </script>
@@ -14,7 +14,7 @@ In dark and light mode, in addition to the foreground and background colors, the
 
 <RSpace vertical>
   <RSpace>
-    <RCheckbox v-model:checked="dark">Enable dark mode</RCheckbox>
+    <RSwitch v-model="dark">Enable dark mode</RSwitch>
   </RSpace>
   <RSpace>
     <RButton filled>Normal</RButton>
diff --git a/package-lock.json b/package-lock.json
index b9aef50..ffbbbc9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,15 @@
         "vue": ">=3.0.0"
       }
     },
+    "node_modules/@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@algolia/autocomplete-core": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
@@ -1194,14 +1203,14 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz",
-      "integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.0.tgz",
+      "integrity": "sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.5.2",
+        "espree": "^9.6.0",
         "globals": "^13.19.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
@@ -1244,9 +1253,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.43.0.tgz",
-      "integrity": "sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==",
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz",
+      "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2055,17 +2064,17 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.0.tgz",
-      "integrity": "sha512-78B+anHLF1TI8Jn/cD0Q00TBYdMgjdOn980JfAVa9yw5sop8nyTfVOQAv6LWywkOGLclDBtv5z3oxN4w7jxyNg==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.61.0.tgz",
+      "integrity": "sha512-A5l/eUAug103qtkwccSCxn8ZRwT+7RXWkFECdA4Cvl1dOlDUgTpAOfSEElZn2uSUxhdDpnCdetrf0jvU4qrL+g==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.60.0",
-        "@typescript-eslint/type-utils": "5.60.0",
-        "@typescript-eslint/utils": "5.60.0",
+        "@typescript-eslint/scope-manager": "5.61.0",
+        "@typescript-eslint/type-utils": "5.61.0",
+        "@typescript-eslint/utils": "5.61.0",
         "debug": "^4.3.4",
-        "grapheme-splitter": "^1.0.4",
+        "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
         "natural-compare-lite": "^1.4.0",
         "semver": "^7.3.7",
@@ -2089,14 +2098,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.60.0.tgz",
-      "integrity": "sha512-jBONcBsDJ9UoTWrARkRRCgDz6wUggmH5RpQVlt7BimSwaTkTjwypGzKORXbR4/2Hqjk9hgwlon2rVQAjWNpkyQ==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.61.0.tgz",
+      "integrity": "sha512-yGr4Sgyh8uO6fSi9hw3jAFXNBHbCtKKFMdX2IkT3ZqpKmtAq3lHS4ixB/COFuAIJpwl9/AqF7j72ZDWYKmIfvg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.60.0",
-        "@typescript-eslint/types": "5.60.0",
-        "@typescript-eslint/typescript-estree": "5.60.0",
+        "@typescript-eslint/scope-manager": "5.61.0",
+        "@typescript-eslint/types": "5.61.0",
+        "@typescript-eslint/typescript-estree": "5.61.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -2116,13 +2125,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.60.0.tgz",
-      "integrity": "sha512-hakuzcxPwXi2ihf9WQu1BbRj1e/Pd8ZZwVTG9kfbxAMZstKz8/9OoexIwnmLzShtsdap5U/CoQGRCWlSuPbYxQ==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.61.0.tgz",
+      "integrity": "sha512-W8VoMjoSg7f7nqAROEmTt6LoBpn81AegP7uKhhW5KzYlehs8VV0ZW0fIDVbcZRcaP3aPSW+JZFua+ysQN+m/Nw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.60.0",
-        "@typescript-eslint/visitor-keys": "5.60.0"
+        "@typescript-eslint/types": "5.61.0",
+        "@typescript-eslint/visitor-keys": "5.61.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2133,13 +2142,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.60.0.tgz",
-      "integrity": "sha512-X7NsRQddORMYRFH7FWo6sA9Y/zbJ8s1x1RIAtnlj6YprbToTiQnM6vxcMu7iYhdunmoC0rUWlca13D5DVHkK2g==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.61.0.tgz",
+      "integrity": "sha512-kk8u//r+oVK2Aj3ph/26XdH0pbAkC2RiSjUYhKD+PExemG4XSjpGFeyZ/QM8lBOa7O8aGOU+/yEbMJgQv/DnCg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.60.0",
-        "@typescript-eslint/utils": "5.60.0",
+        "@typescript-eslint/typescript-estree": "5.61.0",
+        "@typescript-eslint/utils": "5.61.0",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -2160,9 +2169,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.60.0.tgz",
-      "integrity": "sha512-ascOuoCpNZBccFVNJRSC6rPq4EmJ2NkuoKnd6LDNyAQmdDnziAtxbCGWCbefG1CNzmDvd05zO36AmB7H8RzKPA==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.61.0.tgz",
+      "integrity": "sha512-ldyueo58KjngXpzloHUog/h9REmHl59G1b3a5Sng1GfBo14BkS3ZbMEb3693gnP1k//97lh7bKsp6/V/0v1veQ==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2173,13 +2182,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.0.tgz",
-      "integrity": "sha512-R43thAuwarC99SnvrBmh26tc7F6sPa2B3evkXp/8q954kYL6Ro56AwASYWtEEi+4j09GbiNAHqYwNNZuNlARGQ==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.61.0.tgz",
+      "integrity": "sha512-Fud90PxONnnLZ36oR5ClJBLTLfU4pIWBmnvGwTbEa2cXIqj70AEDEmOmpkFComjBZ/037ueKrOdHuYmSFVD7Rw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.60.0",
-        "@typescript-eslint/visitor-keys": "5.60.0",
+        "@typescript-eslint/types": "5.61.0",
+        "@typescript-eslint/visitor-keys": "5.61.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -2200,17 +2209,17 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.60.0.tgz",
-      "integrity": "sha512-ba51uMqDtfLQ5+xHtwlO84vkdjrqNzOnqrnwbMHMRY8Tqeme8C2Q8Fc7LajfGR+e3/4LoYiWXUM6BpIIbHJ4hQ==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.61.0.tgz",
+      "integrity": "sha512-mV6O+6VgQmVE6+xzlA91xifndPW9ElFW8vbSF0xCT/czPXVhwDewKila1jOyRwa9AE19zKnrr7Cg5S3pJVrTWQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.60.0",
-        "@typescript-eslint/types": "5.60.0",
-        "@typescript-eslint/typescript-estree": "5.60.0",
+        "@typescript-eslint/scope-manager": "5.61.0",
+        "@typescript-eslint/types": "5.61.0",
+        "@typescript-eslint/typescript-estree": "5.61.0",
         "eslint-scope": "^5.1.1",
         "semver": "^7.3.7"
       },
@@ -2226,12 +2235,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.0.tgz",
-      "integrity": "sha512-wm9Uz71SbCyhUKgcaPRauBdTegUyY/ZWl8gLwD/i/ybJqscrrdVSFImpvUz16BLPChIeKBK5Fa9s6KDQjsjyWw==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.61.0.tgz",
+      "integrity": "sha512-50XQ5VdbWrX06mQXhy93WywSFZZGsv3EOjq+lqp6WC2t+j3mb6A9xYVdrRxafvK88vg9k9u+CT4l6D8PEatjKg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.60.0",
+        "@typescript-eslint/types": "5.61.0",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -3547,9 +3556,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001508",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001508.tgz",
-      "integrity": "sha512-sdQZOJdmt3GJs1UMNpCCCyeuS2IEGLXnHyAo9yIO5JJDjbjoVRij4M1qep6P6gFpptD1PqIYgzM+gwJbOi92mw==",
+      "version": "1.0.30001512",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001512.tgz",
+      "integrity": "sha512-2S9nK0G/mE+jasCUsMPlARhRCts1ebcp2Ji8Y8PWi4NDE1iRdLCnEPHkEfeBrGC45L4isBx5ur3IQ6yTE2mRZw==",
       "dev": true,
       "funding": [
         {
@@ -5086,9 +5095,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.440",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz",
-      "integrity": "sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw==",
+      "version": "1.4.449",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.449.tgz",
+      "integrity": "sha512-TxLRpRUj/107ATefeP8VIUWNOv90xJxZZbCW/eIbSZQiuiFANCx2b7u+GbVc9X4gU+xnbvypNMYVM/WArE1DNQ==",
       "dev": true,
       "peer": true
     },
@@ -5406,15 +5415,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.43.0.tgz",
-      "integrity": "sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==",
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.44.0.tgz",
+      "integrity": "sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
-        "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.43.0",
+        "@eslint/eslintrc": "^2.1.0",
+        "@eslint/js": "8.44.0",
         "@humanwhocodes/config-array": "^0.11.10",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -5426,7 +5435,7 @@
         "escape-string-regexp": "^4.0.0",
         "eslint-scope": "^7.2.0",
         "eslint-visitor-keys": "^3.4.1",
-        "espree": "^9.5.2",
+        "espree": "^9.6.0",
         "esquery": "^1.4.2",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -5446,7 +5455,7 @@
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.1",
+        "optionator": "^0.9.3",
         "strip-ansi": "^6.0.1",
         "strip-json-comments": "^3.1.0",
         "text-table": "^0.2.0"
@@ -5520,9 +5529,9 @@
       }
     },
     "node_modules/eslint-import-resolver-typescript/node_modules/globby": {
-      "version": "13.2.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.0.tgz",
-      "integrity": "sha512-jWsQfayf13NvqKUIL3Ta+CIqMnvlaIDFveWE/dpOZ9+3AMEJozsxDvKA02zync9UuvOM8rOXzsD5GqKP4OnWPQ==",
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.1.tgz",
+      "integrity": "sha512-DPCBxctI7dN4EeIqjW2KGqgdcUMbrhJ9AzON+PlxCtvppWhubTLD4+a0GFxiym14ZvacUydTPjLPc2DlKz7EIg==",
       "dev": true,
       "dependencies": {
         "dir-glob": "^3.0.1",
@@ -5577,9 +5586,9 @@
       }
     },
     "node_modules/eslint-plugin-galaxy": {
-      "version": "1.26.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-galaxy/-/eslint-plugin-galaxy-1.26.1.tgz",
-      "integrity": "sha512-mmv7pbuv1U2FEKWd/B2tebJqcBzH29dCq2QzLOzKuEDHMNcIUiXDLzJVIz/I7D3CHXLSmyeHg3eLfB8Gb2e9dg==",
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-galaxy/-/eslint-plugin-galaxy-1.27.0.tgz",
+      "integrity": "sha512-UfjgDGUGsWjY2ag3UIena/29h/3hUVBV1Z2iZ0kgtd5zuLBYliiGV8dDIKKK/3olHfLbuw4R1YBhrlX6b0HZtQ==",
       "dev": true,
       "dependencies": {
         "@typescript-eslint/utils": "^5.58.0",
@@ -5836,9 +5845,9 @@
       }
     },
     "node_modules/eslint-plugin-vue-scoped-css": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue-scoped-css/-/eslint-plugin-vue-scoped-css-2.4.0.tgz",
-      "integrity": "sha512-H2GdGyaNuz58gMwJYrPAyok2ZZFklb1wnI4jqLyQZf17gvZeTOpYzCxqhhcT5hBeaCUHhjxU5akCI7A4AtBHew==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue-scoped-css/-/eslint-plugin-vue-scoped-css-2.5.0.tgz",
+      "integrity": "sha512-vR+raYNE1aQ69lS1lZGiKoz8rXFI3MWf2fxrfns/XCQ0XT5sIguhDtQS+9JmUQJClenLDEe2CQx7P+eeSdF4cA==",
       "dev": true,
       "dependencies": {
         "eslint-utils": "^3.0.0",
@@ -6056,12 +6065,12 @@
       }
     },
     "node_modules/espree": {
-      "version": "9.5.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
-      "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.0.tgz",
+      "integrity": "sha512-1FH/IiruXZ84tpUlm0aCUEwMl2Ho5ilqVh0VvQXw+byAz/4SAciyHLlfmL5WYqsvD38oymdUwBss0LtK8m4s/A==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.8.0",
+        "acorn": "^8.9.0",
         "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.4.1"
       },
@@ -6625,9 +6634,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.6.0.tgz",
-      "integrity": "sha512-lgbo68hHTQnFddybKbbs/RDRJnJT5YyGy2kQzVwbq+g67X73i+5MVTval34QxGkOe9X5Ujf1UYpCaphLyltjEg==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.6.2.tgz",
+      "integrity": "sha512-E5XrT4CbbXcXWy+1jChlZmrmCwd5KGx502kDCXJJ7y898TtWW9FwoG5HfOLVRKmlmDGkWN2HM9Ho+/Y8F0sJDg==",
       "dev": true,
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
@@ -7112,12 +7121,6 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
-    "node_modules/grapheme-splitter": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
-      "dev": true
-    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -8416,13 +8419,15 @@
       }
     },
     "node_modules/jsx-ast-utils": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
-      "integrity": "sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.4.tgz",
+      "integrity": "sha512-fX2TVdCViod6HwKEtSWGHs57oFhVfCMwieb9PuRDgjDPh5XeqJiHFFFJCHxU5cnTc3Bu/GRL+kPiFmw8XWOfKw==",
       "dev": true,
       "dependencies": {
-        "array-includes": "^3.1.5",
-        "object.assign": "^4.1.3"
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
       },
       "engines": {
         "node": ">=4.0"
@@ -9342,17 +9347,17 @@
       }
     },
     "node_modules/optionator": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
-      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
       "dev": true,
       "dependencies": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
         "levn": "^0.4.1",
         "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.3"
+        "type-check": "^0.4.0"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -12721,6 +12726,12 @@
     }
   },
   "dependencies": {
+    "@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true
+    },
     "@algolia/autocomplete-core": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
@@ -13455,14 +13466,14 @@
       "dev": true
     },
     "@eslint/eslintrc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz",
-      "integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.0.tgz",
+      "integrity": "sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==",
       "dev": true,
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.5.2",
+        "espree": "^9.6.0",
         "globals": "^13.19.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
@@ -13489,9 +13500,9 @@
       }
     },
     "@eslint/js": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.43.0.tgz",
-      "integrity": "sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==",
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz",
+      "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==",
       "dev": true
     },
     "@humanwhocodes/config-array": {
@@ -14143,17 +14154,17 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.0.tgz",
-      "integrity": "sha512-78B+anHLF1TI8Jn/cD0Q00TBYdMgjdOn980JfAVa9yw5sop8nyTfVOQAv6LWywkOGLclDBtv5z3oxN4w7jxyNg==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.61.0.tgz",
+      "integrity": "sha512-A5l/eUAug103qtkwccSCxn8ZRwT+7RXWkFECdA4Cvl1dOlDUgTpAOfSEElZn2uSUxhdDpnCdetrf0jvU4qrL+g==",
       "dev": true,
       "requires": {
         "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.60.0",
-        "@typescript-eslint/type-utils": "5.60.0",
-        "@typescript-eslint/utils": "5.60.0",
+        "@typescript-eslint/scope-manager": "5.61.0",
+        "@typescript-eslint/type-utils": "5.61.0",
+        "@typescript-eslint/utils": "5.61.0",
         "debug": "^4.3.4",
-        "grapheme-splitter": "^1.0.4",
+        "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
         "natural-compare-lite": "^1.4.0",
         "semver": "^7.3.7",
@@ -14161,53 +14172,53 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.60.0.tgz",
-      "integrity": "sha512-jBONcBsDJ9UoTWrARkRRCgDz6wUggmH5RpQVlt7BimSwaTkTjwypGzKORXbR4/2Hqjk9hgwlon2rVQAjWNpkyQ==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.61.0.tgz",
+      "integrity": "sha512-yGr4Sgyh8uO6fSi9hw3jAFXNBHbCtKKFMdX2IkT3ZqpKmtAq3lHS4ixB/COFuAIJpwl9/AqF7j72ZDWYKmIfvg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.60.0",
-        "@typescript-eslint/types": "5.60.0",
-        "@typescript-eslint/typescript-estree": "5.60.0",
+        "@typescript-eslint/scope-manager": "5.61.0",
+        "@typescript-eslint/types": "5.61.0",
+        "@typescript-eslint/typescript-estree": "5.61.0",
         "debug": "^4.3.4"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.60.0.tgz",
-      "integrity": "sha512-hakuzcxPwXi2ihf9WQu1BbRj1e/Pd8ZZwVTG9kfbxAMZstKz8/9OoexIwnmLzShtsdap5U/CoQGRCWlSuPbYxQ==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.61.0.tgz",
+      "integrity": "sha512-W8VoMjoSg7f7nqAROEmTt6LoBpn81AegP7uKhhW5KzYlehs8VV0ZW0fIDVbcZRcaP3aPSW+JZFua+ysQN+m/Nw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.60.0",
-        "@typescript-eslint/visitor-keys": "5.60.0"
+        "@typescript-eslint/types": "5.61.0",
+        "@typescript-eslint/visitor-keys": "5.61.0"
       }
     },
     "@typescript-eslint/type-utils": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.60.0.tgz",
-      "integrity": "sha512-X7NsRQddORMYRFH7FWo6sA9Y/zbJ8s1x1RIAtnlj6YprbToTiQnM6vxcMu7iYhdunmoC0rUWlca13D5DVHkK2g==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.61.0.tgz",
+      "integrity": "sha512-kk8u//r+oVK2Aj3ph/26XdH0pbAkC2RiSjUYhKD+PExemG4XSjpGFeyZ/QM8lBOa7O8aGOU+/yEbMJgQv/DnCg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/typescript-estree": "5.60.0",
-        "@typescript-eslint/utils": "5.60.0",
+        "@typescript-eslint/typescript-estree": "5.61.0",
+        "@typescript-eslint/utils": "5.61.0",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.60.0.tgz",
-      "integrity": "sha512-ascOuoCpNZBccFVNJRSC6rPq4EmJ2NkuoKnd6LDNyAQmdDnziAtxbCGWCbefG1CNzmDvd05zO36AmB7H8RzKPA==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.61.0.tgz",
+      "integrity": "sha512-ldyueo58KjngXpzloHUog/h9REmHl59G1b3a5Sng1GfBo14BkS3ZbMEb3693gnP1k//97lh7bKsp6/V/0v1veQ==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.0.tgz",
-      "integrity": "sha512-R43thAuwarC99SnvrBmh26tc7F6sPa2B3evkXp/8q954kYL6Ro56AwASYWtEEi+4j09GbiNAHqYwNNZuNlARGQ==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.61.0.tgz",
+      "integrity": "sha512-Fud90PxONnnLZ36oR5ClJBLTLfU4pIWBmnvGwTbEa2cXIqj70AEDEmOmpkFComjBZ/037ueKrOdHuYmSFVD7Rw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.60.0",
-        "@typescript-eslint/visitor-keys": "5.60.0",
+        "@typescript-eslint/types": "5.61.0",
+        "@typescript-eslint/visitor-keys": "5.61.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -14216,28 +14227,28 @@
       }
     },
     "@typescript-eslint/utils": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.60.0.tgz",
-      "integrity": "sha512-ba51uMqDtfLQ5+xHtwlO84vkdjrqNzOnqrnwbMHMRY8Tqeme8C2Q8Fc7LajfGR+e3/4LoYiWXUM6BpIIbHJ4hQ==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.61.0.tgz",
+      "integrity": "sha512-mV6O+6VgQmVE6+xzlA91xifndPW9ElFW8vbSF0xCT/czPXVhwDewKila1jOyRwa9AE19zKnrr7Cg5S3pJVrTWQ==",
       "dev": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.60.0",
-        "@typescript-eslint/types": "5.60.0",
-        "@typescript-eslint/typescript-estree": "5.60.0",
+        "@typescript-eslint/scope-manager": "5.61.0",
+        "@typescript-eslint/types": "5.61.0",
+        "@typescript-eslint/typescript-estree": "5.61.0",
         "eslint-scope": "^5.1.1",
         "semver": "^7.3.7"
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.60.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.0.tgz",
-      "integrity": "sha512-wm9Uz71SbCyhUKgcaPRauBdTegUyY/ZWl8gLwD/i/ybJqscrrdVSFImpvUz16BLPChIeKBK5Fa9s6KDQjsjyWw==",
+      "version": "5.61.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.61.0.tgz",
+      "integrity": "sha512-50XQ5VdbWrX06mQXhy93WywSFZZGsv3EOjq+lqp6WC2t+j3mb6A9xYVdrRxafvK88vg9k9u+CT4l6D8PEatjKg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.60.0",
+        "@typescript-eslint/types": "5.61.0",
         "eslint-visitor-keys": "^3.3.0"
       },
       "dependencies": {
@@ -15124,9 +15135,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001508",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001508.tgz",
-      "integrity": "sha512-sdQZOJdmt3GJs1UMNpCCCyeuS2IEGLXnHyAo9yIO5JJDjbjoVRij4M1qep6P6gFpptD1PqIYgzM+gwJbOi92mw==",
+      "version": "1.0.30001512",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001512.tgz",
+      "integrity": "sha512-2S9nK0G/mE+jasCUsMPlARhRCts1ebcp2Ji8Y8PWi4NDE1iRdLCnEPHkEfeBrGC45L4isBx5ur3IQ6yTE2mRZw==",
       "dev": true,
       "peer": true
     },
@@ -16272,9 +16283,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.4.440",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz",
-      "integrity": "sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw==",
+      "version": "1.4.449",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.449.tgz",
+      "integrity": "sha512-TxLRpRUj/107ATefeP8VIUWNOv90xJxZZbCW/eIbSZQiuiFANCx2b7u+GbVc9X4gU+xnbvypNMYVM/WArE1DNQ==",
       "dev": true,
       "peer": true
     },
@@ -16521,15 +16532,15 @@
       }
     },
     "eslint": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.43.0.tgz",
-      "integrity": "sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==",
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.44.0.tgz",
+      "integrity": "sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==",
       "dev": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
-        "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.43.0",
+        "@eslint/eslintrc": "^2.1.0",
+        "@eslint/js": "8.44.0",
         "@humanwhocodes/config-array": "^0.11.10",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -16541,7 +16552,7 @@
         "escape-string-regexp": "^4.0.0",
         "eslint-scope": "^7.2.0",
         "eslint-visitor-keys": "^3.4.1",
-        "espree": "^9.5.2",
+        "espree": "^9.6.0",
         "esquery": "^1.4.2",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -16561,7 +16572,7 @@
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.1",
+        "optionator": "^0.9.3",
         "strip-ansi": "^6.0.1",
         "strip-json-comments": "^3.1.0",
         "text-table": "^0.2.0"
@@ -16701,9 +16712,9 @@
       },
       "dependencies": {
         "globby": {
-          "version": "13.2.0",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.0.tgz",
-          "integrity": "sha512-jWsQfayf13NvqKUIL3Ta+CIqMnvlaIDFveWE/dpOZ9+3AMEJozsxDvKA02zync9UuvOM8rOXzsD5GqKP4OnWPQ==",
+          "version": "13.2.1",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.1.tgz",
+          "integrity": "sha512-DPCBxctI7dN4EeIqjW2KGqgdcUMbrhJ9AzON+PlxCtvppWhubTLD4+a0GFxiym14ZvacUydTPjLPc2DlKz7EIg==",
           "dev": true,
           "requires": {
             "dir-glob": "^3.0.1",
@@ -16742,9 +16753,9 @@
       }
     },
     "eslint-plugin-galaxy": {
-      "version": "1.26.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-galaxy/-/eslint-plugin-galaxy-1.26.1.tgz",
-      "integrity": "sha512-mmv7pbuv1U2FEKWd/B2tebJqcBzH29dCq2QzLOzKuEDHMNcIUiXDLzJVIz/I7D3CHXLSmyeHg3eLfB8Gb2e9dg==",
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-galaxy/-/eslint-plugin-galaxy-1.27.0.tgz",
+      "integrity": "sha512-UfjgDGUGsWjY2ag3UIena/29h/3hUVBV1Z2iZ0kgtd5zuLBYliiGV8dDIKKK/3olHfLbuw4R1YBhrlX6b0HZtQ==",
       "dev": true,
       "requires": {
         "@typescript-eslint/utils": "^5.58.0",
@@ -16924,9 +16935,9 @@
       }
     },
     "eslint-plugin-vue-scoped-css": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue-scoped-css/-/eslint-plugin-vue-scoped-css-2.4.0.tgz",
-      "integrity": "sha512-H2GdGyaNuz58gMwJYrPAyok2ZZFklb1wnI4jqLyQZf17gvZeTOpYzCxqhhcT5hBeaCUHhjxU5akCI7A4AtBHew==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue-scoped-css/-/eslint-plugin-vue-scoped-css-2.5.0.tgz",
+      "integrity": "sha512-vR+raYNE1aQ69lS1lZGiKoz8rXFI3MWf2fxrfns/XCQ0XT5sIguhDtQS+9JmUQJClenLDEe2CQx7P+eeSdF4cA==",
       "dev": true,
       "requires": {
         "eslint-utils": "^3.0.0",
@@ -16978,12 +16989,12 @@
       "dev": true
     },
     "espree": {
-      "version": "9.5.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
-      "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.0.tgz",
+      "integrity": "sha512-1FH/IiruXZ84tpUlm0aCUEwMl2Ho5ilqVh0VvQXw+byAz/4SAciyHLlfmL5WYqsvD38oymdUwBss0LtK8m4s/A==",
       "dev": true,
       "requires": {
-        "acorn": "^8.8.0",
+        "acorn": "^8.9.0",
         "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.4.1"
       },
@@ -17408,9 +17419,9 @@
       }
     },
     "get-tsconfig": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.6.0.tgz",
-      "integrity": "sha512-lgbo68hHTQnFddybKbbs/RDRJnJT5YyGy2kQzVwbq+g67X73i+5MVTval34QxGkOe9X5Ujf1UYpCaphLyltjEg==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.6.2.tgz",
+      "integrity": "sha512-E5XrT4CbbXcXWy+1jChlZmrmCwd5KGx502kDCXJJ7y898TtWW9FwoG5HfOLVRKmlmDGkWN2HM9Ho+/Y8F0sJDg==",
       "dev": true,
       "requires": {
         "resolve-pkg-maps": "^1.0.0"
@@ -17781,12 +17792,6 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
-    "grapheme-splitter": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
-      "dev": true
-    },
     "graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -18685,13 +18690,15 @@
       }
     },
     "jsx-ast-utils": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
-      "integrity": "sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.4.tgz",
+      "integrity": "sha512-fX2TVdCViod6HwKEtSWGHs57oFhVfCMwieb9PuRDgjDPh5XeqJiHFFFJCHxU5cnTc3Bu/GRL+kPiFmw8XWOfKw==",
       "dev": true,
       "requires": {
-        "array-includes": "^3.1.5",
-        "object.assign": "^4.1.3"
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
       }
     },
     "keyv": {
@@ -19362,17 +19369,17 @@
       }
     },
     "optionator": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
-      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
       "dev": true,
       "requires": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
         "levn": "^0.4.1",
         "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.3"
+        "type-check": "^0.4.0"
       }
     },
     "ora": {
diff --git a/src/alert/index.vue b/src/alert/index.vue
index b35934f..d2e1dad 100644
--- a/src/alert/index.vue
+++ b/src/alert/index.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
+import type { Options } from 'roughjs/bin/core'
 import type { RoughSVG } from 'roughjs/bin/svg'
-import { useReactionState, type ColorProps, type ReactionProps, type SizeProps } from '../common/utils'
+import { toRef } from 'vue'
+import type { ColorProps, ReactionProps, SizeProps } from '../common/utils'
+import { useReactionState } from '../common/utils'
 import RGraphics from '../graphics/index.vue'
-import { toRef } from 'vue';
-import { getSVGSize } from '../graphics/utils';
-import { Options } from 'roughjs/bin/core';
+import { getSVGSize } from '../graphics/utils'
 
 defineOptions({
   name: 'RAlert',
@@ -30,9 +31,9 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
   const { width, height } = getSVGSize(svg)
 
   const style = getComputedStyle(svg)
-  const lineWidth = parseInt(style.getPropertyValue('--r-alert-line-width'), 10)|| 0
+  const lineWidth = parseInt(style.getPropertyValue('--r-alert-line-width'), 10) || 0
   const lineLength = parseInt(style.getPropertyValue('--r-alert-line-length'), 10) || 0
-  const lineGap = parseInt(style.getPropertyValue('--r-alert-line-gap'), 10)|| 0
+  const lineGap = parseInt(style.getPropertyValue('--r-alert-line-gap'), 10) || 0
 
   const options: Options = {
     stroke: 'var(--r-alert-line-color)',
@@ -48,7 +49,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
   const innerEllipsisB = outerEllipsisB - lineLength
   const centerEllipsisA = outerEllipsisA + lineLength / 2
   const centerEllipsisB = outerEllipsisB + lineLength / 2
-  const startAngle = - Math.PI / 2
+  const startAngle = -Math.PI / 2
 
   const unit = lineGap / Math.max(width, height)
   let lastX = Math.cos(startAngle) * centerEllipsisA
diff --git a/src/checkbox/index.vue b/src/checkbox/index.vue
index a4422a9..7d0b735 100644
--- a/src/checkbox/index.vue
+++ b/src/checkbox/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { Options } from 'roughjs/bin/core'
 import type { RoughSVG } from 'roughjs/bin/svg'
 import { inject, ref, toRef, watch, watchEffect } from 'vue'
 import type { ReactionProps } from '../common/utils'
@@ -7,7 +8,6 @@ import RGraphics from '../graphics/index.vue'
 import { getSVGSize } from '../graphics/utils'
 import type { CheckboxValue } from './utils'
 import { modelInjection, multipleInjection } from './utils'
-import { Options } from 'roughjs/bin/core'
 
 defineOptions({
   name: 'RCheckbox',
@@ -27,7 +27,7 @@ const {
 } & ReactionProps>()
 
 const emit = defineEmits<{
-  (event: 'update:checked', value: typeof checked): void
+  (event: 'update:checked', value: typeof checked): void,
 }>()
 
 defineSlots<{
@@ -81,7 +81,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     fill: indeterminate ? 'var(--r-checkbox-border-color)' : undefined,
   }
   if (multiple === false) {
-    const ellipse = rc.ellipse(width / 2 , height / 2, width - padding * 2, height - padding * 2, options)
+    const ellipse = rc.ellipse(width / 2, height / 2, width - padding * 2, height - padding * 2, options)
     svg.appendChild(ellipse)
   } else {
     const rectangle = rc.rectangle(padding, padding, width - padding * 2, height - padding * 2, options)
@@ -91,7 +91,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     const checkedStrokeWidth = parseInt(checkedWidth, 10) || 0
     const linearPath = rc.linearPath([
       [padding, Math.round(height / 2)],
-      [Math.round(width / 2),  height - padding],
+      [Math.round(width / 2), height - padding],
       [width - padding, padding],
     ], {
       stroke: 'var(--r-checkbox-checked-color)',
@@ -113,7 +113,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
       class="r-checkbox__input"
     >
     <span class="r-checkbox__control">
-      <RGraphics @draw="draw"/>
+      <RGraphics @draw="draw" />
     </span>
     <slot></slot>
   </label>
diff --git a/src/components.ts b/src/components.ts
index 15a176c..8d505ad 100644
--- a/src/components.ts
+++ b/src/components.ts
@@ -8,6 +8,7 @@ export { default as RGraphicsConfig } from './graphics/graphics-config.vue'
 export { default as RGridGuide } from './grid-guide/index.vue'
 export { default as RSelect } from './select/index.vue'
 export { default as RSpace } from './space/index.vue'
+export { default as RSwitch } from './switch/index.vue'
 export { default as RTable } from './table/index.vue'
 export { default as RText } from './text/index.vue'
 export { default as RLink } from './link/index.vue'
diff --git a/src/select/index.vue b/src/select/index.vue
index bfd1506..574c87e 100644
--- a/src/select/index.vue
+++ b/src/select/index.vue
@@ -4,9 +4,10 @@ import type { RoughSVG } from 'roughjs/bin/svg'
 import { toRef, watch, watchEffect } from 'vue'
 import RCheckboxGroup from '../checkbox/checkbox-group.vue'
 import type { CheckboxValue } from '../checkbox/utils'
+import type { ReactionProps } from '../common/utils'
+import { useReactionState } from '../common/utils'
 import RGraphics from '../graphics/index.vue'
 import { getSVGSize } from '../graphics/utils'
-import { ReactionProps, useReactionState } from '../common/utils'
 
 defineOptions({
   name: 'RSelect',
@@ -92,11 +93,11 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
   )
   svg.appendChild(rect)
   const arrowSize = height / 2
-  const arrowPadding = height / 4
+  const arrowMargin = height / 4
   const linearPath = rc.linearPath([
-    [Math.round(width - arrowPadding - arrowSize * 7 / 8), Math.round(arrowPadding + arrowSize * 3 / 8)],
-    [Math.round(width - arrowPadding - arrowSize / 2), Math.round(height - arrowPadding - arrowSize / 4)],
-    [Math.round(width - arrowPadding - arrowSize / 8), Math.round(arrowPadding + arrowSize * 3 / 8)],
+    [Math.round(width - arrowMargin - arrowSize * 7 / 8), Math.round(arrowMargin + arrowSize * 3 / 8)],
+    [Math.round(width - arrowMargin - arrowSize / 2), Math.round(height - arrowMargin - arrowSize / 4)],
+    [Math.round(width - arrowMargin - arrowSize / 8), Math.round(arrowMargin + arrowSize * 3 / 8)],
   ], {
     stroke: 'var(--r-select-border-color)',
     strokeWidth,
diff --git a/src/switch/index.vue b/src/switch/index.vue
new file mode 100644
index 0000000..d3694e9
--- /dev/null
+++ b/src/switch/index.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { Options } from 'roughjs/bin/core'
+import type { RoughSVG } from 'roughjs/bin/svg'
+import { toRef, watch, watchEffect } from 'vue'
+import type { ReactionProps } from '../common/utils'
+import { useReactionState } from '../common/utils'
+import RGraphics from '../graphics/index.vue'
+import { getSVGSize } from '../graphics/utils'
+
+defineOptions({
+  name: 'RSwitch',
+})
+
+const {
+  disabled = false,
+  modelValue,
+  reactions = (() => ['focus-within', 'active']) as never,
+} = defineProps<{
+  disabled?: boolean,
+  modelValue?: boolean,
+} & ReactionProps>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: typeof modelValue): void,
+}>()
+
+let internalModelValue = $ref(modelValue)
+
+watchEffect(() => {
+  internalModelValue = modelValue
+})
+
+watch($$(internalModelValue), currentValue => {
+  emit('update:modelValue', currentValue)
+})
+
+const getReactionState = useReactionState(toRef(() => reactions))
+
+function draw(rc: RoughSVG, svg: SVGSVGElement) {
+  getReactionState()
+  const { width, height } = getSVGSize(svg)
+  const style = getComputedStyle(svg)
+  const borderWidth = style.getPropertyValue('--r-switch-border-width')
+  const strokeWidth = parseInt(borderWidth, 10) || 0
+  const padding = 2
+  const rectangle = rc.rectangle(padding, padding, width - padding * 2, height - padding * 2, {
+    stroke: 'var(--r-switch-border-color)',
+    strokeWidth,
+    fill: internalModelValue ? 'var(--r-switch-track-color)' : undefined,
+  })
+  svg.appendChild(rectangle)
+  const handleOptions: Options = {
+    stroke: 'var(--r-switch-border-color)',
+    fill: 'var(--r-switch-handle-color)',
+    fillStyle: 'solid',
+  }
+  const handleSize = (height - 2 * padding) * 3 / 4
+  const handleMargin = (height - handleSize) / 2
+  if (internalModelValue) {
+    const handleRectangle = rc.rectangle(
+      width - handleMargin - handleSize,
+      handleMargin,
+      handleSize,
+      handleSize,
+      handleOptions,
+    )
+    svg.appendChild(handleRectangle)
+  } else {
+    const handleRectangle = rc.rectangle(
+      handleMargin,
+      handleMargin,
+      handleSize,
+      handleSize,
+      handleOptions,
+    )
+    svg.appendChild(handleRectangle)
+  }
+}
+</script>
+
+<template>
+  <label class="r-switch">
+    <input
+      v-model="internalModelValue"
+      :disabled="disabled"
+      type="checkbox"
+      class="r-switch__input"
+    >
+    <span class="r-switch__control">
+      <RGraphics @draw="draw" />
+    </span>
+    <slot></slot>
+  </label>
+</template>
+
+<style lang="scss" scoped>
+.r-switch {
+  --r-switch-border-color: var(--r-common-text-color);
+  --r-switch-border-width: 1;
+  --r-switch-control-size: var(--r-common-line-height);
+  --r-switch-track-color: var(--r-common-primary-color);
+  --r-switch-handle-color: var(--r-common-background-color);
+  display: inline-flex;
+  cursor: pointer;
+  &:focus-within,
+  &:not(:has(> .r-checkbox__input:disabled)):active {
+    --r-switch-border-width: 2;
+  }
+  &:has(> .r-checkbox__input:disabled) {
+    cursor: not-allowed;
+    text-decoration-line: line-through;
+  }
+}
+.r-switch__input {
+  appearance: none;
+  margin: 0;
+}
+.r-switch__control {
+  display: inline-block;
+  flex: none;
+  width: calc(var(--r-switch-control-size) * 2);
+  height: var(--r-switch-control-size);
+  margin-inline-end: calc(var(--r-switch-control-size) / 4);
+  .r-switch__input:disabled + & {
+    opacity: 0.8;
+  }
+}
+</style>