From 696a6022692689663db9b00c895b19a45b408394 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Sun, 12 Oct 2025 03:55:00 +0300
Subject: [PATCH 1/7] Fix modals created with useModal not showing title
 defined in component (#2878)

Fix: modal title not showing when defined in component with useModal

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: xvaara <130606+xvaara@users.noreply.github.com>
---
 .../composables/orchestratorShared.spec.ts    | 100 ++++++++++++++++++
 .../src/composables/orchestratorShared.ts     |  15 ++-
 2 files changed, 111 insertions(+), 4 deletions(-)
 create mode 100644 packages/bootstrap-vue-next/src/composables/orchestratorShared.spec.ts

diff --git a/packages/bootstrap-vue-next/src/composables/orchestratorShared.spec.ts b/packages/bootstrap-vue-next/src/composables/orchestratorShared.spec.ts
new file mode 100644
index 000000000..275f66e4e
--- /dev/null
+++ b/packages/bootstrap-vue-next/src/composables/orchestratorShared.spec.ts
@@ -0,0 +1,100 @@
+import {describe, expect, it} from 'vitest'
+import {ref} from 'vue'
+import {buildPromise} from './orchestratorShared'
+import type {ModalOrchestratorArrayValue} from '../types/ComponentOrchestratorTypes'
+
+describe('buildPromise', () => {
+  it('set method does not add undefined title and body when they are not in the value', () => {
+    const store = ref<ModalOrchestratorArrayValue[]>([])
+    const _self = Symbol('test-modal')
+
+    const {value: promise} = buildPromise<unknown, unknown, ModalOrchestratorArrayValue>(
+      _self,
+      store
+    )
+
+    // First, add an item to the store without title or body
+    store.value.push({
+      type: 'modal',
+      _self,
+      position: 'modal',
+      modelValue: false,
+      _component: {},
+      options: {},
+      promise: {value: promise, resolve: () => {}},
+    } as ModalOrchestratorArrayValue)
+
+    // Now call set with a value that doesn't have title or body
+    promise.set({modelValue: true} as never)
+
+    // Get the item from the store
+    const item = store.value.find((el) => el._self === _self)
+    expect(item).toBeDefined()
+
+    // The key check: title and body should not be in the object
+    // This ensures they won't override component-defined props
+    expect('title' in (item || {})).toBe(false)
+    expect('body' in (item || {})).toBe(false)
+  })
+
+  it('set method preserves title and body when they are defined', () => {
+    const store = ref<ModalOrchestratorArrayValue[]>([])
+    const _self = Symbol('test-modal')
+
+    const {value: promise} = buildPromise<unknown, unknown, ModalOrchestratorArrayValue>(
+      _self,
+      store
+    )
+
+    // Add an item to the store with title
+    store.value.push({
+      type: 'modal',
+      _self,
+      position: 'modal',
+      modelValue: false,
+      title: 'Initial Title',
+      _component: {},
+      options: {},
+      promise: {value: promise, resolve: () => {}},
+    } as ModalOrchestratorArrayValue)
+
+    // Call set with a new title
+    promise.set({title: 'Updated Title'} as never)
+
+    // Get the item from the store
+    const item = store.value.find((el) => el._self === _self)
+    expect(item).toBeDefined()
+    expect(item?.title).toBe('Updated Title')
+  })
+
+  it('set method handles undefined title explicitly passed', () => {
+    const store = ref<ModalOrchestratorArrayValue[]>([])
+    const _self = Symbol('test-modal')
+
+    const {value: promise} = buildPromise<unknown, unknown, ModalOrchestratorArrayValue>(
+      _self,
+      store
+    )
+
+    // Add an item to the store with title
+    store.value.push({
+      type: 'modal',
+      _self,
+      position: 'modal',
+      modelValue: false,
+      title: 'Initial Title',
+      _component: {},
+      options: {},
+      promise: {value: promise, resolve: () => {}},
+    } as ModalOrchestratorArrayValue)
+
+    // Call set without title (title not in the object)
+    promise.set({modelValue: true} as never)
+
+    // Get the item from the store
+    const item = store.value.find((el) => el._self === _self)
+    expect(item).toBeDefined()
+    // Title should remain as it was, not be overwritten with undefined
+    expect(item?.title).toBe('Initial Title')
+  })
+})
diff --git a/packages/bootstrap-vue-next/src/composables/orchestratorShared.ts b/packages/bootstrap-vue-next/src/composables/orchestratorShared.ts
index 26ca480aa..0af65208f 100644
--- a/packages/bootstrap-vue-next/src/composables/orchestratorShared.ts
+++ b/packages/bootstrap-vue-next/src/composables/orchestratorShared.ts
@@ -72,12 +72,19 @@ export function buildPromise<TComponent, TParam, TArrayValue extends Orchestrato
         if (item.modelValue !== v.modelValue) {
           item['onUpdate:modelValue']?.(v.modelValue as boolean)
         }
-        store.value.splice(itemIndex, 1, {
+        const updatedItem = {
           ...v,
-          title: toValue((v as Record<string, unknown>).title),
-          body: toValue((v as Record<string, unknown>).body),
           modelValue: toValue(v.modelValue),
-        } as TArrayValue)
+        } as TArrayValue
+        // Only set title and body if they are defined in v
+        const vRecord = v as Record<string, unknown>
+        if ('title' in vRecord && vRecord.title !== undefined) {
+          ;(updatedItem as Record<string, unknown>).title = toValue(vRecord.title)
+        }
+        if ('body' in vRecord && vRecord.body !== undefined) {
+          ;(updatedItem as Record<string, unknown>).body = toValue(vRecord.body)
+        }
+        store.value.splice(itemIndex, 1, updatedItem)
       }
       return promise
     },

