diff --git a/apps/docs/src/data/components/card.data.ts b/apps/docs/src/data/components/card.data.ts
index 14d0451d7..304e85d31 100644
--- a/apps/docs/src/data/components/card.data.ts
+++ b/apps/docs/src/data/components/card.data.ts
@@ -70,7 +70,6 @@ export default {
               'footerBgVariant',
               'footerBorderVariant',
               'footerClass',
-              'footerHtml',
               'footerTag',
               'footerTextVariant',
               'footerVariant',
@@ -78,7 +77,6 @@ export default {
               'headerBgVariant',
               'headerBorderVariant',
               'headerClass',
-              'headerHtml',
               'headerTag',
               'headerTextVariant',
               'headerVariant',
@@ -163,12 +161,6 @@ export default {
       emits: [],
       props: {
         '': {
-          html: {
-            type: 'string',
-            default: undefined,
-            description:
-              'HTML content to place in the card footer, takes precednce over text prop and default slot',
-          },
           text: {
             type: 'string',
             default: undefined,
@@ -222,12 +214,6 @@ export default {
       emits: [],
       props: {
         '': {
-          html: {
-            type: 'string',
-            default: undefined,
-            description:
-              'HTML content to place in the card header, takes precednce over text prop and default slot',
-          },
           text: {
             type: 'string',
             default: undefined,
diff --git a/apps/docs/src/data/components/carousel.data.ts b/apps/docs/src/data/components/carousel.data.ts
index 99de92cc6..39aee37cf 100644
--- a/apps/docs/src/data/components/carousel.data.ts
+++ b/apps/docs/src/data/components/carousel.data.ts
@@ -186,11 +186,6 @@ export default {
             default: undefined,
             description: 'Text content to place in the caption',
           },
-          captionHtml: {
-            type: 'string',
-            default: undefined,
-            description: 'HTML string content to place in the caption',
-          },
           captionTag: {
             type: 'string',
             default: 'h3',
@@ -253,11 +248,6 @@ export default {
             default: undefined,
             description: 'Text content to place in the text of the slide',
           },
-          textHtml: {
-            type: 'string',
-            default: undefined,
-            description: 'HTML string content to place in the text of the slide',
-          },
           textTag: {
             type: 'string',
             default: 'p',
diff --git a/apps/docs/src/data/components/form.data.ts b/apps/docs/src/data/components/form.data.ts
index 16f5d436b..829f3381f 100644
--- a/apps/docs/src/data/components/form.data.ts
+++ b/apps/docs/src/data/components/form.data.ts
@@ -45,7 +45,7 @@ export default {
                   'Array of items to render in the component. Note that BFormDatalist only supports Options, not OptionsGroups',
               },
             }),
-            ['disabledField', 'htmlField', 'id', 'options', 'textField', 'valueField']
+            ['disabledField', 'id', 'options', 'textField', 'valueField']
           ),
         } satisfies Record<keyof BvnComponentProps['BFormDatalist'], PropertyReference>,
       },
diff --git a/apps/docs/src/data/components/formCheckbox.data.ts b/apps/docs/src/data/components/formCheckbox.data.ts
index 464e048cd..b7dfb391a 100644
--- a/apps/docs/src/data/components/formCheckbox.data.ts
+++ b/apps/docs/src/data/components/formCheckbox.data.ts
@@ -18,7 +18,7 @@ export default {
             type: 'boolean',
             default: false,
             description:
-              "When set, renders the checkbox as part of a button group (it doesn't enclose the checkbox and label with a div). It is not necessary to set this to true if this is part of a RadioGroup as it is handled internally",
+              "When set, renders the checkbox as part of a button group (it doesn't enclose the checkbox and label with a div). It is not necessary to set this to true if this is part of a CheckboxGroup as it is handled internally",
           },
           buttonVariant: {
             type: 'ButtonVariant | null',
@@ -170,7 +170,6 @@ export default {
             'disabled',
             'disabledField',
             'form',
-            'htmlField',
             'id',
             'name',
             'plain',
@@ -208,6 +207,28 @@ export default {
             'Slot to place for checkboxes so that they appear before checks generated from options prop',
           scope: [],
         },
+        {
+          name: 'option',
+          description:
+            'Use this slot to have finer control over the content render inside each checkbox button.',
+          scope: [
+            {
+              prop: 'value',
+              type: 'string | number | undefined',
+              description: 'The value of the checkbox button',
+            },
+            {
+              prop: 'disabled',
+              type: 'boolean | undefined',
+              description: 'Whether the checkbox button is disabled',
+            },
+            {
+              prop: 'text',
+              type: 'string | undefined',
+              description: 'The text to display for the checkbox button',
+            },
+          ],
+        },
       ],
     },
   ],
diff --git a/apps/docs/src/data/components/formRadio.data.ts b/apps/docs/src/data/components/formRadio.data.ts
index bd2654412..df0918a55 100644
--- a/apps/docs/src/data/components/formRadio.data.ts
+++ b/apps/docs/src/data/components/formRadio.data.ts
@@ -126,7 +126,6 @@ export default {
             'disabled',
             'disabledField',
             'form',
-            'htmlField',
             'id',
             'name',
             'options',
@@ -165,6 +164,28 @@ export default {
             'Slot to place for radio buttons so that they appear before radios generated from options prop',
           scope: [],
         },
+        {
+          name: 'option',
+          description:
+            'Use this slot to have finer control over the content render inside each radio button',
+          scope: [
+            {
+              prop: 'value',
+              type: 'string | number | undefined',
+              description: 'The value of the radio button',
+            },
+            {
+              prop: 'disabled',
+              type: 'boolean | undefined',
+              description: 'Whether the radio button is disabled',
+            },
+            {
+              prop: 'text',
+              type: 'string | undefined',
+              description: 'The text to display for the radio button',
+            },
+          ],
+        },
       ],
     },
   ],
diff --git a/apps/docs/src/data/components/formSelect.data.ts b/apps/docs/src/data/components/formSelect.data.ts
index 74909575e..d62c75b54 100644
--- a/apps/docs/src/data/components/formSelect.data.ts
+++ b/apps/docs/src/data/components/formSelect.data.ts
@@ -45,7 +45,6 @@ export default {
               'disabled',
               'disabledField',
               'form',
-              'htmlField',
               'id',
               'name',
               'options',
@@ -124,7 +123,7 @@ export default {
             buildCommonProps({
               options: {type: 'readonly (unknown | Record<string, unknown>)[]'},
             }),
-            ['disabledField', 'htmlField', 'options', 'textField', 'valueField']
+            ['disabledField', 'options', 'textField', 'valueField']
           ),
         } satisfies Record<keyof BvnComponentProps['BFormSelectOptionGroup'], PropertyReference>,
       },
diff --git a/apps/docs/src/data/components/inputGroup.data.ts b/apps/docs/src/data/components/inputGroup.data.ts
index 732da3520..dc2869f4b 100644
--- a/apps/docs/src/data/components/inputGroup.data.ts
+++ b/apps/docs/src/data/components/inputGroup.data.ts
@@ -14,23 +14,11 @@ export default {
             default: undefined,
             description: 'Text to append to the input group',
           },
-          appendHtml: {
-            type: 'string',
-            default: undefined,
-            description:
-              "HTML string to append to the input group. Has precedence over 'append' prop",
-          },
           prepend: {
             type: 'string',
             default: undefined,
             description: 'Text to prepend to the input group',
           },
-          prependHtml: {
-            type: 'string',
-            default: undefined,
-            description:
-              "HTML string to prepend to the input group. Has precedence over 'prepend' prop",
-          },
           ...pick(buildCommonProps(buildCommonProps()), ['id', 'size', 'tag']),
         } satisfies Record<keyof BvnComponentProps['BInputGroup'], PropertyReference>,
       },
diff --git a/apps/docs/src/data/components/popover.data.ts b/apps/docs/src/data/components/popover.data.ts
index 9329a64da..e91aadef4 100644
--- a/apps/docs/src/data/components/popover.data.ts
+++ b/apps/docs/src/data/components/popover.data.ts
@@ -36,10 +36,6 @@ export default {
             type: 'Middleware[]',
             default: undefined,
           },
-          html: {
-            type: 'boolean',
-            default: false,
-          },
           id: {
             type: 'string',
             default: undefined,
diff --git a/apps/docs/src/data/components/progress.data.ts b/apps/docs/src/data/components/progress.data.ts
index 2b7c6ec61..4cf7a8f47 100644
--- a/apps/docs/src/data/components/progress.data.ts
+++ b/apps/docs/src/data/components/progress.data.ts
@@ -80,10 +80,6 @@ export default {
             type: 'string',
             default: undefined,
           },
-          labelHtml: {
-            type: 'string',
-            default: undefined,
-          },
           max: {
             type: 'Numberish',
             default: undefined,
diff --git a/apps/docs/src/data/components/table.data.ts b/apps/docs/src/data/components/table.data.ts
index 427b8a7e8..d1c4d3304 100644
--- a/apps/docs/src/data/components/table.data.ts
+++ b/apps/docs/src/data/components/table.data.ts
@@ -93,10 +93,6 @@ export default {
         type: 'string',
         default: undefined,
       },
-      captionHtml: {
-        type: 'string',
-        default: undefined,
-      },
       detailsTdClass: {
         type: 'ClassValue',
         default: undefined,
diff --git a/apps/docs/src/data/components/toast.data.ts b/apps/docs/src/data/components/toast.data.ts
index e2bf5fe88..92c0e40c2 100644
--- a/apps/docs/src/data/components/toast.data.ts
+++ b/apps/docs/src/data/components/toast.data.ts
@@ -100,7 +100,7 @@ export default {
             default: undefined,
           },
           progressProps: {
-            type: "Omit<BProgressBarProps, 'label' | 'labelHtml' | 'max' | 'value'>",
+            type: "Omit<BProgressBarProps, 'label' | 'max' | 'value'>",
             default: undefined,
             description:
               'The properties to define the progress bar in the toast. No progress will be shown if left undefined',
diff --git a/apps/docs/src/docs/components/demo/CarouselCaptions.vue b/apps/docs/src/docs/components/demo/CarouselCaptions.vue
index 0b315a0c8..ded3b58c8 100644
--- a/apps/docs/src/docs/components/demo/CarouselCaptions.vue
+++ b/apps/docs/src/docs/components/demo/CarouselCaptions.vue
@@ -2,12 +2,8 @@
   <!-- #region template -->
   <BCarousel controls indicators>
     <BCarouselSlide img-src="https://picsum.photos/1024/480/?image=7" caption="First Caption" />
-    <BCarouselSlide
-      img-src="https://picsum.photos/1024/480/?image=8"
-      caption-html="<h1>Second Caption</h1>"
-    />
     <BCarouselSlide img-src="https://picsum.photos/1024/480/?image=9">
-      <template #caption> Third Caption </template>
+      <template #caption> Second Caption </template>
     </BCarouselSlide>
   </BCarousel>
   <!-- #endregion template -->
diff --git a/apps/docs/src/docs/components/form-group.md b/apps/docs/src/docs/components/form-group.md
index ae20333dd..44ed435ca 100644
--- a/apps/docs/src/docs/components/form-group.md
+++ b/apps/docs/src/docs/components/form-group.md
@@ -78,6 +78,30 @@ You can also apply additional classes to the label via the `label-class` prop, s
 padding and text alignment utility classes. The `label-class` prop accepts either a string or array
 of strings.
 
+### Automatic Inheriting of id
+
+The `BFormGroup` component automatically inherits the id of its child input components, such as BFormInput and BFormTextarea. This functionality ensures that the label element's for attribute is correctly set to match the id of the input component, providing proper association between the label and the input field.
+
+<HighlightCard>
+  <BFormGroup
+    label="Enter your name"
+  >
+    <BFormInput id="this-id-will-be-automatically-applied-to-the-label" />
+  </BFormGroup>
+
+<template #html>
+
+```vue-html
+<BFormGroup
+  label="Enter your name"
+  >
+  <BFormInput id="this-id-will-be-automatically-applied-to-the-label" />
+</BFormGroup>
+```
+
+  </template>
+</HighlightCard>
+
 ### Horizontal layout
 
 By default, the label appears above the input element(s), but you may optionally render horizontal
diff --git a/apps/docs/src/docs/components/progress.md b/apps/docs/src/docs/components/progress.md
index 600ababcf..b46292ed7 100644
--- a/apps/docs/src/docs/components/progress.md
+++ b/apps/docs/src/docs/components/progress.md
@@ -94,7 +94,9 @@ Need more control over the label? Provide your own label by using the default sl
     </BProgress>
     <h5 class="mt-3">Custom label via property (HTML support)</h5>
     <BProgress :max="50">
-      <BProgressBar :value="33.333333" :label-html="`<del>${33.333333}</del>`" />
+      <BProgressBar :value="33.333333">
+        <del>{{33.333333}}</del>
+      </BProgressBar>
     </BProgress>
   </BCard>
   <template #html>
@@ -117,7 +119,9 @@ Need more control over the label? Provide your own label by using the default sl
 
 <h5 class="mt-3">Custom label via property (HTML support)</h5>
 <BProgress :max="50">
-  <BProgressBar :value="33.333333" :label-html="`<del>${33.333333}</del>`" />
+  <BProgressBar :value="33.333333">
+    <del>{{33.333333}}</del>
+  </BProgressBar>
 </BProgress>
 ```
 
diff --git a/apps/playground/src/components/Comps/TFormCheckbox.vue b/apps/playground/src/components/Comps/TFormCheckbox.vue
index 1dc2a08e0..19e1ebf37 100644
--- a/apps/playground/src/components/Comps/TFormCheckbox.vue
+++ b/apps/playground/src/components/Comps/TFormCheckbox.vue
@@ -167,7 +167,6 @@ const checkboxes = reactive({
     {text: 'Apple', value: 'apple'},
     {text: 'Pineapple', value: 'pineapple'},
     {text: 'Object', value: {foo: 1}},
-    {html: '<b>Grape</b> (html content)', value: 'grape'},
   ],
 })
 
diff --git a/apps/playground/src/components/Comps/TFormCheckboxGroup.vue b/apps/playground/src/components/Comps/TFormCheckboxGroup.vue
index b326b992d..f6fd84856 100644
--- a/apps/playground/src/components/Comps/TFormCheckboxGroup.vue
+++ b/apps/playground/src/components/Comps/TFormCheckboxGroup.vue
@@ -60,7 +60,6 @@ const checkboxes = reactive({
     {text: 'Apple', value: 'apple'},
     {text: 'Pineapple', value: 'pineapple'},
     {text: 'Object', value: {foo: 1}},
-    {html: '<b>Grape</b> (html content)', value: 'grape'},
   ],
 })
 </script>
diff --git a/apps/playground/src/components/Comps/TFormSelect.vue b/apps/playground/src/components/Comps/TFormSelect.vue
index 318eef6db..42140b9c8 100644
--- a/apps/playground/src/components/Comps/TFormSelect.vue
+++ b/apps/playground/src/components/Comps/TFormSelect.vue
@@ -63,7 +63,6 @@ const formSelectOptions = [
   {value: null, text: 'Please select an option'},
   {text: 'Item 1', value: 'first'},
   {text: 'Item 2', value: 'second'},
-  {html: '<b>Item</b> 3', value: 'third', disabled: true},
   {text: 'Item 4'},
   {text: 'Item 5', value: {foo: 'item 5', baz: true}},
   {text: 'Item 6', value: {foo: 'item 6', baz: false}},
diff --git a/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue b/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue
index 622421056..a8b6a0b0f 100644
--- a/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue
+++ b/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue
@@ -27,7 +27,7 @@ import BTransition from '../BTransition.vue'
 import BCloseButton from '../BButton/BCloseButton.vue'
 import BButton from '../BButton/BButton.vue'
 import type {BAlertProps} from '../../types/ComponentProps'
-import {computed, ref, watchEffect} from 'vue'
+import {computed, useTemplateRef, watchEffect} from 'vue'
 import {useCountdown} from '../../composables/useCountdown'
 import {useDefaults} from '../../composables/useDefaults'
 import {isEmptySlot} from '../../utils/dom'
@@ -63,7 +63,7 @@ const slots = defineSlots<{
   default?: (props: Record<string, never>) => any
 }>()
 
-const element = ref<HTMLElement | null>(null)
+const element = useTemplateRef('element')
 
 const modelValue = defineModel<Exclude<BAlertProps['modelValue'], undefined>>({default: false})
 
diff --git a/packages/bootstrap-vue-next/src/components/BButton/BButton.vue b/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
index b33e75646..3ffb1aa0c 100644
--- a/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
+++ b/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref} from 'vue'
+import {computed, useTemplateRef} from 'vue'
 import BSpinner from '../BSpinner/BSpinner.vue'
 import {useBLinkHelper} from '../../composables/useBLinkHelper'
 import BLink from '../BLink/BLink.vue'
@@ -97,7 +97,7 @@ const emit = defineEmits<{
   click: [value: MouseEvent]
 }>()
 
-const element = ref<HTMLElement | null>(null)
+const element = useTemplateRef<HTMLElement | null>('element')
 
 const pressedValue = defineModel<BButtonProps['pressed']>('pressed', {default: undefined})
 
diff --git a/packages/bootstrap-vue-next/src/components/BCard/BCard.vue b/packages/bootstrap-vue-next/src/components/BCard/BCard.vue
index 9885e287d..93e8bb5c2 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/BCard.vue
+++ b/packages/bootstrap-vue-next/src/components/BCard/BCard.vue
@@ -8,11 +8,10 @@
 
     <ReusableImg.reuse v-if="props.imgPlacement !== 'bottom'" />
     <BCardHeader
-      v-if="props.header || hasHeaderSlot || props.headerHtml"
+      v-if="props.header || hasHeaderSlot"
       :bg-variant="props.headerBgVariant"
       :variant="props.headerVariant"
       :border-variant="props.headerBorderVariant"
-      :html="props.headerHtml"
       :tag="props.headerTag"
       :text-variant="props.headerTextVariant"
       :class="props.headerClass"
@@ -42,11 +41,10 @@
       {{ props.bodyText }}
     </slot>
     <BCardFooter
-      v-if="props.footer || hasFooterSlot || props.footerHtml"
+      v-if="props.footer || hasFooterSlot"
       :bg-variant="props.footerBgVariant"
       :border-variant="props.footerBorderVariant"
       :variant="props.footerVariant"
-      :html="props.footerHtml"
       :tag="props.footerTag"
       :text-variant="props.footerTextVariant"
       :class="props.footerClass"
@@ -83,7 +81,6 @@ const _props = withDefaults(defineProps<BCardProps>(), {
   footerBgVariant: undefined,
   footerBorderVariant: undefined,
   footerClass: undefined,
-  footerHtml: '',
   footerTag: 'div',
   footerTextVariant: undefined,
   footerVariant: null,
@@ -91,7 +88,6 @@ const _props = withDefaults(defineProps<BCardProps>(), {
   headerBgVariant: undefined,
   headerBorderVariant: undefined,
   headerClass: undefined,
-  headerHtml: '',
   headerTag: 'div',
   headerTextVariant: undefined,
   headerVariant: null,
diff --git a/packages/bootstrap-vue-next/src/components/BCard/BCardFooter.vue b/packages/bootstrap-vue-next/src/components/BCard/BCardFooter.vue
index e48965fe6..50bca091d 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/BCardFooter.vue
+++ b/packages/bootstrap-vue-next/src/components/BCard/BCardFooter.vue
@@ -13,7 +13,6 @@ import BCardHeadFoot from '../BCardHeadFoot.vue'
 
 const _props = withDefaults(defineProps<BCardHeadFootProps>(), {
   borderVariant: undefined,
-  html: undefined,
   tag: 'div',
   text: undefined,
   // ColorExtendables props
diff --git a/packages/bootstrap-vue-next/src/components/BCard/BCardHeader.vue b/packages/bootstrap-vue-next/src/components/BCard/BCardHeader.vue
index 8c0fcd3ea..54c4f3b1a 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/BCardHeader.vue
+++ b/packages/bootstrap-vue-next/src/components/BCard/BCardHeader.vue
@@ -11,7 +11,6 @@ import BCardHeadFoot from '../BCardHeadFoot.vue'
 
 const _props = withDefaults(defineProps<BCardHeadFootProps>(), {
   borderVariant: undefined,
-  html: undefined,
   tag: 'div',
   text: undefined,
   // ColorExtendables props
diff --git a/packages/bootstrap-vue-next/src/components/BCard/card-footer.spec.ts b/packages/bootstrap-vue-next/src/components/BCard/card-footer.spec.ts
index 0be01ea77..cabe9a3cd 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/card-footer.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BCard/card-footer.spec.ts
@@ -41,14 +41,6 @@ describe('card-header', () => {
     expect($headfoot.props('borderVariant')).toBe('danger')
   })
 
-  it('gives prop html to child', () => {
-    const wrapper = mount(BCardFooter, {
-      props: {html: 'danger'},
-    })
-    const $headfoot = wrapper.getComponent(BCardHeadFoot)
-    expect($headfoot.props('html')).toBe('danger')
-  })
-
   it('gives prop tag to child', () => {
     const wrapper = mount(BCardFooter, {
       props: {tag: 'span'},
diff --git a/packages/bootstrap-vue-next/src/components/BCard/card-header.spec.ts b/packages/bootstrap-vue-next/src/components/BCard/card-header.spec.ts
index b11b82173..b9ac3286c 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/card-header.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BCard/card-header.spec.ts
@@ -41,14 +41,6 @@ describe('card-header', () => {
     expect($headfoot.props('borderVariant')).toBe('danger')
   })
 
-  it('gives prop html to child', () => {
-    const wrapper = mount(BCardHeader, {
-      props: {html: 'danger'},
-    })
-    const $headfoot = wrapper.getComponent(BCardHeadFoot)
-    expect($headfoot.props('html')).toBe('danger')
-  })
-
   it('gives prop tag to child', () => {
     const wrapper = mount(BCardHeader, {
       props: {tag: 'span'},
diff --git a/packages/bootstrap-vue-next/src/components/BCard/card.spec.ts b/packages/bootstrap-vue-next/src/components/BCard/card.spec.ts
index e99f28616..24bd39734 100644
--- a/packages/bootstrap-vue-next/src/components/BCard/card.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BCard/card.spec.ts
@@ -175,14 +175,6 @@ describe('card', () => {
     expect($header.exists()).toBe(true)
   })
 
-  it('has child BCardHeader when prop headerHtml', () => {
-    const wrapper = mount(BCard, {
-      props: {headerHtml: 'foobar'},
-    })
-    const $header = wrapper.findComponent(BCardHeader)
-    expect($header.exists()).toBe(true)
-  })
-
   it('child BCardHeader is given class of headerClass', () => {
     const wrapper = mount(BCard, {
       props: {header: 'foobar', headerClass: ['foobar']},
@@ -207,14 +199,6 @@ describe('card', () => {
     expect($header.props('borderVariant')).toBe('danger')
   })
 
-  it('child BCardHeader has internal prop html as prop headerHtml', () => {
-    const wrapper = mount(BCard, {
-      props: {header: 'foobar', headerHtml: '<h1>foobar</h1>'},
-    })
-    const $header = wrapper.getComponent(BCardHeader)
-    expect($header.props('html')).toBe('<h1>foobar</h1>')
-  })
-
   it('child BCardHeader has internal prop tag as prop headerTag', () => {
     const wrapper = mount(BCard, {
       props: {header: 'foobar', headerTag: 'span'},
@@ -412,14 +396,6 @@ describe('card', () => {
     expect($footer.exists()).toBe(true)
   })
 
-  it('has child BCardFooter when prop footerHtml', () => {
-    const wrapper = mount(BCard, {
-      props: {footerHtml: '<h1>foobar</h1>'},
-    })
-    const $footer = wrapper.findComponent(BCardFooter)
-    expect($footer.exists()).toBe(true)
-  })
-
   it('child BCardFooter contains class prop footerClass', () => {
     const wrapper = mount(BCard, {
       props: {footer: 'foobar', footerClass: ['foobar']},
@@ -444,14 +420,6 @@ describe('card', () => {
     expect($footer.props('borderVariant')).toBe('danger')
   })
 
-  it('child BCardFooter has internal prop html as prop footerHtml', () => {
-    const wrapper = mount(BCard, {
-      props: {footerHtml: '<h1>foobarr</h1>'},
-    })
-    const $footer = wrapper.getComponent(BCardFooter)
-    expect($footer.props('html')).toBe('<h1>foobarr</h1>')
-  })
-
   it('child BCardFooter has internal prop tag as prop footerTag', () => {
     const wrapper = mount(BCard, {
       props: {footer: 'foobar', footerTag: 'span'},
diff --git a/packages/bootstrap-vue-next/src/components/BCardHeadFoot.vue b/packages/bootstrap-vue-next/src/components/BCardHeadFoot.vue
index cbecd6cea..54faed71e 100644
--- a/packages/bootstrap-vue-next/src/components/BCardHeadFoot.vue
+++ b/packages/bootstrap-vue-next/src/components/BCardHeadFoot.vue
@@ -1,8 +1,6 @@
 <template>
   <component :is="tag" :class="computedClasses">
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <div v-if="!!html" v-html="html" />
-    <slot v-else>
+    <slot>
       {{ text }}
     </slot>
   </component>
@@ -14,7 +12,6 @@ import {useColorVariantClasses} from '../composables/useColorVariantClasses'
 
 const props = withDefaults(defineProps<BCardHeadFootProps>(), {
   borderVariant: null,
-  html: undefined,
   tag: 'div',
   text: undefined,
   // ColorExtendables props
diff --git a/packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue b/packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue
index d97fba1a8..dba18f470 100644
--- a/packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue
+++ b/packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue
@@ -61,7 +61,7 @@
 
 <script setup lang="ts">
 import {BvCarouselEvent} from '../../utils'
-import {computed, onMounted, provide, ref, toRef, watch} from 'vue'
+import {computed, onMounted, provide, ref, toRef, useTemplateRef, watch} from 'vue'
 import {useId} from '../../composables/useId'
 import type {BCarouselProps} from '../../types/ComponentProps'
 import {onKeyStroke, useElementHover, useIntervalFn, useSwipe, useToNumber} from '@vueuse/core'
@@ -113,7 +113,7 @@ const buttonOwnership = useId(undefined, 'carousel-button-ownership')
 
 const modelValue = defineModel<Exclude<BCarouselProps['modelValue'], undefined>>({default: 0})
 
-const slideValues = ref<null | InstanceType<typeof BCarouselSlide>[]>(null)
+const slideValues = useTemplateRef<null | InstanceType<typeof BCarouselSlide>[]>('slideValues')
 
 const touchThresholdNumber = useToNumber(() => props.touchThreshold)
 const slideInterval = ref<Numberish | null>(null)
@@ -126,8 +126,8 @@ const intervalNumber = useToNumber(() => slideInterval.value ?? props.interval)
 const isTransitioning = ref(false)
 const rideStarted = ref(false)
 const direction = ref(true)
-const relatedTarget = ref<HTMLElement | null>(null)
-const element = ref<HTMLElement | null>(null)
+const relatedTarget = useTemplateRef('relatedTarget')
+const element = useTemplateRef('element')
 const previousModelValue = ref(modelValue.value)
 
 const isHovering = useElementHover(element)
diff --git a/packages/bootstrap-vue-next/src/components/BCarousel/BCarouselSlide.vue b/packages/bootstrap-vue-next/src/components/BCarousel/BCarouselSlide.vue
index a14d756c6..5ac8cf7d5 100644
--- a/packages/bootstrap-vue-next/src/components/BCarousel/BCarouselSlide.vue
+++ b/packages/bootstrap-vue-next/src/components/BCarousel/BCarouselSlide.vue
@@ -20,16 +20,12 @@
     >
       <component :is="props.captionTag" v-if="hasCaption">
         <slot name="caption">
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <span v-if="props.captionHtml" v-html="props.captionHtml" />
-          <span v-else>{{ props.caption }}</span>
+          <span>{{ props.caption }}</span>
         </slot>
       </component>
       <component :is="props.textTag" v-if="hasText">
         <slot name="text">
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <span v-if="props.textHtml" v-html="props.textHtml" />
-          <span v-else>{{ props.text }}</span>
+          <span>{{ props.text }}</span>
         </slot>
       </component>
       <slot />
@@ -49,7 +45,6 @@ import {useId} from '../../composables/useId'
 const _props = withDefaults(defineProps<BCarouselSlideProps>(), {
   background: undefined,
   caption: undefined,
-  captionHtml: undefined,
   captionTag: 'h3',
   contentTag: 'div',
   contentVisibleUp: undefined,
@@ -63,7 +58,6 @@ const _props = withDefaults(defineProps<BCarouselSlideProps>(), {
   imgWidth: undefined,
   interval: undefined,
   text: undefined,
-  textHtml: undefined,
   textTag: 'p',
 })
 const props = useDefaults(_props, 'BCarouselSlide')
@@ -82,8 +76,8 @@ const slots = defineSlots<{
 const computedId = useId(() => props.id, 'carousel-slide')
 const parentData = inject(carouselInjectionKey, null)
 
-const hasText = computed(() => props.text || props.textHtml || !isEmptySlot(slots.text))
-const hasCaption = computed(() => props.caption || props.captionHtml || !isEmptySlot(slots.caption))
+const hasText = computed(() => props.text || !isEmptySlot(slots.text))
+const hasCaption = computed(() => props.caption || !isEmptySlot(slots.caption))
 const hasContent = computed(() => hasText.value || hasCaption.value || !isEmptySlot(slots.default))
 
 const computedStyle = computed<CSSProperties>(() => ({
diff --git a/packages/bootstrap-vue-next/src/components/BCollapse/BCollapse.vue b/packages/bootstrap-vue-next/src/components/BCollapse/BCollapse.vue
index 5ff4e1294..7d08d4957 100644
--- a/packages/bootstrap-vue-next/src/components/BCollapse/BCollapse.vue
+++ b/packages/bootstrap-vue-next/src/components/BCollapse/BCollapse.vue
@@ -15,7 +15,17 @@
 </template>
 
 <script setup lang="ts">
-import {computed, nextTick, onMounted, provide, readonly, ref, toRef, watch} from 'vue'
+import {
+  computed,
+  nextTick,
+  onMounted,
+  provide,
+  readonly,
+  ref,
+  toRef,
+  useTemplateRef,
+  watch,
+} from 'vue'
 import {useDefaults} from '../../composables/useDefaults'
 import {useId} from '../../composables/useId'
 import {useEventListener} from '@vueuse/core'
@@ -85,7 +95,7 @@ const modelValue = defineModel<Exclude<BCollapseProps['modelValue'], undefined>>
 
 const computedId = useId(() => props.id, 'collapse')
 
-const element = ref<HTMLElement | null>(null)
+const element = useTemplateRef<HTMLElement | null>('element')
 const isCollapsing = ref(false)
 const showRef = ref(modelValue.value)
 
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
index 63fbc486b..b9f332997 100644
--- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
+++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
@@ -76,7 +76,17 @@ import {
   useFloating,
 } from '@floating-ui/vue'
 import {onClickOutside, onKeyStroke, useToNumber} from '@vueuse/core'
-import {computed, type CSSProperties, inject, nextTick, provide, ref, toRef, watch} from 'vue'
+import {
+  computed,
+  type CSSProperties,
+  inject,
+  nextTick,
+  provide,
+  ref,
+  toRef,
+  useTemplateRef,
+  watch,
+} from 'vue'
 import {useDefaults} from '../../composables/useDefaults'
 import {useId} from '../../composables/useId'
 import type {BDropdownProps} from '../../types/ComponentProps'
@@ -157,10 +167,10 @@ const computedOffset = computed(() =>
 )
 const offsetToNumber = useToNumber(computedOffset)
 
-const floating = ref<HTMLElement | null>(null)
-const button = ref<HTMLElement | null>(null)
-const splitButton = ref<HTMLElement | null>(null)
-const wrapper = ref<HTMLElement | null>(null)
+const floating = useTemplateRef<HTMLElement | null>('floating')
+const button = useTemplateRef<HTMLElement | null>('button')
+const splitButton = useTemplateRef<HTMLElement | null>('splitButton')
+const wrapper = useTemplateRef<HTMLElement | null>('wrapper')
 
 const boundary = computed<Boundary | undefined>(() =>
   isBoundary(props.boundary) ? props.boundary : undefined
diff --git a/packages/bootstrap-vue-next/src/components/BForm/BForm.vue b/packages/bootstrap-vue-next/src/components/BForm/BForm.vue
index 587959f66..c9427b124 100644
--- a/packages/bootstrap-vue-next/src/components/BForm/BForm.vue
+++ b/packages/bootstrap-vue-next/src/components/BForm/BForm.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import {useDefaults} from '../../composables/useDefaults'
 import type {BFormProps} from '../../types/ComponentProps'
-import {computed, ref} from 'vue'
+import {computed, useTemplateRef} from 'vue'
 
 const _props = withDefaults(defineProps<BFormProps>(), {
   id: undefined,
@@ -17,7 +17,7 @@ const _props = withDefaults(defineProps<BFormProps>(), {
 })
 const props = useDefaults(_props, 'BForm')
 
-const element = ref<HTMLFormElement | null>(null)
+const element = useTemplateRef('element')
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BForm/BFormDatalist.vue b/packages/bootstrap-vue-next/src/components/BForm/BFormDatalist.vue
index 2d1c0ae61..5f06c1cca 100644
--- a/packages/bootstrap-vue-next/src/components/BForm/BFormDatalist.vue
+++ b/packages/bootstrap-vue-next/src/components/BForm/BFormDatalist.vue
@@ -1,15 +1,15 @@
 <template>
   <datalist :id="computedId">
     <slot name="first" />
-    <template v-for="(option, index) in normalizedOptsWrapper" :key="index">
-      <BFormSelectOption :value="option.value" :disabled="option.disabled">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-if="!!option.html" v-html="option.html" />
-        <template v-else>
-          {{ option.text }}
-        </template>
-      </BFormSelectOption>
-    </template>
+    <BFormSelectOption
+      v-for="(option, index) in normalizedOptsWrapper"
+      :key="index"
+      v-bind="option"
+    >
+      <slot name="option" v-bind="option">
+        {{ option.text }}
+      </slot>
+    </BFormSelectOption>
     <slot />
   </datalist>
 </template>
@@ -26,7 +26,6 @@ import type {SelectOption} from '../../types/SelectTypes'
 const _props = withDefaults(defineProps<BFormDatalistProps>(), {
   disabled: false,
   disabledField: 'disabled',
-  htmlField: 'html',
   id: undefined,
   // eslint-disable-next-line vue/require-valid-default-prop
   options: () => [],
@@ -40,6 +39,8 @@ defineSlots<{
   default?: (props: Record<string, never>) => any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   first?: (props: Record<string, never>) => any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  option: (props: SelectOption<T>) => any
 }>()
 
 const computedId = useId(() => props.id, 'datalist')
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
index 99d270e18..2e50aa78c 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 import {useFocus} from '@vueuse/core'
-import {computed, inject, ref, useAttrs} from 'vue'
+import {computed, inject, useAttrs, useTemplateRef} from 'vue'
 import {getClasses, getInputClasses, getLabelClasses} from '../../composables/useFormCheck'
 import type {BFormCheckboxProps} from '../../types/ComponentProps'
 import {checkboxGroupKey} from '../../utils/keys'
@@ -94,7 +94,7 @@ const computedId = useId(() => props.id, 'form-check')
 
 const parentData = inject(checkboxGroupKey, null)
 
-const input = ref<HTMLElement | null>(null)
+const input = useTemplateRef('input')
 
 const {focused} = useFocus(input, {
   initialValue: props.autofocus,
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
index 745f0f7fe..e456b5c5f 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
@@ -9,19 +9,17 @@
     tabindex="-1"
   >
     <slot name="first" />
-    <BFormCheckbox v-for="item in normalizeOptions" :key="item.self" v-bind="item.props">
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <span v-if="!!item.html" v-html="item.html" />
-      <template v-else>
+    <BFormCheckbox v-for="(item, index) in normalizeOptions" :key="index" v-bind="item">
+      <slot name="option" v-bind="item">
         {{ item.text }}
-      </template>
+      </slot>
     </BFormCheckbox>
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import {computed, provide, ref, toRef} from 'vue'
+import {computed, provide, toRef, useTemplateRef} from 'vue'
 import BFormCheckbox from './BFormCheckbox.vue'
 import {checkboxGroupKey} from '../../utils/keys'
 import {useFocus} from '@vueuse/core'
@@ -38,7 +36,6 @@ const _props = withDefaults(defineProps<Omit<BFormCheckboxGroupProps, 'modelValu
   disabled: false,
   disabledField: 'disabled',
   form: undefined,
-  htmlField: 'html',
   id: undefined,
   name: undefined,
   options: () => [],
@@ -60,6 +57,8 @@ defineSlots<{
   default?: (props: Record<string, never>) => any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   first?: (props: Record<string, never>) => any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  option: (props: Record<string, unknown>) => any
 }>()
 
 const modelValue = defineModel<Exclude<BFormCheckboxGroupProps['modelValue'], undefined>>({
@@ -69,7 +68,7 @@ const modelValue = defineModel<Exclude<BFormCheckboxGroupProps['modelValue'], un
 const computedId = useId(() => props.id, 'checkbox')
 const computedName = useId(() => props.name, 'checkbox')
 
-const element = ref<HTMLElement | null>(null)
+const element = useTemplateRef('element')
 
 const {focused} = useFocus(element, {
   initialValue: props.autofocus,
@@ -92,26 +91,18 @@ provide(checkboxGroupKey, {
 })
 
 const normalizeOptions = computed(() =>
-  props.options.map((el, ind) =>
+  props.options.map((el) =>
     typeof el === 'string' || typeof el === 'number'
       ? {
-          props: {
-            value: el,
-            disabled: props.disabled,
-          },
+          value: el,
+          disabled: props.disabled,
           text: el.toString(),
-          html: undefined,
-          self: Symbol(`checkboxGroupOptionItem${ind}`),
         }
       : {
-          props: {
-            value: el[props.valueField] as string | number | undefined,
-            disabled: el[props.disabledField] as boolean | undefined,
-            ...(el.props ? el.props : {}),
-          },
+          value: el[props.valueField] as string | number | undefined,
+          disabled: el[props.disabledField] as boolean | undefined,
+          ...(el.props ? el.props : {}),
           text: el[props.textField] as string | undefined,
-          html: el[props.htmlField] as string | undefined,
-          self: Symbol(`checkboxGroupOptionItem${ind}`),
         }
   )
 )
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox-group.spec.ts b/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox-group.spec.ts
new file mode 100644
index 000000000..e50fdc050
--- /dev/null
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/form-checkbox-group.spec.ts
@@ -0,0 +1,81 @@
+import {afterEach, describe, expect, it} from 'vitest'
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import BFormCheckbox from './BFormCheckbox.vue'
+import BFormCheckboxGroup from './BFormCheckboxGroup.vue'
+
+describe('form-checkbox-group', () => {
+  enableAutoUnmount(afterEach)
+
+  describe('options prop', () => {
+    it('renders strings', async () => {
+      const wrapper = mount(BFormCheckboxGroup, {
+        props: {
+          options: ['0', '1', '2'],
+        },
+      })
+      const checkboxes = wrapper.findAllComponents(BFormCheckbox)
+      checkboxes.forEach((element, index) => {
+        expect(element.text()).toBe(index.toString())
+      })
+    })
+
+    it('renders numbers', async () => {
+      const wrapper = mount(BFormCheckboxGroup, {
+        props: {
+          options: [0, 1, 2],
+        },
+      })
+      const checkboxes = wrapper.findAllComponents(BFormCheckbox)
+      checkboxes.forEach((element, index) => {
+        expect(element.text()).toBe(index.toString())
+      })
+    })
+
+    it('renders objects', async () => {
+      const wrapper = mount(BFormCheckboxGroup, {
+        props: {
+          options: [
+            {
+              text: '0',
+            },
+            {
+              text: '1',
+            },
+            {
+              text: '2',
+            },
+          ],
+        },
+      })
+      const checkboxes = wrapper.findAllComponents(BFormCheckbox)
+      checkboxes.forEach((element, index) => {
+        expect(element.text()).toBe(index.toString())
+      })
+    })
+
+    it('renders objects that uses slots options()', async () => {
+      const wrapper = mount(BFormCheckboxGroup, {
+        props: {
+          options: [
+            {
+              text: '0',
+            },
+            {
+              text: '1',
+            },
+            {
+              text: '2',
+            },
+          ],
+        },
+        slots: {
+          option: 'foo',
+        },
+      })
+      const checkboxes = wrapper.findAllComponents(BFormCheckbox)
+      expect(checkboxes[0].text()).toBe('foo')
+      expect(checkboxes[1].text()).toBe('foo')
+      expect(checkboxes[2].text()).toBe('foo')
+    })
+  })
+})
diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
index 5967d78d5..d6f4f5a77 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
@@ -35,7 +35,7 @@
 
 <script setup lang="ts">
 import {useFocus} from '@vueuse/core'
-import {computed, ref, watch} from 'vue'
+import {computed, useTemplateRef, watch} from 'vue'
 import type {BFormFileProps} from '../../types/ComponentProps'
 import {useDefaults} from '../../composables/useDefaults'
 import {useId} from '../../composables/useId'
@@ -85,7 +85,7 @@ const computedId = useId(() => props.id)
 
 const stateClass = useStateClass(() => props.state)
 
-const input = ref<HTMLInputElement | null>(null)
+const input = useTemplateRef('input')
 
 const {focused} = useFocus(input, {initialValue: props.autofocus})
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue b/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
index b1f988359..c247ff8ff 100644
--- a/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
@@ -10,7 +10,7 @@
   >
     <ContentTemplate.define>
       <BFormInvalidFeedback
-        v-if="$slots.invalidFeedback || props.invalidFeedback"
+        v-if="slots['invalid-feedback'] || props.invalidFeedback"
         :id="invalidFeedbackId"
         :aria-live="props.feedbackAriaLive"
         :state="props.state"
@@ -19,7 +19,7 @@
         <slot name="invalid-feedback">{{ props.invalidFeedback }}</slot>
       </BFormInvalidFeedback>
       <BFormValidFeedback
-        v-if="$slots.validFeedback || props.validFeedback"
+        v-if="slots['valid-feedback'] || props.validFeedback"
         :id="validFeedbackId"
         :aria-live="props.feedbackAriaLive"
         :state="props.state"
@@ -27,17 +27,17 @@
       >
         <slot name="valid-feedback">{{ props.validFeedback }}</slot>
       </BFormValidFeedback>
-      <BFormText v-if="$slots.description || props.description" :id="descriptionId">
+      <BFormText v-if="slots.description || props.description" :id="descriptionId">
         <slot name="description">{{ props.description }}</slot>
       </BFormText>
     </ContentTemplate.define>
     <LabelContentTemplate.define>
-      <template v-if="$slots.label || props.label || isHorizontal">
+      <template v-if="slots.label || props.label || isHorizontal">
         <BCol v-if="isHorizontal" v-bind="labelColProps">
           <component
             :is="labelTag"
             :id="labelId"
-            :for="props.labelFor || null"
+            :for="computedLabelFor || null"
             :tabindex="isFieldset ? '-1' : null"
             :class="labelClasses"
             @click="isFieldset ? onLegendClick : null"
@@ -49,7 +49,7 @@
           :is="labelTag"
           v-else
           :id="labelId"
-          :for="props.labelFor || null"
+          :for="computedLabelFor || null"
           :tabindex="isFieldset ? '-1' : null"
           :class="labelClasses"
           @click="isFieldset ? onLegendClick : null"
@@ -95,7 +95,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref} from 'vue'
+import {computed, provide, type Ref, ref, useTemplateRef} from 'vue'
 import {useAriaInvalid} from '../../composables/useAriaInvalid'
 import {attemptFocus, isVisible} from '../../utils/dom'
 import BCol from '../BContainer/BCol.vue'
@@ -109,6 +109,7 @@ import {useId} from '../../composables/useId'
 import {createReusableTemplate} from '@vueuse/core'
 import type {BFormGroupProps} from '../../types'
 import {useDefaults} from '../../composables/useDefaults'
+import {formGroupPluginKey} from '../../utils/keys'
 
 const INPUTS = ['input', 'select', 'textarea']
 
@@ -147,7 +148,7 @@ const _props = withDefaults(defineProps<BFormGroupProps>(), {
 })
 const props = useDefaults(_props, 'BFormGroup')
 
-defineSlots<{
+const slots = defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   'invalid-feedback'?: (props: Record<string, never>) => any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -168,6 +169,16 @@ defineSlots<{
 const LabelContentTemplate = createReusableTemplate()
 const ContentTemplate = createReusableTemplate()
 
+const childId = ref<Ref<string>[]>([])
+provide(formGroupPluginKey, (id) => {
+  childId.value = [id]
+})
+const computedLabelFor = computed(() => {
+  if (props.labelFor !== undefined) return props.labelFor
+  if (childId.value[0] && childId.value[0].value) return childId.value[0].value
+  return null
+})
+
 const breakPoints = ['xs', 'sm', 'md', 'lg', 'xl']
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -194,7 +205,7 @@ const getColProps = (props: any, prefix: string) =>
     return result
   }, {})
 
-const content = ref<HTMLElement | null>(null)
+const content = useTemplateRef('content')
 
 const contentColProps = computed(() => getColProps(props, 'content'))
 const labelAlignClasses = computed(() =>
@@ -226,7 +237,7 @@ const computedAriaInvalid = useAriaInvalid(
 )
 
 const onLegendClick = (event: Readonly<MouseEvent>) => {
-  if (props.labelFor || content.value === null) return
+  if (computedLabelFor.value || content.value === null) return
 
   const {target} = event
   const tagName = target ? (target as HTMLElement).tagName : ''
@@ -244,14 +255,14 @@ const onLegendClick = (event: Readonly<MouseEvent>) => {
 
 const computedId = useId(() => props.id)
 const labelId = useId(undefined, '_BV_label_')
-const labelTag = computed(() => (!props.labelFor ? 'legend' : 'label'))
+const labelTag = computed(() => (!computedLabelFor.value ? 'legend' : 'label'))
 const labelClasses = computed(() => [
   isHorizontal.value ? 'col-form-label' : 'form-label',
   {
-    'bv-no-focus-ring': !props.labelFor,
-    'col-form-label': isHorizontal.value || !props.labelFor,
-    'pt-0': !isHorizontal.value && !props.labelFor,
-    'd-block': !isHorizontal.value && props.labelFor,
+    'bv-no-focus-ring': !computedLabelFor.value,
+    'col-form-label': isHorizontal.value || !computedLabelFor.value,
+    'pt-0': !isHorizontal.value && !computedLabelFor.value,
+    'd-block': !isHorizontal.value && computedLabelFor.value,
     [`col-form-label-${props.labelSize}`]: !!props.labelSize,
     'visually-hidden': props.labelVisuallyHidden,
   },
@@ -264,5 +275,5 @@ const invalidFeedbackId = useId(undefined, '_BV_feedback_invalid_')
 const validFeedbackId = useId(undefined, '_BV_feedback_valid_')
 const descriptionId = useId(undefined, '_BV_description_')
 
-const isFieldset = computed(() => !props.labelFor)
+const isFieldset = computed(() => !computedLabelFor.value)
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/BFormGroup/form-group.spec.ts b/packages/bootstrap-vue-next/src/components/BFormGroup/form-group.spec.ts
index ac10511b5..3d6cd3f61 100644
--- a/packages/bootstrap-vue-next/src/components/BFormGroup/form-group.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BFormGroup/form-group.spec.ts
@@ -1,6 +1,9 @@
 import {afterEach, describe, expect, it} from 'vitest'
 import {enableAutoUnmount, mount} from '@vue/test-utils'
 import BFormGroup from './BFormGroup.vue'
+import {h, nextTick} from 'vue'
+import BFormInput from '../BFormInput/BFormInput.vue'
+import BFormTextarea from '../BFormTextarea/BFormTextarea.vue'
 
 describe('form-group', () => {
   enableAutoUnmount(afterEach)
@@ -380,4 +383,35 @@ describe('form-group', () => {
     })
     expect(wrapper.attributes('aria-labelledby')).toBeDefined()
   })
+
+  describe('provide functionality', () => {
+    it('label should automatically inherit input id', async () => {
+      const wrapper = mount(BFormGroup, {
+        props: {label: 'foo'},
+        slots: {
+          default: h(BFormInput, {id: 'foobar'}),
+        },
+      })
+      await nextTick()
+      expect(wrapper.get('label').attributes('for')).toBe('foobar')
+      const textArea = mount(BFormGroup, {
+        props: {label: 'foo'},
+        slots: {
+          default: h(BFormTextarea, {id: 'foobar'}),
+        },
+      })
+      await nextTick()
+      expect(textArea.get('label').attributes('for')).toBe('foobar')
+    })
+    it('uses prop labelFor over input id', async () => {
+      const wrapper = mount(BFormGroup, {
+        props: {label: 'foo', labelFor: 'spam and eggs'},
+        slots: {
+          default: h(BFormInput, {id: 'foobar'}),
+        },
+      })
+      await nextTick()
+      expect(wrapper.get('label').attributes('for')).toBe('spam and eggs')
+    })
+  })
 })
diff --git a/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue b/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
index 05e16b9cd..972bbb64e 100644
--- a/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, useTemplateRef} from 'vue'
 import {useDefaults} from '../../composables/useDefaults'
 import {normalizeInput} from '../../utils/normalizeInput'
 import type {BFormInputProps} from '../../types/ComponentProps'
@@ -70,17 +70,10 @@ const [modelValue, modelModifiers] = defineModel<
   set: (v) => normalizeInput(v, modelModifiers),
 })
 
-const {
-  input,
-  computedId,
-  computedAriaInvalid,
-  onInput,
-  onChange,
-  onBlur,
-  focus,
-  blur,
-  forceUpdateKey,
-} = useFormInput(props, modelValue, modelModifiers)
+const input = useTemplateRef('input')
+
+const {computedId, computedAriaInvalid, onInput, onChange, onBlur, focus, blur, forceUpdateKey} =
+  useFormInput(props, input, modelValue, modelModifiers)
 
 const stateClass = useStateClass(() => props.state)
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
index a2c0dfc79..8f974d237 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import {useFocus} from '@vueuse/core'
-import {computed, inject, ref} from 'vue'
+import {computed, inject, useTemplateRef} from 'vue'
 import {getClasses, getInputClasses, getLabelClasses} from '../../composables/useFormCheck'
 import type {BFormRadioProps} from '../../types/ComponentProps'
 import {isEmptySlot} from '../../utils/dom'
@@ -72,7 +72,7 @@ const computedId = useId(() => props.id, 'form-check')
 
 const parentData = inject(radioGroupKey, null)
 
-const input = ref<HTMLElement | null>(null)
+const input = useTemplateRef('input')
 
 const {focused} = useFocus(input, {
   initialValue: props.autofocus,
diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
index ac7326ad9..92560125f 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
@@ -9,17 +9,10 @@
     tabindex="-1"
   >
     <slot name="first" />
-    <BFormRadio
-      v-for="item in normalizeOptions"
-      :key="item.self"
-      :disabled="item.disabled"
-      :value="item.value"
-    >
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <span v-if="!!item.html" v-html="item.html" />
-      <template v-else>
+    <BFormRadio v-for="(item, index) in normalizeOptions" :key="index" v-bind="item">
+      <slot name="option" v-bind="item">
         {{ item.text }}
-      </template>
+      </slot>
     </BFormRadio>
     <slot />
   </div>
@@ -27,7 +20,7 @@
 
 <script setup lang="ts">
 import type {BFormRadioGroupProps} from '../../types/ComponentProps'
-import {computed, provide, ref, toRef} from 'vue'
+import {computed, provide, toRef, useTemplateRef} from 'vue'
 import {radioGroupKey} from '../../utils/keys'
 import BFormRadio from './BFormRadio.vue'
 import {getGroupAttr, getGroupClasses} from '../../composables/useFormCheck'
@@ -43,7 +36,6 @@ const _props = withDefaults(defineProps<Omit<BFormRadioGroupProps, 'modelValue'>
   disabled: false,
   disabledField: 'disabled',
   form: undefined,
-  htmlField: 'html',
   id: undefined,
   name: undefined,
   options: () => [],
@@ -64,6 +56,8 @@ defineSlots<{
   default?: (props: Record<string, never>) => any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   first?: (props: Record<string, never>) => any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  option: (props: Record<string, unknown>) => any
 }>()
 
 const modelValue = defineModel<Exclude<BFormRadioGroupProps['modelValue'], undefined>>({
@@ -73,7 +67,7 @@ const modelValue = defineModel<Exclude<BFormRadioGroupProps['modelValue'], undef
 const computedId = useId(() => props.id, 'radio')
 const computedName = useId(() => props.name, 'checkbox')
 
-const element = ref<HTMLElement | null>(null)
+const element = useTemplateRef('element')
 
 const {focused} = useFocus(element, {
   initialValue: props.autofocus,
@@ -95,22 +89,18 @@ provide(radioGroupKey, {
 })
 
 const normalizeOptions = computed(() =>
-  props.options.map((el, ind) =>
+  props.options.map((el) =>
     typeof el === 'string' || typeof el === 'number'
       ? {
           value: el,
           disabled: props.disabled,
           text: el.toString(),
-          html: undefined,
-          self: Symbol(`radioGroupOptionItem${ind}`),
         }
       : {
           value: el[props.valueField] as string | undefined,
           disabled: el[props.disabledField] as boolean | undefined,
           ...(el.props ? el.props : {}),
           text: el[props.textField] as string | undefined,
-          html: el[props.htmlField] as string | undefined,
-          self: Symbol(`radioGroupOptionItem${ind}`),
         }
   )
 )
diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/form-radio-group.spec.ts b/packages/bootstrap-vue-next/src/components/BFormRadio/form-radio-group.spec.ts
index 4f24a1ac9..7b8aaa509 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/form-radio-group.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/form-radio-group.spec.ts
@@ -128,4 +128,77 @@ describe('form-radio-group', () => {
     })
     expect(wrapper.attributes('aria-invalid')).toBeUndefined()
   })
+
+  describe('options prop', () => {
+    it('renders strings', async () => {
+      const wrapper = mount(BFormRadioGroup, {
+        props: {
+          options: ['0', '1', '2'],
+        },
+      })
+      const radios = wrapper.findAllComponents(BFormRadio)
+      radios.forEach((element, index) => {
+        expect(element.text()).toBe(index.toString())
+      })
+    })
+
+    it('renders numbers', async () => {
+      const wrapper = mount(BFormRadioGroup, {
+        props: {
+          options: [0, 1, 2],
+        },
+      })
+      const radios = wrapper.findAllComponents(BFormRadio)
+      radios.forEach((element, index) => {
+        expect(element.text()).toBe(index.toString())
+      })
+    })
+
+    it('renders objects', async () => {
+      const wrapper = mount(BFormRadioGroup, {
+        props: {
+          options: [
+            {
+              text: '0',
+            },
+            {
+              text: '1',
+            },
+            {
+              text: '2',
+            },
+          ],
+        },
+      })
+      const radios = wrapper.findAllComponents(BFormRadio)
+      radios.forEach((element, index) => {
+        expect(element.text()).toBe(index.toString())
+      })
+    })
+
+    it('renders objects that uses slots options', async () => {
+      const wrapper = mount(BFormRadioGroup, {
+        props: {
+          options: [
+            {
+              text: '0',
+            },
+            {
+              text: '1',
+            },
+            {
+              text: '2',
+            },
+          ],
+        },
+        slots: {
+          option: 'foo',
+        },
+      })
+      const radios = wrapper.findAllComponents(BFormRadio)
+      expect(radios[0].text()).toBe('foo')
+      expect(radios[1].text()).toBe('foo')
+      expect(radios[2].text()).toBe('foo')
+    })
+  })
 })
diff --git a/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue b/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue
index b1b917e31..214b10176 100644
--- a/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue
@@ -21,15 +21,12 @@
         :options="option.options"
         :value-field="props.valueField"
         :text-field="props.textField"
-        :html-field="props.htmlField"
         :disabled-field="props.disabledField"
       />
       <BFormSelectOption v-else :value="option.value" :disabled="option.disabled">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-if="!!option.html" v-html="option.html" />
-        <template v-else>
+        <slot name="option" v-bind="option">
           {{ option.text }}
-        </template>
+        </slot>
       </BFormSelectOption>
     </template>
     <slot />
@@ -38,7 +35,7 @@
 
 <script setup lang="ts" generic="T">
 import type {BFormSelectProps} from '../../types/ComponentProps'
-import {computed, ref} from 'vue'
+import {computed, useTemplateRef} from 'vue'
 import BFormSelectOption from './BFormSelectOption.vue'
 import BFormSelectOptionGroup from './BFormSelectOptionGroup.vue'
 import {useAriaInvalid} from '../../composables/useAriaInvalid'
@@ -55,7 +52,6 @@ const _props = withDefaults(defineProps<Omit<BFormSelectProps, 'modelValue'>>(),
   disabled: false,
   disabledField: 'disabled',
   form: undefined,
-  htmlField: 'html',
   id: undefined,
   labelField: 'label',
   multiple: false,
@@ -78,6 +74,8 @@ defineSlots<{
   default?: (props: Record<string, never>) => any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   first?: (props: Record<string, never>) => any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  option: (props: SelectOption<T>) => any
 }>()
 
 const modelValue = defineModel<T>({
@@ -91,7 +89,7 @@ const selectSizeNumber = useToNumber(() => props.selectSize)
 
 const stateClass = useStateClass(() => props.state)
 
-const input = ref<HTMLElement | null>(null)
+const input = useTemplateRef('input')
 
 const {focused} = useFocus(input, {
   initialValue: props.autofocus,
diff --git a/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOptionGroup.vue b/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOptionGroup.vue
index 67a8d5b3f..1faada9ea 100644
--- a/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOptionGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOptionGroup.vue
@@ -8,11 +8,9 @@
       :value="option.value"
       v-bind="$attrs"
     >
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <span v-if="!!option.html" v-html="option.html" />
-      <template v-else>
+      <slot name="option" v-bind="option">
         {{ option.text }}
-      </template>
+      </slot>
     </BFormSelectOption>
     <slot />
   </optgroup>
@@ -28,7 +26,6 @@ import type {SelectOption} from '../../types/SelectTypes'
 
 const _props = withDefaults(defineProps<BFormSelectOptionGroupProps>(), {
   disabledField: 'disabled',
-  htmlField: 'html',
   label: undefined,
   options: () => [],
   textField: 'text',
@@ -41,6 +38,8 @@ defineSlots<{
   default?: (props: Record<string, never>) => any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   first?: (props: Record<string, never>) => any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  option: (props: SelectOption<T>) => any
 }>()
 
 const {normalizedOptions} = useFormSelect(() => props.options, props)
diff --git a/packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue b/packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue
index e2939faa4..f317e3369 100644
--- a/packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue
@@ -70,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref} from 'vue'
+import {computed, useTemplateRef} from 'vue'
 import type {BFormSpinbuttonProps} from '../../types/ComponentProps'
 import {eventOnOff, stopEvent} from '../../utils/event'
 import {
@@ -133,7 +133,7 @@ const modelValue = defineModel<Exclude<BFormSpinbuttonProps['modelValue'], undef
   default: null,
 })
 
-const element = ref<HTMLElement | null>(null)
+const element = useTemplateRef('element')
 
 const {focused} = useFocus(element)
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
index e201b2182..1a8a9fcbb 100644
--- a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
@@ -123,7 +123,7 @@
 
 <script setup lang="ts">
 import {onKeyStroke, syncRef, useFocus, useToNumber} from '@vueuse/core'
-import {computed, ref} from 'vue'
+import {computed, ref, useTemplateRef} from 'vue'
 import {useDefaults} from '../../composables/useDefaults'
 import type {BFormTagsProps} from '../../types/ComponentProps'
 import {escapeRegExpChars} from '../../utils/stringUtils'
@@ -201,7 +201,7 @@ const limitNumber = useToNumber(() => props.limit ?? NaN)
 
 const stateClass = useStateClass(() => props.state)
 
-const input = ref<HTMLInputElement | null>(null)
+const input = useTemplateRef('input')
 
 const {focused} = useFocus(input, {
   initialValue: props.autofocus,
diff --git a/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue b/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
index a5be8f768..514cabd97 100644
--- a/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import type {BFormTextareaProps} from '../../types/ComponentProps'
-import {computed, type CSSProperties} from 'vue'
+import {computed, type CSSProperties, useTemplateRef} from 'vue'
 import {useDefaults} from '../../composables/useDefaults'
 import {normalizeInput} from '../../utils/normalizeInput'
 import {useFormInput} from '../../composables/useFormInput'
@@ -75,17 +75,10 @@ const [modelValue, modelModifiers] = defineModel<
   set: (v) => normalizeInput(v, modelModifiers),
 })
 
-const {
-  input,
-  computedId,
-  forceUpdateKey,
-  computedAriaInvalid,
-  onInput,
-  onChange,
-  onBlur,
-  focus,
-  blur,
-} = useFormInput(props, modelValue, modelModifiers)
+const input = useTemplateRef('input')
+
+const {computedId, forceUpdateKey, computedAriaInvalid, onInput, onChange, onBlur, focus, blur} =
+  useFormInput(props, input, modelValue, modelModifiers)
 
 const stateClass = useStateClass(() => props.state)
 
diff --git a/packages/bootstrap-vue-next/src/components/BInputGroup/BInputGroup.vue b/packages/bootstrap-vue-next/src/components/BInputGroup/BInputGroup.vue
index eea994d1e..e88fa660f 100644
--- a/packages/bootstrap-vue-next/src/components/BInputGroup/BInputGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BInputGroup/BInputGroup.vue
@@ -8,17 +8,13 @@
   >
     <slot name="prepend">
       <span v-if="hasPrepend" class="input-group-text">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-if="!!props.prependHtml" v-html="props.prependHtml" />
-        <span v-else>{{ props.prepend }}</span>
+        <span>{{ props.prepend }}</span>
       </span>
     </slot>
     <slot />
     <slot name="append">
       <span v-if="hasAppend" class="input-group-text">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-if="!!props.appendHtml" v-html="props.appendHtml" />
-        <span v-else>{{ props.append }}</span>
+        <span>{{ props.append }}</span>
       </span>
     </slot>
   </component>
@@ -34,10 +30,8 @@ provide(inputGroupKey, true)
 
 const _props = withDefaults(defineProps<BInputGroupProps>(), {
   append: undefined,
-  appendHtml: undefined,
   id: undefined,
   prepend: undefined,
-  prependHtml: undefined,
   size: 'md',
   tag: 'div',
 })
@@ -55,6 +49,6 @@ defineSlots<{
 const computedClasses = computed(() => ({
   [`input-group-${props.size}`]: props.size !== 'md',
 }))
-const hasAppend = computed(() => !!props.append || !!props.appendHtml)
-const hasPrepend = computed(() => !!props.prepend || !!props.prependHtml)
+const hasAppend = computed(() => !!props.append)
+const hasPrepend = computed(() => !!props.prepend)
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/BInputGroup/input-group.spec.ts b/packages/bootstrap-vue-next/src/components/BInputGroup/input-group.spec.ts
index dffbeee66..5f95ca704 100644
--- a/packages/bootstrap-vue-next/src/components/BInputGroup/input-group.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BInputGroup/input-group.spec.ts
@@ -112,52 +112,6 @@ describe('input-group', () => {
     expect($nested.text()).toBe('foobar')
   })
 
-  it('has child span element when prop prependHtml', () => {
-    const wrapper = mount(BInputGroup, {
-      props: {prependHtml: '<h1>foobar</h1>'},
-    })
-    const $span = wrapper.find('span')
-    expect($span.exists()).toBe(true)
-  })
-
-  it('has child span has further child span when prop prependHtml', () => {
-    const wrapper = mount(BInputGroup, {
-      props: {prependHtml: '<h1>foobar</h1>'},
-    })
-    const $span = wrapper.get('span')
-    const $nested = $span.find('span')
-    expect($nested.exists()).toBe(true)
-  })
-
-  it('has child span has further child renders html', () => {
-    const wrapper = mount(BInputGroup, {
-      props: {prependHtml: '<h1>foobar</h1>'},
-    })
-    const $span = wrapper.get('span')
-    const $nested = $span.get('span')
-    const $h1 = $nested.find('h1')
-    expect($h1.exists()).toBe(true)
-  })
-
-  it('has child span has further child renders html text', () => {
-    const wrapper = mount(BInputGroup, {
-      props: {prependHtml: '<h1>foobar</h1>'},
-    })
-    const $span = wrapper.get('span')
-    const $nested = $span.get('span')
-    const $h1 = $nested.get('h1')
-    expect($h1.text()).toBe('foobar')
-  })
-
-  it('child span prefers to render prop prependHtml over prepend', () => {
-    const wrapper = mount(BInputGroup, {
-      props: {prependHtml: '<h1>html</h1>', prepend: 'foobar'},
-    })
-    const $span = wrapper.get('span')
-    const $nested = $span.get('span')
-    expect($nested.text()).toBe('html')
-  })
-
   it('does not have child span if prop prepend, but also slot prepend', () => {
     // May break if a span element is ever non v-if on the element
     const wrapper = mount(BInputGroup, {
@@ -212,52 +166,6 @@ describe('input-group', () => {
     expect($nested.text()).toBe('foobar')
   })
 
-  it('has child span element when prop appendHtml', () => {
-    const wrapper = mount(BInputGroup, {
-      props: {appendHtml: '<h1>foobar</h1>'},
-    })
-    const $span = wrapper.find('span')
-    expect($span.exists()).toBe(true)
-  })
-
-  it('has child span has further child span when prop appendHtml', () => {
-    const wrapper = mount(BInputGroup, {
-      props: {appendHtml: '<h1>foobar</h1>'},
-    })
-    const $span = wrapper.get('span')
-    const $nested = $span.find('span')
-    expect($nested.exists()).toBe(true)
-  })
-
-  it('has child span has further child renders html', () => {
-    const wrapper = mount(BInputGroup, {
-      props: {appendHtml: '<h1>foobar</h1>'},
-    })
-    const $span = wrapper.get('span')
-    const $nested = $span.get('span')
-    const $h1 = $nested.find('h1')
-    expect($h1.exists()).toBe(true)
-  })
-
-  it('has child span has further child renders html text', () => {
-    const wrapper = mount(BInputGroup, {
-      props: {appendHtml: '<h1>foobar</h1>'},
-    })
-    const $span = wrapper.get('span')
-    const $nested = $span.get('span')
-    const $h1 = $nested.get('h1')
-    expect($h1.text()).toBe('foobar')
-  })
-
-  it('child span prefers to render prop appendHtml over append', () => {
-    const wrapper = mount(BInputGroup, {
-      props: {appendHtml: '<h1>html</h1>', append: 'foobar'},
-    })
-    const $span = wrapper.get('span')
-    const $nested = $span.get('span')
-    expect($nested.text()).toBe('html')
-  })
-
   it('prop prepend prop append and slot default render in correct order', () => {
     const wrapper = mount(BInputGroup, {
       props: {prepend: 'prepend', append: 'append'},
@@ -265,12 +173,4 @@ describe('input-group', () => {
     })
     expect(wrapper.text()).toBe('prependdefaultappend')
   })
-
-  it('prop prependHtml prop appendHtml and slot default render in correct order', () => {
-    const wrapper = mount(BInputGroup, {
-      props: {prependHtml: 'prepend', appendHtml: 'append'},
-      slots: {default: 'default'},
-    })
-    expect(wrapper.text()).toBe('prependdefaultappend')
-  })
 })
diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
index c9b8d3a98..f31edfc62 100644
--- a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
+++ b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
@@ -121,7 +121,7 @@
 <script setup lang="ts">
 import {onKeyStroke, useEventListener, useFocus} from '@vueuse/core'
 import {useActivatedFocusTrap} from '../../composables/useActivatedFocusTrap'
-import {computed, type CSSProperties, ref, watch} from 'vue'
+import {computed, type CSSProperties, ref, useTemplateRef, watch} from 'vue'
 import type {BModalProps} from '../../types/ComponentProps'
 import {BvTriggerableEvent} from '../../utils'
 import BButton from '../BButton/BButton.vue'
@@ -251,11 +251,11 @@ const computedId = useId(() => props.id, 'modal')
 // 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 = defineModel<Exclude<BModalProps['modelValue'], undefined>>({default: false})
 
-const element = ref<HTMLElement | null>(null)
-const fallbackFocusElement = ref<HTMLElement | null>(null)
-const okButton = ref<HTMLElement | null>(null)
-const cancelButton = ref<HTMLElement | null>(null)
-const closeButton = ref<HTMLElement | null>(null)
+const element = useTemplateRef('element')
+const fallbackFocusElement = useTemplateRef('fallbackFocusElement')
+const okButton = useTemplateRef<HTMLElement | null>('okButton')
+const cancelButton = useTemplateRef<HTMLElement | null>('cancelButton')
+const closeButton = useTemplateRef<HTMLElement | null>('closeButton')
 const isActive = ref(false)
 const lazyLoadCompleted = ref(false)
 
diff --git a/packages/bootstrap-vue-next/src/components/BNav/BNavForm.vue b/packages/bootstrap-vue-next/src/components/BNav/BNavForm.vue
index 0852b76c4..3b90cabfe 100644
--- a/packages/bootstrap-vue-next/src/components/BNav/BNavForm.vue
+++ b/packages/bootstrap-vue-next/src/components/BNav/BNavForm.vue
@@ -1,13 +1,14 @@
 <template>
-  <li class="d-flex flex-row align-items-center flex-wrap">
+  <li :class="liClasses" v-bind="wrapperAttrs">
     <BForm
-      v-bind="$attrs"
+      v-bind="attrs"
       :id="props.id"
       :floating="props.floating"
       :role="props.role"
       :novalidate="props.novalidate"
       :validated="props.validated"
       class="d-flex"
+      :class="props.formClass"
       @submit.prevent="submitted"
     >
       <slot />
@@ -16,6 +17,7 @@
 </template>
 
 <script setup lang="ts">
+import {computed, useAttrs} from 'vue'
 import {useDefaults} from '../../composables/useDefaults'
 import type {BNavFormProps} from '../../types/ComponentProps'
 import BForm from '../BForm/BForm.vue'
@@ -26,6 +28,8 @@ defineOptions({
 
 const _props = withDefaults(defineProps<BNavFormProps>(), {
   role: undefined,
+  wrapperAttrs: undefined,
+  formClass: undefined,
   // BForm props
   floating: undefined,
   id: undefined,
@@ -39,6 +43,8 @@ const emit = defineEmits<{
   submit: [value: Event]
 }>()
 
+const {class: wrapperClass, ...attrs} = useAttrs()
+
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   default?: (props: Record<string, never>) => any
@@ -47,4 +53,12 @@ defineSlots<{
 const submitted = (e: Readonly<Event>) => {
   emit('submit', e)
 }
+
+const liClasses = computed(() => [
+  'd-flex',
+  'flex-row',
+  'align-items-center',
+  'flex-wrap',
+  wrapperClass,
+])
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue b/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
index d9e88de0e..ac4fe4b68 100644
--- a/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
+++ b/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue'
+import {useTemplateRef} from 'vue'
 import {BvTriggerableEvent} from '../../utils'
 import BDropdown from '../BDropdown/BDropdown.vue'
 import type {BDropdownProps} from '../../types/ComponentProps'
@@ -94,7 +94,7 @@ defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   'toggle-text'?: (props: Record<string, never>) => any
 }>()
-const dropdown = ref<InstanceType<typeof BDropdown> | null>(null)
+const dropdown = useTemplateRef('dropdown')
 
 const hide = () => {
   dropdown.value?.hide()
diff --git a/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue b/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
index 06104866b..c8581e8e6 100644
--- a/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
+++ b/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
@@ -75,7 +75,7 @@ import {
   useFocus,
 } from '@vueuse/core'
 import {useActivatedFocusTrap} from '../../composables/useActivatedFocusTrap'
-import {computed, nextTick, ref, watch} from 'vue'
+import {computed, nextTick, ref, useTemplateRef, watch} from 'vue'
 import {useDefaults} from '../../composables/useDefaults'
 import {useId} from '../../composables/useId'
 import type {BOffcanvasProps} from '../../types/ComponentProps'
@@ -173,8 +173,8 @@ const isOpenByBreakpoint = computed(
 )
 useSafeScrollLock(modelValue, () => props.bodyScrolling || isOpenByBreakpoint.value)
 
-const element = ref<HTMLElement | null>(null)
-const fallbackFocusElement = ref<HTMLElement | null>(null)
+const element = useTemplateRef('element')
+const fallbackFocusElement = useTemplateRef('fallbackFocusElement')
 
 onKeyStroke(
   'Escape',
diff --git a/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue b/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue
index 9fc6f48a2..eef258ecf 100644
--- a/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue
+++ b/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue
@@ -22,9 +22,8 @@
         data-popper-arrow
       />
       <div class="overflow-auto" :style="sizeStyles">
-        <template v-if="props.title || $slots.title">
+        <template v-if="props.title || slots.title">
           <div
-            v-if="!props.html"
             class="position-sticky top-0"
             :class="props.tooltip ? 'tooltip-inner' : 'popover-header'"
           >
@@ -32,28 +31,13 @@
               {{ props.title }}
             </slot>
           </div>
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            v-else
-            class="position-sticky top-0"
-            :class="props.tooltip ? 'tooltip-inner' : 'popover-header'"
-            v-html="sanitizedTitle"
-          />
-          <!-- eslint-enable vue/no-v-html -->
         </template>
-        <template v-if="(props.tooltip && !$slots.title && !props.title) || !props.tooltip">
-          <div v-if="!props.html" :class="props.tooltip ? 'tooltip-inner' : 'popover-body'">
+        <template v-if="(props.tooltip && !slots.title && !props.title) || !props.tooltip">
+          <div :class="props.tooltip ? 'tooltip-inner' : 'popover-body'">
             <slot>
               {{ props.content }}
             </slot>
           </div>
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            v-else
-            :class="props.tooltip ? 'tooltip-inner' : 'popover-body'"
-            v-html="sanitizedContent"
-          />
-          <!-- eslint-enable vue/no-v-html -->
         </template>
       </div>
     </div>
@@ -87,6 +71,7 @@ import {
   onMounted,
   ref,
   toRef,
+  useTemplateRef,
   watch,
   watchEffect,
 } from 'vue'
@@ -95,7 +80,6 @@ import {useMouse} from '../../composables/useMouse'
 import {useId} from '../../composables/useId'
 import type {BPopoverProps} from '../../types/ComponentProps'
 import {BvTriggerableEvent} from '../../utils'
-import {DefaultAllowlist, sanitizeHtml} from '../../utils/sanitizer'
 import {isBoundary, isRootBoundary, resolveBootstrapPlacement} from '../../utils/floatingUi'
 import {getTransitionDelay} from '../../utils/dom'
 import {getElement} from '../../utils/getElement'
@@ -118,7 +102,6 @@ const _props = withDefaults(defineProps<Omit<BPopoverProps, 'modelValue'>>(), {
   delay: () => ({show: 100, hide: 300}),
   floatingMiddleware: undefined,
   hideMargin: 2,
-  html: false,
   id: undefined,
   inline: false,
   manual: false,
@@ -152,7 +135,7 @@ const emit = defineEmits<{
   'shown': [value: BvTriggerableEvent]
 }>()
 
-defineSlots<{
+const slots = defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   default?: (props: Record<string, never>) => any
   target?: (props: {
@@ -185,19 +168,12 @@ const computedId = useId(() => props.id, 'popover')
 
 const hidden = ref(false)
 
-const element = ref<HTMLElement | null>(null)
+const element = useTemplateRef('element')
+const arrow = useTemplateRef('arrow')
+const placeholder = useTemplateRef('placeholder')
 const floatingTarget = ref<HTMLElement | null>(null)
-const arrow = ref<HTMLElement | null>(null)
 const trigger = ref<HTMLElement | null>(null)
-const placeholder = ref<HTMLElement | null>(null)
 
-const sanitizedTitle = computed(() =>
-  props.title ? sanitizeHtml(props.title, DefaultAllowlist) : ''
-)
-
-const sanitizedContent = computed(() =>
-  props.content ? sanitizeHtml(props.content, DefaultAllowlist) : ''
-)
 const isAutoPlacement = computed(() => props.placement.startsWith('auto'))
 const offsetNumber = useToNumber(() => props.offset ?? NaN)
 
diff --git a/packages/bootstrap-vue-next/src/components/BProgress/BProgressBar.vue b/packages/bootstrap-vue-next/src/components/BProgress/BProgressBar.vue
index 8e6cddf86..d68545efd 100644
--- a/packages/bootstrap-vue-next/src/components/BProgress/BProgressBar.vue
+++ b/packages/bootstrap-vue-next/src/components/BProgress/BProgressBar.vue
@@ -18,7 +18,6 @@ const _props = withDefaults(defineProps<BProgressBarProps>(), {
   animated: false,
   bgVariant: null,
   label: undefined,
-  labelHtml: undefined,
   max: undefined,
   precision: 0,
   showProgress: false,
@@ -53,15 +52,13 @@ const numberMax = useToNumber(() => props.max ?? NaN)
 const parentMaxNumber = useToNumber(() => parentData?.max.value ?? NaN)
 
 const computedLabel = computed(() =>
-  props.labelHtml !== undefined
-    ? props.labelHtml
-    : props.showValue || parentData?.showValue.value
-      ? numberValue.value.toFixed(numberPrecision.value)
-      : props.showProgress || parentData?.showProgress.value
-        ? ((numberValue.value * 100) / (numberMax.value || 100)).toFixed(numberPrecision.value)
-        : props.label !== undefined
-          ? props.label
-          : ''
+  props.showValue || parentData?.showValue.value
+    ? numberValue.value.toFixed(numberPrecision.value)
+    : props.showProgress || parentData?.showProgress.value
+      ? ((numberValue.value * 100) / (numberMax.value || 100)).toFixed(numberPrecision.value)
+      : props.label !== undefined
+        ? props.label
+        : ''
 )
 
 const computedWidth = computed(() =>
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index b18844795..ad54cd7b3 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -96,7 +96,7 @@
     >
       <slot
         :name="
-          $slots[`head(${String(field.key)})`]
+          slots[`head(${String(field.key)})`]
             ? (`head(${String(field.key)})` as 'head()')
             : 'head()'
         "
@@ -111,7 +111,7 @@
           v-if="sortByModel?.find((el) => el.key === scope.field.key)?.order === 'asc'"
           v-bind="scope"
           :name="
-            $slots[`sortAsc(${String(scope.field.key)})`]
+            slots[`sortAsc(${String(scope.field.key)})`]
               ? (`sortAsc(${String(scope.field.key)})` as 'sortAsc()')
               : 'sortAsc()'
           "
@@ -135,7 +135,7 @@
           v-else-if="sortByModel?.find((el) => el.key === scope.field.key)?.order === 'desc'"
           v-bind="scope"
           :name="
-            $slots[`sortDesc(${String(scope.field.key)})`]
+            slots[`sortDesc(${String(scope.field.key)})`]
               ? (`sortDesc(${String(scope.field.key)})` as 'sortDesc()')
               : 'sortDesc()'
           "
@@ -159,7 +159,7 @@
           v-else
           v-bind="scope"
           :name="
-            $slots[`sortDefault(${String(scope.field.key)})`]
+            slots[`sortDefault(${String(scope.field.key)})`]
               ? (`sortDefault(${String(scope.field.key)})` as 'sortDefault()')
               : 'sortDefault()'
           "
@@ -184,7 +184,7 @@
     </template>
     <template #custom-body="scope">
       <BTr
-        v-if="busyModel && $slots['table-busy']"
+        v-if="busyModel && slots['table-busy']"
         class="b-table-busy-slot"
         :class="getBusyRowClasses"
       >
@@ -278,7 +278,6 @@ const _props = withDefaults(
     emptyFilteredText: 'There are no records matching your request',
     fieldColumnClass: undefined,
     tbodyTrClass: undefined,
-    captionHtml: undefined,
     detailsTdClass: undefined,
     headVariant: undefined,
     headRowVariant: undefined,
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
index 66c80cd22..31ac11d8c 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
@@ -37,7 +37,7 @@
           <!-- eslint-disable prettier/prettier -->
           <slot
             :name="
-              $slots[`head(${String(field.key)})`]
+              slots[`head(${String(field.key)})`]
                 ? (`head(${String(field.key)})` as 'head()')
                 : 'head()'
             "
@@ -51,7 +51,7 @@
           </slot>
         </BTh>
       </BTr>
-      <BTr v-if="$slots['thead-sub']">
+      <BTr v-if="slots['thead-sub']">
         <BTd
           v-for="field in computedFields"
           :key="field.key"
@@ -73,7 +73,7 @@
         :columns="computedFieldsTotal"
       >
         <BTr
-          v-if="!props.stacked && $slots['top-row']"
+          v-if="!props.stacked && slots['top-row']"
           :class="getRowClasses(null, 'row-top')"
           v-bind="callTbodyTrAttrs(null, 'row-top')"
         >
@@ -111,7 +111,7 @@
               </label>
               <slot
                 :name="
-                  $slots[`cell(${String(field.key)})`]
+                  slots[`cell(${String(field.key)})`]
                     ? (`cell(${String(field.key)})` as 'cell()')
                     : 'cell()'
                 "
@@ -124,7 +124,7 @@
                 :toggle-details="() => toggleRowDetails(item)"
                 :details-showing="isTableItem(item) ? (detailsMap.get(item) ?? false) : false"
               >
-                <template v-if="!$slots[`cell(${String(field.key)})`] && !$slots['cell()']">
+                <template v-if="!slots[`cell(${String(field.key)})`] && !slots['cell()']">
                   {{ formatItem(item, String(field.key), field.formatter) }}
                 </template>
               </slot>
@@ -132,7 +132,7 @@
           </BTr>
 
           <template
-            v-if="isTableItem(item) && detailsMap.get(item) === true && $slots['row-details']"
+            v-if="isTableItem(item) && detailsMap.get(item) === true && slots['row-details']"
           >
             <BTr aria-hidden="true" role="presentation" class="d-none" />
             <BTr
@@ -154,7 +154,7 @@
         </template>
         <!-- This class is for specific targetting of this slot element -->
         <BTr
-          v-if="!props.stacked && $slots['bottom-row']"
+          v-if="!props.stacked && slots['bottom-row']"
           class="bottom-row"
           :class="getRowClasses(null, 'row-bottom')"
           v-bind="callTbodyTrAttrs(null, 'row-bottom')"
@@ -182,7 +182,7 @@
               <!-- eslint-disable prettier/prettier -->
               <slot
                 :name="
-                  $slots[`foot(${String(field.key)})`]
+                  slots[`foot(${String(field.key)})`]
                     ? (`foot(${String(field.key)})` as 'foot()')
                     : 'foot()'
                 "
@@ -199,7 +199,7 @@
         </BTh>
       </BTr>
     </BTfoot>
-    <BTfoot v-else-if="$slots['custom-foot']" v-bind="footerProps">
+    <BTfoot v-else-if="slots['custom-foot']" v-bind="footerProps">
       <slot
         name="custom-foot"
         :fields="computedFields"
@@ -207,7 +207,7 @@
         :columns="computedFieldsTotal"
       />
     </BTfoot>
-    <caption v-if="$slots['table-caption'] || props.caption">
+    <caption v-if="slots['table-caption'] || props.caption">
       <slot name="table-caption">
         {{ props.caption }}
       </slot>
@@ -251,7 +251,6 @@ const _props = withDefaults(defineProps<BTableLiteProps<Items>>(), {
   labelStacked: false,
   fieldColumnClass: undefined,
   tbodyTrClass: undefined,
-  captionHtml: undefined,
   detailsTdClass: undefined,
   headVariant: undefined,
   headRowVariant: undefined,
@@ -303,7 +302,7 @@ const emit = defineEmits<{
   'row-middle-clicked': TableRowEvent<Items>
 }>()
 
-defineSlots<{
+const slots = defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   'thead-top'?: (props: {columns: number; fields: typeof computedFields.value}) => any
   [key: `head(${string})`]: (props: {
diff --git a/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue b/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue
index 0ddcc58a7..91c284cd5 100644
--- a/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue
+++ b/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, inject, onMounted, onUnmounted, ref, useAttrs, watch} from 'vue'
+import {computed, inject, onMounted, onUnmounted, ref, useAttrs, useTemplateRef, watch} from 'vue'
 import {useId} from '../../composables/useId'
 import {useDefaults} from '../../composables/useDefaults'
 import type {TabType} from '../../types/Tab'
@@ -56,7 +56,7 @@ const computedId = useId(() => props.id, 'tabpane')
 const computedButtonId = useId(() => props.buttonId, 'tab')
 
 const lazyRenderCompleted = ref(false)
-const el = ref<HTMLElement | null>(null)
+const el = useTemplateRef<HTMLElement | null>('el')
 
 const {onClick, ...attrs} = useAttrs()
 
diff --git a/packages/bootstrap-vue-next/src/components/BToast/BToast.vue b/packages/bootstrap-vue-next/src/components/BToast/BToast.vue
index a05d5af5e..c2d870486 100644
--- a/packages/bootstrap-vue-next/src/components/BToast/BToast.vue
+++ b/packages/bootstrap-vue-next/src/components/BToast/BToast.vue
@@ -19,7 +19,7 @@
     >
       <component
         :is="props.headerTag"
-        v-if="$slots.title || props.title"
+        v-if="slots.title || props.title"
         class="toast-header"
         :class="props.headerClass"
       >
@@ -30,7 +30,7 @@
         </slot>
         <BCloseButton v-if="!props.noCloseButton" @click="hideFn('close')" />
       </component>
-      <template v-if="$slots.default || props.body">
+      <template v-if="slots.default || props.body">
         <component
           :is="computedTag"
           class="toast-body"
@@ -61,7 +61,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, watch, watchEffect} from 'vue'
+import {computed, useTemplateRef, watch, watchEffect} from 'vue'
 import {useBLinkHelper} from '../../composables/useBLinkHelper'
 import type {BToastProps} from '../../types/ComponentProps'
 import BTransition from '../BTransition.vue'
@@ -132,7 +132,14 @@ const emit = defineEmits<{
   'hide-prevented': []
 }>()
 
-const element = ref<HTMLElement | null>(null)
+const slots = defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  title?: (props: {hide: (trigger?: string) => void}) => any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default?: (props: {hide: (trigger?: string) => void}) => any
+}>()
+
+const element = useTemplateRef('element')
 
 const modelValue = defineModel<Exclude<BToastProps['modelValue'], undefined>>({default: false})
 
diff --git a/packages/bootstrap-vue-next/src/components/BTooltip/BTooltip.vue b/packages/bootstrap-vue-next/src/components/BTooltip/BTooltip.vue
index e7d0f1096..cb5078d49 100644
--- a/packages/bootstrap-vue-next/src/components/BTooltip/BTooltip.vue
+++ b/packages/bootstrap-vue-next/src/components/BTooltip/BTooltip.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref} from 'vue'
+import {computed, useTemplateRef} from 'vue'
 import BPopover from '../BPopover/BPopover.vue'
 import type {BPopoverProps, BTooltipProps} from '../../types/ComponentProps'
 import {useDefaults} from '../../composables/useDefaults'
@@ -27,7 +27,6 @@ const _props = withDefaults(defineProps<Omit<BTooltipProps, 'modelValue'>>(), {
   delay: undefined,
   floatingMiddleware: undefined,
   hide: undefined,
-  html: undefined,
   id: undefined,
   inline: undefined,
   interactive: undefined,
@@ -71,11 +70,17 @@ const computedProps = computed<BPopoverProps>(() => {
   return {noninteractive: noninteractive !== undefined ? noninteractive : !interactive, ...rest}
 })
 
-const popover = ref<null | InstanceType<typeof BPopover>>(null)
+const popover = useTemplateRef('popover')
 
 defineExpose({
-  hide: popover.value?.hide,
-  show: popover.value?.show,
-  toggle: popover.value?.toggle,
+  hide: () => {
+    popover.value?.hide()
+  },
+  show: () => {
+    popover.value?.show()
+  },
+  toggle: () => {
+    popover.value?.toggle()
+  },
 })
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/card-head-foot.spec.ts b/packages/bootstrap-vue-next/src/components/card-head-foot.spec.ts
index 64920b897..685c7e2d9 100644
--- a/packages/bootstrap-vue-next/src/components/card-head-foot.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/card-head-foot.spec.ts
@@ -52,16 +52,6 @@ describe('card-head-foot', () => {
     expect($div.exists()).toBe(true)
   })
 
-  it('nested div renders html when prop html', () => {
-    const wrapper = mount(BCardHeadFoot, {
-      props: {html: '<span>foobar</span>'},
-    })
-    const $div = wrapper.get('div')
-    const $span = $div.find('span')
-    expect($span.exists()).toBe(true)
-    expect($span.text()).toBe('foobar')
-  })
-
   it('renders default slot', () => {
     const wrapper = mount(BCardHeadFoot, {
       slots: {default: 'foobar'},
@@ -83,12 +73,4 @@ describe('card-head-foot', () => {
     })
     expect(wrapper.text()).toBe('slots')
   })
-
-  it('renders html over default slot', () => {
-    const wrapper = mount(BCardHeadFoot, {
-      slots: {default: 'slots'},
-      props: {html: '<span>foobar</span>'},
-    })
-    expect(wrapper.text()).toBe('foobar')
-  })
 })
diff --git a/packages/bootstrap-vue-next/src/composables/useFormInput.ts b/packages/bootstrap-vue-next/src/composables/useFormInput.ts
index 0c4092b31..c0f9719b4 100644
--- a/packages/bootstrap-vue-next/src/composables/useFormInput.ts
+++ b/packages/bootstrap-vue-next/src/composables/useFormInput.ts
@@ -1,22 +1,28 @@
 import type {Numberish} from '../types/CommonTypes'
-import {nextTick, onActivated, onMounted, ref, type Ref} from 'vue'
+import {inject, nextTick, onActivated, onMounted, ref, type Ref, type ShallowRef} from 'vue'
 import {useAriaInvalid} from './useAriaInvalid'
 import {useId} from './useId'
 import {useDebounceFn, useFocus, useToNumber} from '@vueuse/core'
 import type {CommonInputProps} from '../types/FormCommonInputProps'
+import {formGroupPluginKey} from '../utils/keys'
 
 export const useFormInput = (
   props: Readonly<CommonInputProps>,
+  input:
+    | Readonly<ShallowRef<HTMLInputElement | null>>
+    | Readonly<ShallowRef<HTMLTextAreaElement | null>>,
   modelValue: Ref<Numberish | null>,
   modelModifiers: Record<'number' | 'lazy' | 'trim', true | undefined>
 ) => {
-  const input = ref<HTMLInputElement | null>(null)
   const forceUpdateKey = ref(0)
 
   const computedId = useId(() => props.id, 'input')
   const debounceNumber = useToNumber(() => props.debounce ?? 0)
   const debounceMaxWaitNumber = useToNumber(() => props.debounceMaxWait ?? NaN)
 
+  // This automatically adds the appropriate "for" attribute to a BFormGroup label
+  inject(formGroupPluginKey, null)?.(computedId)
+
   const internalUpdateModelValue = useDebounceFn(
     (value: Numberish) => {
       modelValue.value = value
diff --git a/packages/bootstrap-vue-next/src/composables/useFormSelect.ts b/packages/bootstrap-vue-next/src/composables/useFormSelect.ts
index 2b12d75e3..8fd4c1b69 100644
--- a/packages/bootstrap-vue-next/src/composables/useFormSelect.ts
+++ b/packages/bootstrap-vue-next/src/composables/useFormSelect.ts
@@ -11,7 +11,7 @@ export const useFormSelect = (
 
   const normalizeOption = (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    option: any
+    option: unknown
   ): ComplexSelectOptionRaw | SelectOption => {
     const propsValue = toValue(props)
 
@@ -27,7 +27,6 @@ export const useFormSelect = (
 
     const value: unknown = get(option, propsValue.valueField as string)
     const text: string = get(option, propsValue.textField as string)
-    const html: string = get(option, propsValue.htmlField as string)
     const disabled: boolean = get(option, propsValue.disabledField as string)
 
     const opts: undefined | unknown[] = propsValue.optionsField
@@ -42,9 +41,9 @@ export const useFormSelect = (
     }
 
     return {
+      ...(typeof option === 'object' ? option : {}),
       value,
       text,
-      html,
       disabled,
     } as SelectOption
   }
diff --git a/packages/bootstrap-vue-next/src/composables/useTextareaResize.ts b/packages/bootstrap-vue-next/src/composables/useTextareaResize.ts
index a1c4ddf7c..3177920bb 100644
--- a/packages/bootstrap-vue-next/src/composables/useTextareaResize.ts
+++ b/packages/bootstrap-vue-next/src/composables/useTextareaResize.ts
@@ -7,14 +7,14 @@ import {
   nextTick,
   onMounted,
   readonly,
-  type Ref,
   ref,
+  type ShallowRef,
   toRef,
 } from 'vue'
 import {isVisible} from '../utils/dom'
 
 export const useTextareaResize = (
-  input: Ref<HTMLInputElement | null>,
+  input: Readonly<ShallowRef<HTMLTextAreaElement | null>>,
   props: MaybeRefOrGetter<{
     rows: Numberish
     maxRows: Numberish | undefined
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 398af8f9c..5be984572 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -222,7 +222,6 @@ export interface BFormCheckboxGroupProps {
   disabled?: boolean
   disabledField?: string
   form?: string
-  htmlField?: string
   id?: string
   modelValue?: readonly CheckboxValue[]
   name?: string
@@ -241,7 +240,6 @@ export interface BFormCheckboxGroupProps {
 
 export interface BFormDatalistProps {
   disabledField?: string
-  htmlField?: string
   id?: string
   options?: readonly (unknown | Record<string, unknown>)[]
   textField?: string
@@ -309,7 +307,6 @@ export interface BFormRadioGroupProps {
   disabled?: boolean
   disabledField?: string
   form?: string
-  htmlField?: string
   id?: string
   modelValue?: RadioValue
   name?: string
@@ -331,7 +328,6 @@ export interface BFormSelectProps {
   disabled?: boolean
   disabledField?: string
   form?: string
-  htmlField?: string
   id?: string
   labelField?: string
   modelValue?: SelectValue
@@ -355,7 +351,6 @@ export interface BFormSelectOptionProps<T> {
 
 export interface BFormSelectOptionGroupProps {
   disabledField?: string
-  htmlField?: string
   label?: string
   options?: readonly (unknown | Record<string, unknown>)[]
   textField?: string
@@ -446,10 +441,8 @@ export interface BFormTextareaProps extends CommonInputProps {
 
 export interface BInputGroupProps {
   append?: string
-  appendHtml?: string
   id?: string
   prepend?: string
-  prependHtml?: string
   size?: Size
   tag?: string
 }
@@ -489,6 +482,8 @@ export interface BNavProps {
 
 export interface BNavFormProps extends BFormProps {
   role?: string
+  wrapperAttrs?: Readonly<AttrsValue>
+  formClass?: ClassValue
 }
 
 export interface BNavItemProps extends Omit<BLinkProps, 'routerTag'> {
@@ -672,7 +667,7 @@ export interface BPlaceholderWrapperProps {
   loading?: boolean
 }
 
-export interface BProgressProps extends Omit<BProgressBarProps, 'label' | 'labelHtml'> {
+export interface BProgressProps extends Omit<BProgressBarProps, 'label'> {
   height?: string
 }
 
@@ -879,7 +874,6 @@ export interface BCardProps extends ColorExtendables {
   footerBgVariant?: BgColorVariant | null
   footerBorderVariant?: BorderColorVariant | null
   footerClass?: ClassValue
-  footerHtml?: string
   footerTag?: string
   footerTextVariant?: TextColorVariant | null
   footerVariant?: ColorVariant | null
@@ -887,7 +881,6 @@ export interface BCardProps extends ColorExtendables {
   headerBgVariant?: BgColorVariant | null
   headerBorderVariant?: BorderColorVariant | null
   headerClass?: ClassValue
-  headerHtml?: string
   headerTag?: string
   headerTextVariant?: TextColorVariant | null
   headerVariant?: ColorVariant | null
@@ -969,7 +962,6 @@ export interface BCarouselProps {
 export interface BCarouselSlideProps {
   background?: string
   caption?: string
-  captionHtml?: string
   captionTag?: string
   contentTag?: string
   contentVisibleUp?: string
@@ -983,7 +975,6 @@ export interface BCarouselSlideProps {
   imgWidth?: Numberish
   interval?: number | 'requestAnimationFrame'
   text?: string
-  textHtml?: string
   textTag?: string
 }
 
@@ -1043,7 +1034,6 @@ export interface BTableSimpleProps {
 export interface BTableLiteProps<Items> extends BTableSimpleProps {
   align?: VerticalAlign
   caption?: string
-  captionHtml?: string
   detailsTdClass?: ClassValue
   fieldColumnClass?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
   | ((field: TableField<Items>) => readonly Record<string, any>[])
@@ -1156,7 +1146,6 @@ export interface BThProps {
 export interface BProgressBarProps extends ColorExtendables {
   animated?: boolean
   label?: string
-  labelHtml?: string
   max?: Numberish
   precision?: Numberish
   showProgress?: boolean
@@ -1232,7 +1221,7 @@ export interface BToastProps extends ColorExtendables, Omit<BLinkProps, 'routerT
   noFade?: boolean
   noHoverPause?: boolean
   noResumeOnHoverLeave?: boolean
-  progressProps?: Omit<BProgressBarProps, 'label' | 'labelHtml' | 'max' | 'value'>
+  progressProps?: Omit<BProgressBarProps, 'label' | 'max' | 'value'>
   showOnPause?: boolean
   solid?: boolean
   title?: string
@@ -1255,7 +1244,6 @@ export interface BPopoverProps extends TeleporterProps {
       }>
   floatingMiddleware?: Middleware[]
   hideMargin?: number
-  html?: boolean
   id?: string
   inline?: boolean
   manual?: boolean
@@ -1285,7 +1273,6 @@ export interface BTooltipProps extends Omit<BPopoverProps, 'tooltip'> {
 
 export interface BCardHeadFootProps extends ColorExtendables {
   borderVariant?: BorderColorVariant | null
-  html?: string
   tag?: string
   text?: string
 }
diff --git a/packages/bootstrap-vue-next/src/types/SelectTypes.ts b/packages/bootstrap-vue-next/src/types/SelectTypes.ts
index 9a08e33bd..7828cb371 100644
--- a/packages/bootstrap-vue-next/src/types/SelectTypes.ts
+++ b/packages/bootstrap-vue-next/src/types/SelectTypes.ts
@@ -9,7 +9,6 @@ export type SelectValue =
 export interface SelectOption<T = unknown> {
   value: T
   text?: string
-  html?: string
   disabled?: boolean
 }
 
diff --git a/packages/bootstrap-vue-next/src/utils/floatingUi.ts b/packages/bootstrap-vue-next/src/utils/floatingUi.ts
index db0f52373..4fc66f4ea 100644
--- a/packages/bootstrap-vue-next/src/utils/floatingUi.ts
+++ b/packages/bootstrap-vue-next/src/utils/floatingUi.ts
@@ -2,7 +2,6 @@ import type {Boundary, Placement, RootBoundary} from '@floating-ui/vue'
 export {autoUpdate} from '@floating-ui/vue'
 
 import {type DirectiveBinding, h, render} from 'vue'
-import {DefaultAllowlist, sanitizeHtml} from './sanitizer'
 import BPopover from '../components/BPopover/BPopover.vue'
 import type {BPopoverProps} from '../types/ComponentProps'
 
@@ -38,19 +37,19 @@ export const resolveContent = (
       el.setAttribute('data-original-title', title)
 
       return {
-        content: sanitizeHtml(title, DefaultAllowlist),
+        content: title,
       }
     }
     return {}
   }
   if (typeof values === 'string') {
     return {
-      content: sanitizeHtml(values, DefaultAllowlist),
+      content: values,
     }
   }
   return {
-    title: values?.title ? sanitizeHtml(values?.title, DefaultAllowlist) : undefined,
-    content: values?.content ? sanitizeHtml(values?.content, DefaultAllowlist) : undefined,
+    title: values?.title ? values?.title : undefined,
+    content: values?.content ? values?.content : undefined,
   }
 }
 
diff --git a/packages/bootstrap-vue-next/src/utils/keys.ts b/packages/bootstrap-vue-next/src/utils/keys.ts
index 76b77a1dc..1ce48070c 100644
--- a/packages/bootstrap-vue-next/src/utils/keys.ts
+++ b/packages/bootstrap-vue-next/src/utils/keys.ts
@@ -198,3 +198,10 @@ export const popoverPluginKey: InjectionKey<{
   setTooltip: (self: ControllerKey, val: Partial<PrivateOrchestratedTooltip>) => void
   removeTooltip: (self: ControllerKey) => void
 }> = createBvnInjectionKey('popoverPlugin')
+
+/**
+ * Automatically use a "for" attribute on label elements for its associated input
+ * Works on BFormInput & Textarea
+ */
+export const formGroupPluginKey: InjectionKey<(id: Ref<string>) => void> =
+  createBvnInjectionKey('formGroupPlugin')
diff --git a/packages/bootstrap-vue-next/src/utils/sanitizer.ts b/packages/bootstrap-vue-next/src/utils/sanitizer.ts
deleted file mode 100644
index 1e9608ab8..000000000
--- a/packages/bootstrap-vue-next/src/utils/sanitizer.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * --------------------------------------------------------------------------
- * Bootstrap (v5.2.3): util/sanitizer.js
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- * --------------------------------------------------------------------------
- */
-
-const uriAttributes = new Set([
-  'background',
-  'cite',
-  'href',
-  'itemtype',
-  'longdesc',
-  'poster',
-  'src',
-  'xlink:href',
-])
-
-const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
-
-/**
- * A pattern that recognizes a commonly useful subset of URLs that are safe.
- *
- * Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
- */
-const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^#&/:?]*(?:[#/?]|$))/i
-
-/**
- * A pattern that matches safe data URLs. Only matches image, video and audio types.
- *
- * Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
- */
-const DATA_URL_PATTERN =
-  /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z]+=*$/i
-
-const allowedAttribute = (
-  attribute: Readonly<Attr>,
-  allowedAttributeList: readonly (string | RegExp)[]
-) => {
-  const attributeName = attribute.nodeName.toLowerCase()
-
-  if (allowedAttributeList.includes(attributeName)) {
-    if (uriAttributes.has(attributeName)) {
-      return Boolean(
-        SAFE_URL_PATTERN.test(attribute.nodeValue || '') ||
-          DATA_URL_PATTERN.test(attribute.nodeValue || '')
-      )
-    }
-
-    return true
-  }
-
-  // Check if a regular expression validates the attribute.
-  return allowedAttributeList
-    .filter((attributeRegex): attributeRegex is RegExp => attributeRegex instanceof RegExp)
-    .some((regex) => regex.test(attributeName))
-}
-
-export const DefaultAllowlist = {
-  // Global attributes allowed on any supplied element below.
-  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
-  'a': ['target', 'href', 'title', 'rel'],
-  'area': [],
-  'b': [],
-  'br': [],
-  'col': [],
-  'code': [],
-  'div': [],
-  'em': [],
-  'hr': [],
-  'h1': [],
-  'h2': [],
-  'h3': [],
-  'h4': [],
-  'h5': [],
-  'h6': [],
-  'i': [],
-  'img': ['src', 'srcset', 'alt', 'title', 'width', 'height'],
-  'li': [],
-  'ol': [],
-  'p': [],
-  'pre': [],
-  's': [],
-  'small': [],
-  'span': [],
-  'sub': [],
-  'sup': [],
-  'strong': [],
-  'u': [],
-  'ul': [],
-}
-
-export const sanitizeHtml = (
-  unsafeHtml: string,
-  allowList: Readonly<Record<string, (string | RegExp)[]>>,
-  sanitizeFunction?: (unsafeHtml: string) => string
-) => {
-  if (!unsafeHtml.length) {
-    return unsafeHtml
-  }
-
-  if (sanitizeFunction && typeof sanitizeFunction === 'function') {
-    return sanitizeFunction(unsafeHtml)
-  }
-
-  const domParser = new window.DOMParser()
-  const createdDocument = domParser.parseFromString(unsafeHtml, 'text/html')
-  const elements: NodeListOf<Element> = createdDocument.body.querySelectorAll('*')
-
-  for (const element of elements) {
-    const elementName = element.nodeName.toLowerCase()
-
-    if (!Object.keys(allowList).includes(elementName)) {
-      element.remove()
-
-      continue
-    }
-
-    const attributeList = element.attributes
-    const allowedAttributes = [...(allowList['*'] || []), ...(allowList[elementName] || [])]
-
-    for (const attribute of attributeList) {
-      if (!allowedAttribute(attribute, allowedAttributes)) {
-        element.removeAttribute(attribute.nodeName)
-      }
-    }
-  }
-
-  return createdDocument.body.innerHTML
-}