diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index ff135924a..23b2d282a 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/bootstrap-vue-next": "0.40.5",
-  "packages/nuxt": "0.40.5"
+  "packages/bootstrap-vue-next": "0.40.6",
+  "packages/nuxt": "0.40.6"
 }
diff --git a/apps/docs/.vitepress/plugins/demo-container.ts b/apps/docs/.vitepress/plugins/demo-container.ts
index 0731c2578..d52937cab 100644
--- a/apps/docs/.vitepress/plugins/demo-container.ts
+++ b/apps/docs/.vitepress/plugins/demo-container.ts
@@ -1,6 +1,7 @@
 import type {MarkdownEnv, MarkdownRenderer} from 'vitepress'
 import type {RuleBlock} from 'markdown-it/lib/parser_block.mjs'
 import path from 'path'
+import fs from 'fs'
 
 // This plugin is inspired by vitepress' snippet plugin and must run before it to work
 //  https://vitepress.dev/guide/markdown.html#import-code-snippets
@@ -41,18 +42,32 @@ export const demoContainer = (md: MarkdownRenderer, srcDir: string) => {
     const {filepath, extension, region, lines, lang, title} = rawPathToToken(rawPath)
     const component = isDemo ? `<${title.substring(0, title.indexOf('.'))}/>` : ''
 
+    // 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)
+
+    // Read the source code file during build time
+    let fullFileContent = ''
+    try {
+      fullFileContent = fs.readFileSync(resolvedPath, 'utf-8')
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn(`Failed to read source code from ${resolvedPath}:`, error)
+    }
+
+    // Base64 encode the full file content for StackBlitz (always complete Vue file)
+    // Use explicit UTF-8 encoding to preserve Unicode characters like "é", "–", etc.
+    const encodedFullFile = Buffer.from(fullFileContent, 'utf8').toString('base64')
+
     state.line += 1
 
     const prefixToken = state.push('html_block', '', 0)
-    prefixToken.content = `<HighlightCard>${component}<template #html>`
+    prefixToken.content = `<HighlightCard full-file="${encodedFullFile}" title="${title}">${component}<template #html>`
 
     const codeToken = state.push('fence', 'code', 0)
     codeToken.info = `${lang || extension}${lines ? `{${lines}}` : ''}${title ? `[${title}]` : ''}`
 
-    const {realPath, path: _path} = state.env as MarkdownEnv
-    const resolvedPath = path.resolve(path.dirname(realPath ?? _path), filepath)
-
-    // @ts-ignore
+    // @ts-expect-error - VitePress fence token type doesn't include src property
     codeToken.src = [resolvedPath, region.slice(1)]
     codeToken.markup = '```'
     codeToken.map = [startLine, startLine + 1]
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 02e46080f..5510754f2 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -17,6 +17,7 @@
     "@iconify-json/bi": "^1.2.4",
     "@iconify-json/logos": "^1.2.4",
     "@rushstack/eslint-patch": "^1.12.0",
+    "@stackblitz/sdk": "^1.11.0",
     "@toycode/markdown-it-class": "^1.2.4",
     "@tsconfig/node22": "^22.0.2",
     "@types/node": "^22.16.5",
diff --git a/apps/docs/src/components/HighlightCard.vue b/apps/docs/src/components/HighlightCard.vue
index 869c93919..113796e69 100644
--- a/apps/docs/src/components/HighlightCard.vue
+++ b/apps/docs/src/components/HighlightCard.vue
@@ -4,10 +4,134 @@
       <slot />
     </BCardBody>
     <template v-if="$slots.html">
-      <div v-if="$slots.default" class="html">HTML</div>
+      <div v-if="$slots.default" class="html d-flex justify-content-between align-items-center">
+        <span>HTML</span>
+        <BButton
+          v-if="hasFileContent"
+          size="sm"
+          variant="outline-primary"
+          :loading="isLoading"
+          :loading-text="'Opening...'"
+          title="Open in StackBlitz"
+          aria-label="Open example in StackBlitz"
+          @click="openInStackBlitz"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="me-1">
+            <path d="M10.797 14.182H3.635L16.728 0l-3.525 9.818h7.162L7.272 24l3.525-9.818z" />
+          </svg>
+          StackBlitz
+        </BButton>
+      </div>
       <BCardBody class="bg-body-tertiary">
         <slot name="html" />
       </BCardBody>
     </template>
   </BCard>
 </template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+
+// Import template files as raw text from the original Vite template
+import indexHtml from '../../../../templates/vite/index.html?raw'
+import mainTs from '../../../../templates/vite/src/main.ts?raw'
+import appVue from '../../../../templates/vite/src/App.vue?raw'
+import packageJson from '../../../../templates/vite/package.json?raw'
+import viteConfig from '../../../../templates/vite/vite.config.mts?raw'
+import tsConfig from '../../../../templates/vite/tsconfig.json?raw'
+import tsConfigNode from '../../../../templates/vite/tsconfig.node.json?raw'
+
+interface Props {
+  fullFile?: string
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fullFile: '',
+  title: 'BootstrapVueNext Example',
+})
+
+// Loading state for StackBlitz button
+const isLoading = ref(false)
+
+// Decode base64 content with proper UTF-8 handling and cross-environment compatibility
+const decodeFullFile = (encoded: string) => {
+  if (!encoded) return ''
+
+  if (typeof globalThis.atob === 'function') {
+    try {
+      const binary = globalThis.atob(encoded)
+      const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0))
+      return new TextDecoder().decode(bytes)
+    } catch {
+      // fall through to the Node-friendly path
+    }
+  }
+
+  const nodeBuffer = (
+    globalThis as typeof globalThis & {Buffer?: typeof import('node:buffer').Buffer}
+  ).Buffer
+  if (nodeBuffer) {
+    try {
+      return nodeBuffer.from(encoded, 'base64').toString('utf-8')
+    } catch {
+      // ignore and return original payload
+    }
+  }
+
+  return encoded
+}
+
+// Check if we have content to show the StackBlitz button
+const hasFileContent = computed(() => Boolean(props.fullFile))
+
+// Decoded file content for StackBlitz (reactive)
+const fullFileContent = computed(() => decodeFullFile(props.fullFile))
+
+const createProjectFiles = () => ({
+  'index.html': indexHtml,
+  'src/main.ts': mainTs,
+  'src/App.vue': appVue,
+  'src/components/Comp.vue': fullFileContent.value || '',
+  'package.json': packageJson,
+  'vite.config.ts': viteConfig,
+  'tsconfig.json': tsConfig,
+  'tsconfig.node.json': tsConfigNode,
+})
+
+const openInStackBlitz = async () => {
+  if (!props.fullFile || isLoading.value) return
+
+  isLoading.value = true
+
+  try {
+    // Dynamically import StackBlitz SDK
+    const {default: sdk} = await import('@stackblitz/sdk')
+
+    // Create a complete Vue project with BootstrapVueNext using node template
+    // This gives us full control over the file structure
+    const project = {
+      title: props.title || 'BootstrapVueNext Example',
+      description: 'Example from BootstrapVueNext documentation',
+      template: 'node' as const,
+      files: createProjectFiles(),
+    }
+
+    // Open the project in a new tab
+    await sdk.openProject(project, {
+      newWindow: true,
+      openFile: 'src/components/Comp.vue',
+    })
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to open StackBlitz project:', error)
+    // Fallback to basic StackBlitz
+    window.open('https://stackblitz.com/fork/vue-ts', '_blank')
+  } finally {
+    // Reset loading state after a short delay to show completion
+    setTimeout(() => {
+      isLoading.value = false
+    }, 500)
+  }
+}
+</script>
diff --git a/apps/docs/src/data/components/accordion.data.ts b/apps/docs/src/data/components/accordion.data.ts
index cf0586597..4b481ed48 100644
--- a/apps/docs/src/data/components/accordion.data.ts
+++ b/apps/docs/src/data/components/accordion.data.ts
@@ -84,18 +84,8 @@ export default {
                 'The Id to be injected to accordion items and used in BCollapse for state management',
             },
           }),
-          ['id', 'tag', 'wrapperAttrs']
+          ['bodyAttrs', 'bodyClass', 'id', 'tag', 'wrapperAttrs']
         ),
