diff --git a/packages/buefy-next/rollup.config.mjs b/packages/buefy-next/rollup.config.mjs
index 6ef37fc76..fe20e8f2c 100644
--- a/packages/buefy-next/rollup.config.mjs
+++ b/packages/buefy-next/rollup.config.mjs
@@ -30,12 +30,9 @@ const components = fs
     )
 
 const JS_COMPONENTS = [
-    'autocomplete',
     'clockpicker',
-    'colorpicker',
     'datepicker',
     'datetimepicker',
-    'numberinput',
     'timepicker',
 ]
 
diff --git a/packages/buefy-next/src/components/autocomplete/Autocomplete.spec.js b/packages/buefy-next/src/components/autocomplete/Autocomplete.spec.ts
similarity index 94%
rename from packages/buefy-next/src/components/autocomplete/Autocomplete.spec.js
rename to packages/buefy-next/src/components/autocomplete/Autocomplete.spec.ts
index 0d97cbd0b..eed740160 100644
--- a/packages/buefy-next/src/components/autocomplete/Autocomplete.spec.js
+++ b/packages/buefy-next/src/components/autocomplete/Autocomplete.spec.ts
@@ -1,7 +1,9 @@
 import { mount, shallowMount } from '@vue/test-utils'
-import BAutocomplete from '@components/autocomplete/Autocomplete'
+import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import BAutocomplete from '@components/autocomplete/Autocomplete.vue'
 
