From 5f15d13f449311898ea99953571b98896a6cc54c Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Sun, 10 Mar 2024 12:53:38 -0500
Subject: [PATCH 01/20] feat(BDropdown)!: replace "container" prop with
 "teleportTo"

feat(BDropdown): add teleportDisabled prop

feat(BPopover)!: replace "container" prop with "teleportTo"

feat(BPopover): add teleportDisabled prop

feat: export component prop types

refactor: use defineModel > useVModel fixes #1799

fix(generics): use generic constraints for BTable & BTableLite

refactor: move all props into ComponentProps.ts -> export types & for future global options overhaul
---
 apps/docs/.vitepress/theme/Layout.vue         |   4 +-
 .../src/components/Comps/TPopover.vue         |   2 +-
 .../src/components/BAccordion/BAccordion.vue  |  29 +-
 .../components/BAccordion/BAccordionItem.vue  |  64 +-
 .../src/components/BAlert/BAlert.vue          |  53 +-
 .../src/components/BAvatar/BAvatar.vue        | 137 +--
 .../src/components/BAvatar/BAvatarGroup.vue   |  55 +-
 .../src/components/BBadge/BBadge.vue          |  81 +-
 .../components/BBreadcrumb/BBreadcrumb.vue    |   9 +-
 .../BBreadcrumb/BBreadcrumbItem.vue           |  66 +-
 .../src/components/BButton/BButton.vue        |  93 +-
 .../src/components/BButton/BButtonGroup.vue   |  22 +-
 .../src/components/BButton/BButtonToolbar.vue |  19 +-
 .../src/components/BButton/BCloseButton.vue   |  19 +-
 .../src/components/BCard/BCard.vue            | 146 +--
 .../src/components/BCard/BCardBody.vue        |  46 +-
 .../src/components/BCard/BCardGroup.vue       |  18 +-
 .../src/components/BCard/BCardImg.vue         |  62 +-
 .../src/components/BCard/BCardSubtitle.vue    |  19 +-
 .../src/components/BCard/BCardText.vue        |  16 +-
 .../src/components/BCard/BCardTitle.vue       |  16 +-
 .../src/components/BCarousel/BCarousel.vue    |  84 +-
 .../components/BCarousel/BCarouselSlide.vue   |  64 +-
 .../src/components/BCollapse.vue              |  40 +-
 .../src/components/BContainer.vue             |  22 +-
 .../src/components/BDropdown/BDropdown.vue    |  11 +-
 .../components/BDropdown/BDropdownDivider.vue |  13 +-
 .../components/BDropdown/BDropdownGroup.vue   |  28 +-
 .../components/BDropdown/BDropdownItem.vue    |  64 +-
 .../BDropdown/BDropdownItemButton.vue         |  25 +-
 .../components/BDropdown/BDropdownText.vue    |  13 +-
 .../components/BForm/BFormFloatingLabel.vue   |  19 +-
 .../src/components/BForm/BFormRow.vue         |  13 +-
 .../src/components/BForm/BFormText.vue        |  25 +-
 .../BFormCheckbox/BFormCheckbox.vue           |  83 +-
 .../BFormCheckbox/BFormCheckboxGroup.vue      |  83 +-
 .../src/components/BFormFile/BFormFile.vue    |  72 +-
 .../src/components/BFormGroup/BFormGroup.vue  |   5 +-
 .../src/components/BFormInput/BFormInput.vue  |  73 +-
 .../src/components/BFormRadio/BFormRadio.vue  |  70 +-
 .../components/BFormRadio/BFormRadioGroup.vue |  80 +-
 .../components/BFormSelect/BFormSelect.vue    |  92 +-
 .../BFormSelect/BFormSelectOption.vue         |  16 +-
 .../BFormSelect/BFormSelectOptionGroup.vue    |  30 +-
 .../BFormSpinbutton/BFormSpinbutton.vue       |  96 +-
 .../src/components/BFormTags/BFormTag.vue     |  34 +-
 .../src/components/BFormTags/BFormTags.vue    | 117 +--
 .../BFormTextarea/BFormTextarea.vue           |  69 +-
 .../components/BInputGroup/BInputGroup.vue    |  31 +-
 .../BInputGroup/BInputGroupText.vue           |  16 +-
 .../src/components/BListGroup/BListGroup.vue  |  22 +-
 .../components/BListGroup/BListGroupItem.vue  |  67 +-
 .../src/components/BModal/BModal.vue          |   6 +-
 .../components/BModal/BModalOrchestrator.vue  |  16 +-
 .../src/components/BNav/BNav.vue              |  40 +-
 .../src/components/BNav/BNavForm.vue          |  27 +-
 .../src/components/BNav/BNavItem.vue          |  62 +-
 .../src/components/BNav/BNavItemDropdown.vue  |   6 +-
 .../src/components/BNav/BNavText.vue          |   9 +-
 .../src/components/BNavbar/BNavbar.vue        |  34 +-
 .../src/components/BNavbar/BNavbarBrand.vue   |  59 +-
 .../src/components/BNavbar/BNavbarNav.vue     |  25 +-
 .../src/components/BNavbar/BNavbarToggle.vue  |  18 +-
 .../src/components/BOffcanvas/BOffcanvas.vue  |  89 +-
 .../src/components/BOverlay/BOverlay.vue      |  74 +-
 .../components/BPagination/BPagination.vue    | 104 +-
 .../components/BPlaceholder/BPlaceholder.vue  |  31 +-
 .../BPlaceholder/BPlaceholderButton.vue       |  25 +-
 .../BPlaceholder/BPlaceholderCard.vue         |  67 +-
 .../BPlaceholder/BPlaceholderTable.vue        |  64 +-
 .../BPlaceholder/BPlaceholderWrapper.vue      |  13 +-
 .../src/components/BPopover.vue               |   8 +-
 .../src/components/BProgress/BProgress.vue    |  39 +-
 .../src/components/BSpinner.vue               |  28 +-
 .../src/components/BTable/BTable.vue          | 227 ++--
 .../src/components/BTable/BTableLite.vue      |   2 +-
 .../src/components/BTable/BTbody.vue          |  13 +-
 .../src/components/BTable/BTd.vue             |  25 +-
 .../src/components/BTable/BTfoot.vue          |  13 +-
 .../src/components/BTable/BTh.vue             |  25 +-
 .../src/components/BTable/BThead.vue          |  13 +-
 .../src/components/BTable/BTr.vue             |  13 +-
 .../src/components/BTable/table.spec.ts       |   2 +-
 .../src/components/BTabs/BTab.vue             |  57 +-
 .../src/components/BTabs/BTabs.vue            |  95 +-
 .../src/components/BToast/BToast.vue          |   6 +-
 .../components/BToast/BToastOrchestrator.vue  |  20 +-
 .../components/BTransition/transition.spec.ts |  10 +-
 .../src/types/CommonTypes.ts                  |   7 +
 .../src/types/ComponentProps.ts               | 984 +++++++++++++++++-
 .../src/types/TableTypes.ts                   |   2 +
 .../src/types/exports/index.ts                |   2 +
 92 files changed, 2337 insertions(+), 2476 deletions(-)

diff --git a/apps/docs/.vitepress/theme/Layout.vue b/apps/docs/.vitepress/theme/Layout.vue
index e34fb4e00..7cdc29206 100644
--- a/apps/docs/.vitepress/theme/Layout.vue
+++ b/apps/docs/.vitepress/theme/Layout.vue
@@ -89,7 +89,7 @@
         <BOffcanvas
           id="sidebar-menu"
           v-model="sidebar"
-          teleport-disabled="true"
+          :teleport-disabled="true"
           :backdrop="false"
           title="Browse docs"
           class="h-100 border-0"
@@ -123,7 +123,7 @@
               <BOffcanvas
                 id="otp-menu"
                 v-model="onThisPage"
-                teleport-disabled="true"
+                :teleport-disabled="true"
                 :backdrop="false"
                 placement="end"
                 title="On this page"
diff --git a/apps/playground/src/components/Comps/TPopover.vue b/apps/playground/src/components/Comps/TPopover.vue
index bf40072eb..f105a1d09 100644
--- a/apps/playground/src/components/Comps/TPopover.vue
+++ b/apps/playground/src/components/Comps/TPopover.vue
@@ -206,7 +206,7 @@
     </BRow>
     <BRow>
       <BCol>
-        <BPopover click placement="bottom" container="body">
+        <BPopover click placement="bottom" teleport-to="body">
           <template #title> Title </template>
           <template #target>
             <span class="border rounded m-3 p-2">move to body.</span>
diff --git a/packages/bootstrap-vue-next/src/components/BAccordion/BAccordion.vue b/packages/bootstrap-vue-next/src/components/BAccordion/BAccordion.vue
index ba4b8b260..21bcb7754 100644
--- a/packages/bootstrap-vue-next/src/components/BAccordion/BAccordion.vue
+++ b/packages/bootstrap-vue-next/src/components/BAccordion/BAccordion.vue
@@ -8,33 +8,22 @@
 import {computed, provide, readonly, toRef} from 'vue'
 import {accordionInjectionKey} from '../../utils'
 import {useId} from '../../composables'
-import {useVModel} from '@vueuse/core'
+import type {BAccordionProps} from '../../types'
 
-const props = withDefaults(
-  defineProps<{
-    flush?: boolean
-    free?: boolean
-    id?: string
-    modelValue?: string
-  }>(),
-  {
-    flush: false,
-    free: false,
-    id: undefined,
-    modelValue: undefined,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
+const props = withDefaults(defineProps<BAccordionProps>(), {
+  flush: false,
+  free: false,
+  id: undefined,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   default?: (props: Record<string, never>) => any
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<string>({
+  default: undefined,
+})
 
 const computedId = useId(() => props.id, 'accordion')
 
diff --git a/packages/bootstrap-vue-next/src/components/BAccordion/BAccordionItem.vue b/packages/bootstrap-vue-next/src/components/BAccordion/BAccordionItem.vue
index 9a528bc38..8753df030 100644
--- a/packages/bootstrap-vue-next/src/components/BAccordion/BAccordionItem.vue
+++ b/packages/bootstrap-vue-next/src/components/BAccordion/BAccordionItem.vue
@@ -49,57 +49,34 @@
 
 <script setup lang="ts">
 import {inject, onMounted, useAttrs, watch} from 'vue'
-import {useVModel} from '@vueuse/core'
 import BCollapse from '../BCollapse.vue'
 import {accordionInjectionKey, BvTriggerableEvent} from '../../utils'
 import {useId} from '../../composables'
-import type {AttrsValue, ClassValue} from '../../types'
+import type {BAccordionItemProps} from '../../types'
 
 defineOptions({
   inheritAttrs: false,
 })
 const {class: wrapperClass, ...collapseAttrs} = useAttrs()
 
-const props = withDefaults(
-  defineProps<{
-    bodyAttrs?: Readonly<AttrsValue>
-    bodyClass?: ClassValue
-    buttonAttrs?: Readonly<AttrsValue>
-    buttonClass?: ClassValue
-    collapseClass?: ClassValue
-    headerAttrs?: Readonly<AttrsValue>
-    headerClass?: ClassValue
-    headerTag?: string
-    horizontal?: boolean
-    id?: string
-    isNav?: boolean
-    modelValue?: boolean
-    tag?: string
-    title?: string
-    toggle?: boolean
-    visible?: boolean
-    wrapperAttrs?: Readonly<AttrsValue>
-  }>(),
-  {
-    bodyAttrs: undefined,
-    bodyClass: undefined,
-    buttonAttrs: undefined,
-    buttonClass: undefined,
-    collapseClass: undefined,
-    headerAttrs: undefined,
-    headerClass: undefined,
-    headerTag: 'h2',
-    horizontal: undefined,
-    id: undefined,
-    isNav: undefined,
-    modelValue: false,
-    tag: undefined,
-    title: undefined,
-    toggle: undefined,
-    visible: false,
-    wrapperAttrs: undefined,
-  }
-)
+const props = withDefaults(defineProps<BAccordionItemProps>(), {
+  bodyAttrs: undefined,
+  bodyClass: undefined,
+  buttonAttrs: undefined,
+  buttonClass: undefined,
+  collapseClass: undefined,
+  headerAttrs: undefined,
+  headerClass: undefined,
+  headerTag: 'h2',
+  horizontal: undefined,
+  id: undefined,
+  isNav: undefined,
+  tag: undefined,
+  title: undefined,
+  toggle: undefined,
+  visible: false,
+  wrapperAttrs: undefined,
+})
 
 const emit = defineEmits<{
   'hidden': []
@@ -108,7 +85,6 @@ const emit = defineEmits<{
   'show': [value: BvTriggerableEvent]
   'show-prevented': []
   'shown': []
-  'update:modelValue': [value: boolean]
 }>()
 
 defineSlots<{
@@ -118,7 +94,7 @@ defineSlots<{
   title?: (props: Record<string, never>) => any
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<boolean>({default: false})
 
 const parentData = inject(accordionInjectionKey, null)
 
diff --git a/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue b/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue
index f33d63fdb..4a4322aca 100644
--- a/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue
+++ b/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue
@@ -26,48 +26,30 @@
 import BTransition from '../BTransition/BTransition.vue'
 import BCloseButton from '../BButton/BCloseButton.vue'
 import BButton from '../BButton/BButton.vue'
-import type {ButtonVariant, ClassValue, ColorVariant, Numberish} from '../../types'
+import type {BAlertProps} from '../../types'
 import {computed, onBeforeUnmount, ref, toRef, watch, watchEffect} from 'vue'
 import {useCountdown} from '../../composables'
 import {isEmptySlot} from '../../utils'
-import {useElementHover, useToNumber, useVModel} from '@vueuse/core'
-
-const props = withDefaults(
-  defineProps<{
-    closeClass?: ClassValue
-    closeContent?: string
-    closeLabel?: string
-    closeVariant?: ButtonVariant | null
-    dismissible?: boolean
-    fade?: boolean
-    immediate?: boolean
-    interval?: Numberish
-    modelValue?: boolean | number
-    noHoverPause?: boolean
-    showOnPause?: boolean
-    variant?: ColorVariant | null
-  }>(),
-  {
-    closeClass: undefined,
-    closeContent: undefined,
-    closeLabel: 'Close',
-    closeVariant: 'secondary',
-    dismissible: false,
-    fade: false,
-    immediate: true,
-    interval: 1000,
-    modelValue: false,
-    noHoverPause: false,
-    showOnPause: true,
-    variant: 'info',
-  }
-)
+import {useElementHover, useToNumber} from '@vueuse/core'
+
+const props = withDefaults(defineProps<BAlertProps>(), {
+  closeClass: undefined,
+  closeContent: undefined,
+  closeLabel: 'Close',
+  closeVariant: 'secondary',
+  dismissible: false,
+  fade: false,
+  immediate: true,
+  interval: 1000,
+  noHoverPause: false,
+  showOnPause: true,
+  variant: 'info',
+})
 
 const emit = defineEmits<{
   'close': []
   'close-countdown': [value: number]
   'closed': []
-  'update:modelValue': [value: boolean | number]
 }>()
 
 const slots = defineSlots<{
@@ -79,7 +61,8 @@ const slots = defineSlots<{
 
 const element = ref<HTMLElement | null>(null)
 
-const modelValue = useVModel(props, 'modelValue', emit)
+const modelValue = defineModel<boolean | number>({default: false})
+
 const isHovering = useElementHover(element)
 
 const intervalNumber = useToNumber(() => props.interval)
diff --git a/packages/bootstrap-vue-next/src/components/BAvatar/BAvatar.vue b/packages/bootstrap-vue-next/src/components/BAvatar/BAvatar.vue
index 10bdc543d..a0e074cf1 100644
--- a/packages/bootstrap-vue-next/src/components/BAvatar/BAvatar.vue
+++ b/packages/bootstrap-vue-next/src/components/BAvatar/BAvatar.vue
@@ -29,17 +29,7 @@
 <script setup lang="ts">
 import {avatarGroupInjectionKey, isEmptySlot} from '../../utils'
 import {computed, type CSSProperties, inject, type StyleValue, toRef} from 'vue'
-import type {
-  BLinkProps,
-  ButtonType,
-  ColorExtendables,
-  ColorVariant,
-  LiteralUnion,
-  Numberish,
-  RadiusElementExtendables,
-  Size,
-  TextColorVariant,
-} from '../../types'
+import type {BAvatarProps} from '../../types'
 import {
   useAvatarSize,
   useBLinkHelper,
@@ -48,80 +38,57 @@ import {
 } from '../../composables'
 import BLink from '../BLink/BLink.vue'
 
-const props = withDefaults(
-  defineProps<
-    {
-      alt?: string
-      badge?: boolean | string
-      badgeBgVariant?: ColorVariant | null
-      badgeOffset?: string
-      badgeStart?: boolean
-      badgeTextVariant?: TextColorVariant | null
-      badgeTop?: boolean
-      badgeVariant?: ColorVariant | null
-      button?: boolean
-      buttonType?: ButtonType
-      icon?: string
-      size?: LiteralUnion<Size, Numberish>
-      square?: boolean
-      src?: string
-      text?: string
-    } & Omit<BLinkProps, 'routerTag'> &
-      ColorExtendables &
-      RadiusElementExtendables
-  >(),
-  {
-    alt: 'avatar',
-    badge: false,
-    badgeBgVariant: null,
-    badgeOffset: undefined,
-    badgeStart: false,
-    badgeTextVariant: null,
-    badgeTop: false,
-    badgeVariant: 'primary',
-    button: false,
-    buttonType: 'button',
-    size: undefined,
-    square: false,
-    src: undefined,
-    text: undefined,
-    // Link props
-    variant: 'secondary',
-    // All others use defaults
-    active: undefined,
-    activeClass: undefined,
-    append: undefined,
-    disabled: undefined,
-    exactActiveClass: undefined,
-    href: undefined,
-    icon: undefined,
-    opacity: undefined,
-    opacityHover: undefined,
-    rel: undefined,
-    replace: undefined,
-    routerComponentName: undefined,
-    target: undefined,
-    to: undefined,
-    underlineOffset: undefined,
-    underlineOffsetHover: undefined,
-    underlineOpacity: undefined,
-    underlineOpacityHover: undefined,
-    underlineVariant: undefined,
-    // End link props
-    // ColorExtendables props
-    // Variant is here as well
-    bgVariant: null,
-    textVariant: null,
-    // End ColorExtendables props
-    // RadiusElementExtendables props
-    rounded: false,
-    roundedBottom: undefined,
-    roundedEnd: undefined,
-    roundedStart: undefined,
-    roundedTop: undefined,
-    // End RadiusElementExtendables props
-  }
-)
+const props = withDefaults(defineProps<BAvatarProps>(), {
+  alt: 'avatar',
+  badge: false,
+  badgeBgVariant: null,
+  badgeOffset: undefined,
+  badgeStart: false,
+  badgeTextVariant: null,
+  badgeTop: false,
+  badgeVariant: 'primary',
+  button: false,
+  buttonType: 'button',
+  size: undefined,
+  square: false,
+  src: undefined,
+  text: undefined,
+  // Link props
+  variant: 'secondary',
+  // All others use defaults
+  active: undefined,
+  activeClass: undefined,
+  append: undefined,
+  disabled: undefined,
+  exactActiveClass: undefined,
+  href: undefined,
+  icon: undefined,
+  opacity: undefined,
+  opacityHover: undefined,
+  rel: undefined,
+  replace: undefined,
+  routerComponentName: undefined,
+  target: undefined,
+  to: undefined,
+  underlineOffset: undefined,
+  underlineOffsetHover: undefined,
+  underlineOpacity: undefined,
+  underlineOpacityHover: undefined,
+  underlineVariant: undefined,
+  // End link props
+  // ColorExtendables props
+  // Variant is here as well
+  bgVariant: null,
+  textVariant: null,
+  // End ColorExtendables props
+  // RadiusElementExtendables props
+  rounded: false,
+  roundedBottom: undefined,
+  roundedEnd: undefined,
+  roundedStart: undefined,
+  roundedTop: undefined,
+  // End RadiusElementExtendables props
+})
 
 const emit = defineEmits<{
   'click': [value: MouseEvent]
diff --git a/packages/bootstrap-vue-next/src/components/BAvatar/BAvatarGroup.vue b/packages/bootstrap-vue-next/src/components/BAvatar/BAvatarGroup.vue
index 203b03494..becb0eab7 100644
--- a/packages/bootstrap-vue-next/src/components/BAvatar/BAvatarGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BAvatar/BAvatarGroup.vue
@@ -8,46 +8,29 @@
 
 <script setup lang="ts">
 import {computed, provide, type StyleValue, toRef} from 'vue'
-import type {
-  ColorExtendables,
-  LiteralUnion,
-  Numberish,
-  RadiusElementExtendables,
-  Size,
-} from '../../types'
+import type {BAvatarGroupProps} from '../../types'
 import {avatarGroupInjectionKey} from '../../utils'
 import {useAvatarSize} from '../../composables'
 import {useToNumber} from '@vueuse/core'
 
-const props = withDefaults(
-  defineProps<
-    {
-      overlap?: Numberish
-      size?: LiteralUnion<Size, Numberish>
-      square?: boolean
-      tag?: string
-    } & ColorExtendables &
-      RadiusElementExtendables
-  >(),
-  {
-    overlap: 0.3,
-    size: undefined,
-    square: false,
-    tag: 'div',
-    // RadiusElementExtendables props
-    rounded: false,
-    roundedBottom: undefined,
-    roundedEnd: undefined,
-    roundedStart: undefined,
-    roundedTop: undefined,
-    // End RadiusElementExtendables props
-    // ColorExtendables props
-    bgVariant: null,
-    textVariant: null,
-    variant: null,
-    // End ColorExtendables props
-  }
-)
+const props = withDefaults(defineProps<BAvatarGroupProps>(), {
+  overlap: 0.3,
+  size: undefined,
+  square: false,
+  tag: 'div',
+  // RadiusElementExtendables props
+  rounded: false,
+  roundedBottom: undefined,
+  roundedEnd: undefined,
+  roundedStart: undefined,
+  roundedTop: undefined,
+  // End RadiusElementExtendables props
+  // ColorExtendables props
+  bgVariant: null,
+  textVariant: null,
+  variant: null,
+  // End ColorExtendables props
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BBadge/BBadge.vue b/packages/bootstrap-vue-next/src/components/BBadge/BBadge.vue
index e579a445b..a00747e40 100644
--- a/packages/bootstrap-vue-next/src/components/BBadge/BBadge.vue
+++ b/packages/bootstrap-vue-next/src/components/BBadge/BBadge.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import {useBLinkHelper, useColorVariantClasses} from '../../composables'
 import {computed, toRef} from 'vue'
-import type {BLinkProps, ColorExtendables} from '../../types'
+import type {BBadgeProps} from '../../types'
 import BLink from '../BLink/BLink.vue'
 
 defineSlots<{
@@ -15,51 +15,40 @@ defineSlots<{
   default?: (props: Record<string, never>) => any
 }>()
 
-const props = withDefaults(
-  defineProps<
-    {
-      dotIndicator?: boolean
-      pill?: boolean
-      tag?: string
-      textIndicator?: boolean
-    } & Omit<BLinkProps, 'routerTag'> &
-      ColorExtendables
-  >(),
-  {
-    dotIndicator: false,
-    pill: false,
-    tag: 'span',
-    textIndicator: false,
-    // Link props
-    variant: 'secondary',
-    // All others use defaults
-    active: undefined,
-    activeClass: undefined,
-    append: undefined,
-    disabled: undefined,
-    exactActiveClass: undefined,
-    href: undefined,
-    icon: undefined,
-    opacity: undefined,
-    opacityHover: undefined,
-    rel: undefined,
-    replace: undefined,
-    routerComponentName: undefined,
-    target: undefined,
-    to: undefined,
-    underlineOffset: undefined,
-    underlineOffsetHover: undefined,
-    underlineOpacity: undefined,
-    underlineOpacityHover: undefined,
-    underlineVariant: undefined,
-    // End link props
-    // ColorExtendables props
-    // Variant is here as well
-    textVariant: null,
-    bgVariant: null,
-    // End ColorExtendables props
-  }
-)
+const props = withDefaults(defineProps<BBadgeProps>(), {
+  dotIndicator: false,
+  pill: false,
+  tag: 'span',
+  textIndicator: false,
+  // Link props
+  variant: 'secondary',
+  // All others use defaults
+  active: undefined,
+  activeClass: undefined,
+  append: undefined,
+  disabled: undefined,
+  exactActiveClass: undefined,
+  href: undefined,
+  icon: undefined,
+  opacity: undefined,
+  opacityHover: undefined,
+  rel: undefined,
+  replace: undefined,
+  routerComponentName: undefined,
+  target: undefined,
+  to: undefined,
+  underlineOffset: undefined,
+  underlineOffsetHover: undefined,
+  underlineOpacity: undefined,
+  underlineOpacityHover: undefined,
+  underlineVariant: undefined,
+  // End link props
+  // ColorExtendables props
+  // Variant is here as well
+  textVariant: null,
+  bgVariant: null,
+  // End ColorExtendables props
+})
 
 const resolvedBackgroundClasses = useColorVariantClasses(props)
 
diff --git a/packages/bootstrap-vue-next/src/components/BBreadcrumb/BBreadcrumb.vue b/packages/bootstrap-vue-next/src/components/BBreadcrumb/BBreadcrumb.vue
index 4ad600ad7..3cf8a89d2 100644
--- a/packages/bootstrap-vue-next/src/components/BBreadcrumb/BBreadcrumb.vue
+++ b/packages/bootstrap-vue-next/src/components/BBreadcrumb/BBreadcrumb.vue
@@ -14,15 +14,10 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 import {useBreadcrumb} from '../../composables'
-import type {BreadcrumbItem, BreadcrumbItemRaw} from '../../types'
+import type {BBreadcrumbProps, BreadcrumbItem} from '../../types'
 import BBreadcrumbItem from './BBreadcrumbItem.vue'
 
-const props = withDefaults(
-  defineProps<{
-    items?: readonly BreadcrumbItemRaw[]
-  }>(),
-  {items: undefined}
-)
+const props = withDefaults(defineProps<BBreadcrumbProps>(), {items: undefined})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BBreadcrumb/BBreadcrumbItem.vue b/packages/bootstrap-vue-next/src/components/BBreadcrumb/BBreadcrumbItem.vue
index 9175dbd10..6d440a73a 100644
--- a/packages/bootstrap-vue-next/src/components/BBreadcrumb/BBreadcrumbItem.vue
+++ b/packages/bootstrap-vue-next/src/components/BBreadcrumb/BBreadcrumbItem.vue
@@ -17,49 +17,41 @@
 import {pick} from '../../utils'
 import {computed, toRef} from 'vue'
 import BLink from '../BLink/BLink.vue'
-import type {BLinkProps} from '../../types'
+import type {BBreadcrumbItemProps} from '../../types'
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   default?: (props: Record<string, never>) => any
 }>()
 
-const props = withDefaults(
-  defineProps<
-    {
-      ariaCurrent?: string
-      text?: string
-    } & Omit<BLinkProps, 'routerTag'>
-  >(),
-  {
-    ariaCurrent: 'location',
-    text: undefined,
-    // Link props
-    active: false, // Why is this active: false?
-    // All others use defaults
-    activeClass: undefined,
-    append: undefined,
-    disabled: undefined,
-    exactActiveClass: undefined,
-    href: undefined,
-    icon: undefined,
-    opacity: undefined,
-    opacityHover: undefined,
-    rel: undefined,
-    replace: undefined,
-    routerComponentName: undefined,
-    routerTag: undefined,
-    target: undefined,
-    to: undefined,
-    underlineOffset: undefined,
-    underlineOffsetHover: undefined,
-    underlineOpacity: undefined,
-    underlineOpacityHover: undefined,
-    underlineVariant: undefined,
-    variant: undefined,
-    // End link props
-  }
-)
+const props = withDefaults(defineProps<BBreadcrumbItemProps>(), {
+  ariaCurrent: 'location',
+  text: undefined,
+  // Link props
+  active: false, // Why is this active: false?
+  // All others use defaults
+  activeClass: undefined,
+  append: undefined,
+  disabled: undefined,
+  exactActiveClass: undefined,
+  href: undefined,
+  icon: undefined,
+  opacity: undefined,
+  opacityHover: undefined,
+  rel: undefined,
+  replace: undefined,
+  routerComponentName: undefined,
+  routerTag: undefined,
+  target: undefined,
+  to: undefined,
+  underlineOffset: undefined,
+  underlineOffsetHover: undefined,
+  underlineOpacity: undefined,
+  underlineOpacityHover: undefined,
+  underlineVariant: undefined,
+  variant: undefined,
+  // End link props
+})
 
 const emit = defineEmits<{
   click: [value: MouseEvent]
diff --git a/packages/bootstrap-vue-next/src/components/BButton/BButton.vue b/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
index c2865898f..8461818ff 100644
--- a/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
+++ b/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
@@ -37,9 +37,8 @@
 import {computed, toRef} from 'vue'
 import BSpinner from '../BSpinner.vue'
 import {useBLinkHelper} from '../../composables'
-import type {BLinkProps, ButtonType, ButtonVariant, Size} from '../../types'
+import type {BButtonProps} from '../../types'
 import BLink from '../BLink/BLink.vue'
-import {useVModel} from '@vueuse/core'
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -50,64 +49,46 @@ defineSlots<{
   'loading-spinner'?: (props: Record<string, never>) => any
 }>()
 
-const props = withDefaults(
-  defineProps<
-    {
-      loading?: boolean
-      loadingFill?: boolean
-      loadingText?: string
-      pill?: boolean
-      pressed?: boolean
-      size?: Size
-      squared?: boolean
-      tag?: string
-      type?: ButtonType
-      variant?: ButtonVariant | null
-    } & Omit<BLinkProps, 'variant'>
-  >(),
-  {
-    loading: false,
-    loadingFill: false,
-    loadingText: 'Loading...',
-    pill: false,
-    pressed: undefined,
-    size: 'md',
-    squared: false,
-    tag: 'button',
-    type: 'button',
-    // Link props
-    active: false, // Why is this active: false?
-    variant: 'secondary',
-    // All others use defaults
-    activeClass: undefined,
-    append: undefined,
-    disabled: undefined,
-    exactActiveClass: undefined,
-    href: undefined,
-    icon: undefined,
-    opacity: undefined,
-    opacityHover: undefined,
-    rel: undefined,
-    replace: undefined,
-    routerComponentName: undefined,
-    routerTag: undefined,
-    target: undefined,
-    to: undefined,
-    underlineOffset: undefined,
-    underlineOffsetHover: undefined,
-    underlineOpacity: undefined,
-    underlineOpacityHover: undefined,
-    underlineVariant: undefined,
-    // End link props
-  }
-)
+const props = withDefaults(defineProps<BButtonProps>(), {
+  loading: false,
+  loadingFill: false,
+  loadingText: 'Loading...',
+  pill: false,
+  size: 'md',
+  squared: false,
+  tag: 'button',
+  type: 'button',
+  // Link props
+  active: false, // Why is this active: false?
+  variant: 'secondary',
+  // All others use defaults
+  activeClass: undefined,
+  append: undefined,
+  disabled: undefined,
+  exactActiveClass: undefined,
+  href: undefined,
+  icon: undefined,
+  opacity: undefined,
+  opacityHover: undefined,
+  rel: undefined,
+  replace: undefined,
+  routerComponentName: undefined,
+  routerTag: undefined,
+  target: undefined,
+  to: undefined,
+  underlineOffset: undefined,
+  underlineOffsetHover: undefined,
+  underlineOpacity: undefined,
+  underlineOpacityHover: undefined,
+  underlineVariant: undefined,
+  // End link props
+})
 
 const emit = defineEmits<{
-  'click': [value: MouseEvent]
-  'update:pressed': [value: boolean]
+  click: [value: MouseEvent]
 }>()
 
-const pressedValue = useVModel(props, 'pressed', emit)
+const pressedValue = defineModel<boolean>('pressed', {default: undefined})
 
 const {computedLink, computedLinkProps} = useBLinkHelper(props, [
   'active-class',
diff --git a/packages/bootstrap-vue-next/src/components/BButton/BButtonGroup.vue b/packages/bootstrap-vue-next/src/components/BButton/BButtonGroup.vue
index d4ad8f374..cf5d4e892 100644
--- a/packages/bootstrap-vue-next/src/components/BButton/BButtonGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BButton/BButtonGroup.vue
@@ -5,23 +5,15 @@
 </template>
 
 <script setup lang="ts">
-import type {Size} from '../../types'
+import type {BButtonGroupProps} from '../../types'
 import {computed} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    ariaLabel?: string
-    size?: Size
-    tag?: string
-    vertical?: boolean
-  }>(),
-  {
-    ariaLabel: 'Group',
-    size: 'md',
-    tag: 'div',
-    vertical: false,
-  }
-)
+const props = withDefaults(defineProps<BButtonGroupProps>(), {
+  ariaLabel: 'Group',
+  size: 'md',
+  tag: 'div',
+  vertical: false,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BButton/BButtonToolbar.vue b/packages/bootstrap-vue-next/src/components/BButton/BButtonToolbar.vue
index 4e5a8d61e..f4641934d 100644
--- a/packages/bootstrap-vue-next/src/components/BButton/BButtonToolbar.vue
+++ b/packages/bootstrap-vue-next/src/components/BButton/BButtonToolbar.vue
@@ -5,21 +5,14 @@
 </template>
 
 <script setup lang="ts">
+import type {BButtonToolbarProps} from '../../types'
 import {computed} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    ariaLabel?: string
-    // keyNav?: boolean
-    justify?: boolean
-    role?: string
-  }>(),
-  {
-    ariaLabel: 'Group',
-    justify: false,
-    role: 'toolbar',
-  }
-)
+const props = withDefaults(defineProps<BButtonToolbarProps>(), {
+  ariaLabel: 'Group',
+  justify: false,
+  role: 'toolbar',
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BButton/BCloseButton.vue b/packages/bootstrap-vue-next/src/components/BButton/BCloseButton.vue
index 507b60803..139883550 100644
--- a/packages/bootstrap-vue-next/src/components/BButton/BCloseButton.vue
+++ b/packages/bootstrap-vue-next/src/components/BButton/BCloseButton.vue
@@ -9,20 +9,13 @@
 </template>
 
 <script setup lang="ts">
-import type {ButtonType} from '../../types'
+import type {BCloseButtonProps} from '../../types'
 
-const props = withDefaults(
-  defineProps<{
-    ariaLabel?: string
-    disabled?: boolean
-    type?: ButtonType
-  }>(),
-  {
-    ariaLabel: 'Close',
-    disabled: false,
-    type: 'button',
-  }
-)
+const props = withDefaults(defineProps<BCloseButtonProps>(), {
+  ariaLabel: 'Close',
+  disabled: false,
+  type: 'button',
+})
 
 const emit = defineEmits<{
   click: [value: MouseEvent]
diff --git a/packages/bootstrap-vue-next/src/components/BCard/BCard.vue b/packages/bootstrap-vue-next/src/components/BCard/BCard.vue
index 02a7440c4..7d6fab5a9 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/BCard.vue
+++ b/packages/bootstrap-vue-next/src/components/BCard/BCard.vue
@@ -60,14 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import type {
-  AlignmentTextHorizontal,
-  ClassValue,
-  ColorExtendables,
-  ColorVariant,
-  Numberish,
-  TextColorVariant,
-} from '../../types'
+import type {BCardProps} from '../../types'
 import {isEmptySlot} from '../../utils'
 import {computed, toRef} from 'vue'
 import {useColorVariantClasses} from '../../composables'
@@ -77,97 +70,52 @@ import BCardBody from './BCardBody.vue'
 import BCardFooter from './BCardFooter.vue'
 import {createReusableTemplate} from '@vueuse/core'
 
-const props = withDefaults(
-  defineProps<
-    {
-      align?: AlignmentTextHorizontal
-      bodyBgVariant?: ColorVariant | null
-      bodyClass?: ClassValue
-      bodyTag?: string
-      bodyText?: string
-      bodyTextVariant?: TextColorVariant | null
-      borderVariant?: ColorVariant | null
-      footer?: string
-      footerBgVariant?: ColorVariant | null
-      footerBorderVariant?: ColorVariant | null
-      footerClass?: ClassValue
-      footerHtml?: string
-      footerTag?: string
-      footerTextVariant?: TextColorVariant | null
-      footerVariant?: ColorVariant | null
-      header?: string
-      headerBgVariant?: ColorVariant | null
-      headerBorderVariant?: ColorVariant | null
-      headerClass?: ClassValue
-      headerHtml?: string
-      headerTag?: string
-      headerTextVariant?: TextColorVariant | null
-      headerVariant?: ColorVariant | null
-      imgAlt?: string
-      imgBottom?: boolean
-      imgEnd?: boolean
-      imgHeight?: Numberish
-      imgSrc?: string
-      imgStart?: boolean
-      imgTop?: boolean
-      imgWidth?: Numberish
-      noBody?: boolean
-      overlay?: boolean
-      subtitle?: string
-      subtitleTag?: string
-      subtitleTextVariant?: TextColorVariant | null
-      tag?: string
-      title?: string
-      titleTag?: string
-    } & ColorExtendables
-  >(),
-  {
-    align: undefined,
-    bodyBgVariant: undefined,
-    bodyClass: undefined,
-    bodyTag: 'div',
-    bodyText: '',
-    bodyTextVariant: undefined,
-    borderVariant: null,
-    footer: undefined,
-    footerBgVariant: undefined,
-    footerBorderVariant: undefined,
-    footerClass: undefined,
-    footerHtml: '',
-    footerTag: 'div',
-    footerTextVariant: undefined,
-    footerVariant: null,
-    header: undefined,
-    headerBgVariant: undefined,
-    headerBorderVariant: undefined,
-    headerClass: undefined,
-    headerHtml: '',
-    headerTag: 'div',
-    headerTextVariant: undefined,
-    headerVariant: null,
-    imgAlt: undefined,
-    imgBottom: false,
-    imgEnd: false,
-    imgHeight: undefined,
-    imgSrc: undefined,
-    imgStart: false,
-    imgTop: false,
-    imgWidth: undefined,
-    noBody: false,
-    overlay: false,
-    subtitle: undefined,
-    subtitleTag: 'h6',
-    subtitleTextVariant: 'body-secondary',
-    tag: 'div',
-    title: undefined,
-    titleTag: 'h4',
-    // ColorExtendables props
-    bgVariant: null,
-    textVariant: null,
-    variant: null,
-    // End ColorExtendables props
-  }
-)
+const props = withDefaults(defineProps<BCardProps>(), {
+  align: undefined,
+  bodyBgVariant: undefined,
+  bodyClass: undefined,
+  bodyTag: 'div',
+  bodyText: '',
+  bodyTextVariant: undefined,
+  borderVariant: null,
+  footer: undefined,
+  footerBgVariant: undefined,
+  footerBorderVariant: undefined,
+  footerClass: undefined,
+  footerHtml: '',
+  footerTag: 'div',
+  footerTextVariant: undefined,
+  footerVariant: null,
+  header: undefined,
+  headerBgVariant: undefined,
+  headerBorderVariant: undefined,
+  headerClass: undefined,
+  headerHtml: '',
+  headerTag: 'div',
+  headerTextVariant: undefined,
+  headerVariant: null,
+  imgAlt: undefined,
+  imgBottom: false,
+  imgEnd: false,
+  imgHeight: undefined,
+  imgSrc: undefined,
+  imgStart: false,
+  imgTop: false,
+  imgWidth: undefined,
+  noBody: false,
+  overlay: false,
+  subtitle: undefined,
+  subtitleTag: 'h6',
+  subtitleTextVariant: 'body-secondary',
+  tag: 'div',
+  title: undefined,
+  titleTag: 'h4',
+  // ColorExtendables props
+  bgVariant: null,
+  textVariant: null,
+  variant: null,
+  // End ColorExtendables props
+})
 
 const slots = defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BCard/BCardBody.vue b/packages/bootstrap-vue-next/src/components/BCard/BCardBody.vue
index ac99791cf..154a4d22d 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/BCardBody.vue
+++ b/packages/bootstrap-vue-next/src/components/BCard/BCardBody.vue
@@ -27,38 +27,24 @@ import {computed, toRef} from 'vue'
 import BCardTitle from './BCardTitle.vue'
 import {isEmptySlot} from '../../utils'
 import BCardSubtitle from './BCardSubtitle.vue'
-import type {ColorExtendables, TextColorVariant} from '../../types'
+import type {BCardBodyProps} from '../../types'
 import {useColorVariantClasses} from '../../composables'
 
-const props = withDefaults(
-  defineProps<
-    {
-      overlay?: boolean
-      subtitle?: string
-      subtitleTag?: string
-      subtitleTextVariant?: TextColorVariant | null
-      tag?: string
-      text?: string
-      title?: string
-      titleTag?: string
-    } & ColorExtendables
-  >(),
-  {
-    overlay: false,
-    subtitle: undefined,
-    subtitleTag: 'h4',
-    subtitleTextVariant: undefined,
-    tag: 'div',
-    text: undefined,
-    title: undefined,
-    titleTag: 'h4',
-    // ColorExtendables props
-    bgVariant: null,
-    textVariant: null,
-    variant: null,
-    // End ColorExtendables props
-  }
-)
+const props = withDefaults(defineProps<BCardBodyProps>(), {
+  overlay: false,
+  subtitle: undefined,
+  subtitleTag: 'h4',
+  subtitleTextVariant: undefined,
+  tag: 'div',
+  text: undefined,
+  title: undefined,
+  titleTag: 'h4',
+  // ColorExtendables props
+  bgVariant: null,
+  textVariant: null,
+  variant: null,
+  // End ColorExtendables props
+})
 
 const slots = defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BCard/BCardGroup.vue b/packages/bootstrap-vue-next/src/components/BCard/BCardGroup.vue
index 657e9cba7..913e3af08 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/BCardGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BCard/BCardGroup.vue
@@ -5,20 +5,14 @@
 </template>
 
 <script setup lang="ts">
+import type {BCardGroupProps} from '../../types'
 import {toRef} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    columns?: boolean
-    deck?: boolean
-    tag?: string
-  }>(),
-  {
-    columns: false,
-    deck: false,
-    tag: 'div',
-  }
-)
+const props = withDefaults(defineProps<BCardGroupProps>(), {
+  columns: false,
+  deck: false,
+  tag: 'div',
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BCard/BCardImg.vue b/packages/bootstrap-vue-next/src/components/BCard/BCardImg.vue
index dc1d6f236..5c4f4e029 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/BCardImg.vue
+++ b/packages/bootstrap-vue-next/src/components/BCard/BCardImg.vue
@@ -4,44 +4,36 @@
 
 <script setup lang="ts">
 import BImg from '../BImg.vue'
-import type {BImgProps} from '../../types'
+import type {BCardImageProps} from '../../types'
 import {omit} from '../../utils'
 import {computed, toRef} from 'vue'
 
-const props = withDefaults(
-  defineProps<
-    {
-      bottom?: boolean
-      top?: boolean
-    } & BImgProps
-  >(),
-  {
-    bottom: false,
-    top: false,
-    // BImg props
-    blank: undefined,
-    blankColor: undefined,
-    block: undefined,
-    center: undefined,
-    end: undefined,
-    fluid: undefined,
-    fluidGrow: undefined,
-    height: undefined,
-    lazy: undefined,
-    rounded: undefined,
-    roundedBottom: undefined,
-    roundedEnd: undefined,
-    roundedStart: undefined,
-    roundedTop: undefined,
-    sizes: undefined,
-    src: undefined,
-    srcset: undefined,
-    start: undefined,
-    thumbnail: undefined,
-    width: undefined,
-    // End BImg props
-  }
-)
+const props = withDefaults(defineProps<BCardImageProps>(), {
+  bottom: false,
+  top: false,
+  // BImg props
+  blank: undefined,
+  blankColor: undefined,
+  block: undefined,
+  center: undefined,
+  end: undefined,
+  fluid: undefined,
+  fluidGrow: undefined,
+  height: undefined,
+  lazy: undefined,
+  rounded: undefined,
+  roundedBottom: undefined,
+  roundedEnd: undefined,
+  roundedStart: undefined,
+  roundedTop: undefined,
+  sizes: undefined,
+  src: undefined,
+  srcset: undefined,
+  start: undefined,
+  thumbnail: undefined,
+  width: undefined,
+  // End BImg props
+})
 
 const baseClass = toRef(() =>
   props.top
diff --git a/packages/bootstrap-vue-next/src/components/BCard/BCardSubtitle.vue b/packages/bootstrap-vue-next/src/components/BCard/BCardSubtitle.vue
index bc0dff9a3..f1ff89ced 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/BCardSubtitle.vue
+++ b/packages/bootstrap-vue-next/src/components/BCard/BCardSubtitle.vue
@@ -7,21 +7,14 @@
 </template>
 
 <script setup lang="ts">
-import type {TextColorVariant} from '../../types'
+import type {BCardSubtitleProps} from '../../types'
 import {computed} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    text?: string
-    tag?: string
-    textVariant?: TextColorVariant | null
-  }>(),
-  {
-    tag: 'h6',
-    text: undefined,
-    textVariant: 'body-secondary',
-  }
-)
+const props = withDefaults(defineProps<BCardSubtitleProps>(), {
+  tag: 'h6',
+  text: undefined,
+  textVariant: 'body-secondary',
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BCard/BCardText.vue b/packages/bootstrap-vue-next/src/components/BCard/BCardText.vue
index eb76971a4..790392378 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/BCardText.vue
+++ b/packages/bootstrap-vue-next/src/components/BCard/BCardText.vue
@@ -7,16 +7,12 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    tag?: string
-    text?: string
-  }>(),
-  {
-    tag: 'p',
-    text: undefined,
-  }
-)
+import type {BCardTextProps} from '../../types'
+
+withDefaults(defineProps<BCardTextProps>(), {
+  tag: 'p',
+  text: undefined,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BCard/BCardTitle.vue b/packages/bootstrap-vue-next/src/components/BCard/BCardTitle.vue
index b5c2e9dfe..22da5527c 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/BCardTitle.vue
+++ b/packages/bootstrap-vue-next/src/components/BCard/BCardTitle.vue
@@ -7,16 +7,12 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    tag?: string
-    text?: string
-  }>(),
-  {
-    tag: 'h4',
-    text: undefined,
-  }
-)
+import type {BCardTitleProps} from '../../types'
+
+withDefaults(defineProps<BCardTitleProps>(), {
+  tag: 'h4',
+  text: undefined,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue b/packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue
index 4c935c745..614035ee1 100644
--- a/packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue
+++ b/packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue
@@ -53,66 +53,34 @@
 import {BvCarouselEvent, carouselInjectionKey, getSlotElements} from '../../utils'
 import {computed, provide, ref, toRef, watch} from 'vue'
 import {useId} from '../../composables'
-import type {Numberish} from '../../types'
-import {
-  onKeyStroke,
-  useElementHover,
-  useIntervalFn,
-  useSwipe,
-  useToNumber,
-  useVModel,
-} from '@vueuse/core'
+import type {BCarouselProps} from '../../types'
+import {onKeyStroke, useElementHover, useIntervalFn, useSwipe, useToNumber} from '@vueuse/core'
 
-const props = withDefaults(
-  defineProps<{
-    background?: string
-    controls?: boolean
-    controlsNextText?: string
-    controlsPrevText?: string
-    fade?: boolean
-    id?: string
-    imgHeight?: string
-    imgWidth?: string
-    indicators?: boolean
-    indicatorsButtonLabel?: string
-    interval?: Numberish
-    keyboard?: boolean
-    modelValue?: number
-    noHoverPause?: boolean
-    noTouch?: boolean
-    noWrap?: boolean
-    ride?: boolean | 'carousel'
-    rideReverse?: boolean
-    touchThreshold?: Numberish
-  }>(),
-  {
-    background: undefined,
-    controls: false,
-    controlsNextText: 'Next',
-    controlsPrevText: 'Previous',
-    fade: false,
-    id: undefined,
-    imgHeight: undefined,
-    imgWidth: undefined,
-    indicators: false,
-    indicatorsButtonLabel: 'Slide',
-    interval: 5000,
-    keyboard: true,
-    modelValue: 0,
-    noHoverPause: false,
-    noTouch: false,
-    noWrap: false,
-    // eslint-disable-next-line vue/require-valid-default-prop
-    ride: false,
-    rideReverse: false,
-    touchThreshold: 50,
-  }
-)
+const props = withDefaults(defineProps<BCarouselProps>(), {
+  background: undefined,
+  controls: false,
+  controlsNextText: 'Next',
+  controlsPrevText: 'Previous',
+  fade: false,
+  id: undefined,
+  imgHeight: undefined,
+  imgWidth: undefined,
+  indicators: false,
+  indicatorsButtonLabel: 'Slide',
+  interval: 5000,
+  keyboard: true,
+  noHoverPause: false,
+  noTouch: false,
+  noWrap: false,
+  // eslint-disable-next-line vue/require-valid-default-prop
+  ride: false,
+  rideReverse: false,
+  touchThreshold: 50,
+})
 
 const emit = defineEmits<{
-  'slide': [value: BvCarouselEvent]
-  'slid': [value: BvCarouselEvent]
-  'update:modelValue': [value: number]
+  slide: [value: BvCarouselEvent]
+  slid: [value: BvCarouselEvent]
 }>()
 
 const slots = defineSlots<{
@@ -122,7 +90,7 @@ const slots = defineSlots<{
 
 const computedId = useId(() => props.id, 'carousel')
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<number>({default: 0})
 
 const touchThresholdNumber = useToNumber(() => props.touchThreshold)
 const intervalNumber = useToNumber(() => props.interval)
diff --git a/packages/bootstrap-vue-next/src/components/BCarousel/BCarouselSlide.vue b/packages/bootstrap-vue-next/src/components/BCarousel/BCarouselSlide.vue
index d2395dfea..100c84906 100644
--- a/packages/bootstrap-vue-next/src/components/BCarousel/BCarouselSlide.vue
+++ b/packages/bootstrap-vue-next/src/components/BCarousel/BCarouselSlide.vue
@@ -39,7 +39,7 @@
 
 <script setup lang="ts">
 import {computed, type CSSProperties, inject, toRef} from 'vue'
-import type {Numberish} from '../../types'
+import type {BCarouselSlideProps} from '../../types'
 import {carouselInjectionKey, isEmptySlot} from '../../utils'
 import BImg from '../BImg.vue'
 
@@ -47,48 +47,26 @@ import BImg from '../BImg.vue'
 // Need to add https://getbootstrap.com/docs/5.3/components/carousel/#individual-carousel-item-interval
 // Perhaps a provide/inject with next/prev values where the component can call those would work.
 
-const props = withDefaults(
-  defineProps<{
-    background?: string
-    caption?: string
-    captionHtml?: string
-    captionTag?: string
-    contentTag?: string
-    contentVisibleUp?: string
-    id?: string
-    imgAlt?: string
-    imgBlank?: boolean
-    imgBlankColor?: string
-    imgHeight?: Numberish
-    imgSrc?: string
-    imgSrcset?: string | readonly string[]
-    imgWidth?: Numberish
-    interval?: Numberish
-    text?: string
-    textHtml?: string
-    textTag?: string
-  }>(),
-  {
-    background: undefined,
-    caption: undefined,
-    captionHtml: undefined,
-    captionTag: 'h3',
-    contentTag: 'div',
-    contentVisibleUp: undefined,
-    id: undefined,
-    imgAlt: undefined,
-    imgBlank: false,
-    imgBlankColor: 'transparent',
-    imgHeight: undefined,
-    imgSrc: undefined,
-    imgSrcset: undefined,
-    imgWidth: undefined,
-    interval: undefined,
-    text: undefined,
-    textHtml: undefined,
-    textTag: 'p',
-  }
-)
+const props = withDefaults(defineProps<BCarouselSlideProps>(), {
+  background: undefined,
+  caption: undefined,
+  captionHtml: undefined,
+  captionTag: 'h3',
+  contentTag: 'div',
+  contentVisibleUp: undefined,
+  id: undefined,
+  imgAlt: undefined,
+  imgBlank: false,
+  imgBlankColor: 'transparent',
+  imgHeight: undefined,
+  imgSrc: undefined,
+  imgSrcset: undefined,
+  imgWidth: undefined,
+  interval: undefined,
+  text: undefined,
+  textHtml: undefined,
+  textTag: 'p',
+})
 
 const slots = defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BCollapse.vue b/packages/bootstrap-vue-next/src/components/BCollapse.vue
index d92b6e084..5294ed4e6 100644
--- a/packages/bootstrap-vue-next/src/components/BCollapse.vue
+++ b/packages/bootstrap-vue-next/src/components/BCollapse.vue
@@ -17,36 +17,23 @@
 <script setup lang="ts">
 import {computed, nextTick, onMounted, provide, readonly, ref, toRef, watch} from 'vue'
 import {useId} from '../composables'
-import {useEventListener, useVModel} from '@vueuse/core'
+import {useEventListener} from '@vueuse/core'
 import {BvTriggerableEvent, collapseInjectionKey, getTransitionDelay} from '../utils'
+import type {BCollapseProps} from '../types'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    // appear?: boolean
-    horizontal?: boolean
-    id?: string
-    isNav?: boolean
-    modelValue?: boolean
-    skipAnimation?: boolean
-    tag?: string
-    toggle?: boolean
-    visible?: boolean
-  }>(),
-  {
-    horizontal: false,
-    id: undefined,
-    isNav: false,
-    modelValue: false,
-    skipAnimation: false,
-    tag: 'div',
-    toggle: false,
-    visible: false,
-  }
-)
+const props = withDefaults(defineProps<BCollapseProps>(), {
+  horizontal: false,
+  id: undefined,
+  isNav: false,
+  skipAnimation: false,
+  tag: 'div',
+  toggle: false,
+  visible: false,
+})
 
 const emit = defineEmits<{
   'hidden': []
@@ -55,7 +42,6 @@ const emit = defineEmits<{
   'show': [value: BvTriggerableEvent]
   'show-prevented': []
   'shown': []
-  'update:modelValue': [value: boolean]
 }>()
 
 type SharedSlotsData = {
@@ -88,7 +74,9 @@ const buildTriggerableEvent = (
     componentId: computedId.value,
   })
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<boolean>({
+  default: false,
+})
 
 const computedId = useId(() => props.id, 'collapse')
 
diff --git a/packages/bootstrap-vue-next/src/components/BContainer.vue b/packages/bootstrap-vue-next/src/components/BContainer.vue
index 0dc405133..57e2a92a6 100644
--- a/packages/bootstrap-vue-next/src/components/BContainer.vue
+++ b/packages/bootstrap-vue-next/src/components/BContainer.vue
@@ -5,24 +5,16 @@
 </template>
 
 <script setup lang="ts">
-import type {Breakpoint, Numberish} from '../types'
+import type {BContainerProps} from '../types'
 import {computed} from 'vue'
 import {useToNumber} from '@vueuse/core'
 
-const props = withDefaults(
-  defineProps<{
-    fluid?: boolean | Breakpoint
-    gutterX?: Numberish
-    gutterY?: Numberish
-    tag?: string
-  }>(),
-  {
-    fluid: false,
-    gutterX: undefined,
-    gutterY: undefined,
-    tag: 'div',
-  }
-)
+const props = withDefaults(defineProps<BContainerProps>(), {
+  fluid: false,
+  gutterX: undefined,
+  gutterY: undefined,
+  tag: 'div',
+})
 
 const gutterXToNumber = useToNumber(() => props.gutterX ?? NaN, {method: 'parseInt'})
 const gutterYToNumber = useToNumber(() => props.gutterY ?? NaN, {method: 'parseInt'})
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
index 3b7d61c32..8126e2106 100644
--- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
+++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
@@ -37,7 +37,7 @@
         </slot>
       </span>
     </BButton>
-    <Teleport :to="container || 'body'" :disabled="!container">
+    <Teleport :to="teleportTo" :disabled="teleportDisabled && !teleportTo">
       <ul
         v-if="!props.lazy || modelValue"
         v-show="props.lazy || modelValue"
@@ -67,7 +67,7 @@ import {
   size as sizeMiddleware,
   useFloating,
 } from '@floating-ui/vue'
-import {onClickOutside, onKeyStroke, useToNumber, useVModel} from '@vueuse/core'
+import {onClickOutside, onKeyStroke, useToNumber} from '@vueuse/core'
 import {computed, type CSSProperties, nextTick, provide, ref, toRef, watch} from 'vue'
 import {useId} from '../../composables'
 import type {BDropdownProps} from '../../types'
@@ -83,7 +83,8 @@ const props = withDefaults(defineProps<BDropdownProps>(), {
   boundary: 'clippingAncestors',
   boundaryPadding: undefined,
   center: false,
-  container: undefined,
+  teleportTo: 'body',
+  teleportDisabled: false,
   disabled: false,
   dropend: false,
   dropstart: false,
@@ -94,7 +95,6 @@ const props = withDefaults(defineProps<BDropdownProps>(), {
   isNav: false,
   lazy: false,
   menuClass: undefined,
-  modelValue: false,
   noCaret: false,
   noFlip: false,
   noShift: false,
@@ -125,7 +125,6 @@ const emit = defineEmits<{
   'show-prevented': []
   'shown': []
   'toggle': []
-  'update:modelValue': [value: boolean]
 }>()
 
 defineSlots<{
@@ -139,7 +138,7 @@ defineSlots<{
 
 const computedId = useId(() => props.id, 'dropdown')
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<boolean>({default: false})
 
 const computedOffset = toRef(() =>
   typeof props.offset === 'string' || typeof props.offset === 'number' ? props.offset : NaN
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownDivider.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownDivider.vue
index 81f407a17..0c87927f8 100644
--- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownDivider.vue
+++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownDivider.vue
@@ -5,12 +5,9 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    tag?: string
-  }>(),
-  {
-    tag: 'hr',
-  }
-)
+import type {BDropdownDividerProps} from '../../types'
+
+withDefaults(defineProps<BDropdownDividerProps>(), {
+  tag: 'hr',
+})
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownGroup.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownGroup.vue
index 526a2a2a6..0e5493886 100644
--- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownGroup.vue
@@ -24,31 +24,21 @@
 </template>
 
 <script setup lang="ts">
-import type {ClassValue, ColorVariant} from '../../types'
+import type {BDropdownGroupProps} from '../../types'
 import {computed, toRef} from 'vue'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    ariaDescribedby?: string
-    header?: string
-    headerClass?: ClassValue
-    headerTag?: string
-    headerVariant?: ColorVariant | null
-    id?: string
-  }>(),
-  {
-    ariaDescribedby: undefined,
-    header: undefined,
-    headerClass: undefined,
-    headerTag: 'header',
-    headerVariant: null,
-    id: undefined,
-  }
-)
+const props = withDefaults(defineProps<BDropdownGroupProps>(), {
+  ariaDescribedby: undefined,
+  header: undefined,
+  headerClass: undefined,
+  headerTag: 'header',
+  headerVariant: null,
+  id: undefined,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
index ca2cc5172..aa62b84f2 100644
--- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
+++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import BLink from '../BLink/BLink.vue'
 import {computed, inject, toRef, useAttrs} from 'vue'
-import type {AttrsValue, BLinkProps, ClassValue} from '../../types'
+import type {BDropdownItemProps} from '../../types'
 import {useBLinkHelper} from '../../composables'
 import {collapseInjectionKey, dropdownInjectionKey, navbarInjectionKey} from '../../utils'
 
@@ -31,41 +31,33 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<
-    {
-      linkClass?: ClassValue
-      wrapperAttrs?: Readonly<AttrsValue>
-    } & Omit<BLinkProps, 'routerTag'>
-  >(),
-  {
-    wrapperAttrs: undefined,
-    // Link props
-    linkClass: undefined,
-    variant: null,
-    // All others use defaults
-    active: undefined,
-    activeClass: undefined,
-    append: undefined,
-    disabled: undefined,
-    exactActiveClass: undefined,
-    href: undefined,
-    icon: undefined,
-    opacity: undefined,
-    opacityHover: undefined,
-    rel: undefined,
-    replace: undefined,
-    routerComponentName: undefined,
-    target: undefined,
-    to: undefined,
-    underlineOffset: undefined,
-    underlineOffsetHover: undefined,
-    underlineOpacity: undefined,
-    underlineOpacityHover: undefined,
-    underlineVariant: undefined,
-    // End link props
-  }
-)
+const props = withDefaults(defineProps<BDropdownItemProps>(), {
+  wrapperAttrs: undefined,
+  // Link props
+  linkClass: undefined,
+  variant: null,
+  // All others use defaults
+  active: undefined,
+  activeClass: undefined,
+  append: undefined,
+  disabled: undefined,
+  exactActiveClass: undefined,
+  href: undefined,
+  icon: undefined,
+  opacity: undefined,
+  opacityHover: undefined,
+  rel: undefined,
+  replace: undefined,
+  routerComponentName: undefined,
+  target: undefined,
+  to: undefined,
+  underlineOffset: undefined,
+  underlineOffsetHover: undefined,
+  underlineOpacity: undefined,
+  underlineOpacityHover: undefined,
+  underlineVariant: undefined,
+  // End link props
+})
 
 const emit = defineEmits<{
   click: [value: MouseEvent]
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItemButton.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItemButton.vue
index f7c302fca..ee170f061 100644
--- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItemButton.vue
+++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItemButton.vue
@@ -14,29 +14,20 @@
 </template>
 
 <script setup lang="ts">
-import type {ClassValue, ColorVariant} from '../../types'
+import type {BDropdownItemButtonProps} from '../../types'
 import {computed} from 'vue'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    active?: boolean
-    activeClass?: ClassValue
-    buttonClass?: ClassValue
-    disabled?: boolean
-    variant?: ColorVariant | null
-  }>(),
-  {
-    active: false,
-    activeClass: 'active',
-    buttonClass: undefined,
-    disabled: false,
-    variant: null,
-  }
-)
+const props = withDefaults(defineProps<BDropdownItemButtonProps>(), {
+  active: false,
+  activeClass: 'active',
+  buttonClass: undefined,
+  disabled: false,
+  variant: null,
+})
 
 const emit = defineEmits<{
   click: [value: MouseEvent]
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownText.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownText.vue
index 1f882f822..647c4c1d1 100644
--- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownText.vue
+++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownText.vue
@@ -9,14 +9,11 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    text?: string
-  }>(),
-  {
-    text: '',
-  }
-)
+import type {BDropdownTextProps} from '../../types'
+
+withDefaults(defineProps<BDropdownTextProps>(), {
+  text: '',
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BForm/BFormFloatingLabel.vue b/packages/bootstrap-vue-next/src/components/BForm/BFormFloatingLabel.vue
index bd78f1983..25711d54c 100644
--- a/packages/bootstrap-vue-next/src/components/BForm/BFormFloatingLabel.vue
+++ b/packages/bootstrap-vue-next/src/components/BForm/BFormFloatingLabel.vue
@@ -12,18 +12,13 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    label?: string
-    labelFor?: string
-    text?: string
-  }>(),
-  {
-    label: undefined,
-    labelFor: undefined,
-    text: undefined,
-  }
-)
+import type {BFormFloatingLabelProps} from '../../types'
+
+withDefaults(defineProps<BFormFloatingLabelProps>(), {
+  label: undefined,
+  labelFor: undefined,
+  text: undefined,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BForm/BFormRow.vue b/packages/bootstrap-vue-next/src/components/BForm/BFormRow.vue
index bd18a212c..6e85f6fcc 100644
--- a/packages/bootstrap-vue-next/src/components/BForm/BFormRow.vue
+++ b/packages/bootstrap-vue-next/src/components/BForm/BFormRow.vue
@@ -5,14 +5,11 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    tag?: string
-  }>(),
-  {
-    tag: 'div',
-  }
-)
+import type {BFormRowProps} from '../../types'
+
+withDefaults(defineProps<BFormRowProps>(), {
+  tag: 'div',
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BForm/BFormText.vue b/packages/bootstrap-vue-next/src/components/BForm/BFormText.vue
index 9cc6e6431..dd52adff3 100644
--- a/packages/bootstrap-vue-next/src/components/BForm/BFormText.vue
+++ b/packages/bootstrap-vue-next/src/components/BForm/BFormText.vue
@@ -8,24 +8,15 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import type {TextColorVariant} from '../../types'
+import type {BFormTextProps} from '../../types'
 
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    inline?: boolean
-    tag?: string
-    text?: string
-    textVariant?: TextColorVariant | null
-  }>(),
-  {
-    id: undefined,
-    inline: false,
-    tag: 'small',
-    text: undefined,
-    textVariant: 'body-secondary',
-  }
-)
+const props = withDefaults(defineProps<BFormTextProps>(), {
+  id: undefined,
+  inline: false,
+  tag: 'small',
+  text: undefined,
+  textVariant: 'body-secondary',
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
index 0408ff033..7ead14ab6 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
@@ -26,10 +26,10 @@
 </template>
 
 <script setup lang="ts">
-import {useFocus, useVModel} from '@vueuse/core'
+import {useFocus} from '@vueuse/core'
 import {computed, inject, ref, toRef} from 'vue'
 import {getClasses, getInputClasses, getLabelClasses, useId} from '../../composables'
-import type {ButtonVariant, CheckboxValue, Size} from '../../types'
+import type {BFormCheckboxProps, CheckboxValue} from '../../types'
 import {checkboxGroupKey, isEmptySlot} from '../../utils'
 import RenderComponentOrSkip from '../RenderComponentOrSkip.vue'
 
@@ -37,65 +37,38 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    ariaLabel?: string
-    ariaLabelledby?: string
-    autofocus?: boolean
-    button?: boolean
-    buttonGroup?: boolean
-    buttonVariant?: ButtonVariant | null
-    disabled?: boolean
-    form?: string
-    id?: string
-    indeterminate?: boolean
-    inline?: boolean
-    modelValue?: CheckboxValue | readonly CheckboxValue[]
-    name?: string
-    plain?: boolean
-    required?: boolean
-    size?: Size
-    state?: boolean | null
-    switch?: boolean
-    uncheckedValue?: CheckboxValue
-    value?: CheckboxValue
-  }>(),
-  {
-    ariaLabel: undefined,
-    ariaLabelledby: undefined,
-    autofocus: false,
-    button: false,
-    buttonGroup: false,
-    buttonVariant: null,
-    disabled: false,
-    form: undefined,
-    id: undefined,
-    indeterminate: false,
-    inline: false,
-    modelValue: undefined,
-    name: undefined,
-    plain: false,
-    required: undefined,
-    size: undefined,
-    state: null,
-    switch: false,
-    uncheckedValue: false,
-    value: true,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [value: CheckboxValue | CheckboxValue[]]
-  'update:indeterminate': [value: boolean]
-}>()
+const props = withDefaults(defineProps<BFormCheckboxProps>(), {
+  ariaLabel: undefined,
+  ariaLabelledby: undefined,
+  autofocus: false,
+  button: false,
+  buttonGroup: false,
+  buttonVariant: null,
+  disabled: false,
+  form: undefined,
+  id: undefined,
+  inline: false,
+  name: undefined,
+  plain: false,
+  required: undefined,
+  size: undefined,
+  state: null,
+  switch: false,
+  uncheckedValue: false,
+  value: true,
+})
 
 const slots = defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   default?: (props: Record<string, never>) => any
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
-const indeterminate = useVModel(props, 'indeterminate', emit)
+const modelValue = defineModel<CheckboxValue | CheckboxValue[]>({
+  default: undefined,
+})
+const indeterminate = defineModel<boolean>('indeterminate', {
+  default: false,
+})
 
 const computedId = useId(() => props.id, 'form-check')
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
index e12d78df6..108c587d5 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
@@ -23,64 +23,37 @@
 <script setup lang="ts">
 import {computed, nextTick, provide, ref, toRef, watch} from 'vue'
 import BFormCheckbox from './BFormCheckbox.vue'
-import type {AriaInvalid, ButtonVariant, CheckboxOptionRaw, CheckboxValue, Size} from '../../types'
+import type {BFormCheckboxGroupProps, CheckboxValue} from '../../types'
 import {getGroupAttr, getGroupClasses, useId} from '../../composables'
 import {checkboxGroupKey} from '../../utils'
-import {useFocus, useVModel} from '@vueuse/core'
+import {useFocus} from '@vueuse/core'
 
-const props = withDefaults(
-  defineProps<{
-    ariaInvalid?: AriaInvalid
-    autofocus?: boolean
-    buttonVariant?: ButtonVariant | null
-    buttons?: boolean
-    disabled?: boolean
-    disabledField?: string
-    form?: string
-    htmlField?: string
-    id?: string
-    modelValue?: readonly CheckboxValue[]
-    name?: string
-    options?: readonly CheckboxOptionRaw[]
-    plain?: boolean
-    required?: boolean
-    size?: Size
-    stacked?: boolean
-    state?: boolean | null
-    switches?: boolean
-    textField?: string
-    validated?: boolean
-    valueField?: string
-  }>(),
-  {
-    ariaInvalid: undefined,
-    autofocus: false,
-    buttonVariant: 'secondary',
-    buttons: false,
-    disabled: false,
-    disabledField: 'disabled',
-    form: undefined,
-    htmlField: 'html',
-    id: undefined,
-    modelValue: () => [],
-    name: undefined,
-    options: () => [],
-    plain: false,
-    required: false,
-    size: 'md',
-    stacked: false,
-    state: null,
-    switches: false,
-    textField: 'text',
-    validated: false,
-    valueField: 'value',
-  }
-)
+const props = withDefaults(defineProps<BFormCheckboxGroupProps>(), {
+  ariaInvalid: undefined,
+  autofocus: false,
+  buttonVariant: 'secondary',
+  buttons: false,
+  disabled: false,
+  disabledField: 'disabled',
+  form: undefined,
+  htmlField: 'html',
+  id: undefined,
+  name: undefined,
+  options: () => [],
+  plain: false,
+  required: false,
+  size: 'md',
+  stacked: false,
+  state: null,
+  switches: false,
+  textField: 'text',
+  validated: false,
+  valueField: 'value',
+})
 
 const emit = defineEmits<{
-  'change': [value: CheckboxValue[]]
-  'input': [value: CheckboxValue[]]
-  'update:modelValue': [value: CheckboxValue[]]
+  change: [value: CheckboxValue[]]
+  input: [value: CheckboxValue[]]
 }>()
 
 defineSlots<{
@@ -90,7 +63,9 @@ defineSlots<{
   first?: (props: Record<string, never>) => any
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<CheckboxValue[]>({
+  default: () => [],
+})
 
 const computedId = useId(() => props.id, 'checkbox')
 const computedName = useId(() => props.name, 'checkbox')
diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
index abaf9057a..4192b5b40 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
@@ -28,8 +28,8 @@
 
 <script setup lang="ts">
 import {computed, ref, toRef, watch} from 'vue'
-import {useFocus, useVModel} from '@vueuse/core'
-import type {ClassValue, Size} from '../../types'
+import {useFocus} from '@vueuse/core'
+import type {BFormFileProps} from '../../types'
 import {useId, useStateClass} from '../../composables'
 import {isEmptySlot} from '../../utils'
 
@@ -42,53 +42,29 @@ const slots = defineSlots<{
   label?: (props: Record<string, never>) => any
 }>()
 
-const props = withDefaults(
-  defineProps<{
-    accept?: string | readonly string[]
-    autofocus?: boolean
-    capture?: boolean | 'user' | 'environment'
-    directory?: boolean
-    disabled?: boolean
-    form?: string
-    id?: string
-    label?: string
-    labelClass?: ClassValue
-    modelValue?: readonly File[] | File | null
-    multiple?: boolean
-    name?: string
-    noDrop?: boolean
-    noTraverse?: boolean
-    required?: boolean
-    size?: Size
-    state?: boolean | null
-  }>(),
-  {
-    accept: '',
-    autofocus: false,
-    // eslint-disable-next-line vue/require-valid-default-prop
-    capture: false,
-    directory: false,
-    disabled: false,
-    form: undefined,
-    id: undefined,
-    label: '',
-    labelClass: undefined,
-    modelValue: null,
-    multiple: false,
-    name: undefined,
-    noDrop: false,
-    noTraverse: false,
-    required: false,
-    size: undefined,
-    state: null,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [value: File | File[] | null]
-}>()
+const props = withDefaults(defineProps<BFormFileProps>(), {
+  accept: '',
+  autofocus: false,
+  // eslint-disable-next-line vue/require-valid-default-prop
+  capture: false,
+  directory: false,
+  disabled: false,
+  form: undefined,
+  id: undefined,
+  label: '',
+  labelClass: undefined,
+  multiple: false,
+  name: undefined,
+  noDrop: false,
+  noTraverse: false,
+  required: false,
+  size: undefined,
+  state: null,
+})
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<File | File[] | null>({
+  default: null,
+})
 const computedId = useId(() => props.id)
 
 // TODO noTraverse is not implemented yet
diff --git a/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue b/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
index b1983ccac..b99f7134a 100644
--- a/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
@@ -162,7 +162,10 @@ export default defineComponent({
 
     const stateClass = useStateClass(() => props.state)
 
-    const computedAriaInvalid = useAriaInvalid(() => props.ariaInvalid, () => props.state)
+    const computedAriaInvalid = useAriaInvalid(
+      () => props.ariaInvalid,
+      () => props.state
+    )
 
     watch(
       () => ariaDescribedby,
diff --git a/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue b/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
index b38098a75..34cd5f769 100644
--- a/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
@@ -27,49 +27,38 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import {useFormInput, useStateClass} from '../../composables'
-import type {CommonInputProps, InputType, Numberish} from '../../types'
+import type {BFormInputProps, Numberish} from '../../types'
 
-const props = withDefaults(
-  defineProps<
-    {
-      max?: Numberish
-      min?: Numberish
-      // noWheel: {type: Boolean, default: false}, TODO: not implemented yet
-      step?: Numberish
-      type?: InputType
-    } & CommonInputProps
-  >(),
-  {
-    max: undefined,
-    min: undefined,
-    step: undefined,
-    type: 'text',
-    // CommonInputProps
-    ariaInvalid: undefined,
-    autocomplete: undefined,
-    autofocus: false,
-    debounce: 0,
-    debounceMaxWait: NaN,
-    disabled: false,
-    form: undefined,
-    formatter: undefined,
-    id: undefined,
-    lazy: false,
-    lazyFormatter: false,
-    list: undefined,
-    modelValue: '',
-    name: undefined,
-    number: false,
-    placeholder: undefined,
-    plaintext: false,
-    readonly: false,
-    required: false,
-    size: undefined,
-    state: null,
-    trim: false,
-    // End CommonInputProps
-  }
-)
+const props = withDefaults(defineProps<BFormInputProps>(), {
+  max: undefined,
+  min: undefined,
+  step: undefined,
+  type: 'text',
+  // CommonInputProps
+  ariaInvalid: undefined,
+  autocomplete: undefined,
+  autofocus: false,
+  debounce: 0,
+  debounceMaxWait: NaN,
+  disabled: false,
+  form: undefined,
+  formatter: undefined,
+  id: undefined,
+  lazy: false,
+  lazyFormatter: false,
+  list: undefined,
+  modelValue: '',
+  name: undefined,
+  number: false,
+  placeholder: undefined,
+  plaintext: false,
+  readonly: false,
+  required: false,
+  size: undefined,
+  state: null,
+  trim: false,
+  // End CommonInputProps
+})
 
 const emit = defineEmits<{
   'update:modelValue': [val: Numberish | null]
diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
index 8aa457705..fed8840e8 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
@@ -23,10 +23,10 @@
 </template>
 
 <script setup lang="ts">
-import {useFocus, useVModel} from '@vueuse/core'
+import {useFocus} from '@vueuse/core'
 import {computed, inject, ref, toRef} from 'vue'
 import {getClasses, getInputClasses, getLabelClasses, useId} from '../../composables'
-import type {ButtonVariant, RadioValue, Size} from '../../types'
+import type {BFormRadioProps, RadioValue} from '../../types'
 import {isEmptySlot, radioGroupKey} from '../../utils'
 import RenderComponentOrSkip from '../RenderComponentOrSkip.vue'
 
@@ -34,57 +34,33 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    ariaLabel?: string
-    ariaLabelledby?: string
-    autofocus?: boolean
-    button?: boolean
-    buttonGroup?: boolean
-    buttonVariant?: ButtonVariant | null
-    disabled?: boolean
-    form?: string
-    id?: string
-    inline?: boolean
-    modelValue?: RadioValue
-    name?: string
-    plain?: boolean
-    required?: boolean
-    size?: Size
-    state?: boolean | null
-    value?: RadioValue
-  }>(),
-  {
-    ariaLabel: undefined,
-    ariaLabelledby: undefined,
-    autofocus: false,
-    button: false,
-    buttonGroup: false,
-    buttonVariant: null,
-    disabled: false,
-    form: undefined,
-    id: undefined,
-    inline: false,
-    modelValue: undefined,
-    name: undefined,
-    plain: false,
-    required: false,
-    size: undefined,
-    state: null,
-    value: true,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [value: RadioValue]
-}>()
+const props = withDefaults(defineProps<BFormRadioProps>(), {
+  ariaLabel: undefined,
+  ariaLabelledby: undefined,
+  autofocus: false,
+  button: false,
+  buttonGroup: false,
+  buttonVariant: null,
+  disabled: false,
+  form: undefined,
+  id: undefined,
+  inline: false,
+  name: undefined,
+  plain: false,
+  required: false,
+  size: undefined,
+  state: null,
+  value: true,
+})
 
 const slots = defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   default?: (props: Record<string, never>) => any
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<RadioValue>({
+  default: undefined,
+})
 
 const computedId = useId(() => props.id, 'form-check')
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
index 919e56e28..e68c0c881 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
@@ -26,64 +26,38 @@
 </template>
 
 <script setup lang="ts">
-import type {AriaInvalid, ButtonVariant, RadioOptionRaw, RadioValue, Size} from '../../types'
+import type {BFormRadioGroupProps, RadioValue} from '../../types'
 import {computed, nextTick, provide, ref, toRef, watch} from 'vue'
 import {radioGroupKey} from '../../utils'
 import BFormRadio from './BFormRadio.vue'
 import {getGroupAttr, getGroupClasses, useId} from '../../composables'
-import {useFocus, useVModel} from '@vueuse/core'
+import {useFocus} from '@vueuse/core'
 
-const props = withDefaults(
-  defineProps<{
-    ariaInvalid?: AriaInvalid
-    autofocus?: boolean
-    buttonVariant?: ButtonVariant | null
-    buttons?: boolean
-    disabled?: boolean
-    disabledField?: string
-    form?: string
-    htmlField?: string
-    id?: string
-    modelValue?: RadioValue
-    name?: string
-    options?: readonly RadioOptionRaw[]
-    plain?: boolean
-    required?: boolean
-    size?: Size
-    stacked?: boolean
-    state?: boolean | null
-    textField?: string
-    validated?: boolean
-    valueField?: string
-  }>(),
-  {
-    ariaInvalid: undefined,
-    autofocus: false,
-    buttonVariant: 'secondary',
-    buttons: false,
-    disabled: false,
-    disabledField: 'disabled',
-    form: undefined,
-    htmlField: 'html',
-    id: undefined,
-    modelValue: null,
-    name: undefined,
-    options: () => [],
-    plain: false,
-    required: false,
-    size: 'md',
-    stacked: false,
-    state: null,
-    textField: 'text',
-    validated: false,
-    valueField: 'value',
-  }
-)
+const props = withDefaults(defineProps<BFormRadioGroupProps>(), {
+  ariaInvalid: undefined,
+  autofocus: false,
+  buttonVariant: 'secondary',
+  buttons: false,
+  disabled: false,
+  disabledField: 'disabled',
+  form: undefined,
+  htmlField: 'html',
+  id: undefined,
+  name: undefined,
+  options: () => [],
+  plain: false,
+  required: false,
+  size: 'md',
+  stacked: false,
+  state: null,
+  textField: 'text',
+  validated: false,
+  valueField: 'value',
+})
 
 const emit = defineEmits<{
-  'change': [value: RadioValue]
-  'input': [value: RadioValue]
-  'update:modelValue': [value: RadioValue]
+  change: [value: RadioValue]
+  input: [value: RadioValue]
 }>()
 
 defineSlots<{
@@ -93,7 +67,9 @@ defineSlots<{
   first?: (props: Record<string, never>) => any
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<RadioValue>({
+  default: null,
+})
 
 const computedId = useId(() => props.id, 'radio')
 const computedName = useId(() => props.name, 'checkbox')
diff --git a/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue b/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue
index c0e26242a..6b123dd1d 100644
--- a/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue
@@ -36,71 +36,36 @@
   </select>
 </template>
 
-<script setup lang="ts" generic="T = unknown">
-import type {AriaInvalid, ComplexSelectOptionRaw, Numberish, SelectOption, Size} from '../../types'
+<script setup lang="ts" generic="T">
+import type {BFormSelectProps, ComplexSelectOptionRaw, SelectOption} from '../../types'
 import {computed, ref, toRef} from 'vue'
 import BFormSelectOption from './BFormSelectOption.vue'
 import BFormSelectOptionGroup from './BFormSelectOptionGroup.vue'
 import {useAriaInvalid, useFormSelect, useId, useStateClass} from '../../composables'
-import {useFocus, useToNumber, useVModel} from '@vueuse/core'
-
-const props = withDefaults(
-  defineProps<{
-    ariaInvalid?: AriaInvalid
-    autofocus?: boolean
-    disabled?: boolean
-    disabledField?: string
-    form?: string
-    htmlField?: string
-    id?: string
-    labelField?: string
-    modelValue?:
-      | boolean
-      | string
-      | readonly unknown[]
-      | Readonly<Record<string, unknown>>
-      | number
-      | null
-    multiple?: boolean
-    name?: string
-    options?: readonly (unknown | Record<string, unknown>)[]
-    optionsField?: string
-    plain?: boolean
-    required?: boolean
-    selectSize?: Numberish
-    size?: Size
-    state?: boolean | null
-    textField?: string
-    valueField?: string
-  }>(),
-  {
-    ariaInvalid: undefined,
-    autofocus: false,
-    disabled: false,
-    disabledField: 'disabled',
-    form: undefined,
-    htmlField: 'html',
-    id: undefined,
-    labelField: 'label',
-    modelValue: '',
-    multiple: false,
-    name: undefined,
-    // eslint-disable-next-line vue/require-valid-default-prop
-    options: () => [],
-    optionsField: 'options',
-    plain: false,
-    required: false,
-    selectSize: 0,
-    size: 'md',
-    state: null,
-    textField: 'text',
-    valueField: 'value',
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [value: unknown]
-}>()
+import {useFocus, useToNumber} from '@vueuse/core'
+
+const props = withDefaults(defineProps<BFormSelectProps>(), {
+  ariaInvalid: undefined,
+  autofocus: false,
+  disabled: false,
+  disabledField: 'disabled',
+  form: undefined,
+  htmlField: 'html',
+  id: undefined,
+  labelField: 'label',
+  multiple: false,
+  name: undefined,
+  // eslint-disable-next-line vue/require-valid-default-prop
+  options: () => [],
+  optionsField: 'options',
+  plain: false,
+  required: false,
+  selectSize: 0,
+  size: 'md',
+  state: null,
+  textField: 'text',
+  valueField: 'value',
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -109,7 +74,10 @@ defineSlots<{
   first?: (props: Record<string, never>) => any
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<T>({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: '' as any,
+})
 
 const computedId = useId(() => props.id, 'input')
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOption.vue b/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOption.vue
index df0f2eef9..d306b0ca7 100644
--- a/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOption.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOption.vue
@@ -5,16 +5,12 @@
 </template>
 
 <script setup lang="ts" generic="T">
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    value?: T
-  }>(),
-  {
-    disabled: false,
-    value: undefined,
-  }
-)
+import type {BFormSelectOptionProps} from '../../types'
+
+const props = withDefaults(defineProps<BFormSelectOptionProps<T>>(), {
+  disabled: false,
+  value: undefined,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOptionGroup.vue b/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOptionGroup.vue
index 9db933878..f42a7fb01 100644
--- a/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOptionGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOptionGroup.vue
@@ -18,30 +18,20 @@
   </optgroup>
 </template>
 
-<script setup lang="ts" generic="T = unknown">
+<script setup lang="ts" generic="T">
 import BFormSelectOption from './BFormSelectOption.vue'
 import {useFormSelect} from '../../composables'
-import type {SelectOption} from '../../types'
+import type {BFormSelectOptionGroupProps, SelectOption} from '../../types'
 import {computed} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    disabledField?: string
-    htmlField?: string
-    label?: string
-    options?: readonly (unknown | Record<string, unknown>)[]
-    textField?: string
-    valueField?: string
-  }>(),
-  {
-    disabledField: 'disabled',
-    htmlField: 'html',
-    label: undefined,
-    options: () => [],
-    textField: 'text',
-    valueField: 'value',
-  }
-)
+const props = withDefaults(defineProps<BFormSelectOptionGroupProps>(), {
+  disabledField: 'disabled',
+  htmlField: 'html',
+  label: undefined,
+  options: () => [],
+  textField: 'text',
+  valueField: 'value',
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue b/packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue
index 0f52a4325..55f28c287 100644
--- a/packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue
@@ -71,7 +71,7 @@
 
 <script setup lang="ts">
 import {computed, ref, toRef} from 'vue'
-import type {ButtonType, Numberish, Size} from '../../types'
+import type {BFormSpinbuttonProps, ButtonType} from '../../types'
 import {eventOnOff} from '../../utils/event'
 import {
   CODE_DOWN,
@@ -81,73 +81,41 @@ import {
   CODE_PAGEUP,
   CODE_UP,
 } from '../../constants/codes'
-import {onKeyStroke, useFocus, useToNumber, useVModel} from '@vueuse/core'
+import {onKeyStroke, useFocus, useToNumber} from '@vueuse/core'
 import {useId, useRtl} from '../../composables'
 
 const KEY_CODES = [CODE_UP, CODE_DOWN, CODE_HOME, CODE_END, CODE_PAGEUP, CODE_PAGEDOWN]
 
-const props = withDefaults(
-  defineProps<{
-    ariaControls?: string
-    ariaLabel?: string
-    disabled?: boolean
-    form?: string
-    formatterFn?: (value: number) => string
-    id?: string
-    inline?: boolean
-    labelDecrement?: string
-    labelIncrement?: string
-    locale?: string
-    max?: Numberish
-    min?: Numberish
-    modelValue?: number | null
-    name?: string
-    placeholder?: string
-    readonly?: boolean
-    repeatDelay?: Numberish
-    repeatInterval?: Numberish
-    repeatStepMultiplier?: Numberish
-    repeatThreshold?: Numberish
-    required?: boolean
-    size?: Size
-    state?: boolean | null
-    step?: Numberish
-    vertical?: boolean
-    wrap?: boolean
-  }>(),
-  {
-    ariaControls: undefined,
-    ariaLabel: undefined,
-    disabled: false,
-    form: undefined,
-    formatterFn: undefined,
-    id: undefined,
-    inline: false,
-    labelDecrement: 'Decrement',
-    labelIncrement: 'Increment',
-    locale: undefined,
-    max: defaultValues.max,
-    min: defaultValues.min,
-    modelValue: null,
-    name: undefined,
-    placeholder: undefined,
-    readonly: false,
-    repeatDelay: defaultValues.repeatDelay,
-    repeatInterval: defaultValues.repeatInterval,
-    repeatStepMultiplier: defaultValues.repeatMultiplier,
-    repeatThreshold: defaultValues.repeatThreshold,
-    required: false,
-    size: undefined,
-    state: null,
-    step: defaultValues.step,
-    vertical: false,
-    wrap: false,
-  }
-)
+const props = withDefaults(defineProps<BFormSpinbuttonProps>(), {
+  ariaControls: undefined,
+  ariaLabel: undefined,
+  disabled: false,
+  form: undefined,
+  formatterFn: undefined,
+  id: undefined,
+  inline: false,
+  labelDecrement: 'Decrement',
+  labelIncrement: 'Increment',
+  locale: undefined,
+  max: defaultValues.max,
+  min: defaultValues.min,
+  name: undefined,
+  placeholder: undefined,
+  readonly: false,
+  repeatDelay: defaultValues.repeatDelay,
+  repeatInterval: defaultValues.repeatInterval,
+  repeatStepMultiplier: defaultValues.repeatMultiplier,
+  repeatThreshold: defaultValues.repeatThreshold,
+  required: false,
+  size: undefined,
+  state: null,
+  step: defaultValues.step,
+  vertical: false,
+  wrap: false,
+})
 
 const emit = defineEmits<{
-  'change': [value: number | null]
-  'update:modelValue': [value: number | null]
+  change: [value: number | null]
 }>()
 
 defineSlots<{
@@ -157,7 +125,9 @@ defineSlots<{
   increment?: (props: {hasFocus: boolean}) => any
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<number | null>({
+  default: null,
+})
 
 // TODO focus system
 const element = ref<HTMLElement | null>(null)
diff --git a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTag.vue b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTag.vue
index e74c1e565..5dcb39bb2 100644
--- a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTag.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTag.vue
@@ -25,31 +25,19 @@
 <script setup lang="ts">
 import {computed, toRef} from 'vue'
 import {useId} from '../../composables'
-import type {ColorVariant} from '../../types'
+import type {BFormTagProps} from '../../types'
 import BCloseButton from '../BButton/BCloseButton.vue'
 
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    id?: string
-    noRemove?: boolean
-    pill?: boolean
-    removeLabel?: string
-    tag?: string
-    title?: string
-    variant?: ColorVariant | null
-  }>(),
-  {
-    disabled: false,
-    id: undefined,
-    noRemove: false,
-    pill: false,
-    removeLabel: 'Remove tag',
-    tag: 'span',
-    title: undefined,
-    variant: 'secondary',
-  }
-)
+const props = withDefaults(defineProps<BFormTagProps>(), {
+  disabled: false,
+  id: undefined,
+  noRemove: false,
+  pill: false,
+  removeLabel: 'Remove tag',
+  tag: 'span',
+  title: undefined,
+  variant: 'secondary',
+})
 
 const emit = defineEmits<{
   remove: [value: string]
diff --git a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
index 45db11a9b..32312cb07 100644
--- a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
@@ -119,86 +119,42 @@
 import {computed, ref, toRef} from 'vue'
 import BFormTag from './BFormTag.vue'
 import {useId, useStateClass} from '../../composables'
-import type {
-  AttrsValue,
-  ButtonVariant,
-  ClassValue,
-  ColorVariant,
-  InputType,
-  Numberish,
-  Size,
-} from '../../types'
-import {onKeyStroke, syncRef, useFocus, useToNumber, useVModel} from '@vueuse/core'
+import type {BFormTagsProps, ClassValue, ColorVariant} from '../../types'
+import {onKeyStroke, syncRef, useFocus, useToNumber} from '@vueuse/core'
 import {escapeRegExpChars} from '../../utils'
 
-const props = withDefaults(
-  defineProps<{
-    addButtonText?: string
-    addButtonVariant?: ButtonVariant | null
-    addOnChange?: boolean
-    autofocus?: boolean
-    disabled?: boolean
-    duplicateTagText?: string
-    form?: string
-    inputAttrs?: Readonly<AttrsValue>
-    inputClass?: ClassValue
-    inputId?: string
-    inputType?: InputType
-    invalidTagText?: string
-    limit?: Numberish
-    limitTagsText?: string
-    modelValue?: readonly string[]
-    name?: string
-    noAddOnEnter?: boolean
-    noOuterFocus?: boolean
-    noTagRemove?: boolean
-    placeholder?: string
-    removeOnDelete?: boolean
-    required?: boolean
-    separator?: string | readonly string[]
-    size?: Size
-    state?: boolean | null
-    tagClass?: ClassValue
-    tagPills?: boolean
-    tagRemoveLabel?: string
-    tagRemovedLabel?: string
-    tagValidator?: (t: string) => boolean
-    tagVariant?: ColorVariant | null
-  }>(),
-  {
-    addButtonText: 'Add',
-    addButtonVariant: 'outline-secondary',
-    addOnChange: false,
-    autofocus: false,
-    disabled: false,
-    duplicateTagText: 'Duplicate tag(s)',
-    form: undefined,
-    inputAttrs: undefined,
-    inputClass: undefined,
-    inputId: undefined,
-    inputType: 'text',
-    invalidTagText: 'Invalid tag(s)',
-    limit: undefined,
-    limitTagsText: 'Tag limit reached',
-    modelValue: () => [],
-    name: undefined,
-    noAddOnEnter: false,
-    noOuterFocus: false,
-    noTagRemove: false,
-    placeholder: 'Add tag...',
-    removeOnDelete: false,
-    required: false,
-    separator: undefined,
-    size: 'md',
-    state: null,
-    tagClass: undefined,
-    tagPills: false,
-    tagRemoveLabel: undefined,
-    tagRemovedLabel: 'Tag removed',
-    tagValidator: () => true,
-    tagVariant: 'secondary',
-  }
-)
+const props = withDefaults(defineProps<BFormTagsProps>(), {
+  addButtonText: 'Add',
+  addButtonVariant: 'outline-secondary',
+  addOnChange: false,
+  autofocus: false,
+  disabled: false,
+  duplicateTagText: 'Duplicate tag(s)',
+  form: undefined,
+  inputAttrs: undefined,
+  inputClass: undefined,
+  inputId: undefined,
+  inputType: 'text',
+  invalidTagText: 'Invalid tag(s)',
+  limit: undefined,
+  limitTagsText: 'Tag limit reached',
+  name: undefined,
+  noAddOnEnter: false,
+  noOuterFocus: false,
+  noTagRemove: false,
+  placeholder: 'Add tag...',
+  removeOnDelete: false,
+  required: false,
+  separator: undefined,
+  size: 'md',
+  state: null,
+  tagClass: undefined,
+  tagPills: false,
+  tagRemoveLabel: undefined,
+  tagRemovedLabel: 'Tag removed',
+  tagValidator: () => true,
+  tagVariant: 'secondary',
+})
 
 const emit = defineEmits<{
   'blur': [value: FocusEvent]
@@ -207,7 +163,6 @@ const emit = defineEmits<{
   'focusout': [value: FocusEvent]
   'input': [value: string[]]
   'tag-state': [...args: string[][]]
-  'update:modelValue': [value: string[]]
 }>()
 
 defineSlots<{
@@ -226,7 +181,9 @@ defineSlots<{
   }) => any
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit)
+const modelValue = defineModel<string[]>({
+  default: () => [],
+})
 
 const computedId = useId()
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue b/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
index 7f5aa3241..f4ab94284 100644
--- a/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
@@ -23,48 +23,39 @@
 </template>
 
 <script setup lang="ts">
-import type {CommonInputProps, Numberish} from '../../types'
+import type {BFormTextareaProps, Numberish} from '../../types'
 import {computed, type CSSProperties} from 'vue'
 import {useFormInput, useStateClass} from '../../composables'
 
-const props = withDefaults(
-  defineProps<
-    {
-      noResize?: boolean
-      rows?: Numberish
-      wrap?: string
-    } & CommonInputProps
-  >(),
-  {
-    // CommonInputProps
-    ariaInvalid: undefined,
-    autocomplete: undefined,
-    autofocus: false,
-    debounce: 0,
-    debounceMaxWait: NaN,
-    disabled: false,
-    form: undefined,
-    formatter: undefined,
-    id: undefined,
-    lazy: false,
-    lazyFormatter: false,
-    list: undefined,
-    modelValue: '',
-    name: undefined,
-    number: false,
-    placeholder: undefined,
-    plaintext: false,
-    readonly: false,
-    required: false,
-    size: undefined,
-    state: null,
-    trim: false,
-    // End CommonInputProps
-    noResize: false,
-    rows: 2,
-    wrap: 'soft',
-  }
-)
+const props = withDefaults(defineProps<BFormTextareaProps>(), {
+  // CommonInputProps
+  ariaInvalid: undefined,
+  autocomplete: undefined,
+  autofocus: false,
+  debounce: 0,
+  debounceMaxWait: NaN,
+  disabled: false,
+  form: undefined,
+  formatter: undefined,
+  id: undefined,
+  lazy: false,
+  lazyFormatter: false,
+  list: undefined,
+  modelValue: '',
+  name: undefined,
+  number: false,
+  placeholder: undefined,
+  plaintext: false,
+  readonly: false,
+  required: false,
+  size: undefined,
+  state: null,
+  trim: false,
+  // End CommonInputProps
+  noResize: false,
+  rows: 2,
+  wrap: 'soft',
+})
 
 const emit = defineEmits<{
   'update:modelValue': [val: Numberish | null]
diff --git a/packages/bootstrap-vue-next/src/components/BInputGroup/BInputGroup.vue b/packages/bootstrap-vue-next/src/components/BInputGroup/BInputGroup.vue
index 3ed6c3b78..2a321e43f 100644
--- a/packages/bootstrap-vue-next/src/components/BInputGroup/BInputGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BInputGroup/BInputGroup.vue
@@ -19,29 +19,18 @@
 </template>
 
 <script setup lang="ts">
-import type {Size} from '../../types'
+import type {BInputGroupProps} from '../../types'
 import {computed, toRef} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    append?: string
-    appendHtml?: string
-    id?: string
-    prepend?: string
-    prependHtml?: string
-    size?: Size
-    tag?: string
-  }>(),
-  {
-    append: undefined,
-    appendHtml: undefined,
-    id: undefined,
-    prepend: undefined,
-    prependHtml: undefined,
-    size: 'md',
-    tag: 'div',
-  }
-)
+const props = withDefaults(defineProps<BInputGroupProps>(), {
+  append: undefined,
+  appendHtml: undefined,
+  id: undefined,
+  prepend: undefined,
+  prependHtml: undefined,
+  size: 'md',
+  tag: 'div',
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BInputGroup/BInputGroupText.vue b/packages/bootstrap-vue-next/src/components/BInputGroup/BInputGroupText.vue
index 1c13e6f87..cb1ee8b53 100644
--- a/packages/bootstrap-vue-next/src/components/BInputGroup/BInputGroupText.vue
+++ b/packages/bootstrap-vue-next/src/components/BInputGroup/BInputGroupText.vue
@@ -7,16 +7,12 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    tag?: string
-    text?: string
-  }>(),
-  {
-    tag: 'div',
-    text: undefined,
-  }
-)
+import type {BInputGroupTextProps} from '../../types'
+
+withDefaults(defineProps<BInputGroupTextProps>(), {
+  tag: 'div',
+  text: undefined,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BListGroup/BListGroup.vue b/packages/bootstrap-vue-next/src/components/BListGroup/BListGroup.vue
index e3540d70a..bba69e273 100644
--- a/packages/bootstrap-vue-next/src/components/BListGroup/BListGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BListGroup/BListGroup.vue
@@ -7,22 +7,14 @@
 <script setup lang="ts">
 import {computed, provide, toRef} from 'vue'
 import {listGroupInjectionKey} from '../../utils'
-import type {Breakpoint} from '../../types'
+import type {BListGroupProps} from '../../types'
 
-const props = withDefaults(
-  defineProps<{
-    flush?: boolean
-    horizontal?: boolean | Breakpoint
-    numbered?: boolean
-    tag?: string
-  }>(),
-  {
-    flush: false,
-    horizontal: false,
-    numbered: false,
-    tag: 'div',
-  }
-)
+const props = withDefaults(defineProps<BListGroupProps>(), {
+  flush: false,
+  horizontal: false,
+  numbered: false,
+  tag: 'div',
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BListGroup/BListGroupItem.vue b/packages/bootstrap-vue-next/src/components/BListGroup/BListGroupItem.vue
index 3d41ae003..9aa342532 100644
--- a/packages/bootstrap-vue-next/src/components/BListGroup/BListGroupItem.vue
+++ b/packages/bootstrap-vue-next/src/components/BListGroup/BListGroupItem.vue
@@ -16,48 +16,39 @@
 
 <script setup lang="ts">
 import {computed, inject, toRef, useAttrs} from 'vue'
-import type {BLinkProps} from '../../types'
+import type {BListGroupItemProps} from '../../types'
 import {useBLinkHelper} from '../../composables'
 import BLink from '../BLink/BLink.vue'
 import {listGroupInjectionKey} from '../../utils'
 
-const props = withDefaults(
-  defineProps<
-    {
-      action?: boolean
-      button?: boolean
-      tag?: string
-    } & Omit<BLinkProps, 'routerTag'>
-  >(),
-  {
-    action: false,
-    button: false,
-    tag: 'div',
-    // Link props
-    active: false, // Why is this active: false?
-    // All others use defaults
-    activeClass: undefined,
-    append: undefined,
-    disabled: undefined,
-    exactActiveClass: undefined,
-    href: undefined,
-    icon: undefined,
-    opacity: undefined,
-    opacityHover: undefined,
-    rel: undefined,
-    replace: undefined,
-    routerComponentName: undefined,
-    target: undefined,
-    to: undefined,
-    underlineOffset: undefined,
-    underlineOffsetHover: undefined,
-    underlineOpacity: undefined,
-    underlineOpacityHover: undefined,
-    underlineVariant: undefined,
-    variant: undefined,
-    // End link props
-  }
-)
+const props = withDefaults(defineProps<BListGroupItemProps>(), {
+  action: false,
+  button: false,
+  tag: 'div',
+  // Link props
+  active: false, // Why is this active: false?
+  // All others use defaults
+  activeClass: undefined,
+  append: undefined,
+  disabled: undefined,
+  exactActiveClass: undefined,
+  href: undefined,
+  icon: undefined,
+  opacity: undefined,
+  opacityHover: undefined,
+  rel: undefined,
+  replace: undefined,
+  routerComponentName: undefined,
+  target: undefined,
+  to: undefined,
+  underlineOffset: undefined,
+  underlineOffsetHover: undefined,
+  underlineOpacity: undefined,
+  underlineOpacityHover: undefined,
+  underlineVariant: undefined,
+  variant: undefined,
+  // End link props
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
index 7717d7b31..068d62d4a 100644
--- a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
+++ b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
@@ -109,7 +109,7 @@
 </template>
 
 <script setup lang="ts">
-import {onKeyStroke, useEventListener, useFocus, useVModel} from '@vueuse/core'
+import {onKeyStroke, useEventListener, useFocus} from '@vueuse/core'
 import {computed, type CSSProperties, ref, toRef, watch} from 'vue'
 import {useColorVariantClasses, useId, useModalManager, useSafeScrollLock} from '../../composables'
 import type {BModalProps} from '../../types'
@@ -170,7 +170,6 @@ const props = withDefaults(defineProps<BModalProps>(), {
   id: undefined,
   lazy: false,
   modalClass: undefined,
-  modelValue: false,
   noCloseOnBackdrop: false,
   noCloseOnEsc: false,
   noFade: false,
@@ -199,7 +198,6 @@ const emit = defineEmits<{
   'show': [value: BvTriggerableEvent]
   'show-prevented': []
   'shown': [value: BvTriggerableEvent]
-  'update:modelValue': [value: boolean]
 }>()
 
 type SharedSlotsData = {
@@ -232,7 +230,7 @@ const slots = defineSlots<{
 const computedId = useId(() => props.id, 'modal')
 // Note: passive: true will sync an internal ref... This is required for useModalManager to exit,
 // Since the modelValue that's passed from that composable is not reactive, this internal ref _is_ and thus it will trigger closing the modal
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<boolean>({default: false})
 
 const element = ref<HTMLElement | null>(null)
 const okButton = ref<HTMLElement | null>(null)
diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModalOrchestrator.vue b/packages/bootstrap-vue-next/src/components/BModal/BModalOrchestrator.vue
index 4c9b920b8..5ad8bb2be 100644
--- a/packages/bootstrap-vue-next/src/components/BModal/BModalOrchestrator.vue
+++ b/packages/bootstrap-vue-next/src/components/BModal/BModalOrchestrator.vue
@@ -38,18 +38,12 @@
 <script setup lang="ts">
 import {BvTriggerableEvent, omit} from '../../utils'
 import {useModalController} from '../../composables'
-import {type RendererElement} from 'vue'
+import type {BModalOrchestratorProps} from '../../types'
 
-const props = withDefaults(
-  defineProps<{
-    teleportDisabled?: boolean
-    teleportTo?: string | Readonly<RendererElement> | null | undefined
-  }>(),
-  {
-    teleportDisabled: false,
-    teleportTo: 'body',
-  }
-)
+const props = withDefaults(defineProps<BModalOrchestratorProps>(), {
+  teleportDisabled: false,
+  teleportTo: 'body',
+})
 
 const {modals, remove, show, confirm} = useModalController()
 
diff --git a/packages/bootstrap-vue-next/src/components/BNav/BNav.vue b/packages/bootstrap-vue-next/src/components/BNav/BNav.vue
index 3eb8788cf..be03ce024 100644
--- a/packages/bootstrap-vue-next/src/components/BNav/BNav.vue
+++ b/packages/bootstrap-vue-next/src/components/BNav/BNav.vue
@@ -5,36 +5,22 @@
 </template>
 
 <script setup lang="ts">
-import type {AlignmentJustifyContent} from '../../types'
+import type {BNavProps} from '../../types'
 import {useAlignment} from '../../composables'
 import {computed} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    align?: AlignmentJustifyContent
-    cardHeader?: boolean
-    fill?: boolean
-    justified?: boolean
-    pills?: boolean
-    small?: boolean
-    tabs?: boolean
-    tag?: string
-    underline?: boolean
-    vertical?: boolean
-  }>(),
-  {
-    align: undefined,
-    cardHeader: false,
-    fill: false,
-    justified: false,
-    pills: false,
-    small: false,
-    tabs: false,
-    tag: 'ul',
-    underline: false,
-    vertical: false,
-  }
-)
+const props = withDefaults(defineProps<BNavProps>(), {
+  align: undefined,
+  cardHeader: false,
+  fill: false,
+  justified: false,
+  pills: false,
+  small: false,
+  tabs: false,
+  tag: 'ul',
+  underline: false,
+  vertical: false,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BNav/BNavForm.vue b/packages/bootstrap-vue-next/src/components/BNav/BNavForm.vue
index 27a0cbdbd..2537f55b9 100644
--- a/packages/bootstrap-vue-next/src/components/BNav/BNavForm.vue
+++ b/packages/bootstrap-vue-next/src/components/BNav/BNavForm.vue
@@ -16,29 +16,22 @@
 </template>
 
 <script setup lang="ts">
-import type {BFormProps} from '../../types'
+import type {BNavFormProps} from '../../types'
 import BForm from '../BForm/BForm.vue'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-withDefaults(
-  defineProps<
-    {
-      role?: string
-    } & BFormProps
-  >(),
-  {
-    role: undefined,
-    // BForm props
-    floating: undefined,
-    id: undefined,
-    novalidate: undefined,
-    validated: undefined,
-    // End BForm props
-  }
-)
+withDefaults(defineProps<BNavFormProps>(), {
+  role: undefined,
+  // BForm props
+  floating: undefined,
+  id: undefined,
+  novalidate: undefined,
+  validated: undefined,
+  // End BForm props
+})
 
 const emit = defineEmits<{
   submit: [value: Event]
diff --git a/packages/bootstrap-vue-next/src/components/BNav/BNavItem.vue b/packages/bootstrap-vue-next/src/components/BNav/BNavItem.vue
index a799e880f..be72d8592 100644
--- a/packages/bootstrap-vue-next/src/components/BNav/BNavItem.vue
+++ b/packages/bootstrap-vue-next/src/components/BNav/BNavItem.vue
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 import BLink from '../BLink/BLink.vue'
-import type {AttrsValue, BLinkProps, ClassValue} from '../../types'
+import type {BNavItemProps} from '../../types'
 import {pick} from '../../utils'
 
 defineSlots<{
@@ -24,40 +24,32 @@ defineSlots<{
   default?: (props: Record<string, never>) => any
 }>()
 
-const props = withDefaults(
-  defineProps<
-    {
-      linkAttrs?: Readonly<AttrsValue>
-      linkClass?: ClassValue
-    } & Omit<BLinkProps, 'routerTag'>
-  >(),
-  {
-    // Link props
-    active: undefined,
-    activeClass: undefined,
-    append: undefined,
-    disabled: undefined,
-    exactActiveClass: undefined,
-    href: undefined,
-    icon: undefined,
-    linkAttrs: undefined,
-    linkClass: undefined,
-    opacity: undefined,
-    opacityHover: undefined,
-    rel: undefined,
-    replace: undefined,
-    routerComponentName: undefined,
-    target: undefined,
-    to: undefined,
-    underlineOffset: undefined,
-    underlineOffsetHover: undefined,
-    underlineOpacity: undefined,
-    underlineOpacityHover: undefined,
-    underlineVariant: undefined,
-    variant: undefined,
-    // End link props
-  }
-)
+const props = withDefaults(defineProps<BNavItemProps>(), {
+  // Link props
+  active: undefined,
+  activeClass: undefined,
+  append: undefined,
+  disabled: undefined,
+  exactActiveClass: undefined,
+  href: undefined,
+  icon: undefined,
+  linkAttrs: undefined,
+  linkClass: undefined,
+  opacity: undefined,
+  opacityHover: undefined,
+  rel: undefined,
+  replace: undefined,
+  routerComponentName: undefined,
+  target: undefined,
+  to: undefined,
+  underlineOffset: undefined,
+  underlineOffsetHover: undefined,
+  underlineOpacity: undefined,
+  underlineOpacityHover: undefined,
+  underlineVariant: undefined,
+  variant: undefined,
+  // End link props
+})
 
 const emit = defineEmits<{
   click: [value: MouseEvent]
diff --git a/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue b/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
index d9d67f569..92b304297 100644
--- a/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
+++ b/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
@@ -12,7 +12,7 @@
       @show-prevented="emit('show-prevented')"
       @click="emit('click', $event)"
       @toggle="emit('toggle')"
-      @update:model-value="emit('update:modelValue', $event)"
+      @update:model-value="modelValue = $event"
     >
       <template #button-content>
         <slot name="button-content" />
@@ -51,7 +51,6 @@ const props = withDefaults(defineProps<BDropdownProps>(), {
   isNav: true,
   lazy: false,
   menuClass: undefined,
-  modelValue: false,
   noCaret: false,
   noFlip: false,
   noShift: false,
@@ -82,9 +81,10 @@ const emit = defineEmits<{
   'show-prevented': []
   'shown': []
   'toggle': []
-  'update:modelValue': [value: boolean]
 }>()
 
+const modelValue = defineModel<boolean>({default: false})
+
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   'button-content'?: (props: Record<string, never>) => any
diff --git a/packages/bootstrap-vue-next/src/components/BNav/BNavText.vue b/packages/bootstrap-vue-next/src/components/BNav/BNavText.vue
index 47c22cf10..9000811e1 100644
--- a/packages/bootstrap-vue-next/src/components/BNav/BNavText.vue
+++ b/packages/bootstrap-vue-next/src/components/BNav/BNavText.vue
@@ -7,12 +7,9 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    text?: string
-  }>(),
-  {text: undefined}
-)
+import type {BNavTextProps} from '../../types'
+
+withDefaults(defineProps<BNavTextProps>(), {text: undefined})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue b/packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
index 5b1d0595e..6de6bc965 100644
--- a/packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
+++ b/packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
@@ -9,32 +9,20 @@
 
 <script setup lang="ts">
 import {computed, provide, toRef} from 'vue'
-import type {Breakpoint, ColorVariant} from '../../types'
+import type {BNavbarProps} from '../../types'
 import {useContainerClasses} from '../../composables'
 import {navbarInjectionKey} from '../../utils'
 
-const props = withDefaults(
-  defineProps<{
-    autoClose?: boolean
-    container?: boolean | 'fluid' | Breakpoint
-    fixed?: 'top' | 'bottom'
-    print?: boolean
-    sticky?: 'top' | 'bottom'
-    tag?: string
-    toggleable?: boolean | Breakpoint
-    variant?: ColorVariant | null
-  }>(),
-  {
-    autoClose: true,
-    container: 'fluid',
-    fixed: undefined,
-    print: false,
-    sticky: undefined,
-    tag: 'nav',
-    toggleable: false,
-    variant: null,
-  }
-)
+const props = withDefaults(defineProps<BNavbarProps>(), {
+  autoClose: true,
+  container: 'fluid',
+  fixed: undefined,
+  print: false,
+  sticky: undefined,
+  tag: 'nav',
+  toggleable: false,
+  variant: null,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BNavbar/BNavbarBrand.vue b/packages/bootstrap-vue-next/src/components/BNavbar/BNavbarBrand.vue
index 4fb4a9efe..b5fea3093 100644
--- a/packages/bootstrap-vue-next/src/components/BNavbar/BNavbarBrand.vue
+++ b/packages/bootstrap-vue-next/src/components/BNavbar/BNavbarBrand.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import {toRef} from 'vue'
 import BLink from '../BLink/BLink.vue'
-import type {BLinkProps} from '../../types'
+import type {BNavbarBrandProps} from '../../types'
 import {useBLinkHelper} from '../../composables'
 
 defineSlots<{
@@ -15,38 +15,31 @@ defineSlots<{
   default?: (props: Record<string, never>) => any
 }>()
 
-const props = withDefaults(
-  defineProps<
-    {
-      tag?: string
-    } & Omit<BLinkProps, 'routerTag'>
-  >(),
-  {
-    tag: 'div',
-    // Link props
-    active: undefined,
-    activeClass: undefined,
-    append: undefined,
-    disabled: undefined,
-    exactActiveClass: undefined,
-    href: undefined,
-    icon: undefined,
-    opacity: undefined,
-    opacityHover: undefined,
-    rel: undefined,
-    replace: undefined,
-    routerComponentName: undefined,
-    target: undefined,
-    to: undefined,
-    underlineOffset: undefined,
-    underlineOffsetHover: undefined,
-    underlineOpacity: undefined,
-    underlineOpacityHover: undefined,
-    underlineVariant: undefined,
-    variant: undefined,
-    // End link props
-  }
-)
+const props = withDefaults(defineProps<BNavbarBrandProps>(), {
+  tag: 'div',
+  // Link props
+  active: undefined,
+  activeClass: undefined,
+  append: undefined,
+  disabled: undefined,
+  exactActiveClass: undefined,
+  href: undefined,
+  icon: undefined,
+  opacity: undefined,
+  opacityHover: undefined,
+  rel: undefined,
+  replace: undefined,
+  routerComponentName: undefined,
+  target: undefined,
+  to: undefined,
+  underlineOffset: undefined,
+  underlineOffsetHover: undefined,
+  underlineOpacity: undefined,
+  underlineOpacityHover: undefined,
+  underlineVariant: undefined,
+  variant: undefined,
+  // End link props
+})
 
 const {computedLink, computedLinkProps} = useBLinkHelper(props, [
   'active',
diff --git a/packages/bootstrap-vue-next/src/components/BNavbar/BNavbarNav.vue b/packages/bootstrap-vue-next/src/components/BNavbar/BNavbarNav.vue
index 2459b9459..79f2dd15d 100644
--- a/packages/bootstrap-vue-next/src/components/BNavbar/BNavbarNav.vue
+++ b/packages/bootstrap-vue-next/src/components/BNavbar/BNavbarNav.vue
@@ -5,26 +5,17 @@
 </template>
 
 <script setup lang="ts">
-import type {AlignmentJustifyContent} from '../../types'
+import type {BNavbarNavProps} from '../../types'
 import {computed} from 'vue'
 import {useAlignment} from '../../composables'
 
-const props = withDefaults(
-  defineProps<{
-    align?: AlignmentJustifyContent
-    fill?: boolean
-    justified?: boolean
-    small?: boolean
-    tag?: string
-  }>(),
-  {
-    align: undefined,
-    fill: false,
-    justified: false,
-    small: false,
-    tag: 'ul',
-  }
-)
+const props = withDefaults(defineProps<BNavbarNavProps>(), {
+  align: undefined,
+  fill: false,
+  justified: false,
+  small: false,
+  tag: 'ul',
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BNavbar/BNavbarToggle.vue b/packages/bootstrap-vue-next/src/components/BNavbar/BNavbarToggle.vue
index f270f0514..6bc47d0ef 100644
--- a/packages/bootstrap-vue-next/src/components/BNavbar/BNavbarToggle.vue
+++ b/packages/bootstrap-vue-next/src/components/BNavbar/BNavbarToggle.vue
@@ -15,21 +15,15 @@
 </template>
 
 <script setup lang="ts">
+import type {BNavbarToggleProps} from '../../types'
 import {vBToggle} from '../../directives'
 import {computed} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    label?: string
-    target?: string | readonly string[]
-  }>(),
-  {
-    label: 'Toggle navigation',
-    disabled: false,
-    target: undefined,
-  }
-)
+const props = withDefaults(defineProps<BNavbarToggleProps>(), {
+  label: 'Toggle navigation',
+  disabled: false,
+  target: undefined,
+})
 
 const emit = defineEmits<{
   click: [value: MouseEvent]
diff --git a/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue b/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
index 227fbde28..af14938e4 100644
--- a/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
+++ b/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
@@ -69,10 +69,10 @@
 </template>
 
 <script setup lang="ts">
-import {onKeyStroke, useEventListener, useFocus, useVModel} from '@vueuse/core'
-import {computed, nextTick, ref, type RendererElement, toRef} from 'vue'
+import {onKeyStroke, useEventListener, useFocus} from '@vueuse/core'
+import {computed, nextTick, ref, toRef} from 'vue'
 import {useId, useSafeScrollLock} from '../../composables'
-import type {AttrsValue, ButtonVariant, ClassValue, ColorVariant} from '../../types'
+import type {BOffcanvasProps} from '../../types'
 import {BvTriggerableEvent, isEmptySlot} from '../../utils'
 import BButton from '../BButton/BButton.vue'
 import BCloseButton from '../BButton/BCloseButton.vue'
@@ -91,61 +91,29 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    backdrop?: boolean
-    backdropVariant?: ColorVariant | null
-    bodyAttrs?: Readonly<AttrsValue>
-    bodyClass?: ClassValue
-    bodyScrolling?: boolean
-    footerClass?: string
-    headerClass?: string
-    headerCloseClass?: ClassValue
-    headerCloseLabel?: string
-    headerCloseVariant?: ButtonVariant | null
-    id?: string
-    lazy?: boolean
-    modelValue?: boolean
-    noCloseOnBackdrop?: boolean
-    noCloseOnEsc?: boolean
-    noFocus?: boolean
-    noHeader?: boolean
-    noHeaderClose?: boolean
-    // TODO standardize this. Create a dedicated type
-    // Then in components that use individual props (BImg)
-    // Make them just use prop placement
-    placement?: 'top' | 'bottom' | 'start' | 'end'
-    teleportDisabled?: boolean
-    teleportTo?: string | RendererElement | null | undefined
-    title?: string
-    // responsive?: Breakpoint
-    // TODO responsive doesn't work
-  }>(),
-  {
-    backdrop: true,
-    backdropVariant: 'dark',
-    bodyAttrs: undefined,
-    bodyClass: undefined,
-    bodyScrolling: false,
-    footerClass: undefined,
-    headerClass: undefined,
-    headerCloseClass: undefined,
-    headerCloseLabel: 'Close',
-    headerCloseVariant: 'secondary',
-    id: undefined,
-    lazy: false,
-    modelValue: false,
-    noCloseOnBackdrop: false,
-    noCloseOnEsc: false,
-    noFocus: false,
-    noHeader: false,
-    noHeaderClose: false,
-    placement: 'start',
-    teleportDisabled: false,
-    teleportTo: 'body',
-    title: undefined,
-  }
-)
+const props = withDefaults(defineProps<BOffcanvasProps>(), {
+  backdrop: true,
+  backdropVariant: 'dark',
+  bodyAttrs: undefined,
+  bodyClass: undefined,
+  bodyScrolling: false,
+  footerClass: undefined,
+  headerClass: undefined,
+  headerCloseClass: undefined,
+  headerCloseLabel: 'Close',
+  headerCloseVariant: 'secondary',
+  id: undefined,
+  lazy: false,
+  noCloseOnBackdrop: false,
+  noCloseOnEsc: false,
+  noFocus: false,
+  noHeader: false,
+  noHeaderClose: false,
+  placement: 'start',
+  teleportDisabled: false,
+  teleportTo: 'body',
+  title: undefined,
+})
 
 const emit = defineEmits<{
   'close': [value: BvTriggerableEvent]
@@ -156,7 +124,6 @@ const emit = defineEmits<{
   'show': [value: BvTriggerableEvent]
   'show-prevented': []
   'shown': [value: BvTriggerableEvent]
-  'update:modelValue': [value: boolean]
 }>()
 
 type SharedSlotsData = {
@@ -180,7 +147,9 @@ const slots = defineSlots<{
   'title'?: (props: SharedSlotsData) => any
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<boolean>({
+  default: false,
+})
 
 const computedId = useId(() => props.id, 'offcanvas')
 useSafeScrollLock(modelValue, () => props.bodyScrolling)
diff --git a/packages/bootstrap-vue-next/src/components/BOverlay/BOverlay.vue b/packages/bootstrap-vue-next/src/components/BOverlay/BOverlay.vue
index 8b4b4138c..7b9e9a6ba 100644
--- a/packages/bootstrap-vue-next/src/components/BOverlay/BOverlay.vue
+++ b/packages/bootstrap-vue-next/src/components/BOverlay/BOverlay.vue
@@ -30,58 +30,36 @@
 
 <script setup lang="ts">
 import {computed, toRef} from 'vue'
-import type {ColorVariant, Numberish, RadiusElementExtendables, SpinnerType} from '../../types'
+import type {BOverlayProps} from '../../types'
 import {useRadiusElementClasses} from '../../composables'
 import BTransition from '../BTransition/BTransition.vue'
 import BSpinner from '../BSpinner.vue'
 
-const props = withDefaults(
-  defineProps<
-    {
-      bgColor?: string
-      blur?: string | null
-      fixed?: boolean
-      noCenter?: boolean
-      noFade?: boolean
-      noSpinner?: boolean
-      noWrap?: boolean
-      opacity?: Numberish
-      overlayTag?: string
-      show?: boolean
-      spinnerSmall?: boolean
-      spinnerType?: SpinnerType
-      spinnerVariant?: ColorVariant | null
-      variant?: ColorVariant | 'white' | 'transparent' | null
-      wrapTag?: string
-      zIndex?: Numberish
-    } & RadiusElementExtendables
-  >(),
-  {
-    blur: '2px',
-    bgColor: undefined,
-    fixed: false,
-    noCenter: false,
-    noFade: false,
-    noSpinner: false,
-    noWrap: false,
-    opacity: 0.85,
-    overlayTag: 'div',
-    show: false,
-    spinnerSmall: false,
-    spinnerType: 'border',
-    spinnerVariant: undefined,
-    variant: 'light',
-    wrapTag: 'div',
-    zIndex: 10,
-    // RadiusElementExtendables props
-    rounded: false,
-    roundedBottom: undefined,
-    roundedEnd: undefined,
-    roundedStart: undefined,
-    roundedTop: undefined,
-    // End RadiusElementExtendables props
-  }
-)
+const props = withDefaults(defineProps<BOverlayProps>(), {
+  blur: '2px',
+  bgColor: undefined,
+  fixed: false,
+  noCenter: false,
+  noFade: false,
+  noSpinner: false,
+  noWrap: false,
+  opacity: 0.85,
+  overlayTag: 'div',
+  show: false,
+  spinnerSmall: false,
+  spinnerType: 'border',
+  spinnerVariant: undefined,
+  variant: 'light',
+  wrapTag: 'div',
+  zIndex: 10,
+  // RadiusElementExtendables props
+  rounded: false,
+  roundedBottom: undefined,
+  roundedEnd: undefined,
+  roundedStart: undefined,
+  roundedTop: undefined,
+  // End RadiusElementExtendables props
+})
 
 const emit = defineEmits<{
   click: [value: MouseEvent]
diff --git a/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue b/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue
index cb7c5d0bc..9053c49ef 100644
--- a/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue
+++ b/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue
@@ -47,9 +47,9 @@
 <script setup lang="ts">
 import {BvEvent} from '../../utils'
 import {computed, toRef, watch} from 'vue'
-import type {AlignmentJustifyContent, ClassValue, Numberish, Size} from '../../types'
+import type {BPaginationProps, ClassValue} from '../../types'
 import {useAlignment} from '../../composables'
-import {createReusableTemplate, useToNumber, useVModel} from '@vueuse/core'
+import {createReusableTemplate, useToNumber} from '@vueuse/core'
 
 // Threshold of limit size when we start/stop showing ellipsis
 const ELLIPSIS_THRESHOLD = 3
@@ -60,79 +60,43 @@ const NEXT_BUTTON = -3
 const LAST_BUTTON = -4
 const ELLIPSIS_BUTTON = -5
 
-const props = withDefaults(
-  defineProps<{
-    align?: AlignmentJustifyContent | 'fill'
-    ariaControls?: string
-    ariaLabel?: string
-    disabled?: boolean
-    ellipsisClass?: ClassValue
-    ellipsisText?: string
-    firstClass?: ClassValue
-    firstNumber?: boolean
-    firstText?: string
-    hideEllipsis?: boolean
-    hideGotoEndButtons?: boolean
-    labelFirstPage?: string
-    labelLastPage?: string
-    labelNextPage?: string
-    labelPage?: string
-    labelPrevPage?: string
-    lastClass?: ClassValue
-    lastNumber?: boolean
-    lastText?: string
-    limit?: Numberish
-    modelValue?: Numberish
-    nextClass?: ClassValue
-    nextText?: string
-    pageClass?: ClassValue
-    perPage?: Numberish
-    pills?: boolean
-    prevClass?: ClassValue
-    prevText?: string
-    size?: Size
-    totalRows?: Numberish
-  }>(),
-  {
-    align: 'start',
-    ariaControls: undefined,
-    ariaLabel: 'Pagination',
-    disabled: false,
-    ellipsisClass: undefined,
-    ellipsisText: '\u2026',
-    firstClass: undefined,
-    firstNumber: false,
-    firstText: '\u00AB',
-    hideEllipsis: false,
-    hideGotoEndButtons: false,
-    labelFirstPage: 'Go to first page',
-    labelLastPage: 'Go to last page',
-    labelNextPage: 'Go to next page',
-    labelPage: 'Go to page',
-    labelPrevPage: 'Go to previous page',
-    lastClass: undefined,
-    lastNumber: false,
-    lastText: '\u00BB',
-    limit: 5,
-    modelValue: 1,
-    nextClass: undefined,
-    nextText: '\u203A',
-    pageClass: undefined,
-    perPage: DEFAULT_PER_PAGE,
-    pills: false,
-    prevClass: undefined,
-    prevText: '\u2039',
-    size: undefined,
-    totalRows: DEFAULT_TOTAL_ROWS,
-  }
-)
+const props = withDefaults(defineProps<BPaginationProps>(), {
+  align: 'start',
+  ariaControls: undefined,
+  ariaLabel: 'Pagination',
+  disabled: false,
+  ellipsisClass: undefined,
+  ellipsisText: '\u2026',
+  firstClass: undefined,
+  firstNumber: false,
+  firstText: '\u00AB',
+  hideEllipsis: false,
+  hideGotoEndButtons: false,
+  labelFirstPage: 'Go to first page',
+  labelLastPage: 'Go to last page',
+  labelNextPage: 'Go to next page',
+  labelPage: 'Go to page',
+  labelPrevPage: 'Go to previous page',
+  lastClass: undefined,
+  lastNumber: false,
+  lastText: '\u00BB',
+  limit: 5,
+  nextClass: undefined,
+  nextText: '\u203A',
+  pageClass: undefined,
+  perPage: DEFAULT_PER_PAGE,
+  pills: false,
+  prevClass: undefined,
+  prevText: '\u2039',
+  size: undefined,
+  totalRows: DEFAULT_TOTAL_ROWS,
+})
 
 const emit = defineEmits<{
-  'update:modelValue': [value: number]
   'page-click': [event: BvEvent, pageNumber: number]
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit)
+const modelValue = defineModel<number>({default: 1})
 
 const limitNumber = useToNumber(() => props.limit, {nanToZero: true, method: 'parseInt'})
 const perPageNumber = useToNumber(() => props.perPage, {nanToZero: true, method: 'parseInt'})
diff --git a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholder.vue b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholder.vue
index 8ce75fc86..e6d31aca5 100644
--- a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholder.vue
+++ b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholder.vue
@@ -12,32 +12,21 @@
 
 <script setup lang="ts">
 import {computed, type CSSProperties, toRef} from 'vue'
-import type {ColorVariant, Numberish, PlaceholderAnimation, PlaceholderSize} from '../../types'
+import type {BPlaceholderProps} from '../../types'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    animation?: PlaceholderAnimation
-    cols?: Numberish
-    size?: PlaceholderSize
-    tag?: string
-    variant?: ColorVariant | null
-    width?: Numberish
-    wrapperTag?: string
-  }>(),
-  {
-    animation: undefined,
-    cols: 12,
-    size: 'md',
-    tag: 'span',
-    variant: null,
-    width: undefined,
-    wrapperTag: 'span',
-  }
-)
+const props = withDefaults(defineProps<BPlaceholderProps>(), {
+  animation: undefined,
+  cols: 12,
+  size: 'md',
+  tag: 'span',
+  variant: null,
+  width: undefined,
+  wrapperTag: 'span',
+})
 
 const widthString = toRef(() =>
   props.width === undefined
diff --git a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderButton.vue b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderButton.vue
index 9cac6abea..7f8265baa 100644
--- a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderButton.vue
+++ b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderButton.vue
@@ -12,25 +12,16 @@
 
 <script setup lang="ts">
 import BPlaceholder from './BPlaceholder.vue'
-import type {ColorVariant, Numberish, PlaceholderAnimation} from '../../types'
+import type {BPlaceholderButtonProps} from '../../types'
 import {computed} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    animation?: PlaceholderAnimation
-    cols?: Numberish
-    tag?: string
-    variant?: ColorVariant | null
-    width?: Numberish
-  }>(),
-  {
-    animation: undefined,
-    cols: undefined,
-    tag: 'div',
-    variant: 'primary',
-    width: undefined,
-  }
-)
+const props = withDefaults(defineProps<BPlaceholderButtonProps>(), {
+  animation: undefined,
+  cols: undefined,
+  tag: 'div',
+  variant: 'primary',
+  width: undefined,
+})
 
 const computedClasses = computed(() => ({
   [`btn-${props.variant}`]: props.variant !== null,
diff --git a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderCard.vue b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderCard.vue
index 680f4b5cc..5ae2bb108 100644
--- a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderCard.vue
+++ b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderCard.vue
@@ -50,53 +50,30 @@ import BCard from '../BCard/BCard.vue'
 import BCardImg from '../BCard/BCardImg.vue'
 import BPlaceholder from './BPlaceholder.vue'
 import BPlaceholderButton from './BPlaceholderButton.vue'
-import type {ColorVariant, Numberish, PlaceholderAnimation, PlaceholderSize} from '../../types'
+import type {BPlaceholderCardProps} from '../../types'
 import {computed, toRef} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    animation?: PlaceholderAnimation
-    footerAnimation?: PlaceholderAnimation
-    footerSize?: PlaceholderSize
-    footerVariant?: ColorVariant | null
-    footerWidth?: Numberish
-    headerAnimation?: PlaceholderAnimation
-    headerSize?: PlaceholderSize
-    headerVariant?: ColorVariant | null
-    headerWidth?: Numberish
-    imgBlankColor?: string
-    imgBottom?: boolean
-    imgHeight?: Numberish
-    imgSrc?: string
-    noButton?: boolean
-    noFooter?: boolean
-    noHeader?: boolean
-    noImg?: boolean
-    size?: PlaceholderSize
-    variant?: ColorVariant | null
-  }>(),
-  {
-    animation: undefined,
-    footerAnimation: undefined,
-    footerSize: 'md',
-    footerVariant: undefined,
-    footerWidth: 100,
-    headerAnimation: undefined,
-    headerSize: 'md',
-    headerVariant: undefined,
-    headerWidth: 100,
-    imgBlankColor: '#868e96',
-    imgBottom: false,
-    imgHeight: 100,
-    imgSrc: undefined,
-    noButton: false,
-    noFooter: false,
-    noHeader: false,
-    noImg: false,
-    size: 'md',
-    variant: undefined,
-  }
-)
+const props = withDefaults(defineProps<BPlaceholderCardProps>(), {
+  animation: undefined,
+  footerAnimation: undefined,
+  footerSize: 'md',
+  footerVariant: undefined,
+  footerWidth: 100,
+  headerAnimation: undefined,
+  headerSize: 'md',
+  headerVariant: undefined,
+  headerWidth: 100,
+  imgBlankColor: '#868e96',
+  imgBottom: false,
+  imgHeight: 100,
+  imgSrc: undefined,
+  noButton: false,
+  noFooter: false,
+  noHeader: false,
+  noImg: false,
+  size: 'md',
+  variant: undefined,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderTable.vue b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderTable.vue
index 15e9fe812..4865eea79 100644
--- a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderTable.vue
@@ -47,53 +47,31 @@
 
 <script setup lang="ts">
 import {toRef} from 'vue'
-import type {ColorVariant, Numberish, PlaceholderAnimation, PlaceholderSize} from '../../types'
+import type {BPlaceholderTableProps} from '../../types'
 import BTableSimple from '../BTable/BTableSimple.vue'
 import BPlaceholder from './BPlaceholder.vue'
 import {useToNumber} from '@vueuse/core'
 
-const props = withDefaults(
-  defineProps<{
-    animation?: PlaceholderAnimation
-    cellWidth?: Numberish
-    columns?: Numberish
-    footerAnimation?: PlaceholderAnimation
-    footerCellWidth?: Numberish
-    footerColumns?: Numberish
-    footerSize?: PlaceholderSize
-    footerVariant?: ColorVariant | null
-    headerAnimation?: PlaceholderAnimation
-    headerCellWidth?: Numberish
-    headerColumns?: Numberish
-    headerSize?: PlaceholderSize
-    headerVariant?: ColorVariant | null
-    hideHeader?: boolean
-    rows?: Numberish
-    showFooter?: boolean
-    size?: PlaceholderSize
-    variant?: ColorVariant | null
-  }>(),
-  {
-    animation: undefined,
-    cellWidth: 100,
-    columns: 5,
-    footerAnimation: undefined,
-    footerCellWidth: 100,
-    footerColumns: undefined,
-    footerSize: 'md',
-    footerVariant: undefined,
-    headerAnimation: undefined,
-    headerCellWidth: 100,
-    headerColumns: undefined,
-    headerSize: 'md',
-    headerVariant: undefined,
-    hideHeader: false,
-    rows: 3,
-    showFooter: false,
-    size: 'md',
-    variant: undefined,
-  }
-)
+const props = withDefaults(defineProps<BPlaceholderTableProps>(), {
+  animation: undefined,
+  cellWidth: 100,
+  columns: 5,
+  footerAnimation: undefined,
+  footerCellWidth: 100,
+  footerColumns: undefined,
+  footerSize: 'md',
+  footerVariant: undefined,
+  headerAnimation: undefined,
+  headerCellWidth: 100,
+  headerColumns: undefined,
+  headerSize: 'md',
+  headerVariant: undefined,
+  hideHeader: false,
+  rows: 3,
+  showFooter: false,
+  size: 'md',
+  variant: undefined,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderWrapper.vue b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderWrapper.vue
index c2c7e092c..9b22eb986 100644
--- a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderWrapper.vue
+++ b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderWrapper.vue
@@ -4,14 +4,11 @@
 </template>
 
 <script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    loading?: boolean
-  }>(),
-  {
-    loading: false,
-  }
-)
+import type {BPlaceholderWrapperProps} from '../../types'
+
+const props = withDefaults(defineProps<BPlaceholderWrapperProps>(), {
+  loading: false,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BPopover.vue b/packages/bootstrap-vue-next/src/components/BPopover.vue
index e0ecfb181..99b0ee2bd 100644
--- a/packages/bootstrap-vue-next/src/components/BPopover.vue
+++ b/packages/bootstrap-vue-next/src/components/BPopover.vue
@@ -116,7 +116,6 @@ const props = withDefaults(defineProps<BPopoverProps>(), {
   id: undefined,
   inline: false,
   manual: false,
-  modelValue: false,
   noAutoClose: false,
   noFade: false,
   noFlip: false,
@@ -143,7 +142,6 @@ const emit = defineEmits<{
   'show': [value: BvTriggerableEvent]
   'show-prevented': []
   'shown': [value: BvTriggerableEvent]
-  'update:modelValue': [value: boolean]
 }>()
 
 defineSlots<{
@@ -160,10 +158,14 @@ defineSlots<{
   title?: (props: Record<string, never>) => any
 }>()
 
+const modelValue = defineModel<boolean>({
+  default: false,
+})
+
 const showState = ref(props.modelValue)
 const showStateInternal = ref(props.modelValue)
 watchEffect(() => {
-  emit('update:modelValue', showState.value)
+  modelValue.value = showState.value
 })
 
 watch(
diff --git a/packages/bootstrap-vue-next/src/components/BProgress/BProgress.vue b/packages/bootstrap-vue-next/src/components/BProgress/BProgress.vue
index 053c19f9b..91dea14e3 100644
--- a/packages/bootstrap-vue-next/src/components/BProgress/BProgress.vue
+++ b/packages/bootstrap-vue-next/src/components/BProgress/BProgress.vue
@@ -19,32 +19,25 @@
 
 <script setup lang="ts">
 import BProgressBar from './BProgressBar.vue'
-import type {BProgressBarProps} from '../../types'
+import type {BProgressProps} from '../../types'
 import {provide, toRef} from 'vue'
 import {progressInjectionKey} from '../../utils'
 
-const props = withDefaults(
-  defineProps<
-    {
-      height?: string
-    } & Omit<BProgressBarProps, 'label' | 'labelHtml'>
-  >(),
-  {
-    height: undefined,
-    // BProgressBar props
-    animated: undefined,
-    bgVariant: undefined,
-    max: 100,
-    precision: undefined,
-    showProgress: undefined,
-    showValue: undefined,
-    striped: undefined,
-    textVariant: undefined,
-    value: undefined,
-    variant: undefined,
-    // End BProgressBar props
-  }
-)
+const props = withDefaults(defineProps<BProgressProps>(), {
+  height: undefined,
+  // BProgressBar props
+  animated: undefined,
+  bgVariant: undefined,
+  max: 100,
+  precision: undefined,
+  showProgress: undefined,
+  showValue: undefined,
+  striped: undefined,
+  textVariant: undefined,
+  value: undefined,
+  variant: undefined,
+  // End BProgressBar props
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BSpinner.vue b/packages/bootstrap-vue-next/src/components/BSpinner.vue
index e1dc32cba..3354861ca 100644
--- a/packages/bootstrap-vue-next/src/components/BSpinner.vue
+++ b/packages/bootstrap-vue-next/src/components/BSpinner.vue
@@ -13,27 +13,17 @@
 
 <script setup lang="ts">
 import {computed, toRef} from 'vue'
-import type {ColorVariant, SpinnerType} from '../types'
+import type {BSpinnerProps} from '../types'
 import {isEmptySlot} from '../utils'
 
-const props = withDefaults(
-  defineProps<{
-    label?: string
-    role?: string
-    small?: boolean
-    tag?: string
-    type?: SpinnerType
-    variant?: ColorVariant | null
-  }>(),
-  {
-    label: undefined,
-    role: 'status',
-    small: false,
-    tag: 'span',
-    type: 'border',
-    variant: null,
-  }
-)
+const props = withDefaults(defineProps<BSpinnerProps>(), {
+  label: undefined,
+  role: 'status',
+  small: false,
+  tag: 'span',
+  type: 'border',
+  variant: null,
+})
 
 const slots = defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index 769871aae..e8b77c3b4 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -81,16 +81,13 @@
   </BTableLite>
 </template>
 
-<script setup lang="ts" generic="T = Record<string, unknown>">
-import {useToNumber, useVModel} from '@vueuse/core'
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import {useToNumber} from '@vueuse/core'
 import {computed, onMounted, ref, type Ref, type StyleValue, toRef, watch} from 'vue'
 import type {
-  BTableLiteProps,
-  BTableProvider,
-  BTableSortCompare,
-  ColorVariant,
+  BTableProps,
   LiteralUnion,
-  Numberish,
+  NoProviderTypes,
   TableField,
   TableFieldFormatter,
   TableFieldRaw,
@@ -103,131 +100,77 @@ import BTd from './BTd.vue'
 import BTr from './BTr.vue'
 import {formatItem, get, getTableFieldHeadLabel} from '../../utils'
 
-type NoProviderTypes = 'paging' | 'sorting' | 'filtering'
-
 // TODO sort props list alphabetically when everything is done
-const props = withDefaults(
-  defineProps<
-    {
-      provider?: BTableProvider<T>
-      sortCompare?: BTableSortCompare<T>
-      noProvider?: readonly NoProviderTypes[]
-      noProviderPaging?: boolean
-      noProviderSorting?: boolean
-      noProviderFiltering?: boolean
-      sortBy?: string
-      sortDesc?: boolean
-      selectable?: boolean
-      stickySelect?: boolean
-      selectHead?: boolean | string
-      selectMode?: 'multi' | 'single' | 'range'
-      selectionVariant?: ColorVariant | null
-      busy?: boolean
-      busyLoadingText?: string
-      perPage?: Numberish
-      currentPage?: Numberish
-      filter?: string
-      filterable?: readonly string[]
-      // TODO
-      // apiUrl?: string
-      // filterFunction?: () => any
-      // filterIgnoredFields?: any[]
-      // filterIncludedFields?: any[]
-      // headRowVariant?: ColorVariant | null
-      // headVariant?: ColorVariant | null
-      // labelSortAsc?: string
-      // labelSortClear?: string
-      // labelSortDesc?: string
-      // noFooterSorting?: boolean
-      noLocalSorting?: boolean
-      noSelectOnClick?: boolean
-      // noSortReset?: boolean
-      // selectedVariant?: ColorVariant | null
-      // showEmpty?: boolean
-      sortCompareLocale?: string | string[]
-      sortCompareOptions?: Intl.CollatorOptions
-      // sortDirection?: 'asc' | 'desc' | 'last'
-      // sortIconLeft?: boolean
-      // sortNullLast?: boolean
-      selectedItems?: readonly TableItem<T>[]
-      noSortableIcon?: boolean
-    } & Omit<BTableLiteProps<T>, 'tableClass'>
-  >(),
-  {
-    sortCompareLocale: undefined,
-    sortCompareOptions: () => ({numeric: true}),
-    noSortableIcon: false,
-    perPage: Infinity,
-    sortBy: undefined,
-    filter: undefined,
-    filterable: undefined,
-    provider: undefined,
-    sortCompare: undefined,
-    noProvider: undefined,
-    noProviderPaging: false,
-    noProviderSorting: false,
-    noProviderFiltering: false,
-    noLocalSorting: false,
-    noSelectOnClick: false,
-    sortDesc: false,
-    selectable: false,
-    stickySelect: false,
-    selectHead: true,
-    selectMode: 'multi',
-    selectionVariant: 'primary',
-    busy: false,
-    busyLoadingText: 'Loading...',
-    currentPage: 1,
-    selectedItems: () => [],
-    // BTableLite props
-    items: () => [],
-    fields: () => [],
-    // All others use defaults
-    caption: undefined,
-    align: undefined,
-    footClone: undefined,
-    labelStacked: undefined,
-    showEmpty: undefined,
-    emptyText: undefined,
-    emptyFilteredText: undefined,
-    fieldColumnClass: undefined,
-    tbodyTrClass: undefined,
-    captionHtml: undefined,
-    detailsTdClass: undefined,
-    headVariant: undefined,
-    headRowVariant: undefined,
-    footRowVariant: undefined,
-    footVariant: undefined,
-    modelValue: undefined,
-    primaryKey: undefined,
-    tbodyClass: undefined,
-    tbodyTrAttr: undefined,
-    tfootClass: undefined,
-    tfootTrClass: undefined,
-    theadClass: undefined,
-    theadTrClass: undefined,
-    // End BTableLite props
-    // BTableSimple props
-    borderVariant: undefined,
-    variant: undefined,
-    bordered: undefined,
-    borderless: undefined,
-    captionTop: undefined,
-    dark: undefined,
-    hover: undefined,
-    id: undefined,
-    noBorderCollapse: undefined,
-    outlined: undefined,
-    fixed: undefined,
-    responsive: undefined,
-    stacked: undefined,
-    striped: undefined,
-    stripedColumns: undefined,
-    small: undefined,
-    stickyHeader: undefined,
-    // End BTableSimple props
-  }
-)
+const props = withDefaults(defineProps<BTableProps<T>>(), {
+  sortCompareLocale: undefined,
+  sortCompareOptions: () => ({numeric: true}),
+  noSortableIcon: false,
+  perPage: Infinity,
+  filter: undefined,
+  filterable: undefined,
+  provider: undefined,
+  sortCompare: undefined,
+  noProvider: undefined,
+  noProviderPaging: false,
+  noProviderSorting: false,
+  noProviderFiltering: false,
+  noLocalSorting: false,
+  noSelectOnClick: false,
+  selectable: false,
+  stickySelect: false,
+  selectHead: true,
+  selectMode: 'multi',
+  selectionVariant: 'primary',
+  busyLoadingText: 'Loading...',
+  currentPage: 1,
+  // BTableLite props
+  items: () => [],
+  fields: () => [],
+  // All others use defaults
+  caption: undefined,
+  align: undefined,
+  footClone: undefined,
+  labelStacked: undefined,
+  showEmpty: undefined,
+  emptyText: undefined,
+  emptyFilteredText: undefined,
+  fieldColumnClass: undefined,
+  tbodyTrClass: undefined,
+  captionHtml: undefined,
+  detailsTdClass: undefined,
+  headVariant: undefined,
+  headRowVariant: undefined,
+  footRowVariant: undefined,
+  footVariant: undefined,
+  modelValue: undefined,
+  primaryKey: undefined,
+  tbodyClass: undefined,
+  tbodyTrAttr: undefined,
+  tfootClass: undefined,
+  tfootTrClass: undefined,
+  theadClass: undefined,
+  theadTrClass: undefined,
+  // End BTableLite props
+  // BTableSimple props
+  borderVariant: undefined,
+  variant: undefined,
+  bordered: undefined,
+  borderless: undefined,
+  captionTop: undefined,
+  dark: undefined,
+  hover: undefined,
+  id: undefined,
+  noBorderCollapse: undefined,
+  outlined: undefined,
+  fixed: undefined,
+  responsive: undefined,
+  stacked: undefined,
+  striped: undefined,
+  stripedColumns: undefined,
+  small: undefined,
+  stickyHeader: undefined,
+  // End BTableSimple props
+})
 
 const emit = defineEmits<{
   'filtered': [value: TableItem<T>[]]
@@ -245,18 +188,20 @@ const emit = defineEmits<{
   'row-unselected': [value: TableItem<T>]
   'selection': [value: TableItem<T>[]]
   'sorted': [sortBy: string, isDesc: boolean]
-  'update:busy': [value: boolean]
-  'update:selectedItems': [value: TableItem<T>[]]
-  'update:sortDesc': [value: boolean]
-  'update:sortBy': [value: string]
 }>()
 
-const sortByModel = useVModel(props, 'sortBy', emit, {passive: true})
-const busyModel = useVModel(props, 'busy', emit, {passive: true})
-const sortDescModel = useVModel(props, 'sortDesc', emit, {passive: true})
-const selectedItemsModel = useVModel(props, 'selectedItems', emit, {
-  passive: true,
-}) as Ref<TableItem<T>[]>
+const sortByModel = defineModel<string | undefined>('sortBy', {
+  default: undefined,
+})
+const busyModel = defineModel<boolean>('busy', {
+  default: false,
+})
+const sortDescModel = defineModel<boolean>('sortDesc', {
+  default: false,
+})
+const selectedItemsModel = defineModel<TableItem<T>[]>('selectedItems', {
+  default: () => [],
+})
 
 const selectedItemsToSet = computed({
   get: () => new Set([...selectedItemsModel.value]),
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
index d1f06c1a2..2e739f2b2 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
@@ -191,7 +191,7 @@
   </BTableSimple>
 </template>
 
-<script setup lang="ts" generic="T = Record<string, unknown>">
+<script setup lang="ts" generic="T extends Record<string, unknown>">
 import {computed, toRef} from 'vue'
 import type {
   BTableLiteProps,
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTbody.vue b/packages/bootstrap-vue-next/src/components/BTable/BTbody.vue
index 9faa50f80..e850cf0a9 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTbody.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTbody.vue
@@ -5,17 +5,12 @@
 </template>
 
 <script setup lang="ts">
-import type {ColorVariant} from '../../types'
+import type {BTbodyProps} from '../../types'
 import {computed} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    variant?: ColorVariant | null
-  }>(),
-  {
-    variant: null,
-  }
-)
+const props = withDefaults(defineProps<BTbodyProps>(), {
+  variant: null,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTd.vue b/packages/bootstrap-vue-next/src/components/BTable/BTd.vue
index fbc519098..9fbf1867a 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTd.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTd.vue
@@ -14,25 +14,16 @@
 </template>
 
 <script setup lang="ts">
-import type {ColorVariant, Numberish} from '../../types'
+import type {BTdProps} from '../../types'
 import {computed, toRef} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    colspan?: Numberish
-    rowspan?: Numberish
-    stackedHeading?: string
-    stickyColumn?: boolean
-    variant?: ColorVariant | null
-  }>(),
-  {
-    colspan: undefined,
-    rowspan: undefined,
-    stackedHeading: undefined,
-    stickyColumn: false,
-    variant: null,
-  }
-)
+const props = withDefaults(defineProps<BTdProps>(), {
+  colspan: undefined,
+  rowspan: undefined,
+  stackedHeading: undefined,
+  stickyColumn: false,
+  variant: null,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTfoot.vue b/packages/bootstrap-vue-next/src/components/BTable/BTfoot.vue
index 6cdd1482e..a3dd7da7d 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTfoot.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTfoot.vue
@@ -5,17 +5,12 @@
 </template>
 
 <script setup lang="ts">
-import type {ColorVariant} from '../../types'
+import type {BTfootProps} from '../../types'
 import {computed} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    variant?: ColorVariant | null
-  }>(),
-  {
-    variant: null,
-  }
-)
+const props = withDefaults(defineProps<BTfootProps>(), {
+  variant: null,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTh.vue b/packages/bootstrap-vue-next/src/components/BTable/BTh.vue
index 451de97d4..6aa2d7f3e 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTh.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTh.vue
@@ -14,25 +14,16 @@
 </template>
 
 <script setup lang="ts">
-import type {ColorVariant, Numberish} from '../../types'
+import type {BThProps} from '../../types'
 import {computed, toRef} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    colspan?: Numberish
-    rowspan?: Numberish
-    stackedHeading?: string
-    stickyColumn?: boolean
-    variant?: ColorVariant | null
-  }>(),
-  {
-    colspan: undefined,
-    rowspan: undefined,
-    stackedHeading: undefined,
-    stickyColumn: false,
-    variant: null,
-  }
-)
+const props = withDefaults(defineProps<BThProps>(), {
+  colspan: undefined,
+  rowspan: undefined,
+  stackedHeading: undefined,
+  stickyColumn: false,
+  variant: null,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BThead.vue b/packages/bootstrap-vue-next/src/components/BTable/BThead.vue
index c2572b783..ac00c8633 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BThead.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BThead.vue
@@ -5,17 +5,12 @@
 </template>
 
 <script setup lang="ts">
-import type {ColorVariant} from '../../types'
+import type {BTheadProps} from '../../types'
 import {computed} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    variant?: ColorVariant | null
-  }>(),
-  {
-    variant: null,
-  }
-)
+const props = withDefaults(defineProps<BTheadProps>(), {
+  variant: null,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTr.vue b/packages/bootstrap-vue-next/src/components/BTable/BTr.vue
index 06df2296f..1cce3ffe4 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTr.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTr.vue
@@ -5,17 +5,12 @@
 </template>
 
 <script setup lang="ts">
-import type {ColorVariant} from '../../types'
+import type {BTrProps} from '../../types'
 import {computed} from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    variant?: ColorVariant | null
-  }>(),
-  {
-    variant: null,
-  }
-)
+const props = withDefaults(defineProps<BTrProps>(), {
+  variant: null,
+})
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts b/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts
index cbfec0c74..f965edeea 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts
@@ -1,7 +1,7 @@
 import {enableAutoUnmount, mount} from '@vue/test-utils'
 import {afterEach, describe, expect, it} from 'vitest'
 import BTable from './BTable.vue'
-import type {LiteralUnion, TableField, TableItem} from 'src/types'
+import type {LiteralUnion, TableField, TableItem} from '../../types'
 
 interface SimplePerson {
   first_name: string
diff --git a/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue b/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue
index 26c098582..74a1479d7 100644
--- a/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue
+++ b/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue
@@ -16,39 +16,22 @@
 <script setup lang="ts">
 import {computed, inject, onMounted, onUnmounted, ref, toRef, useAttrs, watch} from 'vue'
 import {useId} from '../../composables'
-import type {AttrsValue, ClassValue, TabType} from '../../types'
+import type {BTabProps, TabType} from '../../types'
 import {tabsInjectionKey} from '../../utils'
 
-const props = withDefaults(
-  defineProps<{
-    active?: boolean
-    buttonId?: string
-    disabled?: boolean
-    id?: string
-    lazy?: boolean
-    lazyOnce?: boolean
-    noBody?: boolean
-    tag?: string
-    title?: string
-    titleItemClass?: ClassValue
-    titleLinkAttrs?: Readonly<AttrsValue>
-    titleLinkClass?: ClassValue
-  }>(),
-  {
-    active: false,
-    buttonId: undefined,
-    disabled: false,
-    id: undefined,
-    lazy: undefined,
-    lazyOnce: undefined,
-    noBody: false,
-    tag: 'div',
-    title: undefined,
-    titleItemClass: undefined,
-    titleLinkAttrs: undefined,
-    titleLinkClass: undefined,
-  }
-)
+const props = withDefaults(defineProps<BTabProps>(), {
+  buttonId: undefined,
+  disabled: false,
+  id: undefined,
+  lazy: undefined,
+  lazyOnce: undefined,
+  noBody: false,
+  tag: 'div',
+  title: undefined,
+  titleItemClass: undefined,
+  titleLinkAttrs: undefined,
+  titleLinkClass: undefined,
+})
 
 const slots = defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -57,14 +40,14 @@ const slots = defineSlots<{
   title?: (props: Record<string, never>) => any
 }>()
 
-const emit = defineEmits<{
-  'update:active': [value: boolean]
-}>()
-
 defineOptions({
   inheritAttrs: false,
 })
 
+const activeModel = defineModel<boolean>('active', {
+  default: false,
+})
+
 const parentData = inject(tabsInjectionKey, null)
 const computedId = useId(() => props.id, 'tabpane')
 const buttonId = useId(() => props.buttonId, 'tab')
@@ -119,14 +102,14 @@ const showSlot = toRef(
 
 watch(isActive, (active) => {
   if (active) {
-    emit('update:active', true)
+    activeModel.value = true
     setTimeout(() => {
       show.value = true
     }, 0)
     return
   }
   show.value = false
-  emit('update:active', false)
+  activeModel.value = false
 })
 watch(
   () => props.active,
diff --git a/packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue b/packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue
index 1429eb0e7..0a77f97ba 100644
--- a/packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue
+++ b/packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue
@@ -61,72 +61,39 @@
 import {computed, nextTick, provide, type Ref, ref, toRef, unref, watch} from 'vue'
 import {BvEvent, tabsInjectionKey} from '../../utils'
 import {useAlignment} from '../../composables'
-import type {AlignmentJustifyContent, ClassValue, TabType} from '../../types'
-import {createReusableTemplate, useVModel} from '@vueuse/core'
+import type {BTabsProps, TabType} from '../../types'
+import {createReusableTemplate} from '@vueuse/core'
 // TODO this component needs a desperate refactoring to use provide/inject and not the complicated slot manipulation logic it's doing now
 
-const props = withDefaults(
-  defineProps<{
-    activeId?: string
-    activeNavItemClass?: ClassValue
-    activeTabClass?: ClassValue
-    align?: AlignmentJustifyContent
-    card?: boolean
-    contentClass?: ClassValue
-    end?: boolean
-    fill?: boolean
-    id?: string
-    inactiveNavItemClass?: ClassValue
-    inactiveTabClass?: ClassValue
-    justified?: boolean
-    lazy?: boolean
-    modelValue?: number
-    navClass?: ClassValue
-    navItemClass?: ClassValue
-    navWrapperClass?: ClassValue
-    noFade?: boolean
-    // noKeyNav?: boolean,
-    noNavStyle?: boolean
-    pills?: boolean
-    small?: boolean
-    tag?: string
-    tabClass?: ClassValue
-    vertical?: boolean
-  }>(),
-  {
-    activeId: undefined,
-    activeNavItemClass: undefined,
-    activeTabClass: undefined,
-    align: undefined,
-    card: false,
-    contentClass: undefined,
-    end: false,
-    fill: false,
-    id: undefined,
-    inactiveNavItemClass: undefined,
-    inactiveTabClass: undefined,
-    justified: false,
-    lazy: false,
-    modelValue: -1,
-    navClass: undefined,
-    navItemClass: undefined,
-    navWrapperClass: undefined,
-    noFade: false,
-    // noKeyNav: false,
-    noNavStyle: false,
-    pills: false,
-    small: false,
-    tag: 'div',
-    tabClass: undefined,
-    vertical: false,
-  }
-)
+const props = withDefaults(defineProps<BTabsProps>(), {
+  activeNavItemClass: undefined,
+  activeTabClass: undefined,
+  align: undefined,
+  card: false,
+  contentClass: undefined,
+  end: false,
+  fill: false,
+  id: undefined,
+  inactiveNavItemClass: undefined,
+  inactiveTabClass: undefined,
+  justified: false,
+  lazy: false,
+  navClass: undefined,
+  navItemClass: undefined,
+  navWrapperClass: undefined,
+  noFade: false,
+  // noKeyNav: false,
+  noNavStyle: false,
+  pills: false,
+  small: false,
+  tag: 'div',
+  tabClass: undefined,
+  vertical: false,
+})
 
 const emit = defineEmits<{
   'activate-tab': [v1: number, v2: number, v3: BvEvent]
   'click': [] // TODO click event is never used
-  'update:activeId': [value: string]
-  'update:modelValue': [value: number]
 }>()
 
 defineSlots<{
@@ -140,8 +107,12 @@ defineSlots<{
   'tabs-start'?: (props: Record<string, never>) => any
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
-const activeId = useVModel(props, 'activeId', emit, {passive: true})
+const modelValue = defineModel<number>({
+  default: -1,
+})
+const activeId = defineModel<string | undefined>('activeId', {
+  default: undefined,
+})
 
 const ReusableEmptyTab = createReusableTemplate()
 
diff --git a/packages/bootstrap-vue-next/src/components/BToast/BToast.vue b/packages/bootstrap-vue-next/src/components/BToast/BToast.vue
index c6442dc45..c010d362a 100644
--- a/packages/bootstrap-vue-next/src/components/BToast/BToast.vue
+++ b/packages/bootstrap-vue-next/src/components/BToast/BToast.vue
@@ -62,7 +62,7 @@ import type {BToastProps} from '../../types'
 import BTransition from '../BTransition/BTransition.vue'
 import BCloseButton from '../BButton/BCloseButton.vue'
 import BLink from '../BLink/BLink.vue'
-import {useElementHover, useToNumber, useVModel} from '@vueuse/core'
+import {useElementHover, useToNumber} from '@vueuse/core'
 import BProgress from '../BProgress/BProgress.vue'
 import {BvTriggerableEvent} from '../../utils'
 
@@ -75,7 +75,6 @@ const props = withDefaults(defineProps<BToastProps>(), {
   id: undefined,
   interval: 1000,
   isStatus: false,
-  modelValue: false,
   noCloseButton: false,
   noFade: false,
   noHoverPause: false,
@@ -120,7 +119,6 @@ const emit = defineEmits<{
   'shown': [value: BvTriggerableEvent]
   'show-prevented': []
   'hide-prevented': []
-  'update:modelValue': [value: boolean | number]
 }>()
 
 const element = ref<HTMLElement | null>(null)
@@ -128,7 +126,7 @@ const element = ref<HTMLElement | null>(null)
 const isHovering = useElementHover(element)
 // Note: passive: true will sync an internal ref... This is required for useToast to exit,
 // Since the modelValue that's passed from that composable is not reactive, this internal ref _is_ and thus it will trigger closing the toast
-const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
+const modelValue = defineModel<boolean | number>({default: false})
 
 const {computedLink, computedLinkProps} = useBLinkHelper(props)
 
diff --git a/packages/bootstrap-vue-next/src/components/BToast/BToastOrchestrator.vue b/packages/bootstrap-vue-next/src/components/BToast/BToastOrchestrator.vue
index 40e72cb3f..6d2b9e7dc 100644
--- a/packages/bootstrap-vue-next/src/components/BToast/BToastOrchestrator.vue
+++ b/packages/bootstrap-vue-next/src/components/BToast/BToastOrchestrator.vue
@@ -26,22 +26,16 @@
 </template>
 
 <script setup lang="ts">
-import {type RendererElement, watch} from 'vue'
+import {watch} from 'vue'
 import {useToast} from '../../composables'
 import {omit} from '../../utils'
+import type {BToastOrchestratorProps} from '../../types'
 
-const props = withDefaults(
-  defineProps<{
-    teleportDisabled?: boolean
-    teleportTo?: string | Readonly<RendererElement> | null | undefined
-    appendToast?: boolean
-  }>(),
-  {
-    teleportDisabled: false,
-    teleportTo: 'body',
-    appendToast: false,
-  }
-)
+const props = withDefaults(defineProps<BToastOrchestratorProps>(), {
+  teleportDisabled: false,
+  teleportTo: 'body',
+  appendToast: false,
+})
 
 const toastPositions = {
   'top-left': 'top-0 start-0',
diff --git a/packages/bootstrap-vue-next/src/components/BTransition/transition.spec.ts b/packages/bootstrap-vue-next/src/components/BTransition/transition.spec.ts
index 7851a8bc5..63ecdea73 100644
--- a/packages/bootstrap-vue-next/src/components/BTransition/transition.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BTransition/transition.spec.ts
@@ -1,7 +1,7 @@
 import {enableAutoUnmount, mount} from '@vue/test-utils'
 import {afterEach, describe, expect, it} from 'vitest'
 import BTransition from './BTransition.vue'
-import {type Component, Transition} from 'vue'
+import {Transition} from 'vue'
 
 describe('transition', () => {
   enableAutoUnmount(afterEach)
@@ -28,7 +28,7 @@ describe('transition', () => {
     const wrapper = mount(BTransition, {
       props: {transProps: {enterActiveClass: 'foo'}},
     })
-    const $transition = wrapper.getComponent(Transition as Component)
+    const $transition = wrapper.getComponent(Transition)
     expect($transition.props('css')).toBe(true)
   })
 
@@ -36,7 +36,7 @@ describe('transition', () => {
     const wrapper = mount(BTransition, {
       props: {transProps: {enterActiveClass: 'foo'}},
     })
-    const $transition = wrapper.getComponent(Transition as Component)
+    const $transition = wrapper.getComponent(Transition)
     expect($transition.props('mode')).toBeUndefined()
   })
 
@@ -44,7 +44,7 @@ describe('transition', () => {
     const wrapper = mount(BTransition, {
       props: {transProps: {enterActiveClass: 'foo', mode: 'in-out'}},
     })
-    const $transition = wrapper.getComponent(Transition as Component)
+    const $transition = wrapper.getComponent(Transition)
     expect($transition.props('mode')).toBe('in-out')
   })
 
@@ -52,7 +52,7 @@ describe('transition', () => {
     const wrapper = mount(BTransition, {
       props: {transProps: {enterActiveClass: 'foo'}},
     })
-    const $transition = wrapper.getComponent(Transition as Component)
+    const $transition = wrapper.getComponent(Transition)
     expect($transition.props('enterActiveClass')).toBe('foo')
   })
 
diff --git a/packages/bootstrap-vue-next/src/types/CommonTypes.ts b/packages/bootstrap-vue-next/src/types/CommonTypes.ts
index b331eab50..749cefd13 100644
--- a/packages/bootstrap-vue-next/src/types/CommonTypes.ts
+++ b/packages/bootstrap-vue-next/src/types/CommonTypes.ts
@@ -1 +1,8 @@
+import type {RendererElement} from 'vue'
+
 export type Numberish = string | number
+
+export type TeleporterProps = {
+  teleportDisabled?: boolean
+  teleportTo?: string | Readonly<RendererElement> | null | undefined
+}
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 4ae115c8f..2f7cf6e94 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -1,28 +1,46 @@
 import type {Boundary, Middleware, Padding, RootBoundary, Strategy} from '@floating-ui/vue'
-import type {ComponentPublicInstance, RendererElement, TransitionProps} from 'vue'
+import type {ComponentPublicInstance, TransitionProps} from 'vue'
 import type {RouteLocationRaw} from 'vue-router'
 import type {
+  AlignmentJustifyContent,
+  AlignmentTextHorizontal,
+  AriaInvalid,
   AttrsValue,
+  BreadcrumbItemRaw,
   Breakpoint,
+  BTableProvider,
+  BTableSortCompare,
   ButtonType,
   ButtonVariant,
+  CheckboxOptionRaw,
+  CheckboxValue,
   ClassValue,
   ColorExtendables,
   ColorVariant,
+  CommonInputProps,
+  InputType,
   LinkTarget,
+  LiteralUnion,
+  NoProviderTypes,
   Numberish,
+  PlaceholderAnimation,
+  PlaceholderSize,
   PopoverPlacement,
+  RadioOptionRaw,
+  RadioValue,
   RadiusElementExtendables,
   Size,
+  SpinnerType,
   TableField,
   TableFieldRaw,
   TableItem,
+  TeleporterProps,
   TextColorVariant,
   TransitionMode,
   VerticalAlign,
 } from '.'
 
-export interface BLinkProps {
+export type BLinkProps = {
   active?: boolean
   activeClass?: string
   append?: boolean
@@ -48,14 +66,853 @@ export interface BLinkProps {
   variant?: ColorVariant | null
 }
 
-export interface BTransitionProps {
+export type BAccordionProps = {
+  flush?: boolean
+  free?: boolean
+  id?: string
+  modelValue?: string
+}
+
+export type BDropdownDividerProps = {
+  tag?: string
+}
+
+export type BDropdownGroupProps = {
+  ariaDescribedby?: string
+  header?: string
+  headerClass?: ClassValue
+  headerTag?: string
+  headerVariant?: ColorVariant | null
+  id?: string
+}
+
+export type BDropdownItemProps = {
+  linkClass?: ClassValue
+  wrapperAttrs?: Readonly<AttrsValue>
+} & Omit<BLinkProps, 'routerTag'>
+
+export type BDropdownItemButtonProps = {
+  active?: boolean
+  activeClass?: ClassValue
+  buttonClass?: ClassValue
+  disabled?: boolean
+  variant?: ColorVariant | null
+}
+
+export type BDropdownTextProps = {
+  text?: string
+}
+
+export type BFormFloatingLabelProps = {
+  label?: string
+  labelFor?: string
+  text?: string
+}
+
+export type BFormRowProps = {
+  tag?: string
+}
+
+export type BFormTextProps = {
+  id?: string
+  inline?: boolean
+  tag?: string
+  text?: string
+  textVariant?: TextColorVariant | null
+}
+
+export type BFormCheckboxProps = {
+  ariaLabel?: string
+  ariaLabelledby?: string
+  autofocus?: boolean
+  button?: boolean
+  buttonGroup?: boolean
+  buttonVariant?: ButtonVariant | null
+  disabled?: boolean
+  form?: string
+  id?: string
+  indeterminate?: boolean
+  inline?: boolean
+  modelValue?: CheckboxValue | readonly CheckboxValue[]
+  name?: string
+  plain?: boolean
+  required?: boolean
+  size?: Size
+  state?: boolean | null
+  switch?: boolean
+  uncheckedValue?: CheckboxValue
+  value?: CheckboxValue
+}
+
+export type BFormCheckboxGroupProps = {
+  ariaInvalid?: AriaInvalid
+  autofocus?: boolean
+  buttonVariant?: ButtonVariant | null
+  buttons?: boolean
+  disabled?: boolean
+  disabledField?: string
+  form?: string
+  htmlField?: string
+  id?: string
+  modelValue?: readonly CheckboxValue[]
+  name?: string
+  options?: readonly CheckboxOptionRaw[]
+  plain?: boolean
+  required?: boolean
+  size?: Size
+  stacked?: boolean
+  state?: boolean | null
+  switches?: boolean
+  textField?: string
+  validated?: boolean
+  valueField?: string
+}
+
+export type BFormFileProps = {
+  accept?: string | readonly string[]
+  autofocus?: boolean
+  capture?: boolean | 'user' | 'environment'
+  directory?: boolean
+  disabled?: boolean
+  form?: string
+  id?: string
+  label?: string
+  labelClass?: ClassValue
+  modelValue?: readonly File[] | File | null
+  multiple?: boolean
+  name?: string
+  noDrop?: boolean
+  noTraverse?: boolean
+  required?: boolean
+  size?: Size
+  state?: boolean | null
+}
+
+export type BFormInputProps = {
+  max?: Numberish
+  min?: Numberish
+  // noWheel: {type: Boolean, default: false}, TODO: not implemented yet
+  step?: Numberish
+  type?: InputType
+} & CommonInputProps
+
+export type BFormRadioProps = {
+  ariaLabel?: string
+  ariaLabelledby?: string
+  autofocus?: boolean
+  button?: boolean
+  buttonGroup?: boolean
+  buttonVariant?: ButtonVariant | null
+  disabled?: boolean
+  form?: string
+  id?: string
+  inline?: boolean
+  modelValue?: RadioValue
+  name?: string
+  plain?: boolean
+  required?: boolean
+  size?: Size
+  state?: boolean | null
+  value?: RadioValue
+}
+
+export type BFormRadioGroupProps = {
+  ariaInvalid?: AriaInvalid
+  autofocus?: boolean
+  buttonVariant?: ButtonVariant | null
+  buttons?: boolean
+  disabled?: boolean
+  disabledField?: string
+  form?: string
+  htmlField?: string
+  id?: string
+  modelValue?: RadioValue
+  name?: string
+  options?: readonly RadioOptionRaw[]
+  plain?: boolean
+  required?: boolean
+  size?: Size
+  stacked?: boolean
+  state?: boolean | null
+  textField?: string
+  validated?: boolean
+  valueField?: string
+}
+
+export type BFormSelectProps = {
+  ariaInvalid?: AriaInvalid
+  autofocus?: boolean
+  disabled?: boolean
+  disabledField?: string
+  form?: string
+  htmlField?: string
+  id?: string
+  labelField?: string
+  modelValue?:
+    | boolean
+    | string
+    | readonly unknown[]
+    | Readonly<Record<string, unknown>>
+    | number
+    | null
+  multiple?: boolean
+  name?: string
+  options?: readonly (unknown | Record<string, unknown>)[]
+  optionsField?: string
+  plain?: boolean
+  required?: boolean
+  selectSize?: Numberish
+  size?: Size
+  state?: boolean | null
+  textField?: string
+  valueField?: string
+}
+
+export type BFormSelectOptionProps<T> = {
+  disabled?: boolean
+  value?: T
+}
+
+export type BFormSelectOptionGroupProps = {
+  disabledField?: string
+  htmlField?: string
+  label?: string
+  options?: readonly (unknown | Record<string, unknown>)[]
+  textField?: string
+  valueField?: string
+}
+
+export type BFormSpinbuttonProps = {
+  ariaControls?: string
+  ariaLabel?: string
+  disabled?: boolean
+  form?: string
+  formatterFn?: (value: number) => string
+  id?: string
+  inline?: boolean
+  labelDecrement?: string
+  labelIncrement?: string
+  locale?: string
+  max?: Numberish
+  min?: Numberish
+  modelValue?: number | null
+  name?: string
+  placeholder?: string
+  readonly?: boolean
+  repeatDelay?: Numberish
+  repeatInterval?: Numberish
+  repeatStepMultiplier?: Numberish
+  repeatThreshold?: Numberish
+  required?: boolean
+  size?: Size
+  state?: boolean | null
+  step?: Numberish
+  vertical?: boolean
+  wrap?: boolean
+}
+
+export type BFormTagProps = {
+  disabled?: boolean
+  id?: string
+  noRemove?: boolean
+  pill?: boolean
+  removeLabel?: string
+  tag?: string
+  title?: string
+  variant?: ColorVariant | null
+}
+
+export type BFormTagsProps = {
+  addButtonText?: string
+  addButtonVariant?: ButtonVariant | null
+  addOnChange?: boolean
+  autofocus?: boolean
+  disabled?: boolean
+  duplicateTagText?: string
+  form?: string
+  inputAttrs?: Readonly<AttrsValue>
+  inputClass?: ClassValue
+  inputId?: string
+  inputType?: InputType
+  invalidTagText?: string
+  limit?: Numberish
+  limitTagsText?: string
+  modelValue?: readonly string[]
+  name?: string
+  noAddOnEnter?: boolean
+  noOuterFocus?: boolean
+  noTagRemove?: boolean
+  placeholder?: string
+  removeOnDelete?: boolean
+  required?: boolean
+  separator?: string | readonly string[]
+  size?: Size
+  state?: boolean | null
+  tagClass?: ClassValue
+  tagPills?: boolean
+  tagRemoveLabel?: string
+  tagRemovedLabel?: string
+  tagValidator?: (t: string) => boolean
+  tagVariant?: ColorVariant | null
+}
+
+export type BFormTextareaProps = {
+  noResize?: boolean
+  rows?: Numberish
+  wrap?: string
+} & CommonInputProps
+
+export type BInputGroupProps = {
+  append?: string
+  appendHtml?: string
+  id?: string
+  prepend?: string
+  prependHtml?: string
+  size?: Size
+  tag?: string
+}
+
+export type BInputGroupTextProps = {
+  tag?: string
+  text?: string
+}
+
+export type BListGroupProps = {
+  flush?: boolean
+  horizontal?: boolean | Breakpoint
+  numbered?: boolean
+  tag?: string
+}
+
+export type BListGroupItemProps = {
+  action?: boolean
+  button?: boolean
+  tag?: string
+} & Omit<BLinkProps, 'routerTag'>
+
+export type BModalOrchestratorProps = TeleporterProps
+
+export type BNavProps = {
+  align?: AlignmentJustifyContent
+  cardHeader?: boolean
+  fill?: boolean
+  justified?: boolean
+  pills?: boolean
+  small?: boolean
+  tabs?: boolean
+  tag?: string
+  underline?: boolean
+  vertical?: boolean
+}
+
+export type BNavFormProps = {
+  role?: string
+} & BFormProps
+
+export type BNavItemProps = {
+  linkAttrs?: Readonly<AttrsValue>
+  linkClass?: ClassValue
+} & Omit<BLinkProps, 'routerTag'>
+
+export type BNavTextProps = {
+  text?: string
+}
+
+export type BNavbarProps = {
+  autoClose?: boolean
+  container?: boolean | 'fluid' | Breakpoint
+  fixed?: 'top' | 'bottom'
+  print?: boolean
+  sticky?: 'top' | 'bottom'
+  tag?: string
+  toggleable?: boolean | Breakpoint
+  variant?: ColorVariant | null
+}
+
+export type BNavbarBrandProps = {
+  tag?: string
+} & Omit<BLinkProps, 'routerTag'>
+
+export type BNavbarNavProps = {
+  align?: AlignmentJustifyContent
+  fill?: boolean
+  justified?: boolean
+  small?: boolean
+  tag?: string
+}
+
+export type BNavbarToggleProps = {
+  disabled?: boolean
+  label?: string
+  target?: string | readonly string[]
+}
+
+export type BOffcanvasProps = {
+  backdrop?: boolean
+  backdropVariant?: ColorVariant | null
+  bodyAttrs?: Readonly<AttrsValue>
+  bodyClass?: ClassValue
+  bodyScrolling?: boolean
+  footerClass?: string
+  headerClass?: string
+  headerCloseClass?: ClassValue
+  headerCloseLabel?: string
+  headerCloseVariant?: ButtonVariant | null
+  id?: string
+  lazy?: boolean
+  modelValue?: boolean
+  noCloseOnBackdrop?: boolean
+  noCloseOnEsc?: boolean
+  noFocus?: boolean
+  noHeader?: boolean
+  noHeaderClose?: boolean
+  // TODO standardize this. Create a dedicated type
+  // Then in components that use individual props (BImg)
+  // Make them just use prop placement
+  placement?: 'top' | 'bottom' | 'start' | 'end'
+  title?: string
+  // responsive?: Breakpoint
+  // TODO responsive doesn't work
+} & TeleporterProps
+
+export type BOverlayProps = {
+  bgColor?: string
+  blur?: string | null
+  fixed?: boolean
+  noCenter?: boolean
+  noFade?: boolean
+  noSpinner?: boolean
+  noWrap?: boolean
+  opacity?: Numberish
+  overlayTag?: string
+  show?: boolean
+  spinnerSmall?: boolean
+  spinnerType?: SpinnerType
+  spinnerVariant?: ColorVariant | null
+  variant?: ColorVariant | 'white' | 'transparent' | null
+  wrapTag?: string
+  zIndex?: Numberish
+} & RadiusElementExtendables
+export type BPaginationProps = {
+  align?: AlignmentJustifyContent | 'fill'
+  ariaControls?: string
+  ariaLabel?: string
+  disabled?: boolean
+  ellipsisClass?: ClassValue
+  ellipsisText?: string
+  firstClass?: ClassValue
+  firstNumber?: boolean
+  firstText?: string
+  hideEllipsis?: boolean
+  hideGotoEndButtons?: boolean
+  labelFirstPage?: string
+  labelLastPage?: string
+  labelNextPage?: string
+  labelPage?: string
+  labelPrevPage?: string
+  lastClass?: ClassValue
+  lastNumber?: boolean
+  lastText?: string
+  limit?: Numberish
+  modelValue?: Numberish
+  nextClass?: ClassValue
+  nextText?: string
+  pageClass?: ClassValue
+  perPage?: Numberish
+  pills?: boolean
+  prevClass?: ClassValue
+  prevText?: string
+  size?: Size
+  totalRows?: Numberish
+}
+
+export type BPlaceholderProps = {
+  animation?: PlaceholderAnimation
+  cols?: Numberish
+  size?: PlaceholderSize
+  tag?: string
+  variant?: ColorVariant | null
+  width?: Numberish
+  wrapperTag?: string
+}
+
+export type BPlaceholderButtonProps = {
+  animation?: PlaceholderAnimation
+  cols?: Numberish
+  tag?: string
+  variant?: ColorVariant | null
+  width?: Numberish
+}
+
+export type BPlaceholderCardProps = {
+  animation?: PlaceholderAnimation
+  footerAnimation?: PlaceholderAnimation
+  footerSize?: PlaceholderSize
+  footerVariant?: ColorVariant | null
+  footerWidth?: Numberish
+  headerAnimation?: PlaceholderAnimation
+  headerSize?: PlaceholderSize
+  headerVariant?: ColorVariant | null
+  headerWidth?: Numberish
+  imgBlankColor?: string
+  imgBottom?: boolean
+  imgHeight?: Numberish
+  imgSrc?: string
+  noButton?: boolean
+  noFooter?: boolean
+  noHeader?: boolean
+  noImg?: boolean
+  size?: PlaceholderSize
+  variant?: ColorVariant | null
+}
+
+export type BPlaceholderTableProps = {
+  animation?: PlaceholderAnimation
+  cellWidth?: Numberish
+  columns?: Numberish
+  footerAnimation?: PlaceholderAnimation
+  footerCellWidth?: Numberish
+  footerColumns?: Numberish
+  footerSize?: PlaceholderSize
+  footerVariant?: ColorVariant | null
+  headerAnimation?: PlaceholderAnimation
+  headerCellWidth?: Numberish
+  headerColumns?: Numberish
+  headerSize?: PlaceholderSize
+  headerVariant?: ColorVariant | null
+  hideHeader?: boolean
+  rows?: Numberish
+  showFooter?: boolean
+  size?: PlaceholderSize
+  variant?: ColorVariant | null
+}
+
+export type BPlaceholderWrapperProps = {
+  loading?: boolean
+}
+
+export type BProgressProps = {
+  height?: string
+} & Omit<BProgressBarProps, 'label' | 'labelHtml'>
+export type BTabProps = {
+  active?: boolean
+  buttonId?: string
+  disabled?: boolean
+  id?: string
+  lazy?: boolean
+  lazyOnce?: boolean
+  noBody?: boolean
+  tag?: string
+  title?: string
+  titleItemClass?: ClassValue
+  titleLinkAttrs?: Readonly<AttrsValue>
+  titleLinkClass?: ClassValue
+}
+
+export type BTabsProps = {
+  activeId?: string
+  activeNavItemClass?: ClassValue
+  activeTabClass?: ClassValue
+  align?: AlignmentJustifyContent
+  card?: boolean
+  contentClass?: ClassValue
+  end?: boolean
+  fill?: boolean
+  id?: string
+  inactiveNavItemClass?: ClassValue
+  inactiveTabClass?: ClassValue
+  justified?: boolean
+  lazy?: boolean
+  modelValue?: number
+  navClass?: ClassValue
+  navItemClass?: ClassValue
+  navWrapperClass?: ClassValue
+  noFade?: boolean
+  // noKeyNav?: boolean,
+  noNavStyle?: boolean
+  pills?: boolean
+  small?: boolean
+  tag?: string
+  tabClass?: ClassValue
+  vertical?: boolean
+}
+
+export type BToastOrchestratorProps = {
+  appendToast?: boolean
+} & TeleporterProps
+
+export type BCollapseProps = {
+  // appear?: boolean
+  horizontal?: boolean
+  id?: string
+  isNav?: boolean
+  modelValue?: boolean
+  skipAnimation?: boolean
+  tag?: string
+  toggle?: boolean
+  visible?: boolean
+}
+
+export type BContainerProps = {
+  fluid?: boolean | Breakpoint
+  gutterX?: Numberish
+  gutterY?: Numberish
+  tag?: string
+}
+
+export type BSpinnerProps = {
+  label?: string
+  role?: string
+  small?: boolean
+  tag?: string
+  type?: SpinnerType
+  variant?: ColorVariant | null
+}
+
+export type BAccordionItemProps = {
+  bodyAttrs?: Readonly<AttrsValue>
+  bodyClass?: ClassValue
+  buttonAttrs?: Readonly<AttrsValue>
+  buttonClass?: ClassValue
+  collapseClass?: ClassValue
+  headerAttrs?: Readonly<AttrsValue>
+  headerClass?: ClassValue
+  headerTag?: string
+  horizontal?: boolean
+  id?: string
+  isNav?: boolean
+  modelValue?: boolean
+  tag?: string
+  title?: string
+  toggle?: boolean
+  visible?: boolean
+  wrapperAttrs?: Readonly<AttrsValue>
+}
+
+export type BAlertProps = {
+  closeClass?: ClassValue
+  closeContent?: string
+  closeLabel?: string
+  closeVariant?: ButtonVariant | null
+  dismissible?: boolean
+  fade?: boolean
+  immediate?: boolean
+  interval?: Numberish
+  modelValue?: boolean | number
+  noHoverPause?: boolean
+  showOnPause?: boolean
+  variant?: ColorVariant | null
+}
+
+export type BAvatarProps = {
+  alt?: string
+  badge?: boolean | string
+  badgeBgVariant?: ColorVariant | null
+  badgeOffset?: string
+  badgeStart?: boolean
+  badgeTextVariant?: TextColorVariant | null
+  badgeTop?: boolean
+  badgeVariant?: ColorVariant | null
+  button?: boolean
+  buttonType?: ButtonType
+  icon?: string
+  size?: LiteralUnion<Size, Numberish>
+  square?: boolean
+  src?: string
+  text?: string
+} & Omit<BLinkProps, 'routerTag'> &
+  ColorExtendables &
+  RadiusElementExtendables
+
+export type BAvatarGroupProps = {
+  overlap?: Numberish
+  size?: LiteralUnion<Size, Numberish>
+  square?: boolean
+  tag?: string
+} & ColorExtendables &
+  RadiusElementExtendables
+
+export type BBadgeProps = {
+  dotIndicator?: boolean
+  pill?: boolean
+  tag?: string
+  textIndicator?: boolean
+} & Omit<BLinkProps, 'routerTag'> &
+  ColorExtendables
+
+export type BBreadcrumbProps = {
+  items?: readonly BreadcrumbItemRaw[]
+}
+
+export type BBreadcrumbItemProps = {
+  ariaCurrent?: string
+  text?: string
+} & Omit<BLinkProps, 'routerTag'>
+
+export type BButtonProps = {
+  loading?: boolean
+  loadingFill?: boolean
+  loadingText?: string
+  pill?: boolean
+  pressed?: boolean
+  size?: Size
+  squared?: boolean
+  tag?: string
+  type?: ButtonType
+  variant?: ButtonVariant | null
+} & Omit<BLinkProps, 'variant'>
+
+export type BButtonGroupProps = {
+  ariaLabel?: string
+  size?: Size
+  tag?: string
+  vertical?: boolean
+}
+
+export type BButtonToolbarProps = {
+  ariaLabel?: string
+  // keyNav?: boolean
+  justify?: boolean
+  role?: string
+}
+
+export type BCloseButtonProps = {
+  ariaLabel?: string
+  disabled?: boolean
+  type?: ButtonType
+}
+
+export type BCardProps = {
+  align?: AlignmentTextHorizontal
+  bodyBgVariant?: ColorVariant | null
+  bodyClass?: ClassValue
+  bodyTag?: string
+  bodyText?: string
+  bodyTextVariant?: TextColorVariant | null
+  borderVariant?: ColorVariant | null
+  footer?: string
+  footerBgVariant?: ColorVariant | null
+  footerBorderVariant?: ColorVariant | null
+  footerClass?: ClassValue
+  footerHtml?: string
+  footerTag?: string
+  footerTextVariant?: TextColorVariant | null
+  footerVariant?: ColorVariant | null
+  header?: string
+  headerBgVariant?: ColorVariant | null
+  headerBorderVariant?: ColorVariant | null
+  headerClass?: ClassValue
+  headerHtml?: string
+  headerTag?: string
+  headerTextVariant?: TextColorVariant | null
+  headerVariant?: ColorVariant | null
+  imgAlt?: string
+  imgBottom?: boolean
+  imgEnd?: boolean
+  imgHeight?: Numberish
+  imgSrc?: string
+  imgStart?: boolean
+  imgTop?: boolean
+  imgWidth?: Numberish
+  noBody?: boolean
+  overlay?: boolean
+  subtitle?: string
+  subtitleTag?: string
+  subtitleTextVariant?: TextColorVariant | null
+  tag?: string
+  title?: string
+  titleTag?: string
+} & ColorExtendables
+
+export type BCardBodyProps = {
+  overlay?: boolean
+  subtitle?: string
+  subtitleTag?: string
+  subtitleTextVariant?: TextColorVariant | null
+  tag?: string
+  text?: string
+  title?: string
+  titleTag?: string
+} & ColorExtendables
+
+export type BCardGroupProps = {
+  columns?: boolean
+  deck?: boolean
+  tag?: string
+}
+
+export type BCardImageProps = {
+  bottom?: boolean
+  top?: boolean
+} & BImgProps
+
+export type BCardSubtitleProps = {
+  text?: string
+  tag?: string
+  textVariant?: TextColorVariant | null
+}
+
+export type BCardTextProps = {
+  tag?: string
+  text?: string
+}
+
+export type BCardTitleProps = {
+  tag?: string
+  text?: string
+}
+
+export type BCarouselProps = {
+  background?: string
+  controls?: boolean
+  controlsNextText?: string
+  controlsPrevText?: string
+  fade?: boolean
+  id?: string
+  imgHeight?: string
+  imgWidth?: string
+  indicators?: boolean
+  indicatorsButtonLabel?: string
+  interval?: Numberish
+  keyboard?: boolean
+  modelValue?: number
+  noHoverPause?: boolean
+  noTouch?: boolean
+  noWrap?: boolean
+  ride?: boolean | 'carousel'
+  rideReverse?: boolean
+  touchThreshold?: Numberish
+}
+
+export type BCarouselSlideProps = {
+  background?: string
+  caption?: string
+  captionHtml?: string
+  captionTag?: string
+  contentTag?: string
+  contentVisibleUp?: string
+  id?: string
+  imgAlt?: string
+  imgBlank?: boolean
+  imgBlankColor?: string
+  imgHeight?: Numberish
+  imgSrc?: string
+  imgSrcset?: string | readonly string[]
+  imgWidth?: Numberish
+  interval?: Numberish
+  text?: string
+  textHtml?: string
+  textTag?: string
+}
+
+export type BTransitionProps = {
   appear?: boolean
   mode?: TransitionMode
   noFade?: boolean
   transProps?: Readonly<TransitionProps>
 }
 
-export interface BImgProps extends RadiusElementExtendables {
+export type BImgProps = {
   blank?: boolean
   blankColor?: string
   block?: boolean
@@ -71,16 +928,16 @@ export interface BImgProps extends RadiusElementExtendables {
   start?: boolean
   thumbnail?: boolean
   width?: Numberish
-}
+} & RadiusElementExtendables
 
-export interface BFormProps {
+export type BFormProps = {
   floating?: boolean
   id?: string
   novalidate?: boolean
   validated?: boolean
 }
 
-export interface BTableSimpleProps {
+export type BTableSimpleProps = {
   bordered?: boolean
   borderless?: boolean
   borderVariant?: ColorVariant | null
@@ -101,7 +958,7 @@ export interface BTableSimpleProps {
   variant?: ColorVariant | null
 }
 
-export interface BTableLiteProps<T = Record<string, unknown>> extends BTableSimpleProps {
+export type BTableLiteProps<T extends Record<string, unknown>> = {
   align?: VerticalAlign
   caption?: string
   captionHtml?: string
@@ -143,8 +1000,86 @@ export interface BTableLiteProps<T = Record<string, unknown>> extends BTableSimp
   tfootTrClass?: ClassValue
   theadClass?: ClassValue
   theadTrClass?: ClassValue
+} & BTableSimpleProps
+
+export type BTrProps = {
+  variant?: ColorVariant | null
+}
+
+export type BTheadProps = {
+  variant?: ColorVariant | null
 }
-export interface BProgressBarProps extends ColorExtendables {
+
+export type BTfootProps = {
+  variant?: ColorVariant | null
+}
+
+export type BTdProps = {
+  colspan?: Numberish
+  rowspan?: Numberish
+  stackedHeading?: string
+  stickyColumn?: boolean
+  variant?: ColorVariant | null
+}
+
+export type BTbodyProps = {
+  variant?: ColorVariant | null
+}
+
+export type BTableProps<T extends Record<string, unknown>> = {
+  provider?: BTableProvider<T>
+  sortCompare?: BTableSortCompare<T>
+  noProvider?: readonly NoProviderTypes[]
+  noProviderPaging?: boolean
+  noProviderSorting?: boolean
+  noProviderFiltering?: boolean
+  sortBy?: string
+  sortDesc?: boolean
+  selectable?: boolean
+  stickySelect?: boolean
+  selectHead?: boolean | string
+  selectMode?: 'multi' | 'single' | 'range'
+  selectionVariant?: ColorVariant | null
+  busy?: boolean
+  busyLoadingText?: string
+  perPage?: Numberish
+  currentPage?: Numberish
+  filter?: string
+  filterable?: readonly string[]
+  // TODO
+  // apiUrl?: string
+  // filterFunction?: () => any
+  // filterIgnoredFields?: any[]
+  // filterIncludedFields?: any[]
+  // headRowVariant?: ColorVariant | null
+  // headVariant?: ColorVariant | null
+  // labelSortAsc?: string
+  // labelSortClear?: string
+  // labelSortDesc?: string
+  // noFooterSorting?: boolean
+  noLocalSorting?: boolean
+  noSelectOnClick?: boolean
+  // noSortReset?: boolean
+  // selectedVariant?: ColorVariant | null
+  // showEmpty?: boolean
+  sortCompareLocale?: string | string[]
+  sortCompareOptions?: Intl.CollatorOptions
+  // sortDirection?: 'asc' | 'desc' | 'last'
+  // sortIconLeft?: boolean
+  // sortNullLast?: boolean
+  selectedItems?: readonly TableItem<T>[]
+  noSortableIcon?: boolean
+} & Omit<BTableLiteProps<T>, 'tableClass'>
+
+export type BThProps = {
+  colspan?: Numberish
+  rowspan?: Numberish
+  stackedHeading?: string
+  stickyColumn?: boolean
+  variant?: ColorVariant | null
+}
+
+export type BProgressBarProps = {
   animated?: boolean
   label?: string
   labelHtml?: string
@@ -154,13 +1089,13 @@ export interface BProgressBarProps extends ColorExtendables {
   showValue?: boolean
   striped?: boolean
   value?: Numberish
-}
+} & ColorExtendables
 
-export interface BInputGroupAddonProps {
+export type BInputGroupAddonProps = {
   isText?: boolean
 }
 
-export interface BFormFeedbackSharedProps {
+export type BFormFeedbackSharedProps = {
   ariaLive?: string
   forceShow?: boolean
   id?: string
@@ -171,7 +1106,7 @@ export interface BFormFeedbackSharedProps {
   tooltip?: boolean
 }
 
-export interface BDropdownProps {
+export type BDropdownProps = {
   ariaLabel?: string
   autoClose?: boolean | 'inside' | 'outside'
   boundary?: Boundary | RootBoundary
@@ -211,9 +1146,9 @@ export interface BDropdownProps {
   toggleClass?: ClassValue
   toggleText?: string
   variant?: ButtonVariant | null
-}
+} & TeleporterProps
 
-export interface BToastProps extends ColorExtendables, Omit<BLinkProps, 'routerTag'> {
+export type BToastProps = {
   body?: string
   bodyClass?: ClassValue
   headerClass?: ClassValue
@@ -231,9 +1166,10 @@ export interface BToastProps extends ColorExtendables, Omit<BLinkProps, 'routerT
   title?: string
   toastClass?: ClassValue
   transProps?: Readonly<BTransitionProps>
-}
+} & ColorExtendables &
+  Omit<BLinkProps, 'routerTag'>
 
-export interface BPopoverProps {
+export type BPopoverProps = {
   boundary?: Boundary | RootBoundary
   boundaryPadding?: Padding
   click?: boolean
@@ -272,18 +1208,18 @@ export interface BPopoverProps {
   variant?: ColorVariant | null
 }
 
-export interface BTooltipProps extends Omit<BPopoverProps, 'tooltip'> {
+export type BTooltipProps = {
   interactive?: boolean
-}
+} & Omit<BPopoverProps, 'tooltip'>
 
-export interface BCardHeadFootProps extends ColorExtendables {
+export type BCardHeadFootProps = {
   borderVariant?: ColorVariant | null
   html?: string
   tag?: string
   text?: string
-}
+} & ColorExtendables
 
-export interface BModalProps {
+export type BModalProps = {
   autoFocus?: boolean
   autoFocusButton?: 'ok' | 'cancel' | 'close'
   body?: string
@@ -333,11 +1269,9 @@ export interface BModalProps {
   okVariant?: ButtonVariant | null
   scrollable?: boolean
   size?: Size | 'xl'
-  teleportDisabled?: boolean
-  teleportTo?: string | Readonly<RendererElement> | null | undefined
   title?: string
   titleClass?: ClassValue
   titleSrOnly?: boolean
   titleTag?: string
   transProps?: Readonly<BTransitionProps>
-}
+} & TeleporterProps
diff --git a/packages/bootstrap-vue-next/src/types/TableTypes.ts b/packages/bootstrap-vue-next/src/types/TableTypes.ts
index f491d2d0e..00b76fb38 100644
--- a/packages/bootstrap-vue-next/src/types/TableTypes.ts
+++ b/packages/bootstrap-vue-next/src/types/TableTypes.ts
@@ -59,3 +59,5 @@ export interface TableField<T = Record<string, unknown>> {
 }
 
 export type TableFieldRaw<T = Record<string, unknown>> = string | TableField<T>
+
+export type NoProviderTypes = 'paging' | 'sorting' | 'filtering'
diff --git a/packages/bootstrap-vue-next/src/types/exports/index.ts b/packages/bootstrap-vue-next/src/types/exports/index.ts
index 941ea2e52..520be4271 100644
--- a/packages/bootstrap-vue-next/src/types/exports/index.ts
+++ b/packages/bootstrap-vue-next/src/types/exports/index.ts
@@ -54,3 +54,5 @@ export type {
   TransitionMode,
   VerticalAlign,
 } from '..'
+
+export * from '../ComponentProps'

From 2b6383c26fb379c363603f7810d2a3147ad5d1a9 Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Sun, 10 Mar 2024 13:40:49 -0500
Subject: [PATCH 02/20] chore: remove dead code

chore: remove deprecated vscode extension recommendation
---
 .vscode/extensions.json                                      | 2 +-
 .../src/components/BDropdown/BDropdown.vue                   | 2 +-
 .../src/components/BNav/BNavItemDropdown.vue                 | 3 ++-
 packages/bootstrap-vue-next/src/components/BPopover.vue      | 5 +++--
 packages/bootstrap-vue-next/src/components/BTooltip.vue      | 3 ++-
 packages/bootstrap-vue-next/src/types/ComponentProps.ts      | 4 +---
 6 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index c0a6e5a48..a7cea0b06 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+  "recommendations": ["Vue.volar"]
 }
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
index 8126e2106..41835e77b 100644
--- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
+++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
@@ -37,7 +37,7 @@
         </slot>
       </span>
     </BButton>
-    <Teleport :to="teleportTo" :disabled="teleportDisabled && !teleportTo">
+    <Teleport :to="teleportTo" :disabled="teleportDisabled">
       <ul
         v-if="!props.lazy || modelValue"
         v-show="props.lazy || modelValue"
diff --git a/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue b/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
index 92b304297..d30c7165b 100644
--- a/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
+++ b/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
@@ -40,7 +40,8 @@ const props = withDefaults(defineProps<BDropdownProps>(), {
   boundary: 'clippingAncestors',
   boundaryPadding: undefined,
   center: false,
-  container: undefined,
+  teleportTo: undefined,
+  teleportDisabled: false,
   disabled: false,
   dropend: false,
   dropstart: false,
diff --git a/packages/bootstrap-vue-next/src/components/BPopover.vue b/packages/bootstrap-vue-next/src/components/BPopover.vue
index 99b0ee2bd..631e53ae4 100644
--- a/packages/bootstrap-vue-next/src/components/BPopover.vue
+++ b/packages/bootstrap-vue-next/src/components/BPopover.vue
@@ -1,7 +1,7 @@
 <template>
   <span ref="placeholder" />
   <slot name="target" :show="show" :hide="hide" :toggle="toggle" :show-state="showState" />
-  <Teleport :to="container || 'body'" :disabled="!container">
+  <Teleport :to="teleportTo" :disabled="teleportDisabled">
     <div
       v-if="showStateInternal || props.persistent"
       :id="id"
@@ -106,7 +106,8 @@ const props = withDefaults(defineProps<BPopoverProps>(), {
   boundary: 'clippingAncestors',
   boundaryPadding: undefined,
   click: false,
-  container: undefined,
+  teleportTo: 'body',
+  teleportDisabled: false,
   content: undefined,
   customClass: '',
   delay: () => ({show: 100, hide: 300}),
diff --git a/packages/bootstrap-vue-next/src/components/BTooltip.vue b/packages/bootstrap-vue-next/src/components/BTooltip.vue
index 2faa32eb4..354a5bce8 100644
--- a/packages/bootstrap-vue-next/src/components/BTooltip.vue
+++ b/packages/bootstrap-vue-next/src/components/BTooltip.vue
@@ -13,7 +13,8 @@ import type {BPopoverProps, BTooltipProps} from '../types'
 
 const props = withDefaults(defineProps<BTooltipProps>(), {
   click: undefined,
-  container: undefined,
+  teleportDisabled: undefined,
+  teleportTo: undefined,
   content: undefined,
   customClass: undefined,
   delay: undefined,
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 2f7cf6e94..b78327fa3 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -1112,7 +1112,6 @@ export type BDropdownProps = {
   boundary?: Boundary | RootBoundary
   boundaryPadding?: Padding
   center?: boolean
-  container?: string | ComponentPublicInstance<HTMLElement> | HTMLElement | undefined
   disabled?: boolean
   dropend?: boolean
   dropstart?: boolean
@@ -1173,7 +1172,6 @@ export type BPopoverProps = {
   boundary?: Boundary | RootBoundary
   boundaryPadding?: Padding
   click?: boolean
-  container?: string | Readonly<ComponentPublicInstance> | Readonly<HTMLElement> | undefined
   content?: string
   customClass?: ClassValue
   delay?:
@@ -1206,7 +1204,7 @@ export type BPopoverProps = {
   title?: string
   tooltip?: boolean
   variant?: ColorVariant | null
-}
+} & TeleporterProps
 
 export type BTooltipProps = {
   interactive?: boolean

From 1cc80b843b60afda6595e203a0015f3ec904838b Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Sun, 10 Mar 2024 13:41:02 -0500
Subject: [PATCH 03/20] Update
 packages/bootstrap-vue-next/src/components/BButton/BButton.vue

---
 packages/bootstrap-vue-next/src/components/BButton/BButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bootstrap-vue-next/src/components/BButton/BButton.vue b/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
index 8461818ff..de8311753 100644
--- a/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
+++ b/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
@@ -88,7 +88,7 @@ const emit = defineEmits<{
   click: [value: MouseEvent]
 }>()
 
-const pressedValue = defineModel<boolean>('pressed', {default: undefined})
+const pressedValue = defineModel<boolean | undefined>('pressed', {default: undefined})
 
 const {computedLink, computedLinkProps} = useBLinkHelper(props, [
   'active-class',

From 09b8e31fb6478f7ca63c696f1ced070779d1945d Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Sun, 10 Mar 2024 13:41:07 -0500
Subject: [PATCH 04/20] Update
 packages/bootstrap-vue-next/src/components/BAccordion/BAccordion.vue

---
 .../bootstrap-vue-next/src/components/BAccordion/BAccordion.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bootstrap-vue-next/src/components/BAccordion/BAccordion.vue b/packages/bootstrap-vue-next/src/components/BAccordion/BAccordion.vue
index 21bcb7754..b66d0feae 100644
--- a/packages/bootstrap-vue-next/src/components/BAccordion/BAccordion.vue
+++ b/packages/bootstrap-vue-next/src/components/BAccordion/BAccordion.vue
@@ -21,7 +21,7 @@ defineSlots<{
   default?: (props: Record<string, never>) => any
 }>()
 
-const modelValue = defineModel<string>({
+const modelValue = defineModel<string | undefined>({
   default: undefined,
 })
 

From 23ae88228054aa162c46ed0935bb742b796df14c Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Sun, 10 Mar 2024 13:41:13 -0500
Subject: [PATCH 05/20] Update
 packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue

---
 .../bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
index fed8840e8..4e9ffed8f 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
@@ -58,7 +58,7 @@ const slots = defineSlots<{
   default?: (props: Record<string, never>) => any
 }>()
 
-const modelValue = defineModel<RadioValue>({
+const modelValue = defineModel<RadioValue | undefined>({
   default: undefined,
 })
 

From 1524410c0a595903ae6c11e61c0e0172d1f575cc Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Sun, 10 Mar 2024 13:41:17 -0500
Subject: [PATCH 06/20] Update
 packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue

---
 .../src/components/BFormRadio/BFormRadioGroup.vue               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
index e68c0c881..4ee84a870 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
@@ -67,7 +67,7 @@ defineSlots<{
   first?: (props: Record<string, never>) => any
 }>()
 
-const modelValue = defineModel<RadioValue>({
+const modelValue = defineModel<RadioValue | null>({
   default: null,
 })
 

From f2973bb266c5422407d148cfeed383c5f66263f1 Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Fri, 22 Mar 2024 10:44:56 -0500
Subject: [PATCH 07/20] fix(BTable): stickyHeader true causes maxHeight 300px

feat(BTable): allow Numberish values => string is interpreted as is with maxHeight, numbers are converted to ${number}px maxHeight

refactor(BTable): move tableAttrs to a computed for shared props
---
 apps/docs/src/data/components/table.data.ts   |  4 +-
 .../src/components/BTable/BTableSimple.vue    | 39 +++++++++++++++----
 .../src/types/ComponentProps.ts               |  2 +-
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/apps/docs/src/data/components/table.data.ts b/apps/docs/src/data/components/table.data.ts
index faf4bb411..5058a763b 100644
--- a/apps/docs/src/data/components/table.data.ts
+++ b/apps/docs/src/data/components/table.data.ts
@@ -485,8 +485,10 @@ export default {
         },
         {
           prop: 'stickyHeader',
-          type: 'boolean',
+          type: 'boolean | Numberish',
           default: false,
+          description:
+            'Makes the table header sticky. Set to true for a maximum height 300px tall table, or set to any valid CSS height (including units). Inputting a number type is converted to px height',
         },
       ],
       emits: [],
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue
index 7fc115a3f..4687e87c7 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue
@@ -1,19 +1,21 @@
 <template>
   <!-- tables definitions are shared. Can't use createReusableTemplate cause it becomes a non-root node -->
-  <table v-if="!props.responsive" :id="id" :class="computedClasses">
-    <slot />
-  </table>
-  <div v-else :class="responsiveClasses">
-    <table :id="id" :class="computedClasses">
+  <div v-if="isResponsive" :class="responsiveClasses" :style="responsiveStyles">
+    <table v-bind="tableAttrs">
       <slot />
     </table>
   </div>
+  <table v-else v-bind="tableAttrs">
+    <slot />
+  </table>
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, type StyleValue} from 'vue'
 import type {BTableSimpleProps} from '../../types'
 
+const defaultStickyHeaderHeight = '300px'
+
 // TODO alphabetize the lists for tables
 // TODO all table things do not declare their props
 // TODO some props are not used. ex id, fixed, etc
@@ -63,10 +65,33 @@ const computedClasses = computed(() => [
     'table-striped-columns': props.stripedColumns,
   },
 ])
+const tableAttrs = computed(() => ({
+  id: props.id,
+  class: computedClasses.value,
+}))
 
+const computedSticky = computed(() =>
+  // String used as is
+  typeof props.stickyHeader === 'string'
+    ? props.stickyHeader
+    : // Number is converted to px
+      typeof props.stickyHeader === 'number'
+      ? `${props.stickyHeader}px`
+      : // Boolean true defaults to the above defined default height
+        props.stickyHeader === true
+        ? defaultStickyHeaderHeight
+        : // NaN is ignored
+          NaN
+)
+const stickyIsValid = computed(() => !Number.isNaN(computedSticky.value))
+
+const isResponsive = computed(() => props.responsive !== false || stickyIsValid.value)
+const responsiveStyles = computed<StyleValue>(() => ({
+  ...(stickyIsValid.value ? {maxHeight: computedSticky.value} : {}),
+}))
 const responsiveClasses = computed(() => ({
   'table-responsive': props.responsive === true,
   [`table-responsive-${props.responsive}`]: typeof props.responsive === 'string',
-  'b-table-sticky-header': props.stickyHeader,
+  'b-table-sticky-header': stickyIsValid.value,
 }))
 </script>
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index b78327fa3..36b3b7fce 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -951,7 +951,7 @@ export type BTableSimpleProps = {
   responsive?: boolean | Breakpoint
   small?: boolean
   stacked?: boolean | Breakpoint
-  stickyHeader?: boolean
+  stickyHeader?: boolean | Numberish
   striped?: boolean
   stripedColumns?: boolean
   tableClass?: ClassValue

From 88f38eee745a81f783adb0e79a48fef4729a838b Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Tue, 2 Apr 2024 11:37:47 -0500
Subject: [PATCH 08/20] refactor: make useAvatarSize more generic, reuse in
 BTableSimple

---
 .../src/components/BAvatar/BAvatar.vue        |  6 ++---
 .../src/components/BAvatar/BAvatarGroup.vue   |  4 +--
 .../src/components/BTable/BTableSimple.vue    | 25 +++++++------------
 .../src/composables/index.ts                  |  2 +-
 .../src/composables/useAvatarSize.ts          | 10 --------
 .../src/composables/useNumberishToStyle.ts    | 21 ++++++++++++++++
 6 files changed, 36 insertions(+), 32 deletions(-)
 delete mode 100644 packages/bootstrap-vue-next/src/composables/useAvatarSize.ts
 create mode 100644 packages/bootstrap-vue-next/src/composables/useNumberishToStyle.ts

diff --git a/packages/bootstrap-vue-next/src/components/BAvatar/BAvatar.vue b/packages/bootstrap-vue-next/src/components/BAvatar/BAvatar.vue
index a0e074cf1..623b91002 100644
--- a/packages/bootstrap-vue-next/src/components/BAvatar/BAvatar.vue
+++ b/packages/bootstrap-vue-next/src/components/BAvatar/BAvatar.vue
@@ -31,9 +31,9 @@ import {avatarGroupInjectionKey, isEmptySlot} from '../../utils'
 import {computed, type CSSProperties, inject, type StyleValue, toRef} from 'vue'
 import type {BAvatarProps} from '../../types'
 import {
-  useAvatarSize,
   useBLinkHelper,
   useColorVariantClasses,
+  useNumberishToStyle,
   useRadiusElementClasses,
 } from '../../composables'
 import BLink from '../BLink/BLink.vue'
@@ -116,8 +116,8 @@ const hasBadgeSlot = toRef(() => !isEmptySlot(slots.badge))
 const showBadge = toRef(() => !!props.badge || props.badge === '' || hasBadgeSlot.value)
 const computedSquare = toRef(() => parentData?.size.value ?? props.square)
 
-const computedPropSize = useAvatarSize(() => props.size)
-const computedParentSize = useAvatarSize(() => parentData?.size.value)
+const computedPropSize = useNumberishToStyle(() => props.size)
+const computedParentSize = useNumberishToStyle(() => parentData?.size.value)
 const computedSize = computed(() => computedParentSize.value ?? computedPropSize.value)
 
 const computedVariant = toRef(() => parentData?.variant.value ?? props.variant)
diff --git a/packages/bootstrap-vue-next/src/components/BAvatar/BAvatarGroup.vue b/packages/bootstrap-vue-next/src/components/BAvatar/BAvatarGroup.vue
index becb0eab7..0c4c3b4e0 100644
--- a/packages/bootstrap-vue-next/src/components/BAvatar/BAvatarGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BAvatar/BAvatarGroup.vue
@@ -10,7 +10,7 @@
 import {computed, provide, type StyleValue, toRef} from 'vue'
 import type {BAvatarGroupProps} from '../../types'
 import {avatarGroupInjectionKey} from '../../utils'
-import {useAvatarSize} from '../../composables'
+import {useNumberishToStyle} from '../../composables'
 import {useToNumber} from '@vueuse/core'
 
 const props = withDefaults(defineProps<BAvatarGroupProps>(), {
@@ -39,7 +39,7 @@ defineSlots<{
 
 const overlapNumber = useToNumber(() => props.overlap)
 
-const computedSize = useAvatarSize(() => props.size)
+const computedSize = useNumberishToStyle(() => props.size)
 const overlapScale = toRef(() => Math.min(Math.max(overlapNumber.value, 0), 1) / 2)
 
 const paddingStyle = computed<StyleValue>(() => {
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue
index 4687e87c7..4e5ed855f 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue
@@ -13,6 +13,7 @@
 <script setup lang="ts">
 import {computed, type StyleValue} from 'vue'
 import type {BTableSimpleProps} from '../../types'
+import {useNumberishToStyle} from '../../composables'
 
 const defaultStickyHeaderHeight = '300px'
 
@@ -70,25 +71,17 @@ const tableAttrs = computed(() => ({
   class: computedClasses.value,
 }))
 
-const computedSticky = computed(() =>
-  // String used as is
-  typeof props.stickyHeader === 'string'
-    ? props.stickyHeader
-    : // Number is converted to px
-      typeof props.stickyHeader === 'number'
-      ? `${props.stickyHeader}px`
-      : // Boolean true defaults to the above defined default height
-        props.stickyHeader === true
-        ? defaultStickyHeaderHeight
-        : // NaN is ignored
-          NaN
+const computedSticky = useNumberishToStyle(
+  computed(
+    () => (props.stickyHeader === true ? defaultStickyHeaderHeight : props.stickyHeader) || NaN
+  )
 )
-const stickyIsValid = computed(() => !Number.isNaN(computedSticky.value))
+const stickyIsValid = computed(() => props.stickyHeader !== false)
 
 const isResponsive = computed(() => props.responsive !== false || stickyIsValid.value)
-const responsiveStyles = computed<StyleValue>(() => ({
-  ...(stickyIsValid.value ? {maxHeight: computedSticky.value} : {}),
-}))
+const responsiveStyles = computed<StyleValue | undefined>(() =>
+  stickyIsValid.value ? {maxHeight: computedSticky.value} : undefined
+)
 const responsiveClasses = computed(() => ({
   'table-responsive': props.responsive === true,
   [`table-responsive-${props.responsive}`]: typeof props.responsive === 'string',
diff --git a/packages/bootstrap-vue-next/src/composables/index.ts b/packages/bootstrap-vue-next/src/composables/index.ts
index ba55e9c04..a3f5e105c 100644
--- a/packages/bootstrap-vue-next/src/composables/index.ts
+++ b/packages/bootstrap-vue-next/src/composables/index.ts
@@ -1,6 +1,5 @@
 export {default as useAlignment} from './useAlignment'
 export {default as useAriaInvalid} from './useAriaInvalid'
-export {default as useAvatarSize} from './useAvatarSize'
 export {default as useBLinkHelper} from './useBLinkHelper'
 export {default as useBreadcrumb} from './useBreadcrumb'
 export {default as useColorMode} from './useColorMode'
@@ -21,6 +20,7 @@ export {default as useManualTransition} from './useManualTransition'
 export {default as useModal} from './useModal'
 export {default as useModalController} from './useModalController'
 export {default as useModalManager} from './useModalManager'
+export {default as useNumberishToStyle} from './useNumberishToStyle'
 export {default as useRadiusElementClasses} from './useRadiusElementClasses'
 export {default as useRtl} from './useRtl'
 export {default as useSafeScrollLock} from './useSafeScrollLock'
diff --git a/packages/bootstrap-vue-next/src/composables/useAvatarSize.ts b/packages/bootstrap-vue-next/src/composables/useAvatarSize.ts
deleted file mode 100644
index 8bda43280..000000000
--- a/packages/bootstrap-vue-next/src/composables/useAvatarSize.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {computed, type MaybeRefOrGetter, toValue} from 'vue'
-import type {Numberish} from '../types'
-import {RX_NUMBER} from '../constants/regex'
-
-export default (el: MaybeRefOrGetter<Numberish | undefined>) =>
-  computed(() => {
-    const value = toValue(el)
-    // If num is non-numeric, return val as-is (sm, md, lg, undefined or any other custom value), otherwise return num as a px value
-    return RX_NUMBER.test(String(value)) ? `${Number(value)}px` : value
-  })
diff --git a/packages/bootstrap-vue-next/src/composables/useNumberishToStyle.ts b/packages/bootstrap-vue-next/src/composables/useNumberishToStyle.ts
new file mode 100644
index 000000000..c596024c1
--- /dev/null
+++ b/packages/bootstrap-vue-next/src/composables/useNumberishToStyle.ts
@@ -0,0 +1,21 @@
+import {computed, type MaybeRefOrGetter, toValue} from 'vue'
+import type {Numberish} from '../types'
+import {RX_NUMBER} from '../constants/regex'
+
+export default (
+  el: MaybeRefOrGetter<Numberish | undefined>,
+  /**
+   * The unit to use when converting a numeric value to a string
+   *
+   * @default 'px'
+   */
+  unit: MaybeRefOrGetter<string> = 'px'
+) =>
+  computed(() => {
+    const value = toValue(el)
+    const resolvedUnit = toValue(unit)
+    // If num is non-numeric, return val as-is (sm, md, lg, undefined or any other custom value), otherwise return num as a px value
+    return RX_NUMBER.test(String(value))
+      ? `${Number(value)}${resolvedUnit}`
+      : (value as string | undefined)
+  })

From 2185e38d45181e15ace9d6e9739e11dbe480168e Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Tue, 2 Apr 2024 13:37:33 -0500
Subject: [PATCH 09/20] feat(BTable)!: deprecate noSortReset, use `mustSort`

fix(BTable): fix handleFieldSorting algorithm to properly handle multisort with mustSort
---
 .../src/components/BTable/BTable.vue          | 138 +++++++++++-------
 .../src/types/ComponentProps.ts               |   3 +-
 2 files changed, 87 insertions(+), 54 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index 18890eb7b..33fc8c007 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -42,10 +42,9 @@
           name="sortAsc"
         >
           <svg
-            :style="getIconStyle(scope.field)"
             xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
+            width="24"
+            height="24"
             fill="currentColor"
             class="bi bi-arrow-up-short"
             viewBox="0 0 16 16"
@@ -63,10 +62,9 @@
           name="sortDesc"
         >
           <svg
-            :style="getIconStyle(scope.field)"
             xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
+            width="24"
+            height="24"
             fill="currentColor"
             class="bi bi-arrow-down-short"
             viewBox="0 0 16 16"
@@ -78,6 +76,23 @@
             />
           </svg>
         </slot>
+        <slot v-else v-bind="{...scope}" name="sortDefault">
+          <svg
+            :style="{opacity: 0.4}"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            fill="currentColor"
+            class="bi bi-arrow-up-short"
+            viewBox="0 0 16 16"
+            aria-hidden
+          >
+            <path
+              fill-rule="evenodd"
+              d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"
+            />
+          </svg>
+        </slot>
       </template>
     </template>
     <template #custom-body="scope">
@@ -101,7 +116,7 @@
 
 <script setup lang="ts" generic="Provider">
 import {useToNumber} from '@vueuse/core'
-import {computed, onMounted, ref, type StyleValue, toRef, watch} from 'vue'
+import {computed, onMounted, ref, toRef, watch} from 'vue'
 import type {
   BTableProps,
   BTableSortBy,
@@ -122,13 +137,13 @@ const props = withDefaults(defineProps<BTableProps<Provider>>(), {
   noSortableIcon: false,
   perPage: Number.POSITIVE_INFINITY,
   filter: undefined,
-  noSortReset: false,
-  filterable: undefined,
   mustSort: false,
+  filterable: undefined,
   provider: undefined,
   noProvider: undefined,
   noProviderPaging: false,
   noProviderSorting: false,
+  multisort: false,
   noProviderFiltering: false,
   noLocalSorting: false,
   noSelectOnClick: false,
@@ -342,8 +357,6 @@ const getRowClasses = (item: any | null, type: string) => [
       : props.tbodyTrClass
     : null,
 ]
-const getIconStyle = (field: Readonly<TableField>): StyleValue =>
-  sortByModel.value?.some((el) => el.key === field.key) ? {} : {opacity: 0.5}
 
 const computedItems = computed<readonly any[]>(() => {
   const sortItems = (items: readonly any[]) => {
@@ -351,8 +364,11 @@ const computedItems = computed<readonly any[]>(() => {
 
     // Multi-sort
     return [...items].sort((a, b) => {
-      for (let i = 0; i < (sortByModel.value?.length ?? 0); i++) {
-        const sortOption = sortByModel.value?.[i]
+      // cb shenanigans
+      if (!sortByModel.value || sortByModel.value.length === 0) return 0
+      //
+      for (let i = 0; i < (sortByModel.value.length ?? 0); i++) {
+        const sortOption = sortByModel.value[i]
         const realVal = (ob: any): string => {
           if (!(typeof ob === 'object' && ob !== null)) return ob
 
@@ -424,16 +440,6 @@ const computedItems = computed<readonly any[]>(() => {
   return mappedItems
 })
 
-// The benefit of this is that it doesn't allow you a page out of bounds even if the user does it manually
-// This does not work due to https://github.com/vueuse/vueuse/issues/3542
-// const {currentPage: resolvedCurrentPage, currentPageSize: resolvedCurrentPageSize} =
-//   useOffsetPagination({
-//     total: () => computedItems.value.length,
-//     page: currentPageNumber,
-//     // If its zero, it does all
-//     pageSize: () => perPageNumber.value || Number.POSITIVE_INFINITY,
-//   })
-
 const computedDisplayItems = computed<readonly any[]>(() => {
   if (Number.isNaN(perPageNumber.value) || (usesProvider.value && !props.noProviderPaging)) {
     return computedItems.value
@@ -512,45 +518,71 @@ const handleFieldSorting = (field: Readonly<TableFieldRaw>) => {
   const fieldSortable = typeof field === 'object' && field !== null ? field.sortable : false
 
   // TODO implement rules for noSortReset
-  // TODO implement rules for mustsort
-  // TODO since the default changed to () => [],
 
   if (!(isSortable.value === true && fieldSortable === true)) return
 
+  const resolveOrder = (val: BTableSortByOrder): BTableSortByOrder | null => {
+    if (val === 'asc') return 'desc'
+    if (
+      props.mustSort === true ||
+      (Array.isArray(props.mustSort) && props.mustSort.includes(fieldKey))
+    )
+      return 'asc'
+    return null
+  }
+
   const index = sortByModel.value?.findIndex((el) => el.key === fieldKey) ?? -1
-  const originalValue: BTableSortBy =
+  const originalValue = sortByModel.value?.[index]
+  const updatedValue: BTableSortBy =
     // If value is new, we default to ascending
     // Otherwise we make a temp copy of the value
-    index === -1 ? {key: fieldKey, order: 'asc'} : {...sortByModel.value?.[index]}
-
-  // The type safety on this is a bit weird. Make sure you're not pushing "null" into the array
-  const updatedValue = {
-    ...originalValue,
-    order:
-      originalValue.order === 'asc'
-        ? 'desc'
-        : originalValue.order === 'desc' && props.mustSort === true
-          ? 'asc'
-          : // Use null as a "flag" to remove the value
-            null,
-  } as Omit<BTableSortBy, 'order'> & {order: BTableSortByOrder | null} as any
-
-  if (props.noSortReset === true) {
-    // Null flag to remove
-    if (updatedValue.order === null) {
-      sortByModel.value = sortByModel.value.filter((el) => el.key !== fieldKey)
-      // field doesn't exist, add it
-    } else if (index === -1) {
-      sortByModel.value.push(updatedValue)
-    } else {
-      // Update the value
-      sortByModel.value.splice(index, 1, updatedValue)
+    index === -1 || !originalValue ? {key: fieldKey, order: 'asc'} : {...originalValue}
+
+  /**
+   * @returns the updated value to emit for sorted
+   */
+  const handleMultiSort = (): null | BTableSortBy => {
+    if (index === -1) {
+      // If is not in the array, we push it
+      sortByModel.value?.push(updatedValue)
+      return updatedValue
     }
-  } else {
-    sortByModel.value = updatedValue.order === null ? [] : [updatedValue]
+    // resolveOrder will return null if the value is to be removed
+    const order = resolveOrder(updatedValue.order)
+    // If it exists, but marked to delete (null), we remove it
+    if (order === null) {
+      sortByModel.value?.splice(index, 1)
+      return null
+      // Otherwise we update the value
+    }
+    const val = {...updatedValue, order}
+    sortByModel.value?.splice(index, 1, val)
+    return val
+  }
+
+  /**
+   * @returns the updated value to emit for sorted
+   */
+  const handleSingleSort = (): null | BTableSortBy => {
+    // If there is nothing in the array, we just push it
+    if (index === -1) {
+      sortByModel.value = [updatedValue]
+      return updatedValue
+    }
+    const order = resolveOrder(updatedValue.order)
+    // If it exists, but marked to delete (null), we remove it
+    if (order === null) {
+      sortByModel.value = []
+      return null
+      // Otherwise we update the value
+    }
+    const val = {...updatedValue, order}
+    sortByModel.value = [val]
+    return val
   }
 
-  emit('sorted', updatedValue.order === null ? null : updatedValue)
+  // Then emit the returned updated value
+  emit('sorted', props.multisort === true ? handleMultiSort() : handleSingleSort())
 }
 
 const onFieldHeadClick = (
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 7a06295ae..254f047b1 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -1022,9 +1022,10 @@ export type BTableProps<Provider> = {
   noProviderSorting?: boolean
   noProviderFiltering?: boolean
   sortBy?: BTableSortBy[]
+  mustSort?: boolean | string[] // TODO this is a string of fields, possibly generic
   noSortReset?: boolean
-  mustSort?: boolean
   selectable?: boolean
+  multisort?: boolean
   stickySelect?: boolean
   selectHead?: boolean | string
   selectMode?: 'multi' | 'single' | 'range'

From 78bcd6f6af04b1ddc85588749dd83d9a766c6bd6 Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Tue, 2 Apr 2024 13:44:53 -0500
Subject: [PATCH 10/20] feat(BTable): add functional syntax for
 sortAsc/sortDesc/sortDefault `sortAsc(fieldKey)` to specify the sort content
 for that specific field

---
 .../src/components/BTable/BTable.vue          | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index 33fc8c007..8fa5a38f7 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -28,18 +28,17 @@
     <template v-for="(_, name) in $slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
-    <!-- TODO this is likely wrong -->
-    <!-- TODO add: -->
-    <!-- TODO `name=sortAsc(${String(field.key)})`) -->
-    <!-- TODO name="sortDefault" -->
-    <!-- TODO remove LIteralUnion temporarily then patch up the issues it causes -->
     <template #head()="scope">
       {{ getTableFieldHeadLabel(scope.field) }}
       <template v-if="isSortable && !!scope.field.sortable && props.noSortableIcon === false">
         <slot
           v-if="sortByModel?.find((el) => el.key === scope.field.key)?.order === 'asc'"
           v-bind="{...scope}"
-          name="sortAsc"
+          :name="
+            $slots[`sortAsc(${String(scope.field.key)})`]
+              ? `sortAsc(${String(scope.field.key)})`
+              : 'sortAsc()'
+          "
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -59,7 +58,11 @@
         <slot
           v-else-if="sortByModel?.find((el) => el.key === scope.field.key)?.order === 'desc'"
           v-bind="{...scope}"
-          name="sortDesc"
+          :name="
+            $slots[`sortDesc(${String(scope.field.key)})`]
+              ? `sortDesc(${String(scope.field.key)})`
+              : 'sortDesc()'
+          "
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -76,7 +79,15 @@
             />
           </svg>
         </slot>
-        <slot v-else v-bind="{...scope}" name="sortDefault">
+        <slot
+          v-else
+          v-bind="{...scope}"
+          :name="
+            $slots[`sortDefault(${String(scope.field.key)})`]
+              ? `sortDefault(${String(scope.field.key)})`
+              : 'sortDefault()'
+          "
+        >
           <svg
             :style="{opacity: 0.4}"
             xmlns="http://www.w3.org/2000/svg"

From 9a80b44e560d9598a674c63fb54b4278980d18eb Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Tue, 2 Apr 2024 14:17:58 -0500
Subject: [PATCH 11/20] fix(BTable): set sort values to undefined so we dont
 accidentally wipe user defined comparer functions

---
 .../src/components/BTable/BTable.vue          | 45 ++++++-------------
 .../src/types/TableTypes.ts                   |  3 +-
 2 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index 8fa5a38f7..33b64d029 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -371,15 +371,15 @@ const getRowClasses = (item: any | null, type: string) => [
 
 const computedItems = computed<readonly any[]>(() => {
   const sortItems = (items: readonly any[]) => {
-    if (!sortByModel.value || sortByModel.value.length === 0) return items
+    // "undefined" values are set by us, we do this so we dont wipe out the comparer
+    const sortByItems = sortByModel.value?.filter((el) => !!el.order)
+
+    if (!sortByItems || sortByItems.length === 0) return items
 
     // Multi-sort
     return [...items].sort((a, b) => {
-      // cb shenanigans
-      if (!sortByModel.value || sortByModel.value.length === 0) return 0
-      //
-      for (let i = 0; i < (sortByModel.value.length ?? 0); i++) {
-        const sortOption = sortByModel.value[i]
+      for (let i = 0; i < (sortByItems.length ?? 0); i++) {
+        const sortOption = sortByItems[i]
         const realVal = (ob: any): string => {
           if (!(typeof ob === 'object' && ob !== null)) return ob
 
@@ -532,14 +532,15 @@ const handleFieldSorting = (field: Readonly<TableFieldRaw>) => {
 
   if (!(isSortable.value === true && fieldSortable === true)) return
 
-  const resolveOrder = (val: BTableSortByOrder): BTableSortByOrder | null => {
+  const resolveOrder = (val: BTableSortByOrder): BTableSortByOrder | undefined => {
     if (val === 'asc') return 'desc'
+    if (val === undefined) return 'asc'
     if (
       props.mustSort === true ||
       (Array.isArray(props.mustSort) && props.mustSort.includes(fieldKey))
     )
       return 'asc'
-    return null
+    return undefined
   }
 
   const index = sortByModel.value?.findIndex((el) => el.key === fieldKey) ?? -1
@@ -554,19 +555,10 @@ const handleFieldSorting = (field: Readonly<TableFieldRaw>) => {
    */
   const handleMultiSort = (): null | BTableSortBy => {
     if (index === -1) {
-      // If is not in the array, we push it
-      sortByModel.value?.push(updatedValue)
+      sortByModel.value = [...(sortByModel.value ?? []), updatedValue]
       return updatedValue
     }
-    // resolveOrder will return null if the value is to be removed
-    const order = resolveOrder(updatedValue.order)
-    // If it exists, but marked to delete (null), we remove it
-    if (order === null) {
-      sortByModel.value?.splice(index, 1)
-      return null
-      // Otherwise we update the value
-    }
-    const val = {...updatedValue, order}
+    const val = {...updatedValue, order: resolveOrder(updatedValue.order)}
     sortByModel.value?.splice(index, 1, val)
     return val
   }
@@ -575,19 +567,10 @@ const handleFieldSorting = (field: Readonly<TableFieldRaw>) => {
    * @returns the updated value to emit for sorted
    */
   const handleSingleSort = (): null | BTableSortBy => {
-    // If there is nothing in the array, we just push it
-    if (index === -1) {
-      sortByModel.value = [updatedValue]
-      return updatedValue
-    }
-    const order = resolveOrder(updatedValue.order)
-    // If it exists, but marked to delete (null), we remove it
-    if (order === null) {
-      sortByModel.value = []
-      return null
-      // Otherwise we update the value
+    const val = {
+      ...updatedValue,
+      order: index === -1 ? updatedValue.order : resolveOrder(updatedValue.order),
     }
-    const val = {...updatedValue, order}
     sortByModel.value = [val]
     return val
   }
diff --git a/packages/bootstrap-vue-next/src/types/TableTypes.ts b/packages/bootstrap-vue-next/src/types/TableTypes.ts
index add8d7a69..1304b25bf 100644
--- a/packages/bootstrap-vue-next/src/types/TableTypes.ts
+++ b/packages/bootstrap-vue-next/src/types/TableTypes.ts
@@ -7,7 +7,8 @@ export type TableItem = {
   _showDetails?: boolean
 }
 
-export type BTableSortByOrder = 'desc' | 'asc'
+// undefined means no sorting
+export type BTableSortByOrder = 'desc' | 'asc' | undefined
 
 export type BTableSortBy = {
   order: BTableSortByOrder

From f9545b175220d152ddee874ca3144ab484a7b56d Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Tue, 2 Apr 2024 17:28:09 -0500
Subject: [PATCH 12/20] fix(BTable): generic types

---
 .../src/components/BTable/BTable.vue          | 107 +++++++++---------
 .../src/components/BTable/BTableLite.vue      |  77 ++++++-------
 .../src/types/ComponentProps.ts               |  18 +--
 .../src/types/TableTypes.ts                   |  20 +++-
 .../src/utils/formatItem.ts                   |   8 +-
 5 files changed, 121 insertions(+), 109 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index 33b64d029..be5aaaa5a 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -125,9 +125,9 @@
   </BTableLite>
 </template>
 
-<script setup lang="ts" generic="Provider">
+<script setup lang="ts" generic="T">
 import {useToNumber} from '@vueuse/core'
-import {computed, onMounted, ref, toRef, watch} from 'vue'
+import {computed, onMounted, ref, type Ref, toRef, watch} from 'vue'
 import type {
   BTableProps,
   BTableSortBy,
@@ -143,8 +143,9 @@ import BSpinner from '../BSpinner.vue'
 import BTableLite from './BTableLite.vue'
 import BTd from './BTd.vue'
 import BTr from './BTr.vue'
+import {isTableField, isTableItem} from '../../types/TableTypes'
 
-const props = withDefaults(defineProps<BTableProps<Provider>>(), {
+const props = withDefaults(defineProps<BTableProps<T>>(), {
   noSortableIcon: false,
   perPage: Number.POSITIVE_INFINITY,
   filter: undefined,
@@ -215,20 +216,15 @@ const props = withDefaults(defineProps<BTableProps<Provider>>(), {
 })
 
 const emit = defineEmits<{
-  'filtered': [value: any[]]
-  'head-clicked': [
-    key: TableField['key'],
-    field: TableFieldRaw,
-    event: MouseEvent,
-    isFooter: boolean,
-  ]
-  'row-clicked': [item: any, index: number, event: MouseEvent]
-  'row-dbl-clicked': [item: any, index: number, event: MouseEvent]
-  'row-hovered': [item: any, index: number, event: MouseEvent]
-  'row-selected': [value: any]
-  'row-unhovered': [item: any, index: number, event: MouseEvent]
-  'row-unselected': [value: any]
-  'selection': [value: any[]]
+  'filtered': [value: T[]]
+  'head-clicked': [key: string, field: TableField<T>, event: MouseEvent, isFooter: boolean]
+  'row-clicked': [item: T, index: number, event: MouseEvent]
+  'row-dbl-clicked': [item: T, index: number, event: MouseEvent]
+  'row-hovered': [item: T, index: number, event: MouseEvent]
+  'row-unhovered': [item: T, index: number, event: MouseEvent]
+  'row-selected': [value: T]
+  'row-unselected': [value: T]
+  'selection': [value: T[]]
   'sorted': [value: BTableSortBy | null]
 }>()
 
@@ -238,7 +234,7 @@ const sortByModel = defineModel<BTableSortBy[] | undefined>('sortBy', {
 const busyModel = defineModel<boolean>('busy', {
   default: false,
 })
-const selectedItemsModel = defineModel<any[]>('selectedItems', {
+const selectedItemsModel = defineModel<T[]>('selectedItems', {
   default: () => [],
 })
 
@@ -253,7 +249,7 @@ const selectedItemsToSet = computed({
  * The utils also conveniently emit the proper events after
  */
 const selectedItemsSetUtilities = {
-  add: (item: any) => {
+  add: (item: T) => {
     const value = new Set(selectedItemsToSet.value)
     value.add(item)
     selectedItemsToSet.value = value
@@ -264,7 +260,7 @@ const selectedItemsSetUtilities = {
       selectedItemsSetUtilities.delete(item)
     })
   },
-  delete: (item: any) => {
+  delete: (item: T) => {
     const value = new Set(selectedItemsToSet.value)
     value.delete(item)
     selectedItemsToSet.value = value
@@ -278,7 +274,7 @@ const selectedItemsSetUtilities = {
   For some reason, the reference of the object gets lost. However, when you use an actual ref(), it works just fine
   Getting the reference properly will fix all outstanding issues
   */
-  has: (item: any) => {
+  has: (item: T) => {
     if (!props.primaryKey) return selectedItemsToSet.value.has(item)
 
     // Resolver for when we are using primary keys
@@ -296,7 +292,7 @@ const selectedItemsSetUtilities = {
 /**
  * Only stores data that is fetched when using the provider
  */
-const internalItems = ref<any[]>([])
+const internalItems: Ref<T[]> = ref([])
 
 const perPageNumber = useToNumber(() => props.perPage, {method: 'parseInt'})
 const currentPageNumber = useToNumber(() => props.currentPage, {method: 'parseInt'})
@@ -313,7 +309,7 @@ const isSortable = computed(
     )
 )
 
-const computedFields = computed<TableFieldRaw[]>(() =>
+const computedFields = computed<TableFieldRaw<T>[]>(() =>
   props.fields.map((el) => {
     if (!(typeof el === 'object' && el !== null)) return el
 
@@ -348,7 +344,7 @@ const getBusyRowClasses = computed(() => [
       : props.tbodyTrClass
     : null,
 ])
-const getFieldColumnClasses = (field: Readonly<TableField>) => [
+const getFieldColumnClasses = (field: TableField) => [
   {
     'b-table-sortable-column': isSortable.value && field.sortable,
   },
@@ -357,7 +353,7 @@ const getFieldColumnClasses = (field: Readonly<TableField>) => [
 // Also the row should technically have aria-selected . Both things could probably just use a function with tbodyTrAttrs
 // But functional tbodyTrAttrs are not supported yet
 // Also the stuff for resolving functions could probably be made a util
-const getRowClasses = (item: any | null, type: string) => [
+const getRowClasses = (item: T, type: string) => [
   {
     [`selected table-${props.selectionVariant}`]:
       props.selectable && item && selectedItemsSetUtilities.has(item),
@@ -369,8 +365,8 @@ const getRowClasses = (item: any | null, type: string) => [
     : null,
 ]
 
-const computedItems = computed<readonly any[]>(() => {
-  const sortItems = (items: readonly any[]) => {
+const computedItems = computed<T[]>(() => {
+  const sortItems = (items: T[]) => {
     // "undefined" values are set by us, we do this so we dont wipe out the comparer
     const sortByItems = sortByModel.value?.filter((el) => !!el.order)
 
@@ -380,15 +376,16 @@ const computedItems = computed<readonly any[]>(() => {
     return [...items].sort((a, b) => {
       for (let i = 0; i < (sortByItems.length ?? 0); i++) {
         const sortOption = sortByItems[i]
-        const realVal = (ob: any): string => {
-          if (!(typeof ob === 'object' && ob !== null)) return ob
+        const realVal = (ob: T): string => {
+          if (!isTableItem(ob)) return String(ob)
 
           const sortField = computedFields.value.find((el) => {
-            if (typeof el === 'string') return false
-            return el.key === sortOption.key
+            if (isTableField(el)) return el.key === sortOption.key
+
+            return false
           })
-          const val = ob[sortOption.key]
-          if (sortField && typeof sortField !== 'string' && sortField.sortByFormatted) {
+          const val = ob[sortOption.key as keyof TableItem]
+          if (isTableField(sortField) && !!sortField.sortByFormatted) {
             const formatter =
               typeof sortField.sortByFormatted === 'function'
                 ? sortField.sortByFormatted
@@ -416,23 +413,25 @@ const computedItems = computed<readonly any[]>(() => {
     })
   }
 
-  const filterItems = (items: readonly TableItem[]) =>
+  const filterItems = (items: T[]) =>
     items.filter((item) =>
-      Object.entries(item).some(([key, val]) => {
-        if (
-          val === null ||
-          val === undefined ||
-          key[0] === '_' ||
-          (!props.filterable?.includes(key) && !!props.filterable?.length)
-        )
-          return false
-        const itemValue: string =
-          typeof val === 'object' ? JSON.stringify(Object.values(val)) : val.toString()
-        return itemValue.toLowerCase().includes(props.filter?.toLowerCase() ?? '')
-      })
+      isTableItem(item)
+        ? Object.entries(item).some(([key, val]) => {
+            if (
+              val === null ||
+              val === undefined ||
+              key[0] === '_' ||
+              (!props.filterable?.includes(key) && !!props.filterable?.length)
+            )
+              return false
+            const itemValue: string =
+              typeof val === 'object' ? JSON.stringify(Object.values(val)) : val.toString()
+            return itemValue.toLowerCase().includes(props.filter?.toLowerCase() ?? '')
+          })
+        : true
     )
 
-  let mappedItems = usesProvider.value ? internalItems.value : props.items
+  let mappedItems = usesProvider.value ? internalItems.value : (props.items as T[])
 
   if (
     (isFilterableTable.value === true && !usesProvider.value) ||
@@ -451,7 +450,7 @@ const computedItems = computed<readonly any[]>(() => {
   return mappedItems
 })
 
-const computedDisplayItems = computed<readonly any[]>(() => {
+const computedDisplayItems = computed<T[]>(() => {
   if (Number.isNaN(perPageNumber.value) || (usesProvider.value && !props.noProviderPaging)) {
     return computedItems.value
   }
@@ -463,7 +462,7 @@ const computedDisplayItems = computed<readonly any[]>(() => {
 })
 
 const handleRowSelection = (
-  row: any,
+  row: T,
   index: number,
   shiftClicked = false,
   ctrlClicked = false,
@@ -515,14 +514,14 @@ const handleRowSelection = (
   notifySelectionEvent()
 }
 
-const onRowClick = (row: any, index: number, e: MouseEvent) => {
+const onRowClick = (row: T, index: number, e: MouseEvent) => {
   if (props.noSelectOnClick === false) {
     handleRowSelection(row, index, e.shiftKey, e.ctrlKey, e.metaKey)
   }
   emit('row-clicked', row, index, e)
 }
 
-const handleFieldSorting = (field: Readonly<TableFieldRaw>) => {
+const handleFieldSorting = (field: TableField<T>) => {
   if (!isSortable.value) return
 
   const fieldKey = typeof field === 'object' && field !== null ? field.key : field
@@ -537,7 +536,7 @@ const handleFieldSorting = (field: Readonly<TableFieldRaw>) => {
     if (val === undefined) return 'asc'
     if (
       props.mustSort === true ||
-      (Array.isArray(props.mustSort) && props.mustSort.includes(fieldKey))
+      (Array.isArray(props.mustSort) && props.mustSort.includes(fieldKey as string))
     )
       return 'asc'
     return undefined
@@ -548,7 +547,7 @@ const handleFieldSorting = (field: Readonly<TableFieldRaw>) => {
   const updatedValue: BTableSortBy =
     // If value is new, we default to ascending
     // Otherwise we make a temp copy of the value
-    index === -1 || !originalValue ? {key: fieldKey, order: 'asc'} : {...originalValue}
+    index === -1 || !originalValue ? {key: fieldKey as string, order: 'asc'} : {...originalValue}
 
   /**
    * @returns the updated value to emit for sorted
@@ -581,7 +580,7 @@ const handleFieldSorting = (field: Readonly<TableFieldRaw>) => {
 
 const onFieldHeadClick = (
   fieldKey: string,
-  field: Readonly<TableFieldRaw>,
+  field: TableField<T>,
   event: Readonly<MouseEvent>,
   isFooter = false
 ) => {
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
index 76581d235..22c7dbec5 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
@@ -73,7 +73,7 @@
         <template v-for="(item, itemIndex) in items" :key="itemIndex">
           <BTr
             :class="getRowClasses(item, 'row')"
-            :variant="item._rowVariant"
+            :variant="isTableItem(item) ? item._rowVariant : undefined"
             @click="!filterEvent($event) && emit('row-clicked', item, itemIndex, $event)"
             @dblclick="!filterEvent($event) && emit('row-dbl-clicked', item, itemIndex, $event)"
             @mouseenter="!filterEvent($event) && emit('row-hovered', item, itemIndex, $event)"
@@ -82,7 +82,11 @@
             <BTd
               v-for="field in computedFields"
               :key="field.key"
-              :variant="item._cellVariants?.[field.key] ? null : field.variant"
+              :variant="
+                (isTableItem(item) ? item._cellVariants?.[field.key as string] : false)
+                  ? null
+                  : field.variant
+              "
               :class="getFieldRowClasses(field, item)"
               v-bind="itemAttributes(item, String(field.key), field.tdAttr)"
             >
@@ -103,7 +107,7 @@
                     toggleRowDetails(item)
                   }
                 "
-                :details-showing="item._showDetails ?? false"
+                :details-showing="isTableItem(item) ? item._showDetails ?? false : false"
               >
                 <template v-if="!$slots[`cell(${String(field.key)})`] && !$slots['cell()']">
                   {{ formatItem(item, String(field.key), field.formatter) }}
@@ -112,7 +116,7 @@
             </BTd>
           </BTr>
 
-          <template v-if="item._showDetails === true && $slots['row-details']">
+          <template v-if="isTableItem(item) && item._showDetails === true && $slots['row-details']">
             <BTr aria-hidden="true" role="presentation" class="d-none" />
             <BTr :class="getRowClasses(item, 'row-details')" :variant="item._rowVariant">
               <BTd :colspan="computedFieldsTotal">
@@ -193,13 +197,8 @@
 
 <script setup lang="ts" generic="T">
 import {computed, toRef} from 'vue'
-import type {
-  BTableLiteProps,
-  TableField,
-  TableFieldAttribute,
-  TableFieldRaw,
-  TableItem,
-} from '../../types'
+import type {BTableLiteProps, TableField, TableFieldAttribute, TableItem} from '../../types'
+import {isTableField, isTableItem} from '../../types/TableTypes'
 import {filterEvent, formatItem, get, getTableFieldHeadLabel, startCase} from '../../utils'
 import BTableSimple from './BTableSimple.vue'
 import BTbody from './BTbody.vue'
@@ -209,7 +208,7 @@ import BTh from './BTh.vue'
 import BThead from './BThead.vue'
 import BTr from './BTr.vue'
 
-const props = withDefaults(defineProps<BTableLiteProps>(), {
+const props = withDefaults(defineProps<BTableLiteProps<T>>(), {
   caption: undefined,
   align: undefined,
   fields: () => [],
@@ -258,11 +257,11 @@ const props = withDefaults(defineProps<BTableLiteProps>(), {
 })
 
 const emit = defineEmits<{
-  'head-clicked': [key: string, field: TableFieldRaw, event: MouseEvent, isFooter: boolean]
-  'row-clicked': [item: TableItem, index: number, event: MouseEvent]
-  'row-dbl-clicked': [item: TableItem, index: number, event: MouseEvent]
-  'row-hovered': [item: TableItem, index: number, event: MouseEvent]
-  'row-unhovered': [item: TableItem, index: number, event: MouseEvent]
+  'head-clicked': [key: string, field: TableField<T>, event: MouseEvent, isFooter: boolean]
+  'row-clicked': [item: T, index: number, event: MouseEvent]
+  'row-dbl-clicked': [item: T, index: number, event: MouseEvent]
+  'row-hovered': [item: T, index: number, event: MouseEvent]
+  'row-unhovered': [item: T, index: number, event: MouseEvent]
 }>()
 
 const computedTableClasses = computed(() => [
@@ -275,7 +274,7 @@ const computedTableClasses = computed(() => [
 const computedFields = computed<(TableField & {_noHeader?: true})[]>(() => {
   if (!props.fields.length && props.items.length) {
     const [firstItem] = props.items
-    if ((typeof firstItem === 'object' && firstItem !== null) || Array.isArray(firstItem)) {
+    if (isTableItem(firstItem) || Array.isArray(firstItem)) {
       return Object.keys(firstItem).map((k) => {
         const label = startCase(k)
         return {
@@ -291,17 +290,20 @@ const computedFields = computed<(TableField & {_noHeader?: true})[]>(() => {
   }
 
   return props.fields.map((f) => {
-    if (typeof f === 'string') {
-      const label = startCase(f)
+    if (isTableField(f)) {
       return {
-        key: f,
-        label,
-        tdAttr: props.stacked === true ? {'data-label': label} : undefined,
+        ...(f as TableField),
+        tdAttr:
+          props.stacked === true
+            ? {'data-label': startCase(f.key as string), ...f.tdAttr}
+            : f.tdAttr,
       }
     }
+    const label = startCase(f as string)
     return {
-      ...f,
-      tdAttr: props.stacked === true ? {'data-label': startCase(f.key), ...f.tdAttr} : f.tdAttr,
+      key: f as string,
+      label,
+      tdAttr: props.stacked === true ? {'data-label': label} : undefined,
     }
   })
 })
@@ -320,20 +322,17 @@ const itemAttributes = (item: T, fieldKey: string, attr?: TableFieldAttribute) =
   return attr && typeof attr === 'function' ? attr(val, fieldKey, item) : attr
 }
 
-const headerClicked = (
-  field: Readonly<TableFieldRaw>,
-  event: Readonly<MouseEvent>,
-  isFooter = false
-) => {
-  const fieldKey = typeof field === 'string' ? field : field.key
-  emit('head-clicked', fieldKey, field, event, isFooter)
+const headerClicked = (field: TableField<T>, event: Readonly<MouseEvent>, isFooter = false) => {
+  emit('head-clicked', field.key as string, field, event, isFooter)
 }
 
-const toggleRowDetails = (tr: TableItem) => {
-  tr._showDetails = !tr._showDetails
+const toggleRowDetails = (tr: T) => {
+  if (isTableItem(tr)) {
+    tr._showDetails = !tr._showDetails
+  }
 }
 
-const getFieldColumnClasses = (field: Readonly<TableField>) => [
+const getFieldColumnClasses = (field: TableField) => [
   field.class,
   field.thClass,
   {
@@ -346,16 +345,18 @@ const getFieldColumnClasses = (field: Readonly<TableField>) => [
     : null,
 ]
 
-const getFieldRowClasses = (field: Readonly<TableField>, tr: Readonly<TableItem>) => [
+const getFieldRowClasses = (field: Readonly<TableField>, tr: T) => [
   field.class,
   field.tdClass,
-  tr._cellVariants?.[field.key] ? `table-${tr._cellVariants[field.key]}` : null,
+  (isTableItem(tr) ? tr._cellVariants?.[field.key as string] : false)
+    ? `table-${(tr as TableItem)._cellVariants?.[field.key as string]}`
+    : null,
   {
     'b-table-sticky-column': field.stickyColumn,
   },
 ]
 
-const getRowClasses = (item: Readonly<T>, type: 'row-details' | 'row') =>
+const getRowClasses = (item: T, type: 'row-details' | 'row') =>
   props.tbodyTrClass
     ? typeof props.tbodyTrClass === 'function'
       ? props.tbodyTrClass(item, type)
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 254f047b1..2fca14981 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -967,7 +967,7 @@ export type BTableSimpleProps = {
   variant?: ColorVariant | null
 }
 
-export type BTableLiteProps = {
+export type BTableLiteProps<T> = {
   align?: VerticalAlign
   caption?: string
   captionHtml?: string
@@ -975,19 +975,19 @@ export type BTableLiteProps = {
   emptyFilteredText?: string
   emptyText?: string
   fieldColumnClass?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  | ((field: TableField) => readonly Record<string, any>[])
+  | ((field: TableField<T>) => readonly Record<string, any>[])
     | string
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     | Readonly<Record<PropertyKey, any>>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     | readonly any[]
-  fields?: TableFieldRaw[]
+  fields?: TableFieldRaw<T>[]
   footClone?: boolean
   footRowVariant?: ColorVariant | null
   footVariant?: ColorVariant | null
   headRowVariant?: ColorVariant | null
   headVariant?: ColorVariant | null
-  items?: readonly any[]
+  items?: readonly T[]
   labelStacked?: boolean
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   modelValue?: any
@@ -1000,7 +1000,7 @@ export type BTableLiteProps = {
   // tbodyTransitionProps
   tbodyTrClass?:
     | ((
-        item: any,
+        item: T | null,
         type: string
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ) => string | readonly any[] | null | undefined)
@@ -1015,8 +1015,8 @@ export type BTableLiteProps = {
   theadTrClass?: ClassValue
 } & BTableSimpleProps
 
-export type BTableProps<Provider> = {
-  provider?: BTableProvider<Provider>
+export type BTableProps<T> = {
+  provider?: BTableProvider<T>
   noProvider?: readonly NoProviderTypes[]
   noProviderPaging?: boolean
   noProviderSorting?: boolean
@@ -1054,9 +1054,9 @@ export type BTableProps<Provider> = {
   // sortDirection?: 'asc' | 'desc' | 'last'
   // sortIconLeft?: boolean
   // sortNullLast?: boolean
-  selectedItems?: readonly any[]
+  selectedItems?: readonly T[]
   noSortableIcon?: boolean
-} & Omit<BTableLiteProps, 'tableClass'>
+} & Omit<BTableLiteProps<T>, 'tableClass'>
 
 export type BTrProps = {
   variant?: ColorVariant | null
diff --git a/packages/bootstrap-vue-next/src/types/TableTypes.ts b/packages/bootstrap-vue-next/src/types/TableTypes.ts
index 1304b25bf..96a8e594b 100644
--- a/packages/bootstrap-vue-next/src/types/TableTypes.ts
+++ b/packages/bootstrap-vue-next/src/types/TableTypes.ts
@@ -1,4 +1,4 @@
-import type {ClassValue, ColorVariant, MaybePromise} from '.'
+import type {ClassValue, ColorVariant, LiteralUnion, MaybePromise} from '.'
 import type {StyleValue} from 'vue'
 
 export type TableItem = {
@@ -7,6 +7,9 @@ export type TableItem = {
   _showDetails?: boolean
 }
 
+export const isTableItem = (value: unknown): value is TableItem =>
+  typeof value === 'object' && value !== null
+
 // undefined means no sorting
 export type BTableSortByOrder = 'desc' | 'asc' | undefined
 
@@ -33,8 +36,9 @@ export type TableFieldAttribute =
   | Record<string, unknown>
   | ((value: unknown, key: string, item: any) => Record<string, unknown>)
 
-export type TableField = {
-  key: string
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TableField<T = any> = {
+  key: LiteralUnion<keyof T>
   label?: string
   headerTitle?: string
   headerAbbr?: string
@@ -55,6 +59,14 @@ export type TableField = {
   stickyColumn?: boolean
 }
 
-export type TableFieldRaw = string | TableField
+export type TableFieldRaw<T> = T extends object
+  ? LiteralUnion<keyof T> | TableField<T>
+  : string | TableField
+
+export const isTableField = <T>(value: unknown): value is TableField<T> =>
+  typeof value === 'object' && value !== null && 'key' in value
+
+export const isTableFieldRaw = <T>(value: unknown): value is TableFieldRaw<T> =>
+  typeof value === 'string' || isTableField(value)
 
 export type NoProviderTypes = 'paging' | 'sorting' | 'filtering'
diff --git a/packages/bootstrap-vue-next/src/utils/formatItem.ts b/packages/bootstrap-vue-next/src/utils/formatItem.ts
index 83882b89f..21b1020c1 100644
--- a/packages/bootstrap-vue-next/src/utils/formatItem.ts
+++ b/packages/bootstrap-vue-next/src/utils/formatItem.ts
@@ -1,11 +1,11 @@
-import type {TableFieldFormatter, TableItem} from '../types'
+import type {TableFieldFormatter} from '../types'
 import {get} from '.'
 
-export default <T extends Record<string, unknown>>(
-  item: TableItem<T>,
+export default (
+  item: unknown,
   // Weakly type fieldKey because it can be a nested string, such as 'foo.bar.baz'
   fieldKey: string,
-  formatter?: TableFieldFormatter<typeof item>
+  formatter?: TableFieldFormatter
 ) => {
   const val = get(item, fieldKey)
   return formatter && typeof formatter === 'function' ? formatter(val, fieldKey, item) : val

From a25a1d924d8422362da4e63d1fc31efa0facc3f9 Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Tue, 2 Apr 2024 17:29:25 -0500
Subject: [PATCH 13/20] chore: lint

---
 .../src/components/BFormFile/form-file.spec.ts     |  4 ++--
 .../src/composables/useModalManager.ts             |  4 ++--
 .../bootstrap-vue-next/src/types/TableTypes.ts     | 14 +++++++-------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts b/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
index 6aa4f7b4b..d753114a4 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
@@ -1,5 +1,5 @@
-import { enableAutoUnmount, mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it } from 'vitest'
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import {afterEach, describe, expect, it} from 'vitest'
 import BFormFile from './BFormFile.vue'
 
 describe('form-file', () => {
diff --git a/packages/bootstrap-vue-next/src/composables/useModalManager.ts b/packages/bootstrap-vue-next/src/composables/useModalManager.ts
index 4f4aa664d..1bf8bf327 100644
--- a/packages/bootstrap-vue-next/src/composables/useModalManager.ts
+++ b/packages/bootstrap-vue-next/src/composables/useModalManager.ts
@@ -82,8 +82,8 @@ export default (modalOpen: Readonly<Ref<boolean>>) => {
   )
 
   return {
-    activePosition: computed(
-      () => stack?.value.findIndex((el) => el.exposed?.id === currentModal.exposed?.id)
+    activePosition: computed(() =>
+      stack?.value.findIndex((el) => el.exposed?.id === currentModal.exposed?.id)
     ),
     activeModalCount: countStack,
   }
diff --git a/packages/bootstrap-vue-next/src/types/TableTypes.ts b/packages/bootstrap-vue-next/src/types/TableTypes.ts
index 96a8e594b..5855d5d3d 100644
--- a/packages/bootstrap-vue-next/src/types/TableTypes.ts
+++ b/packages/bootstrap-vue-next/src/types/TableTypes.ts
@@ -30,11 +30,11 @@ export type BTableProvider<T> = (
   context: Readonly<BTableProviderContext>
 ) => MaybePromise<T[] | undefined>
 
-export type TableFieldFormatter = (value: unknown, key: string, item: any) => string
+export type TableFieldFormatter<T> = (value: unknown, key: string, item: T) => string
 
-export type TableFieldAttribute =
+export type TableFieldAttribute<T> =
   | Record<string, unknown>
-  | ((value: unknown, key: string, item: any) => Record<string, unknown>)
+  | ((value: unknown, key: string, item: T) => Record<string, unknown>)
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type TableField<T = any> = {
@@ -43,18 +43,18 @@ export type TableField<T = any> = {
   headerTitle?: string
   headerAbbr?: string
   class?: ClassValue
-  formatter?: TableFieldFormatter
+  formatter?: TableFieldFormatter<T>
   sortable?: boolean
   sortKey?: string
   sortDirection?: string
-  sortByFormatted?: boolean | TableFieldFormatter
+  sortByFormatted?: boolean | TableFieldFormatter<T>
   filterByFormatted?: boolean
   tdClass?: ClassValue
   thClass?: ClassValue
   thStyle?: StyleValue
   variant?: ColorVariant | null
-  tdAttr?: TableFieldAttribute
-  thAttr?: TableFieldAttribute
+  tdAttr?: TableFieldAttribute<T>
+  thAttr?: TableFieldAttribute<T>
   isRowHeader?: boolean
   stickyColumn?: boolean
 }

From 69e487bb6f36a0fa3178f69649a44e46bf34d318 Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Tue, 2 Apr 2024 18:09:21 -0500
Subject: [PATCH 14/20] fix: types generation -- use interfaces for
 componentprops

---
 apps/playground/package.json                  |   2 +-
 packages/bootstrap-vue-next/package.json      |   2 +-
 .../src/components/BTable/BTableLite.vue      |   2 +-
 .../src/types/ComponentProps.ts               | 252 +++++++++---------
 .../src/utils/formatItem.ts                   |   2 +-
 .../src/utils/getTableFieldHeadLabel.ts       |   2 +-
 6 files changed, 131 insertions(+), 131 deletions(-)

diff --git a/apps/playground/package.json b/apps/playground/package.json
index 8b714ff9a..18e65bf68 100644
--- a/apps/playground/package.json
+++ b/apps/playground/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --port 5173",
-    "type-check": "vue-tsc --build --force",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json",
     "build-only": "vite build",
     "build": "pnpm run type-check && pnpm run build-only",
     "preview": "vite preview"
diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json
index 0ed5804a3..6a57cfc98 100644
--- a/packages/bootstrap-vue-next/package.json
+++ b/packages/bootstrap-vue-next/package.json
@@ -30,7 +30,7 @@
   "scripts": {
     "dev": "vite --port 5174",
     "build-only": "vite build",
-    "type-check": "vue-tsc --build --force",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json",
     "preview": "vite preview",
     "build": "pnpm run type-check && pnpm run build-only",
     "lint": "eslint --ext .js,.ts,.vue --ignore-path ../../.gitignore --fix src",
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
index 22c7dbec5..54b7d788f 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
@@ -317,7 +317,7 @@ const showComputedHeaders = computed(() => {
   return true
 })
 
-const itemAttributes = (item: T, fieldKey: string, attr?: TableFieldAttribute) => {
+const itemAttributes = (item: T, fieldKey: string, attr?: TableFieldAttribute<unknown>) => {
   const val = get(item, fieldKey)
   return attr && typeof attr === 'function' ? attr(val, fieldKey, item) : attr
 }
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 2fca14981..bb7552dcf 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -39,7 +39,7 @@ import type {
   VerticalAlign,
 } from '.'
 
-export type BLinkProps = {
+export interface BLinkProps {
   active?: boolean
   activeClass?: string
   append?: boolean
@@ -65,18 +65,18 @@ export type BLinkProps = {
   variant?: ColorVariant | null
 }
 
-export type BAccordionProps = {
+export interface BAccordionProps {
   flush?: boolean
   free?: boolean
   id?: string
   modelValue?: string
 }
 
-export type BDropdownDividerProps = {
+export interface BDropdownDividerProps {
   tag?: string
 }
 
-export type BDropdownGroupProps = {
+export interface BDropdownGroupProps {
   ariaDescribedby?: string
   header?: string
   headerClass?: ClassValue
@@ -85,12 +85,12 @@ export type BDropdownGroupProps = {
   id?: string
 }
 
-export type BDropdownItemProps = {
+export interface BDropdownItemProps extends Omit<BLinkProps, 'routerTag'> {
   linkClass?: ClassValue
   wrapperAttrs?: Readonly<AttrsValue>
-} & Omit<BLinkProps, 'routerTag'>
+}
 
-export type BDropdownItemButtonProps = {
+export interface BDropdownItemButtonProps {
   active?: boolean
   activeClass?: ClassValue
   buttonClass?: ClassValue
@@ -98,21 +98,21 @@ export type BDropdownItemButtonProps = {
   variant?: ColorVariant | null
 }
 
-export type BDropdownTextProps = {
+export interface BDropdownTextProps {
   text?: string
 }
 
-export type BFormFloatingLabelProps = {
+export interface BFormFloatingLabelProps {
   label?: string
   labelFor?: string
   text?: string
 }
 
-export type BFormRowProps = {
+export interface BFormRowProps {
   tag?: string
 }
 
-export type BFormTextProps = {
+export interface BFormTextProps {
   id?: string
   inline?: boolean
   tag?: string
@@ -120,7 +120,7 @@ export type BFormTextProps = {
   textVariant?: TextColorVariant | null
 }
 
-export type BFormCheckboxProps = {
+export interface BFormCheckboxProps {
   ariaLabel?: string
   ariaLabelledby?: string
   autofocus?: boolean
@@ -144,7 +144,7 @@ export type BFormCheckboxProps = {
   value?: CheckboxValue
 }
 
-export type BFormCheckboxGroupProps = {
+export interface BFormCheckboxGroupProps {
   ariaInvalid?: AriaInvalid
   autofocus?: boolean
   buttonVariant?: ButtonVariant | null
@@ -169,7 +169,7 @@ export type BFormCheckboxGroupProps = {
   valueField?: string
 }
 
-export type BFormFileProps = {
+export interface BFormFileProps {
   ariaLabel?: string
   ariaLabelledby?: string
   accept?: string | readonly string[]
@@ -193,15 +193,15 @@ export type BFormFileProps = {
   state?: boolean | null
 }
 
-export type BFormInputProps = {
+export interface BFormInputProps extends CommonInputProps {
   max?: Numberish
   min?: Numberish
   // noWheel: {type: Boolean, default: false}, TODO: not implemented yet
   step?: Numberish
   type?: InputType
-} & CommonInputProps
+}
 
-export type BFormRadioProps = {
+export interface BFormRadioProps {
   ariaLabel?: string
   ariaLabelledby?: string
   autofocus?: boolean
@@ -222,7 +222,7 @@ export type BFormRadioProps = {
   value?: RadioValue
 }
 
-export type BFormRadioGroupProps = {
+export interface BFormRadioGroupProps {
   ariaInvalid?: AriaInvalid
   autofocus?: boolean
   buttonVariant?: ButtonVariant | null
@@ -246,7 +246,7 @@ export type BFormRadioGroupProps = {
   valueField?: string
 }
 
-export type BFormSelectProps = {
+export interface BFormSelectProps {
   ariaInvalid?: AriaInvalid
   autofocus?: boolean
   disabled?: boolean
@@ -275,12 +275,12 @@ export type BFormSelectProps = {
   valueField?: string
 }
 
-export type BFormSelectOptionProps<T> = {
+export interface BFormSelectOptionProps<T> {
   disabled?: boolean
   value?: T
 }
 
-export type BFormSelectOptionGroupProps = {
+export interface BFormSelectOptionGroupProps {
   disabledField?: string
   htmlField?: string
   label?: string
@@ -289,7 +289,7 @@ export type BFormSelectOptionGroupProps = {
   valueField?: string
 }
 
-export type BFormSpinbuttonProps = {
+export interface BFormSpinbuttonProps {
   ariaControls?: string
   ariaLabel?: string
   disabled?: boolean
@@ -318,7 +318,7 @@ export type BFormSpinbuttonProps = {
   wrap?: boolean
 }
 
-export type BFormTagProps = {
+export interface BFormTagProps {
   disabled?: boolean
   id?: string
   noRemove?: boolean
@@ -329,7 +329,7 @@ export type BFormTagProps = {
   variant?: ColorVariant | null
 }
 
-export type BFormTagsProps = {
+export interface BFormTagsProps {
   addButtonText?: string
   addButtonVariant?: ButtonVariant | null
   addOnChange?: boolean
@@ -363,13 +363,13 @@ export type BFormTagsProps = {
   tagVariant?: ColorVariant | null
 }
 
-export type BFormTextareaProps = {
+export interface BFormTextareaProps extends CommonInputProps {
   noResize?: boolean
   rows?: Numberish
   wrap?: string
-} & CommonInputProps
+}
 
-export type BInputGroupProps = {
+export interface BInputGroupProps {
   append?: string
   appendHtml?: string
   id?: string
@@ -379,27 +379,27 @@ export type BInputGroupProps = {
   tag?: string
 }
 
-export type BInputGroupTextProps = {
+export interface BInputGroupTextProps {
   tag?: string
   text?: string
 }
 
-export type BListGroupProps = {
+export interface BListGroupProps {
   flush?: boolean
   horizontal?: boolean | Breakpoint
   numbered?: boolean
   tag?: string
 }
 
-export type BListGroupItemProps = {
+export interface BListGroupItemProps extends Omit<BLinkProps, 'routerTag'> {
   action?: boolean
   button?: boolean
   tag?: string
-} & Omit<BLinkProps, 'routerTag'>
+}
 
-export type BModalOrchestratorProps = TeleporterProps
+export interface BModalOrchestratorProps extends TeleporterProps {}
 
-export type BNavProps = {
+export interface BNavProps {
   align?: AlignmentJustifyContent
   cardHeader?: boolean
   fill?: boolean
@@ -412,20 +412,20 @@ export type BNavProps = {
   vertical?: boolean
 }
 
-export type BNavFormProps = {
+export interface BNavFormProps extends BFormProps {
   role?: string
-} & BFormProps
+}
 
-export type BNavItemProps = {
+export interface BNavItemProps extends Omit<BLinkProps, 'routerTag'> {
   linkAttrs?: Readonly<AttrsValue>
   linkClass?: ClassValue
-} & Omit<BLinkProps, 'routerTag'>
+}
 
-export type BNavTextProps = {
+export interface BNavTextProps {
   text?: string
 }
 
-export type BNavbarProps = {
+export interface BNavbarProps {
   autoClose?: boolean
   container?: boolean | 'fluid' | Breakpoint
   fixed?: 'top' | 'bottom'
@@ -436,11 +436,11 @@ export type BNavbarProps = {
   variant?: ColorVariant | null
 }
 
-export type BNavbarBrandProps = {
+export interface BNavbarBrandProps extends Omit<BLinkProps, 'routerTag'> {
   tag?: string
-} & Omit<BLinkProps, 'routerTag'>
+}
 
-export type BNavbarNavProps = {
+export interface BNavbarNavProps {
   align?: AlignmentJustifyContent
   fill?: boolean
   justified?: boolean
@@ -448,13 +448,13 @@ export type BNavbarNavProps = {
   tag?: string
 }
 
-export type BNavbarToggleProps = {
+export interface BNavbarToggleProps {
   disabled?: boolean
   label?: string
   target?: string | readonly string[]
 }
 
-export type BOffcanvasProps = {
+export interface BOffcanvasProps extends TeleporterProps {
   backdrop?: boolean
   backdropBlur?: string
   backdropVariant?: ColorVariant | 'white' | 'transparent' | null
@@ -482,9 +482,9 @@ export type BOffcanvasProps = {
   title?: string
   // responsive?: Breakpoint
   // TODO responsive doesn't work
-} & TeleporterProps
+}
 
-export type BOverlayProps = {
+export interface BOverlayProps extends RadiusElementExtendables {
   bgColor?: string
   blur?: string | null
   fixed?: boolean
@@ -501,8 +501,9 @@ export type BOverlayProps = {
   variant?: ColorVariant | 'white' | 'transparent' | null
   wrapTag?: string
   zIndex?: Numberish
-} & RadiusElementExtendables
-export type BPaginationProps = {
+}
+
+export interface BPaginationProps {
   align?: AlignmentJustifyContent | 'fill'
   ariaControls?: string
   ariaLabel?: string
@@ -535,7 +536,7 @@ export type BPaginationProps = {
   totalRows?: Numberish
 }
 
-export type BPlaceholderProps = {
+export interface BPlaceholderProps {
   animation?: PlaceholderAnimation
   cols?: Numberish
   size?: PlaceholderSize
@@ -545,7 +546,7 @@ export type BPlaceholderProps = {
   wrapperTag?: string
 }
 
-export type BPlaceholderButtonProps = {
+export interface BPlaceholderButtonProps {
   animation?: PlaceholderAnimation
   cols?: Numberish
   tag?: string
@@ -553,7 +554,7 @@ export type BPlaceholderButtonProps = {
   width?: Numberish
 }
 
-export type BPlaceholderCardProps = {
+export interface BPlaceholderCardProps {
   animation?: PlaceholderAnimation
   footerAnimation?: PlaceholderAnimation
   footerSize?: PlaceholderSize
@@ -575,7 +576,7 @@ export type BPlaceholderCardProps = {
   variant?: ColorVariant | null
 }
 
-export type BPlaceholderTableProps = {
+export interface BPlaceholderTableProps {
   animation?: PlaceholderAnimation
   cellWidth?: Numberish
   columns?: Numberish
@@ -596,14 +597,15 @@ export type BPlaceholderTableProps = {
   variant?: ColorVariant | null
 }
 
-export type BPlaceholderWrapperProps = {
+export interface BPlaceholderWrapperProps {
   loading?: boolean
 }
 
-export type BProgressProps = {
+export interface BProgressProps extends Omit<BProgressBarProps, 'label' | 'labelHtml'> {
   height?: string
-} & Omit<BProgressBarProps, 'label' | 'labelHtml'>
-export type BTabProps = {
+}
+
+export interface BTabProps {
   active?: boolean
   buttonId?: string
   disabled?: boolean
@@ -618,7 +620,7 @@ export type BTabProps = {
   titleLinkClass?: ClassValue
 }
 
-export type BTabsProps = {
+export interface BTabsProps {
   activeId?: string
   activeNavItemClass?: ClassValue
   activeTabClass?: ClassValue
@@ -646,11 +648,11 @@ export type BTabsProps = {
   vertical?: boolean
 }
 
-export type BToastOrchestratorProps = {
+export interface BToastOrchestratorProps extends TeleporterProps {
   appendToast?: boolean
-} & TeleporterProps
+}
 
-export type BCollapseProps = {
+export interface BCollapseProps {
   // appear?: boolean
   horizontal?: boolean
   id?: string
@@ -662,14 +664,14 @@ export type BCollapseProps = {
   visible?: boolean
 }
 
-export type BContainerProps = {
+export interface BContainerProps {
   fluid?: boolean | Breakpoint
   gutterX?: Numberish
   gutterY?: Numberish
   tag?: string
 }
 
-export type BSpinnerProps = {
+export interface BSpinnerProps {
   label?: string
   role?: string
   small?: boolean
@@ -678,7 +680,7 @@ export type BSpinnerProps = {
   variant?: ColorVariant | null
 }
 
-export type BAccordionItemProps = {
+export interface BAccordionItemProps {
   bodyAttrs?: Readonly<AttrsValue>
   bodyClass?: ClassValue
   buttonAttrs?: Readonly<AttrsValue>
@@ -698,7 +700,7 @@ export type BAccordionItemProps = {
   wrapperAttrs?: Readonly<AttrsValue>
 }
 
-export type BAlertProps = {
+export interface BAlertProps {
   closeClass?: ClassValue
   closeContent?: string
   closeLabel?: string
@@ -713,7 +715,10 @@ export type BAlertProps = {
   variant?: ColorVariant | null
 }
 
-export type BAvatarProps = {
+export interface BAvatarProps
+  extends Omit<BLinkProps, 'routerTag' | 'icon'>,
+    ColorExtendables,
+    RadiusElementExtendables {
   alt?: string
   badge?: boolean | string
   badgeBgVariant?: ColorVariant | null
@@ -729,36 +734,32 @@ export type BAvatarProps = {
   square?: boolean
   src?: string
   text?: string
-} & Omit<BLinkProps, 'routerTag'> &
-  ColorExtendables &
-  RadiusElementExtendables
+}
 
-export type BAvatarGroupProps = {
+export interface BAvatarGroupProps extends ColorExtendables, RadiusElementExtendables {
   overlap?: Numberish
   size?: LiteralUnion<Size, Numberish>
   square?: boolean
   tag?: string
-} & ColorExtendables &
-  RadiusElementExtendables
+}
 
-export type BBadgeProps = {
+export interface BBadgeProps extends Omit<BLinkProps, 'routerTag'>, ColorExtendables {
   dotIndicator?: boolean
   pill?: boolean
   tag?: string
   textIndicator?: boolean
-} & Omit<BLinkProps, 'routerTag'> &
-  ColorExtendables
+}
 
-export type BBreadcrumbProps = {
+export interface BBreadcrumbProps {
   items?: readonly BreadcrumbItemRaw[]
 }
 
-export type BBreadcrumbItemProps = {
+export interface BBreadcrumbItemProps extends Omit<BLinkProps, 'routerTag'> {
   ariaCurrent?: string
   text?: string
-} & Omit<BLinkProps, 'routerTag'>
+}
 
-export type BButtonProps = {
+export interface BButtonProps extends Omit<BLinkProps, 'variant'> {
   loading?: boolean
   loadingFill?: boolean
   loadingText?: string
@@ -769,29 +770,29 @@ export type BButtonProps = {
   tag?: string
   type?: ButtonType
   variant?: ButtonVariant | null
-} & Omit<BLinkProps, 'variant'>
+}
 
-export type BButtonGroupProps = {
+export interface BButtonGroupProps {
   ariaLabel?: string
   size?: Size
   tag?: string
   vertical?: boolean
 }
 
-export type BButtonToolbarProps = {
+export interface BButtonToolbarProps {
   ariaLabel?: string
   // keyNav?: boolean
   justify?: boolean
   role?: string
 }
 
-export type BCloseButtonProps = {
+export interface BCloseButtonProps {
   ariaLabel?: string
   disabled?: boolean
   type?: ButtonType
 }
 
-export type BCardProps = {
+export interface BCardProps extends ColorExtendables {
   align?: AlignmentTextHorizontal
   bodyBgVariant?: ColorVariant | null
   bodyClass?: ClassValue
@@ -831,9 +832,9 @@ export type BCardProps = {
   tag?: string
   title?: string
   titleTag?: string
-} & ColorExtendables
+}
 
-export type BCardBodyProps = {
+export interface BCardBodyProps extends ColorExtendables {
   overlay?: boolean
   subtitle?: string
   subtitleTag?: string
@@ -842,36 +843,36 @@ export type BCardBodyProps = {
   text?: string
   title?: string
   titleTag?: string
-} & ColorExtendables
+}
 
-export type BCardGroupProps = {
+export interface BCardGroupProps {
   columns?: boolean
   deck?: boolean
   tag?: string
 }
 
-export type BCardImageProps = {
+export interface BCardImageProps extends BImgProps {
   bottom?: boolean
   top?: boolean
-} & BImgProps
+}
 
-export type BCardSubtitleProps = {
+export interface BCardSubtitleProps {
   text?: string
   tag?: string
   textVariant?: TextColorVariant | null
 }
 
-export type BCardTextProps = {
+export interface BCardTextProps {
   tag?: string
   text?: string
 }
 
-export type BCardTitleProps = {
+export interface BCardTitleProps {
   tag?: string
   text?: string
 }
 
-export type BCarouselProps = {
+export interface BCarouselProps {
   background?: string
   controls?: boolean
   controlsNextText?: string
@@ -893,7 +894,7 @@ export type BCarouselProps = {
   touchThreshold?: Numberish
 }
 
-export type BCarouselSlideProps = {
+export interface BCarouselSlideProps {
   background?: string
   caption?: string
   captionHtml?: string
@@ -914,14 +915,14 @@ export type BCarouselSlideProps = {
   textTag?: string
 }
 
-export type BTransitionProps = {
+export interface BTransitionProps {
   appear?: boolean
   mode?: TransitionMode
   noFade?: boolean
   transProps?: Readonly<TransitionProps>
 }
 
-export type BImgProps = {
+export interface BImgProps extends RadiusElementExtendables {
   blank?: boolean
   blankColor?: string
   block?: boolean
@@ -937,16 +938,16 @@ export type BImgProps = {
   start?: boolean
   thumbnail?: boolean
   width?: Numberish
-} & RadiusElementExtendables
+}
 
-export type BFormProps = {
+export interface BFormProps {
   floating?: boolean
   id?: string
   novalidate?: boolean
   validated?: boolean
 }
 
-export type BTableSimpleProps = {
+export interface BTableSimpleProps {
   bordered?: boolean
   borderless?: boolean
   borderVariant?: ColorVariant | null
@@ -967,7 +968,7 @@ export type BTableSimpleProps = {
   variant?: ColorVariant | null
 }
 
-export type BTableLiteProps<T> = {
+export interface BTableLiteProps<T> extends BTableSimpleProps {
   align?: VerticalAlign
   caption?: string
   captionHtml?: string
@@ -1013,9 +1014,9 @@ export type BTableLiteProps<T> = {
   tfootTrClass?: ClassValue
   theadClass?: ClassValue
   theadTrClass?: ClassValue
-} & BTableSimpleProps
+}
 
-export type BTableProps<T> = {
+export interface BTableProps<T> extends Omit<BTableLiteProps<T>, 'tableClass'> {
   provider?: BTableProvider<T>
   noProvider?: readonly NoProviderTypes[]
   noProviderPaging?: boolean
@@ -1056,21 +1057,21 @@ export type BTableProps<T> = {
   // sortNullLast?: boolean
   selectedItems?: readonly T[]
   noSortableIcon?: boolean
-} & Omit<BTableLiteProps<T>, 'tableClass'>
+}
 
-export type BTrProps = {
+export interface BTrProps {
   variant?: ColorVariant | null
 }
 
-export type BTheadProps = {
+export interface BTheadProps {
   variant?: ColorVariant | null
 }
 
-export type BTfootProps = {
+export interface BTfootProps {
   variant?: ColorVariant | null
 }
 
-export type BTdProps = {
+export interface BTdProps {
   colspan?: Numberish
   rowspan?: Numberish
   stackedHeading?: string
@@ -1078,11 +1079,11 @@ export type BTdProps = {
   variant?: ColorVariant | null
 }
 
-export type BTbodyProps = {
+export interface BTbodyProps {
   variant?: ColorVariant | null
 }
 
-export type BThProps = {
+export interface BThProps {
   colspan?: Numberish
   rowspan?: Numberish
   stackedHeading?: string
@@ -1090,7 +1091,7 @@ export type BThProps = {
   variant?: ColorVariant | null
 }
 
-export type BProgressBarProps = {
+export interface BProgressBarProps extends ColorExtendables {
   animated?: boolean
   label?: string
   labelHtml?: string
@@ -1100,13 +1101,13 @@ export type BProgressBarProps = {
   showValue?: boolean
   striped?: boolean
   value?: Numberish
-} & ColorExtendables
+}
 
-export type BInputGroupAddonProps = {
+export interface BInputGroupAddonProps {
   isText?: boolean
 }
 
-export type BFormFeedbackSharedProps = {
+export interface BFormFeedbackSharedProps {
   ariaLive?: string
   forceShow?: boolean
   id?: string
@@ -1117,7 +1118,7 @@ export type BFormFeedbackSharedProps = {
   tooltip?: boolean
 }
 
-export type BDropdownProps = {
+export interface BDropdownProps extends TeleporterProps {
   ariaLabel?: string
   autoClose?: boolean | 'inside' | 'outside'
   boundary?: Boundary | RootBoundary
@@ -1156,9 +1157,9 @@ export type BDropdownProps = {
   toggleClass?: ClassValue
   toggleText?: string
   variant?: ButtonVariant | null
-} & TeleporterProps
+}
 
-export type BToastProps = {
+export interface BToastProps extends ColorExtendables, Omit<BLinkProps, 'routerTag'> {
   body?: string
   bodyClass?: ClassValue
   headerClass?: ClassValue
@@ -1176,10 +1177,9 @@ export type BToastProps = {
   title?: string
   toastClass?: ClassValue
   transProps?: Readonly<BTransitionProps>
-} & ColorExtendables &
-  Omit<BLinkProps, 'routerTag'>
+}
 
-export type BPopoverProps = {
+export interface BPopoverProps extends TeleporterProps {
   boundary?: Boundary | RootBoundary
   boundaryPadding?: Padding
   click?: boolean
@@ -1215,20 +1215,20 @@ export type BPopoverProps = {
   title?: string
   tooltip?: boolean
   variant?: ColorVariant | null
-} & TeleporterProps
+}
 
-export type BTooltipProps = {
+export interface BTooltipProps extends Omit<BPopoverProps, 'tooltip'> {
   interactive?: boolean
-} & Omit<BPopoverProps, 'tooltip'>
+}
 
-export type BCardHeadFootProps = {
+export interface BCardHeadFootProps extends ColorExtendables {
   borderVariant?: ColorVariant | null
   html?: string
   tag?: string
   text?: string
-} & ColorExtendables
+}
 
-export type BModalProps = {
+export interface BModalProps extends TeleporterProps {
   autoFocus?: boolean
   autoFocusButton?: 'ok' | 'cancel' | 'close'
   body?: string
@@ -1283,4 +1283,4 @@ export type BModalProps = {
   titleSrOnly?: boolean
   titleTag?: string
   transProps?: Readonly<BTransitionProps>
-} & TeleporterProps
+}
diff --git a/packages/bootstrap-vue-next/src/utils/formatItem.ts b/packages/bootstrap-vue-next/src/utils/formatItem.ts
index 21b1020c1..0c9a9efee 100644
--- a/packages/bootstrap-vue-next/src/utils/formatItem.ts
+++ b/packages/bootstrap-vue-next/src/utils/formatItem.ts
@@ -5,7 +5,7 @@ export default (
   item: unknown,
   // Weakly type fieldKey because it can be a nested string, such as 'foo.bar.baz'
   fieldKey: string,
-  formatter?: TableFieldFormatter
+  formatter?: TableFieldFormatter<unknown>
 ) => {
   const val = get(item, fieldKey)
   return formatter && typeof formatter === 'function' ? formatter(val, fieldKey, item) : val
diff --git a/packages/bootstrap-vue-next/src/utils/getTableFieldHeadLabel.ts b/packages/bootstrap-vue-next/src/utils/getTableFieldHeadLabel.ts
index 3ce736540..9d6f351c7 100644
--- a/packages/bootstrap-vue-next/src/utils/getTableFieldHeadLabel.ts
+++ b/packages/bootstrap-vue-next/src/utils/getTableFieldHeadLabel.ts
@@ -1,7 +1,7 @@
 import {titleCase} from './stringUtils'
 import type {TableFieldRaw} from '../types'
 
-export default (field: Readonly<TableFieldRaw>) =>
+export default (field: Readonly<TableFieldRaw<unknown>>) =>
   typeof field === 'string'
     ? titleCase(field)
     : field.label !== undefined

From e0136dc7c552e24912a79d84534792fe763cdc9c Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Thu, 4 Apr 2024 16:54:21 -0700
Subject: [PATCH 15/20] fix(BTable): Get unit tests working

---
 .../src/components/BTable/table.spec.ts       | 38 +++++++++++++++----
 .../src/types/TableTypes.ts                   |  4 +-
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts b/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts
index 742d7dd17..f4fa33ab7 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts
@@ -113,7 +113,11 @@ describe('tbody', () => {
 
   it('sorts text ascending', () => {
     const wrapper = mount(BTable, {
-      props: {items: simpleItems, fields: simpleFields, sortBy: 'first_name'},
+      props: {
+        items: simpleItems,
+        fields: simpleFields,
+        sortBy: [{order: 'asc', key: 'first_name'}],
+      },
     })
     const text = wrapper
       .get('tbody')
@@ -124,7 +128,11 @@ describe('tbody', () => {
 
   it('sorts text descending', () => {
     const wrapper = mount(BTable, {
-      props: {items: simpleItems, fields: simpleFields, sortBy: 'first_name', sortDesc: true},
+      props: {
+        items: simpleItems,
+        fields: simpleFields,
+        sortBy: [{order: 'desc', key: 'first_name'}],
+      },
     })
     const text = wrapper
       .get('tbody')
@@ -135,7 +143,7 @@ describe('tbody', () => {
 
   it('sorts numbers ascending', () => {
     const wrapper = mount(BTable, {
-      props: {items: simpleItems, fields: simpleFields, sortBy: 'age'},
+      props: {items: simpleItems, fields: simpleFields, sortBy: [{order: 'asc', key: 'age'}]},
     })
     const text = wrapper
       .get('tbody')
@@ -146,7 +154,11 @@ describe('tbody', () => {
 
   it('sorts numbers descending', () => {
     const wrapper = mount(BTable, {
-      props: {items: simpleItems, fields: simpleFields, sortBy: 'age', sortDesc: true},
+      props: {
+        items: simpleItems,
+        fields: simpleFields,
+        sortBy: [{order: 'desc', key: 'age'}],
+      },
     })
     const text = wrapper
       .get('tbody')
@@ -157,7 +169,11 @@ describe('tbody', () => {
 
   it('sorts by formatted when sortByFormatted === true && formatter exists', () => {
     const wrapper = mount(BTable, {
-      props: {items: simpleItems, fields: formattedFields, sortBy: 'is_adult'},
+      props: {
+        items: simpleItems,
+        fields: formattedFields,
+        sortBy: [{order: 'asc', key: 'is_adult'}],
+      },
     })
     const text = wrapper
       .get('tbody')
@@ -168,7 +184,11 @@ describe('tbody', () => {
 
   it('sorts by formatted when sortByFormatted === true && formatter exists and respects sorDesc', () => {
     const wrapper = mount(BTable, {
-      props: {items: simpleItems, fields: formattedFields, sortBy: 'is_adult', sortDesc: true},
+      props: {
+        items: simpleItems,
+        fields: formattedFields,
+        sortBy: [{order: 'desc', key: 'is_adult'}],
+      },
     })
     const text = wrapper
       .get('tbody')
@@ -189,7 +209,11 @@ describe('tbody', () => {
     ]
 
     const wrapper = mount(BTable, {
-      props: {items: simpleItems, fields: customFormatterFields, sortBy: 'first_name'},
+      props: {
+        items: simpleItems,
+        fields: customFormatterFields,
+        sortBy: [{order: 'asc', key: 'first_name'}],
+      },
     })
     const text = wrapper
       .get('tbody')
diff --git a/packages/bootstrap-vue-next/src/types/TableTypes.ts b/packages/bootstrap-vue-next/src/types/TableTypes.ts
index 5855d5d3d..9c3cc13fb 100644
--- a/packages/bootstrap-vue-next/src/types/TableTypes.ts
+++ b/packages/bootstrap-vue-next/src/types/TableTypes.ts
@@ -1,9 +1,9 @@
 import type {ClassValue, ColorVariant, LiteralUnion, MaybePromise} from '.'
 import type {StyleValue} from 'vue'
 
-export type TableItem = {
+export type TableItem<T = Record<string, unknown>> = T & {
   _rowVariant?: ColorVariant | null
-  _cellVariants?: Partial<Record<string, ColorVariant>>
+  _cellVariants?: Partial<Record<keyof T, ColorVariant>>
   _showDetails?: boolean
 }
 

From 0d5a4d2cce057b30ceb02e7c7c92f0e5a4686858 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Thu, 4 Apr 2024 20:14:20 -0700
Subject: [PATCH 16/20] fix(BTableSimple): Update test

---
 .../src/components/BTable/table-simple.spec.ts                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bootstrap-vue-next/src/components/BTable/table-simple.spec.ts b/packages/bootstrap-vue-next/src/components/BTable/table-simple.spec.ts
index ec6903b3d..965bc11d5 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/table-simple.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BTable/table-simple.spec.ts
@@ -46,7 +46,7 @@ describe('BTableSimple', () => {
     })
     expect(wrapper.get('div').attributes('style')).toBe('max-height: 300px;')
     await wrapper.setProps({stickyHeader: false})
-    expect(wrapper.get('div').attributes('style')).toBeUndefined()
+    expect(wrapper.get('div').attributes('style')).toBeFalsy()
     await wrapper.setProps({stickyHeader: 200})
     expect(wrapper.get('div').attributes('style')).toBe('max-height: 200px;')
     await wrapper.setProps({stickyHeader: '400px'})

From 6c037db4adb136397d124e23ebf9f90d44ab566a Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Fri, 5 Apr 2024 11:45:54 -0700
Subject: [PATCH 17/20] chore: address type errors in playground

---
 .../src/components/Comps/TBLink.vue           | 36 ++++++++++++-------
 .../src/components/Comps/TPopover.vue         |  9 +----
 .../src/components/Comps/TTable.vue           | 34 ++++++++++--------
 .../playground/src/components/Comps/TTabs.vue | 11 ++++--
 .../src/types/TableTypes.ts                   |  2 +-
 5 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/apps/playground/src/components/Comps/TBLink.vue b/apps/playground/src/components/Comps/TBLink.vue
index cfc7b5f60..601994304 100644
--- a/apps/playground/src/components/Comps/TBLink.vue
+++ b/apps/playground/src/components/Comps/TBLink.vue
@@ -2,22 +2,12 @@
   <BContainer fluid>
     <BRow>
       <BCol>
-        <BLink :to="{name: 'index', path: '/' /* path is used when vue-router is not present */}"
-          >Home</BLink
-        >
+        <BLink :to="home">Home</BLink>
       </BCol>
     </BRow>
     <BRow>
       <BCol>
-        <BLink
-          :to="{
-            name: 'about',
-            params: {id: '456'},
-            query: {param: 'someVal'},
-            path: '/about' /* path is used when vue-router is not present */,
-          }"
-          >About</BLink
-        >
+        <BLink :to="about">About</BLink>
       </BCol>
     </BRow>
     <BRow>
@@ -30,3 +20,25 @@
       -->
   </BContainer>
 </template>
+
+<script setup lang="ts">
+import type {RouteLocationRaw} from 'vue-router'
+
+// TODO: We're using `RouteLocationRaw` here which is an internal class of vue-router
+//  I believe we're using it incorrectly in that we're using path as a fallback
+//  when vue-router isn't present. The typing for the class doesn't allow for that -
+//  It can't resolve to RouteLocationNamedRaw, since path must be undefined and it
+//  cant resolve to RouteLocationPathRaw since it has now name property.  I'm not sure
+//  I understand the intent of the code, so I'm forcing the cast to get past the error for now.
+const home = {
+  name: 'index',
+  path: '/' /* path is used when vue-router is not present */,
+} as RouteLocationRaw
+
+const about = {
+  name: 'about',
+  params: {id: '456'},
+  query: {param: 'someVal'},
+  path: '/about' /* path is used when vue-router is not present */,
+} as RouteLocationRaw
+</script>
diff --git a/apps/playground/src/components/Comps/TPopover.vue b/apps/playground/src/components/Comps/TPopover.vue
index f105a1d09..9641d8326 100644
--- a/apps/playground/src/components/Comps/TPopover.vue
+++ b/apps/playground/src/components/Comps/TPopover.vue
@@ -150,14 +150,7 @@
     </BRow>
     <BRow class="my-5 position-relative">
       <BCol>
-        <BPopover
-          v-model="value"
-          :placement="popoverPlacemet"
-          strategy="absolute"
-          no-fade
-          no-auto-close
-          manual
-        >
+        <BPopover v-model="value" strategy="absolute" no-fade no-auto-close manual>
           <template #title>
             <h3>Popover title</h3>
           </template>
diff --git a/apps/playground/src/components/Comps/TTable.vue b/apps/playground/src/components/Comps/TTable.vue
index a012a5030..e751f72f4 100644
--- a/apps/playground/src/components/Comps/TTable.vue
+++ b/apps/playground/src/components/Comps/TTable.vue
@@ -77,13 +77,7 @@
       </BCol>
       <BCol>
         <p>Selection mode</p>
-        <BFormRadio
-          v-for="(car, index) in ['single', 'multi', 'range']"
-          :key="index"
-          v-model="selectionMode"
-          :value="car"
-          >{{ car }}</BFormRadio
-        >
+        <BFormRadioGroup v-model="selectionMode" :options="['single', 'multi', 'range']" />
       </BCol>
     </BRow>
     <BRow>
@@ -131,14 +125,18 @@
               </th>
             </tr>
           </template>
-          <template #thead-sub="{key, label}">
+          <!-- <template #thead-sub="{field}">
             <tr class="my">
               <th variant="danger" />
               <th variant="danger">
-                <BFormSelect :placeholder="label" :options="[label, key]" label-field="label" />
+                <BFormSelect
+                  :placeholder="field.label"
+                  :options="[field.label, field.key]"
+                  label-field="label"
+                />
               </th>
             </tr>
-          </template>
+          </template> -->
           <template #cell(first_name)="data">
             <a href="#">{{ data.value }}</a>
           </template>
@@ -148,7 +146,7 @@
     <BRow>
       <BCol>
         <h4 class="my-3">Refreshable table (displays current time)</h4>
-        <BButton @click="currentTimeTable?.refresh()">Refresh</BButton>
+        <BButton @click="refreshTime">Refresh</BButton>
       </BCol>
     </BRow>
     <BRow>
@@ -292,8 +290,8 @@
         </BRow>
 
         <!-- Main table element for typed table-->
+        <!-- TODO: Re-enable sortby with multi-sort v-model:sort-by="sortBy"-->
         <BTable
-          v-model:sort-by="sortBy"
           v-model:sort-desc="sortDesc"
           :sort-internal="true"
           :items="itemsTyped"
@@ -353,8 +351,8 @@ import type {BTable, ColorVariant, TableFieldRaw, TableItem} from 'bootstrap-vue
 
 type LiteralUnion<T, U = string> = T | (U & Record<never, never>)
 
-const stringTableDefinitions = ref(['last_name', 'first_name', 'age'])
-const objectTableDefinitions = ref<Exclude<TableFieldRaw, string>[]>([
+const stringTableDefinitions = ['last_name', 'first_name', 'age']
+const objectTableDefinitions: TableFieldRaw[] = [
   {
     key: 'last_name',
     label: 'Family name',
@@ -362,7 +360,7 @@ const objectTableDefinitions = ref<Exclude<TableFieldRaw, string>[]>([
   },
   {key: 'first_name', label: 'Given name'},
   {key: 'age', label: 'Age', formatter: (value: unknown) => `${value} years`},
-])
+]
 const items: TableItem[] = [
   {age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
   {age: 21, first_name: 'Larsen', last_name: 'Shaw'},
@@ -405,6 +403,12 @@ const currentTimeProvider = (): TableItem[] => {
   ]
 }
 
+// TODO: We're exposing refresh in BTable - why is typescript griping?
+const refreshTime = () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(currentTimeTable.value as any)?.refresh()
+}
+
 interface PersonName {
   first: string
   last: string
diff --git a/apps/playground/src/components/Comps/TTabs.vue b/apps/playground/src/components/Comps/TTabs.vue
index 6a935490f..e9c8b46f4 100644
--- a/apps/playground/src/components/Comps/TTabs.vue
+++ b/apps/playground/src/components/Comps/TTabs.vue
@@ -169,7 +169,7 @@ const ChildComp = defineComponent({
 const ParentComp = defineComponent({
   name: 'ParentComp',
   render() {
-    return h(BTabs, {}, () => this.$slots.default())
+    return h(BTabs, {}, () => (this.$slots.default ? this.$slots.default() : null))
   },
 })
 
@@ -178,10 +178,13 @@ const LoggerComp = defineComponent({
   name: 'ParentComp',
   components: {},
   mounted() {
+    // eslint-disable-next-line no-console
     console.log('logger component mounted')
   },
   render() {
-    return h(BTabs, {class: 'border m-3 p-3'}, () => this.$slots.default())
+    return h(BTabs, {class: 'border m-3 p-3'}, () =>
+      this.$slots.default ? this.$slots.default() : null
+    )
   },
 })
 
@@ -202,7 +205,9 @@ const tab3 = ref([
   {title: 't3', content: 't3'},
   {title: 't4', content: 't4'},
 ])
-function log(e) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function log(e: any) {
+  // eslint-disable-next-line no-console
   console.log('click', e)
 }
 
diff --git a/packages/bootstrap-vue-next/src/types/TableTypes.ts b/packages/bootstrap-vue-next/src/types/TableTypes.ts
index 9c3cc13fb..711c59885 100644
--- a/packages/bootstrap-vue-next/src/types/TableTypes.ts
+++ b/packages/bootstrap-vue-next/src/types/TableTypes.ts
@@ -59,7 +59,7 @@ export type TableField<T = any> = {
   stickyColumn?: boolean
 }
 
-export type TableFieldRaw<T> = T extends object
+export type TableFieldRaw<T = unknown> = T extends object
   ? LiteralUnion<keyof T> | TableField<T>
   : string | TableField
 

From d06df3f5e4fb5463c83e89c234e6e59945d8c214 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Mon, 8 Apr 2024 11:46:11 -0700
Subject: [PATCH 18/20] feat(BTable): Get multisort working

---
 .../src/components/Comps/TTable.vue           | 82 +++++++++++++------
 .../src/components/BTable/BTable.vue          | 35 ++++----
 .../src/components/BTable/table.spec.ts       | 49 ++++++++++-
 .../src/types/exports/index.ts                |  1 +
 4 files changed, 128 insertions(+), 39 deletions(-)

diff --git a/apps/playground/src/components/Comps/TTable.vue b/apps/playground/src/components/Comps/TTable.vue
index e751f72f4..61da96126 100644
--- a/apps/playground/src/components/Comps/TTable.vue
+++ b/apps/playground/src/components/Comps/TTable.vue
@@ -125,18 +125,22 @@
               </th>
             </tr>
           </template>
-          <!-- <template #thead-sub="{field}">
+          <!-- TODO: We shouldn't have to cast the slot properties, bug in BTable definition? -->
+          <template #thead-sub="data">
             <tr class="my">
               <th variant="danger" />
               <th variant="danger">
                 <BFormSelect
-                  :placeholder="field.label"
-                  :options="[field.label, field.key]"
+                  :model-value="(data as unknown as TableField<any>).label"
+                  :options="[
+                    (data as unknown as TableField<any>).label,
+                    (data as unknown as TableField<any>).key,
+                  ]"
                   label-field="label"
                 />
               </th>
             </tr>
-          </template> -->
+          </template>
           <template #cell(first_name)="data">
             <a href="#">{{ data.value }}</a>
           </template>
@@ -178,10 +182,11 @@
               label-size="sm"
               class="mb-0"
             >
-              <BInputGroup size="sm">
+              <BButton size="sm" @click="onAddSort">Add Sort...</BButton>
+              <BInputGroup v-for="sort in sortBy" :key="sort.key" size="sm">
                 <BFormSelect
                   id="sort-by-select"
-                  v-model="sortBy"
+                  v-model="sort.key"
                   :options="sortOptions"
                   :aria-describedby="ariaDescribedby"
                   class="w-75"
@@ -192,14 +197,14 @@
                 </BFormSelect>
 
                 <BFormSelect
-                  v-model="sortDesc"
+                  v-model="sort.order"
                   :disabled="!sortBy"
                   :aria-describedby="ariaDescribedby"
                   size="sm"
                   class="w-25"
                 >
-                  <option :value="false">Asc</option>
-                  <option :value="true">Desc</option>
+                  <option value="asc">Asc</option>
+                  <option value="desc">Desc</option>
                 </BFormSelect>
               </BInputGroup>
             </BFormGroup>
@@ -290,9 +295,8 @@
         </BRow>
 
         <!-- Main table element for typed table-->
-        <!-- TODO: Re-enable sortby with multi-sort v-model:sort-by="sortBy"-->
         <BTable
-          v-model:sort-desc="sortDesc"
+          v-model:sort-by="sortBy"
           :sort-internal="true"
           :items="itemsTyped"
           :fields="fieldsTyped"
@@ -302,8 +306,11 @@
           :responsive="false"
           :filterable="filterOn"
           :small="true"
+          :multisort="true"
           @filtered="onFiltered"
           @row-clicked="onRowClicked"
+          @sorted="onSorted"
+          @update:sort-by="onSortUpdate"
         >
           <!-- TODO: is typing of dynamic slots possible? -->
           <template #cell(name)="row">
@@ -347,7 +354,14 @@
 
 <script setup lang="ts">
 import {computed, reactive, ref} from 'vue'
-import type {BTable, ColorVariant, TableFieldRaw, TableItem} from 'bootstrap-vue-next'
+import type {
+  BTable,
+  BTableSortBy,
+  ColorVariant,
+  TableField,
+  TableFieldRaw,
+  TableItem,
+} from 'bootstrap-vue-next'
 
 type LiteralUnion<T, U = string> = T | (U & Record<never, never>)
 
@@ -403,7 +417,7 @@ const currentTimeProvider = (): TableItem[] => {
   ]
 }
 
-// TODO: We're exposing refresh in BTable - why is typescript griping?
+// TODO: We're exposing refresh in BTable - why is typescript griping? The refresh works fine
 const refreshTime = () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ;(currentTimeTable.value as any)?.refresh()
@@ -474,14 +488,21 @@ const fieldsTyped: Exclude<TableFieldRaw<Person>, string>[] = [
   {key: 'actions', label: 'Actions'},
 ]
 
-const pageOptions = [5, 10, 15, {value: 100, text: 'Show a lot'}]
+// TODO: looks like mixed value/object options are broken in BSelect??/
+//const pageOptions = [5, 10, 15, {value: 100, text: 'Show a lot'}]
+
+const pageOptions = [
+  {value: 5, text: '5'},
+  {value: 10, text: '10'},
+  {value: 15, text: '15'},
+  {value: 100, text: 'Show a lot'},
+]
 
 const totalRows = ref(itemsTyped.length)
 const currentPage = ref(1)
 const perPage = ref(5)
-const sortBy = ref('')
+const sortBy = ref<BTableSortBy[]>([])
 const sortDirection = ref('asc')
-const sortDesc = ref(false)
 const filter = ref('')
 const filterOn = ref([])
 const infoModal = reactive({
@@ -512,17 +533,32 @@ function onFiltered(filteredItems: TableItem<Person>[]) {
   totalRows.value = filteredItems.length
   currentPage.value = 1
 
-  // The following logging is just to prove that typing is working
-  filteredItems.forEach((item) => {
-    // eslint-disable-next-line no-console
-    console.log(
-      `${item.name.first} ${item.name.last} is ${item.age} years old and is active = ${item.isActive}`
-    )
-  })
+  // The following lines are just to prove that typing is working
+  false &&
+    filteredItems.forEach((item) => {
+      // eslint-disable-next-line no-console
+      console.log(
+        `${item.name.first} ${item.name.last} is ${item.age} years old and is active = ${item.isActive}`
+      )
+    })
 }
 
 function onRowClicked(row: TableItem<Person>, index: number) {
   // eslint-disable-next-line no-console
   console.log(`clicked on row ${index}: ${row.name.first} ${row.name.last}`)
 }
+
+function onSorted(sortby: BTableSortBy) {
+  // eslint-disable-next-line no-console
+  console.log(`sorted: ${JSON.stringify(sortby)}`)
+}
+
+function onSortUpdate(sortby: BTableSortBy | BTableSortBy[] | null) {
+  // eslint-disable-next-line no-console
+  console.log(`sort-by:update: ${JSON.stringify(sortby)}`)
+}
+
+function onAddSort() {
+  sortBy.value.push({key: '', order: 'asc'})
+}
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index be5aaaa5a..16773f4b2 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -225,7 +225,7 @@ const emit = defineEmits<{
   'row-selected': [value: T]
   'row-unselected': [value: T]
   'selection': [value: T[]]
-  'sorted': [value: BTableSortBy | null]
+  'sorted': [value: BTableSortBy]
 }>()
 
 const sortByModel = defineModel<BTableSortBy[] | undefined>('sortBy', {
@@ -313,18 +313,19 @@ const computedFields = computed<TableFieldRaw<T>[]>(() =>
   props.fields.map((el) => {
     if (!(typeof el === 'object' && el !== null)) return el
 
-    const value = sortByModel.value?.find((el) => el.key === el.key)
+    const value = sortByModel.value?.find((sb) => el.key === sb.key)
+    const sortValue =
+      isSortable.value === false
+        ? undefined
+        : value === undefined
+          ? 'none'
+          : value.order === 'desc'
+            ? 'descending'
+            : 'ascending'
     return {
       ...el,
       thAttr: {
-        'aria-sort':
-          isSortable.value === false
-            ? undefined
-            : value === undefined
-              ? 'none'
-              : value.order === 'desc'
-                ? 'descending'
-                : 'ascending',
+        'aria-sort': sortValue,
         ...el.thAttr,
       },
     }
@@ -552,20 +553,24 @@ const handleFieldSorting = (field: TableField<T>) => {
   /**
    * @returns the updated value to emit for sorted
    */
-  const handleMultiSort = (): null | BTableSortBy => {
+  const handleMultiSort = (): BTableSortBy => {
+    let val = updatedValue
     if (index === -1) {
       sortByModel.value = [...(sortByModel.value ?? []), updatedValue]
-      return updatedValue
+    } else {
+      const order = resolveOrder(updatedValue.order)
+      val = {...updatedValue, order}
+      sortByModel.value = order
+        ? sortByModel.value?.map((el) => (el.key === val.key ? val : el))
+        : sortByModel.value?.filter((el) => el.key !== val.key)
     }
-    const val = {...updatedValue, order: resolveOrder(updatedValue.order)}
-    sortByModel.value?.splice(index, 1, val)
     return val
   }
 
   /**
    * @returns the updated value to emit for sorted
    */
-  const handleSingleSort = (): null | BTableSortBy => {
+  const handleSingleSort = (): BTableSortBy => {
     const val = {
       ...updatedValue,
       order: index === -1 ? updatedValue.order : resolveOrder(updatedValue.order),
diff --git a/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts b/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts
index f4fa33ab7..54b9f02b6 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts
@@ -14,6 +14,14 @@ const simpleItems: TableItem<SimplePerson>[] = [
   {age: 42, first_name: 'Robert'},
 ]
 
+const multiSort: TableItem<SimplePerson>[] = [
+  {age: 27, first_name: 'Havij'},
+  {age: 9, first_name: 'Cyndi'},
+  {age: 42, first_name: 'Robert'},
+  {age: 35, first_name: 'Robert'},
+  {age: 101, first_name: 'Cyndi'},
+]
+
 const simpleFields: Exclude<TableField<SimplePerson>, string>[] = [
   {key: 'first_name', label: 'First Name', sortable: true},
   {key: 'age', label: 'Age', sortable: true},
@@ -74,7 +82,8 @@ describe('tbody', () => {
     expect(heads[0].classes()).toContain('b-table-sortable-column')
     expect(heads[1].classes()).toContain('b-table-sortable-column')
   })
-
+})
+describe('single-sort', () => {
   it('does not show sortable columns when sortable undefined', () => {
     const wrapper = mount(BTable, {
       props: {items: simpleItems},
@@ -221,4 +230,42 @@ describe('tbody', () => {
       .map((row) => row.find('td').text())
     expect(text).toStrictEqual(['Havij', 'Robert', 'Cyndi'])
   })
+
+  describe('multi-sort', () => {
+    it('has aria-sort labels reflecting sortBy prop', () => {
+      const wrapper = mount(BTable, {
+        props: {
+          multisort: true,
+          items: multiSort,
+          fields: simpleFields,
+          sortBy: [
+            {key: 'age', order: 'asc'},
+            {key: 'first_name', order: 'desc'},
+          ],
+        },
+      })
+      const heads = wrapper.get('table').findAll('th')
+      expect(heads[0].attributes('aria-sort')).toBe('descending')
+      expect(heads[1].attributes('aria-sort')).toBe('ascending')
+    })
+
+    it('correctly sorts on two columns', () => {
+      const wrapper = mount(BTable, {
+        props: {
+          multisort: true,
+          items: multiSort,
+          fields: simpleFields,
+          sortBy: [
+            {key: 'first_name', order: 'desc'},
+            {key: 'age', order: 'asc'},
+          ],
+        },
+      })
+      const text = wrapper
+        .get('tbody')
+        .findAll('tr')
+        .map((row) => row.findAll('td')[1].text())
+      expect(text).toStrictEqual(['35', '42', '27', '9', '101'])
+    })
+  })
 })
diff --git a/packages/bootstrap-vue-next/src/types/exports/index.ts b/packages/bootstrap-vue-next/src/types/exports/index.ts
index 520be4271..e4e1346e8 100644
--- a/packages/bootstrap-vue-next/src/types/exports/index.ts
+++ b/packages/bootstrap-vue-next/src/types/exports/index.ts
@@ -15,6 +15,7 @@ export type {
   BreadcrumbItem,
   BreadcrumbItemRaw,
   Breakpoint,
+  BTableSortBy,
   ButtonType,
   ButtonVariant,
   CheckboxOption,

From 3bfcb4b14b841d5134ae9cb919b081e53be52d87 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Tue, 9 Apr 2024 14:27:25 -0700
Subject: [PATCH 19/20] test(BFormCheckbox): remove tests for deprecated events

---
 .../BFormCheckbox/form-checkbox.spec.ts       | 105 ------------------
 1 file changed, 105 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts b/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts
index a017ad8e6..e88bcb8f2 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox.spec.ts
@@ -592,26 +592,6 @@ describe('form-checkbox', () => {
   })
 
   describe('model behavior', () => {
-    it('default unchecked checkbox emits input event when clicked', async () => {
-      const wrapper = mount(BFormCheckbox, {props: {modelValue: false}, attachTo: document.body})
-
-      await wrapper.find('input').trigger('click')
-
-      expect(wrapper.emitted('input')).toBeDefined()
-      expect(wrapper.emitted('input')?.length).toBe(1)
-      expect(wrapper.emitted('input')?.[0][0]).toBeInstanceOf(Event)
-    })
-
-    it('default unchecked checkbox emits change event when clicked', async () => {
-      const wrapper = mount(BFormCheckbox, {props: {modelValue: false}, attachTo: document.body})
-
-      await wrapper.find('input').trigger('click')
-
-      expect(wrapper.emitted('change')).toBeDefined()
-      expect(wrapper.emitted('change')?.length).toBe(1)
-      expect(wrapper.emitted('change')?.[0][0]).toBeInstanceOf(Event)
-    })
-
     it('default unchecked checkbox emits update:modelValue===true event when clicked', async () => {
       const wrapper = mount(BFormCheckbox, {props: {modelValue: false}, attachTo: document.body})
 
@@ -622,26 +602,6 @@ describe('form-checkbox', () => {
       expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe(true)
     })
 
-    it('default checked checkbox emits input event when clicked', async () => {
-      const wrapper = mount(BFormCheckbox, {props: {modelValue: true}, attachTo: document.body})
-
-      await wrapper.find('input').trigger('click')
-
-      expect(wrapper.emitted('input')).toBeDefined()
-      expect(wrapper.emitted('input')?.length).toBe(1)
-      expect(wrapper.emitted('input')?.[0][0]).toBeInstanceOf(Event)
-    })
-
-    it('default checked checkbox emits change event when clicked', async () => {
-      const wrapper = mount(BFormCheckbox, {props: {modelValue: true}, attachTo: document.body})
-
-      await wrapper.find('input').trigger('click')
-
-      expect(wrapper.emitted('change')).toBeDefined()
-      expect(wrapper.emitted('change')?.length).toBe(1)
-      expect(wrapper.emitted('change')?.[0][0]).toBeInstanceOf(Event)
-    })
-
     it('default checked checkbox emits update:modelValue===false event when clicked', async () => {
       const wrapper = mount(BFormCheckbox, {props: {modelValue: true}, attachTo: document.body})
 
@@ -652,36 +612,6 @@ describe('form-checkbox', () => {
       expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe(false)
     })
 
-    it('custom value unchecked checkbox emits input event when clicked', async () => {
-      const wrapper = mount(BFormCheckbox, {
-        props: {
-          modelValue: 'unchecked',
-          value: 'checked',
-          uncheckedValue: 'unchecked',
-        },
-        attachTo: document.body,
-      })
-
-      await wrapper.find('input').trigger('click')
-
-      expect(wrapper.emitted('input')).toBeDefined()
-      expect(wrapper.emitted('input')?.length).toBe(1)
-      expect(wrapper.emitted('input')?.[0][0]).toBeInstanceOf(Event)
-    })
-
-    it('custom value unchecked checkbox emits change event when clicked', async () => {
-      const wrapper = mount(BFormCheckbox, {
-        props: {value: 'checked', uncheckedValue: 'unchecked'},
-        attachTo: document.body,
-      })
-
-      await wrapper.find('input').trigger('click')
-
-      expect(wrapper.emitted('change')).toBeDefined()
-      expect(wrapper.emitted('change')?.length).toBe(1)
-      expect(wrapper.emitted('change')?.[0][0]).toBeInstanceOf(Event)
-    })
-
     it('custom value unchecked checkbox emits update:modelValue==="checked" event when clicked', async () => {
       const wrapper = mount(BFormCheckbox, {
         props: {value: 'checked', uncheckedValue: 'unchecked'},
@@ -695,41 +625,6 @@ describe('form-checkbox', () => {
       expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('checked')
     })
 
-    it('custom value checked checkbox emits input event when clicked', async () => {
-      const wrapper = mount(BFormCheckbox, {
-        props: {
-          modelValue: 'checked',
-          value: 'checked',
-          uncheckedValue: 'unchecked',
-        },
-        attachTo: document.body,
-      })
-
-      await wrapper.find('input').trigger('click')
-
-      expect(wrapper.emitted('input')).toBeDefined()
-      expect(wrapper.emitted('input')?.length).toBe(1)
-      expect(wrapper.emitted('input')?.[0][0]).toBeInstanceOf(Event)
-    })
-
-    it('custom value checked checkbox emits change event when clicked', async () => {
-      const props = {
-        modelValue: 'checked',
-        value: 'checked',
-        uncheckedValue: 'unchecked',
-      }
-      const wrapper = mount(BFormCheckbox, {
-        props,
-        attachTo: document.body,
-      })
-
-      await wrapper.find('input').trigger('click')
-
-      expect(wrapper.emitted('change')).toBeDefined()
-      expect(wrapper.emitted('change')?.length).toBe(1)
-      expect(wrapper.emitted('change')?.[0][0]).toBeInstanceOf(Event)
-    })
-
     it('custom value checked checkbox emits update:modelValue==="unhecked-value" event when clicked', async () => {
       const wrapper = mount(BFormCheckbox, {
         props: {

From a258e917c7b2b5c41c04d62d4b2049ec099f7084 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Wed, 10 Apr 2024 12:49:25 -0700
Subject: [PATCH 20/20] docs(BTable): Document sort and add 'complete example'

---
 apps/docs/src/data/components/table.data.ts |  33 +-
 apps/docs/src/docs/components/table.md      | 811 +++++++++++++++++++-
 packages/bootstrap-vue-next/src/App.vue     | 287 ++++++-
 3 files changed, 1103 insertions(+), 28 deletions(-)

diff --git a/apps/docs/src/data/components/table.data.ts b/apps/docs/src/data/components/table.data.ts
index 5058a763b..0b74cac4c 100644
--- a/apps/docs/src/data/components/table.data.ts
+++ b/apps/docs/src/data/components/table.data.ts
@@ -43,8 +43,9 @@ export default {
         },
         {
           prop: 'sortBy',
-          type: 'string',
+          type: 'BTableSortBy[]',
           default: undefined,
+          description: 'Model representing the current sort state',
         },
         {
           prop: 'sortDesc',
@@ -259,40 +260,26 @@ export default {
         {
           args: [
             {
-              arg: 'update:sortBy',
-              description: '',
+              arg: 'value',
+              description: 'BTableSortBy[] | undefined',
               type: 'string',
             },
           ],
           event: 'update:sortBy',
-          description: '',
-        },
-        {
-          args: [
-            {
-              arg: 'update:sortDesc',
-              description: 'boolean',
-              type: 'boolean',
-            },
-          ],
-          event: 'update:sortDesc',
-          description: '',
+          description:
+            'Emitted when the `sortBy` model is changed and represents the current sort state',
         },
         {
           args: [
             {
-              arg: 'sortBy',
+              arg: 'value',
               description: '',
-              type: 'string',
-            },
-            {
-              arg: 'isDesc',
-              description: '',
-              type: 'boolean',
+              type: 'BTableSortBy',
             },
           ],
           event: 'sorted',
-          description: '',
+          description:
+            'Updated when the user clicks a sortable column heading and represents the column click and the sort state (`asc`, `desc`, or undefined)',
         },
       ],
       slots: [
diff --git a/apps/docs/src/docs/components/table.md b/apps/docs/src/docs/components/table.md
index ae6985efa..85e1d8c15 100644
--- a/apps/docs/src/docs/components/table.md
+++ b/apps/docs/src/docs/components/table.md
@@ -453,11 +453,820 @@ Sticky columns are supported with `BTableSimple`, but you will need to set the s
 
 As with `BTable` and `BTableLite`, sticky columns are not supported when the stacked prop is set on `BTableSimple`.
 
+## Items
+
+## Fields
+
+## Sorting
+
+As mentioned in the [Fields](#fields) section above, you can make columns
+sortable in `<BTable>`. Clicking on a sortable column header will sort the column in ascending
+direction (smallest first), while clicking on it again will switch the direction of sorting to
+descending (largest first). Clicking on it a third time will stop sorting on the column. For
+single column sorting (e.g. `multisort===false`) clicking on a differnt sortable column header will
+sort that column in ascending order and clear the sort order for the previously sorted column.
+
+You can control which column is pre-sorted and the order of sorting (ascending or descending). To
+pre-specify the column to be sorted use the `sortBy` model. For single column sorting (e.g. `multisort===false`)
+`sortBy` should be an array containing a single `BTableSortBy` object.
+
+```ts
+ BTableSortBy = {
+  order: BTableSortByOrder // Sort order can by 'asc', 'desc' or undefined
+  key: string // The field name to sort by
+  comparer?: (a: string, b: string) => number
+}
+```
+
+- **Ascending**: Items are sorted lowest to highest (i.e. `A` to `Z`) and will be displayed with the
+  lowest value in the first row with progressively higher values in the following rows.
+- **Descending**: Items are sorted highest to lowest (i.e. `Z` to `A`) and will be displayed with
+  the highest value in the first row with progressively lower values in the following rows.
+
+<HighlightCard>
+  <BTable
+    :sort-by="[{key: 'first_name', order: 'desc'}]"
+    :items="sortItems"
+    :fields="sortFields"/>
+  <template #html>
+
+```vue
+<template>
+  <BTable :sort-by="[{key: 'first_name', order: 'desc'}]" :items="sortItems" :fields="sortFields" />
+</template>
+
+<script setup lang="ts">
+import {BTable, type TableFieldRaw, type TableItem} from 'bootstrap-vue-next'
+
+interface SortPerson {
+  first_name: string
+  last_name: string
+  age: number
+  isActive: boolean
+}
+
+const sortItems: TableItem<Person>[] = [
+  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
+  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
+  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
+  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
+  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
+  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
+]
+
+const sortFields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
+  {key: 'last_name', sortable: true},
+  {key: 'first_name', sortable: true},
+  {key: 'age', sortable: true},
+  {key: 'isActive', sortable: false},
+]
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+`sorbBy` is a [named model](https://vuejs.org/guide/components/v-model.html#multiple-v-model-bindings)
+so it can be bound to an object that will be updated with the current sort state when the user changes
+sorting by clicking the headers.
+
+<HighlightCard>
+  <BTable
+    :sort-by="singleSortBy"
+    :items="sortItems"
+    :fields="sortFields"/>
+    <div>singleSortBy = {{ JSON.stringify(singleSortBy) }}</div>
+  <template #html>
+
+```vue
+<template>
+  <BTable :sort-by="singleSortBy" :items="sortItems" :fields="sortFields" />
+  <div>singleSortBy = {{ JSON.stringify(singleSortBy) }}</div>
+</template>
+
+<script setup lang="ts">
+import {BTable, type TableFieldRaw, type TableItem} from 'bootstrap-vue-next'
+import {ref} from 'vue'
+
+interface SortPerson {
+  first_name: string
+  last_name: string
+  age: number
+  isActive: boolean
+}
+
+const sortItems: TableItem<Person>[] = [
+  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
+  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
+  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
+  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
+  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
+  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
+]
+
+const sortFields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
+  {key: 'last_name', sortable: true},
+  {key: 'first_name', sortable: true},
+  {key: 'age', sortable: true},
+  {key: 'isActive', sortable: false},
+]
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+Tables can be sorted by multiple columns. Programmaticly, this can be done by adding more entries
+to the `sortBy` array. From the user inteface, multi-sort works as follows:
+
+- Clicking on a sortable header that isn't currently sorted adds it as `ascending` to the end of the sortBy list
+- Clicking on a sortable header that is currently sorted as ascending makes it **descending**, but leaves it in the same order in the `sortBy` list
+- Clicking on a sortable header that is currently sorted as descending removes it from the list
+
+<HighlightCard>
+  <BTable
+    v-model:sort-by="multiSortBy"
+    :items="sortItems"
+    :fields="sortFields"
+    :multisort="true"/>
+    <div>multiSortBy = {{ JSON.stringify(multiSortBy) }}</div>
+  <template #html>
+
+```vue
+<template>
+  <BTable v-model:sort-by="multiSortBy" :items="sortItems" :fields="sortFields" :multisort="true" />
+  <div>multiSortBy = {{ JSON.stringify(multiSortBy) }}</div>
+</template>
+
+<script setup lang="ts">
+import {BTable, type TableFieldRaw, type TableItem} from 'bootstrap-vue-next'
+import {ref} from 'vue'
+
+interface SortPerson {
+  first_name: string
+  last_name: string
+  age: number
+  isActive: boolean
+}
+
+const sortItems: TableItem<Person>[] = [
+  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
+  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
+  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
+  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
+  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
+  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
+]
+
+const sortFields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
+  {key: 'last_name', sortable: true},
+  {key: 'first_name', sortable: true},
+  {key: 'age', sortable: true},
+  {key: 'isActive', sortable: false},
+]
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+## Complete Example
+
+<HighlightCard>
+  <BContainer class="py-5">
+    <!-- User Interface controls -->
+    <BRow>
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          v-slot="{ariaDescribedby}"
+          label="Sort"
+          label-for="sort-by-select"
+          label-cols-sm="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BButton size="sm" @click="onAddSort">Add Sort...</BButton>
+          <BInputGroup v-for="sort in sortBy" :key="sort.key" size="sm">
+            <BFormSelect
+              id="sort-by-select"
+              v-model="sort.key"
+              :options="sortOptions"
+              :aria-describedby="ariaDescribedby"
+              class="w-75"
+            >
+              <template #first>
+                <option value="">-- none --</option>
+              </template>
+            </BFormSelect>
+            <BFormSelect
+              v-model="sort.order"
+              :disabled="!sortBy"
+              :aria-describedby="ariaDescribedby"
+              size="sm"
+              class="w-25"
+            >
+              <option value="asc">Asc</option>
+              <option value="desc">Desc</option>
+            </BFormSelect>
+          </BInputGroup>
+        </BFormGroup>
+      </BCol>
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          label="Filter"
+          label-for="filter-input"
+          label-cols-sm="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BInputGroup size="sm">
+            <BFormInput
+              id="filter-input"
+              v-model="filter"
+              type="search"
+              placeholder="Type to Search"
+            />
+            <BInputGroupAppend>
+              <BButton :disabled="!filter" @click="filter = ''">Clear</BButton>
+            </BInputGroupAppend>
+          </BInputGroup>
+        </BFormGroup>
+      </BCol>
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          v-slot="{ariaDescribedby}"
+          v-model="sortDirection"
+          label="Filter On"
+          description="Leave all unchecked to filter on all data"
+          label-cols-sm="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <div class="d-flex gap-2">
+            <BFormCheckbox v-model="filterOn" value="name" :aria-describedby="ariaDescribedby"
+              >Name</BFormCheckbox
+            >
+            <BFormCheckbox v-model="filterOn" value="age" :aria-describedby="ariaDescribedby"
+              >Age</BFormCheckbox
+            >
+            <BFormCheckbox v-model="filterOn" value="isActive" :aria-describedby="ariaDescribedby"
+              >Active</BFormCheckbox
+            >
+          </div>
+        </BFormGroup>
+      </BCol>
+      <BCol sm="5" md="6" class="my-1">
+        <BFormGroup
+          label="Per page"
+          label-for="per-page-select"
+          label-cols-sm="6"
+          label-cols-md="4"
+          label-cols-lg="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BFormSelect id="per-page-select" v-model="perPage" :options="pageOptions" size="sm" />
+        </BFormGroup>
+      </BCol>
+      <BCol sm="7" md="6" class="my-1">
+        <BPagination
+          v-model="currentPage"
+          :total-rows="totalRows"
+          :per-page="perPage"
+          :align="'fill'"
+          size="sm"
+          class="my-0"
+        />
+      </BCol>
+    </BRow>
+    <!-- Main table element for typed table-->
+    <BTable
+      v-model:sort-by="sortBy"
+      :sort-internal="true"
+      :items="itemsTyped"
+      :fields="fieldsTyped"
+      :current-page="currentPage"
+      :per-page="perPage"
+      :filter="filter"
+      :responsive="false"
+      :filterable="filterOn"
+      :small="true"
+      :multisort="true"
+      @filtered="onFiltered"
+    >
+      <template #cell(name)="row">
+        {{ (row.value as PersonName).first }}
+        {{ (row.value as PersonName).last }}
+      </template>
+      <template #cell(actions)="row">
+        <BButton size="sm" class="mr-1" @click="info(row.item, row.index)"> Info modal </BButton>
+        <BButton size="sm" @click="row.toggleDetails">
+          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
+        </BButton>
+      </template>
+      <template #row-details="row">
+        <BCard>
+          <ul>
+            <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
+            <BButton size="sm" @click="row.toggleDetails"> Toggle Details </BButton>
+          </ul>
+        </BCard>
+      </template>
+    </BTable>
+    <!-- Info modal -->
+    <BModal
+      :id="infoModal.id"
+      v-model="infoModal.open"
+      :title="infoModal.title"
+      :ok-only="true"
+      @hide="resetInfoModal"
+    >
+      <pre>{{ infoModal.content }}</pre>
+    </BModal>
+  </BContainer>
+  <template #html>
+
+```vue
+<template>
+  <BContainer class="py-5">
+    <!-- User Interface controls -->
+    <BRow>
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          v-slot="{ariaDescribedby}"
+          label="Sort"
+          label-for="sort-by-select"
+          label-cols-sm="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BButton size="sm" @click="onAddSort">Add Sort...</BButton>
+          <BInputGroup v-for="sort in sortBy" :key="sort.key" size="sm">
+            <BFormSelect
+              id="sort-by-select"
+              v-model="sort.key"
+              :options="sortOptions"
+              :aria-describedby="ariaDescribedby"
+              class="w-75"
+            >
+              <template #first>
+                <option value="">-- none --</option>
+              </template>
+            </BFormSelect>
+            <BFormSelect
+              v-model="sort.order"
+              :disabled="!sortBy"
+              :aria-describedby="ariaDescribedby"
+              size="sm"
+              class="w-25"
+            >
+              <option value="asc">Asc</option>
+              <option value="desc">Desc</option>
+            </BFormSelect>
+          </BInputGroup>
+        </BFormGroup>
+      </BCol>
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          label="Filter"
+          label-for="filter-input"
+          label-cols-sm="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BInputGroup size="sm">
+            <BFormInput
+              id="filter-input"
+              v-model="filter"
+              type="search"
+              placeholder="Type to Search"
+            />
+            <BInputGroupAppend>
+              <BButton :disabled="!filter" @click="filter = ''">Clear</BButton>
+            </BInputGroupAppend>
+          </BInputGroup>
+        </BFormGroup>
+      </BCol>
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          v-slot="{ariaDescribedby}"
+          v-model="sortDirection"
+          label="Filter On"
+          description="Leave all unchecked to filter on all data"
+          label-cols-sm="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <div class="d-flex gap-2">
+            <BFormCheckbox v-model="filterOn" value="name" :aria-describedby="ariaDescribedby"
+              >Name</BFormCheckbox
+            >
+            <BFormCheckbox v-model="filterOn" value="age" :aria-describedby="ariaDescribedby"
+              >Age</BFormCheckbox
+            >
+            <BFormCheckbox v-model="filterOn" value="isActive" :aria-describedby="ariaDescribedby"
+              >Active</BFormCheckbox
+            >
+          </div>
+        </BFormGroup>
+      </BCol>
+      <BCol sm="5" md="6" class="my-1">
+        <BFormGroup
+          label="Per page"
+          label-for="per-page-select"
+          label-cols-sm="6"
+          label-cols-md="4"
+          label-cols-lg="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BFormSelect id="per-page-select" v-model="perPage" :options="pageOptions" size="sm" />
+        </BFormGroup>
+      </BCol>
+      <BCol sm="7" md="6" class="my-1">
+        <BPagination
+          v-model="currentPage"
+          :total-rows="totalRows"
+          :per-page="perPage"
+          :align="'fill'"
+          size="sm"
+          class="my-0"
+        />
+      </BCol>
+    </BRow>
+    <!-- Main table element for typed table-->
+    <BTable
+      v-model:sort-by="sortBy"
+      :sort-internal="true"
+      :items="itemsTyped"
+      :fields="fieldsTyped"
+      :current-page="currentPage"
+      :per-page="perPage"
+      :filter="filter"
+      :responsive="false"
+      :filterable="filterOn"
+      :small="true"
+      :multisort="true"
+      @filtered="onFiltered"
+    >
+      <template #cell(name)="row">
+        {{ (row.value as PersonName).first }}
+        {{ (row.value as PersonName).last }}
+      </template>
+      <template #cell(actions)="row">
+        <BButton size="sm" class="mr-1" @click="info(row.item, row.index)"> Info modal </BButton>
+        <BButton size="sm" @click="row.toggleDetails">
+          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
+        </BButton>
+      </template>
+      <template #row-details="row">
+        <BCard>
+          <ul>
+            <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
+            <BButton size="sm" @click="row.toggleDetails"> Toggle Details </BButton>
+          </ul>
+        </BCard>
+      </template>
+    </BTable>
+    <!-- Info modal -->
+    <BModal
+      :id="infoModal.id"
+      v-model="infoModal.open"
+      :title="infoModal.title"
+      :ok-only="true"
+      @hide="resetInfoModal"
+    >
+      <pre>{{ infoModal.content }}</pre>
+    </BModal>
+  </BContainer>
+</template>
+
+<script setup lang="ts">
+import {
+  BButton,
+  BFormSelect,
+  BInputGroup,
+  BFormCheckbox,
+  BFormGroup,
+  BCol,
+  BFormInput,
+  BInputGroupAppend,
+  BFormCHeckbox,
+  BPagination,
+  BRow,
+  BModal,
+  BContainer,
+  BTable,
+  type BTableSortBy,
+  type ColorVariant,
+  type TableFieldRaw,
+  type TableItem,
+  type LiteralUnion,
+} from 'bootstrap-vue-next'
+import {computed, reactive, ref} from 'vue'
+
+interface PersonName {
+  first: string
+  last: string
+}
+
+interface Person {
+  name: PersonName
+  age: number
+  isActive: boolean
+}
+
+const itemsTyped: TableItem<Person>[] = [
+  {isActive: true, age: 40, name: {first: 'Dickerson', last: 'Macdonald'}},
+  {isActive: false, age: 21, name: {first: 'Larsen', last: 'Shaw'}},
+  {
+    isActive: false,
+    age: 9,
+    name: {first: 'Mini', last: 'Navarro'},
+    _rowVariant: 'success' as ColorVariant,
+  },
+  {isActive: false, age: 89, name: {first: 'Geneva', last: 'Wilson'}},
+  {isActive: true, age: 38, name: {first: 'Jami', last: 'Carney'}},
+  {isActive: false, age: 27, name: {first: 'Essie', last: 'Dunlap'}},
+  {isActive: true, age: 40, name: {first: 'Thor', last: 'Macdonald'}},
+  {
+    isActive: true,
+    age: 87,
+    name: {first: 'Larsen', last: 'Shaw'},
+    _cellVariants: {age: 'danger', isActive: 'warning'},
+  },
+  {isActive: false, age: 26, name: {first: 'Mitzi', last: 'Navarro'}},
+  {isActive: false, age: 22, name: {first: 'Genevieve', last: 'Wilson'}},
+  {isActive: true, age: 38, name: {first: 'John', last: 'Carney'}},
+  {isActive: false, age: 29, name: {first: 'Dick', last: 'Dunlap'}},
+]
+
+const fieldsTyped: Exclude<TableFieldRaw<Person>, string>[] = [
+  {
+    key: 'name',
+    label: 'Person full name',
+    sortable: true,
+    sortDirection: 'desc',
+  },
+  {
+    key: 'sortableName',
+    label: 'Person sortable name',
+    sortable: true,
+    sortDirection: 'desc',
+    formatter: (_value: unknown, _key?: LiteralUnion<keyof Person>, item?: Person) =>
+      item ? `${item.name.last}, ${item.name.first}` : 'Something went wrong',
+    sortByFormatted: true,
+    filterByFormatted: true,
+  },
+  {key: 'age', label: 'Person age', sortable: true, class: 'text-center'},
+  {
+    key: 'isActive',
+    label: 'Is Active',
+    formatter: (value: unknown) => (value ? 'Yes' : 'No'),
+    sortable: true,
+    sortByFormatted: true,
+    filterByFormatted: true,
+  },
+  {key: 'actions', label: 'Actions'},
+]
+
+const pageOptions = [
+  {value: 5, text: '5'},
+  {value: 10, text: '10'},
+  {value: 15, text: '15'},
+  {value: 100, text: 'Show a lot'},
+]
+
+const totalRows = ref(itemsTyped.length)
+const currentPage = ref(1)
+const perPage = ref(5)
+const sortBy = ref<BTableSortBy[]>([])
+const sortDirection = ref('asc')
+const filter = ref('')
+const filterOn = ref([])
+const infoModal = reactive({
+  open: false,
+  id: 'info-modal',
+  title: '',
+  content: '',
+})
+
+// Create an options list from our fields
+const sortOptions = computed(() =>
+  fieldsTyped.filter((f) => f.sortable).map((f) => ({text: f.label, value: f.key}))
+)
+
+function info(item: TableItem<Person>, index: number) {
+  infoModal.title = `Row index: ${index}`
+  infoModal.content = JSON.stringify(item, null, 2)
+  infoModal.open = true
+}
+
+function resetInfoModal() {
+  infoModal.title = ''
+  infoModal.content = ''
+}
+
+function onFiltered(filteredItems: TableItem<Person>[]) {
+  // Trigger pagination to update the number of buttons/pages due to filtering
+  totalRows.value = filteredItems.length
+  currentPage.value = 1
+}
+
+function onAddSort() {
+  sortBy.value.push({key: '', order: 'asc'})
+}
+</script>
+```
+
+  </template>
+</HighlightCard>
+
 <ComponentReference :data="data" />
 
 <script setup lang="ts">
 import {data} from '../../data/components/table.data'
 import ComponentReference from '../../components/ComponentReference.vue'
 import HighlightCard from '../../components/HighlightCard.vue'
-import {BCard, BCardBody, BTableSimple, BTd, BTbody, BTfoot, BThead, BTh, BTr} from 'bootstrap-vue-next'
+import {
+  BButton,
+  BCard,
+  BCardBody,
+  BCol,
+  BContainer,
+  BFormCheckbox,
+  BFormGroup,
+  BFormInput,
+  BFormSelect,
+  BInputGroup,
+  BInputGroupAppend,
+  BModal,
+  BPagination,
+  BRow,
+  BTable,
+  BTableSimple,
+  type BTableSortBy,
+  BTd,
+  BTbody,
+  BTfoot,
+  BThead,
+  BTh,
+  BTr,
+  type ColorVariant,
+  type LiteralUnion,
+  type TableFieldRaw,
+  type TableItem
+} from 'bootstrap-vue-next'
+import {computed, reactive, ref} from 'vue'
+
+interface SortPerson {
+  first_name: string
+  last_name: string
+  age: number
+  isActive: boolean
+}
+
+const singleSortBy = ref<BTableSortBy[]>([{key: 'first_name', order: 'desc'}])
+
+const multiSortBy = ref<BTableSortBy[]>([
+  {key: 'last_name', order: 'asc'},
+  {key: 'first_name', order: 'asc'},
+])
+
+const sortItems: TableItem<SortPerson>[] = [
+  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
+  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
+  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
+  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
+  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
+  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
+]
+
+const sortFields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
+  {key: 'last_name', sortable: true},
+  {key: 'first_name', sortable: true},
+  {key: 'age', sortable: true},
+  {key: 'isActive', sortable: false},
+]
+
+interface PersonName {
+  first: string
+  last: string
+}
+
+interface Person {
+  name: PersonName
+  age: number
+  isActive: boolean
+}
+
+const itemsTyped: TableItem<Person>[] = [
+  {isActive: true, age: 40, name: {first: 'Dickerson', last: 'Macdonald'}},
+  {isActive: false, age: 21, name: {first: 'Larsen', last: 'Shaw'}},
+  {
+    isActive: false,
+    age: 9,
+    name: {first: 'Mini', last: 'Navarro'},
+    _rowVariant: 'success' as ColorVariant,
+  },
+  {isActive: false, age: 89, name: {first: 'Geneva', last: 'Wilson'}},
+  {isActive: true, age: 38, name: {first: 'Jami', last: 'Carney'}},
+  {isActive: false, age: 27, name: {first: 'Essie', last: 'Dunlap'}},
+  {isActive: true, age: 40, name: {first: 'Thor', last: 'Macdonald'}},
+  {
+    isActive: true,
+    age: 87,
+    name: {first: 'Larsen', last: 'Shaw'},
+    _cellVariants: {age: 'danger', isActive: 'warning'},
+  },
+  {isActive: false, age: 26, name: {first: 'Mitzi', last: 'Navarro'}},
+  {isActive: false, age: 22, name: {first: 'Genevieve', last: 'Wilson'}},
+  {isActive: true, age: 38, name: {first: 'John', last: 'Carney'}},
+  {isActive: false, age: 29, name: {first: 'Dick', last: 'Dunlap'}},
+]
+
+const fieldsTyped: Exclude<TableFieldRaw<Person>, string>[] = [
+  {
+    key: 'name',
+    label: 'Person full name',
+    sortable: true,
+    sortDirection: 'desc',
+  },
+  {
+    key: 'sortableName',
+    label: 'Person sortable name',
+    sortable: true,
+    sortDirection: 'desc',
+    formatter: (_value: unknown, _key?: LiteralUnion<keyof Person>, item?: Person) =>
+      item ? `${item.name.last}, ${item.name.first}` : 'Something went wrong',
+    sortByFormatted: true,
+    filterByFormatted: true,
+  },
+  {key: 'age', label: 'Person age', sortable: true, class: 'text-center'},
+  {
+    key: 'isActive',
+    label: 'Is Active',
+    formatter: (value: unknown) => (value ? 'Yes' : 'No'),
+    sortable: true,
+    sortByFormatted: true,
+    filterByFormatted: true,
+  },
+  {key: 'actions', label: 'Actions'},
+]
+
+const pageOptions = [
+  {value: 5, text: '5'},
+  {value: 10, text: '10'},
+  {value: 15, text: '15'},
+  {value: 100, text: 'Show a lot'},
+]
+
+const totalRows = ref(itemsTyped.length)
+const currentPage = ref(1)
+const perPage = ref(5)
+const sortBy = ref<BTableSortBy[]>([])
+const sortDirection = ref('asc')
+const filter = ref('')
+const filterOn = ref([])
+const infoModal = reactive({
+  open: false,
+  id: 'info-modal',
+  title: '',
+  content: '',
+})
+
+// Create an options list from our fields
+const sortOptions = computed(() =>
+  fieldsTyped.filter((f) => f.sortable).map((f) => ({text: f.label, value: f.key}))
+)
+
+function info(item: TableItem<Person>, index: number) {
+  infoModal.title = `Row index: ${index}`
+  infoModal.content = JSON.stringify(item, null, 2)
+  infoModal.open = true
+}
+
+function resetInfoModal() {
+  infoModal.title = ''
+  infoModal.content = ''
+}
+
+function onFiltered(filteredItems: TableItem<Person>[]) {
+  // Trigger pagination to update the number of buttons/pages due to filtering
+  totalRows.value = filteredItems.length
+  currentPage.value = 1
+}
+
+function onAddSort() {
+  sortBy.value.push({key: '', order: 'asc'})
+}
+
 </script>
diff --git a/packages/bootstrap-vue-next/src/App.vue b/packages/bootstrap-vue-next/src/App.vue
index e58d8e89c..64dc4c4b0 100644
--- a/packages/bootstrap-vue-next/src/App.vue
+++ b/packages/bootstrap-vue-next/src/App.vue
@@ -1,12 +1,291 @@
 <template>
-  <BContainer>
+  <BContainer class="py-5">
+    <!-- User Interface controls -->
     <BRow>
-      <BCol> Hello World! </BCol>
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          v-slot="{ariaDescribedby}"
+          label="Sort"
+          label-for="sort-by-select"
+          label-cols-sm="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BButton size="sm" @click="onAddSort">Add Sort...</BButton>
+          <BInputGroup v-for="sort in sortBy" :key="sort.key" size="sm">
+            <BFormSelect
+              id="sort-by-select"
+              v-model="sort.key"
+              :options="sortOptions"
+              :aria-describedby="ariaDescribedby"
+              class="w-75"
+            >
+              <template #first>
+                <option value="">-- none --</option>
+              </template>
+            </BFormSelect>
+
+            <BFormSelect
+              v-model="sort.order"
+              :disabled="!sortBy"
+              :aria-describedby="ariaDescribedby"
+              size="sm"
+              class="w-25"
+            >
+              <option value="asc">Asc</option>
+              <option value="desc">Desc</option>
+            </BFormSelect>
+          </BInputGroup>
+        </BFormGroup>
+      </BCol>
+
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          label="Filter"
+          label-for="filter-input"
+          label-cols-sm="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BInputGroup size="sm">
+            <BFormInput
+              id="filter-input"
+              v-model="filter"
+              type="search"
+              placeholder="Type to Search"
+            />
+
+            <BInputGroupAppend>
+              <BButton :disabled="!filter" @click="filter = ''">Clear</BButton>
+            </BInputGroupAppend>
+          </BInputGroup>
+        </BFormGroup>
+      </BCol>
+
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          v-slot="{ariaDescribedby}"
+          v-model="sortDirection"
+          label="Filter On"
+          description="Leave all unchecked to filter on all data"
+          label-cols-sm="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <div class="d-flex gap-2">
+            <BFormCheckbox v-model="filterOn" value="name" :aria-describedby="ariaDescribedby"
+              >Name</BFormCheckbox
+            >
+            <BFormCheckbox v-model="filterOn" value="age" :aria-describedby="ariaDescribedby"
+              >Age</BFormCheckbox
+            >
+            <BFormCheckbox v-model="filterOn" value="isActive" :aria-describedby="ariaDescribedby"
+              >Active</BFormCheckbox
+            >
+          </div>
+        </BFormGroup>
+      </BCol>
+
+      <BCol sm="5" md="6" class="my-1">
+        <BFormGroup
+          label="Per page"
+          label-for="per-page-select"
+          label-cols-sm="6"
+          label-cols-md="4"
+          label-cols-lg="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BFormSelect id="per-page-select" v-model="perPage" :options="pageOptions" size="sm" />
+        </BFormGroup>
+      </BCol>
+
+      <BCol sm="7" md="6" class="my-1">
+        <BPagination
+          v-model="currentPage"
+          :total-rows="totalRows"
+          :per-page="perPage"
+          :align="'fill'"
+          size="sm"
+          class="my-0"
+        />
+      </BCol>
     </BRow>
+
+    <!-- Main table element for typed table-->
+    <BTable
+      v-model:sort-by="sortBy"
+      :sort-internal="true"
+      :items="itemsTyped"
+      :fields="fieldsTyped"
+      :current-page="currentPage"
+      :per-page="perPage"
+      :filter="filter"
+      :responsive="false"
+      :filterable="filterOn"
+      :small="true"
+      :multisort="true"
+      @filtered="onFiltered"
+    >
+      <template #cell(name)="row">
+        {{ (row.value as PersonName).first }}
+        {{ (row.value as PersonName).last }}
+      </template>
+
+      <template #cell(actions)="row">
+        <BButton size="sm" class="mr-1" @click="info(row.item, row.index)"> Info modal </BButton>
+        <BButton size="sm" @click="row.toggleDetails">
+          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
+        </BButton>
+      </template>
+
+      <template #row-details="row">
+        <BCard>
+          <ul>
+            <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
+            <BButton size="sm" @click="row.toggleDetails"> Toggle Details </BButton>
+          </ul>
+        </BCard>
+      </template>
+    </BTable>
+
+    <!-- Info modal -->
+    <BModal
+      :id="infoModal.id"
+      v-model="infoModal.open"
+      :title="infoModal.title"
+      :ok-only="true"
+      @hide="resetInfoModal"
+    >
+      <pre>{{ infoModal.content }}</pre>
+    </BModal>
   </BContainer>
 </template>
 
 <script setup lang="ts">
-// You can use this file as a development spot to test your changes
-// Please do not commit this file
+import {
+  BTable,
+  type BTableSortBy,
+  type ColorVariant,
+  type TableFieldRaw,
+  type TableItem,
+} from 'bootstrap-vue-next'
+import {computed, reactive, ref} from 'vue'
+import type {LiteralUnion} from './types'
+
+interface PersonName {
+  first: string
+  last: string
+}
+
+interface Person {
+  name: PersonName
+  age: number
+  isActive: boolean
+}
+
+const itemsTyped: TableItem<Person>[] = [
+  {isActive: true, age: 40, name: {first: 'Dickerson', last: 'Macdonald'}},
+  {isActive: false, age: 21, name: {first: 'Larsen', last: 'Shaw'}},
+  {
+    isActive: false,
+    age: 9,
+    name: {first: 'Mini', last: 'Navarro'},
+    _rowVariant: 'success' as ColorVariant,
+  },
+  {isActive: false, age: 89, name: {first: 'Geneva', last: 'Wilson'}},
+  {isActive: true, age: 38, name: {first: 'Jami', last: 'Carney'}},
+  {isActive: false, age: 27, name: {first: 'Essie', last: 'Dunlap'}},
+  {isActive: true, age: 40, name: {first: 'Thor', last: 'Macdonald'}},
+  {
+    isActive: true,
+    age: 87,
+    name: {first: 'Larsen', last: 'Shaw'},
+    _cellVariants: {age: 'danger', isActive: 'warning'},
+  },
+  {isActive: false, age: 26, name: {first: 'Mitzi', last: 'Navarro'}},
+  {isActive: false, age: 22, name: {first: 'Genevieve', last: 'Wilson'}},
+  {isActive: true, age: 38, name: {first: 'John', last: 'Carney'}},
+  {isActive: false, age: 29, name: {first: 'Dick', last: 'Dunlap'}},
+]
+
+const fieldsTyped: Exclude<TableFieldRaw<Person>, string>[] = [
+  {
+    key: 'name',
+    label: 'Person full name',
+    sortable: true,
+    sortDirection: 'desc',
+  },
+  {
+    key: 'sortableName',
+    label: 'Person sortable name',
+    sortable: true,
+    sortDirection: 'desc',
+    formatter: (_value: unknown, _key?: LiteralUnion<keyof Person>, item?: Person) =>
+      item ? `${item.name.last}, ${item.name.first}` : 'Something went wrong',
+    sortByFormatted: true,
+    filterByFormatted: true,
+  },
+  {key: 'age', label: 'Person age', sortable: true, class: 'text-center'},
+  {
+    key: 'isActive',
+    label: 'Is Active',
+    formatter: (value: unknown) => (value ? 'Yes' : 'No'),
+    sortable: true,
+    sortByFormatted: true,
+    filterByFormatted: true,
+  },
+  {key: 'actions', label: 'Actions'},
+]
+
+const pageOptions = [
+  {value: 5, text: '5'},
+  {value: 10, text: '10'},
+  {value: 15, text: '15'},
+  {value: 100, text: 'Show a lot'},
+]
+
+const totalRows = ref(itemsTyped.length)
+const currentPage = ref(1)
+const perPage = ref(5)
+const sortBy = ref<BTableSortBy[]>([])
+const sortDirection = ref('asc')
+const filter = ref('')
+const filterOn = ref([])
+const infoModal = reactive({
+  open: false,
+  id: 'info-modal',
+  title: '',
+  content: '',
+})
+
+// Create an options list from our fields
+const sortOptions = computed(() =>
+  fieldsTyped.filter((f) => f.sortable).map((f) => ({text: f.label, value: f.key}))
+)
+
+function info(item: TableItem<Person>, index: number) {
+  infoModal.title = `Row index: ${index}`
+  infoModal.content = JSON.stringify(item, null, 2)
+  infoModal.open = true
+}
+
+function resetInfoModal() {
+  infoModal.title = ''
+  infoModal.content = ''
+}
+
+function onFiltered(filteredItems: TableItem<Person>[]) {
+  // Trigger pagination to update the number of buttons/pages due to filtering
+  totalRows.value = filteredItems.length
+  currentPage.value = 1
+}
+
+function onAddSort() {
+  sortBy.value.push({key: '', order: 'asc'})
+}
 </script>