diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index f6b416d2a..0c88ca2e7 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -31,7 +31,7 @@ module.exports = {
           customElement: true,
         },
       },
-    }
+    },
   ],
   extends: [
     'eslint:recommended',
@@ -44,61 +44,34 @@ module.exports = {
     'plugin:sonarjs/recommended',
     'plugin:tailwindcss/recommended',
     'plugin:storybook/recommended',
+    'prettier',
   ],
   rules: {
     // Eslint rules
-    '@typescript-eslint/indent': ['error', 2],
-    'array-bracket-spacing': 'error',
     'array-callback-return': 'error',
-    'arrow-spacing': 'error',
-    'block-spacing': 'error',
-    'brace-style': 'error',
-    'comma-dangle': ['error', {
-      arrays: 'always-multiline',
-      objects: 'always-multiline',
-      imports: 'always-multiline',
-      exports: 'never',
-      functions: 'never',
-    }],
-    'comma-spacing': 'error',
-    'computed-property-spacing': 'error',
     'dot-notation': 'error',
-    'eol-last': 'error',
-    eqeqeq: ['error', 'always', {
-      null: 'always',
-    }],
-    'func-call-spacing': 'error',
-    'key-spacing': 'error',
-    'keyword-spacing': 'error',
+    eqeqeq: [
+      'error',
+      'always',
+      {
+        null: 'always',
+      },
+    ],
     'no-caller': 'error',
-    'no-multi-spaces': 'error',
-    // https://github.com/sveltejs/eslint-plugin-svelte3/issues/41
-    'no-multiple-empty-lines': 'off',
-    'no-multi-spaces': 'error',
     'no-param-reassign': 'error',
     'no-return-await': 'error',
     'no-unreachable-loop': 'error',
     'no-unsafe-optional-chaining': 'error',
     'nonblock-statement-body-position': 'error',
-    'object-curly-spacing': ['error', 'always'],
-    'one-var': ['error', {
-      let: 'never',
-      const: 'never',
-    }],
-    quotes: ['error', 'single', {
-      avoidEscape: true,
-    }],
+    'one-var': [
+      'error',
+      {
+        let: 'never',
+        const: 'never',
+      },
+    ],
     'require-atomic-updates': 'error',
-    'rest-spread-spacing': 'error',
-    semi: ['error', 'always'],
-    'semi-spacing': 'error',
-    'semi-style': 'error',
-    'space-before-blocks': 'error',
-    'space-in-parens': 'error',
-    'space-infix-ops': 'error',
-    'space-unary-ops': 'error',
     'spaced-comment': 'error',
-    'template-curly-spacing': 'error',
     radix: 'error',
     'require-await': 'error',
     strict: 'error',
@@ -109,11 +82,14 @@ module.exports = {
     'prefer-const': 'error',
     'prefer-template': 'error',
     'require-await': 'error',
-    'prefer-arrow/prefer-arrow-functions': ['error', {
-      disallowPrototype: true,
-      singleReturnOnly: false,
-      classPropertiesAllowed: false,
-    }],
+    'prefer-arrow/prefer-arrow-functions': [
+      'error',
+      {
+        disallowPrototype: true,
+        singleReturnOnly: false,
+        classPropertiesAllowed: false,
+      },
+    ],
     // Unicorn rules
     'unicorn/switch-case-braces': 'off',
     'unicorn/no-unsafe-regex': 'error',
@@ -158,9 +134,13 @@ module.exports = {
     'import/no-cycle': 'error',
     'import/no-useless-path-segments': 'error',
     'import/export': 'error',
-    'import/extensions': ["error", "never", {
-      "svelte": "always"
-    }],
+    'import/extensions': [
+      'error',
+      'never',
+      {
+        svelte: 'always',
+      },
+    ],
     // Do not currently work with eslint-plugin-svelte
     'import/first': 'off',
     'import/order': 'error',
@@ -179,9 +159,9 @@ module.exports = {
         // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
         alwaysTryTypes: true,
         project: './tsconfig.json',
-      }
+      },
     },
     'svelte3/typescript': () => require('typescript'),
   },
   ignorePatterns: ['**/cypress/**', '**/node_modules/**', '*.json'],
-};
\ No newline at end of file
+};
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 5c57660c4..fb9b475d8 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -34,4 +34,4 @@ jobs:
       - name: Publish 🚀
         uses: JS-DevTools/npm-publish@v1
         with:
-          token: ${{ secrets.NPM_TOKEN }} 
+          token: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/pullrequest.yml b/.github/workflows/pullrequest.yml
index dbd94ad40..16f5971aa 100644
--- a/.github/workflows/pullrequest.yml
+++ b/.github/workflows/pullrequest.yml
@@ -9,42 +9,43 @@ jobs:
   eslint:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Install 🔧
-      run: npm ci --audit=false
-    - name: Run ESLint
-      run: npm run lint
+      - uses: actions/checkout@v2
+      - name: Install 🔧
+        run: npm ci --audit=false
+      - name: Run ESLint and Prettier
+        run: |
+          npm run lint
+          npm run format-check
 
   check:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Install 🔧
-      run: npm ci --audit=false
-    - name: Run Check
-      run: npm run check
+      - uses: actions/checkout@v2
+      - name: Install 🔧
+        run: npm ci --audit=false
+      - name: Run Check
+        run: npm run check
 
   test:
     timeout-minutes: 10
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - name: Install deps
-      run: |
-        npm ci --audit=false
-        cd playground
-        npm ci --audit=false
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
-
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Install deps
+        run: |
+          npm ci --audit=false
+          cd playground
+          npm ci --audit=false
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..7c979fb41
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,3 @@
+package-lock.json
+dist
+prime
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
new file mode 100644
index 000000000..8dc09940c
--- /dev/null
+++ b/.prettierrc.cjs
@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: ['prettier-plugin-svelte'],
+  singleQuote: true,
+  // TODO(mc, 2023-03-22): eslint-plugin-svelte does not respect single-quote for HTML
+  // https://github.com/sveltejs/prettier-plugin-svelte/issues/253
+  jsxSingleQuote: true,
+  svelteIndentScriptAndStyle: false,
+};
diff --git a/.storybook/main.js b/.storybook/main.js
index cebceb2a6..239c29951 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -21,15 +21,15 @@ export default {
   },
   async viteFinal(config) {
     return mergeConfig(config, {
-      base: '/'
+      base: '/',
     });
   },
   framework: {
     name: '@storybook/html-vite',
-    options: {}
+    options: {},
   },
   features: {
     modernInlineRender: true,
     storyStoreV7: true,
   },
-};
\ No newline at end of file
+};
diff --git a/.storybook/manager.js b/.storybook/manager.js
index 940a72101..41e007d2a 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -1,7 +1,7 @@
-import { addons } from '@storybook/addons'
-import theme from './theme'
+import { addons } from '@storybook/addons';
+import theme from './theme';
 
 addons.setConfig({
   theme,
   enableShortcuts: false,
-})
+});
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 2275b169a..7ebe2f6e9 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,5 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     expanded: true,
     matchers: {
@@ -9,8 +9,8 @@ export const parameters = {
   },
   docs: {
     source: {
-      state: 'open'
-    }
+      state: 'open',
+    },
   },
   inlineStories: true,
-}
+};
diff --git a/.storybook/theme.js b/.storybook/theme.js
index 5cbfcb89d..565459ff6 100644
--- a/.storybook/theme.js
+++ b/.storybook/theme.js
@@ -1,7 +1,7 @@
-import { create } from '@storybook/theming'
+import { create } from '@storybook/theming';
 
 export default create({
   brandImage: 'https://www.viam.com/static/logo.svg',
   fontBase: '"Space mono", sans-serif',
   appBg: '#333',
-})
+});
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 5eb66780a..c7e300e25 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -4,6 +4,7 @@
     "csstools.postcss",
     "bradlc.vscode-tailwindcss",
     "svelte.svelte-vscode",
-    "silvenon.mdx"
+    "unifiedjs.vscode-mdx",
+    "esbenp.prettier-vscode"
   ]
 }
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 3b8ddc693..61c29be4d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -35,3 +35,41 @@ More detailed docs exist on [the storybook](https://www.viam.com/prime).
 Linked below are some articles that provide knowledge for how to best build reusable, generic web components.
 
 - [Custom Elements Best Practices](https://web.dev/custom-elements-best-practices/)
+
+## Development tasks
+
+To verify that static assets build correctly:
+
+```shell
+npm run build-storybook
+```
+
+To run tests locally, you must first install the `playground` development dependencies and playwright. From there, you can run tests
+
+```shell
+# set up playground
+cd playground
+npm install
+cd ..
+npx playwright install --with-deps
+
+# run tests, with optional debugging
+npm run test
+npm run test-dev
+```
+
+You can typecheck and lint using:
+
+```shell
+# check types, a11y, and other component quality
+npm run check
+
+# autoformat code and documentation
+npm run format
+
+# check formatting without writing files
+npm run format-check
+
+# lint for stylistic and correctness issues
+npm run lint
+```
diff --git a/README.md b/README.md
index 685e2a04e..bc33dbad0 100644
--- a/README.md
+++ b/README.md
@@ -11,13 +11,14 @@ PRIME is a collection of atomic UI elements, designed to "just work" in any HTML
 ## Installation
 
 The PRIME NPM package contains the following necessary exports for usage:
-* `prime.es.js` or `prime.umd.js` - JS that defines custom elements. ES modules are recommended over UMD.
-* `prime.css` - stylesheet shared by all elements.
+
+- `prime.es.js` or `prime.umd.js` - JS that defines custom elements. ES modules are recommended over UMD.
+- `prime.css` - stylesheet shared by all elements.
 
 If using ES modules, import Prime's JS file into your code:
 
 ```ts
-import '@viamrobotics/prime'
+import '@viamrobotics/prime';
 ```
 
 You must host `prime.css` in a static file server. This is every prime element loads it as a shared stylesheet.
@@ -26,10 +27,10 @@ If you are not hosting `prime.css` at the root directory of your domain, you wil
 
 ```html
 <script type="module">
-window.PRIME_CONFIG = {
-  base: '/path/to/static/folder',
-  query: '?v=someCacheBustingHashIfNeeded',
-}
+  window.PRIME_CONFIG = {
+    base: '/path/to/static/folder',
+    query: '?v=someCacheBustingHashIfNeeded',
+  };
 </script>
 ```
 
@@ -37,7 +38,7 @@ If the necessary `.css` and `.js` files have been added, then no additional impo
 You can immediately start adding PRIME elements to your app, since prime elements are simply custom HTML elements:
 
 ```html
-<v-button label='Hello world!' />
+<v-button label="Hello world!" />
 ```
 
 All elements are prefixed with `v-`. This stands for Viam, the cool company where these elements are made.
@@ -45,24 +46,30 @@ All elements are prefixed with `v-`. This stands for Viam, the cool company wher
 ## Playground
 
 To use the playground, go to the `playground` directory, and:
+
 ```bash
 npm install
 npm start
 ```
+
 Or to run in production mode:
-```
+
+```bash
 npm run build
 npm run serve
 ```
 
 ## Linting / Testing
+
 To lint and typecheck:
+
 ```bash
 npm run lint
 npm run check
 ```
 
 To test:
+
 ```bash
 npm run test-dev # to test with the playwright debug UI
 # or
@@ -76,11 +83,17 @@ npm run test <test-name> # for <test-name>.spec.ts
 
 `PRIME` supports the following browsers:
 
-![Chrome](https://github.com/raw/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://github.com/raw/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://github.com/raw/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Safari](https://github.com/raw/alrra/browser-logos/master/src/safari/safari_48x48.png)
---- | --- | --- | --- |
-Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
+| ![Chrome][] | ![Firefox][] | ![Edge][] | ![Safari][] |
+| ----------- | ------------ | --------- | ----------- |
+| Latest ✔    | Latest ✔     | Latest ✔  | Latest ✔    |
+
+[chrome]: https://github.com/raw/alrra/browser-logos/master/src/chrome/chrome_48x48.png
+[firefox]: https://github.com/raw/alrra/browser-logos/master/src/firefox/firefox_48x48.png
+[edge]: https://github.com/raw/alrra/browser-logos/master/src/edge/edge_48x48.png
+[safari]: https://github.com/raw/alrra/browser-logos/master/src/safari/safari_48x48.png
 
 ## License
-Copyright 2021-2022 Viam Inc.
+
+Copyright 2021-2023 Viam Inc.
 
 Apache 2.0 - See [LICENSE](https://github.com/viamrobotics/prime/blob/main/LICENSE) file
diff --git a/package-lock.json b/package-lock.json
index 84591ee71..7de3dc856 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@viamrobotics/prime",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@viamrobotics/prime",
-      "version": "0.1.3",
+      "version": "0.1.4",
       "license": "Apache-2.0",
       "devDependencies": {
         "@floating-ui/dom": "^1.0.12",
@@ -27,6 +27,7 @@
         "classnames": "^2.3.2",
         "element-internals-polyfill": "^1.1.17",
         "eslint": "^8.30.0",
+        "eslint-config-prettier": "^8.8.0",
         "eslint-import-resolver-typescript": "^3.5.2",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jsx-a11y": "^6.6.1",
@@ -38,6 +39,8 @@
         "eslint-plugin-unicorn": "^45.0.2",
         "monaco-editor": "^0.34.1",
         "postcss": "^8.4.20",
+        "prettier": "^2.8.6",
+        "prettier-plugin-svelte": "^2.9.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "storybook": "^7.0.0-beta.13",
@@ -6829,6 +6832,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
+      "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
@@ -11039,9 +11054,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
-      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.6.tgz",
+      "integrity": "sha512-mtuzdiBbHwPEgl7NxWlqOkithPyp4VN93V7VeHVWBF+ad3I5avc0RVDT4oImXQy9H/AqxA2NSQH8pSxHW6FYbQ==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -11053,6 +11068,16 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-svelte": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.9.0.tgz",
+      "integrity": "sha512-3doBi5NO4IVgaNPtwewvrgPpqAcvNv0NwJNflr76PIGgi9nf1oguQV1Hpdm9TI2ALIQVn/9iIwLpBO5UcD2Jiw==",
+      "dev": true,
+      "peerDependencies": {
+        "prettier": "^1.16.4 || ^2.0.0",
+        "svelte": "^3.2.0"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -19056,6 +19081,13 @@
         }
       }
     },
+    "eslint-config-prettier": {
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
+      "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
+      "dev": true,
+      "requires": {}
+    },
     "eslint-import-resolver-node": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
@@ -22178,11 +22210,18 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
-      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.6.tgz",
+      "integrity": "sha512-mtuzdiBbHwPEgl7NxWlqOkithPyp4VN93V7VeHVWBF+ad3I5avc0RVDT4oImXQy9H/AqxA2NSQH8pSxHW6FYbQ==",
       "dev": true
     },
+    "prettier-plugin-svelte": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.9.0.tgz",
+      "integrity": "sha512-3doBi5NO4IVgaNPtwewvrgPpqAcvNv0NwJNflr76PIGgi9nf1oguQV1Hpdm9TI2ALIQVn/9iIwLpBO5UcD2Jiw==",
+      "dev": true,
+      "requires": {}
+    },
     "pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
diff --git a/package.json b/package.json
index 856712784..b5b840d09 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,9 @@
     "serve": "vite preview --host",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "lint": "eslint --ext .ts,.svelte, ./src/elements",
+    "format": "npm run format-base -- --write",
+    "format-check": "npm run format-base -- --check",
+    "format-base": "prettier \"./**/*.@(js|cjs|ts|svelte|md|mdx|yml|json)\"",
     "test": "npx playwright test",
     "test-dev": "npx playwright test --debug",
     "storybook": "storybook dev -p 6006",
@@ -49,6 +52,7 @@
     "classnames": "^2.3.2",
     "element-internals-polyfill": "^1.1.17",
     "eslint": "^8.30.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
@@ -60,6 +64,8 @@
     "eslint-plugin-unicorn": "^45.0.2",
     "monaco-editor": "^0.34.1",
     "postcss": "^8.4.20",
+    "prettier": "^2.8.6",
+    "prettier-plugin-svelte": "^2.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.0.0-beta.13",
diff --git a/playground/postcss.config.cjs b/playground/postcss.config.cjs
index 08a01d4d1..ee5f90b30 100644
--- a/playground/postcss.config.cjs
+++ b/playground/postcss.config.cjs
@@ -2,4 +2,4 @@ module.exports = {
   plugins: {
     tailwindcss: {},
   },
-}
+};
diff --git a/playground/src/pages/badge-test.ts b/playground/src/pages/badge-test.ts
index c350b29a2..fc8910c79 100644
--- a/playground/src/pages/badge-test.ts
+++ b/playground/src/pages/badge-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../badge-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../badge-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/breadcrumb-test.ts b/playground/src/pages/breadcrumb-test.ts
index 9033f74ee..7a36fbede 100644
--- a/playground/src/pages/breadcrumb-test.ts
+++ b/playground/src/pages/breadcrumb-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../breadcrumb-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../breadcrumb-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/button-test.ts b/playground/src/pages/button-test.ts
index 1bfea25ac..f62e0f631 100644
--- a/playground/src/pages/button-test.ts
+++ b/playground/src/pages/button-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../button-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../button-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/code-editor-test.ts b/playground/src/pages/code-editor-test.ts
index 9a4e302fd..527cd1a58 100644
--- a/playground/src/pages/code-editor-test.ts
+++ b/playground/src/pages/code-editor-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../code-editor-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../code-editor-test.vue';
 
-createApp(App).mount('#app')
\ No newline at end of file
+createApp(App).mount('#app');
diff --git a/playground/src/pages/collapse-test.ts b/playground/src/pages/collapse-test.ts
index 8465dc8b1..bb4670d81 100644
--- a/playground/src/pages/collapse-test.ts
+++ b/playground/src/pages/collapse-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../collapse-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../collapse-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/icon-test.ts b/playground/src/pages/icon-test.ts
index e9242f8ec..57b090ae1 100644
--- a/playground/src/pages/icon-test.ts
+++ b/playground/src/pages/icon-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../icon-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../icon-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/input-test.ts b/playground/src/pages/input-test.ts
index 353dd008e..c3e8809fd 100644
--- a/playground/src/pages/input-test.ts
+++ b/playground/src/pages/input-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../input-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../input-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/list-box-test.ts b/playground/src/pages/list-box-test.ts
index 435b2c15a..949ecc161 100644
--- a/playground/src/pages/list-box-test.ts
+++ b/playground/src/pages/list-box-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../list-box-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../list-box-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/main.ts b/playground/src/pages/main.ts
index a5de9927f..b714b2cb7 100644
--- a/playground/src/pages/main.ts
+++ b/playground/src/pages/main.ts
@@ -1,7 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../App.vue'
-
-createApp(App).mount('#app')
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../App.vue';
 
+createApp(App).mount('#app');
diff --git a/playground/src/pages/modal-test.ts b/playground/src/pages/modal-test.ts
index 4496ba43f..fa200cc36 100644
--- a/playground/src/pages/modal-test.ts
+++ b/playground/src/pages/modal-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../modal-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../modal-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/multi-select-test.ts b/playground/src/pages/multi-select-test.ts
index bcd272e34..cb6217acc 100644
--- a/playground/src/pages/multi-select-test.ts
+++ b/playground/src/pages/multi-select-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../multi-select-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../multi-select-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/notify-test.ts b/playground/src/pages/notify-test.ts
index 65529d10a..1f101c8be 100644
--- a/playground/src/pages/notify-test.ts
+++ b/playground/src/pages/notify-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../notify-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../notify-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/pill-test.ts b/playground/src/pages/pill-test.ts
index 2db2620c3..a006b7d3f 100644
--- a/playground/src/pages/pill-test.ts
+++ b/playground/src/pages/pill-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../pill-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../pill-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/radio-test.ts b/playground/src/pages/radio-test.ts
index f05c669ba..ad46f5c10 100644
--- a/playground/src/pages/radio-test.ts
+++ b/playground/src/pages/radio-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../radio-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../radio-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/select-test.ts b/playground/src/pages/select-test.ts
index 4e8d19cc8..9f89c231a 100644
--- a/playground/src/pages/select-test.ts
+++ b/playground/src/pages/select-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../select-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../select-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/slider-test.ts b/playground/src/pages/slider-test.ts
index 0a30de47b..aae86d7b6 100644
--- a/playground/src/pages/slider-test.ts
+++ b/playground/src/pages/slider-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../slider-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../slider-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/switch-test.ts b/playground/src/pages/switch-test.ts
index 10e6434f8..1f9ca2cb0 100644
--- a/playground/src/pages/switch-test.ts
+++ b/playground/src/pages/switch-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../switch-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../switch-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/tabs-test.ts b/playground/src/pages/tabs-test.ts
index cc7441526..eebc41340 100644
--- a/playground/src/pages/tabs-test.ts
+++ b/playground/src/pages/tabs-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../tabs-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../tabs-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/src/pages/vector-input-test.ts b/playground/src/pages/vector-input-test.ts
index b2acb6851..68c10b1f3 100644
--- a/playground/src/pages/vector-input-test.ts
+++ b/playground/src/pages/vector-input-test.ts
@@ -1,6 +1,6 @@
-import './main.css'
-import '../../../src/main'
-import { createApp } from 'vue'
-import App from '../vector-input-test.vue'
+import './main.css';
+import '../../../src/main';
+import { createApp } from 'vue';
+import App from '../vector-input-test.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/playground/tailwind.config.cjs b/playground/tailwind.config.cjs
index 3eaefddf5..2c5fec85d 100644
--- a/playground/tailwind.config.cjs
+++ b/playground/tailwind.config.cjs
@@ -1,5 +1,5 @@
-const plugin = require('tailwindcss/plugin')
-const { theme } = require('../tailwind.config.cjs')
+const plugin = require('tailwindcss/plugin');
+const { theme } = require('../tailwind.config.cjs');
 
 module.exports = {
   content: ['./index.html', './src/**/*.{ts,vue}', '../src/**/*.{ts,svelte}'],
@@ -7,4 +7,4 @@ module.exports = {
   variants: {
     extend: {},
   },
-}
+};
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 9d8e610ca..246c7f08b 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite'
-import { fileURLToPath } from 'url'
-import vue from '@vitejs/plugin-vue'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-import sveltePreprocess from 'svelte-preprocess'
+import { defineConfig } from 'vite';
+import { fileURLToPath } from 'url';
+import vue from '@vitejs/plugin-vue';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import sveltePreprocess from 'svelte-preprocess';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -33,5 +33,5 @@ export default defineConfig({
         test: fileURLToPath(new URL('./test.html', import.meta.url)),
       },
     },
-  }
-})
+  },
+});
diff --git a/playwright.config.ts b/playwright.config.ts
index 93d5770a0..1e665f567 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -19,7 +19,7 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000
+    timeout: 5000,
   },
   /* Run tests in files in parallel */
   fullyParallel: true,
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 08a01d4d1..ee5f90b30 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -2,4 +2,4 @@ module.exports = {
   plugins: {
     tailwindcss: {},
   },
-}
+};
diff --git a/scripts/postbuild.js b/scripts/postbuild.js
index de7632ccd..2907e863d 100644
--- a/scripts/postbuild.js
+++ b/scripts/postbuild.js
@@ -1,15 +1,15 @@
-import pkg from '../package.json' assert { type: 'json' }
-import { rename, copy, write, read } from './util.js'
-import { minify } from 'terser'
+import pkg from '../package.json' assert { type: 'json' };
+import { rename, copy, write, read } from './util.js';
+import { minify } from 'terser';
 
-const { version } = pkg
+const { version } = pkg;
 
 const compress = async (file) => {
   const minified = await minify(file, {
     ecma: 2020,
     module: true,
     parse: {
-      html5_comments: false
+      html5_comments: false,
     },
     compress: {
       drop_console: true,
@@ -18,12 +18,12 @@ const compress = async (file) => {
       unsafe: true,
     },
     format: {
-      comments: false
+      comments: false,
     },
-  })
+  });
 
-  return minified.code
-}
+  return minified.code;
+};
 
 const main = async () => {
   /**
@@ -31,47 +31,51 @@ const main = async () => {
    */
 
   // Rename our stylesheets to what the web components reference
-  rename('dist/style.css', 'dist/prime.css')
+  rename('dist/style.css', 'dist/prime.css');
 
   // Add Typescript definitions to the library directory
-  copy('src/prime.d.ts', 'dist/prime.d.ts')
+  copy('src/prime.d.ts', 'dist/prime.d.ts');
 
   // Add icon resources
-  copy('public/icons.woff2', 'dist/icons.woff2')
+  copy('public/icons.woff2', 'dist/icons.woff2');
 
   // Update icons path
   {
-    const file = read('dist/prime.css')
-      .replace(/.\/icons.woff2/, 'icons.woff2')
-    write('dist/prime.css', file)
+    const file = read('dist/prime.css').replace(
+      /.\/icons.woff2/,
+      'icons.woff2'
+    );
+    write('dist/prime.css', file);
   }
 
   // Create versioned resources for consumers with cache-busting
-  copy('dist/prime.es.js', `dist/prime@${version}.es.js`)
-  copy('dist/prime.umd.js', `dist/prime@${version}.umd.js`)
-  copy('dist/prime.css', `dist/prime@${version}.css`)
-  copy('dist/icons.woff2', `dist/icons@${version}.woff2`)
+  copy('dist/prime.es.js', `dist/prime@${version}.es.js`);
+  copy('dist/prime.umd.js', `dist/prime@${version}.umd.js`);
+  copy('dist/prime.css', `dist/prime@${version}.css`);
+  copy('dist/icons.woff2', `dist/icons@${version}.woff2`);
 
   // Update paths for versioned resources
   {
-    const file = read(`dist/prime@${version}.css`)
-      .replace(/icons.woff2/, `icons@${version}.woff2'`)
-    write(`dist/prime@${version}.css`, file)
+    const file = read(`dist/prime@${version}.css`).replace(
+      /icons.woff2/,
+      `icons@${version}.woff2'`
+    );
+    write(`dist/prime@${version}.css`, file);
   }
 
   {
     const file = read(`dist/prime@${version}.es.js`)
       .replace(/"\/prime.css"/g, `"/prime@${version}.css"`)
-      .replace(/"\/icons.css"/g, `"/icons@${version}.css"`)
-    write(`dist/prime@${version}.es.js`, file)
-    write(`dist/prime@${version}.min.es.js`, await compress(file))
+      .replace(/"\/icons.css"/g, `"/icons@${version}.css"`);
+    write(`dist/prime@${version}.es.js`, file);
+    write(`dist/prime@${version}.min.es.js`, await compress(file));
   }
 
   {
     const file = read(`dist/prime@${version}.umd.js`)
       .replace(/"\/prime.css"/g, `"/prime@${version}.css"`)
-      .replace(/"\/icons.css"/g, `"/icons@${version}.css"`)
-    write(`dist/prime@${version}.umd.js`, file)
+      .replace(/"\/icons.css"/g, `"/icons@${version}.css"`);
+    write(`dist/prime@${version}.umd.js`, file);
   }
 
   /**
@@ -79,26 +83,31 @@ const main = async () => {
    */
 
   // Disable Jekyll when deploying to gh-pages
-  write('prime/.nojekyll', '')
+  write('prime/.nojekyll', '');
 
   // Move assets to the storybook directory
-  copy('dist/prime.es.js', 'prime/prime.es.js')
-  copy('dist/prime.css', 'prime/prime.css')
-  copy('dist/icons.woff2', 'prime/icons.woff2')
+  copy('dist/prime.es.js', 'prime/prime.es.js');
+  copy('dist/prime.css', 'prime/prime.css');
+  copy('dist/icons.woff2', 'prime/icons.woff2');
 
   {
     const file = read('prime/index.html')
       // Add noindex rule
-      .replace('<meta charset="utf-8"/>', '<meta charset="utf-8"/><meta name="robots" content="noindex">')
-    write('prime/index.html', file)
+      .replace(
+        '<meta charset="utf-8"/>',
+        '<meta charset="utf-8"/><meta name="robots" content="noindex">'
+      );
+    write('prime/index.html', file);
   }
 
   // Update correct paths for iframe resources
   {
-    const file = read('prime/iframe.html')
-      .replace('<script type="module" src="src/main.ts"></script>', '<script type="module" src="prime.es.js"></script>')
-    write('prime/iframe.html', file)
+    const file = read('prime/iframe.html').replace(
+      '<script type="module" src="src/main.ts"></script>',
+      '<script type="module" src="prime.es.js"></script>'
+    );
+    write('prime/iframe.html', file);
   }
-}
+};
 
-main()
+main();
diff --git a/scripts/util.js b/scripts/util.js
index fec46e1ac..2cbbc4dfd 100644
--- a/scripts/util.js
+++ b/scripts/util.js
@@ -1,8 +1,8 @@
-import fs from 'node:fs'
+import fs from 'node:fs';
 
-export const rename = (src, dest) => fs.renameSync(src, dest)
-export const copy = (src, dest) => fs.copyFileSync(src, dest)
-export const write = (path, data) => fs.writeFileSync(path, data, 'utf-8')
-export const read = (path) => fs.readFileSync(path, 'utf-8') 
-export const mkdir = (path) => fs.mkdirSync(path)
-export const readDir = (path) => fs.readdirSync(path)
+export const rename = (src, dest) => fs.renameSync(src, dest);
+export const copy = (src, dest) => fs.copyFileSync(src, dest);
+export const write = (path, data) => fs.writeFileSync(path, data, 'utf-8');
+export const read = (path) => fs.readFileSync(path, 'utf-8');
+export const mkdir = (path) => fs.mkdirSync(path);
+export const readDir = (path) => fs.readdirSync(path);
diff --git a/src/elements/badge.svelte b/src/elements/badge.svelte
index 1e6394fdd..2c32cb7c0 100644
--- a/src/elements/badge.svelte
+++ b/src/elements/badge.svelte
@@ -1,8 +1,7 @@
-<svelte:options immutable tag='v-badge' />
+<svelte:options immutable tag="v-badge" />
 
-<script lang='ts'>
-
-type Variants = 'green' | 'orange' | 'red' | 'gray'
+<script lang="ts">
+type Variants = 'green' | 'orange' | 'red' | 'gray';
 
 import cx from 'classnames';
 import { addStyles } from '../lib/index';
@@ -11,14 +10,15 @@ export let label = '';
 export let variant: Variants = 'gray';
 
 addStyles();
-
 </script>
 
-<small class={cx('inline-block rounded-full px-3 py-0.5 text-xs', {
-  'text-success-fg bg-success-bg': variant === 'green',
-  'text-warning-fg bg-warning-bg': variant === 'orange',
-  'text-danger-fg bg-danger-bg': variant === 'red',
-  'text-text-default bg-disabled-bg': variant === 'gray',
-})}>
-  { label }
+<small
+  class={cx('inline-block rounded-full px-3 py-0.5 text-xs', {
+    'text-success-fg bg-success-bg': variant === 'green',
+    'text-warning-fg bg-warning-bg': variant === 'orange',
+    'text-danger-fg bg-danger-bg': variant === 'red',
+    'text-text-default bg-disabled-bg': variant === 'gray',
+  })}
+>
+  {label}
 </small>
diff --git a/src/elements/breadcrumbs.svelte b/src/elements/breadcrumbs.svelte
index 0e506b0e8..a13275c3f 100644
--- a/src/elements/breadcrumbs.svelte
+++ b/src/elements/breadcrumbs.svelte
@@ -1,7 +1,6 @@
-<svelte:options immutable tag='v-breadcrumbs' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-breadcrumbs" />
 
+<script lang="ts">
 import { addStyles } from '../lib/index';
 
 export let crumbs = '';
@@ -11,18 +10,21 @@ addStyles();
 let parsedCrumbs: string[];
 
 $: parsedCrumbs = crumbs.split(',').map((str) => str.trim());
-
 </script>
 
 <div class="inline-flex gap-3 -ml-1 px-4 border border-gray-9 rounded-full">
   {#each parsedCrumbs as crumb, index (crumb)}
     <small class="py1">
-      { crumb }
+      {crumb}
     </small>
     {#if index !== parsedCrumbs.length - 1}
       <div>
-        <div class="w-px h-[60%] border-l border-gray-9 -rotate-[30deg] -mt-px" />
-        <div class="w-px h-[60%] border-l border-gray-9 rotate-[30deg] -mt-0.5" />
+        <div
+          class="w-px h-[60%] border-l border-gray-9 -rotate-[30deg] -mt-px"
+        />
+        <div
+          class="w-px h-[60%] border-l border-gray-9 rotate-[30deg] -mt-0.5"
+        />
       </div>
     {/if}
   {/each}
diff --git a/src/elements/button/button.svelte b/src/elements/button/button.svelte
index 2d7b38076..0fe43425f 100644
--- a/src/elements/button/button.svelte
+++ b/src/elements/button/button.svelte
@@ -1,12 +1,17 @@
-<svelte:options immutable tag='v-button-internal' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-button-internal" />
 
+<script lang="ts">
 // Added temporarily because <svelte:element> does not recognize "text" as a valid prop
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
-type Variants = 'primary' | 'inverse-primary' | 'danger' | 'outline-danger' | 'success' | 'icon'
+type Variants =
+  | 'primary'
+  | 'inverse-primary'
+  | 'danger'
+  | 'outline-danger'
+  | 'success'
+  | 'icon';
 
 import cx from 'classnames';
 import { get_current_component } from 'svelte/internal';
@@ -29,7 +34,9 @@ let isDisabled: boolean;
 $: isDisabled = htmlToBoolean(disabled, 'disabled');
 
 // @TODO switch to <svelte:this bind:this={component}> https://github.com/sveltejs/rfcs/pull/58
-const component = get_current_component() as HTMLElement & { internals: ElementInternals };
+const component = get_current_component() as HTMLElement & {
+  internals: ElementInternals;
+};
 const internals = component.attachInternals();
 
 const handleClick = () => {
@@ -45,13 +52,8 @@ const handleClick = () => {
 const handleParentClick = (event: PointerEvent) => {
   event.stopImmediatePropagation();
 };
-
 </script>
 
-<style>
-  :host { display: inline-block !important }
-</style>
-
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <svelte:element
   this={tooltip ? 'v-tooltip' : 'span'}
@@ -62,24 +64,27 @@ const handleParentClick = (event: PointerEvent) => {
     {type}
     aria-label={variant === 'icon' ? label : undefined}
     aria-disabled={isDisabled ? true : undefined}
-    title={title}
-    class={cx('will-change-transform hover:scale-105 motion-safe:transition-transform', {
-      'inline-flex items-center justify-center gap-1.5 py-1.5 px-2 text-xs border': variant !== 'icon',
-      'bg-white border-gray-9': variant === 'primary',
-      'bg-gray-9 border-gray-9 text-white': variant === 'inverse-primary',
-      'bg-danger-fg text-white border-danger-fg': variant === 'danger',
-      'bg-success-fg border-success-fg text-white': variant === 'success',
-      'bg-danger-bg border-danger-bg text-danger-fg': variant === 'outline-danger',
-      '!bg-disabled-bg border-disabled-bg text-disabled-fg pointer-events-none select-none': isDisabled,
-    })}
+    {title}
+    class={cx(
+      'will-change-transform hover:scale-105 motion-safe:transition-transform',
+      {
+        'inline-flex items-center justify-center gap-1.5 py-1.5 px-2 text-xs border':
+          variant !== 'icon',
+        'bg-white border-gray-9': variant === 'primary',
+        'bg-gray-9 border-gray-9 text-white': variant === 'inverse-primary',
+        'bg-danger-fg text-white border-danger-fg': variant === 'danger',
+        'bg-success-fg border-success-fg text-white': variant === 'success',
+        'bg-danger-bg border-danger-bg text-danger-fg':
+          variant === 'outline-danger',
+        '!bg-disabled-bg border-disabled-bg text-disabled-fg pointer-events-none select-none':
+          isDisabled,
+      }
+    )}
     style={isDisabled ? '-webkit-user-select: none' : ''}
     on:click={handleClick}
   >
     {#if icon}
-      <i
-        aria-hidden='true'
-        class='icon-{icon} text-{size}'
-      />
+      <i aria-hidden="true" class="icon-{icon} text-{size}" />
     {/if}
 
     {#if variant !== 'icon'}
@@ -88,4 +93,10 @@ const handleParentClick = (event: PointerEvent) => {
       </span>
     {/if}
   </button>
-</svelte:element>
\ No newline at end of file
+</svelte:element>
+
+<style>
+:host {
+  display: inline-block !important;
+}
+</style>
diff --git a/src/elements/button/button.ts b/src/elements/button/button.ts
index 421659dfb..c29659983 100644
--- a/src/elements/button/button.ts
+++ b/src/elements/button/button.ts
@@ -1,7 +1,7 @@
 import './button.svelte';
 
 // https://github.com/sveltejs/svelte/issues/7596
-class Button extends customElements.get('v-button-internal')! {
+class Button extends (customElements.get('v-button-internal')!) {
   static formAssociated = true;
 }
 
diff --git a/src/elements/code-editor.svelte b/src/elements/code-editor.svelte
index 45dcf58e6..b91729ab1 100644
--- a/src/elements/code-editor.svelte
+++ b/src/elements/code-editor.svelte
@@ -1,20 +1,15 @@
-<svelte:options immutable tag='v-code-editor' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-code-editor" />
 
+<script lang="ts">
 import { onMount, onDestroy } from 'svelte';
 import { get_current_component } from 'svelte/internal';
 
-import {
-  addStyles,
-  removeNewlineWhitespace,
-  monacoURL,
-} from '../lib/index';
+import { addStyles, removeNewlineWhitespace, monacoURL } from '../lib/index';
 
 import { dispatcher } from '../lib/dispatch';
 
 import type {
-  MonacoSupportedLanguages,  
+  MonacoSupportedLanguages,
   MonacoSupportedThemes,
   Monaco,
   Schema,
@@ -42,7 +37,7 @@ let isReadonly: boolean;
 let hasMinimap: boolean;
 let parsedSchema: Schema | undefined;
 
-$: parsedSchema = schema ? JSON.parse(schema) as Schema : undefined;
+$: parsedSchema = schema ? (JSON.parse(schema) as Schema) : undefined;
 $: isReadonly = htmlToBoolean(readonly, 'readonly');
 $: hasMinimap = htmlToBoolean(minimap, 'minimap');
 
@@ -55,7 +50,9 @@ const link = document.createElement('link');
 link.rel = 'stylesheet';
 link.href = `${monacoURL}/min/vs/editor/editor.main.min.css`;
 
-const component = get_current_component() as HTMLElement & { shadowRoot: ShadowRoot };
+const component = get_current_component() as HTMLElement & {
+  shadowRoot: ShadowRoot;
+};
 component.shadowRoot.append(link);
 
 const setModel = () => {
@@ -78,7 +75,7 @@ const setModel = () => {
   } else {
     model = window.monaco.editor.createModel(value, language);
   }
-  
+
   dispatch('update-model', { model });
   editor.setModel(model);
 };
@@ -215,15 +212,16 @@ $: {
     handleResize();
   }
 }
-
 </script>
 
-<style>
-:host { display: contents !important; }
-</style>
-
 <div
-  class='w-full h-full relative isolate'
+  class="w-full h-full relative isolate"
   bind:this={container}
   on:input={handleInput}
 />
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>
diff --git a/src/elements/collapse.svelte b/src/elements/collapse.svelte
index 8f73c9515..849aef480 100644
--- a/src/elements/collapse.svelte
+++ b/src/elements/collapse.svelte
@@ -1,8 +1,7 @@
-<svelte:options immutable tag='v-collapse' />
+<svelte:options immutable tag="v-collapse" />
 
-<script lang='ts'>
-
-type Variants = 'default' | 'minimal'
+<script lang="ts">
+type Variants = 'default' | 'minimal';
 
 import cx from 'classnames';
 import { addStyles } from '../lib/index';
@@ -29,45 +28,47 @@ const handleClick = (event: Event) => {
   isOpen = !isOpen;
   dispatch('toggle', { isOpen });
 };
-
 </script>
 
-<div class='relative w-full'>
+<div class="relative w-full">
   <div
-    class={cx('w-full py-2 px-4 flex flex-reverse items-center justify-between text-black cursor-pointer', {
-      'border border-black bg-white': variant === 'default',
-    })},
+    class="{cx(
+      'w-full py-2 px-4 flex flex-reverse items-center justify-between text-black cursor-pointer',
+      {
+        'border border-black bg-white': variant === 'default',
+      }
+    )},"
     on:click={handleClick}
     on:keyup|stopPropagation|preventDefault={handleClick}
   >
-    <div class='flex flex-wrap gap-x-3 gap-y-1 items-center'>
+    <div class="flex flex-wrap gap-x-3 gap-y-1 items-center">
       {#if title}
-        <h2 class='m-0 text-sm'>{title}</h2>
+        <h2 class="m-0 text-sm">{title}</h2>
       {/if}
 
-      <slot name='title' />
+      <slot name="title" />
     </div>
 
-    <div class='h-full flex items-center gap-3'>
-      <slot name='header' />
+    <div class="h-full flex items-center gap-3">
+      <slot name="header" />
 
       <v-icon
         class={cx('transition-transform duration-200', {
           'rotate-0': !isOpen,
           'rotate-180': isOpen,
         })}
-        name='chevron-down'
-        size='2xl'
+        name="chevron-down"
+        size="2xl"
       />
     </div>
   </div>
 
   <div
-    class="{cx('text-black transition-all duration-500', {
+    class={cx('text-black transition-all duration-500', {
       'bg-white': variant === 'default',
-      'hidden': !isOpen,
-    })}"
+      hidden: !isOpen,
+    })}
   >
     <slot />
   </div>
-</div> 
+</div>
diff --git a/src/elements/dropdown.svelte b/src/elements/dropdown.svelte
index 869fb7f1a..b526157b6 100644
--- a/src/elements/dropdown.svelte
+++ b/src/elements/dropdown.svelte
@@ -1,7 +1,6 @@
-<svelte:options immutable tag='v-dropdown' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-dropdown" />
 
+<script lang="ts">
 import cx from 'classnames';
 import { addStyles } from '../lib/index';
 import { dispatcher } from '../lib/dispatch';
@@ -20,31 +19,27 @@ let isOpen: boolean;
 $: isMatch = htmlToBoolean(match, 'match');
 $: isOpen = htmlToBoolean(open, 'open');
 
-
 const toggleDropdown = () => {
   dispatch('toggle', { open: !isOpen });
 };
-
 </script>
 
-<div class='relative inline-block w-full'>
+<div class="relative inline-block w-full">
   <div
-    class='inline-block w-full'
+    class="inline-block w-full"
     on:click={toggleDropdown}
     on:keyup|stopPropagation|preventDefault={toggleDropdown}
   >
-    <slot name='target'/>
+    <slot name="target" />
   </div>
-  <div 
-    class={
-      cx('absolute z-40', {
-        'left-0': isMatch,
-        'right-0': isMatch,
-        'overflow-hidden': isMatch,
-        invisible: !isOpen,
-      }
-    )}
+  <div
+    class={cx('absolute z-40', {
+      'left-0': isMatch,
+      'right-0': isMatch,
+      'overflow-hidden': isMatch,
+      invisible: !isOpen,
+    })}
   >
-    <slot name='content' />
+    <slot name="content" />
   </div>
 </div>
diff --git a/src/elements/icon.svelte b/src/elements/icon.svelte
index 7b2089129..061e48e30 100644
--- a/src/elements/icon.svelte
+++ b/src/elements/icon.svelte
@@ -1,8 +1,7 @@
-<svelte:options immutable tag='v-icon' />
+<svelte:options immutable tag="v-icon" />
 
-<script lang='ts'>
-
-type Size = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl'| '3xl'| '4xl'
+<script lang="ts">
+type Size = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
 
 import cx from 'classnames';
 import { addStyles } from '../lib/index';
@@ -11,11 +10,10 @@ export let name = '';
 export let size: Size = 'base';
 
 addStyles();
-
 </script>
 
 <i
-  aria-hidden='true'
+  aria-hidden="true"
   class={cx(`icon-${name} block`, {
     'text-xs': size === 'xs',
     'text-sm': size === 'sm',
diff --git a/src/elements/input/input.svelte b/src/elements/input/input.svelte
index 3122c5548..cd8e77589 100644
--- a/src/elements/input/input.svelte
+++ b/src/elements/input/input.svelte
@@ -1,9 +1,15 @@
-<svelte:options immutable tag='v-input-internal' />
-
-<script lang='ts'>
-
-type LabelPosition = 'top' | 'left'
-type Types = 'text' | 'email' | 'number' | 'integer' | 'time' | 'date' | 'datetime-local'
+<svelte:options immutable tag="v-input-internal" />
+
+<script lang="ts">
+type LabelPosition = 'top' | 'left';
+type Types =
+  | 'text'
+  | 'email'
+  | 'number'
+  | 'integer'
+  | 'time'
+  | 'date'
+  | 'datetime-local';
 
 import cx from 'classnames';
 import { tick } from 'svelte';
@@ -26,7 +32,7 @@ export let min = '-Infinity';
 export let max = '+Infinity';
 export let labelposition: LabelPosition = 'top';
 export let tooltip = '';
-export let state: 'info' | 'warn' | 'error'| 'success' | '' = 'info';
+export let state: 'info' | 'warn' | 'error' | 'success' | '' = 'info';
 export let message: '';
 export let incrementor: 'buttons' | 'slider' | 'none' = 'none';
 
@@ -35,7 +41,9 @@ const dispatch = dispatcher();
 addStyles();
 
 // @TODO switch to <svelte:this bind:this={component}> https://github.com/sveltejs/rfcs/pull/58
-const component = get_current_component() as HTMLElement & { internals: ElementInternals };
+const component = get_current_component() as HTMLElement & {
+  internals: ElementInternals;
+};
 const internals = component.attachInternals();
 
 let input: HTMLInputElement;
@@ -100,10 +108,16 @@ const handleInput = () => {
     prevNumberValue = value;
 
     // only allow number-related characters to be typed
-    value = input.value = input.value.replaceAll(new RegExp(/[^\d+.e-]/i, 'g'), '');
+    value = input.value = input.value.replaceAll(
+      new RegExp(/[^\d+.e-]/i, 'g'),
+      ''
+    );
 
     // only set and send value if valid, and different from previous value
-    if (Number.isNaN(Number(value)) || Number(prevNumberValue) === Number(value)) {
+    if (
+      Number.isNaN(Number(value)) ||
+      Number(prevNumberValue) === Number(value)
+    ) {
       return;
     }
   } else {
@@ -118,7 +132,10 @@ const handleBlur = () => {
 };
 
 const getDecimals = (value = '') => {
-  return Math.max(value.includes('.') ? value.length - value.indexOf('.') - 1 : 0, stepDecimalDigits);
+  return Math.max(
+    value.includes('.') ? value.length - value.indexOf('.') - 1 : 0,
+    stepDecimalDigits
+  );
 };
 
 const handleKeydown = (event: KeyboardEvent) => {
@@ -133,9 +150,13 @@ const handleKeydown = (event: KeyboardEvent) => {
   const x = Number.parseFloat(input.value || '0');
 
   if (key === 'arrowup') {
-    value = (x + stepNumber).toFixed(type === 'integer' ? 0 : getDecimals(input.value));
+    value = (x + stepNumber).toFixed(
+      type === 'integer' ? 0 : getDecimals(input.value)
+    );
   } else if (key === 'arrowdown') {
-    value = (x - stepNumber).toFixed(type === 'integer' ? 0 : getDecimals(input.value));
+    value = (x - stepNumber).toFixed(
+      type === 'integer' ? 0 : getDecimals(input.value)
+    );
   }
 
   input.value = value;
@@ -147,9 +168,16 @@ const handleKeydown = (event: KeyboardEvent) => {
 
 const handleNumberDragMove = (event: PointerEvent) => {
   const x = event.clientX;
-  const deltaString = (-(startX - x) * stepNumber / 10).toFixed(type === 'integer' ? 0 : stepDecimalDigits);
-  const delta = type === 'integer' ? Number.parseInt(deltaString, 10) : Number.parseFloat(deltaString);
-  value = input.value = (startValue + (delta * stepNumber)).toFixed(getDecimals(input.value));
+  const deltaString = ((-(startX - x) * stepNumber) / 10).toFixed(
+    type === 'integer' ? 0 : stepDecimalDigits
+  );
+  const delta =
+    type === 'integer'
+      ? Number.parseInt(deltaString, 10)
+      : Number.parseFloat(deltaString);
+  value = input.value = (startValue + delta * stepNumber).toFixed(
+    getDecimals(input.value)
+  );
 
   const valueNum = Number.parseFloat(value);
 
@@ -207,7 +235,6 @@ const handleNumberDragDown = async (event: PointerEvent) => {
   window.addEventListener('pointermove', handleNumberDragMove);
   window.addEventListener('pointerup', handleNumberDragUp, { once: true });
 };
-
 </script>
 
 <label
@@ -216,24 +243,28 @@ const handleNumberDragDown = async (event: PointerEvent) => {
     'items-center': labelposition === 'left',
   })}
 >
-  <div class='flex items-center gap-1.5'>
+  <div class="flex items-center gap-1.5">
     {#if label}
-      <p class={cx('text-xs capitalize', {
-        'inline whitespace-nowrap': labelposition === 'left',
-        'text-text-disabled-fg pointer-events-none': isDisabled,
-        'after:text-danger-fg after:content-["*"] after:ml-1': isRequired,
-      })}>
+      <p
+        class={cx('text-xs capitalize', {
+          'inline whitespace-nowrap': labelposition === 'left',
+          'text-text-disabled-fg pointer-events-none': isDisabled,
+          'after:text-danger-fg after:content-["*"] after:ml-1': isRequired,
+        })}
+      >
         {label}
       </p>
     {/if}
 
     {#if tooltip}
       <v-tooltip text={tooltip}>
-        <div class={cx({
-          'icon-info-outline text-gray-6': state === 'info',
-          'icon-error-outline text-warning-fg': state === 'warn',
-          'icon-error-outline text-danger-fg': state === 'error',
-        })} />
+        <div
+          class={cx({
+            'icon-info-outline text-gray-6': state === 'info',
+            'icon-error-outline text-warning-fg': state === 'warn',
+            'icon-error-outline text-danger-fg': state === 'error',
+          })}
+        />
       </v-tooltip>
     {/if}
   </div>
@@ -245,17 +276,21 @@ const handleNumberDragDown = async (event: PointerEvent) => {
     {value}
     inputmode={isNumeric ? 'numeric' : undefined}
     pattern={inputPattern}
-    readonly={(isDisabled || isReadonly) ? true : undefined}
-    required={(isRequired) ? true : undefined}
+    readonly={isDisabled || isReadonly ? true : undefined}
+    required={isRequired ? true : undefined}
     aria-disabled={isDisabled ? true : undefined}
     bind:this={input}
-    class={cx('w-full py-1.5 pr-2.5 leading-tight text-xs h-[30px] border outline-none appearance-none', {
-      'pl-2.5': isNumeric === false,
-      'pl-3': isNumeric,
-      'bg-white border-gray-8': !isDisabled && !isInvalidNumericInput,
-      'pointer-events-none bg-disabled-bg text-disabled-fg border-disabled-bg': isDisabled || isDragging || isReadonly,
-      'border-danger-fg border': state === 'error' || isInvalidNumericInput,
-    })}
+    class={cx(
+      'w-full py-1.5 pr-2.5 leading-tight text-xs h-[30px] border outline-none appearance-none',
+      {
+        'pl-2.5': isNumeric === false,
+        'pl-3': isNumeric,
+        'bg-white border-gray-8': !isDisabled && !isInvalidNumericInput,
+        'pointer-events-none bg-disabled-bg text-disabled-fg border-disabled-bg':
+          isDisabled || isDragging || isReadonly,
+        'border-danger-fg border': state === 'error' || isInvalidNumericInput,
+      }
+    )}
     step={insertStepAttribute ? step : null}
     on:input|preventDefault|stopPropagation={handleInput}
     on:keydown={isNumeric ? handleKeydown : undefined}
@@ -264,26 +299,26 @@ const handleNumberDragDown = async (event: PointerEvent) => {
 
   {#if incrementor === 'slider' && isNumeric}
     <div
-      class='absolute left-[0.2rem] bottom-[3px] h-[24px] w-1 z-50 bg-gray-400 hover:bg-gray-700 cursor-pointer'
+      class="absolute left-[0.2rem] bottom-[3px] h-[24px] w-1 z-50 bg-gray-400 hover:bg-gray-700 cursor-pointer"
       on:pointerdown={handleNumberDragDown}
     >
       {#if isDragging}
         <div
           bind:this={numberDragCord}
-          class='h-px bg-gray-400 mt-[calc(13px)] pointer-events-none'
+          class="h-px bg-gray-400 mt-[calc(13px)] pointer-events-none"
         />
         <div
           bind:this={numberDragHead}
-          class='pointer-events-none -mt-[5px] -ml-[2px]'
+          class="pointer-events-none -mt-[5px] -ml-[2px]"
         >
-          <div class='h-2 w-2'>
+          <div class="h-2 w-2">
             <v-tooltip
               bind:this={numberDragTooltip}
-              state='visible'
-              minwidth='auto'
+              state="visible"
+              minwidth="auto"
               text={value}
             >
-              <div class='h-2 w-2 bg-gray-800 rounded-full ' />
+              <div class="h-2 w-2 bg-gray-800 rounded-full " />
             </v-tooltip>
           </div>
         </div>
@@ -292,24 +327,24 @@ const handleNumberDragDown = async (event: PointerEvent) => {
   {/if}
 
   {#if message}
-    <span class={cx('text-xs', {
-      'text-red-600': state === 'error',
-    })}>
+    <span
+      class={cx('text-xs', {
+        'text-red-600': state === 'error',
+      })}
+    >
       {message}
     </span>
   {/if}
 </label>
 
 <style>
-
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-input[type=number] {
-  -moz-appearance:textfield;
+input[type='number'] {
+  -moz-appearance: textfield;
 }
-
 </style>
diff --git a/src/elements/input/input.ts b/src/elements/input/input.ts
index 1150fbf8e..0996c2f90 100644
--- a/src/elements/input/input.ts
+++ b/src/elements/input/input.ts
@@ -1,7 +1,7 @@
 import './input.svelte';
 
 // https://github.com/sveltejs/svelte/issues/7596
-class Input extends customElements.get('v-input-internal')! {
+class Input extends (customElements.get('v-input-internal')!) {
   static formAssociated = true;
 }
 
diff --git a/src/elements/list-box.svelte b/src/elements/list-box.svelte
index c4277ed4a..344ee4d00 100644
--- a/src/elements/list-box.svelte
+++ b/src/elements/list-box.svelte
@@ -1,6 +1,6 @@
-<svelte:options immutable tag='v-list-box' />
+<svelte:options immutable tag="v-list-box" />
 
-<script lang='ts'>
+<script lang="ts">
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 // disabled to pass untyped object to cx library in template
 
@@ -13,9 +13,9 @@ import { htmlToBoolean } from '../lib/boolean';
 
 export let disabled: string;
 export let left = '';
-export let right = ''; 
-export let leftlabel = ''; 
-export let rightlabel = ''; 
+export let right = '';
+export let leftlabel = '';
+export let rightlabel = '';
 export let height = '200px';
 export let suffix = '';
 
@@ -24,15 +24,15 @@ const dispatch = dispatcher();
 type ListBoxSide = 'left' | 'right';
 
 type ListBoxOption = {
-  value: string
-  selected: boolean
-  suffix?: string
-}
+  value: string;
+  selected: boolean;
+  suffix?: string;
+};
 
 type Options = {
-  left: ListBoxOption[]
-  right: ListBoxOption[]
-}
+  left: ListBoxOption[];
+  right: ListBoxOption[];
+};
 
 const LEFT = 'left';
 const RIGHT = 'right';
@@ -44,7 +44,6 @@ let displaySuffix = htmlToBoolean(suffix, 'suffix');
 $: isDisabled = htmlToBoolean(disabled, 'disabled');
 $: displaySuffix = htmlToBoolean(suffix, 'suffix');
 
-
 const generateOption = (initial: string): ListBoxOption => {
   if (displaySuffix) {
     const split = initial.split(' ');
@@ -59,29 +58,30 @@ let options = {
   right: right ? right.split(',').map((val) => generateOption(val)) : [],
 };
 
-
 // when new values are added, we want to update the state of options to include those values
 const addNewData = () => {
   const allValues = new Set([
-    ...options.left.map(opt => opt.value),
-    ...options.right.map(opt => opt.value),
+    ...options.left.map((opt) => opt.value),
+    ...options.right.map((opt) => opt.value),
   ]);
-  const newLeftOptions = left 
-    ? left.split(',')
-      .map((val) => generateOption(val))
-      .filter((opt) => !allValues.has(opt.value))
+  const newLeftOptions = left
+    ? left
+        .split(',')
+        .map((val) => generateOption(val))
+        .filter((opt) => !allValues.has(opt.value))
     : [];
-  const newRightOptions = right 
-    ? right.split(',')
-      .map((val) => generateOption(val))
-      .filter((opt) => !allValues.has(opt.value))
+  const newRightOptions = right
+    ? right
+        .split(',')
+        .map((val) => generateOption(val))
+        .filter((opt) => !allValues.has(opt.value))
     : [];
 
   const newOptions = {
     left: [...options.left, ...newLeftOptions],
     right: [...options.right, ...newRightOptions],
   };
-  
+
   options = newOptions;
 };
 
@@ -108,7 +108,7 @@ const handleMoveClick = (target: ListBoxSide) => {
     left: [],
     right: [],
   };
-  
+
   for (const option of options[source]) {
     if (option.selected) {
       newOptions[target].push({ ...option, selected: false });
@@ -121,29 +121,42 @@ const handleMoveClick = (target: ListBoxSide) => {
   options[target] = [...options[target], ...newOptions[target]];
   options = { ...options };
 
-  // copy object to avoid any potential pass-by-reference issues 
-  dispatch('move', {  
+  // copy object to avoid any potential pass-by-reference issues
+  dispatch('move', {
     options: JSON.parse(JSON.stringify(options)) as Options,
   });
 };
-
 </script>
+
 <div
-  class={cx('w-full grid grid-cols-[1fr_32px_1fr] gap-8 items-center p-2', { '!text-black/50': isDisabled })}
+  class={cx('w-full grid grid-cols-[1fr_32px_1fr] gap-8 items-center p-2', {
+    '!text-black/50': isDisabled,
+  })}
 >
-  <div class="w-full flex flex-col gap-2 self-stretch" style={`height: ${height};`}>
-    <span class="text-xs text-text/subtle-1">{ leftlabel }</span>
-    <div class="border border-borders/border-2 grow p-2 bg-white flex flex-col overflow-auto">
-      {#if options.left.length > 0 }
-       {#each options.left as option}
+  <div
+    class="w-full flex flex-col gap-2 self-stretch"
+    style={`height: ${height};`}
+  >
+    <span class="text-xs text-text/subtle-1">{leftlabel}</span>
+    <div
+      class="border border-borders/border-2 grow p-2 bg-white flex flex-col overflow-auto"
+    >
+      {#if options.left.length > 0}
+        {#each options.left as option}
           <button
-            class={cx('flex items-center px-2 py text-sm', { 'bg-focus/highlight': option.selected })}
+            class={cx('flex items-center px-2 py text-sm', {
+              'bg-focus/highlight': option.selected,
+            })}
             on:click={() => handleOptionClick(option, LEFT)}
-          > 
-            <input type='checkbox' checked={option.selected} disabled={isDisabled}/>       
-            <span class="px-4">{ option.value }</span>
+          >
+            <input
+              type="checkbox"
+              checked={option.selected}
+              disabled={isDisabled}
+            />
+            <span class="px-4">{option.value}</span>
             {#if displaySuffix && option.suffix}
-              <span class="text-text/subtle-2" >{option.suffix}</span>
+              <span class="text-text/subtle-2">{option.suffix}</span>
             {/if}
           </button>
         {/each}
@@ -154,46 +167,55 @@ const handleMoveClick = (target: ListBoxSide) => {
   </div>
   <div class="flex flex-col gap-4">
     <button
-      class={cx('rotate-90 border border-black h-8 w-8 flex items-center justify-center cursor-pointer hover:scale-105 bg-white',
+      class={cx(
+        'rotate-90 border border-black h-8 w-8 flex items-center justify-center cursor-pointer hover:scale-105 bg-white',
         { 'border-black/50': isDisabled }
       )}
       data-testid="move-right"
       on:click={() => handleMoveClick(RIGHT)}
-      >
-      <i
-        class="icon-arrow-up"
-      />
+    >
+      <i class="icon-arrow-up" />
     </button>
     <button
-    class={cx('-rotate-90 border border-black h-8 w-8 flex items-center justify-center cursor-pointer hover:scale-105 bg-white',
+      class={cx(
+        '-rotate-90 border border-black h-8 w-8 flex items-center justify-center cursor-pointer hover:scale-105 bg-white',
         { 'border-black/50': isDisabled }
       )}
       on:click={() => handleMoveClick(LEFT)}
       data-testid="move-left"
     >
-      <i
-        class="icon-arrow-up"
-      />
+      <i class="icon-arrow-up" />
     </button>
   </div>
-  <div class="w-full flex flex-col gap-2 self-stretch" style={`height: ${height};`}>
-    <span class="text-xs text-text/subtle-1">{ rightlabel }</span>
-    <div class="border border-borders/border-2 grow p-2 bg-white flex flex-col overflow-auto"> 
-      {#if options.right.length > 0 }
+  <div
+    class="w-full flex flex-col gap-2 self-stretch"
+    style={`height: ${height};`}
+  >
+    <span class="text-xs text-text/subtle-1">{rightlabel}</span>
+    <div
+      class="border border-borders/border-2 grow p-2 bg-white flex flex-col overflow-auto"
+    >
+      {#if options.right.length > 0}
         {#each options.right as option}
           <button
-            class={cx('flex items-center px-2 py text-sm', { 'bg-focus/highlight': option.selected })}
+            class={cx('flex items-center px-2 py text-sm', {
+              'bg-focus/highlight': option.selected,
+            })}
             on:click={() => handleOptionClick(option, RIGHT)}
           >
-            <input type='checkbox' checked={option.selected} disabled={isDisabled}/>       
-            <span class="px-4">{ option.value }</span>
+            <input
+              type="checkbox"
+              checked={option.selected}
+              disabled={isDisabled}
+            />
+            <span class="px-4">{option.value}</span>
             {#if displaySuffix && option.suffix}
-              <span class="text-text/subtle-2" >{option.suffix}</span>
+              <span class="text-text/subtle-2">{option.suffix}</span>
             {/if}
           </button>
         {/each}
       {:else}
-        <slot name="right-empty"/> 
+        <slot name="right-empty" />
       {/if}
     </div>
   </div>
diff --git a/src/elements/modal.svelte b/src/elements/modal.svelte
index 440c60870..035885db0 100644
--- a/src/elements/modal.svelte
+++ b/src/elements/modal.svelte
@@ -1,7 +1,6 @@
-<svelte:options immutable tag='v-modal' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-modal" />
 
+<script lang="ts">
 import cx from 'classnames';
 import { addStyles } from '../lib/index';
 import { htmlToBoolean } from '../lib/boolean';
@@ -21,26 +20,23 @@ let isOpen: boolean;
 $: isOpen = htmlToBoolean(open, 'open');
 
 const handleClose = (event: MouseEvent | KeyboardEvent) => {
-  if (
-    event instanceof KeyboardEvent &&
-    !checkKeyboardEvent(event, ['Enter'])
-  ) {
+  if (event instanceof KeyboardEvent && !checkKeyboardEvent(event, ['Enter'])) {
     return;
   }
 
   dispatch('close');
 };
-
 </script>
 
 <!-- 
   In order to make the overlay keyboard navigable for the keyup behavior we need to apply a tab index to this div.
   svelte-ignore a11y-no-noninteractive-tabindex 
 -->
-<div 
-  class={
-    cx('z-50 bg-gray-2 bg-opacity-25 w-full h-full fixed top-0 left-0 flex justify-center items-center', {
-      'invisible': !isOpen,
+<div
+  class={cx(
+    'z-50 bg-gray-2 bg-opacity-25 w-full h-full fixed top-0 left-0 flex justify-center items-center',
+    {
+      invisible: !isOpen,
     }
   )}
   tabindex="0"
@@ -48,35 +44,32 @@ const handleClose = (event: MouseEvent | KeyboardEvent) => {
   on:click={handleClose}
   on:keyup|stopPropagation|preventDefault={handleClose}
 >
-  <div 
-    class='w-[400px] relative border border-gray-9 bg-white m-2 p-4 max-w-lg shadow-solid4'
+  <div
+    class="w-[400px] relative border border-gray-9 bg-white m-2 p-4 max-w-lg shadow-solid4"
     on:click|stopPropagation
     on:keyup|stopPropagation
   >
-    <button 
+    <button
       class="absolute right-0 top-0 p-3 hover:scale-110 transition-transform text-gray-500 hover:text-gray-9"
-      aria-label='Cancel'
+      aria-label="Cancel"
       on:click={handleClose}
     >
-      <v-icon
-        name='x'
-        size='2xl'
-      />
+      <v-icon name="x" size="2xl" />
     </button>
 
     <figure>
-      <figcaption class='mb-2 pr-12 text-2xl font-bold'>
+      <figcaption class="mb-2 pr-12 text-2xl font-bold">
         {title}
       </figcaption>
-      
+
       {#if message}
-        <p class='mb-8 text-base'>{message}</p>
+        <p class="mb-8 text-base">{message}</p>
       {/if}
 
       <slot />
 
-      <div class='flex flex-row-reverse'>
-        <slot name='action' />
+      <div class="flex flex-row-reverse">
+        <slot name="action" />
       </div>
     </figure>
   </div>
diff --git a/src/elements/notify.svelte b/src/elements/notify.svelte
index e749f8dd5..e77a1ffd0 100644
--- a/src/elements/notify.svelte
+++ b/src/elements/notify.svelte
@@ -1,7 +1,6 @@
-<svelte:options immutable tag='v-notify' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-notify" />
 
+<script lang="ts">
 type Variants = 'error' | 'warning' | 'success' | 'info';
 
 import cx from 'classnames';
@@ -13,7 +12,6 @@ export let variant: Variants = 'info';
 export let background: 'gray' | 'white' = 'gray';
 
 addStyles();
-
 </script>
 
 <div
@@ -27,34 +25,34 @@ addStyles();
   })}
 >
   {#if variant === 'error'}
-    <v-icon class='mt-0.5 text-danger-fg' name='error-outline' />
+    <v-icon class="mt-0.5 text-danger-fg" name="error-outline" />
   {:else if variant === 'info'}
-    <v-icon class='mt-0.5 text-info-fg' name='info-outline' />
+    <v-icon class="mt-0.5 text-info-fg" name="info-outline" />
   {:else if variant === 'success'}
-    <v-icon class='mt-0.5 text-success-fg' name='checkmark' />
+    <v-icon class="mt-0.5 text-success-fg" name="checkmark" />
   {/if}
 
   {#if variant === 'warning'}
-  <svg
-    width='14'
-    height='14'
-    viewBox='0 0 15 15'
-    fill='none'
-    class='mt-1 fill-warning-fg'
-  >
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 15 15"
+      fill="none"
+      class="mt-1 fill-warning-fg"
+    >
       <path
-        d='M8 2.99333L13.02 11.6667H2.98L8 2.99333ZM8 0.333328L0.666672 13H15.3333L8 0.333328ZM8.66667 9.66666H7.33334V11H8.66667V9.66666ZM8.66667 5.66666H7.33334V8.33333H8.66667V5.66666Z'
+        d="M8 2.99333L13.02 11.6667H2.98L8 2.99333ZM8 0.333328L0.666672 13H15.3333L8 0.333328ZM8.66667 9.66666H7.33334V11H8.66667V9.66666ZM8.66667 5.66666H7.33334V8.33333H8.66667V5.66666Z"
       />
-  </svg>
+    </svg>
   {/if}
 
   <figure>
-    <figcaption class='text-sm'>{title}</figcaption>
-    
+    <figcaption class="text-sm">{title}</figcaption>
+
     {#if message}
-      <p class='text-xs'>{message}</p>
+      <p class="text-xs">{message}</p>
     {/if}
 
-    <slot/>
+    <slot />
   </figure>
 </div>
diff --git a/src/elements/pill.svelte b/src/elements/pill.svelte
index 4cd5ea0ea..d4e3e09c8 100644
--- a/src/elements/pill.svelte
+++ b/src/elements/pill.svelte
@@ -29,10 +29,7 @@ const handleRemove = (event: MouseEvent | KeyboardEvent) => {
     return;
   }
 
-  if (
-    event instanceof KeyboardEvent &&
-    !checkKeyboardEvent(event, ['Enter'])
-  ) {
+  if (event instanceof KeyboardEvent && !checkKeyboardEvent(event, ['Enter'])) {
     return;
   }
 
@@ -41,21 +38,22 @@ const handleRemove = (event: MouseEvent | KeyboardEvent) => {
 </script>
 
 <div
-class={cx(
-  'flex items-center max-w-fit gap-1 rounded-xl bg-bg-3 py-0.5 px-2 text-[10px] hover:bg-gray-3',
-  {
-    'bg-disabled-bg text-disabled-fg cursor-not-allowed': isDisabled || isReadonly,
-  }
-)}
-aria-disabled={isDisabled}
-aria-readonly={isReadonly}
+  class={cx(
+    'flex items-center max-w-fit gap-1 rounded-xl bg-bg-3 py-0.5 px-2 text-[10px] hover:bg-gray-3',
+    {
+      'bg-disabled-bg text-disabled-fg cursor-not-allowed':
+        isDisabled || isReadonly,
+    }
+  )}
+  aria-disabled={isDisabled}
+  aria-readonly={isReadonly}
 >
-<span>
-  {value}
-</span>
-{#if isRemovable}
-  <button on:click={handleRemove} on:keydown={handleRemove}>
-    <v-icon name="x" />
-  </button>
-{/if}
+  <span>
+    {value}
+  </span>
+  {#if isRemovable}
+    <button on:click={handleRemove} on:keydown={handleRemove}>
+      <v-icon name="x" />
+    </button>
+  {/if}
 </div>
diff --git a/src/elements/radio.svelte b/src/elements/radio.svelte
index f40596fd8..9778623e1 100644
--- a/src/elements/radio.svelte
+++ b/src/elements/radio.svelte
@@ -1,8 +1,7 @@
-<svelte:options immutable tag='v-radio' />
+<svelte:options immutable tag="v-radio" />
 
-<script lang='ts'>
-
-type LabelPosition = 'top' | 'left'
+<script lang="ts">
+type LabelPosition = 'top' | 'left';
 
 import cx from 'classnames';
 import { addStyles } from '../lib/index';
@@ -32,30 +31,35 @@ const handleClick = (value: string) => {
     dispatch('input', { value });
   }
 };
-
 </script>
 
 <!-- svelte-ignore a11y-label-has-associated-control -->
-<label class={cx('flex gap-1.5', {
-  'flex-col': labelposition === 'top',
-  'flex-row': labelposition === 'left',
-})}>
-  <div class='flex items-center gap-1.5'>
+<label
+  class={cx('flex gap-1.5', {
+    'flex-col': labelposition === 'top',
+    'flex-row': labelposition === 'left',
+  })}
+>
+  <div class="flex items-center gap-1.5">
     {#if label}
-      <p class={cx('text-xs', {
-        'text-black/50': isReadonly,
-      })}>
+      <p
+        class={cx('text-xs', {
+          'text-black/50': isReadonly,
+        })}
+      >
         {label}
       </p>
     {/if}
 
     {#if tooltip}
       <v-tooltip text={tooltip}>
-        <div class={cx({
-          'icon-info-outline': state === 'info',
-          'icon-error-outline text-warning-fg': state === 'warn',
-          'icon-error-outline text-danger-fg': state === 'error',
-        })} />
+        <div
+          class={cx({
+            'icon-info-outline': state === 'info',
+            'icon-error-outline text-warning-fg': state === 'warn',
+            'icon-error-outline text-danger-fg': state === 'error',
+          })}
+        />
       </v-tooltip>
     {/if}
   </div>
@@ -63,29 +67,29 @@ const handleClick = (value: string) => {
   <div class="flex flex-nowrap">
     {#each parsedOptions as option}
       <button
-        class={cx('whitespace-nowrap capitalize border-y border-l last:border-r border-gray-9 px-2 py-1 text-xs', {
-          'bg-white': option !== selected,
-          'bg-gray-9 text-white font-bold': ((option === selected) && !isReadonly),
-          'bg-disabled-fg text-white font-bold': ((option === selected) && isReadonly),
-          'border-disabled-fg text-disabled-fg': isReadonly,
-          'cursor-not-allowed pointer-events-none': isReadonly,
-        })}
+        class={cx(
+          'whitespace-nowrap capitalize border-y border-l last:border-r border-gray-9 px-2 py-1 text-xs',
+          {
+            'bg-white': option !== selected,
+            'bg-gray-9 text-white font-bold':
+              option === selected && !isReadonly,
+            'bg-disabled-fg text-white font-bold':
+              option === selected && isReadonly,
+            'border-disabled-fg text-disabled-fg': isReadonly,
+            'cursor-not-allowed pointer-events-none': isReadonly,
+          }
+        )}
         on:click={() => handleClick(option)}
       >
         {#if option === selected}
           <div class="flex">
-            <v-icon
-              class='mr-1'
-              name='checkmark'
-              size='base'
-            />
+            <v-icon class="mr-1" name="checkmark" size="base" />
             {option}
           </div>
         {:else}
           {option}
         {/if}
-    </button>
+      </button>
     {/each}
   </div>
-  
 </label>
diff --git a/src/elements/select/multiselect.svelte b/src/elements/select/multiselect.svelte
index 53ad1c738..8eec5bdd5 100644
--- a/src/elements/select/multiselect.svelte
+++ b/src/elements/select/multiselect.svelte
@@ -1,8 +1,7 @@
-<svelte:options immutable tag='v-multiselect' />
+<svelte:options immutable tag="v-multiselect" />
 
-<script lang='ts'>
-
-type LabelPosition = 'top' | 'left'
+<script lang="ts">
+type LabelPosition = 'top' | 'left';
 
 import cx from 'classnames';
 import { searchSort } from '../../lib/sort';
@@ -11,7 +10,6 @@ import { addStyles } from '../../lib/index';
 import { dispatcher } from '../../lib/dispatch';
 import * as utils from './utils';
 
-
 export let options = '';
 export let value = '';
 export let placeholder = '';
@@ -51,7 +49,6 @@ let parsedSelected: string[];
 let sortedOptions: string[];
 let searchedOptions: { option: string; search?: string[] }[];
 
-
 $: isDisabled = htmlToBoolean(disabled, 'disabled');
 $: isReadonly = htmlToBoolean(readonly, 'readonly');
 $: hasPrefix = htmlToBoolean(prefix, 'prefix');
@@ -61,10 +58,16 @@ $: hasButton = htmlToBoolean(withbutton, 'withbutton');
 $: isReduceSort = sortoption === 'reduce';
 $: doesSearch = sortoption !== 'off';
 $: parsedOptions = options.split(',').map((str) => str.trim());
-$: parsedSelected = value.split(',').filter(Boolean).map((str) => str.trim());
-$: sortedOptions = doesSearch ? applySearchSort(searchterm, parsedOptions) : reduceEmptyOptions(parsedOptions);
-$: searchedOptions = doesSearch ? utils.applySearchHighlight(sortedOptions, searchterm) :
-  utils.applySearchHighlight(sortedOptions, '');
+$: parsedSelected = value
+  .split(',')
+  .filter(Boolean)
+  .map((str) => str.trim());
+$: sortedOptions = doesSearch
+  ? applySearchSort(searchterm, parsedOptions)
+  : reduceEmptyOptions(parsedOptions);
+$: searchedOptions = doesSearch
+  ? utils.applySearchHighlight(sortedOptions, searchterm)
+  : utils.applySearchHighlight(sortedOptions, '');
 
 let open = false;
 let navigationIndex = -1;
@@ -101,17 +104,23 @@ const handleKeyUp = (event: KeyboardEvent) => {
   setKeyboardControl(true);
 
   switch (event.key.toLowerCase()) {
-    case 'enter': return handleEnter();
-    case 'arrowup': return handleNavigate(-1);
-    case 'arrowdown': return handleNavigate(+1);
-    case 'escape': return handleEscape();
+    case 'enter':
+      return handleEnter();
+    case 'arrowup':
+      return handleNavigate(-1);
+    case 'arrowdown':
+      return handleNavigate(+1);
+    case 'escape':
+      return handleEscape();
   }
 };
 
 const handleEnter = () => {
   if (navigationIndex === -1) {
     // if user hits enter when focused on the search input
-    const match = sortedOptions.find((opt) => opt.toLowerCase() === searchterm.toLowerCase());
+    const match = sortedOptions.find(
+      (opt) => opt.toLowerCase() === searchterm.toLowerCase()
+    );
     if (match) {
       handleChange(match);
     } else {
@@ -126,7 +135,7 @@ const handleEnter = () => {
 
 const handleChange = (changedOption: string) => {
   if (parsedSelected.includes(changedOption)) {
-    const newValue = parsedSelected.filter(item => item !== changedOption);
+    const newValue = parsedSelected.filter((item) => item !== changedOption);
     value = newValue.toString();
     dispatch('input', { value, values: newValue, removed: changedOption });
   } else {
@@ -137,7 +146,6 @@ const handleChange = (changedOption: string) => {
   input.focus();
 };
 
-
 const handleNavigate = (direction: number) => {
   navigationIndex += direction;
 
@@ -204,7 +212,7 @@ const handleOptionMouseEnter = (index: number) => {
 
 const handleOptionSelect = (target: string, event: Event) => {
   const targetElement = event.target as HTMLInputElement;
-  const { checked } = (targetElement);
+  const { checked } = targetElement;
   // cannot suppress checkbox check
   if (targetElement.checked) {
     targetElement.checked = !checked;
@@ -245,7 +253,6 @@ $: {
     dispatch('close');
   }
 }
-
 </script>
 
 <!-- svelte-ignore a11y-label-has-associated-control -->
@@ -257,162 +264,186 @@ $: {
       'flex-col': labelposition === 'top',
       'items-center': labelposition === 'left',
     })}
-    tabindex='-1'
+    tabindex="-1"
     on:focusin={handleFocus}
     on:focusout={handleFocusOut}
     on:mousemove={() => setKeyboardControl(false)}
   >
-    <div class='flex items-center gap-1.5'>
+    <div class="flex items-center gap-1.5">
       {#if label}
-        <p class={cx('text-xs capitalize', {
-          'text-black/50': isDisabled || isReadonly,
-          'inline whitespace-nowrap': labelposition === 'left',
-        })}>
+        <p
+          class={cx('text-xs capitalize', {
+            'text-black/50': isDisabled || isReadonly,
+            'inline whitespace-nowrap': labelposition === 'left',
+          })}
+        >
           {label}
         </p>
       {/if}
 
       {#if tooltip}
         <v-tooltip text={tooltip}>
-          <div class={cx({
-            'icon-info-outline': state === 'info',
-            'icon-error-outline text-warning-fg': state === 'warn',
-            'icon-error-outline text-danger-fg': state === 'error',
-          })} />
+          <div
+            class={cx({
+              'icon-info-outline': state === 'info',
+              'icon-error-outline text-warning-fg': state === 'warn',
+              'icon-error-outline text-danger-fg': state === 'error',
+            })}
+          />
         </v-tooltip>
       {/if}
     </div>
 
-    <v-dropdown
-      match
-      open={open ? '' : undefined}
-      class="relative"
-    >
+    <v-dropdown match open={open ? '' : undefined} class="relative">
       <div
-        slot='target'
+        slot="target"
         class={cx('w-full border bg-white', {
           'border-gray-8': !isDisabled || isReadonly,
-          'pointer-events-none bg-disabled-bg text-disabled-fg border-disabled-bg': isDisabled || isReadonly,
+          'pointer-events-none bg-disabled-bg text-disabled-fg border-disabled-bg':
+            isDisabled || isReadonly,
         })}
       >
-        <div class='flex'>
+        <div class="flex">
           <input
             bind:this={input}
             {placeholder}
             value={searchterm}
-            readonly={(isDisabled || isReadonly) ? true : undefined}
+            readonly={isDisabled || isReadonly ? true : undefined}
             aria-disabled={isDisabled ? true : undefined}
-            type='text'
-            class='py-1.5 pl-2.5 pr-1 grow text-xs border-0 outline-none bg-transparent appearance-none'
+            type="text"
+            class="py-1.5 pl-2.5 pr-1 grow text-xs border-0 outline-none bg-transparent appearance-none"
             on:input|preventDefault={handleInput}
             on:keyup|stopPropagation|preventDefault={handleKeyUp}
-          >
+          />
           <button
-            tabindex='-1'
-            aria-label='Open dropdown'
-            class={cx('py-1.5 px-1 grid place-content-center transition-transform duration-200', { 
-              'rotate-180': open,
-              'text-disabled-fg': isDisabled || isReadonly,
-            })}
+            tabindex="-1"
+            aria-label="Open dropdown"
+            class={cx(
+              'py-1.5 px-1 grid place-content-center transition-transform duration-200',
+              {
+                'rotate-180': open,
+                'text-disabled-fg': isDisabled || isReadonly,
+              }
+            )}
             on:click={handleIconClick}
             on:focusin|stopPropagation
           >
             <v-icon
               class={cx('flex', { 'text-disabled-fg': isDisabled })}
-              name='chevron-down'
+              name="chevron-down"
             />
           </button>
         </div>
 
-        <div  
-          slot='content'
-          class={cx('absolute top-7 left-0 w-full border border-black bg-white drop-shadow-md', {
-            'hidden': !open,
-          })}
+        <div
+          slot="content"
+          class={cx(
+            'absolute top-7 left-0 w-full border border-black bg-white drop-shadow-md',
+            {
+              hidden: !open,
+            }
+          )}
         >
-          <div bind:this={optionsContainer} class="options-container overflow-y-auto">
-          {#if sortedOptions.length > 0}
-            <div
-              class='flex max-h-36 flex-col'
-              on:mouseleave={clearNavigationIndex}
-            >
-              {#if heading}
-                <span
-                  class='flex text-xs text-gray-500 pl-2 pt-2 flex-wrap'
-                >
-                  {heading}
-                </span>
-              {/if}
-              {#each searchedOptions as { search, option }, index (option)}
-                <label
-                  class={cx('flex w-full gap-2 text-ellipsis whitespace-nowrap px-2 py-1.5 text-xs', {
-                    'bg-slate-200': navigationIndex === index,
-                    'text-gray-500': hasPrefix,
-                  })}
-                  on:mouseenter={() => handleOptionMouseEnter(index)}
-                >
-                  <input
-                    tabindex="-1"
-                    type='checkbox'
-                    class={cx('bg-black outline-none')}
-                    checked={utils.shouldBeChecked(value, Array.isArray(option) ? option.join('') : option)}
-                    on:change={handleOptionSelect.bind(null, Array.isArray(option) ? option.join('') : option)}
-                    on:input|stopPropagation
-                    on:focus|preventDefault|stopPropagation
+          <div
+            bind:this={optionsContainer}
+            class="options-container overflow-y-auto"
+          >
+            {#if sortedOptions.length > 0}
+              <div
+                class="flex max-h-36 flex-col"
+                on:mouseleave={clearNavigationIndex}
+              >
+                {#if heading}
+                  <span class="flex text-xs text-gray-500 pl-2 pt-2 flex-wrap">
+                    {heading}
+                  </span>
+                {/if}
+                {#each searchedOptions as { search, option }, index (option)}
+                  <label
+                    class={cx(
+                      'flex w-full gap-2 text-ellipsis whitespace-nowrap px-2 py-1.5 text-xs',
+                      {
+                        'bg-slate-200': navigationIndex === index,
+                        'text-gray-500': hasPrefix,
+                      }
+                    )}
+                    on:mouseenter={() => handleOptionMouseEnter(index)}
                   >
-
-                  {#if search}
-
-                    <span class='flex w-full gap-2 text-ellipsis whitespace-nowrap'>
-                      {#each splitOptionOnWord(option) as word, wordIndex}
-                        <span class={cx('inline-block', {
-                          'w-5 text-gray-800': hasPrefix && wordIndex === 0,
-                        })}>
-                          {#each [...word] as token}
-                            <span class={cx({
-                              'bg-yellow-100': token !== ' ' && typeof search[1] === 'string' && search[1].includes(token),
-                            })}>{token}</span>
-                          {/each}
-                        </span>
-                      {/each}
-                    </span>
-
-                  {:else if hasPrefix}
-                    {#each splitOptionOnWord(option) as optionPart, optionPartIndex (optionPart)}
+                    <input
+                      tabindex="-1"
+                      type="checkbox"
+                      class={cx('bg-black outline-none')}
+                      checked={utils.shouldBeChecked(
+                        value,
+                        Array.isArray(option) ? option.join('') : option
+                      )}
+                      on:change={handleOptionSelect.bind(
+                        null,
+                        Array.isArray(option) ? option.join('') : option
+                      )}
+                      on:input|stopPropagation
+                      on:focus|preventDefault|stopPropagation
+                    />
+
+                    {#if search}
                       <span
-                        class={optionPartIndex === 0 ? 'text-gray-800 w-5' : ''}
+                        class="flex w-full gap-2 text-ellipsis whitespace-nowrap"
                       >
-                        { optionPart }
+                        {#each splitOptionOnWord(option) as word, wordIndex}
+                          <span
+                            class={cx('inline-block', {
+                              'w-5 text-gray-800': hasPrefix && wordIndex === 0,
+                            })}
+                          >
+                            {#each [...word] as token}
+                              <span
+                                class={cx({
+                                  'bg-yellow-100':
+                                    token !== ' ' &&
+                                    typeof search[1] === 'string' &&
+                                    search[1].includes(token),
+                                })}>{token}</span
+                              >
+                            {/each}
+                          </span>
+                        {/each}
                       </span>
-                    {/each}
-
-                  {:else}
-                    { option }
-                  {/if}
-                </label>
-              {/each}
-              {#if canClearAll}
-                <button
-                  class='w-full px-2 py-1 hover:bg-slate-200 text-xs text-left'
-                  on:mouseenter={clearNavigationIndex}
-                  on:click={handleClearAll}
-                >
-                  Clear all
-                </button>
+                    {:else if hasPrefix}
+                      {#each splitOptionOnWord(option) as optionPart, optionPartIndex (optionPart)}
+                        <span
+                          class={optionPartIndex === 0
+                            ? 'text-gray-800 w-5'
+                            : ''}
+                        >
+                          {optionPart}
+                        </span>
+                      {/each}
+                    {:else}
+                      {option}
+                    {/if}
+                  </label>
+                {/each}
+                {#if canClearAll}
+                  <button
+                    class="w-full px-2 py-1 hover:bg-slate-200 text-xs text-left"
+                    on:mouseenter={clearNavigationIndex}
+                    on:click={handleClearAll}
+                  >
+                    Clear all
+                  </button>
                 {/if}
-            </div>
-
-          {:else}
-            <div class='flex py-1.5 px-2.5 justify-center text-xs'>
-              No matching results
-            </div>
-          {/if}
+              </div>
+            {:else}
+              <div class="flex py-1.5 px-2.5 justify-center text-xs">
+                No matching results
+              </div>
+            {/if}
           </div>
           {#if hasButton}
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <v-select-button
-              buttontext={buttontext}
-              buttonicon={buttonicon}
+              {buttontext}
+              {buttonicon}
               on:click={handleButtonClick}
             />
           {/if}
@@ -421,10 +452,12 @@ $: {
     </v-dropdown>
   </label>
   {#if parsedSelected.length > 0 && showsPill}
-    <div class={cx('flex flex-wrap gap-2 pt-2', {
-      'cursor-not-allowed pointer-events-none': isDisabled || isReadonly,
-      'text-black/50': isDisabled || isReadonly,
-    })}>
+    <div
+      class={cx('flex flex-wrap gap-2 pt-2', {
+        'cursor-not-allowed pointer-events-none': isDisabled || isReadonly,
+        'text-black/50': isDisabled || isReadonly,
+      })}
+    >
       {#each parsedSelected as option (option)}
         <v-pill
           on:remove={() => handlePillClick(option)}
@@ -438,9 +471,6 @@ $: {
 </div>
 
 <style>
-
-        
-
 .options-container::-webkit-scrollbar {
   width: 6px;
 }
@@ -459,4 +489,4 @@ $: {
   scrollbar-width: thin;
   scrollbar-color: black transparent;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/elements/select/select-button.svelte b/src/elements/select/select-button.svelte
index 87cbbbdf9..a94ea0b58 100644
--- a/src/elements/select/select-button.svelte
+++ b/src/elements/select/select-button.svelte
@@ -1,23 +1,20 @@
+<svelte:options immutable tag="v-select-button" />
 
-<svelte:options immutable tag='v-select-button' />
-
-<script lang='ts'>
-
+<script lang="ts">
 import { addStyles } from '../../lib/index';
 
 export let buttontext = 'ENTER';
 export let buttonicon = '';
 
 addStyles();
-
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div 
-  class='flex cursor-pointer hover:bg-gray-200 items-center p-2 border-t-[1px] border-t-gray-200 '
-  >
+<div
+  class="flex cursor-pointer hover:bg-gray-200 items-center p-2 border-t-[1px] border-t-gray-200 "
+>
   {#if buttonicon}
-    <v-icon name={buttonicon}/>
+    <v-icon name={buttonicon} />
   {/if}
-  <span class='text-xs pl-2'>{buttontext}</span>
-</div>
\ No newline at end of file
+  <span class="text-xs pl-2">{buttontext}</span>
+</div>
diff --git a/src/elements/select/select.svelte b/src/elements/select/select.svelte
index 7ee0c1ec3..6a2629c29 100644
--- a/src/elements/select/select.svelte
+++ b/src/elements/select/select.svelte
@@ -1,8 +1,7 @@
-<svelte:options immutable tag='v-select' />
+<svelte:options immutable tag="v-select" />
 
-<script lang='ts'>
-
-type LabelPosition = 'top' | 'left'
+<script lang="ts">
+type LabelPosition = 'top' | 'left';
 
 // This entire component is pretty hacked together and should be refactored. Maybe split multi / single select.
 import cx from 'classnames';
@@ -54,8 +53,13 @@ $: hasButton = htmlToBoolean(withbutton, 'withbutton');
 $: isReduceSort = sortoption === 'reduce';
 $: doesSearch = sortoption !== 'off';
 $: parsedOptions = options.split(',').map((str) => str.trim());
-$: sortedOptions = doesSearch ? applySearchSort(value, parsedOptions) : parsedOptions;
-$: searchedOptions = utils.applySearchHighlight(sortedOptions, doesSearch ? value : '');
+$: sortedOptions = doesSearch
+  ? applySearchSort(value, parsedOptions)
+  : parsedOptions;
+$: searchedOptions = utils.applySearchHighlight(
+  sortedOptions,
+  doesSearch ? value : ''
+);
 
 let open = false;
 let navigationIndex = -1;
@@ -81,10 +85,14 @@ const handleInput = (event: Event) => {
 const handleKeyUp = (event: KeyboardEvent) => {
   setKeyboardControl(true);
   switch (event.key.toLowerCase()) {
-    case 'enter': return handleEnter();
-    case 'arrowup': return handleNavigate(-1);
-    case 'arrowdown': return handleNavigate(+1);
-    case 'escape': return handleEscape();
+    case 'enter':
+      return handleEnter();
+    case 'arrowup':
+      return handleNavigate(-1);
+    case 'arrowdown':
+      return handleNavigate(+1);
+    case 'escape':
+      return handleEscape();
   }
 };
 
@@ -92,7 +100,7 @@ const handleEnter = () => {
   if (navigationIndex > -1) {
     value = sortedOptions[navigationIndex]!;
   } else {
-    const result = sortedOptions.find(item => item.toLowerCase() === value);
+    const result = sortedOptions.find((item) => item.toLowerCase() === value);
 
     if (result) {
       value = result;
@@ -121,16 +129,14 @@ const handleNavigate = (direction: number) => {
 };
 
 const handleOptionSelect = (target: string, event: Event) => {
-  const { checked } = (event.target as HTMLInputElement);
+  const { checked } = event.target as HTMLInputElement;
   if (value === target) {
     event.preventDefault();
     open = false;
     return;
   }
 
-  value = checked
-    ? target
-    : '';
+  value = checked ? target : '';
 
   open = false;
   dispatch('input', { value });
@@ -189,7 +195,6 @@ $: {
     value = '';
   }
 }
-
 </script>
 
 <!-- svelte-ignore a11y-label-has-associated-control -->
@@ -200,148 +205,169 @@ $: {
     'flex-col': labelposition === 'top',
     'items-center': labelposition === 'left',
   })}
-  tabindex='-1'
+  tabindex="-1"
   on:focusin={handleFocus}
   on:focusout={handleFocusOut}
   on:mousemove={() => setKeyboardControl(false)}
 >
-  <div class='flex items-center gap-1.5'>
+  <div class="flex items-center gap-1.5">
     {#if label}
-      <p class={cx('text-xs capitalize', {
-        'text-disabled-fg': isDisabled || isReadonly,
-        'inline whitespace-nowrap': labelposition === 'left',
-      })}>
+      <p
+        class={cx('text-xs capitalize', {
+          'text-disabled-fg': isDisabled || isReadonly,
+          'inline whitespace-nowrap': labelposition === 'left',
+        })}
+      >
         {label}
       </p>
     {/if}
 
     {#if tooltip}
       <v-tooltip text={tooltip}>
-        <div class={cx({
-          'icon-info-outline': state === 'info',
-          'icon-error-outline text-warning-fg': state === 'warn',
-          'icon-error-outline text-danger-fg': state === 'error',
-        })} />
+        <div
+          class={cx({
+            'icon-info-outline': state === 'info',
+            'icon-error-outline text-warning-fg': state === 'warn',
+            'icon-error-outline text-danger-fg': state === 'error',
+          })}
+        />
       </v-tooltip>
     {/if}
   </div>
 
-  <v-dropdown
-    match
-    open={open ? '' : undefined}
-  >
+  <v-dropdown match open={open ? '' : undefined}>
     <div
-      slot='target'
+      slot="target"
       class={cx('w-full border  bg-white', {
         'border-gray-9': !isDisabled && !isReadonly,
         'border-disabled-bg !bg-disabled-bg': isDisabled || isReadonly,
       })}
     >
-      <div class='flex'>
+      <div class="flex">
         <input
           bind:this={input}
-          placeholder={placeholder}
-          value={value}
+          {placeholder}
+          {value}
           aria-disabled={isDisabled ? true : undefined}
-          readonly={(isDisabled || isReadonly) ? true : undefined}
-          type='text'
-          class={cx('py-1.5 pl-2.5 pr-1 grow text-xs border-0 bg-transparent outline-none appearance-none', {
-            'text-disabled-fg': isDisabled || isReadonly,
-          })}
+          readonly={isDisabled || isReadonly ? true : undefined}
+          type="text"
+          class={cx(
+            'py-1.5 pl-2.5 pr-1 grow text-xs border-0 bg-transparent outline-none appearance-none',
+            {
+              'text-disabled-fg': isDisabled || isReadonly,
+            }
+          )}
           on:input|preventDefault={handleInput}
           on:keyup|stopPropagation|preventDefault={handleKeyUp}
-        >
+        />
         <button
-          tabindex='-1'
-          aria-label='Open dropdown'
-          class={cx('py-1.5 px-1 grid place-content-center transition-transform duration-200', { 
-            'rotate-180': open,
-            'text-disabled-fg': isDisabled || isReadonly,
-          })}
+          tabindex="-1"
+          aria-label="Open dropdown"
+          class={cx(
+            'py-1.5 px-1 grid place-content-center transition-transform duration-200',
+            {
+              'rotate-180': open,
+              'text-disabled-fg': isDisabled || isReadonly,
+            }
+          )}
           on:click={handleIconClick}
           on:focusin|stopPropagation
         >
-          <v-icon class='flex' name='chevron-down' />
+          <v-icon class="flex" name="chevron-down" />
         </button>
       </div>
     </div>
 
-    <div 
-      slot='content'
-      class='mt-1 border border-gray-9 bg-white drop-shadow-md'
-    >
     <div
-      bind:this={optionsContainer}
-      class='options-container overflow-y-auto'
+      slot="content"
+      class="mt-1 border border-gray-9 bg-white drop-shadow-md"
     >
-      {#if sortedOptions.length > 0}
-        <div
-          class='flex max-h-36 flex-col '
-          on:mouseleave={clearNavigationIndex}
-        >
-          {#each searchedOptions as { search, option }, index (option)}
-            <label
-              class={cx('flex w-full gap-2 text-ellipsis whitespace-nowrap px-2 py-1.5 text-xs', {
-                'bg-slate-200': navigationIndex === index,
-                'text-gray-500': hasPrefix,
-              })}
-              on:mouseenter={() => handleOptionMouseEnter(index)}
-            >
-              <input
-                tabindex="-1"
-                type='checkbox'
-                class='bg-black outline-none hidden'
-                checked={utils.shouldBeChecked(value, Array.isArray(option) ? option.join('') : option)}
-                on:change={handleOptionSelect.bind(null, Array.isArray(option) ? option.join('') : option)}
-                on:input|stopPropagation
-                on:focus|preventDefault|stopPropagation
+      <div
+        bind:this={optionsContainer}
+        class="options-container overflow-y-auto"
+      >
+        {#if sortedOptions.length > 0}
+          <div
+            class="flex max-h-36 flex-col "
+            on:mouseleave={clearNavigationIndex}
+          >
+            {#each searchedOptions as { search, option }, index (option)}
+              <label
+                class={cx(
+                  'flex w-full gap-2 text-ellipsis whitespace-nowrap px-2 py-1.5 text-xs',
+                  {
+                    'bg-slate-200': navigationIndex === index,
+                    'text-gray-500': hasPrefix,
+                  }
+                )}
+                on:mouseenter={() => handleOptionMouseEnter(index)}
               >
-
-              {#if search}
-                <span class='flex w-full gap-2 text-ellipsis whitespace-nowrap'>
-                  {#each splitOptionOnWord(option) as word, wordIndex}
-                    <span class={cx('inline-block', {
-                      'w-5 text-gray-800': hasPrefix && wordIndex === 0,
-                    })}>
-                      {#each [...word] as token}
-                        <span class={cx({
-                          'bg-yellow-100': token !== ' ' && typeof search[1] === 'string' && search[1].includes(token),
-                        })}>{token}</span>
-                      {/each}
-                    </span>
-                  {/each}
-                </span>
-
-              {:else if hasPrefix}
-
-                {#each splitOptionOnWord(option) as optionPart, optionPartIndex (optionPart)}
+                <input
+                  tabindex="-1"
+                  type="checkbox"
+                  class="bg-black outline-none hidden"
+                  checked={utils.shouldBeChecked(
+                    value,
+                    Array.isArray(option) ? option.join('') : option
+                  )}
+                  on:change={handleOptionSelect.bind(
+                    null,
+                    Array.isArray(option) ? option.join('') : option
+                  )}
+                  on:input|stopPropagation
+                  on:focus|preventDefault|stopPropagation
+                />
+
+                {#if search}
                   <span
-                    class={optionPartIndex === 0 ? 'text-gray-800 w-5' : ''}
+                    class="flex w-full gap-2 text-ellipsis whitespace-nowrap"
                   >
-                    { optionPart }
+                    {#each splitOptionOnWord(option) as word, wordIndex}
+                      <span
+                        class={cx('inline-block', {
+                          'w-5 text-gray-800': hasPrefix && wordIndex === 0,
+                        })}
+                      >
+                        {#each [...word] as token}
+                          <span
+                            class={cx({
+                              'bg-yellow-100':
+                                token !== ' ' &&
+                                typeof search[1] === 'string' &&
+                                search[1].includes(token),
+                            })}>{token}</span
+                          >
+                        {/each}
+                      </span>
+                    {/each}
                   </span>
-                {/each}
-
-              {:else}
-                { option }
-              {/if}
-            </label>
-          {/each}
-        </div>
-
-      {:else}
-        <div class='flex py-1.5 px-2.5 justify-center text-xs'>
-          No matching results
-        </div>
-      {/if}
-    </div>
+                {:else if hasPrefix}
+                  {#each splitOptionOnWord(option) as optionPart, optionPartIndex (optionPart)}
+                    <span
+                      class={optionPartIndex === 0 ? 'text-gray-800 w-5' : ''}
+                    >
+                      {optionPart}
+                    </span>
+                  {/each}
+                {:else}
+                  {option}
+                {/if}
+              </label>
+            {/each}
+          </div>
+        {:else}
+          <div class="flex py-1.5 px-2.5 justify-center text-xs">
+            No matching results
+          </div>
+        {/if}
+      </div>
       {#if hasButton}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <v-select-button
-        buttontext={buttontext}
-        buttonicon={buttonicon}
-        on:click={handleButtonClick}
-      />
+          {buttontext}
+          {buttonicon}
+          on:click={handleButtonClick}
+        />
       {/if}
     </div>
   </v-dropdown>
@@ -366,4 +392,4 @@ $: {
   scrollbar-width: thin;
   scrollbar-color: black transparent;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/elements/select/utils.ts b/src/elements/select/utils.ts
index 3e3cd4c6b..8d54db485 100644
--- a/src/elements/select/utils.ts
+++ b/src/elements/select/utils.ts
@@ -1,17 +1,18 @@
 import { addSpecialCharacterEscapes } from '../../lib/sort';
 
-interface Match { 
-  search: string[],
-  option: string,
+interface Match {
+  search: string[];
+  option: string;
 }
 
-export type SortOptions = 'default' | 'reduce' | 'off'
+export type SortOptions = 'default' | 'reduce' | 'off';
 
 export const isElementInScrollView = (element: Element) => {
   const { top, bottom } = element.getBoundingClientRect();
-  const parentRect = element.parentElement!.parentElement!.getBoundingClientRect();
+  const parentRect =
+    element.parentElement!.parentElement!.getBoundingClientRect();
 
-  return (bottom < parentRect.bottom && top > parentRect.top);
+  return bottom < parentRect.bottom && top > parentRect.top;
 };
 
 export const shouldBeChecked = (value: string, option: string) => {
@@ -52,7 +53,6 @@ export const applySearchHighlight = (options: string[], value: string) => {
   return [...matches, ...noMatches];
 };
 
-
 const sortArr = (arr: Match[]) => {
   arr.sort((a, b) => {
     if (a.option.indexOf(a.search[1]!) < b.option.indexOf(b.search[1]!)) {
diff --git a/src/elements/slider.svelte b/src/elements/slider.svelte
index a2c726f5e..cc457b4e1 100644
--- a/src/elements/slider.svelte
+++ b/src/elements/slider.svelte
@@ -1,7 +1,6 @@
-<svelte:options tag='v-slider' />
-
-<script lang='ts'>
+<svelte:options tag="v-slider" />
 
+<script lang="ts">
 import { onMount } from 'svelte';
 import { spring } from 'svelte/motion';
 import type { Spring } from 'svelte/motion';
@@ -45,13 +44,16 @@ let isDisabled: boolean;
 
 $: isReadonly = htmlToBoolean(readonly, 'readonly');
 $: isDisabled = htmlToBoolean(disabled, 'disabled');
-$: pipStep = ((maxNum - minNum) / stepNum >= 100 ? (maxNum - minNum) / 20 : 1);
+$: pipStep = (maxNum - minNum) / stepNum >= 100 ? (maxNum - minNum) / 20 : 1;
 $: pipCount = (maxNum - minNum) / stepNum;
 $: pipVal = (val: number): number => minNum + val * stepNum * pipStep;
 $: minNum = Number.parseFloat(min || '0');
 $: maxNum = Number.parseFloat(max || '100');
 $: stepNum = Number.parseFloat(step || '1');
-$: startValue = start || value ? Number.parseFloat(start || value) : (Number.parseFloat(min || '0') + Number.parseFloat(max || '100')) / 2;
+$: startValue =
+  start || value
+    ? Number.parseFloat(start || value)
+    : (Number.parseFloat(min || '0') + Number.parseFloat(max || '100')) / 2;
 $: endValue = end ? Number.parseFloat(end) : undefined;
 $: range = typeof range === 'string' ? range : end !== undefined;
 
@@ -90,11 +92,16 @@ $: {
   if (valueLength === arr.length) {
     // update the value of the spring function for animated handles
     // whenever the values has updated
-    springPositions.set(arr.map((v) => percentOf(v, minNum, maxNum, 2))).catch((error) => console.error(error));
+    springPositions
+      .set(arr.map((v) => percentOf(v, minNum, maxNum, 2)))
+      .catch((error) => console.error(error));
   } else {
     // set the initial spring values when the slider initialises,
     // or when values array length has changed
-    springPositions = spring(arr.map((v) => percentOf(v, minNum, maxNum, 2)), springValues);
+    springPositions = spring(
+      arr.map((v) => percentOf(v, minNum, maxNum, 2)),
+      springValues
+    );
   }
   // set the valueLength for the next check
   valueLength = arr.length;
@@ -103,7 +110,11 @@ $: {
 // Validate parameters
 onMount(() => {
   if ((maxNum - minNum) % stepNum !== 0) {
-    console.error(`<v-slider> step (${step}) is not a multiple of the range (${maxNum - minNum})`);
+    console.error(
+      `<v-slider> step (${step}) is not a multiple of the range (${
+        maxNum - minNum
+      })`
+    );
   }
 });
 
@@ -111,7 +122,11 @@ onMount(() => {
  * align the value with the steps so that it
  * always sits on the closest (above/below) step
  **/
-const alignValueToStep = (val: number, minVal: number, maxVal: number): number => {
+const alignValueToStep = (
+  val: number,
+  minVal: number,
+  maxVal: number
+): number => {
   // sanity check for performance
   if (val <= minVal) {
     return minVal;
@@ -140,10 +155,12 @@ const alignValueToStep = (val: number, minVal: number, maxVal: number): number =
  * normalise a mouse or touch event to return the
  * client (x/y) object for that event
  **/
-const normalisedClient = (event: MouseEvent | TouchEvent): MouseEvent | Touch => {
+const normalisedClient = (
+  event: MouseEvent | TouchEvent
+): MouseEvent | Touch => {
   return event.type.includes('touch')
     ? (event as TouchEvent).touches[0]!
-    : event as MouseEvent;
+    : (event as MouseEvent);
 };
 
 /**
@@ -194,7 +211,9 @@ const getClosestHandle = (clientPos: Touch | MouseEvent): number => {
     return handleVal > endValue ? 1 : 0;
   } else if (range) {
     closest = [startValue, endValue!].indexOf(
-      [startValue, endValue!].sort((a, b) => Math.abs(handleVal - a) - Math.abs(handleVal - b))[0]!
+      [startValue, endValue!].sort(
+        (a, b) => Math.abs(handleVal - a) - Math.abs(handleVal - b)
+      )[0]!
     );
   }
 
@@ -315,7 +334,7 @@ const handleSliderFocus = (index: number) => {
  * @param {event} e the event from browser
  **/
 const sliderInteractStart = (e: MouseEvent | TouchEvent) => {
-  if ((isDisabled || isReadonly)) return;
+  if (isDisabled || isReadonly) return;
 
   getSliderDimensions();
   const el = e.target as HTMLElement;
@@ -326,7 +345,11 @@ const sliderInteractStart = (e: MouseEvent | TouchEvent) => {
   handleActivated = true;
   handlePressed = true;
   activeHandle = getClosestHandle(clientPos);
-  previousValue = alignValueToStep(activeHandle === 0 ? startValue : endValue!, minNum, maxNum);
+  previousValue = alignValueToStep(
+    activeHandle === 0 ? startValue : endValue!,
+    minNum,
+    maxNum
+  );
 
   // for touch devices we want the handle to instantly
   // move to the position touched for more responsive feeling
@@ -346,11 +369,7 @@ const sliderInteractEnd = () => {
 const bodyInteractStart = (e: MouseEvent | TouchEvent) => {
   keyboardActive = false;
 
-  if (
-    focus &&
-    e.target !== slider &&
-    !slider.contains(e.target as Node)
-  ) {
+  if (focus && e.target !== slider && !slider.contains(e.target as Node)) {
     focus = false;
   }
 };
@@ -378,7 +397,10 @@ const bodyMouseUp = (e: MouseEvent) => {
     // this only works if a handle is active, which can
     // only happen if there was sliderInteractStart triggered
     // on the slider, already
-    if (handleActivated && el && el === slider || slider.contains(el as Node)) {
+    if (
+      (handleActivated && el && el === slider) ||
+      slider.contains(el as Node)
+    ) {
       focus = true;
       // don't trigger interact if the target is a handle (no need) or
       // if the target is a label (we want to move to that value from rangePips)
@@ -420,24 +442,28 @@ const onChange = () => {
       : undefined,
   });
 };
-
 </script>
 
 <!-- svelte-ignore a11y-label-has-associated-control -->
-<label class='flex flex-col gap-2'>
+<label class="flex flex-col gap-2">
   {#if label}
-    <p class={cn('text-xs capitalize', {
-      'text-disabled-fg': isDisabled,
-    })}>
+    <p
+      class={cn('text-xs capitalize', {
+        'text-disabled-fg': isDisabled,
+      })}
+    >
       {label}
     </p>
   {/if}
 
   <div
     bind:this={slider}
-    class={cn('slider relative h-0.5 mt-7 transition-opacity duration-200 select-none bg-gray-6', {
-      'bg-disabled-bg text-disabled-fg': isDisabled,
-    })}
+    class={cn(
+      'slider relative h-0.5 mt-7 transition-opacity duration-200 select-none bg-gray-6',
+      {
+        'bg-disabled-bg text-disabled-fg': isDisabled,
+      }
+    )}
     class:range
     class:focus
     class:min={range === 'min'}
@@ -447,45 +473,55 @@ const onChange = () => {
     on:touchstart|preventDefault={sliderInteractStart}
     on:touchend|preventDefault={sliderInteractEnd}
   >
-
     {#each endValue ? [startValue, endValue] : [startValue] as value, index}
       <span
-        role='slider'
-        class='range absolute block h-5 w-5 top-1 bottom-auto -translate-x-1/2 -translate-y-1/2 z-[2]'
+        role="slider"
+        class="range absolute block h-5 w-5 top-1 bottom-auto -translate-x-1/2 -translate-y-1/2 z-[2]"
         class:active={focus && activeHandle === index}
         class:press={handlePressed && activeHandle === index}
         data-handle={index}
         on:blur={handleSliderBlur}
         on:focus={() => handleSliderFocus(index)}
-        style='left: {$springPositions[index]}%; z-index: {activeHandle === index ? 3 : 2}'
+        style="left: {$springPositions[index]}%; z-index: {activeHandle ===
+        index
+          ? 3
+          : 2}"
         aria-valuemin={range === true && index === 1 ? startValue : minNum}
         aria-valuemax={range === true && index === 0 ? endValue : maxNum}
         aria-valuenow={value}
         aria-valuetext={value?.toString()}
-        aria-orientation='horizontal'
+        aria-orientation="horizontal"
         aria-disabled={isDisabled ? true : undefined}
-        tabindex='{ disabled ? -1 : 0 }'
-      > 
-
-        <span class='handle-bg absolute left-0 bottom-1 rounded-full opacity-50 h-full w-full transition-transform bg-gray-400' />
-
-        <span class={cn('absolute left-0 bottom-1 block rounded-full h-full w-full border border-gray-9 bg-white', {
-          'border-disabled-fg': isDisabled || isReadonly,
-        })} />
-
-        <span class={cn(
-          'floating block absolute left-1/2 bottom-full -translate-x-1/2 -translate-y-1/2',
-          'py-1 px-1.5 text-center opacity-0 pointer-events-none whitespace-nowrap transition duration-200 border border-gray-9 bg-white text-xs',
-          {
-            '-translate-y-1.5': !focus || activeHandle !== index,
-            'border-disabled-fg': isDisabled || isReadonly,
-            'text-disabled-fg': isDisabled || isReadonly,
-          }
-        )}>
+        tabindex={disabled ? -1 : 0}
+      >
+        <span
+          class="handle-bg absolute left-0 bottom-1 rounded-full opacity-50 h-full w-full transition-transform bg-gray-400"
+        />
+
+        <span
+          class={cn(
+            'absolute left-0 bottom-1 block rounded-full h-full w-full border border-gray-9 bg-white',
+            {
+              'border-disabled-fg': isDisabled || isReadonly,
+            }
+          )}
+        />
+
+        <span
+          class={cn(
+            'floating block absolute left-1/2 bottom-full -translate-x-1/2 -translate-y-1/2',
+            'py-1 px-1.5 text-center opacity-0 pointer-events-none whitespace-nowrap transition duration-200 border border-gray-9 bg-white text-xs',
+            {
+              '-translate-y-1.5': !focus || activeHandle !== index,
+              'border-disabled-fg': isDisabled || isReadonly,
+              'text-disabled-fg': isDisabled || isReadonly,
+            }
+          )}
+        >
           {value}
 
           {#if suffix}
-            <span class='floating-suffix'>{suffix}</span>
+            <span class="floating-suffix">{suffix}</span>
           {/if}
         </span>
       </span>
@@ -493,21 +529,22 @@ const onChange = () => {
 
     {#if range}
       <span
-        class={cn('absolute block transition duration-200 h-1 -top-0.5 select-none z-[1] bg-gray-9', {
-          'bg-disabled-bg': isDisabled || isReadonly,
-        })}
-        style='left: {rangeStart($springPositions)}%; right: {rangeEnd($springPositions)}%'
+        class={cn(
+          'absolute block transition duration-200 h-1 -top-0.5 select-none z-[1] bg-gray-9',
+          {
+            'bg-disabled-bg': isDisabled || isReadonly,
+          }
+        )}
+        style="left: {rangeStart($springPositions)}%; right: {rangeEnd(
+          $springPositions
+        )}%"
       />
     {/if}
 
-    <div 
-      class='absolute h-2 left-0 right-0' 
-      class:disabled
-      class:focus 
-    >
-      <small class='absolute bottom-full left-0 mb-3 whitespace-nowrap text-xs'>
+    <div class="absolute h-2 left-0 right-0" class:disabled class:focus>
+      <small class="absolute bottom-full left-0 mb-3 whitespace-nowrap text-xs">
         {minNum}
-        
+
         {#if suffix}
           <span>{suffix}</span>
         {/if}
@@ -517,23 +554,27 @@ const onChange = () => {
         {#each Array.from({ length: pipCount + 1 }) as _, i}
           {#if pipVal(i) !== minNum && pipVal(i) !== maxNum}
             <span
-              class={cn('absolute h-[4px] w-[1px] top-[calc(50%-9px)] whitespace-nowrap transition bg-gray-6', {
-                'bg-disabled-bg': isDisabled || isReadonly,
-              })}
-              style='left: {percentOf(pipVal(i), minNum, maxNum, 2)}%;'
+              class={cn(
+                'absolute h-[4px] w-[1px] top-[calc(50%-9px)] whitespace-nowrap transition bg-gray-6',
+                {
+                  'bg-disabled-bg': isDisabled || isReadonly,
+                }
+              )}
+              style="left: {percentOf(pipVal(i), minNum, maxNum, 2)}%;"
             />
           {/if}
         {/each}
       {/if}
 
-      <small class='absolute bottom-full right-0 mb-3 whitespace-nowrap text-xs'>
+      <small
+        class="absolute bottom-full right-0 mb-3 whitespace-nowrap text-xs"
+      >
         {maxNum}
-        
+
         {#if suffix}
           <span>{suffix}</span>
         {/if}
       </small>
-
     </div>
   </div>
 </label>
@@ -549,18 +590,16 @@ const onChange = () => {
 />
 
 <style>
-
 .slider .range:hover .handle-bg {
   transform: scale(1.5);
 }
 
 .slider .range.active .handle-bg {
-  transform: scale(2.0);
+  transform: scale(2);
 }
 
 .slider .range.active .floating,
 .slider .range:hover .floating {
   opacity: 1;
 }
-
 </style>
diff --git a/src/elements/switch.svelte b/src/elements/switch.svelte
index ecfc60223..acac5068b 100644
--- a/src/elements/switch.svelte
+++ b/src/elements/switch.svelte
@@ -1,7 +1,6 @@
-<svelte:options immutable tag='v-switch' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-switch" />
 
+<script lang="ts">
 import cx from 'classnames';
 import { htmlToBoolean } from '../lib/boolean';
 import { addStyles } from '../lib/index';
@@ -29,14 +28,13 @@ $: on = value === 'on';
 $: isDisabled = htmlToBoolean(disabled, 'disabled');
 $: isReadonly = htmlToBoolean(readonly, 'readonly');
 
-const handleClick = () => { 
+const handleClick = () => {
   if (!(isDisabled || isReadonly)) {
-    value = (on) ? 'off' : 'on';
+    value = on ? 'off' : 'on';
     input.checked = value === 'on';
     dispatch('input', { value: input.checked });
   }
 };
-
 </script>
 
 <label
@@ -46,47 +44,53 @@ const handleClick = () => {
     'text-disabled-fg': isDisabled,
   })}
 >
-<div class='flex items-center gap-1.5'>
-  {#if label}
-    <p class={cx('w-fit text-xs capitalize', {
-      'whitespace-nowrap': labelposition === 'left',
-    })}>
-      {label}
-    </p>
-  {/if}
+  <div class="flex items-center gap-1.5">
+    {#if label}
+      <p
+        class={cx('w-fit text-xs capitalize', {
+          'whitespace-nowrap': labelposition === 'left',
+        })}
+      >
+        {label}
+      </p>
+    {/if}
 
-  {#if tooltip}
-  <v-tooltip text={tooltip}>
-    <div class="icon-info-outline text-black"/>
-  </v-tooltip>
-  {/if}
-</div>
-  
+    {#if tooltip}
+      <v-tooltip text={tooltip}>
+        <div class="icon-info-outline text-black" />
+      </v-tooltip>
+    {/if}
+  </div>
 
   <button
     on:click={handleClick}
-    type='button'
+    type="button"
     class={cx('flex gap-1.5 items-center', {
       'cursor-not-allowed pointer-events-none': isDisabled || isReadonly,
     })}
-    role='switch'
+    role="switch"
     aria-label={label}
     aria-disabled={isDisabled}
     aria-checked={on ? 'true' : 'false'}
   >
     <div
-      class={cx('relative inline-flex flex-shrink-0 h-5 w-11 border cursor-pointer motion-safe:transition-colors ease-in-out duration-200 focus:outline-none', {
-        'bg-gray-4 border-gray-4': isDisabled || isReadonly,
-        'bg-gray-6 border-gray-6': !on && !(isDisabled || isReadonly),
-        'bg-success-fg border-success-fg': on && !(isDisabled || isReadonly),
-        'text-disabled-fg': isDisabled,
-      })}
+      class={cx(
+        'relative inline-flex flex-shrink-0 h-5 w-11 border cursor-pointer motion-safe:transition-colors ease-in-out duration-200 focus:outline-none',
+        {
+          'bg-gray-4 border-gray-4': isDisabled || isReadonly,
+          'bg-gray-6 border-gray-6': !on && !(isDisabled || isReadonly),
+          'bg-success-fg border-success-fg': on && !(isDisabled || isReadonly),
+          'text-disabled-fg': isDisabled,
+        }
+      )}
     >
       <span
-        class={cx('pointer-events-none relative inline-block h-4 w-4 mt-px ml-px bg-white transform ring-0 motion-safe:transition-transform ease-in-out duration-200', {
-          'border-gray-4': isDisabled || isReadonly,
-        })}
-
+        class={cx(
+          'pointer-events-none relative inline-block h-4 w-4 mt-px ml-px bg-white transform ring-0 motion-safe:transition-transform ease-in-out duration-200',
+          {
+            'border-gray-4': isDisabled || isReadonly,
+          }
+        )}
         class:translate-x-0={!on}
         class:translate-x-6={on}
       />
@@ -95,8 +99,8 @@ const handleClick = () => {
         {value}
         disabled={isDisabled}
         readonly={isReadonly}
-        class='hidden'
-        type='checkbox'
+        class="hidden"
+        type="checkbox"
         checked={on}
         bind:this={input}
       />
diff --git a/src/elements/table/table.svelte b/src/elements/table/table.svelte
index 12fa9a3a0..50591579b 100644
--- a/src/elements/table/table.svelte
+++ b/src/elements/table/table.svelte
@@ -1,7 +1,6 @@
-<svelte:options immutable tag='v-table' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-table" />
 
+<script lang="ts">
 import cx from 'classnames';
 import { addStyles } from '../../lib/index';
 
@@ -11,22 +10,23 @@ export let style = '';
 
 addStyles();
 
-const colSizes = cols.split(',').map(col => col.trim());
-
+const colSizes = cols.split(',').map((col) => col.trim());
 </script>
 
-<style>
-:host { display: contents !important; }
-</style>
-
 <table
   {style}
   class={cx('bg-white text-xs w-full', { 'table-fixed': variant === 'fixed' })}
 >
   <colgroup>
     {#each colSizes as col}
-      <col style="width: {col};">
+      <col style="width: {col};" />
     {/each}
   </colgroup>
   <slot />
 </table>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>
diff --git a/src/elements/table/tbody.svelte b/src/elements/table/tbody.svelte
index 08cdef107..beb0b4de9 100644
--- a/src/elements/table/tbody.svelte
+++ b/src/elements/table/tbody.svelte
@@ -1,19 +1,19 @@
-<svelte:options immutable tag='v-tbody' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-tbody" />
 
+<script lang="ts">
 import { addStyles } from '../../lib/index';
 
 export let style = '';
 
 addStyles();
-
 </script>
 
-<style>
-:host { display: contents !important; }
-</style>
-
 <tbody {style}>
   <slot />
 </tbody>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>
diff --git a/src/elements/table/td.svelte b/src/elements/table/td.svelte
index f1b81beb7..562e35290 100644
--- a/src/elements/table/td.svelte
+++ b/src/elements/table/td.svelte
@@ -1,23 +1,19 @@
-<svelte:options immutable tag='v-td' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-td" />
 
+<script lang="ts">
 import { addStyles } from '../../lib/index';
 
 export let style = '';
 
 addStyles();
-
 </script>
 
-<style>
-:host { display: contents !important; }
-</style>
-
-<td
-  {style}
-  part='table-cell'
-  class="p-2 overflow-hidden"
->
+<td {style} part="table-cell" class="p-2 overflow-hidden">
   <slot />
 </td>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>
diff --git a/src/elements/table/th.svelte b/src/elements/table/th.svelte
index 7426f6368..696cf2830 100644
--- a/src/elements/table/th.svelte
+++ b/src/elements/table/th.svelte
@@ -1,22 +1,19 @@
-<svelte:options immutable tag='v-th' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-th" />
 
+<script lang="ts">
 import { addStyles } from '../../lib/index';
 
 export let style = '';
 
 addStyles();
-
 </script>
 
-<style>
-:host { display: contents !important; }
-</style>
-
-<th
-  {style}
-  class="p-2 text-neutral-600 font-normal overflow-hidden"
->
+<th {style} class="p-2 text-neutral-600 font-normal overflow-hidden">
   <slot />
 </th>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>
diff --git a/src/elements/table/thead.svelte b/src/elements/table/thead.svelte
index 9af5f63b3..2d0378592 100644
--- a/src/elements/table/thead.svelte
+++ b/src/elements/table/thead.svelte
@@ -1,22 +1,19 @@
-<svelte:options immutable tag='v-thead' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-thead" />
 
+<script lang="ts">
 import { addStyles } from '../../lib/index';
 
 export let style = '';
 
 addStyles();
-
 </script>
 
-<style>
-:host { display: contents !important; }
-</style>
-
-<thead
-  {style}
-  class="border-b border-black"
->
+<thead {style} class="border-b border-black">
   <slot />
 </thead>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>
diff --git a/src/elements/table/tr.svelte b/src/elements/table/tr.svelte
index dd1066350..73b4a337e 100644
--- a/src/elements/table/tr.svelte
+++ b/src/elements/table/tr.svelte
@@ -1,40 +1,44 @@
-<svelte:options immutable tag='v-tr' />
-
-<svelte:head>
-  <style>
-    v-tr[variant="success"] v-td::part(table-cell) {
-      --tw-text-opacity: 1;
-      color: rgba(4, 120, 87, var(--tw-text-opacity));
-      /* @apply text-green-700; */
-    }
-    v-tr[variant="disabled"] v-td::part(table-cell) {
-      --tw-text-opacity: 1;
-      color: rgba(107, 114, 128, var(--tw-text-opacity));
-      /* @apply text-gray-500; */
-    }
-    v-tr[variant="error"] v-td::part(table-cell) {
-      --tw-text-opacity: 1;
-      color: rgb(239 68 68 / var(--tw-text-opacity));
-      /* @apply text-red-500; */
-    }
-  </style>
-</svelte:head>
-
-<script lang='ts'>
+<svelte:options immutable tag="v-tr" />
 
+<script lang="ts">
 import { addStyles } from '../../lib/index';
 
 export const variant = '';
 export let style = '';
 
 addStyles();
-
 </script>
 
+<svelte:head>
+  <style>
+  v-tr[variant='success'] v-td::part(table-cell) {
+    --tw-text-opacity: 1;
+    color: rgba(4, 120, 87, var(--tw-text-opacity));
+    /* @apply text-green-700; */
+  }
+  v-tr[variant='disabled'] v-td::part(table-cell) {
+    --tw-text-opacity: 1;
+    color: rgba(107, 114, 128, var(--tw-text-opacity));
+    /* @apply text-gray-500; */
+  }
+  v-tr[variant='error'] v-td::part(table-cell) {
+    --tw-text-opacity: 1;
+    color: rgb(239 68 68 / var(--tw-text-opacity));
+    /* @apply text-red-500; */
+  }
+  </style>
+</svelte:head>
+
+<tr {style} class="border-b">
+  <slot />
+</tr>
+
 <style>
-:host { display: contents !important; }
+:host {
+  display: contents !important;
+}
 
-:host([variant="success"]) tr {
+:host([variant='success']) tr {
   --tw-bg-opacity: 1;
   --tw-border-opacity: 1;
   background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
@@ -43,13 +47,13 @@ addStyles();
   @apply border-green-100; */
 }
 
-:host([variant="disabled"]) tr {
+:host([variant='disabled']) tr {
   --tw-bg-opacity: 1;
   background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
   /* @apply bg-gray-50; */
 }
 
-:host([variant="error"]) tr {
+:host([variant='error']) tr {
   --tw-bg-opacity: 1;
   --tw-border-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity));
@@ -58,10 +62,3 @@ addStyles();
   @apply border-red-100; */
 }
 </style>
-
-<tr
-  {style}
-  class="border-b"
->
-  <slot />
-</tr>
\ No newline at end of file
diff --git a/src/elements/tabs.svelte b/src/elements/tabs.svelte
index 5fa5a8654..f44183a64 100644
--- a/src/elements/tabs.svelte
+++ b/src/elements/tabs.svelte
@@ -1,7 +1,6 @@
-<svelte:options immutable tag='v-tabs' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-tabs" />
 
+<script lang="ts">
 import cx from 'classnames';
 import { addStyles } from '../lib/index';
 import { dispatcher } from '../lib/dispatch';
@@ -16,19 +15,18 @@ addStyles();
 $: parsedTabs = tabs.split(',').map((str) => str.trim());
 $: selectedIndex = parsedTabs.indexOf(selected);
 
-
 const handleClick = (option: string) => {
   selected = option;
   dispatch('input', { value: selected });
 };
-
 </script>
 
-<div class='w-full flex bg-bg-3 border-b border-b-gray-9'>
+<div class="w-full flex bg-bg-3 border-b border-b-gray-9">
   {#each parsedTabs as tab, index (tab)}
     <button
       class={cx('px-4 py-1 uppercase text-sm first:ml-4 ', {
-        'bg-white border border-x-gray-9 border-t-gray-9 border-b-white font-bold -mb-px text-text-default': tab === selected,
+        'bg-white border border-x-gray-9 border-t-gray-9 border-b-white font-bold -mb-px text-text-default':
+          tab === selected,
         'text-text-subtle-1': tab !== selected,
         'border-l border-l-gray-300': selectedIndex > index,
         'border-r border-r-gray-300': selectedIndex < index,
diff --git a/src/elements/tooltip.svelte b/src/elements/tooltip.svelte
index 9f4595726..29e6ba042 100644
--- a/src/elements/tooltip.svelte
+++ b/src/elements/tooltip.svelte
@@ -1,8 +1,7 @@
-<svelte:options immutable tag='v-tooltip' />
+<svelte:options immutable tag="v-tooltip" />
 
-<script lang='ts'>
-
-type Locations = 'top' | 'bottom' | 'right' | 'left'
+<script lang="ts">
+type Locations = 'top' | 'bottom' | 'right' | 'left';
 
 import { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';
 import { addStyles } from '../lib/index';
@@ -52,12 +51,15 @@ export const recalculateStyle = async () => {
   const arrowY = position.middlewareData.arrow?.y ?? 0;
 
   // eslint-disable-next-line require-atomic-updates
-  arrowElement.style.cssText = staticSide === 'right' || staticSide === 'left' ? `
+  arrowElement.style.cssText =
+    staticSide === 'right' || staticSide === 'left'
+      ? `
       top: ${arrowY}px;
       ${staticSide}: ${arrowX}px;
       margin-${staticSide}: -10px;
       transform: ${staticSide === 'right' ? 'rotate(90deg)' : 'rotate(270deg)'};
-    ` : `
+    `
+      : `
       left: ${arrowX}px;
       ${staticSide}: ${arrowY}px;
       margin-${staticSide}: -6px;
@@ -82,21 +84,20 @@ const handleMouseLeave = () => {
 };
 
 addStyles();
-
 </script>
 
 <div
   bind:this={container}
-  class='relative'
-  aria-describedby='tooltip'
+  class="relative"
+  aria-describedby="tooltip"
   on:mouseenter={handleMouseEnter}
   on:mouseleave={handleMouseLeave}
 >
   <slot />
   <div
     bind:this={tooltip}
-    class:invisible={invisible}
-    role='tooltip'
+    class:invisible
+    role="tooltip"
     class={`
       absolute
       top-0
@@ -110,24 +111,24 @@ addStyles();
       border-gray-9
       z-[1000]
     `}
-    style='
+    style="
       transform: translate({x}px, {y}px);
       min-width: {minwidth};
-    '
-    >
+    "
+  >
     <div
       bind:this={arrowElement}
-      class='absolute triangle border-b-gray-9 w-0 h-0'
+      class="absolute triangle border-b-gray-9 w-0 h-0"
     />
     {text}
-    <slot name='text' />
+    <slot name="text" />
   </div>
 </div>
 
 <style>
-  .triangle {
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-bottom: 6px solid;
-  }
-</style>
\ No newline at end of file
+.triangle {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid;
+}
+</style>
diff --git a/src/elements/vector-input.svelte b/src/elements/vector-input.svelte
index 10f9b7862..80dae4f6f 100644
--- a/src/elements/vector-input.svelte
+++ b/src/elements/vector-input.svelte
@@ -1,7 +1,6 @@
-<svelte:options immutable tag='v-vector-input' />
-
-<script lang='ts'>
+<svelte:options immutable tag="v-vector-input" />
 
+<script lang="ts">
 import { addStyles } from '../lib/index';
 import { dispatcher } from '../lib/dispatch';
 
@@ -51,26 +50,24 @@ const dimensionsArray = () => {
 
   return arr;
 };
-
 </script>
-  
+
 <div class="flex justify-between items-center gap-2">
   <p class="m-0 text-[11px]">
     {label}
   </p>
   <div class="flex gap-1">
     {#each dimensionsArray() as i (i)}
-    <div class="w-16">
-      <v-input
-        {type}
-        {step}
-        value={valueArray[i] ?? ''}
-        placeholder={placeholders[i]}
-        incrementor="slider"
-        on:input={handleInput(i)}
-      />
-    </div>
+      <div class="w-16">
+        <v-input
+          {type}
+          {step}
+          value={valueArray[i] ?? ''}
+          placeholder={placeholders[i]}
+          incrementor="slider"
+          on:input={handleInput(i)}
+        />
+      </div>
     {/each}
   </div>
 </div>
-  
\ No newline at end of file
diff --git a/src/lib/add-styles.ts b/src/lib/add-styles.ts
index fbcffe3e3..13656b306 100644
--- a/src/lib/add-styles.ts
+++ b/src/lib/add-styles.ts
@@ -4,7 +4,9 @@ import css from '../../prime.css?inline';
 let sheet: CSSStyleSheet & { replaceSync(x: string): void };
 let fallback = false;
 try {
-  sheet = new CSSStyleSheet() as CSSStyleSheet & { replaceSync(x: string): void };
+  sheet = new CSSStyleSheet() as CSSStyleSheet & {
+    replaceSync(x: string): void;
+  };
   // See https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/897
   sheet.replaceSync(css);
 } catch {
@@ -19,7 +21,9 @@ export const addStyles = () => {
     style.innerHTML = css;
     element.shadowRoot!.append(style);
   } else {
-    const root = element.shadowRoot as unknown as { adoptedStyleSheets: unknown[] }
+    const root = element.shadowRoot as unknown as {
+      adoptedStyleSheets: unknown[];
+    };
     // See https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/897
     root.adoptedStyleSheets = [sheet];
   }
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 144717d6f..5fad3268f 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -1,9 +1,15 @@
-export const { base = '', query = '', workers = {} } = (window as unknown as {
-  PRIME_CONFIG?: {
-    base?: string
-    query?: string
-    workers: {
-      monaco?: string
-    }
+export const {
+  base = '',
+  query = '',
+  workers = {},
+} = (
+  window as unknown as {
+    PRIME_CONFIG?: {
+      base?: string;
+      query?: string;
+      workers: {
+        monaco?: string;
+      };
+    };
   }
-}).PRIME_CONFIG ?? {}
+).PRIME_CONFIG ?? {};
diff --git a/src/lib/dispatch.ts b/src/lib/dispatch.ts
index 484c916ce..f4117fc00 100644
--- a/src/lib/dispatch.ts
+++ b/src/lib/dispatch.ts
@@ -1,12 +1,14 @@
-
 import { get_current_component } from 'svelte/internal';
 
 export const dispatcher = () => {
   const element = get_current_component() as HTMLElement;
 
-  return (name: string, detail?: object) => element.dispatchEvent(new CustomEvent(name, {
-    composed: true,
-    bubbles: true,
-    detail,
-  }));
+  return (name: string, detail?: object) =>
+    element.dispatchEvent(
+      new CustomEvent(name, {
+        composed: true,
+        bubbles: true,
+        detail,
+      })
+    );
 };
diff --git a/src/lib/events.ts b/src/lib/events.ts
index 90542387a..0867ca9cf 100644
--- a/src/lib/events.ts
+++ b/src/lib/events.ts
@@ -1 +1,2 @@
-export const checkKeyboardEvent = (event: KeyboardEvent, keys: string[]) => keys.includes(event.key);
+export const checkKeyboardEvent = (event: KeyboardEvent, keys: string[]) =>
+  keys.includes(event.key);
diff --git a/src/lib/load-fonts.ts b/src/lib/load-fonts.ts
index ff3fda097..d25433ad1 100644
--- a/src/lib/load-fonts.ts
+++ b/src/lib/load-fonts.ts
@@ -1,7 +1,10 @@
-import { base, query } from './config'
+import { base, query } from './config';
 
 export const loadFonts = async () => {
-  const font = new FontFace('icons', base ? `url(${base}/icons.woff2${query})` : `url(icons.woff2${query})`)
-  await font.load()
-  document.fonts.add(font)
-}
+  const font = new FontFace(
+    'icons',
+    base ? `url(${base}/icons.woff2${query})` : `url(icons.woff2${query})`
+  );
+  await font.load();
+  document.fonts.add(font);
+};
diff --git a/src/lib/math.ts b/src/lib/math.ts
index a732fe02d..35253faa2 100644
--- a/src/lib/math.ts
+++ b/src/lib/math.ts
@@ -1,12 +1,17 @@
 export const clamp = (val: number, minVal: number, maxVal: number): number => {
-  return val <= minVal ? minVal : (val >= maxVal ? maxVal : val);
+  return val <= minVal ? minVal : val >= maxVal ? maxVal : val;
 };
 
 /**
-   * take in a value, and then calculate that value's percentage
-   * of the overall range (min-max)
-   **/
-export const percentOf = (val: number, min: number, max: number, precision: number): number => {
+ * take in a value, and then calculate that value's percentage
+ * of the overall range (min-max)
+ **/
+export const percentOf = (
+  val: number,
+  min: number,
+  max: number,
+  precision: number
+): number => {
   const perc = ((val - min) / (max - min)) * 100;
   if (Number.isNaN(perc) || perc <= 0) {
     return 0;
@@ -27,7 +32,7 @@ export const hashCode = (str: string) => {
 
   for (let index = 0; index < str.length; index += 1) {
     chr = str.codePointAt(index)!;
-    hash = ((hash << 5) - hash) + chr;
+    hash = (hash << 5) - hash + chr;
     hash = Math.trunc(hash); // Convert to 32bit integer
   }
 
diff --git a/src/lib/monaco/index.ts b/src/lib/monaco/index.ts
index 6304aa297..435c780c4 100644
--- a/src/lib/monaco/index.ts
+++ b/src/lib/monaco/index.ts
@@ -1,10 +1,8 @@
-
 import { version as MonacoVersion } from 'monaco-editor/package.json';
 import type { MonacoSchema, Schema, SubSchema } from './types';
 
 export const monacoURL = `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/${MonacoVersion}`;
 
-
 // eslint-disable-next-line unicorn/prefer-export-from
 
 const schemas: MonacoSchema[] = [];
@@ -18,8 +16,10 @@ const makeRefUri = (id: string, key: string) => {
 
 const keyFromRef = (ref = '') => ref.split('/').pop()!;
 
-
-const updateRefs = (id: string, definition: SubSchema): Record<string, string> => {
+const updateRefs = (
+  id: string,
+  definition: SubSchema
+): Record<string, string> => {
   for (const property of Object.values(definition.properties ?? [])) {
     if (property.type === 'array' && property.items?.type) {
       property.description = `"array" of type "${property.items?.type}"`;
@@ -30,7 +30,7 @@ const updateRefs = (id: string, definition: SubSchema): Record<string, string> =
     }
   }
 
-  return (JSON.parse(JSON.stringify(definition), (key, value: string) => {
+  return JSON.parse(JSON.stringify(definition), (key, value: string) => {
     if (key === '$ref') {
       return makeRefUri(id, keyFromRef(value));
     }
@@ -40,7 +40,7 @@ const updateRefs = (id: string, definition: SubSchema): Record<string, string> =
     }
 
     return value;
-  }) as Record<string, string>);
+  }) as Record<string, string>;
 };
 
 const addSchemas = (id: string, schema: Schema, fileMatch: string[]) => {
diff --git a/src/lib/monaco/loader.ts b/src/lib/monaco/loader.ts
index e07a2c16b..4cdaca1f0 100644
--- a/src/lib/monaco/loader.ts
+++ b/src/lib/monaco/loader.ts
@@ -2,16 +2,18 @@ import type { Monaco } from './types';
 import { monacoURL } from './index';
 
 interface Window extends globalThis.Window {
-  require: ((dependencies: string[], callback: () => void) => void) & { config: (options: object) => void }
+  require: ((dependencies: string[], callback: () => void) => void) & {
+    config: (options: object) => void;
+  };
   MonacoEnvironment: {
-    getWorkerUrl(): string
-  }
-  monaco: typeof Monaco
+    getWorkerUrl(): string;
+  };
+  monaco: typeof Monaco;
 }
 
 declare const window: Window;
 
-type Callback = (monaco: typeof Monaco) => void
+type Callback = (monaco: typeof Monaco) => void;
 
 let state = 'uninitialized';
 
@@ -30,16 +32,23 @@ export const loadMonaco = (onload: Callback) => {
 
   state = 'loading';
 
-  const proxy = URL.createObjectURL(new Blob([`
+  const proxy = URL.createObjectURL(
+    new Blob(
+      [
+        `
     self.MonacoEnvironment = {
       baseUrl: '${monacoURL}/min/'
     };
     importScripts('${monacoURL}/min/vs/base/worker/workerMain.js');
     importScripts('${monacoURL}/min/vs/language/json/jsonWorker.js');
-  `], { type: 'text/javascript' }));
+  `,
+      ],
+      { type: 'text/javascript' }
+    )
+  );
 
   const handleLoad = () => {
-    window.require.config({ paths: { 'vs': `${monacoURL}/min/vs` } });
+    window.require.config({ paths: { vs: `${monacoURL}/min/vs` } });
     window.MonacoEnvironment = { getWorkerUrl: () => proxy };
 
     window.require(['vs/editor/editor.main'], () => {
diff --git a/src/lib/monaco/types.ts b/src/lib/monaco/types.ts
index 36eb672b0..3d5d45fd9 100644
--- a/src/lib/monaco/types.ts
+++ b/src/lib/monaco/types.ts
@@ -1,21 +1,21 @@
 export * as Monaco from 'monaco-editor';
 
 export type MonacoSupportedLanguages =
-| 'json'
-| 'javascript'
-| 'typescript'
-| 'python'
-| 'go'
-| 'shell';
+  | 'json'
+  | 'javascript'
+  | 'typescript'
+  | 'python'
+  | 'go'
+  | 'shell';
 
 export interface Schema {
-  $ref: string
-  $schema: string
-  definitions: Definition
+  $ref: string;
+  $schema: string;
+  definitions: Definition;
 }
 
 export interface Definition {
-  [key: string]: SubSchema
+  [key: string]: SubSchema;
 }
 
 type DataTypes =
@@ -25,29 +25,29 @@ type DataTypes =
   | 'boolean'
   | 'integer'
   | 'object'
-  | 'undefined'
+  | 'undefined';
 
 export interface Item {
-  $schema?: string
-  $ref?: string
-  type?: DataTypes
+  $schema?: string;
+  $ref?: string;
+  type?: DataTypes;
 }
 
 export interface Property {
-  [key: string] : {
-    description?: string
-    type?: string
-    items?: Item
-    patternProperties?: object
-    $ref?: string
-  }
+  [key: string]: {
+    description?: string;
+    type?: string;
+    items?: Item;
+    patternProperties?: object;
+    $ref?: string;
+  };
 }
 
 export interface SubSchema {
-  additionalProperties?: boolean
-  properties: Property
-  required?: string[]
-  type: string
+  additionalProperties?: boolean;
+  properties: Property;
+  required?: string[];
+  type: string;
 }
 
 export interface MonacoSchema {
@@ -56,5 +56,5 @@ export interface MonacoSchema {
   readonly schema?: unknown;
 }
 
-export type MonacoSupportedThemes = 'vs' | 'vs-dark'
-export type MonacoMarker = monaco.editor.IMarker
+export type MonacoSupportedThemes = 'vs' | 'vs-dark';
+export type MonacoMarker = monaco.editor.IMarker;
diff --git a/src/lib/remove-newline-whitespace.ts b/src/lib/remove-newline-whitespace.ts
index c452aa041..c8b935cac 100644
--- a/src/lib/remove-newline-whitespace.ts
+++ b/src/lib/remove-newline-whitespace.ts
@@ -1,4 +1,4 @@
-const newlineWhitespaceRegex = /\s+|\r?\n|\r/g
+const newlineWhitespaceRegex = /\s+|\r?\n|\r/g;
 
-export const removeNewlineWhitespace = (value: string) => 
-  value.replace(newlineWhitespaceRegex, '')
+export const removeNewlineWhitespace = (value: string) =>
+  value.replace(newlineWhitespaceRegex, '');
diff --git a/src/lib/sort.ts b/src/lib/sort.ts
index ff8a37a68..351ab9e82 100644
--- a/src/lib/sort.ts
+++ b/src/lib/sort.ts
@@ -1,16 +1,20 @@
 /* eslint-disable unicorn/prefer-regexp-test */
 export const addSpecialCharacterEscapes = (value: string) => {
-  // This function takes a value and adds backslashes for special chars 
+  // This function takes a value and adds backslashes for special chars
   // so that it doesn't treat it as a special character in a
   let newValue = '';
 
   for (const element of value) {
     newValue += /[^\dA-Za-z]/.test(element) ? `\\${element}` : element;
   }
-  return newValue
+  return newValue;
 };
 
-export const searchSort = (data: string[], searchTerm: string, reduce: boolean) => {
+export const searchSort = (
+  data: string[],
+  searchTerm: string,
+  reduce: boolean
+) => {
   const results: Record<string, string[]> = {};
   const termCopy = addSpecialCharacterEscapes(searchTerm);
 
@@ -45,13 +49,13 @@ export const searchSort = (data: string[], searchTerm: string, reduce: boolean)
   if (reduce) {
     for (const key of Object.keys(results)) {
       if (Number.parseInt(key, 10) !== -1) {
-        const sorted = (results[key] || []);
+        const sorted = results[key] || [];
         finalResults.push(...sorted);
       }
     }
   } else {
     for (const key of Object.keys(results)) {
-      const sorted = (results[key] || []);
+      const sorted = results[key] || [];
       finalResults.push(...sorted);
     }
   }
diff --git a/src/main.ts b/src/main.ts
index d3aa914a1..19ae0eaf9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,7 +10,7 @@ import { loadFonts } from './lib';
 if (customElements.get('v-badge')) {
   console.warn('WARNING: Multiple instances of PRIME being imported.');
 } else {
-  loadFonts().catch(error => console.error(error));
+  loadFonts().catch((error) => console.error(error));
 
   import('./elements/badge.svelte');
   import('./elements/breadcrumbs.svelte');
diff --git a/src/stories/assets/diff-example.js b/src/stories/assets/diff-example.js
index f0515f402..523ff6716 100644
--- a/src/stories/assets/diff-example.js
+++ b/src/stories/assets/diff-example.js
@@ -1,13 +1,13 @@
-export const previous = (`
+export const previous = `
 { 
   "name": "bob",
   "age": "400",
   "role": "Senescence research",
   "favorite_food": "pizza"
 }
-`).trim();
+`.trim();
 
-export const value = (`
+export const value = `
 { 
   "name": "bob",
   "age": "400",
@@ -15,5 +15,4 @@ export const value = (`
   "favorite_food": "salad",
   "status": "healthy"
 }
-`).trim();
-
+`.trim();
diff --git a/src/stories/assets/go-code-example.js b/src/stories/assets/go-code-example.js
index a655d6174..45dc5ced7 100644
--- a/src/stories/assets/go-code-example.js
+++ b/src/stories/assets/go-code-example.js
@@ -1,4 +1,4 @@
-export default (`
+export default `
 package main
 
 import "fmt"
@@ -6,4 +6,4 @@ import "fmt"
 func DoSomething(thing string) {
 	fmt.Println(thing)
 }
-`).trim();
+`.trim();
diff --git a/src/stories/assets/javascript-code-example.js b/src/stories/assets/javascript-code-example.js
index a89095604..b205b8770 100644
--- a/src/stories/assets/javascript-code-example.js
+++ b/src/stories/assets/javascript-code-example.js
@@ -1,5 +1,5 @@
-export default (`
+export default `
 function doSomething(thing) { 
   console.log(thing) 
 }
-`).trim();
+`.trim();
diff --git a/src/stories/assets/json-code-example.js b/src/stories/assets/json-code-example.js
index 87881d2be..d0db37d7a 100644
--- a/src/stories/assets/json-code-example.js
+++ b/src/stories/assets/json-code-example.js
@@ -1,5 +1,9 @@
-export default JSON.stringify({ 
-  name: 'Bob',
-  age: 400,
-  favorite_food: 'pizza',
-}, null, 2);
+export default JSON.stringify(
+  {
+    name: 'Bob',
+    age: 400,
+    favorite_food: 'pizza',
+  },
+  null,
+  2
+);
diff --git a/src/stories/assets/python-code-example.js b/src/stories/assets/python-code-example.js
index a0d4e75b9..ea4d513cd 100644
--- a/src/stories/assets/python-code-example.js
+++ b/src/stories/assets/python-code-example.js
@@ -1,6 +1,4 @@
-export default (`
+export default `
 def do_something(thing):
     print(thing)    
-`).trim();
-
-
+`.trim();
diff --git a/src/stories/assets/shell-code-example.js b/src/stories/assets/shell-code-example.js
index 36b0ed7b9..407d49451 100644
--- a/src/stories/assets/shell-code-example.js
+++ b/src/stories/assets/shell-code-example.js
@@ -1,4 +1,4 @@
-export default (`
+export default `
 #!/bin/sh
 echo "Hello world"
-`).trim();
+`.trim();
diff --git a/src/stories/assets/typescript-code-example.js b/src/stories/assets/typescript-code-example.js
index 64915b334..966db1e46 100644
--- a/src/stories/assets/typescript-code-example.js
+++ b/src/stories/assets/typescript-code-example.js
@@ -1,5 +1,5 @@
-export default (`
+export default `
 function doSomething(thing: string): void { 
     console.log(thing) 
   }
-`).trim();
+`.trim();
diff --git a/src/stories/badge.stories.mdx b/src/stories/badge.stories.mdx
index 715c54026..ac13cd760 100644
--- a/src/stories/badge.stories.mdx
+++ b/src/stories/badge.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/Badge'
@@ -7,12 +7,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
       description: 'The badge color',
       control: { type: 'select' },
       options: ['gray', 'green', 'orange', 'red'],
-      table: { defaultValue: { summary: 'gray' } }
+      table: { defaultValue: { summary: 'gray' } },
     },
     label: {
       description: 'The badge status',
-      table: { defaultValue: { summary: '' } }
-    }
+      table: { defaultValue: { summary: '' } },
+    },
   }}
 />
 
diff --git a/src/stories/breadcrumbs.stories.mdx b/src/stories/breadcrumbs.stories.mdx
index 9764a622c..a241efc99 100644
--- a/src/stories/breadcrumbs.stories.mdx
+++ b/src/stories/breadcrumbs.stories.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/Breadcrumbs'
   argTypes={{
     crumbs: {
       description: 'A list of breadcrumbs',
-      table: { defaultValue: { summary: '' } }
+      table: { defaultValue: { summary: '' } },
     },
   }}
 />
@@ -27,4 +27,4 @@ A navigation aid that helps users easily understand the relation between parents
       />
     `}
   </Story>
-</Canvas>
\ No newline at end of file
+</Canvas>
diff --git a/src/stories/button.stories.mdx b/src/stories/button.stories.mdx
index 8e37a6010..9a83fa00b 100644
--- a/src/stories/button.stories.mdx
+++ b/src/stories/button.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/Button'
@@ -10,19 +10,25 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
   argTypes={{
     label: {
       description: 'Text displayed to users',
-      table: { defaultValue: { summary: '' } }
+      table: { defaultValue: { summary: '' } },
     },
     variant: {
       description: 'The communicated action type of the button',
       control: 'select',
-      options: ['primary', 'inverse-primary', 'success', 'danger', 'outline-danger'],
-      table: { defaultValue: { summary: 'primary' } }
+      options: [
+        'primary',
+        'inverse-primary',
+        'success',
+        'danger',
+        'outline-danger',
+      ],
+      table: { defaultValue: { summary: 'primary' } },
     },
     type: {
       description: 'The type attribute for the button',
       control: 'select',
-      options: [ 'button', 'submit', 'reset'],
-      table: { defaultValue: { summary: 'button' } }
+      options: ['button', 'submit', 'reset'],
+      table: { defaultValue: { summary: 'button' } },
     },
   }}
 />
@@ -51,7 +57,7 @@ For user triggered actions
     name='Inverse Primary'
     args={{
       label: 'RUN',
-      variant: 'inverse-primary'
+      variant: 'inverse-primary',
     }}
   >
     {({ label, variant }) => `
diff --git a/src/stories/collapse.stories.mdx b/src/stories/collapse.stories.mdx
index c2bbc3a74..f9c3cecfe 100644
--- a/src/stories/collapse.stories.mdx
+++ b/src/stories/collapse.stories.mdx
@@ -1,7 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
-  title="Elements/Collapse"
+  title='Elements/Collapse'
   parameters={{
     actions: {
       handles: ['toggle'],
@@ -11,7 +11,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
     variant: {
       options: ['default', ''],
       control: { type: 'select' },
-      description: 'These are the options. The default variant adds a black border and white background',
+      description:
+        'These are the options. The default variant adds a black border and white background',
       table: { defaultValue: { summary: 'default' } },
     },
     title: {
@@ -38,7 +39,8 @@ Toggles visibility of content
     name='Collapse'
     args={{
       title: 'Motor 1',
-      content: 'Motor one was concieved and executed at Bell Labs in 1972 under the guidance of lead director Dennis Richie and Superviser Wallace Breen.',
+      content:
+        'Motor one was concieved and executed at Bell Labs in 1972 under the guidance of lead director Dennis Richie and Superviser Wallace Breen.',
     }}
   >
     {({ title, content }) => `
@@ -47,8 +49,7 @@ Toggles visibility of content
       >
         <div style='font-size: 12px; padding: 1rem; border: 1px solid; border-top: none;'>${content}</div>
       </v-collapse>
-    `
-    }
+    `}
   </Story>
 </Canvas>
 
@@ -57,7 +58,8 @@ Toggles visibility of content
     name='Header slot'
     args={{
       title: 'Motor 1',
-      content: 'Motor one was concieved and executed at Bell Labs in 1972 under the guidance of lead director Dennis Richie and Superviser Wallace Breen.',
+      content:
+        'Motor one was concieved and executed at Bell Labs in 1972 under the guidance of lead director Dennis Richie and Superviser Wallace Breen.',
     }}
   >
     {({ title, content }) => `
@@ -67,8 +69,7 @@ Toggles visibility of content
         <v-badge slot='header' label='Inactive'></v-badge>
         <div style='font-size: 12px; padding: 1rem; border: 1px solid; border-top: none;'>${content}</div>
       </v-collapse>
-    `
-    }
+    `}
   </Story>
 </Canvas>
 
@@ -77,7 +78,8 @@ Toggles visibility of content
     name='Title slot'
     args={{
       title: 'Motor 1',
-      content: 'Motor one was concieved and executed at Bell Labs in 1972 under the guidance of lead director Dennis Richie and Superviser Wallace Breen.',
+      content:
+        'Motor one was concieved and executed at Bell Labs in 1972 under the guidance of lead director Dennis Richie and Superviser Wallace Breen.',
     }}
   >
     {({ title, content }) => `
@@ -88,8 +90,7 @@ Toggles visibility of content
         <v-badge slot='header' label='Inactive'></v-badge>
         <div style='font-size: 12px; padding: 1rem; border: 1px solid; border-top: none;'>${content}</div>
       </v-collapse>
-    `
-    }
+    `}
   </Story>
 </Canvas>
 
@@ -98,7 +99,8 @@ Toggles visibility of content
     name='No Background and No Border'
     args={{
       title: 'Motor 1',
-      content: 'Motor one was concieved and executed at Bell Labs in 1972 under the guidance of lead director Dennis Richie and Superviser Wallace Breen.',
+      content:
+        'Motor one was concieved and executed at Bell Labs in 1972 under the guidance of lead director Dennis Richie and Superviser Wallace Breen.',
     }}
   >
     {({ title, content }) => `
@@ -110,9 +112,6 @@ Toggles visibility of content
         <v-badge slot='header' label='Inactive'></v-badge>
         <div style='font-size: 12px; padding: 1rem'>${content}</div>
       </v-collapse>
-    `
-    }
+    `}
   </Story>
 </Canvas>
-
-
diff --git a/src/stories/docs/contributing.stories.mdx b/src/stories/docs/contributing.stories.mdx
index 37573e7a1..047c94dee 100644
--- a/src/stories/docs/contributing.stories.mdx
+++ b/src/stories/docs/contributing.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
-import Contributing from "../../../CONTRIBUTING.md";
+import Contributing from '../../../CONTRIBUTING.md';
 
-<Meta title="Docs/Contributing" />
+<Meta title='Docs/Contributing' />
 
 <Contributing />
diff --git a/src/stories/docs/introduction.stories.mdx b/src/stories/docs/introduction.stories.mdx
index 9013b5e70..386fbffe8 100644
--- a/src/stories/docs/introduction.stories.mdx
+++ b/src/stories/docs/introduction.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
-import Readme from "../../../README.md";
+import Readme from '../../../README.md';
 
-<Meta title="Docs/Introduction" />
+<Meta title='Docs/Introduction' />
 
-<Readme />
\ No newline at end of file
+<Readme />
diff --git a/src/stories/docs/storybook.stories.mdx b/src/stories/docs/storybook.stories.mdx
index db9764696..e9f5a5809 100644
--- a/src/stories/docs/storybook.stories.mdx
+++ b/src/stories/docs/storybook.stories.mdx
@@ -8,7 +8,7 @@ import Plugin from '../assets/plugin.svg';
 import Repo from '../assets/repo.svg';
 import StackAlt from '../assets/stackalt.svg';
 
-<Meta title="Docs/Storybook" />
+<Meta title='Docs/Storybook' />
 
 <style>
   {`
@@ -123,48 +123,48 @@ Browse example stories now by navigating to them in the sidebar.
 View their code in the `stories` directory to learn how they work.
 We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
 
-<div className="subheading">Configure</div>
+<div className='subheading'>Configure</div>
 
-<div className="link-list">
+<div className='link-list'>
   <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
+    className='link-item'
+    href='https://storybook.js.org/docs/react/addons/addon-types'
+    target='_blank'
   >
-    <img src={Plugin} alt="plugin" />
+    <img src={Plugin} alt='plugin' />
     <span>
       <strong>Presets for popular tools</strong>
       Easy setup for TypeScript, SCSS and more.
     </span>
   </a>
   <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
+    className='link-item'
+    href='https://storybook.js.org/docs/react/configure/webpack'
+    target='_blank'
   >
-    <img src={StackAlt} alt="Build" />
+    <img src={StackAlt} alt='Build' />
     <span>
       <strong>Build configuration</strong>
       How to customize webpack and Babel
     </span>
   </a>
   <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
+    className='link-item'
+    href='https://storybook.js.org/docs/react/configure/styling-and-css'
+    target='_blank'
   >
-    <img src={Colors} alt="colors" />
+    <img src={Colors} alt='colors' />
     <span>
       <strong>Styling</strong>
       How to load and configure CSS libraries
     </span>
   </a>
   <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
+    className='link-item'
+    href='https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack'
+    target='_blank'
   >
-    <img src={Flow} alt="flow" />
+    <img src={Flow} alt='flow' />
     <span>
       <strong>Data</strong>
       Providers and mocking for data libraries
@@ -172,32 +172,40 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
   </a>
 </div>
 
-<div className="subheading">Learn</div>
+<div className='subheading'>Learn</div>
 
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
+<div className='link-list'>
+  <a className='link-item' href='https://storybook.js.org/docs' target='_blank'>
+    <img src={Repo} alt='repo' />
     <span>
       <strong>Storybook documentation</strong>
       Configure, customize, and extend
     </span>
   </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
+  <a
+    className='link-item'
+    href='https://storybook.js.org/tutorials/'
+    target='_blank'
+  >
+    <img src={Direction} alt='direction' />
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
+  <a
+    className='link-item'
+    href='https://github.com/storybookjs/storybook'
+    target='_blank'
+  >
+    <img src={Code} alt='code' />
     <span>
       <strong>GitHub project</strong>
       View the source and add issues
     </span>
   </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
+  <a className='link-item' href='https://discord.gg/storybook' target='_blank'>
+    <img src={Comments} alt='comments' />
     <span>
       <strong>Discord chat</strong>
       Chat with maintainers and the community
@@ -205,7 +213,7 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
   </a>
 </div>
 
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
+<div className='tip-wrapper'>
+  <span className='tip'>Tip</span>Edit the Markdown in{' '}
   <code>stories/Introduction.stories.mdx</code>
 </div>
diff --git a/src/stories/dropdown.stories.mdx b/src/stories/dropdown.stories.mdx
index 1e1b9f7b2..8d497008f 100644
--- a/src/stories/dropdown.stories.mdx
+++ b/src/stories/dropdown.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/Dropdown'
@@ -11,20 +11,20 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
     match: {
       description: 'Force dropdown width to match target width',
       control: { type: 'boolean' },
-      table: { defaultValue: {summary: false} }
+      table: { defaultValue: { summary: false } },
     },
-     target: {
+    target: {
       description: 'Dropdown target. Receives text and HTML',
       control: { type: 'text' },
-      table: { defaultValue: {summary: ""} }
+      table: { defaultValue: { summary: '' } },
     },
     content: {
       description: 'Dropdown content. Receives text and HTML',
       control: { type: 'text' },
-      table: { defaultValue: {summary: ""} }
+      table: { defaultValue: { summary: '' } },
     },
     'on:toggle': {
-      description: 'Event fired when dropdown is toggled'
+      description: 'Event fired when dropdown is toggled',
     },
     open: {
       description: 'Used to control whether dropdown is open',
@@ -43,13 +43,13 @@ Gives target element the ability to open a dropdown below itself
     args={{
       match: false,
       open: false,
-      content: "This is the dropdown content",
-      target: "Dropdown target",
+      content: 'This is the dropdown content',
+      target: 'Dropdown target',
     }}
   >
-    {({ content, match, open, controlled, target  }) => `
+    {({ content, match, open, controlled, target }) => `
       <div style="padding: 50px 0px">
-        <v-dropdown ${match ? "match" : ""} ${open ? "open" : ""}>
+        <v-dropdown ${match ? 'match' : ''} ${open ? 'open' : ''}>
           <v-button label="${target}" slot="target"></v-button>
           <div 
             slot="content"
@@ -63,19 +63,18 @@ Gives target element the ability to open a dropdown below itself
   </Story>
 </Canvas>
 
-
 <Canvas>
   <Story
     name='Dropdown with HTML content'
     args={{
       match: false,
-      content: "This is the dropdown content",
+      content: 'This is the dropdown content',
       open: false,
     }}
   >
-    {({ content, match, open  }) => `
+    {({ content, match, open }) => `
       <div style="padding: 50px 0px">
-        <v-dropdown ${match ? "match" : ""} ${open ? "open" : ""}>
+        <v-dropdown ${match ? 'match' : ''} ${open ? 'open' : ''}>
           <v-button label="Choose your character" slot="target"></v-button>
           <div 
             slot="content"
diff --git a/src/stories/examples/form.stories.mdx b/src/stories/examples/form.stories.mdx
index 54f88359f..510104b26 100644
--- a/src/stories/examples/form.stories.mdx
+++ b/src/stories/examples/form.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Examples/Form'
@@ -109,4 +109,3 @@ This examples shows a form built using PRIME elements.
     `}
   </Story>
 </Canvas>
-
diff --git a/src/stories/examples/input.stories.mdx b/src/stories/examples/input.stories.mdx
index 5786fc618..24ca6afe0 100644
--- a/src/stories/examples/input.stories.mdx
+++ b/src/stories/examples/input.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta title='Examples/Input' />
 
@@ -23,4 +23,4 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
       </div>
     `}
   </Story>
-</Canvas>
\ No newline at end of file
+</Canvas>
diff --git a/src/stories/icon.stories.mdx b/src/stories/icon.stories.mdx
index 5f1a556c2..1fe826bcc 100644
--- a/src/stories/icon.stories.mdx
+++ b/src/stories/icon.stories.mdx
@@ -1,18 +1,18 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/Icon'
   argTypes={{
     name: {
       description: 'The icon name',
-      table: { defaultValue: { summary: '' } }
+      table: { defaultValue: { summary: '' } },
     },
     size: {
       description: 'The badge status',
       control: { type: 'select' },
       options: ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl'],
-      table: { defaultValue: { summary: 'base' } }
-    }
+      table: { defaultValue: { summary: 'base' } },
+    },
   }}
 />
 
@@ -80,4 +80,4 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
       <v-icon name='trash'></v-icon>
     `}
   </Story>
-</Canvas>
\ No newline at end of file
+</Canvas>
diff --git a/src/stories/input.stories.mdx b/src/stories/input.stories.mdx
index 28bdbcb49..246f231e0 100644
--- a/src/stories/input.stories.mdx
+++ b/src/stories/input.stories.mdx
@@ -1,7 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
-  title="Elements/Input"
+  title='Elements/Input'
   parameters={{
     actions: {
       handles: ['input'],
@@ -77,7 +77,7 @@ Used for all text single-line user inputs.
       tooltip: 'It works with a tooltip too.',
       placeholder: 'Enter soup here',
       value: 'Chicken Noodle',
-      required: true
+      required: true,
     }}
   >
     {({ type, label, tooltip, placeholder, value }) => `
@@ -125,7 +125,7 @@ Used for all text single-line user inputs.
       placeholder: '0',
       value: '',
       step: 0.1,
-      incrementor: 'slider'
+      incrementor: 'slider',
     }}
   >
     {({ type, label, placeholder, value, step, incrementor }) => `
@@ -141,7 +141,6 @@ Used for all text single-line user inputs.
   </Story>
 </Canvas>
 
-
 <Canvas>
   <Story
     name='Integer'
@@ -228,8 +227,6 @@ Used for all text single-line user inputs.
   </Story>
 </Canvas>
 
-
-
 <Canvas>
   <Story
     name='No label'
@@ -299,7 +296,8 @@ Used for all text single-line user inputs.
     args={{
       label: `Favorite soup`,
       value: 'Cereal',
-      tooltip: 'Unsupported soup type. Eat at your own risk. Or eat a recognized soup instead.',
+      tooltip:
+        'Unsupported soup type. Eat at your own risk. Or eat a recognized soup instead.',
     }}
   >
     {({ label, tooltip, value }) => `
@@ -312,7 +310,6 @@ Used for all text single-line user inputs.
   </Story>
 </Canvas>
 
-
 <Canvas>
   <Story
     name='Readonly'
@@ -360,7 +357,7 @@ Used for all text single-line user inputs.
       label: `Board`,
       value: '',
       message: 'some message',
-      state: 'info'
+      state: 'info',
     }}
   >
     {({ label, value, message, state }) => `
diff --git a/src/stories/list-box.stories.mdx b/src/stories/list-box.stories.mdx
index 732a37bae..881899583 100644
--- a/src/stories/list-box.stories.mdx
+++ b/src/stories/list-box.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/ListBox'
@@ -10,7 +10,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
   argTypes={{
     left: {
       description: 'The options appearing in the left',
-      table: { defaultValue: { summary: '' } }
+      table: { defaultValue: { summary: '' } },
     },
     right: {
       description: 'The options appearing in the right',
@@ -34,20 +34,23 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
       table: { defaultValue: { summary: '200px' } },
     },
     suffix: {
-      description: 'Display suffix values. Assumes suffix portion is space-separated from intended value',
+      description:
+        'Display suffix values. Assumes suffix portion is space-separated from intended value',
       table: { defaultValue: { summary: false } },
-      control: { type: 'boolean'}
+      control: { type: 'boolean' },
     },
     'on:option-click': {
       description: 'Event fired whenever any option is clicked',
     },
     'on:move': {
-      description: 'Event fired whenever data is moved from one side to the other',
+      description:
+        'Event fired whenever data is moved from one side to the other',
     },
   }}
 />
 
 # ListBox
+
 <Canvas>
   <Story
     name='Default'
@@ -58,7 +61,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
       rightlabel: 'Box 1',
       disabled: false,
       height: '200px',
-      suffix: false
+      suffix: false,
     }}
   >
     {({ left, right, leftlabel, rightlabel, disabled, height, suffix }) => `
@@ -85,7 +88,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
       rightlabel: 'Box 1',
       disabled: true,
       height: '200px',
-      suffix: false
+      suffix: false,
     }}
   >
     {({ left, right, leftlabel, rightlabel, disabled, height, suffix }) => `
@@ -112,7 +115,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
       rightlabel: 'Box 1',
       disabled: false,
       height: '200px',
-      suffix: false
+      suffix: false,
     }}
   >
     {({ left, right, leftlabel, rightlabel, disabled, height, suffix }) => `
@@ -137,12 +140,13 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
     name='With suffix'
     args={{
       left: 'Charmander Fire,Pikachu Electric,Venusaur Grass',
-      right: 'Nidoqueen Poison,Butterfree Poison/Bug,Ditto Normal,Gyardos Water/Dragon,Machamp Fighting',
+      right:
+        'Nidoqueen Poison,Butterfree Poison/Bug,Ditto Normal,Gyardos Water/Dragon,Machamp Fighting',
       leftlabel: 'Team',
       rightlabel: 'Box 1',
       disabled: false,
       height: '200px',
-      suffix: true
+      suffix: true,
     }}
   >
     {({ left, right, leftlabel, rightlabel, disabled, height, suffix }) => `
@@ -157,4 +161,4 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
       />
     `}
   </Story>
-</Canvas>
\ No newline at end of file
+</Canvas>
diff --git a/src/stories/modal.stories.mdx b/src/stories/modal.stories.mdx
index 33654f57d..9ec28c53f 100644
--- a/src/stories/modal.stories.mdx
+++ b/src/stories/modal.stories.mdx
@@ -1,7 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
-  title="Elements/Modal"
+  title='Elements/Modal'
   parameters={{
     actions: {
       handles: ['close'],
@@ -27,8 +27,14 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
     variant: {
       description: 'The communicated action type of the button (demo only)',
       control: 'select',
-      options: ['primary', 'inverse-primary', 'success', 'danger', 'outline-danger'],
-      table: { defaultValue: { summary: 'primary' } }
+      options: [
+        'primary',
+        'inverse-primary',
+        'success',
+        'danger',
+        'outline-danger',
+      ],
+      table: { defaultValue: { summary: 'primary' } },
     },
   }}
 />
@@ -51,7 +57,7 @@ Creates a modal overlay
     {({ title, message, variant, buttonText, open }) => `
       <div style="height: 16rem">
         <v-modal
-          ${open ? "open" : ""}
+          ${open ? 'open' : ''}
           title='${title}'
           message='${message}'
           onclose='this.removeAttribute("open")'
diff --git a/src/stories/multiselect.stories.mdx b/src/stories/multiselect.stories.mdx
index 54b7c4372..7647c7008 100644
--- a/src/stories/multiselect.stories.mdx
+++ b/src/stories/multiselect.stories.mdx
@@ -1,108 +1,118 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import gpioOptions from './assets/gpio-options'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import gpioOptions from './assets/gpio-options';
 
 <Meta
   title='Elements/Select/Multi-Select'
   parameters={{
     actions: {
-      handles: ['input', 'button-click', 'search', 'clear-all-click', 'enter-press', 'open', 'close'],
+      handles: [
+        'input',
+        'button-click',
+        'search',
+        'clear-all-click',
+        'enter-press',
+        'open',
+        'close',
+      ],
     },
   }}
   argTypes={{
     label: {
       description: 'The label of the multiselect',
-      table: { 
+      table: {
         defaultValue: { summary: '' },
-        type: { summary: 'string' }
+        type: { summary: 'string' },
       },
-      control: 'text'
+      control: 'text',
     },
     options: {
-      description: 'The list of options that can be selected from, separated by commas',
-      table: { 
+      description:
+        'The list of options that can be selected from, separated by commas',
+      table: {
         defaultValue: { summary: '' },
-        type: { summary: 'string' }
+        type: { summary: 'string' },
       },
-      control: 'text'
+      control: 'text',
     },
     value: {
       description: 'Options that are selected',
-      table: { 
+      table: {
         defaultValue: { summary: '' },
-        type: { summary: 'string' }
+        type: { summary: 'string' },
       },
-      control: 'text'
+      control: 'text',
     },
     placeholder: {
       description: 'The placeholder value in input',
-      table: { 
+      table: {
         defaultValue: { summary: '' },
-        type: { summary: 'string' }
+        type: { summary: 'string' },
       },
-      control: 'text'
+      control: 'text',
     },
-    showpill: { 
+    showpill: {
       description: 'The option to not show pills representing selected values',
-      table: { 
+      table: {
         defaultValue: { summary: 'true' },
-        type: { summary: 'boolean' }
+        type: { summary: 'boolean' },
       },
-      control: { type: 'boolean' }
+      control: { type: 'boolean' },
     },
     clearable: {
       description: 'Option to have "Clear all" button to deselect all options',
       table: {
         defaultValue: { summary: 'true' },
-        type: { summary: 'boolean' }
+        type: { summary: 'boolean' },
       },
-      control: { type: 'boolean' }
+      control: { type: 'boolean' },
     },
     withbutton: {
       description: 'Whether a button exists at the bottom to conduct an action',
-      table: { 
+      table: {
         defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' }
+        type: { summary: 'boolean' },
       },
-      control: { type: 'boolean' }
+      control: { type: 'boolean' },
     },
     buttontext: {
       description: 'Text on the button',
-      table: { 
+      table: {
         defaultValue: { summary: 'ENTER' },
-        type: { summary: 'string' }
+        type: { summary: 'string' },
       },
-      control: 'text'
+      control: 'text',
     },
     buttonicon: {
       description: 'Icon on the button, can use any from v-icon',
-      table: { 
+      table: {
         defaultValue: { summary: '' },
-        type: { summary: 'string' }
+        type: { summary: 'string' },
       },
-      control: 'text'
+      control: 'text',
     },
     sortoption: {
-      description: 'how we want the values to be searched and sorted inside the component',
-      table: { 
+      description:
+        'how we want the values to be searched and sorted inside the component',
+      table: {
         defaultValue: { summary: 'default' },
-        type: { summary: 'string'}
+        type: { summary: 'string' },
       },
       options: ['default', 'reduce', 'off'],
       control: { type: 'radio' },
-      type: 'text'
+      type: 'text',
     },
     heading: {
       description: 'Subheading inside the dropdown to describe the information',
-      table: { 
+      table: {
         defaultValue: { summary: '' },
-        type: { summary: 'string'}
+        type: { summary: 'string' },
       },
-      control: 'text'
+      control: 'text',
     },
     'on:input': {
       description: 'Event fired when an option is selected',
-      table: { 
-        type: { summary: 'object' }
+      table: {
+        type: { summary: 'object' },
       },
     },
     'on:button-click': {
@@ -110,7 +120,7 @@ import gpioOptions from './assets/gpio-options'
     },
     'on:search': {
       description: 'Event fired when the search input is changed',
-      table: { 
+      table: {
         type: { summary: 'string' },
       },
     },
@@ -124,12 +134,12 @@ import gpioOptions from './assets/gpio-options'
       description: 'Event fired when dropdown closes',
     },
     'on:clear-all-click': {
-      description: 'Event fired when "Clear All" is pressed and values are cleared',
+      description:
+        'Event fired when "Clear All" is pressed and values are cleared',
     },
   }}
 />
 
-
 # Multi-Select
 
 Dropdown that allows the user to select multiple choices.
@@ -138,11 +148,11 @@ Dropdown that allows the user to select multiple choices.
   <Story
     name='Default'
     args={{
-      label: "Default Multi-select",
+      label: 'Default Multi-select',
       options: 'happy, sad, angry',
     }}
   >
-    {({label, options}) => `
+    {({ label, options }) => `
       <v-multiselect
         label='${label}'
         options='${options}'
@@ -153,12 +163,12 @@ Dropdown that allows the user to select multiple choices.
 
 <Canvas>
   <Story
-    name="With Value and Placeholder"
+    name='With Value and Placeholder'
     args={{
-      label: "With Value and Placeholder",
-      options: "Option 1, Option 2, Option 3",
-      value: "Option 1, Option 3",
-      placeholder: "Some placeholder..."
+      label: 'With Value and Placeholder',
+      options: 'Option 1, Option 2, Option 3',
+      value: 'Option 1, Option 3',
+      placeholder: 'Some placeholder...',
     }}
   >
     {({ label, options, value, placeholder }) => `
@@ -172,7 +182,6 @@ Dropdown that allows the user to select multiple choices.
   </Story>
 </Canvas>
 
-
 <Canvas>
   <Story
     name='With Button'
@@ -202,10 +211,10 @@ Dropdown that allows the user to select multiple choices.
     args={{
       label: 'With Heading',
       options: 'a1, a2, a3, a4',
-      heading: 'A Values'
+      heading: 'A Values',
     }}
   >
-    {({ label, options, heading}) => `
+    {({ label, options, heading }) => `
       <v-multiselect
         label='${label}'
         options='${options}'
@@ -245,7 +254,7 @@ Dropdown that allows the user to select multiple choices.
       label: 'Your options',
       options: 'Option 1, Option 2, Option 3',
       readonly: 'true',
-      value: 'Option 1, Option 2'
+      value: 'Option 1, Option 2',
     }}
   >
     {({ label, options, readonly, value }) => `
@@ -259,7 +268,6 @@ Dropdown that allows the user to select multiple choices.
   </Story>
 </Canvas>
 
-
 <Canvas>
   <Story
     name='With Tooltip'
@@ -314,7 +322,7 @@ Dropdown that allows the user to select multiple choices.
       showpill: 'false',
     }}
   >
-    {({ label, options, value, showpill  }) => `
+    {({ label, options, value, showpill }) => `
       <v-multiselect
         label='${label}'
         options='${options}'
@@ -382,4 +390,4 @@ Dropdown that allows the user to select multiple choices.
       />
     `}
   </Story>
-</Canvas>
\ No newline at end of file
+</Canvas>
diff --git a/src/stories/notify.stories.mdx b/src/stories/notify.stories.mdx
index f1fa663a8..f3ba5d4c2 100644
--- a/src/stories/notify.stories.mdx
+++ b/src/stories/notify.stories.mdx
@@ -1,7 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
-  title="Elements/Notify"
+  title='Elements/Notify'
   parameters={{
     actions: {
       handles: ['toggle'],
@@ -199,9 +199,7 @@ Notify message of type info, success, warning, or error
 </Canvas>
 
 <Canvas>
-  <Story
-    name='Slot'
-  >
+  <Story name='Slot'>
     {() => `
       <v-notify>Slot example</v-notify>
     `}
diff --git a/src/stories/pill.stories.mdx b/src/stories/pill.stories.mdx
index 0e29e55bc..403297654 100644
--- a/src/stories/pill.stories.mdx
+++ b/src/stories/pill.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/Pill'
@@ -11,15 +11,16 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
     value: {
       description: 'Text displayed to within the pill',
       table: { defaultValue: { summary: '' } },
-      control: 'text'
+      control: 'text',
     },
     removable: {
-      description: 'to display the x icon and signal to external component to remove',
+      description:
+        'to display the x icon and signal to external component to remove',
       table: { defaultValue: { summary: 'true' } },
-      control: { type: 'boolean' }
+      control: { type: 'boolean' },
     },
     'on:remove': {
-      description: 'Event fired when x icon is clicked'
+      description: 'Event fired when x icon is clicked',
     },
   }}
 />
@@ -58,4 +59,4 @@ For displaying a list of items
       />
     `}
   </Story>
-</Canvas>
\ No newline at end of file
+</Canvas>
diff --git a/src/stories/radio.stories.mdx b/src/stories/radio.stories.mdx
index 29616f890..15e5fa7d9 100644
--- a/src/stories/radio.stories.mdx
+++ b/src/stories/radio.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/Radio'
@@ -25,18 +25,19 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
       table: { defaultValue: { summary: 'top' } },
       control: { type: 'radio' },
       options: ['top', 'left'],
-      type: 'text'
+      type: 'text',
     },
     tooltip: {
       description: 'An optional tooltip',
       table: { defaultValue: { summary: '' } },
     },
     state: {
-      description: 'The state for the optional tooltip (determines the icon type)',
+      description:
+        'The state for the optional tooltip (determines the icon type)',
       table: { defaultValue: { summary: 'info' } },
       control: { type: 'radio' },
       options: ['info', 'warn', 'error'],
-      type: 'text'
+      type: 'text',
     },
     'on:input': {
       description: 'Event fired when an option is selected',
@@ -98,7 +99,15 @@ For user triggered actions
       state: 'warn',
     }}
   >
-    {({ label, labelposition, options, selected, placeholder, tooltip, state }) => `
+    {({
+      label,
+      labelposition,
+      options,
+      selected,
+      placeholder,
+      tooltip,
+      state,
+    }) => `
       <v-radio
         label='${label}'
         labelposition='${labelposition}'
@@ -117,7 +126,7 @@ For user triggered actions
     args={{
       options: 'Opt 1, Opt 2, Opt 3',
       selected: 'Opt 1',
-      readonly: 'true'
+      readonly: 'true',
     }}
   >
     {({ options, selected, readonly }) => `
@@ -128,4 +137,4 @@ For user triggered actions
       />
     `}
   </Story>
-</Canvas>
\ No newline at end of file
+</Canvas>
diff --git a/src/stories/select.stories.mdx b/src/stories/select.stories.mdx
index c4f494001..e0c8b2a2c 100644
--- a/src/stories/select.stories.mdx
+++ b/src/stories/select.stories.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import gpioOptions from './assets/gpio-options'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import gpioOptions from './assets/gpio-options';
 
 <Meta
   title='Elements/Select/Select'
@@ -12,17 +12,17 @@ import gpioOptions from './assets/gpio-options'
     label: {
       description: 'The input label',
       table: { defaultValue: { summary: '' } },
-      control: 'text'
+      control: 'text',
     },
     options: {
       description: 'The list of options',
       table: { defaultValue: { summary: '' } },
-      control: 'text'
+      control: 'text',
     },
     value: {
       description: 'The selected value',
       table: { defaultValue: { summary: '' } },
-      control: 'text'
+      control: 'text',
     },
     placeholder: {
       description: 'The placeholder value',
@@ -30,53 +30,55 @@ import gpioOptions from './assets/gpio-options'
       control: 'text',
     },
     exact: {
-      description: 'If true, values can only be selected if an existing value matches what is inputted (single select ONLY)',
+      description:
+        'If true, values can only be selected if an existing value matches what is inputted (single select ONLY)',
       table: { defaultValue: { summary: 'false' } },
-      control: { type: 'boolean' }
+      control: { type: 'boolean' },
     },
     withbutton: {
       description: 'Whether a button exists at the bottom to conduct an action',
       table: { defaultValue: { summary: 'false' } },
-      control: { type: 'boolean' }
+      control: { type: 'boolean' },
     },
     buttontext: {
       description: 'The text on the button',
       table: { defaultValue: { summary: 'ENTER' } },
-      control: 'text'
+      control: 'text',
     },
     buttonicon: {
       description: 'The icon on the button, can use any from v-icon',
       table: { defaultValue: { summary: '' } },
-      control: 'text'
+      control: 'text',
     },
     sortoption: {
-      description: 'how we want the values to be searched and sorted inside the component',
-      table: { 
+      description:
+        'how we want the values to be searched and sorted inside the component',
+      table: {
         defaultValue: { summary: 'default' },
-        type: { summary: 'string'}
+        type: { summary: 'string' },
       },
       options: ['default', 'reduce', 'off'],
       control: { type: 'radio' },
-      type: 'text'
+      type: 'text',
     },
     state: {
       description: 'the state of the tooltip',
-      table: { 
+      table: {
         defaultValue: { summary: 'info' },
-        type: { summary: 'string'}
+        type: { summary: 'string' },
       },
       options: ['info', 'warn', 'error'],
       control: { type: 'radio' },
-      type: 'text'
+      type: 'text',
     },
     'on:input': {
-      description: 'Event fired when an option is selected'
+      description: 'Event fired when an option is selected',
     },
     'on:button-click': {
-      description: 'Event fired when button is clicked'
+      description: 'Event fired when button is clicked',
     },
     'on:search': {
-      description: 'Event fired when the search input is changed'
+      description: 'Event fired when the search input is changed',
     },
   }}
 />
@@ -108,7 +110,7 @@ For a dropdown that allows the user to select a single option
     args={{
       label: 'Select with Placeholder',
       options: 'Bob, Sally, Jimothy, Raechel, Apple, Andy, Robert',
-      placeholder: "Some placeholder..."
+      placeholder: 'Some placeholder...',
     }}
   >
     {({ label, options, placeholder }) => `
@@ -172,7 +174,7 @@ For a dropdown that allows the user to select a single option
       disabled: 'true',
     }}
   >
-    {({ label, options, disabled}) => `
+    {({ label, options, disabled }) => `
       <v-select
         label='${label}'
         options='${options}'
@@ -189,7 +191,7 @@ For a dropdown that allows the user to select a single option
       label: 'Readonly',
       options: 'Option 1, Option 2, Option 3',
       readonly: 'readonly',
-      value: 'Option 1'
+      value: 'Option 1',
     }}
   >
     {({ label, options, readonly, value }) => `
@@ -263,7 +265,3 @@ For a dropdown that allows the user to select a single option
     `}
   </Story>
 </Canvas>
-
-
-
-
diff --git a/src/stories/slider.stories.mdx b/src/stories/slider.stories.mdx
index 8c21f70a4..3264b8f1b 100644
--- a/src/stories/slider.stories.mdx
+++ b/src/stories/slider.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/Slider'
@@ -11,17 +11,17 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
     min: {
       description: 'The minimum value',
       control: 'number',
-      table: { defaultValue: { summary: 0 } }
+      table: { defaultValue: { summary: 0 } },
     },
     max: {
       description: 'The maxiumum value',
       control: 'number',
-      table: { defaultValue: { summary: 100 } }
+      table: { defaultValue: { summary: 100 } },
     },
     step: {
       description: 'An optional discrete step between values',
       control: 'number',
-      table: { defaultValue: { summary: 1 } }
+      table: { defaultValue: { summary: 1 } },
     },
     value: {
       description: 'An optional starting value',
@@ -225,7 +225,7 @@ For user triggered actions
       step: 10,
       value: 30,
       readonly: 'true',
-      label: 'readonly'
+      label: 'readonly',
     }}
   >
     {({ range, max, step, value, readonly, label }) => `
@@ -239,4 +239,4 @@ For user triggered actions
       />
     `}
   </Story>
-</Canvas>
\ No newline at end of file
+</Canvas>
diff --git a/src/stories/switch.stories.mdx b/src/stories/switch.stories.mdx
index a6598c967..fe7dc2509 100644
--- a/src/stories/switch.stories.mdx
+++ b/src/stories/switch.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/Switch'
@@ -16,27 +16,27 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
     },
     label: {
       description: 'The input label',
-      table: { defaultValue: { summary: '' } }
+      table: { defaultValue: { summary: '' } },
     },
     labelposition: {
       description: 'The position of the label',
       control: 'select',
       options: ['top', 'left'],
-      table: { defaultValue: { summary: 'top' } }
+      table: { defaultValue: { summary: 'top' } },
     },
     variant: {
       description: 'The displayed style of the switch',
       control: 'select',
       options: ['default', 'annotated'],
-      table: { defaultValue: { summary: 'default' } }
+      table: { defaultValue: { summary: 'default' } },
     },
     disabled: {
       description: 'Whether the input is disabled',
       control: 'select',
       options: ['true', 'false'],
-      table: { defaultValue: { summary: 'false' } }
+      table: { defaultValue: { summary: 'false' } },
     },
-      tooltip: {
+    tooltip: {
       description: 'The tooltip message.',
     },
     'on:input': {
@@ -145,7 +145,7 @@ Used to handle binary input.
       value: 'off',
       variant: 'labeled',
       label: 'Switch Label',
-      tooltip: 'This is the tooltip message.'
+      tooltip: 'This is the tooltip message.',
     }}
   >
     {({ value, variant, tooltip, label }) => `
@@ -166,7 +166,7 @@ Used to handle binary input.
       value: 'on',
       variant: 'annotated',
       readonly: 'true',
-      label: 'readonly'
+      label: 'readonly',
     }}
   >
     {({ value, variant, readonly, label }) => `
@@ -178,4 +178,4 @@ Used to handle binary input.
       />
     `}
   </Story>
-</Canvas>
\ No newline at end of file
+</Canvas>
diff --git a/src/stories/table.stories.mdx b/src/stories/table.stories.mdx
index 993ebb664..f27576adf 100644
--- a/src/stories/table.stories.mdx
+++ b/src/stories/table.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/Table'
@@ -7,13 +7,14 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
       description: 'Determines table sizing',
       control: { type: 'select' },
       options: ['fixed', 'auto'],
-      table: { defaultValue: { summary: 'auto' } }
+      table: { defaultValue: { summary: 'auto' } },
     },
     cols: {
-      description: 'Can force columns into certain sizes. Use a comma separated list, leaving an empty space if you wish to skip a column. Takes px and % values.',
+      description:
+        'Can force columns into certain sizes. Use a comma separated list, leaving an empty space if you wish to skip a column. Takes px and % values.',
       control: { type: 'text' },
-      table: { defaultValue: { summary: '' } }
-    }
+      table: { defaultValue: { summary: '' } },
+    },
   }}
 />
 
@@ -26,7 +27,7 @@ Used to tabular data.
     name='Table'
     args={{
       variant: 'auto',
-      cols: '10%, 10%, 60%, 10%, 10%'
+      cols: '10%, 10%, 60%, 10%, 10%',
     }}
   >
     {({ variant, cols }) => `
diff --git a/src/stories/tabs.stories.mdx b/src/stories/tabs.stories.mdx
index 898b51e28..3966e07ca 100644
--- a/src/stories/tabs.stories.mdx
+++ b/src/stories/tabs.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/Tabs'
@@ -10,7 +10,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
   argTypes={{
     tabs: {
       description: 'The list of tabs',
-      table: { defaultValue: { summary: '' } }
+      table: { defaultValue: { summary: '' } },
     },
     selected: {
       description: 'The selected tab',
@@ -31,7 +31,7 @@ For user triggered actions
     name='Tabs'
     args={{
       tabs: 'Tab 1, Tab 2, Tab 3',
-      selected: 'Tab 1'
+      selected: 'Tab 1',
     }}
   >
     {({ tabs, selected }) => `
diff --git a/src/stories/tooltip.stories.mdx b/src/stories/tooltip.stories.mdx
index daf2f220f..51a9b4ca9 100644
--- a/src/stories/tooltip.stories.mdx
+++ b/src/stories/tooltip.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
   title='Elements/Tooltip'
@@ -7,25 +7,25 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
       description: 'The placement of the tooltip/tooltip direction',
       control: { type: 'select' },
       options: ['top', 'bottom', 'left', 'right'],
-      table: { defaultValue: { summary: 'top' } }
+      table: { defaultValue: { summary: 'top' } },
     },
     text: {
       description: 'The message displayed within the tooltip',
-      table: { defaultValue: { summary: '' } }
+      table: { defaultValue: { summary: '' } },
     },
   }}
 />
 
 # Tooltip
 
-Used to display text box when hovering over an element. 
+Used to display text box when hovering over an element.
 
 <Canvas>
   <Story
     name='Tooltip'
     args={{
       text: 'Test information for the tooltip',
-      location: "top",
+      location: 'top',
     }}
   >
     {({ text, location }) => `
@@ -36,4 +36,4 @@ Used to display text box when hovering over an element.
     <div>
     `}
   </Story>
-</Canvas>
\ No newline at end of file
+</Canvas>
diff --git a/src/stories/vector-input.stories.mdx b/src/stories/vector-input.stories.mdx
index cd21bf809..4f96a0aad 100644
--- a/src/stories/vector-input.stories.mdx
+++ b/src/stories/vector-input.stories.mdx
@@ -1,7 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
-  title="Elements/VectorInput"
+  title='Elements/VectorInput'
   parameters={{
     actions: {
       handles: ['input'],
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 6b2f0b29d..28b7de9d3 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -5,7 +5,11 @@
 /// <reference types="monaco-editor/monaco" />
 
 interface HTMLElement {
-  connectedCallback(): void
-  disconnectedCallback(): void
-  attributeChangedCallback(name: string, oldValue: string, newValue: string): void
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(
+    name: string,
+    oldValue: string,
+    newValue: string
+  ): void;
 }
diff --git a/svelte.config.js b/svelte.config.js
index 4bce69125..131573146 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,4 +1,4 @@
-import sveltePreprocess from 'svelte-preprocess'
+import sveltePreprocess from 'svelte-preprocess';
 
 export default {
   // Consult https://github.com/sveltejs/svelte-preprocess
@@ -8,4 +8,4 @@ export default {
     postcss: true,
     sourceMap: true,
   }),
-}
+};
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index db8fd8f14..7445ff44a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,4 +1,4 @@
-const plugin = require('tailwindcss/plugin')
+const plugin = require('tailwindcss/plugin');
 
 module.exports = {
   content: ['./index.html', './src/**/*.{ts,vue,svelte}'],
@@ -11,7 +11,7 @@ module.exports = {
         'text-subtle-2': '#7a7c80',
         'text-disabled': '#9c9ca4',
         'text-link': '#0066cc',
-        'black': '#131414',
+        black: '#131414',
         'gray-9': '#282829',
         'gray-8': '#4e4f52',
         'gray-7': '#7a7c80',
@@ -39,11 +39,11 @@ module.exports = {
         'text-highlight': '#e2f1fd',
       },
       boxShadow: {
-        'solid4': '4px 4px 0px #000',
-      }
+        solid4: '4px 4px 0px #000',
+      },
     },
   },
   variants: {
     extend: {},
   },
-}
+};
diff --git a/tests/Icon.spec.ts b/tests/Icon.spec.ts
deleted file mode 100644
index 69e2fa4ed..000000000
--- a/tests/Icon.spec.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.beforeEach(async ({ page }) => {
-    await page.goto('/icon-test.html');
-  });
-
-test('Renders an icon if name attribute is specified as a valid v-icon', async ({ page }) => {
-    await expect(page.getByTestId("icon-default-valid")).toBeVisible()
-});
-
-test('Does not render an icon if name attribute is specified as an invalid v-icon', async ({ page }) => {
-    await expect(page.getByTestId("icon-default-invalid")).not.toBeVisible()
-});
-
-test('Renders and icon as extra small if size attribute is specified as xs', async ({ page }) => {
-    await expect(page.getByTestId("icon-size-xs")).toBeVisible()
-    await expect(page.getByTestId("icon-size-xs").locator('i')).toHaveClass(/text-xs/)
-});
-
-test('Renders and icon as small if size attribute is specified as sm', async ({ page }) => {
-    await expect(page.getByTestId("icon-size-sm")).toBeVisible()
-    await expect(page.getByTestId("icon-size-sm").locator('i')).toHaveClass(/text-sm/)
-});
-
-test('Renders and icon as the base size if size attribute is specified as base', async ({ page }) => {
-    await expect(page.getByTestId("icon-size-base")).toBeVisible()
-    await expect(page.getByTestId("icon-size-base").locator('i')).toHaveClass(/text-base/)
-});
-
-test('Renders and icon as the large size if size attribute is specified as lg', async ({ page }) => {
-    await expect(page.getByTestId("icon-size-lg")).toBeVisible()
-    await expect(page.getByTestId("icon-size-lg").locator('i')).toHaveClass(/text-lg/)
-});
-
-test('Renders and icon as the extra large size if size attribute is specified as xl', async ({ page }) => {
-    await expect(page.getByTestId("icon-size-xl")).toBeVisible()
-    await expect(page.getByTestId("icon-size-xl").locator('i')).toHaveClass(/text-xl/)
-});
-
-test('Renders and icon as the 2xl size if size attribute is specified as 2xl', async ({ page }) => {
-    await expect(page.getByTestId("icon-size-2xl")).toBeVisible()
-    await expect(page.getByTestId("icon-size-2xl").locator('i')).toHaveClass(/text-2xl/)
-});
-
-test('Renders and icon as the 3xl size if size attribute is specified as 3xl', async ({ page }) => {
-    await expect(page.getByTestId("icon-size-3xl")).toBeVisible()
-    await expect(page.getByTestId("icon-size-3xl").locator('i')).toHaveClass(/text-3xl/)
-});
-
-test('Renders and icon as the 4xl size if size attribute is specified as 4xl', async ({ page }) => {
-    await expect(page.getByTestId("icon-size-4xl")).toBeVisible()
-    await expect(page.getByTestId("icon-size-4xl").locator('i')).toHaveClass(/text-4xl/)
-});
\ No newline at end of file
diff --git a/tests/badge.spec.ts b/tests/badge.spec.ts
index 24b1ab02a..57b1ca06d 100644
--- a/tests/badge.spec.ts
+++ b/tests/badge.spec.ts
@@ -5,52 +5,74 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/badge-test.html');
 });
 
-test('Renders a gray badge if the variant is specified as gray', async ({ page }) => {
-  const grayBadge = page.getByText('Inactive')
-  
-  await expect(grayBadge).toBeVisible()
-  await expect(grayBadge).toHaveText("Inactive")
-
-  await expect(grayBadge).toHaveCSS("background-color", hexToRGB('disabled-bg'))
-  await expect(grayBadge).toHaveCSS("color", hexToRGB('text-default'))
+test('Renders a gray badge if the variant is specified as gray', async ({
+  page,
+}) => {
+  const grayBadge = page.getByText('Inactive');
+
+  await expect(grayBadge).toBeVisible();
+  await expect(grayBadge).toHaveText('Inactive');
+
+  await expect(grayBadge).toHaveCSS(
+    'background-color',
+    hexToRGB('disabled-bg')
+  );
+  await expect(grayBadge).toHaveCSS('color', hexToRGB('text-default'));
 });
 
-test('Renders a gray badge if the variant is not specified', async ({ page }) => {
-  const defaultBadge = page.getByText("Default")
-  
-  await expect(defaultBadge).toBeVisible()
-  await expect(defaultBadge).toHaveText("Default")
+test('Renders a gray badge if the variant is not specified', async ({
+  page,
+}) => {
+  const defaultBadge = page.getByText('Default');
+
+  await expect(defaultBadge).toBeVisible();
+  await expect(defaultBadge).toHaveText('Default');
 
-  await expect(defaultBadge).toHaveCSS("background-color", hexToRGB('disabled-bg'))
-  await expect(defaultBadge).toHaveCSS("color", hexToRGB('text-default'))
+  await expect(defaultBadge).toHaveCSS(
+    'background-color',
+    hexToRGB('disabled-bg')
+  );
+  await expect(defaultBadge).toHaveCSS('color', hexToRGB('text-default'));
 });
 
-test('Renders a green badge if the variant is specified as green', async ({ page }) => {
-  const greenBadge = page.getByText("Go", { exact: true })
-  
-  await expect(greenBadge).toBeVisible()
-  await expect(greenBadge).toHaveText("Go")
+test('Renders a green badge if the variant is specified as green', async ({
+  page,
+}) => {
+  const greenBadge = page.getByText('Go', { exact: true });
 
-  await expect(greenBadge).toHaveCSS("background-color", hexToRGB('success-bg'))
-  await expect(greenBadge).toHaveCSS("color", hexToRGB('success-fg'))
+  await expect(greenBadge).toBeVisible();
+  await expect(greenBadge).toHaveText('Go');
+
+  await expect(greenBadge).toHaveCSS(
+    'background-color',
+    hexToRGB('success-bg')
+  );
+  await expect(greenBadge).toHaveCSS('color', hexToRGB('success-fg'));
 });
 
-test('Renders an orange badge if the variant is specified as orange', async ({ page }) => {
-  const orangeBadge = page.getByText("Danger")
-  
-  await expect(orangeBadge).toBeVisible()
-  await expect(orangeBadge).toHaveText("Danger")
+test('Renders an orange badge if the variant is specified as orange', async ({
+  page,
+}) => {
+  const orangeBadge = page.getByText('Danger');
+
+  await expect(orangeBadge).toBeVisible();
+  await expect(orangeBadge).toHaveText('Danger');
 
-  await expect(orangeBadge).toHaveCSS("background-color", hexToRGB('warning-bg'))
-  await expect(orangeBadge).toHaveCSS("color", hexToRGB('warning-fg'))
+  await expect(orangeBadge).toHaveCSS(
+    'background-color',
+    hexToRGB('warning-bg')
+  );
+  await expect(orangeBadge).toHaveCSS('color', hexToRGB('warning-fg'));
 });
 
-test('Renders a red badge if the variant is specified as red', async ({ page }) => {
-  const redBadge = page.getByText("Unhealthy")
-  
-  await expect(redBadge).toBeVisible()
-  await expect(redBadge).toHaveText("Unhealthy")
+test('Renders a red badge if the variant is specified as red', async ({
+  page,
+}) => {
+  const redBadge = page.getByText('Unhealthy');
+
+  await expect(redBadge).toBeVisible();
+  await expect(redBadge).toHaveText('Unhealthy');
 
-  await expect(redBadge).toHaveCSS("background-color", hexToRGB('danger-bg'))
-  await expect(redBadge).toHaveCSS("color", hexToRGB('danger-fg'))
+  await expect(redBadge).toHaveCSS('background-color', hexToRGB('danger-bg'));
+  await expect(redBadge).toHaveCSS('color', hexToRGB('danger-fg'));
 });
diff --git a/tests/breadcrumbs.spec.ts b/tests/breadcrumbs.spec.ts
index 8d95cb500..d38a17f8e 100644
--- a/tests/breadcrumbs.spec.ts
+++ b/tests/breadcrumbs.spec.ts
@@ -4,12 +4,12 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/breadcrumb-test.html');
 });
 
-test('Renders breadcrumbs with the list of values specified in crumbs attribute as pills', async ({ page }) => {
-  const breadcrumbs = page.getByText('Chocolate Chip Oatmeal Raisin')
-  await expect(breadcrumbs).toBeVisible()
-  await expect(breadcrumbs).toHaveText('Chocolate Chip Oatmeal Raisin')
-  await expect(page.getByText(/Chocolate Chip/i)).toBeVisible()
-  await expect(page.getByText(/Oatmeal Raisin/i)).toBeVisible()
-
+test('Renders breadcrumbs with the list of values specified in crumbs attribute as pills', async ({
+  page,
+}) => {
+  const breadcrumbs = page.getByText('Chocolate Chip Oatmeal Raisin');
+  await expect(breadcrumbs).toBeVisible();
+  await expect(breadcrumbs).toHaveText('Chocolate Chip Oatmeal Raisin');
+  await expect(page.getByText(/Chocolate Chip/i)).toBeVisible();
+  await expect(page.getByText(/Oatmeal Raisin/i)).toBeVisible();
 });
-
diff --git a/tests/button.spec.ts b/tests/button.spec.ts
index a0fc319a2..c41094ce2 100644
--- a/tests/button.spec.ts
+++ b/tests/button.spec.ts
@@ -5,91 +5,132 @@ test.beforeEach(async ({ page }) => {
 });
 
 test('Renders label attribute as text within the button', async ({ page }) => {
-  const labelButton = page.getByTestId('label')
-  await expect(labelButton.locator('button')).toBeVisible()
-  await expect(labelButton.locator('button')).toContainText('Label')
+  const labelButton = page.getByTestId('label');
+  await expect(labelButton.locator('button')).toBeVisible();
+  await expect(labelButton.locator('button')).toContainText('Label');
 });
 
-test('Renders a button in the style of the primary variant if no variant is specified', async ({ page }) => {
-  const defaultButton = page.getByTestId('default-primary')
-  await expect(defaultButton.locator('button')).toBeVisible()
-  await expect(defaultButton.locator('button')).toHaveClass(/bg-white/)
-  await expect(defaultButton.locator('button')).toHaveClass(/border-gray-9/)
-})
-
-test('Renders a button in the style of the primary variant if variant is specified as primary', async ({ page }) => {
-  const primaryButton = page.getByTestId('primary')
-  await expect(primaryButton.locator('button')).toBeVisible()
-  await expect(primaryButton.locator('button')).toHaveClass(/bg-white/)
-  await expect(primaryButton.locator('button')).toHaveClass(/border-gray-9/)
+test('Renders a button in the style of the primary variant if no variant is specified', async ({
+  page,
+}) => {
+  const defaultButton = page.getByTestId('default-primary');
+  await expect(defaultButton.locator('button')).toBeVisible();
+  await expect(defaultButton.locator('button')).toHaveClass(/bg-white/);
+  await expect(defaultButton.locator('button')).toHaveClass(/border-gray-9/);
+});
 
-})
+test('Renders a button in the style of the primary variant if variant is specified as primary', async ({
+  page,
+}) => {
+  const primaryButton = page.getByTestId('primary');
+  await expect(primaryButton.locator('button')).toBeVisible();
+  await expect(primaryButton.locator('button')).toHaveClass(/bg-white/);
+  await expect(primaryButton.locator('button')).toHaveClass(/border-gray-9/);
+});
 
-test('Renders a button in the style of inverse primary if the variant is specified as inverse primary', async ({ page }) => {
-  const inversePrimaryButton = page.getByTestId('inverse-primary')
-  await expect(inversePrimaryButton.locator('button')).toBeVisible()
-  await expect(inversePrimaryButton.locator('button')).toHaveClass(/bg-gray-9/)
-  await expect(inversePrimaryButton.locator('button')).toHaveClass(/border-gray-9/)
-  await expect(inversePrimaryButton.locator('button')).toHaveClass(/text-white/)
-})
+test('Renders a button in the style of inverse primary if the variant is specified as inverse primary', async ({
+  page,
+}) => {
+  const inversePrimaryButton = page.getByTestId('inverse-primary');
+  await expect(inversePrimaryButton.locator('button')).toBeVisible();
+  await expect(inversePrimaryButton.locator('button')).toHaveClass(/bg-gray-9/);
+  await expect(inversePrimaryButton.locator('button')).toHaveClass(
+    /border-gray-9/
+  );
+  await expect(inversePrimaryButton.locator('button')).toHaveClass(
+    /text-white/
+  );
+});
 
-test('Renders a button in the style of success if the variant is specified as success', async ({ page }) => {
-  const successButton = page.getByTestId('success')
-  await expect(successButton.locator('button')).toBeVisible()
-  await expect(successButton.locator('button')).toHaveClass(/bg-success-fg/)
-  await expect(successButton.locator('button')).toHaveClass(/border-success-fg/)
-  await expect(successButton.locator('button')).toHaveClass(/text-white/)
-})
+test('Renders a button in the style of success if the variant is specified as success', async ({
+  page,
+}) => {
+  const successButton = page.getByTestId('success');
+  await expect(successButton.locator('button')).toBeVisible();
+  await expect(successButton.locator('button')).toHaveClass(/bg-success-fg/);
+  await expect(successButton.locator('button')).toHaveClass(
+    /border-success-fg/
+  );
+  await expect(successButton.locator('button')).toHaveClass(/text-white/);
+});
 
-test('Renders a button in the style of danger if the variant is specified as danger', async ({ page }) => {
-  const dangerButton = page.getByTestId('danger')
-  await expect(dangerButton.locator('button').first()).toBeVisible()
-  await expect(dangerButton.locator('button').first()).toHaveClass(/bg-danger-fg/)
-  await expect(dangerButton.locator('button').first()).toHaveClass(/border-danger-fg/)
-  await expect(dangerButton.locator('button').first()).toHaveClass(/text-white/)
-})
+test('Renders a button in the style of danger if the variant is specified as danger', async ({
+  page,
+}) => {
+  const dangerButton = page.getByTestId('danger');
+  await expect(dangerButton.locator('button').first()).toBeVisible();
+  await expect(dangerButton.locator('button').first()).toHaveClass(
+    /bg-danger-fg/
+  );
+  await expect(dangerButton.locator('button').first()).toHaveClass(
+    /border-danger-fg/
+  );
+  await expect(dangerButton.locator('button').first()).toHaveClass(
+    /text-white/
+  );
+});
 
-test('Renders a button in the style of outline danger if the variant is specified as outline danger', async ({ page }) => {
-  const outlineDangerButton = page.getByTestId('outline-danger')
-  await expect(outlineDangerButton.locator('button')).toBeVisible()
-  await expect(outlineDangerButton.locator('button')).toHaveClass(/bg-danger-bg/)
-  await expect(outlineDangerButton.locator('button')).toHaveClass(/border-danger-bg/)
-  await expect(outlineDangerButton.locator('button')).toHaveClass(/text-danger-fg/)
-})
+test('Renders a button in the style of outline danger if the variant is specified as outline danger', async ({
+  page,
+}) => {
+  const outlineDangerButton = page.getByTestId('outline-danger');
+  await expect(outlineDangerButton.locator('button')).toBeVisible();
+  await expect(outlineDangerButton.locator('button')).toHaveClass(
+    /bg-danger-bg/
+  );
+  await expect(outlineDangerButton.locator('button')).toHaveClass(
+    /border-danger-bg/
+  );
+  await expect(outlineDangerButton.locator('button')).toHaveClass(
+    /text-danger-fg/
+  );
+});
 
-test('Renders a button as disabled if the button has a disabled attribute of true', async ({ page }) => {
-  const disabledButton = page.getByRole('button', { name: 'Disabled Label' })
-  await expect(disabledButton).toBeVisible()
-  await expect(disabledButton).toBeDisabled()
-})
+test('Renders a button as disabled if the button has a disabled attribute of true', async ({
+  page,
+}) => {
+  const disabledButton = page.getByRole('button', { name: 'Disabled Label' });
+  await expect(disabledButton).toBeVisible();
+  await expect(disabledButton).toBeDisabled();
+});
 
-test('Renders a tooltip over the button if a tooltip attribute is specified', async ({ page }) => {
-  const tooltipButton = page.getByRole('button', { name: 'Tooltip Label' })
-  const tooltip = page.getByRole('tooltip', { name: 'This is the message for the tooltip'})
-  await expect(tooltipButton).toBeVisible()
-  await expect(tooltip).not.toBeVisible()
-  await tooltipButton.hover()
-  await expect(tooltip).toBeVisible()
-})
+test('Renders a tooltip over the button if a tooltip attribute is specified', async ({
+  page,
+}) => {
+  const tooltipButton = page.getByRole('button', { name: 'Tooltip Label' });
+  const tooltip = page.getByRole('tooltip', {
+    name: 'This is the message for the tooltip',
+  });
+  await expect(tooltipButton).toBeVisible();
+  await expect(tooltip).not.toBeVisible();
+  await tooltipButton.hover();
+  await expect(tooltip).toBeVisible();
+});
 
-test('Renders an icon within the button/next to the label if an icon attribute is specified', async ({ page }) => {
-  const iconWithinButton = page.getByRole('button', { name: 'Icon Within Button Label' })
-  await expect(iconWithinButton).toBeVisible()
-  await expect(iconWithinButton).toContainText('Label')
-  await expect(iconWithinButton.locator('i')).toHaveClass(/icon-refresh/)
-  await expect(iconWithinButton).toHaveClass(/border-gray-9/)
-})
+test('Renders an icon within the button/next to the label if an icon attribute is specified', async ({
+  page,
+}) => {
+  const iconWithinButton = page.getByRole('button', {
+    name: 'Icon Within Button Label',
+  });
+  await expect(iconWithinButton).toBeVisible();
+  await expect(iconWithinButton).toContainText('Label');
+  await expect(iconWithinButton.locator('i')).toHaveClass(/icon-refresh/);
+  await expect(iconWithinButton).toHaveClass(/border-gray-9/);
+});
 
-test('Renders the button as an icon if an icon attribute is specified and the button variant is icon', async ({ page }) => {
-  const iconAsButton = page.getByRole('button', { name: 'Icon As Button' })
-  await expect(iconAsButton).toBeVisible()
-  await expect(iconAsButton).not.toContainText('Icon As Button')
-  await expect(iconAsButton.locator('i')).toHaveClass(/icon-refresh/)
-  await expect(iconAsButton).not.toHaveClass(/border-gray-9/)
-})
+test('Renders the button as an icon if an icon attribute is specified and the button variant is icon', async ({
+  page,
+}) => {
+  const iconAsButton = page.getByRole('button', { name: 'Icon As Button' });
+  await expect(iconAsButton).toBeVisible();
+  await expect(iconAsButton).not.toContainText('Icon As Button');
+  await expect(iconAsButton.locator('i')).toHaveClass(/icon-refresh/);
+  await expect(iconAsButton).not.toHaveClass(/border-gray-9/);
+});
 
 test('Tests that the button is clickable if not disabled', async ({ page }) => {
-  const clickMeButton = page.getByRole('button', { name: 'Click Me' })
-  await clickMeButton.isEnabled()
-  await clickMeButton.click()
-})
+  const clickMeButton = page.getByRole('button', { name: 'Click Me' });
+  await clickMeButton.isEnabled();
+  await clickMeButton.click();
+});
diff --git a/tests/code-editor.spec.ts b/tests/code-editor.spec.ts
index fe29edeb5..c93977b14 100644
--- a/tests/code-editor.spec.ts
+++ b/tests/code-editor.spec.ts
@@ -1,201 +1,267 @@
 import { test, expect } from '@playwright/test';
 
-test.beforeEach(async ({page}) => {
-    await page.goto('/code-editor-test.html')
-})
+test.beforeEach(async ({ page }) => {
+  await page.goto('/code-editor-test.html');
+});
 
 test('Renders JSON code editor correctly', async ({ page }) => {
-  const validJSONEditor = page.getByTestId('code-editor-json-valid')
-  await expect(validJSONEditor).toHaveAttribute('language', 'json')
-  await expect(validJSONEditor).toHaveAttribute('value', '{"component": "JSON"}')
-  const monacoContainer = validJSONEditor.locator('div').first()
-  await expect(monacoContainer).toHaveAttribute('data-mode-id', 'json')
-  const componentSpan = monacoContainer.getByText('component') // refers to key
-  await expect(componentSpan).toHaveClass(/mtk4/)
-  const jsonSPAN = monacoContainer.getByText('JSON')
-  await expect(jsonSPAN).toHaveClass(/mtk5/)
+  const validJSONEditor = page.getByTestId('code-editor-json-valid');
+  await expect(validJSONEditor).toHaveAttribute('language', 'json');
+  await expect(validJSONEditor).toHaveAttribute(
+    'value',
+    '{"component": "JSON"}'
+  );
+  const monacoContainer = validJSONEditor.locator('div').first();
+  await expect(monacoContainer).toHaveAttribute('data-mode-id', 'json');
+  const componentSpan = monacoContainer.getByText('component'); // refers to key
+  await expect(componentSpan).toHaveClass(/mtk4/);
+  const jsonSPAN = monacoContainer.getByText('JSON');
+  await expect(jsonSPAN).toHaveClass(/mtk5/);
 });
 
 // Value: JSON invalid
 
-test('Renders JSON code editor that is invalid', async ({page}) => {
-    const validJSONEditor = page.getByTestId('code-editor-json-invalid')
-    await expect(validJSONEditor).toHaveAttribute('language', 'json')
-    await expect(validJSONEditor).toHaveAttribute('value', '{"component"}')
-    const monacoContainer = validJSONEditor.locator('div').first()
-    await expect(monacoContainer).toHaveAttribute('data-mode-id', 'json')
+test('Renders JSON code editor that is invalid', async ({ page }) => {
+  const validJSONEditor = page.getByTestId('code-editor-json-invalid');
+  await expect(validJSONEditor).toHaveAttribute('language', 'json');
+  await expect(validJSONEditor).toHaveAttribute('value', '{"component"}');
+  const monacoContainer = validJSONEditor.locator('div').first();
+  await expect(monacoContainer).toHaveAttribute('data-mode-id', 'json');
 });
 
 // valid javascript
 
-test('Renders Javascript code editor that is valid', async ({page}) => {
-    const validJavascriptEditor = page.getByTestId('code-editor-javascript-valid')
-    await expect(validJavascriptEditor).toHaveAttribute('language', 'javascript')
-    await expect(validJavascriptEditor).toHaveAttribute('value', "function getComponents(){" + "\n\n" + "}")
-    const validJSONContainer = validJavascriptEditor.locator('div').first()
-    await expect(validJSONContainer).toHaveAttribute('data-mode-id', 'javascript')
-    await expect(validJSONContainer.getByText('function')).toHaveClass(/mtk8/) // valid
-})
+test('Renders Javascript code editor that is valid', async ({ page }) => {
+  const validJavascriptEditor = page.getByTestId(
+    'code-editor-javascript-valid'
+  );
+  await expect(validJavascriptEditor).toHaveAttribute('language', 'javascript');
+  await expect(validJavascriptEditor).toHaveAttribute(
+    'value',
+    'function getComponents(){' + '\n\n' + '}'
+  );
+  const validJSONContainer = validJavascriptEditor.locator('div').first();
+  await expect(validJSONContainer).toHaveAttribute(
+    'data-mode-id',
+    'javascript'
+  );
+  await expect(validJSONContainer.getByText('function')).toHaveClass(/mtk8/); // valid
+});
 
 // invalid javascript
 
-test('Renders Javascript code editor that is invalid', async ({page}) => {
-    const invalidJavascriptEditor = page.getByTestId('code-editor-javascript-invalid')
-    await expect(invalidJavascriptEditor).toHaveAttribute('language', 'javascript')
-    await expect(invalidJavascriptEditor).toHaveAttribute('value', "def madeIt()")
-    const invalidEditor = invalidJavascriptEditor.locator('div').first()
-    await expect(invalidEditor).toHaveAttribute('data-mode-id', 'javascript')
-})
+test('Renders Javascript code editor that is invalid', async ({ page }) => {
+  const invalidJavascriptEditor = page.getByTestId(
+    'code-editor-javascript-invalid'
+  );
+  await expect(invalidJavascriptEditor).toHaveAttribute(
+    'language',
+    'javascript'
+  );
+  await expect(invalidJavascriptEditor).toHaveAttribute(
+    'value',
+    'def madeIt()'
+  );
+  const invalidEditor = invalidJavascriptEditor.locator('div').first();
+  await expect(invalidEditor).toHaveAttribute('data-mode-id', 'javascript');
+});
 
 // valid typescript
 
-test('Renders typescript code editor that is valid', async ({page}) => {
-    const validTypescriptEditor = page.getByTestId('code-editor-typescript-valid')
-    await expect(validTypescriptEditor).toHaveAttribute('language', 'typescript')
-    await expect(validTypescriptEditor).toHaveAttribute('value', "function get(value: string) {" + "\n\n" + "}")
-    const validEditor = validTypescriptEditor.locator('div').first()
-    await expect(validEditor).toHaveAttribute('data-mode-id', 'typescript')
-    await expect(validTypescriptEditor.getByText('function')).toHaveClass(/mtk8/) // valid
-})
+test('Renders typescript code editor that is valid', async ({ page }) => {
+  const validTypescriptEditor = page.getByTestId(
+    'code-editor-typescript-valid'
+  );
+  await expect(validTypescriptEditor).toHaveAttribute('language', 'typescript');
+  await expect(validTypescriptEditor).toHaveAttribute(
+    'value',
+    'function get(value: string) {' + '\n\n' + '}'
+  );
+  const validEditor = validTypescriptEditor.locator('div').first();
+  await expect(validEditor).toHaveAttribute('data-mode-id', 'typescript');
+  await expect(validTypescriptEditor.getByText('function')).toHaveClass(/mtk8/); // valid
+});
 
 // invalid typescript
-test('Renders typescript code editor that is invalid', async ({page}) => {
-    const invalidTypescriptEditor = page.getByTestId('code-editor-typescript-invalid')
-    await expect(invalidTypescriptEditor).toHaveAttribute('language', 'typescript')
-    await expect(invalidTypescriptEditor).toHaveAttribute('value', "def help()")
-    const invalidEditor = invalidTypescriptEditor.locator('div').first()
-    await expect(invalidEditor).toHaveAttribute('data-mode-id','typescript')
-    await expect(invalidEditor.getByText('def help')).toHaveClass(/mtk1/)
-})
-
-// valid python 
-test('Renders python editor that is valid', async ({page}) => {
-    const validPythonEditor = page.getByTestId('code-editor-python-valid')
-    await expect(validPythonEditor).toHaveAttribute('language', 'python')
-    await expect(validPythonEditor).toHaveAttribute('value', "def help()")
-    const validEditor = validPythonEditor.locator('div').first()
-    await expect(validEditor).toHaveAttribute('data-mode-id', 'python')
-    await expect(validEditor.getByText('def')).toHaveClass(/mtk8/) // valid python syntax
-    await expect(validEditor.getByText('help')).toHaveClass(/mtk8/)
-})
-
-// invalid python 
-test('Renders python editor that is invalid', async ({page}) => {
-    const invalidPythonEditor = page.getByTestId('code-editor-python-invalid')
-    await expect(invalidPythonEditor).toHaveAttribute('language', 'python')
-    await expect(invalidPythonEditor).toHaveAttribute('value', "const x = () => {}")
-    const invalidEditor = invalidPythonEditor.locator('div').first()
-    await expect(invalidEditor).toHaveAttribute('data-mode-id', 'python')
-})
-
-test('Renders a golang editor that is valid', async ({page}) => {
-    const editor = page.getByTestId('code-editor-golang-valid')
-    await expect(editor).toHaveAttribute('language', 'go')
-    await expect(editor).toHaveAttribute('value', "func (s *Custom) help(x int)")
-    const editorContainer = editor.locator('div').first()
-    await expect(editorContainer).toHaveAttribute('data-mode-id', 'go')
-    await expect(editorContainer.getByText('func')).toHaveClass(/mtk8/) // valid 
-})
-
-test('Renders a golang editor that is invalid', async ({page}) => {
-    const editor = page.getByTestId('code-editor-golang-invalid')
-    await expect(editor).toHaveAttribute('language', 'go')
-    await expect(editor).toHaveAttribute('value', "def help(x int)")
-    const editorContainer = editor.locator('div').first()
-    await expect(editorContainer).toHaveAttribute('data-mode-id', 'go')
-})
-
-test('Renders a shell editor that is valid', async ({page}) => {
-    const editor = page.getByTestId('code-editor-shell-valid')
-    await expect(editor).toHaveAttribute('language', 'shell')
-    await expect(editor).toHaveAttribute('value', "echo test")
-    const editorContainer = editor.locator('div').first()
-    await expect(editorContainer).toHaveAttribute('data-mode-id', 'shell')
-    await expect(editorContainer.getByText('echo')).toHaveClass(/mtk22/) // valid for shell
-})
-
-test('Renders a shell editor that is invalid', async ({page}) => {
-    const editor = page.getByTestId('code-editor-shell-invalid')
-    await expect(editor).toHaveAttribute('language', 'shell')
-    await expect(editor).toHaveAttribute('value', "help me!!")
-    const editorContainer = editor.locator('div').first()
-    await expect(editorContainer).toHaveAttribute('data-mode-id', 'shell')
-})
-
-test('Renders the default vs-code theme if none is provided', async ({page}) => {
-    const editor = page.getByTestId('code-editor-json-valid')
-    const monacoEditor = editor.locator('.monaco-editor').first()
-    await expect(monacoEditor).toHaveClass(/vs/)
-})
-
-test('Renders the vs theme if set on the vs-code-editor element', async ({page}) => {
-    const editor = page.getByTestId('code-editor-vs')
-    const monacoEditor = editor.locator('.monaco-editor').first()
-    await expect(monacoEditor).toHaveClass(/vs/)
-})
-
-test('Renders the vs-dark theme if set on the vs-code-editor element', async ({page}) => {
-    const editor = page.getByTestId('code-editor-vs-dark')
-    const monacoEditor = editor.locator('.monaco-editor').first()
-    await expect(monacoEditor).toHaveClass(/vs-dark/)
-})
-
-test('If a readonly attribute is not set, the editor should be editable', async ({page}) => {
-    const validJSONEditor = page.getByTestId('code-editor-json-valid')
-    const originalString = '{"component": "JSON"}'
-    const textarea = validJSONEditor.locator('textarea')
-
-    // clears the input -- this was the only way to do it without hanging
-    for (let i = 0; i < originalString.length; i++) {
-        await textarea.clear()
-    }
-    await textarea.fill('{"remote": "test"}')
-    await expect(validJSONEditor.locator('.message', {hasText: 'Cannot edit in read-only editor'})).not.toBeVisible()
-
-    expect(await textarea.inputValue()).toEqual('{"remote": "test"}')
-    // check that the value in the div has the new string
-    await expect(validJSONEditor).toContainText('{"remote": "test"}')
-    await expect(validJSONEditor).not.toContainText(originalString)
-})
-
-test('If a readonly attribute is set, then the editor should be not editable', async ({page}) => {
-    const editor = page.getByTestId('code-editor-readonly')
-    // get the textarea input
-    const textarea = editor.locator('textarea')
-
-    await textarea.type('hello')
-    await expect(editor.locator('.message', {hasText: 'Cannot edit in read-only editor'})).toBeVisible()
-
-    // expect the text on the editor to not actually change
-    await textarea.fill('hello')
-    await expect(editor).not.toContainText(/hello/)
-
-})
-
-test('Render a minimap if the minimap attribute is set to true', async ({page}) => {
-    const editor = page.getByTestId('code-editor-minimap')
-    const width = parseInt(await editor.locator('.minimap-decorations-layer').getAttribute('width') ?? '0')
-    expect(width).toBeGreaterThan(0)
-})
-
-test('If a minimap attribute is not set, the it should not render one', async ({page}) => {
-    const editor = page.getByTestId('code-editor-json-valid')
-    const width = parseInt(await editor.locator('.minimap-decorations-layer').getAttribute('width') ?? '0')
-    expect(width).toEqual(0)
-})
-
-test('Render a diff code editor if there is a previous attribute and variant diff', async ({page}) => {
-    const editor = page.getByTestId('code-editor-diff')
-    const diffEditor = editor.locator('.monaco-diff-editor')
-    await expect(diffEditor).toHaveClass(/side-by-side/)
-    await expect(diffEditor).toBeVisible()
-
-    // default renders in JSON
-    await expect(editor.locator('.editor.original')).toHaveAttribute('data-mode-id', 'json')
-    await expect(editor.locator('.editor.modified')).toHaveAttribute('data-mode-id', 'json')
-
-    // modified should have the "current state" -- the difference is an extra row so just check for that
-    await expect(editor.locator('.editor.modified')).toContainText('test5')
-    await expect(editor.locator('.editor.original')).not.toContainText('test5')
-
-})
\ No newline at end of file
+test('Renders typescript code editor that is invalid', async ({ page }) => {
+  const invalidTypescriptEditor = page.getByTestId(
+    'code-editor-typescript-invalid'
+  );
+  await expect(invalidTypescriptEditor).toHaveAttribute(
+    'language',
+    'typescript'
+  );
+  await expect(invalidTypescriptEditor).toHaveAttribute('value', 'def help()');
+  const invalidEditor = invalidTypescriptEditor.locator('div').first();
+  await expect(invalidEditor).toHaveAttribute('data-mode-id', 'typescript');
+  await expect(invalidEditor.getByText('def help')).toHaveClass(/mtk1/);
+});
+
+// valid python
+test('Renders python editor that is valid', async ({ page }) => {
+  const validPythonEditor = page.getByTestId('code-editor-python-valid');
+  await expect(validPythonEditor).toHaveAttribute('language', 'python');
+  await expect(validPythonEditor).toHaveAttribute('value', 'def help()');
+  const validEditor = validPythonEditor.locator('div').first();
+  await expect(validEditor).toHaveAttribute('data-mode-id', 'python');
+  await expect(validEditor.getByText('def')).toHaveClass(/mtk8/); // valid python syntax
+  await expect(validEditor.getByText('help')).toHaveClass(/mtk8/);
+});
+
+// invalid python
+test('Renders python editor that is invalid', async ({ page }) => {
+  const invalidPythonEditor = page.getByTestId('code-editor-python-invalid');
+  await expect(invalidPythonEditor).toHaveAttribute('language', 'python');
+  await expect(invalidPythonEditor).toHaveAttribute(
+    'value',
+    'const x = () => {}'
+  );
+  const invalidEditor = invalidPythonEditor.locator('div').first();
+  await expect(invalidEditor).toHaveAttribute('data-mode-id', 'python');
+});
+
+test('Renders a golang editor that is valid', async ({ page }) => {
+  const editor = page.getByTestId('code-editor-golang-valid');
+  await expect(editor).toHaveAttribute('language', 'go');
+  await expect(editor).toHaveAttribute('value', 'func (s *Custom) help(x int)');
+  const editorContainer = editor.locator('div').first();
+  await expect(editorContainer).toHaveAttribute('data-mode-id', 'go');
+  await expect(editorContainer.getByText('func')).toHaveClass(/mtk8/); // valid
+});
+
+test('Renders a golang editor that is invalid', async ({ page }) => {
+  const editor = page.getByTestId('code-editor-golang-invalid');
+  await expect(editor).toHaveAttribute('language', 'go');
+  await expect(editor).toHaveAttribute('value', 'def help(x int)');
+  const editorContainer = editor.locator('div').first();
+  await expect(editorContainer).toHaveAttribute('data-mode-id', 'go');
+});
+
+test('Renders a shell editor that is valid', async ({ page }) => {
+  const editor = page.getByTestId('code-editor-shell-valid');
+  await expect(editor).toHaveAttribute('language', 'shell');
+  await expect(editor).toHaveAttribute('value', 'echo test');
+  const editorContainer = editor.locator('div').first();
+  await expect(editorContainer).toHaveAttribute('data-mode-id', 'shell');
+  await expect(editorContainer.getByText('echo')).toHaveClass(/mtk22/); // valid for shell
+});
+
+test('Renders a shell editor that is invalid', async ({ page }) => {
+  const editor = page.getByTestId('code-editor-shell-invalid');
+  await expect(editor).toHaveAttribute('language', 'shell');
+  await expect(editor).toHaveAttribute('value', 'help me!!');
+  const editorContainer = editor.locator('div').first();
+  await expect(editorContainer).toHaveAttribute('data-mode-id', 'shell');
+});
+
+test('Renders the default vs-code theme if none is provided', async ({
+  page,
+}) => {
+  const editor = page.getByTestId('code-editor-json-valid');
+  const monacoEditor = editor.locator('.monaco-editor').first();
+  await expect(monacoEditor).toHaveClass(/vs/);
+});
+
+test('Renders the vs theme if set on the vs-code-editor element', async ({
+  page,
+}) => {
+  const editor = page.getByTestId('code-editor-vs');
+  const monacoEditor = editor.locator('.monaco-editor').first();
+  await expect(monacoEditor).toHaveClass(/vs/);
+});
+
+test('Renders the vs-dark theme if set on the vs-code-editor element', async ({
+  page,
+}) => {
+  const editor = page.getByTestId('code-editor-vs-dark');
+  const monacoEditor = editor.locator('.monaco-editor').first();
+  await expect(monacoEditor).toHaveClass(/vs-dark/);
+});
+
+test('If a readonly attribute is not set, the editor should be editable', async ({
+  page,
+}) => {
+  const validJSONEditor = page.getByTestId('code-editor-json-valid');
+  const originalString = '{"component": "JSON"}';
+  const textarea = validJSONEditor.locator('textarea');
+
+  // clears the input -- this was the only way to do it without hanging
+  for (let i = 0; i < originalString.length; i++) {
+    await textarea.clear();
+  }
+  await textarea.fill('{"remote": "test"}');
+  await expect(
+    validJSONEditor.locator('.message', {
+      hasText: 'Cannot edit in read-only editor',
+    })
+  ).not.toBeVisible();
+
+  expect(await textarea.inputValue()).toEqual('{"remote": "test"}');
+  // check that the value in the div has the new string
+  await expect(validJSONEditor).toContainText('{"remote": "test"}');
+  await expect(validJSONEditor).not.toContainText(originalString);
+});
+
+test('If a readonly attribute is set, then the editor should be not editable', async ({
+  page,
+}) => {
+  const editor = page.getByTestId('code-editor-readonly');
+  // get the textarea input
+  const textarea = editor.locator('textarea');
+
+  await textarea.type('hello');
+  await expect(
+    editor.locator('.message', { hasText: 'Cannot edit in read-only editor' })
+  ).toBeVisible();
+
+  // expect the text on the editor to not actually change
+  await textarea.fill('hello');
+  await expect(editor).not.toContainText(/hello/);
+});
+
+test('Render a minimap if the minimap attribute is set to true', async ({
+  page,
+}) => {
+  const editor = page.getByTestId('code-editor-minimap');
+  const width = parseInt(
+    (await editor
+      .locator('.minimap-decorations-layer')
+      .getAttribute('width')) ?? '0'
+  );
+  expect(width).toBeGreaterThan(0);
+});
+
+test('If a minimap attribute is not set, the it should not render one', async ({
+  page,
+}) => {
+  const editor = page.getByTestId('code-editor-json-valid');
+  const width = parseInt(
+    (await editor
+      .locator('.minimap-decorations-layer')
+      .getAttribute('width')) ?? '0'
+  );
+  expect(width).toEqual(0);
+});
+
+test('Render a diff code editor if there is a previous attribute and variant diff', async ({
+  page,
+}) => {
+  const editor = page.getByTestId('code-editor-diff');
+  const diffEditor = editor.locator('.monaco-diff-editor');
+  await expect(diffEditor).toHaveClass(/side-by-side/);
+  await expect(diffEditor).toBeVisible();
+
+  // default renders in JSON
+  await expect(editor.locator('.editor.original')).toHaveAttribute(
+    'data-mode-id',
+    'json'
+  );
+  await expect(editor.locator('.editor.modified')).toHaveAttribute(
+    'data-mode-id',
+    'json'
+  );
+
+  // modified should have the "current state" -- the difference is an extra row so just check for that
+  await expect(editor.locator('.editor.modified')).toContainText('test5');
+  await expect(editor.locator('.editor.original')).not.toContainText('test5');
+});
diff --git a/tests/collapse.spec.ts b/tests/collapse.spec.ts
index d7487bf42..8948ea7fe 100644
--- a/tests/collapse.spec.ts
+++ b/tests/collapse.spec.ts
@@ -4,95 +4,106 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/collapse-test.html');
 });
 
-test('Confirms main title displays in collapse element if title attribute has been specified', async ({ page }) => {
-  const collapse = page.getByTestId('collapse-default')
-  await expect(collapse).toBeVisible()
-  
-  const collapseTitleText = 'Robots...'
-  const collapseTitle = collapse.getByText(collapseTitleText)
-  await expect(collapseTitle).toBeVisible()
-  await expect(collapseTitle).toHaveText(collapseTitleText)
+test('Confirms main title displays in collapse element if title attribute has been specified', async ({
+  page,
+}) => {
+  const collapse = page.getByTestId('collapse-default');
+  await expect(collapse).toBeVisible();
+
+  const collapseTitleText = 'Robots...';
+  const collapseTitle = collapse.getByText(collapseTitleText);
+  await expect(collapseTitle).toBeVisible();
+  await expect(collapseTitle).toHaveText(collapseTitleText);
 });
 
 test('Collapse renders title slot text', async ({ page }) => {
-  const collapse = page.getByTestId('collapse-default')
-  
-  const titleSlotText = '(title)'
-  const titleSlot = collapse.getByText(titleSlotText)
-  await expect(titleSlot).toBeVisible()
-  await expect(titleSlot).toHaveText(titleSlotText)
+  const collapse = page.getByTestId('collapse-default');
+
+  const titleSlotText = '(title)';
+  const titleSlot = collapse.getByText(titleSlotText);
+  await expect(titleSlot).toBeVisible();
+  await expect(titleSlot).toHaveText(titleSlotText);
 });
 
 test('Collapse renders header slot text', async ({ page }) => {
-  const collapse = page.getByTestId('collapse-default')
-  
-  const headerSlotText = '(header)'
-  const headerSlot = collapse.getByText(headerSlotText)
-  await expect(headerSlot).toBeVisible()
-  await expect(headerSlot).toHaveText(headerSlotText)
+  const collapse = page.getByTestId('collapse-default');
+
+  const headerSlotText = '(header)';
+  const headerSlot = collapse.getByText(headerSlotText);
+  await expect(headerSlot).toBeVisible();
+  await expect(headerSlot).toHaveText(headerSlotText);
 });
 
-test('Collapse renders open with chevron in closed position if open attribute specified as true', async ({ page }) => {
-  const openCollapse = page.getByTestId('collapse-open')
-  await expect(openCollapse).toBeVisible()
+test('Collapse renders open with chevron in closed position if open attribute specified as true', async ({
+  page,
+}) => {
+  const openCollapse = page.getByTestId('collapse-open');
+  await expect(openCollapse).toBeVisible();
 
-  await expect(openCollapse).toHaveJSProperty('open','true')
-  await expect(openCollapse.locator('i')).toHaveClass(/icon-chevron-down/)
-  await expect(openCollapse.locator('i')).toBeVisible()
-  await expect(openCollapse.locator('v-icon')).toHaveClass(/rotate-180/)
+  await expect(openCollapse).toHaveJSProperty('open', 'true');
+  await expect(openCollapse.locator('i')).toHaveClass(/icon-chevron-down/);
+  await expect(openCollapse.locator('i')).toBeVisible();
+  await expect(openCollapse.locator('v-icon')).toHaveClass(/rotate-180/);
 });
 
-test('Collapse renders closed with chevron in closed position if open attribute specified as false', async ({ page }) => {
+test('Collapse renders closed with chevron in closed position if open attribute specified as false', async ({
+  page,
+}) => {
   // no "open" property, default display closed
-  const collapse = page.getByTestId('collapse-default')
-  await expect(collapse.locator('i')).toHaveClass(/icon-chevron-down/)
-  await expect(collapse.locator('i')).toBeVisible()
-  await expect(collapse.locator('v-icon')).toHaveClass(/rotate-0/)
+  const collapse = page.getByTestId('collapse-default');
+  await expect(collapse.locator('i')).toHaveClass(/icon-chevron-down/);
+  await expect(collapse.locator('i')).toBeVisible();
+  await expect(collapse.locator('v-icon')).toHaveClass(/rotate-0/);
 
   // "open" property "false" has been applied
-  const closedCollapse = page.getByTestId('collapse-closed')
-  await expect(closedCollapse).toBeVisible()
-  await expect(closedCollapse.locator('i')).toHaveClass(/icon-chevron-down/)
-  await expect(closedCollapse.locator('i')).toBeVisible()
-  await expect(closedCollapse.locator('v-icon')).toHaveClass(/rotate-0/)
+  const closedCollapse = page.getByTestId('collapse-closed');
+  await expect(closedCollapse).toBeVisible();
+  await expect(closedCollapse.locator('i')).toHaveClass(/icon-chevron-down/);
+  await expect(closedCollapse.locator('i')).toBeVisible();
+  await expect(closedCollapse.locator('v-icon')).toHaveClass(/rotate-0/);
 });
 
-test('If collapse is in closed position, confirm it opens after click and vice versa', async ({ page }) => {
-  const collapse = page.getByTestId('collapse-default')
+test('If collapse is in closed position, confirm it opens after click and vice versa', async ({
+  page,
+}) => {
+  const collapse = page.getByTestId('collapse-default');
   // If closed, after click, collapse should open (and display child)
-  const expandText = '...are pretty cool!'
-  const expand = collapse.getByText(expandText)
+  const expandText = '...are pretty cool!';
+  const expand = collapse.getByText(expandText);
 
-  await expect(collapse).toHaveJSProperty('open', 'false')
-  await expect(expand).toBeHidden()
-  await collapse.click()
-  await expect(expand).toBeVisible()
-  await expect(expand).toHaveText(expandText)
-  await expect(collapse.locator('i')).toHaveClass(/icon-chevron-down/)
-  await expect(collapse.locator('i')).toBeVisible()
-  await expect(collapse.locator('v-icon')).toHaveClass(/rotate-180/)
+  await expect(collapse).toHaveJSProperty('open', 'false');
+  await expect(expand).toBeHidden();
+  await collapse.click();
+  await expect(expand).toBeVisible();
+  await expect(expand).toHaveText(expandText);
+  await expect(collapse.locator('i')).toHaveClass(/icon-chevron-down/);
+  await expect(collapse.locator('i')).toBeVisible();
+  await expect(collapse.locator('v-icon')).toHaveClass(/rotate-180/);
 
   // If open, after click, collapse should close (and hide child)
-  await expect(expand).toBeVisible()
-  await collapse.click()
-  await expect(expand).toBeHidden()
-  await expect(collapse.locator('i')).toHaveClass(/icon-chevron-down/)
-  await expect(collapse.locator('i')).toBeVisible()
-  await expect(collapse.locator('v-icon')).toHaveClass(/rotate-0/)
+  await expect(expand).toBeVisible();
+  await collapse.click();
+  await expect(expand).toBeHidden();
+  await expect(collapse.locator('i')).toHaveClass(/icon-chevron-down/);
+  await expect(collapse.locator('i')).toBeVisible();
+  await expect(collapse.locator('v-icon')).toHaveClass(/rotate-0/);
 });
 
-test('Confirms collapse with breadcrumbs and badge displays properly', async ({ page }) => {
-  const bbCollapse = page.getByTestId('collapse-breadcrumbs-badge')
-  await expect(bbCollapse).toBeVisible()
+test('Confirms collapse with breadcrumbs and badge displays properly', async ({
+  page,
+}) => {
+  const bbCollapse = page.getByTestId('collapse-breadcrumbs-badge');
+  await expect(bbCollapse).toBeVisible();
   // Collapse with breadcrumbs and badge should display properly
-  const bbTitleText = "A word on bread"
-  await expect(bbCollapse.getByText(bbTitleText)).toBeVisible()
-  await expect(bbCollapse.getByText(bbTitleText)).toHaveText(bbTitleText)
+  const bbTitleText = 'A word on bread';
+  await expect(bbCollapse.getByText(bbTitleText)).toBeVisible();
+  await expect(bbCollapse.getByText(bbTitleText)).toHaveText(bbTitleText);
   // Breadcrumbs should display
-  await expect(bbCollapse.getByText('sourdough')).toBeVisible()
-  await expect(bbCollapse.getByText('ciabatta')).toBeVisible()
+  await expect(bbCollapse.getByText('sourdough')).toBeVisible();
+  await expect(bbCollapse.getByText('ciabatta')).toBeVisible();
   // Badge should display
-  await expect(bbCollapse.getByText('FRESH')).toBeVisible()
-  const bbExpandText = "How do you tell how good bread is without tasting it? Not the smell, not the look, but the sound of the crust. Listen. Symphony of crackle."
-  await expect(bbCollapse.getByText(bbExpandText)).toBeHidden()
+  await expect(bbCollapse.getByText('FRESH')).toBeVisible();
+  const bbExpandText =
+    'How do you tell how good bread is without tasting it? Not the smell, not the look, but the sound of the crust. Listen. Symphony of crackle.';
+  await expect(bbCollapse.getByText(bbExpandText)).toBeHidden();
 });
diff --git a/tests/icon.spec.ts b/tests/icon.spec.ts
new file mode 100644
index 000000000..3f40577ef
--- /dev/null
+++ b/tests/icon.spec.ts
@@ -0,0 +1,89 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/icon-test.html');
+});
+
+test('Renders an icon if name attribute is specified as a valid v-icon', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('icon-default-valid')).toBeVisible();
+});
+
+test('Does not render an icon if name attribute is specified as an invalid v-icon', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('icon-default-invalid')).not.toBeVisible();
+});
+
+test('Renders and icon as extra small if size attribute is specified as xs', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('icon-size-xs')).toBeVisible();
+  await expect(page.getByTestId('icon-size-xs').locator('i')).toHaveClass(
+    /text-xs/
+  );
+});
+
+test('Renders and icon as small if size attribute is specified as sm', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('icon-size-sm')).toBeVisible();
+  await expect(page.getByTestId('icon-size-sm').locator('i')).toHaveClass(
+    /text-sm/
+  );
+});
+
+test('Renders and icon as the base size if size attribute is specified as base', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('icon-size-base')).toBeVisible();
+  await expect(page.getByTestId('icon-size-base').locator('i')).toHaveClass(
+    /text-base/
+  );
+});
+
+test('Renders and icon as the large size if size attribute is specified as lg', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('icon-size-lg')).toBeVisible();
+  await expect(page.getByTestId('icon-size-lg').locator('i')).toHaveClass(
+    /text-lg/
+  );
+});
+
+test('Renders and icon as the extra large size if size attribute is specified as xl', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('icon-size-xl')).toBeVisible();
+  await expect(page.getByTestId('icon-size-xl').locator('i')).toHaveClass(
+    /text-xl/
+  );
+});
+
+test('Renders and icon as the 2xl size if size attribute is specified as 2xl', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('icon-size-2xl')).toBeVisible();
+  await expect(page.getByTestId('icon-size-2xl').locator('i')).toHaveClass(
+    /text-2xl/
+  );
+});
+
+test('Renders and icon as the 3xl size if size attribute is specified as 3xl', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('icon-size-3xl')).toBeVisible();
+  await expect(page.getByTestId('icon-size-3xl').locator('i')).toHaveClass(
+    /text-3xl/
+  );
+});
+
+test('Renders and icon as the 4xl size if size attribute is specified as 4xl', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('icon-size-4xl')).toBeVisible();
+  await expect(page.getByTestId('icon-size-4xl').locator('i')).toHaveClass(
+    /text-4xl/
+  );
+});
diff --git a/tests/input.spec.ts b/tests/input.spec.ts
index a46166012..3fc707edf 100644
--- a/tests/input.spec.ts
+++ b/tests/input.spec.ts
@@ -1,263 +1,380 @@
 import { test, expect } from '@playwright/test';
-import { hexToRGB, getCustomEventParam, waitForCustomEventTimeout, waitForCustomEventWithParam } from './lib/helper.ts';
+import {
+  hexToRGB,
+  getCustomEventParam,
+  waitForCustomEventTimeout,
+  waitForCustomEventWithParam,
+} from './lib/helper.ts';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/input-test.html');
 });
 
 test('Given type text, renders text input', async ({ page }) => {
-  const inputText = await page.getByTestId('input-text')
-  await expect(inputText).toBeVisible()
-  await expect(inputText.locator('input').first()).toHaveAttribute('type', 'text')
+  const inputText = await page.getByTestId('input-text');
+  await expect(inputText).toBeVisible();
+  await expect(inputText.locator('input').first()).toHaveAttribute(
+    'type',
+    'text'
+  );
 });
 
 test('Given no type, renders text input', async ({ page }) => {
-  const inputDefault = await page.getByTestId('input-default')
-  await expect(inputDefault).toBeVisible()
-  await expect(inputDefault.locator('input').first()).toHaveAttribute('type', 'text')
+  const inputDefault = await page.getByTestId('input-default');
+  await expect(inputDefault).toBeVisible();
+  await expect(inputDefault.locator('input').first()).toHaveAttribute(
+    'type',
+    'text'
+  );
 });
 
-test('Given value attribute, initializes with given value as input value', async ({ page }) => {
-  const inputText = await page.getByTestId('input-text')
-  await expect(inputText).toBeVisible()
-  await expect(inputText.locator('input').first()).toHaveValue('value')
+test('Given value attribute, initializes with given value as input value', async ({
+  page,
+}) => {
+  const inputText = await page.getByTestId('input-text');
+  await expect(inputText).toBeVisible();
+  await expect(inputText.locator('input').first()).toHaveValue('value');
 });
 
 test('Displays "*" next to the label if required', async ({ page }) => {
-  const inputRequired = await page.getByTestId('input-required')
-  await expect(inputRequired).toBeVisible()
-  await expect(inputRequired.locator('input[required]').first()).toBeVisible()
-  const asterisk = await inputRequired.getByText(">:)").evaluate((e1) => {     
+  const inputRequired = await page.getByTestId('input-required');
+  await expect(inputRequired).toBeVisible();
+  await expect(inputRequired.locator('input[required]').first()).toBeVisible();
+  const asterisk = await inputRequired.getByText('>:)').evaluate((e1) => {
     return {
-      'content': window.getComputedStyle(e1,':after').getPropertyValue('content'),
-      'color': window.getComputedStyle(e1, ':after').color,
-    }
-  })
-  expect(asterisk.content).toContain("*")
-  expect(asterisk.color).toBe(hexToRGB('danger-fg'))
+      content: window
+        .getComputedStyle(e1, ':after')
+        .getPropertyValue('content'),
+      color: window.getComputedStyle(e1, ':after').color,
+    };
+  });
+  expect(asterisk.content).toContain('*');
+  expect(asterisk.color).toBe(hexToRGB('danger-fg'));
 });
 
 test('Displays label on top of input by default', async ({ page }) => {
-  const inputDefault = await page.getByTestId('input-default')
-  await expect(inputDefault.getByText('default')).toBeVisible()
-  await expect(await inputDefault.locator("input:below(:text('default'))").first()).toBeVisible()
+  const inputDefault = await page.getByTestId('input-default');
+  await expect(inputDefault.getByText('default')).toBeVisible();
+  await expect(
+    await inputDefault.locator("input:below(:text('default'))").first()
+  ).toBeVisible();
 });
 
-test('Displays label on top of input with labelposition top', async ({ page }) => {
-  const inputLabelTop = await page.getByTestId('input-label-top')
-  await expect(inputLabelTop.getByText(':D')).toBeVisible()
-  await expect(await inputLabelTop.locator("input:below(:text(':D'))").first()).toBeVisible()
+test('Displays label on top of input with labelposition top', async ({
+  page,
+}) => {
+  const inputLabelTop = await page.getByTestId('input-label-top');
+  await expect(inputLabelTop.getByText(':D')).toBeVisible();
+  await expect(
+    await inputLabelTop.locator("input:below(:text(':D'))").first()
+  ).toBeVisible();
 });
 
-test('Displays label to left of input with labelposition left', async ({ page }) => {
-  const inputLabelLeft = await page.getByTestId('input-label-left')
-  await expect(inputLabelLeft.getByText('D:')).toBeVisible()
-  await expect(await inputLabelLeft.locator("input:right-of(:text('D:'))").first()).toBeVisible()
+test('Displays label to left of input with labelposition left', async ({
+  page,
+}) => {
+  const inputLabelLeft = await page.getByTestId('input-label-left');
+  await expect(inputLabelLeft.getByText('D:')).toBeVisible();
+  await expect(
+    await inputLabelLeft.locator("input:right-of(:text('D:'))").first()
+  ).toBeVisible();
 });
 
-test('Given type number, initializes with given number value', async ({ page }) => {
-  const inputNumber = await page.getByTestId('input-number')
-  await expect(inputNumber).toBeVisible()
-  await expect(inputNumber.locator('input').first()).toHaveValue('3.14159')
+test('Given type number, initializes with given number value', async ({
+  page,
+}) => {
+  const inputNumber = await page.getByTestId('input-number');
+  await expect(inputNumber).toBeVisible();
+  await expect(inputNumber.locator('input').first()).toHaveValue('3.14159');
 });
 
-test('Given type number, only allows number-related characters ([0-9eE+-.]) to be input', async ({ page }) => {
-  const inputNumber = await page.getByTestId('input-number')
-  const input = await inputNumber.locator('input').first()
+test('Given type number, only allows number-related characters ([0-9eE+-.]) to be input', async ({
+  page,
+}) => {
+  const inputNumber = await page.getByTestId('input-number');
+  const input = await inputNumber.locator('input').first();
 
-  await input.fill('NaN!!!')
-  await expect(input).toHaveValue('')
+  await input.fill('NaN!!!');
+  await expect(input).toHaveValue('');
 
-  await input.fill('101')
-  await expect(input).toHaveValue('101')
+  await input.fill('101');
+  await expect(input).toHaveValue('101');
 
-  await input.fill('3.14')
-  await expect(input).toHaveValue('3.14')
+  await input.fill('3.14');
+  await expect(input).toHaveValue('3.14');
 
-  await input.fill('3.141e2')
-  await expect(input).toHaveValue('3.141e2')
+  await input.fill('3.141e2');
+  await expect(input).toHaveValue('3.141e2');
 
-  await input.fill('-3.141e+2')
-  await expect(input).toHaveValue('-3.141e+2')
+  await input.fill('-3.141e+2');
+  await expect(input).toHaveValue('-3.141e+2');
 
-  await input.fill('3aBc!.+-e')
-  await expect(input).toHaveValue('3.+-e')
+  await input.fill('3aBc!.+-e');
+  await expect(input).toHaveValue('3.+-e');
 });
 
-test('Given type number, displays error state if number if invalid on blur', async ({ page }) => {
-  const inputNumber = await page.getByTestId('input-number')
-  const input = await inputNumber.locator('input').first()
+test('Given type number, displays error state if number if invalid on blur', async ({
+  page,
+}) => {
+  const inputNumber = await page.getByTestId('input-number');
+  const input = await inputNumber.locator('input').first();
 
-  await input.fill('eeeEEE')
-  await input.blur()
-  await expect(input).toHaveCSS('border-color', hexToRGB('danger-fg'))
+  await input.fill('eeeEEE');
+  await input.blur();
+  await expect(input).toHaveCSS('border-color', hexToRGB('danger-fg'));
 });
 
-test('Given type number, responds to up and down keys according to step value', async ({ page }) => {
+test('Given type number, responds to up and down keys according to step value', async ({
+  page,
+}) => {
   // default step 1
-  const inputNumber = await page.getByTestId('input-number')
-  const inputBoxNumber = await inputNumber.locator('input').first()
-  await inputBoxNumber.fill('0')
-  await inputBoxNumber.press('ArrowUp')
-  await expect(Number.parseFloat(await inputBoxNumber.inputValue())).toBe(1)
-  await inputBoxNumber.press('ArrowDown')
-  await expect(Number.parseFloat(await inputBoxNumber.inputValue())).toBe(0)
-
-  const inputStep = await page.getByTestId('input-step')
-  const inputBoxStep = await inputStep.locator('input').first()
-  await inputBoxStep.press('ArrowUp')
-  await expect(Number.parseFloat(await inputBoxStep.inputValue())).toBe(0.5)
-  await inputBoxStep.press('ArrowDown')
-  await expect(Number.parseFloat(await inputBoxStep.inputValue())).toBe(0)
-});
-
-test('Given type number, limits input to range within max and min values with slider', async ({ page }) => {
-  const inputSlider = await page.getByTestId('input-slider')
-  const input = await inputSlider.locator('input').first()
-  const slider = await inputSlider.locator("div.cursor-pointer").first()
-  await slider.dragTo(slider, { targetPosition: { x: 200, y: 0 }, force: true})
-  expect(Number.parseFloat(await input.inputValue())).toBeGreaterThan(0)
-  expect(Number.parseFloat(await input.inputValue())).toBeLessThan(50) // don't slide to max yet
-  
+  const inputNumber = await page.getByTestId('input-number');
+  const inputBoxNumber = await inputNumber.locator('input').first();
+  await inputBoxNumber.fill('0');
+  await inputBoxNumber.press('ArrowUp');
+  await expect(Number.parseFloat(await inputBoxNumber.inputValue())).toBe(1);
+  await inputBoxNumber.press('ArrowDown');
+  await expect(Number.parseFloat(await inputBoxNumber.inputValue())).toBe(0);
+
+  const inputStep = await page.getByTestId('input-step');
+  const inputBoxStep = await inputStep.locator('input').first();
+  await inputBoxStep.press('ArrowUp');
+  await expect(Number.parseFloat(await inputBoxStep.inputValue())).toBe(0.5);
+  await inputBoxStep.press('ArrowDown');
+  await expect(Number.parseFloat(await inputBoxStep.inputValue())).toBe(0);
+});
+
+test('Given type number, limits input to range within max and min values with slider', async ({
+  page,
+}) => {
+  const inputSlider = await page.getByTestId('input-slider');
+  const input = await inputSlider.locator('input').first();
+  const slider = await inputSlider.locator('div.cursor-pointer').first();
+  await slider.dragTo(slider, {
+    targetPosition: { x: 200, y: 0 },
+    force: true,
+  });
+  expect(Number.parseFloat(await input.inputValue())).toBeGreaterThan(0);
+  expect(Number.parseFloat(await input.inputValue())).toBeLessThan(50); // don't slide to max yet
+
   // test max
-  await slider.dragTo(slider, { targetPosition: { x: 1000, y: 0 }, force: true})
-  await expect(Number.parseFloat(await input.inputValue())).toBe(50)
+  await slider.dragTo(slider, {
+    targetPosition: { x: 1000, y: 0 },
+    force: true,
+  });
+  await expect(Number.parseFloat(await input.inputValue())).toBe(50);
 
   // test min
-  await slider.dragTo(slider, { targetPosition: { x: -1000, y: 0 }, force: true})
-  await expect(Number.parseFloat(await input.inputValue())).toBe(-50)
-});
-
-test('Given type number and no step value, defaults step to 1', async ({ page }) => {
-  const inputNumber = await page.getByTestId('input-number')
-  await expect(inputNumber).toBeVisible()
-  await expect(inputNumber.locator('input').first()).toHaveJSProperty('step', '1')
-});
-
-test('Given type integer, renders number input and initializes with given value', async ({ page }) => {
-  const inputInteger = await page.getByTestId('input-integer')
-  await expect(inputInteger).toBeVisible()
-  await expect(inputInteger.locator('input').first()).toHaveAttribute('type', 'number')
-  await expect(inputInteger.locator('input').first()).toHaveValue('20')
-});
-
-test('Given type integer, responds to up and down keys and slider with integers according to step value', async ({ page }) => {
-  const inputInteger = await page.getByTestId('input-integer')
-  const input = await inputInteger.locator('input').first()
-  await input.press('ArrowUp')
-  expect(await input.inputValue()).toBe('30')
-  await input.press('ArrowDown')
-  expect(await input.inputValue()).toBe('20')
-
-  const slider = await inputInteger.locator("div.cursor-pointer").first()
-  await slider.dragTo(slider, { targetPosition: { x: 500, y: 0 }, force: true})
-  expect((await input.inputValue()).includes('.')).toBe(false)
-  expect(Number.parseInt(await input.inputValue()) % 10).toBe(0)
+  await slider.dragTo(slider, {
+    targetPosition: { x: -1000, y: 0 },
+    force: true,
+  });
+  await expect(Number.parseFloat(await input.inputValue())).toBe(-50);
+});
+
+test('Given type number and no step value, defaults step to 1', async ({
+  page,
+}) => {
+  const inputNumber = await page.getByTestId('input-number');
+  await expect(inputNumber).toBeVisible();
+  await expect(inputNumber.locator('input').first()).toHaveJSProperty(
+    'step',
+    '1'
+  );
+});
+
+test('Given type integer, renders number input and initializes with given value', async ({
+  page,
+}) => {
+  const inputInteger = await page.getByTestId('input-integer');
+  await expect(inputInteger).toBeVisible();
+  await expect(inputInteger.locator('input').first()).toHaveAttribute(
+    'type',
+    'number'
+  );
+  await expect(inputInteger.locator('input').first()).toHaveValue('20');
+});
+
+test('Given type integer, responds to up and down keys and slider with integers according to step value', async ({
+  page,
+}) => {
+  const inputInteger = await page.getByTestId('input-integer');
+  const input = await inputInteger.locator('input').first();
+  await input.press('ArrowUp');
+  expect(await input.inputValue()).toBe('30');
+  await input.press('ArrowDown');
+  expect(await input.inputValue()).toBe('20');
+
+  const slider = await inputInteger.locator('div.cursor-pointer').first();
+  await slider.dragTo(slider, {
+    targetPosition: { x: 500, y: 0 },
+    force: true,
+  });
+  expect((await input.inputValue()).includes('.')).toBe(false);
+  expect(Number.parseInt(await input.inputValue()) % 10).toBe(0);
 });
 
 test('Displays placeholder', async ({ page }) => {
-  const inputPlaceholder = await page.getByTestId('input-placeholder')
-  await expect(inputPlaceholder).toBeVisible()
-  await expect(inputPlaceholder.locator('input').first()).toHaveAttribute('placeholder', 'waka waka')
+  const inputPlaceholder = await page.getByTestId('input-placeholder');
+  await expect(inputPlaceholder).toBeVisible();
+  await expect(inputPlaceholder.locator('input').first()).toHaveAttribute(
+    'placeholder',
+    'waka waka'
+  );
 });
 
 test('Given type date, renders date input', async ({ page }) => {
-  const inputDate = await page.getByTestId('input-date')
-  await expect(inputDate).toBeVisible()
-  await expect(inputDate.locator('input').first()).toHaveAttribute('type', 'date')
+  const inputDate = await page.getByTestId('input-date');
+  await expect(inputDate).toBeVisible();
+  await expect(inputDate.locator('input').first()).toHaveAttribute(
+    'type',
+    'date'
+  );
 });
 
 test('Given type time, renders time input', async ({ page }) => {
-  const inputTime = await page.getByTestId('input-time')
-  await expect(inputTime).toBeVisible()
-  await expect(inputTime.locator('input').first()).toHaveAttribute('type', 'time')
+  const inputTime = await page.getByTestId('input-time');
+  await expect(inputTime).toBeVisible();
+  await expect(inputTime.locator('input').first()).toHaveAttribute(
+    'type',
+    'time'
+  );
 });
 
-test('Given type datetime-local, renders datetime-local input', async ({ page }) => {
-  const inputDatetime = await page.getByTestId('input-datetimelocal')
-  await expect(inputDatetime).toBeVisible()
-  await expect(inputDatetime.locator('input').first()).toHaveAttribute('type', 'datetime-local')
+test('Given type datetime-local, renders datetime-local input', async ({
+  page,
+}) => {
+  const inputDatetime = await page.getByTestId('input-datetimelocal');
+  await expect(inputDatetime).toBeVisible();
+  await expect(inputDatetime.locator('input').first()).toHaveAttribute(
+    'type',
+    'datetime-local'
+  );
 });
 
 test('Given type email, renders email input', async ({ page }) => {
-  const inputEmail = await page.getByTestId('input-email')
-  await expect(inputEmail).toBeVisible()
-  await expect(inputEmail.locator('input').first()).toHaveAttribute('type', 'email')
+  const inputEmail = await page.getByTestId('input-email');
+  await expect(inputEmail).toBeVisible();
+  await expect(inputEmail.locator('input').first()).toHaveAttribute(
+    'type',
+    'email'
+  );
 });
 
 test('Renders without label if not given a label', async ({ page }) => {
-  const inputText = await page.getByTestId('input-text')
-  await expect(await inputText.locator(':above(input)').first().textContent()).toBe(" ")
+  const inputText = await page.getByTestId('input-text');
+  await expect(
+    await inputText.locator(':above(input)').first().textContent()
+  ).toBe(' ');
 });
 
-test('Given attribute tooltip with no state, render info icon above the input', async ({ page }) => {
-  const inputTooltip = page.getByTestId("input-tooltip-default")
-  await expect(inputTooltip.locator('v-tooltip > div').first()).toHaveClass(/icon-info-outline/)
+test('Given attribute tooltip with no state, render info icon above the input', async ({
+  page,
+}) => {
+  const inputTooltip = page.getByTestId('input-tooltip-default');
+  await expect(inputTooltip.locator('v-tooltip > div').first()).toHaveClass(
+    /icon-info-outline/
+  );
 });
 
-test('Given attribute tooltip with info state, render info icon above the input', async ({ page }) => {
-  const inputInfoTooltip = page.getByTestId("input-tooltip-info")
-  await expect(inputInfoTooltip.locator('v-tooltip > div').first()).toHaveClass(/icon-info-outline/)
+test('Given attribute tooltip with info state, render info icon above the input', async ({
+  page,
+}) => {
+  const inputInfoTooltip = page.getByTestId('input-tooltip-info');
+  await expect(inputInfoTooltip.locator('v-tooltip > div').first()).toHaveClass(
+    /icon-info-outline/
+  );
 });
 
-test('Given attribute tooltip with warn state, render warn icon above the input', async ({ page }) => {
-  const inputWarnTooltip = page.getByTestId("input-tooltip-warn")
-  await expect(inputWarnTooltip.locator('v-tooltip > div').first()).toHaveClass(/icon-error-outline text-warning-fg/)
+test('Given attribute tooltip with warn state, render warn icon above the input', async ({
+  page,
+}) => {
+  const inputWarnTooltip = page.getByTestId('input-tooltip-warn');
+  await expect(inputWarnTooltip.locator('v-tooltip > div').first()).toHaveClass(
+    /icon-error-outline text-warning-fg/
+  );
 });
 
-test('Given attribute tooltip with error state, render error icon above the input', async ({ page }) => {
-  const inputErrorTooltip = page.getByTestId("input-tooltip-error")
-  await expect(inputErrorTooltip.locator('v-tooltip > div').first()).toHaveClass(/icon-error-outline text-danger-fg/)
+test('Given attribute tooltip with error state, render error icon above the input', async ({
+  page,
+}) => {
+  const inputErrorTooltip = page.getByTestId('input-tooltip-error');
+  await expect(
+    inputErrorTooltip.locator('v-tooltip > div').first()
+  ).toHaveClass(/icon-error-outline text-danger-fg/);
 });
 
 test('Given a readonly attribute, renders readonly input', async ({ page }) => {
-  const inputReadonly = page.getByTestId("input-readonly")
-  await expect(inputReadonly).toBeVisible()
-  await expect(inputReadonly.locator('input').first()).toHaveAttribute('readonly', '')
-  await expect(inputReadonly.locator('input').first()).toHaveValue('teehee')
+  const inputReadonly = page.getByTestId('input-readonly');
+  await expect(inputReadonly).toBeVisible();
+  await expect(inputReadonly.locator('input').first()).toHaveAttribute(
+    'readonly',
+    ''
+  );
+  await expect(inputReadonly.locator('input').first()).toHaveValue('teehee');
 });
 
 test('Given a disabled attribute, renders disabled input', async ({ page }) => {
-  const inputDisabled = page.getByTestId("input-disabled")
-  await expect(inputDisabled).toBeVisible()
-  await expect(inputDisabled.locator('input').first()).toBeDisabled()
-  await expect(inputDisabled.locator('input').first()).toHaveClass(/bg-disabled-bg text-disabled-fg border-disabled-bg/)
+  const inputDisabled = page.getByTestId('input-disabled');
+  await expect(inputDisabled).toBeVisible();
+  await expect(inputDisabled.locator('input').first()).toBeDisabled();
+  await expect(inputDisabled.locator('input').first()).toHaveClass(
+    /bg-disabled-bg text-disabled-fg border-disabled-bg/
+  );
 });
 
 test('Displays message below input box', async ({ page }) => {
-  const inputMessage = page.getByTestId("input-message")
-  await expect(inputMessage).toBeVisible()
-  await expect(inputMessage.getByText('it\'s the cliiimb')).toBeVisible()
-  await expect(inputMessage.locator('input:above(:text("it\'s the cliiimb"))')).toBeVisible()
-});
-
-test('With error state, displays message below input box in red', async ({ page }) => {
-  const inputMessageError = page.getByTestId("input-message-error")
-  await expect(inputMessageError.getByText('fell off the cliiimb')).toHaveClass(/text-red-600/)
-  await expect(inputMessageError.locator('input:above(:text("fell off the cliiimb"))')).toBeVisible()
-});
-
-test('Given type number, only dispatches valid and new number values', async ({ page }) => {
-  const inputNumber = await page.getByTestId('input-number')
-  const input = await inputNumber.locator('input').first()
-
-  const noInputEvent1 = await waitForCustomEventTimeout(page, 'input')
-  await input.fill('NaN')
-  await noInputEvent1
-
-  const isInputEventEmitted = await waitForCustomEventWithParam(page, 'input', 'value')
-  await input.fill('1')
-  expect(await getCustomEventParam(page, 'input', 'value')).toBe("1")
-
-  const noInputEvent2 = await waitForCustomEventTimeout(page, 'input')
-  await input.type('.')
-  await noInputEvent2
+  const inputMessage = page.getByTestId('input-message');
+  await expect(inputMessage).toBeVisible();
+  await expect(inputMessage.getByText("it's the cliiimb")).toBeVisible();
+  await expect(
+    inputMessage.locator('input:above(:text("it\'s the cliiimb"))')
+  ).toBeVisible();
+});
+
+test('With error state, displays message below input box in red', async ({
+  page,
+}) => {
+  const inputMessageError = page.getByTestId('input-message-error');
+  await expect(inputMessageError.getByText('fell off the cliiimb')).toHaveClass(
+    /text-red-600/
+  );
+  await expect(
+    inputMessageError.locator('input:above(:text("fell off the cliiimb"))')
+  ).toBeVisible();
+});
+
+test('Given type number, only dispatches valid and new number values', async ({
+  page,
+}) => {
+  const inputNumber = await page.getByTestId('input-number');
+  const input = await inputNumber.locator('input').first();
+
+  const noInputEvent1 = await waitForCustomEventTimeout(page, 'input');
+  await input.fill('NaN');
+  await noInputEvent1;
+
+  const isInputEventEmitted = await waitForCustomEventWithParam(
+    page,
+    'input',
+    'value'
+  );
+  await input.fill('1');
+  expect(await getCustomEventParam(page, 'input', 'value')).toBe('1');
+
+  const noInputEvent2 = await waitForCustomEventTimeout(page, 'input');
+  await input.type('.');
+  await noInputEvent2;
 });
 
 test('Fires input event with value on input', async ({ page }) => {
-  const input = page.getByTestId("input-default").locator('input').first()
-  const isInputEventEmitted = await waitForCustomEventWithParam(page, 'input', 'value')
-  await input.fill("asdfJKL;123")
-  expect(isInputEventEmitted).toBeTruthy()
-  expect(await getCustomEventParam(page, 'input', 'value')).toBe("asdfJKL;123")
+  const input = page.getByTestId('input-default').locator('input').first();
+  const isInputEventEmitted = await waitForCustomEventWithParam(
+    page,
+    'input',
+    'value'
+  );
+  await input.fill('asdfJKL;123');
+  expect(isInputEventEmitted).toBeTruthy();
+  expect(await getCustomEventParam(page, 'input', 'value')).toBe('asdfJKL;123');
 });
diff --git a/tests/lib/helper.ts b/tests/lib/helper.ts
index f35d41f10..09fc0d776 100644
--- a/tests/lib/helper.ts
+++ b/tests/lib/helper.ts
@@ -1,62 +1,91 @@
-import { expect,Page } from '@playwright/test';
-import config from '../../tailwind.config.cjs'
+import { expect, Page } from '@playwright/test';
+import config from '../../tailwind.config.cjs';
 
 export const hexToRGB = (color?: string) => {
   const hex = config.theme.extend.colors[color];
 
   if (!hex) {
-    throw new Error(`hex not found for color: ${color}`)
+    throw new Error(`hex not found for color: ${color}`);
   }
 
   let alpha = false;
   let h = hex.slice(hex.startsWith('#') ? 1 : 0);
-  if (h.length === 3) h = [...h].map(x => x + x).join('');
+  if (h.length === 3) h = [...h].map((x) => x + x).join('');
   else if (h.length === 8) alpha = true;
   h = Number.parseInt(h, 16);
-  return (
-    `rgb${ 
-      alpha ? 'a' : '' 
-    }(${ 
-      h >>> (alpha ? 24 : 16) 
-    }, ${ 
-      (h & (alpha ? 0x00_FF_00_00 : 0x00_FF_00)) >>> (alpha ? 16 : 8) 
-    }, ${ 
-      (h & (alpha ? 0x00_00_FF_00 : 0x00_00_FF)) >>> (alpha ? 8 : 0) 
-    }${alpha ? `, ${h & 0x00_00_00_FF}` : '' 
-    })`
-  );
+  return `rgb${alpha ? 'a' : ''}(${h >>> (alpha ? 24 : 16)}, ${
+    (h & (alpha ? 0x00_ff_00_00 : 0x00_ff_00)) >>> (alpha ? 16 : 8)
+  }, ${(h & (alpha ? 0x00_00_ff_00 : 0x00_00_ff)) >>> (alpha ? 8 : 0)}${
+    alpha ? `, ${h & 0x00_00_00_ff}` : ''
+  })`;
 };
 
-export const waitForCustomEvent = async (page:Page, customEventName:string) => {
-  return page.evaluate(eventName => new Promise(callback => window.addEventListener(eventName, callback,{ once: true })), customEventName)
-}
+export const waitForCustomEvent = async (
+  page: Page,
+  customEventName: string
+) => {
+  return page.evaluate(
+    (eventName) =>
+      new Promise((callback) =>
+        window.addEventListener(eventName, callback, { once: true })
+      ),
+    customEventName
+  );
+};
 
-export const waitForCustomEventTimeout = async (page:Page,customEventName:string) => {
+export const waitForCustomEventTimeout = async (
+  page: Page,
+  customEventName: string
+) => {
   const value = await Promise.race([
-    page.evaluate(eventName => new Promise(callback => window.addEventListener(eventName, callback, { once: true })), customEventName),
-    new Promise((resolve) => {setTimeout(resolve, 500, "timeout")}),
-  ])
+    page.evaluate(
+      (eventName) =>
+        new Promise((callback) =>
+          window.addEventListener(eventName, callback, { once: true })
+        ),
+      customEventName
+    ),
+    new Promise((resolve) => {
+      setTimeout(resolve, 500, 'timeout');
+    }),
+  ]);
 
-  expect(value).toBe("timeout")
-}
+  expect(value).toBe('timeout');
+};
 
 // This function adds an event listener for eventName and puts the value of paramName on the window
-export const waitForCustomEventWithParam = async (page:Page, eventName:string, paramName:string) => {
+export const waitForCustomEventWithParam = async (
+  page: Page,
+  eventName: string,
+  paramName: string
+) => {
   return page.evaluate(
     (eventInfo) => {
       function listener(event) {
-        const dispatchedEvent = { [eventInfo.eventName]: { [eventInfo.paramName]: event.detail[eventInfo.paramName] } }
-        window['__testingCustomEvents'] = dispatchedEvent
+        const dispatchedEvent = {
+          [eventInfo.eventName]: {
+            [eventInfo.paramName]: event.detail[eventInfo.paramName],
+          },
+        };
+        window['__testingCustomEvents'] = dispatchedEvent;
       }
-      return new Promise(resolve => {
-        window.addEventListener(eventInfo.eventName, listener, { once: true })
-        resolve(eventInfo.eventName + ' event called!')
-      })}, 
-  {eventName, paramName})
-}
+      return new Promise((resolve) => {
+        window.addEventListener(eventInfo.eventName, listener, { once: true });
+        resolve(eventInfo.eventName + ' event called!');
+      });
+    },
+    { eventName, paramName }
+  );
+};
 
 // This function retrieves the dispatched event's parameter value, as set by waitForCustomEventWithParam()
 // Call this only after setting up an event listener with waitForCustomEventWithParam()
-export const getCustomEventParam = async (page:Page, eventName:string, paramName:string) => {
-    return page.evaluate(`window.__testingCustomEvents.${eventName}.${paramName}`)
-}
+export const getCustomEventParam = async (
+  page: Page,
+  eventName: string,
+  paramName: string
+) => {
+  return page.evaluate(
+    `window.__testingCustomEvents.${eventName}.${paramName}`
+  );
+};
diff --git a/tests/list-box.spec.ts b/tests/list-box.spec.ts
index 01709fe60..c89994951 100644
--- a/tests/list-box.spec.ts
+++ b/tests/list-box.spec.ts
@@ -4,108 +4,105 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/list-box-test.html');
 });
 
-test('Renders left options and can move them to the right', async ({ page }) => {
-
-  const leftOption = page.getByText(/Pikachu/i)
-  await expect(leftOption).toBeVisible()
-  await leftOption.click()
-  
-  const rightButton = page.getByTestId(/move-right/i)
-  await rightButton.click()
-
-
-  const movedOption = page.getByText(/Pikachu/i)
-  await expect(movedOption).toBeVisible()
+test('Renders left options and can move them to the right', async ({
+  page,
+}) => {
+  const leftOption = page.getByText(/Pikachu/i);
+  await expect(leftOption).toBeVisible();
+  await leftOption.click();
+
+  const rightButton = page.getByTestId(/move-right/i);
+  await rightButton.click();
+
+  const movedOption = page.getByText(/Pikachu/i);
+  await expect(movedOption).toBeVisible();
 });
 
-test('Renders left options and does not move when move left button is clicked', async ({ page }) => {
+test('Renders left options and does not move when move left button is clicked', async ({
+  page,
+}) => {
+  const leftOption = page.getByText(/Pikachu/i);
+  await expect(leftOption).toBeVisible();
+  await leftOption.click();
 
-  const leftOption = page.getByText(/Pikachu/i)
-  await expect(leftOption).toBeVisible()
-  await leftOption.click()
-  
-  const leftButton = page.getByTestId(/move-left/i)
-  await leftButton.click()
+  const leftButton = page.getByTestId(/move-left/i);
+  await leftButton.click();
 
-  await expect(leftOption).toBeVisible()
+  await expect(leftOption).toBeVisible();
 });
 
-test('Renders right options and can move them to the left', async ({ page }) => {
+test('Renders right options and can move them to the left', async ({
+  page,
+}) => {
+  const rightOption = page.getByText(/Butterfree/i);
+  await expect(rightOption).toBeVisible();
+  await rightOption.click();
 
-  const rightOption = page.getByText(/Butterfree/i)
-  await expect(rightOption).toBeVisible()
-  await rightOption.click()
-  
-  const leftButton = page.getByTestId(/move-right/i)
-  await leftButton.click()
+  const leftButton = page.getByTestId(/move-right/i);
+  await leftButton.click();
 
-
-  const movedOption = page.getByText(/Butterfree/i)
-  await expect(movedOption).toBeVisible()
+  const movedOption = page.getByText(/Butterfree/i);
+  await expect(movedOption).toBeVisible();
 });
 
-test('Renders right options and does not move when move right button is clicked', async ({ page }) => {
+test('Renders right options and does not move when move right button is clicked', async ({
+  page,
+}) => {
+  const rightOption = page.getByText(/Butterfree/i);
+  await expect(rightOption).toBeVisible();
+  await rightOption.click();
 
-  const rightOption = page.getByText(/Butterfree/i)
-  await expect(rightOption).toBeVisible()
-  await rightOption.click()
-  
-  const rightButton = page.getByTestId(/move-right/i)
-  await rightButton.click()
+  const rightButton = page.getByTestId(/move-right/i);
+  await rightButton.click();
 
-  await expect(rightOption).toBeVisible()
+  await expect(rightOption).toBeVisible();
 });
 
+test('Only selected options move in the specified direction', async ({
+  page,
+}) => {
+  const leftOption1 = page.getByText(/Charmander/i);
+  const leftOption2 = page.getByText(/Pikachu/i);
+  const leftOption3 = page.getByText(/Venusaur/i);
+  const rightOption = page.getByText(/Butterfree/i);
 
-test('Only selected options move in the specified direction', async ({ page }) => {
-
-  const leftOption1 = page.getByText(/Charmander/i)
-  const leftOption2 = page.getByText(/Pikachu/i)
-  const leftOption3 = page.getByText(/Venusaur/i)
-  const rightOption = page.getByText(/Butterfree/i)
+  await expect(leftOption1).toBeVisible();
+  await expect(leftOption2).toBeVisible();
+  await expect(leftOption3).toBeVisible();
+  await expect(rightOption).toBeVisible();
 
-  await expect(leftOption1).toBeVisible()
-  await expect(leftOption2).toBeVisible()
-  await expect(leftOption3).toBeVisible()
-  await expect(rightOption).toBeVisible()
+  await leftOption2.click();
 
-  await leftOption2.click()
-  
+  const rightButton = page.getByTestId(/move-right/i);
+  await rightButton.click();
 
-  const rightButton = page.getByTestId(/move-right/i)
-  await rightButton.click()
-
-  await expect(leftOption1).toBeVisible()
-  await expect(leftOption3).toBeVisible()
-  await expect(rightOption).toBeVisible()
+  await expect(leftOption1).toBeVisible();
+  await expect(leftOption3).toBeVisible();
+  await expect(rightOption).toBeVisible();
 });
 
 test('Displays the left empty state', async ({ page }) => {
+  await page.getByText(/Charmander/i).click();
+  await page.getByText(/Pikachu/i).click();
+  await page.getByText(/Venusaur/i).click();
 
-  await page.getByText(/Charmander/i).click()
-  await page.getByText(/Pikachu/i).click()
-  await page.getByText(/Venusaur/i).click()
-
-  const rightButton = page.getByTestId(/move-right/i)
-  await rightButton.click()
-  
+  const rightButton = page.getByTestId(/move-right/i);
+  await rightButton.click();
 
-  const leftEmpty = page.getByText(/your roster is empty/i)
-  await expect(leftEmpty).toBeVisible()
+  const leftEmpty = page.getByText(/your roster is empty/i);
+  await expect(leftEmpty).toBeVisible();
 });
 
-
 test('Displays the right empty state', async ({ page }) => {
+  await page.getByText(/Nidoqueen/i).click();
+  await page.getByText(/Butterfree/i).click();
+  await page.getByText(/Ditto/i).click();
+  await page.getByText(/Gyardos/i).click();
+  await page.getByText(/Machamp/i).click();
 
-  await page.getByText(/Nidoqueen/i).click()
-  await page.getByText(/Butterfree/i).click()
-  await page.getByText(/Ditto/i).click()
-  await page.getByText(/Gyardos/i).click()
-  await page.getByText(/Machamp/i).click()
-  
-  const leftButton = page.getByTestId(/move-left/i)
-  await leftButton.click()
-  
-  const rightEmpty = page.getByText(/this box is empty/i)
-  await expect(rightEmpty).toBeVisible()
-});
\ No newline at end of file
+  const leftButton = page.getByTestId(/move-left/i);
+  await leftButton.click();
+
+  const rightEmpty = page.getByText(/this box is empty/i);
+  await expect(rightEmpty).toBeVisible();
+});
diff --git a/tests/modal.spec.ts b/tests/modal.spec.ts
index 2351cdad5..9ddaeed4b 100644
--- a/tests/modal.spec.ts
+++ b/tests/modal.spec.ts
@@ -4,63 +4,75 @@ test('Renders appropriately according to open attribute', async ({ page }) => {
   await page.goto('/modal-test.html');
 
   // No "open" attribute applied
-  await expect(page.getByTestId('modal-default')).toBeHidden()
+  await expect(page.getByTestId('modal-default')).toBeHidden();
 
   // open="false" attribute applied
-  await expect(page.getByTestId('modal-closed')).toBeHidden()
+  await expect(page.getByTestId('modal-closed')).toBeHidden();
 
   // open="true" attribute applied
-  const modalOpen = page.getByTestId('modal-open')
-  await expect(modalOpen.locator('div').first()).toBeVisible() // v-modal has 0-size, check first element with size
+  const modalOpen = page.getByTestId('modal-open');
+  await expect(modalOpen.locator('div').first()).toBeVisible(); // v-modal has 0-size, check first element with size
 });
 
 test('Renders title and message', async ({ page }) => {
-  await page.goto('/modal-test.html')
+  await page.goto('/modal-test.html');
 
   // title renders on open modal
-  const modalOpen = page.getByTestId('modal-open')
-  await expect(modalOpen.getByText('Puff the Magic Dragon')).toBeVisible()
-  
+  const modalOpen = page.getByTestId('modal-open');
+  await expect(modalOpen.getByText('Puff the Magic Dragon')).toBeVisible();
+
   // message renders on open modal
-  await expect(modalOpen.getByText('lived by the sea and frolicked in the autumn mist in a land called Honah Lee.')).toBeVisible()
+  await expect(
+    modalOpen.getByText(
+      'lived by the sea and frolicked in the autumn mist in a land called Honah Lee.'
+    )
+  ).toBeVisible();
 });
 
 test('Hides when overlay behind the modal is clicked', async ({ page }) => {
-  await page.goto('/modal-test.html')
+  await page.goto('/modal-test.html');
 
   // Click Overlay
-  await page.locator('#overlay').click({ force: true })
-  await expect(page.getByTestId('modal-open')).toBeHidden()
+  await page.locator('#overlay').click({ force: true });
+  await expect(page.getByTestId('modal-open')).toBeHidden();
 });
 
-test('Hides when overlay behind the modal is focused and "Enter" key is pressed', async ({ page }) => {
-  await page.goto('/modal-test.html')
+test('Hides when overlay behind the modal is focused and "Enter" key is pressed', async ({
+  page,
+}) => {
+  await page.goto('/modal-test.html');
 
   // Keydown Overlay
-  await page.locator('#overlay').press('Enter')
-  await expect(page.getByTestId('modal-open')).toBeHidden()
+  await page.locator('#overlay').press('Enter');
+  await expect(page.getByTestId('modal-open')).toBeHidden();
 });
 
 test('Hides when "x" close icon is pressed', async ({ page }) => {
-  await page.goto('/modal-test.html')
+  await page.goto('/modal-test.html');
 
   // Click close icon
-  await page.getByRole('button', {name: 'x'}).click()
-  await expect(page.getByTestId('modal-open')).toBeHidden()
+  await page.getByRole('button', { name: 'x' }).click();
+  await expect(page.getByTestId('modal-open')).toBeHidden();
 });
 
-test('Hides when "x" close icon is focused and "Enter" key is pressed', async ({ page }) => {
-  await page.goto('/modal-test.html')
+test('Hides when "x" close icon is focused and "Enter" key is pressed', async ({
+  page,
+}) => {
+  await page.goto('/modal-test.html');
 
   // Keydown close icon
-  await page.getByRole('button', {name: 'x'}).press('Enter')
-  await expect(page.getByTestId('modal-open')).toBeHidden()
+  await page.getByRole('button', { name: 'x' }).press('Enter');
+  await expect(page.getByTestId('modal-open')).toBeHidden();
 });
 
 test('Renders child element in modal body', async ({ page }) => {
-  await page.goto('/modal-test.html')
+  await page.goto('/modal-test.html');
 
   // Slot
-  const modalOpen = page.getByTestId('modal-open')
-  await expect(modalOpen.getByText("Bring him strings and sealing wax and other fancy stuff")).toBeVisible()
+  const modalOpen = page.getByTestId('modal-open');
+  await expect(
+    modalOpen.getByText(
+      'Bring him strings and sealing wax and other fancy stuff'
+    )
+  ).toBeVisible();
 });
diff --git a/tests/multi-select.spec.ts b/tests/multi-select.spec.ts
index cdf725fb9..2109b76f7 100644
--- a/tests/multi-select.spec.ts
+++ b/tests/multi-select.spec.ts
@@ -1,263 +1,345 @@
 import { test, expect } from '@playwright/test';
-import { waitForCustomEvent, waitForCustomEventWithParam } from './lib/helper.ts';
+import {
+  waitForCustomEvent,
+  waitForCustomEventWithParam,
+} from './lib/helper.ts';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/multi-select-test.html');
+});
+
+test('Given a default multiselect, shows options, labels, sets pills and fires events correctly after selecting and clearing options', async ({
+  page,
+}) => {
+  const multiselect = page.getByTestId('basic-multiselect');
+  await expect(multiselect).toBeVisible();
+
+  // label is visible
+  await expect(page.getByText('Default Multi-select').first()).toBeVisible();
+
+  //placeholder is visible
+  await expect(multiselect.locator('input').first()).toHaveAttribute(
+    'placeholder',
+    'Emotions'
+  );
+
+  // dont expect the options to be rendered until a click on input
+  const optionsContainer = multiselect.locator('.options-container').first();
+  await expect(optionsContainer).not.toBeVisible();
+
+  await multiselect.click();
+  await expect(optionsContainer).toBeVisible();
+
+  expect(await optionsContainer.locator('label').all()).toHaveLength(3);
+
+  await expect(optionsContainer).toHaveText(/happy/);
+  await expect(optionsContainer).toHaveText(/sad/);
+  await expect(optionsContainer).toHaveText(/angry/);
+
+  const eventfired = waitForCustomEventWithParam(page, 'input', 'happy');
+  // click on the first option
+  await optionsContainer.locator('label', { hasText: 'happy' }).click();
+
+  // make sure that an event is fired
+  expect(eventfired).toBeTruthy();
+
+  // check that the textbox is checked
+  await expect(
+    optionsContainer
+      .locator('label', { hasText: 'happy' })
+      .first()
+      .locator('input')
+  ).toBeChecked();
+
+  // click second option
+  await optionsContainer.locator('label', { hasText: 'sad' }).click();
+  await expect(
+    optionsContainer
+      .locator('label', { hasText: 'sad' })
+      .first()
+      .locator('input')
+  ).toBeChecked();
+
+  // close the dropdown
+  await page.keyboard.press('Escape');
+
+  // press clear all
+  const clearAllEvent = waitForCustomEvent(page, 'clear-all-click');
+  await multiselect.click();
+  await expect(optionsContainer).toBeVisible();
+  await optionsContainer.locator('button', { hasText: 'Clear all' }).click();
+  await page.keyboard.press('Escape');
+  expect(clearAllEvent).toBeTruthy();
+  expect(await multiselect.locator('v-pill').all()).toHaveLength(0);
+});
+
+test('Given a multi-select with values, they are rendered as pills', async ({
+  page,
+}) => {
+  const multiselect = page.getByTestId('multiselect-values');
+  await expect(multiselect).toBeVisible();
+  expect(await multiselect.locator('v-pill').all()).toHaveLength(2);
+
+  await expect(
+    multiselect.locator('v-pill', { hasText: 'happy' }).first()
+  ).toBeVisible();
+  await expect(
+    multiselect.locator('v-pill', { hasText: 'sad' }).first()
+  ).toBeVisible();
+
+  await multiselect.click();
+  const optionsContainer = multiselect.locator('.options-container').first();
+  await expect(optionsContainer).toBeVisible();
+
+  await expect(
+    optionsContainer
+      .locator('label', { hasText: 'happy' })
+      .first()
+      .locator('input')
+  ).toBeChecked();
+  await expect(
+    optionsContainer
+      .locator('label', { hasText: 'sad' })
+      .first()
+      .locator('input')
+  ).toBeChecked();
+
+  await page.keyboard.press('Escape');
+
+  // check that the pills are visible
+  expect(await multiselect.locator('v-pill').all()).toHaveLength(2);
+
+  // delete a pill
+  const pillToDelete = multiselect.locator('v-pill').first();
+  await expect(pillToDelete).toBeVisible();
+  const button = pillToDelete.getByRole('button').first();
+  await expect(button).toBeVisible();
+  await button.click();
+  expect(await multiselect.locator('v-pill').all()).toHaveLength(1);
+});
+
+test('Given a multi-select with button, there is a button at the bottom', async ({
+  page,
+}) => {
+  const multiselect = page.getByTestId('multiselect-with-button');
+  await expect(multiselect).toBeVisible();
+  await multiselect.click();
+  await expect(multiselect.locator('v-select-button').first()).toBeVisible();
+  await expect(multiselect.locator('v-select-button').first()).toHaveText(
+    /TAKE PHOTO/
+  );
+  const icon = multiselect
+    .locator('v-select-button')
+    .first()
+    .locator('v-icon')
+    .first();
+  await expect(icon.locator('i')).toHaveClass(/icon-camera/);
+
+  const buttonClickevent = waitForCustomEvent(page, 'button-click');
+  await multiselect.locator('v-select-button').first().click();
+  expect(buttonClickevent).toBeTruthy();
+});
+
+test('Given a multi-select with a header, there is a header in the options list', async ({
+  page,
+}) => {
+  const multiselect = page.getByTestId('multiselect-header');
+  await expect(multiselect).toBeVisible();
+  await multiselect.click();
+  const optionsContainer = multiselect.locator('.options-container').first();
+  await expect(
+    optionsContainer.locator('span', { hasText: 'Emotions' })
+  ).toBeVisible();
+});
+
+test('Given a disabled multi-select, the element is not editable', async ({
+  page,
+}) => {
+  const multiselect = page.getByTestId('multiselect-disabled');
+  await expect(multiselect).toBeVisible();
+
+  await multiselect.click();
+  expect(multiselect.locator('.options-container').first()).not.toBeVisible();
+  await expect(multiselect.locator('input').first()).toBeDisabled();
+});
+
+test('Given a readonly multi-select, the element is not editable', async ({
+  page,
+}) => {
+  const multiselect = page.getByTestId('multiselect-readonly');
+  await expect(multiselect).toBeVisible();
+  await multiselect.click();
+  await expect(
+    multiselect.locator('.options-container').first()
+  ).not.toBeVisible();
+  // only exists if readonly is true
+  await expect(multiselect.locator('input').first()).toHaveAttribute(
+    'readonly',
+    ''
+  );
+});
+
+test('Given a clearable=false state, the multi-select does not have the clear all option', async ({
+  page,
+}) => {
+  const multiselect = page.getByTestId('multiselect-not-clearable');
+  await expect(multiselect).toBeVisible();
+  await multiselect.click();
+  await expect(multiselect.locator('.options-container').first()).toBeVisible();
+  await expect(
+    multiselect
+      .locator('.options-container')
+      .first()
+      .locator('button', { hasText: 'Clear all' })
+  ).not.toBeVisible();
+});
+
+test('Given a tooltip and state=info, the select should show an info icon with a tooltip', async ({
+  page,
+}) => {
+  const multiselect = page.getByTestId('multiselect-info-tooltip');
+  await expect(multiselect).toBeVisible();
+  await expect(multiselect.locator('v-tooltip').first()).toBeVisible();
+  await expect(
+    multiselect.locator('v-tooltip').first().locator('div').first()
+  ).toHaveClass(/icon-info-outline/);
+  await multiselect.locator('v-tooltip').first().hover();
+  await expect(multiselect.getByText(/info tip/)).toBeVisible();
+});
+
+test('Given a tooltip and state=warn the select should show a warn icon with tooltip', async ({
+  page,
+}) => {
+  const multiselect = page.getByTestId('multiselect-warn-tooltip');
+  await expect(multiselect).toBeVisible();
+  await expect(multiselect.locator('v-tooltip').first()).toBeVisible();
+  await expect(
+    multiselect.locator('v-tooltip').first().locator('div').first()
+  ).toHaveClass(/text-warning-fg/);
+  await multiselect.locator('v-tooltip').first().hover();
+  await expect(multiselect.getByText(/warn tip/)).toBeVisible();
+});
+
+test('Given a tooltip and state=error the select should show a error icon with tooltip', async ({
+  page,
+}) => {
+  const multiselect = page.getByTestId('multiselect-error-tooltip');
+  await expect(multiselect).toBeVisible();
+  await expect(multiselect.locator('v-tooltip').first()).toBeVisible();
+  await expect(
+    multiselect.locator('v-tooltip').first().locator('div').first()
+  ).toHaveClass(/text-danger-fg/);
+  await multiselect.locator('v-tooltip').first().hover();
+  await expect(multiselect.getByText(/error tip/)).toBeVisible();
+});
+
+test('Setting showpill=false should stop pills being rendered', async ({
+  page,
+}) => {
+  const multiselect = page.getByTestId('multiselect-showpill');
+  await expect(multiselect).toBeVisible();
+
+  await multiselect.click();
+
+  const optionsContainer = multiselect.locator('.options-container').first();
+  await expect(optionsContainer).toBeVisible();
+
+  await expect(
+    optionsContainer
+      .locator('label', { hasText: 'happy' })
+      .first()
+      .locator('input')
+  ).toBeChecked();
+  await expect(
+    optionsContainer
+      .locator('label', { hasText: 'sad' })
+      .first()
+      .locator('input')
+  ).toBeChecked();
+
+  // checked options not showing as pills
+  expect(await multiselect.locator('v-pill').all()).toHaveLength(0);
+});
+
+test('Test sort options for container', async ({ page }) => {
+  // Default sort fuzzy matches but
+  let multiselect = page.getByTestId('basic-multiselect');
+  await expect(multiselect).toBeVisible();
+
+  let input = multiselect.locator('input').first();
+
+  await input.focus();
+
+  let optionsContainer = multiselect.locator('.options-container').first();
+  await expect(optionsContainer).toBeVisible();
+
+  await expect(optionsContainer.locator('label').first()).toHaveText('happy');
+  await expect(optionsContainer.locator('label').nth(1)).toHaveText('sad');
+  await expect(optionsContainer.locator('label').last()).toHaveText('angry');
+
+  // check that an event is fired
+  const event = waitForCustomEventWithParam(page, 'input', 'sa');
+  await input.type('sa');
+  expect(event).toBeTruthy();
+
+  await expect(optionsContainer.locator('label').first()).toHaveText('sad');
+  await expect(optionsContainer.locator('label').nth(1)).toHaveText('happy');
+  await expect(optionsContainer.locator('label').last()).toHaveText('angry');
+
+  // turning sorting off
+
+  multiselect = page.getByTestId('multiselect-sort-off');
+  await expect(multiselect).toBeVisible();
+
+  input = multiselect.locator('input').first();
+  await input.focus();
+
+  optionsContainer = multiselect.locator('.options-container').first();
+  await expect(optionsContainer).toBeVisible();
+
+  await expect(optionsContainer.locator('label').first()).toHaveText('happy');
+  await expect(optionsContainer.locator('label').nth(1)).toHaveText('sad');
+  await expect(optionsContainer.locator('label').last()).toHaveText('angry');
+
+  await input.type('sa');
+
+  await expect(optionsContainer.locator('label').first()).toHaveText('happy');
+  await expect(optionsContainer.locator('label').nth(1)).toHaveText('sad');
+  await expect(optionsContainer.locator('label').last()).toHaveText('angry');
+
+  // reduce sort search
+
+  multiselect = page.getByTestId('multiselect-reduce');
+  await expect(multiselect).toBeVisible();
+
+  input = multiselect.locator('input').first();
+  await input.focus();
+
+  optionsContainer = multiselect.locator('.options-container').first();
+  await expect(optionsContainer).toBeVisible();
 
-test.beforeEach(async ({page}) => {
-    await page.goto('/multi-select-test.html')
-})
-
-test('Given a default multiselect, shows options, labels, sets pills and fires events correctly after selecting and clearing options', async ({page}) => {
-    const multiselect = page.getByTestId('basic-multiselect')
-    await expect(multiselect).toBeVisible()
-
-    // label is visible
-    await expect(page.getByText('Default Multi-select').first()).toBeVisible()
-
-    //placeholder is visible
-    await expect(multiselect.locator('input').first()).toHaveAttribute('placeholder', 'Emotions')
-
-    // dont expect the options to be rendered until a click on input
-    const optionsContainer = multiselect.locator('.options-container').first()
-    await expect(optionsContainer).not.toBeVisible()
-
-    await multiselect.click()
-    await expect(optionsContainer).toBeVisible()
-
-    expect(await optionsContainer.locator('label').all()).toHaveLength(3)
-
-    await expect(optionsContainer).toHaveText(/happy/)
-    await expect(optionsContainer).toHaveText(/sad/)
-    await expect(optionsContainer).toHaveText(/angry/)
-
-    const eventfired = waitForCustomEventWithParam(page, 'input', 'happy')
-    // click on the first option
-    await optionsContainer.locator('label', {hasText: 'happy'}).click()
-    
-    // make sure that an event is fired
-    expect(eventfired).toBeTruthy()
-
-    // check that the textbox is checked
-    await expect(optionsContainer.locator('label', {hasText: 'happy'}).first().locator('input')).toBeChecked()
-
-    // click second option
-    await optionsContainer.locator('label', {hasText: 'sad'}).click()
-    await expect(optionsContainer.locator('label', {hasText: 'sad'}).first().locator('input')).toBeChecked()
-
-    // close the dropdown
-    await page.keyboard.press('Escape')
-
-    // press clear all 
-    const clearAllEvent = waitForCustomEvent(page, 'clear-all-click')
-    await multiselect.click()
-    await expect(optionsContainer).toBeVisible()
-    await optionsContainer.locator('button', {hasText: 'Clear all'}).click()
-    await page.keyboard.press('Escape')
-    expect(clearAllEvent).toBeTruthy()
-    expect(await multiselect.locator('v-pill').all()).toHaveLength(0)
-
-})
-
-test('Given a multi-select with values, they are rendered as pills', async ({page}) => {
-    const multiselect = page.getByTestId('multiselect-values')
-    await expect(multiselect).toBeVisible()
-    expect(await multiselect.locator('v-pill').all()).toHaveLength(2)
-
-    await expect(multiselect.locator('v-pill', {hasText: 'happy'}).first()).toBeVisible()
-    await expect(multiselect.locator('v-pill', {hasText: 'sad'}).first()).toBeVisible()
-
-    await multiselect.click()
-    const optionsContainer = multiselect.locator('.options-container').first()
-    await expect(optionsContainer).toBeVisible()
-
-    await expect(optionsContainer.locator('label', {hasText: 'happy'}).first().locator('input')).toBeChecked()
-    await expect(optionsContainer.locator('label', {hasText: 'sad'}).first().locator('input')).toBeChecked()
-
-    await page.keyboard.press('Escape')
-
-    // check that the pills are visible
-    expect(await multiselect.locator('v-pill').all()).toHaveLength(2)
-
-    // delete a pill
-    const pillToDelete = multiselect.locator('v-pill').first()
-    await expect(pillToDelete).toBeVisible()
-    const button = pillToDelete.getByRole('button').first()
-    await expect(button).toBeVisible()
-    await button.click()
-    expect(await multiselect.locator('v-pill').all()).toHaveLength(1)
-
-})
-
-test('Given a multi-select with button, there is a button at the bottom', async ({page}) => {
-    const multiselect = page.getByTestId('multiselect-with-button')
-    await expect(multiselect).toBeVisible()
-    await multiselect.click()
-    await expect(multiselect.locator('v-select-button').first()).toBeVisible()
-    await expect(multiselect.locator('v-select-button').first()).toHaveText(/TAKE PHOTO/)
-    const icon = multiselect.locator('v-select-button').first().locator('v-icon').first()
-    await expect(icon.locator('i')).toHaveClass(/icon-camera/)
-    
-    const buttonClickevent = waitForCustomEvent(page, 'button-click')
-    await multiselect.locator('v-select-button').first().click()
-    expect(buttonClickevent).toBeTruthy()
-
-})
-
-test('Given a multi-select with a header, there is a header in the options list', async ({page}) => {
-    const multiselect = page.getByTestId('multiselect-header')
-    await expect(multiselect).toBeVisible()
-    await multiselect.click()
-    const optionsContainer = multiselect.locator('.options-container').first()
-    await expect(optionsContainer.locator('span', {hasText: 'Emotions'})).toBeVisible()
-})
-
-test('Given a disabled multi-select, the element is not editable', async ({page}) => {
-    const multiselect = page.getByTestId('multiselect-disabled')
-    await expect(multiselect).toBeVisible()
-
-    await multiselect.click()
-    expect(multiselect.locator('.options-container').first()).not.toBeVisible()
-    await expect(multiselect.locator('input').first()).toBeDisabled()
-})
-
-test('Given a readonly multi-select, the element is not editable', async ({page}) => {
-    const multiselect = page.getByTestId('multiselect-readonly')
-    await expect(multiselect).toBeVisible()
-    await multiselect.click()
-    await expect(multiselect.locator('.options-container').first()).not.toBeVisible()
-    // only exists if readonly is true
-    await expect(multiselect.locator('input').first()).toHaveAttribute('readonly', '')
-})
-
-test('Given a clearable=false state, the multi-select does not have the clear all option', async ({page}) => {
-    const multiselect = page.getByTestId('multiselect-not-clearable')
-    await expect(multiselect).toBeVisible()
-    await multiselect.click()
-    await expect(multiselect.locator('.options-container').first()).toBeVisible()
-    await expect(multiselect.locator('.options-container').first().locator('button', {hasText: 'Clear all'})).not.toBeVisible()
-})
-
-test('Given a tooltip and state=info, the select should show an info icon with a tooltip', async ({page}) => {
-    const multiselect = page.getByTestId('multiselect-info-tooltip')
-    await expect(multiselect).toBeVisible()
-    await expect(multiselect.locator('v-tooltip').first()).toBeVisible()
-    await expect(multiselect.locator('v-tooltip').first().locator('div').first()).toHaveClass(/icon-info-outline/)
-    await multiselect.locator('v-tooltip').first().hover()
-    await expect(multiselect.getByText(/info tip/)).toBeVisible()
-})
-
-test('Given a tooltip and state=warn the select should show a warn icon with tooltip', async ({page}) => {
-    const multiselect = page.getByTestId('multiselect-warn-tooltip')
-    await expect(multiselect).toBeVisible()
-    await expect(multiselect.locator('v-tooltip').first()).toBeVisible()
-    await expect(multiselect.locator('v-tooltip').first().locator('div').first()).toHaveClass(/text-warning-fg/)
-    await multiselect.locator('v-tooltip').first().hover()
-    await expect(multiselect.getByText(/warn tip/)).toBeVisible()
-})
-
-test('Given a tooltip and state=error the select should show a error icon with tooltip', async ({page}) => {
-    const multiselect = page.getByTestId('multiselect-error-tooltip')
-    await expect(multiselect).toBeVisible()
-    await expect(multiselect.locator('v-tooltip').first()).toBeVisible()
-    await expect(multiselect.locator('v-tooltip').first().locator('div').first()).toHaveClass(/text-danger-fg/)
-    await multiselect.locator('v-tooltip').first().hover()
-    await expect(multiselect.getByText(/error tip/)).toBeVisible()
-})
-
-test('Setting showpill=false should stop pills being rendered', async ({page}) => {
-    const multiselect = page.getByTestId('multiselect-showpill')
-    await expect(multiselect).toBeVisible()
-
-    await multiselect.click()
-
-    const optionsContainer = multiselect.locator('.options-container').first()
-    await expect(optionsContainer).toBeVisible()
-
-    await expect(optionsContainer.locator('label', {hasText: 'happy'}).first().locator('input')).toBeChecked()
-    await expect(optionsContainer.locator('label', {hasText: 'sad'}).first().locator('input')).toBeChecked()
-
-    // checked options not showing as pills
-    expect(await multiselect.locator('v-pill').all()).toHaveLength(0)
-})
-
-test('Test sort options for container', async ({page}) => {
-    // Default sort fuzzy matches but 
-    let multiselect = page.getByTestId('basic-multiselect')
-    await expect(multiselect).toBeVisible()
-    
-    let input = multiselect.locator('input').first()
-
-    await input.focus()
-
-    let optionsContainer = multiselect.locator('.options-container').first()
-    await expect(optionsContainer).toBeVisible()
-
-    await expect(optionsContainer.locator('label').first()).toHaveText('happy')
-    await expect(optionsContainer.locator('label').nth(1)).toHaveText('sad')
-    await expect(optionsContainer.locator('label').last()).toHaveText('angry')
-    
-    // check that an event is fired
-    const event = waitForCustomEventWithParam(page, 'input', 'sa')
-    await input.type('sa')
-    expect(event).toBeTruthy()
-
-    await expect(optionsContainer.locator('label').first()).toHaveText('sad')
-    await expect(optionsContainer.locator('label').nth(1)).toHaveText('happy')
-    await expect(optionsContainer.locator('label').last()).toHaveText('angry')
-
-    // turning sorting off
-    
-    multiselect = page.getByTestId('multiselect-sort-off')
-    await expect(multiselect).toBeVisible()
-
-    input = multiselect.locator('input').first()
-    await input.focus()
-
-    optionsContainer = multiselect.locator('.options-container').first()
-    await expect(optionsContainer).toBeVisible()
-
-    await expect(optionsContainer.locator('label').first()).toHaveText('happy')
-    await expect(optionsContainer.locator('label').nth(1)).toHaveText('sad')
-    await expect(optionsContainer.locator('label').last()).toHaveText('angry')
-
-    await input.type('sa')
-
-    await expect(optionsContainer.locator('label').first()).toHaveText('happy')
-    await expect(optionsContainer.locator('label').nth(1)).toHaveText('sad')
-    await expect(optionsContainer.locator('label').last()).toHaveText('angry')
-
-    // reduce sort search
-
-    multiselect = page.getByTestId('multiselect-reduce')
-    await expect(multiselect).toBeVisible()
-
-    input = multiselect.locator('input').first()
-    await input.focus()
-
-    optionsContainer = multiselect.locator('.options-container').first()
-    await expect(optionsContainer).toBeVisible()
+  expect(await optionsContainer.locator('label').all()).toHaveLength(3);
 
-    expect(await optionsContainer.locator('label').all()).toHaveLength(3)
-
-    await input.type('sa')
-    expect(await optionsContainer.locator('label').all()).toHaveLength(1)
+  await input.type('sa');
+  expect(await optionsContainer.locator('label').all()).toHaveLength(1);
+});
 
-})
+test('opening and closing dropdown fires events', async ({ page }) => {
+  const multiselect = page.getByTestId('basic-multiselect');
+  await expect(multiselect).toBeVisible();
 
-test('opening and closing dropdown fires events', async ({page}) => {
-    const multiselect = page.getByTestId('basic-multiselect')
-    await expect(multiselect).toBeVisible()
+  const openEvent = waitForCustomEvent(page, 'open');
+  await multiselect.click();
 
-    const openEvent = waitForCustomEvent(page, 'open')
-    await multiselect.click()
+  const optionsContainer = multiselect.locator('.options-container').first();
+  await expect(optionsContainer).toBeVisible();
 
-    const optionsContainer = multiselect.locator('.options-container').first()
-    await expect(optionsContainer).toBeVisible()
+  expect(openEvent).toBeTruthy();
 
-    expect(openEvent).toBeTruthy()
-
-    const closeEvent = waitForCustomEvent(page, 'close')
-    const closeDropdown = multiselect.getByRole('button').first()
-    await expect(closeDropdown).toBeVisible()
-    await closeDropdown.click()
-    await expect(optionsContainer).not.toBeVisible()
-    expect(closeEvent).toBeTruthy()
-})
\ No newline at end of file
+  const closeEvent = waitForCustomEvent(page, 'close');
+  const closeDropdown = multiselect.getByRole('button').first();
+  await expect(closeDropdown).toBeVisible();
+  await closeDropdown.click();
+  await expect(optionsContainer).not.toBeVisible();
+  expect(closeEvent).toBeTruthy();
+});
diff --git a/tests/notify.spec.ts b/tests/notify.spec.ts
index db1118f24..5b5516f9a 100644
--- a/tests/notify.spec.ts
+++ b/tests/notify.spec.ts
@@ -4,67 +4,133 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/notify-test.html');
 });
 
-test('Renders notify element with appropriate title text, message text, if those attributes are specified', async ({ page }) => {
-  await expect(page.getByTestId("notify-default")).toBeVisible()
-  await expect(page.getByTestId("notify-default")).toHaveText(/title text/)
-  await expect(page.getByTestId("notify-default")).toHaveText(/message text/)
+test('Renders notify element with appropriate title text, message text, if those attributes are specified', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('notify-default')).toBeVisible();
+  await expect(page.getByTestId('notify-default')).toHaveText(/title text/);
+  await expect(page.getByTestId('notify-default')).toHaveText(/message text/);
 });
 
-test('Renders notify with default style if no variant is specified', async ({ page }) => {
-  await expect(page.getByTestId("notify-default").locator("div")).toHaveClass(/border-info-fg/)
-  await expect(page.getByTestId("notify-default").locator("v-icon")).toHaveClass(/text-info-fg/)
-  await expect(page.getByTestId("notify-default").locator("div")).toHaveClass(/bg-bg-2/)
+test('Renders notify with default style if no variant is specified', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('notify-default').locator('div')).toHaveClass(
+    /border-info-fg/
+  );
+  await expect(
+    page.getByTestId('notify-default').locator('v-icon')
+  ).toHaveClass(/text-info-fg/);
+  await expect(page.getByTestId('notify-default').locator('div')).toHaveClass(
+    /bg-bg-2/
+  );
 });
 
-test('Renders notify with error style if the variant is set to error', async ({ page }) => {
-  await expect(page.getByTestId("notify-variant-error")).toBeVisible()
-  await expect(page.getByTestId("notify-variant-error")).toHaveText(/title text/)
-  await expect(page.getByTestId("notify-variant-error")).toHaveText(/message text/)
-  await expect(page.getByTestId("notify-variant-error").locator("div")).toHaveClass(/border-danger-fg/)
-  await expect(page.getByTestId("notify-variant-error").locator("v-icon")).toHaveClass(/text-danger-fg/)
+test('Renders notify with error style if the variant is set to error', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('notify-variant-error')).toBeVisible();
+  await expect(page.getByTestId('notify-variant-error')).toHaveText(
+    /title text/
+  );
+  await expect(page.getByTestId('notify-variant-error')).toHaveText(
+    /message text/
+  );
+  await expect(
+    page.getByTestId('notify-variant-error').locator('div')
+  ).toHaveClass(/border-danger-fg/);
+  await expect(
+    page.getByTestId('notify-variant-error').locator('v-icon')
+  ).toHaveClass(/text-danger-fg/);
 });
 
-test('Renders notify with warning style if the variant is set to warning', async ({ page }) => {
-  await expect(page.getByTestId("notify-variant-warning")).toBeVisible()
-  await expect(page.getByTestId("notify-variant-warning")).toHaveText(/title text/)
-  await expect(page.getByTestId("notify-variant-warning")).toHaveText(/message text/)
-  await expect(page.getByTestId("notify-variant-warning").locator("div")).toHaveClass(/border-warning-fg/)
-  await expect(page.getByTestId("notify-variant-warning").locator("svg")).toHaveClass(/fill-warning-fg/)
+test('Renders notify with warning style if the variant is set to warning', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('notify-variant-warning')).toBeVisible();
+  await expect(page.getByTestId('notify-variant-warning')).toHaveText(
+    /title text/
+  );
+  await expect(page.getByTestId('notify-variant-warning')).toHaveText(
+    /message text/
+  );
+  await expect(
+    page.getByTestId('notify-variant-warning').locator('div')
+  ).toHaveClass(/border-warning-fg/);
+  await expect(
+    page.getByTestId('notify-variant-warning').locator('svg')
+  ).toHaveClass(/fill-warning-fg/);
 });
 
-test('Renders notify with success style if the variant is set to success', async ({ page }) => {
-  await expect(page.getByTestId("notify-variant-success")).toBeVisible()
-  await expect(page.getByTestId("notify-variant-success")).toHaveText(/title text/)
-  await expect(page.getByTestId("notify-variant-success")).toHaveText(/message text/)
-  await expect(page.getByTestId("notify-variant-success").locator("div")).toHaveClass(/border-success-fg/)
-  await expect(page.getByTestId("notify-variant-success").locator("v-icon")).toHaveClass(/text-success-fg/)
+test('Renders notify with success style if the variant is set to success', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('notify-variant-success')).toBeVisible();
+  await expect(page.getByTestId('notify-variant-success')).toHaveText(
+    /title text/
+  );
+  await expect(page.getByTestId('notify-variant-success')).toHaveText(
+    /message text/
+  );
+  await expect(
+    page.getByTestId('notify-variant-success').locator('div')
+  ).toHaveClass(/border-success-fg/);
+  await expect(
+    page.getByTestId('notify-variant-success').locator('v-icon')
+  ).toHaveClass(/text-success-fg/);
 });
 
-test('Renders notify with info style if the variant is set to info', async ({ page }) => {
-  await expect(page.getByTestId("notify-variant-info")).toBeVisible()
-  await expect(page.getByTestId("notify-variant-info")).toHaveText(/title text/)
-  await expect(page.getByTestId("notify-variant-info")).toHaveText(/message text/)
-  await expect(page.getByTestId("notify-variant-info").locator("div")).toHaveClass(/border-info-fg/)
-  await expect(page.getByTestId("notify-variant-info").locator("v-icon")).toHaveClass(/text-info-fg/)
+test('Renders notify with info style if the variant is set to info', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('notify-variant-info')).toBeVisible();
+  await expect(page.getByTestId('notify-variant-info')).toHaveText(
+    /title text/
+  );
+  await expect(page.getByTestId('notify-variant-info')).toHaveText(
+    /message text/
+  );
+  await expect(
+    page.getByTestId('notify-variant-info').locator('div')
+  ).toHaveClass(/border-info-fg/);
+  await expect(
+    page.getByTestId('notify-variant-info').locator('v-icon')
+  ).toHaveClass(/text-info-fg/);
 });
 
-test('Renders notify with gray background if the background attribute is set to gray', async ({ page }) => {
-  await expect(page.getByTestId("notify-background-gray")).toBeVisible()
-  await expect(page.getByTestId("notify-background-gray")).toHaveText(/title text/)
-  await expect(page.getByTestId("notify-background-gray")).toHaveText(/message text/)
-  await expect(page.getByTestId("notify-background-gray").locator("div")).toHaveClass(/bg-bg-2/)
+test('Renders notify with gray background if the background attribute is set to gray', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('notify-background-gray')).toBeVisible();
+  await expect(page.getByTestId('notify-background-gray')).toHaveText(
+    /title text/
+  );
+  await expect(page.getByTestId('notify-background-gray')).toHaveText(
+    /message text/
+  );
+  await expect(
+    page.getByTestId('notify-background-gray').locator('div')
+  ).toHaveClass(/bg-bg-2/);
 });
 
-test('Renders notify with white background if the background attribute is set to white', async ({ page }) => {
-  await expect(page.getByTestId("notify-background-white")).toBeVisible()
-  await expect(page.getByTestId("notify-background-white")).toHaveText(/title text/)
-  await expect(page.getByTestId("notify-background-white")).toHaveText(/message text/)
-  await expect(page.getByTestId("notify-background-white").locator("div")).toHaveClass(/bg-white/)
+test('Renders notify with white background if the background attribute is set to white', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('notify-background-white')).toBeVisible();
+  await expect(page.getByTestId('notify-background-white')).toHaveText(
+    /title text/
+  );
+  await expect(page.getByTestId('notify-background-white')).toHaveText(
+    /message text/
+  );
+  await expect(
+    page.getByTestId('notify-background-white').locator('div')
+  ).toHaveClass(/bg-white/);
 });
 
 test('Renders notify slot text', async ({ page }) => {
-  await expect(page.getByTestId("notify-slot")).toBeVisible()
-  await expect(page.getByTestId("notify-slot")).toHaveText(/title text/)
-  await expect(page.getByTestId("notify-slot")).toHaveText(/message text/)
-  await expect(page.getByTestId("notify-slot")).toHaveText(/slot text/)
-});
\ No newline at end of file
+  await expect(page.getByTestId('notify-slot')).toBeVisible();
+  await expect(page.getByTestId('notify-slot')).toHaveText(/title text/);
+  await expect(page.getByTestId('notify-slot')).toHaveText(/message text/);
+  await expect(page.getByTestId('notify-slot')).toHaveText(/slot text/);
+});
diff --git a/tests/pill.spec.ts b/tests/pill.spec.ts
index 7ea9b2865..fc67da0b4 100644
--- a/tests/pill.spec.ts
+++ b/tests/pill.spec.ts
@@ -1,102 +1,154 @@
 import { test, expect, Page } from '@playwright/test';
-import {waitForCustomEvent, waitForCustomEventTimeout} from './lib/helper.ts'
+import { waitForCustomEvent, waitForCustomEventTimeout } from './lib/helper.ts';
 
 test.beforeEach(async ({ page }) => {
-    await page.goto('/pill-test.html');
+  await page.goto('/pill-test.html');
 });
 
-test('Renders text within the pill if a value attribute is specified', async ({ page }) => {
-    await expect(page.getByTestId("pill-value")).toBeVisible()
-    await expect(page.getByTestId("pill-value")).toContainText("one")
-});  
+test('Renders text within the pill if a value attribute is specified', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('pill-value')).toBeVisible();
+  await expect(page.getByTestId('pill-value')).toContainText('one');
+});
+
+test('Renders a removable button if no removable attribute has been specified', async ({
+  page,
+}) => {
+  const testDefault = page.getByTestId('pill-default');
 
-test('Renders a removable button if no removable attribute has been specified', async ({ page }) => {
-    const testDefault = page.getByTestId("pill-default")
+  await expect(testDefault).toBeVisible();
+  await expect(testDefault.getByRole('button')).toBeVisible();
+});
 
-    await expect(testDefault).toBeVisible()
-    await expect(testDefault.getByRole('button')).toBeVisible()
-});  
+test('Renders a removable button if a removable attribute has been specified as true', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('pill-removable-true')).toBeVisible();
+  await expect(
+    page.getByTestId('pill-removable-true').getByRole('button')
+  ).toBeVisible();
+});
 
-test('Renders a removable button if a removable attribute has been specified as true', async ({ page }) => {
-    await expect(page.getByTestId("pill-removable-true")).toBeVisible()
-    await expect(page.getByTestId("pill-removable-true").getByRole('button')).toBeVisible()
-});  
+test('Renders no removable button if a removable attribute has been specified as false', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('pill-removable-false')).toBeVisible();
+  await expect(
+    page.getByTestId('pill-removable-false').getByRole('button')
+  ).toHaveCount(0);
+});
 
-test('Renders no removable button if a removable attribute has been specified as false', async ({ page }) => {
-    await expect(page.getByTestId("pill-removable-false")).toBeVisible()
-    await expect(page.getByTestId("pill-removable-false").getByRole('button')).toHaveCount(0)
-}); 
+test('Renders a normal pill that is not readonly if no readonly attribute has been specified', async ({
+  page,
+}) => {
+  const testDefault = page.getByTestId('pill-default');
 
-test('Renders a normal pill that is not readonly if no readonly attribute has been specified', async ({ page }) => {
-    const testDefault = page.getByTestId("pill-default")
-    
-    await expect(testDefault).toBeVisible()
-    await expect(testDefault.getByRole('button')).toBeVisible()
-}); 
+  await expect(testDefault).toBeVisible();
+  await expect(testDefault.getByRole('button')).toBeVisible();
+});
 
-test('Renders a pill that is readonly if a readonly attribute of true has been specified', async ({ page }) => {
-    await expect(page.getByTestId("pill-readonly-true")).toBeVisible()
-    await expect(page.getByTestId("pill-readonly-true").locator("div")).toHaveAttribute("aria-readonly","true")
-}); 
+test('Renders a pill that is readonly if a readonly attribute of true has been specified', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('pill-readonly-true')).toBeVisible();
+  await expect(
+    page.getByTestId('pill-readonly-true').locator('div')
+  ).toHaveAttribute('aria-readonly', 'true');
+});
 
-test('Renders a pill that is not readonly if a readonly attribute of false has been specified', async ({ page }) => {
-    await expect(page.getByTestId("pill-readonly-false")).toBeVisible()
-    await expect(page.getByTestId("pill-readonly-false").getByRole('button')).toBeVisible()
-    await expect(page.getByTestId("pill-readonly-false")).not.toHaveAttribute("aria-readonly","true")
-}); 
+test('Renders a pill that is not readonly if a readonly attribute of false has been specified', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('pill-readonly-false')).toBeVisible();
+  await expect(
+    page.getByTestId('pill-readonly-false').getByRole('button')
+  ).toBeVisible();
+  await expect(page.getByTestId('pill-readonly-false')).not.toHaveAttribute(
+    'aria-readonly',
+    'true'
+  );
+});
 
-test('Renders a normal pill if no disabled attribute has been specified', async ({ page }) => {
-    const testDefault = page.getByTestId("pill-default")
+test('Renders a normal pill if no disabled attribute has been specified', async ({
+  page,
+}) => {
+  const testDefault = page.getByTestId('pill-default');
 
-    await expect(testDefault).toBeVisible()
-}); 
+  await expect(testDefault).toBeVisible();
+});
 
-test('Renders a disabled pill if a disabled attribute of true has been specified', async ({ page }) => {
-    await expect(page.getByTestId("pill-disabled-true").locator("div")).toHaveAttribute("aria-disabled","true")
-}); 
+test('Renders a disabled pill if a disabled attribute of true has been specified', async ({
+  page,
+}) => {
+  await expect(
+    page.getByTestId('pill-disabled-true').locator('div')
+  ).toHaveAttribute('aria-disabled', 'true');
+});
 
-test('Renders a normal pill if a disabled attribute of false has been specified', async ({ page }) => {
-    await expect(page.getByTestId("pill-disabled-false")).toBeVisible()
-    await expect(page.getByTestId("pill-disabled-false").locator("div")).not.toHaveAttribute("aria-readonly","true")
-});  
+test('Renders a normal pill if a disabled attribute of false has been specified', async ({
+  page,
+}) => {
+  await expect(page.getByTestId('pill-disabled-false')).toBeVisible();
+  await expect(
+    page.getByTestId('pill-disabled-false').locator('div')
+  ).not.toHaveAttribute('aria-readonly', 'true');
+});
 
 test('Confirms default pill is clickable', async ({ page }) => {
-    const testDefault = page.getByTestId("pill-default")
+  const testDefault = page.getByTestId('pill-default');
 
-    const clickDefault = waitForCustomEvent(page,'remove')
-    await testDefault.getByRole('button').click()
-    expect(clickDefault).toBeTruthy()
+  const clickDefault = waitForCustomEvent(page, 'remove');
+  await testDefault.getByRole('button').click();
+  expect(clickDefault).toBeTruthy();
 });
 
 test('Confirms disbled pill is not clickable', async ({ page }) => {
-    const clickDisabled = waitForCustomEventTimeout(page, 'remove')
-    await page.getByTestId("pill-disabled-true").getByRole('button').press("Enter")
-    await clickDisabled
+  const clickDisabled = waitForCustomEventTimeout(page, 'remove');
+  await page
+    .getByTestId('pill-disabled-true')
+    .getByRole('button')
+    .press('Enter');
+  await clickDisabled;
 });
 
 test('Confirms readonly pill is not clickable', async ({ page }) => {
-    const clickReadOnly = waitForCustomEventTimeout(page, 'remove')
-    await page.getByTestId("pill-readonly-true").getByRole('button').press("Enter")
-    await clickReadOnly
+  const clickReadOnly = waitForCustomEventTimeout(page, 'remove');
+  await page
+    .getByTestId('pill-readonly-true')
+    .getByRole('button')
+    .press('Enter');
+  await clickReadOnly;
 });
 
-test('Confirms keydown enter is effective on the default pill', async ({ page }) => {
-    const testDefault = page.getByTestId("pill-default")
+test('Confirms keydown enter is effective on the default pill', async ({
+  page,
+}) => {
+  const testDefault = page.getByTestId('pill-default');
 
-    const keyDownDefault = waitForCustomEvent(page,'remove')
-    await testDefault.getByRole('button').press("Enter")
-    expect(keyDownDefault).toBeTruthy()
+  const keyDownDefault = waitForCustomEvent(page, 'remove');
+  await testDefault.getByRole('button').press('Enter');
+  expect(keyDownDefault).toBeTruthy();
 });
 
-test('Confirms keydown enter is not effective on the disabled pill', async ({ page }) => {
-    const keyDownDisabled = waitForCustomEventTimeout(page, 'remove')
-    await page.getByTestId("pill-disabled-true").getByRole('button').press("Enter")
-    await keyDownDisabled
+test('Confirms keydown enter is not effective on the disabled pill', async ({
+  page,
+}) => {
+  const keyDownDisabled = waitForCustomEventTimeout(page, 'remove');
+  await page
+    .getByTestId('pill-disabled-true')
+    .getByRole('button')
+    .press('Enter');
+  await keyDownDisabled;
 });
 
-test('Confirms keydown enter is effective on the readonly pill', async ({ page }) => {
-    const keyDownReadOnly = waitForCustomEventTimeout(page, 'remove')
-    await page.getByTestId("pill-readonly-true").getByRole('button').press("Enter")
-    await keyDownReadOnly
+test('Confirms keydown enter is effective on the readonly pill', async ({
+  page,
+}) => {
+  const keyDownReadOnly = waitForCustomEventTimeout(page, 'remove');
+  await page
+    .getByTestId('pill-readonly-true')
+    .getByRole('button')
+    .press('Enter');
+  await keyDownReadOnly;
 });
-
diff --git a/tests/radio.spec.ts b/tests/radio.spec.ts
index 708f3cc17..1b4a62a22 100644
--- a/tests/radio.spec.ts
+++ b/tests/radio.spec.ts
@@ -1,171 +1,204 @@
 import { test, expect } from '@playwright/test';
-import { waitForCustomEvent, waitForCustomEventTimeout } from './lib/helper.ts'
+import { waitForCustomEvent, waitForCustomEventTimeout } from './lib/helper.ts';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/radio-test.html');
 });
 
 test('Renders options as radio buttons', async ({ page }) => {
-
   // Confirm All Options Render Correctly As Buttons
-  const radio = page.getByTestId("radio-selected-test")
-  await expect(radio).toBeVisible()
+  const radio = page.getByTestId('radio-selected-test');
+  await expect(radio).toBeVisible();
 
-  const opt1 = page.getByRole('button', { name: 'Opt 1' })
-  const opt2 = page.getByRole('button', { name: 'Opt 2' })
-  const opt3 = page.getByRole('button', { name: 'Opt 3' })
+  const opt1 = page.getByRole('button', { name: 'Opt 1' });
+  const opt2 = page.getByRole('button', { name: 'Opt 2' });
+  const opt3 = page.getByRole('button', { name: 'Opt 3' });
 
-  await expect(opt1).toBeVisible()
-  await expect(opt2).toBeVisible()
-  await expect(opt3).toBeVisible()
+  await expect(opt1).toBeVisible();
+  await expect(opt2).toBeVisible();
+  await expect(opt3).toBeVisible();
 
-  await expect(opt1).toHaveText('Opt 1')
-  await expect(opt2).toHaveText('Opt 2')
-  await expect(opt3).toHaveText('Opt 3')
+  await expect(opt1).toHaveText('Opt 1');
+  await expect(opt2).toHaveText('Opt 2');
+  await expect(opt3).toHaveText('Opt 3');
 });
 
-test('Confirms selected attribute value renders as selected radio button', async ({ page }) => {
-
-  const opt1 = page.getByRole('button', { name: 'Opt 1' })
-  const opt2 = page.getByRole('button', { name: 'Opt 2' })
-  const opt3 = page.getByRole('button', { name: 'Opt 3' })
+test('Confirms selected attribute value renders as selected radio button', async ({
+  page,
+}) => {
+  const opt1 = page.getByRole('button', { name: 'Opt 1' });
+  const opt2 = page.getByRole('button', { name: 'Opt 2' });
+  const opt3 = page.getByRole('button', { name: 'Opt 3' });
 
   // Confirm Selected Value - Opt 3
-  await expect(opt1).toHaveClass(/bg-white/)
-  await expect(opt2).toHaveClass(/bg-white/)
-  await expect(opt3).toHaveClass(/bg-gray-9/)
+  await expect(opt1).toHaveClass(/bg-white/);
+  await expect(opt2).toHaveClass(/bg-white/);
+  await expect(opt3).toHaveClass(/bg-gray-9/);
 });
 
 test('Confirms selected radio button updates on click', async ({ page }) => {
-
-  const opt1 = page.getByRole('button', { name: 'Opt 1' })
-  const opt2 = page.getByRole('button', { name: 'Opt 2' })
-  const opt3 = page.getByRole('button', { name: 'Opt 3' })
-
+  const opt1 = page.getByRole('button', { name: 'Opt 1' });
+  const opt2 = page.getByRole('button', { name: 'Opt 2' });
+  const opt3 = page.getByRole('button', { name: 'Opt 3' });
 
   // Confirm Click Changes Selected to Opt 2
-  const opt2Selected = waitForCustomEvent(page,'input')
-  await opt2.click()
-  await expect(opt2Selected).toBeTruthy()
+  const opt2Selected = waitForCustomEvent(page, 'input');
+  await opt2.click();
+  await expect(opt2Selected).toBeTruthy();
 
-  await expect(opt1).toHaveClass(/bg-white/)
-  await expect(opt2).toHaveClass(/bg-gray-9/)
-  await expect(opt3).toHaveClass(/bg-white/)
+  await expect(opt1).toHaveClass(/bg-white/);
+  await expect(opt2).toHaveClass(/bg-gray-9/);
+  await expect(opt3).toHaveClass(/bg-white/);
 });
 
-test('Confirms selected radio button updates on keydown enter', async ({ page }) => {
-
-  // Check that Keydown Changes Value 
-  const radioKeydown = page.getByTestId("radio-keydown-test")
-  await expect(radioKeydown).toBeVisible()
+test('Confirms selected radio button updates on keydown enter', async ({
+  page,
+}) => {
+  // Check that Keydown Changes Value
+  const radioKeydown = page.getByTestId('radio-keydown-test');
+  await expect(radioKeydown).toBeVisible();
 
-  const opt4 = page.getByRole('button', { name: 'Opt 4' })
-  const opt5 = page.getByRole('button', { name: 'Opt 5' })
-  const opt6 = page.getByRole('button', { name: 'Opt 6' })
+  const opt4 = page.getByRole('button', { name: 'Opt 4' });
+  const opt5 = page.getByRole('button', { name: 'Opt 5' });
+  const opt6 = page.getByRole('button', { name: 'Opt 6' });
 
-  await expect(opt4).toBeVisible()
-  await expect(opt5).toBeVisible()
-  await expect(opt6).toBeVisible()
+  await expect(opt4).toBeVisible();
+  await expect(opt5).toBeVisible();
+  await expect(opt6).toBeVisible();
 
-  await expect(opt4).toHaveClass(/bg-white/)
-  await expect(opt5).toHaveClass(/bg-gray-9/)
-  await expect(opt6).toHaveClass(/bg-white/)
+  await expect(opt4).toHaveClass(/bg-white/);
+  await expect(opt5).toHaveClass(/bg-gray-9/);
+  await expect(opt6).toHaveClass(/bg-white/);
 
   // Focus on Opt 6 - Keydown Test
-  const opt6Selected = waitForCustomEvent(page,'input')
-  await opt6.focus()
+  const opt6Selected = waitForCustomEvent(page, 'input');
+  await opt6.focus();
   // Hit Enter
-  await page.keyboard.press('Enter')
-  await expect(opt6Selected).toBeTruthy()
+  await page.keyboard.press('Enter');
+  await expect(opt6Selected).toBeTruthy();
 
-  await expect(opt4).toHaveClass(/bg-white/)
-  await expect(opt5).toHaveClass(/bg-white/)
-  await expect(opt6).toHaveClass(/bg-gray-9/)
+  await expect(opt4).toHaveClass(/bg-white/);
+  await expect(opt5).toHaveClass(/bg-white/);
+  await expect(opt6).toHaveClass(/bg-gray-9/);
 });
 
-test('Confirms the radio element default behavior renders label to the top of the radio buttons', async ({ page }) => {
-
-  // Label Default (Render Label On Top Of Radio) (Checks that button with text "Def 1" is below label of "Def Position") 
-  const def1Button = await page.locator("button:below(:text('Def Position'))").first().textContent()
-  expect(def1Button).toContain('Def 1')
+test('Confirms the radio element default behavior renders label to the top of the radio buttons', async ({
+  page,
+}) => {
+  // Label Default (Render Label On Top Of Radio) (Checks that button with text "Def 1" is below label of "Def Position")
+  const def1Button = await page
+    .locator("button:below(:text('Def Position'))")
+    .first()
+    .textContent();
+  expect(def1Button).toContain('Def 1');
 });
 
-test('Confirms if labelposition is set to top, label is rendered to the top of the radio buttons', async ({ page }) => {
-
+test('Confirms if labelposition is set to top, label is rendered to the top of the radio buttons', async ({
+  page,
+}) => {
   // Label Top (Render Label On Top Of Radio) (Checks that button with text "Top 1" is below label of "Top Position")
-  const top1Button = await page.locator("button:below(:text('Top Position'))").first().textContent()
-  expect(top1Button).toContain('Top 1')
+  const top1Button = await page
+    .locator("button:below(:text('Top Position'))")
+    .first()
+    .textContent();
+  expect(top1Button).toContain('Top 1');
 });
-  
-test('Confirms if labelposition is set to left, label is rendered to the left of the radio buttons', async ({ page }) => {
 
+test('Confirms if labelposition is set to left, label is rendered to the left of the radio buttons', async ({
+  page,
+}) => {
   // Label Left (Check That Button Is Right Of Label)
-  const left1Button = await page.locator("button:right-of(:text('Left Position'))").first().textContent()
-  expect(left1Button).toContain('Left 1')
+  const left1Button = await page
+    .locator("button:right-of(:text('Left Position'))")
+    .first()
+    .textContent();
+  expect(left1Button).toContain('Left 1');
 });
 
-
-test('Default behavior for radio tooltips renders them as info icons', async ({ page }) => {
-
+test('Default behavior for radio tooltips renders them as info icons', async ({
+  page,
+}) => {
   // Tooltip Default
-  const tooltipDef = page.getByTestId("radio-tooltip-def-test").locator('v-tooltip div').first()
-  await expect(tooltipDef).toHaveClass(/icon-info-outline/)
+  const tooltipDef = page
+    .getByTestId('radio-tooltip-def-test')
+    .locator('v-tooltip div')
+    .first();
+  await expect(tooltipDef).toHaveClass(/icon-info-outline/);
 });
 
-test('Radio tooltips are rendered as warn icon when state attribute is set to warn', async ({ page }) => {
-
+test('Radio tooltips are rendered as warn icon when state attribute is set to warn', async ({
+  page,
+}) => {
   // Tooltip Warn
-  const tooltipWarn = page.getByTestId("radio-tooltip-warn-test").locator('v-tooltip div').first()
-  await expect(tooltipWarn).toHaveClass(/icon-error-outline text-warning-fg/)
+  const tooltipWarn = page
+    .getByTestId('radio-tooltip-warn-test')
+    .locator('v-tooltip div')
+    .first();
+  await expect(tooltipWarn).toHaveClass(/icon-error-outline text-warning-fg/);
 });
 
-test('Radio tooltips are rendered as warn icon when state attribute is set to error', async ({ page }) => {
-
+test('Radio tooltips are rendered as warn icon when state attribute is set to error', async ({
+  page,
+}) => {
   // Tooltip Error
-  const tooltipError = page.getByTestId("radio-tooltip-error-test").locator('v-tooltip div').first()
-  await expect(tooltipError).toHaveClass(/icon-error-outline text-danger-fg/)
+  const tooltipError = page
+    .getByTestId('radio-tooltip-error-test')
+    .locator('v-tooltip div')
+    .first();
+  await expect(tooltipError).toHaveClass(/icon-error-outline text-danger-fg/);
 });
 
-test('Radio tooltips are rendered as info icon when state attribute is set to info', async ({ page }) => {
-
+test('Radio tooltips are rendered as info icon when state attribute is set to info', async ({
+  page,
+}) => {
   // Tooltip Info
-  const tooltipInfo = page.getByTestId("radio-tooltip-info-test").locator('v-tooltip div').first()
-  await expect(tooltipInfo).toHaveClass(/icon-info-outline/)
+  const tooltipInfo = page
+    .getByTestId('radio-tooltip-info-test')
+    .locator('v-tooltip div')
+    .first();
+  await expect(tooltipInfo).toHaveClass(/icon-info-outline/);
 });
 
-test('Radio tooltip is rendered to the left of the label when label position attribute is specified as left', async ({ page }) => {
-
+test('Radio tooltip is rendered to the left of the label when label position attribute is specified as left', async ({
+  page,
+}) => {
   // Tooltip Left
-  const tooltipLeft = page.locator("div.icon-info-outline:left-of(:text('Tool 10'))").first()
-  await expect(tooltipLeft).toHaveClass(/icon-info-outline/)
+  const tooltipLeft = page
+    .locator("div.icon-info-outline:left-of(:text('Tool 10'))")
+    .first();
+  await expect(tooltipLeft).toHaveClass(/icon-info-outline/);
 });
 
 test('Radio tooltip text is visable upon hover', async ({ page }) => {
-
   // Tooltip Hover
-  const tooltipHover = page.getByTestId("radio-tooltip-hover-test").locator('v-tooltip div').first()
-  const tooltipText = page.getByRole('tooltip', { name: 'This is the hover tooltip test'})
-  await tooltipHover.hover()
-  await expect(tooltipText).toBeVisible()
-  await expect(tooltipText).toHaveText('This is the hover tooltip test')
+  const tooltipHover = page
+    .getByTestId('radio-tooltip-hover-test')
+    .locator('v-tooltip div')
+    .first();
+  const tooltipText = page.getByRole('tooltip', {
+    name: 'This is the hover tooltip test',
+  });
+  await tooltipHover.hover();
+  await expect(tooltipText).toBeVisible();
+  await expect(tooltipText).toHaveText('This is the hover tooltip test');
 });
 
-test('Renders radio element in readonly state if readonly attribute is true', async ({ page }) => {
-
+test('Renders radio element in readonly state if readonly attribute is true', async ({
+  page,
+}) => {
   // Readonly, Click
-  const readonly2 = page.getByRole('button', { name: 'Readonly 2' })
-  await expect(readonly2).toBeVisible()
+  const readonly2 = page.getByRole('button', { name: 'Readonly 2' });
+  await expect(readonly2).toBeVisible();
+
+  const readonly2Selected = waitForCustomEventTimeout(page, 'input');
+  await readonly2.press('Enter');
+  await readonly2Selected;
 
-  const readonly2Selected = waitForCustomEventTimeout(page,'input')
-  await readonly2.press('Enter')
-  await readonly2Selected
-  
   // Readonly Keydown
-  const readonly5 = page.getByRole('button', { name: 'Readonly 5' })
-  await expect(readonly5).toBeVisible()
+  const readonly5 = page.getByRole('button', { name: 'Readonly 5' });
+  await expect(readonly5).toBeVisible();
 
-  const readonly5Selected = waitForCustomEventTimeout(page,'input')
-  await readonly5.press('Enter')
-  await readonly5Selected
+  const readonly5Selected = waitForCustomEventTimeout(page, 'input');
+  await readonly5.press('Enter');
+  await readonly5Selected;
 });
-
diff --git a/tests/select.spec.ts b/tests/select.spec.ts
index 60e0f83e5..ed7da9c5a 100644
--- a/tests/select.spec.ts
+++ b/tests/select.spec.ts
@@ -1,208 +1,237 @@
 import { test, expect } from '@playwright/test';
-import { getCustomEventParam, waitForCustomEventWithParam } from './lib/helper.ts';
+import {
+  getCustomEventParam,
+  waitForCustomEventWithParam,
+} from './lib/helper.ts';
 
-test.beforeEach(async ({page}) => {
-  await page.goto('/select-test.html')
-})
+test.beforeEach(async ({ page }) => {
+  await page.goto('/select-test.html');
+});
 
-test('Given an options attribute, on select the options should be visible and clicking an option should update the input', async ({ page }) => {
-  const select = page.getByTestId('basic-select')
-  await expect(select).toBeVisible()
+test('Given an options attribute, on select the options should be visible and clicking an option should update the input', async ({
+  page,
+}) => {
+  const select = page.getByTestId('basic-select');
+  await expect(select).toBeVisible();
 
   // don't expect the options to be rendered until a click on input
-  const optionsContainer = select.locator('.options-container').first()
-  await expect(optionsContainer).not.toBeVisible()
+  const optionsContainer = select.locator('.options-container').first();
+  await expect(optionsContainer).not.toBeVisible();
 
   // click on the input
-  const input = select.locator('input').first()
-  await input.focus()
-  await expect(optionsContainer).toBeVisible()
+  const input = select.locator('input').first();
+  await input.focus();
+  await expect(optionsContainer).toBeVisible();
 
   // within the optionsContainer there should be 3 different options
-  expect(await optionsContainer.locator('label').all()).toHaveLength(3)
+  expect(await optionsContainer.locator('label').all()).toHaveLength(3);
 
-  await expect(optionsContainer).toHaveText(/one/)
-  await expect(optionsContainer).toHaveText(/two/)
-  await expect(optionsContainer).toHaveText(/three/)
+  await expect(optionsContainer).toHaveText(/one/);
+  await expect(optionsContainer).toHaveText(/two/);
+  await expect(optionsContainer).toHaveText(/three/);
 
   // selecting a value should emit an input event + render that as the input
-  const oneSelected = waitForCustomEventWithParam(page, 'input', 'value')
-  await optionsContainer.locator('label').first().click()
-  expect(oneSelected).toBeTruthy()
+  const oneSelected = waitForCustomEventWithParam(page, 'input', 'value');
+  await optionsContainer.locator('label').first().click();
+  expect(oneSelected).toBeTruthy();
 
   // show the selcted value in the input
-  expect(await getCustomEventParam(page, 'input', 'value')).toBe('one')
+  expect(await getCustomEventParam(page, 'input', 'value')).toBe('one');
 });
 
-test('Clicking on the select component renders options', async ({page}) => {
-  const select = page.getByTestId('basic-select')
+test('Clicking on the select component renders options', async ({ page }) => {
+  const select = page.getByTestId('basic-select');
   // dont expect the options to be rendered until a click on input
-  const optionsContainer = select.locator('.options-container').first()
-  await expect(optionsContainer).not.toBeVisible()
-
-  await select.click()
-  await expect(optionsContainer).toBeVisible()
-
-})
+  const optionsContainer = select.locator('.options-container').first();
+  await expect(optionsContainer).not.toBeVisible();
 
-test('Given a select with a placeholder, that should be visible in the input', async ({page}) => {
-  const select = page.getByTestId('basic-select')
-  await expect(select).toBeVisible()
+  await select.click();
+  await expect(optionsContainer).toBeVisible();
+});
 
-  await expect(select.locator('input').first()).toHaveAttribute('placeholder', 'All')
-})
+test('Given a select with a placeholder, that should be visible in the input', async ({
+  page,
+}) => {
+  const select = page.getByTestId('basic-select');
+  await expect(select).toBeVisible();
 
-test('Setting withbutton to true, with a button text and icon, the text and icon should be rendered as a final element', async ({page}) => {
-  const select = page.getByTestId('select-with-button')
-  await expect(select).toBeVisible()
+  await expect(select.locator('input').first()).toHaveAttribute(
+    'placeholder',
+    'All'
+  );
+});
 
-  await select.locator('input').first().focus()
+test('Setting withbutton to true, with a button text and icon, the text and icon should be rendered as a final element', async ({
+  page,
+}) => {
+  const select = page.getByTestId('select-with-button');
+  await expect(select).toBeVisible();
 
-  const button = select.locator('v-select-button') 
-  await expect(button).toBeVisible()
-  await expect(button).toHaveText('Add new option')
-  await expect(button.locator('v-icon > i')).toHaveClass(/icon-add/)
+  await select.locator('input').first().focus();
 
-})
+  const button = select.locator('v-select-button');
+  await expect(button).toBeVisible();
+  await expect(button).toHaveText('Add new option');
+  await expect(button.locator('v-icon > i')).toHaveClass(/icon-add/);
+});
 
-test('If a select component has disabled=True the element should be disabled', async ({page}) => {
-  const select = page.getByTestId('select-disabled')
-  const input = select.locator('input').first()
-  await input.focus()
-  await input.type('new option')
+test('If a select component has disabled=True the element should be disabled', async ({
+  page,
+}) => {
+  const select = page.getByTestId('select-disabled');
+  const input = select.locator('input').first();
+  await input.focus();
+  await input.type('new option');
   // options do not load and the actual one isn't visible
-  expect (select.locator('.options-container').first()).not.toBeVisible()
-  expect(await input.inputValue()).toEqual('')
-})
-
-test('If the select component has readonly value, then it should be readonly', async ({page}) => {
-  const select = page.getByTestId('select-readonly')
-  const input = select.locator('input').first()
-  await input.focus()
-  await input.type('new option')
+  expect(select.locator('.options-container').first()).not.toBeVisible();
+  expect(await input.inputValue()).toEqual('');
+});
+
+test('If the select component has readonly value, then it should be readonly', async ({
+  page,
+}) => {
+  const select = page.getByTestId('select-readonly');
+  const input = select.locator('input').first();
+  await input.focus();
+  await input.type('new option');
   // options do not load and the actual one isn't visible
-  expect (select.locator('.options-container').first()).not.toBeVisible()
-  expect(await input.inputValue()).toEqual('')
-})
+  expect(select.locator('.options-container').first()).not.toBeVisible();
+  expect(await input.inputValue()).toEqual('');
+});
 
-test('If the select has attribute exact, the user can only type a value from the dropdown', async ({page}) => {
-  const select = page.getByTestId('select-exact')
-  const input = select.locator('input').first()
+test('If the select has attribute exact, the user can only type a value from the dropdown', async ({
+  page,
+}) => {
+  const select = page.getByTestId('select-exact');
+  const input = select.locator('input').first();
 
-  await input.focus()
-  await input.type('not an option')
+  await input.focus();
+  await input.type('not an option');
 
-  await page.keyboard.press('Enter')
+  await page.keyboard.press('Enter');
 
-  expect(await input.inputValue()).toEqual("")
+  expect(await input.inputValue()).toEqual('');
 
   // now type a valid option
-  await input.type('one')
-  await page.keyboard.press('Enter')
-  expect(await input.inputValue()).toEqual('one')
-
-})
+  await input.type('one');
+  await page.keyboard.press('Enter');
+  expect(await input.inputValue()).toEqual('one');
+});
 
-test('No state but tooltip applied should render info icon with tooltip text', async ({page}) => {
-  const select = page.getByTestId('select-default-tooltip')
-  const tooltip = select.locator('label > div > v-tooltip').first()
-  await expect(tooltip.locator('.icon-info-outline')).toBeVisible()
+test('No state but tooltip applied should render info icon with tooltip text', async ({
+  page,
+}) => {
+  const select = page.getByTestId('select-default-tooltip');
+  const tooltip = select.locator('label > div > v-tooltip').first();
+  await expect(tooltip.locator('.icon-info-outline')).toBeVisible();
 
   // text is not visible
-  await expect(tooltip.getByText('default tip').first()).not.toBeVisible()
+  await expect(tooltip.getByText('default tip').first()).not.toBeVisible();
   // make
-  await tooltip.hover()
-  await expect(tooltip.getByText('default tip').first()).toBeVisible()
-
-})
+  await tooltip.hover();
+  await expect(tooltip.getByText('default tip').first()).toBeVisible();
+});
 
-test('Given info state and tooltip value, there should be an info tooltip next to the select label', async ({page}) => {
-  const select = page.getByTestId('select-info-tooltip')
-  const tooltip = select.locator('label > div > v-tooltip').first()
-  await expect(tooltip.locator('.icon-info-outline')).toBeVisible()
+test('Given info state and tooltip value, there should be an info tooltip next to the select label', async ({
+  page,
+}) => {
+  const select = page.getByTestId('select-info-tooltip');
+  const tooltip = select.locator('label > div > v-tooltip').first();
+  await expect(tooltip.locator('.icon-info-outline')).toBeVisible();
 
   // text is not visible
-  await expect(tooltip.getByText('info tip').first()).not.toBeVisible()
+  await expect(tooltip.getByText('info tip').first()).not.toBeVisible();
   // make
-  await tooltip.hover()
-  await expect(tooltip.getByText('info tip').first()).toBeVisible()
-})
+  await tooltip.hover();
+  await expect(tooltip.getByText('info tip').first()).toBeVisible();
+});
 
-test('Given warn state and tooltip value, there should be a warn tooltip next to the select label', async ({page}) => {
-  const select = page.getByTestId('select-warn-tooltip')
-  const tooltip = select.locator('label > div > v-tooltip').first()
-  await expect(tooltip.locator('.text-warning-fg')).toBeVisible()
+test('Given warn state and tooltip value, there should be a warn tooltip next to the select label', async ({
+  page,
+}) => {
+  const select = page.getByTestId('select-warn-tooltip');
+  const tooltip = select.locator('label > div > v-tooltip').first();
+  await expect(tooltip.locator('.text-warning-fg')).toBeVisible();
 
   // text is not visible
-  await expect(tooltip.getByText('warn tip').first()).not.toBeVisible()
+  await expect(tooltip.getByText('warn tip').first()).not.toBeVisible();
   // make
-  await tooltip.hover()
-  await expect(tooltip.getByText('warn tip').first()).toBeVisible()
-})
+  await tooltip.hover();
+  await expect(tooltip.getByText('warn tip').first()).toBeVisible();
+});
 
-test('Given error state and tooltip value, there should be an error tooltip next to the select label', async ({page}) => {
-  const select = page.getByTestId('select-error-tooltip')
-  const tooltip = select.locator('label > div > v-tooltip').first()
-  await expect(tooltip.locator('.text-danger-fg')).toBeVisible()
+test('Given error state and tooltip value, there should be an error tooltip next to the select label', async ({
+  page,
+}) => {
+  const select = page.getByTestId('select-error-tooltip');
+  const tooltip = select.locator('label > div > v-tooltip').first();
+  await expect(tooltip.locator('.text-danger-fg')).toBeVisible();
 
   // text is not visible
-  await expect(tooltip.getByText('error tip').first()).not.toBeVisible()
+  await expect(tooltip.getByText('error tip').first()).not.toBeVisible();
   // make
-  await tooltip.hover()
-  await expect(tooltip.getByText('error tip').first()).toBeVisible()
-
-})
+  await tooltip.hover();
+  await expect(tooltip.getByText('error tip').first()).toBeVisible();
+});
 
-test('When there is no sort on the dropdown, the options should be rendered in the order they are passed into the element', async ({page}) => {
-  const select = page.getByTestId('basic-select')
-  await expect(select).toBeVisible()
+test('When there is no sort on the dropdown, the options should be rendered in the order they are passed into the element', async ({
+  page,
+}) => {
+  const select = page.getByTestId('basic-select');
+  await expect(select).toBeVisible();
 
-  const optionsContainer = select.locator('.options-container').first()
+  const optionsContainer = select.locator('.options-container').first();
 
   // click on the input
-  const input = select.locator('input').first()
-  await input.focus()
-  await expect(optionsContainer).toBeVisible()
+  const input = select.locator('input').first();
+  await input.focus();
+  await expect(optionsContainer).toBeVisible();
 
   // within the optionsContainer there should be 3 different options
-  expect(await optionsContainer.locator('label').all()).toHaveLength(3)
-  await expect(optionsContainer.locator('label').first()).toHaveText("one")
-  await expect(optionsContainer.locator('label').nth(1)).toHaveText("two")
-  await expect(optionsContainer.locator('label').nth(2)).toHaveText("three")
-})
-
-test('When there is a reduce sort option, the elements should reduce on matching input', async ({page}) => {
-  const select = page.getByTestId('select-reduce')
-  const input = select.locator('input').first()
-  await input.focus()
-  const optionsContainer = select.locator('.options-container').first()
-  expect(await optionsContainer.locator('label').all()).toHaveLength(3)
-
-  await input.type('one')
+  expect(await optionsContainer.locator('label').all()).toHaveLength(3);
+  await expect(optionsContainer.locator('label').first()).toHaveText('one');
+  await expect(optionsContainer.locator('label').nth(1)).toHaveText('two');
+  await expect(optionsContainer.locator('label').nth(2)).toHaveText('three');
+});
 
-  expect(await optionsContainer.locator('label').all()).toHaveLength(2)
-  await expect(optionsContainer.locator('label').first()).toHaveText('one')
-  await expect(optionsContainer.locator('label').last()).toHaveText('one chicken')
-})
+test('When there is a reduce sort option, the elements should reduce on matching input', async ({
+  page,
+}) => {
+  const select = page.getByTestId('select-reduce');
+  const input = select.locator('input').first();
+  await input.focus();
+  const optionsContainer = select.locator('.options-container').first();
+  expect(await optionsContainer.locator('label').all()).toHaveLength(3);
+
+  await input.type('one');
+
+  expect(await optionsContainer.locator('label').all()).toHaveLength(2);
+  await expect(optionsContainer.locator('label').first()).toHaveText('one');
+  await expect(optionsContainer.locator('label').last()).toHaveText(
+    'one chicken'
+  );
+});
 
-test('On pressing enter over an option, that option should be selected', async ({ page }) => {
-  const select = page.getByTestId('basic-select')
-  await expect(select).toBeVisible()
+test('On pressing enter over an option, that option should be selected', async ({
+  page,
+}) => {
+  const select = page.getByTestId('basic-select');
+  await expect(select).toBeVisible();
 
-  const optionsContainer = select.locator('.options-container').first()
+  const optionsContainer = select.locator('.options-container').first();
 
   // click on the input
-  const input = select.locator('input').first()
-  await input.focus()
-  await expect(optionsContainer).toBeVisible()
+  const input = select.locator('input').first();
+  await input.focus();
+  await expect(optionsContainer).toBeVisible();
 
-  expect(await input.inputValue()).toEqual('')
+  expect(await input.inputValue()).toEqual('');
   // press down over an option
-  await page.keyboard.press('ArrowDown')
-  
+  await page.keyboard.press('ArrowDown');
+
   // press enter
-  await page.keyboard.press('Enter')
+  await page.keyboard.press('Enter');
 
   // show the selcted value in the input
-  expect(await input.inputValue()).toEqual('one')
+  expect(await input.inputValue()).toEqual('one');
 });
diff --git a/tests/slider.spec.ts b/tests/slider.spec.ts
index 929afce64..f8d4170da 100644
--- a/tests/slider.spec.ts
+++ b/tests/slider.spec.ts
@@ -1,15 +1,20 @@
 import { test, expect } from '@playwright/test';
-import { waitForCustomEventWithParam, getCustomEventParam, waitForCustomEventTimeout, hexToRGB } from './lib/helper.ts'
+import {
+  waitForCustomEventWithParam,
+  getCustomEventParam,
+  waitForCustomEventTimeout,
+  hexToRGB,
+} from './lib/helper.ts';
 
-const customMin = -50
-const customMax = 50
-const customStart = -20
-const customEnd = 30
-const value = 15
-const step = 25
+const customMin = -50;
+const customMax = 50;
+const customStart = -20;
+const customEnd = 30;
+const value = 15;
+const step = 25;
 
 function delay(time) {
-  return new Promise(resolve => setTimeout(resolve, time));
+  return new Promise((resolve) => setTimeout(resolve, time));
 }
 
 test.beforeEach(async ({ page }) => {
@@ -17,166 +22,256 @@ test.beforeEach(async ({ page }) => {
 });
 
 test('Displays min and max values', async ({ page }) => {
-  const sliderMinMax = page.getByTestId('slider-min-max')
-  await expect(sliderMinMax).toBeVisible()
+  const sliderMinMax = page.getByTestId('slider-min-max');
+  await expect(sliderMinMax).toBeVisible();
 
-  await expect(sliderMinMax.getByText(String(customMin), { exact: true })).toBeVisible()
-  await expect(sliderMinMax.getByText(String(customMax), { exact: true })).toBeVisible()
+  await expect(
+    sliderMinMax.getByText(String(customMin), { exact: true })
+  ).toBeVisible();
+  await expect(
+    sliderMinMax.getByText(String(customMax), { exact: true })
+  ).toBeVisible();
 });
 
 test('Displays start and and end values', async ({ page }) => {
-  const sliderMinMax = page.getByTestId('slider-min-max')
-  await expect(sliderMinMax).toBeVisible()
-  const box = await sliderMinMax.boundingBox()
-  await expect(sliderMinMax.getByText(String(customStart), { exact: true })).toBeVisible()
-  const startPercentage = (customStart - customMin) / (customMax - customMin)
-  await expect(sliderMinMax.getByRole('slider').filter({ hasText: String(customStart) })).toHaveCSS('left', String(startPercentage * box.width) + 'px')
-
-  await expect(sliderMinMax.getByText(String(customEnd), { exact: true })).toBeVisible()
-  const endPercentage = (customEnd - customMin) / (customMax - customMin)
-  await expect(sliderMinMax.getByRole('slider').filter({ hasText: String(customEnd) })).toHaveCSS('left', String(endPercentage * box.width) + 'px')
-  
+  const sliderMinMax = page.getByTestId('slider-min-max');
+  await expect(sliderMinMax).toBeVisible();
+  const box = await sliderMinMax.boundingBox();
+  await expect(
+    sliderMinMax.getByText(String(customStart), { exact: true })
+  ).toBeVisible();
+  const startPercentage = (customStart - customMin) / (customMax - customMin);
+  await expect(
+    sliderMinMax.getByRole('slider').filter({ hasText: String(customStart) })
+  ).toHaveCSS('left', String(startPercentage * box.width) + 'px');
+
+  await expect(
+    sliderMinMax.getByText(String(customEnd), { exact: true })
+  ).toBeVisible();
+  const endPercentage = (customEnd - customMin) / (customMax - customMin);
+  await expect(
+    sliderMinMax.getByRole('slider').filter({ hasText: String(customEnd) })
+  ).toHaveCSS('left', String(endPercentage * box.width) + 'px');
+
   // check that slider labels are not visible until on hover
-  await expect(await sliderMinMax.locator('.floating').count()).toBe(2)
+  await expect(await sliderMinMax.locator('.floating').count()).toBe(2);
 
-  let startLabelOpacity = await sliderMinMax.locator('.floating').first().evaluate((e) => { return getComputedStyle(e).opacity })
-  expect(startLabelOpacity).toBe("0")
-  await sliderMinMax.getByRole('slider').first().hover()
+  let startLabelOpacity = await sliderMinMax
+    .locator('.floating')
+    .first()
+    .evaluate((e) => {
+      return getComputedStyle(e).opacity;
+    });
+  expect(startLabelOpacity).toBe('0');
+  await sliderMinMax.getByRole('slider').first().hover();
   await delay(250); // wait for opacity transition
-  startLabelOpacity = await sliderMinMax.locator('.floating').first().evaluate((e) => { return getComputedStyle(e).opacity })
-  expect(startLabelOpacity).toBe("1")
+  startLabelOpacity = await sliderMinMax
+    .locator('.floating')
+    .first()
+    .evaluate((e) => {
+      return getComputedStyle(e).opacity;
+    });
+  expect(startLabelOpacity).toBe('1');
 
-  let endLabelOpacity = await sliderMinMax.locator('.floating').nth(1).evaluate((e) => { return getComputedStyle(e).opacity })
-  expect(endLabelOpacity).toBe("0")
-  await sliderMinMax.getByRole('slider').nth(1).hover()
+  let endLabelOpacity = await sliderMinMax
+    .locator('.floating')
+    .nth(1)
+    .evaluate((e) => {
+      return getComputedStyle(e).opacity;
+    });
+  expect(endLabelOpacity).toBe('0');
+  await sliderMinMax.getByRole('slider').nth(1).hover();
   await delay(250); // wait for opacity transition
-  endLabelOpacity = await sliderMinMax.locator('.floating').nth(1).evaluate((e) => { return getComputedStyle(e).opacity })
-  expect(endLabelOpacity).toBe("1")
+  endLabelOpacity = await sliderMinMax
+    .locator('.floating')
+    .nth(1)
+    .evaluate((e) => {
+      return getComputedStyle(e).opacity;
+    });
+  expect(endLabelOpacity).toBe('1');
 });
 
 test('Starts slider at minimum value', async ({ page }) => {
-  const sliderMin = page.getByTestId('slider-min')
-  await expect(sliderMin).toBeVisible()
-  await expect(sliderMin.locator('span.bg-gray-9')).toHaveCSS('left', '0px') // bg-gray-9 is color of slider line
+  const sliderMin = page.getByTestId('slider-min');
+  await expect(sliderMin).toBeVisible();
+  await expect(sliderMin.locator('span.bg-gray-9')).toHaveCSS('left', '0px'); // bg-gray-9 is color of slider line
 });
 
 test('Ends slider at maximum value', async ({ page }) => {
-  const sliderMax = page.getByTestId('slider-max')
-  await expect(sliderMax).toBeVisible()
-  const box = await sliderMax.boundingBox()
-  await expect(sliderMax.locator('span.bg-gray-9')).toHaveCSS('right', '0px')
+  const sliderMax = page.getByTestId('slider-max');
+  await expect(sliderMax).toBeVisible();
+  const box = await sliderMax.boundingBox();
+  await expect(sliderMax.locator('span.bg-gray-9')).toHaveCSS('right', '0px');
 });
 
 test('Starts slider placement at value', async ({ page }) => {
-  const sliderValue = page.getByTestId('slider-value')
-  await expect(sliderValue).toBeVisible()
-  const box = await sliderValue.boundingBox()
-  const valuePercentage = (value - customMin) / (customMax - customMin)
-  await expect(sliderValue.getByRole('slider')).toHaveCSS('left', String(box.width * valuePercentage) + 'px')
+  const sliderValue = page.getByTestId('slider-value');
+  await expect(sliderValue).toBeVisible();
+  const box = await sliderValue.boundingBox();
+  const valuePercentage = (value - customMin) / (customMax - customMin);
+  await expect(sliderValue.getByRole('slider')).toHaveCSS(
+    'left',
+    String(box.width * valuePercentage) + 'px'
+  );
 });
 
 test('Displays axis ticks at intervals of size step', async ({ page }) => {
   // for reasonable step size, axis ticks display at intervals of size step
   // does not hold true for relatively small step sizes
-  const sliderStep = page.getByTestId('slider-step')
-  await expect(sliderStep).toBeVisible()
-  const axisTicks = await sliderStep.locator('span.bg-gray-6').all()
-  const numTicks = ((customMax - customMin) / step) - 1
-  await expect(axisTicks.length).toBe(numTicks)
-  
+  const sliderStep = page.getByTestId('slider-step');
+  await expect(sliderStep).toBeVisible();
+  const axisTicks = await sliderStep.locator('span.bg-gray-6').all();
+  const numTicks = (customMax - customMin) / step - 1;
+  await expect(axisTicks.length).toBe(numTicks);
+
   // check positioning of each tick
-  const box = await sliderStep.boundingBox()
+  const box = await sliderStep.boundingBox();
   for (let i = 0; i < numTicks; i++) {
-    await expect(axisTicks[i]).toHaveCSS('left', String((i + 1) / (numTicks + 1) * box.width) + 'px')
+    await expect(axisTicks[i]).toHaveCSS(
+      'left',
+      String(((i + 1) / (numTicks + 1)) * box.width) + 'px'
+    );
   }
 });
 
 test('Restricts slider value to intervals of size step', async ({ page }) => {
-  const sliderStep = await page.getByTestId('slider-step')
-  const slider = await sliderStep.getByRole('slider')
-  const isInputEventDispatched = await waitForCustomEventWithParam(page, 'input', 'value')
-  await expect(sliderStep).toBeVisible()
-  const axisBox = await sliderStep.boundingBox()
+  const sliderStep = await page.getByTestId('slider-step');
+  const slider = await sliderStep.getByRole('slider');
+  const isInputEventDispatched = await waitForCustomEventWithParam(
+    page,
+    'input',
+    'value'
+  );
+  await expect(sliderStep).toBeVisible();
+  const axisBox = await sliderStep.boundingBox();
   // slide a random amount, ensuring slide is large enough to change value
-  const randomSlide = (-1 * Math.sign(Math.random() - 0.5)) * ((Math.random() * (3 * axisBox.width / 8)) + (axisBox.width / 8));
-  await slider.dragTo(slider, { targetPosition: { x: randomSlide, y: 0 }, force: true })
-  await expect(isInputEventDispatched).toBeTruthy()
-  await expect(Math.abs(await getCustomEventParam(page, 'input', 'value') % 25)).toBe(0)
+  const randomSlide =
+    -1 *
+    Math.sign(Math.random() - 0.5) *
+    (Math.random() * ((3 * axisBox.width) / 8) + axisBox.width / 8);
+  await slider.dragTo(slider, {
+    targetPosition: { x: randomSlide, y: 0 },
+    force: true,
+  });
+  await expect(isInputEventDispatched).toBeTruthy();
+  await expect(
+    Math.abs((await getCustomEventParam(page, 'input', 'value')) % 25)
+  ).toBe(0);
 });
 
 test('Renders label above slider', async ({ page }) => {
-  const sliderLabel = page.getByTestId('slider-label')
-  await expect(sliderLabel).toBeVisible()
-  await expect(sliderLabel.getByText('sliiide to the left')).toBeVisible()
-  await expect(sliderLabel.locator('div.slider:below(:text("sliiide to the left"))').first()).toBeVisible()
+  const sliderLabel = page.getByTestId('slider-label');
+  await expect(sliderLabel).toBeVisible();
+  await expect(sliderLabel.getByText('sliiide to the left')).toBeVisible();
+  await expect(
+    sliderLabel
+      .locator('div.slider:below(:text("sliiide to the left"))')
+      .first()
+  ).toBeVisible();
 });
 
 test('Renders unit suffix with min and max values', async ({ page }) => {
-  const sliderSuffix = page.getByTestId('slider-suffix')
-  await expect(sliderSuffix).toBeVisible()
-  await expect(sliderSuffix.getByText(String(customMin) + ' units', { exact: true })).toBeVisible()
-  await expect(sliderSuffix.getByText(String(customMax) + ' units', { exact: true })).toBeVisible()
+  const sliderSuffix = page.getByTestId('slider-suffix');
+  await expect(sliderSuffix).toBeVisible();
+  await expect(
+    sliderSuffix.getByText(String(customMin) + ' units', { exact: true })
+  ).toBeVisible();
+  await expect(
+    sliderSuffix.getByText(String(customMax) + ' units', { exact: true })
+  ).toBeVisible();
 });
 
-test('Dispatches "input" event with value when user drags slider to value', async ({ page }) => {
-  const sliderValue = page.getByTestId('slider-value')
+test('Dispatches "input" event with value when user drags slider to value', async ({
+  page,
+}) => {
+  const sliderValue = page.getByTestId('slider-value');
 
-  const slider = sliderValue.getByRole('slider')
-  const isInputEventDispatched = await waitForCustomEventWithParam(page, 'input', 'value')
-  await slider.dragTo(await sliderValue.locator('span.bg-gray-6').first()) // slide to first tick, value -45
-  await expect(isInputEventDispatched).toBeTruthy()
-  await expect(await getCustomEventParam(page, 'input', 'value')).toBe(-45)
+  const slider = sliderValue.getByRole('slider');
+  const isInputEventDispatched = await waitForCustomEventWithParam(
+    page,
+    'input',
+    'value'
+  );
+  await slider.dragTo(await sliderValue.locator('span.bg-gray-6').first()); // slide to first tick, value -45
+  await expect(isInputEventDispatched).toBeTruthy();
+  await expect(await getCustomEventParam(page, 'input', 'value')).toBe(-45);
 });
 
-test('Given disabled attribute as true, displays slider as disabled and prevents interaction', async ({ page }) => {
-  const sliderDisabled = page.getByTestId('slider-disabled')
-  const slider = sliderDisabled.getByRole('slider')
-  const startBox = await slider.boundingBox()
-  await expect(sliderDisabled).toBeVisible()
+test('Given disabled attribute as true, displays slider as disabled and prevents interaction', async ({
+  page,
+}) => {
+  const sliderDisabled = page.getByTestId('slider-disabled');
+  const slider = sliderDisabled.getByRole('slider');
+  const startBox = await slider.boundingBox();
+  await expect(sliderDisabled).toBeVisible();
   const isInputEventDispatched = await waitForCustomEventTimeout(page, 'input');
-  await slider.dragTo(await sliderDisabled.locator('span.bg-gray-6').first()) // try to slide
-  const endBox = await slider.boundingBox()
+  await slider.dragTo(await sliderDisabled.locator('span.bg-gray-6').first()); // try to slide
+  const endBox = await slider.boundingBox();
   // make sure slider did not move
-  await expect(endBox.x).toBe(startBox.x)
-  await expect(endBox.y).toBe(startBox.y)
+  await expect(endBox.x).toBe(startBox.x);
+  await expect(endBox.y).toBe(startBox.y);
   await isInputEventDispatched;
 
-  await expect(sliderDisabled.getByText('0', { exact: true })).toHaveCSS('color', hexToRGB('text-disabled'))
-  await expect(sliderDisabled.getByText('100', { exact: true })).toHaveCSS('color', hexToRGB('text-disabled'))
-  await expect(sliderDisabled.getByText('disabled', { exact: true })).toHaveCSS('color', hexToRGB('text-disabled'))
+  await expect(sliderDisabled.getByText('0', { exact: true })).toHaveCSS(
+    'color',
+    hexToRGB('text-disabled')
+  );
+  await expect(sliderDisabled.getByText('100', { exact: true })).toHaveCSS(
+    'color',
+    hexToRGB('text-disabled')
+  );
+  await expect(sliderDisabled.getByText('disabled', { exact: true })).toHaveCSS(
+    'color',
+    hexToRGB('text-disabled')
+  );
 });
 
-
-test('Given readonly attribute as true, displays slider as readonly and prevents interaction', async ({ page }) => {
-  const sliderReadonly = page.getByTestId('slider-readonly')
-  const slider = sliderReadonly.getByRole('slider')
-  const startBox = await slider.boundingBox()
-  await expect(sliderReadonly).toBeVisible()
+test('Given readonly attribute as true, displays slider as readonly and prevents interaction', async ({
+  page,
+}) => {
+  const sliderReadonly = page.getByTestId('slider-readonly');
+  const slider = sliderReadonly.getByRole('slider');
+  const startBox = await slider.boundingBox();
+  await expect(sliderReadonly).toBeVisible();
   const isInputEventDispatched = await waitForCustomEventTimeout(page, 'input');
-  await slider.dragTo(await sliderReadonly.locator('span.bg-gray-6').first()) // try to slide
-  const endBox = await slider.boundingBox()
+  await slider.dragTo(await sliderReadonly.locator('span.bg-gray-6').first()); // try to slide
+  const endBox = await slider.boundingBox();
   // make sure slider did not move
-  await expect(endBox.x).toBe(startBox.x)
-  await expect(endBox.y).toBe(startBox.y)
+  await expect(endBox.x).toBe(startBox.x);
+  await expect(endBox.y).toBe(startBox.y);
   await isInputEventDispatched;
 
-  await expect(sliderReadonly.getByText('0', { exact: true })).toHaveCSS('color', 'rgb(0, 0, 0)')
-  await expect(sliderReadonly.getByText('100', { exact: true })).toHaveCSS('color', 'rgb(0, 0, 0)')
-  await expect(sliderReadonly.getByText('readonly', { exact: true })).toHaveCSS('color', 'rgb(0, 0, 0)')
+  await expect(sliderReadonly.getByText('0', { exact: true })).toHaveCSS(
+    'color',
+    'rgb(0, 0, 0)'
+  );
+  await expect(sliderReadonly.getByText('100', { exact: true })).toHaveCSS(
+    'color',
+    'rgb(0, 0, 0)'
+  );
+  await expect(sliderReadonly.getByText('readonly', { exact: true })).toHaveCSS(
+    'color',
+    'rgb(0, 0, 0)'
+  );
 });
 
-test('Given no attributes, renders slider with { min: 0, max: 100, value: 50, step: 1 }', async ({ page }) => {
-  const sliderDefault = page.getByTestId('slider-default')
-  await expect(sliderDefault.getByText('0', { exact: true })).toBeVisible()
-  await expect(sliderDefault.getByText('50', { exact: true })).toBeVisible()
-  await expect(sliderDefault.getByText('100', { exact: true })).toBeVisible()
+test('Given no attributes, renders slider with { min: 0, max: 100, value: 50, step: 1 }', async ({
+  page,
+}) => {
+  const sliderDefault = page.getByTestId('slider-default');
+  await expect(sliderDefault.getByText('0', { exact: true })).toBeVisible();
+  await expect(sliderDefault.getByText('50', { exact: true })).toBeVisible();
+  await expect(sliderDefault.getByText('100', { exact: true })).toBeVisible();
 
   // check step: 1 by sliding from 50 to 49
-  const slider = await sliderDefault.getByRole('slider')
-  const isInputEventDispatched = await waitForCustomEventWithParam(page, 'input', 'value')
-  await expect(slider).toBeVisible()
-  const box = await slider.boundingBox()
-  await slider.dragTo(slider, { targetPosition: { x: -5, y: 0} })
-  await expect(await getCustomEventParam(page, 'input', 'value')).toBe(49)
+  const slider = await sliderDefault.getByRole('slider');
+  const isInputEventDispatched = await waitForCustomEventWithParam(
+    page,
+    'input',
+    'value'
+  );
+  await expect(slider).toBeVisible();
+  const box = await slider.boundingBox();
+  await slider.dragTo(slider, { targetPosition: { x: -5, y: 0 } });
+  await expect(await getCustomEventParam(page, 'input', 'value')).toBe(49);
 });
-
diff --git a/tests/switch.spec.ts b/tests/switch.spec.ts
index 9da22ea25..b1082cf25 100644
--- a/tests/switch.spec.ts
+++ b/tests/switch.spec.ts
@@ -1,5 +1,10 @@
 import { test, expect } from '@playwright/test';
-import { hexToRGB, waitForCustomEventTimeout, waitForCustomEventWithParam, getCustomEventParam } from './lib/helper.ts'
+import {
+  hexToRGB,
+  waitForCustomEventTimeout,
+  waitForCustomEventWithParam,
+  getCustomEventParam,
+} from './lib/helper.ts';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/switch-test.html');
@@ -7,157 +12,240 @@ test.beforeEach(async ({ page }) => {
 
 test('Renders appropriately according to value attribute', async ({ page }) => {
   // No value attribute applied, default off
-  const switchDefault = page.getByTestId('switch-default')
-  await expect(switchDefault).toBeVisible()
-  await expect(switchDefault.getByRole('switch')).not.toBeChecked()
-  await expect(switchDefault.locator('input')).toHaveValue('off')
+  const switchDefault = page.getByTestId('switch-default');
+  await expect(switchDefault).toBeVisible();
+  await expect(switchDefault.getByRole('switch')).not.toBeChecked();
+  await expect(switchDefault.locator('input')).toHaveValue('off');
 
   // value='off' applied
-  const switchOff = page.getByTestId('switch-off')
-  await expect(switchOff).toBeVisible()
-  await expect(switchOff.getByRole('switch')).not.toBeChecked()
-  await expect(switchOff.locator('input')).toHaveValue('off')
-  await expect(switchOff.getByRole('switch').locator('div').first()).toHaveCSS("background-color", hexToRGB('gray-6'))
+  const switchOff = page.getByTestId('switch-off');
+  await expect(switchOff).toBeVisible();
+  await expect(switchOff.getByRole('switch')).not.toBeChecked();
+  await expect(switchOff.locator('input')).toHaveValue('off');
+  await expect(switchOff.getByRole('switch').locator('div').first()).toHaveCSS(
+    'background-color',
+    hexToRGB('gray-6')
+  );
 
   // value='on' applied
-  const switchOn = page.getByTestId('switch-on')
-  await expect(switchOn).toBeVisible()
-  await expect(switchOn.getByRole('switch')).toBeChecked()
-  await expect(switchOn.locator('input')).toHaveValue('on')
-  await expect(switchOn.getByRole('switch').locator('div').first()).toHaveCSS("background-color", hexToRGB('success-fg'))
+  const switchOn = page.getByTestId('switch-on');
+  await expect(switchOn).toBeVisible();
+  await expect(switchOn.getByRole('switch')).toBeChecked();
+  await expect(switchOn.locator('input')).toHaveValue('on');
+  await expect(switchOn.getByRole('switch').locator('div').first()).toHaveCSS(
+    'background-color',
+    hexToRGB('success-fg')
+  );
 });
 
 test('Responds to click from on to off', async ({ page }) => {
-  const isInputEventEmitted = waitForCustomEventWithParam(page,'input', 'value')
-  const switchOn = page.getByTestId('switch-on')
-  await switchOn.locator('label').click()
-  await expect(switchOn.locator('input')).toHaveValue('off')
-  await expect(isInputEventEmitted).toBeTruthy()
-  await expect(await getCustomEventParam(page, 'input', 'value')).toBe(false) // test emitted value from input event
-})
+  const isInputEventEmitted = waitForCustomEventWithParam(
+    page,
+    'input',
+    'value'
+  );
+  const switchOn = page.getByTestId('switch-on');
+  await switchOn.locator('label').click();
+  await expect(switchOn.locator('input')).toHaveValue('off');
+  await expect(isInputEventEmitted).toBeTruthy();
+  await expect(await getCustomEventParam(page, 'input', 'value')).toBe(false); // test emitted value from input event
+});
 
 test('Responds to click from off to on', async ({ page }) => {
-  const isInputEventEmitted = waitForCustomEventWithParam(page,'input', 'value')
-  const switchOff = page.getByTestId('switch-off')
-  await switchOff.locator('label').click()
-  await expect(switchOff.locator('input')).toHaveValue('on')
-  await expect(isInputEventEmitted).toBeTruthy()
-  await expect(await getCustomEventParam(page, 'input', 'value')).toBe(true) // test emitted value from input event
-})
+  const isInputEventEmitted = waitForCustomEventWithParam(
+    page,
+    'input',
+    'value'
+  );
+  const switchOff = page.getByTestId('switch-off');
+  await switchOff.locator('label').click();
+  await expect(switchOff.locator('input')).toHaveValue('on');
+  await expect(isInputEventEmitted).toBeTruthy();
+  await expect(await getCustomEventParam(page, 'input', 'value')).toBe(true); // test emitted value from input event
+});
 
 test('Responds to keydown "enter" from on to off', async ({ page }) => {
-  const isInputEventEmitted = waitForCustomEventWithParam(page,'input', 'value')
-  const switchOn = page.getByTestId('switch-on')
-  await switchOn.locator('label').press('Enter')
-  await expect(switchOn.locator('input')).toHaveValue('off')
-  await expect(isInputEventEmitted).toBeTruthy()
-  await expect(await getCustomEventParam(page, 'input', 'value')).toBe(false) // test emitted value from input event
-})
+  const isInputEventEmitted = waitForCustomEventWithParam(
+    page,
+    'input',
+    'value'
+  );
+  const switchOn = page.getByTestId('switch-on');
+  await switchOn.locator('label').press('Enter');
+  await expect(switchOn.locator('input')).toHaveValue('off');
+  await expect(isInputEventEmitted).toBeTruthy();
+  await expect(await getCustomEventParam(page, 'input', 'value')).toBe(false); // test emitted value from input event
+});
 
 test('Responds to keydown "enter" from off to on', async ({ page }) => {
-  const isInputEventEmitted = waitForCustomEventWithParam(page,'input', 'value')
-  const switchOff = page.getByTestId('switch-off')
-  await switchOff.locator('label').press('Enter')
-  await expect(switchOff.locator('input')).toHaveValue('on')
-  await expect(isInputEventEmitted).toBeTruthy()
-  await expect(await getCustomEventParam(page, 'input', 'value')).toBe(true) // test emitted value from input event
-})
+  const isInputEventEmitted = waitForCustomEventWithParam(
+    page,
+    'input',
+    'value'
+  );
+  const switchOff = page.getByTestId('switch-off');
+  await switchOff.locator('label').press('Enter');
+  await expect(switchOff.locator('input')).toHaveValue('on');
+  await expect(isInputEventEmitted).toBeTruthy();
+  await expect(await getCustomEventParam(page, 'input', 'value')).toBe(true); // test emitted value from input event
+});
 
 test('Renders label on top of switch by default', async ({ page }) => {
-  const switchWithLabel = page.getByTestId('switch-default')
-  await expect(switchWithLabel.getByText('default')).toBeVisible()
-  const topLabelText = await switchWithLabel.locator(':above(button)').first().textContent()
-  expect(topLabelText).toMatch(/default/i)
-})
-
-test('Renders label on top of switch given labelposition: top', async ({ page }) => {
-  const switchLabelTop = page.getByTestId('switch-label-top')
-  await expect(switchLabelTop).toBeVisible()
-  await expect(switchLabelTop.getByText('top')).toBeVisible()
-  const topLabelText = await switchLabelTop.locator(':above(button)').first().textContent()
-  expect(topLabelText).toMatch(/top/i)
-})
-
-test('Renders label on left side of switch given labelposition: left', async ({ page }) => {
-  const switchLabelLeft = page.getByTestId('switch-label-left')
-  await expect(switchLabelLeft).toBeVisible()
-  await expect(switchLabelLeft.getByText('left')).toBeVisible()
-  const leftLabelText = await switchLabelLeft.locator(':left-of(button)').first().textContent()
-  expect(leftLabelText).toMatch(/left/i)
-})
+  const switchWithLabel = page.getByTestId('switch-default');
+  await expect(switchWithLabel.getByText('default')).toBeVisible();
+  const topLabelText = await switchWithLabel
+    .locator(':above(button)')
+    .first()
+    .textContent();
+  expect(topLabelText).toMatch(/default/i);
+});
+
+test('Renders label on top of switch given labelposition: top', async ({
+  page,
+}) => {
+  const switchLabelTop = page.getByTestId('switch-label-top');
+  await expect(switchLabelTop).toBeVisible();
+  await expect(switchLabelTop.getByText('top')).toBeVisible();
+  const topLabelText = await switchLabelTop
+    .locator(':above(button)')
+    .first()
+    .textContent();
+  expect(topLabelText).toMatch(/top/i);
+});
+
+test('Renders label on left side of switch given labelposition: left', async ({
+  page,
+}) => {
+  const switchLabelLeft = page.getByTestId('switch-label-left');
+  await expect(switchLabelLeft).toBeVisible();
+  await expect(switchLabelLeft.getByText('left')).toBeVisible();
+  const leftLabelText = await switchLabelLeft
+    .locator(':left-of(button)')
+    .first()
+    .textContent();
+  expect(leftLabelText).toMatch(/left/i);
+});
 
 test('Renders as disabled', async ({ page }) => {
-  const switchDisabledOff = page.getByTestId('switch-disabled-off')
-  await expect(switchDisabledOff).toBeVisible()
-  await expect(switchDisabledOff.getByRole('switch')).toBeDisabled()
-  await expect(switchDisabledOff.locator('input')).toBeDisabled()
-  await expect(switchDisabledOff.getByText('disabled')).toHaveCSS('color', hexToRGB('text-disabled'))
-  await expect(switchDisabledOff.getByText('off')).toHaveCSS('color', hexToRGB('text-disabled'))
-  await expect(switchDisabledOff.getByRole('switch').locator('div').first()).toHaveCSS("background-color", hexToRGB('gray-4'))
-
-  const switchDisabledOn = page.getByTestId('switch-disabled-on')
-  await expect(switchDisabledOn).toBeVisible()
-  await expect(switchDisabledOn.locator('input')).toHaveValue('on')
-  await expect(switchDisabledOn.getByRole('switch')).toBeDisabled()
-  await expect(switchDisabledOn.locator('input')).toBeDisabled()
-  await expect(switchDisabledOn.getByText('disabled')).toHaveCSS('color', hexToRGB('text-disabled'))
-  await expect(switchDisabledOn.getByText('on')).toHaveCSS('color', hexToRGB('text-disabled'))
-  await expect(switchDisabledOn.getByRole('switch').locator('div').first()).toHaveCSS("background-color", hexToRGB('gray-4'))
-})
+  const switchDisabledOff = page.getByTestId('switch-disabled-off');
+  await expect(switchDisabledOff).toBeVisible();
+  await expect(switchDisabledOff.getByRole('switch')).toBeDisabled();
+  await expect(switchDisabledOff.locator('input')).toBeDisabled();
+  await expect(switchDisabledOff.getByText('disabled')).toHaveCSS(
+    'color',
+    hexToRGB('text-disabled')
+  );
+  await expect(switchDisabledOff.getByText('off')).toHaveCSS(
+    'color',
+    hexToRGB('text-disabled')
+  );
+  await expect(
+    switchDisabledOff.getByRole('switch').locator('div').first()
+  ).toHaveCSS('background-color', hexToRGB('gray-4'));
+
+  const switchDisabledOn = page.getByTestId('switch-disabled-on');
+  await expect(switchDisabledOn).toBeVisible();
+  await expect(switchDisabledOn.locator('input')).toHaveValue('on');
+  await expect(switchDisabledOn.getByRole('switch')).toBeDisabled();
+  await expect(switchDisabledOn.locator('input')).toBeDisabled();
+  await expect(switchDisabledOn.getByText('disabled')).toHaveCSS(
+    'color',
+    hexToRGB('text-disabled')
+  );
+  await expect(switchDisabledOn.getByText('on')).toHaveCSS(
+    'color',
+    hexToRGB('text-disabled')
+  );
+  await expect(
+    switchDisabledOn.getByRole('switch').locator('div').first()
+  ).toHaveCSS('background-color', hexToRGB('gray-4'));
+});
 
 test('Precludes value change if disabled', async ({ page }) => {
-  const switchDisabledOff = page.getByTestId('switch-disabled-off')
-  const isInputEventEmitted = waitForCustomEventTimeout(page,'input')
-  await switchDisabledOff.locator('label').click({ force: true })
-  await expect(switchDisabledOff.locator('input')).toHaveValue('off')
-  await isInputEventEmitted
-})
+  const switchDisabledOff = page.getByTestId('switch-disabled-off');
+  const isInputEventEmitted = waitForCustomEventTimeout(page, 'input');
+  await switchDisabledOff.locator('label').click({ force: true });
+  await expect(switchDisabledOff.locator('input')).toHaveValue('off');
+  await isInputEventEmitted;
+});
 
 test('Renders as read only', async ({ page }) => {
-  const switchReadOnlyOff = page.getByTestId('switch-readonly-off')
-  await expect(switchReadOnlyOff).toBeVisible()
-  await expect(switchReadOnlyOff.locator('input')).not.toBeEditable()
-  await expect(switchReadOnlyOff.getByText('read only')).not.toHaveCSS('color', hexToRGB('text-disabled'))
-  await expect(switchReadOnlyOff.getByText('off')).not.toHaveCSS('color', hexToRGB('text-disabled'))
-  await expect(switchReadOnlyOff.getByRole('switch').locator('div').first()).toHaveCSS("background-color", hexToRGB('gray-4'))
-
-  const switchReadOnlyOn = page.getByTestId('switch-readonly-on')
-  await expect(switchReadOnlyOn).toBeVisible()
-  await expect(switchReadOnlyOn.locator('input')).toHaveValue('on')
-  await expect(switchReadOnlyOn.locator('input')).not.toBeEditable()
-  await expect(switchReadOnlyOn.getByText('read only')).not.toHaveCSS('color', hexToRGB('text-disabled'))
-  await expect(switchReadOnlyOn.getByText('on', { exact: true })).not.toHaveCSS('color', hexToRGB('text-disabled'))
-  await expect(switchReadOnlyOn.getByRole('switch').locator('div').first()).toHaveCSS("background-color", hexToRGB('gray-4'))
-})
+  const switchReadOnlyOff = page.getByTestId('switch-readonly-off');
+  await expect(switchReadOnlyOff).toBeVisible();
+  await expect(switchReadOnlyOff.locator('input')).not.toBeEditable();
+  await expect(switchReadOnlyOff.getByText('read only')).not.toHaveCSS(
+    'color',
+    hexToRGB('text-disabled')
+  );
+  await expect(switchReadOnlyOff.getByText('off')).not.toHaveCSS(
+    'color',
+    hexToRGB('text-disabled')
+  );
+  await expect(
+    switchReadOnlyOff.getByRole('switch').locator('div').first()
+  ).toHaveCSS('background-color', hexToRGB('gray-4'));
+
+  const switchReadOnlyOn = page.getByTestId('switch-readonly-on');
+  await expect(switchReadOnlyOn).toBeVisible();
+  await expect(switchReadOnlyOn.locator('input')).toHaveValue('on');
+  await expect(switchReadOnlyOn.locator('input')).not.toBeEditable();
+  await expect(switchReadOnlyOn.getByText('read only')).not.toHaveCSS(
+    'color',
+    hexToRGB('text-disabled')
+  );
+  await expect(switchReadOnlyOn.getByText('on', { exact: true })).not.toHaveCSS(
+    'color',
+    hexToRGB('text-disabled')
+  );
+  await expect(
+    switchReadOnlyOn.getByRole('switch').locator('div').first()
+  ).toHaveCSS('background-color', hexToRGB('gray-4'));
+});
 
 test('Precludes value change if read only', async ({ page }) => {
-  const switchReadOnlyOff = page.getByTestId('switch-readonly-off')
-  const isInputEventEmitted = waitForCustomEventTimeout(page,'input')
-  await switchReadOnlyOff.locator('label').click({ force: true })
-  await expect(switchReadOnlyOff.locator('input')).toHaveValue('off')
-  await isInputEventEmitted
-})
-
-test('Displays tooltip in correct position given tooltip attribute', async ({ page }) => {
-  const switchTooltipDefault = page.getByTestId('switch-default')
-  await expect(switchTooltipDefault).toBeVisible()
-  await expect(switchTooltipDefault.locator('v-tooltip')).toBeVisible()
-  await expect(switchTooltipDefault.locator('v-tooltip:above(button)').first()).toBeVisible()
-  await expect(switchTooltipDefault.locator('v-tooltip:right-of(:text("Default"))').first()).toBeVisible()
-
-  const switchTooltipLeft = page.getByTestId('switch-label-left')
-  await expect(switchTooltipLeft).toBeVisible()
-  await expect(switchTooltipLeft.locator('v-tooltip')).toBeVisible()
-  await expect(switchTooltipLeft.locator('v-tooltip:left-of(button)').first()).toBeVisible()
-  await expect(switchTooltipLeft.locator('v-tooltip:right-of(:text("Left"))').first()).toBeVisible()
-})
-
-test('If variant is annotated, displays annotations on right side of switch', async ({ page }) => {
-  const switchAnnotated = page.getByTestId('switch-annotated')
-  await expect(switchAnnotated).toBeVisible()
-  await expect(switchAnnotated.getByText('Off')).toBeVisible()
-  await expect(switchAnnotated.locator('span:left-of(:text("Off"))').first()).toBeVisible()
-  await switchAnnotated.locator('label').click()
-  await expect(switchAnnotated.getByText('On')).toBeVisible()
-  await expect(switchAnnotated.locator('span:left-of(:text("On"))').first()).toBeVisible()
-})
+  const switchReadOnlyOff = page.getByTestId('switch-readonly-off');
+  const isInputEventEmitted = waitForCustomEventTimeout(page, 'input');
+  await switchReadOnlyOff.locator('label').click({ force: true });
+  await expect(switchReadOnlyOff.locator('input')).toHaveValue('off');
+  await isInputEventEmitted;
+});
+
+test('Displays tooltip in correct position given tooltip attribute', async ({
+  page,
+}) => {
+  const switchTooltipDefault = page.getByTestId('switch-default');
+  await expect(switchTooltipDefault).toBeVisible();
+  await expect(switchTooltipDefault.locator('v-tooltip')).toBeVisible();
+  await expect(
+    switchTooltipDefault.locator('v-tooltip:above(button)').first()
+  ).toBeVisible();
+  await expect(
+    switchTooltipDefault.locator('v-tooltip:right-of(:text("Default"))').first()
+  ).toBeVisible();
+
+  const switchTooltipLeft = page.getByTestId('switch-label-left');
+  await expect(switchTooltipLeft).toBeVisible();
+  await expect(switchTooltipLeft.locator('v-tooltip')).toBeVisible();
+  await expect(
+    switchTooltipLeft.locator('v-tooltip:left-of(button)').first()
+  ).toBeVisible();
+  await expect(
+    switchTooltipLeft.locator('v-tooltip:right-of(:text("Left"))').first()
+  ).toBeVisible();
+});
+
+test('If variant is annotated, displays annotations on right side of switch', async ({
+  page,
+}) => {
+  const switchAnnotated = page.getByTestId('switch-annotated');
+  await expect(switchAnnotated).toBeVisible();
+  await expect(switchAnnotated.getByText('Off')).toBeVisible();
+  await expect(
+    switchAnnotated.locator('span:left-of(:text("Off"))').first()
+  ).toBeVisible();
+  await switchAnnotated.locator('label').click();
+  await expect(switchAnnotated.getByText('On')).toBeVisible();
+  await expect(
+    switchAnnotated.locator('span:left-of(:text("On"))').first()
+  ).toBeVisible();
+});
diff --git a/tests/tabs.spec.ts b/tests/tabs.spec.ts
index 145912105..904b6cd54 100644
--- a/tests/tabs.spec.ts
+++ b/tests/tabs.spec.ts
@@ -1,99 +1,104 @@
 import { test, expect } from '@playwright/test';
-import { waitForCustomEvent } from './lib/helper.ts'
+import { waitForCustomEvent } from './lib/helper.ts';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/tabs-test.html');
 });
 
-test('Renders a list of values specified by the tabs attribute as tabs', async ({ page }) => {
-    // Confirm All Tabs Render Correctly
-    const selectedTestTabs = page.getByTestId("tabs-selected-test")
-
-    const tab1 = page.getByRole('button', { name: 'Tab 1' })
-    const tab2 = page.getByRole('button', { name: 'Tab 2' })
-    const tab3 = page.getByRole('button', { name: 'Tab 3' })
-  
-    // Check Tabs Buttons Are Visible
-    await expect(selectedTestTabs).toBeVisible()
-  
-    await expect(tab1).toBeVisible()
-    await expect(tab2).toBeVisible()
-    await expect(tab3).toBeVisible()
-  
-    // Check Tab Buttons Have Correct Text
-    await expect(tab1).toHaveText('Tab 1')
-    await expect(tab2).toHaveText('Tab 2')
-    await expect(tab3).toHaveText('Tab 3')
+test('Renders a list of values specified by the tabs attribute as tabs', async ({
+  page,
+}) => {
+  // Confirm All Tabs Render Correctly
+  const selectedTestTabs = page.getByTestId('tabs-selected-test');
+
+  const tab1 = page.getByRole('button', { name: 'Tab 1' });
+  const tab2 = page.getByRole('button', { name: 'Tab 2' });
+  const tab3 = page.getByRole('button', { name: 'Tab 3' });
+
+  // Check Tabs Buttons Are Visible
+  await expect(selectedTestTabs).toBeVisible();
+
+  await expect(tab1).toBeVisible();
+  await expect(tab2).toBeVisible();
+  await expect(tab3).toBeVisible();
+
+  // Check Tab Buttons Have Correct Text
+  await expect(tab1).toHaveText('Tab 1');
+  await expect(tab2).toHaveText('Tab 2');
+  await expect(tab3).toHaveText('Tab 3');
 });
 
-test('Confirms selected value is correct if selected attribute is specified', async ({ page }) => {
-  const selectedTestTabs = page.getByTestId("tabs-selected-test")
+test('Confirms selected value is correct if selected attribute is specified', async ({
+  page,
+}) => {
+  const selectedTestTabs = page.getByTestId('tabs-selected-test');
 
-  const tab1 = page.getByRole('button', { name: 'Tab 1' })
-  const tab2 = page.getByRole('button', { name: 'Tab 2' })
-  const tab3 = page.getByRole('button', { name: 'Tab 3' })
+  const tab1 = page.getByRole('button', { name: 'Tab 1' });
+  const tab2 = page.getByRole('button', { name: 'Tab 2' });
+  const tab3 = page.getByRole('button', { name: 'Tab 3' });
 
   // Check Selected Attribute is Correct (Tab 2)
-  await expect(selectedTestTabs).toHaveAttribute("selected", "Tab 2")
+  await expect(selectedTestTabs).toHaveAttribute('selected', 'Tab 2');
 
   // Check Selected Tab Has Correct Background Color of White (Tab 2)
-  await expect(tab1).not.toHaveClass(/bg-white/)
-  await expect(tab2).toHaveClass(/bg-white/)
-  await expect(tab3).not.toHaveClass(/bg-white/)
+  await expect(tab1).not.toHaveClass(/bg-white/);
+  await expect(tab2).toHaveClass(/bg-white/);
+  await expect(tab3).not.toHaveClass(/bg-white/);
 });
 
 test('Confirms that selected tab updates upon click', async ({ page }) => {
-  const selectedTestTabs = page.getByTestId("tabs-selected-test")
+  const selectedTestTabs = page.getByTestId('tabs-selected-test');
 
-  const tab1 = page.getByRole('button', { name: 'Tab 1' })
-  const tab2 = page.getByRole('button', { name: 'Tab 2' })
-  const tab3 = page.getByRole('button', { name: 'Tab 3' })
+  const tab1 = page.getByRole('button', { name: 'Tab 1' });
+  const tab2 = page.getByRole('button', { name: 'Tab 2' });
+  const tab3 = page.getByRole('button', { name: 'Tab 3' });
 
   // Check Selected Attribute is Correct (Tab 2)
-  await expect(selectedTestTabs).toHaveAttribute("selected", "Tab 2")
+  await expect(selectedTestTabs).toHaveAttribute('selected', 'Tab 2');
 
   // Check Selected Tab Has Correct Background Color of White (Tab 2)
-  await expect(tab1).not.toHaveClass(/bg-white/)
-  await expect(tab2).toHaveClass(/bg-white/)
-  await expect(tab3).not.toHaveClass(/bg-white/)
+  await expect(tab1).not.toHaveClass(/bg-white/);
+  await expect(tab2).toHaveClass(/bg-white/);
+  await expect(tab3).not.toHaveClass(/bg-white/);
 
-  // Click on Tab 3 
+  // Click on Tab 3
   // Check That New Selected Tab is Correct (Tab 3)
-  const tab3Selected = waitForCustomEvent(page,'input')
-  await tab3.click()
-  expect(tab3Selected).toBeTruthy()
+  const tab3Selected = waitForCustomEvent(page, 'input');
+  await tab3.click();
+  expect(tab3Selected).toBeTruthy();
 
   // Check That New Selected Tab Has Correct Background Color of White (Tab 3)
-  await expect(tab1).not.toHaveClass(/bg-white/)
-  await expect(tab2).not.toHaveClass(/bg-white/)
-  await expect(tab3).toHaveClass(/bg-white/)
+  await expect(tab1).not.toHaveClass(/bg-white/);
+  await expect(tab2).not.toHaveClass(/bg-white/);
+  await expect(tab3).toHaveClass(/bg-white/);
 });
 
-test('Confirms that on focus keydown, tab selection updates', async ({ page }) => {
+test('Confirms that on focus keydown, tab selection updates', async ({
+  page,
+}) => {
   // Focus, Keydown Test
   // Check That Selected Tab to Start Is Tab Z
-  const keyEnterTestTabs = page.getByTestId("tabs-key-enter-test")
-  await expect(keyEnterTestTabs).toHaveAttribute("selected", "Tab Z")
+  const keyEnterTestTabs = page.getByTestId('tabs-key-enter-test');
+  await expect(keyEnterTestTabs).toHaveAttribute('selected', 'Tab Z');
 
-  const tabX = page.getByRole('button', { name: 'Tab X' })
-  const tabY = page.getByRole('button', { name: 'Tab Y' })
-  const tabZ = page.getByRole('button', { name: 'Tab Z' })
+  const tabX = page.getByRole('button', { name: 'Tab X' });
+  const tabY = page.getByRole('button', { name: 'Tab Y' });
+  const tabZ = page.getByRole('button', { name: 'Tab Z' });
 
-  await expect(tabX).not.toHaveClass(/bg-white/)
-  await expect(tabY).not.toHaveClass(/bg-white/)
-  await expect(tabZ).toHaveClass(/bg-white/)
+  await expect(tabX).not.toHaveClass(/bg-white/);
+  await expect(tabY).not.toHaveClass(/bg-white/);
+  await expect(tabZ).toHaveClass(/bg-white/);
 
   // Focus on Tab Y
-  const tabYSelected = waitForCustomEvent(page,'input')
-  await tabY.focus()
+  const tabYSelected = waitForCustomEvent(page, 'input');
+  await tabY.focus();
   // Hit Enter
-  await page.keyboard.press('Enter')
-  
+  await page.keyboard.press('Enter');
+
   // Check That New Selected Tab is Tab Y
-  expect(tabYSelected).toBeTruthy()
+  expect(tabYSelected).toBeTruthy();
 
-  await expect(tabX).not.toHaveClass(/bg-white/)
-  await expect(tabY).toHaveClass(/bg-white/)
-  await expect(tabZ).not.toHaveClass(/bg-white/)
+  await expect(tabX).not.toHaveClass(/bg-white/);
+  await expect(tabY).toHaveClass(/bg-white/);
+  await expect(tabZ).not.toHaveClass(/bg-white/);
 });
-
diff --git a/tests/vector-input.spec.ts b/tests/vector-input.spec.ts
index 6b7f4e1d9..a4ab5de0a 100644
--- a/tests/vector-input.spec.ts
+++ b/tests/vector-input.spec.ts
@@ -1,260 +1,333 @@
 import { test, expect } from '@playwright/test';
-import { waitForCustomEvent, waitForCustomEventWithParam, getCustomEventParam } from './lib/helper.ts'
+import {
+  waitForCustomEvent,
+  waitForCustomEventWithParam,
+  getCustomEventParam,
+} from './lib/helper.ts';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/vector-input-test.html');
 });
 
-test('Renders the default vector input with x, y, z placeholders, a step of 1, and input type text', async ({ page }) => {
-  const vectorInputDefault = page.getByTestId('vector-input-default')
+test('Renders the default vector input with x, y, z placeholders, a step of 1, and input type text', async ({
+  page,
+}) => {
+  const vectorInputDefault = page.getByTestId('vector-input-default');
 
-  await expect(vectorInputDefault).toBeVisible()
+  await expect(vectorInputDefault).toBeVisible();
+
+  const dimensionCount = await vectorInputDefault.locator('input').count();
+  expect(dimensionCount).toBe(3);
 
-  const dimensionCount = await vectorInputDefault.locator('input').count()
-  expect(dimensionCount).toBe(3)
-  
   // Placeholders are x, y, and z
-  const xPlaceholderValue = await vectorInputDefault.locator('input').nth(0).getAttribute("placeholder")
-  expect(xPlaceholderValue).toBe('x')
-  const yPlaceholderValue = await vectorInputDefault.locator('input').nth(1).getAttribute("placeholder")
-  expect(yPlaceholderValue).toBe('y')
-  const zPlaceholderValue = await vectorInputDefault.locator('input').nth(2).getAttribute("placeholder")
-  expect(zPlaceholderValue).toBe('z')
+  const xPlaceholderValue = await vectorInputDefault
+    .locator('input')
+    .nth(0)
+    .getAttribute('placeholder');
+  expect(xPlaceholderValue).toBe('x');
+  const yPlaceholderValue = await vectorInputDefault
+    .locator('input')
+    .nth(1)
+    .getAttribute('placeholder');
+  expect(yPlaceholderValue).toBe('y');
+  const zPlaceholderValue = await vectorInputDefault
+    .locator('input')
+    .nth(2)
+    .getAttribute('placeholder');
+  expect(zPlaceholderValue).toBe('z');
 
   // Starting x value is ''
-  const xInput = vectorInputDefault.locator('input').nth(0)
-  expect(await xInput.inputValue()).toBe('')
+  const xInput = vectorInputDefault.locator('input').nth(0);
+  expect(await xInput.inputValue()).toBe('');
 
   // x input step default increments up 1
-  await xInput.focus()
-  await xInput.press('ArrowUp')
-  expect(await xInput.inputValue()).toBe('1')
-  
+  await xInput.focus();
+  await xInput.press('ArrowUp');
+  expect(await xInput.inputValue()).toBe('1');
+
   // x input step default decrements down 1
-  await xInput.focus()
-  await xInput.press('ArrowDown')
-  expect(await xInput.inputValue()).toBe('0')
+  await xInput.focus();
+  await xInput.press('ArrowDown');
+  expect(await xInput.inputValue()).toBe('0');
 
   // y default step tests
-  const yInput = vectorInputDefault.locator('input').nth(1)
-  expect(await yInput.inputValue()).toBe('')
+  const yInput = vectorInputDefault.locator('input').nth(1);
+  expect(await yInput.inputValue()).toBe('');
 
-  await yInput.focus()
-  await yInput.press('ArrowUp')
-  expect(await yInput.inputValue()).toBe('1')
+  await yInput.focus();
+  await yInput.press('ArrowUp');
+  expect(await yInput.inputValue()).toBe('1');
 
-  await yInput.focus()
-  await yInput.press('ArrowDown')
-  expect(await yInput.inputValue()).toBe('0')
+  await yInput.focus();
+  await yInput.press('ArrowDown');
+  expect(await yInput.inputValue()).toBe('0');
 
   // z default step tests
-  const zInput = vectorInputDefault.locator('input').nth(2)
-  expect(await zInput.inputValue()).toBe('')
+  const zInput = vectorInputDefault.locator('input').nth(2);
+  expect(await zInput.inputValue()).toBe('');
 
-  await zInput.focus()
-  await zInput.press('ArrowUp')
-  expect(await zInput.inputValue()).toBe('1')
+  await zInput.focus();
+  await zInput.press('ArrowUp');
+  expect(await zInput.inputValue()).toBe('1');
 
-  await zInput.focus()
-  await zInput.press('ArrowDown')
-  expect(await zInput.inputValue()).toBe('0')
+  await zInput.focus();
+  await zInput.press('ArrowDown');
+  expect(await zInput.inputValue()).toBe('0');
 
   // input type tests
-  const xTypeValue = await vectorInputDefault.locator('input').nth(0).getAttribute("type")
-  expect(xTypeValue).toBe('text')
-  const yTypeValue = await vectorInputDefault.locator('input').nth(1).getAttribute("type")
-  expect(yTypeValue).toBe('text')
-  const zTypeValue = await vectorInputDefault.locator('input').nth(2).getAttribute("type")
-  expect(zTypeValue).toBe('text')
-
+  const xTypeValue = await vectorInputDefault
+    .locator('input')
+    .nth(0)
+    .getAttribute('type');
+  expect(xTypeValue).toBe('text');
+  const yTypeValue = await vectorInputDefault
+    .locator('input')
+    .nth(1)
+    .getAttribute('type');
+  expect(yTypeValue).toBe('text');
+  const zTypeValue = await vectorInputDefault
+    .locator('input')
+    .nth(2)
+    .getAttribute('type');
+  expect(zTypeValue).toBe('text');
 });
 
-test('Renders three inputs with type text if number type specified', async ({ page }) => {
-  const vectorInputNumType = page.getByTestId('vector-input-type-number')
-
-  await expect(vectorInputNumType).toBeVisible()
-
-  const xTypeValue = await vectorInputNumType.locator('input').nth(0).getAttribute("type")
-  expect(xTypeValue).toBe('text')
-  const yTypeValue = await vectorInputNumType.locator('input').nth(1).getAttribute("type")
-  expect(yTypeValue).toBe('text')
-  const zTypeValue = await vectorInputNumType.locator('input').nth(2).getAttribute("type")
-  expect(zTypeValue).toBe('text')
-
+test('Renders three inputs with type text if number type specified', async ({
+  page,
+}) => {
+  const vectorInputNumType = page.getByTestId('vector-input-type-number');
+
+  await expect(vectorInputNumType).toBeVisible();
+
+  const xTypeValue = await vectorInputNumType
+    .locator('input')
+    .nth(0)
+    .getAttribute('type');
+  expect(xTypeValue).toBe('text');
+  const yTypeValue = await vectorInputNumType
+    .locator('input')
+    .nth(1)
+    .getAttribute('type');
+  expect(yTypeValue).toBe('text');
+  const zTypeValue = await vectorInputNumType
+    .locator('input')
+    .nth(2)
+    .getAttribute('type');
+  expect(zTypeValue).toBe('text');
 });
 
-test('Renders three inputs with type number if integer type specified', async ({ page }) => {
-  const vectorInputTypeInteger = page.getByTestId('vector-input-type-integer')
-
-  const xTypeValue  = await vectorInputTypeInteger.locator('input').nth(0).getAttribute("type")
-  expect(xTypeValue ).toBe('number')
-  const yTypeValue = await vectorInputTypeInteger.locator('input').nth(1).getAttribute("type")
-  expect(yTypeValue).toBe('number')
-  const zTypeValue = await vectorInputTypeInteger.locator('input').nth(2).getAttribute("type")
-  expect(zTypeValue).toBe('number')
-
+test('Renders three inputs with type number if integer type specified', async ({
+  page,
+}) => {
+  const vectorInputTypeInteger = page.getByTestId('vector-input-type-integer');
+
+  const xTypeValue = await vectorInputTypeInteger
+    .locator('input')
+    .nth(0)
+    .getAttribute('type');
+  expect(xTypeValue).toBe('number');
+  const yTypeValue = await vectorInputTypeInteger
+    .locator('input')
+    .nth(1)
+    .getAttribute('type');
+  expect(yTypeValue).toBe('number');
+  const zTypeValue = await vectorInputTypeInteger
+    .locator('input')
+    .nth(2)
+    .getAttribute('type');
+  expect(zTypeValue).toBe('number');
 });
 
 test('When inputs are updated, events fire', async ({ page }) => {
-  const vectorInputOnInput = page.getByTestId('vector-input-on-input')
-
-  await expect(vectorInputOnInput).toBeVisible()
-
-  const xInput = vectorInputOnInput.locator('input').nth(0)
-  const xInputEvent = waitForCustomEventWithParam(page, 'input', 'value')
-  await xInput.focus()
-  await xInput.press('ArrowUp')
-  expect(xInputEvent).toBeTruthy()
-  expect(await getCustomEventParam(page, 'input', 'value')).toStrictEqual([1])
-  
-  const yInput = vectorInputOnInput.locator('input').nth(1)
-  const yInputEvent = waitForCustomEventWithParam(page, 'input', 'value')
-  await yInput.focus()
-  await yInput.press('ArrowUp')
-  expect(yInputEvent).toBeTruthy()
-  expect(await getCustomEventParam(page, 'input', 'value')).toStrictEqual([1, 1])
-
-
-  const zInput = vectorInputOnInput.locator('input').nth(2)
-  const zInputEvent = waitForCustomEventWithParam(page, 'input', 'value')
-  await zInput.focus()
-  await zInput.press('ArrowUp')
-  expect(zInputEvent).toBeTruthy()
-  expect(await getCustomEventParam(page, 'input', 'value')).toStrictEqual([1, 1, 1])
-
+  const vectorInputOnInput = page.getByTestId('vector-input-on-input');
+
+  await expect(vectorInputOnInput).toBeVisible();
+
+  const xInput = vectorInputOnInput.locator('input').nth(0);
+  const xInputEvent = waitForCustomEventWithParam(page, 'input', 'value');
+  await xInput.focus();
+  await xInput.press('ArrowUp');
+  expect(xInputEvent).toBeTruthy();
+  expect(await getCustomEventParam(page, 'input', 'value')).toStrictEqual([1]);
+
+  const yInput = vectorInputOnInput.locator('input').nth(1);
+  const yInputEvent = waitForCustomEventWithParam(page, 'input', 'value');
+  await yInput.focus();
+  await yInput.press('ArrowUp');
+  expect(yInputEvent).toBeTruthy();
+  expect(await getCustomEventParam(page, 'input', 'value')).toStrictEqual([
+    1, 1,
+  ]);
+
+  const zInput = vectorInputOnInput.locator('input').nth(2);
+  const zInputEvent = waitForCustomEventWithParam(page, 'input', 'value');
+  await zInput.focus();
+  await zInput.press('ArrowUp');
+  expect(zInputEvent).toBeTruthy();
+  expect(await getCustomEventParam(page, 'input', 'value')).toStrictEqual([
+    1, 1, 1,
+  ]);
 });
 
-test('When label is specified, label renders to the left of inputs', async ({ page }) => {
-  const vectorInputLabelLeft = page.getByTestId('vector-input-label')
+test('When label is specified, label renders to the left of inputs', async ({
+  page,
+}) => {
+  const vectorInputLabelLeft = page.getByTestId('vector-input-label');
 
-  await expect(vectorInputLabelLeft).toBeVisible()
+  await expect(vectorInputLabelLeft).toBeVisible();
 
-  const labelText = await vectorInputLabelLeft.getByRole('paragraph').textContent()
-  expect(labelText).toBe('Label Left')
+  const labelText = await vectorInputLabelLeft
+    .getByRole('paragraph')
+    .textContent();
+  expect(labelText).toBe('Label Left');
 
   // Confirm label is to the left of x input (x input is to the right of label)
-  const xInputPlaceholder = (await page.locator("input:right-of(:text('Label Left'))").nth(1).getAttribute('placeholder'))
-  expect(xInputPlaceholder).toBe('x')
-
+  const xInputPlaceholder = await page
+    .locator("input:right-of(:text('Label Left'))")
+    .nth(1)
+    .getAttribute('placeholder');
+  expect(xInputPlaceholder).toBe('x');
 });
 
-test('Render values in x, y, z inputs as starting values if they are specified in the value attribute', async ({ page }) => {
-  const vectorInputValue = page.getByTestId('vector-input-value')
-
-  await expect(vectorInputValue).toBeVisible()
+test('Render values in x, y, z inputs as starting values if they are specified in the value attribute', async ({
+  page,
+}) => {
+  const vectorInputValue = page.getByTestId('vector-input-value');
 
-  const xInput = vectorInputValue.locator('input').nth(0)
-  const yInput = vectorInputValue.locator('input').nth(1)
-  const zInput = vectorInputValue.locator('input').nth(2)
+  await expect(vectorInputValue).toBeVisible();
 
-  expect(await xInput.inputValue()).toBe('1')
-  expect(await yInput.inputValue()).toBe('2')
-  expect(await zInput.inputValue()).toBe('3')
+  const xInput = vectorInputValue.locator('input').nth(0);
+  const yInput = vectorInputValue.locator('input').nth(1);
+  const zInput = vectorInputValue.locator('input').nth(2);
 
+  expect(await xInput.inputValue()).toBe('1');
+  expect(await yInput.inputValue()).toBe('2');
+  expect(await zInput.inputValue()).toBe('3');
 });
 
-test('When step is specified, on arrow up, confirm input incremented to the correct value', async ({ page }) => {
-  const vectorInputStepTest = page.getByTestId('vector-input-step-test')
-
-  await expect(vectorInputStepTest).toBeVisible()
-
-    // Starting x value is ''
-    const xInput = vectorInputStepTest.locator('input').nth(0)
-    expect(await xInput.inputValue()).toBe('')
-  
-    // x input step increments up 0.01
-    await xInput.focus()
-    await xInput.press('ArrowUp')
-    expect(await xInput.inputValue()).toBe('0.01')
-    
-    // x input step decrements down .01
-    await xInput.focus()
-    await xInput.press('ArrowDown')
-    expect(await xInput.inputValue()).toBe('0')
-  
-    // y step tests 0.01
-    const yInput = vectorInputStepTest.locator('input').nth(1)
-    expect(await yInput.inputValue()).toBe('')
-  
-    await yInput.focus()
-    await yInput.press('ArrowUp')
-    expect(await yInput.inputValue()).toBe('0.01')
-  
-    await yInput.focus()
-    await yInput.press('ArrowDown')
-    expect(await yInput.inputValue()).toBe('0')
-  
-    // z step tests 0.01
-    const zInput = vectorInputStepTest.locator('input').nth(2)
-    expect(await zInput.inputValue()).toBe('')
-  
-    await zInput.focus()
-    await zInput.press('ArrowUp')
-    expect(await zInput.inputValue()).toBe('0.01')
-  
-    await zInput.focus()
-    await zInput.press('ArrowDown')
-    expect(await zInput.inputValue()).toBe('0')
+test('When step is specified, on arrow up, confirm input incremented to the correct value', async ({
+  page,
+}) => {
+  const vectorInputStepTest = page.getByTestId('vector-input-step-test');
+
+  await expect(vectorInputStepTest).toBeVisible();
 
+  // Starting x value is ''
+  const xInput = vectorInputStepTest.locator('input').nth(0);
+  expect(await xInput.inputValue()).toBe('');
+
+  // x input step increments up 0.01
+  await xInput.focus();
+  await xInput.press('ArrowUp');
+  expect(await xInput.inputValue()).toBe('0.01');
+
+  // x input step decrements down .01
+  await xInput.focus();
+  await xInput.press('ArrowDown');
+  expect(await xInput.inputValue()).toBe('0');
+
+  // y step tests 0.01
+  const yInput = vectorInputStepTest.locator('input').nth(1);
+  expect(await yInput.inputValue()).toBe('');
+
+  await yInput.focus();
+  await yInput.press('ArrowUp');
+  expect(await yInput.inputValue()).toBe('0.01');
+
+  await yInput.focus();
+  await yInput.press('ArrowDown');
+  expect(await yInput.inputValue()).toBe('0');
+
+  // z step tests 0.01
+  const zInput = vectorInputStepTest.locator('input').nth(2);
+  expect(await zInput.inputValue()).toBe('');
+
+  await zInput.focus();
+  await zInput.press('ArrowUp');
+  expect(await zInput.inputValue()).toBe('0.01');
+
+  await zInput.focus();
+  await zInput.press('ArrowDown');
+  expect(await zInput.inputValue()).toBe('0');
 });
 
-test('When dimensions specified as 3, render 3 inputs with x, y, z placeholders', async ({ page }) => {
-  const vectorInputDimensions3 = page.getByTestId('vector-input-dimensions-3')
+test('When dimensions specified as 3, render 3 inputs with x, y, z placeholders', async ({
+  page,
+}) => {
+  const vectorInputDimensions3 = page.getByTestId('vector-input-dimensions-3');
 
-  await expect(vectorInputDimensions3).toBeVisible()
+  await expect(vectorInputDimensions3).toBeVisible();
 
-  const dimensionCount = await vectorInputDimensions3.locator('input').count()
-  expect(dimensionCount).toBe(3)
+  const dimensionCount = await vectorInputDimensions3.locator('input').count();
+  expect(dimensionCount).toBe(3);
 
-  const xInput = vectorInputDimensions3.locator('input').nth(0)
-  await expect(xInput).toBeVisible()
+  const xInput = vectorInputDimensions3.locator('input').nth(0);
+  await expect(xInput).toBeVisible();
 
-  const yInput = vectorInputDimensions3.locator('input').nth(1)
-  await expect(yInput).toBeVisible()
+  const yInput = vectorInputDimensions3.locator('input').nth(1);
+  await expect(yInput).toBeVisible();
 
-  const zInput = vectorInputDimensions3.locator('input').nth(2)
-  await expect(zInput).toBeVisible()
+  const zInput = vectorInputDimensions3.locator('input').nth(2);
+  await expect(zInput).toBeVisible();
 
   // Placeholders are x, y, z
-  const xPlaceholderValue = await vectorInputDimensions3.locator('input').nth(0).getAttribute("placeholder")
-  expect(xPlaceholderValue).toBe('x')
-  const yPlaceholderValue = await vectorInputDimensions3.locator('input').nth(1).getAttribute("placeholder")
-  expect(yPlaceholderValue).toBe('y')
-  const zPlaceholderValue = await vectorInputDimensions3.locator('input').nth(2).getAttribute("placeholder")
-  expect(zPlaceholderValue).toBe('z')
-
+  const xPlaceholderValue = await vectorInputDimensions3
+    .locator('input')
+    .nth(0)
+    .getAttribute('placeholder');
+  expect(xPlaceholderValue).toBe('x');
+  const yPlaceholderValue = await vectorInputDimensions3
+    .locator('input')
+    .nth(1)
+    .getAttribute('placeholder');
+  expect(yPlaceholderValue).toBe('y');
+  const zPlaceholderValue = await vectorInputDimensions3
+    .locator('input')
+    .nth(2)
+    .getAttribute('placeholder');
+  expect(zPlaceholderValue).toBe('z');
 });
 
-test('When dimensions specified as 4, render 4 inputs with x, y, z, w placeholders', async ({ page }) => {
-  const vectorInputDimensions4 = page.getByTestId('vector-input-dimensions-4')
-  await expect(vectorInputDimensions4).toBeVisible()
+test('When dimensions specified as 4, render 4 inputs with x, y, z, w placeholders', async ({
+  page,
+}) => {
+  const vectorInputDimensions4 = page.getByTestId('vector-input-dimensions-4');
+  await expect(vectorInputDimensions4).toBeVisible();
 
-  const dimensionCount = await vectorInputDimensions4.locator('input').count()
-  expect(dimensionCount).toBe(4)
+  const dimensionCount = await vectorInputDimensions4.locator('input').count();
+  expect(dimensionCount).toBe(4);
 
-  const xInput = vectorInputDimensions4.locator('input').nth(0)
-  await expect(xInput).toBeVisible()
+  const xInput = vectorInputDimensions4.locator('input').nth(0);
+  await expect(xInput).toBeVisible();
 
-  const yInput = vectorInputDimensions4.locator('input').nth(1)
-  await expect(yInput).toBeVisible()
+  const yInput = vectorInputDimensions4.locator('input').nth(1);
+  await expect(yInput).toBeVisible();
 
-  const zInput = vectorInputDimensions4.locator('input').nth(2)
-  await expect(zInput).toBeVisible()
+  const zInput = vectorInputDimensions4.locator('input').nth(2);
+  await expect(zInput).toBeVisible();
 
-  const wInput = vectorInputDimensions4.locator('input').nth(3)
-  await expect(wInput).toBeVisible()
+  const wInput = vectorInputDimensions4.locator('input').nth(3);
+  await expect(wInput).toBeVisible();
 
   // Placeholders are x, y, z, and w
-  const xPlaceholderValue = await vectorInputDimensions4.locator('input').nth(0).getAttribute("placeholder")
-  expect(xPlaceholderValue).toBe('x')
-  const yPlaceholderValue = await vectorInputDimensions4.locator('input').nth(1).getAttribute("placeholder")
-  expect(yPlaceholderValue).toBe('y')
-  const zPlaceholderValue = await vectorInputDimensions4.locator('input').nth(2).getAttribute("placeholder")
-  expect(zPlaceholderValue).toBe('z')
-  const wPlaceholderValue = await vectorInputDimensions4.locator('input').nth(3).getAttribute("placeholder")
-  expect(wPlaceholderValue).toBe('w')
-
+  const xPlaceholderValue = await vectorInputDimensions4
+    .locator('input')
+    .nth(0)
+    .getAttribute('placeholder');
+  expect(xPlaceholderValue).toBe('x');
+  const yPlaceholderValue = await vectorInputDimensions4
+    .locator('input')
+    .nth(1)
+    .getAttribute('placeholder');
+  expect(yPlaceholderValue).toBe('y');
+  const zPlaceholderValue = await vectorInputDimensions4
+    .locator('input')
+    .nth(2)
+    .getAttribute('placeholder');
+  expect(zPlaceholderValue).toBe('z');
+  const wPlaceholderValue = await vectorInputDimensions4
+    .locator('input')
+    .nth(3)
+    .getAttribute('placeholder');
+  expect(wPlaceholderValue).toBe('w');
 });
-
-
-
diff --git a/tsconfig.json b/tsconfig.json
index fc4db7ff0..053a75639 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,12 +7,16 @@
 
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
-    "target": "ESNext",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
-    "module": "ESNext",                             /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],       /* Specify library files to be included in the compilation. */
-    "allowJs": true,                                /* Allow javascript files to be compiled. */
-    "checkJs": true,                                /* Report errors in .js files. */
-    "jsx": "preserve",                              /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
+    "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
+    "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ] /* Specify library files to be included in the compilation. */,
+    "allowJs": true /* Allow javascript files to be compiled. */,
+    "checkJs": true /* Report errors in .js files. */,
+    "jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
     // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                           /* Generates corresponding '.map' file. */
@@ -22,41 +26,42 @@
     // "composite": true,                           /* Enable project compilation */
     // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
     // "removeComments": true,                      /* Do not emit comments to output. */
-    "noEmit": false,                                /* Do not emit outputs. */
+    "noEmit": false /* Do not emit outputs. */,
     // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
-    "isolatedModules": true,                        /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
 
     /* Strict Type-Checking Options */
-    "strict": true,                                 /* Enable all strict type-checking options. */
-    "noImplicitAny": true,                          /* Raise error on expressions and declarations with an implied 'any' type. */
-    "strictNullChecks": true,                       /* Enable strict null checks. */
-    "strictFunctionTypes": true,                    /* Enable strict checking of function types. */
-    "strictBindCallApply": true,                    /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-    "strictPropertyInitialization": true,           /* Enable strict checking of property initialization in classes. */
-    "noImplicitThis": true,                         /* Raise error on 'this' expressions with an implied 'any' type. */
-    "alwaysStrict": true,                           /* Parse in strict mode and emit "use strict" for each source file. */
+    "strict": true /* Enable all strict type-checking options. */,
+    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": true /* Enable strict null checks. */,
+    "strictFunctionTypes": true /* Enable strict checking of function types. */,
+    "strictBindCallApply": true /* Enable strict 'bind', 'call', and 'apply' methods on functions. */,
+    "strictPropertyInitialization": true /* Enable strict checking of property initialization in classes. */,
+    "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
+    "alwaysStrict": true /* Parse in strict mode and emit "use strict" for each source file. */,
 
     /* Additional Checks */
-    "noUnusedLocals": true,                         /* Report errors on unused locals. */
-    "noUnusedParameters": true,                     /* Report errors on unused parameters. */
-    "noImplicitReturns": true,                      /* Report error when not all code paths in function return a value. */
-    "noFallthroughCasesInSwitch": true,             /* Report errors for fallthrough cases in switch statement. */
-    "noUncheckedIndexedAccess": true,               /* Include 'undefined' in index signature results */
-    "noImplicitOverride": true,                     /* Ensure overriding members in derived classes are marked with an 'override' modifier. */
-    "noPropertyAccessFromIndexSignature": true,     /* Require undeclared properties from index signatures to use element accesses. */
+    "noUnusedLocals": true /* Report errors on unused locals. */,
+    "noUnusedParameters": true /* Report errors on unused parameters. */,
+    "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
+    "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
+    "noUncheckedIndexedAccess": true /* Include 'undefined' in index signature results */,
+    "noImplicitOverride": true /* Ensure overriding members in derived classes are marked with an 'override' modifier. */,
+    "noPropertyAccessFromIndexSignature": true /* Require undeclared properties from index signatures to use element accesses. */,
     "useDefineForClassFields": true,
-  
+
     /* Module Resolution Options */
-    "moduleResolution": "node",                     /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     "resolveJsonModule": true,
-    "baseUrl": "./",                                /* Base directory to resolve non-absolute module names. */
-    "paths": {                                      /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
+    "paths": {
+      /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     },
     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": []                              /* List of folders to include type definitions from. */                            
-    "types": [],                                    /* Type declaration files to be included in compilation. */                      
-    "allowSyntheticDefaultImports": true,           /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "typeRoots": []                              /* List of folders to include type definitions from. */
+    "types": [] /* Type declaration files to be included in compilation. */,
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
     // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
     // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
 
@@ -71,7 +76,7 @@
     // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
 
     /* Advanced Options */
-    "skipLibCheck": false,                          /* Skip type checking of declaration files. */
-    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
-  },
+    "skipLibCheck": false /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+  }
 }
diff --git a/vite.config.ts b/vite.config.ts
index 79b73ec2b..59cd56734 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,20 +1,20 @@
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-import sveltePreprocess from 'svelte-preprocess'
-import { defineConfig } from 'vite'
-import path from 'node:path'
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import sveltePreprocess from 'svelte-preprocess';
+import { defineConfig } from 'vite';
+import path from 'node:path';
 
-const preprocess = sveltePreprocess()
+const preprocess = sveltePreprocess();
 
 // https://vitejs.dev/config/
 export default defineConfig({
   define: {
-    'process.env.NODE_ENV': '"production"'
+    'process.env.NODE_ENV': '"production"',
   },
   assetsInclude: ['fonts'],
   plugins: [
     svelte({
       compilerOptions: { customElement: true },
-      preprocess
+      preprocess,
     }),
   ],
   build: {
@@ -23,14 +23,14 @@ export default defineConfig({
     lib: {
       entry: path.resolve(__dirname, 'src/main.ts'),
       name: 'Prime',
-      fileName: (format) => `prime.${format}.js`
+      fileName: (format) => `prime.${format}.js`,
     },
-    
+
     rollupOptions: {
       output: {
         inlineDynamicImports: true,
         manualChunks: undefined,
       },
     },
-  }
-})
+  },
+});