-const findStringsStartingWith = (array, value) =>
+const findStringsStartingWith = (array: string[], value: string) =>
     array.filter((x) => x.startsWith(value))
 
 const DATA_LIST = [
@@ -19,11 +21,13 @@ const DATA_LIST = [
     'Vue.js'
 ]
 const dropdownMenu = '.dropdown-menu'
-let wrapper, $input, $dropdown, stubs
+let wrapper: VueWrapper<InstanceType<typeof BAutocomplete>>
+let $input: DOMWrapper<HTMLInputElement | HTMLTextAreaElement>
+let $dropdown: DOMWrapper<Element>
+const stubs = { 'b-icon': true }
 
 describe('BAutocomplete', () => {
     beforeEach(() => {
-        stubs = { 'b-icon': true }
         wrapper = mount(BAutocomplete, {
             props: {
                 checkInfiniteScroll: true
@@ -56,7 +60,7 @@ describe('BAutocomplete', () => {
     })
 
     it('can apply a maximum height for the dropdown', async () => {
-        expect(wrapper.vm.contentStyle.maxHeight).toBeNull()
+        expect(wrapper.vm.contentStyle.maxHeight).toBeUndefined()
 
         const maxHeight = 200
 
@@ -186,7 +190,7 @@ describe('BAutocomplete', () => {
     })
 
     it('close dropdown on esc', async () => {
-        jest.useFakeTimers()
+        vi.useFakeTimers()
         await wrapper.setProps({ data: DATA_LIST })
 
         await wrapper.setData({ isActive: true })
@@ -196,12 +200,12 @@ describe('BAutocomplete', () => {
 
         expect($dropdown.isVisible()).toBeFalsy()
 
-        wrapper.vm.calcDropdownInViewportVertical = jest.fn(
+        wrapper.vm.calcDropdownInViewportVertical = vi.fn(
             () => wrapper.vm.calcDropdownInViewportVertical
         )
-        jest.runAllTimers()
+        vi.runAllTimers()
         expect(wrapper.vm.calcDropdownInViewportVertical).toHaveBeenCalled()
-        jest.useRealTimers()
+        vi.useRealTimers()
     })
 
     it('close dropdown on click outside', async () => {
@@ -216,7 +220,7 @@ describe('BAutocomplete', () => {
     })
 
     it('open dropdown on down key click', async () => {
-        wrapper.vm.setHovered = jest.fn(() => wrapper.vm.setHovered)
+        wrapper.vm.setHovered = vi.fn(() => wrapper.vm.setHovered)
         await wrapper.setProps({
             data: DATA_LIST,
             dropdownPosition: 'bottom'
@@ -295,7 +299,7 @@ describe('BAutocomplete', () => {
     it('can be used with a custom data formatter', async () => {
         await wrapper.setProps({
             data: DATA_LIST,
-            customFormatter: (val) => `${val} formatted`
+            customFormatter: (val: string) => `${val} formatted`
         })
 
         await wrapper.setData({ isActive: true })
@@ -373,8 +377,8 @@ describe('BAutocomplete', () => {
     })
 
     it('reset events before destroy', () => {
-        document.removeEventListener = jest.fn()
-        window.removeEventListener = jest.fn()
+        document.removeEventListener = vi.fn()
+        window.removeEventListener = vi.fn()
 
         wrapper.unmount()
 
diff --git a/packages/buefy-next/src/components/autocomplete/Autocomplete.vue b/packages/buefy-next/src/components/autocomplete/Autocomplete.vue
index 861566237..50bc5e457 100644
--- a/packages/buefy-next/src/components/autocomplete/Autocomplete.vue
+++ b/packages/buefy-next/src/components/autocomplete/Autocomplete.vue
@@ -27,7 +27,7 @@
             @keydown.up.prevent="keyArrows('up')"
             @keydown.down.prevent="keyArrows('down')"
             @icon-right-click="rightIconClick"
-            @icon-click="(event) => $emit('icon-click', event)"
+            @icon-click="(event: MouseEvent) => $emit('icon-click', event)"
         />
 
         <transition name="fade">
@@ -84,7 +84,7 @@
                                 :index="index"
                             />
                             <span v-else>
-                                {{ getValue(option, true) }}
+                                {{ getValue(option) }}
                             </span>
                         </a>
                     </template>
@@ -110,7 +110,10 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
 import {
     getValueByPath,
     removeElement,
@@ -120,16 +123,27 @@ import {
 } from '../../utils/helpers'
 import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 import FormElementMixin from '../../utils/FormElementMixin'
-import Input from '../input/Input.vue'
+import BInput from '../input/Input.vue'
+
+type BInputComponent = InstanceType<typeof BInput>
+// `$data` interface of `Taginput` component.
+// we cannot directly import `Taginput` because it depends on `Autocomplete`.
+interface TaginputData {
+    _isTaginput: boolean
+}
+
+interface DataItem {
+    group?: string
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    items: any[]
+}
 
-export default {
+export default defineComponent({
     name: 'BAutocomplete',
-    components: {
-        [Input.name]: Input
-    },
+    components: { BInput },
     mixins: [CompatFallthroughMixin, FormElementMixin],
     props: {
-        modelValue: [Number, String],
+        modelValue: [Number, String, null] as PropType<number | string | null>,
         data: {
             type: Array,
             default: () => []
@@ -141,7 +155,10 @@ export default {
         keepFirst: Boolean,
         clearOnSelect: Boolean,
         openOnFocus: Boolean,
-        customFormatter: Function,
+        customFormatter: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            type: Function as PropType<(option: any) => string>
+        },
         checkInfiniteScroll: Boolean,
         keepOpen: Boolean,
         selectOnClickOutside: Boolean,
@@ -167,25 +184,29 @@ export default {
         selectableHeader: Boolean,
         selectableFooter: Boolean
     },
-    emits: [
-        'active',
-        'blur',
-        'focus',
-        'icon-click',
-        'icon-right-click',
-        'infinite-scroll',
-        'select',
-        'select-footer',
-        'select-header',
-        'typing',
-        'update:modelValue'
-    ],
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any */
+        active: (active: boolean) => true,
+        blur: (event: Event) => true,
+        focus: (event?: Event) => true,
+        'icon-click': (event: MouseEvent) => true,
+        'icon-right-click': (event: MouseEvent) => true,
+        'infinite-scroll': () => true,
+        select: (selected: any, event?: Event) => true,
+        'select-footer': (event: Event) => true,
+        'select-header': (event: Event) => true,
+        typing: (value: number | string | null | undefined) => true,
+        'update:modelValue': (value: number | string) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any */
+    },
     data() {
         return {
-            selected: null,
-            hovered: null,
-            headerHovered: null,
-            footerHovered: null,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            selected: null as any,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            hovered: null as any,
+            headerHovered: null as boolean | null,
+            footerHovered: null as boolean | null,
             isActive: false,
             newValue: this.modelValue,
             newAutocomplete: this.autocomplete || 'off',
@@ -195,29 +216,31 @@ export default {
             style: {},
             _isAutocomplete: true,
             _elementRef: 'input',
-            _bodyEl: undefined, // Used to append to body
-            timeOutID: null
+            _bodyEl: undefined as Element | undefined, // Used to append to body
+            timeOutID: undefined as ReturnType<typeof setTimeout> | undefined
         }
     },
     computed: {
-        computedData() {
-            if (this.groupField) {
-                if (this.groupOptions) {
-                    const newData = []
+        computedData(): DataItem[] {
+            const { groupField, groupOptions } = this
+            if (groupField) {
+                if (groupOptions) {
+                    const newData: DataItem[] = []
                     this.data.forEach((option) => {
-                        const group = getValueByPath(option, this.groupField)
-                        const items = getValueByPath(option, this.groupOptions)
+                        const group = getValueByPath(option, groupField)
+                        const items = getValueByPath(option, groupOptions)
                         newData.push({ group, items })
                     })
                     return newData
                 } else {
-                    const tmp = {}
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const tmp: Record<string, any[]> = {}
                     this.data.forEach((option) => {
-                        const group = getValueByPath(option, this.groupField)
+                        const group = getValueByPath(option, groupField)
                         if (!tmp[group]) tmp[group] = []
                         tmp[group].push(option)
                     })
-                    const newData = []
+                    const newData: DataItem[] = []
                     Object.keys(tmp).forEach((group) => {
                         newData.push({ group, items: tmp[group] })
                     })
@@ -230,26 +253,26 @@ export default {
             if (!this.computedData) return true
             return !this.computedData.some((element) => element.items && element.items.length)
         },
-        /**
+        /*
          * White-listed items to not close when clicked.
          * Add input, dropdown and all children.
          */
         whiteList() {
             const whiteList = []
-            whiteList.push(this.$refs.input.$el.querySelector('input'))
+            whiteList.push((this.$refs.input as BInputComponent).$el.querySelector('input'))
             whiteList.push(this.$refs.dropdown)
             // Add all children from dropdown
             if (this.$refs.dropdown != null) {
-                const children = this.$refs.dropdown.querySelectorAll('*')
+                const children = (this.$refs.dropdown as Element).querySelectorAll('*')
                 for (const child of children) {
                     whiteList.push(child)
                 }
             }
-            if (this.$parent.$data._isTaginput) {
+            if ((this.$parent?.$data as TaginputData)._isTaginput) {
                 // Add taginput container
-                whiteList.push(this.$parent.$el)
+                whiteList.push(this.$parent!.$el)
                 // Add .tag and .delete
-                const tagInputChildren = this.$parent.$el.querySelectorAll('*')
+                const tagInputChildren = this.$parent!.$el.querySelectorAll('*')
                 for (const tagInputChild of tagInputChildren) {
                     whiteList.push(tagInputChild)
                 }
@@ -258,42 +281,42 @@ export default {
             return whiteList
         },
 
-        /**
+        /*
          * Check if exists default slot
          */
         hasDefaultSlot() {
             return !!this.$slots.default
         },
 
-        /**
+        /*
          * Check if exists group slot
          */
         hasGroupSlot() {
             return !!this.$slots.group
         },
 
-        /**
+        /*
          * Check if exists "empty" slot
          */
         hasEmptySlot() {
             return !!this.$slots.empty
         },
 
-        /**
+        /*
          * Check if exists "header" slot
          */
         hasHeaderSlot() {
             return !!this.$slots.header
         },
 
-        /**
+        /*
          * Check if exists "footer" slot
          */
         hasFooterSlot() {
             return !!this.$slots.footer
         },
 
-        /**
+        /*
          * Apply dropdownPosition property
          */
         isOpenedTop() {
@@ -319,12 +342,12 @@ export default {
 
         contentStyle() {
             return {
-                maxHeight: toCssWidth(this.maxHeight)
+                maxHeight: toCssWidth(this.maxHeight) || undefined
             }
         }
     },
     watch: {
-        /**
+        /*
          * When dropdown is toggled, check the visibility to know when
          * to open upwards.
          */
@@ -345,13 +368,13 @@ export default {
             })
         },
 
-        /**
+        /*
          * When checkInfiniteScroll property changes scroll event should be removed or added
          */
         checkInfiniteScroll(checkInfiniteScroll) {
-            if ((this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')) === false) return
+            if ((this.$refs.dropdown && (this.$refs.dropdown as Element).querySelector('.dropdown-content')) === false) return
 
-            const list = this.$refs.dropdown.querySelector('.dropdown-content')
+            const list = (this.$refs.dropdown as Element).querySelector('.dropdown-content')!
 
             if (checkInfiniteScroll === true) {
                 list.addEventListener('scroll', this.checkIfReachedTheEndOfScroll)
@@ -362,7 +385,7 @@ export default {
             list.removeEventListener('scroll', this.checkIfReachedTheEndOfScroll)
         },
 
-        /**
+        /*
          * When updating input's value
          *   1. Emit changes
          *   2. If value isn't the same as selected, set null
@@ -381,7 +404,7 @@ export default {
             }
         },
 
-        /**
+        /*
          * When v-model is changed:
          *   1. Update internal value.
          *   2. If it's invalid, validate again.
@@ -390,7 +413,7 @@ export default {
             this.newValue = value
         },
 
-        /**
+        /*
          * Select first option if "keep-first
          */
         data() {
@@ -417,28 +440,31 @@ export default {
         }
     },
     methods: {
-        /**
+        /*
          * Set which option is currently hovered.
          */
-        setHovered(option) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setHovered(option: any) {
             if (option === undefined) return
 
             this.hovered = option
         },
 
-        /**
+        /*
          * Set which option is currently selected, update v-model,
          * update input value and close dropdown.
          */
-        setSelected(option, closeDropdown = true, event = undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setSelected(option: any, closeDropdown = true, event?: Event) {
             if (option === undefined) return
             this.selected = option
             this.$emit('select', this.selected, event)
             if (this.selected !== null) {
                 if (this.clearOnSelect) {
-                    const input = this.$refs.input
+                    const input = this.$refs.input as BInputComponent
                     input.newValue = ''
-                    input.$refs.input.value = ''
+                    const innerInput = input.$refs.input as HTMLInputElement | HTMLTextAreaElement
+                    innerInput.value = ''
                 } else {
                     this.newValue = this.getValue(this.selected)
                 }
@@ -450,10 +476,10 @@ export default {
             this.checkValidity()
         },
 
-        /**
+        /*
          * Select first option
          */
-        selectFirstOption(computedData) {
+        selectFirstOption(computedData: DataItem[]) {
             this.$nextTick(() => {
                 const nonEmptyElements = computedData.filter(
                     (element) => element.items && element.items.length
@@ -467,7 +493,7 @@ export default {
             })
         },
 
-        keydown(event) {
+        keydown(event: KeyboardEvent) {
             const { key } = event // cannot destructure preventDefault (https://stackoverflow.com/a/49616808/2774496)
             // prevent emit submit event
             if (key === 'Enter') event.preventDefault()
@@ -491,14 +517,18 @@ export default {
             }
         },
 
-        selectHeaderOrFoterByClick(event, origin) {
+        selectHeaderOrFoterByClick(event: MouseEvent, origin: 'header' | 'footer') {
             this.checkIfHeaderOrFooterSelected(event, { origin })
         },
 
-        /**
+        /*
          * Check if header or footer was selected.
          */
-        checkIfHeaderOrFooterSelected(event, triggerClick, closeDropdown = true) {
+        checkIfHeaderOrFooterSelected(
+            event: Event,
+            triggerClick: { origin: 'header' | 'footer' } | null,
+            closeDropdown = true
+        ) {
             if (this.selectableHeader && (this.headerHovered || (triggerClick && triggerClick.origin === 'header'))) {
                 this.$emit('select-header', event)
                 this.headerHovered = false
@@ -513,10 +543,10 @@ export default {
             }
         },
 
-        /**
+        /*
          * Close dropdown if clicked outside.
          */
-        clickedOutside(event) {
+        clickedOutside(event: MouseEvent) {
             const target = isCustomElement(this) ? event.composedPath()[0] : event.target
             if (!this.hasFocus && this.whiteList.indexOf(target) < 0) {
                 if (this.keepFirst && this.hovered && this.selectOnClickOutside) {
@@ -527,11 +557,12 @@ export default {
             }
         },
 
-        /**
+        /*
          * Return display text for the input.
          * If object, get value from path, or else just the value.
          */
-        getValue(option) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        getValue(option: any) {
             if (option === null) return
 
             if (typeof this.customFormatter !== 'undefined') {
@@ -540,33 +571,37 @@ export default {
             return typeof option === 'object' ? getValueByPath(option, this.field) : option
         },
 
-        /**
+        /*
          * Check if the scroll list inside the dropdown
          * reached it's end.
          */
         checkIfReachedTheEndOfScroll() {
-            const list = this.$refs.dropdown.querySelector('.dropdown-content')
-            const footerHeight = this.hasFooterSlot ? list.querySelectorAll('div.dropdown-footer')[0].clientHeight : 0
+            const list = (this.$refs.dropdown as Element).querySelector('.dropdown-content')!
+            const footerHeight = this.hasFooterSlot
+                ? list.querySelectorAll('div.dropdown-footer')[0].clientHeight
+                : 0
             if (list.clientHeight !== list.scrollHeight &&
-                list.scrollTop + list.parentElement.clientHeight + footerHeight >= list.scrollHeight
+                (list.scrollTop +
+                 list.parentElement!.clientHeight +
+                 footerHeight) >= list.scrollHeight
             ) {
                 this.$emit('infinite-scroll')
             }
         },
 
-        /**
+        /*
          * Calculate if the dropdown is vertically visible when activated,
          * otherwise it is openened upwards.
          */
         calcDropdownInViewportVertical() {
             this.$nextTick(() => {
-                /**
+                /*
                  * this.$refs.dropdown may be undefined
                  * when Autocomplete is conditional rendered
                  */
                 if (this.$refs.dropdown == null) return
 
-                const rect = this.$refs.dropdown.getBoundingClientRect()
+                const rect = (this.$refs.dropdown as Element).getBoundingClientRect()
 
                 this.isListInViewportVertically = rect.top >= 0 &&
                     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
@@ -576,11 +611,11 @@ export default {
             })
         },
 
-        /**
+        /*
          * Arrows keys listener.
          * If dropdown is active, set hovered option, or else just open.
          */
-        keyArrows(direction) {
+        keyArrows(direction: 'down' | 'up') {
             const sum = direction === 'down' ? 1 : -1
             if (this.isActive) {
                 const data = this.computedData.map(
@@ -614,7 +649,7 @@ export default {
                     this.headerHovered = true
                 }
 
-                const list = this.$refs.dropdown.querySelector('.dropdown-content')
+                const list = (this.$refs.dropdown as Element).querySelector('.dropdown-content')!
                 let querySelectorText = 'a.dropdown-item:not(.is-disabled)'
                 if (this.hasHeaderSlot && this.selectableHeader) {
                     querySelectorText += ',div.dropdown-header'
@@ -622,7 +657,8 @@ export default {
                 if (this.hasFooterSlot && this.selectableFooter) {
                     querySelectorText += ',div.dropdown-footer'
                 }
-                const element = list.querySelectorAll(querySelectorText)[index]
+                const element =
+                    list.querySelectorAll(querySelectorText)[index] as HTMLElement | null
 
                 if (!element) return
 
@@ -639,11 +675,11 @@ export default {
             }
         },
 
-        /**
+        /*
          * Focus listener.
          * If value is the same as selected, select all text.
          */
-        focused(event) {
+        focused(event?: Event) {
             if (this.getValue(this.selected) === this.newValue) {
                 this.$el.querySelector('input').select()
             }
@@ -658,10 +694,10 @@ export default {
             this.$emit('focus', event)
         },
 
-        /**
+        /*
          * Blur listener.
          */
-        onBlur(event) {
+        onBlur(event: Event) {
             this.hasFocus = false
             this.$emit('blur', event)
         },
@@ -671,12 +707,12 @@ export default {
             this.$emit('typing', this.newValue)
             this.checkValidity()
         },
-        rightIconClick(event) {
+        rightIconClick(event: MouseEvent) {
             if (this.clearable) {
                 this.newValue = ''
                 this.setSelected(null, false)
                 if (this.openOnFocus) {
-                    this.$refs.input.$el.focus()
+                    (this.$refs.input as BInputComponent).$el.focus()
                 }
             } else {
                 this.$emit('icon-right-click', event)
@@ -690,16 +726,18 @@ export default {
             }
         },
         updateAppendToBody() {
-            const dropdownMenu = this.$refs.dropdown
-            const trigger = this.$parent.$data._isTaginput ? this.$parent.$el : this.$refs.input.$el
+            const dropdownMenu = this.$refs.dropdown as Element
+            const trigger = (this.$parent!.$data as TaginputData)._isTaginput
+                ? this.$parent!.$el
+                : (this.$refs.input as BInputComponent).$el
             if (dropdownMenu && trigger) {
                 // update wrapper dropdown
-                const root = this.$data._bodyEl
+                const root = this.$data._bodyEl!
                 root.classList.forEach((item) => root.classList.remove(item))
                 root.classList.add('autocomplete')
                 root.classList.add('control')
-                if (this.expandend) {
-                    root.classList.add('is-expandend')
+                if (this.expanded) {
+                    root.classList.add('is-expanded')
                 }
                 const rect = trigger.getBoundingClientRect()
                 let top = rect.top + window.scrollY
@@ -728,13 +766,13 @@ export default {
     },
     mounted() {
         if (this.checkInfiniteScroll &&
-            this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')
+            this.$refs.dropdown && (this.$refs.dropdown as Element).querySelector('.dropdown-content')
         ) {
-            const list = this.$refs.dropdown.querySelector('.dropdown-content')
+            const list = (this.$refs.dropdown as Element).querySelector('.dropdown-content')!
             list.addEventListener('scroll', this.checkIfReachedTheEndOfScroll)
         }
         if (this.appendToBody) {
-            this.$data._bodyEl = createAbsoluteElement(this.$refs.dropdown)
+            this.$data._bodyEl = createAbsoluteElement(this.$refs.dropdown as Element)
             this.updateAppendToBody()
         }
     },
@@ -744,15 +782,15 @@ export default {
             if (this.dropdownPosition === 'auto') { window.removeEventListener('resize', this.calcDropdownInViewportVertical) }
         }
         if (this.checkInfiniteScroll &&
-            this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')
+            this.$refs.dropdown && (this.$refs.dropdown as Element).querySelector('.dropdown-content')
         ) {
-            const list = this.$refs.dropdown.querySelector('.dropdown-content')
+            const list = (this.$refs.dropdown as Element).querySelector('.dropdown-content')!
             list.removeEventListener('scroll', this.checkIfReachedTheEndOfScroll)
         }
         if (this.appendToBody) {
-            removeElement(this.$data._bodyEl)
+            removeElement(this.$data._bodyEl!)
         }
         clearTimeout(this.timeOutID)
     }
-}
+})
 </script>
diff --git a/packages/buefy-next/src/components/autocomplete/__snapshots__/Autocomplete.spec.js.snap b/packages/buefy-next/src/components/autocomplete/__snapshots__/Autocomplete.spec.js.snap
deleted file mode 100644
index 26c01f545..000000000
--- a/packages/buefy-next/src/components/autocomplete/__snapshots__/Autocomplete.spec.js.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BAutocomplete render correctly 1`] = `
-<div class="autocomplete control">
-  <div class="control is-clearfix"><input class="input" type="text" autocomplete="off" aria-autocomplete="list">
-    <!--v-if-->
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-  <transition-stub name="fade" appear="false" persisted="true" css="true">
-    <div class="dropdown-menu" style="display: none;">
-      <div class="dropdown-content" style="display: none;">
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-    </div>
-  </transition-stub>
-</div>
-`;
diff --git a/packages/buefy-next/src/components/autocomplete/__snapshots__/Autocomplete.spec.ts.snap b/packages/buefy-next/src/components/autocomplete/__snapshots__/Autocomplete.spec.ts.snap
new file mode 100644
index 000000000..543f6c6d8
--- /dev/null
+++ b/packages/buefy-next/src/components/autocomplete/__snapshots__/Autocomplete.spec.ts.snap
@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BAutocomplete > render correctly 1`] = `
+"<div class=\\"autocomplete control\\">
+  <div class=\\"control is-clearfix\\"><input class=\\"input\\" type=\\"text\\" autocomplete=\\"off\\" aria-autocomplete=\\"list\\">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
+    <div class=\\"dropdown-menu\\" style=\\"display: none;\\">
+      <div class=\\"dropdown-content\\" style=\\"display: none;\\">
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+    </div>
+  </transition-stub>
+</div>"
+`;
diff --git a/packages/buefy-next/src/components/autocomplete/index.js b/packages/buefy-next/src/components/autocomplete/index.ts
similarity index 81%
rename from packages/buefy-next/src/components/autocomplete/index.js
rename to packages/buefy-next/src/components/autocomplete/index.ts
index d70dbb2c2..0f8ccb13e 100644
--- a/packages/buefy-next/src/components/autocomplete/index.js
+++ b/packages/buefy-next/src/components/autocomplete/index.ts
@@ -1,9 +1,10 @@
+import type { App } from 'vue'
 import Autocomplete from './Autocomplete.vue'
 
 import { registerComponent } from '../../utils/plugins'
 
 const Plugin = {
-    install(Vue) {
+    install(Vue: App) {
         registerComponent(Vue, Autocomplete)
     }
 }
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/components/numberinput/Numberinput.spec.js b/packages/buefy-next/src/components/numberinput/Numberinput.spec.ts
similarity index 93%
rename from packages/buefy-next/src/components/numberinput/Numberinput.spec.js
rename to packages/buefy-next/src/components/numberinput/Numberinput.spec.ts
index 45a4a4f87..f2c466451 100644
--- a/packages/buefy-next/src/components/numberinput/Numberinput.spec.js
+++ b/packages/buefy-next/src/components/numberinput/Numberinput.spec.ts
@@ -1,7 +1,9 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { shallowMount, mount } from '@vue/test-utils'
-import BNumberinput from '@components/numberinput/Numberinput'
+import type { VueWrapper } from '@vue/test-utils'
+import BNumberinput from '@components/numberinput/Numberinput.vue'
 
-let wrapper
+let wrapper: VueWrapper<InstanceType<typeof BNumberinput>>
 
 describe('BNumberinput', () => {
     describe('Rendered', () => {
@@ -10,7 +12,7 @@ describe('BNumberinput', () => {
         })
 
         afterEach(() => {
-            jest.useRealTimers()
+            vi.useRealTimers()
         })
 
         it('is called', () => {
@@ -37,7 +39,7 @@ describe('BNumberinput', () => {
         it('increments/decrements on long pressing exponentially', async () => {
             // we should not depend on a real timer
             // otherwise the results will depend on the machine
-            jest.useFakeTimers()
+            vi.useFakeTimers()
 
             await wrapper.setProps({ exponential: true, modelValue: 1, step: 1 })
 
@@ -47,16 +49,16 @@ describe('BNumberinput', () => {
             for (let n = 1; n <= 10; ++n) {
                 // while Jest's fake setTimeout truncates the delay to an exact
                 // ms when it schedules the callback,
-                // jest.advanceTimersByTime floors the value
+                // vi.advanceTimersByTime floors the value
                 // and accumulates the remainder.
                 // so should be floored to prevent the accumulated remainder
                 // from triggering an extra callback
-                jest.advanceTimersByTime(Math.floor(250 / n))
+                vi.advanceTimersByTime(Math.floor(250 / n))
                 expect(wrapper.vm.computedValue).toBe(n + 2)
             }
 
             wrapper.find('.control.plus').trigger('mouseup')
-            jest.runAllTimers()
+            vi.runAllTimers()
             await wrapper.vm.$nextTick()
             expect(wrapper.vm.computedValue).toBe(12)
 
@@ -68,22 +70,22 @@ describe('BNumberinput', () => {
             for (let n = 1; n <= 20; ++n) {
                 // while Jest's fake setTimeout truncates the delay to an exact
                 // ms when it schedules the callback,
-                // jest.advanceTimersByTime floors the value
+                // vi.advanceTimersByTime floors the value
                 // and accumulates the remainder.
                 // so should be floored to prevent the accumulated remainder
                 // from triggering an extra callback
-                jest.advanceTimersByTime(Math.floor(250 / (n * 3)))
+                vi.advanceTimersByTime(Math.floor(250 / (n * 3)))
                 expect(wrapper.vm.computedValue).toBe(n + 1)
             }
 
             wrapper.find('.control.plus').trigger('mouseup')
-            jest.runAllTimers()
+            vi.runAllTimers()
             await wrapper.vm.$nextTick()
             expect(wrapper.vm.computedValue).toBe(21)
         })
 
         it('increments/decrements on long pressing', async () => {
-            jest.useFakeTimers()
+            vi.useFakeTimers()
 
             let val = 0
 
@@ -92,9 +94,9 @@ describe('BNumberinput', () => {
             val++
 
             // await wait(2000)
-            jest.runOnlyPendingTimers()
-            jest.runOnlyPendingTimers()
-            jest.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
             val += 3
 
             wrapper.find('.control.plus').trigger('mouseup')
@@ -104,8 +106,8 @@ describe('BNumberinput', () => {
             wrapper.find('.control.minus button').trigger('mousedown')
             val--
 
-            jest.runOnlyPendingTimers()
-            jest.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
             val -= 2
 
             wrapper.find('.control.minus button').trigger('mouseup')
@@ -119,16 +121,16 @@ describe('BNumberinput', () => {
             await wrapper.setProps({
                 longPress: false
             })
-            jest.useFakeTimers()
+            vi.useFakeTimers()
             wrapper.vm.computedValue = 0
 
             // Increment
             wrapper.find('.control.plus button').trigger('mousedown')
 
             // await wait(2000)
-            jest.runOnlyPendingTimers()
-            jest.runOnlyPendingTimers()
-            jest.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
 
             wrapper.find('.control.plus').trigger('mouseup')
             expect(wrapper.vm.computedValue).toBe(1)
@@ -136,8 +138,8 @@ describe('BNumberinput', () => {
             // Decrement
             wrapper.find('.control.minus button').trigger('mousedown')
 
-            jest.runOnlyPendingTimers()
-            jest.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
 
             wrapper.find('.control.minus button').trigger('mouseup')
             // Trigger it another time to check for unexpected browser behavior
@@ -172,7 +174,7 @@ describe('BNumberinput', () => {
             expect(wrapper.find('input').element.checkValidity()).toEqual(true)
             await wrapper.setProps({ step: 'any', modelValue: 1 })
             expect(wrapper.find('input').element.checkValidity()).toEqual(true)
-            await wrapper.setProps({ step: 'any', modelValue: '' }) // produces a warning
+            await wrapper.setProps({ step: 'any', modelValue: null })
             expect(wrapper.find('input').element.checkValidity()).toEqual(true)
         })
     })
diff --git a/packages/buefy-next/src/components/numberinput/Numberinput.vue b/packages/buefy-next/src/components/numberinput/Numberinput.vue
index 88ca532c1..9ce343409 100644
--- a/packages/buefy-next/src/components/numberinput/Numberinput.vue
+++ b/packages/buefy-next/src/components/numberinput/Numberinput.vue
@@ -56,8 +56,8 @@
             :expanded="expanded"
             :placeholder="placeholder"
             :use-html5-validation="useHtml5Validation"
-            @focus="$emit('focus', $event)"
-            @blur="$emit('blur', $event)"
+            @focus="$emit('focus', $event!)"
+            @blur="$emit('blur', $event!)"
         />
 
         <p
@@ -96,17 +96,30 @@
     </div>
 </template>
 
-<script>
-import Icon from '../icon/Icon.vue'
-import Input from '../input/Input.vue'
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import BField from '../field/Field.vue'
+import BIcon from '../icon/Icon.vue'
+import BInput from '../input/Input.vue'
 import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 import FormElementMixin from '../../utils/FormElementMixin'
 
-export default {
+type BFieldInstance = InstanceType<typeof BField>
+type BInputInstance = InstanceType<typeof BInput>
+
+export const CONTROLS_ALIGNMENTS = ['left', 'right', 'center'] as const
+export type ControlsAlignment = typeof CONTROLS_ALIGNMENTS[number]
+
+const CONTROL_OPERATIONS = ['plus', 'minus'] as const
+export type ControlOperation = typeof CONTROL_OPERATIONS[number]
+
+export default defineComponent({
     name: 'BNumberinput',
     components: {
-        [Icon.name]: Icon,
-        [Input.name]: Input
+        BIcon,
+        BInput
     },
     mixins: [CompatFallthroughMixin, FormElementMixin],
     inject: {
@@ -116,7 +129,7 @@ export default {
         }
     },
     props: {
-        modelValue: Number,
+        modelValue: [Number, null] as PropType<number | null>,
         min: {
             type: [Number, String]
         },
@@ -138,14 +151,10 @@ export default {
             default: true
         },
         controlsAlignment: {
-            type: String,
+            type: String as PropType<ControlsAlignment>,
             default: 'center',
-            validator: (value) => {
-                return [
-                    'left',
-                    'right',
-                    'center'
-                ].indexOf(value) >= 0
+            validator: (value: ControlsAlignment) => {
+                return CONTROLS_ALIGNMENTS.indexOf(value) >= 0
             }
         },
         controlsRounded: {
@@ -161,22 +170,31 @@ export default {
             default: true
         }
     },
-    emits: ['blur', 'focus', 'update:modelValue'],
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        blur: (_event: Event) => true,
+        focus: (_event: Event) => true,
+        'update:modelValue': (_value: number | null | undefined) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
     data() {
         return {
             newValue: this.modelValue,
             newStep: this.step || 1,
             newMinStep: this.minStep,
             timesPressed: 1,
-            _elementRef: 'input'
+            _elementRef: 'input',
+            _$intervalRef: undefined as ReturnType<typeof setTimeout> | undefined
         }
     },
     computed: {
         computedValue: {
-            get() {
+            // getter has to include `string` in the return type so that the
+            // setter can accept `string`
+            get(): number | string | null | undefined {
                 return this.newValue
             },
-            set(value) {
+            set(value: number | string | null | undefined) {
                 // Parses the number, so that "0" => 0, and "invalid" => null
                 let newValue = (Number(value) === 0) ? 0 : (Number(value) || null)
                 if (value === '' || value === undefined || value === null) {
@@ -185,23 +203,25 @@ export default {
                 this.newValue = newValue
                 if (newValue === null) {
                     this.$emit('update:modelValue', newValue)
-                } else if (!isNaN(newValue) && newValue !== '-0') {
+                // I decided to comment out `newValue !== '-0'` until we fix
+                // the regression of https://github.com/buefy/buefy/pull/3170
+                } else if (!isNaN(newValue)/* && newValue !== '-0' */) {
                     this.$emit('update:modelValue', Number(newValue))
                 }
                 this.$nextTick(() => {
                     if (this.$refs.input) {
-                        this.$refs.input.checkHtml5Validity()
+                        (this.$refs.input as BInputInstance).checkHtml5Validity()
                     }
                 })
             }
         },
-        controlsLeft() {
+        controlsLeft(): ControlOperation[] {
             if (this.controls && this.controlsAlignment !== 'right') {
                 return this.controlsAlignment === 'left' ? ['minus', 'plus'] : ['minus']
             }
             return []
         },
-        controlsRight() {
+        controlsRight(): ControlOperation[] {
             if (this.controls && this.controlsAlignment !== 'left') {
                 return this.controlsAlignment === 'right' ? ['minus', 'plus'] : ['plus']
             }
@@ -237,10 +257,10 @@ export default {
             return typeof step === 'string' ? parseFloat(step) : step
         },
         disabledMin() {
-            return this.computedValue - this.stepNumber < this.minNumber
+            return +this.computedValue! - this.stepNumber < this.minNumber!
         },
         disabledMax() {
-            return this.computedValue + this.stepNumber > this.maxNumber
+            return +this.computedValue! + this.stepNumber > this.maxNumber!
         },
         stepDecimals() {
             const step = this.minStepNumber.toString()
@@ -258,7 +278,7 @@ export default {
         }
     },
     watch: {
-    /**
+    /*
      * When v-model is changed:
      *   1. Set internal value.
      */
@@ -276,7 +296,7 @@ export default {
         }
     },
     methods: {
-        isDisabled(control) {
+        isDisabled(control: ControlOperation) {
             return this.disabled || (control === 'plus' ? this.disabledMax : this.disabledMin)
         },
         decrement() {
@@ -287,41 +307,41 @@ export default {
                 }
                 this.computedValue = 0
             }
-            if (typeof this.minNumber === 'undefined' || (this.computedValue - this.stepNumber) >= this.minNumber) {
-                const value = this.computedValue - this.stepNumber
+            if (typeof this.minNumber === 'undefined' || (+this.computedValue - this.stepNumber) >= this.minNumber) {
+                const value = +this.computedValue - this.stepNumber
                 this.computedValue = parseFloat(value.toFixed(this.stepDecimals))
             }
         },
         increment() {
-            if (this.computedValue === null || typeof this.computedValue === 'undefined' || this.computedValue < this.minNumber) {
+            if (this.computedValue === null || typeof this.computedValue === 'undefined' || +this.computedValue < this.minNumber!) {
                 if (this.minNumber !== null && typeof this.minNumber !== 'undefined') {
                     this.computedValue = this.minNumber
                     return
                 }
                 this.computedValue = 0
             }
-            if (typeof this.maxNumber === 'undefined' || (this.computedValue + this.stepNumber) <= this.maxNumber) {
-                const value = this.computedValue + this.stepNumber
+            if (typeof this.maxNumber === 'undefined' || (+this.computedValue + this.stepNumber) <= this.maxNumber) {
+                const value = +this.computedValue + this.stepNumber
                 this.computedValue = parseFloat(value.toFixed(this.stepDecimals))
             }
         },
-        onControlClick(event, inc) {
+        onControlClick(event: MouseEvent, inc: boolean) {
             // IE 11 -> filter click event
             if (event.detail !== 0 || event.type !== 'click') return
             if (inc) this.increment()
             else this.decrement()
         },
-        longPressTick(inc) {
+        longPressTick(inc: boolean) {
             if (inc) this.increment()
             else this.decrement()
 
             if (!this.longPress) return
             this._$intervalRef = setTimeout(() => {
                 this.longPressTick(inc)
-            }, this.exponential ? (250 / (this.exponential * this.timesPressed++)) : 250)
+            }, this.exponential ? (250 / (+this.exponential * this.timesPressed++)) : 250)
         },
-        onStartLongPress(event, inc) {
-            if (event.button !== 0 && event.type !== 'touchstart') return
+        onStartLongPress(event: MouseEvent | TouchEvent, inc: boolean) {
+            if ((event as MouseEvent).button !== 0 && (event as TouchEvent).type !== 'touchstart') return
             clearTimeout(this._$intervalRef)
             this.longPressTick(inc)
         },
@@ -329,14 +349,14 @@ export default {
             if (!this._$intervalRef) return
             this.timesPressed = 1
             clearTimeout(this._$intervalRef)
-            this._$intervalRef = null
+            this._$intervalRef = undefined
         }
     },
     mounted() {
         // tells the field that it is wrapping a number input
         // if the field is the direct parent.
         if (this.field === this.$parent) {
-            this.$parent.wrapNumberinput({
+            (this.$parent as BFieldInstance).wrapNumberinput({
                 controlsPosition: this.controlsPosition,
                 size: this.size
             })
@@ -346,5 +366,5 @@ export default {
     beforeUnmount() {
         clearTimeout(this._$intervalRef)
     }
-}
+})
 </script>
diff --git a/packages/buefy-next/src/components/numberinput/index.js b/packages/buefy-next/src/components/numberinput/index.ts
similarity index 81%
rename from packages/buefy-next/src/components/numberinput/index.js
rename to packages/buefy-next/src/components/numberinput/index.ts
index 5d1d99141..c2ef5a73c 100644
--- a/packages/buefy-next/src/components/numberinput/index.js
+++ b/packages/buefy-next/src/components/numberinput/index.ts
@@ -1,9 +1,10 @@
+import type { App } from 'vue'
 import Numberinput from './Numberinput.vue'
 
 import { registerComponent } from '../../utils/plugins'
 
 const Plugin = {
-    install(Vue) {
+    install(Vue: App) {
         registerComponent(Vue, Numberinput)
     }
 }
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/autocomplete/Autocomplete.vue b/packages/docs/src/pages/components/autocomplete/Autocomplete.vue
index e288d3f99..08aeff61b 100644
--- a/packages/docs/src/pages/components/autocomplete/Autocomplete.vue
+++ b/packages/docs/src/pages/components/autocomplete/Autocomplete.vue
@@ -86,36 +86,47 @@
     </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/autocomplete'
 import variables from './variables/autocomplete'
-import { shallowFields } from '@/utils'
 
-import ExSimple from './examples/ExSimple'
+import ExSimple from './examples/ExSimple.vue'
 import ExSimpleCode from './examples/ExSimple.vue?raw'
 
-import ExObjArray from './examples/ExObjArray'
+import ExObjArray from './examples/ExObjArray.vue'
 import ExObjArrayCode from './examples/ExObjArray.vue?raw'
 
-import ExHeader from './examples/ExHeader'
+import ExHeader from './examples/ExHeader.vue'
 import ExHeaderCode from './examples/ExHeader.vue?raw'
 
-import ExFooter from './examples/ExFooter'
+import ExFooter from './examples/ExFooter.vue'
 import ExFooterCode from './examples/ExFooter.vue?raw'
 
-import ExGroups from './examples/ExGroups'
+import ExGroups from './examples/ExGroups.vue'
 import ExGroupsCode from './examples/ExGroups.vue?raw'
 
-import ExCustomAsync from './examples/ExCustomAsync'
+import ExCustomAsync from './examples/ExCustomAsync.vue'
 import ExCustomAsyncCode from './examples/ExCustomAsync.vue?raw'
 
-import ExInfiniteScroll from './examples/ExInfiniteScroll'
+import ExInfiniteScroll from './examples/ExInfiniteScroll.vue'
 import ExInfiniteScrollCode from './examples/ExInfiniteScroll.vue?raw'
 
-import ExKeepFirst from './examples/ExKeepFirst'
+import ExKeepFirst from './examples/ExKeepFirst.vue'
 import ExKeepFirstCode from './examples/ExKeepFirst.vue?raw'
 
-export default {
+export default defineComponent({
+    components: {
+        ApiView,
+        Example,
+        VariablesView
+    },
     data() {
         return {
             api,
@@ -140,5 +151,5 @@ export default {
             ExKeepFirstCode
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/autocomplete/api/autocomplete.js b/packages/docs/src/pages/components/autocomplete/api/autocomplete.ts
similarity index 100%
rename from packages/docs/src/pages/components/autocomplete/api/autocomplete.js
rename to packages/docs/src/pages/components/autocomplete/api/autocomplete.ts
diff --git a/packages/docs/src/pages/components/autocomplete/examples/ExCustomAsync.vue b/packages/docs/src/pages/components/autocomplete/examples/ExCustomAsync.vue
index 02777ca41..354b89ca8 100644
--- a/packages/docs/src/pages/components/autocomplete/examples/ExCustomAsync.vue
+++ b/packages/docs/src/pages/components/autocomplete/examples/ExCustomAsync.vue
@@ -8,7 +8,7 @@
                 field="title"
                 :loading="isFetching"
                 @typing="getAsyncData"
-                @select="option => selected = option">
+                @select="(option: DataItem) => selected = option">
 
                 <template v-slot="props">
                     <div class="media">
@@ -30,14 +30,27 @@
     </section>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import debounce from 'lodash/debounce'
+import { BAutocomplete, BField } from '@ntohq/buefy-next'
 
-export default {
+interface DataItem {
+    title: string
+    poster_path: string
+    release_date: string
+    vote_average: number
+}
+
+const ExCustomAsync = defineComponent({
+    components: {
+        BAutocomplete,
+        BField
+    },
     data() {
         return {
-            data: [],
-            selected: null,
+            data: [] as DataItem[],
+            selected: null as DataItem | null,
             isFetching: false
         }
     },
@@ -45,24 +58,27 @@ export default {
         // You have to install and import debounce to use it,
         // it's not mandatory though.
         getAsyncData: debounce(function (name) {
+            // @ts-expect-error debounce obscures `this` type but passes it through
+            const self: InstanceType<typeof ExCustomAsync> = this
             if (!name.length) {
-                this.data = []
+                self.data = []
                 return
             }
-            this.isFetching = true
-            this.$http.get(`https://api.themoviedb.org/3/search/movie?api_key=bb6f51bef07465653c3e553d6ab161a8&query=${name}`)
+            self.isFetching = true
+            self.$http.get(`https://api.themoviedb.org/3/search/movie?api_key=bb6f51bef07465653c3e553d6ab161a8&query=${name}`)
                 .then(({ data }) => {
-                    this.data = []
-                    data.results.forEach((item) => this.data.push(item))
+                    self.data = []
+                    data.results.forEach((item: DataItem) => self.data.push(item))
                 })
                 .catch((error) => {
-                    this.data = []
+                    self.data = []
                     throw error
                 })
                 .finally(() => {
-                    this.isFetching = false
+                    self.isFetching = false
                 })
         }, 500)
     }
-}
+})
+export default ExCustomAsync
 </script>
diff --git a/packages/docs/src/pages/components/autocomplete/examples/ExFooter.vue b/packages/docs/src/pages/components/autocomplete/examples/ExFooter.vue
index 8aa27e8db..f19472b73 100644
--- a/packages/docs/src/pages/components/autocomplete/examples/ExFooter.vue
+++ b/packages/docs/src/pages/components/autocomplete/examples/ExFooter.vue
@@ -26,8 +26,18 @@
     </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BAutocomplete, BField, BSwitch } from '@ntohq/buefy-next'
+
+type BAutocompleteInstance = InstanceType<typeof BAutocomplete>
+
+export default defineComponent({
+    components: {
+        BAutocomplete,
+        BField,
+        BSwitch
+    },
     data() {
         return {
             data: [
@@ -64,12 +74,12 @@ export default {
                     value: this.name
                 },
                 confirmText: 'Add',
-                onConfirm: (value) => {
-                    this.data.push(value)
-                    this.$refs.autocomplete.setSelected(value)
+                onConfirm: (value: string) => {
+                    this.data.push(value);
+                    (this.$refs.autocomplete as BAutocompleteInstance).setSelected(value)
                 }
             })
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/autocomplete/examples/ExGroups.vue b/packages/docs/src/pages/components/autocomplete/examples/ExGroups.vue
index 5ffc6f116..8ddfeec03 100644
--- a/packages/docs/src/pages/components/autocomplete/examples/ExGroups.vue
+++ b/packages/docs/src/pages/components/autocomplete/examples/ExGroups.vue
@@ -14,9 +14,20 @@
     </section>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BAutocomplete, BField } from '@ntohq/buefy-next'
 
-export default {
+interface DataItem {
+    type: string
+    items: string[]
+}
+
+export default defineComponent({
+    components: {
+        BAutocomplete,
+        BField
+    },
     data() {
         return {
             data: [
@@ -35,7 +46,7 @@ export default {
     },
     computed: {
         filteredDataObj() {
-            const newData = []
+            const newData: DataItem[] = []
             this.data.forEach((element) => {
                 const items = element.items.filter((item) =>
                     item.toLowerCase().indexOf(this.name.toLowerCase()) >= 0)
@@ -46,5 +57,5 @@ export default {
             return newData
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/autocomplete/examples/ExHeader.vue b/packages/docs/src/pages/components/autocomplete/examples/ExHeader.vue
index 2826c7aef..4dc6bd986 100644
--- a/packages/docs/src/pages/components/autocomplete/examples/ExHeader.vue
+++ b/packages/docs/src/pages/components/autocomplete/examples/ExHeader.vue
@@ -39,8 +39,18 @@
     </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BAutocomplete, BField, BSwitch } from '@ntohq/buefy-next'
+
+type BAutocompleteInstance = InstanceType<typeof BAutocomplete>
+
+export default defineComponent({
+    components: {
+        BAutocomplete,
+        BField,
+        BSwitch
+    },
     data() {
         return {
             data: [
@@ -79,12 +89,12 @@ export default {
                     value: this.name
                 },
                 confirmText: 'Add',
-                onConfirm: (value) => {
-                    this.data.push(value)
-                    this.$refs.autocomplete.setSelected(value)
+                onConfirm: (value: string) => {
+                    this.data.push(value);
+                    (this.$refs.autocomplete as BAutocompleteInstance).setSelected(value)
                 }
             })
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/autocomplete/examples/ExInfiniteScroll.vue b/packages/docs/src/pages/components/autocomplete/examples/ExInfiniteScroll.vue
index a1e43fd67..d71aa88d7 100644
--- a/packages/docs/src/pages/components/autocomplete/examples/ExInfiniteScroll.vue
+++ b/packages/docs/src/pages/components/autocomplete/examples/ExInfiniteScroll.vue
@@ -9,7 +9,7 @@
                 :loading="isFetching"
                 :check-infinite-scroll="true"
                 @typing="getAsyncData"
-                @select="option => selected = option"
+                @select="(option: DataItem) => selected = option"
                 @infinite-scroll="getMoreAsyncData">
 
                 <template v-slot="props">
@@ -37,14 +37,24 @@
     </section>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import debounce from 'lodash/debounce'
+import { BAutocomplete } from '@ntohq/buefy-next'
 
-export default {
+interface DataItem {
+    title: string
+    poster_path: string
+    release_date: string
+    vote_average: number
+}
+
+const ExInfiniteScroll = defineComponent({
+    compnents: { BAutocomplete },
     data() {
         return {
-            data: [],
-            selected: null,
+            data: [] as DataItem[],
+            selected: null as DataItem | null,
             isFetching: false,
             name: '',
             page: 1,
@@ -55,42 +65,47 @@ export default {
         // You have to install and import debounce to use it,
         // it's not mandatory though.
         getAsyncData: debounce(function (name) {
+            // @ts-expect-error debounce obscures `this` type but passes it through
+            const self = this as InstanceType<typeof ExInfiniteScroll>
             // String update
-            if (this.name !== name) {
-                this.name = name
-                this.data = []
-                this.page = 1
-                this.totalPages = 1
+            if (self.name !== name) {
+                self.name = name
+                self.data = []
+                self.page = 1
+                self.totalPages = 1
             }
             // String cleared
             if (!name.length) {
-                this.data = []
-                this.page = 1
-                this.totalPages = 1
+                self.data = []
+                self.page = 1
+                self.totalPages = 1
                 return
             }
             // Reached last page
-            if (this.page > this.totalPages) {
+            if (self.page > self.totalPages) {
                 return
             }
-            this.isFetching = true
-            this.$http.get(`https://api.themoviedb.org/3/search/movie?api_key=bb6f51bef07465653c3e553d6ab161a8&query=${name}&page=${this.page}`)
+            self.isFetching = true
+            self.$http.get(`https://api.themoviedb.org/3/search/movie?api_key=bb6f51bef07465653c3e553d6ab161a8&query=${name}&page=${self.page}`)
                 .then(({ data }) => {
-                    data.results.forEach((item) => this.data.push(item))
+                    data.results.forEach((item: DataItem) => self.data.push(item))
 
-                    this.page++
-                    this.totalPages = data.total_pages
+                    self.page++
+                    self.totalPages = data.total_pages
                 })
                 .catch((error) => {
                     throw error
                 })
                 .finally(() => {
-                    this.isFetching = false
+                    self.isFetching = false
                 })
         }, 500),
         getMoreAsyncData: debounce(function () {
-            this.getAsyncData(this.name)
+            // @ts-expect-error - debounce obscures `this` type but passes it through
+            const self = this as InstanceType<typeof ExInfiniteScroll>
+            self.getAsyncData(self.name)
         }, 250)
     }
-}
+})
+export default ExInfiniteScroll
 </script>
diff --git a/packages/docs/src/pages/components/autocomplete/examples/ExKeepFirst.vue b/packages/docs/src/pages/components/autocomplete/examples/ExKeepFirst.vue
index 0c908b296..c70e3a0a8 100644
--- a/packages/docs/src/pages/components/autocomplete/examples/ExKeepFirst.vue
+++ b/packages/docs/src/pages/components/autocomplete/examples/ExKeepFirst.vue
@@ -23,8 +23,16 @@
     </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BAutocomplete, BField, BSwitch } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BAutocomplete,
+        BField,
+        BSwitch
+    },
     data() {
         return {
             data: [
@@ -51,5 +59,5 @@ export default {
             })
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/autocomplete/examples/ExObjArray.vue b/packages/docs/src/pages/components/autocomplete/examples/ExObjArray.vue
index f75dd0333..424dedd50 100644
--- a/packages/docs/src/pages/components/autocomplete/examples/ExObjArray.vue
+++ b/packages/docs/src/pages/components/autocomplete/examples/ExObjArray.vue
@@ -34,10 +34,18 @@
     </section>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BAutocomplete, BField, BSwitch } from '@ntohq/buefy-next'
+
 import data from '@/data/sample.json'
 
-export default {
+export default defineComponent({
+    components: {
+        BAutocomplete,
+        BField,
+        BSwitch
+    },
     data() {
         return {
             data,
@@ -60,5 +68,5 @@ export default {
             })
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/autocomplete/examples/ExSimple.vue b/packages/docs/src/pages/components/autocomplete/examples/ExSimple.vue
index edf7f4550..4954b1637 100644
--- a/packages/docs/src/pages/components/autocomplete/examples/ExSimple.vue
+++ b/packages/docs/src/pages/components/autocomplete/examples/ExSimple.vue
@@ -16,8 +16,15 @@
     </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BAutocomplete, BField } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BAutocomplete,
+        BField
+    },
     data() {
         return {
             data: [
@@ -48,5 +55,5 @@ export default {
             })
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/autocomplete/variables/autocomplete.js b/packages/docs/src/pages/components/autocomplete/variables/autocomplete.ts
similarity index 100%
rename from packages/docs/src/pages/components/autocomplete/variables/autocomplete.js
rename to packages/docs/src/pages/components/autocomplete/variables/autocomplete.ts
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
diff --git a/packages/docs/src/pages/components/numberinput/Numberinput.vue b/packages/docs/src/pages/components/numberinput/Numberinput.vue
index ec3c55520..61766fa89 100644
--- a/packages/docs/src/pages/components/numberinput/Numberinput.vue
+++ b/packages/docs/src/pages/components/numberinput/Numberinput.vue
@@ -23,35 +23,44 @@
 
 </template>
 
-<script>
-    import api from './api/numberinput'
+<script lang="ts">
+    import { defineComponent } from 'vue'
+
     import { shallowFields } from '@/utils'
+    import ApiView from '@/components/ApiView.vue'
+    import Example from '@/components/Example.vue'
+
+    import api from './api/numberinput'
 
-    import ExSimple from './examples/ExSimple'
+    import ExSimple from './examples/ExSimple.vue'
     import ExSimpleCode from './examples/ExSimple.vue?raw'
 
-    import ExTypes from './examples/ExTypes'
+    import ExTypes from './examples/ExTypes.vue'
     import ExTypesCode from './examples/ExTypes.vue?raw'
 
-    import ExRange from './examples/ExRange'
+    import ExRange from './examples/ExRange.vue'
     import ExRangeCode from './examples/ExRange.vue?raw'
 
-    import ExStep from './examples/ExStep'
+    import ExStep from './examples/ExStep.vue'
     import ExStepCode from './examples/ExStep.vue?raw'
 
-    import ExExpon from './examples/ExExpon'
+    import ExExpon from './examples/ExExpon.vue'
     import ExExponCode from './examples/ExExpon.vue?raw'
 
-    import ExSizes from './examples/ExSizes'
+    import ExSizes from './examples/ExSizes.vue'
     import ExSizesCode from './examples/ExSizes.vue?raw'
 
-    import ExAlignment from './examples/ExAlignment'
+    import ExAlignment from './examples/ExAlignment.vue'
     import ExAlignmentCode from './examples/ExAlignment.vue?raw'
 
-    import ExCustomize from './examples/ExCustomize'
+    import ExCustomize from './examples/ExCustomize.vue'
     import ExCustomizeCode from './examples/ExCustomize.vue?raw'
 
-    export default {
+    export default defineComponent({
+        components: {
+            ApiView,
+            Example
+        },
         data() {
             return {
                 api,
@@ -75,5 +84,5 @@
                 ExSizesCode
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/numberinput/api/numberinput.js b/packages/docs/src/pages/components/numberinput/api/numberinput.ts
similarity index 100%
rename from packages/docs/src/pages/components/numberinput/api/numberinput.js
rename to packages/docs/src/pages/components/numberinput/api/numberinput.ts
diff --git a/packages/docs/src/pages/components/numberinput/examples/ExAlignment.vue b/packages/docs/src/pages/components/numberinput/examples/ExAlignment.vue
index ac50f4dfa..8532b8b8c 100644
--- a/packages/docs/src/pages/components/numberinput/examples/ExAlignment.vue
+++ b/packages/docs/src/pages/components/numberinput/examples/ExAlignment.vue
@@ -25,3 +25,7 @@
         </b-field>
     </section>
 </template>
+
+<script setup lang="ts">
+import { BField, BNumberinput } from '@ntohq/buefy-next'
+</script>
diff --git a/packages/docs/src/pages/components/numberinput/examples/ExCustomize.vue b/packages/docs/src/pages/components/numberinput/examples/ExCustomize.vue
index 9d94012d8..09874f755 100644
--- a/packages/docs/src/pages/components/numberinput/examples/ExCustomize.vue
+++ b/packages/docs/src/pages/components/numberinput/examples/ExCustomize.vue
@@ -62,3 +62,7 @@
         </b-field>
     </section>
 </template>
+
+<script setup lang="ts">
+import { BButton, BField, BNumberinput } from '@ntohq/buefy-next'
+</script>
diff --git a/packages/docs/src/pages/components/numberinput/examples/ExExpon.vue b/packages/docs/src/pages/components/numberinput/examples/ExExpon.vue
index 045179e2e..767e20002 100644
--- a/packages/docs/src/pages/components/numberinput/examples/ExExpon.vue
+++ b/packages/docs/src/pages/components/numberinput/examples/ExExpon.vue
@@ -11,3 +11,7 @@
         </b-field>
     </section>
 </template>
+
+<script setup lang="ts">
+import { BField, BNumberinput } from '@ntohq/buefy-next'
+</script>
diff --git a/packages/docs/src/pages/components/numberinput/examples/ExRange.vue b/packages/docs/src/pages/components/numberinput/examples/ExRange.vue
index 6a03d0a52..f1574534e 100644
--- a/packages/docs/src/pages/components/numberinput/examples/ExRange.vue
+++ b/packages/docs/src/pages/components/numberinput/examples/ExRange.vue
@@ -11,3 +11,7 @@
         </b-field>
     </section>
 </template>
+
+<script setup lang="ts">
+import { BField, BNumberinput } from '@ntohq/buefy-next'
+</script>
diff --git a/packages/docs/src/pages/components/numberinput/examples/ExSimple.vue b/packages/docs/src/pages/components/numberinput/examples/ExSimple.vue
index 2a7084ec8..ddfd84c0c 100644
--- a/packages/docs/src/pages/components/numberinput/examples/ExSimple.vue
+++ b/packages/docs/src/pages/components/numberinput/examples/ExSimple.vue
@@ -34,13 +34,20 @@
   </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BField, BNumberinput } from '@ntohq/buefy-next'
+
+export default defineComponent({
+  components: {
+    BField,
+    BNumberinput
+  },
   data() {
     return {
       number: 10,
       numberPlaceholder: undefined
     }
   }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/numberinput/examples/ExSizes.vue b/packages/docs/src/pages/components/numberinput/examples/ExSizes.vue
index a9881efeb..e3ecb3f6a 100644
--- a/packages/docs/src/pages/components/numberinput/examples/ExSizes.vue
+++ b/packages/docs/src/pages/components/numberinput/examples/ExSizes.vue
@@ -21,3 +21,7 @@
         </b-field>
     </section>
 </template>
+
+<script setup lang="ts">
+import { BField, BNumberinput } from '@ntohq/buefy-next'
+</script>
diff --git a/packages/docs/src/pages/components/numberinput/examples/ExStep.vue b/packages/docs/src/pages/components/numberinput/examples/ExStep.vue
index 42c7323bb..b7c5bde65 100644
--- a/packages/docs/src/pages/components/numberinput/examples/ExStep.vue
+++ b/packages/docs/src/pages/components/numberinput/examples/ExStep.vue
@@ -26,3 +26,7 @@
         </b-field>
     </section>
 </template>
+
+<script setup lang="ts">
+import { BField, BNumberinput } from '@ntohq/buefy-next'
+</script>
diff --git a/packages/docs/src/pages/components/numberinput/examples/ExTypes.vue b/packages/docs/src/pages/components/numberinput/examples/ExTypes.vue
index 91205406f..9cd031507 100644
--- a/packages/docs/src/pages/components/numberinput/examples/ExTypes.vue
+++ b/packages/docs/src/pages/components/numberinput/examples/ExTypes.vue
@@ -29,3 +29,7 @@
     </b-field>
   </section>
 </template>
+
+<script setup lang="ts">
+import { BField, BNumberinput } from '@ntohq/buefy-next'
+</script>