From 3ef04e30af998e2813362afb72d2deee77083ebe Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Tue, 21 Oct 2025 17:19:45 -0700
Subject: [PATCH 2/7] docs(bmodal): mark header-tag and footer-tag as
 deprecated (#2881)

---
 apps/docs/src/docs/migration-guide.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md
index aa1733124..24cd3509f 100644
--- a/apps/docs/src/docs/migration-guide.md
+++ b/apps/docs/src/docs/migration-guide.md
@@ -607,7 +607,8 @@ flex utility classes. See their [documentation](https://getbootstrap.com/docs/5.
 
 ### BModal
 
-<NotYetImplemented/> `footer-tag` and `header-tag`
+`footer-tag` and `header-tag` are deprecated, use the `footer` and `title` slots instead. See the
+[modal documentation](/docs/components/modal#custom-rendering-with-slots) for details.
 
 #### Removed Global Modal Management
 
@@ -700,7 +701,7 @@ See the [v-html](#v-html) section for information on deprecation of the `cancel-
 
 #### Modal Slot changes
 
-[BootstrapVue](https://bootstrap-vue.github.io/bootstrap-vue/docs/components/modal#custom-rendering-with-slots) provides different slots to configure some pieces of the modal component. These slots are slightly different in [BootstrapVueNext](/docs/components/modal.html#comp-reference-bmodal-slots):
+[BootstrapVue](https://bootstrap-vue.github.io/bootstrap-vue/docs/components/modal#custom-rendering-with-slots) provides different slots to configure some pieces of the modal component. These slots are slightly different in [BootstrapVueNext](/docs/components/modal#comp-reference-bmodal-slots):
 
 | BootstrapVue       | BootstrapVueNext |
 | ------------------ | ---------------- |

From 599c511b07c497812edfbf87ed438b21ede0269f Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Tue, 21 Oct 2025 17:21:37 -0700
Subject: [PATCH 3/7] docs: refactor remaining examples in the components
 documentation (#2882)

---
 apps/docs/src/docs/components/app.md          | 278 +----------------
 apps/docs/src/docs/components/demo/App.vue    |  10 +
 .../docs/components/demo/AppBasicUsage.vue    |  10 +
 .../docs/components/demo/AppComposables.vue   |  31 ++
 .../docs/components/demo/AppCustomMerge.vue   |  23 ++
 .../src/docs/components/demo/AppDefaults.vue  |  25 ++
 .../docs/components/demo/AppMergeDefaults.vue |  18 ++
 .../components/demo/AppMigrationAfter.vue     |  10 +
 .../components/demo/AppMigrationAfterMain.ts  |  10 +
 .../components/demo/AppMigrationBefore.ts     |  18 ++
 .../components/demo/AppNoOrchestrator.vue     |   6 +
 apps/docs/src/docs/components/demo/AppRTL.vue |  15 +
 .../src/docs/components/demo/AppTeleport.vue  |   6 +
 .../docs/components/demo/AppToastConfig.vue   |   6 +
 .../docs/components/demo/FormFileAccept.vue   |  15 +
 .../components/demo/FormFileAutofocus.vue     |   6 +
 .../docs/components/demo/FormFileLabel.vue    |   9 +
 .../docs/components/demo/FormFileMultiple.vue |  15 +
 .../docs/components/demo/FormFileNoDrop.vue   |  15 +
 .../docs/components/demo/FormFileSingle.vue   |  15 +
 .../docs/components/demo/FormFileSizing.vue   |  11 +
 .../docs/components/demo/FormFileState.vue    |  10 +
 .../components/demo/FormSelectOptionNotes.vue |  27 ++
 .../components/demo/OrchestratorFilter.vue    |  11 +
 .../components/demo/OrchestratorInternal.vue  |   7 +
 .../components/demo/OrchestratorSelective.vue |   7 +
 .../components/demo/PlaceholderAnimation.vue  |  11 +
 .../docs/components/demo/PlaceholderBasic.vue |   5 +
 .../components/demo/PlaceholderButton.vue     |   3 +
 .../docs/components/demo/PlaceholderCard.vue  |   3 +
 .../demo/PlaceholderCardAdvanced.vue          |  21 ++
 .../components/demo/PlaceholderSizing.vue     |   5 +
 .../docs/components/demo/PlaceholderTable.vue |   3 +
 .../demo/PlaceholderTableAdvanced.vue         |  46 +++
 .../docs/components/demo/PlaceholderWidth.vue |  22 ++
 .../components/demo/PlaceholderWrapper.vue    |  59 ++++
 .../docs/components/demo/SelectOverview.vue   |   1 -
 .../docs/components/demo/ToastAutoDismiss.vue |  24 ++
 .../src/docs/components/demo/ToastLink.vue    |  20 ++
 .../docs/components/demo/ToastOverview.vue    |  15 +
 .../docs/components/demo/ToastPositioning.vue |  39 +++
 .../src/docs/components/demo/ToastStatic.vue  |  16 +
 apps/docs/src/docs/components/form-file.md    | 164 +---------
 apps/docs/src/docs/components/form-select.md  |   8 +-
 apps/docs/src/docs/components/orchestrator.md |  51 +---
 apps/docs/src/docs/components/placeholder.md  | 285 +-----------------
 apps/docs/src/docs/components/toast.md        | 211 +------------
 47 files changed, 667 insertions(+), 959 deletions(-)
 create mode 100644 apps/docs/src/docs/components/demo/App.vue
 create mode 100644 apps/docs/src/docs/components/demo/AppBasicUsage.vue
 create mode 100644 apps/docs/src/docs/components/demo/AppComposables.vue
 create mode 100644 apps/docs/src/docs/components/demo/AppCustomMerge.vue
 create mode 100644 apps/docs/src/docs/components/demo/AppDefaults.vue
 create mode 100644 apps/docs/src/docs/components/demo/AppMergeDefaults.vue
 create mode 100644 apps/docs/src/docs/components/demo/AppMigrationAfter.vue
 create mode 100644 apps/docs/src/docs/components/demo/AppMigrationAfterMain.ts
 create mode 100644 apps/docs/src/docs/components/demo/AppMigrationBefore.ts
 create mode 100644 apps/docs/src/docs/components/demo/AppNoOrchestrator.vue
 create mode 100644 apps/docs/src/docs/components/demo/AppRTL.vue
 create mode 100644 apps/docs/src/docs/components/demo/AppTeleport.vue
 create mode 100644 apps/docs/src/docs/components/demo/AppToastConfig.vue
 create mode 100644 apps/docs/src/docs/components/demo/FormFileAccept.vue
 create mode 100644 apps/docs/src/docs/components/demo/FormFileAutofocus.vue
 create mode 100644 apps/docs/src/docs/components/demo/FormFileLabel.vue
 create mode 100644 apps/docs/src/docs/components/demo/FormFileMultiple.vue
 create mode 100644 apps/docs/src/docs/components/demo/FormFileNoDrop.vue
 create mode 100644 apps/docs/src/docs/components/demo/FormFileSingle.vue
 create mode 100644 apps/docs/src/docs/components/demo/FormFileSizing.vue
 create mode 100644 apps/docs/src/docs/components/demo/FormFileState.vue
 create mode 100644 apps/docs/src/docs/components/demo/FormSelectOptionNotes.vue
 create mode 100644 apps/docs/src/docs/components/demo/OrchestratorFilter.vue
 create mode 100644 apps/docs/src/docs/components/demo/OrchestratorInternal.vue
 create mode 100644 apps/docs/src/docs/components/demo/OrchestratorSelective.vue
 create mode 100644 apps/docs/src/docs/components/demo/PlaceholderAnimation.vue
 create mode 100644 apps/docs/src/docs/components/demo/PlaceholderBasic.vue
 create mode 100644 apps/docs/src/docs/components/demo/PlaceholderButton.vue
 create mode 100644 apps/docs/src/docs/components/demo/PlaceholderCard.vue
 create mode 100644 apps/docs/src/docs/components/demo/PlaceholderCardAdvanced.vue
 create mode 100644 apps/docs/src/docs/components/demo/PlaceholderSizing.vue
 create mode 100644 apps/docs/src/docs/components/demo/PlaceholderTable.vue
 create mode 100644 apps/docs/src/docs/components/demo/PlaceholderTableAdvanced.vue
 create mode 100644 apps/docs/src/docs/components/demo/PlaceholderWidth.vue
 create mode 100644 apps/docs/src/docs/components/demo/PlaceholderWrapper.vue
 create mode 100644 apps/docs/src/docs/components/demo/ToastAutoDismiss.vue
 create mode 100644 apps/docs/src/docs/components/demo/ToastLink.vue
 create mode 100644 apps/docs/src/docs/components/demo/ToastOverview.vue
 create mode 100644 apps/docs/src/docs/components/demo/ToastPositioning.vue
 create mode 100644 apps/docs/src/docs/components/demo/ToastStatic.vue

diff --git a/apps/docs/src/docs/components/app.md b/apps/docs/src/docs/components/app.md
index 63979ed65..a5c188dc1 100644
--- a/apps/docs/src/docs/components/app.md
+++ b/apps/docs/src/docs/components/app.md
@@ -19,24 +19,7 @@ The `BApp` component is the new recommended way to configure bootstrap-vue-next.
 
 ## Basic Usage
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BApp>
-    <!-- Your application content -->
-    <router-view />
-  </BApp>
-</template>
-
-<script setup lang="ts">
-import {BApp} from 'bootstrap-vue-next'
-</script>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/AppBasicUsage.vue
 
 ## Configuration
 
@@ -44,104 +27,19 @@ import {BApp} from 'bootstrap-vue-next'
 
 You can provide global defaults for any bootstrap-vue-next component:
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BApp :defaults="appDefaults">
-    <!-- Your application content -->
-    <router-view />
-  </BApp>
-</template>
-
-<script setup lang="ts">
-import {BApp} from 'bootstrap-vue-next'
-
-const appDefaults = {
-  BButton: {
-    variant: 'primary',
-    size: 'sm',
-  },
-  BModal: {
-    centered: true,
-    noCloseOnBackdrop: true,
-  },
-  BToast: {
-    variant: 'success',
-    solid: true,
-  },
-}
-</script>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/AppDefaults.vue
 
 ### Merging Defaults
 
 By default, the `defaults` prop completely replaces any existing defaults. Use `mergeDefaults` to merge with parent or plugin defaults:
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BApp :defaults="appDefaults" :merge-defaults="true">
-    <!-- Your application content -->
-  </BApp>
-</template>
-
-<script setup lang="ts">
-import {BApp} from 'bootstrap-vue-next'
-
-const appDefaults = {
-  BButton: {
-    variant: 'primary', // This will merge with existing BButton defaults
-  },
-}
-</script>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/AppMergeDefaults.vue
 
 ### Custom Merge Function
 
 For advanced use cases, you can provide a custom merge function:
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BApp :defaults="appDefaults" :merge-defaults="customMerge">
-    <!-- Your application content -->
-  </BApp>
-</template>
-
-<script setup lang="ts">
-import {BApp} from 'bootstrap-vue-next'
-import type {BvnComponentProps} from 'bootstrap-vue-next'
-
-const appDefaults = {
-  BButton: {
-    variant: 'primary',
-  },
-}
-
-const customMerge = (
-  oldDefaults: Partial<BvnComponentProps>,
-  newDefaults: Partial<BvnComponentProps>
-): Partial<BvnComponentProps> => {
-  // Your custom merge logic here
-  return {...oldDefaults, ...newDefaults}
-}
-</script>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/AppCustomMerge.vue
 
 ## Orchestrator Configuration
 
@@ -149,151 +47,37 @@ const customMerge = (
 
 By default, orchestrators render inline with your `BApp` component. Use `teleportTo` to render them elsewhere in the DOM:
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BApp teleport-to="body">
-    <!-- Orchestrators will render in document.body -->
-    <router-view />
-  </BApp>
-</template>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/AppTeleport.vue#template{vue-html}
 
 ### Disabling Orchestrators
 
 If you don't need the built-in orchestrators (for example, if you're using custom implementations), you can disable them:
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BApp :no-orchestrator="true">
-    <!-- No automatic orchestrators will be created -->
-    <router-view />
-  </BApp>
-</template>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/AppNoOrchestrator.vue#template{vue-html}
 
 ### Toast Configuration
 
 Control how toasts are added to the list:
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BApp :append-toast="true">
-    <!-- New toasts will be appended to the end of the list -->
-    <router-view />
-  </BApp>
-</template>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/AppToastConfig.vue#template{vue-html}
 
 ## RTL Support
 
 `BApp` provides built-in right-to-left language support:
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BApp :rtl="rtlConfig">
-    <!-- Your application content -->
-    <router-view />
-  </BApp>
-</template>
-
-<script setup lang="ts">
-import {BApp} from 'bootstrap-vue-next'
-
-const rtlConfig = {
-  rtlInitial: true,
-  localeInitial: 'ar',
-}
-</script>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/AppRTL.vue
 
 ## Migration from Plugins
 
 ### Before (Plugin-based)
 
-<HighlightCard>
-<template #html>
-
-```typescript
-// main.ts
-import {createApp} from 'vue'
-import {createBootstrap} from 'bootstrap-vue-next'
-import App from './App.vue'
-
-const app = createApp(App)
-
-app.use(
-  createBootstrap({
-    components: {
-      BButton: {
-        variant: 'primary',
-      },
-    },
-  })
-)
-
-app.mount('#app')
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/AppMigrationBefore.ts{typescript}
 
 ### After (BApp-based)
 
-<HighlightCard>
-<template #html>
+<<< FRAGMENT ./demo/AppMigrationAfter.vue{vue}
 
-```vue
-<!-- App.vue -->
-<template>
-  <BApp :defaults="{BButton: {variant: 'primary'}}">
-    <router-view />
-  </BApp>
-</template>
-
-<script setup lang="ts">
-import {BApp} from 'bootstrap-vue-next'
-</script>
-```
-
-```typescript
-// main.ts
-import {createApp} from 'vue'
-import App from './App.vue'
-
-// Add the necessary CSS
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
-
-const app = createApp(App)
-app.mount('#app')
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/AppMigrationAfterMain.ts{typescript}
 
 ## Working with Composables
 
@@ -303,45 +87,7 @@ When using `BApp`, the following composables work without requiring plugin insta
 - [`useModal()`](/docs/composables/useModal) - Create and manage modals programmatically
 - [`usePopover()`](/docs/composables/usePopover) - Create and manage popovers programmatically
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BApp>
-    <BButton @click="showToast">Show Toast</BButton>
-    <BButton @click="showModal">Show Modal</BButton>
-  </BApp>
-</template>
-
-<script setup lang="ts">
-import {BApp, BButton, useToast, useModal} from 'bootstrap-vue-next'
-
-const toast = useToast()
-const modal = useModal()
-
-const showToast = () => {
-  toast
-    .create({
-      title: 'Hello',
-      body: 'This is a toast message!',
-    })
-    .show()
-}
-
-const showModal = () => {
-  modal
-    .create({
-      title: 'Confirm Action',
-      body: 'Are you sure you want to continue?',
-    })
-    .show()
-}
-</script>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/AppComposables.vue
 
 ## Backward Compatibility
 
diff --git a/apps/docs/src/docs/components/demo/App.vue b/apps/docs/src/docs/components/demo/App.vue
new file mode 100644
index 000000000..66c21804c
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/App.vue
@@ -0,0 +1,10 @@
+<template>
+  <div id="app">
+    <h1>My Vue App</h1>
+    <p>This is a placeholder App.vue file for documentation purposes.</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Placeholder component
+</script>
diff --git a/apps/docs/src/docs/components/demo/AppBasicUsage.vue b/apps/docs/src/docs/components/demo/AppBasicUsage.vue
new file mode 100644
index 000000000..020acdc2a
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/AppBasicUsage.vue
@@ -0,0 +1,10 @@
+<template>
+  <BApp>
+    <!-- Your application content -->
+    <router-view />
+  </BApp>
+</template>
+
+<script setup lang="ts">
+import {BApp} from 'bootstrap-vue-next'
+</script>
diff --git a/apps/docs/src/docs/components/demo/AppComposables.vue b/apps/docs/src/docs/components/demo/AppComposables.vue
new file mode 100644
index 000000000..b6164385c
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/AppComposables.vue
@@ -0,0 +1,31 @@
+<template>
+  <BApp>
+    <BButton @click="showToast">Show Toast</BButton>
+    <BButton @click="showModal">Show Modal</BButton>
+  </BApp>
+</template>
+
+<script setup lang="ts">
+import {BApp, BButton, useModal, useToast} from 'bootstrap-vue-next'
+
+const toast = useToast()
+const modal = useModal()
+
+const showToast = () => {
+  toast
+    .create({
+      title: 'Hello',
+      body: 'This is a toast message!',
+    })
+    .show()
+}
+
+const showModal = () => {
+  modal
+    .create({
+      title: 'Confirm Action',
+      body: 'Are you sure you want to continue?',
+    })
+    .show()
+}
+</script>
diff --git a/apps/docs/src/docs/components/demo/AppCustomMerge.vue b/apps/docs/src/docs/components/demo/AppCustomMerge.vue
new file mode 100644
index 000000000..5252d3728
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/AppCustomMerge.vue
@@ -0,0 +1,23 @@
+<template>
+  <BApp
+    :defaults="appDefaults"
+    :merge-defaults="customMerge"
+  >
+    <!-- Your application content -->
+  </BApp>
+</template>
+
+<script setup lang="ts">
+import {BApp} from 'bootstrap-vue-next'
+
+const appDefaults = {
+  BButton: {
+    variant: 'primary' as const,
+  },
+}
+
+const customMerge = (
+  oldDefaults: Record<string, unknown>,
+  newDefaults: Record<string, unknown>
+): Record<string, unknown> => ({...oldDefaults, ...newDefaults})
+</script>
diff --git a/apps/docs/src/docs/components/demo/AppDefaults.vue b/apps/docs/src/docs/components/demo/AppDefaults.vue
new file mode 100644
index 000000000..2f0aed8ad
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/AppDefaults.vue
@@ -0,0 +1,25 @@
+<template>
+  <BApp :defaults="appDefaults">
+    <!-- Your application content -->
+    <router-view />
+  </BApp>
+</template>
+
+<script setup lang="ts">
+import {BApp} from 'bootstrap-vue-next'
+
+const appDefaults = {
+  BButton: {
+    variant: 'info' as const,
+    size: 'lg' as const,
+  },
+  BModal: {
+    centered: true,
+    noCloseOnBackdrop: true,
+  },
+  BToast: {
+    variant: 'success' as const,
+    solid: true,
+  },
+}
+</script>
diff --git a/apps/docs/src/docs/components/demo/AppMergeDefaults.vue b/apps/docs/src/docs/components/demo/AppMergeDefaults.vue
new file mode 100644
index 000000000..3a04c61b9
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/AppMergeDefaults.vue
@@ -0,0 +1,18 @@
+<template>
+  <BApp
+    :defaults="appDefaults"
+    :merge-defaults="true"
+  >
+    <!-- Your application content -->
+  </BApp>
+</template>
+
+<script setup lang="ts">
+import {BApp} from 'bootstrap-vue-next'
+
+const appDefaults = {
+  BButton: {
+    variant: 'primary' as const, // This will merge with existing BButton defaults
+  },
+}
+</script>
diff --git a/apps/docs/src/docs/components/demo/AppMigrationAfter.vue b/apps/docs/src/docs/components/demo/AppMigrationAfter.vue
new file mode 100644
index 000000000..df0b54119
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/AppMigrationAfter.vue
@@ -0,0 +1,10 @@
+<!-- App.vue -->
+<template>
+  <BApp :defaults="{BButton: {variant: 'primary'}}">
+    <router-view />
+  </BApp>
+</template>
+
+<script setup lang="ts">
+import {BApp} from 'bootstrap-vue-next'
+</script>
diff --git a/apps/docs/src/docs/components/demo/AppMigrationAfterMain.ts b/apps/docs/src/docs/components/demo/AppMigrationAfterMain.ts
new file mode 100644
index 000000000..74b1be1cf
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/AppMigrationAfterMain.ts
@@ -0,0 +1,10 @@
+// main.ts
+import {createApp} from 'vue'
+import App from './App.vue'
+
+// Add the necessary CSS
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
+
+const app = createApp(App)
+app.mount('#app')
diff --git a/apps/docs/src/docs/components/demo/AppMigrationBefore.ts b/apps/docs/src/docs/components/demo/AppMigrationBefore.ts
new file mode 100644
index 000000000..f9abdd643
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/AppMigrationBefore.ts
@@ -0,0 +1,18 @@
+// main.ts
+import {createApp} from 'vue'
+import {createBootstrap} from 'bootstrap-vue-next'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(
+  createBootstrap({
+    components: {
+      BButton: {
+        variant: 'primary',
+      },
+    },
+  })
+)
+
+app.mount('#app')
diff --git a/apps/docs/src/docs/components/demo/AppNoOrchestrator.vue b/apps/docs/src/docs/components/demo/AppNoOrchestrator.vue
new file mode 100644
index 000000000..8d76d85bb
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/AppNoOrchestrator.vue
@@ -0,0 +1,6 @@
+<template>
+  <BApp :no-orchestrator="true">
+    <!-- No automatic orchestrators will be created -->
+    <router-view />
+  </BApp>
+</template>
diff --git a/apps/docs/src/docs/components/demo/AppRTL.vue b/apps/docs/src/docs/components/demo/AppRTL.vue
new file mode 100644
index 000000000..c89780270
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/AppRTL.vue
@@ -0,0 +1,15 @@
+<template>
+  <BApp :rtl="rtlConfig">
+    <!-- Your application content -->
+    <router-view />
+  </BApp>
+</template>
+
+<script setup lang="ts">
+import {BApp} from 'bootstrap-vue-next'
+
+const rtlConfig = {
+  rtlInitial: true,
+  localeInitial: 'ar',
+}
+</script>
diff --git a/apps/docs/src/docs/components/demo/AppTeleport.vue b/apps/docs/src/docs/components/demo/AppTeleport.vue
new file mode 100644
index 000000000..2cc9bd317
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/AppTeleport.vue
@@ -0,0 +1,6 @@
+<template>
+  <BApp teleport-to="body">
+    <!-- Orchestrators will render in document.body -->
+    <router-view />
+  </BApp>
+</template>
diff --git a/apps/docs/src/docs/components/demo/AppToastConfig.vue b/apps/docs/src/docs/components/demo/AppToastConfig.vue
new file mode 100644
index 000000000..ff65d8e5b
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/AppToastConfig.vue
@@ -0,0 +1,6 @@
+<template>
+  <BApp :append-toast="true">
+    <!-- New toasts will be appended to the end of the list -->
+    <router-view />
+  </BApp>
+</template>
diff --git a/apps/docs/src/docs/components/demo/FormFileAccept.vue b/apps/docs/src/docs/components/demo/FormFileAccept.vue
new file mode 100644
index 000000000..3a8ecd24a
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/FormFileAccept.vue
@@ -0,0 +1,15 @@
+<template>
+  <BFormFile
+    v-model="file"
+    accept="image/*"
+  />
+  <div class="mt-3">
+    Files: <strong>{{ file?.name || 'No file selected' }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const file = ref<null | File>(null)
+</script>
diff --git a/apps/docs/src/docs/components/demo/FormFileAutofocus.vue b/apps/docs/src/docs/components/demo/FormFileAutofocus.vue
new file mode 100644
index 000000000..a1de33369
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/FormFileAutofocus.vue
@@ -0,0 +1,6 @@
+<template>
+  <BFormFile
+    class="mt-3"
+    autofocus
+  />
+</template>
diff --git a/apps/docs/src/docs/components/demo/FormFileLabel.vue b/apps/docs/src/docs/components/demo/FormFileLabel.vue
new file mode 100644
index 000000000..67fb75e86
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/FormFileLabel.vue
@@ -0,0 +1,9 @@
+<template>
+  <BFormFile
+    class="mt-3"
+    label="I am first!"
+  />
+  <BFormFile class="mt-3">
+    <template #label> I am second! </template>
+  </BFormFile>
+</template>
diff --git a/apps/docs/src/docs/components/demo/FormFileMultiple.vue b/apps/docs/src/docs/components/demo/FormFileMultiple.vue
new file mode 100644
index 000000000..e17b21cfe
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/FormFileMultiple.vue
@@ -0,0 +1,15 @@
+<template>
+  <BFormFile
+    v-model="files"
+    multiple
+  />
+  <div class="mt-3">
+    Files: <strong>{{ files?.map((file) => file.name).join(', ') || 'No files selected' }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const files = ref<null | File[]>(null)
+</script>
diff --git a/apps/docs/src/docs/components/demo/FormFileNoDrop.vue b/apps/docs/src/docs/components/demo/FormFileNoDrop.vue
new file mode 100644
index 000000000..a24d5d30d
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/FormFileNoDrop.vue
@@ -0,0 +1,15 @@
+<template>
+  <BFormFile
+    v-model="file"
+    no-drop
+  />
+  <div class="mt-3">
+    Files: <strong>{{ file?.name || 'No file selected' }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const file = ref<null | File>(null)
+</script>
diff --git a/apps/docs/src/docs/components/demo/FormFileSingle.vue b/apps/docs/src/docs/components/demo/FormFileSingle.vue
new file mode 100644
index 000000000..1320a4c2e
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/FormFileSingle.vue
@@ -0,0 +1,15 @@
+<template>
+  <BFormFile
+    v-model="file"
+    label="Hello!"
+  />
+  <div class="mt-3">
+    Files: <strong>{{ file?.name || 'No file selected' }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const file = ref<null | File>(null)
+</script>
diff --git a/apps/docs/src/docs/components/demo/FormFileSizing.vue b/apps/docs/src/docs/components/demo/FormFileSizing.vue
new file mode 100644
index 000000000..1e444cdd9
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/FormFileSizing.vue
@@ -0,0 +1,11 @@
+<template>
+  <BFormFile
+    class="mt-3"
+    size="sm"
+  />
+  <BFormFile class="mt-3" />
+  <BFormFile
+    class="mt-3"
+    size="lg"
+  />
+</template>
diff --git a/apps/docs/src/docs/components/demo/FormFileState.vue b/apps/docs/src/docs/components/demo/FormFileState.vue
new file mode 100644
index 000000000..17e558869
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/FormFileState.vue
@@ -0,0 +1,10 @@
+<template>
+  <BFormFile
+    class="mt-3"
+    :state="false"
+  />
+  <BFormFile
+    class="mt-3"
+    :state="true"
+  />
+</template>
diff --git a/apps/docs/src/docs/components/demo/FormSelectOptionNotes.vue b/apps/docs/src/docs/components/demo/FormSelectOptionNotes.vue
new file mode 100644
index 000000000..9ff619b67
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/FormSelectOptionNotes.vue
@@ -0,0 +1,27 @@
+<template>
+  <!-- #region template -->
+  <BFormSelect
+    v-model="selected"
+    :options="options"
+  >
+    <template #first>
+      <BFormSelectOption
+        value=""
+        disabled
+        >-- Please select an option --</BFormSelectOption
+      >
+    </template>
+  </BFormSelect>
+  <!-- #endregion template -->
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const selected = ref('')
+const options = [
+  {value: 'a', text: 'Option A'},
+  {value: 'b', text: 'Option B'},
+  {value: 'c', text: 'Option C'},
+]
+</script>
diff --git a/apps/docs/src/docs/components/demo/OrchestratorFilter.vue b/apps/docs/src/docs/components/demo/OrchestratorFilter.vue
new file mode 100644
index 000000000..dea0ceda8
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/OrchestratorFilter.vue
@@ -0,0 +1,11 @@
+<template>
+  <BOrchestrator :filter="customFilter" />
+</template>
+
+<script setup lang="ts">
+import {BOrchestrator, type OrchestratorArrayValue} from 'bootstrap-vue-next'
+
+const customFilter = (item: OrchestratorArrayValue) =>
+  // Only show high priority items
+  item.options?.keep !== false
+</script>
diff --git a/apps/docs/src/docs/components/demo/OrchestratorInternal.vue b/apps/docs/src/docs/components/demo/OrchestratorInternal.vue
new file mode 100644
index 000000000..29548b2ce
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/OrchestratorInternal.vue
@@ -0,0 +1,7 @@
+<template>
+  <BOrchestrator append-toast />
+</template>
+
+<script setup lang="ts">
+import {BOrchestrator} from 'bootstrap-vue-next'
+</script>
diff --git a/apps/docs/src/docs/components/demo/OrchestratorSelective.vue b/apps/docs/src/docs/components/demo/OrchestratorSelective.vue
new file mode 100644
index 000000000..5ec62de56
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/OrchestratorSelective.vue
@@ -0,0 +1,7 @@
+<template>
+  <!-- Only render toasts, no modals or popovers -->
+  <BOrchestrator
+    no-modals
+    no-popovers
+  />
+</template>
diff --git a/apps/docs/src/docs/components/demo/PlaceholderAnimation.vue b/apps/docs/src/docs/components/demo/PlaceholderAnimation.vue
new file mode 100644
index 000000000..407f9f665
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PlaceholderAnimation.vue
@@ -0,0 +1,11 @@
+<template>
+  <BPlaceholderCard
+    style="max-width: 20rem"
+    animation="glow"
+  />
+  <BPlaceholderCard
+    style="max-width: 20rem"
+    animation="wave"
+  />
+  <BPlaceholder animation="glow" />
+</template>
diff --git a/apps/docs/src/docs/components/demo/PlaceholderBasic.vue b/apps/docs/src/docs/components/demo/PlaceholderBasic.vue
new file mode 100644
index 000000000..aeaf5855d
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PlaceholderBasic.vue
@@ -0,0 +1,5 @@
+<template>
+  <BPlaceholder cols="7" />
+  <BPlaceholder width="65" />
+  <BPlaceholder cols="6" />
+</template>
diff --git a/apps/docs/src/docs/components/demo/PlaceholderButton.vue b/apps/docs/src/docs/components/demo/PlaceholderButton.vue
new file mode 100644
index 000000000..cbdf20197
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PlaceholderButton.vue
@@ -0,0 +1,3 @@
+<template>
+  <BPlaceholderButton cols="3" />
+</template>
diff --git a/apps/docs/src/docs/components/demo/PlaceholderCard.vue b/apps/docs/src/docs/components/demo/PlaceholderCard.vue
new file mode 100644
index 000000000..1abe3cb23
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PlaceholderCard.vue
@@ -0,0 +1,3 @@
+<template>
+  <BPlaceholderCard style="max-width: 20rem" />
+</template>
diff --git a/apps/docs/src/docs/components/demo/PlaceholderCardAdvanced.vue b/apps/docs/src/docs/components/demo/PlaceholderCardAdvanced.vue
new file mode 100644
index 000000000..bbfa35142
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PlaceholderCardAdvanced.vue
@@ -0,0 +1,21 @@
+<template>
+  <BPlaceholderCard
+    img-src="https://picsum.photos/1024/480/?image=1"
+    img-bottom
+    no-header
+  >
+    <template #footer> Footer </template>
+
+    <template #default>
+      <BPlaceholder />
+      <BPlaceholder
+        width="65"
+        variant="danger"
+      />
+      <BPlaceholder
+        cols="6"
+        variant="info"
+      />
+    </template>
+  </BPlaceholderCard>
+</template>
diff --git a/apps/docs/src/docs/components/demo/PlaceholderSizing.vue b/apps/docs/src/docs/components/demo/PlaceholderSizing.vue
new file mode 100644
index 000000000..a6ff2d86b
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PlaceholderSizing.vue
@@ -0,0 +1,5 @@
+<template>
+  <BPlaceholder size="lg" />
+  <BPlaceholder size="sm" />
+  <BPlaceholder size="xs" />
+</template>
diff --git a/apps/docs/src/docs/components/demo/PlaceholderTable.vue b/apps/docs/src/docs/components/demo/PlaceholderTable.vue
new file mode 100644
index 000000000..bf4d69b95
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PlaceholderTable.vue
@@ -0,0 +1,3 @@
+<template>
+  <BPlaceholderTable />
+</template>
diff --git a/apps/docs/src/docs/components/demo/PlaceholderTableAdvanced.vue b/apps/docs/src/docs/components/demo/PlaceholderTableAdvanced.vue
new file mode 100644
index 000000000..65c23fa31
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PlaceholderTableAdvanced.vue
@@ -0,0 +1,46 @@
+<template>
+  <BPlaceholderTable
+    columns="3"
+    rows="2"
+    show-footer
+    footer-variant="info"
+    header-size="lg"
+    footer-size="xs"
+    footer-columns="1"
+    header-columns="4"
+  >
+    <template #default>
+      <tbody>
+        <tr>
+          <td>
+            <BPlaceholder
+              size="lg"
+              variant="secondary"
+            />
+            <BPlaceholder
+              size="sm"
+              variant="secondary"
+            />
+            <BPlaceholder
+              size="xs"
+              variant="secondary"
+            />
+          </td>
+          <td>
+            <BPlaceholder variant="warning" />
+            <BPlaceholder
+              animation="wave"
+              variant="warning"
+            />
+          </td>
+          <td>
+            <BPlaceholder
+              animation="glow"
+              variant="danger"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </template>
+  </BPlaceholderTable>
+</template>
diff --git a/apps/docs/src/docs/components/demo/PlaceholderWidth.vue b/apps/docs/src/docs/components/demo/PlaceholderWidth.vue
new file mode 100644
index 000000000..2693ca531
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PlaceholderWidth.vue
@@ -0,0 +1,22 @@
+<template>
+  <BPlaceholder
+    width="30"
+    :cols="12"
+  />
+  <BPlaceholder
+    width="75%"
+    variant="danger"
+  />
+  <BPlaceholder
+    width="12"
+    variant="warning"
+  />
+  <BPlaceholder
+    :cols="6"
+    variant="info"
+  />
+  <BPlaceholder
+    :cols="8"
+    variant="info"
+  />
+</template>
diff --git a/apps/docs/src/docs/components/demo/PlaceholderWrapper.vue b/apps/docs/src/docs/components/demo/PlaceholderWrapper.vue
new file mode 100644
index 000000000..efd43b354
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/PlaceholderWrapper.vue
@@ -0,0 +1,59 @@
+<template>
+  <BPlaceholderWrapper :loading="loading">
+    <template #loading>
+      <BPlaceholderCard
+        style="max-width: 20rem"
+        no-footer
+      />
+    </template>
+    <BCard
+      title="Card Title"
+      img-src="https://picsum.photos/600/300/?image=25"
+      img-alt="Image"
+      img-top
+      tag="article"
+      style="max-width: 20rem"
+      class="mb-2"
+    >
+      <BCardText>
+        Some quick example text to build on the card title and make up the bulk of the card's
+        content.
+      </BCardText>
+      <BButton
+        href="#placeholder-wrapper"
+        variant="primary"
+        >Go somewhere</BButton
+      >
+    </BCard>
+  </BPlaceholderWrapper>
+  <BButton @click="startLoading">Restart</BButton>
+</template>
+
+<script setup lang="ts">
+import {onMounted, onUnmounted, ref, watchEffect} from 'vue'
+
+const loading = ref(false)
+let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+watchEffect(() => {
+  if (loading.value === true) {
+    timeoutId = setTimeout(() => {
+      loading.value = false
+      timeoutId = null
+    }, 5000)
+  }
+})
+
+onUnmounted(() => {
+  if (timeoutId !== null) {
+    clearTimeout(timeoutId)
+  }
+})
+
+const startLoading = () => {
+  if (loading.value === true) return
+  loading.value = true
+}
+
+onMounted(startLoading)
+</script>
diff --git a/apps/docs/src/docs/components/demo/SelectOverview.vue b/apps/docs/src/docs/components/demo/SelectOverview.vue
index b02023c5c..5fb61c98a 100644
--- a/apps/docs/src/docs/components/demo/SelectOverview.vue
+++ b/apps/docs/src/docs/components/demo/SelectOverview.vue
@@ -1,4 +1,3 @@
-```vue
 <template>
   <BFormSelect
     v-model="selected"
diff --git a/apps/docs/src/docs/components/demo/ToastAutoDismiss.vue b/apps/docs/src/docs/components/demo/ToastAutoDismiss.vue
new file mode 100644
index 000000000..bc5a6a71e
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ToastAutoDismiss.vue
@@ -0,0 +1,24 @@
+<template>
+  <BButton
+    @click="
+      create({
+        title: 'Counting down!',
+        variant: 'info',
+        pos: 'middle-center',
+        modelValue: 10000,
+        progressProps: {
+          variant: 'danger',
+        },
+        body: 'Watch me!',
+      })
+    "
+  >
+    Show
+  </BButton>
+</template>
+
+<script setup lang="ts">
+import {useToast} from 'bootstrap-vue-next'
+
+const {create} = useToast()
+</script>
diff --git a/apps/docs/src/docs/components/demo/ToastLink.vue b/apps/docs/src/docs/components/demo/ToastLink.vue
new file mode 100644
index 000000000..6e9d59b2b
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ToastLink.vue
@@ -0,0 +1,20 @@
+<template>
+  <BButton
+    @click="
+      create({
+        href: 'https://getbootstrap.com/',
+        modelValue: true,
+        target: '_blank',
+        body: 'I am a BLink',
+      })
+    "
+  >
+    Show
+  </BButton>
+</template>
+
+<script setup lang="ts">
+import {useToast} from 'bootstrap-vue-next'
+
+const {create} = useToast()
+</script>
diff --git a/apps/docs/src/docs/components/demo/ToastOverview.vue b/apps/docs/src/docs/components/demo/ToastOverview.vue
new file mode 100644
index 000000000..a41a3fc3c
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ToastOverview.vue
@@ -0,0 +1,15 @@
+<template>
+  <BToast
+    v-model="active"
+    variant="info"
+  >
+    <template #title> Title </template>
+    Body
+  </BToast>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const active = ref(true)
+</script>
diff --git a/apps/docs/src/docs/components/demo/ToastPositioning.vue b/apps/docs/src/docs/components/demo/ToastPositioning.vue
new file mode 100644
index 000000000..6b2481e2f
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ToastPositioning.vue
@@ -0,0 +1,39 @@
+<template>
+  <template
+    v-for="(pos, index) in values"
+    :key="index"
+  >
+    <BButton @click="values[index] = !values[index]">
+      {{ locations[index] }}
+    </BButton>
+    <Teleport to="body">
+      <div
+        :class="locations[index]"
+        class="toast-container position-fixed p-3"
+      >
+        <BToast v-model="values[index]">
+          <template #title> Title </template>
+          {{ locations[index] }}
+        </BToast>
+      </div>
+    </Teleport>
+  </template>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const locations = [
+  'top-0 start-0',
+  'top-0 start-50 translate-middle-x',
+  'top-0 end-0',
+  'top-50 start-0 translate-middle-y',
+  'top-50 start-50 translate-middle',
+  'top-50 end-0 translate-middle-y',
+  'bottom-0 start-0',
+  'bottom-0 start-50 translate-middle-x',
+  'bottom-0 end-0',
+]
+
+const values = ref(Array.from({length: locations.length}, () => false))
+</script>
diff --git a/apps/docs/src/docs/components/demo/ToastStatic.vue b/apps/docs/src/docs/components/demo/ToastStatic.vue
new file mode 100644
index 000000000..7e68ef92d
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ToastStatic.vue
@@ -0,0 +1,16 @@
+<template>
+  <BToast
+    v-model="active"
+    variant="info"
+  >
+    <template #title> Title </template>
+    Body
+  </BToast>
+  <BButton @click="active = !active">Toggle</BButton>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const active = ref(false)
+</script>
diff --git a/apps/docs/src/docs/components/form-file.md b/apps/docs/src/docs/components/form-file.md
index d2cf81673..639256317 100644
--- a/apps/docs/src/docs/components/form-file.md
+++ b/apps/docs/src/docs/components/form-file.md
@@ -14,155 +14,37 @@ The current variation is subject to change pre v1.0. The implementation may chan
 
 The default behavior is single file mode. While using single file mode the `modelValue` will be a single `File` object
 
-<HighlightCard>
-  <BFormFile v-model="first" label="Hello!" />
-  <div class="mt-3">
-    File: <strong>{{ first }}</strong>
-  </div>
-  <template #html>
-
-```vue
-<template>
-  <BFormFile v-model="file" label="Hello!" />
-  <div class="mt-3">
-    Files: <strong>{{ file }}</strong>
-  </div>
-</template>
-
-<script setup lang="ts">
-const file = ref<null | File>(null)
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/FormFileSingle.vue
 
 ## Multiple File Mode
 
 To toggle multiple file mode, simply set the `multiple` prop to `true`. While in multiple file mode, the `modelValue` will be a `File[]`, even if only one file is selected
 
-<HighlightCard>
-  <BFormFile v-model="second" multiple />
-  <div class="mt-3">
-    Files: <strong>{{ second }}</strong>
-  </div>
-  <template #html>
-
-```vue
-<template>
-  <BFormFile v-model="files" multiple />
-  <div class="mt-3">
-    Files: <strong>{{ files }}</strong>
-  </div>
-</template>
-
-<script setup lang="ts">
-const files = ref<null | File[]>(null)
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/FormFileMultiple.vue
 
 ## Limiting to certain file types
 
 You can limit the file types by setting the `accept` prop. The `accept` attribute is a csv list of acceptable types. This can be a `string` or `string[]`. If a `string[]` is inputted, it simply gets joined as a csv list
 
-<HighlightCard>
-  <BFormFile v-model="third" accept="image/*" />
-  <div class="mt-3">
-    File: <strong>{{ third }}</strong>
-  </div>
-  <template #html>
-
-```vue
-<template>
-  <BFormFile v-model="file" accept="image/*" />
-  <div class="mt-3">
-    Files: <strong>{{ file }}</strong>
-  </div>
-</template>
-
-<script setup lang="ts">
-const file = ref<null | File>(null)
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/FormFileAccept.vue
 
 ## Drag and Drop Support
 
 Drag and drop support uses the browsers default behavior. You can explicitly disable drag and drop by using the `noDrop` prop
 
-<HighlightCard>
-  <BFormFile v-model="fourth" no-drop />
-  <div class="mt-3">
-    File: <strong>{{ fourth }}</strong>
-  </div>
-  <template #html>
-
-```vue
-<template>
-  <BFormFile v-model="file" no-drop />
-  <div class="mt-3">
-    Files: <strong>{{ file }}</strong>
-  </div>
-</template>
-
-<script setup lang="ts">
-const file = ref<null | File>(null)
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/FormFileNoDrop.vue
 
 ## Sizing
 
 You can modify the size of the form control by using the `size` prop
 
-<HighlightCard>
-  <BFormFile class="mt-3" size="sm" />
-  <BFormFile class="mt-3" />
-  <BFormFile class="mt-3" size="lg" />
-
-<template #html>
-
-```vue-html
-<BFormFile class="mt-3" size="sm" />
-<BFormFile class="mt-3" />
-<BFormFile class="mt-3" size="lg" />
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/FormFileSizing.vue#template{vue-html}
 
 ## Label
 
 You can add a label above the input by using the `label` prop or the `label` slot
 
-<HighlightCard>
-  <BFormFile label="I am first!" />
-  <BFormFile>
-    <template #label>
-      I am second!
-    </template>
-  </BFormFile>
-
-<template #html>
-
-```vue-html
-<BFormFile class="mt-3" label="I am first!" />
-<BFormFile class="mt-3">
-  <template #label>
-    I am second!
-  </template>
-</BFormFile>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/FormFileLabel.vue#template{vue-html}
 
 ## Directory Mode
 
@@ -178,35 +60,13 @@ By adding the `directory` prop, a user can select directories instead of files
 
 If you set the `autofocus` prop to true, the input will be focused when the component is inserted
 
-<HighlightCard>
-  <BFormFile class="mt-3" autofocus />
-
-<template #html>
-
-```vue-html
-<BFormFile class="mt-3" autofocus />
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/FormFileAutofocus.vue#template{vue-html}
 
 ## Contextual State
 
 You can use the `state` prop to provide visual feedback on the state of the input
 
-<HighlightCard>
-  <BFormFile class="mt-3" :state="false" />
-  <BFormFile class="mt-3" :state="true" />
-
-<template #html>
-
-```vue-html
-<BFormFile class="mt-3" :state="false" />
-<BFormFile class="mt-3" :state="true" />
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/FormFileState.vue#template{vue-html}
 
 ## Modifying the file selection
 
@@ -224,12 +84,4 @@ The BFormFile exposes functions to control the component: `focus(), blur(), rese
 
 <script setup lang="ts">
 import {data} from '../../data/components/formFile.data'
-import ComponentReference from '../../components/ComponentReference.vue'
-import HighlightCard from '../../components/HighlightCard.vue'
-import {ref} from 'vue'
-
-const first = ref(null)
-const second = ref(null)
-const third = ref(null)
-const fourth = ref(null)
 </script>
diff --git a/apps/docs/src/docs/components/form-select.md b/apps/docs/src/docs/components/form-select.md
index 31dde3bf6..910b83ba7 100644
--- a/apps/docs/src/docs/components/form-select.md
+++ b/apps/docs/src/docs/components/form-select.md
@@ -47,13 +47,7 @@ _unselected_ state. On iOS this will cause the user not being able to select the
 iOS does not fire a change event in this case. It is therefore recommended providing a disabled
 option with an empty value as your first option.
 
-```vue-html
-<BFormSelect v-model="selected" :options="options">
-  <template #first>
-    <BFormSelectOption value="" disabled>-- Please select an option --</BFormSelectOption>
-  </template>
-</BFormSelect>
-```
+<<< FRAGMENT ./demo/FormSelectOptionNotes.vue#template{vue-html}
 
 See the [Vue select](https://v3.vuejs.org/guide/forms.html#select) documentation for more details.
 
diff --git a/apps/docs/src/docs/components/orchestrator.md b/apps/docs/src/docs/components/orchestrator.md
index f8c6de347..36fc0508b 100644
--- a/apps/docs/src/docs/components/orchestrator.md
+++ b/apps/docs/src/docs/components/orchestrator.md
@@ -23,62 +23,17 @@ The `BOrchestrator` component manages the rendering and positioning of dynamic c
 
 </HighlightCard>
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BOrchestrator append-toast />
-</template>
-
-<script setup lang="ts">
-import {BOrchestrator} from 'bootstrap-vue-next'
-</script>
-```
-
-</template>
-</HighlightCard>
+<<< DEMO ./demo/OrchestratorInternal.vue
 
 ## Advanced Usage
 
 ### Custom Filtering
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <BOrchestrator :filter="customFilter" />
-</template>
-
-<script setup lang="ts">
-import {BOrchestrator} from 'bootstrap-vue-next'
-import type {OrchestratorArrayValue} from 'bootstrap-vue-next'
-
-const customFilter = (item: OrchestratorArrayValue) => {
-  // Only show high-priority items
-  return item.options?.priority === 'high'
-}
-</script>
-```
-
-</template>
-</HighlightCard>
+<<< DEMO ./demo/OrchestratorFilter.vue
 
 ### Selective Component Types
 
-<HighlightCard>
-<template #html>
-
-```vue
-<template>
-  <!-- Only render toasts, no modals or popovers -->
-  <BOrchestrator no-modals no-popovers />
-</template>
-```
-
-</template>
-</HighlightCard>
+<<< FRAGMENT ./demo/OrchestratorSelective.vue#template{vue-html}
 
 ## Related Components
 
diff --git a/apps/docs/src/docs/components/placeholder.md b/apps/docs/src/docs/components/placeholder.md
index 52fdb4447..f8429a543 100644
--- a/apps/docs/src/docs/components/placeholder.md
+++ b/apps/docs/src/docs/components/placeholder.md
@@ -10,43 +10,13 @@ Placeholders are components that indicate that something may still be loading.
 
 At the placeholder core, you have the `BPlaceholder` component:
 
-<HighlightCard>
-  <BPlaceholder />
-  <BPlaceholder width="65" variant="danger" />
-  <BPlaceholder cols="6" variant="info" />
-  <template #html>
-
-```vue-html
-<BPlaceholder cols="7" />
-<BPlaceholder width="65" />
-<BPlaceholder cols="6" />
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PlaceholderBasic.vue#template{vue-html}
 
 ## Width
 
 You can adjust the width using props `width` and `cols`. Cols is a number value 1-12, whereas width is a percentage. Width takes priority over cols.
 
-<HighlightCard>
-  <BPlaceholder width="30" cols="12" />
-  <BPlaceholder width="75%" variant="danger" />
-  <BPlaceholder width="12" variant="warning" />
-  <BPlaceholder :cols="6" variant="info" />
-  <BPlaceholder cols="8" variant="info" />
-  <template #html>
-
-```vue-html
-<BPlaceholder width="30" cols="12" />
-<BPlaceholder width="75%" variant="danger" />
-<BPlaceholder width="12" variant="warning" />
-<BPlaceholder :cols="6" variant="info" />
-<BPlaceholder cols="8" variant="info" />
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PlaceholderWidth.vue#template{vue-html}
 
 ## Placeholder Animations
 
@@ -54,39 +24,13 @@ Bootstrap supports two types of animations, `wave` and `glow`.
 
 - Note: when using `BPlaceholderCard`, the image does not inherit an animation
 
-<HighlightCard>
-  <BPlaceholderCard style="max-width: 20rem; " animation="glow" class="mb-3" />
-  <BPlaceholderCard style="max-width: 20rem; " animation="wave" class="mb-3" />
-  <BPlaceholder animation="glow" />
-  <template #html>
-
-```vue-html
-<BPlaceholderCard style="max-width: 20rem; " animation="glow" />
-<BPlaceholderCard style="max-width: 20rem; " animation="wave" />
-<BPlaceholder animation="glow" />
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PlaceholderAnimation.vue#template{vue-html}
 
 ## Sizing
 
 You can adjust the sizing of a placeholder by using the `size` prop. Acceptable values are 'xs', 'sm', or 'lg'.
 
-<HighlightCard>
-  <BPlaceholder size="lg" />
-  <BPlaceholder size="sm" />
-  <BPlaceholder size="xs" />
-  <template #html>
-
-```vue-html
-<BPlaceholder size="lg" />
-<BPlaceholder size="sm" />
-<BPlaceholder size="xs" />
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PlaceholderSizing.vue#template{vue-html}
 
 ## Helper Components
 
@@ -96,121 +40,25 @@ You can adjust the sizing of a placeholder by using the `size` prop. Acceptable
 
 The `BPlaceholderWrapper` is a renderless component that picks between a 'loading' component, and a 'finished' component. It is useful when you have to wait for loading to finish, before rendering the actual content. Depending on the use case, you may prefer to use [Suspense](https://vuejs.org/guide/built-ins/suspense.html) instead.
 
-<HighlightCard>
-  <BPlaceholderWrapper :loading="loading">
-    <template #loading>
-      <BPlaceholderCard style="max-width: 20rem;" no-footer />
-    </template>
-    <BCard
-      title="Card Title"
-      img-src="https://picsum.photos/600/300/?image=25"
-      img-alt="Image"
-      img-top
-      tag="article"
-      style="max-width: 20rem;"
-      class="mb-2"
-    >
-      <BCardText>
-        Some quick example text to build on the card title and make up the bulk of the card's content.
-      </BCardText>
-      <BButton href="#placeholder-wrapper" variant="primary">Go somewhere</BButton>
-    </BCard>
-  </BPlaceholderWrapper>
-  <BButton @click="startLoading">Restart</BButton>
-  <template #html>
-
-```vue
-<template>
-  <BPlaceholderWrapper :loading="loading">
-    <template #loading>
-      <BPlaceholderCard style="max-width: 20rem;" no-footer />
-    </template>
-    <BCard
-      title="Card Title"
-      img-src="https://picsum.photos/600/300/?image=25"
-      img-alt="Image"
-      img-top
-      tag="article"
-      style="max-width: 20rem;"
-      class="mb-2"
-    >
-      <BCardText>
-        Some quick example text to build on the card title and make up the bulk of the card's
-        content.
-      </BCardText>
-      <BButton href="#placeholder-wrapper" variant="primary">Go somewhere</BButton>
-    </BCard>
-  </BPlaceholderWrapper>
-  <BButton @click="startLoading">Restart</BButton>
-</template>
-
-<script setup lang="ts">
-const loading = ref(false)
-
-watchEffect(() => {
-  if (loading.value === true) {
-    setTimeout(() => {
-      loading.value = false
-    }, 5000)
-  }
-})
-
-const startLoading = () => {
-  if (loading.value === true) return
-  loading.value = true
-}
-
-onMounted(startLoading)
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PlaceholderWrapper.vue
 
 ### Placeholder Buttons
 
 You can easily render a placeholder that has the button styling by using `BPlaceholderButton`.
 
-<HighlightCard>
-  <BPlaceholderButton cols="3" />
-  <template #html>
-
-```vue-html
-<BPlaceholderButton cols="3" />
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PlaceholderButton.vue#template{vue-html}
 
 ### Placeholder Cards
 
 Placeholders have built-in support for rendering a placeholder card with `BPlaceholderCard`.
 
-<HighlightCard>
-  <BPlaceholderCard style="max-width: 20rem" />
-  <template #html>
-
-```vue-html
-<BPlaceholderCard style="max-width: 20rem" />
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PlaceholderCard.vue#template{vue-html}
 
 ### Placeholder Tables
 
 You can also render a full placeholder table with `BPlaceholderTable`.
 
-<HighlightCard>
-  <BPlaceholderTable />
-  <template #html>
-
-```vue-html
-<BPlaceholderTable />
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PlaceholderTable.vue#template{vue-html}
 
 ### Advanced Helper Component Usage
 
@@ -224,35 +72,7 @@ Each section of the `BPlaceholderCard` exposes its slot elements, so you can eas
 
 The footer also exposes some props that you can use to adjust the behavior of a button. Most notably prop `noButton`. If set to true, it will convert it to a basic placeholder appearance. Alternatively, you can use the `noFooter` prop to remove it altogether.
 
-<HighlightCard>
-  <BPlaceholderCard img-src="https://picsum.photos/1024/480/?image=1" img-bottom no-header>
-    <template #footer>
-      Footer
-    </template>
-    <template #default>
-      <BPlaceholder />
-      <BPlaceholder width="65" variant="danger" />
-      <BPlaceholder cols="6" variant="info" />
-    </template>
-  </BPlaceholderCard>
-  <template #html>
-
-```vue-html
-<BPlaceholderCard img-src="https://picsum.photos/1024/480/?image=1" img-bottom no-header>
-  <template #footer>
-    Footer
-  </template>
-
-  <template #default>
-    <BPlaceholder />
-    <BPlaceholder width="65" variant="danger" />
-    <BPlaceholder cols="6" variant="info" />
-  </template>
-</BPlaceholderCard>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PlaceholderCardAdvanced.vue#template{vue-html}
 
 #### Advanced Tables
 
@@ -262,95 +82,10 @@ You can adjust the number of columns and rows using props `columns` and `rows` r
 
 Optionally, you can manually adjust any scope of the table using slots. The following slots are available: `thead`, `default`, and `tfoot`. Do note that the slots wrap the **entire** table scope, slot `thead` is the entire thead, and slot `default` is the entire tbody, so you will likely need to manually wrap your slot usages in these elements if you plan on using them.
 
-<HighlightCard>
-  <BPlaceholderTable
-    columns="3"
-    rows="2"
-    show-footer
-    footer-variant="info"
-    header-size="lg"
-    footer-size="xs"
-    footer-columns="1"
-    header-columns="4"
-  >
-    <template #default>
-      <tbody>
-          <tr>
-            <td>
-              <BPlaceholder size="lg" variant="secondary" />
-              <BPlaceholder size="sm" variant="secondary" />
-              <BPlaceholder size="xs" variant="secondary" />
-            </td>
-            <td>
-              <BPlaceholder variant="warning" />
-              <BPlaceholder animation="wave" variant="warning" />
-            </td>
-            <td>
-              <BPlaceholder animation="glow" variant="danger" />
-            </td>
-          </tr>
-      </tbody>
-    </template>
-  </BPlaceholderTable>
-  <template #html>
-
-```vue-html
-<BPlaceholderTable
-  columns="3"
-  rows="2"
-  show-footer
-  footer-variant="info"
-  header-size="lg"
-  footer-size="xs"
-  footer-columns="1"
-  header-columns="4"
->
-  <template #default>
-    <tbody>
-      <tr>
-        <td>
-          <BPlaceholder size="lg" variant="secondary" />
-          <BPlaceholder size="sm" variant="secondary" />
-          <BPlaceholder size="xs" variant="secondary" />
-        </td>
-        <td>
-          <BPlaceholder variant="warning" />
-          <BPlaceholder animation="wave" variant="warning" />
-        </td>
-        <td>
-          <BPlaceholder animation="glow" variant="danger" />
-        </td>
-      </tr>
-    </tbody>
-  </template>
-</BPlaceholderTable>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/PlaceholderTableAdvanced.vue#template{vue-html}
 
 <ComponentReference :data="data" />
 
 <script setup lang="ts">
 import {data} from '../../data/components/placeholder.data'
-import ComponentReference from '../../components/ComponentReference.vue'
-import HighlightCard from '../../components/HighlightCard.vue'
-import {ref, onMounted, watchEffect} from 'vue'
-
-const loading = ref(false)
-
-watchEffect(() => {
-  if(loading.value === true){
-    setTimeout(() => {
-      loading.value = false
-    }, 5000)
-  }
-})
-
-const startLoading = () => {
-  if(loading.value === true) return
-  loading.value = true
-}
-
-onMounted(startLoading)
 </script>
diff --git a/apps/docs/src/docs/components/toast.md b/apps/docs/src/docs/components/toast.md
index 6fb031063..728b61564 100644
--- a/apps/docs/src/docs/components/toast.md
+++ b/apps/docs/src/docs/components/toast.md
@@ -14,30 +14,7 @@ This section only refers to using the raw component variation. Oftentimes, `Toas
 
 The component variation is shown by using the `v-model` like so
 
-<HighlightCard>
-  <BToast v-model="active" variant="info">
-    <template #title>
-      Title
-    </template>
-      Body
-  </BToast>
-  <template #html>
-
-```vue
-<template>
-  <BToast v-model="active" variant="info">
-    <template #title> Title </template>
-    Body
-  </BToast>
-</template>
-
-<script setup lang="ts">
-const active = ref(false)
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/ToastOverview.vue
 
 By default Toasts are rendered in place. You can use Vue's `Teleport` to change the location, commonly to `body`
 
@@ -45,95 +22,13 @@ By default Toasts are rendered in place. You can use Vue's `Teleport` to change
 
 In combination with `Teleport`, you can render Toasts above the page, and in specific locations. You will need to create a wrapper component around said Toast to declare its location
 
-<HighlightCard>
-  <template
-    v-for="(pos, index) in values"
-    :key="index"
-  >
-    <BButton
-      @click="values[index] = !values[index]"
-    >
-      {{ locations[index] }}
-    </BButton>
-    <Teleport to="body">
-      <div
-        :class="locations[index]"
-        class="toast-container position-fixed p-3"
-      >
-        <BToast v-model="values[index]">
-          <template #title>
-            Title
-          </template>
-          {{ locations[index] }}
-        </BToast>
-      </div>
-    </Teleport>
-  </template>
-  <template #html>
-
-```vue
-<template>
-  <template v-for="(pos, index) in values" :key="index">
-    <BButton @click="values[index] = !values[index]">
-      {{ locations[index] }}
-    </BButton>
-    <Teleport to="body">
-      <div :class="locations[index]" class="toast-container position-fixed p-3">
-        <BToast v-model="values[index]">
-          <template #title> Title </template>
-          {{ locations[index] }}
-        </BToast>
-      </div>
-    </Teleport>
-  </template>
-</template>
-
-<script setup lang="ts">
-const locations = [
-  'top-0 start-0',
-  'top-0 start-50 translate-middle-x',
-  'top-0 end-0',
-  'top-50 start-0 translate-middle-y',
-  'top-50 start-50 translate-middle',
-  'top-50 end-0 translate-middle-y',
-  'bottom-0 start-0',
-  'bottom-0 start-50 translate-middle-x',
-  'bottom-0 end-0',
-]
-
-const values = ref(Array.from({length: locations.length}, () => false))
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/ToastPositioning.vue
 
 ## Static placement
 
 You can place toasts in static placements, and with more control by using them directly. Although, it is more uncommon
 
-<HighlightCard>
-  <BToast v-model="active" variant="info">
-    <template #title>
-      Title
-    </template>
-      Body
-  </BToast>
-  <BButton @click="active = !active">Toggle</BButton>
-  <template #html>
-
-```vue-html
-<BToast v-model="active" variant="info">
-  <template #title>
-    Title
-  </template>
-    Body
-</BToast>
-<BButton @click="active = !active">Toggle</BButton>
-```
-
-</template>
-</HighlightCard>
+<<< DEMO ./demo/ToastStatic.vue
 
 ## Auto-dismissing Toasts
 
@@ -141,50 +36,7 @@ To create a `BToast` that dismisses automatically after a specified duration, se
 
 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.
 
-<HighlightCard>
-  <BButton
-    @click="
-      create({
-        title: 'Counting down!',
-        variant: 'info',
-        pos: 'middle-center',
-        modelValue: 10000,
-        progressProps: {
-          variant: 'danger',
-        },
-        body: 'Watch me!'
-      })
-    "
-  >
-    Show
-  </BButton>
-
-<template #html>
-
-```vue
-<template>
-  <BButton
-    @click="
-      create({
-        title: 'Counting down!',
-        variant: 'info',
-        pos: 'middle-center',
-        modelValue: 10000,
-        progressProps: {
-          variant: 'danger',
-        },
-        body: 'Watch me!',
-      })
-    "
-  >
-    Show
-  </BButton>
-</template>
-```
-
-  </template>
-
-</HighlightCard>
+<<< DEMO ./demo/ToastAutoDismiss.vue
 
 ### ProgressBar Integration
 
@@ -194,37 +46,7 @@ As you may have noticed in that example, there was a built-in progress bar. This
 
 `Toast` can accept `BLink` props which will modify its behavior
 
-<HighlightCard>
-  <BButton @click="create({href: 'https://getbootstrap.com/', modelValue: true, target: '_blank', body: 'I am a BLink'})">
-    Show
-  </BButton>
-
-<template #html>
-
-```vue
-<template>
-  <BButton
-    @click="
-      create({
-        href: 'https://getbootstrap.com/',
-        modelValue: true,
-        target: '_blank',
-        body: 'I am a BLink',
-      })
-    "
-  >
-    Show
-  </BButton>
-</template>
-
-<script setup lang="ts">
-const {create} = useToast()
-</script>
-```
-
-  </template>
-
-</HighlightCard>
+<<< DEMO ./demo/ToastLink.vue
 
 ## Programmatically Control
 
@@ -240,27 +62,4 @@ If you just need a single simple message to appear along the bottom or top of th
 
 <script setup lang="ts">
 import {data} from '../../data/components/toast.data'
-import ComponentReference from '../../components/ComponentReference.vue'
-import {useToast} from 'bootstrap-vue-next/composables/useToast'
-import HighlightCard from '../../components/HighlightCard.vue'
-import {ref, h, onMounted} from 'vue'
-
-const {create, toasts} = useToast()
-
-const active = ref(true)
-
-const locations = [
-  'top-0 start-0',
-  'top-0 start-50 translate-middle-x',
-  'top-0 end-0',
-  'top-50 start-0 translate-middle-y',
-  'top-50 start-50 translate-middle',
-  'top-50 end-0 translate-middle-y',
-  'bottom-0 start-0',
-  'bottom-0 start-50 translate-middle-x',
-  'bottom-0 end-0',
-]
-
-const values = ref(Array.from({length: locations.length}, () => false))
-
 </script>

From 8d9cc88f50891f3e111944a00c1d21031c11b1f5 Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Tue, 21 Oct 2025 19:22:05 -0500
Subject: [PATCH 4/7] refactor: select and unselect row methods in BTable
 (#2875)

---
 .../bootstrap-vue-next/src/components/BTable/BTable.vue   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index 28f015aba..d4c87ddb7 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -25,8 +25,8 @@
         name="row-details"
         v-bind="scope"
         :fields="computedFields"
-        :select-row="(index = scope.index) => exposedSelectableUtilities.selectRow(index)"
-        :unselect-row="(index = scope.index) => exposedSelectableUtilities.unselectRow(index)"
+        :select-row="() => exposedSelectableUtilities.selectRow(scope.index)"
+        :unselect-row="() => exposedSelectableUtilities.unselectRow(scope.index)"
         :row-selected="exposedSelectableUtilities.isRowSelected(scope.index)"
       />
     </template>
@@ -43,8 +43,8 @@
       <slot
         :name
         v-bind="scope"
-        :select-row="(index = scope.index) => exposedSelectableUtilities.selectRow(index)"
-        :unselect-row="(index = scope.index) => exposedSelectableUtilities.unselectRow(index)"
+        :select-row="() => exposedSelectableUtilities.selectRow(scope.index)"
+        :unselect-row="() => exposedSelectableUtilities.unselectRow(scope.index)"
         :row-selected="exposedSelectableUtilities.isRowSelected(scope.index)"
       />
     </template>

From 52fd18b99eb4968d350d8b9ce47530f1f8480b5b Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Tue, 21 Oct 2025 17:22:57 -0700
Subject: [PATCH 5/7] docs: prevent href=# links from scrolling to top (#2861)

---
 .../docs/.vitepress/plugins/demo-container.ts |  12 +-
 apps/docs/.vitepress/theme/Layout.vue         |   2 +-
 .../docs/components/demo/AlertLinkColors.vue  |  16 +--
 .../components/demo/ButtonElementType.vue     |   2 +-
 .../docs/components/demo/CardHeaderFooter.vue |   4 +-
 .../docs/components/demo/CardKitchenSink.vue  |   4 +-
 .../src/docs/components/demo/CardOverview.vue |   2 +-
 .../src/docs/components/demo/CardParts.vue    |   2 +-
 .../docs/components/demo/CardTextVariants.vue |   2 +-
 .../components/demo/DropdownBlockMenu.vue     |   6 +-
 .../components/demo/DropdownBlockToggle.vue   |  12 +-
 .../components/demo/DropdownButtonContent.vue |   8 +-
 .../components/demo/DropdownColorVariants.vue |  18 +--
 .../docs/components/demo/DropdownDropup.vue   |   6 +-
 .../docs/components/demo/DropdownFloating.vue |   6 +-
 .../components/demo/DropdownHiddenCaret.vue   |   6 +-
 .../components/demo/DropdownMenuAlignment.vue |  24 ++--
 .../components/demo/DropdownMenuOffset.vue    |  12 +-
 .../docs/components/demo/DropdownNoFlip.vue   |   6 +-
 .../components/demo/DropdownPlacement.vue     |  24 ++--
 .../components/demo/DropdownSplitButton.vue   |   6 +-
 .../demo/DropdownSplitButtonLink.vue          |   6 +-
 .../demo/DropdownSplitButtonVariant.vue       |   6 +-
 .../components/demo/ListGroupActionable.vue   |   4 +-
 .../demo/ListGroupActionableVariants.vue      |  18 +--
 .../docs/components/demo/ListGroupCard.vue    |  12 +-
 .../docs/components/demo/ListGroupCustom.vue  |   6 +-
 .../docs/components/demo/ModalVariants.vue    |  48 +++----
 .../src/docs/components/demo/NavAlignment.vue |  16 ++-
 .../src/docs/components/demo/NavDropdown.vue  |   8 +-
 .../docs/src/docs/components/demo/NavFill.vue |  16 ++-
 .../src/docs/components/demo/NavJustified.vue |  16 ++-
 .../src/docs/components/demo/NavOverview.vue  |  16 ++-
 .../docs/src/docs/components/demo/NavPill.vue |  16 ++-
 .../src/docs/components/demo/NavPillCard.vue  |  14 +-
 .../src/docs/components/demo/NavPlainCard.vue |  14 +-
 .../src/docs/components/demo/NavSmall.vue     |  16 ++-
 apps/docs/src/docs/components/demo/NavTab.vue |  16 ++-
 .../src/docs/components/demo/NavTabCard.vue   |  14 +-
 .../src/docs/components/demo/NavVertical.vue  |  16 ++-
 .../docs/components/demo/NavbarBrandImage.vue |   2 +-
 .../components/demo/NavbarBrandImageText.vue  |   2 +-
 .../docs/components/demo/NavbarBrandLink.vue  |   2 +-
 .../components/demo/NavbarItemDropdown.vue    |  14 +-
 .../docs/components/demo/NavbarOffcanvas.vue  |  18 +--
 .../docs/components/demo/NavbarOverview.vue   |  18 +--
 .../src/docs/components/demo/NavbarScroll.vue |  18 +--
 .../src/docs/components/demo/NavbarToggle.vue |   8 +-
 .../components/demo/PopoverCustomClass.vue    |   2 +-
 .../src/docs/components/demo/TabsEmpty.vue    |   2 +-
 .../components/demo/TooltipCustomClass.vue    |   4 +-
 apps/docs/src/docs/migration-guide.md         |  10 ++
 packages/bootstrap-vue-next/CHANGELOG.md      |  61 ++++-----
 packages/nuxt/CHANGELOG.md                    | 120 ++++++++----------
 54 files changed, 413 insertions(+), 326 deletions(-)

diff --git a/apps/docs/.vitepress/plugins/demo-container.ts b/apps/docs/.vitepress/plugins/demo-container.ts
index d52937cab..b17d4697a 100644
--- a/apps/docs/.vitepress/plugins/demo-container.ts
+++ b/apps/docs/.vitepress/plugins/demo-container.ts
@@ -42,6 +42,14 @@ export const demoContainer = (md: MarkdownRenderer, srcDir: string) => {
     const {filepath, extension, region, lines, lang, title} = rawPathToToken(rawPath)
     const component = isDemo ? `<${title.substring(0, title.indexOf('.'))}/>` : ''
 
+    // Generate kebab-case ID from filename (without extension)
+    const dotIndex = title.lastIndexOf('.')
+    const filename = (dotIndex === -1 ? title : title.substring(0, dotIndex)).trim()
+    const kebabCaseId = filename
+      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+      .replace(/[\s_]+/g, '-')
+      .toLowerCase()
+
     // Resolve path early so it can be used in the prefix token
     const {realPath, path: _path} = state.env as MarkdownEnv
     const resolvedPath = path.resolve(path.dirname(realPath ?? _path), filepath)
@@ -62,12 +70,12 @@ export const demoContainer = (md: MarkdownRenderer, srcDir: string) => {
     state.line += 1
 
     const prefixToken = state.push('html_block', '', 0)
-    prefixToken.content = `<HighlightCard full-file="${encodedFullFile}" title="${title}">${component}<template #html>`
+    prefixToken.content = `<HighlightCard id="${kebabCaseId}" full-file="${encodedFullFile}" title="${title}">${component}<template #html>`
 
     const codeToken = state.push('fence', 'code', 0)
     codeToken.info = `${lang || extension}${lines ? `{${lines}}` : ''}${title ? `[${title}]` : ''}`
 
-    // @ts-expect-error - VitePress fence token type doesn't include src property
+    // @ts-expect-error - property 'src' does not exist on type 'Token'
     codeToken.src = [resolvedPath, region.slice(1)]
     codeToken.markup = '```'
     codeToken.map = [startLine, startLine + 1]
diff --git a/apps/docs/.vitepress/theme/Layout.vue b/apps/docs/.vitepress/theme/Layout.vue
index 1f3d79026..0b7fd1749 100644
--- a/apps/docs/.vitepress/theme/Layout.vue
+++ b/apps/docs/.vitepress/theme/Layout.vue
@@ -220,7 +220,7 @@ const {current: activeId, list: items} = useScrollspy(content, target, {
     ':scope h4:not([class*="demo"] *):not(.card-body *)',
     ':scope h5:not([class*="demo"] *):not(.card-body *)',
     ':scope h6:not([class*="demo"] *):not(.card-body *)',
-    ':scope > div > [id]',
+    ':scope > div > [id]:not(.card)',
     '#component-reference',
     '.component-reference h3',
   ].join(', '),
diff --git a/apps/docs/src/docs/components/demo/AlertLinkColors.vue b/apps/docs/src/docs/components/demo/AlertLinkColors.vue
index 7d94aa807..b6c126128 100644
--- a/apps/docs/src/docs/components/demo/AlertLinkColors.vue
+++ b/apps/docs/src/docs/components/demo/AlertLinkColors.vue
@@ -4,7 +4,7 @@
     :model-value="true"
     variant="primary"
     ><a
-      href="#"
+      href="#alert-link-colors"
       class="alert-link"
       >Primary Alert</a
     ></BAlert
@@ -13,7 +13,7 @@
     :model-value="true"
     variant="secondary"
     ><a
-      href="#"
+      href="#alert-link-colors"
       class="alert-link"
       >Secondary Alert</a
     ></BAlert
@@ -22,7 +22,7 @@
     :model-value="true"
     variant="success"
     ><a
-      href="#"
+      href="#alert-link-colors"
       class="alert-link"
       >Success Alert</a
     ></BAlert
@@ -31,7 +31,7 @@
     :model-value="true"
     variant="danger"
     ><a
-      href="#"
+      href="#alert-link-colors"
       class="alert-link"
       >Danger Alert</a
     ></BAlert
@@ -40,7 +40,7 @@
     :model-value="true"
     variant="warning"
     ><a
-      href="#"
+      href="#alert-link-colors"
       class="alert-link"
       >Warning Alert</a
     ></BAlert
@@ -49,7 +49,7 @@
     :model-value="true"
     variant="info"
     ><a
-      href="#"
+      href="#alert-link-colors"
       class="alert-link"
       >Info Alert</a
     ></BAlert
@@ -58,7 +58,7 @@
     :model-value="true"
     variant="light"
     ><a
-      href="#"
+      href="#alert-link-colors"
       class="alert-link"
       >Light Alert</a
     ></BAlert
@@ -67,7 +67,7 @@
     :model-value="true"
     variant="dark"
     ><a
-      href="#"
+      href="#alert-link-colors"
       class="alert-link"
       >Dark Alert</a
     ></BAlert
diff --git a/apps/docs/src/docs/components/demo/ButtonElementType.vue b/apps/docs/src/docs/components/demo/ButtonElementType.vue
index 200425ddc..844c94d87 100644
--- a/apps/docs/src/docs/components/demo/ButtonElementType.vue
+++ b/apps/docs/src/docs/components/demo/ButtonElementType.vue
@@ -2,7 +2,7 @@
   <div class="d-flex gap-2">
     <!-- #region template -->
     <BButton>I am a Button</BButton>
-    <BButton href="#">I am a Link</BButton>
+    <BButton href="#button-element-type">I am a Link</BButton>
     <!-- #endregion template -->
   </div>
 </template>
diff --git a/apps/docs/src/docs/components/demo/CardHeaderFooter.vue b/apps/docs/src/docs/components/demo/CardHeaderFooter.vue
index b21a028f7..c9ae97f6a 100644
--- a/apps/docs/src/docs/components/demo/CardHeaderFooter.vue
+++ b/apps/docs/src/docs/components/demo/CardHeaderFooter.vue
@@ -10,7 +10,7 @@
     >
       <BCardText>Header and footers using props.</BCardText>
       <BButton
-        href="#"
+        href="#card-header-footer"
         variant="primary"
         >Go somewhere</BButton
       >
@@ -25,7 +25,7 @@
       </template>
       <BCardText>Header and footers using slots.</BCardText>
       <BButton
-        href="#"
+        href="#card-header-footer"
         variant="primary"
         >Go somewhere</BButton
       >
diff --git a/apps/docs/src/docs/components/demo/CardKitchenSink.vue b/apps/docs/src/docs/components/demo/CardKitchenSink.vue
index 0bf6c36ed..a62ba62df 100644
--- a/apps/docs/src/docs/components/demo/CardKitchenSink.vue
+++ b/apps/docs/src/docs/components/demo/CardKitchenSink.vue
@@ -25,12 +25,12 @@
     </BListGroup>
     <BCardBody>
       <a
-        href="#"
+        href="#card-kitchen-sink"
         class="card-link"
         >Card link</a
       >
       <a
-        href="#"
+        href="#card-kitchen-sink"
         class="card-link"
         >Another link</a
       >
diff --git a/apps/docs/src/docs/components/demo/CardOverview.vue b/apps/docs/src/docs/components/demo/CardOverview.vue
index 558d03ead..d17d29448 100644
--- a/apps/docs/src/docs/components/demo/CardOverview.vue
+++ b/apps/docs/src/docs/components/demo/CardOverview.vue
@@ -12,7 +12,7 @@
       Some quick example text to build on the card title and make up the bulk of the card's content.
     </BCardText>
     <BButton
-      href="#"
+      href="#card-overview"
       variant="primary"
       >Go somewhere</BButton
     >
diff --git a/apps/docs/src/docs/components/demo/CardParts.vue b/apps/docs/src/docs/components/demo/CardParts.vue
index baca61c91..49edb1e87 100644
--- a/apps/docs/src/docs/components/demo/CardParts.vue
+++ b/apps/docs/src/docs/components/demo/CardParts.vue
@@ -12,7 +12,7 @@
       Some quick example text to build on the card title and make up the bulk of the card's content.
     </BCardText>
     <BButton
-      href="#"
+      href="#card-parts"
       variant="primary"
       >Go somewhere</BButton
     >
diff --git a/apps/docs/src/docs/components/demo/CardTextVariants.vue b/apps/docs/src/docs/components/demo/CardTextVariants.vue
index b7797d329..8acfa66dd 100644
--- a/apps/docs/src/docs/components/demo/CardTextVariants.vue
+++ b/apps/docs/src/docs/components/demo/CardTextVariants.vue
@@ -7,7 +7,7 @@
   >
     <BCardText> With supporting text below as a natural lead-in to additional content. </BCardText>
     <BButton
-      href="#"
+      href="#card-text-variants"
       variant="primary"
       >Go somewhere</BButton
     >
diff --git a/apps/docs/src/docs/components/demo/DropdownBlockMenu.vue b/apps/docs/src/docs/components/demo/DropdownBlockMenu.vue
index 368b5d3a6..d1dea1afc 100644
--- a/apps/docs/src/docs/components/demo/DropdownBlockMenu.vue
+++ b/apps/docs/src/docs/components/demo/DropdownBlockMenu.vue
@@ -6,9 +6,9 @@
     variant="primary"
     menu-class="w-100"
   >
-    <BDropdownItem href="#">Action</BDropdownItem>
-    <BDropdownItem href="#">Another action</BDropdownItem>
-    <BDropdownItem href="#">Something else here</BDropdownItem>
+    <BDropdownItem>Action</BDropdownItem>
+    <BDropdownItem>Another action</BDropdownItem>
+    <BDropdownItem>Something else here</BDropdownItem>
   </BDropdown>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/DropdownBlockToggle.vue b/apps/docs/src/docs/components/demo/DropdownBlockToggle.vue
index 8d4e8f4ed..1d6178786 100644
--- a/apps/docs/src/docs/components/demo/DropdownBlockToggle.vue
+++ b/apps/docs/src/docs/components/demo/DropdownBlockToggle.vue
@@ -5,9 +5,9 @@
     variant="primary"
     class="d-grid gap-2 mb-2"
   >
-    <BDropdownItem href="#">Action</BDropdownItem>
-    <BDropdownItem href="#">Another action</BDropdownItem>
-    <BDropdownItem href="#">Something else here</BDropdownItem>
+    <BDropdownItem>Action</BDropdownItem>
+    <BDropdownItem>Another action</BDropdownItem>
+    <BDropdownItem>Something else here</BDropdownItem>
   </BDropdown>
   <div class="d-grid gap-2">
     <BDropdown
@@ -17,9 +17,9 @@
       variant="primary"
       split-class="w-100"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here...</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here...</BDropdownItem>
     </BDropdown>
   </div>
   <!-- #endregion template -->
diff --git a/apps/docs/src/docs/components/demo/DropdownButtonContent.vue b/apps/docs/src/docs/components/demo/DropdownButtonContent.vue
index 95ee1115a..d7af51b74 100644
--- a/apps/docs/src/docs/components/demo/DropdownButtonContent.vue
+++ b/apps/docs/src/docs/components/demo/DropdownButtonContent.vue
@@ -5,15 +5,15 @@
       text="Button text via Prop"
       class="me-2"
     >
-      <BDropdownItem href="#">An item</BDropdownItem>
-      <BDropdownItem href="#">Another item</BDropdownItem>
+      <BDropdownItem>An item</BDropdownItem>
+      <BDropdownItem>Another item</BDropdownItem>
     </BDropdown>
     <BDropdown class="me-2">
       <template #button-content>
         Custom <strong>Content</strong> with <em>HTML</em> via Slot
       </template>
-      <BDropdownItem href="#">An item</BDropdownItem>
-      <BDropdownItem href="#">Another item</BDropdownItem>
+      <BDropdownItem>An item</BDropdownItem>
+      <BDropdownItem>Another item</BDropdownItem>
     </BDropdown>
   </div>
   <!-- #endregion template -->
diff --git a/apps/docs/src/docs/components/demo/DropdownColorVariants.vue b/apps/docs/src/docs/components/demo/DropdownColorVariants.vue
index 616d24ab6..96fff2ec2 100644
--- a/apps/docs/src/docs/components/demo/DropdownColorVariants.vue
+++ b/apps/docs/src/docs/components/demo/DropdownColorVariants.vue
@@ -6,27 +6,27 @@
       variant="primary"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <BDropdown
       text="Success"
       variant="success"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <BDropdown
       text="Outline Danger"
       variant="outline-danger"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <!-- #endregion template -->
   </div>
diff --git a/apps/docs/src/docs/components/demo/DropdownDropup.vue b/apps/docs/src/docs/components/demo/DropdownDropup.vue
index 7530f1b08..aec88036f 100644
--- a/apps/docs/src/docs/components/demo/DropdownDropup.vue
+++ b/apps/docs/src/docs/components/demo/DropdownDropup.vue
@@ -6,9 +6,9 @@
     variant="primary"
     class="me-2"
   >
-    <BDropdownItem href="#">Action</BDropdownItem>
-    <BDropdownItem href="#">Another action</BDropdownItem>
-    <BDropdownItem href="#">Something else here</BDropdownItem>
+    <BDropdownItem>Action</BDropdownItem>
+    <BDropdownItem>Another action</BDropdownItem>
+    <BDropdownItem>Something else here</BDropdownItem>
   </BDropdown>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/DropdownFloating.vue b/apps/docs/src/docs/components/demo/DropdownFloating.vue
index b6bdca3fc..55ded9482 100644
--- a/apps/docs/src/docs/components/demo/DropdownFloating.vue
+++ b/apps/docs/src/docs/components/demo/DropdownFloating.vue
@@ -5,9 +5,9 @@
     strategy="fixed"
     class="me-2"
   >
-    <BDropdownItem href="#">Action</BDropdownItem>
-    <BDropdownItem href="#">Another action</BDropdownItem>
-    <BDropdownItem href="#">Something else here</BDropdownItem>
+    <BDropdownItem>Action</BDropdownItem>
+    <BDropdownItem>Another action</BDropdownItem>
+    <BDropdownItem>Something else here</BDropdownItem>
   </BDropdown>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/DropdownHiddenCaret.vue b/apps/docs/src/docs/components/demo/DropdownHiddenCaret.vue
index 4779fb030..9030cf258 100644
--- a/apps/docs/src/docs/components/demo/DropdownHiddenCaret.vue
+++ b/apps/docs/src/docs/components/demo/DropdownHiddenCaret.vue
@@ -7,9 +7,9 @@
     no-caret
   >
     <template #button-content> &#x1f50d;<span class="visually-hidden">Search</span> </template>
-    <BDropdownItem href="#">Action</BDropdownItem>
-    <BDropdownItem href="#">Another action</BDropdownItem>
-    <BDropdownItem href="#">Something else here...</BDropdownItem>
+    <BDropdownItem>Action</BDropdownItem>
+    <BDropdownItem>Another action</BDropdownItem>
+    <BDropdownItem>Something else here...</BDropdownItem>
   </BDropdown>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/DropdownMenuAlignment.vue b/apps/docs/src/docs/components/demo/DropdownMenuAlignment.vue
index 51d59d10d..95ad31e69 100644
--- a/apps/docs/src/docs/components/demo/DropdownMenuAlignment.vue
+++ b/apps/docs/src/docs/components/demo/DropdownMenuAlignment.vue
@@ -6,9 +6,9 @@
       variant="primary"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <BDropdown
       start
@@ -16,9 +16,9 @@
       variant="primary"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <BDropdown
       end
@@ -26,9 +26,9 @@
       variant="primary"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <BDropdown
       center
@@ -36,9 +36,9 @@
       variant="primary"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <!-- #endregion template -->
   </div>
diff --git a/apps/docs/src/docs/components/demo/DropdownMenuOffset.vue b/apps/docs/src/docs/components/demo/DropdownMenuOffset.vue
index a6f9ae654..1ebbd75e7 100644
--- a/apps/docs/src/docs/components/demo/DropdownMenuOffset.vue
+++ b/apps/docs/src/docs/components/demo/DropdownMenuOffset.vue
@@ -6,18 +6,18 @@
       text="Offset Dropdown"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <BDropdown
       :offset="{alignmentAxis: 50, crossAxis: 60, mainAxis: 70}"
       text="Offset Dropdown 2 dimensions"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <!-- #endregion template -->
   </div>
diff --git a/apps/docs/src/docs/components/demo/DropdownNoFlip.vue b/apps/docs/src/docs/components/demo/DropdownNoFlip.vue
index 2c0c33c17..5df92d7fb 100644
--- a/apps/docs/src/docs/components/demo/DropdownNoFlip.vue
+++ b/apps/docs/src/docs/components/demo/DropdownNoFlip.vue
@@ -5,9 +5,9 @@
     no-flip
     class="me-2"
   >
-    <BDropdownItem href="#">An item</BDropdownItem>
-    <BDropdownItem href="#">Another item</BDropdownItem>
-    <BDropdownItem href="#">Yet Another item</BDropdownItem>
+    <BDropdownItem>An item</BDropdownItem>
+    <BDropdownItem>Another item</BDropdownItem>
+    <BDropdownItem>Yet Another item</BDropdownItem>
   </BDropdown>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/DropdownPlacement.vue b/apps/docs/src/docs/components/demo/DropdownPlacement.vue
index 10f317ca9..8bd2a187b 100644
--- a/apps/docs/src/docs/components/demo/DropdownPlacement.vue
+++ b/apps/docs/src/docs/components/demo/DropdownPlacement.vue
@@ -7,9 +7,9 @@
       variant="primary"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <BDropdown
       placement="left"
@@ -17,9 +17,9 @@
       variant="primary"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <BDropdown
       placement="right-start"
@@ -27,9 +27,9 @@
       variant="primary"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <BDropdown
       placement="left-end"
@@ -37,9 +37,9 @@
       variant="primary"
       class="me-2"
     >
-      <BDropdownItem href="#">Action</BDropdownItem>
-      <BDropdownItem href="#">Another action</BDropdownItem>
-      <BDropdownItem href="#">Something else here</BDropdownItem>
+      <BDropdownItem>Action</BDropdownItem>
+      <BDropdownItem>Another action</BDropdownItem>
+      <BDropdownItem>Something else here</BDropdownItem>
     </BDropdown>
     <!-- #endregion template -->
   </div>
diff --git a/apps/docs/src/docs/components/demo/DropdownSplitButton.vue b/apps/docs/src/docs/components/demo/DropdownSplitButton.vue
index d632cfb73..b9d103b01 100644
--- a/apps/docs/src/docs/components/demo/DropdownSplitButton.vue
+++ b/apps/docs/src/docs/components/demo/DropdownSplitButton.vue
@@ -5,9 +5,9 @@
     text="Split Dropdown"
     class="me-2"
   >
-    <BDropdownItem href="#">Action</BDropdownItem>
-    <BDropdownItem href="#">Another action</BDropdownItem>
-    <BDropdownItem href="#">Something else here...</BDropdownItem>
+    <BDropdownItem>Action</BDropdownItem>
+    <BDropdownItem>Another action</BDropdownItem>
+    <BDropdownItem>Something else here...</BDropdownItem>
   </BDropdown>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/DropdownSplitButtonLink.vue b/apps/docs/src/docs/components/demo/DropdownSplitButtonLink.vue
index 96d50d7f1..00a096434 100644
--- a/apps/docs/src/docs/components/demo/DropdownSplitButtonLink.vue
+++ b/apps/docs/src/docs/components/demo/DropdownSplitButtonLink.vue
@@ -6,9 +6,9 @@
     text="Split Link"
     class="me-2"
   >
-    <BDropdownItem href="#">Action</BDropdownItem>
-    <BDropdownItem href="#">Another action</BDropdownItem>
-    <BDropdownItem href="#">Something else here...</BDropdownItem>
+    <BDropdownItem>Action</BDropdownItem>
+    <BDropdownItem>Another action</BDropdownItem>
+    <BDropdownItem>Something else here...</BDropdownItem>
   </BDropdown>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/DropdownSplitButtonVariant.vue b/apps/docs/src/docs/components/demo/DropdownSplitButtonVariant.vue
index 081dea8ca..8f7787ce5 100644
--- a/apps/docs/src/docs/components/demo/DropdownSplitButtonVariant.vue
+++ b/apps/docs/src/docs/components/demo/DropdownSplitButtonVariant.vue
@@ -7,9 +7,9 @@
     text="Split Variant Dropdown"
     class="me-2"
   >
-    <BDropdownItem href="#">Action</BDropdownItem>
-    <BDropdownItem href="#">Another action</BDropdownItem>
-    <BDropdownItem href="#">Something else here...</BDropdownItem>
+    <BDropdownItem>Action</BDropdownItem>
+    <BDropdownItem>Another action</BDropdownItem>
+    <BDropdownItem>Something else here...</BDropdownItem>
   </BDropdown>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/ListGroupActionable.vue b/apps/docs/src/docs/components/demo/ListGroupActionable.vue
index e98ac133b..daaf1569b 100644
--- a/apps/docs/src/docs/components/demo/ListGroupActionable.vue
+++ b/apps/docs/src/docs/components/demo/ListGroupActionable.vue
@@ -3,11 +3,11 @@
   <BListGroup>
     <BListGroupItem href="#some-link">Awesome link</BListGroupItem>
     <BListGroupItem
-      href="#"
+      href="#list-group-actionable"
       active
       >Link with active state</BListGroupItem
     >
-    <BListGroupItem href="#">Action links are easy</BListGroupItem>
+    <BListGroupItem href="#list-group-actionable">Action links are easy</BListGroupItem>
     <BListGroupItem
       href="#foobar"
       disabled
diff --git a/apps/docs/src/docs/components/demo/ListGroupActionableVariants.vue b/apps/docs/src/docs/components/demo/ListGroupActionableVariants.vue
index 7df29d002..45d4e5259 100644
--- a/apps/docs/src/docs/components/demo/ListGroupActionableVariants.vue
+++ b/apps/docs/src/docs/components/demo/ListGroupActionableVariants.vue
@@ -1,44 +1,44 @@
 <template>
   <!-- #region template -->
   <BListGroup>
-    <BListGroupItem href="#">Default list group item</BListGroupItem>
+    <BListGroupItem href="#list-group-actionable-variants">Default list group item</BListGroupItem>
     <BListGroupItem
-      href="#"
+      href="#list-group-actionable-variants"
       variant="primary"
       >Primary list group item</BListGroupItem
     >
     <BListGroupItem
-      href="#"
+      href="#list-group-actionable-variants"
       variant="secondary"
       >Secondary list group item</BListGroupItem
     >
     <BListGroupItem
-      href="#"
+      href="#list-group-actionable-variants"
       variant="success"
       >Success list group item</BListGroupItem
     >
     <BListGroupItem
-      href="#"
+      href="#list-group-actionable-variants"
       variant="danger"
       >Danger list group item</BListGroupItem
     >
     <BListGroupItem
-      href="#"
+      href="#list-group-actionable-variants"
       variant="warning"
       >Warning list group item</BListGroupItem
     >
     <BListGroupItem
-      href="#"
+      href="#list-group-actionable-variants"
       variant="info"
       >Info list group item</BListGroupItem
     >
     <BListGroupItem
-      href="#"
+      href="#list-group-actionable-variants"
       variant="light"
       >Light list group item</BListGroupItem
     >
     <BListGroupItem
-      href="#"
+      href="#list-group-actionable-variants"
       variant="dark"
       >Dark list group item</BListGroupItem
     >
diff --git a/apps/docs/src/docs/components/demo/ListGroupCard.vue b/apps/docs/src/docs/components/demo/ListGroupCard.vue
index b301ee3bb..0826ca34a 100644
--- a/apps/docs/src/docs/components/demo/ListGroupCard.vue
+++ b/apps/docs/src/docs/components/demo/ListGroupCard.vue
@@ -3,9 +3,9 @@
   <BCardGroup deck>
     <BCard header="Card with list group">
       <BListGroup>
-        <BListGroupItem href="#">Cras justo odio</BListGroupItem>
-        <BListGroupItem href="#">Dapibus ac facilisis in</BListGroupItem>
-        <BListGroupItem href="#">Vestibulum at eros</BListGroupItem>
+        <BListGroupItem href="#list-group-card">Cras justo odio</BListGroupItem>
+        <BListGroupItem href="#list-group-card">Dapibus ac facilisis in</BListGroupItem>
+        <BListGroupItem href="#list-group-card">Vestibulum at eros</BListGroupItem>
       </BListGroup>
       <p class="card-text mt-2">
         Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
@@ -18,9 +18,9 @@
       header="Card with flush list group"
     >
       <BListGroup flush>
-        <BListGroupItem href="#">Cras justo odio</BListGroupItem>
-        <BListGroupItem href="#">Dapibus ac facilisis in</BListGroupItem>
-        <BListGroupItem href="#">Vestibulum at eros</BListGroupItem>
+        <BListGroupItem href="#list-group-card">Cras justo odio</BListGroupItem>
+        <BListGroupItem href="#list-group-card">Dapibus ac facilisis in</BListGroupItem>
+        <BListGroupItem href="#list-group-card">Vestibulum at eros</BListGroupItem>
       </BListGroup>
       <BCardBody>
         Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
diff --git a/apps/docs/src/docs/components/demo/ListGroupCustom.vue b/apps/docs/src/docs/components/demo/ListGroupCustom.vue
index 3ef07fa6a..2ca29ddd3 100644
--- a/apps/docs/src/docs/components/demo/ListGroupCustom.vue
+++ b/apps/docs/src/docs/components/demo/ListGroupCustom.vue
@@ -2,7 +2,7 @@
   <!-- #region template -->
   <BListGroup>
     <BListGroupItem
-      href="#"
+      href="#list-group-custom"
       active
       class="flex-column align-items-start"
     >
@@ -17,7 +17,7 @@
       <small>Donec id elit non mi porta.</small>
     </BListGroupItem>
     <BListGroupItem
-      href="#"
+      href="#list-group-custom"
       class="flex-column align-items-start"
     >
       <div class="d-flex w-100 justify-content-between">
@@ -31,7 +31,7 @@
       <small class="text-body-secondary">Donec id elit non mi porta.</small>
     </BListGroupItem>
     <BListGroupItem
-      href="#"
+      href="#list-group-custom"
       disabled
       class="flex-column align-items-start"
     >
diff --git a/apps/docs/src/docs/components/demo/ModalVariants.vue b/apps/docs/src/docs/components/demo/ModalVariants.vue
index 3810c4214..d44e06881 100644
--- a/apps/docs/src/docs/components/demo/ModalVariants.vue
+++ b/apps/docs/src/docs/components/demo/ModalVariants.vue
@@ -94,38 +94,38 @@ import {ref} from 'vue'
 const show = ref(false)
 
 const bgVariants = [
-  { value: null, text: 'None' },
-  { value: 'primary', text: 'Primary' },
-  { value: 'secondary', text: 'Secondary' },
-  { value: 'success', text: 'Success' },
-  { value: 'warning', text: 'Warning' },
-  { value: 'danger', text: 'Danger' },
-  { value: 'info', text: 'Info' },
-  { value: 'light', text: 'Light' },
-  { value: 'dark', text: 'Dark' },
+  {value: null, text: 'None'},
+  {value: 'primary', text: 'Primary'},
+  {value: 'secondary', text: 'Secondary'},
+  {value: 'success', text: 'Success'},
+  {value: 'warning', text: 'Warning'},
+  {value: 'danger', text: 'Danger'},
+  {value: 'info', text: 'Info'},
+  {value: 'light', text: 'Light'},
+  {value: 'dark', text: 'Dark'},
 ] as const
 
 const textVariants = [
-  { value: null, text: 'None' },
-  { value: 'primary', text: 'Primary' },
-  { value: 'secondary', text: 'Secondary' },
-  { value: 'success', text: 'Success' },
-  { value: 'warning', text: 'Warning' },
-  { value: 'danger', text: 'Danger' },
-  { value: 'info', text: 'Info' },
-  { value: 'light', text: 'Light' },
-  { value: 'dark', text: 'Dark' },
-  { value: 'white', text: 'White' },
-  { value: 'body', text: 'Body' },
+  {value: null, text: 'None'},
+  {value: 'primary', text: 'Primary'},
+  {value: 'secondary', text: 'Secondary'},
+  {value: 'success', text: 'Success'},
+  {value: 'warning', text: 'Warning'},
+  {value: 'danger', text: 'Danger'},
+  {value: 'info', text: 'Info'},
+  {value: 'light', text: 'Light'},
+  {value: 'dark', text: 'Dark'},
+  {value: 'white', text: 'White'},
+  {value: 'body', text: 'Body'},
 ] as const
 
 type BgVariant = (typeof bgVariants)[number]['value']
 type TextVariant = (typeof textVariants)[number]['value']
 
-const headerBgVariant  = ref<BgVariant>('dark')
+const headerBgVariant = ref<BgVariant>('dark')
 const headerTextVariant = ref<TextVariant>('white')
-const bodyBgVariant    = ref<BgVariant>('light')
-const bodyTextVariant  = ref<TextVariant>('dark')
-const footerBgVariant  = ref<BgVariant>('warning')
+const bodyBgVariant = ref<BgVariant>('light')
+const bodyTextVariant = ref<TextVariant>('dark')
+const footerBgVariant = ref<BgVariant>('warning')
 const footerTextVariant = ref<TextVariant>('dark')
 </script>
diff --git a/apps/docs/src/docs/components/demo/NavAlignment.vue b/apps/docs/src/docs/components/demo/NavAlignment.vue
index 6c8615500..3af4b1530 100644
--- a/apps/docs/src/docs/components/demo/NavAlignment.vue
+++ b/apps/docs/src/docs/components/demo/NavAlignment.vue
@@ -4,10 +4,18 @@
     tabs
     align="center"
   >
-    <BNavItem active>Active</BNavItem>
-    <BNavItem>Link</BNavItem>
-    <BNavItem>Link with a long name </BNavItem>
-    <BNavItem disabled>Disabled</BNavItem>
+    <BNavItem
+      active
+      href="#nav-alignment"
+      >Active</BNavItem
+    >
+    <BNavItem href="#nav-alignment">Link</BNavItem>
+    <BNavItem href="#nav-alignment">Link with a long name </BNavItem>
+    <BNavItem
+      disabled
+      href="#nav-alignment"
+      >Disabled</BNavItem
+    >
   </BNav>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/NavDropdown.vue b/apps/docs/src/docs/components/demo/NavDropdown.vue
index df230b4f5..c488712d3 100644
--- a/apps/docs/src/docs/components/demo/NavDropdown.vue
+++ b/apps/docs/src/docs/components/demo/NavDropdown.vue
@@ -1,8 +1,12 @@
 <template>
   <!-- #region template -->
   <BNav pills>
-    <BNavItem active>Active</BNavItem>
-    <BNavItem>Link</BNavItem>
+    <BNavItem
+      active
+      href="#nav-dropdown"
+      >Active</BNavItem
+    >
+    <BNavItem href="#nav-dropdown">Link</BNavItem>
     <BNavItemDropdown
       id="my-nav-dropdown"
       text="Dropdown"
diff --git a/apps/docs/src/docs/components/demo/NavFill.vue b/apps/docs/src/docs/components/demo/NavFill.vue
index 33fbda1b1..5e29d0015 100644
--- a/apps/docs/src/docs/components/demo/NavFill.vue
+++ b/apps/docs/src/docs/components/demo/NavFill.vue
@@ -4,10 +4,18 @@
     tabs
     fill
   >
-    <BNavItem active>Active</BNavItem>
-    <BNavItem>Link</BNavItem>
-    <BNavItem>Link with a long name </BNavItem>
-    <BNavItem disabled>Disabled</BNavItem>
+    <BNavItem
+      active
+      href="#nav-fill"
+      >Active</BNavItem
+    >
+    <BNavItem href="#nav-fill">Link</BNavItem>
+    <BNavItem href="#nav-fill">Link with a long name </BNavItem>
+    <BNavItem
+      disabled
+      href="#nav-fill"
+      >Disabled</BNavItem
+    >
   </BNav>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/NavJustified.vue b/apps/docs/src/docs/components/demo/NavJustified.vue
index c7d09b3be..18e6b1531 100644
--- a/apps/docs/src/docs/components/demo/NavJustified.vue
+++ b/apps/docs/src/docs/components/demo/NavJustified.vue
@@ -4,10 +4,18 @@
     tabs
     justified
   >
-    <BNavItem active>Active</BNavItem>
-    <BNavItem>Link</BNavItem>
-    <BNavItem>Link with a long name </BNavItem>
-    <BNavItem disabled>Disabled</BNavItem>
+    <BNavItem
+      active
+      href="#nav-justified"
+      >Active</BNavItem
+    >
+    <BNavItem href="#nav-justified">Link</BNavItem>
+    <BNavItem href="#nav-justified">Link with a long name </BNavItem>
+    <BNavItem
+      disabled
+      href="#nav-justified"
+      >Disabled</BNavItem
+    >
   </BNav>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/NavOverview.vue b/apps/docs/src/docs/components/demo/NavOverview.vue
index dbe6a04bf..b0add1a84 100644
--- a/apps/docs/src/docs/components/demo/NavOverview.vue
+++ b/apps/docs/src/docs/components/demo/NavOverview.vue
@@ -1,10 +1,18 @@
 <template>
   <!-- #region template -->
   <BNav>
-    <BNavItem active>Active</BNavItem>
-    <BNavItem>Link</BNavItem>
-    <BNavItem>Another Link</BNavItem>
-    <BNavItem disabled>Disabled</BNavItem>
+    <BNavItem
+      active
+      href="#nav-overview"
+      >Active</BNavItem
+    >
+    <BNavItem href="#nav-overview">Link</BNavItem>
+    <BNavItem href="#nav-overview">Another Link</BNavItem>
+    <BNavItem
+      disabled
+      href="#nav-overview"
+      >Disabled</BNavItem
+    >
   </BNav>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/NavPill.vue b/apps/docs/src/docs/components/demo/NavPill.vue
index 30d60f10a..3d71d283c 100644
--- a/apps/docs/src/docs/components/demo/NavPill.vue
+++ b/apps/docs/src/docs/components/demo/NavPill.vue
@@ -1,10 +1,18 @@
 <template>
   <!-- #region template -->
   <BNav pills>
-    <BNavItem active>Active</BNavItem>
-    <BNavItem>Link</BNavItem>
-    <BNavItem>Another Link</BNavItem>
-    <BNavItem disabled>Disabled</BNavItem>
+    <BNavItem
+      active
+      href="#nav-pill"
+      >Active</BNavItem
+    >
+    <BNavItem href="#nav-pill">Link</BNavItem>
+    <BNavItem href="#nav-pill">Another Link</BNavItem>
+    <BNavItem
+      disabled
+      href="#nav-pill"
+      >Disabled</BNavItem
+    >
   </BNav>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/NavPillCard.vue b/apps/docs/src/docs/components/demo/NavPillCard.vue
index 3fe40ce3c..e75899e04 100644
--- a/apps/docs/src/docs/components/demo/NavPillCard.vue
+++ b/apps/docs/src/docs/components/demo/NavPillCard.vue
@@ -9,9 +9,17 @@
         card-header
         pills
       >
-        <BNavItem active>Active</BNavItem>
-        <BNavItem>Inactive</BNavItem>
-        <BNavItem disabled>Disabled</BNavItem>
+        <BNavItem
+          active
+          href="#nav-pill-card"
+          >Active</BNavItem
+        >
+        <BNavItem href="#nav-pill-card">Inactive</BNavItem>
+        <BNavItem
+          disabled
+          href="#nav-pill-card"
+          >Disabled</BNavItem
+        >
       </BNav>
     </BCardHeader>
 
diff --git a/apps/docs/src/docs/components/demo/NavPlainCard.vue b/apps/docs/src/docs/components/demo/NavPlainCard.vue
index 0dee2d6c3..ff0243ff3 100644
--- a/apps/docs/src/docs/components/demo/NavPlainCard.vue
+++ b/apps/docs/src/docs/components/demo/NavPlainCard.vue
@@ -6,9 +6,17 @@
   >
     <BCardHeader header-tag="nav">
       <BNav>
-        <BNavItem active>Active</BNavItem>
-        <BNavItem>Inactive</BNavItem>
-        <BNavItem disabled>Disabled</BNavItem>
+        <BNavItem
+          active
+          href="#nav-plain-card"
+          >Active</BNavItem
+        >
+        <BNavItem href="#nav-plain-card">Inactive</BNavItem>
+        <BNavItem
+          disabled
+          href="#nav-plain-card"
+          >Disabled</BNavItem
+        >
       </BNav>
     </BCardHeader>
 
diff --git a/apps/docs/src/docs/components/demo/NavSmall.vue b/apps/docs/src/docs/components/demo/NavSmall.vue
index ddd61582f..53e8a980d 100644
--- a/apps/docs/src/docs/components/demo/NavSmall.vue
+++ b/apps/docs/src/docs/components/demo/NavSmall.vue
@@ -1,10 +1,18 @@
 <template>
   <!-- #region template -->
   <BNav small>
-    <BNavItem active>Active</BNavItem>
-    <BNavItem>Link</BNavItem>
-    <BNavItem>Another Link</BNavItem>
-    <BNavItem disabled>Disabled</BNavItem>
+    <BNavItem
+      active
+      href="#nav-small"
+      >Active</BNavItem
+    >
+    <BNavItem href="#nav-small">Link</BNavItem>
+    <BNavItem href="#nav-small">Another Link</BNavItem>
+    <BNavItem
+      disabled
+      href="#nav-small"
+      >Disabled</BNavItem
+    >
   </BNav>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/NavTab.vue b/apps/docs/src/docs/components/demo/NavTab.vue
index 319c3c66d..2d00136c5 100644
--- a/apps/docs/src/docs/components/demo/NavTab.vue
+++ b/apps/docs/src/docs/components/demo/NavTab.vue
@@ -1,10 +1,18 @@
 <template>
   <!-- #region template -->
   <BNav tabs>
-    <BNavItem active>Active</BNavItem>
-    <BNavItem>Link</BNavItem>
-    <BNavItem>Another Link</BNavItem>
-    <BNavItem disabled>Disabled</BNavItem>
+    <BNavItem
+      active
+      href="#nav-tab"
+      >Active</BNavItem
+    >
+    <BNavItem href="#nav-tab">Link</BNavItem>
+    <BNavItem href="#nav-tab">Another Link</BNavItem>
+    <BNavItem
+      disabled
+      href="#nav-tab"
+      >Disabled</BNavItem
+    >
   </BNav>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/NavTabCard.vue b/apps/docs/src/docs/components/demo/NavTabCard.vue
index 8ef2997b2..15e57cd56 100644
--- a/apps/docs/src/docs/components/demo/NavTabCard.vue
+++ b/apps/docs/src/docs/components/demo/NavTabCard.vue
@@ -9,9 +9,17 @@
         card-header
         tabs
       >
-        <BNavItem active>Active</BNavItem>
-        <BNavItem>Inactive</BNavItem>
-        <BNavItem disabled>Disabled</BNavItem>
+        <BNavItem
+          active
+          href="#nav-tab-card"
+          >Active</BNavItem
+        >
+        <BNavItem href="#nav-tab-card">Inactive</BNavItem>
+        <BNavItem
+          disabled
+          href="#nav-tab-card"
+          >Disabled</BNavItem
+        >
       </BNav>
     </BCardHeader>
 
diff --git a/apps/docs/src/docs/components/demo/NavVertical.vue b/apps/docs/src/docs/components/demo/NavVertical.vue
index 673c36759..5727f1a7a 100644
--- a/apps/docs/src/docs/components/demo/NavVertical.vue
+++ b/apps/docs/src/docs/components/demo/NavVertical.vue
@@ -4,10 +4,18 @@
     vertical
     class="w-25"
   >
-    <BNavItem active>Active</BNavItem>
-    <BNavItem>Link</BNavItem>
-    <BNavItem>Another Link</BNavItem>
-    <BNavItem disabled>Disabled</BNavItem>
+    <BNavItem
+      active
+      href="#nav-vertical"
+      >Active</BNavItem
+    >
+    <BNavItem href="#nav-vertical">Link</BNavItem>
+    <BNavItem href="#nav-vertical">Another Link</BNavItem>
+    <BNavItem
+      disabled
+      href="#nav-vertical"
+      >Disabled</BNavItem
+    >
   </BNav>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/NavbarBrandImage.vue b/apps/docs/src/docs/components/demo/NavbarBrandImage.vue
index d759265db..2d631ea32 100644
--- a/apps/docs/src/docs/components/demo/NavbarBrandImage.vue
+++ b/apps/docs/src/docs/components/demo/NavbarBrandImage.vue
@@ -5,7 +5,7 @@
     v-b-color-mode="'dark'"
     variant="success"
   >
-    <BNavbarBrand href="#">
+    <BNavbarBrand href="#navbar-brand-image">
       <img
         src="https://picsum.photos/30/30/?image=40"
         alt="Kitten"
diff --git a/apps/docs/src/docs/components/demo/NavbarBrandImageText.vue b/apps/docs/src/docs/components/demo/NavbarBrandImageText.vue
index ebf20d791..1a457bfab 100644
--- a/apps/docs/src/docs/components/demo/NavbarBrandImageText.vue
+++ b/apps/docs/src/docs/components/demo/NavbarBrandImageText.vue
@@ -5,7 +5,7 @@
     v-b-color-mode="'dark'"
     variant="success"
   >
-    <BNavbarBrand href="#">
+    <BNavbarBrand href="#navbar-brand-image-text">
       <img
         src="https://picsum.photos/30/30/?image=40"
         class="d-inline-block align-top"
diff --git a/apps/docs/src/docs/components/demo/NavbarBrandLink.vue b/apps/docs/src/docs/components/demo/NavbarBrandLink.vue
index ca1537e93..8b77272cf 100644
--- a/apps/docs/src/docs/components/demo/NavbarBrandLink.vue
+++ b/apps/docs/src/docs/components/demo/NavbarBrandLink.vue
@@ -5,7 +5,7 @@
     v-b-color-mode="'dark'"
     variant="secondary"
   >
-    <BNavbarBrand href="#">BootstrapVueNext</BNavbarBrand>
+    <BNavbarBrand href="#navbar-brand-link">BootstrapVueNext</BNavbarBrand>
   </BNavbar>
   <!-- #endregion template -->
 </template>
diff --git a/apps/docs/src/docs/components/demo/NavbarItemDropdown.vue b/apps/docs/src/docs/components/demo/NavbarItemDropdown.vue
index 593603ca2..f23d88412 100644
--- a/apps/docs/src/docs/components/demo/NavbarItemDropdown.vue
+++ b/apps/docs/src/docs/components/demo/NavbarItemDropdown.vue
@@ -5,22 +5,22 @@
     variant="dark"
   >
     <BNavbarNav>
-      <BNavItem href="#">Home</BNavItem>
+      <BNavItem href="#navbar-item-dropdown">Home</BNavItem>
       <BNavItemDropdown
         text="Lang"
         right
       >
-        <BDropdownItem href="#">EN</BDropdownItem>
-        <BDropdownItem href="#">ES</BDropdownItem>
-        <BDropdownItem href="#">RU</BDropdownItem>
-        <BDropdownItem href="#">FA</BDropdownItem>
+        <BDropdownItem>EN</BDropdownItem>
+        <BDropdownItem>ES</BDropdownItem>
+        <BDropdownItem>RU</BDropdownItem>
+        <BDropdownItem>FA</BDropdownItem>
       </BNavItemDropdown>
       <BNavItemDropdown
         text="User"
         right
       >
-        <BDropdownItem href="#">Account</BDropdownItem>
-        <BDropdownItem href="#">Settings</BDropdownItem>
+        <BDropdownItem>Account</BDropdownItem>
+        <BDropdownItem>Settings</BDropdownItem>
       </BNavItemDropdown>
     </BNavbarNav>
   </BNavbar>
diff --git a/apps/docs/src/docs/components/demo/NavbarOffcanvas.vue b/apps/docs/src/docs/components/demo/NavbarOffcanvas.vue
index 7057facbd..d0cbc7ea5 100644
--- a/apps/docs/src/docs/components/demo/NavbarOffcanvas.vue
+++ b/apps/docs/src/docs/components/demo/NavbarOffcanvas.vue
@@ -5,7 +5,7 @@
     :toggleable="true"
     variant="primary"
   >
-    <BNavbarBrand href="#">NavBar</BNavbarBrand>
+    <BNavbarBrand href="#navbar-offcanvas">NavBar</BNavbarBrand>
     <BNavbarToggle target="nav-offcanvas" />
     <BOffcanvas
       id="nav-offcanvas"
@@ -14,9 +14,9 @@
       is-nav
     >
       <BNavbarNav>
-        <BNavItem href="#">Link</BNavItem>
+        <BNavItem href="#navbar-offcanvas">Link</BNavItem>
         <BNavItem
-          href="#"
+          href="#navbar-offcanvas"
           disabled
           >Disabled</BNavItem
         >
@@ -27,18 +27,18 @@
           text="Lang"
           right
         >
-          <BDropdownItem href="#">EN</BDropdownItem>
-          <BDropdownItem href="#">ES</BDropdownItem>
-          <BDropdownItem href="#">RU</BDropdownItem>
-          <BDropdownItem href="#">FA</BDropdownItem>
+          <BDropdownItem>EN</BDropdownItem>
+          <BDropdownItem>ES</BDropdownItem>
+          <BDropdownItem>RU</BDropdownItem>
+          <BDropdownItem>FA</BDropdownItem>
         </BNavItemDropdown>
         <BNavItemDropdown right>
           <!-- Using 'button-content' slot -->
           <template #button-content>
             <em>User</em>
           </template>
-          <BDropdownItem href="#">Profile</BDropdownItem>
-          <BDropdownItem href="#">Sign Out</BDropdownItem>
+          <BDropdownItem>Profile</BDropdownItem>
+          <BDropdownItem>Sign Out</BDropdownItem>
         </BNavItemDropdown>
       </BNavbarNav>
       <BNavForm class="d-flex">
diff --git a/apps/docs/src/docs/components/demo/NavbarOverview.vue b/apps/docs/src/docs/components/demo/NavbarOverview.vue
index 8a4e7fda3..e8998829b 100644
--- a/apps/docs/src/docs/components/demo/NavbarOverview.vue
+++ b/apps/docs/src/docs/components/demo/NavbarOverview.vue
@@ -5,16 +5,16 @@
     toggleable="lg"
     variant="primary"
   >
-    <BNavbarBrand href="#">NavBar</BNavbarBrand>
+    <BNavbarBrand href="#navbar-overview">NavBar</BNavbarBrand>
     <BNavbarToggle target="nav-collapse" />
     <BCollapse
       id="nav-collapse"
       is-nav
     >
       <BNavbarNav>
-        <BNavItem href="#">Link</BNavItem>
+        <BNavItem href="#navbar-overview">Link</BNavItem>
         <BNavItem
-          href="#"
+          href="#navbar-overview"
           disabled
           >Disabled</BNavItem
         >
@@ -25,18 +25,18 @@
           text="Lang"
           right
         >
-          <BDropdownItem href="#">EN</BDropdownItem>
-          <BDropdownItem href="#">ES</BDropdownItem>
-          <BDropdownItem href="#">RU</BDropdownItem>
-          <BDropdownItem href="#">FA</BDropdownItem>
+          <BDropdownItem>EN</BDropdownItem>
+          <BDropdownItem>ES</BDropdownItem>
+          <BDropdownItem>RU</BDropdownItem>
+          <BDropdownItem>FA</BDropdownItem>
         </BNavItemDropdown>
         <BNavItemDropdown right>
           <!-- Using 'button-content' slot -->
           <template #button-content>
             <em>User</em>
           </template>
-          <BDropdownItem href="#">Profile</BDropdownItem>
-          <BDropdownItem href="#">Sign Out</BDropdownItem>
+          <BDropdownItem>Profile</BDropdownItem>
+          <BDropdownItem>Sign Out</BDropdownItem>
         </BNavItemDropdown>
       </BNavbarNav>
       <BNavForm class="d-flex">
diff --git a/apps/docs/src/docs/components/demo/NavbarScroll.vue b/apps/docs/src/docs/components/demo/NavbarScroll.vue
index a4b3aff0f..325509590 100644
--- a/apps/docs/src/docs/components/demo/NavbarScroll.vue
+++ b/apps/docs/src/docs/components/demo/NavbarScroll.vue
@@ -6,16 +6,16 @@
     variant="primary"
     class="navbar-nav-scroll"
   >
-    <BNavbarBrand href="#">NavBar</BNavbarBrand>
+    <BNavbarBrand href="#navbar-scroll">NavBar</BNavbarBrand>
     <BNavbarToggle target="nav-scroll" />
     <BCollapse
       id="nav-scroll"
       is-nav
     >
       <BNavbarNav>
-        <BNavItem href="#">Link</BNavItem>
+        <BNavItem href="#navbar-scroll">Link</BNavItem>
         <BNavItem
-          href="#"
+          href="#navbar-scroll"
           disabled
           >Disabled</BNavItem
         >
@@ -26,18 +26,18 @@
           text="Lang"
           right
         >
-          <BDropdownItem href="#">EN</BDropdownItem>
-          <BDropdownItem href="#">ES</BDropdownItem>
-          <BDropdownItem href="#">RU</BDropdownItem>
-          <BDropdownItem href="#">FA</BDropdownItem>
+          <BDropdownItem>EN</BDropdownItem>
+          <BDropdownItem>ES</BDropdownItem>
+          <BDropdownItem>RU</BDropdownItem>
+          <BDropdownItem>FA</BDropdownItem>
         </BNavItemDropdown>
         <BNavItemDropdown right>
           <!-- Using 'button-content' slot -->
           <template #button-content>
             <em>User</em>
           </template>
-          <BDropdownItem href="#">Profile</BDropdownItem>
-          <BDropdownItem href="#">Sign Out</BDropdownItem>
+          <BDropdownItem>Profile</BDropdownItem>
+          <BDropdownItem>Sign Out</BDropdownItem>
         </BNavItemDropdown>
       </BNavbarNav>
       <BNavForm class="d-flex">
diff --git a/apps/docs/src/docs/components/demo/NavbarToggle.vue b/apps/docs/src/docs/components/demo/NavbarToggle.vue
index 865568e8a..4fc4f085f 100644
--- a/apps/docs/src/docs/components/demo/NavbarToggle.vue
+++ b/apps/docs/src/docs/components/demo/NavbarToggle.vue
@@ -4,7 +4,7 @@
     toggleable
     variant="dark"
   >
-    <BNavbarBrand href="#">NavBar</BNavbarBrand>
+    <BNavbarBrand href="#navbar-toggle">NavBar</BNavbarBrand>
     <BNavbarToggle target="navbar-toggle-collapse">
       <template #default="{expanded}">
         <ChevronBarUpIcon v-if="expanded" />
@@ -19,10 +19,10 @@
       is-nav
     >
       <BNavbarNav class="ms-auto">
-        <BNavItem href="#">Link 1</BNavItem>
-        <BNavItem href="#">Link 2</BNavItem>
+        <BNavItem href="#navbar-toggle">Link 1</BNavItem>
+        <BNavItem href="#navbar-toggle">Link 2</BNavItem>
         <BNavItem
-          href="#"
+          href="#navbar-toggle"
           disabled
           >Disabled</BNavItem
         >
diff --git a/apps/docs/src/docs/components/demo/PopoverCustomClass.vue b/apps/docs/src/docs/components/demo/PopoverCustomClass.vue
index 356459ee8..869e6274b 100644
--- a/apps/docs/src/docs/components/demo/PopoverCustomClass.vue
+++ b/apps/docs/src/docs/components/demo/PopoverCustomClass.vue
@@ -7,7 +7,7 @@
     >
       <template #target>
         <BButton
-          href="#"
+          href="#popover-custom-class"
           tabindex="0"
           >Button</BButton
         >
diff --git a/apps/docs/src/docs/components/demo/TabsEmpty.vue b/apps/docs/src/docs/components/demo/TabsEmpty.vue
index ca16635b4..69424dfe3 100644
--- a/apps/docs/src/docs/components/demo/TabsEmpty.vue
+++ b/apps/docs/src/docs/components/demo/TabsEmpty.vue
@@ -4,7 +4,7 @@
     <!-- Add your b-tab components here -->
     <template #tabs-end>
       <BNavItem
-        href="#"
+        href="#tabs-empty"
         role="presentation"
         @click="() => {}"
         >Another tab</BNavItem
diff --git a/apps/docs/src/docs/components/demo/TooltipCustomClass.vue b/apps/docs/src/docs/components/demo/TooltipCustomClass.vue
index 1089c4aa3..2b2135535 100644
--- a/apps/docs/src/docs/components/demo/TooltipCustomClass.vue
+++ b/apps/docs/src/docs/components/demo/TooltipCustomClass.vue
@@ -4,7 +4,7 @@
     <BTooltip body-class="my-tooltip-body-class">
       <template #target>
         <BButton
-          href="#"
+          href="#tooltip-custom-class"
           tabindex="0"
           >Button</BButton
         >
@@ -17,7 +17,7 @@
     >
       <template #target>
         <BButton
-          href="#"
+          href="#tooltip-custom-class"
           tabindex="1"
           >Button</BButton
         >
diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md
index 24cd3509f..fe58b2e79 100644
--- a/apps/docs/src/docs/migration-guide.md
+++ b/apps/docs/src/docs/migration-guide.md
@@ -575,6 +575,16 @@ Bootstrap Vue used `Vue Router 3`, BootstrapVueNext uses [`Vue Router 4`](https:
 
 `BLink` no longer supresses the scroll to top default behavior when `href='#'`.
 
+::: tip Handling href="#" Links in Documentation
+In our documentation site, we addressed the scroll-to-top behavior by cleaning up unnecessary `href="#"` attributes:
+
+1. **Remove unnecessary hrefs**: We removed `href="#"` from demo components where it wasn't providing any functional value (just styling).
+
+2. **Use contextual anchors**: Where navigation is actually needed, we replaced `href="#"` with meaningful anchor links that point to their demo containers (e.g., `href="#navbar-overview"`). This provides better user experience by allowing users to navigate directly to specific examples.
+
+This approach maintains component functionality while eliminating the unwanted scroll-to-top behavior.
+:::
+
 #### append
 
 Vue router deprecated the `append` prop in `<router-link>`, BootstrapVueNext has followed suit and deprecated the `append`
diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md
index f18f7b971..45f171322 100644
--- a/packages/bootstrap-vue-next/CHANGELOG.md
+++ b/packages/bootstrap-vue-next/CHANGELOG.md
@@ -2,82 +2,73 @@
 
 ## [0.40.6](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.40.5...bootstrapvuenext-v0.40.6) (2025-10-07)
 
-
 ### Bug Fixes
 
-* **BApp:** wrap our test app in BApp in main.ts to enable easy verification of useModal, etc. ([#2865](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2865)) ([d7d3476](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/d7d347665f92ad910fc45fc079f304c19d91c99f))
-* **useModalOrchestrator:** circular dependency ([#2874](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2874)) ([c0bf12f](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/c0bf12fe34f0671ae1b8392e6b4f9aeb605726d8))
+- **BApp:** wrap our test app in BApp in main.ts to enable easy verification of useModal, etc. ([#2865](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2865)) ([d7d3476](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/d7d347665f92ad910fc45fc079f304c19d91c99f))
+- **useModalOrchestrator:** circular dependency ([#2874](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2874)) ([c0bf12f](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/c0bf12fe34f0671ae1b8392e6b4f9aeb605726d8))
 
 ## [0.40.5](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.40.4...bootstrapvuenext-v0.40.5) (2025-09-23)
 
-
 ### Bug Fixes
 
-* **BToggle:** stop looking for missing targets after directive is unmounted ([#2857](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2857)) ([b358449](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/b3584492cad4c9ebeb37836cfd45aef878755249))
+- **BToggle:** stop looking for missing targets after directive is unmounted ([#2857](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2857)) ([b358449](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/b3584492cad4c9ebeb37836cfd45aef878755249))
 
 ## [0.40.4](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.40.3...bootstrapvuenext-v0.40.4) (2025-09-16)
 
-
 ### Bug Fixes
 
-* **BOrchestrator:** fix transition delay. ([af49d33](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/af49d333a6cb881aa7126e9e2a8741017fad630e))
+- **BOrchestrator:** fix transition delay. ([af49d33](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/af49d333a6cb881aa7126e9e2a8741017fad630e))
 
 ## [0.40.3](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.40.2...bootstrapvuenext-v0.40.3) (2025-09-12)
 
-
 ### Bug Fixes
 
-* **BTable:** events being wrongly stopped when sent from elements inside TRs ([#2841](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2841)) ([ee8b0f7](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ee8b0f71c8594de058bba2ef5d6ed2d2b034abf9))
+- **BTable:** events being wrongly stopped when sent from elements inside TRs ([#2841](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2841)) ([ee8b0f7](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ee8b0f71c8594de058bba2ef5d6ed2d2b034abf9))
 
 ## [0.40.2](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.40.1...bootstrapvuenext-v0.40.2) (2025-09-09)
 
-
 ### Features
 
-* **BButtonToolbar:** Add keyboard navigation support ([#2837](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2837)) ([81bd846](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/81bd8466f62b4445f1a68303c53416a2a5653d9c))
-* **BTable:** Implement keyboard navigation ([#2834](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2834)) ([b4b5f6f](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/b4b5f6fc74be26dc85443e3bb808015439b4b0e8))
-
+- **BButtonToolbar:** Add keyboard navigation support ([#2837](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2837)) ([81bd846](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/81bd8466f62b4445f1a68303c53416a2a5653d9c))
+- **BTable:** Implement keyboard navigation ([#2834](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2834)) ([b4b5f6f](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/b4b5f6fc74be26dc85443e3bb808015439b4b0e8))
 
 ### Bug Fixes
 
-* **BFormSelect:** modelValue not being applied during SSR ([#2835](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2835)) ([44a4ccd](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/44a4ccd8088511b47b2ac951b36dcbbc163cf30a))
-* BOffcanvas responsive SSR compatibility - defer breakpoint evaluation to client-side ([#2833](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2833)) ([ab99819](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ab99819077d8abf05b9beadf6eea31ece3e12b6c))
+- **BFormSelect:** modelValue not being applied during SSR ([#2835](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2835)) ([44a4ccd](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/44a4ccd8088511b47b2ac951b36dcbbc163cf30a))
+- BOffcanvas responsive SSR compatibility - defer breakpoint evaluation to client-side ([#2833](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2833)) ([ab99819](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ab99819077d8abf05b9beadf6eea31ece3e12b6c))
 
 ## [0.40.1](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.40.0...bootstrapvuenext-v0.40.1) (2025-09-06)
 
-
 ### Features
 
-* change useColorMode selector from 'body' to 'html' ([#2830](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2830)) ([688f826](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/688f826cb9c51c552069adaa31cd2b4857c886cf))
-
+- change useColorMode selector from 'body' to 'html' ([#2830](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2830)) ([688f826](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/688f826cb9c51c552069adaa31cd2b4857c886cf))
 
 ### Bug Fixes
 
-* **BDropdown:** transition broken by inline display styles ([#2832](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2832)) ([0363c2f](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/0363c2f87c84e5703c43874f0d7baf3cd6a81a55))
+- **BDropdown:** transition broken by inline display styles ([#2832](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2832)) ([0363c2f](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/0363c2f87c84e5703c43874f0d7baf3cd6a81a55))
 
 ## [0.40.0](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.30.5...bootstrapvuenext-v0.40.0) (2025-09-03)
 
-
 ### ⚠ BREAKING CHANGES
 
-* **BSort:** Implement initial-sort-direction and move compare from sort-by to fields ([#2777](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2777))
-* Merged the Orchestrator components into one.
-* renamed the controller composables to `useToast`, `useModal`, and `usePopover`
-* combined the old plugins to match the new BApp and composables.
-* the old `useModal` was removed since `useToggle` does all what it did.
-* new `BApp` component as the recommended way to configure bootstrap-vue-next applications, replacing the plugin-based approach.
+- **BSort:** Implement initial-sort-direction and move compare from sort-by to fields ([#2777](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2777))
+- Merged the Orchestrator components into one.
+- renamed the controller composables to `useToast`, `useModal`, and `usePopover`
+- combined the old plugins to match the new BApp and composables.
+- the old `useModal` was removed since `useToggle` does all what it did.
+- new `BApp` component as the recommended way to configure bootstrap-vue-next applications, replacing the plugin-based approach.
 
 ### Features
 
-* Add headerAttrs prop to BOffcanvas and BModal components ([59d1e80](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/59d1e809f57b7443faa7d53dcb6db7b6f0c8ea97))
-* **b-form-rating:** add `icon-clear` slot ([#2809](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2809)) ([4120f3d](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/4120f3d30e77d36e113bf1dd93581f073117c5b3))
-* **BSort:** Implement initial-sort-direction and move compare from sort-by to fields ([#2777](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2777)) ([b3eec6e](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/b3eec6eaabf654bb21124b9601d9c3809e5eb0cc))
-* combined the old plugins to match the new BApp and composables. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
-* implement BFormRating disabled state ([#2753](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2753)) ([#2793](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2793)) ([d837222](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/d8372223530e2038246e237732391c71a802dd23))
-* Merged the Orchestrator components into one. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
-* new `BApp` component as the recommended way to configure bootstrap-vue-next applications, replacing the plugin-based approach.  ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
-* renamed the controller composables to `useToast`, `useModal`, and `usePopover` ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
-* the old `useModal` was removed since `useToggle` does all what it did. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
+- Add headerAttrs prop to BOffcanvas and BModal components ([59d1e80](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/59d1e809f57b7443faa7d53dcb6db7b6f0c8ea97))
+- **b-form-rating:** add `icon-clear` slot ([#2809](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2809)) ([4120f3d](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/4120f3d30e77d36e113bf1dd93581f073117c5b3))
+- **BSort:** Implement initial-sort-direction and move compare from sort-by to fields ([#2777](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2777)) ([b3eec6e](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/b3eec6eaabf654bb21124b9601d9c3809e5eb0cc))
+- combined the old plugins to match the new BApp and composables. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
+- implement BFormRating disabled state ([#2753](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2753)) ([#2793](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2793)) ([d837222](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/d8372223530e2038246e237732391c71a802dd23))
+- Merged the Orchestrator components into one. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
+- new `BApp` component as the recommended way to configure bootstrap-vue-next applications, replacing the plugin-based approach. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
+- renamed the controller composables to `useToast`, `useModal`, and `usePopover` ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
+- the old `useModal` was removed since `useToggle` does all what it did. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
 
 ## [0.30.5](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.30.4...bootstrapvuenext-v0.30.5) (2025-08-13)
 
diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md
index 1dc5f12fb..0288852ee 100644
--- a/packages/nuxt/CHANGELOG.md
+++ b/packages/nuxt/CHANGELOG.md
@@ -2,129 +2,115 @@
 
 ## [0.40.6](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.40.5...nuxt-v0.40.6) (2025-10-07)
 
-
 ### Miscellaneous Chores
 
-* **nuxt:** Synchronize main group versions
-
+- **nuxt:** Synchronize main group versions
 
 ### Dependencies
 
-* The following workspace dependencies were updated
-  * devDependencies
-    * bootstrap-vue-next bumped to 0.40.6
-  * peerDependencies
-    * bootstrap-vue-next bumped to 0.40.6
+- The following workspace dependencies were updated
+  - devDependencies
+    - bootstrap-vue-next bumped to 0.40.6
+  - peerDependencies
+    - bootstrap-vue-next bumped to 0.40.6
 
 ## [0.40.5](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.40.4...nuxt-v0.40.5) (2025-09-23)
 
-
 ### Miscellaneous Chores
 
-* **nuxt:** Synchronize main group versions
-
+- **nuxt:** Synchronize main group versions
 
 ### Dependencies
 
-* The following workspace dependencies were updated
-  * devDependencies
-    * bootstrap-vue-next bumped to 0.40.5
-  * peerDependencies
-    * bootstrap-vue-next bumped to 0.40.5
+- The following workspace dependencies were updated
+  - devDependencies
+    - bootstrap-vue-next bumped to 0.40.5
+  - peerDependencies
+    - bootstrap-vue-next bumped to 0.40.5
 
 ## [0.40.4](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.40.3...nuxt-v0.40.4) (2025-09-16)
 
-
 ### Miscellaneous Chores
 
-* **nuxt:** Synchronize main group versions
-
+- **nuxt:** Synchronize main group versions
 
 ### Dependencies
 
-* The following workspace dependencies were updated
-  * devDependencies
-    * bootstrap-vue-next bumped to 0.40.4
-  * peerDependencies
-    * bootstrap-vue-next bumped to 0.40.4
+- The following workspace dependencies were updated
+  - devDependencies
+    - bootstrap-vue-next bumped to 0.40.4
+  - peerDependencies
+    - bootstrap-vue-next bumped to 0.40.4
 
 ## [0.40.3](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.40.2...nuxt-v0.40.3) (2025-09-12)
 
-
 ### Miscellaneous Chores
 
-* **nuxt:** Synchronize main group versions
-
+- **nuxt:** Synchronize main group versions
 
 ### Dependencies
 
-* The following workspace dependencies were updated
-  * devDependencies
-    * bootstrap-vue-next bumped to 0.40.3
-  * peerDependencies
-    * bootstrap-vue-next bumped to 0.40.3
+- The following workspace dependencies were updated
+  - devDependencies
+    - bootstrap-vue-next bumped to 0.40.3
+  - peerDependencies
+    - bootstrap-vue-next bumped to 0.40.3
 
 ## [0.40.2](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.40.1...nuxt-v0.40.2) (2025-09-09)
 
-
 ### Miscellaneous Chores
 
-* **nuxt:** Synchronize main group versions
-
+- **nuxt:** Synchronize main group versions
 
 ### Dependencies
 
-* The following workspace dependencies were updated
-  * devDependencies
-    * bootstrap-vue-next bumped to 0.40.2
-  * peerDependencies
-    * bootstrap-vue-next bumped to 0.40.2
+- The following workspace dependencies were updated
+  - devDependencies
+    - bootstrap-vue-next bumped to 0.40.2
+  - peerDependencies
+    - bootstrap-vue-next bumped to 0.40.2
 
 ## [0.40.1](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.40.0...nuxt-v0.40.1) (2025-09-06)
 
-
 ### Miscellaneous Chores
 
-* **nuxt:** Synchronize main group versions
-
+- **nuxt:** Synchronize main group versions
 
 ### Dependencies
 
-* The following workspace dependencies were updated
-  * devDependencies
-    * bootstrap-vue-next bumped to 0.40.1
-  * peerDependencies
-    * bootstrap-vue-next bumped to 0.40.1
+- The following workspace dependencies were updated
+  - devDependencies
+    - bootstrap-vue-next bumped to 0.40.1
+  - peerDependencies
+    - bootstrap-vue-next bumped to 0.40.1
 
 ## [0.40.0](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.30.5...nuxt-v0.40.0) (2025-09-03)
 
-
 ### ⚠ BREAKING CHANGES
 
-* **BSort:** Implement initial-sort-direction and move compare from sort-by to fields ([#2777](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2777))
-* Merged the Orchestrator components into one.
-* renamed the controller composables to `useToast`, `useModal`, and `usePopover`
-* combined the old plugins to match the new BApp and composables.
-* the old `useModal` was removed since `useToggle` does all what it did.
-* new `BApp` component as the recommended way to configure bootstrap-vue-next applications, replacing the plugin-based approach.
+- **BSort:** Implement initial-sort-direction and move compare from sort-by to fields ([#2777](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2777))
+- Merged the Orchestrator components into one.
+- renamed the controller composables to `useToast`, `useModal`, and `usePopover`
+- combined the old plugins to match the new BApp and composables.
+- the old `useModal` was removed since `useToggle` does all what it did.
+- new `BApp` component as the recommended way to configure bootstrap-vue-next applications, replacing the plugin-based approach.
 
 ### Features
 
-* **BSort:** Implement initial-sort-direction and move compare from sort-by to fields ([#2777](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2777)) ([b3eec6e](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/b3eec6eaabf654bb21124b9601d9c3809e5eb0cc))
-* combined the old plugins to match the new BApp and composables. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
-* Merged the Orchestrator components into one. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
-* new `BApp` component as the recommended way to configure bootstrap-vue-next applications, replacing the plugin-based approach.  ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
-* renamed the controller composables to `useToast`, `useModal`, and `usePopover` ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
-* the old `useModal` was removed since `useToggle` does all what it did. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
-
+- **BSort:** Implement initial-sort-direction and move compare from sort-by to fields ([#2777](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2777)) ([b3eec6e](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/b3eec6eaabf654bb21124b9601d9c3809e5eb0cc))
+- combined the old plugins to match the new BApp and composables. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
+- Merged the Orchestrator components into one. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
+- new `BApp` component as the recommended way to configure bootstrap-vue-next applications, replacing the plugin-based approach. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
+- renamed the controller composables to `useToast`, `useModal`, and `usePopover` ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
+- the old `useModal` was removed since `useToggle` does all what it did. ([ba90f59](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/ba90f596ad3376ebddda535bf8b88232c60befff))
 
 ### Dependencies
 
-* The following workspace dependencies were updated
-  * devDependencies
-    * bootstrap-vue-next bumped to 0.40.0
-  * peerDependencies
-    * bootstrap-vue-next bumped to 0.40.0
+- The following workspace dependencies were updated
+  - devDependencies
+    - bootstrap-vue-next bumped to 0.40.0
+  - peerDependencies
+    - bootstrap-vue-next bumped to 0.40.0
 
 ## [0.30.5](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.30.4...nuxt-v0.30.5) (2025-08-13)
 

From bdf6fee56eaf708d1b14e89f0179c4d44b7bf063 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Tue, 21 Oct 2025 20:16:24 -0500
Subject: [PATCH 6/7] feat: add NumpadEnter support for BTable and BFormTags
 keyboard navigation (accessibility) (#2884)

* Initial plan

* feat: add NumpadEnter support for BTable and BFormTags key events

Co-authored-by: VividLemon <31498096+VividLemon@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: VividLemon <31498096+VividLemon@users.noreply.github.com>
---
 .../src/components/BFormTags/BFormTags.vue    |  2 +-
 .../src/components/BTable/BTableLite.vue      |  4 +-
 .../components/BTable/table-keyboard.spec.ts  | 80 +++++++++++++++++++
 3 files changed, 83 insertions(+), 3 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
index dcfb4e94d..ec8fd8073 100644
--- a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
@@ -321,7 +321,7 @@ const onChange = (e: Readonly<Event>): void => {
 }
 
 const onKeydown = (e: Readonly<KeyboardEvent>): void => {
-  if (e.key === 'Enter' && !props.noAddOnEnter) {
+  if ((e.key === 'Enter' || e.code === 'NumpadEnter') && !props.noAddOnEnter) {
     addTag(inputValue.value)
     return
   }
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
index 5fd2b2d92..70edbaf8a 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
@@ -474,7 +474,7 @@ const handleHeaderKeydown = (field: TableField<Items>, event: KeyboardEvent, isF
 
   if (target && (target as Element).tagName !== 'TH' && document.activeElement === target) return
 
-  if (code === 'Enter' || code === 'Space') {
+  if (code === 'Enter' || code === 'NumpadEnter' || code === 'Space') {
     stopEvent(event)
     headerClicked(field, event as unknown as MouseEvent, isFooter)
   }
@@ -485,7 +485,7 @@ const handleRowKeydown = (item: Items, itemIndex: number, event: KeyboardEvent)
 
   if (target && (target as Element).tagName !== 'TR' && document.activeElement === target) return
 
-  if (code === 'Enter' || code === 'Space') {
+  if (code === 'Enter' || code === 'NumpadEnter' || code === 'Space') {
     stopEvent(event)
     emit('row-clicked', item, itemIndex, event as unknown as MouseEvent)
     return
diff --git a/packages/bootstrap-vue-next/src/components/BTable/table-keyboard.spec.ts b/packages/bootstrap-vue-next/src/components/BTable/table-keyboard.spec.ts
index 46e928c05..20782a72a 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/table-keyboard.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BTable/table-keyboard.spec.ts
@@ -72,6 +72,24 @@ describe('BTable keyboard navigation', () => {
       expect(nameHeader.attributes('aria-sort')).toBe('ascending')
     })
 
+    it('should trigger sort when NumpadEnter key is pressed on header', async () => {
+      const wrapper = mount(BTable, {
+        props: {
+          items: testItems,
+          fields: testFields,
+        },
+      })
+
+      const nameHeader = wrapper.find('th[tabindex="0"]')
+
+      // Simulate NumpadEnter key press
+      await nameHeader.trigger('keydown', {code: 'NumpadEnter'})
+
+      // Check that sort was applied (aria-sort should change)
+      await nextTick()
+      expect(nameHeader.attributes('aria-sort')).toBe('ascending')
+    })
+
     it('should trigger sort when Space key is pressed on header', async () => {
       const wrapper = mount(BTable, {
         props: {
@@ -141,6 +159,25 @@ describe('BTable keyboard navigation', () => {
       expect(wrapper.emitted('row-clicked')![0][0]).toEqual(testItems[0])
     })
 
+    it('should trigger row click when NumpadEnter key is pressed', async () => {
+      const wrapper = mount(BTable, {
+        props: {
+          items: testItems,
+          fields: testFields,
+          selectable: true,
+        },
+      })
+
+      const firstRow = wrapper.find('tbody tr[tabindex="0"]')
+
+      // Simulate NumpadEnter key press
+      await firstRow.trigger('keydown', {code: 'NumpadEnter'})
+
+      // Check that row-clicked event was emitted
+      expect(wrapper.emitted('row-clicked')).toBeTruthy()
+      expect(wrapper.emitted('row-clicked')![0][0]).toEqual(testItems[0])
+    })
+
     it('should trigger row click when Space key is pressed', async () => {
       const wrapper = mount(BTable, {
         props: {
@@ -207,6 +244,27 @@ describe('BTable keyboard navigation', () => {
       expect(firstRow.classes()).toContain('selected')
     })
 
+    it('should work with selection mode using NumpadEnter', async () => {
+      const wrapper = mount(BTable, {
+        props: {
+          'items': testItems,
+          'fields': testFields,
+          'selectable': true,
+          'selectedItems': [],
+          'onUpdate:selectedItems': (value) => wrapper.setProps({selectedItems: value}),
+        },
+      })
+
+      const firstRow = wrapper.find('tbody tr[tabindex="0"]')
+
+      // Simulate NumpadEnter key press to select row
+      await firstRow.trigger('keydown', {code: 'NumpadEnter'})
+      await nextTick()
+
+      // Row should be selected (have the selected class)
+      expect(firstRow.classes()).toContain('selected')
+    })
+
     it('should work with sorting', async () => {
       const wrapper = mount(BTable, {
         props: {
@@ -228,5 +286,27 @@ describe('BTable keyboard navigation', () => {
       // After sorting by name ascending, Bob Johnson should be first
       expect(firstRowData[0].text()).toBe('Bob Johnson')
     })
+
+    it('should work with sorting using NumpadEnter', async () => {
+      const wrapper = mount(BTable, {
+        props: {
+          items: testItems,
+          fields: testFields,
+        },
+      })
+
+      const nameHeader = wrapper.find('th[tabindex="0"]')
+
+      // Sort using keyboard with NumpadEnter
+      await nameHeader.trigger('keydown', {code: 'NumpadEnter'})
+      await nextTick()
+
+      // Check that table data is sorted
+      const rows = wrapper.findAll('tbody tr')
+      const firstRowData = rows[0].findAll('td')
+
+      // After sorting by name ascending, Bob Johnson should be first
+      expect(firstRowData[0].text()).toBe('Bob Johnson')
+    })
   })
 })

From dfabcef67f9a506c7026707bd4f53d856cc9b996 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 23 Oct 2025 11:53:48 -0500
Subject: [PATCH 7/7] chore: release main (#2885)

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 |  7 +++++++
 packages/bootstrap-vue-next/package.json |  2 +-
 packages/nuxt/CHANGELOG.md               | 16 ++++++++++++++++
 packages/nuxt/package.json               |  2 +-
 5 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 23b2d282a..8e2f811b6 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/bootstrap-vue-next": "0.40.6",
-  "packages/nuxt": "0.40.6"
+  "packages/bootstrap-vue-next": "0.40.7",
+  "packages/nuxt": "0.40.7"
 }
diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md
index 45f171322..30534e0dd 100644
--- a/packages/bootstrap-vue-next/CHANGELOG.md
+++ b/packages/bootstrap-vue-next/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.40.7](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.40.6...bootstrapvuenext-v0.40.7) (2025-10-22)
+
+
+### Features
+
+* add NumpadEnter support for BTable and BFormTags keyboard navigation (accessibility) ([#2884](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2884)) ([bdf6fee](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/bdf6fee56eaf708d1b14e89f0179c4d44b7bf063))
+
 ## [0.40.6](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.40.5...bootstrapvuenext-v0.40.6) (2025-10-07)
 
 ### Bug Fixes
diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json
index fff274b98..4eb39f0e4 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.6",
+  "version": "0.40.7",
   "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 0288852ee..83a98d361 100644
--- a/packages/nuxt/CHANGELOG.md
+++ b/packages/nuxt/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.40.7](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.40.6...nuxt-v0.40.7) (2025-10-22)
+
+
+### Miscellaneous Chores
+
+* **nuxt:** Synchronize main group versions
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * bootstrap-vue-next bumped to 0.40.7
+  * peerDependencies
+    * bootstrap-vue-next bumped to 0.40.7
+
 ## [0.40.6](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.40.5...nuxt-v0.40.6) (2025-10-07)
 
 ### Miscellaneous Chores
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index e8d351435..595839c70 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.6",
+  "version": "0.40.7",
   "license": "MIT",
   "author": {
     "name": "Issayah",