diff --git a/packages/buefy-next/rollup.config.mjs b/packages/buefy-next/rollup.config.mjs
index 29cfdb209..5ded1f0df 100644
--- a/packages/buefy-next/rollup.config.mjs
+++ b/packages/buefy-next/rollup.config.mjs
@@ -31,7 +31,6 @@ const components = fs
 
 const JS_COMPONENTS = [
     'clockpicker',
-    'colorpicker',
     'datepicker',
     'datetimepicker',
     'numberinput',
diff --git a/packages/buefy-next/src/components/colorpicker/Colorpicker.spec.js b/packages/buefy-next/src/components/colorpicker/Colorpicker.spec.ts
similarity index 83%
rename from packages/buefy-next/src/components/colorpicker/Colorpicker.spec.js
rename to packages/buefy-next/src/components/colorpicker/Colorpicker.spec.ts
index 7abc6a308..e81b3c103 100644
--- a/packages/buefy-next/src/components/colorpicker/Colorpicker.spec.js
+++ b/packages/buefy-next/src/components/colorpicker/Colorpicker.spec.ts
@@ -1,5 +1,6 @@
+import { describe, expect, it } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import BColorpicker from '@components/colorpicker/Colorpicker'
+import BColorpicker from '@components/colorpicker/Colorpicker.vue'
 
 describe('BColorpicker', () => {
     it('render correctly', () => {
diff --git a/packages/buefy-next/src/components/colorpicker/Colorpicker.vue b/packages/buefy-next/src/components/colorpicker/Colorpicker.vue
index 3548e3f02..1b352b252 100644
--- a/packages/buefy-next/src/components/colorpicker/Colorpicker.vue
+++ b/packages/buefy-next/src/components/colorpicker/Colorpicker.vue
@@ -98,25 +98,46 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { DefineComponent, PropType } from 'vue'
+
 import FormElementMixin from '../../utils/FormElementMixin'
 import { isMobile } from '../../utils/helpers'
 import config from '../../utils/config'
 import Color from '../../utils/color'
+import type { Rgb } from '../../utils/color'
+
+import BButton from '../button/Button.vue'
+import BDropdown from '../dropdown/Dropdown.vue'
+import BDropdownItem from '../dropdown/DropdownItem.vue'
+import BInput from '../input/Input.vue'
+import BField from '../field/Field.vue'
+
+import BColorpickerHSLRepresentationTriangle from './ColorpickerHSLRepresentationTriangle.vue'
+import BColorpickerHSLRepresentationSquare from './ColorpickerHSLRepresentationSquare.vue'
+import BColorpickerAlphaSlider from './ColorpickerAlphaSlider.vue'
 
-import Button from '../button/Button.vue'
-import Dropdown from '../dropdown/Dropdown.vue'
-import DropdownItem from '../dropdown/DropdownItem.vue'
-import Input from '../input/Input.vue'
-import Field from '../field/Field.vue'
-import Select from '../select/Select.vue'
-import Icon from '../icon/Icon.vue'
+type BDropdownInstance = InstanceType<typeof BDropdown>
 
-import ColorpickerHSLRepresentationTriangle from './ColorpickerHSLRepresentationTriangle.vue'
-import ColorpickerHSLRepresentationSquare from './ColorpickerHSLRepresentationSquare.vue'
-import ColorpickerAlphaSlider from './ColorpickerAlphaSlider.vue'
+// Interface of the `Colorpicker` component.
+// Gives a separate definition to avoid circular dependencies.
+// TODO: we have to learn about which properties are to be exposed to the
+// implementors of custom `ColorFormatter`, and `ColorParser`.
+/* eslint-disable @typescript-eslint/ban-types */
+export type IColorpicker = Omit<DefineComponent<
+    {}, // P(rops)
+    {}, // B (raw bindings)
+    {}, // D(ata)
+    {}, // C(omputed)
+    {} // M(ethods)
+>, '$emit'> // default E(mits) type parameter would causes a `$emit` discrepancy
+/* eslint-enable @typescript-eslint/ban-types */
 
-const defaultColorFormatter = (color, vm) => {
+export type ColorFormatter = (color: Color, vm?: IColorpicker) => string
+export type ColorParser = (color: string | Rgb, vm?: IColorpicker) => Color
+
+const defaultColorFormatter: ColorFormatter = (color) => {
     if (color.alpha < 1) {
         return color.toString('hexa')
     } else {
@@ -124,23 +145,21 @@ const defaultColorFormatter = (color, vm) => {
     }
 }
 
-const defaultColorParser = (color, vm) => {
+const defaultColorParser: ColorParser = (color) => {
     return Color.parse(color)
 }
 
-export default {
+export default defineComponent({
     name: 'BColorpicker',
     components: {
-        [ColorpickerHSLRepresentationTriangle.name]: ColorpickerHSLRepresentationTriangle,
-        [ColorpickerHSLRepresentationSquare.name]: ColorpickerHSLRepresentationSquare,
-        [ColorpickerAlphaSlider.name]: ColorpickerAlphaSlider,
-        [Input.name]: Input,
-        [Field.name]: Field,
-        [Select.name]: Select,
-        [Icon.name]: Icon,
-        [Button.name]: Button,
-        [Dropdown.name]: Dropdown,
-        [DropdownItem.name]: DropdownItem
+        BColorpickerHSLRepresentationTriangle,
+        BColorpickerHSLRepresentationSquare,
+        BColorpickerAlphaSlider,
+        BInput,
+        BField,
+        BButton,
+        BDropdown,
+        BDropdownItem
     },
     mixins: [FormElementMixin],
     inheritAttrs: false,
@@ -151,8 +170,8 @@ export default {
     },
     props: {
         modelValue: {
-            type: [String, Object],
-            validator(value) {
+            type: [String, Object] as PropType<string | Rgb>,
+            validator(value: string | Rgb) {
                 return typeof value === 'string' ||
                     (
                         typeof value === 'object' &&
@@ -169,7 +188,7 @@ export default {
         representation: {
             type: String,
             default: 'triangle',
-            value(value) {
+            value(value: string) {
                 return ['triangle', 'square'].some((r) => r === value)
             }
         },
@@ -180,8 +199,8 @@ export default {
             default: false
         },
         colorFormatter: {
-            type: Function,
-            default: (color, vm) => {
+            type: Function as PropType<ColorFormatter>,
+            default: (color: Color, vm?: IColorpicker) => {
                 if (typeof config.defaultColorFormatter === 'function') {
                     return config.defaultColorFormatter(color)
                 } else {
@@ -190,8 +209,8 @@ export default {
             }
         },
         colorParser: {
-            type: Function,
-            default: (color, vm) => {
+            type: Function as PropType<ColorParser>,
+            default: (color: string, vm?: IColorpicker) => {
                 if (typeof config.defaultColorParser === 'function') {
                     return config.defaultColorParser(color)
                 } else {
@@ -217,9 +236,16 @@ export default {
             type: Boolean,
             default: () => config.defaultTrapFocus
         },
+        openOnFocus: Boolean,
+        closeOnClick: Boolean,
         appendToBody: Boolean
     },
-    emits: ['active-change', 'update:modelValue'],
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        'active-change': (_active: boolean) => true,
+        'update:modelValue': (_value: Color) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
     data() {
         return {
             color: this.parseColor(this.modelValue)
@@ -227,7 +253,7 @@ export default {
     },
     computed: {
         computedValue: {
-            set(value) {
+            set(value: string | Rgb) {
                 this.color = this.parseColor(value)
             },
             get() {
@@ -286,19 +312,19 @@ export default {
         }
     },
     methods: {
-        parseColor(color) {
+        parseColor(color: string | Rgb | Color) {
             try {
                 return this.colorParser(color)
             } catch (e) {
                 return new Color()
             }
         },
-        updateColor(value) {
+        updateColor(value: Color) {
             value.alpha = this.computedValue.alpha
             this.computedValue = value
             this.$emit('update:modelValue', value)
         },
-        updateAlpha(alpha) {
+        updateAlpha(alpha: number) {
             this.computedValue.alpha = alpha
             this.$emit('update:modelValue', this.computedValue)
         },
@@ -308,22 +334,22 @@ export default {
         /*
          * Format color into string
          */
-        formatValue(value) {
+        formatValue(value: Color) { // FIXME: unused?
             return value ? this.colorFormatter(value, this) : null
         },
 
         /*
          * Toggle datepicker
          */
-        togglePicker(active) {
+        togglePicker(active: boolean) {
             if (this.$refs.dropdown) {
                 const isActive = typeof active === 'boolean'
                     ? active
-                    : !this.$refs.dropdown.isActive
+                    : !(this.$refs.dropdown as BDropdownInstance).isActive
                 if (isActive) {
-                    this.$refs.dropdown.isActive = isActive
+                    (this.$refs.dropdown as BDropdownInstance).isActive = isActive
                 } else if (this.closeOnClick) {
-                    this.$refs.dropdown.isActive = isActive
+                    (this.$refs.dropdown as BDropdownInstance).isActive = isActive
                 }
             }
         },
@@ -331,7 +357,7 @@ export default {
         /*
          * Call default onFocus method and show datepicker
          */
-        handleOnFocus(event) {
+        handleOnFocus(event: Event) {
             this.onFocus(event)
             if (this.openOnFocus) {
                 this.togglePicker(true)
@@ -341,6 +367,9 @@ export default {
         /*
          * Toggle dropdown
          */
+        // I decided to comment out the following unused method until we come
+        // back to deal with the `open-on-focus` and `close-on-click` props
+        /*
         toggle() {
             if (this.mobileNative && this.isMobile) {
                 const input = this.$refs.input.$refs.input
@@ -348,31 +377,32 @@ export default {
                 input.click()
                 return
             }
-            this.$refs.dropdown.toggle()
-        },
+            (this.$refs.dropdown as BDropdownInstance).toggle()
+        }, */
 
         /*
          * Avoid dropdown toggle when is already visible
          */
-        onInputClick(event) {
-            if (this.$refs.dropdown.isActive) {
+        onInputClick(event: Event) {
+            if ((this.$refs.dropdown as BDropdownInstance).isActive) {
                 event.stopPropagation()
             }
         },
 
-        /**
+        /*
          * Keypress event that is bound to the document.
          */
-        keyPress({ key }) {
-            if (this.$refs.dropdown && this.$refs.dropdown.isActive && (key === 'Escape' || key === 'Esc')) {
+        keyPress({ key }: KeyboardEvent) {
+            const dropdown = this.$refs.dropdown as BDropdownInstance
+            if (dropdown && dropdown.isActive && (key === 'Escape' || key === 'Esc')) {
                 this.togglePicker(false)
             }
         },
 
-        /**
+        /*
          * Emit 'blur' event on dropdown is not active (closed)
          */
-        onActiveChange(value) {
+        onActiveChange(value: boolean) {
             if (!value) {
                 this.onBlur()
             }
@@ -382,5 +412,5 @@ export default {
             this.$emit('active-change', value)
         }
     }
-}
+})
 </script>
diff --git a/packages/buefy-next/src/components/colorpicker/ColorpickerAlphaSlider.spec.js b/packages/buefy-next/src/components/colorpicker/ColorpickerAlphaSlider.spec.ts
similarity index 86%
rename from packages/buefy-next/src/components/colorpicker/ColorpickerAlphaSlider.spec.js
rename to packages/buefy-next/src/components/colorpicker/ColorpickerAlphaSlider.spec.ts
index 91b8746f2..c92ff18c0 100644
--- a/packages/buefy-next/src/components/colorpicker/ColorpickerAlphaSlider.spec.js
+++ b/packages/buefy-next/src/components/colorpicker/ColorpickerAlphaSlider.spec.ts
@@ -1,6 +1,7 @@
+import { describe, expect, it } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
 import Color from '@utils/color'
-import BColorpickerAlphaSlider from '@components/colorpicker/ColorpickerAlphaSlider'
+import BColorpickerAlphaSlider from '@components/colorpicker/ColorpickerAlphaSlider.vue'
 
 describe('BColorpickerAlphaSlider', () => {
     it('render correctly', () => {
diff --git a/packages/buefy-next/src/components/colorpicker/ColorpickerAlphaSlider.vue b/packages/buefy-next/src/components/colorpicker/ColorpickerAlphaSlider.vue
index c814f04df..4c115b616 100644
--- a/packages/buefy-next/src/components/colorpicker/ColorpickerAlphaSlider.vue
+++ b/packages/buefy-next/src/components/colorpicker/ColorpickerAlphaSlider.vue
@@ -25,23 +25,28 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import Color from '../../utils/color'
-import Tooltip from '../tooltip/Tooltip.vue'
+import BTooltip from '../tooltip/Tooltip.vue'
 
-export default {
+export default defineComponent({
     name: 'BColorpickerAlphaSlider',
     components: {
-        [Tooltip.name]: Tooltip
+        BTooltip
     },
     props: {
         value: {
             type: Number,
-            validator: (value) => value >= 0 && value < 256
+            validator: (value: number) => value >= 0 && value < 256
         },
         color: [String, Object]
     },
-    emits: ['input'],
+    emits: {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        input: (_value: number) => true
+    },
     data() {
         const color = Color.parse(this.color)
 
@@ -49,7 +54,7 @@ export default {
         return {
             startColor: color.toString('hex'),
             endColor: color.toString('hexa'),
-            percent: Math.round((1 - this.value / 255) * 100),
+            percent: Math.round((1 - this.value! / 255) * 100),
             captureMouse: false,
             clientOffset: {
                 cx: -1,
@@ -102,7 +107,7 @@ export default {
         decreaseAlpha(value = 0.01) {
             this.increaseAlpha(-value)
         },
-        alphaKeyPress(event) {
+        alphaKeyPress(event: KeyboardEvent) {
             let handled = false
             switch (event.key) {
                 case 'ArrowRight':
@@ -138,18 +143,18 @@ export default {
                 this.emitAlpha()
             }
         },
-        clickAlpha(event) {
+        clickAlpha(event: MouseEvent) {
             this.startMouseCapture(event)
             this.trackMouse(event)
-            this.stopMouseCapture(event)
-            this.$refs.alphaCursor.focus()
+            this.stopMouseCapture(event);
+            (this.$refs.alphaCursor as HTMLElement).focus()
         },
-        startMouseCapture(event) {
+        startMouseCapture(event: Event) {
             event.stopPropagation()
 
             this.captureMouse = true
         },
-        trackMouse(event) {
+        trackMouse(event: MouseEvent | TouchEvent) {
             if (this.captureMouse === false) {
                 return
             }
@@ -157,21 +162,22 @@ export default {
             event.stopPropagation()
 
             let [mouseX] = [0, 0]
-            if (typeof event.touches !== 'undefined' && event.touches.length) {
-                [mouseX] = [event.touches[0].clientX]
+            const touches = (event as TouchEvent).touches
+            if (typeof touches !== 'undefined' && touches.length) {
+                [mouseX] = [touches[0].clientX]
             } else {
-                [mouseX] = [event.clientX]
+                [mouseX] = [(event as MouseEvent).clientX]
             }
 
             const ratio = 0.5 + (this.clientOffset.cx - mouseX) / this.clientOffset.width
             this.percent = Math.round(100 - Math.max(0, Math.min(1, ratio)) * 100)
             this.emitAlpha()
         },
-        stopMouseCapture(event) {
+        stopMouseCapture(event: Event) {
             if (this.captureMouse !== false) {
                 event.preventDefault()
-                event.stopPropagation()
-                this.$refs.alphaCursor.focus()
+                event.stopPropagation();
+                (this.$refs.alphaCursor as HTMLElement).focus()
             }
             this.captureMouse = false
         },
@@ -191,5 +197,5 @@ export default {
         window.removeEventListener('mouseup', this.stopMouseCapture)
         window.removeEventListener('touchend', this.stopMouseCapture)
     }
-}
+})
 </script>
diff --git a/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationSquare.spec.js b/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationSquare.spec.ts
similarity index 79%
rename from packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationSquare.spec.js
rename to packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationSquare.spec.ts
index 8fe30ebbd..c33313f9b 100644
--- a/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationSquare.spec.js
+++ b/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationSquare.spec.ts
@@ -1,8 +1,9 @@
+import { beforeEach, describe, expect, it } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
 import Color from '@utils/color'
-import BColorpickerHSLRepresentationSquare from '@components/colorpicker/ColorpickerHSLRepresentationSquare'
+import BColorpickerHSLRepresentationSquare from '@components/colorpicker/ColorpickerHSLRepresentationSquare.vue'
 
-let defaultProps
+let defaultProps: () => { value: Color }
 
 describe('BColorpickerHSLRepresentationSquare', () => {
     beforeEach(() => {
diff --git a/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationSquare.vue b/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationSquare.vue
index ff9c92d99..fb5726a04 100644
--- a/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationSquare.vue
+++ b/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationSquare.vue
@@ -44,18 +44,25 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
 import Color from '../../utils/color'
-const precision = (strs, ...values) => {
-    const tmp = []
+import type { Hsl } from '../../utils/color'
+
+const precision = (strs: TemplateStringsArray, ...values: (number | string)[]) => {
+    const tmp: (number | string)[] = []
     strs.forEach((str, i) => {
         tmp.push(str)
 
-        if (values[i]) {
+        // FIXME: what if `values[i]` is zero?
+        const value = values[i]
+        if (value) {
             tmp.push(
-                Number.isNaN(values[i] / 1)
-                    ? values[i]
-                    : Math.round(values * 10) / 10
+                Number.isNaN(+value / 1)
+                    ? value
+                    : Math.round(+value * 10) / 10
             )
         }
     })
@@ -63,13 +70,13 @@ const precision = (strs, ...values) => {
     return tmp.join('')
 }
 
-export default {
+export default defineComponent({
     name: 'BColorpickerHSLRepresentationSquare',
     props: {
         value: {
-            type: Object,
+            type: Object as PropType<Hsl>,
             required: true,
-            validator(value) {
+            validator(value: Hsl) {
                 return typeof value.hue === 'number' &&
                     typeof value.saturation === 'number' &&
                     typeof value.lightness === 'number'
@@ -84,7 +91,10 @@ export default {
             default: 20
         }
     },
-    emits: ['input'],
+    emits: {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        input: (_value: Color) => true
+    },
     data() {
         return {
             hue: this.value.hue,
@@ -204,7 +214,7 @@ export default {
                 )
             )
         },
-        hueKeyPress(event) {
+        hueKeyPress(event: KeyboardEvent) {
             let handled = false
             switch (event.key) {
                 case 'ArrowRight':
@@ -240,7 +250,7 @@ export default {
                 this.emitColor()
             }
         },
-        slKeyPress(event) {
+        slKeyPress(event: KeyboardEvent) {
             let handled = false
             switch (event.key) {
                 case 'ArrowRight':
@@ -282,48 +292,49 @@ export default {
                 this.emitColor()
             }
         },
-        startMouseCapture(event) {
+        startMouseCapture(event: Event) {
             event.stopPropagation()
 
             this.captureMouse = true
-            if (event.target.closest('.colorpicker-square-slider-sl') !== null) {
+            if ((event.target as Element).closest('.colorpicker-square-slider-sl') !== null) {
                 this.captureType = 'sl'
             } else {
                 this.captureType = 'hue'
             }
         },
-        stopMouseCapture(event) {
+        stopMouseCapture(event: Event) {
             if (this.captureMouse !== false) {
                 event.preventDefault()
-                event.stopPropagation()
-                this.$refs[this.captureType === 'sl' ? 'slCursor' : 'hueCursor'].focus()
+                event.stopPropagation();
+                (this.$refs[this.captureType === 'sl' ? 'slCursor' : 'hueCursor'] as HTMLElement).focus()
             }
             this.captureMouse = false
         },
-        clickHue(event) {
+        clickHue(event: MouseEvent) {
             this.startMouseCapture(event)
             this.trackMouse(event)
-            this.stopMouseCapture(event)
-            this.$refs.hueCursor.focus()
+            this.stopMouseCapture(event);
+            (this.$refs.hueCursor as HTMLElement).focus()
         },
-        clickSL(event) {
+        clickSL(event: MouseEvent) {
             this.startMouseCapture(event)
             this.trackMouse(event)
-            this.stopMouseCapture(event)
-            this.$refs.slCursor.focus()
+            this.stopMouseCapture(event);
+            (this.$refs.slCursor as HTMLElement).focus()
         },
-        trackMouse(event) {
+        trackMouse(event: MouseEvent | TouchEvent) {
             if (this.captureMouse === false) {
                 return
             }
             event.preventDefault()
             event.stopPropagation()
 
+            const touches = (event as TouchEvent).touches
             let [mouseX, mouseY] = [0, 0]
-            if (typeof event.touches !== 'undefined' && event.touches.length) {
-                [mouseX, mouseY] = [event.touches[0].clientX, event.touches[0].clientY]
+            if (typeof touches !== 'undefined' && touches.length) {
+                [mouseX, mouseY] = [touches[0].clientX, touches[0].clientY]
             } else {
-                [mouseX, mouseY] = [event.clientX, event.clientY]
+                [mouseX, mouseY] = [(event as MouseEvent).clientX, (event as MouseEvent).clientY]
             }
             const angle = Math.atan2(
                 mouseY - this.clientOffset.cy,
@@ -365,5 +376,5 @@ export default {
 
         clearTimeout(this.debounce)
     }
-}
+})
 </script>
diff --git a/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationTriangle.spec.js b/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationTriangle.spec.ts
similarity index 79%
rename from packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationTriangle.spec.js
rename to packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationTriangle.spec.ts
index 3f6bf7d05..e54dc972d 100644
--- a/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationTriangle.spec.js
+++ b/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationTriangle.spec.ts
@@ -1,8 +1,9 @@
+import { beforeEach, describe, expect, it } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
 import Color from '@utils/color'
-import BColorpickerHSLRepresentationTriangle from '@components/colorpicker/ColorpickerHSLRepresentationTriangle'
+import BColorpickerHSLRepresentationTriangle from '@components/colorpicker/ColorpickerHSLRepresentationTriangle.vue'
 
-let defaultProps
+let defaultProps: () => { value: Color }
 
 describe('BColorpickerHSLRepresentationTriangle', () => {
     beforeEach(() => {
diff --git a/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationTriangle.vue b/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationTriangle.vue
index 7e7b0439d..5897ffbe6 100644
--- a/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationTriangle.vue
+++ b/packages/buefy-next/src/components/colorpicker/ColorpickerHSLRepresentationTriangle.vue
@@ -115,20 +115,25 @@
     </svg>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
 import Color from '../../utils/color'
+import type { Hsl } from '../../utils/color'
+
 const cos30 = 0.86602540378
 const sin30 = 0.5
 
 let id = 0
 
-export default {
+export default defineComponent({
     name: 'BColorpickerHSLRepresentationTriangle',
     props: {
         value: {
-            type: Object,
+            type: Object as PropType<Hsl>,
             required: true,
-            validator(value) {
+            validator(value: Hsl) {
                 return typeof value.hue === 'number' &&
                     typeof value.saturation === 'number' &&
                     typeof value.lightness === 'number'
@@ -143,7 +148,10 @@ export default {
             default: 20
         }
     },
-    emits: ['input'],
+    emits: {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        input: (_value: Color) => true
+    },
     data() {
         return {
             id: id++,
@@ -266,7 +274,7 @@ export default {
                 )
             )
         },
-        hueKeyPress(event) {
+        hueKeyPress(event: KeyboardEvent) {
             let handled = false
             switch (event.key) {
                 case 'ArrowRight':
@@ -302,7 +310,7 @@ export default {
                 this.emitColor()
             }
         },
-        slKeyPress(event) {
+        slKeyPress(event: KeyboardEvent) {
             let handled = false
             switch (event.key) {
                 case 'ArrowRight':
@@ -344,30 +352,31 @@ export default {
                 this.emitColor()
             }
         },
-        clickHue(event) {
+        clickHue(event: MouseEvent) {
             this.startMouseCapture(event)
             this.trackMouse(event)
-            this.stopMouseCapture(event)
-            this.$refs.hueCursor.focus()
+            this.stopMouseCapture(event);
+            (this.$refs.hueCursor as HTMLElement).focus()
         },
-        clickSL(event) {
+        clickSL(event: MouseEvent) {
             this.startMouseCapture(event)
             this.trackMouse(event)
-            this.stopMouseCapture(event)
-            this.$refs.slCursor.focus()
+            this.stopMouseCapture(event);
+            (this.$refs.slCursor as HTMLElement).focus()
         },
-        trackMouse(event) {
+        trackMouse(event: MouseEvent | TouchEvent) {
             if (this.captureMouse === false) {
                 return
             }
             event.preventDefault()
             event.stopPropagation()
 
+            const touches = (event as TouchEvent).touches
             let [mouseX, mouseY] = [0, 0]
-            if (typeof event.touches !== 'undefined' && event.touches.length) {
-                [mouseX, mouseY] = [event.touches[0].clientX, event.touches[0].clientY]
+            if (typeof touches !== 'undefined' && touches.length) {
+                [mouseX, mouseY] = [touches[0].clientX, touches[0].clientY]
             } else {
-                [mouseX, mouseY] = [event.clientX, event.clientY]
+                [mouseX, mouseY] = [(event as MouseEvent).clientX, (event as MouseEvent).clientY]
             }
             const angle = Math.atan2(
                 mouseY - this.clientOffset.cy,
@@ -405,21 +414,21 @@ export default {
             }
             this.emitColor()
         },
-        startMouseCapture(event) {
+        startMouseCapture(event: Event) {
             event.stopPropagation()
 
             this.captureMouse = true
-            if (event.target.closest('.colorpicker-triangle-slider-sl') !== null) {
+            if ((event.target as HTMLElement).closest('.colorpicker-triangle-slider-sl') !== null) {
                 this.captureType = 'sl'
             } else {
                 this.captureType = 'hue'
             }
         },
-        stopMouseCapture(event) {
+        stopMouseCapture(event: Event) {
             if (this.captureMouse !== false) {
                 event.preventDefault()
-                event.stopPropagation()
-                this.$refs[this.captureType === 'sl' ? 'slCursor' : 'hueCursor'].focus()
+                event.stopPropagation();
+                (this.$refs[this.captureType === 'sl' ? 'slCursor' : 'hueCursor'] as HTMLElement).focus()
             }
             this.captureMouse = false
         },
@@ -443,5 +452,5 @@ export default {
 
         clearTimeout(this.debounce)
     }
-}
+})
 </script>
diff --git a/packages/buefy-next/src/components/colorpicker/__snapshots__/Colorpicker.spec.js.snap b/packages/buefy-next/src/components/colorpicker/__snapshots__/Colorpicker.spec.js.snap
deleted file mode 100644
index 3d9c806bb..000000000
--- a/packages/buefy-next/src/components/colorpicker/__snapshots__/Colorpicker.spec.js.snap
+++ /dev/null
@@ -1,77 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BColorpicker render correctly 1`] = `
-<div class="colorpicker control">
-  <div class="dropdown dropdown-menu-animation is-mobile-modal">
-    <div tabindex="0" class="dropdown-trigger" aria-haspopup="true"><button class="button" style="background-color: rgb(255, 255, 255); background-size: 100% 100%, 16px 16px, 16px 16px; color: rgb(255, 255, 255); text-shadow: 0 0 2px #000000AA;" type="button">
-        <!--v-if--><span><span class="color-name">#00000000</span></span>
-        <!--v-if-->
-      </button></div>
-    <transition-stub name="fade" appear="false" persisted="false" css="true">
-      <div class="background" aria-hidden="true" style="display: none;"></div>
-    </transition-stub>
-    <transition-stub name="fade" appear="false" persisted="true" css="true">
-      <div class="dropdown-menu" aria-hidden="true" style="display: none;">
-        <div class="dropdown-content" role="dialog" aria-modal="true">
-          <div class="dropdown-item" tabindex="0">
-            <div>
-              <header class="colorpicker-header">
-                <!--v-if-->
-              </header>
-              <div class="colorpicker-content">
-                <b-colorpicker-h-s-l-representation-triangle-stub size="200" thickness="20" value="#000000"></b-colorpicker-h-s-l-representation-triangle-stub>
-              </div>
-            </div>
-            <footer class="colorpicker-footer">
-              <!--v-if-->
-              <div class="field colorpicker-fields">
-                <!--v-if-->
-                <div class="field-body">
-                  <div class="field is-grouped">
-                    <!--v-if-->
-                    <div class="field is-horizontal">
-                      <div class="field-label"><label class="label">R</label></div>
-                      <div class="field-body">
-                        <div class="field">
-                          <!--v-if-->
-                          <b-input-stub modelvalue="0" type="number" lazy="false" passwordreveal="false" iconclickable="false" hascounter="true" customclass="" iconrightclickable="false" modelmodifiers="[object Object]" size="is-small" aria-label="Red"></b-input-stub>
-                          <!--v-if-->
-                        </div>
-                      </div>
-                      <!--v-if-->
-                    </div>
-                    <div class="field is-horizontal">
-                      <div class="field-label"><label class="label">G</label></div>
-                      <div class="field-body">
-                        <div class="field">
-                          <!--v-if-->
-                          <b-input-stub modelvalue="0" type="number" lazy="false" passwordreveal="false" iconclickable="false" hascounter="true" customclass="" iconrightclickable="false" modelmodifiers="[object Object]" size="is-small" aria-label="Green"></b-input-stub>
-                          <!--v-if-->
-                        </div>
-                      </div>
-                      <!--v-if-->
-                    </div>
-                    <div class="field is-horizontal">
-                      <div class="field-label"><label class="label">B</label></div>
-                      <div class="field-body">
-                        <div class="field">
-                          <!--v-if-->
-                          <b-input-stub modelvalue="0" type="number" lazy="false" passwordreveal="false" iconclickable="false" hascounter="true" customclass="" iconrightclickable="false" modelmodifiers="[object Object]" size="is-small" aria-label="Blue"></b-input-stub>
-                          <!--v-if-->
-                        </div>
-                      </div>
-                      <!--v-if-->
-                    </div>
-                    <!--v-if-->
-                  </div>
-                </div>
-                <!--v-if-->
-              </div>
-            </footer>
-          </div>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-</div>
-`;
diff --git a/packages/buefy-next/src/components/colorpicker/__snapshots__/Colorpicker.spec.ts.snap b/packages/buefy-next/src/components/colorpicker/__snapshots__/Colorpicker.spec.ts.snap
new file mode 100644
index 000000000..3e8d5f517
--- /dev/null
+++ b/packages/buefy-next/src/components/colorpicker/__snapshots__/Colorpicker.spec.ts.snap
@@ -0,0 +1,77 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BColorpicker > render correctly 1`] = `
+"<div class=\\"colorpicker control\\">
+  <div class=\\"dropdown dropdown-menu-animation is-mobile-modal\\">
+    <div tabindex=\\"0\\" class=\\"dropdown-trigger\\" aria-haspopup=\\"true\\"><button class=\\"button\\" style=\\"background-color: rgb(255, 255, 255); background-size: 100% 100%, 16px 16px, 16px 16px; color: rgb(255, 255, 255); text-shadow: 0 0 2px #000000AA;\\" type=\\"button\\">
+        <!--v-if--><span><span class=\\"color-name\\">#00000000</span></span>
+        <!--v-if-->
+      </button></div>
+    <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+      <div class=\\"background\\" aria-hidden=\\"true\\" style=\\"display: none;\\"></div>
+    </transition-stub>
+    <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
+      <div class=\\"dropdown-menu\\" aria-hidden=\\"true\\" style=\\"display: none;\\">
+        <div class=\\"dropdown-content\\" role=\\"dialog\\" aria-modal=\\"true\\">
+          <div class=\\"dropdown-item\\" tabindex=\\"0\\">
+            <div>
+              <header class=\\"colorpicker-header\\">
+                <!--v-if-->
+              </header>
+              <div class=\\"colorpicker-content\\">
+                <b-colorpicker-h-s-l-representation-triangle-stub size=\\"200\\" thickness=\\"20\\" value=\\"#000000\\"></b-colorpicker-h-s-l-representation-triangle-stub>
+              </div>
+            </div>
+            <footer class=\\"colorpicker-footer\\">
+              <!--v-if-->
+              <div class=\\"field colorpicker-fields\\">
+                <!--v-if-->
+                <div class=\\"field-body\\">
+                  <div class=\\"field is-grouped\\">
+                    <!--v-if-->
+                    <div class=\\"field is-horizontal\\">
+                      <div class=\\"field-label\\"><label class=\\"label\\">R</label></div>
+                      <div class=\\"field-body\\">
+                        <div class=\\"field\\">
+                          <!--v-if-->
+                          <b-input-stub modelvalue=\\"0\\" type=\\"number\\" lazy=\\"false\\" passwordreveal=\\"false\\" iconclickable=\\"false\\" hascounter=\\"true\\" customclass=\\"\\" iconrightclickable=\\"false\\" modelmodifiers=\\"[object Object]\\" size=\\"is-small\\" aria-label=\\"Red\\"></b-input-stub>
+                          <!--v-if-->
+                        </div>
+                      </div>
+                      <!--v-if-->
+                    </div>
+                    <div class=\\"field is-horizontal\\">
+                      <div class=\\"field-label\\"><label class=\\"label\\">G</label></div>
+                      <div class=\\"field-body\\">
+                        <div class=\\"field\\">
+                          <!--v-if-->
+                          <b-input-stub modelvalue=\\"0\\" type=\\"number\\" lazy=\\"false\\" passwordreveal=\\"false\\" iconclickable=\\"false\\" hascounter=\\"true\\" customclass=\\"\\" iconrightclickable=\\"false\\" modelmodifiers=\\"[object Object]\\" size=\\"is-small\\" aria-label=\\"Green\\"></b-input-stub>
+                          <!--v-if-->
+                        </div>
+                      </div>
+                      <!--v-if-->
+                    </div>
+                    <div class=\\"field is-horizontal\\">
+                      <div class=\\"field-label\\"><label class=\\"label\\">B</label></div>
+                      <div class=\\"field-body\\">
+                        <div class=\\"field\\">
+                          <!--v-if-->
+                          <b-input-stub modelvalue=\\"0\\" type=\\"number\\" lazy=\\"false\\" passwordreveal=\\"false\\" iconclickable=\\"false\\" hascounter=\\"true\\" customclass=\\"\\" iconrightclickable=\\"false\\" modelmodifiers=\\"[object Object]\\" size=\\"is-small\\" aria-label=\\"Blue\\"></b-input-stub>
+                          <!--v-if-->
+                        </div>
+                      </div>
+                      <!--v-if-->
+                    </div>
+                    <!--v-if-->
+                  </div>
+                </div>
+                <!--v-if-->
+              </div>
+            </footer>
+          </div>
+        </div>
+      </div>
+    </transition-stub>
+  </div>
+</div>"
+`;
diff --git a/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerAlphaSlider.spec.js.snap b/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerAlphaSlider.spec.js.snap
deleted file mode 100644
index 808c06c06..000000000
--- a/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerAlphaSlider.spec.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BColorpickerAlphaSlider render correctly 1`] = `
-<div class="b-colorpicker-alpha-slider" style="background-size: 100% 100%, 1em 1em, 1em 1em;">
-  <div role="slider" class="alpha-range-thumb" tabindex="0" aria-label="Tranparency" aria-valuemin="0" aria-valuenow="61" aria-valuemax="100" style="left: 61%;">
-    <b-tooltip-stub label="61%" active="true" type="is-primary" position="is-top" triggers="hover" always="false" square="false" dashed="false" multilined="false" size="is-medium" appendtobody="false" animated="true" animation="fade" autoclose="true"></b-tooltip-stub>
-  </div>
-</div>
-`;
diff --git a/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerAlphaSlider.spec.ts.snap b/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerAlphaSlider.spec.ts.snap
new file mode 100644
index 000000000..647ee5227
--- /dev/null
+++ b/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerAlphaSlider.spec.ts.snap
@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BColorpickerAlphaSlider > render correctly 1`] = `
+"<div class=\\"b-colorpicker-alpha-slider\\" style=\\"background-size: 100% 100%, 1em 1em, 1em 1em;\\">
+  <div role=\\"slider\\" class=\\"alpha-range-thumb\\" tabindex=\\"0\\" aria-label=\\"Tranparency\\" aria-valuemin=\\"0\\" aria-valuenow=\\"61\\" aria-valuemax=\\"100\\" style=\\"left: 61%;\\">
+    <b-tooltip-stub label=\\"61%\\" active=\\"true\\" type=\\"is-primary\\" position=\\"is-top\\" triggers=\\"hover\\" always=\\"false\\" square=\\"false\\" dashed=\\"false\\" multilined=\\"false\\" size=\\"is-medium\\" appendtobody=\\"false\\" animated=\\"true\\" animation=\\"fade\\" autoclose=\\"true\\"></b-tooltip-stub>
+  </div>
+</div>"
+`;
diff --git a/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationSquare.spec.js.snap b/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationSquare.spec.js.snap
deleted file mode 100644
index 146c82bc4..000000000
--- a/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationSquare.spec.js.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BColorpickerHSLRepresentationSquare render correctly 1`] = `
-<div class="b-colorpicker-square" style="width: 200px;">
-  <div class="colorpicker-square-slider-hue">
-    <div role="slider" class="hue-range-thumb" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuemax="359" style="left: 36.4px; top: 190px; width: 18px;"></div>
-  </div>
-  <div class="colorpicker-square-slider-sl" style="margin: 20px;" aria-datascales="lightness, saturation">
-    <div role="slider" class="sl-range-thumb" tabindex="0" aria-datavalues="67%, 20%" style="left: 67%; top: 80%;"></div>
-  </div>
-</div>
-`;
diff --git a/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationSquare.spec.ts.snap b/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationSquare.spec.ts.snap
new file mode 100644
index 000000000..e1a8861b5
--- /dev/null
+++ b/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationSquare.spec.ts.snap
@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BColorpickerHSLRepresentationSquare > render correctly 1`] = `
+"<div class=\\"b-colorpicker-square\\" style=\\"width: 200px;\\">
+  <div class=\\"colorpicker-square-slider-hue\\">
+    <div role=\\"slider\\" class=\\"hue-range-thumb\\" tabindex=\\"0\\" aria-label=\\"Hue\\" aria-valuemin=\\"0\\" aria-valuemax=\\"359\\" style=\\"left: 36.4px; top: 190px; width: 18px;\\"></div>
+  </div>
+  <div class=\\"colorpicker-square-slider-sl\\" style=\\"margin: 20px;\\" aria-datascales=\\"lightness, saturation\\">
+    <div role=\\"slider\\" class=\\"sl-range-thumb\\" tabindex=\\"0\\" aria-datavalues=\\"67%, 20%\\" style=\\"left: 67%; top: 80%;\\"></div>
+  </div>
+</div>"
+`;
diff --git a/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationTriangle.spec.js.snap b/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationTriangle.spec.js.snap
deleted file mode 100644
index 510663aa0..000000000
--- a/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationTriangle.spec.js.snap
+++ /dev/null
@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BColorpickerHSLRepresentationTriangle render correctly 1`] = `
-<svg viewBox="0 0 200 200" class="b-colorpicker-triangle">
-  <defs>
-    <linearGradient id="cp-triangle-gradient-ligthness-0" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="0%" stop-color="#fff"></stop>
-      <stop offset="100%" stop-color="#000"></stop>
-    </linearGradient>
-    <linearGradient id="cp-triangle-gradient-saturation-0" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="hsl(210deg, 100%, 50%)" stop-opacity="1"></stop>
-      <stop offset="100%" stop-color="hsl(210deg, 100%, 50%)" stop-opacity="0"></stop>
-    </linearGradient>
-    <clipPath id="cp-triangle-clip-0">
-      <path d="M2 100a98  98  0 1 1 196 0h-20a-78  78  0 1 0 -156 0a78  78  0 1 0 156 0h20a98  98  0 1 1 -196 0z"></path>
-    </clipPath>
-  </defs>
-  <g class="colorpicker-triangle-slider-hue">
-    <foreignObject x="0" y="0" width="200" height="200" clip-path="url(#cp-triangle-clip-0)">
-      <div class="colorpicker-triangle-hue"></div>
-    </foreignObject>
-    <g style="transform: rotate(210deg);">
-      <foreignObject x="96" y="0" width="8" height="24">
-        <div class="hue-range-thumb" style="" role="slider" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuenow="210" aria-valuemax="360"></div>
-      </foreignObject>
-    </g>
-  </g>
-  <g class="colorpicker-triangle-slider-sl" style="transform: rotate(210deg) translate(50%, 50%);" role="graphics-datagroup" aria-datascales="lightness, saturation">
-    <path d="M0 -78L67.54998149484 39H-67.54998149484z" fill="url(#cp-triangle-gradient-ligthness-0)"></path>
-    <path d="M0 -78L67.54998149484 39H-67.54998149484z" fill="url(#cp-triangle-gradient-saturation-0)" style="mix-blend-mode: overlay;"></path>
-    <foreignObject x="34.010373654636" y="-44.885000000000005" width="12" height="12">
-      <div class="sl-range-thumb" tabindex="0" aria-datavalues="67%, 20%"></div>
-    </foreignObject>
-  </g>
-</svg>
-`;
diff --git a/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationTriangle.spec.ts.snap b/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationTriangle.spec.ts.snap
new file mode 100644
index 000000000..8adc1b24e
--- /dev/null
+++ b/packages/buefy-next/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationTriangle.spec.ts.snap
@@ -0,0 +1,36 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BColorpickerHSLRepresentationTriangle > render correctly 1`] = `
+"<svg viewBox=\\"0 0 200 200\\" class=\\"b-colorpicker-triangle\\">
+  <defs>
+    <linearGradient id=\\"cp-triangle-gradient-ligthness-0\\" x1=\\"0\\" y1=\\"0\\" x2=\\"1\\" y2=\\"0\\">
+      <stop offset=\\"0%\\" stop-color=\\"#fff\\"></stop>
+      <stop offset=\\"100%\\" stop-color=\\"#000\\"></stop>
+    </linearGradient>
+    <linearGradient id=\\"cp-triangle-gradient-saturation-0\\" x1=\\"0\\" y1=\\"0\\" x2=\\"0\\" y2=\\"1\\">
+      <stop offset=\\"0%\\" stop-color=\\"hsl(210deg, 100%, 50%)\\" stop-opacity=\\"1\\"></stop>
+      <stop offset=\\"100%\\" stop-color=\\"hsl(210deg, 100%, 50%)\\" stop-opacity=\\"0\\"></stop>
+    </linearGradient>
+    <clipPath id=\\"cp-triangle-clip-0\\">
+      <path d=\\"M2 100a98  98  0 1 1 196 0h-20a-78  78  0 1 0 -156 0a78  78  0 1 0 156 0h20a98  98  0 1 1 -196 0z\\"></path>
+    </clipPath>
+  </defs>
+  <g class=\\"colorpicker-triangle-slider-hue\\">
+    <foreignObject x=\\"0\\" y=\\"0\\" width=\\"200\\" height=\\"200\\" clip-path=\\"url(#cp-triangle-clip-0)\\">
+      <div class=\\"colorpicker-triangle-hue\\"></div>
+    </foreignObject>
+    <g style=\\"transform: rotate(210deg);\\">
+      <foreignObject x=\\"96\\" y=\\"0\\" width=\\"8\\" height=\\"24\\">
+        <div class=\\"hue-range-thumb\\" style=\\"\\" role=\\"slider\\" tabindex=\\"0\\" aria-label=\\"Hue\\" aria-valuemin=\\"0\\" aria-valuenow=\\"210\\" aria-valuemax=\\"360\\"></div>
+      </foreignObject>
+    </g>
+  </g>
+  <g class=\\"colorpicker-triangle-slider-sl\\" style=\\"transform: rotate(210deg) translate(50%, 50%);\\" role=\\"graphics-datagroup\\" aria-datascales=\\"lightness, saturation\\">
+    <path d=\\"M0 -78L67.54998149484 39H-67.54998149484z\\" fill=\\"url(#cp-triangle-gradient-ligthness-0)\\"></path>
+    <path d=\\"M0 -78L67.54998149484 39H-67.54998149484z\\" fill=\\"url(#cp-triangle-gradient-saturation-0)\\" style=\\"mix-blend-mode: overlay;\\"></path>
+    <foreignObject x=\\"34.010373654636\\" y=\\"-44.885000000000005\\" width=\\"12\\" height=\\"12\\">
+      <div class=\\"sl-range-thumb\\" tabindex=\\"0\\" aria-datavalues=\\"67%, 20%\\"></div>
+    </foreignObject>
+  </g>
+</svg>"
+`;
diff --git a/packages/buefy-next/src/components/colorpicker/index.js b/packages/buefy-next/src/components/colorpicker/index.ts
similarity index 81%
rename from packages/buefy-next/src/components/colorpicker/index.js
rename to packages/buefy-next/src/components/colorpicker/index.ts
index be4f79ab2..9ce155936 100644
--- a/packages/buefy-next/src/components/colorpicker/index.js
+++ b/packages/buefy-next/src/components/colorpicker/index.ts
@@ -1,9 +1,10 @@
+import type { App } from 'vue'
 import Colorpicker from './Colorpicker.vue'
 
 import { registerComponent } from '../../utils/plugins'
 
 const Plugin = {
-    install(Vue) {
+    install(Vue: App) {
         registerComponent(Vue, Colorpicker)
     }
 }
diff --git a/packages/buefy-next/src/utils/color.spec.js b/packages/buefy-next/src/utils/color.spec.ts
similarity index 97%
rename from packages/buefy-next/src/utils/color.spec.js
rename to packages/buefy-next/src/utils/color.spec.ts
index ecc086de4..effe819fc 100644
--- a/packages/buefy-next/src/utils/color.spec.js
+++ b/packages/buefy-next/src/utils/color.spec.ts
@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest'
 import Color from '@utils/color'
 
 describe('Color', () => {
diff --git a/packages/buefy-next/src/utils/color.js b/packages/buefy-next/src/utils/color.ts
similarity index 76%
rename from packages/buefy-next/src/utils/color.js
rename to packages/buefy-next/src/utils/color.ts
index 10ad313bd..7d8def072 100644
--- a/packages/buefy-next/src/utils/color.js
+++ b/packages/buefy-next/src/utils/color.ts
@@ -1,4 +1,21 @@
-export const colorChannels = ['red', 'green', 'blue', 'alpha']
+export const colorChannels = ['red', 'green', 'blue', 'alpha'] as const
+export type ColorChannel = typeof colorChannels[number]
+
+export type Rgba = {
+    [C in ColorChannel]: number
+}
+export type Rgb = Omit<Rgba, 'alpha'>
+
+export const hslChannels = ['hue', 'saturation', 'lightness'] as const
+export type HslChannel = typeof hslChannels[number]
+export type CapitalizedHslChannel = Capitalize<HslChannel>
+
+export type Hsla = {
+    [C in HslChannel]: number
+}
+export type Hsl = Omit<Hsla, 'alpha'>
+
+type ChannelTuple = [number, number, number, number]
 
 export const colorsNammed = {
     transparent: '#00000000',
@@ -150,7 +167,9 @@ export const colorsNammed = {
     whitesmoke: '#f5f5f5',
     yellowgreen: '#9acd32',
     rebeccapurple: '#663399'
-}
+} as const
+
+export type ColorName = keyof typeof colorsNammed
 
 export class ColorTypeError extends Error {
     constructor() {
@@ -159,46 +178,91 @@ export class ColorTypeError extends Error {
 }
 
 class Color {
-    constructor(...args) {
+    // @ts-expect-error - TypeScript failed to inter the initialization of this property
+    $channels: Uint8Array
+
+    // Since getters and setters for the color channels, e.g., "alpha", are
+    // dynamically defined with `Object.defineProperty` in the constructor, we
+    // cannot write property declarations inside the class body. Instead, we
+    // augment the `Color` class with an ambient module declared in `color.ts`.
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(...args: any[]) {
         if (args.length > 0) {
             return Color.parse(...args)
         }
 
         this.$channels = new Uint8Array(colorChannels.length)
-        colorChannels.forEach((channel, index) => {
-            Object.defineProperty(
-                this,
-                channel,
-                {
-                    get: () => this.$channels[index],
-                    set: (byte) => {
-                        if (!Number.isNaN(byte / 1)) {
-                            this.$channels[index] = Math.min(255, Math.max(0, byte))
-                        }
-                    },
-                    enumerable: true,
-                    configurable: true
-                }
-            )
-        })
-        // Required for observability
-        ;['hue', 'saturation', 'lightness'].forEach((name) => {
-            const capitalizedName = name.replace(/^./, (m) => m.toUpperCase())
-            Object.defineProperty(
-                this,
-                name,
-                {
-                    get: () => this[`get${capitalizedName}`](),
-                    set: (value) => {
-                        if (!Number.isNaN(value / 1)) {
-                            this[`set${capitalizedName}`](value)
-                        }
-                    },
-                    enumerable: true,
-                    configurable: true
-                }
-            )
-        })
+    }
+
+    get red(): number {
+        return this.$channels[0]
+    }
+
+    set red(byte: number) {
+        if (!Number.isNaN(byte / 1)) {
+            this.$channels[0] = Math.min(255, Math.max(0, byte))
+        }
+    }
+
+    get green(): number {
+        return this.$channels[1]
+    }
+
+    set green(byte: number) {
+        if (!Number.isNaN(byte / 1)) {
+            this.$channels[1] = Math.min(255, Math.max(0, byte))
+        }
+    }
+
+    get blue(): number {
+        return this.$channels[2]
+    }
+
+    set blue(byte: number) {
+        if (!Number.isNaN(byte / 1)) {
+            this.$channels[2] = Math.min(255, Math.max(0, byte))
+        }
+    }
+
+    get alpha(): number {
+        return this.$channels[3]
+    }
+
+    set alpha(byte: number) {
+        if (!Number.isNaN(byte / 1)) {
+            this.$channels[3] = Math.min(255, Math.max(0, byte))
+        }
+    }
+
+    get hue(): number {
+        return this.getHue()
+    }
+
+    set hue(value: number) {
+        if (!Number.isNaN(value / 1)) {
+            this.setHue(value)
+        }
+    }
+
+    get saturation(): number {
+        return this.getSaturation()
+    }
+
+    set saturation(value: number) {
+        if (!Number.isNaN(value / 1)) {
+            this.setSaturation(value)
+        }
+    }
+
+    get lightness(): number {
+        return this.getLightness()
+    }
+
+    set lightness(value: number) {
+        if (!Number.isNaN(value / 1)) {
+            this.setLightness(value)
+        }
     }
 
     getHue() {
@@ -225,7 +289,7 @@ class Color {
         return Math.round(hue % 360)
     }
 
-    setHue(value) {
+    setHue(value: number) {
         const color = Color.fromHSL(value, this.saturation, this.lightness, this.alpha / 255)
         for (let i = 0; i < this.$channels.length; i++) {
             this.$channels[i] = Number(color.$channels[i])
@@ -242,7 +306,7 @@ class Color {
             : 0
     }
 
-    setSaturation(value) {
+    setSaturation(value: number) {
         const color = Color.fromHSL(this.hue, value, this.lightness, this.alpha / 255)
         colorChannels.forEach((_, i) => (this.$channels[i] = color.$channels[i]))
     }
@@ -254,7 +318,7 @@ class Color {
         return Math.round((max + min) / 2 * 100) / 100
     }
 
-    setLightness(value) {
+    setLightness(value: number) {
         const color = Color.fromHSL(this.hue, this.lightness, value, this.alpha / 255)
         colorChannels.forEach((_, i) => (this.$channels[i] = color.$channels[i]))
     }
@@ -289,11 +353,12 @@ class Color {
         }
     }
 
-    get [Symbol.toString]() {
+    get [Symbol.toStringTag]() {
         return this.toString('hex')
     }
 
-    static parse(...args) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static parse(...args: any[]): Color {
         if (typeof args[0] === 'object') {
             return Color.parseObject(args[0])
         } else if (args.every((arg) => !Number.isNaN(arg / 1))) {
@@ -314,8 +379,8 @@ class Color {
         } else if (typeof args[0] === 'string') {
             let match = null
 
-            if (typeof colorsNammed[args[0].toLowerCase()] === 'string') {
-                return Color.parseHex(colorsNammed[args[0].toLowerCase()])
+            if (typeof colorsNammed[args[0].toLowerCase() as ColorName] === 'string') {
+                return Color.parseHex(colorsNammed[args[0].toLowerCase() as ColorName])
             } else if ((match = args[0].match(/^(#|&h|0x)?(([a-f0-9]{3,4}){1,2})$/i)) !== null) {
                 return Color.parseHex(match[2])
             } else if ((match = args[0].match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(\s*,\s*(\d*\.?\d+))?\s*\)$/i)) !== null) {
@@ -328,7 +393,7 @@ class Color {
                         : 1
                 ]
 
-                return Color.fromRGB(...channels.map((value) => Number(value)))
+                return Color.fromRGB(...(channels.map((value) => Number(value)) as ChannelTuple))
             } else if ((args[0].match(/^(h(sl|wb)a?|lab|color|cmyk)\(/i))) {
                 throw new Error('Color expression not implemented yet')
             }
@@ -337,7 +402,7 @@ class Color {
         throw new Error('Invalid color expression')
     }
 
-    static parseObject(object) {
+    static parseObject(object: unknown) {
         const color = new Color()
 
         if (object === null || typeof object !== 'object') {
@@ -348,15 +413,15 @@ class Color {
         }
 
         colorChannels.forEach((channel) => {
-            if (!Number.isNaN(object[channel])) {
-                color[channel] = object[channel]
+            if (!Number.isNaN((object as Rgba)[channel])) {
+                color[channel] = (object as Rgba)[channel]
             }
         })
 
         return color
     }
 
-    static parseHex(hex) {
+    static parseHex(hex: string) {
         if (typeof hex !== 'string') {
             throw new Error('Hex expression must be a string')
         }
@@ -378,10 +443,10 @@ class Color {
         if (typeof chans[3] === 'number') {
             chans[3] /= 255
         }
-        return Color.fromRGB(...chans)
+        return Color.fromRGB(...(chans as ChannelTuple))
     }
 
-    static parseIndex(value, channels = 3) {
+    static parseIndex(value: number, channels: number = 3) {
         const color = new Color()
 
         for (let i = 0; i < 4; i++) {
@@ -391,7 +456,7 @@ class Color {
         return color
     }
 
-    static fromRGB(red, green, blue, alpha = 1) {
+    static fromRGB(red: number, green: number, blue: number, alpha: number = 1) {
         if ([red, green, blue, alpha].some((arg) => Number.isNaN(arg / 1))) {
             throw new Error('Invalid arguments')
         }
@@ -405,7 +470,7 @@ class Color {
         return color
     }
 
-    static fromHSL(hue, saturation, lightness, alpha = 1) {
+    static fromHSL(hue: number, saturation: number, lightness: number, alpha: number = 1) {
         if ([hue, saturation, lightness, alpha].some((arg) => Number.isNaN(arg))) {
             throw new Error('Invalid arguments')
         }
@@ -434,7 +499,7 @@ class Color {
         return Color.fromRGB((r + m) * 255, (g + m) * 255, (b + m) * 255, alpha)
     }
 
-    static isColor(arg) {
+    static isColor(arg: unknown): arg is Color {
         return arg instanceof Color
     }
 }
diff --git a/packages/docs/src/pages/components/colorpicker/Colorpicker.vue b/packages/docs/src/pages/components/colorpicker/Colorpicker.vue
index 757e00192..fd9476d97 100644
--- a/packages/docs/src/pages/components/colorpicker/Colorpicker.vue
+++ b/packages/docs/src/pages/components/colorpicker/Colorpicker.vue
@@ -15,27 +15,38 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+    import { defineComponent } from 'vue'
+
+    import { shallowFields } from '@/utils'
+    import ApiView from '@/components/ApiView.vue'
+    import Example from '@/components/Example.vue'
+    import VariablesView from '@/components/VariablesView.vue'
+
     import api from './api/colorpicker'
     import variables from './variables/colorpicker'
-    import { shallowFields } from '@/utils'
 
-    import ExSimple from './examples/ExSimple'
+    import ExSimple from './examples/ExSimple.vue'
     import ExSimpleCode from './examples/ExSimple.vue?raw'
 
-    import ExAlpha from './examples/ExAlpha'
+    import ExAlpha from './examples/ExAlpha.vue'
     import ExAlphaCode from './examples/ExAlpha.vue?raw'
 
-    import ExRepresentation from './examples/ExRepresentation'
+    import ExRepresentation from './examples/ExRepresentation.vue'
     import ExRepresentationCode from './examples/ExRepresentation.vue?raw'
 
-    import ExFormatter from './examples/ExFormatter'
+    import ExFormatter from './examples/ExFormatter.vue'
     import ExFormatterCode from './examples/ExFormatter.vue?raw'
 
-    import ExFields from './examples/ExFields'
+    import ExFields from './examples/ExFields.vue'
     import ExFieldsCode from './examples/ExFields.vue?raw'
 
-    export default {
+    export default defineComponent({
+        components: {
+            ApiView,
+            Example,
+            VariablesView
+        },
         data() {
             return {
                 api,
@@ -54,5 +65,5 @@
                 ExFieldsCode
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/colorpicker/api/colorpicker.js b/packages/docs/src/pages/components/colorpicker/api/colorpicker.ts
similarity index 100%
rename from packages/docs/src/pages/components/colorpicker/api/colorpicker.js
rename to packages/docs/src/pages/components/colorpicker/api/colorpicker.ts
diff --git a/packages/docs/src/pages/components/colorpicker/examples/ExAlpha.vue b/packages/docs/src/pages/components/colorpicker/examples/ExAlpha.vue
index 56da327be..b6763bd2d 100644
--- a/packages/docs/src/pages/components/colorpicker/examples/ExAlpha.vue
+++ b/packages/docs/src/pages/components/colorpicker/examples/ExAlpha.vue
@@ -11,10 +11,16 @@
     </section>
 </template>
 
-<script>
-import { Color } from '@ntohq/buefy-next'
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BColorpicker, BField, BSwitch, Color } from '@ntohq/buefy-next'
 
-export default {
+export default defineComponent({
+    components: {
+        BColorpicker,
+        BField,
+        BSwitch
+    },
     data() {
         return {
             alpha: true,
@@ -22,9 +28,9 @@ export default {
         }
     },
     methods: {
-        formatter (color) {
+        formatter (color: Color) {
             return color.toString(this.alpha ? 'rgba' : 'rgb')
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/colorpicker/examples/ExFields.vue b/packages/docs/src/pages/components/colorpicker/examples/ExFields.vue
index 157011e1d..1fe8037af 100644
--- a/packages/docs/src/pages/components/colorpicker/examples/ExFields.vue
+++ b/packages/docs/src/pages/components/colorpicker/examples/ExFields.vue
@@ -90,10 +90,17 @@
     </section>
 </template>
 
-<script>
-import { Color } from '@ntohq/buefy-next'
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BButton, BColorpicker, BField, BInput, Color } from '@ntohq/buefy-next'
 
-export default {
+export default defineComponent({
+    components: {
+        BButton,
+        BColorpicker,
+        BField,
+        BInput
+    },
     data() {
         return {
             selected: Color.parse('cyan')
@@ -104,5 +111,5 @@ export default {
             this.selected = Color.parse('cyan')
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/colorpicker/examples/ExFormatter.vue b/packages/docs/src/pages/components/colorpicker/examples/ExFormatter.vue
index cee61376e..e223d0c66 100644
--- a/packages/docs/src/pages/components/colorpicker/examples/ExFormatter.vue
+++ b/packages/docs/src/pages/components/colorpicker/examples/ExFormatter.vue
@@ -21,10 +21,11 @@
     </section>
 </template>
 
-<script>
-import { Color } from '@ntohq/buefy-next'
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BColorpicker, BField, BSelect, Color } from '@ntohq/buefy-next'
 
-export default {
+export default defineComponent({
     data() {
         return {
             format: 'rgb',
@@ -37,9 +38,9 @@ export default {
         }
     },
     methods: {
-        formatter (color) {
+        formatter (color: Color) {
             return color.toString(this.format)
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/colorpicker/examples/ExRepresentation.vue b/packages/docs/src/pages/components/colorpicker/examples/ExRepresentation.vue
index 9ab775b11..911997a80 100644
--- a/packages/docs/src/pages/components/colorpicker/examples/ExRepresentation.vue
+++ b/packages/docs/src/pages/components/colorpicker/examples/ExRepresentation.vue
@@ -6,14 +6,15 @@
     </section>
 </template>
 
-<script>
-import { Color } from '@ntohq/buefy-next'
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BColorpicker, BField, Color } from '@ntohq/buefy-next'
 
-export default {
+export default defineComponent({
     data() {
         return {
             selected: Color.parse('red')
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/colorpicker/examples/ExSimple.vue b/packages/docs/src/pages/components/colorpicker/examples/ExSimple.vue
index 7b5fec330..84e2a3885 100644
--- a/packages/docs/src/pages/components/colorpicker/examples/ExSimple.vue
+++ b/packages/docs/src/pages/components/colorpicker/examples/ExSimple.vue
@@ -5,3 +5,7 @@
         </b-field>
     </section>
 </template>
+
+<script setup lang="ts">
+import { BColorpicker, BField } from '@ntohq/buefy-next'
+</script>
diff --git a/packages/docs/src/pages/components/colorpicker/variables/colorpicker.js b/packages/docs/src/pages/components/colorpicker/variables/colorpicker.ts
similarity index 100%
rename from packages/docs/src/pages/components/colorpicker/variables/colorpicker.js
rename to packages/docs/src/pages/components/colorpicker/variables/colorpicker.ts