-        bodyAttrs: {
-          type: 'Readonly<AttrsValue>',
-          default: undefined,
-          description: 'Attributes to be applied to the body of the accordion item',
-        },
-        bodyClass: {
-          type: 'ClassValue',
-          default: undefined,
-          description: 'Class to be applied to the body of the accordion item',
-        },
         buttonAttrs: {
           type: 'Readonly<AttrsValue>',
           default: undefined,
@@ -128,13 +118,13 @@ export default {
         },
         horizontal: {
           type: 'boolean',
-          default: undefined, // TODO item not in string format
+          default: undefined,
           description:
             'Transition the `width` instead of `height` and set a `width` on the immediate child element',
         },
         isNav: {
           type: 'boolean',
-          default: undefined, // TODO item not in string format
+          default: undefined,
           description:
             'When set, signifies that the accordion is part of a navbar, enabling certain features for navbar support',
         },
diff --git a/apps/docs/src/data/components/alert.data.ts b/apps/docs/src/data/components/alert.data.ts
index 1ccaf07e6..af4c57d96 100644
--- a/apps/docs/src/data/components/alert.data.ts
+++ b/apps/docs/src/data/components/alert.data.ts
@@ -18,7 +18,17 @@ export default {
       props: {
         [defaultPropSectionSymbol]: {
           ...omit(showHideProps, ['modelValue']),
-          ...pick(buildCommonProps(), ['variant', 'noHoverPause', 'noResumeOnHoverLeave']),
+          ...pick(buildCommonProps(), [
+            'body',
+            'bodyClass',
+            'headerClass',
+            'headerTag',
+            'id',
+            'title',
+            'variant',
+            'noHoverPause',
+            'noResumeOnHoverLeave',
+          ]),
           alertClass: {
             type: 'ClassValue',
             default: undefined,
@@ -29,16 +39,6 @@ export default {
             default: null,
             // description: 'Background color variant for the alert' // TODO missing description
           }, // TODO prop inconsistency ColorVariant | null (matches ColorExtendables, not directly in BAlertProps, but valid via inheritance)
-          body: {
-            type: 'string',
-            default: undefined,
-            description: 'The text content of the body',
-          },
-          bodyClass: {
-            type: 'ClassValue',
-            default: undefined,
-            description: 'CSS class (or classes) to add to the alert body element',
-          },
           closeClass: {
             type: 'ClassValue',
             default: undefined,
@@ -64,22 +64,6 @@ export default {
             default: false,
             description: 'When set, enables the close button',
           },
-          headerClass: {
-            type: 'ClassValue',
-            default: undefined,
-            description: 'CSS class (or classes) to add to the alert header element',
-          },
-          headerTag: {
-            type: 'string',
-            default: 'div',
-            description: 'Specify the HTML tag to render instead of the default tag for the header',
-          },
-          id: {
-            type: 'string',
-            default: undefined,
-            description:
-              'Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed',
-          },
           interval: {
             type: 'number | requestAnimationFrame',
             default: 'requestAnimationFrame',
@@ -114,11 +98,6 @@ export default {
             default: null,
             // description: 'Text color variant for the alert' // TODO missing description
           }, // TODO prop inconsistency TextColorVariant | null (matches ColorExtendables, not directly in BAlertProps, but valid via inheritance)
-          title: {
-            type: 'string',
-            default: undefined,
-            description: "The alert's title text",
-          },
         } satisfies PropRecord<Exclude<keyof BAlertProps, keyof typeof linkProps>>,
         'BLink props': linkedBLinkSection,
       },
diff --git a/apps/docs/src/data/components/modal.data.ts b/apps/docs/src/data/components/modal.data.ts
index 0d2e9d873..5cf065fc5 100644
--- a/apps/docs/src/data/components/modal.data.ts
+++ b/apps/docs/src/data/components/modal.data.ts
@@ -44,65 +44,64 @@ export default {
       sourcePath: '/BModal/BModal.vue',
       props: {
         ...showHideProps,
-        ...pick(buildCommonProps(), ['id', 'noBackdrop', 'noHeader', 'noHeaderClose']),
-        focus: {
-          type: "'ok' | 'cancel' | 'close' | string | ComponentPublicInstance | HTMLElement | null",
-          default: undefined,
-          description:
-            "Specify where to focus once modal opens. Can be built-in button: 'ok', 'cancel', or 'close'. Can be ref, HTMLElement, ID, or selector string. If set to 'false', no focus will be set (if noTrap isn't set, the focus trap will focus the modal element or fallback element). If set to a string, the element with that ID will be focused. If set to a ComponentPublicInstance, the $el property of the instance will be focused.",
-        },
+        ...pick(
+          buildCommonProps({
+            size: {
+              type: "Size | 'xl'",
+              description: "Sets the modal's width. Options: 'sm', 'md' (default), 'lg', or 'xl'",
+            },
+            titleTag: {
+              default: 'h5',
+            },
+          }),
+          [
+            'body',
+            'bodyAttrs',
+            'bodyBgVariant',
+            'bodyClass',
+            'bodyTextVariant',
+            'bodyVariant',
+            'footerBgVariant',
+            'footerBorderVariant',
+            'footerClass',
+            'footerTextVariant',
+            'footerVariant',
+            'headerBgVariant',
+            'headerBorderVariant',
+            'headerClass',
+            'headerTextVariant',
+            'headerVariant',
+            'id',
+            'noBackdrop',
+            'noHeader',
+            'noHeaderClose',
+            'size',
+            'title',
+            'titleClass',
+            'titleTag',
+          ]
+        ),
         backdropFirst: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
           description:
-            'Animates the backdrop before the modal and, on leave, animates the modal before the backdrop'
-        },
-        body: {
-          type: 'string',
-          default: undefined,
-          // TODO missing description
-        },
-        bodyAttrs: {
-          type: 'Readonly<AttrsValue>',
-          default: undefined,
-          // TODO missing description
-        },
-        bodyBgVariant: {
-          type: 'ColorVariant | null',
-          default: null, // TODO item not in string format
-          description: 'Applies one of the Bootstrap theme color variants to the body background',
-        },
-        bodyClass: {
-          type: 'ClassValue',
-          default: null, // TODO item not in string format
-          description: "CSS class (or classes) to apply to the '.modal-body' wrapper element",
+            'Animates the backdrop before the modal and, on leave, animates the modal before the backdrop',
         },
         bodyScrolling: {
           type: 'boolean',
-          default: false, // TODO item not in string format
-          description: 'Enables or disables scrolling the body while the modal is open'
-        },
-        bodyTextVariant: {
-          type: 'ColorVariant | null',
-          default: null, // TODO item not in string format
-          description: 'Applies one of the Bootstrap theme color variants to the body text',
-        },
-        bodyVariant: {
-          type: 'ColorVariant | null',
-          default: null, // TODO item not in string format
-          description:
-            'Applies one of the Bootstrap theme color variants to the body (takes priority over bodyBgVariant and bodyTextVariant)'
+          default: false,
+          description: 'Enables or disables scrolling the body while the modal is open',
         },
         busy: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
           description:
-            'Places the built-in default footer OK and Cancel buttons in a disabled state'
+            'Places the built-in default footer OK and Cancel buttons in a disabled state',
         },
         buttonSize: {
           type: 'Size',
           default: 'md',
-          // TODO missing description
+          description: "Size of the built in footer buttons: 'sm', 'md' (default), or 'lg'",
         },
         cancelClass: {
           type: 'ClassValue',
@@ -111,22 +110,22 @@ export default {
         },
         cancelDisabled: {
           type: 'boolean',
-          default: false, // TODO item not in string format
-          description: 'Places the built-in default footer Cancel button in a disabled state'
+          default: false,
+          description: 'Places the built-in default footer Cancel button in a disabled state',
         },
         cancelTitle: {
           type: 'string',
           default: 'Cancel',
-          description: 'Text to place in the default footer Cancel button'
+          description: 'Text to place in the default footer Cancel button',
         },
         cancelVariant: {
           type: 'ButtonVariant | null',
           default: 'secondary',
-          description: 'Variant for the default footer Cancel button'
+          description: 'Variant for the default footer Cancel button',
         },
         centered: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
           description: 'Vertically centers the modal in the viewport',
         },
         contentClass: {
@@ -139,57 +138,22 @@ export default {
           default: undefined,
           description: "CSS class (or classes) to apply to the '.modal-dialog' wrapper element",
         },
-        footerBgVariant: {
-          type: 'ColorVariant | null',
-          default: null, // TODO item not in string format
-          description: 'Applies one of the Bootstrap theme color variants to the footer background',
-        },
-        footerBorderVariant: {
-          type: 'ColorVariant | null',
-          default: null, // TODO item not in string format
-          description: 'Applies one of the Bootstrap theme color variants to the footer border',
-        },
-        footerClass: {
-          type: 'ClassValue',
+        focus: {
+          type: "'ok' | 'cancel' | 'close' | string | ComponentPublicInstance | HTMLElement | null",
           default: undefined,
-          description: "CSS class (or classes) to apply to the '.modal-footer' wrapper element",
-        },
-        footerTextVariant: {
-          type: 'ColorVariant | null',
-          default: null, // TODO item not in string format
-          description: 'Applies one of the Bootstrap theme color variants to the footer text',
-        },
-        footerVariant: {
-          type: 'ColorVariant | null',
-          default: null, // TODO item not in string format
           description:
-            'Applies one of the Bootstrap theme color variants to the footer (takes priority over footerBgVariant and footerTextVariant)'
+            "Specify where to focus once modal opens. Can be built-in button: 'ok', 'cancel', or 'close'. Can be ref, HTMLElement, ID, or selector string. If set to 'false', no focus will be set (if noTrap isn't set, the focus trap will focus the modal element or fallback element). If set to a string, the element with that ID will be focused. If set to a ComponentPublicInstance, the $el property of the instance will be focused.",
         },
         fullscreen: {
           type: 'boolean | Breakpoint',
-          default: false, // TODO item not in string format
+          default: false,
           description:
-            "Enables full-screen mode with a boolean value or sets the breakpoint for full-screen mode below the specified breakpoint value ('sm', 'md', 'lg', 'xl', 'xxl')"
+            "Enables full-screen mode with a boolean value or sets the breakpoint for full-screen mode below the specified breakpoint value ('sm', 'md', 'lg', 'xl', 'xxl')",
         },
         headerAttrs: {
           type: 'Readonly<AttrsValue>',
           default: undefined,
-          description: 'Attributes to be applied to the modal header element'
-        },
-        headerBgVariant: {
-          type: 'ColorVariant | null',
-          default: null, // TODO item not in string format
-          description: 'Applies one of the Bootstrap theme color variants to the header background',
-        },
-        headerBorderVariant: {
-          type: 'ColorVariant | null',
-          default: null, // TODO item not in string format
-          description: 'Applies one of the Bootstrap theme color variants to the header border',
-        },
-        headerClass: {
-          type: 'ClassValue',
-          default: undefined,
-          description: "CSS class (or classes) to apply to the '.modal-header' wrapper element",
+          description: 'Attributes to be applied to the modal header element',
         },
         headerCloseClass: {
           type: 'ClassValue',
@@ -204,48 +168,37 @@ export default {
         headerCloseVariant: {
           type: 'ButtonVariant | null',
           default: 'secondary',
-          description: 'Variant for the header close button when using the header-close slot'
-        },
-        headerTextVariant: {
-          type: 'ColorVariant | null',
-          default: null, // TODO item not in string format
-          description: 'Applies one of the Bootstrap theme color variants to the header text',
-        },
-        headerVariant: {
-          type: 'ColorVariant | null',
-          default: null, // TODO item not in string format
-          description:
-            'Applies one of the Bootstrap theme color variants to the header (takes priority over headerBgVariant and headerTextVariant)'
-        },
-        noFooter: {
-          type: 'boolean',
-          default: false, // TODO item not in string format
-          description: 'Disables rendering of the modal footer',
+          description: 'Variant for the header close button when using the header-close slot',
         },
         modalClass: {
           type: 'ClassValue',
           default: undefined,
           description: "CSS class (or classes) to apply to the '.modal' wrapper element",
         },
+        noFooter: {
+          type: 'boolean',
+          default: false,
+          description: 'Disables rendering of the modal footer',
+        },
         noCloseOnBackdrop: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
           description:
-            'Prevents closing the modal when clicking the backdrop outside the modal window'
+            'Prevents closing the modal when clicking the backdrop outside the modal window',
         },
         noCloseOnEsc: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
           description: 'Prevents closing the modal by pressing the Esc key',
         },
         noStacking: {
           type: 'boolean',
-          default: false, // TODO item not in string format
-          // TODO missing description
+          default: false,
+          description: 'Prevents other modals from stacking over this one',
         },
         noTrap: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
           description: 'Disables the focus trap feature',
         },
         okClass: {
@@ -255,64 +208,44 @@ export default {
         },
         okDisabled: {
           type: 'boolean',
-          default: false, // TODO item not in string format
-          description: 'Places the built-in default footer OK button in a disabled state'
+          default: false,
+          description: 'Places the built-in default footer OK button in a disabled state',
         },
         okOnly: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
           description: 'Disables rendering of the default footer Cancel button',
         },
         okTitle: {
           type: 'string',
           default: 'OK',
-          description: 'Text to place in the default footer OK button'
+          description: 'Text to place in the default footer OK button',
         },
         okVariant: {
           type: 'ButtonVariant | null',
           default: 'primary',
-          description: 'Button color theme variant for the default footer OK button'
+          description: 'Button color theme variant for the default footer OK button',
         },
         scrollable: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
           description: 'Enables scrolling of the modal body',
         },
-        size: {
-          type: "Size | 'xl'",
-          default: 'md',
-          description: "Sets the modal's width. Options: 'sm', 'md' (default), 'lg', or 'xl'"
-        },
         teleportDisabled: {
           type: 'boolean',
-          default: false, // TODO item not in string format
-          description: 'Renders the modal where it is defined, disabling teleport'
+          default: false,
+          description: 'Renders the modal where it is defined, disabling teleport',
         },
         teleportTo: {
           type: 'string | RendererElement | null | undefined',
           default: 'body',
           description: 'Overrides the default teleport location',
         },
-        title: {
-          type: 'string',
-          default: undefined,
-          description: 'Text content for the modal title'
-        },
-        titleClass: {
-          type: 'ClassValue',
-          default: undefined,
-          description: 'CSS class (or classes) to apply to the modal title'
-        },
         titleVisuallyHidden: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
           description: "Wraps the title in a '.visually-hidden' wrapper",
         },
-        titleTag: {
-          type: 'string',
-          default: 'h5',
-          description: 'HTML tag to render for the title instead of the default'
-        },
       } satisfies PropRecord<keyof BModalProps>,
       emits: {
         ...showHideEmits,
@@ -330,7 +263,7 @@ export default {
           args: {
             value: {
               type: 'BvTriggerableEvent',
-              description: 'The OK button click event details', // TODO added description for clarity
+              description: 'The OK button click event details',
             },
           },
         },
@@ -339,7 +272,7 @@ export default {
           args: {
             value: {
               type: 'BvTriggerableEvent',
-              description: 'The Cancel button click event details', // TODO added description for clarity
+              description: 'The Cancel button click event details',
             },
           },
         },
@@ -348,7 +281,7 @@ export default {
           args: {
             value: {
               type: 'BvTriggerableEvent',
-              description: 'The close button click event details', // TODO added description for clarity
+              description: 'The close button click event details',
             },
           },
         },
@@ -357,7 +290,7 @@ export default {
           args: {
             value: {
               type: 'BvTriggerableEvent',
-              description: 'The backdrop click event details', // TODO added description for clarity
+              description: 'The backdrop click event details',
             },
           },
         },
@@ -366,7 +299,7 @@ export default {
           args: {
             value: {
               type: 'BvTriggerableEvent',
-              description: 'The Esc key press event details', // TODO added description for clarity
+              description: 'The Esc key press event details',
             },
           },
         },
diff --git a/apps/docs/src/data/components/offcanvas.data.ts b/apps/docs/src/data/components/offcanvas.data.ts
index 187082449..7226aa5b4 100644
--- a/apps/docs/src/data/components/offcanvas.data.ts
+++ b/apps/docs/src/data/components/offcanvas.data.ts
@@ -6,6 +6,8 @@ import {
   type SlotRecord,
   StyleKind,
 } from '../../types'
+import {buildCommonProps} from '../../utils/commonProps'
+import {pick} from '../../utils/objectUtils'
 import {showHideEmits, showHideProps} from '../../utils/showHideData'
 
 export default {
@@ -15,23 +17,24 @@ export default {
       sourcePath: '/BOffcanvas/BOffcanvas.vue',
       props: {
         ...showHideProps,
+        ...pick(
+          buildCommonProps({
+            id: {
+              description:
+                'The Id to be injected to accordion items and used in BOffcanvas for state management',
+            },
+          }),
+          ['bodyAttrs', 'bodyClass', 'id']
+        ),
         backdropFirst: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
           description:
             'Animate the backdrop before the offcanvas, and on leave animate the offcanvas before the backdrop',
         },
-        bodyAttrs: {
-          type: 'Readonly<AttrsValue>',
-          default: undefined,
-        },
-        bodyClass: {
-          type: 'ClassValue',
-          default: undefined,
-        },
         bodyScrolling: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         focus: {
           type: "'ok' | 'cancel' | 'close' | string | ComponentPublicInstance | HTMLElement | null",
@@ -46,7 +49,7 @@ export default {
         headerAttrs: {
           type: 'Readonly<AttrsValue>',
           default: undefined,
-          description: 'Attributes to be applied to the offcanvas header element'
+          description: 'Attributes to be applied to the offcanvas header element',
         },
         headerClass: {
           type: 'string',
@@ -66,31 +69,27 @@ export default {
         },
         noBackdrop: {
           type: 'boolean',
-          default: false, // TODO item not in string format
-        },
-        id: {
-          type: 'string',
-          default: undefined,
+          default: false,
         },
         noCloseOnBackdrop: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         noCloseOnEsc: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         noHeader: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         noHeaderClose: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         noTrap: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
           description: 'Disables the focus trap feature',
         },
         placement: {
@@ -102,11 +101,11 @@ export default {
         },
         shadow: {
           type: 'Size | boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         teleportDisabled: {
           type: 'boolean',
-          default: false, // TODO item not in string format
+          default: false,
         },
         teleportTo: {
           type: 'string | RendererElement | null | undefined',
diff --git a/apps/docs/src/data/components/toast.data.ts b/apps/docs/src/data/components/toast.data.ts
index 0e9a351d3..7be646cc8 100644
--- a/apps/docs/src/data/components/toast.data.ts
+++ b/apps/docs/src/data/components/toast.data.ts
@@ -17,22 +17,20 @@ export default {
       props: {
         [defaultPropSectionSymbol]: {
           ...omit(showHideProps, ['modelValue']),
-          ...pick(buildCommonProps(), ['variant', 'noHoverPause', 'noResumeOnHoverLeave']),
-          bgVariant: {
-            type: 'ColorVariant | null',
-            default: null, // TODO item not in string format
-            description: 'Sets the background color variant for the toast.',
-          },
-          body: {
-            type: 'string',
-            default: undefined,
-            description: 'Sets the text content of the toast body.',
-          },
-          bodyClass: {
-            type: 'ClassValue',
-            default: undefined,
-            description: 'Sets the CSS class(es) for the toast body element.',
-          },
+          ...pick(buildCommonProps(), [
+            'bgVariant',
+            'body',
+            'bodyClass',
+            'headerClass',
+            'headerTag',
+            'id',
+            'noHoverPause',
+            'noResumeOnHoverLeave',
+            'textVariant',
+            'title',
+            'variant',
+          ]),
+
           closeClass: {
             type: 'ClassValue',
             default: undefined,
@@ -50,50 +48,35 @@ export default {
           },
           closeVariant: {
             type: 'string | null',
-            default: null, // TODO item not in string format
+            default: null,
             description: 'Sets the color variant for the close button.',
           },
-          headerClass: {
-            type: 'ClassValue',
-            default: undefined,
-            description: 'Sets the CSS class(es) for the toast header element.',
-          },
-          headerTag: {
-            type: 'string',
-            default: 'div',
-            description: 'Specifies the HTML tag for the toast header, replacing the default tag.',
-          },
-          id: {
-            type: 'string',
-            default: undefined,
-            description:
-              'Sets the `id` attribute for the toast and generates additional element IDs as needed.',
-          },
+
           interval: {
             type: 'number | requestAnimationFrame',
-            default: 'requestAnimationFrame', // TODO item not in string format
+            default: 'requestAnimationFrame',
             description: 'Sets the interval for refreshing the countdown timer.',
           },
           isStatus: {
             type: 'boolean',
-            default: false, // TODO item not in string format
+            default: false,
             description:
               'Sets `aria-live="polite"` and `role="status"` when `true`; otherwise, `aria-live="assertive"` and `role="alert"`.',
           },
           modelValue: {
             type: 'boolean | number',
-            default: false, // TODO item not in string format
+            default: false,
             description:
               'Controls toast visibility (`boolean`) or sets the auto-dismiss duration in milliseconds (`number`).',
           },
           noCloseButton: {
             type: 'boolean',
-            default: false, // TODO item not in string format
+            default: false,
             description: 'Hides the close button in the toast header.',
           },
           noProgress: {
             type: 'boolean',
-            default: false, // TODO item not in string format
+            default: false,
             description: 'Hides the progress bar in the toast.',
           },
           progressProps: {
@@ -104,24 +87,15 @@ export default {
           },
           showOnPause: {
             type: 'boolean',
-            default: true, // TODO item not in string format
+            default: true,
             description: 'Keeps the toast visible when paused.',
           },
           solid: {
             type: 'boolean',
-            default: false, // TODO item not in string format
+            default: false,
             description: 'Renders the toast with a solid background instead of a translucent one.',
           },
-          textVariant: {
-            type: 'TextColorVariant | null',
-            default: null, // TODO item not in string format
-            description: 'Sets the text color variant for the toast.',
-          },
-          title: {
-            type: 'string',
-            default: undefined,
-            description: 'Sets the title text for the toast.',
-          },
+
           toastClass: {
             type: 'ClassValue',
             default: undefined,
diff --git a/apps/docs/src/docs/components/demo/ModalAccessibilityFocus.vue b/apps/docs/src/docs/components/demo/ModalAccessibilityFocus.vue
new file mode 100644
index 000000000..2ea64c20e
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalAccessibilityFocus.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <BButton @click="modalShow = !modalShow">Launch demo modal</BButton>
+
+    <BModal
+      v-model="modalShow"
+      title="BootstrapVueNext Modal"
+      @shown="focusMyElement"
+    >
+      <div>
+        <BButton>I Don't Have Focus</BButton>
+      </div>
+
+      <div>
+        <BFormInput />
+      </div>
+
+      <div>
+        <!-- Element to gain focus when modal is opened -->
+        <BFormInput ref="focusThis" />
+      </div>
+
+      <div>
+        <BFormInput />
+      </div>
+    </BModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const modalShow = ref(false)
+const focusThis = ref<HTMLElement>()
+
+const focusMyElement = () => {
+  focusThis.value?.focus()
+}
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalCenterVertically.vue b/apps/docs/src/docs/components/demo/ModalCenterVertically.vue
new file mode 100644
index 000000000..0a7366d01
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalCenterVertically.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <BButton v-b-modal.modal-center>Launch centered modal</BButton>
+
+    <BModal
+      id="modal-center"
+      centered
+      title="BootstrapVue"
+    >
+      <p class="my-4">Vertically centered modal!</p>
+    </BModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {vBModal} from 'bootstrap-vue-next/directives/BModal'
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalDirective.vue b/apps/docs/src/docs/components/demo/ModalDirective.vue
new file mode 100644
index 000000000..9dc9de758
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalDirective.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <div class="d-flex gap-2">
+      <!-- Using modifiers -->
+      <BButton v-b-modal.directive-modal>Show Modal</BButton>
+
+      <!-- Using value -->
+      <BButton v-b-modal="'directive-modal'">Show Modal</BButton>
+    </div>
+    <!-- The modal -->
+    <BModal id="directive-modal">Hello From My Modal!</BModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {vBModal} from 'bootstrap-vue-next/directives/BModal'
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalExposed.vue b/apps/docs/src/docs/components/demo/ModalExposed.vue
new file mode 100644
index 000000000..1eec2bc14
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalExposed.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="d-flex gap-2">
+      <BButton
+        id="show-btn"
+        @click="show"
+        >Open Modal</BButton
+      >
+      <BButton
+        id="toggle-btn"
+        @click="toggle"
+        >Toggle Modal</BButton
+      >
+    </div>
+    <BModal
+      ref="my-modal"
+      hide-footer
+      title="Using Component Methods"
+    >
+      <div class="d-block text-center">
+        <h3>Hello From My Modal!</h3>
+      </div>
+      <div class="d-flex justify-content-center gap-2 mt-3">
+        <BButton
+          variant="outline-danger"
+          block
+          @click="hide"
+          >Close Me</BButton
+        >
+        <BButton
+          variant="outline-warning"
+          block
+          @click="toggle"
+          >Toggle Me</BButton
+        >
+      </div>
+    </BModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {useTemplateRef} from 'vue'
+import {BModal} from 'bootstrap-vue-next/components/BModal'
+import {type ComponentExposed} from 'vue-component-type-helpers'
+
+const myModal = useTemplateRef<ComponentExposed<typeof BModal>>('my-modal')
+const show = () => myModal.value?.show()
+const hide = () => myModal.value?.hide()
+const toggle = () => myModal.value?.toggle()
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalFooterBtnSizes.vue b/apps/docs/src/docs/components/demo/ModalFooterBtnSizes.vue
new file mode 100644
index 000000000..17361c94c
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalFooterBtnSizes.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="d-flex gap-2">
+      <BButton v-b-modal.modal-footer-sm>Small Footer Buttons</BButton>
+      <BButton v-b-modal.modal-footer-lg>Large Footer Buttons</BButton>
+    </div>
+
+    <BModal
+      id="modal-footer-sm"
+      title="BootstrapVue"
+      button-size="sm"
+    >
+      <p class="my-2">This modal has small footer buttons</p>
+    </BModal>
+
+    <BModal
+      id="modal-footer-lg"
+      title="BootstrapVue"
+      button-size="lg"
+    >
+      <p class="my-2">This modal has large footer buttons</p>
+    </BModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {vBModal} from 'bootstrap-vue-next/directives/BModal'
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalModel.vue b/apps/docs/src/docs/components/demo/ModalModel.vue
new file mode 100644
index 000000000..52ee6d650
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalModel.vue
@@ -0,0 +1,15 @@
+<template>
+  <BButton @click="modal = !modal"> Toggle modal via Model </BButton>
+  <BModal
+    v-model="modal"
+    title="Hello, World!"
+  >
+    Foobar?
+  </BModal>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const modal = ref(false)
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalMultipleSupport.vue b/apps/docs/src/docs/components/demo/ModalMultipleSupport.vue
new file mode 100644
index 000000000..74df10a8d
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalMultipleSupport.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="stack-demo">
+    <BButton @click="nestedModal1 = !nestedModal1">Open First Modal</BButton>
+
+    <BModal
+      v-model="nestedModal1"
+      size="lg"
+      title="First Modal"
+      ok-only
+      no-stacking
+    >
+      <p class="my-2">First Modal</p>
+      <BButton @click="nestedModal2 = !nestedModal2">Open Second Modal</BButton>
+    </BModal>
+
+    <BModal
+      v-model="nestedModal2"
+      title="Second Modal"
+      ok-only
+    >
+      <p class="my-2">Second Modal</p>
+      <BButton
+        size="sm"
+        @click="nestedModal3 = !nestedModal3"
+      >
+        Open Third Modal
+      </BButton>
+    </BModal>
+
+    <BModal
+      v-model="nestedModal3"
+      size="sm"
+      title="Third Modal"
+      ok-only
+    >
+      <p class="my-1">Third Modal</p>
+      <BButton
+        size="sm"
+        @click="nestedModal4 = !nestedModal4"
+      >
+        Open Fourth Modal
+      </BButton>
+    </BModal>
+
+    <BModal
+      v-model="nestedModal4"
+      size="sm"
+      title="Fourth Modal"
+      ok-only
+    >
+      <p class="my-1">Fourth Modal</p>
+    </BModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const nestedModal1 = ref(false)
+const nestedModal2 = ref(false)
+const nestedModal3 = ref(false)
+const nestedModal4 = ref(false)
+</script>
+
+<style>
+/* Modal stacking example styles */
+.stack-demo .modal {
+  --bs-modal-zindex: 1900;
+  transform: translate(
+    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px),
+    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px)
+  );
+  transition:
+    transform 0.5s,
+    opacity 0.15s linear !important;
+}
+.stack-demo .modal:not(.stack-inverse-position-0) {
+  opacity: calc(1 - ((var(--b-count, 0) - var(--b-position, 0)) * 0.1));
+}
+.stack-demo .modal-backdrop:not(.stack-inverse-position-0) {
+  opacity: 0 !important;
+}
+</style>
diff --git a/apps/docs/src/docs/components/demo/ModalNoBackdrop.vue b/apps/docs/src/docs/components/demo/ModalNoBackdrop.vue
new file mode 100644
index 000000000..68a137352
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalNoBackdrop.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <BButton v-b-modal.modal-no-backdrop>Open modal</BButton>
+
+    <BModal
+      id="modal-no-backdrop"
+      no-backdrop
+      content-class="shadow"
+      title="BootstrapVue"
+    >
+      <p class="my-2">
+        We've added the utility class <code>'shadow'</code>
+        to the modal content for added effect.
+      </p>
+    </BModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {vBModal} from 'bootstrap-vue-next/directives/BModal'
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalPopover.vue b/apps/docs/src/docs/components/demo/ModalPopover.vue
new file mode 100644
index 000000000..17ed0ab27
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalPopover.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <BButton v-b-modal.modal-popover>Show Modal</BButton>
+
+    <BModal
+      id="modal-popover"
+      title="Modal with Popover"
+      ok-only
+    >
+      <p>
+        This
+        <BButton
+          v-b-popover="'Popover inside a modal!'"
+          title="Popover"
+          >Button</BButton
+        >
+        triggers a popover on click.
+      </p>
+      <p>
+        This
+        <a
+          v-b-tooltip
+          href="#modal-popover"
+          title="Tooltip in a modal!"
+          >Link</a
+        >
+        will show a tooltip on hover.
+      </p>
+    </BModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {vBModal} from 'bootstrap-vue-next/directives/BModal'
+import {vBPopover} from 'bootstrap-vue-next/directives/BPopover'
+import {vBTooltip} from 'bootstrap-vue-next/directives/BTooltip'
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalPrevent.vue b/apps/docs/src/docs/components/demo/ModalPrevent.vue
new file mode 100644
index 000000000..95d8d0af8
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalPrevent.vue
@@ -0,0 +1,23 @@
+<template>
+  <BButton @click="preventableModal = !preventableModal"> Toggle modal </BButton>
+
+  <BModal
+    v-model="preventableModal"
+    title="Hello, World!"
+    @hide="preventFn"
+  >
+    Foobar?
+    <BFormCheckbox v-model="preventModal">Prevent close</BFormCheckbox>
+  </BModal>
+</template>
+
+<script setup lang="ts">
+import type {BvTriggerableEvent} from 'bootstrap-vue-next'
+import {ref} from 'vue'
+
+const preventableModal = ref(false)
+const preventModal = ref(true)
+const preventFn = (e: BvTriggerableEvent) => {
+  if (preventModal.value) e.preventDefault()
+}
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalScopedSlots.vue b/apps/docs/src/docs/components/demo/ModalScopedSlots.vue
new file mode 100644
index 000000000..7726aadf9
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalScopedSlots.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <BButton @click="show = true">Open Modal</BButton>
+
+    <BModal v-model="show">
+      <template #header="{close}">
+        <!-- Emulate built in modal header close button action -->
+        <BButton
+          size="sm"
+          variant="outline-danger"
+          @click="close()"
+        >
+          Close Modal
+        </BButton>
+        <h5>Modal Header</h5>
+      </template>
+
+      <template #default="{hide}">
+        <p>Modal Body with button</p>
+        <BButton @click="hide()">Hide Modal</BButton>
+      </template>
+
+      <template #footer="{ok, cancel, hide}">
+        <b>Custom Footer</b>
+        <!-- Emulate built in modal footer ok and cancel button actions -->
+        <BButton
+          size="sm"
+          variant="success"
+          @click="ok()"
+        >
+          OK
+        </BButton>
+        <BButton
+          size="sm"
+          variant="danger"
+          @click="cancel()"
+        >
+          Cancel
+        </BButton>
+        <!-- Button with custom close trigger value -->
+        <BButton
+          size="sm"
+          variant="outline-secondary"
+          @click="hide('forget')"
+        >
+          Forget it
+        </BButton>
+      </template>
+    </BModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const show = ref(false)
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalScrollOverflow.vue b/apps/docs/src/docs/components/demo/ModalScrollOverflow.vue
new file mode 100644
index 000000000..4355834ec
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalScrollOverflow.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <BButton v-b-modal.modal-tall>Launch overflowing modal</BButton>
+
+    <BModal
+      id="modal-tall"
+      title="Overflowing Content"
+    >
+      <p
+        v-for="i in 20"
+        :key="i"
+        class="my-4"
+      >
+        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+      </p>
+    </BModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {vBModal} from 'bootstrap-vue-next/directives/BModal'
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalScrollableContent.vue b/apps/docs/src/docs/components/demo/ModalScrollableContent.vue
new file mode 100644
index 000000000..a7cbb979a
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalScrollableContent.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <BButton v-b-modal.modal-scrollable>Launch scrolling modal</BButton>
+
+    <BModal
+      id="modal-scrollable"
+      scrollable
+      title="Scrollable Content"
+    >
+      <p
+        v-for="i in 20"
+        :key="i"
+        class="my-4"
+      >
+        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+      </p>
+    </BModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {vBModal} from 'bootstrap-vue-next/directives/BModal'
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalSizes.vue b/apps/docs/src/docs/components/demo/ModalSizes.vue
new file mode 100644
index 000000000..7758bdade
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalSizes.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <div class="d-flex gap-2 mb-3">
+      <BButton
+        v-b-modal.modal-xl
+        variant="primary"
+        >xl modal</BButton
+      >
+      <BButton
+        v-b-modal.modal-lg
+        variant="primary"
+        >lg modal</BButton
+      >
+      <BButton
+        v-b-modal.modal-sm
+        variant="primary"
+        >sm modal</BButton
+      >
+    </div>
+
+    <BModal
+      id="modal-xl"
+      size="xl"
+      title="Extra Large Modal"
+      >Hello Extra Large Modal!</BModal
+    >
+    <BModal
+      id="modal-lg"
+      size="lg"
+      title="Large Modal"
+      >Hello Large Modal!</BModal
+    >
+    <BModal
+      id="modal-sm"
+      size="sm"
+      title="Small Modal"
+      >Hello Small Modal!</BModal
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import {vBModal} from 'bootstrap-vue-next/directives/BModal'
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalToggle.vue b/apps/docs/src/docs/components/demo/ModalToggle.vue
new file mode 100644
index 000000000..0531e6ade
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalToggle.vue
@@ -0,0 +1,15 @@
+<template>
+  <BButton @click="show()">Click me</BButton>
+  <BModal
+    id="toggle-modal"
+    title="Modal Controlled by useToggle"
+  >
+    <BButton @click="hide()">Hide me</BButton>
+  </BModal>
+</template>
+
+<script setup lang="ts">
+import {useToggle} from 'bootstrap-vue-next'
+
+const {show, hide} = useToggle('toggle-modal')
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalUsage.vue b/apps/docs/src/docs/components/demo/ModalUsage.vue
new file mode 100644
index 000000000..b070941a5
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalUsage.vue
@@ -0,0 +1,15 @@
+<template>
+  <BButton @click="modal = !modal"> Toggle modal </BButton>
+  <BModal
+    v-model="modal"
+    title="Hello, World!"
+  >
+    Foobar?
+  </BModal>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const modal = ref(false)
+</script>
diff --git a/apps/docs/src/docs/components/demo/ModalVariants.vue b/apps/docs/src/docs/components/demo/ModalVariants.vue
new file mode 100644
index 000000000..3810c4214
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ModalVariants.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <BButton
+      variant="primary"
+      @click="show = true"
+      >Show Modal</BButton
+    >
+
+    <BModal
+      v-model="show"
+      title="Modal Variants"
+      :header-bg-variant="headerBgVariant"
+      :header-text-variant="headerTextVariant"
+      :body-bg-variant="bodyBgVariant"
+      :body-text-variant="bodyTextVariant"
+      :footer-bg-variant="footerBgVariant"
+      :footer-text-variant="footerTextVariant"
+    >
+      <BContainer fluid>
+        <BRow class="mb-1 text-center">
+          <BCol cols="3" />
+          <BCol>Background</BCol>
+          <BCol>Text</BCol>
+        </BRow>
+
+        <BRow class="mb-1">
+          <BCol cols="3">Header</BCol>
+          <BCol>
+            <BFormSelect
+              v-model="headerBgVariant"
+              :options="bgVariants"
+            />
+          </BCol>
+          <BCol>
+            <BFormSelect
+              v-model="headerTextVariant"
+              :options="textVariants"
+            />
+          </BCol>
+        </BRow>
+
+        <BRow class="mb-1">
+          <BCol cols="3">Body</BCol>
+          <BCol>
+            <BFormSelect
+              v-model="bodyBgVariant"
+              :options="bgVariants"
+            />
+          </BCol>
+          <BCol>
+            <BFormSelect
+              v-model="bodyTextVariant"
+              :options="textVariants"
+            />
+          </BCol>
+        </BRow>
+
+        <BRow>
+          <BCol cols="3">Footer</BCol>
+          <BCol>
+            <BFormSelect
+              v-model="footerBgVariant"
+              :options="bgVariants"
+            />
+          </BCol>
+          <BCol>
+            <BFormSelect
+              v-model="footerTextVariant"
+              :options="textVariants"
+            />
+          </BCol>
+        </BRow>
+      </BContainer>
+
+      <template #footer>
+        <div class="w-100">
+          <p class="float-start">Modal Footer Content</p>
+          <BButton
+            variant="primary"
+            size="sm"
+            class="float-end"
+            @click="show = false"
+          >
+            Close
+          </BButton>
+        </div>
+      </template>
+    </BModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+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' },
+] 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' },
+] as const
+
+type BgVariant = (typeof bgVariants)[number]['value']
+type TextVariant = (typeof textVariants)[number]['value']
+
+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 footerTextVariant = ref<TextVariant>('dark')
+</script>
diff --git a/apps/docs/src/docs/components/modal.md b/apps/docs/src/docs/components/modal.md
index cad528259..dc40a102e 100644
--- a/apps/docs/src/docs/components/modal.md
+++ b/apps/docs/src/docs/components/modal.md
@@ -2,237 +2,286 @@
 
 <PageHeader>
 
-Modals are streamlined, but flexible dialog prompts powered by JavaScript and CSS. They support a number of use cases from user notification to completely custom content and feature a handful of helpful sub-components, sizes, variants, accessibility, and more.
+Modals are streamlined, but flexible dialog prompts. They support a number of use cases from user notification to completely custom content and feature a handful of helpful sub-components, sizes, variants, accessibility, and more.
 
 </PageHeader>
 
 ## Usage
 
-<HighlightCard>
-  <BButton @click="modal = !modal">
-    Toggle modal
-  </BButton>
-  <BModal v-model="modal" title="Hello, World!">
-    Foobar?
-  </BModal>
-  <template #html>
-
-```vue
-<template>
-  <BButton @click="modal = !modal"> Toggle modal </BButton>
-  <BModal v-model="modal" title="Hello, World!"> Foobar? </BModal>
-</template>
+<<< DEMO ./demo/ModalUsage.vue
 
-<script setup lang="ts">
-const modal = ref(false)
-</script>
-```
+## Overview
+
+`<BModal>`, by default, has an **OK** and **Cancel** buttons in the footer. These buttons can be
+customized by setting various props on the component. You can customize the size of the buttons,
+disable buttons, hide the **Cancel** button (i.e. `ok-only`), choose a variant (e.g. `danger` for a
+red OK button) using the `ok-variant` and `cancel-variant` props, and provide custom button content
+using the `ok-title` and `cancel-title` props, or using the named slots `ok` and
+`cancel`.
+
+`<BModal>` supports close on ESC (enabled by default), close on backdrop click (enabled by
+default), and the `X` close button in the header (enabled by default). These features may be
+disabled by setting the props `no-close-on-esc`, `no-close-on-backdrop`, and `no-header-close`
+respectively.
+
+You can override the modal title via the named slot `title`, override the header completely
+via the `header` slot, and override the footer completely via the `footer` slot.
+
+**Note**: when using the `footer` slot, the default **OK** and **Cancel** buttons will not be
+present. Also, if you use the `header` slot, the default header `X` close button will not be
+present, nor can you use the `title` slot.
+
+Modals will not render their content in the document until they are shown (lazily rendered). Modals,
+when visible, are rendered **appended to the `<body>` element** via Vue's `<Teleport>` component. The placement of the `<BModal>`
+component will not affect layout, as it always renders as a placeholder comment node (`<!---->`).
+You can render modals in-place by setting the `teleportDisabled` prop to `true`.
+
+## Toggle modal visibility
+
+There are several methods that you can employ to toggle the visibility of `<BModal>`.
+
+### Using the `v-model` property
+
+<<< DEMO ./demo/ModalModel.vue
+
+### Using the `vBModal` directive
+
+<<< DEMO ./demo/ModalDirective.vue
 
-  </template>
-</HighlightCard>
+### Using the `show()`, `hide()` and `toggle()` methods
 
-## Changing state via root
+<<< DEMO ./demo/ModalExposed.vue
 
-At this time, there is no built in functionality for toggling a modal in a global state. A simple workaround to be able to modify the state of the modal is to use a global state management tool like [pinia](https://pinia.vuejs.org/). By simply v-modelling to a ref managed by the pinia state you can open and close the modal without context. This is not a perfect solution and will be looked at further in the future. Alternatively, you can export a `ref` from an external file and v-model to that.
+### Using the `useToggle` composable
+
+<<< DEMO ./demo/ModalToggle.vue
+
+### Using scoped slot scope methods
+
+Refer to the [Custom rendering with slots](#custom-rendering-with-slots) section on using the
+various methods passed to scoped slots for closing modals.
 
 ## Prevent Closing
 
 It is possible to prevent showing/closing modals. You can prevent hiding on the following Events: ok, cancel, close, and hide.
 
-<HighlightCard>
-  <BButton @click="preventableModal = !preventableModal">
-    Toggle modal
-  </BButton>
-  <BModal  v-model="preventableModal" title="Hello, World!" @hide="preventFn">
-    Foobar?
-    <BFormCheckbox v-model="preventModal">Prevent close</BFormCheckbox>
-  </BModal>
-  <template #html>
-
-```vue
-<template>
-  <BButton @click="preventableModal = !preventableModal"> Toggle modal </BButton>
-
-  <BModal v-model="preventableModal" title="Hello, World!" @hide="preventFn">
-    Foobar?
-    <BFormCheckbox v-model="preventModal">Prevent close</BFormCheckbox>
-  </BModal>
-</template>
+<<< DEMO ./demo/ModalPrevent.vue
 
-<script setup lang="ts">
-const preventableModal = ref(false)
-const preventModal = ref(true)
-const preventFn = (e: Event) => {
-  if (preventModal.value) e.preventDefault()
-}
-</script>
-```
+## Events
+
+BootstrapVueNext emits several events during the modal lifecycle. The main events are:
+
+### Visibility Events
+
+- `show` - Emitted when the modal is about to be shown
+- `shown` - Emitted after the modal has been shown and transitions completed
+- `hide` - Emitted when the modal is about to be hidden
+- `hidden` - Emitted after the modal has been hidden and transitions completed
+- `show-prevented` - Emitted when show was prevented
+- `hide-prevented` - Emitted when hide was prevented
+- `toggle` - Emitted when the modal visibility is toggled
+- `toggle-prevented` - Emitted when toggle was prevented
+
+### Action Events
+
+- `ok` - Emitted when the default **OK** button is clicked
+- `cancel` - Emitted when the default **Cancel** button is clicked
+- `close` - Emitted when the header close (**X**) button is clicked
+- `backdrop` - Emitted when the backdrop is clicked
+- `esc` - Emitted when the <kbd>Esc</kbd> key is pressed
+
+All events receive a `BvTriggerableEvent` object with the following properties:
+
+| Property or Method | Type     | Description                                                                                                                                                                                        |
+| ------------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `preventDefault()` | Method   | When called prevents the modal from closing                                                                                                                                                        |
+| `trigger`          | Property | Will be one of: `ok`, `cancel`, `close`, `esc`, `backdrop`, or the argument passed to the `hide()` method. For visibility events (`show`, `hide`, etc.), this indicates what triggered the action. |
+| `target`           | Property | A reference to the modal element                                                                                                                                                                   |
+| `componentId`      | Property | The modal's ID                                                                                                                                                                                     |
+| `cancelable`       | Property | Whether the event can be cancelled                                                                                                                                                                 |
+| `defaultPrevented` | Property | Whether `preventDefault()` has been called                                                                                                                                                         |
 
-  </template>
-</HighlightCard>
+You can set the value of `trigger` by passing an argument to the component's `hide()` method for
+advanced control (i.e. detecting what button or action triggered the modal to hide).
 
-## Scrolling long content
+::: info NOTE
+
+Action events (`ok`, `cancel`, `close`) are only emitted when the corresponding built-in buttons are clicked. If you provide custom buttons via slots, these events will not be emitted automatically - use the `hide` event instead.
+
+:::
+
+## Modal content
+
+### Using the grid
+
+Utilize the Bootstrap grid system within a modal by nesting `<BContainer fluid>` within the
+modal body. Then, use the normal grid system `<BRow>` and `<BCol>` as you
+would anywhere else.
+
+### Tooltips and popovers
+
+Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips
+and popovers within are also automatically dismissed. Tooltips and popovers are automatically
+appended to the modal element (to ensure correct z-indexing), although you can override where they
+are appended by specifying a `teleportTo` target (refer to tooltip and popover docs for details).
+
+<<< DEMO ./demo/ModalPopover.vue
+
+## Teleport and rendering
+
+By default, modals are rendered via Vue's `<Teleport>` component and appended to the `<body>` element.
+This ensures proper z-indexing and prevents layout issues. The `<BModal>` component itself renders as
+a placeholder comment node (`<!---->`) in its original DOM position.
+
+You can control where modals are teleported using the `teleportTo` prop, or disable teleporting entirely
+with `teleportDisabled`. When teleporting is disabled, the modal will render in-place within your component
+tree, which may affect layout and z-indexing.
+
+::: warning Note
+The `static` prop from BootstrapVue is not implemented in BootstrapVueNext. Use `teleportDisabled`
+to render modals in-place if needed.
+:::
+
+## Styling, options, and customization
+
+### Modal sizing
+
+Modals have three optional sizes, available via the prop `size`. These sizes kick in at certain
+breakpoints to avoid horizontal scrollbars on narrower viewports. Valid optional sizes are `sm`,
+`lg`, and `xl`.
+
+<<< DEMO ./demo/ModalSizes.vue
+
+The `size` prop maps the size to the `.modal-<size>` classes.
+
+### Scrolling long content
 
 When modals become too long for the user's viewport or device, they scroll independent of the page
 itself. Try the demo below to see what we mean.
 
-<HighlightCard>
-  <BButton v-b-modal.modal-tall>Launch overflowing modal</BButton>
-
-  <BModal id="modal-tall" title="Overflowing Content">
-    <p class="my-4" v-for="i in 20" :key="i">
-      Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-      in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-    </p>
-  </BModal>
-  <template #html>
-
-```vue
-<template>
-  <BButton v-b-modal.modal-tall>Launch overflowing modal</BButton>
-
-  <BModal id="modal-tall" title="Overflowing Content">
-    <p class="my-4" v-for="i in 20" :key="i">
-      Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-      egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-    </p>
-  </BModal>
-</template>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/ModalScrollOverflow.vue
 
 You can also create a scrollable modal that allows the scrolling of the modal body by setting the
 prop `scrollable` to `true`.
 
-<HighlightCard>
-  <BButton v-b-modal.modal-scrollable>Launch scrolling modal</BButton>
+<<< DEMO ./demo/ModalScrollableContent.vue
+
+### Vertically centered modal
 
-  <BModal id="modal-scrollable" scrollable title="Scrollable Content">
-    <p class="my-4" v-for="i in 20" :key="i">
-      Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-      in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-    </p>
-  </BModal>
-  <template #html>
+Vertically center your modal in the viewport by setting the `centered` prop.
 
-```vue
-<template>
-  <BButton v-b-modal.modal-scrollable>Launch scrolling modal</BButton>
+<<< DEMO ./demo/ModalCenterVertically.vue
 
-  <BModal id="modal-scrollable" scrollable title="Scrollable Content">
-    <p class="my-4" v-for="i in 20" :key="i">
-      Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-      egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-    </p>
-  </BModal>
-</template>
-```
+Feel free to mix vertically `centered` with `scrollable`.
 
-  </template>
-</HighlightCard>
+### Variants
 
-## Vertically centered modal
+Control the header, footer, and body background and text variants by setting the
+`header-bg-variant`, `header-text-variant`, `body-bg-variant`, `body-text-variant`,
+`footer-bg-variant`, and `footer-text-variant` props. Use any of the standard Bootstrap variants
+such as `danger`, `warning`, `info`, `success`, `dark`, `light`, etc.
 
-Vertically center your modal in the viewport by setting the `centered` prop.
+The variants for the bottom border of the header and top border of the footer can be controlled by
+the `header-border-variant` and `footer-border-variant` props respectively.
 
-<HighlightCard>
-  <BButton v-b-modal.modal-center>Launch centered modal</BButton>
+<<< DEMO ./demo/ModalVariants.vue
 
-  <BModal id="modal-center" centered title="BootstrapVue">
-    <p class="my-4">Vertically centered modal!</p>
-  </BModal>
-  <template #html>
+You can also apply arbitrary classes to the modal dialog container, content (modal window itself),
+header, body and footer via the `modal-class`, `content-class`, `header-class`, `body-class` and
+`footer-class` props, respectively. The props accept either a string or array of strings.
 
-```vue
-<template>
-  <BButton v-b-modal.modal-center>Launch centered modal</BButton>
+### Hiding the backdrop
 
-  <BModal id="modal-center" centered title="BootstrapVue">
-    <p class="my-4">Vertically centered modal!</p>
-  </BModal>
-</template>
-```
+Hide the modal's backdrop via setting the `no-backdrop` prop.
 
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/ModalNoBackdrop.vue
 
-Feel free to mix vertically `centered` with `scrollable`.
+Note that clicking outside of the modal will still close the modal even though the backdrop is
+hidden. You can disable this behaviour by setting the `no-close-on-backdrop` prop on `<BModal>`.
+
+### Disable open and close animation
+
+To disable the fading transition/animation when modal opens and closes, just set the prop `no-fade`
+on the `<BModal>` component.
+
+### Footer button sizing
+
+Fancy smaller or larger buttons in the default footer? Simply set the `button-size` prop to `'sm'`
+for small buttons, or `'lg'` for larger buttons.
+
+<<< DEMO ./demo/ModalFooterBtnSizes.vue
+
+The prop `button-size` has no effect if you have provided your own footer via the
+[`footer`](#custom-rendering-with-slots) slot.
+
+### Disabling built-in footer buttons
+
+You can disable the built-in footer buttons programmatically.
+
+You can disable the **Cancel** and **OK** buttons individually by setting the `cancel-disabled` and
+`ok-disabled` props, respectively, to `true`. Set the prop to `false` to re-enable the button.
+
+To disable both **Cancel** and **OK** buttons at the same time, simply set the `busy` prop to
+`true`. Set it to `false` to re-enable both buttons.
+
+### Custom rendering with slots
+
+`<BModal>` provides several named slots (of which some are optionally scoped) that you can use to
+customize the content of various sections of the modal.
+
+| Slot           | Optionally Scoped | Description                                                                           |
+| -------------- | ----------------- | ------------------------------------------------------------------------------------- |
+| `default`      | Yes               | Main content of the modal                                                             |
+| `title`        | Yes               | Content to place in the modal's title                                                 |
+| `header`       | Yes               | Content to place in the header. Replaces the entire header including the close button |
+| `footer`       | Yes               | Content to place in the footer. Replaces the entire footer including the button(s)    |
+| `ok`           | Yes               | Content to place inside the footer OK button                                          |
+| `cancel`       | Yes               | Content to place inside the footer CANCEL button                                      |
+| `header-close` | No                | Content to place inside the header CLOSE (`x`) button                                 |
+
+The scope available to the slots that support optional scoping are:
+
+| Method or Property | Description                                                                                     |
+| ------------------ | ----------------------------------------------------------------------------------------------- |
+| `ok()`             | Closes the modal and fires the `ok` and `hide` events, with `trigger = 'ok'`                    |
+| `cancel()`         | Closes the modal and fires the `cancel` and `hide` events, with `trigger = 'cancel'`            |
+| `close()`          | Closes the modal and fires the `close` and `hide` events, with `trigger = 'close'`              |
+| `hide(trigger)`    | Closes the modal and fires the `hide` event, with the `trigger = trigger` (trigger is optional) |
+| `visible`          | The visibility state of the modal. `true` if the modal is visible and `false` if not visible    |
+
+#### Example modal using custom scoped slots
+
+<<< DEMO ./demo/ModalScopedSlots.vue
 
 ## Multiple Modal Support
 
-<HighlightCard>
-  <BButton @click="nestedModal1 = !nestedModal1">Open First Modal</BButton>
-  <BModal v-model="nestedModal1" size="lg" title="First Modal" ok-only no-stacking>
-    <p class="my-2">First Modal</p>
-    <BButton @click="nestedModal2 = !nestedModal2">Open Second Modal</BButton>
-  </BModal>
-  <BModal v-model="nestedModal2" title="Second Modal" ok-only>
-    <p class="my-2">Second Modal</p>
-    <BButton @click="nestedModal3 = !nestedModal3" size="sm">Open Third Modal</BButton>
-  </BModal>
-  <BModal v-model="nestedModal3" size="sm" title="Third Modal" ok-only>
-    <p class="my-1">Third Modal</p>
-    <BButton @click="nestedModal4 = !nestedModal4" size="sm">Open Fouth Modal</BButton>
-  </BModal>
-  <BModal v-model="nestedModal4" size="sm" title="Fourth Modal" ok-only>
-    <p class="my-1">Fourth Modal</p>
-  </BModal>
-  <template #html>
-
-```vue
-<template>
-  <BButton @click="nestedModal1 = !nestedModal1">Open First Modal</BButton>
-
-  <BModal v-model="nestedModal1" size="lg" title="First Modal" ok-only no-stacking>
-    <p class="my-2">First Modal</p>
-    <BButton @click="nestedModal2 = !nestedModal2">Open Second Modal</BButton>
-  </BModal>
-
-  <BModal v-model="nestedModal2" title="Second Modal" ok-only>
-    <p class="my-2">Second Modal</p>
-    <BButton @click="nestedModal3 = !nestedModal3" size="sm">Open Third Modal</BButton>
-  </BModal>
-
-  <BModal v-model="nestedModal3" size="sm" title="Third Modal" ok-only>
-    <p class="my-1">Third Modal</p>
-    <BButton @click="nestedModal4 = !nestedModal4" size="sm">Open Fouth Modal</BButton>
-  </BModal>
-  <BModal v-model="nestedModal4" size="sm" title="Fourth Modal" ok-only>
-    <p class="my-1">Fourth Modal</p>
-  </BModal>
-</template>
+BootstrapVueNext supports multiple modals opened at the same time with automatic stacking management.
 
-<script setup lang="ts">
-const nestedModal1 = ref(false)
-const nestedModal2 = ref(false)
-const nestedModal3 = ref(false)
-const nestedModal4 = ref(false)
-</script>
-<style>
-/* just a little example of the variables and classes for stack */
-.modal {
-  --bs-modal-zindex: 1900;
-  transform: translate(
-    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px),
-    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px)
-  );
-  transition:
-    transform 0.5s,
-    opacity 0.15s linear !important;
-}
-.modal:not(.stack-inverse-position-0) {
-  opacity: calc(1 - ((var(--b-count, 0) - var(--b-position, 0)) * 0.1));
-}
-.modal-backdrop:not(.stack-inverse-position-0) {
-  opacity: 0 !important;
-}
-</style>
-```
-
-  </template>
-</HighlightCard>
+To disable stacking for a specific modal, set the `no-stacking` prop on the `<BModal>`
+component. This will hide the modal before another modal is shown.
+
+<<< DEMO ./demo/ModalMultipleSupport.vue
+
+### Modal Stacking Behavior
+
+- **Automatic Z-Index Management**: BootstrapVueNext automatically manages z-index values for stacked modals
+- **CSS Variables**: The system uses CSS variables (`--b-count`, `--b-position`) for positioning and styling
+- **Visual Offset**: Each modal is slightly offset from the previous one for visual clarity
+- **Backdrop Management**: Only the topmost modal's backdrop is fully opaque
+
+### Stacking CSS Variables
+
+BootstrapVueNext provides CSS variables that you can use to customize stacked modal appearance:
+
+- `--b-count`: Total number of active modals
+- `--b-position`: Position of the current modal in the stack (0-based)
+- `--b-inverse-position`: Inverse position for reverse calculations
+
+**Notes:**
+
+- Avoid nesting a `<BModal>` _inside_ another `<BModal>`, as it may be constrained to the boundaries of the parent modal dialog
+- The backdrop opacity is automatically adjusted for better visual hierarchy
+- Use `no-stacking` prop to prevent a modal from participating in the stacking system
 
 ## Programmatically Control
 
@@ -247,43 +296,85 @@ To programmatically create modals, refer to the documentation at [useModal](/doc
 If you're looking for replacements for `$bvModal.msgBoxOk` and `$bvModal.msgBoxConfirm` please see the
 [migration guide](/docs/migration-guide#replacement-for-modal-message-boxes)
 
+## Accessibility
+
+`<BModal>` provides several accessibility features, including auto focus, return focus, keyboard
+(tab) _focus containment_, and automated `aria-*` attributes.
+
+**Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
+query. See the
+[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
+additional details.
+
+### Modal ARIA attributes
+
+The `aria-labelledby` and `aria-describedby` attributes will appear on the modal automatically in
+most cases.
+
+- The `aria-labelledby` attribute will **not** be present if you have the header hidden, or supplied
+  your own header, or have not supplied a modal title. It is recommended to supply a title for your
+  modals (when using the built in header). You can visually hide the header title, but still make it
+  available to screen readers by setting the `titleVisuallyHidden` prop.
+- The `aria-describedby` attribute will always point to the modal's body content.
+- For accessibility, you can provide additional ARIA attributes directly on the modal component using standard HTML attributes.
+
+### Auto focus on open
+
+`<BModal>` will autofocus the modal _container_ when opened.
+
+You can pre-focus an element within the `<BModal>` by listening to the `<BModal>` `shown` event,
+and call the element's `focus()` method. `<BModal>` will not attempt to autofocus if an element
+already has focus within the `<BModal>`.
+
+<<< DEMO ./demo/ModalAccessibilityFocus.vue
+
+Alternatively, if using `BForm*` form controls, you can use the `autofocus` prop to automatically
+focus a form control when the modal opens.
+
+If you want to auto focus one of the _built-in_ modal buttons (`ok`, `cancel` or the header `close`
+button, you can set the prop `focus` to one of the values `'ok'`, `'cancel'` or
+`'close'` and `<BModal>` will focus the specified button if it exists.
+
+<p class="alert alert-warning">
+  <strong>Note:</strong> it is <strong>not recommended</strong> to autofocus an input or control
+  inside of a modal for accessibility reasons, as screen reader users will not know the context of
+  where the input is (the announcement of the modal may not be spoken). It is best to let
+  <code>&lt;b-modal&gt;</code> focus the modal's container, allowing the modal information to be
+  spoken to the user, and then allow the user to tab into the input.
+</p>
+
+### Returning focus to the triggering element
+
+For accessibility reasons, it is desirable to return focus to the element that triggered the opening
+of the modal, when the modal closes.
+
+`<BModal>` will automatically determine which element had focus before the modal was
+opened, and will return the focus to that element when the modal has hidden. This is handled automatically by the focus trap system unless `noTrap` is set to `true`.
+
+### Keyboard navigation
+
+When tabbing through elements within a `<BModal>`, if focus attempts to leave the modal into the
+document, it will be brought back into the modal by the focus trap system.
+
+Avoid setting `tabindex` on elements within the modal to any value other than `0` or `-1`. Doing so
+will make it difficult for people who rely on assistive technology to navigate and operate page
+content and can make some of your elements unreachable via keyboard navigation.
+
+You can disable the focus trap feature completely by setting the `noTrap` prop to `true`, although this is _highly discouraged_ for accessibility reasons. When `noTrap` is enabled, focus management becomes manual and you'll need to handle focus return yourself.
+
+### Focus Management
+
+BootstrapVueNext uses the `focus` prop to control initial focus behavior when the modal opens. You can:
+
+- Set `focus` to `'ok'`, `'cancel'`, or `'close'` to focus the respective built-in button
+- Set `focus` to an element reference, ID string, or CSS selector to focus a specific element
+- Set `focus` to `false` to prevent automatic focusing (not recommended for accessibility)
+- Leave `focus` undefined to use the default focus behavior (focuses the modal container)
+
+<!-- Component reference added automatically from component package.json -->
+
 <ComponentReference :data="data" />
 
 <script setup lang="ts">
 import {data} from '../../data/components/modal.data'
-import ComponentReference from '../../components/ComponentReference.vue'
-import HighlightCard from '../../components/HighlightCard.vue'
-import {vBModal} from 'bootstrap-vue-next/directives/BModal'
-import {ref, nextTick} from 'vue'
-
-const modal = ref(false)
-
-const preventableModal = ref(false)
-const preventModal = ref(true)
-const preventFn = (e: Event) => {
-  if (preventModal.value)
-    e.preventDefault()
-}
-
-const nestedModal1 = ref(false)
-const nestedModal2 = ref(false)
-const nestedModal3 = ref(false)
-const nestedModal4 = ref(false)
 </script>
-
-<style>
-.modal {
-  --bs-modal-zindex: 1900;
-  transform: translate(
-    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px),
-    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px)
-  );
-  transition: transform 0.5s, opacity 0.15s linear !important;
-}
-.modal:not(.stack-inverse-position-0) {
-  opacity: calc(1 - ((var(--b-count, 0) - var(--b-position, 0)) * 0.1));
-}
-.modal-backdrop:not(.stack-inverse-position-0) {
-  opacity: 0 !important;
-}
-</style>
diff --git a/apps/docs/src/docs/demo/ModalConfirm.vue b/apps/docs/src/docs/demo/ModalConfirm.vue
index 49583d205..59ca0056c 100644
--- a/apps/docs/src/docs/demo/ModalConfirm.vue
+++ b/apps/docs/src/docs/demo/ModalConfirm.vue
@@ -6,20 +6,21 @@
 </template>
 
 <script setup lang="ts">
-import type {BvTriggerableEvent} from 'bootstrap-vue-next'
 import {useModal} from 'bootstrap-vue-next/composables/useModal'
 
 import {ref} from 'vue'
 
 const {create} = useModal()
-const confirmResult = ref<boolean | null | BvTriggerableEvent>(null)
+const confirmResult = ref<boolean | null | undefined>(null)
 
 const confirmBox = async () => {
-  confirmResult.value = await create({
+  const value = await create({
     body: 'Are you sure you want to do this?',
     title: 'Confirm',
     okTitle: 'Yes',
     cancelTitle: 'No',
-  })
+  }).show()
+  confirmResult.value =
+    typeof value === 'object' && value !== null && 'ok' in value ? value.ok : null
 }
 </script>
diff --git a/apps/docs/src/docs/demo/ModalHeaderCloseBSV.vue b/apps/docs/src/docs/demo/ModalHeaderCloseBSV.vue
new file mode 100644
index 000000000..54fc1e729
--- /dev/null
+++ b/apps/docs/src/docs/demo/ModalHeaderCloseBSV.vue
@@ -0,0 +1,6 @@
+<template>
+  <!-- #region template -->
+  <!-- BootstrapVue -->
+  <BModal header-close-content="✕"> Modal content </BModal>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/demo/ModalHeaderCloseBSVN.vue b/apps/docs/src/docs/demo/ModalHeaderCloseBSVN.vue
new file mode 100644
index 000000000..7915bcca4
--- /dev/null
+++ b/apps/docs/src/docs/demo/ModalHeaderCloseBSVN.vue
@@ -0,0 +1,9 @@
+<template>
+  <!-- #region template -->
+  <!-- BootstrapVueNext -->
+  <BModal>
+    <template #header-close> ✕ </template>
+    Modal content
+  </BModal>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/demo/ModalMessageBox.vue b/apps/docs/src/docs/demo/ModalMessageBox.vue
index 562ee8d8c..961d15f76 100644
--- a/apps/docs/src/docs/demo/ModalMessageBox.vue
+++ b/apps/docs/src/docs/demo/ModalMessageBox.vue
@@ -6,19 +6,19 @@
 </template>
 
 <script setup lang="ts">
-import type {BvTriggerableEvent} from 'bootstrap-vue-next'
 import {useModal} from 'bootstrap-vue-next/composables/useModal'
 import {ref} from 'vue'
 
 const {create} = useModal()
 
-const okResult = ref<boolean | null | BvTriggerableEvent>(null)
+const okResult = ref<boolean | null | undefined>(null)
 
 const okBox = async () => {
-  okResult.value = await create({
+  const value = await create({
     body: 'This is an informational message',
     title: 'Message',
     okOnly: true,
-  })
+  }).show()
+  okResult.value = typeof value === 'object' && value !== null && 'ok' in value ? value.ok : null
 }
 </script>
diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md
index bb7797298..aa1733124 100644
--- a/apps/docs/src/docs/migration-guide.md
+++ b/apps/docs/src/docs/migration-guide.md
@@ -607,10 +607,163 @@ flex utility classes. See their [documentation](https://getbootstrap.com/docs/5.
 
 ### BModal
 
-<NotYetDocumented type="component"/>
+<NotYetImplemented/> `footer-tag` and `header-tag`
+
+#### Removed Global Modal Management
+
+**$bvModal instance methods are deprecated:**
+
+- `this.$bvModal.show(id)` → Use `useModal` composable or template refs with `.show()`
+- `this.$bvModal.hide(id)` → Use `useModal` composable or template refs with `.hide()`
+- `this.$bvModal.msgBoxOk()` → Use `useModal().create()` with `ok-only` prop - see [below](#replacement-for-modal-message-boxes)
+- `this.$bvModal.msgBoxConfirm()` → Use `useModal().create()`- see [below](#replacement-for-modal-message-boxes)
+
+**$root event system is deprecated:**
+
+- `$root.$emit('bv::show::modal', id)` → Use composables or template refs
+- `$root.$emit('bv::hide::modal', id)` → Use composables or template refs
+- `$root.$emit('bv::toggle::modal', id)` → Use composables or template refs
+
+**Alternative approaches:**
+
+Please see [useModal](/docs/composables/useModal) and [useToggle](/docs/composables/useToggle) for alternative methods of
+accessing modals globally.
+
+#### Modal Event System Changes
+
+The event system has been significantly updated in BootstrapVueNext:
+
+There is no concept of listening to modal changes via `$root` events.
+
+**New Events**: BootstrapVueNext adds several new events not present in BootstrapVue:
+
+- `backdrop` - Emitted when the backdrop is clicked
+- `esc` - Emitted when the Esc key is pressed
+- `show-prevented`, `hide-prevented`, `toggle-prevented` - Emitted when actions are prevented
+
+**Event Object Changes**: The event object structure has changed:
+
+- `BvModalEvent` is now `BvTriggerableEvent`
+- `vueTarget` property is **no longer available** - use template refs or the `target` property instead
+- Event properties are now more consistent across all BootstrapVueNext components
+
+**Trigger Values**: The `trigger` property values have been simplified:
+
+- BootstrapVue: `'headerclose'` → BootstrapVueNext: `'close'`
+- All other trigger values remain the same: `'ok'`, `'cancel'`, `'esc'`, `'backdrop'`
+
+#### Modal Props Changes
+
+**Renamed props:**
+
+- `hide-header-close` → `no-header-close`
+- `hide-footer` → `no-footer`
+- `hide-header` → `no-header`
+- `hide-backdrop` → `no-backdrop`
+- `no-enforce-focus` → `no-trap`
+- `title-sr-only` → `title-visually-hidden`
+
+**Removed props (not implemented in BootstrapVueNext):**
+
+- `aria-label` - Use standard HTML attributes directly on the component. **Note**: Unlike BootstrapVue, BootstrapVueNext does not automatically remove `aria-labelledby` when `aria-label` is present. If using `aria-label`, set `no-header="true"` to prevent conflicts, or ensure your `aria-label` is descriptive enough to work alongside `aria-labelledby`
+- `auto-focus-button` - Use the `focus` prop with values `'ok'`, `'cancel'`, or `'close'`
+- `ignore-enforce-focus-selector` - Use `no-trap` to disable focus trapping entirely
+- `return-focus` - Focus return is handled automatically by the focus trap system
+- `static` - All modals use teleport by default. Use `teleport-disabled` for local rendering
 
 See the [v-html](#v-html) section for information on deprecation of the `cancel-title-html`, `ok-title-html`, and `title-html` props.
 
+**New props in BootstrapVueNext:**
+
+- `teleport-to` - Specify where the modal should be teleported (default: `'body'`)
+- `teleport-disabled` - Render modal in place instead of teleporting
+- `body-scrolling` - Allow body scrolling while modal is open
+- `backdrop-first` - Control backdrop animation timing
+- `no-trap` - Disable focus trapping (replaces `no-enforce-focus`)
+- `focus` - Enhanced focus control replacing `auto-focus-button`
+- `title-visually-hidden` - Hide title visually but keep for screen readers
+- `header-close-variant` - Control close button variant
+- `header-close-label` - Accessibility label for close button
+- `lazy` - **Available in BootstrapVueNext** - When set, the content will not be mounted until opened
+- `no-fade` - **Available in BootstrapVueNext** - Disables animation (alias for `no-animation`)
+- `no-animation` - Disables animation
+- `unmount-lazy` - When set and `lazy` is true, content will be unmounted when closed
+- `initial-animation` - When set, enables the initial animation on mount
+
+**Changed behavior:**
+
+- `header-close-content` - This prop is **removed** in BootstrapVueNext. In BootstrapVue, this prop allowed customizing the close button content (defaulted to `'&times;'`). In BootstrapVueNext, use the `header-close` slot instead, which provides more flexibility than the simple string prop:
+
+<<< FRAGMENT ./demo/ModalHeaderCloseBSV.vue#template{vue-html}
+
+<<< FRAGMENT ./demo/ModalHeaderCloseBSVN.vue#template{vue-html}
+
+#### 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       | BootstrapVueNext |
+| ------------------ | ---------------- |
+| default            | default          |
+| modal-backdrop     | backdrop         |
+| modal-cancel       | cancel           |
+| modal-footer       | footer           |
+| modal-header       | header           |
+| modal-header-close | header-close     |
+| modal-ok           | ok               |
+| modal-title        | title            |
+
+#### Modal Slot Scoped Variables Changes
+
+The scoped variables available to modal slots have changed between BootstrapVue and BootstrapVueNext:
+
+**BootstrapVue slot scope:**
+
+```typescript
+{
+  ok: () => void,       // Closes modal with trigger 'ok'
+  cancel: () => void,   // Closes modal with trigger 'cancel'
+  close: () => void,    // Closes modal with trigger 'headerclose'
+  hide: (trigger?: string) => void, // Closes modal with custom trigger
+  visible: boolean      // Boolean visibility state
+}
+```
+
+**BootstrapVueNext slot scope (BModalSlotsData):**
+
+```typescript
+interface BModalSlotsData extends ShowHideSlotsData {
+  cancel: () => void // Closes modal with trigger 'cancel'
+  close: () => void // Closes modal with trigger 'close' (note: 'close' not 'headerclose')
+  ok: () => void // Closes modal with trigger 'ok'
+}
+
+interface ShowHideSlotsData {
+  id: string // Modal ID string
+  show: () => void // Show the modal
+  hide: (trigger?: string, noTriggerEmit?: boolean) => void // Enhanced hide method
+  toggle: () => void // Toggle modal visibility
+  active: boolean // Boolean - true when modal is active/visible
+  visible: boolean // Boolean - same as active, for compatibility
+}
+```
+
+**Key changes:**
+
+- **New properties**: `id`, `show()`, `toggle()` are now available
+- **Enhanced `hide()` method**: Now accepts optional `noTriggerEmit` parameter
+- **Trigger value change**: `close()` now emits trigger `'close'` instead of `'headerclose'`
+- **Dual visibility properties**: Both `active` and `visible` provide the same visibility state
+
+#### Modal Z-Index and Stacking Changes
+
+BootstrapVueNext has completely rewritten modal stacking:
+
+- **Automatic z-index management**: No manual z-index calculation needed
+- **CSS variables for stacking**: Uses `--b-position`, `--b-inverse-position`, `--b-count`
+- **Stack positioning classes**: Automatically applies `.stack-position-*` classes
+- **Multiple modal support**: Enhanced support for multiple modals with proper layering
+
 #### Replacement for Modal Message boxes
 
 [BootstrapVue](https://bootstrap-vue.github.io/bootstrap-vue/docs/components/modal#modal-message-boxes) provided two methods on the `this.$bvModal` object called `msgBoxOk` and `msgBoxConfirm`.
@@ -635,19 +788,33 @@ The `create` method accepts all properties defined on
 
 See [Show and Hide](#show-and-hide) shared properties.
 
-#### Replacement for Modal slots
+#### Modal Focus Management 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):
+BootstrapVueNext uses a modern focus trap system with enhanced accessibility:
 
-| BootstrapVue       | BootstrapVueNext |
-| ------------------ | ---------------- |
-| default            | default          |
-| modal-title        | title            |
-| modal-header       | header           |
-| modal-footer       | footer           |
-| modal-ok           | ok               |
-| modal-cancel       | cancel           |
-| modal-header-close | header-close     |
+**Enhanced focus prop**: The `focus` prop replaces `auto-focus-button` and accepts:
+
+- `'ok'`, `'cancel'`, `'close'` - Focus built-in buttons
+- Element references, selectors, or HTMLElements for custom focus targets
+- `false` to disable initial focus (not recommended for accessibility)
+
+**Automatic focus return**: Focus is automatically returned to the triggering element when the modal closes,
+eliminating the need for:
+
+- `return-focus` prop - Handled automatically by focus trap
+- Manual focus management in most cases
+
+**Focus trapping**: Enabled by default using `@vueuse/integrations/useFocusTrap`:
+
+- `no-trap` replaces `no-enforce-focus` to disable focus trapping
+- `ignore-enforce-focus-selector` is not available - use `no-trap` if needed
+- Focus automatically cycles within the modal
+
+**ARIA improvements**:
+
+- `title-visually-hidden` replaces `title-sr-only` with better semantic naming
+- Standard HTML `aria-*` attributes work directly on the component
+- Enhanced screen reader support with proper labeling
 
 ### BNav
 
diff --git a/apps/docs/src/template-types.d.ts b/apps/docs/src/template-types.d.ts
new file mode 100644
index 000000000..5e6c79002
--- /dev/null
+++ b/apps/docs/src/template-types.d.ts
@@ -0,0 +1,35 @@
+// Type declarations for template raw imports
+declare module '*/templates/vite/index.html?raw' {
+  const content: string
+  export default content
+}
+
+declare module '*/templates/vite/src/main.ts?raw' {
+  const content: string
+  export default content
+}
+
+declare module '*/templates/vite/src/App.vue?raw' {
+  const content: string
+  export default content
+}
+
+declare module '*/templates/vite/package.json?raw' {
+  const content: string
+  export default content
+}
+
+declare module '*/templates/vite/vite.config.mts?raw' {
+  const content: string
+  export default content
+}
+
+declare module '*/templates/vite/tsconfig.json?raw' {
+  const content: string
+  export default content
+}
+
+declare module '*/templates/vite/tsconfig.node.json?raw' {
+  const content: string
+  export default content
+}
diff --git a/apps/docs/src/utils/commonProps.ts b/apps/docs/src/utils/commonProps.ts
index fde23cf11..338f7170b 100644
--- a/apps/docs/src/utils/commonProps.ts
+++ b/apps/docs/src/utils/commonProps.ts
@@ -77,6 +77,16 @@ const commonProps = () =>
       description:
         'Applies one of the Bootstrap theme color variants to background of the component',
     },
+    body: {
+      type: 'string',
+      default: undefined,
+      description: 'The text content of the body',
+    },
+    bodyAttrs: {
+      type: 'Readonly<AttrsValue>',
+      default: undefined,
+      description: 'Attributes to be applied to the body of the component',
+    },
     bodyBgVariant: {
       type: 'ColorVariant | null',
       default: undefined,
@@ -140,7 +150,6 @@ const commonProps = () =>
       description:
         'When set, renders a single control form with a floating label. This only works for forms where the immediate children are a label and one of the supported controls. See above for details.',
     },
-
     footer: {
       type: 'string',
       default: undefined,
diff --git a/apps/docs/src/vite-env.d.ts b/apps/docs/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/apps/docs/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/docs/tsconfig.app.json b/apps/docs/tsconfig.app.json
index 509d77fe2..2a0f406bc 100644
--- a/apps/docs/tsconfig.app.json
+++ b/apps/docs/tsconfig.app.json
@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": [".vitepress/**/*", "**/*.vue", "**/*.ts"],
+  "include": [".vitepress/**/*", "**/*.vue", "**/*.ts", "src/template-types.d.ts"],
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",
diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md
index 3855ef0a5..f18f7b971 100644
--- a/packages/bootstrap-vue-next/CHANGELOG.md
+++ b/packages/bootstrap-vue-next/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## [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))
+
 ## [0.40.5](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.40.4...bootstrapvuenext-v0.40.5) (2025-09-23)
 
 
diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json
index f9ddff853..fff274b98 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.5",
+  "version": "0.40.6",
   "license": "MIT",
   "main": "./dist/bootstrap-vue-next.umd.js",
   "module": "./dist/bootstrap-vue-next.mjs",
diff --git a/packages/bootstrap-vue-next/src/App.vue b/packages/bootstrap-vue-next/src/App.vue
index b59fab74c..bef8a39fa 100644
--- a/packages/bootstrap-vue-next/src/App.vue
+++ b/packages/bootstrap-vue-next/src/App.vue
@@ -1,15 +1,13 @@
 <template>
-  <BApp>
-    <BContainer>
-      <BRow>
-        <BCol> Hello World! </BCol>
-      </BRow>
-    </BContainer>
-  </BApp>
+  <BContainer>
+    <BRow>
+      <BCol> Hello World! </BCol>
+    </BRow>
+  </BContainer>
 </template>
 
 <script setup lang="ts">
 // You can use this file as a development spot to test your changes
 // Please do not commit this file
-import {BApp, BCol, BContainer, BRow} from './components'
+import {BCol, BContainer, BRow} from './components'
 </script>
diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModalOrchestrator.vue b/packages/bootstrap-vue-next/src/components/BModal/BModalOrchestrator.vue
index 5dfcb2524..8d55f666c 100644
--- a/packages/bootstrap-vue-next/src/components/BModal/BModalOrchestrator.vue
+++ b/packages/bootstrap-vue-next/src/components/BModal/BModalOrchestrator.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import {useDefaults} from '../../composables/useDefaults'
 import type {BModalOrchestratorProps} from '../../types/ComponentProps'
-import {useModal} from '../../composables'
+import {useModal} from '../../composables/useModal'
 import ConditionalTeleport from '../ConditionalTeleport.vue'
 import BOrchestrator from '../BApp/BOrchestrator.vue'
 
diff --git a/packages/bootstrap-vue-next/src/composables/index.ts b/packages/bootstrap-vue-next/src/composables/index.ts
index c2a3fc273..28d58bca9 100644
--- a/packages/bootstrap-vue-next/src/composables/index.ts
+++ b/packages/bootstrap-vue-next/src/composables/index.ts
@@ -1,6 +1,7 @@
 export {useBreadcrumb} from './useBreadcrumb'
 export {useColorMode} from './useColorMode'
 export {useModal, useModalController} from './useModal'
+export {useScrollLock} from './useScrollLock'
 export {useScrollspy} from './useScrollspy'
 export {useToast, useToastController} from './useToast'
 export {useToggle} from './useToggle'
diff --git a/packages/bootstrap-vue-next/src/main.ts b/packages/bootstrap-vue-next/src/main.ts
index 7b9aaec6e..e2537aa6d 100644
--- a/packages/bootstrap-vue-next/src/main.ts
+++ b/packages/bootstrap-vue-next/src/main.ts
@@ -2,7 +2,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import {createApp, h} from 'vue'
 import {createRouter, createWebHistory, useRoute} from 'vue-router'
 import App from './App.vue'
-import {Directives} from './index'
+import {BApp, Directives} from './index'
 import './styles/styles.scss'
 const router = createRouter({
   history: createWebHistory(),
@@ -43,7 +43,14 @@ const router = createRouter({
   ],
 })
 
-const app = createApp(App)
+const Wrapper = {
+  name: 'AppWrapper',
+  render() {
+    return h(BApp, null, {default: () => h(App)})
+  },
+}
+
+const app = createApp(Wrapper)
 app.use(router)
 for (const name in Directives) {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts b/packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts
index de965d025..46da9bd12 100644
--- a/packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts
+++ b/packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts
@@ -140,6 +140,7 @@ export const composablesWithExternalPath = {
   useColorMode: '/composables/useColorMode',
   useModal: '/composables/useModal',
   useModalController: '/composables/useModal',
+  useScrollLock: '/composables/useScrollLock',
   useScrollspy: '/composables/useScrollspy',
   useToast: '/composables/useToast',
   useToastController: '/composables/useToast',
diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md
index 2fe20a9b5..1dc5f12fb 100644
--- a/packages/nuxt/CHANGELOG.md
+++ b/packages/nuxt/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## [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
+
+
+### 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
+
 ## [0.40.5](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.40.4...nuxt-v0.40.5) (2025-09-23)
 
 
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index dea83dbd8..e8d351435 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.5",
+  "version": "0.40.6",
   "license": "MIT",
   "author": {
     "name": "Issayah",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 347a0f74d..0ce827626 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@rushstack/eslint-patch':
         specifier: ^1.12.0
         version: 1.12.0
+      '@stackblitz/sdk':
+        specifier: ^1.11.0
+        version: 1.11.0
       '@toycode/markdown-it-class':
         specifier: ^1.2.4
         version: 1.2.4
@@ -2085,6 +2088,9 @@ packages:
   '@speed-highlight/core@1.2.7':
     resolution: {integrity: sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==}
 
+  '@stackblitz/sdk@1.11.0':
+    resolution: {integrity: sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==}
+
   '@stylistic/eslint-plugin@5.2.0':
     resolution: {integrity: sha512-RCEdbREv9EBiToUBQTlRhVYKG093I6ZnnQ990j08eJ6uRZh71DXkOnoxtTLfDQ6utVCVQzrhZFHZP0zfrfOIjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -8538,6 +8544,8 @@ snapshots:
 
   '@speed-highlight/core@1.2.7': {}
 
+  '@stackblitz/sdk@1.11.0': {}
+
   '@stylistic/eslint-plugin@5.2.0(eslint@9.31.0(jiti@2.4.2))':
     dependencies:
       '@eslint-community/eslint-utils': 4.7.0(eslint@9.31.0(jiti@2.4.2))