From ad2d6fd2f3030e6b7e3021f396aa813087f49820 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Thu, 23 Oct 2025 09:54:48 -0700
Subject: [PATCH 01/13] docs: refactor examples in composable documentation
 (#2883)

---
 .../composables/demo/UseBreadcrumbBasic.vue   |  35 +++
 .../composables/demo/UseBreadcrumbWithId.vue  |  34 +++
 .../composables/demo/UseColorModeBasic.vue    |  23 ++
 .../composables/demo/UseModalAdvanced.vue     |  42 +++
 .../docs/composables/demo/UseModalBasic.vue   |  19 ++
 .../docs/composables/demo/UseModalNested.vue  |  54 ++++
 .../composables/demo/UseModalReactive.vue     |  31 ++
 .../docs/composables/demo/UseModalSetup.vue   |   5 +
 .../composables/demo/UsePopoverAdvanced.vue   |  21 ++
 .../docs/composables/demo/UsePopoverBasic.vue |  15 +
 .../demo/UsePopoverLifecycleAwaitUsing.ts     |  10 +
 .../demo/UsePopoverLifecycleManual.ts         |  12 +
 .../composables/demo/UsePopoverReactive.vue   |  31 ++
 .../docs/composables/demo/UsePopoverSetup.vue |   5 +
 .../composables/demo/UseScrollspyBasic.vue    |  52 +++-
 .../composables/demo/UseScrollspyManual.vue   |  33 ++-
 .../composables/demo/UseToastAdvanced.vue     |  41 +++
 .../docs/composables/demo/UseToastBasic.vue   |   9 +
 .../composables/demo/UseToastProgrammatic.vue |  41 +++
 .../docs/composables/demo/UseToastPromise.vue |  42 +++
 .../composables/demo/UseToastReactive.vue     |  39 +++
 .../docs/composables/demo/UseToastSetup.vue   |   5 +
 .../composables/demo/UseTogglePromise.vue     |  31 ++
 .../docs/composables/demo/UseToggleWithId.vue |  24 ++
 .../src/docs/composables/useBreadcrumb.md     |  83 +-----
 .../docs/src/docs/composables/useColorMode.md |  48 +--
 apps/docs/src/docs/composables/useModal.md    | 208 +------------
 apps/docs/src/docs/composables/usePopover.md  | 130 +-------
 apps/docs/src/docs/composables/useToast.md    | 280 +-----------------
 apps/docs/src/docs/composables/useToggle.md   |  88 +-----
 30 files changed, 660 insertions(+), 831 deletions(-)
 create mode 100644 apps/docs/src/docs/composables/demo/UseBreadcrumbBasic.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseBreadcrumbWithId.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseColorModeBasic.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseModalAdvanced.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseModalBasic.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseModalNested.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseModalReactive.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseModalSetup.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UsePopoverAdvanced.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UsePopoverBasic.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UsePopoverLifecycleAwaitUsing.ts
 create mode 100644 apps/docs/src/docs/composables/demo/UsePopoverLifecycleManual.ts
 create mode 100644 apps/docs/src/docs/composables/demo/UsePopoverReactive.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UsePopoverSetup.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseToastAdvanced.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseToastBasic.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseToastProgrammatic.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseToastPromise.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseToastReactive.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseToastSetup.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseTogglePromise.vue
 create mode 100644 apps/docs/src/docs/composables/demo/UseToggleWithId.vue

diff --git a/apps/docs/src/docs/composables/demo/UseBreadcrumbBasic.vue b/apps/docs/src/docs/composables/demo/UseBreadcrumbBasic.vue
new file mode 100644
index 000000000..e16b27266
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseBreadcrumbBasic.vue
@@ -0,0 +1,35 @@
+<template>
+  <BBreadcrumb />
+
+  <BFormInput
+    v-model="inputValue"
+    class="my-3"
+  />
+
+  <BButton
+    class="me-2"
+    @click="addItem"
+    >Add</BButton
+  >
+  <BButton
+    variant="danger"
+    @click="breadcrumb.reset"
+    >Clear</BButton
+  >
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {BBreadcrumb, BButton, BFormInput, useBreadcrumb} from 'bootstrap-vue-next'
+
+const breadcrumb = useBreadcrumb()
+
+const inputValue = ref('')
+
+const addItem = () => {
+  if (breadcrumb.items?.value) {
+    breadcrumb.items.value.push(inputValue.value)
+  }
+  inputValue.value = ''
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseBreadcrumbWithId.vue b/apps/docs/src/docs/composables/demo/UseBreadcrumbWithId.vue
new file mode 100644
index 000000000..b84c8c509
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseBreadcrumbWithId.vue
@@ -0,0 +1,34 @@
+<template>
+  <BBreadcrumb id="foobar" />
+
+  <BFormInput
+    v-model="inputValue"
+    class="my-3"
+  />
+
+  <BButton
+    class="me-2"
+    @click="addItem"
+    >Add</BButton
+  >
+  <BButton
+    variant="danger"
+    @click="breadcrumb.reset"
+    >Clear</BButton
+  >
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {BBreadcrumb, BButton, BFormInput, useBreadcrumb} from 'bootstrap-vue-next'
+
+// Input matches the id passed to the component
+const breadcrumb = useBreadcrumb('foobar')
+
+const inputValue = ref('')
+
+const addItem = () => {
+  breadcrumb.items.value.push(inputValue.value)
+  inputValue.value = ''
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseColorModeBasic.vue b/apps/docs/src/docs/composables/demo/UseColorModeBasic.vue
new file mode 100644
index 000000000..13f6f9290
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseColorModeBasic.vue
@@ -0,0 +1,23 @@
+<template>
+  <ClientOnly>
+    <BCard ref="target">
+      <BButton @click="changeColor"> Current color: {{ mode }} </BButton>
+    </BCard>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {useColorMode} from 'bootstrap-vue-next'
+import {type BCard} from 'bootstrap-vue-next/components/BCard'
+
+const target = ref<InstanceType<typeof BCard> | null>(null)
+
+const mode = useColorMode({
+  selector: target,
+})
+
+const changeColor = () => {
+  mode.value = mode.value === 'dark' ? 'light' : 'dark'
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseModalAdvanced.vue b/apps/docs/src/docs/composables/demo/UseModalAdvanced.vue
new file mode 100644
index 000000000..bd285ebf8
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseModalAdvanced.vue
@@ -0,0 +1,42 @@
+<template>
+  <BButton @click="showMeAdvancedExample">Click me</BButton>
+</template>
+
+<script setup lang="ts">
+import {h, onMounted, onUnmounted, ref} from 'vue'
+import {BButton, useModal} from 'bootstrap-vue-next'
+
+const {create} = useModal()
+
+const firstRef = ref({
+  body: `${Math.random()}`,
+})
+let intervalId: ReturnType<typeof setInterval> | undefined
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    firstRef.value.body = `${Math.random()}`
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId)
+  }
+})
+
+const showMeAdvancedExample = () => {
+  create({
+    slots: {
+      default: (scope) => h('div', null, `custom ${firstRef.value.body} - ${scope.visible}`),
+    },
+  }).show()
+
+  // Demonstration pseudocode, you can import a component and use it
+  // const importedComponent = () => {
+  //   create({
+  //     component: (await import('./TestModal.vue')).default,
+  //   })
+  // }
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseModalBasic.vue b/apps/docs/src/docs/composables/demo/UseModalBasic.vue
new file mode 100644
index 000000000..314cd9c6f
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseModalBasic.vue
@@ -0,0 +1,19 @@
+<template>
+  <BButton @click="showExample">Click me</BButton>
+</template>
+
+<script setup lang="ts">
+import {BButton, useModal} from 'bootstrap-vue-next'
+
+const {create} = useModal()
+
+const showExample = async () => {
+  const value = await create({title: 'Hello World!'}).show()
+
+  if (value && typeof value === 'object' && 'ok' in value && 'trigger' in value) {
+    create({
+      body: `Promise resolved to object with {ok: ${value.ok}, trigger: ${value.trigger}}`,
+    }).show()
+  }
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseModalNested.vue b/apps/docs/src/docs/composables/demo/UseModalNested.vue
new file mode 100644
index 000000000..320fb1269
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseModalNested.vue
@@ -0,0 +1,54 @@
+<template>
+  <BButton @click="nestedModal1 = !nestedModal1">Open First Modal</BButton>
+
+  <BModal
+    v-model="nestedModal1"
+    title="First Modal"
+    ok-only
+  >
+    <p class="my-2">First Modal</p>
+    <BButtonGroup>
+      <BButton @click="nestedModal2 = !nestedModal2">Open Second Modal</BButton>
+      <BButton @click="() => hide()">Hide Last</BButton>
+      <BButton @click="() => hideAll()">Hide All</BButton>
+    </BButtonGroup>
+  </BModal>
+  <BModal
+    v-model="nestedModal2"
+    title="Second Modal"
+    ok-only
+  >
+    <p class="my-2">Second Modal</p>
+    <BButtonGroup>
+      <BButton
+        size="sm"
+        @click="nestedModal3 = !nestedModal3"
+        >Open Third Modal</BButton
+      >
+      <BButton @click="() => hide()">Hide Last</BButton>
+      <BButton @click="() => hideAll()">Hide All</BButton>
+    </BButtonGroup>
+  </BModal>
+  <BModal
+    v-model="nestedModal3"
+    title="Third Modal"
+    ok-only
+  >
+    <p class="my-1">Third Modal</p>
+    <BButtonGroup>
+      <BButton @click="() => hide()">Hide Last</BButton>
+      <BButton @click="() => hideAll()">Hide All</BButton>
+    </BButtonGroup>
+  </BModal>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {BButton, BButtonGroup, BModal, useModal} from 'bootstrap-vue-next'
+
+const nestedModal1 = ref(false)
+const nestedModal2 = ref(false)
+const nestedModal3 = ref(false)
+
+const {hide, hideAll} = useModal()
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseModalReactive.vue b/apps/docs/src/docs/composables/demo/UseModalReactive.vue
new file mode 100644
index 000000000..8fba93d97
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseModalReactive.vue
@@ -0,0 +1,31 @@
+<template>
+  <BButton @click="showReactiveExample">Click me</BButton>
+</template>
+
+<script setup lang="ts">
+import {onMounted, onUnmounted, ref} from 'vue'
+import {BButton, useModal} from 'bootstrap-vue-next'
+
+const {create} = useModal()
+
+const title = ref('Hello')
+let intervalId: ReturnType<typeof setInterval> | undefined
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    title.value = title.value === 'Hello' ? 'World' : 'Hello'
+  }, 2500)
+})
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId)
+  }
+})
+
+const showReactiveExample = () => {
+  create({
+    title,
+  }).show()
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseModalSetup.vue b/apps/docs/src/docs/composables/demo/UseModalSetup.vue
new file mode 100644
index 000000000..e30d35e19
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseModalSetup.vue
@@ -0,0 +1,5 @@
+<template>
+  <BApp>
+    <router-view />
+  </BApp>
+</template>
diff --git a/apps/docs/src/docs/composables/demo/UsePopoverAdvanced.vue b/apps/docs/src/docs/composables/demo/UsePopoverAdvanced.vue
new file mode 100644
index 000000000..c83c865c2
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UsePopoverAdvanced.vue
@@ -0,0 +1,21 @@
+<template>
+  <BButton ref="advancedExample">Hover me</BButton>
+</template>
+
+<script setup lang="ts">
+import {h, onMounted, ref} from 'vue'
+import {BButton, usePopover} from 'bootstrap-vue-next'
+
+const {popover} = usePopover()
+const advancedExample = ref<HTMLElement>()
+
+onMounted(() => {
+  popover({
+    slots: {
+      default: (scope) => h('div', null, `Custom content - Visible: ${scope.visible}`),
+    },
+    target: advancedExample.value,
+    title: 'Advanced Popover',
+  })
+})
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UsePopoverBasic.vue b/apps/docs/src/docs/composables/demo/UsePopoverBasic.vue
new file mode 100644
index 000000000..a66fd24ec
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UsePopoverBasic.vue
@@ -0,0 +1,15 @@
+<template>
+  <BButton ref="popoverButton">Hover me</BButton>
+</template>
+
+<script setup lang="ts">
+import {type ComponentPublicInstance, onMounted, ref} from 'vue'
+import {usePopover} from 'bootstrap-vue-next'
+
+const {popover} = usePopover()
+const popoverButton = ref<ComponentPublicInstance>()
+
+onMounted(() => {
+  popover({title: 'Hello World!', body: 'This is a popover.', target: popoverButton.value})
+})
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UsePopoverLifecycleAwaitUsing.ts b/apps/docs/src/docs/composables/demo/UsePopoverLifecycleAwaitUsing.ts
new file mode 100644
index 000000000..e6f0e9d42
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UsePopoverLifecycleAwaitUsing.ts
@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {usePopover} from 'bootstrap-vue-next'
+
+{
+  const {popover} = usePopover()
+
+  // #region snippet
+  await using pop = popover({title: 'Hello World!'})
+  // #endregion snippet
+}
diff --git a/apps/docs/src/docs/composables/demo/UsePopoverLifecycleManual.ts b/apps/docs/src/docs/composables/demo/UsePopoverLifecycleManual.ts
new file mode 100644
index 000000000..0b2984f10
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UsePopoverLifecycleManual.ts
@@ -0,0 +1,12 @@
+import {usePopover} from 'bootstrap-vue-next'
+
+{
+  const {popover} = usePopover()
+
+  // #region snippet
+  const pop = popover({title: 'Hello World!'})
+  pop.show()
+  // do something
+  pop.destroy()
+  // #endregion snippet
+}
diff --git a/apps/docs/src/docs/composables/demo/UsePopoverReactive.vue b/apps/docs/src/docs/composables/demo/UsePopoverReactive.vue
new file mode 100644
index 000000000..b0a2a6917
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UsePopoverReactive.vue
@@ -0,0 +1,31 @@
+<template>
+  <BButton ref="reactiveExample">Hover me</BButton>
+</template>
+
+<script setup lang="ts">
+import {onMounted, onUnmounted, ref} from 'vue'
+import {BButton, usePopover} from 'bootstrap-vue-next'
+
+const {tooltip} = usePopover()
+
+const title = ref('Hello')
+const reactiveExample = ref<HTMLElement>()
+let intervalId: NodeJS.Timeout | undefined
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    title.value = title.value === 'Hello' ? 'World' : 'Hello'
+  }, 2500)
+
+  tooltip({
+    title,
+    target: reactiveExample.value,
+  })
+})
+
+onUnmounted(() => {
+  if (intervalId !== undefined) {
+    clearInterval(intervalId)
+  }
+})
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UsePopoverSetup.vue b/apps/docs/src/docs/composables/demo/UsePopoverSetup.vue
new file mode 100644
index 000000000..e30d35e19
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UsePopoverSetup.vue
@@ -0,0 +1,5 @@
+<template>
+  <BApp>
+    <router-view />
+  </BApp>
+</template>
diff --git a/apps/docs/src/docs/composables/demo/UseScrollspyBasic.vue b/apps/docs/src/docs/composables/demo/UseScrollspyBasic.vue
index 98157bbd7..115657c98 100644
--- a/apps/docs/src/docs/composables/demo/UseScrollspyBasic.vue
+++ b/apps/docs/src/docs/composables/demo/UseScrollspyBasic.vue
@@ -2,23 +2,54 @@
   <BContainer>
     <BRow>
       <BCol cols="4">
-        <BNav pills vertical ref="navTarget">
-          <BNavItem href="#section1" @click="scrollIntoView">Section 1</BNavItem>
-          <BNavItem href="#section2" @click="scrollIntoView">Section 2</BNavItem>
-          <BNavItem href="#section3" @click="scrollIntoView">Section 3</BNavItem>
+        <BNav
+          ref="navTarget"
+          pills
+          vertical
+        >
+          <BNavItem
+            href="#section1"
+            @click="scrollIntoView"
+            >Section 1</BNavItem
+          >
+          <BNavItem
+            href="#section2"
+            @click="scrollIntoView"
+            >Section 2</BNavItem
+          >
+          <BNavItem
+            href="#section3"
+            @click="scrollIntoView"
+            >Section 3</BNavItem
+          >
         </BNav>
       </BCol>
       <BCol cols="8">
         <div
           ref="scrollContent"
-          style="height: 300px; overflow-y: auto; border: 1px solid #dee2e6; padding: 1rem;"
+          style="height: 300px; overflow-y: auto; border: 1px solid #dee2e6; padding: 1rem"
         >
           <h4 id="section1">Section 1</h4>
-          <p v-for="i in 4" :key="`s1-${i}`">{{ loremText }}</p>
+          <p
+            v-for="i in 4"
+            :key="`s1-${i}`"
+          >
+            {{ loremText }}
+          </p>
           <h4 id="section2">Section 2</h4>
-          <p v-for="i in 4" :key="`s2-${i}`">{{ loremText }}</p>
+          <p
+            v-for="i in 4"
+            :key="`s2-${i}`"
+          >
+            {{ loremText }}
+          </p>
           <h4 id="section3">Section 3</h4>
-          <p v-for="i in 4" :key="`s3-${i}`">{{ loremText }}</p>
+          <p
+            v-for="i in 4"
+            :key="`s3-${i}`"
+          >
+            {{ loremText }}
+          </p>
         </div>
       </BCol>
     </BRow>
@@ -29,10 +60,11 @@
 import {useTemplateRef} from 'vue'
 import {useScrollspy} from 'bootstrap-vue-next'
 
-const loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+const loremText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
 
 const scrollContent = useTemplateRef('scrollContent')
 const navTarget = useTemplateRef('navTarget')
 
 const {scrollIntoView} = useScrollspy(scrollContent, navTarget)
-</script>
\ No newline at end of file
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseScrollspyManual.vue b/apps/docs/src/docs/composables/demo/UseScrollspyManual.vue
index 578a64c5c..8e248c340 100644
--- a/apps/docs/src/docs/composables/demo/UseScrollspyManual.vue
+++ b/apps/docs/src/docs/composables/demo/UseScrollspyManual.vue
@@ -20,14 +20,29 @@
         </div>
         <div
           ref="content"
-          style="height: 250px; overflow-y: auto; border: 1px solid #dee2e6; padding: 1rem;"
+          style="height: 250px; overflow-y: auto; border: 1px solid #dee2e6; padding: 1rem"
         >
           <h5 id="intro">Introduction</h5>
-          <p v-for="i in 3" :key="`intro-${i}`">{{ loremText }}</p>
+          <p
+            v-for="i in 3"
+            :key="`intro-${i}`"
+          >
+            {{ loremText }}
+          </p>
           <h5 id="features">Features</h5>
-          <p v-for="i in 3" :key="`features-${i}`">{{ loremText }}</p>
+          <p
+            v-for="i in 3"
+            :key="`features-${i}`"
+          >
+            {{ loremText }}
+          </p>
           <h5 id="conclusion">Conclusion</h5>
-          <p v-for="i in 3" :key="`conclusion-${i}`">{{ loremText }}</p>
+          <p
+            v-for="i in 3"
+            :key="`conclusion-${i}`"
+          >
+            {{ loremText }}
+          </p>
         </div>
       </BCol>
     </BRow>
@@ -35,11 +50,11 @@
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
-import {useTemplateRef} from 'vue'
+import {computed, useTemplateRef} from 'vue'
 import {useScrollspy} from 'bootstrap-vue-next'
 
-const loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+const loremText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
 
 const content = useTemplateRef('content')
 
@@ -47,5 +62,5 @@ const {current, list, scrollIntoView} = useScrollspy(content, null, {
   manual: true,
 })
 
-const filteredList = computed(() => list.value.filter(item => item.id))
-</script>
\ No newline at end of file
+const filteredList = computed(() => list.value.filter((item) => item.id))
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseToastAdvanced.vue b/apps/docs/src/docs/composables/demo/UseToastAdvanced.vue
new file mode 100644
index 000000000..4a5453c3b
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseToastAdvanced.vue
@@ -0,0 +1,41 @@
+<template>
+  <BButton @click="showMe">Show</BButton>
+</template>
+
+<script setup lang="ts">
+import {h, onMounted, onUnmounted, ref} from 'vue'
+import {BButton, type OrchestratedToast, useToast} from 'bootstrap-vue-next'
+
+const {create} = useToast()
+
+const firstRef = ref<OrchestratedToast>({
+  body: `${Math.random()}`,
+})
+
+let intervalId: ReturnType<typeof setInterval> | undefined
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    firstRef.value.body = `${Math.random()}`
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (intervalId !== undefined) {
+    clearInterval(intervalId)
+  }
+})
+
+const showMe = () => {
+  create({
+    body: firstRef.value.body,
+    slots: {default: () => h('div', null, `custom! ${firstRef.value.body}`)},
+  })
+  // Demonstration pseudocode, you can also import a component and use it
+  // const importedComponent = () => {
+  //   create({
+  //     component: import('./MyToastComponent.vue'),
+  //   })
+  // }
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseToastBasic.vue b/apps/docs/src/docs/composables/demo/UseToastBasic.vue
new file mode 100644
index 000000000..bd132c320
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseToastBasic.vue
@@ -0,0 +1,9 @@
+<template>
+  <BButton @click="create({title: 'Hello', body: 'World'})">Show</BButton>
+</template>
+
+<script setup lang="ts">
+import {BButton, useToast} from 'bootstrap-vue-next'
+
+const {create} = useToast()
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseToastProgrammatic.vue b/apps/docs/src/docs/composables/demo/UseToastProgrammatic.vue
new file mode 100644
index 000000000..2bfa272b5
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseToastProgrammatic.vue
@@ -0,0 +1,41 @@
+<template>
+  <BButtonGroup>
+    <BButton
+      variant="success"
+      @click="showMe"
+    >
+      Show the Toast
+    </BButton>
+    <BButton
+      variant="danger"
+      @click="hideMe"
+    >
+      Hide the Toast
+    </BButton>
+  </BButtonGroup>
+</template>
+
+<script setup lang="ts">
+import {BButton, BButtonGroup, useToast} from 'bootstrap-vue-next'
+
+const {create} = useToast()
+
+let toast: undefined | ReturnType<typeof create>
+
+const showMe = () => {
+  if (toast !== undefined) return
+  // `create` returns a symbol
+  toast = create({
+    title: 'Showing',
+    body: 'Toast is now showing',
+    variant: 'success',
+    position: 'bottom-center',
+  })
+}
+
+const hideMe = () => {
+  if (toast === undefined) return
+  toast.destroy()
+  toast = undefined // Reset to allow creating new toast
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseToastPromise.vue b/apps/docs/src/docs/composables/demo/UseToastPromise.vue
new file mode 100644
index 000000000..bb7248c39
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseToastPromise.vue
@@ -0,0 +1,42 @@
+<template>
+  <BButtonGroup>
+    <BButton
+      variant="success"
+      @click="promiseToast"
+    >
+      Show the Toast
+    </BButton>
+  </BButtonGroup>
+</template>
+
+<script setup lang="ts">
+import {h} from 'vue'
+import {BButton, BButtonGroup, useToast} from 'bootstrap-vue-next'
+
+const {create} = useToast()
+
+const promiseToast = () => {
+  create(
+    {
+      variant: 'primary',
+      position: 'middle-center',
+      bodyClass: 'w-100',
+      modelValue: true,
+      slots: {
+        default: ({hide}) => [
+          h('h2', {class: 'text-center mb-3'}, 'Ready?'),
+          h('div', {class: 'd-flex justify-content-center gap-2'}, [
+            h(BButton, {onClick: () => hide('ok'), size: 'lg'}, () => 'Yes'),
+            h(BButton, {onClick: () => hide('cancel'), size: 'lg'}, () => 'No'),
+          ]),
+        ],
+      },
+    },
+    {resolveOnHide: true}
+  ).then((r) => {
+    if (r && typeof r === 'object' && 'ok' in r) {
+      create({title: `you pressed: ${r.ok ? 'yes' : 'no'}`})
+    }
+  })
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseToastReactive.vue b/apps/docs/src/docs/composables/demo/UseToastReactive.vue
new file mode 100644
index 000000000..52d9e7748
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseToastReactive.vue
@@ -0,0 +1,39 @@
+<template>
+  <BButton @click="showMe">Show</BButton>
+</template>
+
+<script setup lang="ts">
+import {computed, onMounted, onUnmounted, ref} from 'vue'
+import {BButton, type ColorVariant, type OrchestratedToast, useToast} from 'bootstrap-vue-next'
+
+const {create} = useToast()
+
+const firstRef = ref<OrchestratedToast>({
+  body: `${Math.random()}`,
+})
+
+let intervalId: ReturnType<typeof setInterval> | undefined
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    firstRef.value.body = `${Math.random()}`
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (intervalId !== undefined) {
+    clearInterval(intervalId)
+  }
+})
+
+const showMe = () => {
+  create(
+    computed(() => ({
+      ...firstRef.value,
+      variant: (Number.parseInt(firstRef.value.body?.charAt(2) ?? '0') % 2 === 0
+        ? 'danger'
+        : 'info') as ColorVariant,
+    }))
+  )
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseToastSetup.vue b/apps/docs/src/docs/composables/demo/UseToastSetup.vue
new file mode 100644
index 000000000..e30d35e19
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseToastSetup.vue
@@ -0,0 +1,5 @@
+<template>
+  <BApp>
+    <router-view />
+  </BApp>
+</template>
diff --git a/apps/docs/src/docs/composables/demo/UseTogglePromise.vue b/apps/docs/src/docs/composables/demo/UseTogglePromise.vue
new file mode 100644
index 000000000..ba9b336a7
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseTogglePromise.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <BButton @click="testToggle">Click me</BButton>
+    <BModal id="toggleTest"> content </BModal>
+    <span
+      v-if="reason !== ''"
+      class="mx-3"
+      >Close reason: {{ reason }}</span
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {useToggle} from 'bootstrap-vue-next'
+
+const toggle = useToggle('toggleTest')
+const reason = ref('')
+
+async function testToggle() {
+  const e = await toggle.show(true)
+  if (e === 'ok') {
+    // eslint-disable-next-line no-console
+    console.log('ok pressed')
+  } else {
+    // eslint-disable-next-line no-console
+    console.log('closed with', e)
+  }
+  reason.value = String(e)
+}
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseToggleWithId.vue b/apps/docs/src/docs/composables/demo/UseToggleWithId.vue
new file mode 100644
index 000000000..b94356fc3
--- /dev/null
+++ b/apps/docs/src/docs/composables/demo/UseToggleWithId.vue
@@ -0,0 +1,24 @@
+<template>
+  <BButton @click="show()">Click me</BButton>
+  <BModal
+    v-if="someConditions"
+    id="my-modal"
+    v-model="programmaticModal"
+  >
+    <BButton @click="hide()">Hide me</BButton>
+  </BModal>
+</template>
+
+<script setup lang="ts">
+import {onMounted, ref} from 'vue'
+import {BButton, BModal, useToggle} from 'bootstrap-vue-next'
+
+const someConditions = ref(false)
+const programmaticModal = ref(false)
+
+onMounted(() => {
+  someConditions.value = true
+})
+
+const {show, hide} = useToggle('my-modal')
+</script>
diff --git a/apps/docs/src/docs/composables/useBreadcrumb.md b/apps/docs/src/docs/composables/useBreadcrumb.md
index d0b462164..3964ec7de 100644
--- a/apps/docs/src/docs/composables/useBreadcrumb.md
+++ b/apps/docs/src/docs/composables/useBreadcrumb.md
@@ -10,91 +10,12 @@
 
 ## Demo
 
-<HighlightCard>
-  <BBreadcrumb />
-  <BFormInput class="my-3" v-model="inputValue" />
-  <BButton @click="addItem" class="me-2">Add</BButton>
-  <BButton variant="danger" @click="breadcrumb.reset">Clear</BButton>
-  <template #html>
-
-```vue
-<template>
-  <BBreadcrumb />
-
-  <BFormInput v-model="inputValue" />
-
-  <BButton @click="addItem">Add</BButton>
-  <BButton variant="danger" @click="breadcrumb.reset">Clear</BButton>
-</template>
-
-<script setup lang="ts">
-const breadcrumb = useBreadcrumb()
-
-const inputValue = ref('')
-
-const addItem = () => {
-  breadcrumb.items?.value.push(inputValue.value)
-  inputValue.value = ''
-}
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UseBreadcrumbBasic.vue
 
 You can also pass in an id to the component and composable to create a unique breadcrumb trail.
 
-<HighlightCard>
-  <BBreadcrumb id="foobar" />
-  <BFormInput class="my-3" v-model="foobarInputValue" />
-  <BButton @click="foobarAddItem" class="me-2">Add</BButton>
-  <BButton variant="danger" @click="foobarBreadcrumb.reset">Clear</BButton>
-  <template #html>
-
-```vue
-<template>
-  <BBreadcrumb id="foobar" />
-
-  <BFormInput v-model="inputValue" />
-
-  <BButton @click="addItem">Add</BButton>
-  <BButton variant="danger" @click="breadcrumb.reset">Clear</BButton>
-</template>
-
-<script setup lang="ts">
-// Input matches the id passed to the component
-const breadcrumb = useBreadcrumb('foobar')
-
-const inputValue = ref('')
-
-const addItem = () => {
-  breadcrumb.items.value.push(inputValue.value)
-  inputValue.value = ''
-}
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UseBreadcrumbWithId.vue
 
 <script setup lang="ts">
-import {ref} from 'vue'
-import HighlightCard from '../../components/HighlightCard.vue'
-import UsePluginAlert from '../../components/UsePluginAlert.vue'
-import {BBreadcrumb, BButton, BFormInput, BFormGroup, BCard, BCardBody, useBreadcrumb} from 'bootstrap-vue-next'
 import ComposableHeader from './ComposableHeader.vue'
-
-const breadcrumb = useBreadcrumb()
-const inputValue = ref('')
-const addItem = () => {
-    breadcrumb.items?.value.push(inputValue.value)
-    inputValue.value = ''
-}
-
-const foobarBreadcrumb = useBreadcrumb('foobar')
-const foobarInputValue = ref('')
-const foobarAddItem = () => {
-    foobarBreadcrumb.items?.value.push(foobarInputValue.value)
-    foobarInputValue.value = ''
-}
 </script>
diff --git a/apps/docs/src/docs/composables/useColorMode.md b/apps/docs/src/docs/composables/useColorMode.md
index 59ebefe23..1d16c6375 100644
--- a/apps/docs/src/docs/composables/useColorMode.md
+++ b/apps/docs/src/docs/composables/useColorMode.md
@@ -8,54 +8,8 @@
 
 ## Demo
 
-<HighlightCard>
-  <ClientOnly>
-    <BCard ref="target">
-      <BButton @click="changeColor">
-        Current color: {{ mode }}
-      </BButton>
-    </BCard>
-  </ClientOnly>
-  <template #html>
-
-```vue
-<template>
-  <BCard ref="target">
-    <BButton @click="changeColor"> Current color: {{ mode }} </BButton>
-  </BCard>
-</template>
-
-<script setup lang="ts">
-import {useColorMode} from 'bootstrap-vue-next/composables/useColorMode'
-
-const target = ref<HTMLElement | null>(null)
-
-const mode = useColorMode({
-  selector: target,
-})
-
-const changeColor = () => {
-  mode.value = mode.value === 'dark' ? 'light' : 'dark'
-}
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UseColorModeBasic.vue
 
 <script setup lang="ts">
 import ComposableHeader from './ComposableHeader.vue'
-import {ref} from 'vue'
-import {useColorMode} from 'bootstrap-vue-next/composables/useColorMode'
-import HighlightCard from '../../components/HighlightCard.vue'
-
-const target = ref<HTMLElement | null>(null)
-
-const mode = useColorMode({
-  selector: target,
-})
-
-const changeColor = () => {
-  mode.value = mode.value === 'dark' ? 'light' : 'dark'
-}
 </script>
diff --git a/apps/docs/src/docs/composables/useModal.md b/apps/docs/src/docs/composables/useModal.md
index 45050d7f7..52fc6e66e 100644
--- a/apps/docs/src/docs/composables/useModal.md
+++ b/apps/docs/src/docs/composables/useModal.md
@@ -14,19 +14,7 @@ To use `useModal`, you need one of the following setup approaches:
 
 The easiest way is to wrap your application with the `BApp` component, which automatically sets up the orchestrator and registry:
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BApp>
-    <router-view />
-  </BApp>
-</template>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/UseModalSetup.vue
 
 ### Plugin Setup (Legacy)
 
@@ -38,67 +26,13 @@ Alternatively, you can use the traditional plugin approach.
 
 Creating a modal is done through the `create` method:
 
-<HighlightCard>
-  <BButton @click="showExample">Click me</BButton>
-
-<template #html>
-
-```vue
-<template>
-  <BButton @click="showExample">Click me</BButton>
-</template>
-
-<script setup lang="ts">
-const {create} = useModal()
-
-const showExample = async () => {
-  const value = await create({title: 'Hello World!'}).show()
-
-  create({
-    body: `Promise resolved to object with {ok: ${value.ok}, trigger: ${value.trigger}}`,
-    variant: 'info',
-  }).show()
-}
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UseModalBasic.vue
 
 ### Reactivity Within `create`
 
 `create` props property can accept a `MaybeRef`, meaning that you can make properties reactive
 
-<HighlightCard>
-  <BButton @click="showReactiveExample">Click me</BButton>
-
-<template #html>
-
-```vue
-<template>
-  <BButton @click="showReactiveExample">Click me</BButton>
-</template>
-
-<script setup lang="ts">
-const {create} = useModal()
-
-const title = ref('Hello')
-onMounted(() => {
-  setInterval(() => {
-    title.value = title.value === 'Hello' ? 'World' : 'Hello'
-  }, 2500)
-})
-
-const showReactiveExample = () => {
-  create({
-    title: title,
-  }).show()
-}
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UseModalReactive.vue
 
 ### Advanced Creation
 
@@ -106,51 +40,11 @@ Using props can work for most situations, but it leaves some finer control to be
 
 You can also use component slots to render what you want. This is done through the `slots` property. The `slots` property is an object that contains the slot name as the key and a render function or component as the value. The render function is passed a `scope` object that contains the slots scope.
 
-<HighlightCard>
-  <BButton @click="showMeAdvancedExample">Click me</BButton>
-
-<template #html>
-
-```vue
-<template>
-  <BButton @click="showMeAdvancedExample">Click me</BButton>
-</template>
-
-<script setup lang="ts">
-const {create} = useModal()
-
-const firstRef = ref({
-  body: `${Math.random()}`,
-})
-onMounted(() => {
-  setInterval(() => {
-    firstRef.value.body = `${Math.random()}`
-  }, 1000)
-})
-const showMeAdvancedExample = () => {
-  create({
-    slots: {
-      default: (scope) =>
-        h('div', null, {default: () => `custom ${firstRef.value.body} - ${scope.visible}`}),
-    },
-  }).show()
-
-  // Demonstration pseudocode, you can import a component and use it
-  // const importedComponent = () => {
-  //   create({
-  //     component: (await import('./TestModal.vue')).default,
-  //   })
-  // }
-}
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UseModalAdvanced.vue
 
 ### Return Value
 
-The `create` method returns a promise that resolves after the modal has been hidden to a `BvTriggerableEvent` object.  
+The `create` method returns a promise that resolves after the modal has been hidden to a `BvTriggerableEvent` object.
 Using the `resolveOnHide` option (in the second argument), the promise resolves at the time the modal begins hiding, rather than after it is fully hidden.
 
 ```js
@@ -211,99 +105,9 @@ await using modal = create({title: 'Hello World!'})
 
 In addition to creating modals in a global context, you can also hide modals from anywhere in the app. This feature does not require an orchestrator component to be present.
 
-<HighlightCard>
-  <BButton @click="nestedModal1 = !nestedModal1">Open First Modal</BButton>
- 
-  <template #html>
-
-```vue
-<template>
-  <BButton @click="nestedModal1 = !nestedModal1">Open First Modal</BButton>
-  <BModal v-model="nestedModal1" title="First Modal" ok-only>
-    <p class="my-2">First Modal</p>
-    <BButtonGroup>
-      <BButton @click="nestedModal2 = !nestedModal2">Open Second Modal</BButton>
-      <BButton @click="hide">Hide Last</BButton>
-      <BButton @click="hideAll">Hide All</BButton>
-    </BButtonGroup>
-  </BModal>
-  <BModal v-model="nestedModal2" title="Second Modal" ok-only>
-    <p class="my-2">Second Modal</p>
-    <BButtonGroup>
-      <BButton @click="nestedModal3 = !nestedModal3" size="sm">Open Third Modal</BButton>
-      <BButton @click="hide">Hide Last</BButton>
-      <BButton @click="hideAll">Hide All</BButton>
-    </BButtonGroup>
-  </BModal>
-  <BModal v-model="nestedModal3" title="Third Modal" ok-only>
-    <p class="my-1">Third Modal</p>
-    <BButtonGroup>
-      <BButton @click="hide">Hide Last</BButton>
-      <BButton @click="hideAll">Hide All</BButton>
-    </BButtonGroup>
-  </BModal>
-</template>
+<<< DEMO ./demo/UseModalNested.vue
 
 <script setup lang="ts">
-const nestedModal1 = ref(false)
-const nestedModal2 = ref(false)
-const nestedModal3 = ref(false)
-
-const {hide, hideAll} = useModal()
-</script>
-```
-
-  </template>
-</HighlightCard>
-
-<script setup lang="ts">
-import {useModal} from 'bootstrap-vue-next/composables/useModal'
-import HighlightCard from '../../components/HighlightCard.vue'
-
 import UsePluginAlert from '../../components/UsePluginAlert.vue'
-import {ref, computed, h, onMounted, nextTick} from 'vue'
 import ComposableHeader from './ComposableHeader.vue'
-
-const nestedModal1 = ref(false)
-const nestedModal2 = ref(false)
-const nestedModal3 = ref(false)
-
-const {hide, hideAll, create} = useModal()
-
-const title = ref('Hello')
-
-onMounted(() => {
-  setInterval(() => {
-    title.value = title.value === 'Hello' ? 'World' : 'Hello'
-  }, 1000)
-})
-
-const showExample = async () => {
-  const value = await create({ body: 'Hello World!' }).show()
-  await nextTick()
-  create({ body: `Promise resolved to object with {ok: ${value.ok}, trigger: ${value.trigger}}`, variant: 'info' }).show()
-}
-
-const showReactiveExample = () => {
-  create({
-      title: title,
-  }).show()
-}
-
-const firstRef = ref({
-  body: `${Math.random()}`,
-})
-onMounted(() => {
-  setInterval(() => {
-    firstRef.value.body = `${Math.random()}`
-  }, 1000)
-})
-
-const showMeAdvancedExample = () => {
-  create({
-    slots: {
-      default: (scope) => h('div', null, {default: () => `custom ${firstRef.value.body} - ${scope.visible}`}),
-    },
-  }).show()
-}
 </script>
diff --git a/apps/docs/src/docs/composables/usePopover.md b/apps/docs/src/docs/composables/usePopover.md
index 07f0a8565..eaaababce 100644
--- a/apps/docs/src/docs/composables/usePopover.md
+++ b/apps/docs/src/docs/composables/usePopover.md
@@ -14,19 +14,7 @@ To use `usePopover`, you need one of the following setup approaches:
 
 The easiest way is to wrap your application with the `BApp` component, which automatically sets up the orchestrator and registry:
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BApp>
-    <router-view />
-  </BApp>
-</template>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/UsePopoverSetup.vue
 
 ### Plugin Setup (Legacy)
 
@@ -40,88 +28,19 @@ Note: As of v0.40, there are no separate toast/modal/popover controller plugins.
 
 Popovers and tooltips can be created using the `popover` or `tooltip` methods:
 
-<HighlightCard>
-  <BButton ref="popoverButton">Hover me</BButton>
-
-<template #html>
-
-```vue
-<template>
-  <BButton ref="popoverButton">Hover me</BButton>
-</template>
-
-<script setup lang="ts">
-const {popover} = usePopover()
-const popoverButton = useTemplateRef('popoverButton')
-
-const pop = popover({title: 'Hello World!', body: 'This is a popover.', target: popoverButton})
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UsePopoverBasic.vue
 
 ### Reactivity Within `popover` and `tooltip`
 
 The methods accept reactive properties using `MaybeRef`, allowing dynamic updates to the popover content.
 
-<HighlightCard>
-  <BButton ref="reactiveExample">Hover me</BButton>
-
-<template #html>
-
-```vue
-<template>
-  <BButton ref="reactiveExample">Click me</BButton>
-</template>
-
-<script setup lang="ts">
-const {tooltip} = usePopover()
-
-const title = ref('Hello')
-onMounted(() => {
-  setInterval(() => {
-    title.value = title.value === 'Hello' ? 'World' : 'Hello'
-  }, 2500)
-})
-tooltip({
-  title: title,
-})
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UsePopoverReactive.vue
 
 ### Advanced Creation
 
 For more control, you can use the `component` property to render a custom component or the `slots` property to define slot content dynamically.
 
-<HighlightCard>
-  <BButton ref="advancedExample">Hover me</BButton>
-
-<template #html>
-
-```vue
-<template>
-  <BButton ref="advancedExample">Click me</BButton>
-</template>
-
-<script setup lang="ts">
-const {popover} = usePopover()
-const advancedExample = ref()
-
-popover({
-  slots: {
-    default: (scope) => h('div', null, `Custom content - Visible: ${scope.visible}`),
-  },
-  target: advancedExample,
-})
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UsePopoverAdvanced.vue
 
 ### Return Value
 
@@ -138,50 +57,13 @@ The `popover` and `tooltip` methods return an awaitable controller `PromiseWithC
 
 By default, the popover is destroyed when the current scope is exited. You can manually destroy it using the `destroy` method.
 
-```js
-const pop = popover({title: 'Hello World!'})
-pop.show()
-// do something
-pop.destroy()
-```
+<<< FRAGMENT ./demo/UsePopoverLifecycleManual.ts#snippet{ts}
 
 Alternatively, use `await using` in TypeScript 5.2+ to automatically destroy the popover when the scope is exited.
 
-```js
-await using pop = popover({title: 'Hello World!'})
-```
+<<< FRAGMENT ./demo/UsePopoverLifecycleAwaitUsing.ts#snippet{ts}
 
 <script setup lang="ts">
-import {usePopover} from 'bootstrap-vue-next/composables/usePopover'
-import HighlightCard from '../../components/HighlightCard.vue'
 import UsePluginAlert from '../../components/UsePluginAlert.vue'
-import { ref, h, onMounted } from 'vue'
 import ComposableHeader from './ComposableHeader.vue'
-
-const { popover, tooltip } = usePopover()
-
-
-const title = ref('Hello')
-const popoverButton = ref()
-const reactiveExample = ref()
-const advancedExample = ref()
-
-onMounted(() => {
-  setInterval(() => {
-    title.value = title.value === 'Hello' ? 'World' : 'Hello'
-  }, 1000)
-})
-
-const pop = popover({ title: 'Hello World!', body: 'This is a popover.', target: popoverButton })
-const pop2 = tooltip({ title: title, target: reactiveExample })
-const pop3 = popover({
-  slots: {
-    default: (scope) =>
-      h('div', null,  `Custom content - Visible: ${scope.visible}`),
-  },
-  target: advancedExample,
-  title: 'Advanced Popover',
-  body: 'This is an advanced popover example.',
-})
-
 </script>
diff --git a/apps/docs/src/docs/composables/useToast.md b/apps/docs/src/docs/composables/useToast.md
index 0d78bf633..18417e99a 100644
--- a/apps/docs/src/docs/composables/useToast.md
+++ b/apps/docs/src/docs/composables/useToast.md
@@ -14,19 +14,7 @@ To use `useToast`, you need one of the following setup approaches:
 
 The easiest way is to wrap your application with the `BApp` component, which automatically sets up the orchestrator and registry:
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BApp>
-    <router-view />
-  </BApp>
-</template>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/UseToastSetup.vue#template{vue-html}
 
 ### Plugin Setup (Legacy)
 
@@ -38,24 +26,7 @@ Alternatively, you can use the traditional plugin approach.
 
 Creating and showing a toast is simple:
 
-<HighlightCard>
-  <BButton @click="create({ title: 'Hello', body: 'World'  })">Show</BButton>
-  <template #html>
-
-```vue
-<template>
-  <BButton @click="create({title: 'Hello', body: 'World'})">Show</BButton>
-</template>
-
-<script setup lang="ts">
-import {useToast} from 'bootstrap-vue-next'
-
-const {create} = useToast()
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UseToastBasic.vue
 
 The `create` method returns a `promise` that is resolved then the toast closes. You can give toast a unique id. Since `Toasts` are fluid and can move around a lot, returning the index at a given point in time is not ideal for as its position may be changed in the array. So, for use with the `remove` method, you need to give a unique identifier
 
@@ -71,261 +42,26 @@ Optional second argument can be passed to `create` to some options: `keep` and `
 
 `create` props property can accept a `MaybeRefOrGetter`, meaning that you can make properties reactive
 
-<HighlightCard>
-  <BButton @click="showReactiveExample">Show</BButton>
-  <template #html>
-
-```vue
-<template>
-  <BButton @click="showMe">Show</BButton>
-</template>
-
-<script setup lang="ts">
-const {create} = useToast()
-
-const firstRef = ref<OrchestratedToast>({
-  body: `${Math.random()}`,
-})
-onMounted(() => {
-  setInterval(() => {
-    firstRef.value.body = `${Math.random()}`
-  }, 1000)
-})
-
-const showMe = () => {
-  create(
-    computed(() => ({
-      ...firstRef.value,
-      variant: (Number.parseInt(firstRef.value.body?.charAt(2) ?? '0') % 2 === 0
-        ? 'danger'
-        : 'info') as ColorVariant,
-    }))
-  )
-}
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UseToastReactive.vue
 
 ### Advanced usage
 
-Using props can work for most situations, but it leaves some finer control to be desired. For instance, you can add HTML to any `slot` value. This can either be an imported SFC or an inline render function. For reactvity, you must use a getter function.
-
-<HighlightCard>
-  <BButton @click="showMeAdvancedExample">Show</BButton>
-  <template #html>
+Using props can work for most situations, but it leaves some finer control to be desired. For instance, you can add HTML to any `slot` value. This can either be an imported SFC or an inline render function. For reactivity, you must use a getter function.
 
-```vue
-<template>
-  <BButton @click="showMe">Show</BButton>
-</template>
-
-<script setup lang="ts">
-const {create} = useToast()
-
-const firstRef = ref<OrchestratedToast>({
-  body: `${Math.random()}`,
-})
-
-onMounted(() => {
-  setInterval(() => {
-    firstRef.value.body = `${Math.random()}`
-  }, 1000)
-})
-
-const showMe = () => {
-  create({
-    body: firstRef.value.body,
-    slots: {default: () => h('div', null, {default: () => `custom! ${firstRef.value.body}`})},
-  })
-  // Demonstration pseudocode, you can also import a component and use it
-  // const importedComponent () => {
-  //   create({
-  //     component: import('./MyToastComponent.vue'),
-  //   })
-  // }
-}
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UseToastAdvanced.vue
 
 ## Programmatically Hiding a Toast
 
-Hiding a `Toast` programmatically is very simple. `create` return an object that has functions to control the toast, including `destroy`
-
-<HighlightCard>
-  <BButtonGroup>
-    <BButton @click="showMe" variant="success">
-      Show the Toast
-    </BButton>
-    <BButton @click="hideMe" variant="danger">
-      Hide the Toast
-    </BButton>
-  </BButtonGroup>
-  <template #html>
-
-```vue
-<template>
-  <BButtonGroup>
-    <BButton @click="showMe" variant="success"> Show the Toast </BButton>
-    <BButton @click="hideMe" variant="danger"> Hide the Toast </BButton>
-  </BButtonGroup>
-</template>
-
-<script setup lang="ts">
-const {create} = useToast()
-
-let toast: undefined | ReturnType<typeof create>
-
-const showMe = () => {
-  if (toast !== undefined) return
-  // `create` returns a symbol
-  toast = create({
-    title: 'Showing',
-    value: true,
-    variant: 'success',
-    position: 'bottom-center',
-  })
-}
-
-const hideMe = () => {
-  if (toast === undefined) return
-  toast.destroy()
-}
-</script>
-```
-
-  </template>
+Hiding a `Toast` programmatically is very simple. `create` returns an object that has functions to control the toast, including `destroy`
 
-</HighlightCard>
+<<< DEMO ./demo/UseToastProgrammatic.vue
 
 ## Using promises
 
 Hiding a `Toast` with promise
 
-<HighlightCard>
-  <BButtonGroup>
-    <BButton @click="promiseToast" variant="success">
-      Show the Toast
-    </BButton>
-  </BButtonGroup>
-  <template #html>
-
-```vue
-<template>
-  <BButtonGroup>
-    <BButton @click="promiseToast" variant="success"> Show the Toast </BButton>
-  </BButtonGroup>
-</template>
+<<< DEMO ./demo/UseToastPromise.vue
 
 <script setup lang="ts">
-const {create} = useToast()
-const promiseToast = () => {
-  create(
-    {
-      variant: 'primary',
-      position: 'middle-center',
-      bodyClass: 'w-100',
-      modelValue: true,
-      slots: {
-        default: ({hide}) => [
-          h('h2', {class: 'text-center mb-3'}, 'Ready?'),
-          h('div', {class: 'd-flex justify-content-center gap-2'}, [
-            h(BButton, {onClick: () => hide('ok'), size: 'lg'}, () => 'Yes'),
-            h(BButton, {onClick: () => hide('cancel'), size: 'lg'}, () => 'No'),
-          ]),
-        ],
-      },
-    },
-    {resolveOnHide: true}
-  ).then((r) => {
-    create({title: 'you pressed: ' + (r.ok ? 'yes' : 'no')})
-  })
-}
-</script>
-```
-
-  </template>
-
-</HighlightCard>
-
-<script setup lang="ts">
-import {data} from '../../data/components/toast.data'
-import {useToast} from 'bootstrap-vue-next/composables/useToast'
-import HighlightCard from '../../components/HighlightCard.vue'
-
-import UsePluginAlert from '../../components/UsePluginAlert.vue'
-import {ref, computed, h, onMounted} from 'vue'
 import ComposableHeader from './ComposableHeader.vue'
-
-const {create, remove, toasts} = useToast()
-
-let toast: undefined | ReturnType<typeof create>
-
-const showMe = () => {
-  if (toast !== undefined) return
-  toast = create({ title: 'Showing',  variant: 'success', position: 'bottom-center' } )
-}
-
-const hideMe = () => {
-  if (toast === undefined) return
-  toast.destroy()
-  toast = undefined
-}
-
-const firstRef = ref<OrchestratedToast>({
-  body: `${Math.random()}`,
-})
-
-onMounted(() => {
-  setInterval(() => {
-    firstRef.value.body = `${Math.random()}`
-  }, 1000)
-})
-
-const showReactiveExample = () => {
-  create(
-    computed(() => ({
-      ...firstRef.value,
-      variant: (Number.parseInt(firstRef.value.body?.charAt(2) ?? '0') % 2 === 0
-        ? 'danger'
-        : 'info') as ColorVariant,
-    })),
-  )
-}
-
-const showMeAdvancedExample = () => {
-  create({
-    body: firstRef.value.body,
-    position: 'bottom-center',
-    slots: {default: () => h('div', null, {default: () => `custom! ${firstRef.value.body}`})},
-  })
-}
-
-const promiseToast = () => {
-  create(
-    {
-      variant: 'primary',
-      position: 'middle-center',
-      bodyClass: 'w-100',
-      modelValue: true,
-      slots: {
-        default: ({hide}) =>
-          [
-            h('h2', {class: 'text-center mb-3'}, 'Ready?'),
-            h('div', {class: 'd-flex justify-content-center gap-2'}, [
-              h(BButton, {onClick: () => hide('ok'), size: 'lg'}, () => 'Yes'),
-              h(BButton, {onClick: () => hide('cancel'), size: 'lg'}, () => 'No')
-            ])
-          ],
-      },
-    },
-    {resolveOnHide: true}
-  ).then((r) => {
-    create({title: 'you pressed: ' + (r.ok ? 'yes' : 'no')})
-  })
-}
 </script>
diff --git a/apps/docs/src/docs/composables/useToggle.md b/apps/docs/src/docs/composables/useToggle.md
index 9ae2e7d93..56c9ccdd3 100644
--- a/apps/docs/src/docs/composables/useToggle.md
+++ b/apps/docs/src/docs/composables/useToggle.md
@@ -34,98 +34,14 @@ const {hide} = useToggle()
 You can also provide an id to get particular component and show/hide it. Currently, we do not support using CSS selector to
 find modal since the component in lazy mode may not render at page initial. If the modal component does not exist and you attempt to call any of the exposed methods, the methods will safely no-op without throwing errors.
 
-<HighlightCard>
-<BButton @click="show()">Click me</BButton>
-<BModal v-if="someConditions" v-model="programmaticModal" id="my-modal">
-  <BButton @click="hide()">Hide me</BButton>
-</BModal>
-<template #html>
-
-```vue
-<template>
-  <BButton @click="show()">Click me</BButton>
-  <BModal v-if="someConditions" v-model="programmaticModal" id="my-modal">
-    <BButton @click="hide()">Hide me</BButton>
-  </BModal>
-</template>
-
-<script setup lang="ts">
-const someConditions = ref(false)
-const programmaticModal = ref(false)
-
-onMounted(() => {
-  someConditions.value = true
-})
-
-const {show, hide, component} = useToggle('my-modal')
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UseToggleWithId.vue
 
 ## Promise Flow
 
 The `show` and `toggle` methods take a boolean argument to control wether to resolve the promise on show (`false`) or on hide (`true`). On `show` the promise resolves to `true` when shown and to `'show-prevented'` if show is prevented. On `hide` the promise resolves to the trigger that caused the hide event. The promise can be awaited to get the result.
 
-<HighlightCard>
-  <BButton @click="testToggle">Click me</BButton>
-  <BModal id="toggleTest"> content </BModal>
-  <span v-if="reason !== ''" class="mx-3">Close reason: {{ reason }}</span>
-
-<template #html>
-
-```vue
-<template>
-  <BButton @click="testToggle">Click me</BButton>
-  <BModal id="toggleTest"> content </BModal>
-</template>
-<script setup lang="ts">
-const toggle = useToggle('toggleTest')
-async function testToggle() {
-  toggle.show(true).then((e) => {
-    if (e === 'ok') {
-      console.log('ok pressed')
-    } else {
-      console.log('closed with', e)
-    }
-  })
-}
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/UseTogglePromise.vue
 
 <script setup lang="ts">
-import {useToggle} from 'bootstrap-vue-next/composables/useToggle'
-import HighlightCard from '../../components/HighlightCard.vue'
-
-import {ref, onMounted} from 'vue'
 import ComposableHeader from './ComposableHeader.vue'
-
-const someConditions = ref(false)
-const programmaticModal = ref(false)
-
-onMounted(() => {
-    someConditions.value = true
-})
-
-const {show, hide} = useToggle('my-modal')
-
-const reason = ref('')
-const toggle = useToggle('toggleTest')
-async function testToggle() {
-  reason.value = ''
-  toggle
-    .show(true)
-    .then((e) => {
-      if (e === 'ok') {
-        console.log('ok pressed')
-      } else {
-        console.log('closed with', e)
-      }
-      reason.value = e
-    })
-}
 </script>

From 667ea2b866bdaf5beddddb1cc69a2108596fc60d Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Thu, 23 Oct 2025 09:55:23 -0700
Subject: [PATCH 02/13] docs(BPlaceholder): Parity pass (#2886)

---
 .../src/data/components/placeholder.data.ts   | 36 +++++++++----------
 apps/docs/src/docs/components/placeholder.md  | 13 +++++--
 apps/docs/src/docs/migration-guide.md         |  8 +++++
 3 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/apps/docs/src/data/components/placeholder.data.ts b/apps/docs/src/data/components/placeholder.data.ts
index d9956dd06..17173c8a9 100644
--- a/apps/docs/src/data/components/placeholder.data.ts
+++ b/apps/docs/src/data/components/placeholder.data.ts
@@ -21,7 +21,7 @@ export default {
         },
         cols: {
           type: 'Numberish',
-          default: 12, // TODO item not in string format
+          default: 12,
         },
         size: {
           type: 'PlaceholderSize',
@@ -32,8 +32,8 @@ export default {
           default: 'span',
         },
         variant: {
-          type: 'ColorVariant | null',
-          default: null, // TODO item not in string format
+          type: 'BgColorVariant | null',
+          default: null,
         },
         width: {
           type: 'Numberish',
@@ -69,7 +69,7 @@ export default {
         },
         footerWidth: {
           type: 'Numberish',
-          default: 100, // TODO item not in string format
+          default: 100,
         },
         headerAnimation: {
           type: 'PlaceholderAnimation',
@@ -85,7 +85,7 @@ export default {
         },
         headerWidth: {
           type: 'Numberish',
-          default: 100, // TODO item not in string format
+          default: 100,
         },
         imgBlankColor: {
           type: 'string',
@@ -97,7 +97,7 @@ export default {
         },
         imgHeight: {
           type: 'Numberish',
-          default: 100, // TODO item not in string format
+          default: 100,
         },
         imgSrc: {
           type: 'string',
@@ -105,19 +105,19 @@ export default {
         },
         noButton: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         noFooter: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         noHeader: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         noImg: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         size: {
           type: 'PlaceholderSize',
@@ -155,7 +155,7 @@ export default {
         loading: {
           description: 'Determines whether the loading slot is displayed',
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
       } satisfies PropRecord<keyof BPlaceholderWrapperProps>,
       emits: {},
@@ -180,11 +180,11 @@ export default {
         },
         cellWidth: {
           type: 'Numberish',
-          default: 100, // TODO item not in string format
+          default: 100,
         },
         columns: {
           type: 'Numberish',
-          default: 5, // TODO item not in string format
+          default: 5,
         },
         footerAnimation: {
           type: 'PlaceholderAnimation',
@@ -192,7 +192,7 @@ export default {
         },
         footerCellWidth: {
           type: 'Numberish',
-          default: 100, // TODO item not in string format
+          default: 100,
         },
         footerColumns: {
           type: 'Numberish',
@@ -212,7 +212,7 @@ export default {
         },
         headerCellWidth: {
           type: 'Numberish',
-          default: 100, // TODO item not in string format
+          default: 100,
         },
         headerColumns: {
           type: 'Numberish',
@@ -228,15 +228,15 @@ export default {
         },
         noHeader: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         rows: {
           type: 'Numberish',
-          default: 3, // TODO item not in string format
+          default: 3,
         },
         showFooter: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         size: {
           type: 'PlaceholderSize',
diff --git a/apps/docs/src/docs/components/placeholder.md b/apps/docs/src/docs/components/placeholder.md
index f8429a543..5225b2c63 100644
--- a/apps/docs/src/docs/components/placeholder.md
+++ b/apps/docs/src/docs/components/placeholder.md
@@ -2,7 +2,8 @@
 
 <PageHeader>
 
-Placeholders are components that indicate that something may still be loading.
+Placeholders are components that allows you to display a loading state for
+several component types while your data is being fetched or computed.
 
 </PageHeader>
 
@@ -22,7 +23,9 @@ You can adjust the width using props `width` and `cols`. Cols is a number value
 
 Bootstrap supports two types of animations, `wave` and `glow`.
 
-- Note: when using `BPlaceholderCard`, the image does not inherit an animation
+::: info NOTE
+When using `BPlaceholderCard`, the image does not inherit an animation
+:::
 
 <<< DEMO ./demo/PlaceholderAnimation.vue#template{vue-html}
 
@@ -84,6 +87,12 @@ Optionally, you can manually adjust any scope of the table using slots. The foll
 
 <<< DEMO ./demo/PlaceholderTableAdvanced.vue#template{vue-html}
 
+## Styling and customization
+
+The `<BPlaceholder>` component and helper components utilize Bootstrap SCSS variables, as much as
+possible to best match the styling and sizing of the native components. This means if you've
+customized Bootstrap SCSS, the skeleton components should adapt to fit your custom theming.
+
 <ComponentReference :data="data" />
 
 <script setup lang="ts">
diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md
index fe58b2e79..7d01da531 100644
--- a/apps/docs/src/docs/migration-guide.md
+++ b/apps/docs/src/docs/migration-guide.md
@@ -915,6 +915,14 @@ See the [v-html](#v-html) section for information on deprecation of the `label-h
 [icon documentation](/docs/icons) for details. This functionality can be replicated by using
 `<BPlaceholderWrapper>` with your choice of icon replacement in the `loading` slot.
 
+`<BSkeletonImg>` is deprecated, using `<BPlaceholderWrapper>` should be a workable replacement.
+
+`animation` values have changed from `Wave`, `Fade`, `Throb` and `None` to `wave`, `glow`,
+and `undefined` to reflect the [Bootstrap 5 animations](https://getbootstrap.com/docs/5.3/components/placeholders/#animation)
+
+`type` has been deprecated. [`BPlaceholderButton`](/docs/components/placeholder#placeholder-buttons) is a replacement for the button type.
+If you find a need for the other types (Avatar or Input), please open an issue or propose a pull request.
+
 ### BTable
 
 <NotYetDocumented type="component"/>

From d1eaa4bb305f2ab138e7a20e9f8f9d31393effe8 Mon Sep 17 00:00:00 2001
From: Linus Metzler <hi@linusmetzler.me>
Date: Fri, 24 Oct 2025 21:59:09 +0200
Subject: [PATCH 03/13] docs(BModal): fix attribute to hide footer (#2888)

---
 apps/docs/src/docs/components/demo/ModalExposed.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/src/docs/components/demo/ModalExposed.vue b/apps/docs/src/docs/components/demo/ModalExposed.vue
index 1eec2bc14..6fc4cd1f3 100644
--- a/apps/docs/src/docs/components/demo/ModalExposed.vue
+++ b/apps/docs/src/docs/components/demo/ModalExposed.vue
@@ -14,7 +14,7 @@
     </div>
     <BModal
       ref="my-modal"
-      hide-footer
+      no-footer
       title="Using Component Methods"
     >
       <div class="d-block text-center">

From 9eae49b6351e0f6511565724bcf9ac0f854abe57 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Sat, 25 Oct 2025 19:33:38 -0700
Subject: [PATCH 04/13] docs(BToast): Parity (#2887)

---
 apps/docs/src/data/components/alert.data.ts   |  84 ++-------
 .../docs/src/data/components/collapse.data.ts |   8 -
 .../src/data/components/offcanvas.data.ts     |   8 -
 apps/docs/src/data/components/toast.data.ts   | 167 ++++++++++--------
 .../docs/components/demo/ToastOverview.vue    |  39 +++-
 .../docs/components/demo/ToastPositioning.vue |   5 +-
 apps/docs/src/docs/components/toast.md        |  74 +++++++-
 .../docs/demo/ModalSlotScopeBootstrapVue.ts   |  13 ++
 .../demo/ModalSlotScopeBootstrapVueNext.ts    |  20 +++
 apps/docs/src/docs/demo/ToastBootstrapVue.vue |   9 +
 .../src/docs/demo/ToastBootstrapVueNext.vue   |  18 ++
 apps/docs/src/docs/migration-guide.md         | 128 +++++++++++---
 apps/docs/src/utils/commonProps.ts            |  41 +++++
 apps/docs/src/utils/dropdownCommon.ts         |   8 -
 apps/docs/src/utils/popover-shared.ts         |   8 -
 apps/docs/src/utils/showHideData.ts           |  56 +++++-
 16 files changed, 473 insertions(+), 213 deletions(-)
 create mode 100644 apps/docs/src/docs/demo/ModalSlotScopeBootstrapVue.ts
 create mode 100644 apps/docs/src/docs/demo/ModalSlotScopeBootstrapVueNext.ts
 create mode 100644 apps/docs/src/docs/demo/ToastBootstrapVue.vue
 create mode 100644 apps/docs/src/docs/demo/ToastBootstrapVueNext.vue

diff --git a/apps/docs/src/data/components/alert.data.ts b/apps/docs/src/data/components/alert.data.ts
index af4c57d96..bd23c5b79 100644
--- a/apps/docs/src/data/components/alert.data.ts
+++ b/apps/docs/src/data/components/alert.data.ts
@@ -7,7 +7,7 @@ import {
   type SlotRecord,
 } from '../../types'
 import {linkedBLinkSection, type linkProps} from '../../utils/linkProps'
-import {showHideEmits, showHideProps} from '../../utils/showHideData'
+import {buildDismissibleEmits, showHideProps} from '../../utils/showHideData'
 import {buildCommonProps} from '../../utils/commonProps'
 import {omit, pick} from '../../utils/objectUtils'
 
@@ -19,85 +19,42 @@ export default {
         [defaultPropSectionSymbol]: {
           ...omit(showHideProps, ['modelValue']),
           ...pick(buildCommonProps(), [
+            'bgVariant',
             'body',
             'bodyClass',
+            'closeClass',
+            'closeContent',
+            'closeLabel',
+            'closeVariant',
             'headerClass',
             'headerTag',
             'id',
-            'title',
-            'variant',
+            'interval',
+            'isStatus',
             'noHoverPause',
             'noResumeOnHoverLeave',
+            'progressProps',
+            'showOnPause',
+            'textVariant',
+            'title',
+            'variant',
           ]),
           alertClass: {
             type: 'ClassValue',
             default: undefined,
             description: 'CSS class (or classes) to add to the alert wrapper element',
           },
-          bgVariant: {
-            type: 'ColorVariant | null',
-            default: null,
-            // description: 'Background color variant for the alert' // TODO missing description
-          }, // TODO prop inconsistency ColorVariant | null (matches ColorExtendables, not directly in BAlertProps, but valid via inheritance)
-          closeClass: {
-            type: 'ClassValue',
-            default: undefined,
-            description: 'Applies one or more custom classes to the close button',
-          },
-          closeContent: {
-            type: 'string',
-            default: undefined,
-            description: 'Sets the text of the close button. The `close` slot takes precedence',
-          },
-          closeLabel: {
-            type: 'string',
-            default: 'Close',
-            description: 'Sets the aria-label attribute on the close button',
-          },
-          closeVariant: {
-            type: 'string | null',
-            default: null,
-            description: 'Color variant for the close button', // TODO prop inconsistency string | null (BAlertProps expects ButtonVariant | null)
-          },
           dismissible: {
             type: 'boolean',
             default: false,
             description: 'When set, enables the close button',
           },
-          interval: {
-            type: 'number | requestAnimationFrame',
-            default: 'requestAnimationFrame',
-            description: 'The interval in milliseconds to update the countdown timer',
-          },
-          isStatus: {
-            type: 'boolean',
-            default: false,
-            description:
-              "When set to 'true', makes the alert have attributes aria-live=polite and role=status. When 'false' aria-live will be 'assertive' and role will be 'alert'",
-          },
           modelValue: {
             type: 'boolean | number',
             default: false,
             description:
               'Controls the visibility of the alert. A `boolean` value directly controls the visibility. A number starts the countdown timer',
           },
-          progressProps: {
-            type: "Omit<BProgressBarProps, 'label' | 'max' | 'value'>",
-            default: undefined,
-            description:
-              'The properties to define the progress bar in the alert. No progress will be shown if left undefined',
-          },
-          showOnPause: {
-            type: 'boolean',
-            default: true,
-            description:
-              'Setting this property to `false` will override the behavior of showing the Alert when the timer is paused',
-          },
-          textVariant: {
-            type: 'TextColorVariant | null',
-            default: null,
-            // description: 'Text color variant for the alert' // TODO missing description
-          }, // TODO prop inconsistency TextColorVariant | null (matches ColorExtendables, not directly in BAlertProps, but valid via inheritance)
         } satisfies PropRecord<Exclude<keyof BAlertProps, keyof typeof linkProps>>,
         'BLink props': linkedBLinkSection,
       },
@@ -114,10 +71,7 @@ export default {
         },
       } satisfies SlotRecord<keyof BAlertSlots>,
       emits: {
-        ...showHideEmits,
-        'close': {
-          description: 'Emitted when the alert begins its transition to close',
-        },
+        ...buildDismissibleEmits(),
         'close-countdown': {
           description: 'Emitted during the countdown with the time remaining',
           args: {
@@ -128,7 +82,7 @@ export default {
           },
         },
         'update:model-value': {
-          description: 'Standard event to update the v-model', // TODO similar content to BAccordion/update:model-value (similar description phrasing)
+          description: 'Standard event to update the v-model',
           args: {
             'update:model-value': {
               description: 'modelValue',
@@ -136,14 +90,6 @@ export default {
             },
           },
         },
-        'cancel': {
-          args: undefined,
-          description: undefined,
-        },
-        'ok': {
-          args: undefined,
-          description: undefined,
-        },
       } satisfies EmitRecord<keyof BAlertEmits | 'update:model-value'>,
     },
   }),
diff --git a/apps/docs/src/data/components/collapse.data.ts b/apps/docs/src/data/components/collapse.data.ts
index 717e6d610..76eb4364f 100644
--- a/apps/docs/src/data/components/collapse.data.ts
+++ b/apps/docs/src/data/components/collapse.data.ts
@@ -72,14 +72,6 @@ export default {
             },
           },
         },
-        'cancel': {
-          args: undefined,
-          description: undefined,
-        },
-        'ok': {
-          args: undefined,
-          description: undefined,
-        },
       } satisfies EmitRecord<keyof BCollapseEmits | 'update:model-value'>,
       slots: {
         default: {
diff --git a/apps/docs/src/data/components/offcanvas.data.ts b/apps/docs/src/data/components/offcanvas.data.ts
index 7226aa5b4..2ed9a2975 100644
--- a/apps/docs/src/data/components/offcanvas.data.ts
+++ b/apps/docs/src/data/components/offcanvas.data.ts
@@ -166,14 +166,6 @@ export default {
           args: undefined,
           description: undefined,
         },
-        'cancel': {
-          args: undefined,
-          description: undefined,
-        },
-        'ok': {
-          args: undefined,
-          description: undefined,
-        },
       } satisfies EmitRecord<keyof BOffcanvasEmits | 'update:model-value'>,
       slots: {
         'title': {
diff --git a/apps/docs/src/data/components/toast.data.ts b/apps/docs/src/data/components/toast.data.ts
index 7be646cc8..a6da442ea 100644
--- a/apps/docs/src/data/components/toast.data.ts
+++ b/apps/docs/src/data/components/toast.data.ts
@@ -8,7 +8,7 @@ import {
 import {omit, pick} from '../../utils/objectUtils'
 import {buildCommonProps} from '../../utils/commonProps'
 import {linkedBLinkSection, type linkProps} from '../../utils/linkProps'
-import {showHideEmits, showHideProps} from '../../utils/showHideData'
+import {buildDismissibleEmits, showHideProps} from '../../utils/showHideData'
 
 export default {
   load: (): ComponentReference => ({
@@ -21,48 +21,24 @@ export default {
             'bgVariant',
             'body',
             'bodyClass',
+            'closeClass',
+            'closeContent',
+            'closeLabel',
+            'closeVariant',
             'headerClass',
             'headerTag',
             'id',
+            'interval',
+            'isStatus',
             'noHoverPause',
             'noResumeOnHoverLeave',
+            'progressProps',
+            'showOnPause',
             'textVariant',
             'title',
             'variant',
           ]),
 
-          closeClass: {
-            type: 'ClassValue',
-            default: undefined,
-            description: 'Sets the CSS class(es) for the close button.',
-          },
-          closeContent: {
-            type: 'string',
-            default: undefined,
-            description: 'Sets the text for the close button. The `close` slot takes precedence.',
-          },
-          closeLabel: {
-            type: 'string',
-            default: 'Close',
-            description: 'Sets the `aria-label` attribute for the close button.',
-          },
-          closeVariant: {
-            type: 'string | null',
-            default: null,
-            description: 'Sets the color variant for the close button.',
-          },
-
-          interval: {
-            type: 'number | requestAnimationFrame',
-            default: 'requestAnimationFrame',
-            description: 'Sets the interval for refreshing the countdown timer.',
-          },
-          isStatus: {
-            type: 'boolean',
-            default: false,
-            description:
-              'Sets `aria-live="polite"` and `role="status"` when `true`; otherwise, `aria-live="assertive"` and `role="alert"`.',
-          },
           modelValue: {
             type: 'boolean | number',
             default: false,
@@ -79,23 +55,11 @@ export default {
             default: false,
             description: 'Hides the progress bar in the toast.',
           },
-          progressProps: {
-            type: "Omit<BProgressBarProps, 'label' | 'max' | 'value'>",
-            default: undefined,
-            description:
-              'Configures the progress bar in the toast. No progress bar is shown if undefined.',
-          },
-          showOnPause: {
-            type: 'boolean',
-            default: true,
-            description: 'Keeps the toast visible when paused.',
-          },
           solid: {
             type: 'boolean',
             default: false,
             description: 'Renders the toast with a solid background instead of a translucent one.',
           },
-
           toastClass: {
             type: 'ClassValue',
             default: undefined,
@@ -105,44 +69,107 @@ export default {
         'BLink props': linkedBLinkSection,
       },
       emits: {
-        ...showHideEmits,
+        ...buildDismissibleEmits(),
         'update:model-value': {
-          description: 'Emitted when the toast visibility changes.', // TODO similar content to BAlert/update:model-value (similar purpose)
+          description: 'Emitted when the toast visibility or countdown duration changes.',
           args: {
             value: {
-              type: 'Boolean',
-              description: 'The new visibility state of the toast.',
+              type: 'boolean | number',
+              description:
+                'The new visibility state (boolean) or countdown duration in milliseconds (number). When boolean: true = visible, false = hidden. When number: > 0 = countdown duration, 0 = countdown finished.',
             },
           },
         },
-        'close': {
-          description: 'Emitted when the close button is clicked.', // TODO missing description in original
-          args: {
-            value: {
-              type: 'BvTriggerableEvent',
-              description: '', // TODO missing description
+      } satisfies EmitRecord<keyof BToastEmits | 'update:model-value'>,
+      slots: {
+        default: {
+          description: 'Content to place in the toast body',
+          scope: {
+            id: {
+              type: 'string',
+              description: 'The toast component ID',
+            },
+            show: {
+              type: '() => void',
+              description: 'Function to show the toast',
+            },
+            hide: {
+              type: '(trigger?: string, noTriggerEmit?: boolean) => void',
+              description: 'Function to hide the toast',
+            },
+            toggle: {
+              type: '() => void',
+              description: 'Function to toggle toast visibility',
+            },
+            active: {
+              type: 'boolean',
+              description: 'Whether the countdown timer is active',
+            },
+            visible: {
+              type: 'boolean',
+              description: 'Current visibility state of the toast',
             },
           },
         },
-        'close-countdown': {
-          description: 'Emitted during the countdown to auto-dismiss.', // TODO missing description in original
-          args: {
-            value: {
-              type: 'number',
-              description: '', // TODO missing description
+        title: {
+          description: 'Content to place in the toast header as title',
+          scope: {
+            id: {
+              type: 'string',
+              description: 'The toast component ID',
+            },
+            show: {
+              type: '() => void',
+              description: 'Function to show the toast',
+            },
+            hide: {
+              type: '(trigger?: string, noTriggerEmit?: boolean) => void',
+              description: 'Function to hide the toast',
+            },
+            toggle: {
+              type: '() => void',
+              description: 'Function to toggle toast visibility',
+            },
+            active: {
+              type: 'boolean',
+              description: 'Whether the countdown timer is active',
+            },
+            visible: {
+              type: 'boolean',
+              description: 'Current visibility state of the toast',
             },
           },
         },
-        'cancel': {
-          args: undefined,
-          description: undefined,
-        },
-        'ok': {
-          args: undefined,
-          description: undefined,
+        close: {
+          description: 'Content to place in the close button',
+          scope: {
+            id: {
+              type: 'string',
+              description: 'The toast component ID',
+            },
+            show: {
+              type: '() => void',
+              description: 'Function to show the toast',
+            },
+            hide: {
+              type: '(trigger?: string, noTriggerEmit?: boolean) => void',
+              description: 'Function to hide the toast',
+            },
+            toggle: {
+              type: '() => void',
+              description: 'Function to toggle toast visibility',
+            },
+            active: {
+              type: 'boolean',
+              description: 'Whether the countdown timer is active',
+            },
+            visible: {
+              type: 'boolean',
+              description: 'Current visibility state of the toast',
+            },
+          },
         },
-      } satisfies EmitRecord<keyof BToastEmits | 'update:model-value'>,
-      slots: {},
+      },
     },
   }),
 }
diff --git a/apps/docs/src/docs/components/demo/ToastOverview.vue b/apps/docs/src/docs/components/demo/ToastOverview.vue
index a41a3fc3c..054a4a7b7 100644
--- a/apps/docs/src/docs/components/demo/ToastOverview.vue
+++ b/apps/docs/src/docs/components/demo/ToastOverview.vue
@@ -1,15 +1,40 @@
 <template>
-  <BToast
-    v-model="active"
-    variant="info"
+  <div
+    class="p-3"
+    style="
+      min-height: 170px;
+      background: repeating-linear-gradient(
+        45deg,
+        #f8f9fa 0px,
+        #f8f9fa 10px,
+        #e9ecef 10px,
+        #e9ecef 20px
+      );
+    "
   >
-    <template #title> Title </template>
-    Body
-  </BToast>
+    <BButton
+      class="mb-2"
+      @click="showToast"
+    >
+      Show Toast
+    </BButton>
+    <BToast
+      v-model="show"
+      variant="info"
+      solid
+    >
+      <template #title> Example toast </template>
+      This is a toast with a title.
+    </BToast>
+  </div>
 </template>
 
 <script setup lang="ts">
 import {ref} from 'vue'
 
-const active = ref(true)
+const show = ref(false)
+
+const showToast = () => {
+  show.value = true
+}
 </script>
diff --git a/apps/docs/src/docs/components/demo/ToastPositioning.vue b/apps/docs/src/docs/components/demo/ToastPositioning.vue
index 6b2481e2f..32e561ae0 100644
--- a/apps/docs/src/docs/components/demo/ToastPositioning.vue
+++ b/apps/docs/src/docs/components/demo/ToastPositioning.vue
@@ -3,7 +3,10 @@
     v-for="(pos, index) in values"
     :key="index"
   >
-    <BButton @click="values[index] = !values[index]">
+    <BButton
+      class="m-2"
+      @click="values[index] = !values[index]"
+    >
       {{ locations[index] }}
     </BButton>
     <Teleport to="body">
diff --git a/apps/docs/src/docs/components/toast.md b/apps/docs/src/docs/components/toast.md
index 728b61564..f77d6149b 100644
--- a/apps/docs/src/docs/components/toast.md
+++ b/apps/docs/src/docs/components/toast.md
@@ -6,17 +6,33 @@ Push notifications to your visitors with `BToast`, `useToast` and `BOrchestrator
 
 </PageHeader>
 
-Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. Toasts are intended to be small interruptions to your visitors or users and therefore should contain minimal, to-the-point, non-interactive content. Please refer to the Accessibility Tips section below for important usage information
+Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
+
+Toasts are intended to be small interruptions to your visitors or users and therefore should contain minimal, to-the-point, non-interactive content. Please refer to the Accessibility Tips section below for important usage information
 
 ## Overview
 
-This section only refers to using the raw component variation. Oftentimes, `Toasts` are generated in a global context programmatically, like showing a success message after saving a form. That functionality is covered under the composable docs [here](/docs/composables/useToast)
+This section only refers to using the raw component variation. `Toasts` are often generated in a global context programmatically, like showing a success message after saving a form. That functionality is covered under the [composable docs](/docs/composables/useToast)
 
 The component variation is shown by using the `v-model` like so
 
 <<< DEMO ./demo/ToastOverview.vue
 
-By default Toasts are rendered in place. You can use Vue's `Teleport` to change the location, commonly to `body`
+By default Toasts are rendered in place. You can use Vue's `Teleport` to change the location, commonly to `body` or, more
+commonly, create toasts using the [useToast](/docs/composables/useToast) composable.
+
+### Toast features and notes
+
+- Toasts can be generated programmatically via the `useToast` composable, or manually created using the `<BToast>` component.
+- Titles are optional but recommended for accessibility. Titles are rendered inside a `<strong>` element unless using the `title` slot.
+- The close button can be hidden via the `no-close-button` prop.
+- A title bar is shown when a title is provided, unless both title and close button are hidden.
+- Auto-dismissing is controlled by setting `model-value` to a number of milliseconds. No default auto-hide duration.
+- When auto-hide is enabled, hovering over the toast pauses the countdown. This can be disabled with the `no-hover-pause` prop.
+- Toast transparency can be disabled by setting the `solid` prop to `true`.
+- Toasts use Vue's `Teleport` component for positioning. By default, toasts created with `useToast` are teleported to the body.
+- Toasts include built-in progress bar support via the `progress-props` prop when using timed dismissal.
+- Toasts support `BLink` integration for interactive toast bodies.
 
 ## Positioning
 
@@ -32,15 +48,24 @@ You can place toasts in static placements, and with more control by using them d
 
 ## Auto-dismissing Toasts
 
-To create a `BToast` that dismisses automatically after a specified duration, set the `modelValue` prop to the number of **milliseconds** you want the `BToast` to remain visible. By default, the timer updates on every browser frame via `requestAnimationFrame` (roughly every 16 ms). To throttle updates for example to once per second—set the `interval` prop to `1000` (or any millisecond value). Timed Toasts automatically pause when hovered over with a mouse, but you can disable this behavior using the `noHoverPause` prop. Ensure that the `modelValue` is an integer representing milliseconds. Any change to the `modelValue` will reset the timer.
+To create a `BToast` that dismisses automatically after a specified duration, set the `model-value` prop to the number of **milliseconds** you want the `BToast` to remain visible. By default, the timer updates on every browser frame via `requestAnimationFrame` (roughly every 16 ms). To throttle updates for example to once per second—set the `interval` prop to `1000` (or any millisecond value). Timed Toasts automatically pause when hovered over with a mouse, but you can disable this behavior using the `no-hover-pause` prop. Ensure that the `model-value` is an integer representing milliseconds. Any change to the `model-value` will reset the timer.
 
-The **interval** prop determines how frequently the timer updates. While the default is `requestAnimationFrame`, you can set a custom interval. Negative values for either `modelValue` or `interval` will stop the timer. If the `modelValue` does not divide evenly by the interval, the timer will continue to the nearest interval. For example, a `modelValue` of 5400 ms with an interval of 1000 ms will run for 6000 ms. To avoid this, choose an interval that divides evenly into the `modelValue`, such as 540 ms or 1080 ms.
+The **interval** prop determines how frequently the timer updates. While the default is `requestAnimationFrame`, you can set a custom interval. Negative values for either `model-value` or `interval` will stop the timer. If the `model-value` does not divide evenly by the interval, the timer will continue to the nearest interval. For example, a `model-value` of 5400 ms with an interval of 1000 ms will run for 6000 ms. To avoid this, choose an interval that divides evenly into the `model-value`, such as 540 ms or 1080 ms.
 
 <<< DEMO ./demo/ToastAutoDismiss.vue
 
+### Toast roles
+
+Toasts are rendered with a default `role` attribute of `'alert'` and `aria-live` attribute of
+`'assertive'`. For toasts that are meant for a casual notification, set the `is-status` prop to
+`true`, which will change the `role` and `aria-live` attributes to `'status'` and `'polite'`
+respectively.
+
+For more information, please see the [Accessibility](#accessibility) section below.
+
 ### ProgressBar Integration
 
-As you may have noticed in that example, there was a built-in progress bar. This is triggered when using a value that is a `number` and when `progressProps` is not `undefined`. This was implemented because it can be difficult to modify the behavior of `BToast` when using a pure method, and the appearance of a ticking down progress bar is a "nice to have". Although it is not out of the box behavior by Bootstrap, its behavior is opt-in. This functions similarly to examples in `BAlert`
+As you may have noticed in that example, there was a built-in progress bar. This is triggered when using a value that is a `number` and when `progress-props` is not `undefined`. This was implemented because it can be difficult to modify the behavior of `BToast` when using a pure method, and the appearance of a ticking down progress bar is a "nice-to-have". Although it is not out of the box behavior by Bootstrap, its behavior is opt-in. This functions similarly to examples in `BAlert`
 
 ## BLink Integration
 
@@ -58,6 +83,43 @@ Toasts are intended to be **small interruptions** to your visitors or users, so
 
 If you just need a single simple message to appear along the bottom or top of the user's window, use a fixed position `BAlert` instead.
 
+### Accessibility tips
+
+Typically, toast messages should display one or two-line non-critical messages that **do not**
+require user interaction. Without taking extra steps, toasts can have numerous accessibility issues
+that can impact both people with and without disabilities. The following list, while not complete,
+provides general guidelines when using toasts.
+
+- If the information needed is important for the process, e.g. for a list of errors in a form, then
+  use the [`<BAlert>`](/docs/components/alert) component instead of `<BToast>`.
+- `<BToast>`, by default, sets the attributes `role` to `'alert'` and `aria-live` to `'assertive'`.
+  If it's an important message like an error, this default setting is appropriate, otherwise set the
+  prop `is-status` to `true` which will change the attributes `role` to `'status'` and `aria-live`
+  to `'polite'`.
+- Avoid popping up a toast message on page load. Performing unexpected actions on page load is very
+  confusing to screen reader users. If a toast is needed on page load or route change, delay showing
+  the toast by several seconds so that the screen reader will finish announcing information about
+  the current page without interruption by the toast.
+- When the toast is persistently visible (i.e., when `model-value` is set to `true` and the toast does not auto-dismiss), you must have a close button to allow users to dismiss
+  the toast. If you have also set the prop `no-close-button` to `true`, you must provide your own close
+  button or dismiss the toast by some other means. Toasts have a tab index of `0` so that they can
+  be reached by keyboard-only users. If `model-value` is set to `false`, the toast is not visible and no close button is required.
+- Avoid initiating many toasts in quick succession, as screen readers may interrupt reading the
+  current toast and announce the new toast, causing the context of the previous toast to be missed.
+- For toasts with long textual content, set `model-value` to a larger timeout value, to allow
+  users time to read the content of the toast. The average person reads about 200 words per minute,
+  so a good length of time to keep messages up is 5 seconds, plus 300 extra milliseconds per word.
+  The shortest default that should be used as a best practice is 5 seconds (5000ms). In addition to
+  a reasonable default timeout, you could also allow the user to choose how long they want toasts to
+  stay up for. Most people inherently understand whether they are fast or slow readers. Having a
+  profile setting that is part of the user login will allow slow readers to pick a longer time if
+  the messages are going away too fast, and fast readers to pick a short time if the messages are
+  staying up too long.
+- To account for memory loss and distraction as well as disability-related issues such as ADHD, a
+  best practice would be to implement a location where users can refer to a list of past toast
+  messages which have been shown. Preferably this list should be sortable, with the default being
+  chronological.
+
 <ComponentReference :data="data" />
 
 <script setup lang="ts">
diff --git a/apps/docs/src/docs/demo/ModalSlotScopeBootstrapVue.ts b/apps/docs/src/docs/demo/ModalSlotScopeBootstrapVue.ts
new file mode 100644
index 000000000..d91392098
--- /dev/null
+++ b/apps/docs/src/docs/demo/ModalSlotScopeBootstrapVue.ts
@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// BootstrapVue slot scope interface for comparison
+{
+  // #region snippet
+  const bootstrapVueSlotScope = {
+    ok: () => void 0, // Closes modal with trigger 'ok'
+    cancel: () => void 0, // Closes modal with trigger 'cancel'
+    close: () => void 0, // Closes modal with trigger 'headerclose'
+    hide: (trigger?: string) => void 0, // Closes modal with custom trigger
+    visible: true, // Boolean visibility state
+  }
+  // #endregion snippet
+}
diff --git a/apps/docs/src/docs/demo/ModalSlotScopeBootstrapVueNext.ts b/apps/docs/src/docs/demo/ModalSlotScopeBootstrapVueNext.ts
new file mode 100644
index 000000000..bd9e75677
--- /dev/null
+++ b/apps/docs/src/docs/demo/ModalSlotScopeBootstrapVueNext.ts
@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// BootstrapVueNext slot scope interfaces
+{
+  // #region snippet
+  interface BModalSlotsData extends ShowHideSlotsData {
+    cancel: () => void // Closes modal with trigger 'cancel'
+    close: () => void // Closes modal with trigger 'close' (note: 'close' not 'headerclose')
+    ok: () => void // Closes modal with trigger 'ok'
+  }
+
+  interface ShowHideSlotsData {
+    id: string // Modal ID string
+    show: () => void // Show the modal
+    hide: (trigger?: string, noTriggerEmit?: boolean) => void // Enhanced hide method
+    toggle: () => void // Toggle modal visibility
+    active: boolean // Boolean - true when modal is active/visible
+    visible: boolean // Boolean - same as active, for compatibility
+  }
+  // #endregion snippet
+}
diff --git a/apps/docs/src/docs/demo/ToastBootstrapVue.vue b/apps/docs/src/docs/demo/ToastBootstrapVue.vue
new file mode 100644
index 000000000..723e28ea3
--- /dev/null
+++ b/apps/docs/src/docs/demo/ToastBootstrapVue.vue
@@ -0,0 +1,9 @@
+<template>
+  <!-- #region snippet -->
+  <BToast
+    auto-hide
+    auto-hide-delay="5000"
+    no-hover-pause
+  />
+  <!-- #endregion snippet -->
+</template>
diff --git a/apps/docs/src/docs/demo/ToastBootstrapVueNext.vue b/apps/docs/src/docs/demo/ToastBootstrapVueNext.vue
new file mode 100644
index 000000000..65657d72c
--- /dev/null
+++ b/apps/docs/src/docs/demo/ToastBootstrapVueNext.vue
@@ -0,0 +1,18 @@
+<template>
+  <!-- #region snippet -->
+  <!-- Boolean for show/hide -->
+  <BToast v-model="show" />
+
+  <!-- Number for auto-dismiss duration in milliseconds -->
+  <BToast
+    :model-value="5000"
+    no-hover-pause
+  />
+  <!-- #endregion snippet -->
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const show = ref(false)
+</script>
diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md
index 7d01da531..5a8d5bc49 100644
--- a/apps/docs/src/docs/migration-guide.md
+++ b/apps/docs/src/docs/migration-guide.md
@@ -730,34 +730,11 @@ The scoped variables available to modal slots have changed between BootstrapVue
 
 **BootstrapVue slot scope:**
 
-```typescript
-{
-  ok: () => void,       // Closes modal with trigger 'ok'
-  cancel: () => void,   // Closes modal with trigger 'cancel'
-  close: () => void,    // Closes modal with trigger 'headerclose'
-  hide: (trigger?: string) => void, // Closes modal with custom trigger
-  visible: boolean      // Boolean visibility state
-}
-```
+<<< FRAGMENT ./demo/ModalSlotScopeBootstrapVue.ts#snippet{typescript}
 
 **BootstrapVueNext slot scope (BModalSlotsData):**
 
-```typescript
-interface BModalSlotsData extends ShowHideSlotsData {
-  cancel: () => void // Closes modal with trigger 'cancel'
-  close: () => void // Closes modal with trigger 'close' (note: 'close' not 'headerclose')
-  ok: () => void // Closes modal with trigger 'ok'
-}
-
-interface ShowHideSlotsData {
-  id: string // Modal ID string
-  show: () => void // Show the modal
-  hide: (trigger?: string, noTriggerEmit?: boolean) => void // Enhanced hide method
-  toggle: () => void // Toggle modal visibility
-  active: boolean // Boolean - true when modal is active/visible
-  visible: boolean // Boolean - same as active, for compatibility
-}
-```
+<<< FRAGMENT ./demo/ModalSlotScopeBootstrapVueNext.ts#snippet{typescript}
 
 **Key changes:**
 
@@ -1036,10 +1013,109 @@ The `changed` event on `BTabs` is deprecated.
 
 ### BToast
 
-<NotYetDocumented type="component"/>
+#### Global Toast Management System Changes
+
+**`$bvToast` instance methods are deprecated:**
+
+- `this.$bvToast.show(options)` → Use `useToast` composable with `create()` method
+- `this.$bvToast.hide(target)` → Use `useToast` composable or template refs with `.hide()`
+- `this.$bvToast.hideAll()` → Use `useToast` composable
+
+**Named toaster system is deprecated:**
+
+- `<b-toaster>` targets → Use Vue's `Teleport` component or `useToast` positioning
+- Toaster positioning CSS → Use CSS positioning on individual toasts or toast containers
+
+**Alternative approaches:**
+
+Please see [useToast](/docs/composables/useToast) for the modern method of programmatically creating and managing toasts.
+
+#### Props Changes
+
+**Renamed props:**
+
+- `visible` → `model-value` - Controls both visibility and auto-dismiss timing (replaces separate `visible` model)
+- `no-auto-hide` → Set `model-value` to `false` or `true` (boolean) instead of using auto-hide duration
+- `auto-hide-delay` → Set `model-value` to number of milliseconds for auto-dismiss duration
+
+**Removed props (not implemented in BootstrapVueNext):**
+
+- `href` and `to` - Use `useToast` with BLink props or see [BLink Integration](/docs/components/toast#blink-integration) in the toast documentation
+- `toaster` - Use `Teleport` or `useToast` positioning instead
+- `append-toast` - Available on `BOrchestrator` and `useToast` instead
+- `b-toaster-*` related props - Use modern positioning with `Teleport`
+- `static` - BToast renders in place by default (no teleporting behavior)
+
+**New props in BootstrapVueNext:**
+
+- `progress-props` - Configure built-in progress bar for timed toasts
+- `no-progress` - Hide progress bar on timed toasts
+- `show-on-pause` - Control visibility when countdown is paused
+- `interval` - Control countdown timer update frequency (default: `'requestAnimationFrame'`)
+- `solid` - Disable toast transparency (same as BootstrapVue)
+
+#### Auto-dismiss Behavior Changes
+
+**BootstrapVue:** Used separate props for auto-hide configuration:
+
+<<< FRAGMENT ./demo/ToastBootstrapVue.vue#snippet{vue-html}
+
+**BootstrapVueNext:** Uses `model-value` for both visibility and auto-dismiss:
+
+<<< FRAGMENT ./demo/ToastBootstrapVueNext.vue#snippet{vue-html}
+
+#### Event System Changes
+
+**Event naming changes:**
+
+- No `$root` event system - toasts are managed through composables or direct component references
+- All events now use the standardized show/hide event lifecycle
+
+**New events:** BootstrapVueNext adds several events:
+
+- `close-countdown` - Emitted during countdown with remaining milliseconds
+- `update:model-value` - Standard v-model event for visibility/duration changes
+- Standard show/hide lifecycle events: `show`, `shown`, `hide`, `hidden`, `show-prevented`, `hide-prevented`, `toggle`, `toggle-prevented`
+
+#### Slots Changes
+
+**Renamed slots:**
+
+- `toast-title` → `title` - Toast header title content
+
+**Available slots:**
+
+- `default` - Toast body content (enhanced with slot scope data)
+- `title` - Toast header title content (was `toast-title` in BootstrapVue)
+- `close` - Custom close button content (new in BootstrapVueNext)
+
+**Enhanced slot scope:** All slots now receive scope data with control functions:
+
+- `id` - Toast component ID
+- `show()` - Function to show the toast
+- `hide()` - Function to hide the toast
+- `toggle()` - Function to toggle visibility
+- `visible` - Current visibility state
+- `active` - Whether countdown timer is active
+
+#### Accessibility Improvements
+
+**Enhanced ARIA support:**
+
+- `isStatus` prop correctly toggles between `role="alert"` (default) and `role="status"`
+- Corresponding `aria-live` values: `"assertive"` (default) and `"polite"`
+- `aria-atomic="true"` automatically applied for better screen reader announcements
+- `tabindex="0"` for keyboard accessibility
 
 See [Show and Hide](#show-and-hide) shared properties.
 
+### BToaster
+
+The `BToaster` component has been deprecated. Its functionality has been replaced by the
+[`useToast`](/docs/composables/useToast) composable working in concert with the
+[`BOrchestrator`](/docs/components/orchestrator) component. See the documentation for
+details.
+
 ### BTooltip
 
 See [Show and Hide](#show-and-hide) shared properties.
diff --git a/apps/docs/src/utils/commonProps.ts b/apps/docs/src/utils/commonProps.ts
index 338f7170b..058cc38b1 100644
--- a/apps/docs/src/utils/commonProps.ts
+++ b/apps/docs/src/utils/commonProps.ts
@@ -458,11 +458,52 @@ const commonProps = () =>
       default: undefined,
       description: 'CSS class (or classes) to add to the wrapper element',
     },
+    closeClass: {
+      type: 'ClassValue',
+      default: undefined,
+      description: 'CSS class (or classes) to apply to the close button',
+    },
+    closeContent: {
+      type: 'string',
+      default: undefined,
+      description: 'Sets the text for the close button. The `close` slot takes precedence',
+    },
+    closeLabel: {
+      type: 'string',
+      default: 'Close',
+      description: 'Sets the `aria-label` attribute for the close button',
+    },
+    closeVariant: {
+      type: 'ButtonVariant | null',
+      default: null,
+      description: 'Sets the color variant for the close button',
+    },
+    interval: {
+      type: 'number | "requestAnimationFrame"',
+      default: 'requestAnimationFrame',
+      description: 'Sets the interval for refreshing the countdown timer',
+    },
+    isStatus: {
+      type: 'boolean',
+      default: false,
+      description:
+        'When set to `true`, sets `aria-live="polite"` and `role="status"`; otherwise, `aria-live="assertive"` and `role="alert"`',
+    },
     placement: {
       type: 'Placement',
       default: 'bottom-start',
       description: 'Placement of a floating element',
     },
+    progressProps: {
+      type: "Omit<BProgressBarProps, 'label' | 'max' | 'value'>",
+      default: undefined,
+      description: 'Configures the progress bar. No progress bar is shown if undefined',
+    },
+    showOnPause: {
+      type: 'boolean',
+      default: true,
+      description: 'Keeps the component visible when paused',
+    },
   }) as const
 
 const singletonProps = Object.freeze(commonProps())
diff --git a/apps/docs/src/utils/dropdownCommon.ts b/apps/docs/src/utils/dropdownCommon.ts
index ecca2d3c1..541e85945 100644
--- a/apps/docs/src/utils/dropdownCommon.ts
+++ b/apps/docs/src/utils/dropdownCommon.ts
@@ -169,14 +169,6 @@ export const dropdownEmits = {
   'toggle': {
     description: 'Emitted when toggle button is clicked',
   },
-  'cancel': {
-    args: undefined,
-    description: undefined,
-  },
-  'ok': {
-    args: undefined,
-    description: undefined,
-  },
 } as const satisfies EmitRecord<keyof BDropdownEmits>
 
 export const dropdownSlots = {
diff --git a/apps/docs/src/utils/popover-shared.ts b/apps/docs/src/utils/popover-shared.ts
index 46b2f4faf..0ffd42e84 100644
--- a/apps/docs/src/utils/popover-shared.ts
+++ b/apps/docs/src/utils/popover-shared.ts
@@ -242,12 +242,4 @@ const sharedEmits = {
       },
     },
   },
-  'cancel': {
-    args: undefined,
-    description: undefined,
-  },
-  'ok': {
-    args: undefined,
-    description: undefined,
-  },
 } satisfies EmitRecord<keyof BPopoverEmits | 'update:model-value'>
diff --git a/apps/docs/src/utils/showHideData.ts b/apps/docs/src/utils/showHideData.ts
index 4b15a47a1..6aa0f41e8 100644
--- a/apps/docs/src/utils/showHideData.ts
+++ b/apps/docs/src/utils/showHideData.ts
@@ -1,7 +1,15 @@
 import type {showHide} from 'bootstrap-vue-next'
-import type {EmitRecord, PropRecord, SlotScopeReference} from '../types'
+import type {PropRecord, SlotScopeReference} from '../types'
 
 export const showHideEmits = {
+  'cancel': {
+    args: {
+      value: {
+        type: 'BvTriggerableEvent',
+      },
+    },
+    description: 'Emitted when a cancel action is triggered.',
+  },
   'hide': {
     description:
       "Always emits just before the component has hidden. Cancelable (as long as component wasn't forcibly hidden)",
@@ -29,6 +37,14 @@ export const showHideEmits = {
     },
     description: 'Always emits after the component is hidden',
   },
+  'ok': {
+    args: {
+      value: {
+        type: 'BvTriggerableEvent',
+      },
+    },
+    description: 'Emitted when an ok action is triggered.',
+  },
   'show': {
     args: {
       value: {
@@ -74,7 +90,7 @@ export const showHideEmits = {
     description:
       'Emitted when the component tried to toggle, but was prevented from doing so.  This occurs when preventDefault() is called on the event, the user clicks escape and no-close-onbackdrop is set to true, or the user clicks on the backdrop and no-close-onbackdrop is set to true.',
   },
-} as const satisfies EmitRecord
+} as const
 
 export const showHideProps = {
   initialAnimation: {
@@ -152,3 +168,39 @@ export const showHideSlotsData = {
     description: 'Indicates if the component is visible (shown)',
   },
 } as const satisfies SlotScopeReference
+
+/**
+ * Builds common emits for dismissible components with close and countdown functionality
+ * (currently used by BAlert and BToast)
+ */
+export const buildDismissibleEmits = () =>
+  ({
+    ...showHideEmits,
+    'update:model-value': {
+      description: 'Emitted when the component visibility changes.',
+      args: {
+        value: {
+          type: 'Boolean',
+          description: 'The new visibility state of the component.',
+        },
+      },
+    },
+    'close': {
+      description: 'Emitted when the close button is clicked.',
+      args: {
+        value: {
+          type: 'BvTriggerableEvent',
+          description: 'The event object for the close button click.',
+        },
+      },
+    },
+    'close-countdown': {
+      description: 'Emitted during the countdown to auto-dismiss.',
+      args: {
+        value: {
+          type: 'number',
+          description: 'The remaining time in milliseconds before auto-dismissal.',
+        },
+      },
+    },
+  }) as const

From 87ceb85b2eb6b1e7ae3d59f67a0804e2afe8254a Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Wed, 5 Nov 2025 16:34:20 -0800
Subject: [PATCH 05/13] docs: refactor docs to avoid duplication and
 boilerplate code (#2891)

* docs: share description text between composables index page heading of individual pages

* docs: share descriptions in composables

* docs: share descriptions in directives doc

* docs: clean up some bootstrap v4 references

* docs: remove neeed to include explicit source path in documentation

* docs: infer source code base path

* docs: get rid of manual enumeration of components, etc.

* docs: auto generate the header for our core doc files

* docs: auto-generate configuration reference in docs

* docs: auto-generate headers for customizations directory

* docs: infer sourcePath in component reference

* docs: update contribution guide to describe documentation format

* docs: react to code review comments

* Update apps/docs/.vitepress/plugins/auto-inject-doc-components.ts

* docs: fix build issue

* docs: add the references files into the set of files that header are auto-injected

* docs: get root level documents using auto header injections

* docs: make the index.md page use front matter as well

* docs: fix remaining issues from code review

* docs: remove spurious newlines
---
 .markdownlint.json                            |   5 +-
 CONTRIBUTING.md                               | 270 +++++++++++++++++-
 apps/docs/.vitepress/config.mts               |   2 +
 .../plugins/auto-inject-doc-components.ts     | 137 +++++++++
 apps/docs/eslint.config.mjs                   |   9 +-
 apps/docs/package.json                        |   2 +
 .../src/components/ComponentReference.vue     |  34 ++-
 apps/docs/src/components/PageHeader.vue       | 117 +++++++-
 .../src/components/TableOfContentsCard.vue    |  17 +-
 .../src/components/TableOfContentsNav.vue     | 135 +++------
 .../src/composables/useMarkdownRenderer.ts    |  45 +++
 apps/docs/src/data/components.data.ts         |  16 ++
 .../src/data/components/accordion.data.ts     |   2 -
 apps/docs/src/data/components/alert.data.ts   |   1 -
 apps/docs/src/data/components/app.data.ts     |   1 -
 apps/docs/src/data/components/avatar.data.ts  |   2 -
 apps/docs/src/data/components/badge.data.ts   |   1 -
 .../src/data/components/breadcrumb.data.ts    |   2 -
 apps/docs/src/data/components/button.data.ts  |   2 -
 .../src/data/components/buttonGroup.data.ts   |   2 +-
 .../src/data/components/buttonToolbar.data.ts |   2 +-
 apps/docs/src/data/components/card.data.ts    |   9 -
 .../docs/src/data/components/carousel.data.ts |   2 -
 .../docs/src/data/components/collapse.data.ts |   1 -
 .../docs/src/data/components/dropdown.data.ts |   8 -
 apps/docs/src/data/components/form.data.ts    |   7 -
 .../src/data/components/formCheckbox.data.ts  |   2 -
 .../docs/src/data/components/formFile.data.ts |   3 +-
 .../src/data/components/formGroup.data.ts     |   1 -
 .../src/data/components/formInput.data.ts     |   1 -
 .../src/data/components/formRadio.data.ts     |   4 +-
 ...{FormRating.data.ts => formRating.data.ts} |   1 -
 .../src/data/components/formSelect.data.ts    |   7 +-
 .../data/components/formSpinbutton.data.ts    |   1 -
 .../docs/src/data/components/formTags.data.ts |   6 +-
 .../src/data/components/formTextarea.data.ts  |   1 -
 .../src/data/components/gridSystem.data.ts    |   3 -
 apps/docs/src/data/components/image.data.ts   |   1 -
 .../src/data/components/inputGroup.data.ts    |   2 -
 apps/docs/src/data/components/link.data.ts    |   1 -
 .../src/data/components/listGroup.data.ts     |   5 +-
 apps/docs/src/data/components/modal.data.ts   |   1 -
 apps/docs/src/data/components/nav.data.ts     |   5 -
 apps/docs/src/data/components/navbar.data.ts  |   4 -
 .../src/data/components/offcanvas.data.ts     |   1 -
 .../src/data/components/orchestrator.data.ts  |   1 +
 apps/docs/src/data/components/overlay.data.ts |   1 -
 .../src/data/components/pagination.data.ts    |   1 -
 .../src/data/components/placeholder.data.ts   |   5 -
 apps/docs/src/data/components/popover.data.ts |   1 -
 .../docs/src/data/components/progress.data.ts |   2 -
 apps/docs/src/data/components/spinner.data.ts |   1 -
 apps/docs/src/data/components/table.data.ts   |   9 -
 apps/docs/src/data/components/tabs.data.ts    |  72 ++---
 apps/docs/src/data/components/toast.data.ts   |   1 -
 apps/docs/src/data/components/tooltip.data.ts |  11 +-
 apps/docs/src/data/composables.data.ts        |  16 ++
 apps/docs/src/data/configurations.data.ts     |  16 ++
 apps/docs/src/data/directives.data.ts         |  16 ++
 apps/docs/src/data/reference.data.ts          |  16 ++
 apps/docs/src/docs/components.md              | 220 +-------------
 apps/docs/src/docs/components/accordion.md    |  16 +-
 apps/docs/src/docs/components/alert.md        |  16 +-
 apps/docs/src/docs/components/app.md          |  16 +-
 apps/docs/src/docs/components/avatar.md       |  23 +-
 apps/docs/src/docs/components/badge.md        |  16 +-
 apps/docs/src/docs/components/breadcrumb.md   |  16 +-
 apps/docs/src/docs/components/button-group.md |  16 +-
 .../src/docs/components/button-toolbar.md     |  12 +-
 apps/docs/src/docs/components/button.md       |  16 +-
 apps/docs/src/docs/components/card.md         |  16 +-
 apps/docs/src/docs/components/carousel.md     |  23 +-
 apps/docs/src/docs/components/collapse.md     |  21 +-
 apps/docs/src/docs/components/dropdown.md     |  16 +-
 .../docs/src/docs/components/form-checkbox.md |  16 +-
 apps/docs/src/docs/components/form-file.md    |  16 +-
 apps/docs/src/docs/components/form-group.md   |  16 +-
 apps/docs/src/docs/components/form-input.md   |  16 +-
 apps/docs/src/docs/components/form-radio.md   |  16 +-
 apps/docs/src/docs/components/form-rating.md  |  24 +-
 apps/docs/src/docs/components/form-select.md  |  16 +-
 .../src/docs/components/form-spinbutton.md    |  16 +-
 apps/docs/src/docs/components/form-tags.md    |  16 +-
 .../docs/src/docs/components/form-textarea.md |  16 +-
 apps/docs/src/docs/components/form.md         |  21 +-
 apps/docs/src/docs/components/grid-system.md  |  17 +-
 apps/docs/src/docs/components/image.md        |  16 +-
 apps/docs/src/docs/components/input-group.md  |  16 +-
 apps/docs/src/docs/components/link.md         |  16 +-
 apps/docs/src/docs/components/list-group.md   |  16 +-
 apps/docs/src/docs/components/modal.md        |  16 +-
 apps/docs/src/docs/components/nav.md          |  19 +-
 apps/docs/src/docs/components/navbar.md       |  16 +-
 apps/docs/src/docs/components/offcanvas.md    |  16 +-
 apps/docs/src/docs/components/orchestrator.md |  16 +-
 apps/docs/src/docs/components/overlay.md      |  16 +-
 apps/docs/src/docs/components/pagination.md   |  19 +-
 apps/docs/src/docs/components/placeholder.md  |  19 +-
 apps/docs/src/docs/components/popover.md      |  23 +-
 apps/docs/src/docs/components/progress.md     |  19 +-
 apps/docs/src/docs/components/spinner.md      |  25 +-
 apps/docs/src/docs/components/table.md        |  24 +-
 apps/docs/src/docs/components/tabs.md         |  21 +-
 apps/docs/src/docs/components/toast.md        |  16 +-
 apps/docs/src/docs/components/tooltip.md      |  21 +-
 apps/docs/src/docs/composables.md             |  58 +---
 .../src/docs/composables/ComposableHeader.vue |  12 -
 .../src/docs/composables/useBreadcrumb.md     |  14 +-
 .../docs/src/docs/composables/useColorMode.md |  14 +-
 apps/docs/src/docs/composables/useModal.md    |  13 +-
 apps/docs/src/docs/composables/usePopover.md  |  13 +-
 .../docs/src/docs/composables/useScrollspy.md |  12 +-
 apps/docs/src/docs/composables/useToast.md    |  14 +-
 apps/docs/src/docs/composables/useToggle.md   |  14 +-
 apps/docs/src/docs/configurations.md          |  35 +--
 .../docs/configurations/customizing-styles.md |   4 +-
 .../src/docs/configurations/global-options.md |   4 +-
 apps/docs/src/docs/directives.md              |  51 +---
 apps/docs/src/docs/directives/BColorMode.md   |  10 +-
 apps/docs/src/docs/directives/BModal.md       |   8 +-
 apps/docs/src/docs/directives/BPopover.md     |   8 +-
 apps/docs/src/docs/directives/BToggle.md      |   8 +-
 apps/docs/src/docs/directives/BTooltip.md     |   6 +-
 .../src/docs/directives/DirectiveHeader.vue   |  12 -
 apps/docs/src/docs/icons.md                   |  13 +-
 apps/docs/src/docs/migration-guide.md         |   5 +-
 apps/docs/src/docs/reference.md               |  91 +-----
 apps/docs/src/docs/reference/accessibility.md |  16 +-
 .../docs/src/docs/reference/color-variants.md |  19 +-
 .../src/docs/reference/form-validation.md     |  16 +-
 apps/docs/src/docs/reference/images.md        |  11 +-
 apps/docs/src/docs/reference/router-links.md  |  18 +-
 apps/docs/src/docs/reference/settings.md      |  14 +-
 .../docs/reference/size-props-and-classes.md  |  16 +-
 .../src/docs/reference/spacing-classes.md     |  16 +-
 .../src/docs/reference/starter-templates.md   |  16 +-
 .../src/docs/reference/theming-bootstrap.md   |  16 +-
 .../docs/reference/third-party-libraries.md   |  16 +-
 .../src/docs/reference/utility-classes.md     |  16 +-
 apps/docs/src/docs/types.md                   |  11 +-
 apps/docs/src/index.md                        |  11 +-
 apps/docs/src/types/index.ts                  |   5 +-
 apps/docs/src/utils/dataLoaderUtils.ts        |  84 ++++++
 pnpm-lock.yaml                                |  42 +++
 144 files changed, 1237 insertions(+), 1574 deletions(-)
 create mode 100644 apps/docs/.vitepress/plugins/auto-inject-doc-components.ts
 create mode 100644 apps/docs/src/composables/useMarkdownRenderer.ts
 create mode 100644 apps/docs/src/data/components.data.ts
 rename apps/docs/src/data/components/{FormRating.data.ts => formRating.data.ts} (98%)
 create mode 100644 apps/docs/src/data/composables.data.ts
 create mode 100644 apps/docs/src/data/configurations.data.ts
 create mode 100644 apps/docs/src/data/directives.data.ts
 create mode 100644 apps/docs/src/data/reference.data.ts
 delete mode 100644 apps/docs/src/docs/composables/ComposableHeader.vue
 delete mode 100644 apps/docs/src/docs/directives/DirectiveHeader.vue
 create mode 100644 apps/docs/src/utils/dataLoaderUtils.ts

diff --git a/.markdownlint.json b/.markdownlint.json
index 1f4f89584..4c98f54e2 100644
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -1,4 +1,5 @@
 {
   "MD013": false,
-  "MD033":false
-}
\ No newline at end of file
+  "MD033": false,
+  "MD041": false
+}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index bdb01da32..169a92f13 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -61,7 +61,155 @@ You can also use `pnpm dev --filter bootstrap-vue-next` to only open the main ho
 
 Improving the documentation is a great way to contribute to this project, especially if you're not quite ready to dive into the code.
 
-We use [vitepress](https://vitepress.dev/) to build our documentation in the `./apps/docs` directory. In order to test the docs, first make sure that you follow the steps in [Setting up your workspace](#setting-up-your-workspace). Then you can run `pnpm dev` from the root and then open the **docs:dev** host. This will hot-reload the documentation to let you easily see your edits. The `*.md` files under `./apps/docs/src/docs` contains the core documentation and the `*.data.ts` files under `./apps/docs/src/data/components` contains JSON files that contain the data to build the component definitions in the documentation.
+We use [vitepress](https://vitepress.dev/) to build our documentation in the `./apps/docs` directory. In order to test the docs, first make sure that you follow the steps in [Setting up your workspace](#setting-up-your-workspace). Then you can run `pnpm dev` from the root and then open the **docs:dev** host. This will hot-reload the documentation to let you easily see your edits.
+
+### Documentation File Structure
+
+- **Markdown files** (`./apps/docs/src/docs/**/*.md`): Contains the main documentation content
+- **Data files** (`./apps/docs/src/data/**/*.data.ts`): Contains component/composable/directive/reference/configuration metadata used to auto-generate API reference tables
+
+### Critical Documentation Conventions
+
+Our documentation system relies on several conventions to automatically generate headers, footers, and API references. **You must follow these conventions** to ensure the documentation builds correctly:
+
+#### 1. Frontmatter Requirements
+
+**All documentation markdown files must include frontmatter** with a `description` field. This description is used in multiple places:
+
+```yaml
+---
+description: A brief, clear description of what this component/composable/directive/reference topic does
+---
+```
+
+- The description should be concise (1-2 sentences)
+- Use YAML folding syntax (`>`) for multi-line descriptions to avoid parsing issues:
+
+```yaml
+---
+description: >
+  This is a longer description that spans multiple lines.
+  Use the > character to enable YAML folding syntax.
+---
+```
+
+- **Never use multi-line quoted strings** in YAML frontmatter as they cause parsing issues
+
+#### 2. Auto-Generated Headers and Footers
+
+The documentation system **automatically injects** page headers and component reference footers for **all documentation files** in `./apps/docs/src/docs/`.
+
+**DO NOT manually add:**
+
+- `# Page Title` headers (auto-generated from filename)
+- `<PageHeader />` components (auto-injected from frontmatter)
+- `<div class="lead">` sections (replaced by PageHeader)
+
+The build system will:
+
+- Auto-generate an `<h1>` title from the filename (e.g., `button-group.md` → "Button Group", `icons.md` → "Icons")
+- Auto-inject a `<PageHeader />` component with description from frontmatter
+- Auto-inject a `<ComponentReference />` footer for component docs (if a corresponding `.data.ts` file exists)
+
+If you need to add a `<style>` section to a markdown file, place it at the end. The system will correctly insert the `<ComponentReference>` footer before any `<style>` sections.
+
+#### 3. Component Data File Conventions
+
+When creating or modifying `.data.ts` files in `./apps/docs/src/data/components/`, follow these conventions:
+
+**Component Ordering:** The **first component** in the exported object determines the base directory for sourcePath inference:
+
+```typescript
+export default {
+  load: (): ComponentReference => ({
+    // ✅ CORRECT: Primary component listed first
+    BTabs: {
+      // This will use /BTabs/BTabs.vue as the source
+      props: {
+        /* ... */
+      },
+    },
+    BTab: {
+      // This will use /BTabs/BTab.vue as the source
+      props: {
+        /* ... */
+      },
+    },
+  }),
+}
+```
+
+```typescript
+export default {
+  load: (): ComponentReference => ({
+    // ❌ INCORRECT: Secondary component listed first
+    BTab: {
+      props: {
+        /* ... */
+      },
+    },
+    BTabs: {
+      props: {
+        /* ... */
+      },
+    },
+  }),
+}
+```
+
+The first component name (e.g., `BTabs`) must match the directory name in `./packages/bootstrap-vue-next/src/components/`.
+
+**Special Cases:** If a component lives in a parent directory (e.g., `BButtonGroup` in `/BButton/`), add an explicit `sourcePath`:
+
+```typescript
+BButtonGroup: {
+  sourcePath: '/BButton/BButtonGroup.vue',
+  props: { /* ... */ },
+}
+```
+
+**TypeScript Slot Types:** Ensure you use the correct TypeScript slot type for each component:
+
+```typescript
+BTabs: {
+  slots: {
+    default: { description: '...' },
+  } satisfies SlotRecord<keyof BTabsSlots>,  // ✅ Use BTabsSlots for BTabs
+},
+BTab: {
+  slots: {
+    default: { description: '...' },
+  } satisfies SlotRecord<keyof BTabSlots>,   // ✅ Use BTabSlots for BTab
+}
+```
+
+#### 4. Data Loaders
+
+Data loaders in `./apps/docs/src/data/` automatically extract frontmatter and transform data for the build system. When adding new documentation types, ensure a corresponding data loader exists that:
+
+1. Uses `createContentLoader()` to read markdown files
+2. Extracts frontmatter using the `yaml` package
+3. Transforms data using shared utilities from `./apps/docs/src/utils/dataLoaderUtils.ts`
+
+Example data loaders include:
+
+- `components.data.ts` - Component documentation
+- `composables.data.ts` - Composable documentation
+- `directives.data.ts` - Directive documentation
+- `reference.data.ts` - Reference documentation
+- `configurations.data.ts` - Configuration documentation
+
+#### 5. Testing Your Documentation Changes
+
+Before submitting a PR with documentation changes:
+
+1. Run `pnpm --filter docs run build` to ensure the build succeeds
+2. Run `pnpm --filter docs run dev` to verify the output visually
+3. Check that all auto-generated elements appear correctly:
+   - Page titles match the filename
+   - PageHeader shows the correct description
+   - ComponentReference footer appears with correct GitHub links
+4. Verify no duplicate headers or footers appear
 
 ## Help Verify BootstrapVue and Bootstrap v5 Parity
 
@@ -99,6 +247,8 @@ For adding a new component, there are some notes...
 - If the component is custom, or taken from [Bootstrap-vue](https://bootstrap-vue.github.io/bootstrap-vue/) you will need to read the component documentation, then attempt to recreate that component using `<template>` and `<script setup lang="ts">` syntax. If a Bootstrap-vue component is based on a native Bootstrap component, then you should read Bootstrap's implementation first, and ensure any changes are made to correct for the v5 release of Bootstrap
 - All Props and Emits should be fully written as TypeScript interfaces, the more strongly typed, the better
 
+### Registering the Component for Export
+
 After the implementation of the component, based on Bootstrap's details, you can finally begin introducing the component to be exported by the main package, and usable by users of the library. To do that you will need to:
 
 1. Add the component to the import/export list, located in `./packages/bootstrap-vue-next/src/components/index.ts`
@@ -106,6 +256,124 @@ After the implementation of the component, based on Bootstrap's details, you can
 3. After that, export it in the `export {}` list that contains the other components to be exported
 4. Finally, it must be included in the exported interface of **GlobalComponents**, following the pattern of `BComponent: typeof BComponent`
 
+### Creating Component Documentation
+
+After registering the component, you must create documentation for it. This involves two files:
+
+#### 1. Create the Data File (`./apps/docs/src/data/components/[name].data.ts`)
+
+This file defines the component's props, emits, and slots for the API reference. **Follow these critical conventions:**
+
+**Component Ordering:** List the **primary component first**. The first component name determines the source directory:
+
+```typescript
+import type {BMyComponentProps, BMyComponentEmits, BMyComponentSlots} from 'bootstrap-vue-next'
+import {
+  type ComponentReference,
+  type PropRecord,
+  type EmitRecord,
+  type SlotRecord,
+} from '../../types'
+
+export default {
+  load: (): ComponentReference => ({
+    // ✅ Primary component first - determines base directory
+    BMyComponent: {
+      props: {
+        // Define all props with type, default, and description
+        variant: {
+          type: 'ColorVariant',
+          default: 'primary',
+          description: 'The color variant to apply',
+        },
+      } satisfies PropRecord<keyof BMyComponentProps>,
+      emits: {
+        // Define all emits with description and args
+        click: {
+          description: 'Emitted when the component is clicked',
+          args: {
+            event: {
+              type: 'MouseEvent',
+              description: 'The native click event',
+            },
+          },
+        },
+      } satisfies EmitRecord<keyof BMyComponentEmits>,
+      slots: {
+        // Define all slots with description
+        default: {
+          description: 'The default slot content',
+        },
+      } satisfies SlotRecord<keyof BMyComponentSlots>,
+    },
+  }),
+}
+```
+
+**Important Notes:**
+
+- The filename should match the primary component in kebab-case (e.g., `my-component.data.ts` for `BMyComponent`)
+- If you have multiple related components (e.g., `BTabs` and `BTab`), list the primary one first
+- The first component name must match a directory in `./packages/bootstrap-vue-next/src/components/`
+- If a secondary component is in a different directory, add `sourcePath: '/BParentDir/BSecondaryComponent.vue'`
+- Use TypeScript `satisfies` to ensure type safety for props, emits, and slots
+
+#### 2. Create the Markdown File (`./apps/docs/src/docs/components/[name].md`)
+
+This file contains the human-readable documentation. **Follow these critical conventions:**
+
+```markdown
+---
+description: A clear, concise description of what the component does
+---
+
+<!-- DO NOT add <PageHeader /> or <ComponentReference /> - they are auto-injected -->
+<!-- DO NOT add # Title header - it's auto-generated from filename -->
+
+## Overview
+
+Describe the component's purpose and basic usage.
+
+<< Include an Example >>>
+
+## Feature 1
+
+## Feature 2
+
+## Complete example
+
+if appropriate
+
+<!-- ComponentReference is auto-injected here -->
+```
+
+**Important Notes:**
+
+- **Always include frontmatter** with a `description` field
+- Use YAML folding syntax (`description: >`) for multi-line descriptions
+- **Never manually add** `<PageHeader />`, `<ComponentReference />`, or `# Title` headers
+- The filename determines the page title (e.g., `my-component.md` → "My Component")
+- The ComponentReference footer is auto-injected and will show the API reference from the `.data.ts` file
+
+#### 3. Verify Your Documentation
+
+Before submitting:
+
+```bash
+# Build the docs to check for errors
+pnpm --filter docs run build
+
+# View the docs locally
+pnpm --filter docs run dev
+```
+
+Verify:
+
+- The page title appears correctly
+- The description shows in the PageHeader
+- The ComponentReference footer appears with correct GitHub source links
+- No duplicate headers or footers are present
+
 That is it!
 
 ## Fixing or Adding Features to Components
diff --git a/apps/docs/.vitepress/config.mts b/apps/docs/.vitepress/config.mts
index f0b2eca9e..e1faebe97 100644
--- a/apps/docs/.vitepress/config.mts
+++ b/apps/docs/.vitepress/config.mts
@@ -2,6 +2,7 @@ import {defineConfig} from 'vitepress'
 import Icons from 'unplugin-icons/vite'
 import markdownItClass from '@toycode/markdown-it-class'
 import {demoContainer} from './plugins/demo-container'
+import {autoInjectDocComponents} from './plugins/auto-inject-doc-components'
 import Components from 'unplugin-vue-components/vite'
 import {BootstrapVueNextResolver} from 'bootstrap-vue-next/resolvers'
 
@@ -54,6 +55,7 @@ export default defineConfig({
     config: (md) => {
       md.use(markdownItClass, {table: ['table', 'table-striped']})
       md.use(demoContainer, 'src')
+      md.use(autoInjectDocComponents)
     },
     headers: true,
   },
diff --git a/apps/docs/.vitepress/plugins/auto-inject-doc-components.ts b/apps/docs/.vitepress/plugins/auto-inject-doc-components.ts
new file mode 100644
index 000000000..30c64ee51
--- /dev/null
+++ b/apps/docs/.vitepress/plugins/auto-inject-doc-components.ts
@@ -0,0 +1,137 @@
+import type MarkdownIt from 'markdown-it'
+import {parse} from 'yaml'
+import {kebabToTitleCase} from '../../src/utils/dataLoaderUtils'
+
+/**
+ * Convert kebab-case filename to Title Case.
+ * Examples:
+ *   button-group → Button Group
+ *   useColorMode → useColorMode (composables keep camelCase)
+ *   BTooltip → BTooltip (directives keep PascalCase)
+ */
+function filenameToTitle(filename: string, directory: string): string {
+  // For composables and directives (both in subdirectories and root level), keep the original casing
+  if (
+    directory === 'composables' ||
+    directory === 'directives' ||
+    directory.endsWith('/composables') ||
+    directory.endsWith('/directives')
+  ) {
+    return filename
+  }
+
+  // For components and configurations (and other files), convert kebab-case to Title Case using shared utility
+  return kebabToTitleCase(filename)
+}
+
+/**
+ * Convert kebab-case filename to camelCase for data file imports.
+ * Examples:
+ *   button-group → buttonGroup
+ *   form-input → formInput
+ *   badge → badge
+ */
+function filenameToCamelCase(filename: string): string {
+  return filename.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+}
+
+/**
+ * Auto-inject page header and footer for component/composable/directive documentation files.
+ *
+ * This plugin automatically adds:
+ * 1. An h1 heading with the filename converted to proper case (for proper document structure)
+ * 2. A <PageHeader /> component (for description and source links)
+ * 3. For components only: A <ComponentReference /> component with data import (before any <style> section)
+ *
+ * Only applies to files in /components/, /composables/, /directives/, or /configurations/ directories
+ * that have a `description` in their frontmatter.
+ */
+export function autoInjectDocComponents(md: MarkdownIt) {
+  const defaultRender = md.render.bind(md)
+
+  md.render = function (
+    src: string,
+    env: {relativePath?: string; path?: string; frontmatter?: {description?: string}}
+  ) {
+    // Check if this is a documentation file that should get auto-injection
+    const rawPath = env?.relativePath || env?.path || ''
+    // Normalize path separators for cross-platform compatibility
+    const path = rawPath.replace(/\\/g, '/')
+    // Match docs/*.md files (with or without src/ prefix, with or without leading slash)
+    const match = path.match(/(?:src\/)?docs\/(.+)\.md$/)
+
+    if (!match) {
+      return defaultRender(src, env)
+    }
+
+    // Extract the filename and directory from the path
+    const fullPath = match[1]
+    const lastSlashIndex = fullPath.lastIndexOf('/')
+    const directory = lastSlashIndex >= 0 ? fullPath.substring(0, lastSlashIndex) : ''
+    const filename = lastSlashIndex >= 0 ? fullPath.substring(lastSlashIndex + 1) : fullPath
+
+    // Extract frontmatter using simple regex and parse with YAML
+    const trimmedSrc = src.trim()
+    const frontmatterMatch = trimmedSrc.match(/^---\r?\n([\s\S]*?)\r?\n---/)
+
+    if (!frontmatterMatch) {
+      return defaultRender(src, env)
+    }
+
+    // Parse frontmatter to check for description
+    let frontmatter: {description?: string}
+    try {
+      frontmatter = parse(frontmatterMatch[1])
+    } catch {
+      return defaultRender(src, env)
+    }
+
+    if (!frontmatter?.description) {
+      return defaultRender(src, env)
+    }
+
+    const title = filenameToTitle(filename, directory)
+
+    // Build the expected header pattern
+    const expectedHeader = `# ${title}\n\n<PageHeader />`
+
+    // Get the content after frontmatter
+    let afterFrontmatter = trimmedSrc.slice(frontmatterMatch[0].length).trim()
+
+    // Inject header if it doesn't already have it
+    if (!afterFrontmatter.startsWith(`# ${title}`)) {
+      afterFrontmatter = `${expectedHeader}\n\n${afterFrontmatter}`
+    }
+
+    // For components, inject ComponentReference footer if it doesn't already exist
+    if (directory === 'components') {
+      const componentReferencePattern = /<ComponentReference\s+:data=["']data["']\s*\/?>/
+      const scriptPattern =
+        /<script setup lang=["']ts["']>\s*import\s*\{\s*data\s*\}\s*from\s*["']\.\.\/\.\.\/data\/components\//
+      // Only inject if both ComponentReference and script are missing
+      if (
+        !componentReferencePattern.test(afterFrontmatter) &&
+        !scriptPattern.test(afterFrontmatter)
+      ) {
+        const dataFilename = filenameToCamelCase(filename)
+        const footer = `\n\n<ComponentReference :data="data" />\n\n<script setup lang="ts">\nimport {data} from '../../data/components/${dataFilename}.data'\n</script>`
+
+        // Check if there's a <style> section anywhere in the content
+        const firstStyleOpen = afterFrontmatter.search(/<style[^>]*>/)
+
+        if (firstStyleOpen !== -1) {
+          // Insert footer before the first <style> section
+          afterFrontmatter = `${afterFrontmatter.slice(0, firstStyleOpen)}${footer}\n${afterFrontmatter.slice(firstStyleOpen)}`
+        } else {
+          // No <style> section, append footer at the end
+          afterFrontmatter = afterFrontmatter + footer
+        }
+      }
+    }
+
+    // Combine frontmatter with processed content
+    src = `${frontmatterMatch[0]}\n\n${afterFrontmatter}`
+
+    return defaultRender(src, env)
+  }
+}
diff --git a/apps/docs/eslint.config.mjs b/apps/docs/eslint.config.mjs
index f49475024..b39ddb3e9 100644
--- a/apps/docs/eslint.config.mjs
+++ b/apps/docs/eslint.config.mjs
@@ -2,6 +2,9 @@ import pluginVue from 'eslint-plugin-vue'
 import vueTsEslintConfig from '@vue/eslint-config-typescript'
 import pluginVitest from '@vitest/eslint-plugin'
 import skipFormatting from '@vue/eslint-config-prettier'
+import {fileURLToPath} from 'url'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
 
 export default [
   {
@@ -13,7 +16,11 @@ export default [
     ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
   },
   ...pluginVue.configs['flat/recommended'],
-  ...vueTsEslintConfig(),
+  ...vueTsEslintConfig({
+    parserOptions: {
+      tsconfigRootDir: __dirname,
+    },
+  }),
   {
     ...pluginVitest.configs.recommended,
     files: ['src/**/*.spec.*', 'src/**/*.test.*'],
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 5510754f2..b78c67904 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -20,6 +20,7 @@
     "@stackblitz/sdk": "^1.11.0",
     "@toycode/markdown-it-class": "^1.2.4",
     "@tsconfig/node22": "^22.0.2",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.16.5",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
@@ -31,6 +32,7 @@
     "eslint": "^9.31.0",
     "eslint-define-config": "^2.1.0",
     "eslint-plugin-vue": "^10.3.0",
+    "markdown-it": "^14.1.0",
     "prettier": "^3.6.2",
     "typescript": "^5.8.3",
     "unplugin-icons": "^22.1.0",
diff --git a/apps/docs/src/components/ComponentReference.vue b/apps/docs/src/components/ComponentReference.vue
index 63525e999..d7dd42bd8 100644
--- a/apps/docs/src/components/ComponentReference.vue
+++ b/apps/docs/src/components/ComponentReference.vue
@@ -269,14 +269,39 @@ const router = useRouter()
 
 const props = defineProps<{data: ComponentReference}>()
 
+/**
+ * Derives the base directory name from all components in the data.
+ * Uses the first component in the object as the base directory name.
+ * This relies on the data files having the primary component listed first.
+ *
+ * Examples:
+ *   {BButton: {...}, BCloseButton: {...}} → BButton
+ *   {BFormTags: {...}, BFormTag: {...}} → BFormTags
+ *   {BTabs: {...}, BTab: {...}} → BTabs
+ */
+const deriveBaseDirectory = (): string => {
+  const componentNames = Object.keys(props.data)
+  return componentNames[0] // First component is the base directory
+}
+
+/**
+ * Derives the source path for a component.
+ *
+ * Pattern: /<BaseDirectory>/<ComponentName>.vue
+ */
+const deriveSourcePath = (componentName: string, baseDirectory: string): string =>
+  `/${baseDirectory}/${componentName}.vue`
+
 const goToLink = (link: string) => router.go(withBase(link))
 const globalData = inject(appInfoKey)
 
 /**
  * Sorts the items inside so they're uniform structure
  */
-const sortData = computed(() =>
-  Object.entries(props.data).map(
+const sortData = computed(() => {
+  const baseDirectory = deriveBaseDirectory()
+
+  return Object.entries(props.data).map(
     ([component, {props: localProps, sourcePath, emits, slots, styleSpec}]) => {
       const mapProps = () => {
         const isMultiplePropRecord = (
@@ -332,7 +357,8 @@ const sortData = computed(() =>
       const data = {
         component,
         styleSpec,
-        sourcePath,
+        // Use provided sourcePath or derive it from component name and base directory
+        sourcePath: sourcePath ?? deriveSourcePath(component, baseDirectory),
         props: Object.entries(mapProps()).map(([name, value]) => ({
           name,
           ...value,
@@ -363,7 +389,7 @@ const sortData = computed(() =>
       return data
     }
   )
-)
+})
 
 type ComponentItemFree = Exclude<ComponentItem, 'sourcePath' | 'styleSpec'>
 
diff --git a/apps/docs/src/components/PageHeader.vue b/apps/docs/src/components/PageHeader.vue
index 5fedb4545..9b2b4251f 100644
--- a/apps/docs/src/components/PageHeader.vue
+++ b/apps/docs/src/components/PageHeader.vue
@@ -1,26 +1,66 @@
 <template>
-  <BContainer class="lead mb-5">
-    <BRow>
-      <BCol> <slot /> </BCol
-    ></BRow>
-    <BRow v-if="withPageHeader">
-      <BCol>
-        <ViewSourceButton :href> Edit this page on GitHub </ViewSourceButton>
-      </BCol>
-    </BRow>
-  </BContainer>
+  <div>
+    <BContainer class="lead mb-5">
+      <BRow>
+        <BCol>
+          <slot><p v-html="renderedDescription" /></slot>
+        </BCol>
+      </BRow>
+      <BRow v-if="showButtons">
+        <BCol>
+          <ViewSourceButton v-if="sourceHref" :href="sourceHref" class="me-2">
+            View Source
+          </ViewSourceButton>
+          <ViewSourceButton v-if="editHref" :href="editHref">
+            Edit this page on GitHub
+          </ViewSourceButton>
+        </BCol>
+      </BRow>
+    </BContainer>
+  </div>
 </template>
 
 <script setup lang="ts">
+import {computed, inject} from 'vue'
+import {useData} from 'vitepress'
 import {useEditThisPageOnGithub} from '../composables/useEditLink'
+import {useMarkdownRenderer} from '../composables/useMarkdownRenderer'
 import ViewSourceButton from './ViewSourceButton.vue'
+import {appInfoKey} from '../../.vitepress/theme/keys'
+import {kebabToTitleCase} from '../utils/dataLoaderUtils'
+
+interface AppInfo {
+  githubComponentsDirectory: string
+  githubComposablesDirectory: string
+  githubDirectivesDirectory: string
+}
+
+const globalData = inject<AppInfo | undefined>(appInfoKey)
+
+type Base = 'githubComponentsDirectory' | 'githubComposablesDirectory' | 'githubDirectivesDirectory'
+
+/**
+ * Convert kebab-case to PascalCase
+ * @example toPascalCase('form-input') => 'FormInput'
+ */
+function toPascalCase(str: string): string {
+  return kebabToTitleCase(str).replace(/\s+/g, '')
+}
+
+/**
+ * Convert kebab-case to camelCase
+ * @example toCamelCase('use-toast') => 'useToast'
+ */
+function toCamelCase(str: string): string {
+  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+}
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   default: (props: Record<string, never>) => any
 }>()
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     withPageHeader?: boolean
   }>(),
@@ -29,5 +69,58 @@ withDefaults(
   }
 )
 
-const href = useEditThisPageOnGithub()
+const {frontmatter, page} = useData()
+const description = computed(() => (frontmatter.value?.description as string) || '')
+const renderedDescription = useMarkdownRenderer(description)
+
+// Infer the base directory from the current page path
+const inferredBase = computed((): Base | null => {
+  if (!page.value?.relativePath) return null
+
+  const path = page.value.relativePath
+  if (path.includes('/components/')) return 'githubComponentsDirectory'
+  if (path.includes('/composables/')) return 'githubComposablesDirectory'
+  if (path.includes('/directives/')) return 'githubDirectivesDirectory'
+
+  return null
+})
+
+// Derive the source path from the current page URL and inferred base
+const derivedPath = computed(() => {
+  const base = inferredBase.value
+  if (!base || !page.value?.relativePath) return null
+
+  const segments = page.value.relativePath.split('/')
+  const filename = segments[segments.length - 1]?.replace(/\.md$/i, '')
+
+  if (!filename) return null
+
+  if (base === 'githubComponentsDirectory') {
+    // Convert filename (e.g., 'button', 'form-input') to component name (e.g., 'BButton', 'BFormInput')
+    const componentName = `B${toPascalCase(filename)}`
+    return `${componentName}/${componentName}.vue`
+  } else if (base === 'githubComposablesDirectory') {
+    // Composables: convert kebab-case to camelCase (e.g., 'use-toast' -> 'useToast')
+    const composableName = toCamelCase(filename)
+    return `${composableName}/index.ts`
+  } else if (base === 'githubDirectivesDirectory') {
+    // Directives: convert kebab-case to PascalCase (e.g., 'b-color-mode' -> 'BColorMode')
+    const directiveName = toPascalCase(filename)
+    return `${directiveName}/index.ts`
+  }
+
+  return null
+})
+
+// Allow frontmatter path to override if present (for special cases)
+const path = computed(() => (frontmatter.value?.path as string | null) ?? derivedPath.value)
+
+const editHref = useEditThisPageOnGithub()
+const sourceHref = computed(() =>
+  path.value && inferredBase.value && globalData
+    ? `${globalData[inferredBase.value]}/${path.value}`
+    : null
+)
+
+const showButtons = computed(() => props.withPageHeader && (editHref.value || sourceHref.value))
 </script>
diff --git a/apps/docs/src/components/TableOfContentsCard.vue b/apps/docs/src/components/TableOfContentsCard.vue
index ef0cd74b8..513a8cab0 100644
--- a/apps/docs/src/components/TableOfContentsCard.vue
+++ b/apps/docs/src/components/TableOfContentsCard.vue
@@ -1,19 +1,28 @@
 <template>
-  <BCard :body-text="description">
+  <BCard>
     <template #header>
-      <BLink :to="route">
-        <h3 :id="route" class="m-0">
+      <BLink :to="routeWithBase">
+        <h3 :id="routeWithBase" class="m-0">
           {{ name }}
         </h3>
       </BLink>
     </template>
+    <span v-html="renderedDescription" />
   </BCard>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import {computed} from 'vue'
+import {withBase} from 'vitepress'
+import {useMarkdownRenderer} from '../composables/useMarkdownRenderer'
+
+const props = defineProps<{
   name: string
   description: string
   route: string
 }>()
+
+const descriptionRef = computed(() => props.description)
+const renderedDescription = useMarkdownRenderer(descriptionRef)
+const routeWithBase = computed(() => withBase(props.route))
 </script>
diff --git a/apps/docs/src/components/TableOfContentsNav.vue b/apps/docs/src/components/TableOfContentsNav.vue
index 26904ea5c..a161f81c9 100644
--- a/apps/docs/src/components/TableOfContentsNav.vue
+++ b/apps/docs/src/components/TableOfContentsNav.vue
@@ -22,8 +22,8 @@
         :class="listGroupItemClasses"
       >
         <BLink
-          :to="component.route"
-          :active="routerRoute.path === `${component.route}.html`"
+          :to="withBase(component.route)"
+          :active="isRouteActive(component.route)"
           :class="linkClasses"
         >
           {{ component.name }}
@@ -41,6 +41,10 @@ import IntersectIcon from '~icons/bi/intersect'
 import CodeSlashIcon from '~icons/bi/code-slash'
 import PieChartIcon from '~icons/bi/pie-chart'
 import GearIcon from '~icons/bi/gear'
+import {data as componentsData} from '../data/components.data'
+import {data as composablesData} from '../data/composables.data'
+import {data as directivesData} from '../data/directives.data'
+import {data as configurationsData} from '../data/configurations.data'
 
 defineProps<{
   name?: string
@@ -53,6 +57,13 @@ const {greaterOrEqual} = useBreakpoints(breakpointsBootstrapV5)
 
 const isLargeScreen = ref(true)
 
+// Helper to check if a route is active (handles base path and .html suffix)
+const isRouteActive = (route: string) => {
+  const normalizedRoute = withBase(route)
+  const currentPath = routerRoute.path
+  return currentPath === normalizedRoute || currentPath === `${normalizedRoute}.html`
+}
+
 onMounted(() => {
   watch(
     greaterOrEqual('xl'),
@@ -63,13 +74,6 @@ onMounted(() => {
   )
 })
 
-const routeLocationComponents = (name: string): string =>
-  withBase(`/docs/components/${name.toLowerCase()}`).trim().replaceAll(/\s+/g, '-')
-const routeLocationComposables = (name: string): string =>
-  withBase(`/docs/composables/${name}`).trim()
-const routeLocationDirectives = (name: string): string =>
-  withBase(`/docs/directives/${name}`).trim()
-
 const headerClasses = ['py-2', 'text-primary-emphasis'] as const
 const linkClasses = ['px-2', 'ms-2', 'text-decoration-none', 'text-body', 'fs-7'] as const
 const listGroupItemClasses = ['border-0', 'px-0', 'py-0-5', 'ms-2'] as const
@@ -104,96 +108,32 @@ const headerLinks = [
   },
 ]
 
-const componentsList: {name: string}[] = [
-  {name: 'App'},
-  {name: 'Accordion'},
-  {name: 'Alert'},
-  {name: 'Avatar'},
-  {name: 'Badge'},
-  {name: 'Breadcrumb'},
-  {name: 'Button'},
-  {name: 'Button Group'},
-  {name: 'Button Toolbar'},
-  {name: 'Card'},
-  {name: 'Carousel'},
-  {name: 'Collapse'},
-  {name: 'Dropdown'},
-  {name: 'Form'},
-  {name: 'Form Checkbox'},
-  {name: 'Form File'},
-  {name: 'Form Group'},
-  {name: 'Form Input'},
-  {name: 'Form Radio'},
-  {name: 'Form Rating'},
-  {name: 'Form Select'},
-  {name: 'Form Tags'},
-  {name: 'Form Spinbutton'},
-  {name: 'Form Textarea'},
-  {name: 'Grid System'},
-  {name: 'Image'},
-  {name: 'Input Group'},
-  {name: 'Link'},
-  {name: 'List Group'},
-  {name: 'Modal'},
-  {name: 'Nav'},
-  {name: 'Navbar'},
-  {name: 'Orchestrator'},
-  {name: 'Offcanvas'},
-  {name: 'Overlay'},
-  {name: 'Pagination'},
-  {name: 'Placeholder'},
-  {name: 'Popover'},
-  {name: 'Progress'},
-  {name: 'Spinner'},
-  {name: 'Table'},
-  {name: 'Tabs'},
-  {name: 'Toast'},
-  {name: 'Tooltip'},
-]
-
-const composablesList: {name: string}[] = [
-  {name: 'useBreadcrumb'},
-  {name: 'useColorMode'},
-  {name: 'useModal'},
-  {name: 'usePopover'},
-  {name: 'useScrollspy'},
-  {name: 'useToast'},
-  {name: 'useToggle'},
-]
-
-const directivesList: {name: string}[] = [
-  {name: 'BColorMode'},
-  {name: 'BModal'},
-  {name: 'BPopover'},
-  {name: 'BToggle'},
-  {name: 'BTooltip'},
-]
-
 const componentsComputedList = computed(() =>
-  componentsList
-    .map((el) => ({
-      name: el.name,
-      route: routeLocationComponents(el.name),
-    }))
-    .sort((a, b) => a.name.localeCompare(b.name))
+  componentsData.map((component) => ({
+    name: component.name,
+    route: component.url,
+  }))
 )
 
 const composablesComputedList = computed(() =>
-  composablesList
-    .map((el) => ({
-      name: el.name,
-      route: routeLocationComposables(el.name),
-    }))
-    .sort((a, b) => a.name.localeCompare(b.name))
+  composablesData.map((composable) => ({
+    name: composable.name,
+    route: composable.url,
+  }))
 )
 
 const directivesComputedList = computed(() =>
-  directivesList
-    .map((el) => ({
-      name: el.name,
-      route: routeLocationDirectives(el.name),
-    }))
-    .sort((a, b) => a.name.localeCompare(b.name))
+  directivesData.map((directive) => ({
+    name: directive.name,
+    route: directive.url,
+  }))
+)
+
+const configurationsComputedList = computed(() =>
+  configurationsData.map((configuration) => ({
+    name: configuration.name,
+    route: configuration.url,
+  }))
 )
 
 const groupComputedList = computed(() => [
@@ -219,16 +159,7 @@ const groupComputedList = computed(() => [
     label: 'Configurations',
     uri: '/docs/configurations',
     icon: () => GearIcon,
-    children: [
-      {
-        name: 'Global Options',
-        route: withBase('/docs/configurations/global-options'),
-      },
-      {
-        name: 'Customizing Styles',
-        route: withBase('/docs/configurations/customizing-styles'),
-      },
-    ],
+    children: configurationsComputedList.value,
   },
 ])
 </script>
diff --git a/apps/docs/src/composables/useMarkdownRenderer.ts b/apps/docs/src/composables/useMarkdownRenderer.ts
new file mode 100644
index 000000000..5622bd55d
--- /dev/null
+++ b/apps/docs/src/composables/useMarkdownRenderer.ts
@@ -0,0 +1,45 @@
+import {computed, type ComputedRef} from 'vue'
+import {withBase} from 'vitepress'
+import MarkdownIt from 'markdown-it'
+
+// Create a shared markdown-it instance
+const md = new MarkdownIt({
+  html: false, // Disable HTML tags in source for security
+  breaks: false,
+  linkify: true,
+})
+
+// Override the default link renderer to add base path
+const defaultRender =
+  md.renderer.rules.link_open ||
+  function (tokens, idx, options, env, self) {
+    return self.renderToken(tokens, idx, options)
+  }
+
+md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
+  const token = tokens[idx]
+  const hrefIndex = token.attrIndex('href')
+
+  if (hrefIndex >= 0 && token.attrs) {
+    const [, href] = token.attrs[hrefIndex]
+    // Only add base to internal links (starting with /)
+    if (href.startsWith('/') && !href.startsWith('//')) {
+      token.attrs[hrefIndex][1] = withBase(href)
+    }
+  }
+
+  return defaultRender(tokens, idx, options, env, self)
+}
+
+/**
+ * Composable for rendering markdown with VitePress base path support
+ */
+export function useMarkdownRenderer(text: ComputedRef<string> | string): ComputedRef<string> {
+  const textRef = typeof text === 'string' ? computed(() => text) : text
+
+  return computed(() => {
+    if (!textRef.value) return ''
+    // Use renderInline to avoid wrapping in <p> tags
+    return md.renderInline(textRef.value)
+  })
+}
diff --git a/apps/docs/src/data/components.data.ts b/apps/docs/src/data/components.data.ts
new file mode 100644
index 000000000..94fb54786
--- /dev/null
+++ b/apps/docs/src/data/components.data.ts
@@ -0,0 +1,16 @@
+import {createContentLoader} from 'vitepress'
+import {type DocItem, transformDocData} from '../utils/dataLoaderUtils'
+
+export type ComponentData = DocItem
+
+declare const data: ComponentData[]
+export {data}
+
+export default createContentLoader('docs/components/*.md', {
+  transform(rawData): ComponentData[] {
+    return transformDocData(rawData, 'components', {
+      filterByDescription: true,
+      useTitleCase: true,
+    })
+  },
+})
diff --git a/apps/docs/src/data/components/accordion.data.ts b/apps/docs/src/data/components/accordion.data.ts
index 4b481ed48..28fd4a344 100644
--- a/apps/docs/src/data/components/accordion.data.ts
+++ b/apps/docs/src/data/components/accordion.data.ts
@@ -13,7 +13,6 @@ import {showHideEmits, showHideProps} from '../../utils/showHideData'
 export default {
   load: (): ComponentReference => ({
     BAccordion: {
-      sourcePath: '/BAccordion/BAccordion.vue',
       props: {
         ...pick(showHideProps, ['initialAnimation', 'lazy', 'unmountLazy']), // Restored spread
         ...pick(
@@ -74,7 +73,6 @@ export default {
       } satisfies SlotRecord<keyof BAccordionSlots>,
     },
     BAccordionItem: {
-      sourcePath: '/BAccordion/BAccordionItem.vue',
       props: {
         ...pick(showHideProps, ['modelValue', 'lazy', 'show', 'unmountLazy', 'visible']), // Restored spread
         ...pick(
diff --git a/apps/docs/src/data/components/alert.data.ts b/apps/docs/src/data/components/alert.data.ts
index bd23c5b79..ad98dda06 100644
--- a/apps/docs/src/data/components/alert.data.ts
+++ b/apps/docs/src/data/components/alert.data.ts
@@ -14,7 +14,6 @@ import {omit, pick} from '../../utils/objectUtils'
 export default {
   load: (): ComponentReference => ({
     BAlert: {
-      sourcePath: '/BAlert/BAlert.vue',
       props: {
         [defaultPropSectionSymbol]: {
           ...omit(showHideProps, ['modelValue']),
diff --git a/apps/docs/src/data/components/app.data.ts b/apps/docs/src/data/components/app.data.ts
index e97e6216d..aa1795438 100644
--- a/apps/docs/src/data/components/app.data.ts
+++ b/apps/docs/src/data/components/app.data.ts
@@ -4,7 +4,6 @@ import type {ComponentReference, PropRecord} from 'src/types'
 export default {
   load: (): ComponentReference => ({
     BApp: {
-      sourcePath: '/BApp/BApp.vue',
       props: {
         defaults: {
           type: 'Partial<BvnComponentProps> | Ref<Partial<BvnComponentProps>>',
diff --git a/apps/docs/src/data/components/avatar.data.ts b/apps/docs/src/data/components/avatar.data.ts
index 2be94ca0d..d1a20dd6c 100644
--- a/apps/docs/src/data/components/avatar.data.ts
+++ b/apps/docs/src/data/components/avatar.data.ts
@@ -21,7 +21,6 @@ export default {
   load: (): ComponentReference => ({
     BAvatar: {
       styleSpec: {kind: StyleKind.BsvnClass},
-      sourcePath: '/BAvatar/BAvatar.vue',
       props: {
         [defaultPropSectionSymbol]: {
           ...pick(
@@ -156,7 +155,6 @@ export default {
     },
     BAvatarGroup: {
       styleSpec: {kind: StyleKind.BsvnClass},
-      sourcePath: '/BAvatar/BAvatarGroup.vue',
       props: {
         ...pick(
           buildCommonProps({
diff --git a/apps/docs/src/data/components/badge.data.ts b/apps/docs/src/data/components/badge.data.ts
index 98e0c7973..117443b3d 100644
--- a/apps/docs/src/data/components/badge.data.ts
+++ b/apps/docs/src/data/components/badge.data.ts
@@ -12,7 +12,6 @@ import {buildCommonProps} from '../../utils/commonProps'
 export default {
   load: (): ComponentReference => ({
     BBadge: {
-      sourcePath: '/BBadge/BBadge.vue',
       props: {
         [defaultPropSectionSymbol]: {
           ...pick(
diff --git a/apps/docs/src/data/components/breadcrumb.data.ts b/apps/docs/src/data/components/breadcrumb.data.ts
index 439ed7473..f9f37f83a 100644
--- a/apps/docs/src/data/components/breadcrumb.data.ts
+++ b/apps/docs/src/data/components/breadcrumb.data.ts
@@ -17,7 +17,6 @@ import {linkedBLinkSection, linkProps} from '../../utils/linkProps'
 export default {
   load: (): ComponentReference => ({
     BBreadcrumb: {
-      sourcePath: '/BBreadcrumb/BBreadcrumb.vue',
       props: {
         items: {
           type: 'BreadcrumbItemRaw[]',
@@ -45,7 +44,6 @@ export default {
       } satisfies SlotRecord<keyof BBreadcrumbSlots>,
     },
     BBreadcrumbItem: {
-      sourcePath: '/BBreadcrumb/BBreadcrumbItem.vue',
       props: {
         [defaultPropSectionSymbol]: {
           ariaCurrent: {
diff --git a/apps/docs/src/data/components/button.data.ts b/apps/docs/src/data/components/button.data.ts
index 766a89db5..577eb8337 100644
--- a/apps/docs/src/data/components/button.data.ts
+++ b/apps/docs/src/data/components/button.data.ts
@@ -21,7 +21,6 @@ export default {
   load: (): ComponentReference => ({
     BButton: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.btn'},
-      sourcePath: '/BButton/BButton.vue',
       props: {
         [defaultPropSectionSymbol]: {
           ...pick(
@@ -118,7 +117,6 @@ export default {
     },
     BCloseButton: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.btn-close'},
-      sourcePath: '/BButton/BCloseButton.vue',
       props: {
         ...pick(
           buildCommonProps({
diff --git a/apps/docs/src/data/components/buttonGroup.data.ts b/apps/docs/src/data/components/buttonGroup.data.ts
index 0bc706dff..7c24c6100 100644
--- a/apps/docs/src/data/components/buttonGroup.data.ts
+++ b/apps/docs/src/data/components/buttonGroup.data.ts
@@ -6,8 +6,8 @@ import {buildCommonProps} from '../../utils/commonProps'
 export default {
   load: (): ComponentReference => ({
     BButtonGroup: {
-      styleSpec: {kind: StyleKind.OverrideClass, value: '.btn-group'},
       sourcePath: '/BButton/BButtonGroup.vue',
+      styleSpec: {kind: StyleKind.OverrideClass, value: '.btn-group'},
       props: {
         ...pick(buildCommonProps(), ['ariaLabel', 'size', 'tag']),
         vertical: {
diff --git a/apps/docs/src/data/components/buttonToolbar.data.ts b/apps/docs/src/data/components/buttonToolbar.data.ts
index 1c725654c..a7dd650cf 100644
--- a/apps/docs/src/data/components/buttonToolbar.data.ts
+++ b/apps/docs/src/data/components/buttonToolbar.data.ts
@@ -6,8 +6,8 @@ import {buildCommonProps} from '../../utils/commonProps'
 export default {
   load: (): ComponentReference => ({
     BButtonToolbar: {
-      styleSpec: {kind: StyleKind.OverrideClass, value: '.btn-toolbar'},
       sourcePath: '/BButton/BButtonToolbar.vue',
+      styleSpec: {kind: StyleKind.OverrideClass, value: '.btn-toolbar'},
       props: {
         ...pick(buildCommonProps(), ['ariaLabel', 'role']),
         justify: {
diff --git a/apps/docs/src/data/components/card.data.ts b/apps/docs/src/data/components/card.data.ts
index c519958ef..7454d64a8 100644
--- a/apps/docs/src/data/components/card.data.ts
+++ b/apps/docs/src/data/components/card.data.ts
@@ -31,7 +31,6 @@ import {buildCommonProps} from '../../utils/commonProps'
 export default {
   load: (): ComponentReference => ({
     BCard: {
-      sourcePath: '/BCard/BCard.vue',
       props: {
         ...pick(
           buildCommonProps({
@@ -132,7 +131,6 @@ export default {
     },
     BCardBody: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.card-body, .card-img-overlay'},
-      sourcePath: '/BCard/BCardBody.vue',
       props: {
         ...pick(buildCommonProps(), [
           'bgVariant',
@@ -170,7 +168,6 @@ export default {
       } satisfies SlotRecord<keyof BCardBodySlots>,
     },
     BCardFooter: {
-      sourcePath: '/BCard/BCardFooter.vue',
       props: {
         ...pick(buildCommonProps(), [
           'bgVariant',
@@ -194,7 +191,6 @@ export default {
     },
     BCardGroup: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.card-deck, .card-group, .card-columns'},
-      sourcePath: '/BCard/BCardGroup.vue',
       props: {
         ...pick(buildCommonProps(), ['tag']),
         columns: {
@@ -216,7 +212,6 @@ export default {
       } satisfies SlotRecord<keyof BCardGroupSlots>,
     },
     BCardHeader: {
-      sourcePath: '/BCard/BCardHeader.vue',
       props: {
         ...pick(buildCommonProps(), [
           'bgVariant',
@@ -239,7 +234,6 @@ export default {
       } satisfies SlotRecord<keyof BCardHeaderSlots>,
     },
     BCardImg: {
-      sourcePath: '/BCard/BCardImg.vue',
       props: {
         [defaultPropSectionSymbol]: {
           placement: {
@@ -259,7 +253,6 @@ export default {
       slots: {},
     },
     BCardSubtitle: {
-      sourcePath: '/BCard/BCardSubtitle.vue',
       props: {
         ...pick(
           buildCommonProps({
@@ -286,7 +279,6 @@ export default {
       } satisfies SlotRecord<keyof BCardSubtitleSlots>,
     },
     BCardText: {
-      sourcePath: '/BCard/BCardText.vue',
       props: {
         ...pick(
           buildCommonProps({
@@ -310,7 +302,6 @@ export default {
       } satisfies SlotRecord<keyof BCardTextSlots>,
     },
     BCardTitle: {
-      sourcePath: '/BCard/BCardTitle.vue',
       props: {
         ...pick(
           buildCommonProps({
diff --git a/apps/docs/src/data/components/carousel.data.ts b/apps/docs/src/data/components/carousel.data.ts
index 7b3a75857..a3b9bae12 100644
--- a/apps/docs/src/data/components/carousel.data.ts
+++ b/apps/docs/src/data/components/carousel.data.ts
@@ -18,7 +18,6 @@ import {buildCommonProps} from '../../utils/commonProps'
 export default {
   load: (): ComponentReference => ({
     BCarousel: {
-      sourcePath: '/BCarousel/BCarousel.vue',
       props: {
         ...pick(buildCommonProps(), ['id']),
         background: {
@@ -181,7 +180,6 @@ export default {
     },
     BCarouselSlide: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.carousel-item'},
-      sourcePath: '/BCarousel/BCarouselSlide.vue',
       props: {
         ...pick(buildCommonProps(), ['id']),
         background: {
diff --git a/apps/docs/src/data/components/collapse.data.ts b/apps/docs/src/data/components/collapse.data.ts
index 76eb4364f..51537a421 100644
--- a/apps/docs/src/data/components/collapse.data.ts
+++ b/apps/docs/src/data/components/collapse.data.ts
@@ -36,7 +36,6 @@ const sharedSlotsScope: SlotScopeReference = {
 export default {
   load: (): ComponentReference => ({
     BCollapse: {
-      sourcePath: '/BCollapse/BCollapse.vue',
       props: {
         ...showHideProps,
         ...pick(buildCommonProps(), ['id', 'tag']),
diff --git a/apps/docs/src/data/components/dropdown.data.ts b/apps/docs/src/data/components/dropdown.data.ts
index 9afca07fd..f2804d809 100644
--- a/apps/docs/src/data/components/dropdown.data.ts
+++ b/apps/docs/src/data/components/dropdown.data.ts
@@ -30,13 +30,11 @@ import {buildCommonProps} from '../../utils/commonProps'
 export default {
   load: (): ComponentReference => ({
     BDropdown: {
-      sourcePath: '/BDropdown/BDropdown.vue',
       props: dropdownProps,
       emits: dropdownEmits,
       slots: dropdownSlots,
     },
     BDropdownDivider: {
-      sourcePath: '/BDropdown/BDropdownDivider.vue',
       props: {
         ...pick(
           buildCommonProps({
@@ -54,7 +52,6 @@ export default {
       } satisfies PropRecord<keyof BDropdownDividerProps>,
     },
     BDropdownForm: {
-      sourcePath: '/BDropdown/BDropdownForm.vue',
       props: {
         ...pick(buildCommonProps(), ['wrapperAttrs']),
         formClass: {
@@ -78,7 +75,6 @@ export default {
       } satisfies SlotRecord<keyof BDropdownFormSlots>,
     },
     BDropdownGroup: {
-      sourcePath: '/BDropdown/BDropdownGroup.vue',
       props: {
         ...pick(
           buildCommonProps({
@@ -105,7 +101,6 @@ export default {
       } satisfies SlotRecord<keyof BDropdownGroupSlots>,
     },
     BDropdownHeader: {
-      sourcePath: '/BDropdown/BDropdownHeader.vue',
       props: {
         ...pick(buildCommonProps(), ['headerClass', 'tag', 'variant', 'wrapperAttrs']),
         text: {
@@ -122,7 +117,6 @@ export default {
       } satisfies SlotRecord<keyof BDropdownHeaderSlots>,
     },
     BDropdownItem: {
-      sourcePath: '/BDropdown/BDropdownItem.vue',
       props: {
         [defaultPropSectionSymbol]: pick(buildCommonProps(), [
           'linkClass',
@@ -153,7 +147,6 @@ export default {
       } satisfies SlotRecord<keyof BDropdownItemSlots>,
     },
     BDropdownItemButton: {
-      sourcePath: '/BDropdown/BDropdownItemButton.vue',
       props: {
         ...pick(buildCommonProps(), [
           'active',
@@ -186,7 +179,6 @@ export default {
       } satisfies SlotRecord<keyof BDropdownItemButtonSlots>,
     },
     BDropdownText: {
-      sourcePath: '/BDropdown/BDropdownText.vue',
       props: {
         ...pick(
           buildCommonProps({
diff --git a/apps/docs/src/data/components/form.data.ts b/apps/docs/src/data/components/form.data.ts
index bfe7398b2..d83b779b0 100644
--- a/apps/docs/src/data/components/form.data.ts
+++ b/apps/docs/src/data/components/form.data.ts
@@ -22,7 +22,6 @@ export default {
   load: (): ComponentReference => ({
     BForm: {
       styleSpec: {kind: StyleKind.Tag, value: 'form'},
-      sourcePath: '/BForm/BForm.vue',
       props: pick(buildCommonProps(), [
         'floating',
         'id',
@@ -38,7 +37,6 @@ export default {
     },
     BFormDatalist: {
       styleSpec: {kind: StyleKind.Tag, value: 'datalist'},
-      sourcePath: '/BForm/BFormDatalist.vue',
       props: pick(
         buildCommonProps({
           options: {
@@ -79,7 +77,6 @@ export default {
     },
     BFormFloatingLabel: {
       styleSpec: {kind: StyleKind.OverrideClass, value: 'floating-label'},
-      sourcePath: '/BForm/BFormFloatingLabel.vue',
       props: {
         label: {
           type: 'string',
@@ -104,7 +101,6 @@ export default {
     },
     BFormInvalidFeedback: {
       styleSpec: {kind: StyleKind.OverrideClass, value: 'invalid-feedback, invalid-tooltip'},
-      sourcePath: '/BForm/BFormInvalidFeedback.vue',
       props: {
         ...pick(buildCommonProps(), ['ariaLive', 'id', 'role', 'state', 'tag', 'tooltip']),
         forceShow: {
@@ -127,7 +123,6 @@ export default {
     },
     BFormRow: {
       styleSpec: {kind: StyleKind.OverrideClass, value: 'row'},
-      sourcePath: '/BForm/BFormRow.vue',
       props: pick(buildCommonProps(), ['tag']) satisfies PropRecord<keyof BFormRowProps>,
       emits: {},
       slots: {
@@ -137,7 +132,6 @@ export default {
       } satisfies SlotRecord<keyof BFormRowSlots>,
     },
     BFormText: {
-      sourcePath: '/BForm/BFormText.vue',
       props: {
         ...pick(buildCommonProps(), ['id', 'tag', 'textVariant']),
         inline: {
@@ -161,7 +155,6 @@ export default {
     },
     BFormValidFeedback: {
       styleSpec: {kind: StyleKind.OverrideClass, value: 'valid-feedback, valid-tooltip'},
-      sourcePath: '/BForm/BFormValidFeedback.vue',
       props: {
         ...pick(buildCommonProps(), ['ariaLive', 'id', 'role', 'state', 'tag', 'tooltip']),
         forceShow: {
diff --git a/apps/docs/src/data/components/formCheckbox.data.ts b/apps/docs/src/data/components/formCheckbox.data.ts
index bf39ce895..64f219080 100644
--- a/apps/docs/src/data/components/formCheckbox.data.ts
+++ b/apps/docs/src/data/components/formCheckbox.data.ts
@@ -11,7 +11,6 @@ import {buildCommonProps} from '../../utils/commonProps'
 export default {
   load: (): ComponentReference => ({
     BFormCheckbox: {
-      sourcePath: '/BFormCheckbox/BFormCheckbox.vue',
       props: {
         ...pick(buildCommonProps(), [
           'ariaLabel',
@@ -117,7 +116,6 @@ export default {
       } satisfies SlotRecord<keyof BFormCheckboxSlots>,
     },
     BFormCheckboxGroup: {
-      sourcePath: '/BFormCheckbox/BFormCheckboxGroup.vue',
       props: {
         ...pick(buildCommonProps(), [
           'ariaInvalid',
diff --git a/apps/docs/src/data/components/formFile.data.ts b/apps/docs/src/data/components/formFile.data.ts
index 12fd6cd3f..e1477dc2c 100644
--- a/apps/docs/src/data/components/formFile.data.ts
+++ b/apps/docs/src/data/components/formFile.data.ts
@@ -6,7 +6,6 @@ import {buildCommonProps} from '../../utils/commonProps'
 export default {
   load: (): ComponentReference => ({
     BFormFile: {
-      sourcePath: '/BForm/BFormFile.vue',
       props: {
         ...pick(
           buildCommonProps({
@@ -37,7 +36,7 @@ export default {
           type: "'boolean' | 'user' | 'environment'",
           default: false, // TODO item not in string format
           description:
-            'When set, will instruct the browser to use the device\'s camera (if supported)',
+            "When set, will instruct the browser to use the device's camera (if supported)",
         },
         directory: {
           type: 'boolean',
diff --git a/apps/docs/src/data/components/formGroup.data.ts b/apps/docs/src/data/components/formGroup.data.ts
index 586c1936c..f4a54335e 100644
--- a/apps/docs/src/data/components/formGroup.data.ts
+++ b/apps/docs/src/data/components/formGroup.data.ts
@@ -6,7 +6,6 @@ import {buildCommonProps} from '../../utils/commonProps'
 export default {
   load: (): ComponentReference => ({
     BFormGroup: {
-      sourcePath: '/BFormGroup/BFormGroup.vue',
       props: {
         ...pick(
           buildCommonProps({
diff --git a/apps/docs/src/data/components/formInput.data.ts b/apps/docs/src/data/components/formInput.data.ts
index ede12751e..4057156cb 100644
--- a/apps/docs/src/data/components/formInput.data.ts
+++ b/apps/docs/src/data/components/formInput.data.ts
@@ -6,7 +6,6 @@ import type {BFormInputProps} from 'bootstrap-vue-next'
 export default {
   load: (): ComponentReference => ({
     BFormInput: {
-      sourcePath: '/BFormInput/BFormInput.vue',
       props: {
         ...pick(buildCommonProps(), [
           'ariaInvalid',
diff --git a/apps/docs/src/data/components/formRadio.data.ts b/apps/docs/src/data/components/formRadio.data.ts
index 9aad4c80d..30ffede6f 100644
--- a/apps/docs/src/data/components/formRadio.data.ts
+++ b/apps/docs/src/data/components/formRadio.data.ts
@@ -12,7 +12,6 @@ export default {
   load: (): ComponentReference => ({
     BFormRadio: {
       styleSpec: {kind: StyleKind.Tag, value: 'input[type="radio"]'},
-      sourcePath: '/BFormRadio/BFormRadio.vue',
       props: {
         ...pick(buildCommonProps(), [
           'ariaLabel',
@@ -85,7 +84,6 @@ export default {
     },
     BFormRadioGroup: {
       styleSpec: {kind: StyleKind.Tag, value: 'div[role="radiogroup"]'},
-      sourcePath: '/BFormRadio/BFormRadioGroup.vue',
       props: {
         ...pick(buildCommonProps(), [
           'ariaInvalid',
@@ -112,7 +110,7 @@ export default {
         buttons: {
           type: 'boolean',
           default: false, // TODO item not in string format
-          description: 'When set, renders the radio buttons in this group with button styling'
+          description: 'When set, renders the radio buttons in this group with button styling',
         },
         modelValue: {
           type: 'RadioValue | undefined',
diff --git a/apps/docs/src/data/components/FormRating.data.ts b/apps/docs/src/data/components/formRating.data.ts
similarity index 98%
rename from apps/docs/src/data/components/FormRating.data.ts
rename to apps/docs/src/data/components/formRating.data.ts
index e16397708..2ed87b2e0 100644
--- a/apps/docs/src/data/components/FormRating.data.ts
+++ b/apps/docs/src/data/components/formRating.data.ts
@@ -6,7 +6,6 @@ import {pick} from '../../utils/objectUtils'
 export default {
   load: (): ComponentReference => ({
     BFormRating: {
-      sourcePath: '/BFormRating/BFormRating.vue',
       props: {
         ...pick(buildCommonProps(), ['id', 'variant']),
         color: {
diff --git a/apps/docs/src/data/components/formSelect.data.ts b/apps/docs/src/data/components/formSelect.data.ts
index 1a2b26d2a..aa35c34c9 100644
--- a/apps/docs/src/data/components/formSelect.data.ts
+++ b/apps/docs/src/data/components/formSelect.data.ts
@@ -25,7 +25,7 @@ const optionSlot: SlotRecord = {
       },
       disabled: {
         type: 'boolean',
-        description: 'Is the option disabled'
+        description: 'Is the option disabled',
       },
     },
   },
@@ -35,7 +35,6 @@ export default {
   load: (): ComponentReference => ({
     BFormSelect: {
       styleSpec: {kind: StyleKind.Tag, value: 'select'},
-      sourcePath: '/BFormSelect/BFormSelect.vue',
       props: {
         ...pick(
           buildCommonProps({
@@ -82,7 +81,7 @@ export default {
           type: 'Numberish',
           default: 0, // TODO item not in string format
           description:
-            'When set to a number larger than 0, will set the number of display option rows. Note not all browser will respect this setting'
+            'When set to a number larger than 0, will set the number of display option rows. Note not all browser will respect this setting',
         },
       } satisfies PropRecord<keyof BFormSelectProps>,
       emits: {
@@ -114,7 +113,6 @@ export default {
     },
     BFormSelectOption: {
       styleSpec: {kind: StyleKind.Tag, value: 'option'},
-      sourcePath: '/BFormSelect/BFormSelectOption.vue',
       props: {
         value: {
           type: 'any',
@@ -135,7 +133,6 @@ export default {
     },
     BFormSelectOptionGroup: {
       styleSpec: {kind: StyleKind.Tag, value: 'optgroup'},
-      sourcePath: '/BFormSelect/BFormSelectOptionGroup.vue',
       props: {
         ...pick(
           buildCommonProps({
diff --git a/apps/docs/src/data/components/formSpinbutton.data.ts b/apps/docs/src/data/components/formSpinbutton.data.ts
index 6ec7f13a5..83d8d7c23 100644
--- a/apps/docs/src/data/components/formSpinbutton.data.ts
+++ b/apps/docs/src/data/components/formSpinbutton.data.ts
@@ -17,7 +17,6 @@ export default {
   load: (): ComponentReference => ({
     BFormSpinbutton: {
       styleSpec: {kind: StyleKind.BsvnClass},
-      sourcePath: '/BFormSpinbutton/BFormSpinbutton.vue',
       props: {
         ...pick(buildCommonProps(), [
           'ariaControls',
diff --git a/apps/docs/src/data/components/formTags.data.ts b/apps/docs/src/data/components/formTags.data.ts
index 960913476..21bedf80f 100644
--- a/apps/docs/src/data/components/formTags.data.ts
+++ b/apps/docs/src/data/components/formTags.data.ts
@@ -18,9 +18,8 @@ import {buildCommonProps} from '../../utils/commonProps'
 
 export default {
   load: (): ComponentReference => ({
-    BFormTag: {
+    BFormTags: {
       styleSpec: {kind: StyleKind.BsvnClass},
-      sourcePath: '/BFormTag/BFormTag.vue',
       props: {
         ...pick(
           buildCommonProps({
@@ -70,9 +69,8 @@ export default {
         },
       } satisfies SlotRecord<keyof BFormTagSlots>,
     },
-    BFormTags: {
+    BFormTag: {
       styleSpec: {kind: StyleKind.BsvnClass},
-      sourcePath: '/BFormTags/BFormTags.vue',
       props: {
         ...pick(
           buildCommonProps({
diff --git a/apps/docs/src/data/components/formTextarea.data.ts b/apps/docs/src/data/components/formTextarea.data.ts
index 60080f266..729c53894 100644
--- a/apps/docs/src/data/components/formTextarea.data.ts
+++ b/apps/docs/src/data/components/formTextarea.data.ts
@@ -7,7 +7,6 @@ export default {
   load: (): ComponentReference => ({
     BFormTextarea: {
       styleSpec: {kind: StyleKind.Tag, value: 'textarea'},
-      sourcePath: '/BFormTextarea/BFormTextarea.vue',
       props: {
         ...pick(buildCommonProps(), [
           'ariaInvalid',
diff --git a/apps/docs/src/data/components/gridSystem.data.ts b/apps/docs/src/data/components/gridSystem.data.ts
index a3391ca49..14a337db7 100644
--- a/apps/docs/src/data/components/gridSystem.data.ts
+++ b/apps/docs/src/data/components/gridSystem.data.ts
@@ -13,7 +13,6 @@ export default {
   load: (): ComponentReference => ({
     BContainer: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.container[-*]'},
-      sourcePath: '/BContainer/BContainer.vue',
       props: {
         ...pick(buildCommonProps(), ['tag']),
         fluid: {
@@ -40,7 +39,6 @@ export default {
       } satisfies SlotRecord<keyof BContainerSlots>,
     },
     BRow: {
-      sourcePath: '/BContainer/BRow.vue',
       props: {
         ...pick(buildCommonProps(), ['tag']),
         alignContent: {
@@ -116,7 +114,6 @@ export default {
     },
     BCol: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.col[-*]'},
-      sourcePath: '/BContainer/BCol.vue',
       props: {
         ...pick(buildCommonProps(), ['tag']),
         alignSelf: {
diff --git a/apps/docs/src/data/components/image.data.ts b/apps/docs/src/data/components/image.data.ts
index 5f0729836..9add2b45c 100644
--- a/apps/docs/src/data/components/image.data.ts
+++ b/apps/docs/src/data/components/image.data.ts
@@ -5,7 +5,6 @@ export default {
   load: (): ComponentReference => ({
     BImg: {
       styleSpec: {kind: StyleKind.BsvnClass},
-      sourcePath: '/BImg/BImg.vue',
       props: imageProps,
       emits: {},
       slots: {},
diff --git a/apps/docs/src/data/components/inputGroup.data.ts b/apps/docs/src/data/components/inputGroup.data.ts
index 29cab9dc2..2fac233c0 100644
--- a/apps/docs/src/data/components/inputGroup.data.ts
+++ b/apps/docs/src/data/components/inputGroup.data.ts
@@ -11,7 +11,6 @@ import {buildCommonProps} from '../../utils/commonProps'
 export default {
   load: (): ComponentReference => ({
     BInputGroup: {
-      sourcePath: '/BInputGroup/BInputGroup.vue',
       props: {
         ...pick(buildCommonProps(buildCommonProps()), ['id', 'size', 'tag']),
         append: {
@@ -39,7 +38,6 @@ export default {
       } satisfies SlotRecord<keyof BInputGroupSlots>,
     },
     BInputGroupText: {
-      sourcePath: '/BInputGroup/BInputGroupText.vue',
       props: {
         ...pick(buildCommonProps(buildCommonProps()), ['tag']),
         text: {
diff --git a/apps/docs/src/data/components/link.data.ts b/apps/docs/src/data/components/link.data.ts
index 5eedbd033..ee5cc76d3 100644
--- a/apps/docs/src/data/components/link.data.ts
+++ b/apps/docs/src/data/components/link.data.ts
@@ -6,7 +6,6 @@ export default {
   load: (): ComponentReference => ({
     BLink: {
       styleSpec: {kind: StyleKind.Tag, value: 'a, router-link'},
-      sourcePath: '/BLink/BLink.vue',
       props: linkProps,
       emits: {
         click: {
diff --git a/apps/docs/src/data/components/listGroup.data.ts b/apps/docs/src/data/components/listGroup.data.ts
index 11e675f49..9911a0f90 100644
--- a/apps/docs/src/data/components/listGroup.data.ts
+++ b/apps/docs/src/data/components/listGroup.data.ts
@@ -12,7 +12,6 @@ import type {linkProps} from 'src/utils/linkProps'
 export default {
   load: (): ComponentReference => ({
     BListGroup: {
-      sourcePath: '/BListGroup/BListGroup.vue',
       props: {
         ...pick(buildCommonProps(), ['tag']),
         flush: {
@@ -23,8 +22,7 @@ export default {
         horizontal: {
           type: 'boolean | Breakpoint',
           default: false, // TODO item not in string format
-          description:
-            'When set, renders the list group horizontally rather than vertically',
+          description: 'When set, renders the list group horizontally rather than vertically',
         },
         numbered: {
           type: 'boolean',
@@ -39,7 +37,6 @@ export default {
       } satisfies SlotRecord<keyof BListGroupSlots>,
     },
     BListGroupItem: {
-      sourcePath: '/BListGroup/BListGroupItem.vue',
       props: {
         ...pick(buildCommonProps(), ['tag']),
         action: {
diff --git a/apps/docs/src/data/components/modal.data.ts b/apps/docs/src/data/components/modal.data.ts
index 5cf065fc5..67d084e27 100644
--- a/apps/docs/src/data/components/modal.data.ts
+++ b/apps/docs/src/data/components/modal.data.ts
@@ -41,7 +41,6 @@ const sharedSlots: SlotScopeReference = {
 export default {
   load: (): ComponentReference => ({
     BModal: {
-      sourcePath: '/BModal/BModal.vue',
       props: {
         ...showHideProps,
         ...pick(
diff --git a/apps/docs/src/data/components/nav.data.ts b/apps/docs/src/data/components/nav.data.ts
index a636a981f..46a73c27d 100644
--- a/apps/docs/src/data/components/nav.data.ts
+++ b/apps/docs/src/data/components/nav.data.ts
@@ -26,7 +26,6 @@ import {dropdownEmits, dropdownProps, dropdownSlots} from '../../utils/dropdownC
 export default {
   load: (): ComponentReference => ({
     BNav: {
-      sourcePath: '/BNav/BNav.vue',
       props: {
         ...pick(
           buildCommonProps({
@@ -93,7 +92,6 @@ export default {
     },
     BNavForm: {
       styleSpec: {kind: StyleKind.Tag, value: 'li > form'},
-      sourcePath: '/BNav/BNavForm.vue',
       props: {
         ...pick(buildCommonProps(), [
           'floating',
@@ -128,7 +126,6 @@ export default {
       } satisfies SlotRecord<keyof BNavFormSlots>,
     },
     BNavItem: {
-      sourcePath: '/BNav/BNavItem.vue',
       props: {
         [defaultPropSectionSymbol]: {
           linkAttrs: {
@@ -173,14 +170,12 @@ export default {
     },
     BNavItemDropdown: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.nav-item.dropdown'},
-      sourcePath: '/BNav/BNavItemDropdown.vue',
       props: dropdownProps,
       emits: dropdownEmits,
       slots: dropdownSlots,
     },
     BNavText: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.navbar-text'},
-      sourcePath: '/BNav/BNavText.vue',
       props: {
         text: {
           type: 'string',
diff --git a/apps/docs/src/data/components/navbar.data.ts b/apps/docs/src/data/components/navbar.data.ts
index 61e6810b3..19f707553 100644
--- a/apps/docs/src/data/components/navbar.data.ts
+++ b/apps/docs/src/data/components/navbar.data.ts
@@ -23,7 +23,6 @@ import {linkProps, linkTo} from '../../utils/linkProps'
 export default {
   load: (): ComponentReference => ({
     BNavbar: {
-      sourcePath: '/BNavbar/BNavbar.vue',
       props: {
         ...pick(
           buildCommonProps({
@@ -76,7 +75,6 @@ export default {
       } satisfies SlotRecord<keyof BNavbarSlots>,
     },
     BNavbarBrand: {
-      sourcePath: '/BNavbar/BNavbarBrand.vue',
       props: {
         [defaultPropSectionSymbol]: pick(
           buildCommonProps({
@@ -100,7 +98,6 @@ export default {
       } satisfies SlotRecord<keyof BNavbarBrandSlots>,
     },
     BNavbarNav: {
-      sourcePath: '/BNavbar/BNavbarNav.vue',
       props: {
         ...pick(
           buildCommonProps({
@@ -141,7 +138,6 @@ export default {
       } satisfies SlotRecord<keyof BNavbarNavSlots>,
     },
     BNavbarToggle: {
-      sourcePath: '/BNavbar/BNavbarToggle.vue',
       props: {
         ...pick(
           buildCommonProps({
diff --git a/apps/docs/src/data/components/offcanvas.data.ts b/apps/docs/src/data/components/offcanvas.data.ts
index 2ed9a2975..6212fb9ff 100644
--- a/apps/docs/src/data/components/offcanvas.data.ts
+++ b/apps/docs/src/data/components/offcanvas.data.ts
@@ -14,7 +14,6 @@ export default {
   load: (): ComponentReference => ({
     BOffcanvas: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.offcanvas[-*]'},
-      sourcePath: '/BOffcanvas/BOffcanvas.vue',
       props: {
         ...showHideProps,
         ...pick(
diff --git a/apps/docs/src/data/components/orchestrator.data.ts b/apps/docs/src/data/components/orchestrator.data.ts
index f39ce9ee9..ba5392507 100644
--- a/apps/docs/src/data/components/orchestrator.data.ts
+++ b/apps/docs/src/data/components/orchestrator.data.ts
@@ -5,6 +5,7 @@ export default {
   load: (): ComponentReference => ({
     BOrchestrator: {
       sourcePath: '/BApp/BOrchestrator.vue',
+
       props: {
         noPopovers: {
           type: 'boolean',
diff --git a/apps/docs/src/data/components/overlay.data.ts b/apps/docs/src/data/components/overlay.data.ts
index a31bbb57c..e4ca195cd 100644
--- a/apps/docs/src/data/components/overlay.data.ts
+++ b/apps/docs/src/data/components/overlay.data.ts
@@ -14,7 +14,6 @@ export default {
   load: (): ComponentReference => ({
     BOverlay: {
       styleSpec: {kind: StyleKind.BsvnClass},
-      sourcePath: '/BOverlay/BOverlay.vue',
       props: {
         bgColor: {
           type: 'string',
diff --git a/apps/docs/src/data/components/pagination.data.ts b/apps/docs/src/data/components/pagination.data.ts
index 08e298eda..39bda7fca 100644
--- a/apps/docs/src/data/components/pagination.data.ts
+++ b/apps/docs/src/data/components/pagination.data.ts
@@ -27,7 +27,6 @@ const sharedScope: SlotScopeReference = {
 export default {
   load: (): ComponentReference => ({
     BPagination: {
-      sourcePath: '/BPagination/BPagination.vue',
       props: {
         ...pick(
           buildCommonProps({
diff --git a/apps/docs/src/data/components/placeholder.data.ts b/apps/docs/src/data/components/placeholder.data.ts
index 17173c8a9..068f9758d 100644
--- a/apps/docs/src/data/components/placeholder.data.ts
+++ b/apps/docs/src/data/components/placeholder.data.ts
@@ -13,7 +13,6 @@ import {type ComponentReference, type PropRecord, type SlotRecord, StyleKind} fr
 export default {
   load: (): ComponentReference => ({
     BPlaceholder: {
-      sourcePath: '/BPlaceholder/BPlaceholder.vue',
       props: {
         animation: {
           type: 'PlaceholderAnimation',
@@ -49,7 +48,6 @@ export default {
     },
     BPlaceholderCard: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.card'},
-      sourcePath: '/BPlaceholder/BPlaceholderCard.vue',
       props: {
         animation: {
           type: 'PlaceholderAnimation',
@@ -150,7 +148,6 @@ export default {
     },
     BPlaceholderWrapper: {
       styleSpec: {kind: StyleKind.None},
-      sourcePath: '/BPlaceholder/BPlaceholderWrapper.vue',
       props: {
         loading: {
           description: 'Determines whether the loading slot is displayed',
@@ -172,7 +169,6 @@ export default {
     },
     BPlaceholderTable: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.table'},
-      sourcePath: '/BPlaceholder/BPlaceholderTable.vue',
       props: {
         animation: {
           type: 'PlaceholderAnimation',
@@ -265,7 +261,6 @@ export default {
     },
     BPlaceholderButton: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.placeholder.btn'},
-      sourcePath: '/BPlaceholder/BPlaceholderButton.vue',
       props: {
         animation: {
           type: 'PlaceholderAnimation',
diff --git a/apps/docs/src/data/components/popover.data.ts b/apps/docs/src/data/components/popover.data.ts
index bca10f4b3..19ba556a9 100644
--- a/apps/docs/src/data/components/popover.data.ts
+++ b/apps/docs/src/data/components/popover.data.ts
@@ -13,7 +13,6 @@ export default {
   load: (): ComponentReference => ({
     BPopover: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.tooltip, .popover'},
-      sourcePath: '/BPopover/BPopover.vue',
       props: popoverSharedProps('popover') satisfies PropRecord<keyof BPopoverProps>,
       emits: popoverSharedEmits('popover') satisfies EmitRecord<
         keyof BPopoverEmits | 'update:model-value'
diff --git a/apps/docs/src/data/components/progress.data.ts b/apps/docs/src/data/components/progress.data.ts
index dcbcdc282..5866eedbe 100644
--- a/apps/docs/src/data/components/progress.data.ts
+++ b/apps/docs/src/data/components/progress.data.ts
@@ -11,7 +11,6 @@ import {buildCommonProps} from '../../utils/commonProps'
 export default {
   load: (): ComponentReference => ({
     BProgress: {
-      sourcePath: '/BProgress/BProgress.vue',
       props: {
         ...pick(buildCommonProps(), ['bgVariant', 'textVariant', 'variant']),
         animated: {
@@ -63,7 +62,6 @@ export default {
       } satisfies SlotRecord<keyof BProgressSlots>,
     },
     BProgressBar: {
-      sourcePath: '/BProgress/BProgressBar.vue',
       props: {
         ...pick(buildCommonProps(), ['bgVariant', 'textVariant', 'variant']),
         animated: {
diff --git a/apps/docs/src/data/components/spinner.data.ts b/apps/docs/src/data/components/spinner.data.ts
index 95ad584e8..721cbc687 100644
--- a/apps/docs/src/data/components/spinner.data.ts
+++ b/apps/docs/src/data/components/spinner.data.ts
@@ -7,7 +7,6 @@ export default {
   load: (): ComponentReference => ({
     BSpinner: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.spinner-*'},
-      sourcePath: '/BSpinner/BSpinner.vue',
       props: {
         ...pick(
           buildCommonProps({
diff --git a/apps/docs/src/data/components/table.data.ts b/apps/docs/src/data/components/table.data.ts
index b5328e76a..e457e0545 100644
--- a/apps/docs/src/data/components/table.data.ts
+++ b/apps/docs/src/data/components/table.data.ts
@@ -810,7 +810,6 @@ export default {
 
     return {
       BTable: {
-        sourcePath: '/BTable/BTable.vue',
         props: {
           [defaultPropSectionSymbol]: BTable.props,
           'BTableLite Props': BTableLite.props,
@@ -820,7 +819,6 @@ export default {
         slots: BTable.slots,
       },
       BTableLite: {
-        sourcePath: '/BTable/BTableLite.vue',
         props: {
           [defaultPropSectionSymbol]: BTableLite.props,
           'BTableSimple Props': BTableSimple.props,
@@ -829,13 +827,11 @@ export default {
         slots: BTableLite.slots,
       },
       BTableSimple: {
-        sourcePath: '/BTable/BTableSimple.vue',
         props: BTableSimple.props,
         slots: BTableSimple.slots,
       },
       BTbody: {
         styleSpec: {kind: StyleKind.Tag, value: 'tbody'},
-        sourcePath: '/BTable/BTbody.vue',
         props: pick(buildCommonProps(), ['variant']) satisfies PropRecord<keyof BTbodyProps>,
         slots: {
           default: {
@@ -845,7 +841,6 @@ export default {
       },
       BTd: {
         styleSpec: {kind: StyleKind.Tag, value: 'td'},
-        sourcePath: '/BTable/BTd.vue',
         props: {
           ...pick(buildCommonProps(), ['variant']),
           colspan: {
@@ -879,7 +874,6 @@ export default {
       },
       BTfoot: {
         styleSpec: {kind: StyleKind.Tag, value: 'tfoot'},
-        sourcePath: '/BTable/BTfoot.vue',
         props: pick(buildCommonProps(), ['variant']) satisfies PropRecord<keyof BTfootProps>,
         slots: {
           default: {
@@ -889,7 +883,6 @@ export default {
       },
       BTh: {
         styleSpec: {kind: StyleKind.Tag, value: 'th'},
-        sourcePath: '/BTable/BTh.vue',
         props: {
           ...pick(buildCommonProps(), ['variant']),
           colspan: {
@@ -926,7 +919,6 @@ export default {
       },
       BThead: {
         styleSpec: {kind: StyleKind.Tag, value: 'thead'},
-        sourcePath: '/BTable/BThead.vue',
         props: {
           variant: {
             type: 'ColorVariant',
@@ -943,7 +935,6 @@ export default {
       },
       BTr: {
         styleSpec: {kind: StyleKind.Tag, value: 'tr'},
-        sourcePath: '/BTable/BTr.vue',
         props: {
           variant: {
             type: 'ColorVariant',
diff --git a/apps/docs/src/data/components/tabs.data.ts b/apps/docs/src/data/components/tabs.data.ts
index 5e7e6749f..592c62b56 100644
--- a/apps/docs/src/data/components/tabs.data.ts
+++ b/apps/docs/src/data/components/tabs.data.ts
@@ -12,42 +12,6 @@ import {showHideProps} from '../../utils/showHideData'
 
 export default {
   load: (): ComponentReference => ({
-    BTab: {
-      styleSpec: {kind: StyleKind.OverrideClass, value: '.tab-pane'},
-      sourcePath: '/BTabs/BTab.vue',
-      props: {
-        ...pick(showHideProps, ['lazy', 'unmountLazy']),
-        ...pick(buildCommonProps(), ['active', 'disabled', 'id', 'tag', 'title']),
-        buttonId: {
-          type: 'string',
-          default: undefined,
-          description:
-            "Use a specific ID for this tab's tab control button. If not provided, one will automatically be generated",
-        },
-        noBody: {
-          type: 'boolean',
-          default: false,
-          description:
-            "When the parent b-tabs has the 'card' prop set, do not render a card-body wrapper",
-        },
-        titleItemClass: {
-          type: 'ClassValue',
-          default: undefined,
-          description: "CSS class (or classes) to apply to the tab's control button 'li' element",
-        },
-        titleLinkAttrs: {
-          type: 'AttrsValue',
-          default: undefined,
-          description: "Attributes to apply to the tab's control button inner link element",
-        },
-        titleLinkClass: {
-          type: 'ClassValue',
-          default: undefined,
-          description:
-            "CSS class (or classes) to apply to the tab's control button inner link element",
-        },
-      } satisfies PropRecord<keyof BTabProps>,
-    },
     BTabs: {
       sourcePath: '/BTabs/BTabs.vue',
       props: {
@@ -239,5 +203,41 @@ export default {
         },
       } satisfies SlotRecord<keyof BTabsSlots>,
     },
+    BTab: {
+      styleSpec: {kind: StyleKind.OverrideClass, value: '.tab-pane'},
+      sourcePath: '/BTabs/BTab.vue',
+      props: {
+        ...pick(showHideProps, ['lazy', 'unmountLazy']),
+        ...pick(buildCommonProps(), ['active', 'disabled', 'id', 'tag', 'title']),
+        buttonId: {
+          type: 'string',
+          default: undefined,
+          description:
+            "Use a specific ID for this tab's tab control button. If not provided, one will automatically be generated",
+        },
+        noBody: {
+          type: 'boolean',
+          default: false,
+          description:
+            "When the parent b-tabs has the 'card' prop set, do not render a card-body wrapper",
+        },
+        titleItemClass: {
+          type: 'ClassValue',
+          default: undefined,
+          description: "CSS class (or classes) to apply to the tab's control button 'li' element",
+        },
+        titleLinkAttrs: {
+          type: 'AttrsValue',
+          default: undefined,
+          description: "Attributes to apply to the tab's control button inner link element",
+        },
+        titleLinkClass: {
+          type: 'ClassValue',
+          default: undefined,
+          description:
+            "CSS class (or classes) to apply to the tab's control button inner link element",
+        },
+      } satisfies PropRecord<keyof BTabProps>,
+    },
   }),
 }
diff --git a/apps/docs/src/data/components/toast.data.ts b/apps/docs/src/data/components/toast.data.ts
index a6da442ea..7d987912f 100644
--- a/apps/docs/src/data/components/toast.data.ts
+++ b/apps/docs/src/data/components/toast.data.ts
@@ -13,7 +13,6 @@ import {buildDismissibleEmits, showHideProps} from '../../utils/showHideData'
 export default {
   load: (): ComponentReference => ({
     BToast: {
-      sourcePath: '/BToast/BToast.vue',
       props: {
         [defaultPropSectionSymbol]: {
           ...omit(showHideProps, ['modelValue']),
diff --git a/apps/docs/src/data/components/tooltip.data.ts b/apps/docs/src/data/components/tooltip.data.ts
index 69d178222..6c521f94a 100644
--- a/apps/docs/src/data/components/tooltip.data.ts
+++ b/apps/docs/src/data/components/tooltip.data.ts
@@ -11,11 +11,10 @@ import {popoverSharedEmits, popoverSharedProps} from '../../utils/popover-shared
 
 export default {
   load: (): ComponentReference => ({
-    BPopover: {
+    BTooltip: {
       styleSpec: {kind: StyleKind.OverrideClass, value: '.tooltip, .popover'},
-      sourcePath: '/BTooltip.vue',
       props: {
-        ...popoverSharedProps('popover'),
+        ...popoverSharedProps('tooltip'),
         interactive: {
           type: 'boolean',
           default: false,
@@ -23,16 +22,16 @@ export default {
             'Whether the tooltip is interactive (can be hovered/focused without closing).',
         },
       } satisfies PropRecord<keyof BTooltipProps>,
-      emits: popoverSharedEmits('popover') satisfies EmitRecord<
+      emits: popoverSharedEmits('tooltip') satisfies EmitRecord<
         keyof BTooltipEmits | 'update:model-value'
       >,
       slots: {
         title: {
-          description: 'Content for the popover title.',
+          description: 'Content for the tooltip title.',
           scope: showHideSlotsData,
         },
         default: {
-          description: 'Content for the popover body.',
+          description: 'Content for the tooltip body.',
           scope: showHideSlotsData,
         },
         target: {
diff --git a/apps/docs/src/data/composables.data.ts b/apps/docs/src/data/composables.data.ts
new file mode 100644
index 000000000..ddb4e84de
--- /dev/null
+++ b/apps/docs/src/data/composables.data.ts
@@ -0,0 +1,16 @@
+import {createContentLoader} from 'vitepress'
+import {type DocItem, transformDocData} from '../utils/dataLoaderUtils'
+
+export type ComposableData = DocItem
+
+declare const data: ComposableData[]
+export {data}
+
+export default createContentLoader('docs/composables/*.md', {
+  transform(rawData): ComposableData[] {
+    return transformDocData(rawData, 'composables', {
+      filterByDescription: true,
+      useTitleCase: false, // Keep original casing for composables (e.g., useColorMode)
+    })
+  },
+})
diff --git a/apps/docs/src/data/configurations.data.ts b/apps/docs/src/data/configurations.data.ts
new file mode 100644
index 000000000..eeacc7c1e
--- /dev/null
+++ b/apps/docs/src/data/configurations.data.ts
@@ -0,0 +1,16 @@
+import {createContentLoader} from 'vitepress'
+import {type DocItem, transformDocData} from '../utils/dataLoaderUtils'
+
+export type ConfigurationData = DocItem
+
+declare const data: ConfigurationData[]
+export {data}
+
+export default createContentLoader('docs/configurations/*.md', {
+  transform(rawData): ConfigurationData[] {
+    return transformDocData(rawData, 'configurations', {
+      filterByDescription: true,
+      useTitleCase: true,
+    })
+  },
+})
diff --git a/apps/docs/src/data/directives.data.ts b/apps/docs/src/data/directives.data.ts
new file mode 100644
index 000000000..de6f709e2
--- /dev/null
+++ b/apps/docs/src/data/directives.data.ts
@@ -0,0 +1,16 @@
+import {createContentLoader} from 'vitepress'
+import {type DocItem, transformDocData} from '../utils/dataLoaderUtils'
+
+export type Directive = DocItem
+
+declare const data: Directive[]
+export {data}
+
+export default createContentLoader('docs/directives/*.md', {
+  transform(rawData): Directive[] {
+    return transformDocData(rawData, 'directives', {
+      filterByDescription: false, // Directives don't filter by description
+      useTitleCase: false, // Keep original casing for directives (e.g., BTooltip)
+    })
+  },
+})
diff --git a/apps/docs/src/data/reference.data.ts b/apps/docs/src/data/reference.data.ts
new file mode 100644
index 000000000..4aa5d26a8
--- /dev/null
+++ b/apps/docs/src/data/reference.data.ts
@@ -0,0 +1,16 @@
+import {createContentLoader} from 'vitepress'
+import {type DocItem, transformDocData} from '../utils/dataLoaderUtils'
+
+export type ReferenceData = DocItem
+
+declare const data: ReferenceData[]
+export {data}
+
+export default createContentLoader('docs/reference/*.md', {
+  transform(rawData): ReferenceData[] {
+    return transformDocData(rawData, 'reference', {
+      filterByDescription: true,
+      useTitleCase: true, // Use title case for reference docs (e.g., Color Variants)
+    })
+  },
+})
diff --git a/apps/docs/src/docs/components.md b/apps/docs/src/docs/components.md
index 3124505a7..e244bc120 100644
--- a/apps/docs/src/docs/components.md
+++ b/apps/docs/src/docs/components.md
@@ -1,220 +1,10 @@
-# Components - Table of Contents
+---
+description: BootstrapVueNext components list.
+---
 
-<div class="lead mb-5">
-
-BootstrapVueNext components list.
-
-</div>
-
-<TableOfContentsCard v-for="component in computedComponentsList" :key="component.name" class="my-3" :name="component.name" :description="component.description" :route="component.route" />
+<TableOfContentsCard v-for="component in data" :key="component.name" class="my-3" :name="component.name" :description="component.description" :route="component.url" />
 
 <script setup lang="ts">
-import {withBase} from 'vitepress'
-import {computed} from 'vue'
+import {data} from '../data/components.data'
 import TableOfContentsCard from '../components/TableOfContentsCard.vue'
-
-const routeLocation = (name: string): string => withBase(`/docs/components/${name.toLowerCase()}`).trim().replaceAll(/\s+/g, '-')
-
-const componentList: {name: string; description: string}[] = [
-  {
-    name: 'App',
-    description: 'The root component for your bootstrap-vue-next application',
-  },
-  {
-    name: 'Accordion',
-    description:
-      'Easily toggle content visibility on your pages. Includes support for making accordions',
-  },
-  {
-    name: 'Alert',
-    description:
-      'Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages',
-  },
-  {
-    name: 'Avatar',
-    description:
-      'Custom component typically used to display a user profile as a picture, an icon, or short text',
-  },
-  {
-    name: 'Badge',
-    description: 'Small and adaptive tag for adding context to just about any content',
-  },
-  {
-    name: 'Breadcrumb',
-    description: `Indicate the current page's location within a navigational hierarchy.`,
-  },
-  {
-    name: 'Button',
-    description: 'Custom button component for actions in forms, dialogs, and more',
-  },
-  {
-    name: 'Button Group',
-    description: 'Group a series of buttons on a single line or stack them in a vertical column',
-  },
-  {
-    name: 'Button Toolbar',
-    description: 'Group a series of button-groups and/or input-groups together on a single line',
-  },
-  {
-    name: 'Card',
-    description:
-      'A flexible and extensible content container. It includes options for headers and footers, a wide variety of content',
-  },
-  {
-    name: 'Carousel',
-    description:
-      'A slideshow component for cycling through elements—images or slides of text—like a carousel',
-  },
-  {
-    name: 'Collapse',
-    description:
-      'Easily toggle visibility of almost any content on your pages in a vertically collapsing container',
-  },
-  {
-    name: 'Dropdown',
-    description:
-      'Toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format',
-  },
-  {
-    name: 'Form',
-    description:
-      'Form component and helper components that optionally support inline form styles and validation states',
-  },
-  {
-    name: 'Form Checkbox',
-    description:
-      'Custom checkbox input and checkbox group to replace the browser default checkbox input, built on top of semantic and accessible markup. Optionally supports switch styling',
-  },
-  {
-    name: 'Form Group',
-    description: 'The easiest way to add some structure to forms',
-  },
-  {
-    name: 'Form Input',
-    description:
-      'Create various type inputs such as text, password, number, URL, email, search, range, date, and more',
-  },
-  {
-    name: 'Form Radio',
-    description: `Bootstrap's custom radio input to replace the browser default radio input.`,
-  },
-  {
-    name: 'Form Select',
-    description: 'Bootstrap custom select using custom styles',
-  },
-  {
-    name: 'Form Tags',
-    description:
-      'Lightweight custom tagged input form control, with options for customized interface rendering, duplicate tag detection, and optional tag validation',
-  },
-  {
-    name: 'Form Textarea',
-    description:
-      'Create multi-line text inputs with support for auto height sizing, minimum and maximum number of rows, and contextual states',
-  },
-  {
-    name: 'Grid System',
-    description: 'Lightweight utility components for making a flexible, responsive user interface',
-  },
-  {
-    name: 'Image',
-    description: 'Image component with responsive behavior',
-  },
-  {
-    name: 'Input Group',
-    description:
-      'Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs. ',
-  },
-  {
-    name: 'Link',
-    description: 'A simple wrapper for standard navigation components',
-  },
-  {
-    name: 'List Group',
-    description:
-      'A flexible and powerful component for displaying a series of content. List Group items can be modified to support just about any content within',
-  },
-  {
-    name: 'Modal',
-    description:
-      'Modals are flexible dialog, interruptive, prompts that can support a variety of use cases',
-  },
-  {
-    name: 'Nav',
-    description: 'The Nav component is a simple wrapper for building navigation components',
-  },
-  {
-    name: 'Navbar',
-    description:
-      'The Navbar is typically the central location for branding, navigation, and other elements on the header',
-  },
-  {
-    name: 'Orchestrator',
-    description: 'The Orchestrator component manages the rendering and positioning of dynamic components like modals, toasts, and popovers. Only for advanced use cases.',
-  },
-  {
-    name: 'Offcanvas',
-    description:
-      'Offcanvas components are hidden sidebars for your app, usually opened by some event',
-  },
-  {
-    name: 'Overlay',
-    description: 'Visually obscure a particular element or component and its content',
-  },
-  {
-    name: 'Pagination',
-    description:
-      'Quick first, previous, next, last, and page buttons for pagination control of another component',
-  },
-  {
-    name: 'Placeholder',
-    description:
-      'Placeholder components can create a unique appearance to indicate something may still be loading',
-  },
-  {
-    name: 'Popover',
-    description: 'Popover provides a tooltip behavior over another component',
-  },
-  {
-    name: 'Progress',
-    description:
-      'A custom progress component for displaying simple or complex progress bars, featuring support for horizontally stacked bars, animated backgrounds, and text labels',
-  },
-  {
-    name: 'Spinner',
-    description: `The spinner component can be used to show the loading state in your projects. They're rendered only with basic HTML and CSS as a lightweight Vue functional component.`,
-  },
-  {
-    name: 'Table',
-    description:
-      'For displaying tabular data. Table supports pagination, filtering, sorting, custom rendering, events, and asynchronous data. For a simple display of tabular data without all the fancy features, use TableSimple',
-  },
-  {
-    name: 'Tabs',
-    description: 'Create a widget of tabbable panes of local content',
-  },
-  {
-    name: 'Toast',
-    description:
-      'Push notifications to your visitors with a toast, a lightweight and easily customizable alert message',
-  },
-  {
-    name: 'Form Spinbutton',
-    description: ''
-  },
-    {
-      name: 'Tooltip',
-      description: 'Tooltip provides a tooltip behavior over another component',
-    },
-]
-
-const computedComponentsList = computed(() =>
-  componentList
-    .map((el) => ({
-      name: el.name,
-      description: el.description,
-      route: routeLocation(el.name),
-    }))
-    .sort((a, b) => a.name.localeCompare(b.name))
-)
 </script>
diff --git a/apps/docs/src/docs/components/accordion.md b/apps/docs/src/docs/components/accordion.md
index 6c5300a69..ef7943ccb 100644
--- a/apps/docs/src/docs/components/accordion.md
+++ b/apps/docs/src/docs/components/accordion.md
@@ -1,10 +1,6 @@
-# Accordion
-
-<PageHeader>
-
-Build vertically collapsing accordions in combination with `BCollapse` component.
-
-</PageHeader>
+---
+description: 'Build vertically collapsing accordions in combination with `BCollapse` component.'
+---
 
 ## How it works
 
@@ -33,9 +29,3 @@ Add `flush` property to remove the default background-color, some borders, and s
 Add `free` property to make accordion items stay open when another item is opened.
 
 <<< DEMO ./demo/AccordionFree.vue#template{vue-html}
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/accordion.data'
-</script>
diff --git a/apps/docs/src/docs/components/alert.md b/apps/docs/src/docs/components/alert.md
index 18e446288..efcdfee37 100644
--- a/apps/docs/src/docs/components/alert.md
+++ b/apps/docs/src/docs/components/alert.md
@@ -1,10 +1,6 @@
-# Alert
-
-<PageHeader>
-
-Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
-
-</PageHeader>
+---
+description: 'Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.'
+---
 
 ## Overview
 
@@ -76,9 +72,3 @@ The BAlert exposes four functions to manipulate the state of an active timer: `p
 
 - `Immediate`: Setting this property to `false` will cause a timer to not start immediately upon render. A timer that is not started is not rendered. It must manually be started with `resume()` or `restart()`. Default is `true`.
 - `showOnPause`: Setting this property to `false` will override the behavior of showing the Alert when the timer is paused. Default is `true`.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/alert.data'
-</script>
diff --git a/apps/docs/src/docs/components/app.md b/apps/docs/src/docs/components/app.md
index a5c188dc1..59b191405 100644
--- a/apps/docs/src/docs/components/app.md
+++ b/apps/docs/src/docs/components/app.md
@@ -1,10 +1,6 @@
-# BApp
-
-<PageHeader>
-
-The `BApp` component is the new recommended way to configure bootstrap-vue-next. It replaces the plugin-based approach and provides better defaults management, orchestrator integration, and improved type safety.
-
-</PageHeader>
+---
+description: 'The `BApp` component is the new recommended way to configure bootstrap-vue-next. It replaces the plugin-based approach and provides better defaults management, orchestrator integration, and improved type safety.'
+---
 
 ## Overview
 
@@ -126,9 +122,3 @@ The `BApp` component automatically provides several internal services:
 - The component uses Vue's provide/inject system for dependency injection
 - All orchestrators are automatically teleported when `teleportTo` is specified
 - The component inherits all attributes and passes them to the default slot
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/app.data'
-</script>
diff --git a/apps/docs/src/docs/components/avatar.md b/apps/docs/src/docs/components/avatar.md
index 849865a06..1ace614f7 100644
--- a/apps/docs/src/docs/components/avatar.md
+++ b/apps/docs/src/docs/components/avatar.md
@@ -1,13 +1,10 @@
-# Avatar
-
-<PageHeader>
-
-Avatars are a custom component, and are typically used to display a user profile as a
-picture or short text. `BAvatar` provides several props for customizing its
-appearance such as color variant and roundness, and optionally supports acting as a button, link,
-or a [router link](/docs/reference/router-links).
-
-</PageHeader>
+---
+description: >
+  Avatars are a custom component, and are typically used to display a user profile as a
+  picture or short text. `BAvatar` provides several props for customizing its
+  appearance such as color variant and roundness, and optionally supports acting as a button, link,
+  or a [router link](/docs/reference/router-links).
+---
 
 ## Overview
 
@@ -246,9 +243,3 @@ the `to` or `href` props when changing routes or changing URLs) for accessibilit
 Avatars are based upon `BBadge` and `BButton` components, and as such, rely upon Bootstrap's
 `badge-*` and `btn-*` variant classes, as well as the `rounded-*`
 [utility classes](/docs/reference/utility-classes).
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/avatar.data'
-</script>
diff --git a/apps/docs/src/docs/components/badge.md b/apps/docs/src/docs/components/badge.md
index eb51ca961..35edf5e43 100644
--- a/apps/docs/src/docs/components/badge.md
+++ b/apps/docs/src/docs/components/badge.md
@@ -1,10 +1,6 @@
-# Badge
-
-<PageHeader>
-
-Documentation and examples for badges, our small count and labeling component.
-
-</PageHeader>
+---
+description: 'Documentation and examples for badges, our small count and labeling component.'
+---
 
 ## Examples
 
@@ -65,9 +61,3 @@ Use the `pill` prop to make badges more rounded with a larger border-radius.
 Quickly provide actionable badges by specifying either the `href` prop (links) or `to` prop (router-links):
 
 <<< DEMO ./demo/BadgeActionable.vue#template{vue-html}
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/badge.data'
-</script>
diff --git a/apps/docs/src/docs/components/breadcrumb.md b/apps/docs/src/docs/components/breadcrumb.md
index a2c5a4e31..294afb7dc 100644
--- a/apps/docs/src/docs/components/breadcrumb.md
+++ b/apps/docs/src/docs/components/breadcrumb.md
@@ -1,10 +1,6 @@
-# Breadcrumb
-
-<PageHeader>
-
-Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
-
-</PageHeader>
+---
+description: 'Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.'
+---
 
 ## Overview
 
@@ -39,9 +35,3 @@ Two slots are provided to put additional content before and after the breadcrumb
 Use slot `prepend` to put content before the breadcrumb. Use slot `append` to put content after the breadcrumb.
 
 <<< DEMO ./demo/BreadcrumbSlots.vue#template{vue-html}
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/breadcrumb.data'
-</script>
diff --git a/apps/docs/src/docs/components/button-group.md b/apps/docs/src/docs/components/button-group.md
index 54700fae9..f18c8ecfe 100644
--- a/apps/docs/src/docs/components/button-group.md
+++ b/apps/docs/src/docs/components/button-group.md
@@ -1,10 +1,6 @@
-# Button Group
-
-<PageHeader>
-
-Group a series of buttons together on a single line or stack them in a vertical column with `BButtonGroup`.
-
-</PageHeader>
+---
+description: 'Group a series of buttons together on a single line or stack them in a vertical column with `BButtonGroup`.'
+---
 
 ## Overview
 
@@ -41,9 +37,3 @@ that split dropdown menus are not supported when prop `vertical` is set.
 
 Also check out the [`BButtonToolbar`](/docs/components/button-toolbar) component for generating
 toolbars containing button groups and input groups.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/buttonGroup.data'
-</script>
diff --git a/apps/docs/src/docs/components/button-toolbar.md b/apps/docs/src/docs/components/button-toolbar.md
index 9197a41e4..0651e1f6c 100644
--- a/apps/docs/src/docs/components/button-toolbar.md
+++ b/apps/docs/src/docs/components/button-toolbar.md
@@ -1,6 +1,6 @@
-# Button Toolbar
-
-Group a series of button-groups and/or input-groups together on a single line.
+---
+description: 'Group a series of button-groups and/or input-groups together on a single line, with support for sizing, justification, and mixing different control types.'
+---
 
 **Example 1:** with button groups
 
@@ -32,9 +32,3 @@ Make the toolbar span the maximum available width, by increasing spacing between
 input groups and dropdowns, by setting the prop `justify`.
 
 <<< DEMO ./demo/ButtonToolbarJustify.vue#template{vue-html}
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/buttonToolbar.data'
-</script>
diff --git a/apps/docs/src/docs/components/button.md b/apps/docs/src/docs/components/button.md
index 75a0e95b4..ebcdbd16f 100644
--- a/apps/docs/src/docs/components/button.md
+++ b/apps/docs/src/docs/components/button.md
@@ -1,10 +1,6 @@
-# Button
-
-<PageHeader>
-
-Use Bootstrap's custom `BButton` component for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
-
-</PageHeader>
+---
+description: "Use Bootstrap's custom `BButton` component for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more."
+---
 
 ## Overview
 
@@ -146,9 +142,3 @@ When the `href` is set to any other value (~~or the `to` prop is used~~), `role=
 added, nor will the keyboard event listeners be enabled.
 
 <NotYetImplemented>The `role="button"` behavior is partially implemented, but the keyboard listen are not</NotYetImplemented>
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/button.data'
-</script>
diff --git a/apps/docs/src/docs/components/card.md b/apps/docs/src/docs/components/card.md
index 7d8ee93b2..4f24cc48f 100644
--- a/apps/docs/src/docs/components/card.md
+++ b/apps/docs/src/docs/components/card.md
@@ -1,10 +1,6 @@
-# Card
-
-<PageHeader>
-
-A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
-
-</PageHeader>
+---
+description: 'A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.'
+---
 
 ## Overview
 
@@ -206,9 +202,3 @@ Heads up! Your mileage with card columns may vary. To prevent cards breaking acr
 set them to display: inline-block as column-break-inside: avoid is not a bulletproof solution yet.
 
 <<< DEMO ./demo/CardColumn.vue#template{vue-html}
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/card.data'
-</script>
diff --git a/apps/docs/src/docs/components/carousel.md b/apps/docs/src/docs/components/carousel.md
index 101c8195b..e79fd91f7 100644
--- a/apps/docs/src/docs/components/carousel.md
+++ b/apps/docs/src/docs/components/carousel.md
@@ -1,14 +1,11 @@
-# Carousel
+---
+description: >
+  The carousel is a slideshow for cycling through a series of content. It works with a series of images, text,
+  or custom markup. It also includes support for previous/next controls and indicators.
 
-<PageHeader>
-
-The carousel is a slideshow for cycling through a series of content. It works with a series of images, text,
-or custom markup. It also includes support for previous/next controls and indicators.
-
-Nested carousels are not supported. You should also be aware that carousels in general can often cause
-usability and accessibility challenges.
-
-</PageHeader>
+  Nested carousels are not supported. You should also be aware that carousels in general can often cause
+  usability and accessibility challenges.
+---
 
 ## Basic usage
 
@@ -130,9 +127,3 @@ You are also able to use the built in methods for going to the next, or previous
 ## Full Example
 
 <<< DEMO ./demo/CarouselFull.vue#template{vue-html}
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/carousel.data'
-</script>
diff --git a/apps/docs/src/docs/components/collapse.md b/apps/docs/src/docs/components/collapse.md
index f2c69845f..088eed7cc 100644
--- a/apps/docs/src/docs/components/collapse.md
+++ b/apps/docs/src/docs/components/collapse.md
@@ -1,12 +1,9 @@
-# Collapse
-
-<PageHeader>
-
-Easily toggle visibility of almost any content on your pages in a vertically collapsing container.
-Includes support for making accordions. Visibility can be easily toggled with our
-[`v-b-toggle` directive](/docs/directives/BToggle), or via [`v-model`](#v-model-support).
-
-</PageHeader>
+---
+description: >
+  Easily toggle visibility of almost any content on your pages in a vertically collapsing container.
+  Includes support for making accordions. Visibility can be easily toggled with our
+  [`v-b-toggle` directive](/docs/directives/BToggle), or via [`v-model`](#v-model-support).
+---
 
 <<< DEMO ./demo/CollapseOverview.vue#template{vue-html}
 
@@ -99,9 +96,3 @@ trigger elements may be inaccessible to keyboard or screen reader users. If you
 something other than a button or link (or similar component), you should add the attributes
 `tabindex="0"` and `role="button"` to allow users of assistive technology to reach your trigger
 element.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/collapse.data'
-</script>
diff --git a/apps/docs/src/docs/components/dropdown.md b/apps/docs/src/docs/components/dropdown.md
index ac9487ff2..076bd2fc7 100644
--- a/apps/docs/src/docs/components/dropdown.md
+++ b/apps/docs/src/docs/components/dropdown.md
@@ -1,10 +1,6 @@
-# Dropdown
-
-<PageHeader>
-
-Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.
-
-</PageHeader>
+---
+description: 'Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.'
+---
 
 `BDropdown` components are toggleable, contextual overlays for displaying lists of links, and more. They're toggled by clicking (or pressing space or enter when focused), not by hovering; this is an [intentional design decision](https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/).
 
@@ -319,9 +315,3 @@ The dropdown menu is rendered with semantic `<ul>` and `<li>` elements for acces
 
 - [`BNavItemDropdown`](/docs/components/nav#dropdown) for dropdown support inside `BNav` and `BNavbar`
 - [Router Link Support](/docs/reference/router-links) reference for information about router-link specific props available on `BDropdownItem`
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/dropdown.data'
-</script>
diff --git a/apps/docs/src/docs/components/form-checkbox.md b/apps/docs/src/docs/components/form-checkbox.md
index 453ae6423..e1a2f3503 100644
--- a/apps/docs/src/docs/components/form-checkbox.md
+++ b/apps/docs/src/docs/components/form-checkbox.md
@@ -1,10 +1,6 @@
-# Form Checkbox
-
-<PageHeader>
-
-For cross browser consistency, `BFormCheckboxGroup` and `BFormCheckbox` use Bootstrap's custom checkbox input to replace the browser default checkbox input. It is built on top of semantic and accessible markup, so it is a solid replacement for the default checkbox input.
-
-</PageHeader>
+---
+description: "For cross browser consistency, `BFormCheckboxGroup` and `BFormCheckbox` use Bootstrap's custom checkbox input to replace the browser default checkbox input. It is built on top of semantic and accessible markup, so it is a solid replacement for the default checkbox input."
+---
 
 ## Single checkbox
 
@@ -205,9 +201,3 @@ The _indeterminate_ state is **visual only**. The checkbox is still either check
 **Indeterminate checkbox use-case example:**
 
 <<< DEMO ./demo/CheckboxIndeterminate.vue
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/formCheckbox.data'
-</script>
diff --git a/apps/docs/src/docs/components/form-file.md b/apps/docs/src/docs/components/form-file.md
index 639256317..56a92a3ff 100644
--- a/apps/docs/src/docs/components/form-file.md
+++ b/apps/docs/src/docs/components/form-file.md
@@ -1,10 +1,6 @@
-# Form File
-
-<PageHeader>
-
-File input control that supports single and multiple file modes
-
-</PageHeader>
+---
+description: 'File input control that supports single and multiple file modes, drag and drop, file type restrictions, and directory selection with contextual state feedback.'
+---
 
 <BAlert :model-value="true" variant="danger">
 The current variation is subject to change pre v1.0. The implementation may change to become closer to the Bootstrap-vue implementation based on feedback <BLink target="_blank" href="https://github.com/bootstrap-vue-next/bootstrap-vue-next/discussions/1213" rel="noopener">vote here</BLink>
@@ -79,9 +75,3 @@ The BFormFile exposes functions to control the component: `focus(), blur(), rese
 1. Focus: focuses the file input
 2. Blur: blurs the file input focus
 3. Reset: Resets the file selection so that no file is selected
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/formFile.data'
-</script>
diff --git a/apps/docs/src/docs/components/form-group.md b/apps/docs/src/docs/components/form-group.md
index 2af602781..d35286bcf 100644
--- a/apps/docs/src/docs/components/form-group.md
+++ b/apps/docs/src/docs/components/form-group.md
@@ -1,10 +1,6 @@
-# Form Group
-
-<PageHeader>
-
-The `BFormGroup` component is the easiest way to add some structure to forms. Its purpose is to pair form controls with a legend or label, and to provide help text and invalid/valid feedback text, as well as visual (color) contextual state feedback.
-
-</PageHeader>
+---
+description: 'The `BFormGroup` component is the easiest way to add some structure to forms. Its purpose is to pair form controls with a legend or label, and to provide help text and invalid/valid feedback text, as well as visual (color) contextual state feedback.'
+---
 
 <<< DEMO ./demo/FormGroupOverview.vue
 
@@ -222,9 +218,3 @@ When the `BFormGroup` has a `label-for` prop set, the `aria-describedby` attribu
 auto-assigned to the input. When the form group has multiple form controls, make sure to set the
 attribute to each control yourself by using the `ariaDescribedby` prop value from the optionally
 scoped `default` slot.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/formGroup.data'
-</script>
diff --git a/apps/docs/src/docs/components/form-input.md b/apps/docs/src/docs/components/form-input.md
index ed848c791..f9b2a2de7 100644
--- a/apps/docs/src/docs/components/form-input.md
+++ b/apps/docs/src/docs/components/form-input.md
@@ -1,10 +1,6 @@
-# Form Input
-
-<PageHeader>
-
-Create various type inputs such as: `text`, `password`, `number`, `url`, `email`, `search`, `range`, `date` and more.
-
-</PageHeader>
+---
+description: 'Create various type inputs such as: `text`, `password`, `number`, `url`, `email`, `search`, `range`, `date` and more.'
+---
 
 <<< DEMO ./demo/FormInputOverview.vue
 
@@ -276,9 +272,3 @@ these methods and properties. Support will vary based on input type.
 e.g. With the same setup as above, call `foo?.value?.element?.focus` to set the foccus on the input element.
 
 <<< DEMO ./demo/FormInputMethods.vue
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/formInput.data'
-</script>
diff --git a/apps/docs/src/docs/components/form-radio.md b/apps/docs/src/docs/components/form-radio.md
index 9ab578b13..be0213a51 100644
--- a/apps/docs/src/docs/components/form-radio.md
+++ b/apps/docs/src/docs/components/form-radio.md
@@ -1,10 +1,6 @@
-# Form Radio
-
-<PageHeader>
-
-For cross browser consistency, `BFormRadioGroup` and `BFormRadio` uses Bootstrap's custom radio input to replace the browser default radio input. It is built on top of semantic and accessible markup, so it is a solid replacement for the default radio input.
-
-</PageHeader>
+---
+description: "For cross browser consistency, `BFormRadioGroup` and `BFormRadio` uses Bootstrap's custom radio input to replace the browser default radio input. It is built on top of semantic and accessible markup, so it is a solid replacement for the default radio input."
+---
 
 ## Individual radios
 
@@ -173,9 +169,3 @@ Supported `aria-invalid` values are:
 - `true` The value has failed validation
 
 `aria-invalid` is automatically set to `true` if the `state` prop is `false`.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/formRadio.data'
-</script>
diff --git a/apps/docs/src/docs/components/form-rating.md b/apps/docs/src/docs/components/form-rating.md
index f59836b36..05190eaaa 100644
--- a/apps/docs/src/docs/components/form-rating.md
+++ b/apps/docs/src/docs/components/form-rating.md
@@ -1,10 +1,6 @@
-# Form Rating
-
-<PageHeader>
-
-BootstrapVue's custom star rating component, `BFormRating`, is for entering or displaying a rating value. The component is fully WAI-ARIA accessible and supports keyboard control.
-
-</PageHeader>
+---
+description: 'Custom star rating component for entering or displaying rating values. Fully WAI-ARIA accessible with keyboard control, supporting both interactive and readonly modes with customizable styling and icons.'
+---
 
 ## Overview
 
@@ -116,7 +112,7 @@ Optionally show a clear icon via the `show-clear` prop. The value will be set to
 
 #### Custom clear icon
 
-You can replace the default clear icon using the `#icon-clear` slot.  
+You can replace the default clear icon using the `#icon-clear` slot.
 This slot is **not scoped** — you can insert any content you like.
 
 <<< DEMO ./demo/RatingCustomClear.vue
@@ -193,15 +189,3 @@ Keyboard navigation is employed to select the rating value, and mimics the keybo
 - <kbd>Right</kbd> or <kbd>Up</kbd> will increment the rating value by `1`
 - When the [`locale`](#internationalization) resolves to a right-to-left language, the
   <kbd>Left</kbd> and <kbd>Right</kbd> behaviour is reversed.
-
-<ComponentReference :data="data" />
-
-<script lang="ts">
-import {data} from '../../data/components/FormRating.data'
-
-export default {
-setup() {
-return {data}
-}
-}
-</script>
diff --git a/apps/docs/src/docs/components/form-select.md b/apps/docs/src/docs/components/form-select.md
index 910b83ba7..6e0f7baf3 100644
--- a/apps/docs/src/docs/components/form-select.md
+++ b/apps/docs/src/docs/components/form-select.md
@@ -1,10 +1,6 @@
-# Form Select
-
-<PageHeader>
-
-Bootstrap custom `<select>` using custom styles. Optionally specify options based on an array, array of objects, or an object.
-
-</PageHeader>
+---
+description: 'Bootstrap custom `<select>` using custom styles. Optionally specify options based on an array, array of objects, or an object.'
+---
 
 ## Overview
 
@@ -148,9 +144,3 @@ Set the prop `plain` to have a native browser `<select>` rendered (although the
 
 A `plain` select will always be rendered for non `multiple` selects which have the `select-size`
 prop set to a value greater than 1.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/formSelect.data'
-</script>
diff --git a/apps/docs/src/docs/components/form-spinbutton.md b/apps/docs/src/docs/components/form-spinbutton.md
index b34c06121..5665ada9e 100644
--- a/apps/docs/src/docs/components/form-spinbutton.md
+++ b/apps/docs/src/docs/components/form-spinbutton.md
@@ -1,10 +1,6 @@
-# Form Spinbutton
-
-<PageHeader>
-
-The Form SpinButton allows the user to adjusting a numeric range with finite control
-
-</PageHeader>
+---
+description: 'The Form SpinButton allows the user to adjusting a numeric range with finite control'
+---
 
 ## Overview
 
@@ -123,9 +119,3 @@ The following keyboard controls are available when the spin button is focused:
 - <kbd>PageDown</kbd> Decreases the value by the step amount times the `repeat-step-multiplier` amount
 
 Note that the `repeat-delay`, `repeat-threshold` and `repeat-interval` only apply to the <kbd>ArrowUp</kbd> or <kbd>ArrowDown</kbd> keys
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/formSpinbutton.data'
-</script>
diff --git a/apps/docs/src/docs/components/form-tags.md b/apps/docs/src/docs/components/form-tags.md
index 14970d59b..4009bb31e 100644
--- a/apps/docs/src/docs/components/form-tags.md
+++ b/apps/docs/src/docs/components/form-tags.md
@@ -1,10 +1,6 @@
-# Form Tags
-
-<PageHeader>
-
-Lightweight custom tagged input form control, with options for customized interface rendering, duplicate tag detection and optional tag validation.
-
-</PageHeader>
+---
+description: 'Lightweight custom tagged input form control, with options for customized interface rendering, duplicate tag detection and optional tag validation.'
+---
 
 Tags are arrays of short strings, used in various ways such as assigning categories. Use the default user interface, or create your own custom interface via the use of the default scoped slot.
 
@@ -211,9 +207,3 @@ The remove event is emitted when the `<BFormTag>` remove button is clicked.
 Tags that are too wide for their parent container will automatically have their text content truncated with an ellipsis. For this reason, it is always good practice to supply a title via the title prop when using the default slot of `<BFormTag>` for the tag content.
 
 Note `<BFormTag>` requires BootstrapVueNext's custom CSS/SCSS for proper styling.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/formTags.data'
-</script>
diff --git a/apps/docs/src/docs/components/form-textarea.md b/apps/docs/src/docs/components/form-textarea.md
index fd52bf987..bae5b758e 100644
--- a/apps/docs/src/docs/components/form-textarea.md
+++ b/apps/docs/src/docs/components/form-textarea.md
@@ -1,10 +1,6 @@
-# Form Textarea
-
-<PageHeader>
-
-Create multi-line text inputs with support for auto height sizing, minimum and maximum number of rows, and contextual states.
-
-</PageHeader>
+---
+description: 'Create multi-line text inputs with support for auto height sizing, minimum and maximum number of rows, and contextual states.'
+---
 
 <<< DEMO ./demo/TextareaOverview.vue
 
@@ -196,9 +192,3 @@ e.g. `<BFormInput ref="foo" ... />`, `const foo = ref<InstanceType<typeof BFormI
 
 Refer to [https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement] for more information on
 these methods and properties. Support will vary based on input type.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/formTextarea.data'
-</script>
diff --git a/apps/docs/src/docs/components/form.md b/apps/docs/src/docs/components/form.md
index 2871ae13d..ed946ea4c 100644
--- a/apps/docs/src/docs/components/form.md
+++ b/apps/docs/src/docs/components/form.md
@@ -1,12 +1,9 @@
-# Form
-
-<PageHeader>
-
-BootstrapVueNext form component and helper components that optionally support inline form styles and
-validation states. Pair them up with other BootstrapVueNext form control components for an easy
-customized, and responsive, layout with a consistent look and feel.
-
-</PageHeader>
+---
+description: >
+  BootstrapVueNext form component and helper components that optionally support inline form styles and
+  validation states. Pair them up with other BootstrapVueNext form control components for an easy
+  customized, and responsive, layout with a consistent look and feel.
+---
 
 ## Introduction to forms and controls
 
@@ -183,9 +180,3 @@ of three contextual states:
 Refer to the
 [Bootstrap v5 Form Validation Documentation](https://getbootstrap.com/docs/5.3/forms/validation/)
 for details on the Bootstrap v5 validation states.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/form.data'
-</script>
diff --git a/apps/docs/src/docs/components/grid-system.md b/apps/docs/src/docs/components/grid-system.md
index 92e53f5fb..0e11f122a 100644
--- a/apps/docs/src/docs/components/grid-system.md
+++ b/apps/docs/src/docs/components/grid-system.md
@@ -1,12 +1,9 @@
-# Grid System
-
-<PageHeader>
-
-Use the powerful mobile-first flexbox grid (via the `<BContainer>`, `<BRow>` and
-`<BCol>` components) to build layouts of all shapes and sizes thanks to a twelve column system,
-five default responsive tiers, CSS Sass variables and mixins, and dozens of predefined classes.
-
-</PageHeader>
+---
+description: >
+  Use the powerful mobile-first flexbox grid (via the `<BContainer>`, `<BRow>` and
+  `<BCol>` components) to build layouts of all shapes and sizes thanks to a twelve column system,
+  five default responsive tiers, CSS Sass variables and mixins, and dozens of predefined classes.
+---
 
 ## Overview
 
@@ -378,8 +375,6 @@ within an existing `<BCol>` component. Nested rows should include a set of colum
 
 ## Row columns
 
-<span class="badge badge-info small">Requires Bootstrap v4.4+ CSS</span>
-
 Use the responsive `cols-*` props in `<BRow>` to quickly set the number of columns that best render
 your content and layout. Whereas normal column widths are apply to the individual `<BCol>` columns
 (e.g., `<BCol md="4">`), the row columns `col-*` props are set on the parent `<BRow>` as a
diff --git a/apps/docs/src/docs/components/image.md b/apps/docs/src/docs/components/image.md
index 004f17b93..e3abc0ad3 100644
--- a/apps/docs/src/docs/components/image.md
+++ b/apps/docs/src/docs/components/image.md
@@ -1,10 +1,6 @@
-# Image
-
-<PageHeader>
-
-Documentation and examples for opting images (via `BImg` component) into responsive behavior (so they never become larger than their parent elements), optionally adding lightweight styles to them — all via props.
-
-</PageHeader>
+---
+description: 'Documentation and examples for opting images (via `BImg` component) into responsive behavior (so they never become larger than their parent elements), optionally adding lightweight styles to them — all via props.'
+---
 
 BootstrapVueNext's image components support rounded images, thumbnail styling, alignment, and even the
 ability to create blank images with an optional solid background color. Support for lazy loaded
@@ -127,9 +123,3 @@ guide.
 Lazy loaded images are actived through the `lazy` prop. Eventually, the component will be expanded to include placeholder slots, but are not available at this time. See the [migration guide](/docs/migration-guide#bimg) for details.
 
 We implement this `lazy` prop using the native `loading` attribute. See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading) for details including how this effect how the native [`load` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) works.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/image.data'
-</script>
diff --git a/apps/docs/src/docs/components/input-group.md b/apps/docs/src/docs/components/input-group.md
index 5173484e6..38026d241 100644
--- a/apps/docs/src/docs/components/input-group.md
+++ b/apps/docs/src/docs/components/input-group.md
@@ -1,10 +1,6 @@
-# Input Group
-
-<PageHeader>
-
-Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
-
-</PageHeader>
+---
+description: 'Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.'
+---
 
 <<< DEMO ./demo/InputGroupOverview.vue#template{vue-html}
 
@@ -112,9 +108,3 @@ margin, via the use of the `.mb-n1` [utility class](/docs/reference/utility-clas
 
 Bootstrap v5 currently **does not** support contextual state styling (i.e. valid or invalid) of
 input groups. However, the inputs inside the input group do support contextual state.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/inputGroup.data'
-</script>
diff --git a/apps/docs/src/docs/components/link.md b/apps/docs/src/docs/components/link.md
index d0d0f619f..697ccd4c0 100644
--- a/apps/docs/src/docs/components/link.md
+++ b/apps/docs/src/docs/components/link.md
@@ -1,10 +1,6 @@
-# Link
-
-<PageHeader>
-
-Use BootstrapVue's custom b-link component for generating a standard `<a>` link or `RouterLink`. `BLink` supports the `disabled` state and `click` event propagation.
-
-</PageHeader>
+---
+description: "Use BootstrapVue's custom b-link component for generating a standard `<a>` link or `RouterLink`. `BLink` supports the `disabled` state and `click` event propagation."
+---
 
 ## Links without Router
 
@@ -93,9 +89,3 @@ changes).
 :::
 
 <<< FRAGMENT ./demo/LinkDisabled.css
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/link.data'
-</script>
diff --git a/apps/docs/src/docs/components/list-group.md b/apps/docs/src/docs/components/list-group.md
index b3306b38f..69630d0b2 100644
--- a/apps/docs/src/docs/components/list-group.md
+++ b/apps/docs/src/docs/components/list-group.md
@@ -1,10 +1,6 @@
-# List Group
-
-<PageHeader>
-
-List Groups are a flexible and powerful component for displaying a series of content. List Group items can be modified to support just about any content within. They can also be used as navigation via various props.
-
-</PageHeader>
+---
+description: 'List Groups are a flexible and powerful component for displaying a series of content. List Group items can be modified to support just about any content within. They can also be used as navigation via various props.'
+---
 
 <<< DEMO ./demo/ListGroupOverview.vue#template{vue-html}
 
@@ -120,9 +116,3 @@ Add nearly any HTML or component within, even for linked list groups like the on
 help of [flexbox utility classes](/docs/reference/utility-classes).
 
 <<< DEMO ./demo/ListGroupCustom.vue#template{vue-html}
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/listGroup.data'
-</script>
diff --git a/apps/docs/src/docs/components/modal.md b/apps/docs/src/docs/components/modal.md
index dc40a102e..4d8bc55d4 100644
--- a/apps/docs/src/docs/components/modal.md
+++ b/apps/docs/src/docs/components/modal.md
@@ -1,10 +1,6 @@
-# Modal
-
-<PageHeader>
-
-Modals are streamlined, but flexible dialog prompts. They support a number of use cases from user notification to completely custom content and feature a handful of helpful sub-components, sizes, variants, accessibility, and more.
-
-</PageHeader>
+---
+description: 'Modals are streamlined, but flexible dialog prompts. They support a number of use cases from user notification to completely custom content and feature a handful of helpful sub-components, sizes, variants, accessibility, and more.'
+---
 
 ## Usage
 
@@ -372,9 +368,3 @@ BootstrapVueNext uses the `focus` prop to control initial focus behavior when th
 - Leave `focus` undefined to use the default focus behavior (focuses the modal container)
 
 <!-- Component reference added automatically from component package.json -->
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/modal.data'
-</script>
diff --git a/apps/docs/src/docs/components/nav.md b/apps/docs/src/docs/components/nav.md
index 7eec048a0..6900a889d 100644
--- a/apps/docs/src/docs/components/nav.md
+++ b/apps/docs/src/docs/components/nav.md
@@ -1,11 +1,8 @@
-# Nav
-
-<PageHeader>
-
-Navigation available in Bootstrap share general markup and styles, from the base `<BNav>` class
-to the `active` and `disabled` states. Swap modifier props to switch between each style.
-
-</PageHeader>
+---
+description: >
+  Navigation available in Bootstrap share general markup and styles, from the base `<BNav>` class
+  to the `active` and `disabled` states. Swap modifier props to switch between each style.
+---
 
 <<< DEMO ./demo/NavOverview.vue#template{vue-html}
 
@@ -200,9 +197,3 @@ For more details see:
 
 - [Vue Router `<router-view>`](https://router.vuejs.org/api/#router-view)
 - [Nuxt.JS `<nuxt-child>`](https://nuxtjs.org/api/components-nuxt-child)
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/nav.data'
-</script>
diff --git a/apps/docs/src/docs/components/navbar.md b/apps/docs/src/docs/components/navbar.md
index 3e91d7ff6..2b40ead8e 100644
--- a/apps/docs/src/docs/components/navbar.md
+++ b/apps/docs/src/docs/components/navbar.md
@@ -1,10 +1,6 @@
-# Navbar
-
-<PageHeader>
-
-The component `BNavbar` is a wrapper that positions branding, navigation, and other elements into a concise header. It is easily extensible and thanks to the `BCollapse` component, it can easily integrate responsive behaviors.
-
-</PageHeader>
+---
+description: 'The component `BNavbar` is a wrapper that positions branding, navigation, and other elements into a concise header. It is easily extensible and thanks to the `BCollapse` component, it can easily integrate responsive behaviors.'
+---
 
 <<< DEMO ./demo/NavbarOverview.vue#template{vue-html}
 
@@ -168,9 +164,3 @@ Navbars are hidden by default when printing. Force them to be printed by setting
 - v-b-toggle directive
 - `BNav` documentation for additional components and sub-component aliases
   Refer to the Router support reference page for router-link specific props.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/navbar.data'
-</script>
diff --git a/apps/docs/src/docs/components/offcanvas.md b/apps/docs/src/docs/components/offcanvas.md
index 6a8fa2740..12cd952b6 100644
--- a/apps/docs/src/docs/components/offcanvas.md
+++ b/apps/docs/src/docs/components/offcanvas.md
@@ -1,10 +1,6 @@
-# Offcanvas
-
-<PageHeader>
-
-Build hidden sidebars into your project. Sidebars can aid in enhancing user interaction or preventing further interaction.
-
-</PageHeader>
+---
+description: 'Build hidden sidebars into your project. Sidebars can aid in enhancing user interaction or preventing further interaction.'
+---
 
 <<< DEMO ./demo/OffcanvasOverview.vue#template{vue-html}
 
@@ -31,9 +27,3 @@ One common use of offcanvas is to create a table of contents sider that is visib
 Below is a simple example showing how to set up such a site.
 
 <<< FRAGMENT ./demo/OffcanvasSidebar.vue
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/offcanvas.data'
-</script>
diff --git a/apps/docs/src/docs/components/orchestrator.md b/apps/docs/src/docs/components/orchestrator.md
index 36fc0508b..a5b0ac0ef 100644
--- a/apps/docs/src/docs/components/orchestrator.md
+++ b/apps/docs/src/docs/components/orchestrator.md
@@ -1,10 +1,6 @@
-# BOrchestrator
-
-<PageHeader>
-
-The `BOrchestrator` component manages the rendering and positioning of dynamic components like modals, toasts, and popovers. It works with `BApp` to provide a centralized orchestration layer.
-
-</PageHeader>
+---
+description: 'The `BOrchestrator` component manages the rendering and positioning of dynamic components like modals, toasts, and popovers. It works with `BApp` to provide a centralized orchestration layer.'
+---
 
 ## Overview
 
@@ -43,9 +39,3 @@ The `BOrchestrator` component manages the rendering and positioning of dynamic c
 - [`BPopover`](/docs/components/popover) - Can be orchestrated
 
 ## Component Reference
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/orchestrator.data'
-</script>
diff --git a/apps/docs/src/docs/components/overlay.md b/apps/docs/src/docs/components/overlay.md
index bc78fa312..c00efe8f0 100644
--- a/apps/docs/src/docs/components/overlay.md
+++ b/apps/docs/src/docs/components/overlay.md
@@ -1,10 +1,6 @@
-# Overlay
-
-<PageHeader>
-
-BootstrapVueNext's custom `BOverlay` component is used to _visually obscure_ a particular element or component and its content. It signals a state change within the element or component to the user and can be used for creating loaders, warnings/alerts, prompts, and more.
-
-</PageHeader>
+---
+description: "BootstrapVueNext's custom `BOverlay` component is used to _visually obscure_ a particular element or component and its content. It signals a state change within the element or component to the user and can be used for creating loaders, warnings/alerts, prompts, and more."
+---
 
 ## Overview
 
@@ -219,9 +215,3 @@ The modal body has `position: relative;` set, so when using `<BOverlay no-wrap .
 body only the modal body will be obscured. If you wish to obscure the entire modal (including the
 header and footer), you will need to set the `BModal` prop `body-class` to `position-static`, and
 also set the `rounded` prop on `BOverlay`.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/overlay.data'
-</script>
diff --git a/apps/docs/src/docs/components/pagination.md b/apps/docs/src/docs/components/pagination.md
index 81a8e8113..25fda7887 100644
--- a/apps/docs/src/docs/components/pagination.md
+++ b/apps/docs/src/docs/components/pagination.md
@@ -1,11 +1,8 @@
-# Pagination
-
-<PageHeader>
-
-Quick first, previous, next, last, and page buttons for pagination control of another component
-(such as `BTable` or lists).
-
-</PageHeader>
+---
+description: >
+  Quick first, previous, next, last, and page buttons for pagination control of another component
+  (such as `BTable` or lists).
+---
 
 ## Overview
 
@@ -159,9 +156,3 @@ pattern.
 - <kbd>Enter</kbd> or <kbd>Space</kbd> keys will select (click) the currently focused page button
 - Pressing <kbd>Tab</kbd> will move to the next control or link on the page, while pressing
   <kbd>Shift</kbd>+<kbd>Tab</kbd> will move to the previous control or link on the page.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/pagination.data'
-</script>
diff --git a/apps/docs/src/docs/components/placeholder.md b/apps/docs/src/docs/components/placeholder.md
index 5225b2c63..454011d73 100644
--- a/apps/docs/src/docs/components/placeholder.md
+++ b/apps/docs/src/docs/components/placeholder.md
@@ -1,11 +1,8 @@
-# Placeholder
-
-<PageHeader>
-
-Placeholders are components that allows you to display a loading state for
-several component types while your data is being fetched or computed.
-
-</PageHeader>
+---
+description: >
+  Placeholders are components that allows you to display a loading state for
+  several component types while your data is being fetched or computed.
+---
 
 ## Basic Usage
 
@@ -92,9 +89,3 @@ Optionally, you can manually adjust any scope of the table using slots. The foll
 The `<BPlaceholder>` component and helper components utilize Bootstrap SCSS variables, as much as
 possible to best match the styling and sizing of the native components. This means if you've
 customized Bootstrap SCSS, the skeleton components should adapt to fit your custom theming.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/placeholder.data'
-</script>
diff --git a/apps/docs/src/docs/components/popover.md b/apps/docs/src/docs/components/popover.md
index bfa791504..8a5b04579 100644
--- a/apps/docs/src/docs/components/popover.md
+++ b/apps/docs/src/docs/components/popover.md
@@ -1,13 +1,10 @@
-# Popover
-
-<PageHeader>
-
-The Popover feature, which provides a tooltip-like behavior, can be easily applied to any
-interactive element via the `<BPopover>` component or [`v-b-popover`](/docs/directives/BPopover)
-directive. Popovers can also be created and programmatically controlled via the composable
-[`usePopover`](/docs/composables/usePopover)
-
-</PageHeader>
+---
+description: >
+  The Popover feature, which provides a tooltip-like behavior, can be easily applied to any
+  interactive element via the `<BPopover>` component or [`v-b-popover`](/docs/directives/BPopover)
+  directive. Popovers can also be created and programmatically controlled via the composable
+  [`usePopover`](/docs/composables/usePopover)
+---
 
 <<< DEMO ./demo/PopoverOverview.vue#template{vue-html}
 
@@ -135,9 +132,3 @@ props can be used to control what's considered clipping.
 These are accessed through the [template ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs)
 
 <<< DEMO ./demo/PopoverExposed.vue
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/popover.data'
-</script>
diff --git a/apps/docs/src/docs/components/progress.md b/apps/docs/src/docs/components/progress.md
index d1dad8305..d5cd1272e 100644
--- a/apps/docs/src/docs/components/progress.md
+++ b/apps/docs/src/docs/components/progress.md
@@ -1,11 +1,8 @@
-# Progress
-
-<PageHeader>
-
-Use our custom progress component for displaying simple or complex progress bars, featuring
-support for horizontally stacked bars, animated backgrounds, and text labels.
-
-</PageHeader>
+---
+description: >
+  Use our custom progress component for displaying simple or complex progress bars, featuring
+  support for horizontally stacked bars, animated backgrounds, and text labels.
+---
 
 ## Basic Usage
 
@@ -77,9 +74,3 @@ Include multiple `BProgressBar` sub-components in a `BProgress` component to bui
 - `<BProgressBar>` will not inherit value from `<BProgress>`.
 
 :::
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/progress.data'
-</script>
diff --git a/apps/docs/src/docs/components/spinner.md b/apps/docs/src/docs/components/spinner.md
index 74ca83eb2..bd734bf85 100644
--- a/apps/docs/src/docs/components/spinner.md
+++ b/apps/docs/src/docs/components/spinner.md
@@ -1,13 +1,10 @@
-# Spinners
-
-<PageHeader>
-
-The `<BSpinner>` component can be used to show the loading state in your projects. They're
-rendered only with basic HTML and CSS as a lightweight Vue component. Their appearance,
-alignment, and sizing can be easily customized with a few built-in props and/or Bootstrap v5
-utility classes.
-
-</PageHeader>
+---
+description: >
+  The `<BSpinner>` component can be used to show the loading state in your projects. They're
+  rendered only with basic HTML and CSS as a lightweight Vue component. Their appearance,
+  alignment, and sizing can be easily customized with a few built-in props and/or Bootstrap v5
+  utility classes.
+---
 
 Spinners can be placed just about anywhere, including inside buttons, alerts, and even `<BTable>`'s
 busy slot.
@@ -35,7 +32,7 @@ Spinners use `currentColor` for their color, meaning it inherits the current fon
 customize the color using the standard text color variants using the `variant` prop, or place
 classes or styles on the component to change its color.
 
-The `variant` prop translates the variant name to the Bootstrap v4 class `.text-{variant}`, so if
+The `variant` prop translates the variant name to the Bootstrap v5 class `.text-{variant}`, so if
 you have custom defined text color variants, feel free to use them via the `variant` prop.
 
 <<< DEMO ./demo/SpinnerColors.vue#template{vue-html}
@@ -101,9 +98,3 @@ Place a hidden label text inside the spinner for screen reader users, via the `l
 For accessibility purposes, each spinner will automatically have a `role="status"` attribute when a label is provided. You can easily customize the role if required via prop `role`. The specified `role` will not be applied when no label is provided.
 
 As well, when no label is provided, the spinner will automatically have the attribute `aria-hidden="true"` to hide the spinner from screen reader users.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/spinner.data'
-</script>
diff --git a/apps/docs/src/docs/components/table.md b/apps/docs/src/docs/components/table.md
index 6c3ffc9dd..7772adc42 100644
--- a/apps/docs/src/docs/components/table.md
+++ b/apps/docs/src/docs/components/table.md
@@ -1,10 +1,6 @@
-# Tables
-
-<PageHeader>
-
-For displaying tabular data, `BTable` supports pagination, filtering, sorting, custom rendering, various style options, events, and asynchronous data. For simple display of tabular data without all the fancy features, BootstrapVueNext provides two lightweight alternative components [`BTableLite`](#light-weight-tables) and [`BTableSimple`](#simple-tables).
-
-</PageHeader>
+---
+description: 'For displaying tabular data, `BTable` supports pagination, filtering, sorting, custom rendering, various style options, events, and asynchronous data. For simple display of tabular data without all the fancy features, BootstrapVueNext provides two lightweight alternative components [`BTableLite`](#light-weight-tables) and [`BTableSimple`](#simple-tables).'
+---
 
 ## Basic Usage
 
@@ -265,7 +261,7 @@ values: `sm`, `md`, `lg`, or `xl`.
 
 ### Stacked tables
 
-An alternative to responsive tables, BootstrapVue includes the stacked table option (using custom
+An alternative to responsive tables, BootstrapVueNext includes the stacked table option (using custom
 SCSS/CSS), which allow tables to be rendered in a visually stacked format. Make any table stacked
 across _all viewports_ by setting the prop `stacked` to `true`. Or, alternatively, set a breakpoint
 at which the table will return to normal table format by setting the prop `stacked` to one of the
@@ -298,7 +294,7 @@ BootstrapVueNext's custom CSS is required in order to support stacked tables.
 ### Table caption
 
 Add an optional caption to your table via the prop `caption` or the named slot `table-caption` (the
-slot takes precedence over the prop). The default Bootstrap v4 styling places the caption at the
+slot takes precedence over the prop). The default Bootstrap v5 styling places the caption at the
 bottom of the table:
 
 <<< DEMO ./demo/TableCaption.vue
@@ -459,7 +455,7 @@ scoped slots (even when disabled)
 
 If you wish to add additional rows to the header you may do so via the `thead-top` slot. This slot
 is inserted before the header cells row, and is not automatically encapsulated by `<tr>..</tr>`
-tags. It is recommended to use the BootstrapVue [table helper components](#table-helper-components),
+tags. It is recommended to use the BootstrapVueNext [table helper components](#table-helper-components),
 rather than native browser table child elements.
 
 <<< DEMO ./demo/TableHeaderRows.vue
@@ -962,7 +958,7 @@ markup. Components `<BTable>` and `<BTableLite>` use these helper components int
 In the [Simple tables](#simple-tables) example, we are using the helper components `<BThead>`,
 `<BTbody>`, `<BTr>`, `<BTh>`, `<BTd>` and `<BTfoot>`. While you can use regular table child
 elements (i.e. `<tbody>`, `<tr>`, `<td>`, etc.) within `<BTableSimple>`, and the named slots
-`top-row`, `bottom-row`, and `thead-top`, it is recommended to use these BootstrapVue table `<BT*>`
+`top-row`, `bottom-row`, and `thead-top`, it is recommended to use these BootstrapVueNext table `<BT*>`
 helper components. Note that there are no helper components for `<caption>`, `<colgroup>` or
 `<col>`, so you may use these three HTML5 elements directly in `<BTableSimple>`.
 
@@ -1055,9 +1051,3 @@ your app handles the various inconsistencies with events.
 ## Complete Example
 
 <<< DEMO ./demo/TableComplete.vue
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/table.data'
-</script>
diff --git a/apps/docs/src/docs/components/tabs.md b/apps/docs/src/docs/components/tabs.md
index 62f548cfe..4fe9eb95c 100644
--- a/apps/docs/src/docs/components/tabs.md
+++ b/apps/docs/src/docs/components/tabs.md
@@ -1,11 +1,8 @@
-# Tabs
-
-<PageHeader>
-
-Create a widget of tabbable panes of _local content_. The tabs component is built upon navs and
-cards internally, and provides full keyboard navigation control of the tabs.
-
-</PageHeader>
+---
+description: >
+  Create a widget of tabbable panes of _local content_. The tabs component is built upon navs and
+  cards internally, and provides full keyboard navigation control of the tabs.
+---
 
 For navigation based tabs (i.e. tabs that would change the URL), use the
 [`<BNav>`](/docs/components/nav) component instead.
@@ -109,7 +106,7 @@ column classes such as `col-2`, `col-3`, etc.
 <<< DEMO ./demo/TabsVerticalWidth.vue#template{vue-html}
 
 Vertical placement visually works best with the `pills` variant. When using the default `tabs`
-variant, you may want to provided your own custom styling classes, as Bootstrap v4 CSS assumes the
+variant, you may want to provided your own custom styling classes, as Bootstrap v5 CSS assumes the
 tab controls will always be placed on the top of the tabs content.
 
 ::: info
@@ -264,9 +261,3 @@ It is recommended to use the `disabled` attribute on the `<BTab>` component inst
 ### Dynamic tabs + tabs-end slot
 
 <<< DEMO ./demo/TabsDynamic.vue
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/tabs.data'
-</script>
diff --git a/apps/docs/src/docs/components/toast.md b/apps/docs/src/docs/components/toast.md
index f77d6149b..4da1d9111 100644
--- a/apps/docs/src/docs/components/toast.md
+++ b/apps/docs/src/docs/components/toast.md
@@ -1,10 +1,6 @@
-# Toast
-
-<PageHeader>
-
-Push notifications to your visitors with `BToast`, `useToast` and `BOrchestrator`. These are easily customizable for generating alert messages.
-
-</PageHeader>
+---
+description: 'Push notifications to your visitors with `BToast`, `useToast` and `BOrchestrator`. These are easily customizable for generating alert messages.'
+---
 
 Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
 
@@ -119,9 +115,3 @@ provides general guidelines when using toasts.
   best practice would be to implement a location where users can refer to a list of past toast
   messages which have been shown. Preferably this list should be sortable, with the default being
   chronological.
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/toast.data'
-</script>
diff --git a/apps/docs/src/docs/components/tooltip.md b/apps/docs/src/docs/components/tooltip.md
index f0ee018f0..8b69cadbe 100644
--- a/apps/docs/src/docs/components/tooltip.md
+++ b/apps/docs/src/docs/components/tooltip.md
@@ -1,12 +1,9 @@
-# Tooltip
-
-<PageHeader>
-
-Easily add tooltips to an interactive element or component via the `<BTooltip>` component
-or [`v-b-tooltip`](/docs/directives/BTooltip) directive. Tooltips can also be created and programmatically controlled via the composable
-[`usePopover`](/docs/composables/usePopover)
-
-</PageHeader>
+---
+description: >
+  Easily add tooltips to an interactive element or component via the `<BTooltip>` component
+  or [`v-b-tooltip`](/docs/directives/BTooltip) directive. Tooltips can also be created and programmatically controlled via the composable
+  [`usePopover`](/docs/composables/usePopover)
+---
 
 <<< DEMO ./demo/TooltipOverview.vue#template{vue-html}
 
@@ -153,9 +150,3 @@ props can be used to control what's considered clipping.
 These are accessed through the [template ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs)
 
 <<< DEMO ./demo/TooltipExposed.vue
-
-<ComponentReference :data="data" />
-
-<script setup lang="ts">
-import {data} from '../../data/components/tooltip.data'
-</script>
diff --git a/apps/docs/src/docs/composables.md b/apps/docs/src/docs/composables.md
index 61cdd0381..bf3c21540 100644
--- a/apps/docs/src/docs/composables.md
+++ b/apps/docs/src/docs/composables.md
@@ -1,58 +1,10 @@
-# Composables - Table of Contents
+---
+description: BootstrapVueNext exposes several custom composables that integrate with various components.
+---
 
-<div class="lead mb-5">
-
-BootstrapVueNext exposes several custom composables that integrate with various components.
-
-</div>
-
-<TableOfContentsCard v-for="composable in computedComposablesList" :key="composable.name" class="my-3" :name="composable.name" :description="composable.description" :route="composable.route" />
+<TableOfContentsCard v-for="composable in data" :key="composable.name" class="my-3" :name="composable.name" :description="composable.description" :route="composable.url" />
 
 <script setup lang="ts">
-import {withBase} from 'vitepress'
-import {computed} from 'vue'
+import {data} from '../data/composables.data'
 import TableOfContentsCard from '../components/TableOfContentsCard.vue'
-
-const routeLocation = (name: string): string => withBase(`/docs/composables/${name}`).trim()
-
-const composablesList: {name: string; description: string}[] = [
-  {
-    name: 'useBreadcrumb',
-    description: 'A global breadcrumb system to pair with the BBreadcrumb component'
-  },
-  {
-    name: 'useColorMode',
-    description: 'Implement a color scheme to reactively use light/dark or other color modes. Light and dark themes are included by default, but you can create more by reviewing the usage on the Bootstrap v5 documentation (Color Modes)'
-  },
-  {
-    name: 'useModal',
-    description: 'Create or hide modals from anywhere in the app, or close all modals from one source using this utility',
-  },
-  {
-    name: 'usePopover',
-    description: 'Control popovers and tooltips in your application, enabling the display popover elements with ease',
-  },
-  {
-    name: 'useToast',
-    description: 'Conveniently orchestrate a push notification system by showing or hiding Toasts with our useToast composable system',
-  },
-  {
-    name: 'useScrollspy',
-    description: 'Automatically update navigation highlighting based on scroll position, perfect for creating table of contents and section navigation',
-  },
-  {
-    name: 'useToggle',
-    description: 'Conveniently show, hide or toggle components programmatically from anywhere in the app',
-  }
-]
-
-const computedComposablesList = computed(() =>
-  composablesList
-    .map((el) => ({
-      name: el.name,
-      description: el.description,
-      route: routeLocation(el.name),
-    }))
-    .sort((a, b) => a.name.localeCompare(b.name))
-)
 </script>
diff --git a/apps/docs/src/docs/composables/ComposableHeader.vue b/apps/docs/src/docs/composables/ComposableHeader.vue
deleted file mode 100644
index 107b6576d..000000000
--- a/apps/docs/src/docs/composables/ComposableHeader.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <SourceHeader :title :path base="githubComposablesDirectory" />
-</template>
-
-<script setup lang="ts">
-import SourceHeader from '../../components/SourceHeader.vue'
-
-defineProps<{
-  title: string
-  path: string
-}>()
-</script>
diff --git a/apps/docs/src/docs/composables/useBreadcrumb.md b/apps/docs/src/docs/composables/useBreadcrumb.md
index 3964ec7de..14147ae73 100644
--- a/apps/docs/src/docs/composables/useBreadcrumb.md
+++ b/apps/docs/src/docs/composables/useBreadcrumb.md
@@ -1,10 +1,6 @@
-<ComposableHeader path="useBreadcrumb/index.ts" title="useBreadcrumb" />
-
-<div class="lead mb-5">
-
-`useBreadcrumb` is a helper utility for the `BBreadcrumb` component. It provides a **globally** changable context so you can modify a breadcrumb. It should be noted that the breadcrumb component will automatically use the global context by default. `useBreadcrumb` is shared globally, one modification to the state will be recognized throughout the app. As noted in the BBreadcrumb documentation, the items prop for the component takes precedence over `useBreadcrumb`
-
-</div>
+---
+description: '`useBreadcrumb` is a helper utility for the `BBreadcrumb` component. It provides a **globally** changable context so you can modify a breadcrumb. It should be noted that the breadcrumb component will automatically use the global context by default. `useBreadcrumb` is shared globally, one modification to the state will be recognized throughout the app. As noted in the BBreadcrumb documentation, the items prop for the component takes precedence over `useBreadcrumb`'
+---
 
 <UsePluginAlert />
 
@@ -15,7 +11,3 @@
 You can also pass in an id to the component and composable to create a unique breadcrumb trail.
 
 <<< DEMO ./demo/UseBreadcrumbWithId.vue
-
-<script setup lang="ts">
-import ComposableHeader from './ComposableHeader.vue'
-</script>
diff --git a/apps/docs/src/docs/composables/useColorMode.md b/apps/docs/src/docs/composables/useColorMode.md
index 1d16c6375..4f1f960b0 100644
--- a/apps/docs/src/docs/composables/useColorMode.md
+++ b/apps/docs/src/docs/composables/useColorMode.md
@@ -1,15 +1,7 @@
-<ComposableHeader path="useColorMode/index.ts" title="useColorMode" />
-
-<div class="lead mb-5">
-
-`useColorMode` provides a convenient utility to adjust the global color theme of your application. You can also use it to target specific components by using a [template ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) or a selector. Bootstrap's default behavior dictates that color modes are applied to all children in the branch. `useColorMode` is simply a wrapper for the [vueuse](https://vueuse.org/core/useColorMode/#usecolormode) utility.
-
-</div>
+---
+description: "`useColorMode` provides a convenient utility to adjust the global color theme of your application. You can also use it to target specific components by using a [template ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) or a selector. Bootstrap's default behavior dictates that color modes are applied to all children in the branch. `useColorMode` is simply a wrapper for the [vueuse](https://vueuse.org/core/useColorMode/#usecolormode) utility."
+---
 
 ## Demo
 
 <<< DEMO ./demo/UseColorModeBasic.vue
-
-<script setup lang="ts">
-import ComposableHeader from './ComposableHeader.vue'
-</script>
diff --git a/apps/docs/src/docs/composables/useModal.md b/apps/docs/src/docs/composables/useModal.md
index 52fc6e66e..28747bf0c 100644
--- a/apps/docs/src/docs/composables/useModal.md
+++ b/apps/docs/src/docs/composables/useModal.md
@@ -1,10 +1,6 @@
-<ComposableHeader path="useModal/index.ts" title="useModal" />
-
-<div class="lead mb-5">
-
-The `useModal` composable provides a powerful API to create, manage, and control modals programmatically from anywhere in your application. It allows you to create modals on-demand, manage existing modals, and handle modal interactions through promises.
-
-</div>
+---
+description: 'The `useModal` composable provides a powerful API to create, manage, and control modals programmatically from anywhere in your application. It allows you to create modals on-demand, manage existing modals, and handle modal interactions through promises.'
+---
 
 ## Setup
 
@@ -109,5 +105,6 @@ In addition to creating modals in a global context, you can also hide modals fro
 
 <script setup lang="ts">
 import UsePluginAlert from '../../components/UsePluginAlert.vue'
-import ComposableHeader from './ComposableHeader.vue'
+import PageHeader from '../../components/PageHeader.vue'
+
 </script>
diff --git a/apps/docs/src/docs/composables/usePopover.md b/apps/docs/src/docs/composables/usePopover.md
index eaaababce..0b1fa0a0f 100644
--- a/apps/docs/src/docs/composables/usePopover.md
+++ b/apps/docs/src/docs/composables/usePopover.md
@@ -1,10 +1,6 @@
-<ComposableHeader path="usePopover/index.ts" title="usePopover" />
-
-<div class="lead mb-5">
-
-The `usePopover` composable allows you to create and control popovers and tooltips dynamically from anywhere in your application. It provides methods to create, show, hide, and manage both popovers and tooltips programmatically.
-
-</div>
+---
+description: 'The `usePopover` composable allows you to create and control popovers and tooltips dynamically from anywhere in your application. It provides methods to create, show, hide, and manage both popovers and tooltips programmatically.'
+---
 
 ## Setup
 
@@ -65,5 +61,6 @@ Alternatively, use `await using` in TypeScript 5.2+ to automatically destroy the
 
 <script setup lang="ts">
 import UsePluginAlert from '../../components/UsePluginAlert.vue'
-import ComposableHeader from './ComposableHeader.vue'
+import PageHeader from '../../components/PageHeader.vue'
+
 </script>
diff --git a/apps/docs/src/docs/composables/useScrollspy.md b/apps/docs/src/docs/composables/useScrollspy.md
index 7905f318e..13220bc13 100644
--- a/apps/docs/src/docs/composables/useScrollspy.md
+++ b/apps/docs/src/docs/composables/useScrollspy.md
@@ -1,10 +1,6 @@
-<ComposableHeader path="useScrollspy/index.ts" title="useScrollspy" />
-
-<div class="lead mb-5">
-
-The `useScrollspy` composable provides automatic navigation highlighting based on scroll position. It tracks the visibility of content elements and automatically updates the active state of corresponding navigation items, making it perfect for table of contents, documentation navigation, and section-based layouts.
-
-</div>
+---
+description: 'The `useScrollspy` composable provides automatic navigation highlighting based on scroll position. It tracks the visibility of content elements and automatically updates the active state of corresponding navigation items, making it perfect for table of contents, documentation navigation, and section-based layouts.'
+---
 
 ## Basic Usage
 
@@ -75,5 +71,3 @@ When content changes dynamically, you can use `updateList()` to refresh the trac
 Always call `cleanup()` when the component is unmounted to prevent memory leaks:
 
 <<< DEMO ./demo/UseScrollspyCleanup.vue#script{vue}
-
-
diff --git a/apps/docs/src/docs/composables/useToast.md b/apps/docs/src/docs/composables/useToast.md
index 18417e99a..f8e46f72d 100644
--- a/apps/docs/src/docs/composables/useToast.md
+++ b/apps/docs/src/docs/composables/useToast.md
@@ -1,10 +1,6 @@
-<ComposableHeader path="useToast/index.ts" title="useToast" />
-
-<div class="lead mb-5">
-
-The `useToast` composable allows you to create and manage toasts programmatically from anywhere in your application. It provides a simple API to show toast messages without needing to declare toast components in your templates.
-
-</div>
+---
+description: 'The `useToast` composable allows you to create and manage toasts programmatically from anywhere in your application. It provides a simple API to show toast messages without needing to declare toast components in your templates.'
+---
 
 ## Setup
 
@@ -61,7 +57,3 @@ Hiding a `Toast` programmatically is very simple. `create` returns an object tha
 Hiding a `Toast` with promise
 
 <<< DEMO ./demo/UseToastPromise.vue
-
-<script setup lang="ts">
-import ComposableHeader from './ComposableHeader.vue'
-</script>
diff --git a/apps/docs/src/docs/composables/useToggle.md b/apps/docs/src/docs/composables/useToggle.md
index 56c9ccdd3..170a6a715 100644
--- a/apps/docs/src/docs/composables/useToggle.md
+++ b/apps/docs/src/docs/composables/useToggle.md
@@ -1,10 +1,6 @@
-<ComposableHeader path="useToggle/index.ts" title="useToggle" />
-
-<div class="lead mb-5">
-
-You can use `useToggle` to get the closest toggleable component in **child component** and show,hide or toggle it. It can also be supplied a target id to show, hide or toggle a specific component
-
-</div>
+---
+description: 'You can use `useToggle` to get the closest toggleable component in **child component** and show,hide or toggle it. It can also be supplied a target id to show, hide or toggle a specific component'
+---
 
 <HighlightCard>
   <template #html>
@@ -41,7 +37,3 @@ find modal since the component in lazy mode may not render at page initial. If t
 The `show` and `toggle` methods take a boolean argument to control wether to resolve the promise on show (`false`) or on hide (`true`). On `show` the promise resolves to `true` when shown and to `'show-prevented'` if show is prevented. On `hide` the promise resolves to the trigger that caused the hide event. The promise can be awaited to get the result.
 
 <<< DEMO ./demo/UseTogglePromise.vue
-
-<script setup lang="ts">
-import ComposableHeader from './ComposableHeader.vue'
-</script>
diff --git a/apps/docs/src/docs/configurations.md b/apps/docs/src/docs/configurations.md
index 18b61dbb8..13d4788b4 100644
--- a/apps/docs/src/docs/configurations.md
+++ b/apps/docs/src/docs/configurations.md
@@ -1,35 +1,10 @@
-# Configurations - Table of Contents
+---
+description: BootstrapVueNext provides several configuration options that you can use to customize the behavior of your components.
+---
 
-<div class="lead mb-5">
-
-BootstrapVueNext provides several configuration options that you can use to customize the behavior of your components.
-
-</div>
-
-<TableOfContentsCard v-for="composable in computedConfigurationsList" :key="composable.name" class="my-3" :name="composable.name" :description="composable.description" :route="composable.route" />
+<TableOfContentsCard v-for="configuration in data" :key="configuration.name" class="my-3" :name="configuration.name" :description="configuration.description" :route="configuration.url" />
 
 <script setup lang="ts">
-import {withBase} from 'vitepress'
-import {computed} from 'vue'
+import {data} from '../data/configurations.data'
 import TableOfContentsCard from '../components/TableOfContentsCard.vue'
-
-const routeLocation = (name: string): string => withBase(`/docs/configurations/${name}`).trim()
-
-const configurationsList: {name: string; route: string}[] = [
-  {
-    name: 'Global Options',
-    route: routeLocation('global-options'),
-    description: 'Set default prop values for all Vue components.',
-  }
-]
-
-const computedConfigurationsList = computed(() =>
-  configurationsList
-    .map((el) => ({
-      name: el.name,
-      route: el.route,
-      description: el.description
-    }))
-    .sort((a, b) => a.name.localeCompare(b.name))
-)
 </script>
diff --git a/apps/docs/src/docs/configurations/customizing-styles.md b/apps/docs/src/docs/configurations/customizing-styles.md
index 627846d35..ca7194967 100644
--- a/apps/docs/src/docs/configurations/customizing-styles.md
+++ b/apps/docs/src/docs/configurations/customizing-styles.md
@@ -1,4 +1,6 @@
-# Customizing Styles
+---
+description: Learn how to customize Bootstrap and component styles.
+---
 
 ## Bootstrap Customization
 
diff --git a/apps/docs/src/docs/configurations/global-options.md b/apps/docs/src/docs/configurations/global-options.md
index d29df88cc..9716b158a 100644
--- a/apps/docs/src/docs/configurations/global-options.md
+++ b/apps/docs/src/docs/configurations/global-options.md
@@ -1,4 +1,6 @@
-# Global options
+---
+description: Set default prop values for all Vue components.
+---
 
 ## Overview
 
diff --git a/apps/docs/src/docs/directives.md b/apps/docs/src/docs/directives.md
index dbefb7ca6..06fc41163 100644
--- a/apps/docs/src/docs/directives.md
+++ b/apps/docs/src/docs/directives.md
@@ -1,52 +1,13 @@
-# Directives
-
-<div class="lead mb-5">
-
-'Vue3` supports using custom directives, here you can find a list of directives from this package.
-
-</div>
+---
+description: >
+  Vue3 supports using custom directives, here you can find a list of directives from this package.
+---
 
 Depending on the installation method, directives may be automatically registered globally. However, if they are not automatically imported, you will want to import them manually. Every directive is exposed using the v- prefix. For example, for directive `BToggle`, it is imported under `vBToggle`. When using the composition api, it will function as expected. However, if you are using the options api you will want to manually remove the v- prefix during registry. For more information, visit the [vue docs](https://vuejs.org/guide/reusability/custom-directives.html#introduction).
 
-<TableOfContentsCard v-for="composable in computedComposablesList" :key="composable.name" class="my-5" :name="composable.name" :description="composable.description" :route="composable.route" />
+<TableOfContentsCard v-for="directive in data" :key="directive.name" class="my-3" :name="directive.name" :description="directive.description" :route="directive.url" />
 
 <script setup lang="ts">
-import {withBase} from 'vitepress'
-import {computed} from 'vue'
+import {data} from '../data/directives.data'
 import TableOfContentsCard from '../components/TableOfContentsCard.vue'
-
-const routeLocation = (name: string): string => withBase(`/docs/directives/${name}`).trim()
-
-const composablesList: {name: string; description: string}[] = [
-  {
-    name: 'BColorMode',
-    description: 'The BColorMode directive has a similar result to the useColorMode utility, but provides more low level access than the composable',
-  },
-  {
-    name: 'BModal',
-    description: 'Similar to the BToggle directive, the BModal directive is used to trigger the state of a modal through directive',
-  },
-  {
-    name: 'BPopover',
-    description: 'Add popovers to any element on your site, using Bootstrap v4 CSS for styling and animations',
-  },
-  {
-    name: 'BToggle',
-    description: 'A light-weight directive for toggling visibility state for collapses and sidebars by ID. It automatically handles the accessibility attributes on the trigger element',
-  },
-  {
-    name: 'BTooltip',
-    description: 'Add custom tooltips to any element. Tooltips can be triggered by hovering, focusing, or clicking an element',
-  }
-]
-
-const computedComposablesList = computed(() =>
-  composablesList
-    .map((el) => ({
-      name: el.name,
-      description: el.description,
-      route: routeLocation(el.name),
-    }))
-    .sort((a, b) => a.name.localeCompare(b.name))
-)
 </script>
diff --git a/apps/docs/src/docs/directives/BColorMode.md b/apps/docs/src/docs/directives/BColorMode.md
index 80219d5b1..838995f01 100644
--- a/apps/docs/src/docs/directives/BColorMode.md
+++ b/apps/docs/src/docs/directives/BColorMode.md
@@ -1,11 +1,9 @@
-<DirectiveHeader path="BColorMode/index.ts" title="BColorMode" />
-
-<div class="lead mb-5">
+---
+description: 'The BColorMode directive has a similar result to the useColorMode utility, but provides more low level access than the composable'
+---
 
 The `BColorMode` directive is similar to [useColorMode](../composables/useColorMode.md) but provides a more low level directive for placement on individual components. It is useful when you want to make an element have one color mode, but do not want the overhead of the composable variant.
 
-</div>
-
 ## Demo
 
 <HighlightCard>
@@ -44,8 +42,6 @@ import {ref} from 'vue'
 import {vBColorMode} from 'bootstrap-vue-next/directives/BColorMode'
 import HighlightCard from '../../components/HighlightCard.vue'
 
-import DirectiveHeader from './DirectiveHeader.vue'
-
 const currentColor = ref<'light' | 'dark'>('dark')
 
 const changeColor = () => {
diff --git a/apps/docs/src/docs/directives/BModal.md b/apps/docs/src/docs/directives/BModal.md
index c8bef15e6..c72d6c1c1 100644
--- a/apps/docs/src/docs/directives/BModal.md
+++ b/apps/docs/src/docs/directives/BModal.md
@@ -1,5 +1,3 @@
-<DirectiveHeader path="BModal/index.ts" title="Docs to be made" />
-
-<script setup lang="ts">
-import DirectiveHeader from './DirectiveHeader.vue'
-</script>
+---
+description: 'Similar to the BToggle directive, the BModal directive is used to trigger the state of a modal through directive'
+---
diff --git a/apps/docs/src/docs/directives/BPopover.md b/apps/docs/src/docs/directives/BPopover.md
index c9b0a7689..a391dea18 100644
--- a/apps/docs/src/docs/directives/BPopover.md
+++ b/apps/docs/src/docs/directives/BPopover.md
@@ -1,5 +1,3 @@
-<DirectiveHeader path="BPopover/index.ts" title="Docs to be made" />
-
-<script setup lang="ts">
-import DirectiveHeader from './DirectiveHeader.vue'
-</script>
+---
+description: 'Add popovers to any element on your site, using Bootstrap v5 CSS for styling and animations'
+---
diff --git a/apps/docs/src/docs/directives/BToggle.md b/apps/docs/src/docs/directives/BToggle.md
index d9a46f51a..da1541c27 100644
--- a/apps/docs/src/docs/directives/BToggle.md
+++ b/apps/docs/src/docs/directives/BToggle.md
@@ -1,5 +1,3 @@
-<DirectiveHeader path="BToggle/index.ts" title="Docs to be made" />
-
-<script setup lang="ts">
-import DirectiveHeader from './DirectiveHeader.vue'
-</script>
+---
+description: 'A light-weight directive for toggling visibility state for collapses and sidebars by ID. It automatically handles the accessibility attributes on the trigger element'
+---
diff --git a/apps/docs/src/docs/directives/BTooltip.md b/apps/docs/src/docs/directives/BTooltip.md
index c9638cf70..95d7fef16 100644
--- a/apps/docs/src/docs/directives/BTooltip.md
+++ b/apps/docs/src/docs/directives/BTooltip.md
@@ -1,4 +1,6 @@
-<DirectiveHeader path="BTooltip/index.ts" title="BTooltip" />
+---
+description: 'Add custom tooltips to any element. Tooltips can be triggered by hovering, focusing, or clicking an element'
+---
 
 <BCard class="bg-body-tertiary">
 
@@ -180,5 +182,5 @@ In that case, the directive is detecting the title value, and it is going to be
 We should use the value type when the component is not setting to the root component a title. Notice that we should use ts/js code, a variable and so on.
 
 <script setup lang="ts">
-import DirectiveHeader from './DirectiveHeader.vue'
+import {ref} from 'vue'
 </script>
diff --git a/apps/docs/src/docs/directives/DirectiveHeader.vue b/apps/docs/src/docs/directives/DirectiveHeader.vue
deleted file mode 100644
index 8cd0b0b95..000000000
--- a/apps/docs/src/docs/directives/DirectiveHeader.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <SourceHeader :title :path base="githubDirectivesDirectory" />
-</template>
-
-<script setup lang="ts">
-import SourceHeader from '../../components/SourceHeader.vue'
-
-defineProps<{
-  title: string
-  path: string
-}>()
-</script>
diff --git a/apps/docs/src/docs/icons.md b/apps/docs/src/docs/icons.md
index db652cb0c..2092ea240 100644
--- a/apps/docs/src/docs/icons.md
+++ b/apps/docs/src/docs/icons.md
@@ -1,14 +1,11 @@
-# Icons
-
-<BAlert variant="danger" :model-value="true" class="my-5">
-
-The icon components from BootstrapVue are deprecated. While migrating to BootstrapVueNext the icon components will not be supported as there are better, more modern solutions to incorporating icon packages into your application. Continue reading BootstrapVueNext's suggestion on how to incorporate Bootstrap-icons into your application! This documentation only serves as a reference, BootstrapVueNext has no part in the mentioned libraries and some content may be out of date.
-
-</BAlert>
+---
+description: >
+  The icon components from BootstrapVue are deprecated. While migrating to BootstrapVueNext the icon components will not be supported as there are better, more modern solutions to incorporating icon packages into your application. Continue reading BootstrapVueNext's suggestion on how to incorporate Bootstrap-icons into your application!
+---
 
 ## [Unplugin Icons](https://github.com/antfu/unplugin-icons)
 
-> In this section you will learn how to incorporate [unplugin-icons](https://github.com/antfu/unplugin-icons) into your app. unplugin-icons allows you to use icons from multiple icon sets, such as [Bootstrap Icons](https://icon-sets.iconify.design/bi/), [Material Design Icons](https://icon-sets.iconify.design/mdi/), [Font Awesome 4](https://icon-sets.iconify.design/fa/) and many more all with automatic tree-shaking!.
+In this section you will learn how to incorporate [unplugin-icons](https://github.com/antfu/unplugin-icons) into your app. unplugin-icons allows you to use icons from multiple icon sets, such as [Bootstrap Icons](https://icon-sets.iconify.design/bi/), [Material Design Icons](https://icon-sets.iconify.design/mdi/), [Font Awesome 4](https://icon-sets.iconify.design/fa/) and many more all with automatic tree-shaking!.
 
 ### Installation
 
diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md
index 5a8d5bc49..1349d777c 100644
--- a/apps/docs/src/docs/migration-guide.md
+++ b/apps/docs/src/docs/migration-guide.md
@@ -1,4 +1,7 @@
-# Migration Guide
+---
+description: >
+  Guide for migrating from BootstrapVue to BootstrapVueNext. Learn about breaking changes, deprecated features, and how to update your components, directives, and configuration for Vue 3 and Bootstrap 5.
+---
 
 ## Overview
 
diff --git a/apps/docs/src/docs/reference.md b/apps/docs/src/docs/reference.md
index c79820dcd..e175de13a 100644
--- a/apps/docs/src/docs/reference.md
+++ b/apps/docs/src/docs/reference.md
@@ -1,91 +1,10 @@
-# Reference - Table of Contents
+---
+description: BootstrapVueNext and Bootstrap reference, and additional resources documentation.
+---
 
-<div class="lead mb-5">
-
-BootstrapVueNext and Bootstrap reference, and additional resources documentation.
-
-</div>
-
-<TableOfContentsCard v-for="component in computedComponentsList" :key="component.name" class="my-3" :name="component.name" :description="component.description" :route="component.route" />
+<TableOfContentsCard v-for="item in data" :key="item.name" class="my-3" :name="item.name" :description="item.description" :route="item.url" />
 
 <script setup lang="ts">
-import {withBase} from 'vitepress'
-import {computed} from 'vue'
+import {data} from '../data/reference.data'
 import TableOfContentsCard from '../components/TableOfContentsCard.vue'
-
-const routeLocation = (name: string): string => withBase(`/docs/reference/${name.toLowerCase()}`).trim().replaceAll(/\s+/g, '-')
-
-const componentList: {name: string; description: string}[] = [
-  {
-    name: 'Accessibility',
-    description:
-      `A brief overview of BootstrapVueNext's features and limitations for the creation of accessible content`,
-  },
-  {
-    name: 'Color Variants',
-    description:
-      'Color variants are available when using the default Bootstrap v5 CSS and their mappings to CSS classes',
-  },
-  {
-    name: 'Contributing',
-    description:
-      'Information on contributing to the BootstrapVueNext project',
-  },
-  {
-    name: 'Images',
-    description:
-      'Information on including images in your components',
-  },
-  {
-    name: 'Router Links',
-    description: 'Several BootstrapVueNext components support rendering `RouterLink` components compatible with Vue Router and Nuxt.js',
-  },
-  {
-    name: 'Settings',
-    description: 'BootstrapVue provides a few options for customizing component default values, and more',
-  },
-  {
-    name: 'Size props and classes',
-    description: 'Bootstrap v5 CSS provides several classes that control the sizing of elements, of which some of these have been translated into props on components',
-  },
-  {
-    name: 'Spacing classes',
-    description: `Bootstrap v5 CSS includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance`,
-  },
-  {
-    name: 'Starter Templates',
-    description:
-      'There are several ways you can create your app, from basic client side HTML all the way up to using a build system and compilers',
-  },
-  {
-    name: 'Theming Bootstrap',
-    description:
-      `Theming is accomplished by SASS variables, SASS maps, and custom CSS. There is no dedicated theme stylesheet; instead, you can enable the built-in theme to add gradients, shadows, and more.`,
-  },
-  {
-    name: 'Third party libraries',
-    description:
-      'There are several 3rd party libraries that you can use to add additional functionality and features to your BootstrapVue project',
-  },
-  {
-    name: 'Utility Classes',
-    description:
-      'Bootstrap v5 CSS provides various utility classes to control color, spacing, flex-box, text alignment, floating, position, responsive display/hiding and much more',
-  },
-  {
-    name: 'Form Validation',
-    description:
-      'BootstrapVueNext does not include form validation by default; we leave that up to the many existing form validation plugins. Included here are some examples of validation plugins and how they may be integrated',
-  },
-]
-
-const computedComponentsList = computed(() =>
-  componentList
-    .map((el) => ({
-      name: el.name,
-      description: el.description,
-      route: routeLocation(el.name),
-    }))
-    .sort((a, b) => a.name.localeCompare(b.name))
-)
 </script>
diff --git a/apps/docs/src/docs/reference/accessibility.md b/apps/docs/src/docs/reference/accessibility.md
index 4ee4c72ed..67ac5bff6 100644
--- a/apps/docs/src/docs/reference/accessibility.md
+++ b/apps/docs/src/docs/reference/accessibility.md
@@ -1,14 +1,10 @@
-# Accessibility
-
-<div class="lead mb-5">
-
-A brief overview of BootstrapVueNext's features and limitations for the creation of accessible content.
-
-</div>
+---
+description: A brief overview of BootstrapVueNext's features and limitations for the creation of accessible content.
+---
 
 ## Overview and Limitations
 
-BootstrapVue will automatically add in the appropriate accessibility markup for most interactive components. But the overall accessibility of any project built with Bootstrap and BootstrapVue depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with BootstrapVue that fulfill [WCAG 2.0](https://www.w3.org/TR/WCAG20/) (A/AA/AAA), [Section 508](https://www.section508.gov) and similar accessibility standards and requirements.
+BootstrapVueNext will automatically add in the appropriate accessibility markup for most interactive components. But the overall accessibility of any project built with Bootstrap and BootstrapVueNext depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with BootstrapVueNext that fulfill [WCAG 2.0](https://www.w3.org/TR/WCAG20/) (A/AA/AAA), [Section 508](https://www.section508.gov) and similar accessibility standards and requirements.
 
 ## Structural markup
 
@@ -24,7 +20,7 @@ Because BootstrapVue's components are purposely designed to be fairly generic, a
 
 ## Color contrast
 
-Most colors that currently make up Bootstrap V4's default palette — used throughout the framework for things such as button variations, alert variations, form validation indicators — lead to insufficient color contrast (below the recommended [WCAG 2.0 color contrast ratio of 4.5:1)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) when used against a light background. Authors will need to manually modify/extend these default colors to ensure adequate color contrast ratios.
+Most colors that currently make up Bootstrap V5's default palette — used throughout the framework for things such as button variations, alert variations, form validation indicators — lead to insufficient color contrast (below the recommended [WCAG 2.0 color contrast ratio of 4.5:1)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) when used against a light background. Authors will need to manually modify/extend these default colors to ensure adequate color contrast ratios.
 
 Refer to the Theming section for customizing Bootstrap's SCSS.
 
@@ -65,7 +61,7 @@ It is highly recommended to test your app for accessibility before deployment. N
 
 There are just two main things to think about when making your web app accessible:
 
-- Defining the right keyboard behavior. BootstrapVue provides keyboard control for most of our components, but you should make sure your custom components are also keyboard accessible.
+- Defining the right keyboard behavior. BootstrapVueNext provides keyboard control for most of our components, but you should make sure your custom components are also keyboard accessible.
 - Making it possible for screen readers to understand your app. Bootstrap, in most situations, will automatically set the correct `role` and `aria-*` attributes on our components. You should also make sure that all of your custom components provide the correct roles and attributes (use semantic HTML elements and markup where possible).
 
 Steps you should do for testing:
diff --git a/apps/docs/src/docs/reference/color-variants.md b/apps/docs/src/docs/reference/color-variants.md
index c1f83d513..23d41116f 100644
--- a/apps/docs/src/docs/reference/color-variants.md
+++ b/apps/docs/src/docs/reference/color-variants.md
@@ -1,11 +1,9 @@
-# Color variants and CSS class mapping
-
-<div class="lead mb-5">
-
-<p>Color variants are available when using the default Bootstrap v5 CSS and their mappings to CSS classes</p>
-<p>Below are the variants available when using the default Bootstrap v5 CSS. When using BootstrapVueNext components, the variants are referred to by their variant name, rather than by the underlying CSS classname.</p>
-
-</div>
+---
+description: >
+  Color variants are available when using the default Bootstrap v5 CSS and their mappings to CSS classes.
+  Below are the variants available when using the default Bootstrap v5 CSS. When using BootstrapVueNext components,
+  the variants are referred to by their variant name, rather than by the underlying CSS classname.
+---
 
 ## Base variants
 
@@ -245,11 +243,6 @@ $dark: $gray-900;
   </template>
 </HighlightCard>
 
-<script setup lang="ts">
-import HighlightCard from '../../components/HighlightCard.vue'
-
-</script>
-
 <style lang="scss">
 .bg-body-tertiary [class^="border"] {
   display: inline-block;
diff --git a/apps/docs/src/docs/reference/form-validation.md b/apps/docs/src/docs/reference/form-validation.md
index 3d8335b1b..c753b60a5 100644
--- a/apps/docs/src/docs/reference/form-validation.md
+++ b/apps/docs/src/docs/reference/form-validation.md
@@ -1,11 +1,5 @@
-# Form validation
-
-<div class="lead mb-5">
-
-BootstrapVueNext does not include form validation by default; we leave that up to the many existing form validation plugins. Included here are some examples of validation plugins and how they may be integrated.
-
-</div>
-
-<script setup lang="ts">
-
-</script>
+---
+description: >
+  BootstrapVueNext does not include form validation by default; we leave that up to the many existing
+  form validation plugins. Included here are some examples of validation plugins and how they may be integrated.
+---
diff --git a/apps/docs/src/docs/reference/images.md b/apps/docs/src/docs/reference/images.md
index a533fae0c..970eaf48e 100644
--- a/apps/docs/src/docs/reference/images.md
+++ b/apps/docs/src/docs/reference/images.md
@@ -1,7 +1,8 @@
-# Image Support
+---
+description: >
+  Information on including images in your components. The src prop and blank-src prop work only with absolute
+  or fully-qualified URLs. If using project assets as image sources, you'll need to configure your build tool
+  to transform asset URLs.
+---
 
 The `src` prop and `blank-src` prop, out of the box, works only with absolute or fully-qualified-domain-name URLs. If you are using project assets as image sources, please refer to [Asset URL handling](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#asset-url-handling) to configure Vite to transform asset urls. If using a different build tool, you will need to find the relevant documentation to transform assets.
-
-<script setup lang="ts">
-
-</script>
diff --git a/apps/docs/src/docs/reference/router-links.md b/apps/docs/src/docs/reference/router-links.md
index 5fd094c08..99ef069c0 100644
--- a/apps/docs/src/docs/reference/router-links.md
+++ b/apps/docs/src/docs/reference/router-links.md
@@ -1,10 +1,8 @@
-# Router link support
-
-<div class="lead mb-5">
-
-Several BootstrapVue components support rendering `RouterLink` components compatible with Vue Router and Nuxt.js. For more information, see the official [Vue Router docs](https://router.vuejs.org) and official [Nuxt.js docs](https://nuxt.com/docs/api/components/nuxt-link#props).
-
-</div>
+---
+description: >
+  Several BootstrapVue components support rendering RouterLink components compatible with Vue Router and Nuxt.js.
+  For more information, see the official Vue Router docs and official Nuxt.js docs.
+---
 
 ## Common router link props
 
@@ -150,11 +148,9 @@ Configure the active CSS class applied when the link is active with exact path m
 
 With components that support router links (have a `to` prop), you will want to set this to the class `active` (or a space separated string that includes `active`) to apply Bootstrap's active styling on the component when the current route matches the `to` prop.
 
-## Nuxt.js specific router link props
-
-<NotYetImplemented/>
+## Nuxt.js-specific router link props
 
-When BootstrapVue detects that your app is running under [Nuxt.js](https://nuxt.com), it will render a [`NuxtLink`](https://nuxt.com/docs/api/components/nuxt-link#nuxtlink) sub component instead of a `RouterLink`. `NuxtLink` supports all of the above router link props, plus the following additional Nuxt.js specific props.
+When BootstrapVueNext detects that your app is running under [Nuxt.js](https://nuxt.com), it will render a [`NuxtLink`](https://nuxt.com/docs/api/components/nuxt-link#nuxtlink) sub component instead of a `RouterLink`. `NuxtLink` supports all of the above router link props, plus the following additional Nuxt.js specific props.
 
 ### `prefetch`
 
diff --git a/apps/docs/src/docs/reference/settings.md b/apps/docs/src/docs/reference/settings.md
index a770cfacd..b4c78d879 100644
--- a/apps/docs/src/docs/reference/settings.md
+++ b/apps/docs/src/docs/reference/settings.md
@@ -1,11 +1,3 @@
-# Settings
-
-<div class="lead mb-5">
-
-BootstrapVue provides a few options for customizing component default values, and more.
-
-</div>
-
-<script setup lang="ts">
-
-</script>
+---
+description: BootstrapVue provides a few options for customizing component default values, and more.
+---
diff --git a/apps/docs/src/docs/reference/size-props-and-classes.md b/apps/docs/src/docs/reference/size-props-and-classes.md
index 36d58dd3b..17af8bdda 100644
--- a/apps/docs/src/docs/reference/size-props-and-classes.md
+++ b/apps/docs/src/docs/reference/size-props-and-classes.md
@@ -1,11 +1,5 @@
-# Size props and classes
-
-<div class="lead mb-5">
-
-Bootstrap v5 CSS provides several classes that control the sizing of elements, of which some of these have been translated into props on components.
-
-</div>
-
-<script setup lang="ts">
-
-</script>
+---
+description: >
+  Bootstrap v5 CSS provides several classes that control the sizing of elements,
+  some of which have been translated into props on components.
+---
diff --git a/apps/docs/src/docs/reference/spacing-classes.md b/apps/docs/src/docs/reference/spacing-classes.md
index c9e51a8c3..0128bd35f 100644
--- a/apps/docs/src/docs/reference/spacing-classes.md
+++ b/apps/docs/src/docs/reference/spacing-classes.md
@@ -1,11 +1,5 @@
-# Spacing classes
-
-<div class="lead mb-5">
-
-Bootstrap v5 CSS includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
-
-</div>
-
-<script setup lang="ts">
-
-</script>
+---
+description: >
+  Bootstrap v5 CSS includes a wide range of shorthand responsive margin and padding utility classes
+  to modify an element's appearance.
+---
diff --git a/apps/docs/src/docs/reference/starter-templates.md b/apps/docs/src/docs/reference/starter-templates.md
index 8e7226ca2..8fa5f2202 100644
--- a/apps/docs/src/docs/reference/starter-templates.md
+++ b/apps/docs/src/docs/reference/starter-templates.md
@@ -1,11 +1,5 @@
-# Starter Templates
-
-<div class="lead mb-5">
-
-There are several ways you can create your app, from basic client side HTML all the way up to using a build system and compilers.
-
-</div>
-
-<script setup lang="ts">
-
-</script>
+---
+description: >
+  There are several ways you can create your app, from basic client side HTML
+  all the way up to using a build system and compilers.
+---
diff --git a/apps/docs/src/docs/reference/theming-bootstrap.md b/apps/docs/src/docs/reference/theming-bootstrap.md
index 1e440df22..ecc4adf20 100644
--- a/apps/docs/src/docs/reference/theming-bootstrap.md
+++ b/apps/docs/src/docs/reference/theming-bootstrap.md
@@ -1,11 +1,5 @@
-# Theming Bootstrap
-
-<div class="lead mb-5">
-
-Theming is accomplished by SASS variables, SASS maps, and custom CSS. There is no dedicated theme stylesheet; instead, you can enable the built-in theme to add gradients, shadows, and more.
-
-</div>
-
-<script setup lang="ts">
-
-</script>
+---
+description: >
+  Theming is accomplished by SASS variables, SASS maps, and custom CSS. There is no dedicated theme stylesheet;
+  instead, you can enable the built-in theme to add gradients, shadows, and more.
+---
diff --git a/apps/docs/src/docs/reference/third-party-libraries.md b/apps/docs/src/docs/reference/third-party-libraries.md
index feb6dfce3..8d6b27801 100644
--- a/apps/docs/src/docs/reference/third-party-libraries.md
+++ b/apps/docs/src/docs/reference/third-party-libraries.md
@@ -1,11 +1,5 @@
-# Third party libraries
-
-<div class="lead mb-5">
-
-There are several 3rd party libraries that you can use to add additional functionality and features to your BootstrapVue project.
-
-</div>
-
-<script setup lang="ts">
-
-</script>
+---
+description: >
+  There are several 3rd party libraries that you can use to add additional functionality
+  and features to your BootstrapVue project.
+---
diff --git a/apps/docs/src/docs/reference/utility-classes.md b/apps/docs/src/docs/reference/utility-classes.md
index 3f8ee4ab8..a00663073 100644
--- a/apps/docs/src/docs/reference/utility-classes.md
+++ b/apps/docs/src/docs/reference/utility-classes.md
@@ -1,11 +1,5 @@
-# Utility Classes
-
-<div class="lead mb-5">
-
-Bootstrap v5 CSS provides various utility classes to control color, spacing, flex-box, text alignment, floating, position, responsive display/hiding and much more.
-
-</div>
-
-<script setup lang="ts">
-
-</script>
+---
+description: >
+  Bootstrap v5 CSS provides various utility classes to control color, spacing, flex-box,
+  text alignment, floating, position, responsive display/hiding and much more.
+---
diff --git a/apps/docs/src/docs/types.md b/apps/docs/src/docs/types.md
index 111669f0e..a4e8090d4 100644
--- a/apps/docs/src/docs/types.md
+++ b/apps/docs/src/docs/types.md
@@ -1,10 +1,7 @@
-# Types
-
-<div class="lead mb-5">
-
-`BootstrapVueNext` is a complete rewrite that strives for full TypeScript compatibility. This is a list of types we use in this library and that you can use too.
-
-</div>
+---
+description: >
+  BootstrapVueNext is a complete rewrite that strives for full TypeScript compatibility. This is a list of types we use in this library and that you can use too.
+---
 
 ## Alignment
 
diff --git a/apps/docs/src/index.md b/apps/docs/src/index.md
index 6143ffc29..4d6cbaade 100644
--- a/apps/docs/src/index.md
+++ b/apps/docs/src/index.md
@@ -1,10 +1,7 @@
-# Introduction
-
-<div class="lead mb-5">
-
-With BootstrapVueNext you can build fast, responsive, and ARIA accessible projects on the web using Vue.js and Bootstrap v5.
-
-</div>
+---
+title: Introduction
+description: With BootstrapVueNext you can build fast, responsive, and ARIA accessible projects on the web using Vue.js and Bootstrap v5.
+---
 
 <BRow>
   <BCol class="text-center" cols="12" sm="6">
diff --git a/apps/docs/src/types/index.ts b/apps/docs/src/types/index.ts
index df6843ea5..de19a34b0 100644
--- a/apps/docs/src/types/index.ts
+++ b/apps/docs/src/types/index.ts
@@ -63,9 +63,10 @@ export type ComponentReference = Record<
     /**
      * Use package directory relative links. ex: BAccordion.vue => /BAccordion/BAccordion.vue (slash required)
      *
-     * If path is empty string, it defaults to the package directory. If null, it does not render the button
+     * If not provided, the source path will be automatically derived from the component name.
+     * If null, the "View Source" button is not rendered.
      */
-    sourcePath: string | null
+    sourcePath?: string | null
     props: PropRecordWithOptions | PropRecord | PropRecordWithMultipleSections
     emits?: EmitRecord
     slots?: SlotRecord
diff --git a/apps/docs/src/utils/dataLoaderUtils.ts b/apps/docs/src/utils/dataLoaderUtils.ts
new file mode 100644
index 000000000..a77322617
--- /dev/null
+++ b/apps/docs/src/utils/dataLoaderUtils.ts
@@ -0,0 +1,84 @@
+/**
+ * Shared utilities for VitePress data loaders
+ */
+
+export interface DocItem {
+  name: string
+  description: string
+  url: string
+}
+
+/**
+ * Extract the filename from a VitePress URL
+ * @param url - The page URL (e.g., "/docs/components/button.html")
+ * @returns The filename without extension (e.g., "button")
+ */
+export function extractFilenameFromUrl(url: string): string {
+  return url.split('/').pop()?.replace('.html', '') || ''
+}
+
+/**
+ * Convert kebab-case to Title Case
+ * @param str - The kebab-case string (e.g., "button-group")
+ * @returns Title Case string (e.g., "Button Group")
+ */
+export function kebabToTitleCase(str: string): string {
+  return str
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+/**
+ * Extract title from URL using kebab-case to Title Case conversion
+ * @param url - The page URL
+ * @param directory - The directory name (e.g., "components", "composables")
+ * @returns Title Case string
+ */
+export function extractTitleFromUrl(url: string, directory: string): string {
+  const regex = new RegExp(`\\/${directory}\\/([^/]+)\\.html$`)
+  const match = url.match(regex)
+  if (!match) return ''
+
+  return kebabToTitleCase(match[1])
+}
+
+/**
+ * Transform raw VitePress page data into a sorted list of doc items
+ * @param rawData - Raw page data from VitePress content loader
+ * @param directory - The directory name (e.g., "components", "composables")
+ * @param options - Optional configuration
+ * @returns Sorted array of doc items
+ */
+export function transformDocData(
+  rawData: Array<{url: string; frontmatter: Record<string, unknown>}>,
+  directory: string,
+  options: {
+    filterByDescription?: boolean
+    useTitleCase?: boolean
+  } = {}
+): DocItem[] {
+  const {filterByDescription = true, useTitleCase = true} = options
+
+  let items = rawData.map((page) => {
+    let name: string
+    if (useTitleCase) {
+      name = (page.frontmatter.title as string) || extractTitleFromUrl(page.url, directory)
+    } else {
+      // For composables/directives that should keep their original casing
+      name = extractFilenameFromUrl(page.url)
+    }
+
+    return {
+      name,
+      description: (page.frontmatter.description as string) || '',
+      url: page.url,
+    }
+  })
+
+  if (filterByDescription) {
+    items = items.filter((item) => item.description)
+  }
+
+  return items.sort((a, b) => a.name.localeCompare(b.name))
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0ce827626..d4b0ab7ec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       '@tsconfig/node22':
         specifier: ^22.0.2
         version: 22.0.2
+      '@types/markdown-it':
+        specifier: ^14.1.2
+        version: 14.1.2
       '@types/node':
         specifier: ^22.16.5
         version: 22.16.5
@@ -71,6 +74,9 @@ importers:
       eslint-plugin-vue:
         specifier: ^10.3.0
         version: 10.3.0(@typescript-eslint/parser@8.37.0(eslint@9.31.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.31.0(jiti@2.4.2))(vue-eslint-parser@10.2.0(eslint@9.31.0(jiti@2.4.2)))
+      markdown-it:
+        specifier: ^14.1.0
+        version: 14.1.0
       prettier:
         specifier: ^3.6.2
         version: 3.6.2
@@ -4399,6 +4405,9 @@ packages:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
   lint-staged@16.1.2:
     resolution: {integrity: sha512-sQKw2Si2g9KUZNY3XNvRuDq4UJqpHwF0/FQzZR2M7I5MvtpWvibikCjUVJzZdGE0ByurEl3KQNvsGetd1ty1/Q==}
     engines: {node: '>=20.17'}
@@ -4493,6 +4502,10 @@ packages:
   mark.js@8.11.1:
     resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
 
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -4509,6 +4522,9 @@ packages:
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
   merge-options@3.0.4:
     resolution: {integrity: sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==}
     engines: {node: '>=10'}
@@ -5395,6 +5411,10 @@ packages:
   pump@3.0.3:
     resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -6037,6 +6057,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
@@ -11033,6 +11056,10 @@ snapshots:
 
   lilconfig@3.1.3: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
   lint-staged@16.1.2:
     dependencies:
       chalk: 5.4.1
@@ -11169,6 +11196,15 @@ snapshots:
 
   mark.js@8.11.1: {}
 
+  markdown-it@14.1.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
   math-intrinsics@1.1.0: {}
 
   mdast-util-to-hast@13.2.0:
@@ -11189,6 +11225,8 @@ snapshots:
 
   mdn-data@2.12.2: {}
 
+  mdurl@2.0.0: {}
+
   merge-options@3.0.4:
     dependencies:
       is-plain-obj: 2.1.0
@@ -12223,6 +12261,8 @@ snapshots:
       end-of-stream: 1.4.5
       once: 1.4.0
 
+  punycode.js@2.3.1: {}
+
   punycode@2.3.1: {}
 
   qs@6.14.0:
@@ -12899,6 +12939,8 @@ snapshots:
 
   typescript@5.8.3: {}
 
+  uc.micro@2.1.0: {}
+
   ufo@1.5.4: {}
 
   ufo@1.6.1: {}

From f14f0495a03678a4f6c0d0ee87d3eabfc6def136 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Wed, 5 Nov 2025 18:53:39 -0600
Subject: [PATCH 06/13] feat: add name and form props to BFormRating for form
 submission (#2895)

---
 .../src/data/components/formRating.data.ts    | 12 +++
 .../BFormRating/BFormRating.spec.ts           | 83 +++++++++++++++++++
 .../components/BFormRating/BFormRating.vue    | 10 +++
 .../src/types/ComponentProps.ts               |  2 +
 4 files changed, 107 insertions(+)

diff --git a/apps/docs/src/data/components/formRating.data.ts b/apps/docs/src/data/components/formRating.data.ts
index 2ed87b2e0..3712b980d 100644
--- a/apps/docs/src/data/components/formRating.data.ts
+++ b/apps/docs/src/data/components/formRating.data.ts
@@ -19,6 +19,12 @@ export default {
           default: 'false',
           description: 'When `true` makes the rating disabled',
         },
+        form: {
+          type: 'string',
+          default: undefined,
+          description:
+            'The id of the form that the rating input belongs to. If not set, the rating will be associated with the closest parent form',
+        },
         inline: {
           type: 'boolean',
           default: 'false',
@@ -30,6 +36,12 @@ export default {
           default: 0,
           description: 'The current rating value (supports v-model two-way binding).',
         },
+        name: {
+          type: 'string',
+          default: undefined,
+          description:
+            'Sets the name attribute on the hidden input element. Required for form submission',
+        },
         noBorder: {
           type: 'boolean',
           default: 'false',
diff --git a/packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts b/packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts
index 751b7a7f2..94cd50f7a 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts
@@ -261,3 +261,86 @@ it('does not render clear when readonly is true', () => {
   expect(wrapper.find('.clear-button-spacing').exists()).toBe(false)
   expect(wrapper.find('#slot-should-not-render').exists()).toBe(false)
 })
+
+// Form submission tests
+it('renders hidden input when name prop is provided', () => {
+  const wrapper = mount(BFormRating, {
+    props: {
+      name: 'rating',
+      modelValue: 3,
+    },
+  })
+  const hiddenInput = wrapper.find('input[type="hidden"]')
+  expect(hiddenInput.exists()).toBe(true)
+  expect(hiddenInput.attributes('name')).toBe('rating')
+  expect(hiddenInput.attributes('value')).toBe('3')
+})
+
+it('does not render hidden input when name prop is not provided', () => {
+  const wrapper = mount(BFormRating, {
+    props: {
+      modelValue: 3,
+    },
+  })
+  const hiddenInput = wrapper.find('input[type="hidden"]')
+  expect(hiddenInput.exists()).toBe(false)
+})
+
+it('does not render hidden input when disabled is true', () => {
+  const wrapper = mount(BFormRating, {
+    props: {
+      name: 'rating',
+      modelValue: 3,
+      disabled: true,
+    },
+  })
+  const hiddenInput = wrapper.find('input[type="hidden"]')
+  expect(hiddenInput.exists()).toBe(false)
+})
+
+it('hidden input updates when rating value changes', async () => {
+  const wrapper = mount(BFormRating, {
+    props: {
+      name: 'rating',
+      modelValue: 3,
+    },
+  })
+  const hiddenInput = wrapper.find('input[type="hidden"]')
+  expect(hiddenInput.attributes('value')).toBe('3')
+
+  // Click on a star to change the value
+  const [firstStar] = wrapper.findAll('.star')
+  await firstStar.trigger('click')
+  expect(hiddenInput.attributes('value')).toBe('1')
+})
+
+it('renders hidden input with form attribute when provided', () => {
+  const wrapper = mount(BFormRating, {
+    props: {
+      name: 'rating',
+      form: 'my-form',
+      modelValue: 4,
+    },
+  })
+  const hiddenInput = wrapper.find('input[type="hidden"]')
+  expect(hiddenInput.exists()).toBe(true)
+  expect(hiddenInput.attributes('name')).toBe('rating')
+  expect(hiddenInput.attributes('form')).toBe('my-form')
+  expect(hiddenInput.attributes('value')).toBe('4')
+})
+
+it('hidden input value is 0 when rating is cleared', async () => {
+  const wrapper = mount(BFormRating, {
+    props: {
+      name: 'rating',
+      modelValue: 3,
+      showClear: true,
+    },
+  })
+  const hiddenInput = wrapper.find('input[type="hidden"]')
+  expect(hiddenInput.attributes('value')).toBe('3')
+
+  const clearBtn = wrapper.find('.clear-button-spacing')
+  await clearBtn.trigger('click')
+  expect(hiddenInput.attributes('value')).toBe('0')
+})
diff --git a/packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue b/packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
index 6d23112ec..59cad3090 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
@@ -10,6 +10,14 @@
     tabindex="0"
     @keydown="onKeydown"
   >
+    <input
+      v-if="props.name && !props.disabled"
+      key="hidden"
+      type="hidden"
+      :name="props.name"
+      :form="props.form"
+      :value="localValue"
+    />
     <span
       v-if="props.showClear && !props.readonly && !props.disabled"
       class="clear-button-spacing"
@@ -91,6 +99,8 @@ const _props = withDefaults(defineProps<Omit<BFormRatingProps, 'modelValue'>>(),
   precision: 0,
   readonly: false,
   disabled: false,
+  form: undefined,
+  name: undefined,
   showClear: false,
   showValue: false,
   showValueMax: false,
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 46ce80904..7e23aeebf 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -400,6 +400,8 @@ export interface BFormRatingProps {
   precision?: number
   readonly?: boolean
   disabled?: boolean
+  form?: string
+  name?: string
   showClear?: boolean
   showValue?: boolean
   showValueMax?: boolean

From 4b0d55a957f029131c89f740adc65ca7d9e79d58 Mon Sep 17 00:00:00 2001
From: Victor Turansky <victor.turansky@gmail.com>
Date: Fri, 14 Nov 2025 17:33:01 +0100
Subject: [PATCH 07/13] fix(typings): Fix paths to `*.d.mts` files (#2907)

---
 packages/bootstrap-vue-next/package.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json
index 4eb39f0e4..239daceb5 100644
--- a/packages/bootstrap-vue-next/package.json
+++ b/packages/bootstrap-vue-next/package.json
@@ -21,7 +21,7 @@
     },
     "./components": {
       "import": {
-        "types": "./dist/src/components/index.mts",
+        "types": "./dist/src/components/index.d.mts",
         "default": "./dist/src/components/index.mjs"
       },
       "require": {
@@ -31,7 +31,7 @@
     },
     "./components/*": {
       "import": {
-        "types": "./dist/src/components/*/index.mts",
+        "types": "./dist/src/components/*/index.d.mts",
         "default": "./dist/src/components/*/index.mjs"
       },
       "require": {
@@ -41,7 +41,7 @@
     },
     "./directives": {
       "import": {
-        "types": "./dist/src/directives/index.mts",
+        "types": "./dist/src/directives/index.d.mts",
         "default": "./dist/src/directives/index.mjs"
       },
       "require": {
@@ -51,7 +51,7 @@
     },
     "./directives/*": {
       "import": {
-        "types": "./dist/src/directives/*/index.mts",
+        "types": "./dist/src/directives/*/index.d.mts",
         "default": "./dist/src/directives/*/index.mjs"
       },
       "require": {
@@ -61,7 +61,7 @@
     },
     "./plugins": {
       "import": {
-        "types": "./dist/src/plugins/index.mts",
+        "types": "./dist/src/plugins/index.d.mts",
         "default": "./dist/src/plugins/index.mjs"
       },
       "require": {
@@ -71,7 +71,7 @@
     },
     "./plugins/*": {
       "import": {
-        "types": "./dist/src/plugins/*/index.mts",
+        "types": "./dist/src/plugins/*/index.d.mts",
         "default": "./dist/src/plugins/*/index.mjs"
       },
       "require": {
@@ -81,7 +81,7 @@
     },
     "./composables": {
       "import": {
-        "types": "./dist/src/composables/index.mts",
+        "types": "./dist/src/composables/index.d.mts",
         "default": "./dist/src/composables/index.mjs"
       },
       "require": {
@@ -91,7 +91,7 @@
     },
     "./composables/*": {
       "import": {
-        "types": "./dist/src/composables/*/index.mts",
+        "types": "./dist/src/composables/*/index.d.mts",
         "default": "./dist/src/composables/*/index.mjs"
       },
       "require": {
@@ -101,7 +101,7 @@
     },
     "./resolvers": {
       "import": {
-        "types": "./dist/src/resolvers/index.mts",
+        "types": "./dist/src/resolvers/index.d.mts",
         "default": "./dist/src/resolvers/index.mjs"
       },
       "require": {
@@ -111,7 +111,7 @@
     },
     "./utils": {
       "import": {
-        "types": "./dist/src/utils/index.mts",
+        "types": "./dist/src/utils/index.d.mts",
         "default": "./dist/src/utils/index.mjs"
       },
       "require": {

From 84b58056334c437378335b3c87ac4aad62b6c1e1 Mon Sep 17 00:00:00 2001
From: Tudor Gradinaru <tudor.rodut@yahoo.com>
Date: Fri, 14 Nov 2025 18:34:53 +0200
Subject: [PATCH 08/13] docs(BFormInput): document @wheel.prevent for disabling
 mousewheel events (#2903)

---
 apps/docs/src/docs/components/form-input.md             | 8 +++++++-
 apps/docs/src/docs/migration-guide.md                   | 2 +-
 packages/bootstrap-vue-next/src/types/ComponentProps.ts | 1 -
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/docs/src/docs/components/form-input.md b/apps/docs/src/docs/components/form-input.md
index f9b2a2de7..3c365e3fb 100644
--- a/apps/docs/src/docs/components/form-input.md
+++ b/apps/docs/src/docs/components/form-input.md
@@ -169,7 +169,13 @@ The `plaintext` option is not supported by input types `color` or `range`.
 
 ## Disabling mousewheel events on numeric-like inputs
 
-<NotYetImplemented/>
+By default, when a numeric input has focus, the browser will increment or decrement the input's value when the user scrolls the mousewheel. To disable this behavior, you can use Vue's event modifier `.prevent` on the `wheel` event:
+
+```vue
+<BFormInput type="number" @wheel.prevent />
+```
+
+This approach uses native Vue functionality and doesn't require additional props.
 
 ## Datalist support
 
diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md
index 1349d777c..f4d5d5982 100644
--- a/apps/docs/src/docs/migration-guide.md
+++ b/apps/docs/src/docs/migration-guide.md
@@ -453,7 +453,7 @@ Use `label-visually-hidden` instead of `label-sronly` per
 Access to the native `input` element is implemented differently due to changes in how Vue 3
 handles references. See the [BFormInput documentation](/docs/components/form-input#exposed-input-element) for more details.
 
-<NotYetImplemented>Disabling mousewheel events.</NotYetImplemented>
+Disabling mousewheel events on numeric inputs can be achieved using Vue's native event modifier: `@wheel.prevent`. See the [BFormInput documentation](/docs/components/form-input#disabling-mousewheel-events-on-numeric-like-inputs) for usage examples.
 
 `trim`, `lazy`, or `number` properties have been deprecated. We support the native modifiers
 [`trim`, `lazy`, and `number`](https://vuejs.org/guide/essentials/forms.html#modifiers).
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 7e23aeebf..f681dbabe 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -343,7 +343,6 @@ export interface BFormFileProps {
 export interface BFormInputProps extends CommonInputProps {
   max?: Numberish
   min?: Numberish
-  // noWheel: {type: Boolean, default: false}, TODO: not implemented yet
   step?: Numberish
   type?: InputType
 }

From 7b397599f76f50d10773cd8fb63fb6d2e72dc4c7 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Fri, 14 Nov 2025 09:37:58 -0800
Subject: [PATCH 09/13] fix(directives): Robustness fixes for directives
 (#2906)

* fix: improve stability of directives
* fix: implement uid namespacing of directives to prevent collisions
* fix: handle directive activation state transitions in updated hook
---
 .../src/directives/BPopover/index.ts          |  64 +----
 .../src/directives/BScrollspy/index.ts        |  38 ++-
 .../src/directives/BToggle/index.ts           |  33 ++-
 .../src/directives/BTooltip/index.ts          |  70 ++---
 .../src/directives/utils.ts                   | 247 +++++++++++++++++-
 .../src/utils/floatingUi.ts                   |  73 ++++--
 6 files changed, 391 insertions(+), 134 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/directives/BPopover/index.ts b/packages/bootstrap-vue-next/src/directives/BPopover/index.ts
index 939099429..390b8fb29 100644
--- a/packages/bootstrap-vue-next/src/directives/BPopover/index.ts
+++ b/packages/bootstrap-vue-next/src/directives/BPopover/index.ts
@@ -1,51 +1,13 @@
-import {type Directive, type Ref} from 'vue'
-import {
-  bind,
-  type ElementWithPopper,
-  resolveActiveStatus,
-  resolveContent,
-  resolveDirectiveProps,
-  unbind,
-} from '../../utils/floatingUi'
-import {defaultsKey} from '../../utils/keys'
-import {findProvides} from '../utils'
-
-export const vBPopover: Directive<ElementWithPopper> = {
-  mounted(el, binding, vnode) {
-    const defaults = (findProvides(binding, vnode) as Record<symbol, Ref>)[defaultsKey]?.value
-    const isActive = resolveActiveStatus(binding.value)
-    if (!isActive) return
-
-    const text = resolveContent(binding.value, el)
-
-    if (!text.body && !text.title) return
-    el.$__binding = JSON.stringify([binding.modifiers, binding.value])
-    bind(el, binding, {
-      ...(defaults['BPopover'] || undefined),
-      ...resolveDirectiveProps(binding, el),
-      ...text,
-    })
-  },
-  updated(el, binding, vnode) {
-    const defaults = (findProvides(binding, vnode) as Record<symbol, Ref>)[defaultsKey]?.value
-
-    const isActive = resolveActiveStatus(binding.value)
-    if (!isActive) return
-
-    const text = resolveContent(binding.value, el)
-
-    if (!text.body && !text.title) return
-    delete binding.oldValue
-    if (el.$__binding === JSON.stringify([binding.modifiers, binding.value])) return
-    unbind(el)
-    bind(el, binding, {
-      ...(defaults['BPopover'] || undefined),
-      ...resolveDirectiveProps(binding, el),
-      ...text,
-    })
-    el.$__binding = JSON.stringify([binding.modifiers, binding.value])
-  },
-  beforeUnmount(el) {
-    unbind(el)
-  },
-}
+import {type Directive} from 'vue'
+import {type ElementWithPopper, resolveDirectiveProps} from '../../utils/floatingUi'
+import {createFloatingDirective} from '../utils'
+
+export const vBPopover: Directive<ElementWithPopper> = createFloatingDirective(
+  '$__popover',
+  'BPopover',
+  (text, defaults, binding, el) => ({
+    ...(defaults || undefined),
+    ...resolveDirectiveProps(binding, el),
+    ...text,
+  })
+)
diff --git a/packages/bootstrap-vue-next/src/directives/BScrollspy/index.ts b/packages/bootstrap-vue-next/src/directives/BScrollspy/index.ts
index 838fe1cf4..385bd73aa 100644
--- a/packages/bootstrap-vue-next/src/directives/BScrollspy/index.ts
+++ b/packages/bootstrap-vue-next/src/directives/BScrollspy/index.ts
@@ -1,13 +1,28 @@
 import {type Directive, type DirectiveBinding} from 'vue'
 import {useScrollspy} from '../../composables/useScrollspy'
 import {omit} from '../../utils/object'
+import {getDirectiveUid} from '../utils'
 
 export interface ElementWithScrollspy extends HTMLElement {
-  $__scrollspy?: ReturnType<typeof useScrollspy>
+  $__scrollspy?: Record<number, ReturnType<typeof useScrollspy>>
 }
 
 const bind = (el: ElementWithScrollspy, binding: Readonly<DirectiveBinding>) => {
-  if (el.$__scrollspy) el.$__scrollspy.cleanup()
+  // SSR guard: skip on server
+  if (typeof document === 'undefined') return
+
+  const uid = getDirectiveUid(binding)
+
+  // Initialize UID namespace for this directive
+  const elWithScrollspy = el as ElementWithScrollspy & Record<string, unknown>
+  elWithScrollspy.$__scrollspy = elWithScrollspy.$__scrollspy ?? Object.create(null)
+
+  // Clean up existing instance if present
+  const existingInstance = elWithScrollspy.$__scrollspy![uid]
+  if (existingInstance) {
+    existingInstance.cleanup()
+  }
+
   const {arg, value} = binding
   const isObject = typeof value === 'object' && value !== null
   const content = arg
@@ -17,13 +32,26 @@ const bind = (el: ElementWithScrollspy, binding: Readonly<DirectiveBinding>) =>
       : isObject
         ? value.content || value.element
         : null
-  el.$__scrollspy = useScrollspy(content, el, isObject ? omit(value, ['content', 'element']) : {})
+
+  // Store scrollspy instance for this component instance
+  elWithScrollspy.$__scrollspy![uid] = useScrollspy(
+    content,
+    el,
+    isObject ? omit(value, ['content', 'element']) : {}
+  )
 }
 
 export const vBScrollspy: Directive<ElementWithScrollspy> = {
   mounted: bind,
   updated: bind,
-  beforeUnmount(el) {
-    if (el.$__scrollspy) el.$__scrollspy.cleanup()
+  beforeUnmount(el, binding) {
+    const uid = getDirectiveUid(binding)
+    const elWithScrollspy = el as ElementWithScrollspy & Record<string, unknown>
+    const instance = elWithScrollspy.$__scrollspy?.[uid]
+
+    if (!instance) return
+
+    instance.cleanup()
+    delete elWithScrollspy.$__scrollspy![uid]
   },
 }
diff --git a/packages/bootstrap-vue-next/src/directives/BToggle/index.ts b/packages/bootstrap-vue-next/src/directives/BToggle/index.ts
index cb1b5ac4a..54d73d311 100644
--- a/packages/bootstrap-vue-next/src/directives/BToggle/index.ts
+++ b/packages/bootstrap-vue-next/src/directives/BToggle/index.ts
@@ -62,19 +62,38 @@ const handleUpdate = (
 
   targets.forEach(async (targetId) => {
     let count = 0
-    // Keep looking until showHide is found, giving up after 400ms or directive is unmounted
-    while (count < 5 && (el as HTMLElement).dataset.bvtoggle) {
+    const maxAttempts = 5
+    const delayMs = 100
+
+    // Keep looking until showHide is found, giving up after 500ms or directive is unmounted
+    while (count < maxAttempts) {
+      // Check if element is still mounted before each iteration
+      if (!(el as HTMLElement).dataset.bvtoggle) {
+        // Element was unmounted, stop trying
+        return
+      }
+
       const showHide = showHideMap?.value.get(targetId)
       if (!showHide) {
         count++
-        await new Promise((resolve) => setTimeout(resolve, 100))
-        if (count < 4) continue
-        // eslint-disable-next-line no-console
-        console.warn(`[v-b-toggle] Target with ID ${targetId} not found`)
+        if (count < maxAttempts) {
+          await new Promise((resolve) => setTimeout(resolve, delayMs))
+          continue
+        }
+        // Only warn if element is still mounted after all attempts
+        if ((el as HTMLElement).dataset.bvtoggle) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `[v-b-toggle] Target with ID ${targetId} not found after ${maxAttempts * delayMs}ms`
+          )
+        }
         break
       }
-      // Register the trigger element
 
+      // Final check before registration
+      if (!(el as HTMLElement).dataset.bvtoggle) return
+
+      // Register the trigger element
       toValue(showHide).unregisterTrigger('click', el, false)
       toValue(showHide).registerTrigger('click', el)
       break
diff --git a/packages/bootstrap-vue-next/src/directives/BTooltip/index.ts b/packages/bootstrap-vue-next/src/directives/BTooltip/index.ts
index 553ff0cde..bf00bb737 100644
--- a/packages/bootstrap-vue-next/src/directives/BTooltip/index.ts
+++ b/packages/bootstrap-vue-next/src/directives/BTooltip/index.ts
@@ -1,55 +1,15 @@
-import {type Directive, type Ref} from 'vue'
-import {
-  bind,
-  type ElementWithPopper,
-  resolveActiveStatus,
-  resolveContent,
-  resolveDirectiveProps,
-  unbind,
-} from '../../utils/floatingUi'
-import {defaultsKey} from '../../utils/keys'
-import {findProvides} from '../utils'
-
-export const vBTooltip: Directive<ElementWithPopper> = {
-  mounted(el, binding, vnode) {
-    const defaults = (findProvides(binding, vnode) as Record<symbol, Ref>)[defaultsKey]?.value
-    const isActive = resolveActiveStatus(binding.value)
-    if (!isActive) return
-
-    const text = resolveContent(binding.value, el)
-
-    if (!text.body && !text.title) return
-    el.$__binding = JSON.stringify([binding.modifiers, binding.value])
-    bind(el, binding, {
-      noninteractive: true,
-      ...(defaults['BTooltip'] || undefined),
-      ...resolveDirectiveProps(binding, el),
-      title: text.title ?? text.body ?? '',
-      tooltip: isActive,
-    })
-  },
-  updated(el, binding, vnode) {
-    const defaults = (findProvides(binding, vnode) as Record<symbol, Ref>)[defaultsKey]?.value
-
-    const isActive = resolveActiveStatus(binding.value)
-    if (!isActive) return
-
-    const text = resolveContent(binding.value, el)
-
-    if (!text.body && !text.title) return
-    delete binding.oldValue
-    if (el.$__binding === JSON.stringify([binding.modifiers, binding.value])) return
-    unbind(el)
-    bind(el, binding, {
-      noninteractive: true,
-      ...(defaults['BTooltip'] || undefined),
-      ...resolveDirectiveProps(binding, el),
-      title: text.title ?? text.body ?? '',
-      tooltip: isActive,
-    })
-    el.$__binding = JSON.stringify([binding.modifiers, binding.value])
-  },
-  beforeUnmount(el) {
-    unbind(el)
-  },
-}
+import {type Directive} from 'vue'
+import {type ElementWithPopper, resolveDirectiveProps} from '../../utils/floatingUi'
+import {createFloatingDirective} from '../utils'
+
+export const vBTooltip: Directive<ElementWithPopper> = createFloatingDirective(
+  '$__tooltip',
+  'BTooltip',
+  (text, defaults, binding, el) => ({
+    noninteractive: true,
+    ...(defaults || undefined),
+    ...resolveDirectiveProps(binding, el),
+    title: text.title ?? text.body ?? '',
+    tooltip: true,
+  })
+)
diff --git a/packages/bootstrap-vue-next/src/directives/utils.ts b/packages/bootstrap-vue-next/src/directives/utils.ts
index f010bce02..d7a814c1e 100644
--- a/packages/bootstrap-vue-next/src/directives/utils.ts
+++ b/packages/bootstrap-vue-next/src/directives/utils.ts
@@ -1,4 +1,14 @@
-import type {ComponentInternalInstance, DirectiveBinding, VNode} from 'vue'
+import type {ComponentInternalInstance, Directive, DirectiveBinding, Ref, VNode} from 'vue'
+import type {BPopoverProps} from '../types/ComponentProps'
+import {
+  bind,
+  type ElementWithPopper,
+  resolveActiveStatus,
+  resolveContent,
+  resolveDirectiveProps,
+  unbind,
+} from '../utils/floatingUi'
+import {defaultsKey} from '../utils/keys'
 
 interface _ComponentInternalInstance extends ComponentInternalInstance {
   provides?: Record<string, unknown>
@@ -11,6 +21,118 @@ interface _VNode extends VNode {
   ssContent?: VNode | null
 }
 
+/**
+ * Represents per-instance state for directives using UID namespacing
+ */
+export interface DirectiveInstanceState {
+  binding: string // JSON.stringify cache for change detection
+  destroying: boolean // Flag to prevent race conditions during cleanup
+}
+
+/**
+ * Gets the component instance UID from a directive binding
+ * @throws Error if binding.instance is not available
+ */
+export function getDirectiveUid(binding: DirectiveBinding): number {
+  if (!binding.instance) {
+    throw new Error('[Bootstrap-Vue-Next] Directive binding.instance is not available')
+  }
+  return binding.instance.$.uid
+}
+
+/**
+ * Initializes UID-namespaced storage on an element for a directive
+ * @param el - The HTML element
+ * @param propertyName - The property name (e.g., '$__tooltip', '$__popover')
+ * @param uid - The component instance UID
+ * @param binding - The directive binding value to cache
+ * @returns The initialized instance state
+ */
+export function initDirectiveInstance(
+  el: HTMLElement & Record<string, unknown>,
+  propertyName: string,
+  uid: number,
+  binding: DirectiveBinding
+): DirectiveInstanceState {
+  // Initialize UID namespace for this directive
+  const elWithProps = el as Record<string, unknown>
+  elWithProps[propertyName] = elWithProps[propertyName] ?? Object.create(null)
+
+  // Store per-instance state with JSON cache for change detection
+  const state: DirectiveInstanceState = {
+    binding: JSON.stringify([binding.modifiers, binding.value]),
+    destroying: false,
+  }
+
+  ;(elWithProps[propertyName] as Record<string, unknown>)[uid] = state
+  return state
+}
+
+/**
+ * Gets the instance state for a directive, if it exists
+ * @param el - The HTML element
+ * @param propertyName - The property name (e.g., '$__tooltip', '$__popover')
+ * @param uid - The component instance UID
+ * @returns The instance state or undefined if not found
+ */
+export function getDirectiveInstance(
+  el: HTMLElement & Record<string, unknown>,
+  propertyName: string,
+  uid: number
+): DirectiveInstanceState | undefined {
+  const elWithProps = el as Record<string, unknown>
+  return (elWithProps[propertyName] as Record<string, unknown> | undefined)?.[uid] as
+    | DirectiveInstanceState
+    | undefined
+}
+
+/**
+ * Checks if the directive binding has changed for this instance
+ * @param instance - The directive instance state
+ * @param binding - The current directive binding
+ * @returns true if the binding has changed, false otherwise
+ */
+export function hasBindingChanged(
+  instance: DirectiveInstanceState,
+  binding: DirectiveBinding
+): boolean {
+  const newBinding = JSON.stringify([binding.modifiers, binding.value])
+  return instance.binding !== newBinding
+}
+
+/**
+ * Updates the cached binding value for a directive instance
+ * @param instance - The directive instance state
+ * @param binding - The new directive binding
+ */
+export function updateBindingCache(
+  instance: DirectiveInstanceState,
+  binding: DirectiveBinding
+): void {
+  instance.binding = JSON.stringify([binding.modifiers, binding.value])
+}
+
+/**
+ * Cleans up a directive instance
+ * @param el - The HTML element
+ * @param propertyName - The property name (e.g., '$__tooltip', '$__popover')
+ * @param uid - The component instance UID
+ */
+export function cleanupDirectiveInstance(
+  el: HTMLElement & Record<string, unknown>,
+  propertyName: string,
+  uid: number
+): void {
+  const elWithProps = el as Record<string, unknown>
+  const instance = (elWithProps[propertyName] as Record<string, unknown> | undefined)?.[uid] as
+    | DirectiveInstanceState
+    | undefined
+  if (instance) {
+    instance.destroying = true
+    delete (elWithProps[propertyName] as Record<string, unknown>)[uid]
+  }
+}
+
 // taken from vuetify https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/directiveComponent.ts
 
 export function findProvides(binding: DirectiveBinding, vnode: _VNode): Record<string, unknown> {
@@ -68,3 +190,126 @@ export function findComponentParent(
   }
   return root
 }
+
+/**
+ * Creates a floating UI directive (tooltip or popover) with UID-namespaced state management
+ * @param propertyName - The property name for storing state (e.g., '$__tooltip', '$__popover')
+ * @param componentDefaultsKey - The key for accessing component defaults (e.g., 'BTooltip', 'BPopover')
+ * @param buildProps - Optional function to customize the props passed to bind()
+ * @returns A Vue directive object
+ */
+export function createFloatingDirective(
+  propertyName: string,
+  componentDefaultsKey: string,
+  buildProps?: (
+    text: {title?: string; body?: string},
+    defaults: unknown,
+    binding: Readonly<DirectiveBinding>,
+    el: Readonly<HTMLElement>
+  ) => BPopoverProps
+): Directive<ElementWithPopper> {
+  return {
+    mounted(el, binding, vnode) {
+      const uid = getDirectiveUid(binding)
+      const defaultsMap = (findProvides(binding, vnode) as Record<symbol, Ref>)[defaultsKey]
+        ?.value as Record<string, unknown> | undefined
+      const isActive = resolveActiveStatus(binding.value)
+      if (!isActive) return
+
+      const text = resolveContent(binding.value, el)
+
+      if (!text.body && !text.title) return
+
+      // Initialize per-instance state with UID namespacing
+      initDirectiveInstance(el, propertyName, uid, binding)
+
+      const props = buildProps
+        ? buildProps(text, defaultsMap?.[componentDefaultsKey], binding, el)
+        : {
+            ...(defaultsMap?.[componentDefaultsKey] || undefined),
+            ...resolveDirectiveProps(binding, el),
+            ...text,
+          }
+
+      bind(el, binding, props)
+    },
+
+    updated(el, binding, vnode) {
+      const uid = getDirectiveUid(binding)
+      let instance = getDirectiveInstance(el, propertyName, uid)
+
+      const defaultsMap = (findProvides(binding, vnode) as Record<symbol, Ref>)[defaultsKey]
+        ?.value as Record<string, unknown> | undefined
+
+      const isActive = resolveActiveStatus(binding.value)
+
+      // If inactive, clean up existing instance if present
+      if (!isActive) {
+        if (instance && el.$__element) {
+          unbind(el)
+          cleanupDirectiveInstance(el, propertyName, uid)
+        }
+        return
+      }
+
+      const text = resolveContent(binding.value, el)
+
+      if (!text.body && !text.title) {
+        // Clean up if no content
+        if (instance && el.$__element) {
+          unbind(el)
+          cleanupDirectiveInstance(el, propertyName, uid)
+        }
+        return
+      }
+
+      // If instance doesn't exist, this is a transition from inactive/no-content to active
+      // Initialize the instance now (similar to mounted)
+      if (!instance) {
+        instance = initDirectiveInstance(el, propertyName, uid, binding)
+
+        const props = buildProps
+          ? buildProps(text, defaultsMap?.[componentDefaultsKey], binding, el)
+          : {
+              ...(defaultsMap?.[componentDefaultsKey] || undefined),
+              ...resolveDirectiveProps(binding, el),
+              ...text,
+            }
+
+        bind(el, binding, props)
+        return
+      }
+
+      // Check if binding changed for THIS instance
+      if (!hasBindingChanged(instance, binding)) return
+
+      // Prevent race conditions during update
+      if (instance.destroying) return
+
+      unbind(el)
+
+      const props = buildProps
+        ? buildProps(text, defaultsMap?.[componentDefaultsKey], binding, el)
+        : {
+            ...(defaultsMap?.[componentDefaultsKey] || undefined),
+            ...resolveDirectiveProps(binding, el),
+            ...text,
+          }
+
+      bind(el, binding, props)
+
+      // Update THIS instance's cache
+      updateBindingCache(instance, binding)
+    },
+
+    beforeUnmount(el, binding) {
+      const uid = getDirectiveUid(binding)
+      const instance = getDirectiveInstance(el, propertyName, uid)
+
+      if (!instance) return
+
+      unbind(el)
+      cleanupDirectiveInstance(el, propertyName, uid)
+    },
+  }
+}
diff --git a/packages/bootstrap-vue-next/src/utils/floatingUi.ts b/packages/bootstrap-vue-next/src/utils/floatingUi.ts
index 53dd394e3..80e9bcdd9 100644
--- a/packages/bootstrap-vue-next/src/utils/floatingUi.ts
+++ b/packages/bootstrap-vue-next/src/utils/floatingUi.ts
@@ -45,18 +45,26 @@ export const resolveContent = (
   const missingBindingValue =
     typeof values === 'undefined' ||
     (typeof values === 'object' && !values.title && !values.content && !values.body)
-  const title = el.getAttribute('title') || el.getAttribute('data-original-title')
-  if (missingBindingValue) {
-    if (title) {
-      el.removeAttribute('title')
-      el.setAttribute('data-original-title', title)
-
-      return {
-        body: title,
+
+  // SSR guard: skip DOM attribute access on server
+  if (typeof document !== 'undefined') {
+    const title = el.getAttribute('title') || el.getAttribute('data-original-title')
+    if (missingBindingValue) {
+      if (title) {
+        el.removeAttribute('title')
+        el.setAttribute('data-original-title', title)
+
+        return {
+          body: title,
+        }
       }
+      return {}
     }
-    return {}
+  } else {
+    // SSR: if no binding value provided, return empty
+    if (missingBindingValue) return {}
   }
+
   if (typeof values === 'string') {
     return {
       body: values,
@@ -100,8 +108,22 @@ export const resolveDirectiveProps = (
 })
 
 export interface ElementWithPopper extends HTMLElement {
+  [key: string]: unknown
   $__element?: HTMLElement
-  $__binding?: string
+  $__tooltip?: Record<
+    number,
+    {
+      binding: string
+      destroying: boolean
+    }
+  >
+  $__popover?: Record<
+    number,
+    {
+      binding: string
+      destroying: boolean
+    }
+  >
 }
 
 export const bind = (
@@ -109,6 +131,9 @@ export const bind = (
   binding: Readonly<DirectiveBinding>,
   props: BPopoverProps
 ) => {
+  // SSR guard: skip DOM manipulation on server
+  if (typeof document === 'undefined') return
+
   const div = document.createElement('span')
   if (binding.modifiers.body) document.body.appendChild(div)
   else if (binding.modifiers.child) el.appendChild(div)
@@ -119,11 +144,29 @@ export const bind = (
 
 export const unbind = (el: ElementWithPopper) => {
   const div = el.$__element
-  if (div) render(null, div)
-  setTimeout(() => {
-    div?.remove()
-  }, 0)
-  delete el.$__element
+  if (!div) return
+
+  // Unmount Vue component immediately
+  render(null, div)
+
+  // SSR guard: skip DOM cleanup on server
+  if (typeof document === 'undefined') {
+    delete el.$__element
+    return
+  }
+
+  // Use microtask instead of setTimeout(0) for more predictable cleanup
+  // and better performance
+  queueMicrotask(() => {
+    // Remove the element in next microtask
+    // The directive's beforeUnmount will have already cleaned up UID-specific state
+    div.remove()
+    // Only delete the reference if it still points to the div we just unmounted
+    // This prevents deleting a fresh reference if bind() was called again immediately
+    if (el.$__element === div) {
+      delete el.$__element
+    }
+  })
 }
 
 export const isBoundary = (input: unknown): input is Boundary =>

From ca26be4fe3e73fdb6872b1297f8dc51a59fe1370 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Fri, 14 Nov 2025 15:13:55 -0800
Subject: [PATCH 10/13] docs(Offcanvas): Parity pass (#2900)

---
 .../src/data/components/offcanvas.data.ts     | 111 ++++++----
 .../components/demo/OffcanvasBackdrop.vue     |  24 ++
 .../docs/components/demo/OffcanvasBasic.vue   |  22 ++
 .../docs/components/demo/OffcanvasBorder.vue  |  22 ++
 .../docs/components/demo/OffcanvasFooter.vue  |  33 +++
 .../components/demo/OffcanvasLocations.vue    |  10 +
 .../components/demo/OffcanvasNoHeader.vue     |  32 +++
 .../components/demo/OffcanvasOverview.vue     |  14 --
 .../components/demo/OffcanvasResponsive.vue   |   5 +-
 .../docs/components/demo/OffcanvasSidebar.vue |   8 +
 .../docs/components/demo/OffcanvasVariant.vue |  22 ++
 apps/docs/src/docs/components/offcanvas.md    | 209 +++++++++++++++++-
 .../composables/demo/UseScrollspyCleanup.vue  |   4 +-
 .../demo/UseScrollspyCustomQuery.vue          |  67 ++++--
 .../demo/UseScrollspyCustomRoot.vue           |   5 +-
 .../demo/UseScrollspyDynamicContent.vue       |   5 +-
 apps/docs/src/docs/migration-guide.md         |  81 ++++++-
 17 files changed, 584 insertions(+), 90 deletions(-)
 create mode 100644 apps/docs/src/docs/components/demo/OffcanvasBackdrop.vue
 create mode 100644 apps/docs/src/docs/components/demo/OffcanvasBasic.vue
 create mode 100644 apps/docs/src/docs/components/demo/OffcanvasBorder.vue
 create mode 100644 apps/docs/src/docs/components/demo/OffcanvasFooter.vue
 create mode 100644 apps/docs/src/docs/components/demo/OffcanvasNoHeader.vue
 delete mode 100644 apps/docs/src/docs/components/demo/OffcanvasOverview.vue
 create mode 100644 apps/docs/src/docs/components/demo/OffcanvasVariant.vue

diff --git a/apps/docs/src/data/components/offcanvas.data.ts b/apps/docs/src/data/components/offcanvas.data.ts
index 6212fb9ff..2c0b0a0bc 100644
--- a/apps/docs/src/data/components/offcanvas.data.ts
+++ b/apps/docs/src/data/components/offcanvas.data.ts
@@ -19,11 +19,24 @@ export default {
         ...pick(
           buildCommonProps({
             id: {
-              description:
-                'The Id to be injected to accordion items and used in BOffcanvas for state management',
+              description: 'The Id to be injected to offcanvas and used for state management',
+            },
+            placement: {
+              description: "Position of the offcanvas: 'start', 'end', 'top', or 'bottom'",
             },
           }),
-          ['bodyAttrs', 'bodyClass', 'id']
+          [
+            'bodyAttrs',
+            'bodyClass',
+            'footerClass',
+            'headerClass',
+            'id',
+            'noBackdrop',
+            'noHeader',
+            'noHeaderClose',
+            'placement',
+            'title',
+          ]
         ),
         backdropFirst: {
           type: 'boolean',
@@ -34,6 +47,8 @@ export default {
         bodyScrolling: {
           type: 'boolean',
           default: false,
+          description:
+            'Allow body scrolling while offcanvas is open. By default, body scrolling is disabled when the offcanvas is open',
         },
         focus: {
           type: "'ok' | 'cancel' | 'close' | string | ComponentPublicInstance | HTMLElement | null",
@@ -41,82 +56,67 @@ export default {
           description:
             "Specify where to focus once offcanvas opens. Can be built-in button 'close'. Can be ref, HTMLElement, id or selector string. If set to 'false', no focus will be set (if noTrap isn't set the focus trap will focus the modal element or fallback element). If set to a string, the element with that id will be focused. If set to a ComponentPublicInstance, the $el property of the instance will be focused.",
         },
-        footerClass: {
-          type: 'string',
-          default: undefined,
-        },
         headerAttrs: {
           type: 'Readonly<AttrsValue>',
           default: undefined,
           description: 'Attributes to be applied to the offcanvas header element',
         },
-        headerClass: {
-          type: 'string',
-          default: undefined,
-        },
         headerCloseClass: {
           type: 'ClassValue',
           default: undefined,
+          description: 'CSS class (or classes) to apply to the header close button',
         },
         headerCloseLabel: {
           type: 'string',
           default: 'Close',
+          description: 'Accessibility label for the header close button',
         },
         headerCloseVariant: {
           type: 'ButtonVariant | null',
           default: 'secondary',
-        },
-        noBackdrop: {
-          type: 'boolean',
-          default: false,
+          description:
+            'Button variant to use for the header close button when using a custom close slot',
         },
         noCloseOnBackdrop: {
           type: 'boolean',
           default: false,
+          description: 'Disable closing the offcanvas when the backdrop is clicked',
         },
         noCloseOnEsc: {
           type: 'boolean',
           default: false,
-        },
-        noHeader: {
-          type: 'boolean',
-          default: false,
-        },
-        noHeaderClose: {
-          type: 'boolean',
-          default: false,
+          description: 'Disable closing the offcanvas when the Escape key is pressed',
         },
         noTrap: {
           type: 'boolean',
           default: false,
           description: 'Disables the focus trap feature',
         },
-        placement: {
-          type: 'Placement',
-          default: 'start',
-        },
         responsive: {
           type: 'Breakpoint',
+          default: undefined,
+          description:
+            'Makes offcanvas responsive - displays as offcanvas below the breakpoint and inline above it',
         },
         shadow: {
           type: 'Size | boolean',
           default: false,
+          description: "Add a shadow to the offcanvas. Can be 'sm', true (medium), or 'lg'",
         },
         teleportDisabled: {
           type: 'boolean',
           default: false,
+          description: 'Disable teleporting the offcanvas to the body',
         },
         teleportTo: {
           type: 'string | RendererElement | null | undefined',
           default: 'body',
-        },
-        title: {
-          type: 'string',
-          default: undefined,
+          description: 'Teleport the offcanvas to a specific element',
         },
         width: {
           type: 'string',
           default: undefined,
+          description: 'Width of the offcanvas (e.g., "320px", "20rem")',
         },
       } satisfies PropRecord<keyof BOffcanvasProps>,
       emits: {
@@ -124,111 +124,128 @@ export default {
         'update:model-value': {
           args: {
             'update:model-value': {
-              description: '', // TODO missing description
+              description: 'Emitted when the offcanvas visibility state changes',
               type: 'boolean',
             },
           },
-          description: '', // TODO missing description
+          description: 'Standard event to update the v-model',
         },
         'breakpoint': {
           args: {
             value: {
               type: 'BvTriggerableEvent',
-              description: 'The event',
+              description: 'The event object',
             },
             opened: {
               type: 'boolean',
               description: 'Whether or not the offcanvas is above the breakpoint and is open by it',
             },
           },
-          description: "Emitted when the offcanvas's breakpoint state changes",
+          description: "Emitted when the offcanvas's responsive breakpoint state changes",
         },
         'close': {
-          description: '', // TODO missing description
+          description: 'Emitted when the close button is clicked',
           args: {
             value: {
-              description: '', // TODO missing description
+              description: 'BvTriggerableEvent object',
               type: 'BvTriggerableEvent',
             },
           },
         },
         'esc': {
-          description: '', // TODO missing description
+          description: 'Emitted when the Escape key is pressed while the offcanvas is open',
           args: {
             value: {
-              description: '', // TODO missing description
+              description: 'BvTriggerableEvent object',
               type: 'BvTriggerableEvent',
             },
           },
         },
         'backdrop': {
-          args: undefined,
-          description: undefined,
+          description: 'Emitted when the backdrop is clicked',
+          args: {
+            value: {
+              description: 'BvTriggerableEvent object',
+              type: 'BvTriggerableEvent',
+            },
+          },
         },
       } satisfies EmitRecord<keyof BOffcanvasEmits | 'update:model-value'>,
       slots: {
         'title': {
-          description: '', // TODO missing description
+          description: 'Content to place in the title section of the header',
           scope: {
             visible: {
               type: 'boolean',
+              description: 'Current visibility state of the offcanvas',
             },
             placement: {
               type: "'top' | 'bottom' | 'start' | 'end'",
+              description: 'Current placement of the offcanvas',
             },
             hide: {
               type: '(trigger?: string) => void',
+              description: 'Function to close the offcanvas',
             },
           },
         },
         'default': {
-          description: '', // TODO missing description
+          description: 'Content to place in the body of the offcanvas',
           scope: {
             visible: {
               type: 'boolean',
+              description: 'Current visibility state of the offcanvas',
             },
             placement: {
               type: "'top' | 'bottom' | 'start' | 'end'",
+              description: 'Current placement of the offcanvas',
             },
             hide: {
               type: '(trigger?: string) => void',
+              description: 'Function to close the offcanvas',
             },
           },
         },
         'backdrop': {
-          description: '', // TODO missing description
+          description: 'Content to replace the default backdrop',
           scope: {},
         },
         'footer': {
-          description: '', // TODO missing description
+          description: 'Content to place in the footer of the offcanvas',
           scope: {
             visible: {
               type: 'boolean',
+              description: 'Current visibility state of the offcanvas',
             },
             placement: {
               type: "'top' | 'bottom' | 'start' | 'end'",
+              description: 'Current placement of the offcanvas',
             },
             hide: {
               type: '(trigger?: string) => void',
+              description: 'Function to close the offcanvas',
             },
           },
         },
         'header': {
-          description: '', // TODO missing description
+          description: 'Content to replace the entire default header',
           scope: {
             visible: {
               type: 'boolean',
+              description: 'Current visibility state of the offcanvas',
             },
             placement: {
               type: "'top' | 'bottom' | 'start' | 'end'",
+              description: 'Current placement of the offcanvas',
             },
             hide: {
               type: '(trigger?: string) => void',
+              description: 'Function to close the offcanvas',
             },
           },
         },
         'header-close': {
-          description: '', // TODO missing description
+          description: 'Content to replace the default close button in the header',
           scope: {},
         },
       } satisfies SlotRecord<keyof BOffcanvasSlots>,
diff --git a/apps/docs/src/docs/components/demo/OffcanvasBackdrop.vue b/apps/docs/src/docs/components/demo/OffcanvasBackdrop.vue
new file mode 100644
index 000000000..075b08036
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/OffcanvasBackdrop.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <BButton v-b-toggle.offcanvas-backdrop>Toggle Offcanvas</BButton>
+
+    <BOffcanvas
+      id="offcanvas-backdrop"
+      title="Offcanvas with backdrop"
+      no-backdrop
+      shadow
+    >
+      <div class="px-3 py-2">
+        <p>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+        </p>
+        <BImg
+          src="https://picsum.photos/500/500/?image=54"
+          fluid
+          thumbnail
+        />
+      </div>
+    </BOffcanvas>
+  </div>
+</template>
diff --git a/apps/docs/src/docs/components/demo/OffcanvasBasic.vue b/apps/docs/src/docs/components/demo/OffcanvasBasic.vue
new file mode 100644
index 000000000..0d0e112ba
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/OffcanvasBasic.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <BButton v-b-toggle.offcanvas-1>Toggle Offcanvas</BButton>
+    <BOffcanvas
+      id="offcanvas-1"
+      title="Offcanvas"
+      shadow
+    >
+      <div class="px-3 py-2">
+        <p>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+        </p>
+        <BImg
+          src="https://picsum.photos/500/500/?image=54"
+          fluid
+          thumbnail
+        />
+      </div>
+    </BOffcanvas>
+  </div>
+</template>
diff --git a/apps/docs/src/docs/components/demo/OffcanvasBorder.vue b/apps/docs/src/docs/components/demo/OffcanvasBorder.vue
new file mode 100644
index 000000000..01e79ba58
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/OffcanvasBorder.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <BButton v-b-toggle.offcanvas-border>Toggle Offcanvas</BButton>
+    <BOffcanvas
+      id="offcanvas-border"
+      title="Offcanvas with Border"
+      class="border-end border-danger"
+    >
+      <div class="px-3 py-2">
+        <p>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+        </p>
+        <BImg
+          src="https://picsum.photos/500/500/?image=54"
+          fluid
+          thumbnail
+        />
+      </div>
+    </BOffcanvas>
+  </div>
+</template>
diff --git a/apps/docs/src/docs/components/demo/OffcanvasFooter.vue b/apps/docs/src/docs/components/demo/OffcanvasFooter.vue
new file mode 100644
index 000000000..bb3c41ade
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/OffcanvasFooter.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <BButton v-b-toggle.offcanvas-footer>Toggle Offcanvas</BButton>
+    <BOffcanvas
+      id="offcanvas-footer"
+      aria-label="Offcanvas with custom footer"
+      no-header
+      shadow
+    >
+      <template #footer="{hide}">
+        <div class="d-flex bg-dark text-light align-items-center px-3 py-2">
+          <strong class="me-auto">Footer</strong>
+          <BButton
+            size="sm"
+            @click="($event) => hide()"
+            >Close</BButton
+          >
+        </div>
+      </template>
+      <div class="px-3 py-2">
+        <p>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+        </p>
+        <BImg
+          src="https://picsum.photos/500/500/?image=54"
+          fluid
+          thumbnail
+        />
+      </div>
+    </BOffcanvas>
+  </div>
+</template>
diff --git a/apps/docs/src/docs/components/demo/OffcanvasLocations.vue b/apps/docs/src/docs/components/demo/OffcanvasLocations.vue
index bca133506..f73f87933 100644
--- a/apps/docs/src/docs/components/demo/OffcanvasLocations.vue
+++ b/apps/docs/src/docs/components/demo/OffcanvasLocations.vue
@@ -1,27 +1,37 @@
 <template>
   <BButton
     class="m-2"
+    aria-controls="offcanvas-locations"
+    :aria-expanded="show ? 'true' : 'false'"
     @click="click('start')"
     >Show start</BButton
   >
   <BButton
     class="m-2"
+    aria-controls="offcanvas-locations"
+    :aria-expanded="show ? 'true' : 'false'"
     @click="click('end')"
     >Show end</BButton
   >
   <BButton
     class="m-2"
+    aria-controls="offcanvas-locations"
+    :aria-expanded="show ? 'true' : 'false'"
     @click="click('bottom')"
     >Show bottom</BButton
   >
   <BButton
     class="m-2"
+    aria-controls="offcanvas-locations"
+    :aria-expanded="show ? 'true' : 'false'"
     @click="click('top')"
     >Show top</BButton
   >
 
   <BOffcanvas
+    id="offcanvas-locations"
     v-model="show"
+    :title="`Offcanvas ${placement}`"
     :placement="placement"
   />
 </template>
diff --git a/apps/docs/src/docs/components/demo/OffcanvasNoHeader.vue b/apps/docs/src/docs/components/demo/OffcanvasNoHeader.vue
new file mode 100644
index 000000000..23422ba9f
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/OffcanvasNoHeader.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <BButton v-b-toggle.offcanvas-no-header>Toggle Offcanvas</BButton>
+    <BOffcanvas
+      id="offcanvas-no-header"
+      aria-labelledby="offcanvas-no-header-title"
+      no-header
+      shadow
+    >
+      <template #default="{hide}">
+        <div class="p-3">
+          <h4 id="offcanvas-no-header-title">Custom header offcanvas</h4>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </p>
+          <BImg
+            src="https://picsum.photos/500/500/?image=54"
+            fluid
+            thumbnail
+          />
+          <BButton
+            variant="primary"
+            block
+            @click="($event) => hide()"
+            >Close Offcanvas</BButton
+          >
+        </div>
+      </template>
+    </BOffcanvas>
+  </div>
+</template>
diff --git a/apps/docs/src/docs/components/demo/OffcanvasOverview.vue b/apps/docs/src/docs/components/demo/OffcanvasOverview.vue
deleted file mode 100644
index 0335c40e6..000000000
--- a/apps/docs/src/docs/components/demo/OffcanvasOverview.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <BButton @click="click">Show OffCanvas</BButton>
-  <BOffcanvas v-model="show" />
-</template>
-
-<script setup lang="ts">
-import {ref} from 'vue'
-
-const show = ref(false)
-
-const click = () => {
-  show.value = !show.value
-}
-</script>
diff --git a/apps/docs/src/docs/components/demo/OffcanvasResponsive.vue b/apps/docs/src/docs/components/demo/OffcanvasResponsive.vue
index 91c30f449..8ecb20db9 100644
--- a/apps/docs/src/docs/components/demo/OffcanvasResponsive.vue
+++ b/apps/docs/src/docs/components/demo/OffcanvasResponsive.vue
@@ -1,5 +1,8 @@
 <template>
   <!-- #region template -->
-  <BOffcanvas responsive="md" />
+  <BOffcanvas
+    responsive="md"
+    title="Responsive Offcanvas"
+  />
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/OffcanvasSidebar.vue b/apps/docs/src/docs/components/demo/OffcanvasSidebar.vue
index c667dbe5b..f5af73eee 100644
--- a/apps/docs/src/docs/components/demo/OffcanvasSidebar.vue
+++ b/apps/docs/src/docs/components/demo/OffcanvasSidebar.vue
@@ -5,6 +5,8 @@
         <BButton
           variant="link"
           underline-opacity="0"
+          aria-controls="offcanvas-toc"
+          :aria-expanded="tocVisible ? 'true' : 'false'"
           @click="showToc"
           >&lt; Table of Contents</BButton
         > </BCol
@@ -13,6 +15,8 @@
           <BButton
             variant="link"
             underline-opacity="0"
+            aria-controls="offcanvas-otp"
+            :aria-expanded="otpVisible ? 'true' : 'false'"
             @click="showOtp"
             >On this page &gt;</BButton
           >
@@ -25,7 +29,9 @@
         class="scrollable-column"
       >
         <BOffcanvas
+          id="offcanvas-toc"
           v-model="tocVisible"
+          title="Table of Contents"
           placement="start"
           responsive="md"
         >
@@ -82,7 +88,9 @@
         class="scrollable-column"
       >
         <BOffcanvas
+          id="offcanvas-otp"
           v-model="otpVisible"
+          title="On this page"
           placement="end"
           responsive="md"
         >
diff --git a/apps/docs/src/docs/components/demo/OffcanvasVariant.vue b/apps/docs/src/docs/components/demo/OffcanvasVariant.vue
new file mode 100644
index 000000000..31d7b270d
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/OffcanvasVariant.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <BButton v-b-toggle.offcanvas-variant>Toggle Offcanvas</BButton>
+    <BOffcanvas
+      id="offcanvas-variant"
+      title="Offcanvas"
+      shadow
+    >
+      <div class="px-3 py-2 bg-dark text-light">
+        <p>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+        </p>
+        <BImg
+          src="https://picsum.photos/500/500/?image=54"
+          fluid
+          thumbnail
+        />
+      </div>
+    </BOffcanvas>
+  </div>
+</template>
diff --git a/apps/docs/src/docs/components/offcanvas.md b/apps/docs/src/docs/components/offcanvas.md
index 12cd952b6..53bcb4eed 100644
--- a/apps/docs/src/docs/components/offcanvas.md
+++ b/apps/docs/src/docs/components/offcanvas.md
@@ -1,14 +1,176 @@
 ---
-description: 'Build hidden sidebars into your project. Sidebars can aid in enhancing user interaction or preventing further interaction.'
+description: >
+  The `<BOffcanvas>` component is a fixed-position toggleable slide out box, which can be used for navigation, menus, details, etc. It can be positioned on any side of the viewport (top, bottom, start, or end), with optional backdrop support.
 ---
 
-<<< DEMO ./demo/OffcanvasOverview.vue#template{vue-html}
+## Overview
 
-## Customizing Location
+You can place almost any content inside the `<BOffcanvas>`
+[optionally scoped default slot](#scoped-default-slot), such as text, buttons, forms, images, or
+[vertical navs](/docs/components/nav#vertical-variation).
+
+The component supports a header and built-in close button, of which you can optionally disable and
+provide your own header (if needed), and can be easily toggled with our
+[`v-b-toggle` directive](/docs/directives/BToggle).
+
+The component has minimal default styling, which provides you with great flexibility in laying out
+the content of the offcanvas.
+
+<<< DEMO ./demo/OffcanvasBasic.vue
+
+If the content is taller than the available viewport height, vertical scrolling will automatically
+be enabled via CSS on the body of the offcanvas.
+
+## Styling
+
+Several props are provided for controlling the appearance of the offcanvas.
+
+### Title
+
+Offcanvas components should have a title (specifically for accessibility reasons). Easily set the title that
+appears in the header either via the `title` prop or the `title` slot. Note the `title` slot takes
+precedence over the `title` prop.
+
+If the [`no-header` prop](#header) is set, then neither the `title` prop or `title` slot
+have any effect.
+
+If you do not provide a title, use either the `aria-label` or `aria-labelledby` props to provide an
+accessible title for the offcanvas. See the [Accessibility section](#accessibility) below for
+additional details.
+
+### Customizing Location
 
 Customize location with four standard options `top, bottom, start, end`.
 
-<<< DEMO ./demo/OffcanvasLocations.vue#template{vue-html}
+<<< DEMO ./demo/OffcanvasLocations.vue
+
+### Variants
+
+Bootstrap 5 offcanvas components use utility classes for styling. You can apply background and text color utilities
+via the `body-class` or `header-class` props, or by wrapping content in elements with appropriate classes.
+
+<<< DEMO ./demo/OffcanvasVariant.vue
+
+### Shadow
+
+Prefer an offcanvas with a backdrop shadow? Set the `shadow` prop to either boolean `true` for a medium
+shadow, `'sm'` for a small shadow, or `'lg'` for a larger shadow. Set it to `false` (the default)
+for no shadow.
+
+### Borders
+
+By default, `<BOffcanvas>` has no borders. Use
+[border utility classes](/docs/reference/utility-classes) to add border(s) to `<BOffcanvas>` via the `class` prop,
+or use CSS style overrides.
+
+<<< DEMO ./demo/OffcanvasBorder.vue
+
+### Width
+
+By default the width of `<BOffcanvas>` is set to `320px` (100% on 'xs' screens). Simply provide a
+value via the `width` prop (i.e. `'180px'`, `'20em'`, etc.) to override this default. The max width
+is set to `100%` via CSS.
+
+### Padding
+
+The offcanvas by default has no padding on the body. You can apply padding utility classes via the `body-class` prop, or
+use margin/padding utility classes on the content of the offcanvas.
+
+### Disable slide transition
+
+By default the offcanvas will use a sliding transition when showing and hiding. You can disable the
+slide transition via the `no-animation` prop.
+
+**Note:** The BootstrapVueNext defined transition effect of this component is dependent on the
+`prefers-reduced-motion` media query. See the
+[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
+additional details.
+
+When disabling the slide transition, the fade transition of the [optional backdrop](#backdrop) will
+also be disabled.
+
+### Scoped default slot
+
+The `default` slot allows you to provide the body content for your offcanvas. It is optionally scoped.
+The examples in the following sections demonstrate the use of the default slot scope.
+
+You can apply arbitrary classes to the body section via the `body-class` prop.
+
+### Header
+
+By default, `<BOffcanvas>` has a header with optional title and a close button. You can supply a
+title via the `title` prop, or via the optionally scoped slot `title`.
+
+If you want to provide a completely custom header, you can use the optionally scoped `header` slot.
+
+You can apply arbitrary classes to the header section via the `header-class` prop, to override the
+default padding, etc.
+
+#### Hiding the default header
+
+You can disable the default header (including the close button) via the `no-header` prop. Note that
+you will need to provide a method of closing the offcanvas. The `default` slot is scoped, which
+includes a `hide()` method that can be used to close the offcanvas.
+
+<<< DEMO ./demo/OffcanvasNoHeader.vue
+
+### Footer
+
+`<BOffcanvas>` provides a `footer` slot (optionally scoped), to allow you to provide content that
+appears at the bottom of the offcanvas. The `footer` slot is scoped, which includes a `hide()` method
+that can be used to close the offcanvas.
+
+<<< DEMO ./demo/OffcanvasFooter.vue
+
+You can apply arbitrary classes to the footer section via the `footer-class` prop.
+
+### Lazy rendering
+
+In some instances, you may not want the content rendered when the offcanvas is not visible. Simply set
+the `lazy` prop on `<BOffcanvas>`. When `lazy` is `true`, the body and optional footer will _not_ be
+rendered (removed from DOM) whenever the offcanvas is closed.
+
+### Backdrop
+
+Add a basic backdrop when the offcanvas is open via enabling the backdrop (default behavior).
+When shown, the offcanvas will display an opaque backdrop. Clicking on the backdrop will close the offcanvas,
+unless the `no-close-on-backdrop` prop is set to `true`.
+
+To disable the backdrop entirely, set the `no-backdrop` prop to `true`.
+
+<<< DEMO ./demo/OffcanvasBackdrop.vue
+
+Note that when the offcanvas is open, it may still be possible to scroll the body (unless `body-scrolling` is disabled).
+When the backdrop is enabled, focus constraint will attempt to keep focus
+within the offcanvas. Note that in rare circumstances it might be possible for users to move focus to
+elements outside of the offcanvas.
+
+## Visibility control
+
+### `v-b-toggle` directive
+
+Using the [`v-b-toggle` directive](/docs/directives/BToggle) is the preferred method for _opening_
+the offcanvas, as it automatically handles applying the `aria-controls` and `aria-expanded`
+accessibility attributes on the trigger element.
+
+The majority of examples on this page use the `v-b-toggle` directive.
+
+### `v-model`
+
+The `v-model` reflects the current visibility state of the offcanvas. While it can be used to control
+the visibility state of the offcanvas, it is recommended to use the
+[`v-b-toggle` directive](#v-b-toggle-directive) to _show_ the offcanvas for accessibility reasons. If
+you do use the `v-model` to show the offcanvas, you should:
+
+- Provide an `id` prop on the `<BOffcanvas>` component
+- Place the `aria-controls="id"` attribute (where `id` is the ID of the offcanvas) on the trigger element
+- Set the `aria-expanded` attribute (also on the trigger element) to either the string `'true'` (if the offcanvas is open) or `'false'` (if the offcanvas is closed)
+- Provide either a `title` prop or `aria-label` attribute on the `<BOffcanvas>` component for screen readers
+
+## Events
+
+The offcanvas will emit the `show` event when beginning to open, `shown` event once fully opened,
+`hide` event when beginning to close, and the `hidden` event when fully closed.
 
 ## Responsive
 
@@ -22,8 +184,45 @@ In SSR environments, the BOffcanvas component must be rendered client-side due t
 
 ## Sidebar
 
-One common use of offcanvas is to create a table of contents sider that is visible on a large screen, but becomes an offcanvas component below a certain breakpoint. This is common for documentation sites like the one you're reading now which includes two such sidebars - a "table of contents" on the left and a "on this page" on the right.
+One common use of offcanvas is to create a table of contents sidebar that is visible on a large screen, but becomes an offcanvas component below a certain breakpoint. This is common for documentation sites like the one you're reading now which includes two such sidebars - a "table of contents" on the left and a "on this page" on the right.
 
 Below is a simple example showing how to set up such a site.
 
 <<< FRAGMENT ./demo/OffcanvasSidebar.vue
+
+## Accessibility
+
+`<BOffcanvas>` provides several accessibility features.
+
+When the offcanvas is opened, the entire offcanvas will receive focus, which is desirable for screen
+reader and keyboard-only users. When the offcanvas is closed, the element that previously had focus
+before the offcanvas was opened will be re-focused.
+
+In some circumstances, you may need to disable the enforce focus feature completely. You can do this
+by setting the prop `no-trap`, although this is generally discouraged for accessibility
+reasons.
+
+When the offcanvas is open, users can press <kbd>Esc</kbd> to close the offcanvas. To disable this
+feature, set the `no-close-on-esc` prop to `true`. With the backdrop enabled, you can use the prop
+`no-close-on-backdrop` to disable the close on backdrop click feature.
+
+When the backdrop is not disabled (default), the offcanvas will attempt to constrain focus within the offcanvas,
+and the offcanvas will have the attribute `aria-modal="true"` set.
+
+When you have hidden the header, or do not have a title for the offcanvas, set either `aria-label` to
+a string that describes the offcanvas, or set `aria-labelledby` to an ID of an element that contains
+the title. When using the `lazy` prop _and_ you do not have a header, use the `aria-label` prop to
+provide an appropriate string to label the offcanvas.
+
+## Implementation notes
+
+BootstrapVueNext's custom SCSS/CSS is required for proper styling, and positioning of the offcanvas.
+
+Bootstrap v5 background (`'bg-*'`) and text (`'text-*'`) utility classes can be used for
+controlling the background and font color via the `body-class` and `header-class` props.
+
+## See also
+
+- [`v-b-toggle` directive](/docs/directives/BToggle)
+- [`<BCollapse>` component](/docs/components/collapse)
+- [`<BCloseButton>` component](/docs/components/button#comp-ref-b-close-button)
diff --git a/apps/docs/src/docs/composables/demo/UseScrollspyCleanup.vue b/apps/docs/src/docs/composables/demo/UseScrollspyCleanup.vue
index 8a39bbf91..e70c3df50 100644
--- a/apps/docs/src/docs/composables/demo/UseScrollspyCleanup.vue
+++ b/apps/docs/src/docs/composables/demo/UseScrollspyCleanup.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Placeholder template with actual refs for TypeScript compatibility -->
   <div ref="content">
-    <div ref="target"></div>
+    <div ref="target" />
   </div>
 </template>
 
@@ -18,4 +18,4 @@ const {cleanup} = useScrollspy(content, target)
 onBeforeUnmount(() => {
   cleanup()
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vue b/apps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vue
index cda91a73b..06798f784 100644
--- a/apps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vue
+++ b/apps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vue
@@ -2,28 +2,68 @@
   <BContainer>
     <BRow>
       <BCol cols="4">
-        <BNav pills vertical ref="navTarget">
-          <BNavItem href="#custom-intro" @click="scrollIntoView">Introduction</BNavItem>
-          <BNavItem href="#custom-main" @click="scrollIntoView">Main Content</BNavItem>
-          <BNavItem href="#custom-sidebar" @click="scrollIntoView">Sidebar</BNavItem>
+        <BNav
+          ref="navTarget"
+          pills
+          vertical
+        >
+          <BNavItem
+            href="#custom-intro"
+            @click="scrollIntoView"
+            >Introduction</BNavItem
+          >
+          <BNavItem
+            href="#custom-main"
+            @click="scrollIntoView"
+            >Main Content</BNavItem
+          >
+          <BNavItem
+            href="#custom-sidebar"
+            @click="scrollIntoView"
+            >Sidebar</BNavItem
+          >
         </BNav>
       </BCol>
       <BCol cols="8">
         <div
           ref="content"
-          style="height: 300px; overflow-y: auto; border: 1px solid #dee2e6; padding: 1rem;"
+          style="height: 300px; overflow-y: auto; border: 1px solid #dee2e6; padding: 1rem"
         >
-          <div class="content-section" id="custom-intro">
+          <div
+            id="custom-intro"
+            class="content-section"
+          >
             <h4>Introduction</h4>
-            <p v-for="i in 3" :key="`intro-${i}`">{{ loremText }}</p>
+            <p
+              v-for="i in 3"
+              :key="`intro-${i}`"
+            >
+              {{ loremText }}
+            </p>
           </div>
-          <div class="content-section" id="custom-main">
+          <div
+            id="custom-main"
+            class="content-section"
+          >
             <h4>Main Content</h4>
-            <p v-for="i in 3" :key="`main-${i}`">{{ loremText }}</p>
+            <p
+              v-for="i in 3"
+              :key="`main-${i}`"
+            >
+              {{ loremText }}
+            </p>
           </div>
-          <div class="content-section" id="custom-sidebar">
+          <div
+            id="custom-sidebar"
+            class="content-section"
+          >
             <h4>Sidebar Content</h4>
-            <p v-for="i in 3" :key="`sidebar-${i}`">{{ loremText }}</p>
+            <p
+              v-for="i in 3"
+              :key="`sidebar-${i}`"
+            >
+              {{ loremText }}
+            </p>
           </div>
         </div>
       </BCol>
@@ -35,7 +75,8 @@
 import {useTemplateRef} from 'vue'
 import {useScrollspy} from 'bootstrap-vue-next'
 
-const loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+const loremText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
 
 const content = useTemplateRef('content')
 const navTarget = useTemplateRef('navTarget')
@@ -43,4 +84,4 @@ const navTarget = useTemplateRef('navTarget')
 const {scrollIntoView} = useScrollspy(content, navTarget, {
   contentQuery: '.content-section[id]',
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseScrollspyCustomRoot.vue b/apps/docs/src/docs/composables/demo/UseScrollspyCustomRoot.vue
index 895b5ac18..aca796a5d 100644
--- a/apps/docs/src/docs/composables/demo/UseScrollspyCustomRoot.vue
+++ b/apps/docs/src/docs/composables/demo/UseScrollspyCustomRoot.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Placeholder template with actual refs for TypeScript compatibility -->
   <div ref="content">
-    <div ref="target"></div>
+    <div ref="target" />
   </div>
 </template>
 
@@ -13,9 +13,10 @@ import {useScrollspy} from 'bootstrap-vue-next'
 const content = useTemplateRef('content')
 const target = useTemplateRef('target')
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const {current} = useScrollspy(content, target, {
   root: document.querySelector('#custom-viewport') as HTMLElement,
   rootMargin: '0px 0px -50%', // Element must be 50% visible
   threshold: [0.25, 0.5, 0.75], // Multiple thresholds for smooth transitions
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/apps/docs/src/docs/composables/demo/UseScrollspyDynamicContent.vue b/apps/docs/src/docs/composables/demo/UseScrollspyDynamicContent.vue
index 1ea2df5da..854d5ef45 100644
--- a/apps/docs/src/docs/composables/demo/UseScrollspyDynamicContent.vue
+++ b/apps/docs/src/docs/composables/demo/UseScrollspyDynamicContent.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Placeholder template with actual refs for TypeScript compatibility -->
   <div ref="content">
-    <div ref="target"></div>
+    <div ref="target" />
   </div>
 </template>
 
@@ -16,10 +16,11 @@ const target = useTemplateRef('target')
 const {updateList} = useScrollspy(content, target)
 
 // Call when content changes
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const addNewSection = () => {
   // Add new content...
   nextTick(() => {
     updateList()
   })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md
index f4d5d5982..582655e85 100644
--- a/apps/docs/src/docs/migration-guide.md
+++ b/apps/docs/src/docs/migration-guide.md
@@ -825,10 +825,6 @@ The `type` prop is deprecated. Use the `v-b-color-mode` directive or `useColorMo
 
 `align` prop now takes values from [`AlignmentJustifyContent`](/docs/types#alignment): `start`, `center`, `end`, `between`, `around`, and `evenly`
 
-### BOffcanvas
-
-<NotYetDocumented type="component"/>
-
 See [Show and Hide](#show-and-hide) shared properties.
 
 ### BOverlay
@@ -887,6 +883,83 @@ The default for `placement` is now `top` rather than `right`
 
 See the [v-html](#v-html) section for information on deprecation of the `label-html` prop.
 
+### BSidebar
+
+`BSidebar` has been renamed to `BOffcanvas` to align with the name chosen by the
+[Bootstrap 5](https://getbootstrap.com/docs/5.3/components/offcanvas) team for this functionality.
+
+#### Renamed Component
+
+- `<BSidebar>` → `<BOffcanvas>`
+
+#### Placement Changes
+
+The `right` prop has been replaced with a more flexible `placement` prop:
+
+- `right` prop is **deprecated**
+- Use `placement="end"` instead of `:right="true"`
+- Use `placement="start"` instead of `:right="false"` (or omit, as `start` is the default)
+- New placements available: `placement="top"` and `placement="bottom"`
+
+#### aria-\* support
+
+`aria-label` and `aria-labelby` aren't explicitly defined as props, but setting them
+on `<BOffcanvas>` will bind correctly to the main `<div>`.
+
+#### Variant Props Deprecated
+
+The `bg-variant` and `text-variant` props have been **deprecated**. Bootstrap 5 offcanvas components don't support these props directly.
+
+Instead, use utility classes:
+
+- Apply background classes via `body-class` prop: `body-class="bg-dark text-light"`
+- Apply classes to content wrapper elements within the default slot
+- Use the `header-class` prop for header styling
+
+#### Animation Props
+
+The `no-slide` prop has been renamed to `no-animation` for consistency with other components.
+
+- `no-slide` → `no-animation`
+
+#### Focus Management
+
+The `no-enforce-focus` prop has been renamed to `no-trap` for consistency with modal and other components.
+
+- `no-enforce-focus` → `no-trap`
+
+#### Route Change Behavior
+
+The `no-close-on-route-change` prop has been **removed**. Offcanvas components no longer automatically close on route changes by default. If you need this behavior, you'll need to implement it manually by watching the route and calling the `hide()` method.
+
+#### Z-Index Prop Removed
+
+The `z-index` prop has been **removed**. Use CSS to customize z-index if needed.
+
+#### Backdrop
+
+The `backdrop` prop has been deprecated. Backdrop is enabled by default. Use the new `no-backdrop` prop to turn it off.
+
+The `backdrop-variant` prop has been **removed**. Bootstrap 5 offcanvas backdrops use a standard dark backdrop.
+
+#### Class Props
+
+The `sidebar-class` prop has been **removed**. Use the standard `class` prop instead to apply classes directly to the offcanvas element.
+
+#### Tag
+
+The `tag` prop has been deprecated.
+
+#### Header and Footer
+
+The `header-tag` and `footer-tag` props have been deprecated. Use the `header` and `footer` slots to override header and footer behavior.
+
+The `close-label` prop been renamed to `header-close-label` for consistency
+
+#### Events
+
+The `change` event is no longer emitted. Use `update:model-value` instead for v-model compatibility, or use the `show`/`hide`/`shown`/`hidden` events to track state changes.
+
 ### BSkeleton
 
 `<BSkeleton*>` components have been replaced by the more appropriately named `<BPlaceholder*>` components.

From 4f85d27419ed569b02007c563918d7160121a74c Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Mon, 17 Nov 2025 15:38:06 -0600
Subject: [PATCH 11/13] ci: Add publint to the build process (#2909)

---
 .github/workflows/ci.yaml                |  6 ++++
 packages/bootstrap-vue-next/package.json |  2 ++
 packages/nuxt/package.json               |  2 ++
 pnpm-lock.yaml                           | 38 ++++++++++++++++++++++++
 turbo.json                               |  4 +++
 5 files changed, 52 insertions(+)

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 758ea732c..ee2cd2073 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -49,6 +49,12 @@ jobs:
       - name: Build Library
         run: pnpm run build
 
+      - name: Run publint
+        run: pnpm --filter bootstrap-vue-next run publint
+
+      - name: Run publint on Nuxt package
+        run: pnpm --filter @bootstrap-vue-next/nuxt run publint
+
       - run: pnpx pkg-pr-new publish './packages/bootstrap-vue-next' './packages/nuxt' --template './templates/vite'
 
   test-lint:
diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json
index 239daceb5..152167d43 100644
--- a/packages/bootstrap-vue-next/package.json
+++ b/packages/bootstrap-vue-next/package.json
@@ -133,6 +133,7 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json",
     "preview": "vite preview",
     "build": "pnpm run type-check && pnpm run build-only",
+    "publint": "publint",
     "lint": "eslint --fix src",
     "test:lint": "eslint src",
     "test:unit": "vitest",
@@ -183,6 +184,7 @@
     "focus-trap": "^7.6.5",
     "happy-dom": "^18.0.1",
     "prettier": "^3.6.2",
+    "publint": "^0.3.15",
     "sass": "^1.89.2",
     "typescript": "^5.8.3",
     "unplugin-vue-components": "^28.8.0",
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 595839c70..b092824f4 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -24,6 +24,7 @@
     "build": "pnpm run dev:prepare && pnpm run dev:build && pnpm run prepack",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "publint": "publint",
     "lint": "eslint --fix",
     "test:lint": "eslint",
     "test": "pnpm run test:lint",
@@ -50,6 +51,7 @@
     "eslint-define-config": "^2.1.0",
     "nuxt": "^3.17.7",
     "prettier": "^3.6.2",
+    "publint": "^0.3.15",
     "typescript": "~5.8.3",
     "unimport": "^5.1.0",
     "vue": "^3.5.17"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d4b0ab7ec..a477433cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -207,6 +207,9 @@ importers:
       prettier:
         specifier: ^3.6.2
         version: 3.6.2
+      publint:
+        specifier: ^0.3.15
+        version: 0.3.15
       sass:
         specifier: ^1.89.2
         version: 1.89.2
@@ -283,6 +286,9 @@ importers:
       prettier:
         specifier: ^3.6.2
         version: 3.6.2
+      publint:
+        specifier: ^0.3.15
+        version: 0.3.15
       typescript:
         specifier: ~5.8.3
         version: 5.8.3
@@ -1731,6 +1737,10 @@ packages:
   '@poppinss/exception@1.2.2':
     resolution: {integrity: sha512-m7bpKCD4QMlFCjA/nKTs23fuvoVFoA83brRKmObCUNmi/9tVu8Ve3w4YQAnJu4q3Tjf5fr685HYIC/IA2zHRSg==}
 
+  '@publint/pack@0.1.2':
+    resolution: {integrity: sha512-S+9ANAvUmjutrshV4jZjaiG8XQyuJIZ8a4utWmN/vW1sgQ9IfBnPndwkmQYw53QmouOIytT874u65HEmu6H5jw==}
+    engines: {node: '>=18'}
+
   '@rolldown/pluginutils@1.0.0-beta.19':
     resolution: {integrity: sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA==}
 
@@ -4664,6 +4674,10 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -5408,6 +5422,11 @@ packages:
   protocols@2.0.2:
     resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
 
+  publint@0.3.15:
+    resolution: {integrity: sha512-xPbRAPW+vqdiaKy5sVVY0uFAu3LaviaPO3pZ9FaRx59l9+U/RKR1OEbLhkug87cwiVKxPXyB4txsv5cad67u+A==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   pump@3.0.3:
     resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
 
@@ -5590,6 +5609,10 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  sade@1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
+
   safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
 
@@ -8239,6 +8262,8 @@ snapshots:
 
   '@poppinss/exception@1.2.2': {}
 
+  '@publint/pack@0.1.2': {}
+
   '@rolldown/pluginutils@1.0.0-beta.19': {}
 
   '@rolldown/pluginutils@1.0.0-beta.28': {}
@@ -11349,6 +11374,8 @@ snapshots:
       ast-module-types: 6.0.1
       node-source-walk: 7.0.1
 
+  mri@1.2.0: {}
+
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
@@ -12256,6 +12283,13 @@ snapshots:
 
   protocols@2.0.2: {}
 
+  publint@0.3.15:
+    dependencies:
+      '@publint/pack': 0.1.2
+      package-manager-detector: 1.3.0
+      picocolors: 1.1.1
+      sade: 1.8.1
+
   pump@3.0.3:
     dependencies:
       end-of-stream: 1.4.5
@@ -12477,6 +12511,10 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  sade@1.8.1:
+    dependencies:
+      mri: 1.2.0
+
   safe-buffer@5.1.2: {}
 
   safe-buffer@5.2.1: {}
diff --git a/turbo.json b/turbo.json
index 02a2c58e4..5effbe08c 100644
--- a/turbo.json
+++ b/turbo.json
@@ -57,6 +57,10 @@
     "type-check": {
       "outputs": []
     },
+    "publint": {
+      "dependsOn": ["build"],
+      "outputs": []
+    },
     "lint": {
       "outputs": []
     },

From 2a12859404a4ee498e6ccc4aa5490dab9997d7c7 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Mon, 17 Nov 2025 16:13:07 -0600
Subject: [PATCH 12/13] feat(BTable): add configurable debouncing

feat(BTable): add an AbortSignal to the provider object parameter for cancelling in progress requests

refactor: use Number.NaN globally in favor of NaN
---
 apps/docs/src/data/components/table.data.ts   |  12 +
 apps/docs/src/docs/components/table.md        |  53 +++++
 .../src/components/BDropdown/BDropdown.vue    |   2 +-
 .../src/components/BFormInput/BFormInput.vue  |   2 +-
 .../src/components/BFormTags/BFormTags.vue    |   2 +-
 .../BFormTextarea/BFormTextarea.vue           |   2 +-
 .../src/components/BImg/BImg.vue              |   4 +-
 .../BPlaceholder/BPlaceholderTable.vue        |   4 +-
 .../src/components/BPopover/BPopover.vue      |   2 +-
 .../src/components/BProgress/BProgressBar.vue |   4 +-
 .../src/components/BTable/BTable.vue          |  44 +++-
 .../src/components/BTable/BTableSimple.vue    |   3 +-
 .../src/components/BTable/table.spec.ts       | 208 +++++++++++++++++-
 .../src/composables/useFormInput.ts           |   4 +-
 .../src/composables/useTextareaResize.ts      |   2 +-
 .../src/types/ComponentProps.ts               |   6 +-
 .../src/types/TableTypes.ts                   |   1 +
 17 files changed, 330 insertions(+), 25 deletions(-)

diff --git a/apps/docs/src/data/components/table.data.ts b/apps/docs/src/data/components/table.data.ts
index e457e0545..fbb9cdf74 100644
--- a/apps/docs/src/data/components/table.data.ts
+++ b/apps/docs/src/data/components/table.data.ts
@@ -610,6 +610,18 @@ export default {
           description:
             'The current page number to display when the table is paginated. Starting from 1 and up',
         },
+        debounce: {
+          type: 'Numberish',
+          default: 0,
+          description:
+            'Delay in milliseconds before calling the provider after prop changes. Set to 0 for immediate execution (default). Useful for debouncing rapid filter changes.',
+        },
+        debounceMaxWait: {
+          type: 'Numberish',
+          default: Number.NaN,
+          description:
+            'Maximum time in milliseconds to wait before forcing a provider call, even if changes are still occurring. Use with debounce to ensure provider is eventually called.',
+        },
         filter: {
           type: 'string',
           default: undefined,
diff --git a/apps/docs/src/docs/components/table.md b/apps/docs/src/docs/components/table.md
index 7772adc42..9f2771e6c 100644
--- a/apps/docs/src/docs/components/table.md
+++ b/apps/docs/src/docs/components/table.md
@@ -874,6 +874,59 @@ properties:
 | `perPage`     | `number`                         | The maximum number of rows per page to display (the value of the `per-page` prop) |
 | `filter`      | `string \| undefined`            | The value of the `filter` prop                                                    |
 | `sortBy`      | `BTableSortBy<T>[] \| undefined` | The current column key being sorted, or an empty string if not sorting            |
+| `signal`      | `AbortSignal`                    | An AbortSignal that can be used to cancel the request when a new provider call is triggered |
+
+### Debouncing Provider Calls
+
+To avoid excessive provider calls (e.g., when typing rapidly in a filter), you can use the `debounce` and `debounce-max-wait` props:
+
+- `debounce`: Delay in milliseconds before calling the provider after changes (default: `0` for immediate execution)
+- `debounce-max-wait`: Maximum time in milliseconds to wait before forcing a provider call, even if changes are still occurring
+
+Example with debouncing:
+
+```vue
+<BTable
+  :provider="myProvider"
+  :fields="fields"
+  :debounce="300"
+  :debounce-max-wait="1000"
+/>
+```
+
+### Handling Request Cancellation
+
+The provider context includes an `AbortSignal` that is automatically aborted when a new provider call is triggered. This allows you to cancel in-flight requests to prevent stale data and race conditions.
+
+Example using the signal with fetch:
+
+```typescript
+const myProvider = async (ctx: BTableProviderContext) => {
+  const response = await fetch('/api/data', {
+    signal: ctx.signal, // Pass the signal to fetch
+  })
+  return response.json()
+}
+```
+
+For custom async operations, listen to the abort event:
+
+```typescript
+const myProvider = async (ctx: BTableProviderContext) => {
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      // Perform your async operation
+      resolve(items)
+    }, 1000)
+    
+    // Clean up when aborted
+    ctx.signal.addEventListener('abort', () => {
+      clearTimeout(timeout)
+      reject(new Error('AbortError'))
+    })
+  })
+}
+```
 
 Below are trimmed down versions of the [complete example](#complete-example) as a starting place for using provider functions. They use local provider functions that implement sorting and filtering. Note that sorting is done in cooperation with `<BTable>` by having the
 provider function react to the `context.sortBy` array that it is passed, while filtering is done
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
index 464ade883..a6cc9c34d 100644
--- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
+++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
@@ -171,7 +171,7 @@ const inInputGroup = inject(inputGroupKey, false)
 const inButtonGroup = inject(buttonGroupKey, false)
 
 const computedOffset = computed(() =>
-  typeof props.offset === 'string' || typeof props.offset === 'number' ? props.offset : NaN
+  typeof props.offset === 'string' || typeof props.offset === 'number' ? props.offset : Number.NaN
 )
 const offsetToNumber = useToNumber(computedOffset)
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue b/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
index b3da50a39..77d57d3cb 100644
--- a/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
@@ -42,7 +42,7 @@ const _props = withDefaults(defineProps<Omit<BFormInputProps, 'modelValue'>>(),
   autocomplete: undefined,
   autofocus: false,
   debounce: 0,
-  debounceMaxWait: NaN,
+  debounceMaxWait: Number.NaN,
   disabled: false,
   form: undefined,
   formatter: undefined,
diff --git a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
index ec8fd8073..bb70d0837 100644
--- a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
@@ -218,7 +218,7 @@ const modelValue = defineModel<Exclude<BFormTagsProps['modelValue'], undefined>>
 
 const computedId = useId()
 
-const limitNumber = useToNumber(() => props.limit ?? NaN)
+const limitNumber = useToNumber(() => props.limit ?? Number.NaN)
 
 const stateClass = useStateClass(() => props.state)
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue b/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
index f54300f4b..37eb94c9a 100644
--- a/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
@@ -42,7 +42,7 @@ const _props = withDefaults(defineProps<Omit<BFormTextareaProps, 'modelValue'>>(
   autocomplete: undefined,
   autofocus: false,
   debounce: 0,
-  debounceMaxWait: NaN,
+  debounceMaxWait: Number.NaN,
   disabled: false,
   form: undefined,
   formatter: undefined,
diff --git a/packages/bootstrap-vue-next/src/components/BImg/BImg.vue b/packages/bootstrap-vue-next/src/components/BImg/BImg.vue
index 542e56990..63f6ccffe 100644
--- a/packages/bootstrap-vue-next/src/components/BImg/BImg.vue
+++ b/packages/bootstrap-vue-next/src/components/BImg/BImg.vue
@@ -44,8 +44,8 @@ const _props = withDefaults(defineProps<BImgProps>(), {
 })
 const props = useDefaults(_props, 'BImg')
 
-const heightNumber = useToNumber(() => props.height ?? NaN)
-const widthNumber = useToNumber(() => props.width ?? NaN)
+const heightNumber = useToNumber(() => props.height ?? Number.NaN)
+const widthNumber = useToNumber(() => props.width ?? Number.NaN)
 
 const radiusElementClasses = useRadiusElementClasses(() => ({
   rounded: props.rounded,
diff --git a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderTable.vue b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderTable.vue
index e0b31ba81..c84197d88 100644
--- a/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BPlaceholder/BPlaceholderTable.vue
@@ -79,8 +79,8 @@ defineSlots<BPlaceholderTableSlots>()
 
 const columnsToNumber = useToNumber(() => props.columns)
 const rowsToNumber = useToNumber(() => props.rows)
-const computedHeaderColumns = computed(() => props.headerColumns ?? NaN)
-const computedFooterColumns = computed(() => props.footerColumns ?? NaN)
+const computedHeaderColumns = computed(() => props.headerColumns ?? Number.NaN)
+const computedFooterColumns = computed(() => props.footerColumns ?? Number.NaN)
 const headerColumnsNumber = useToNumber(computedHeaderColumns)
 const footerColumnsNumber = useToNumber(computedFooterColumns)
 
diff --git a/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue b/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue
index b61580a9d..c5028eac2 100644
--- a/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue
+++ b/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue
@@ -158,7 +158,7 @@ const referenceElement = ref<HTMLElement | null>(null)
 const triggerElement = ref<HTMLElement | null>(null)
 
 const isAutoPlacement = computed(() => props.placement.startsWith('auto'))
-const offsetNumber = useToNumber(() => props.offset ?? NaN)
+const offsetNumber = useToNumber(() => props.offset ?? Number.NaN)
 
 const boundary = computed<Boundary | undefined>(() =>
   isBoundary(props.boundary) ? props.boundary : undefined
diff --git a/packages/bootstrap-vue-next/src/components/BProgress/BProgressBar.vue b/packages/bootstrap-vue-next/src/components/BProgress/BProgressBar.vue
index 5c7c6a2d9..ea612cab7 100644
--- a/packages/bootstrap-vue-next/src/components/BProgress/BProgressBar.vue
+++ b/packages/bootstrap-vue-next/src/components/BProgress/BProgressBar.vue
@@ -45,8 +45,8 @@ const computedClasses = computed(() => [
 
 const numberPrecision = useToNumber(() => props.precision)
 const numberValue = useToNumber(() => props.value)
-const numberMax = useToNumber(() => props.max ?? NaN)
-const parentMaxNumber = useToNumber(() => parentData?.max.value ?? NaN)
+const numberMax = useToNumber(() => props.max ?? Number.NaN)
+const parentMaxNumber = useToNumber(() => parentData?.max.value ?? Number.NaN)
 
 const computedLabel = computed(() =>
   props.showValue || parentData?.showValue.value
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index d4c87ddb7..3b23e0d7b 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -189,6 +189,7 @@ import {
 import {useId} from '../../composables/useId'
 import type {BTableSlots, CamelCase} from '../../types'
 import {tableKeyboardNavigationKey} from '../../utils/keys'
+import {useDebounceFn} from '../../utils/debounce'
 
 const _props = withDefaults(
   defineProps<Omit<BTableProps<Items>, 'sortBy' | 'busy' | 'selectedItems'>>(),
@@ -216,6 +217,8 @@ const _props = withDefaults(
     busyLoadingText: 'Loading...',
     currentPage: 1,
     sortCompare: undefined,
+    debounce: 0,
+    debounceMaxWait: Number.NaN,
     // BTableLite props
     items: () => [],
     fields: () => [],
@@ -365,6 +368,8 @@ const internalItems: Ref<Items[]> = ref([])
 
 const perPageNumber = useToNumber(() => props.perPage, {method: 'parseInt'})
 const currentPageNumber = useToNumber(() => props.currentPage, {method: 'parseInt'})
+const debounceNumber = useToNumber(() => props.debounce ?? 0, {nanToZero: true})
+const debounceMaxWaitNumber = useToNumber(() => props.debounceMaxWait ?? Number.NaN)
 
 const isFilterableTable = computed(() => !!props.filter)
 const usesProvider = computed(() => props.provider !== undefined)
@@ -757,28 +762,54 @@ const handleFieldSorting = (field: TableField<Items>) => {
   emit('sorted', props.multisort === true ? handleMultiSort() : handleSingleSort())
 }
 
+// AbortController for canceling previous provider requests
+let abortController: AbortController | null = null
+
 const callItemsProvider = async () => {
-  if (!usesProvider.value || props.provider === undefined || busyModel.value) return
+  if (!usesProvider.value || props.provider === undefined) return
+
+  // Cancel any previous request
+  if (abortController) {
+    abortController.abort()
+  }
+
+  // Create a new AbortController for this request
+  abortController = new AbortController()
+  const {signal} = abortController
+
   busyModel.value = true
   const response = props.provider({
     currentPage: currentPageNumber.value,
     filter: props.filter,
     sortBy: sortByModel.value,
     perPage: perPageNumber.value,
+    signal,
   })
   try {
     const items = response instanceof Promise ? await response : response
 
+    // Check if this request was aborted
+    if (signal.aborted) return
+
     if (items === undefined) return
     internalItems.value = items
+  } catch (error) {
+    // Ignore AbortError, re-throw others
+    if (error instanceof Error && error.name === 'AbortError') return
+    throw error
   } finally {
-    // Potential race condition could occur if the user explicitly sets the busy value to a different value while the response promise is executing
-    // which would have been the users choice.
-    // eslint-disable-next-line require-atomic-updates
-    busyModel.value = false
+    // Only set busy to false if this request wasn't aborted (to avoid race condition)
+    if (!signal.aborted) {
+      busyModel.value = false
+    }
   }
 }
 
+// Debounced version of callItemsProvider for filter changes to prevent rapid successive calls
+const debouncedCallItemsProvider = useDebounceFn(callItemsProvider, debounceNumber, {
+  maxWait: debounceMaxWaitNumber,
+})
+
 const providerPropsWatch = async (prop: string, val: unknown, oldVal: unknown) => {
   if (deepEqual(val, oldVal)) return
 
@@ -796,7 +827,8 @@ const providerPropsWatch = async (prop: string, val: unknown, oldVal: unknown) =
   if (noProvideWhenPaging || noProvideWhenFiltering || noProvideWhenSorting) return
 
   if (usesProvider.value === true) {
-    await callItemsProvider()
+    // Always use debounced version (when debounce is 0, it's immediate)
+    await debouncedCallItemsProvider()
   }
 
   if (!(prop === 'currentPage' || prop === 'perPage')) {
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue
index 6583498aa..19d91678e 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue
@@ -82,7 +82,8 @@ const computedTableAttrs = computed(() => ({
 
 const computedSticky = useNumberishToStyle(
   computed(
-    () => (props.stickyHeader === true ? defaultStickyHeaderHeight : props.stickyHeader) || NaN
+    () =>
+      (props.stickyHeader === true ? defaultStickyHeaderHeight : props.stickyHeader) || Number.NaN
   )
 )
 const stickyIsValid = computed(() => props.stickyHeader !== false)
diff --git a/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts b/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts
index f39b96009..59d4c7a8f 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BTable/table.spec.ts
@@ -1,7 +1,7 @@
 import {enableAutoUnmount, mount} from '@vue/test-utils'
-import {afterEach, describe, expect, it} from 'vitest'
+import {afterEach, describe, expect, it, vi} from 'vitest'
 import BTable from './BTable.vue'
-import type {BTableSortBy, TableField, TableItem} from '../../types'
+import type {BTableProviderContext, BTableSortBy, TableField, TableItem} from '../../types'
 import {nextTick} from 'vue'
 
 interface SimplePerson {
@@ -1217,3 +1217,207 @@ describe('initial sort direction', () => {
     expect(text).toStrictEqual(['Havij', 'Cyndi', 'Robert'])
   })
 })
+
+describe('provider debouncing', () => {
+  it('debounces provider calls when debounce prop is set', async () => {
+    const providerCallCounts: number[] = []
+    let callCount = 0
+
+    const provider = vi.fn(async () => {
+      callCount++
+      providerCallCounts.push(callCount)
+      return simpleItems
+    })
+
+    const wrapper = mount(BTable, {
+      props: {
+        provider,
+        fields: simpleFields,
+        debounce: 300, // Set 300ms debounce
+      },
+    })
+
+    // Wait for initial mount call
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    const initialCalls = callCount
+
+    // Rapidly change filter multiple times
+    await wrapper.setProps({filter: 'a'})
+    await wrapper.setProps({filter: 'ab'})
+    await wrapper.setProps({filter: 'abc'})
+
+    // Wait for debounce delay (300ms) + buffer
+    await new Promise((resolve) => setTimeout(resolve, 400))
+
+    // After debounce, only one additional call should have been made for all the rapid filter changes
+    const finalCalls = callCount
+    expect(finalCalls - initialCalls).toBeLessThanOrEqual(2) // At most one debounced call plus potentially one immediate
+    expect(finalCalls).toBeGreaterThan(initialCalls) // But at least one call was made
+  })
+
+  it('does not debounce provider calls when debounce is 0 (default)', async () => {
+    let callCount = 0
+
+    const provider = vi.fn(async () => {
+      callCount++
+      return simpleItems
+    })
+
+    const wrapper = mount(BTable, {
+      props: {
+        provider,
+        fields: simpleFields,
+        // debounce defaults to 0 (immediate)
+      },
+    })
+
+    // Wait for initial mount call
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    const initialCalls = callCount
+
+    // Change filter - with debounce=0, this should be immediate
+    await wrapper.setProps({filter: 'a'})
+    await nextTick()
+
+    // Should be called immediately
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    expect(callCount).toBe(initialCalls + 1)
+  })
+
+  it('supports AbortSignal in provider context', async () => {
+    let receivedSignal: AbortSignal | undefined
+
+    const provider = vi.fn(async (context: Readonly<BTableProviderContext>) => {
+      receivedSignal = context.signal
+      return simpleItems
+    })
+
+    mount(BTable, {
+      props: {
+        provider,
+        fields: simpleFields,
+      },
+    })
+
+    // Wait for initial mount call
+    await new Promise((resolve) => setTimeout(resolve, 50))
+
+    // Signal should be present
+    expect(receivedSignal).toBeDefined()
+    expect(receivedSignal).toBeInstanceOf(AbortSignal)
+  })
+
+  it('cancels previous provider call when new one is triggered', async () => {
+    let abortedCount = 0
+    const provider = vi.fn(
+      async (context: Readonly<BTableProviderContext>) =>
+        new Promise<typeof simpleItems>((resolve, reject) => {
+          const timeout = setTimeout(() => resolve(simpleItems), 100)
+          context.signal.addEventListener('abort', () => {
+            clearTimeout(timeout)
+            abortedCount++
+            reject(new Error('AbortError'))
+          })
+        })
+    )
+
+    const wrapper = mount(BTable, {
+      props: {
+        provider,
+        fields: simpleFields,
+        debounce: 300,
+      },
+    })
+
+    // Wait for initial mount call
+    await new Promise((resolve) => setTimeout(resolve, 50))
+
+    // Rapidly change filter - this should abort previous calls
+    await wrapper.setProps({filter: 'a'})
+    await new Promise((resolve) => setTimeout(resolve, 10))
+    await wrapper.setProps({filter: 'ab'})
+    await new Promise((resolve) => setTimeout(resolve, 10))
+    await wrapper.setProps({filter: 'abc'})
+
+    // Wait for final debounced call to complete
+    await new Promise((resolve) => setTimeout(resolve, 500))
+
+    // Previous calls should have been aborted
+    expect(abortedCount).toBeGreaterThan(0)
+  })
+
+  it('does not set busy to false when first provider finishes while second is still running', async () => {
+    let callCount = 0
+
+    const provider = vi.fn(async (context: Readonly<BTableProviderContext>) => {
+      callCount++
+      const currentCall = callCount
+
+      if (currentCall === 2) {
+        // First call after mount: delay and get aborted
+        return new Promise<typeof simpleItems>((resolve, reject) => {
+          const timeout = setTimeout(() => {
+            resolve(simpleItems)
+          }, 150)
+
+          context.signal.addEventListener('abort', () => {
+            clearTimeout(timeout)
+            reject(new Error('AbortError'))
+          })
+        }).catch((error) => {
+          // Silently handle AbortError in test
+          if (error.message === 'AbortError') {
+            return simpleItems
+          }
+          throw error
+        })
+      } else if (currentCall === 3) {
+        // Second call: longer delay
+        return new Promise<typeof simpleItems>((resolve) => {
+          setTimeout(() => {
+            resolve(simpleItems)
+          }, 300)
+        })
+      }
+
+      // Initial mount call
+      return simpleItems
+    })
+
+    const wrapper = mount(BTable, {
+      props: {
+        provider,
+        fields: simpleFields,
+        debounce: 0, // No debounce for this test
+      },
+    })
+
+    const $table = wrapper.find('table')
+
+    // Wait for initial mount call
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    expect($table.classes()).not.toContain('b-table-busy') // Should not be busy after initial call
+
+    // Trigger first provider call
+    await wrapper.setProps({filter: 'first'})
+    await new Promise((resolve) => setTimeout(resolve, 20))
+    expect($table.classes()).toContain('b-table-busy') // Should be busy while first call is running
+
+    // Trigger second provider call while first is still running
+    await wrapper.setProps({filter: 'second'})
+    await new Promise((resolve) => setTimeout(resolve, 20))
+    expect($table.classes()).toContain('b-table-busy') // Should still be busy
+
+    // Wait for first provider to finish being aborted
+    await new Promise((resolve) => setTimeout(resolve, 200))
+
+    // The busy state should still be true because the second provider is still running
+    expect($table.classes()).toContain('b-table-busy')
+
+    // Wait for second provider to complete
+    await new Promise((resolve) => setTimeout(resolve, 200))
+
+    // Now busy should be false
+    expect($table.classes()).not.toContain('b-table-busy')
+  })
+})
diff --git a/packages/bootstrap-vue-next/src/composables/useFormInput.ts b/packages/bootstrap-vue-next/src/composables/useFormInput.ts
index f379aa710..ea6a7fb0a 100644
--- a/packages/bootstrap-vue-next/src/composables/useFormInput.ts
+++ b/packages/bootstrap-vue-next/src/composables/useFormInput.ts
@@ -29,7 +29,7 @@ export const useFormInput = (
 
   const computedId = useId(() => props.id, 'input')
   const debounceNumber = useToNumber(() => props.debounce ?? 0, {nanToZero: true})
-  const debounceMaxWaitNumber = useToNumber(() => props.debounceMaxWait ?? NaN)
+  const debounceMaxWaitNumber = useToNumber(() => props.debounceMaxWait ?? Number.NaN)
 
   // This automatically adds the appropriate "for" attribute to a BFormGroup label
   const formGroupData = inject(formGroupKey, null)?.(computedId)
@@ -44,7 +44,7 @@ export const useFormInput = (
       modelValue.value = value
     },
     () => (modelModifiers.lazy === true ? 0 : debounceNumber.value),
-    {maxWait: () => (modelModifiers.lazy === true ? NaN : debounceMaxWaitNumber.value)}
+    {maxWait: () => (modelModifiers.lazy === true ? Number.NaN : debounceMaxWaitNumber.value)}
   )
 
   const updateModelValue = (value: Numberish, force = false, immediate = false) => {
diff --git a/packages/bootstrap-vue-next/src/composables/useTextareaResize.ts b/packages/bootstrap-vue-next/src/composables/useTextareaResize.ts
index f7222421f..11b936174 100644
--- a/packages/bootstrap-vue-next/src/composables/useTextareaResize.ts
+++ b/packages/bootstrap-vue-next/src/composables/useTextareaResize.ts
@@ -26,7 +26,7 @@ export const useTextareaResize = (
 ) => {
   const height = ref<number | null | string>(0)
   const maxRowsNumber = useToNumber(
-    computed(() => toValue(maxRows) || NaN),
+    computed(() => toValue(maxRows) || Number.NaN),
     {
       method: 'parseInt',
       nanToZero: true,
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index f681dbabe..450dfad7a 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -22,7 +22,7 @@ import type {CheckboxOptionRaw, CheckboxValue} from './CheckboxTypes'
 import type {Size} from './Size'
 import type {AriaInvalid} from './AriaInvalid'
 import type {Numberish, TeleporterProps, ValidationState} from './CommonTypes'
-import type {CommonInputProps} from './FormCommonInputProps'
+import type {CommonInputProps, FormDebounceOptions} from './FormCommonInputProps'
 import type {RadioOptionRaw, RadioValue} from './RadioTypes'
 import type {SelectValue} from './SelectTypes'
 import type {
@@ -1159,7 +1159,9 @@ export interface BTableLiteProps<Items> extends BTableSimpleProps {
   theadTrClass?: ClassValue
 }
 
-export interface BTableProps<Items> extends Omit<BTableLiteProps<Items>, 'tableClass'> {
+export interface BTableProps<Items>
+  extends Omit<BTableLiteProps<Items>, 'tableClass'>,
+    FormDebounceOptions {
   provider?: BTableProvider<Items>
   noProvider?: readonly NoProviderTypes[]
   noProviderPaging?: boolean
diff --git a/packages/bootstrap-vue-next/src/types/TableTypes.ts b/packages/bootstrap-vue-next/src/types/TableTypes.ts
index f6aa5c577..9b88db693 100644
--- a/packages/bootstrap-vue-next/src/types/TableTypes.ts
+++ b/packages/bootstrap-vue-next/src/types/TableTypes.ts
@@ -39,6 +39,7 @@ export type BTableProviderContext = {
   filter: string | undefined
   currentPage: number
   perPage: number
+  signal: AbortSignal
 }
 
 export type BTableProvider<T> = (

From 4664f033cd691b79bb8cd2038bd93d459b55179f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 17 Nov 2025 16:22:33 -0600
Subject: [PATCH 13/13] chore: release main (#2896)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .release-please-manifest.json            |  4 ++--
 packages/bootstrap-vue-next/CHANGELOG.md | 15 +++++++++++++++
 packages/bootstrap-vue-next/package.json |  2 +-
 packages/nuxt/CHANGELOG.md               | 16 ++++++++++++++++
 packages/nuxt/package.json               |  2 +-
 5 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 8e2f811b6..d16f948c1 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/bootstrap-vue-next": "0.40.7",
-  "packages/nuxt": "0.40.7"
+  "packages/bootstrap-vue-next": "0.40.8",
+  "packages/nuxt": "0.40.8"
 }
diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md
index 30534e0dd..7167c5883 100644
--- a/packages/bootstrap-vue-next/CHANGELOG.md
+++ b/packages/bootstrap-vue-next/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.40.8](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.40.7...bootstrapvuenext-v0.40.8) (2025-11-17)
+
+
+### Features
+
+* add name and form props to BFormRating for form submission ([#2895](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2895)) ([f14f049](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/f14f0495a03678a4f6c0d0ee87d3eabfc6def136))
+* **BTable:** add an AbortSignal to the provider object parameter for cancelling in progress requests ([2a12859](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/2a12859404a4ee498e6ccc4aa5490dab9997d7c7))
+* **BTable:** add configurable debouncing ([2a12859](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/2a12859404a4ee498e6ccc4aa5490dab9997d7c7))
+
+
+### Bug Fixes
+
+* **directives:** Robustness fixes for directives ([#2906](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2906)) ([7b39759](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/7b397599f76f50d10773cd8fb63fb6d2e72dc4c7))
+* **typings:** Fix paths to `*.d.mts` files ([#2907](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2907)) ([4b0d55a](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/4b0d55a957f029131c89f740adc65ca7d9e79d58))
+
 ## [0.40.7](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.40.6...bootstrapvuenext-v0.40.7) (2025-10-22)
 
 
diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json
index 152167d43..6fdbc3258 100644
--- a/packages/bootstrap-vue-next/package.json
+++ b/packages/bootstrap-vue-next/package.json
@@ -2,7 +2,7 @@
   "name": "bootstrap-vue-next",
   "displayName": "BootstrapVueNext",
   "description": "BootstrapVueNext is an early and lovely component library for Vue 3 & Nuxt 3 based on Bootstrap 5 and Typescript.",
-  "version": "0.40.7",
+  "version": "0.40.8",
   "license": "MIT",
   "main": "./dist/bootstrap-vue-next.umd.js",
   "module": "./dist/bootstrap-vue-next.mjs",
diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md
index 83a98d361..da4241c42 100644
--- a/packages/nuxt/CHANGELOG.md
+++ b/packages/nuxt/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.40.8](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.40.7...nuxt-v0.40.8) (2025-11-17)
+
+
+### Miscellaneous Chores
+
+* **nuxt:** Synchronize main group versions
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * bootstrap-vue-next bumped to 0.40.8
+  * peerDependencies
+    * bootstrap-vue-next bumped to 0.40.8
+
 ## [0.40.7](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.40.6...nuxt-v0.40.7) (2025-10-22)
 
 
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index b092824f4..d38b5722c 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@bootstrap-vue-next/nuxt",
   "description": "Nuxt Module for BootstrapVueNext",
-  "version": "0.40.7",
+  "version": "0.40.8",
   "license": "MIT",
   "author": {
     "name": "Issayah",