diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index ba99faaaf..8a7afb618 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/bootstrap-vue-next": "0.24.10",
-  "packages/nuxt": "0.24.10"
+  "packages/bootstrap-vue-next": "0.24.11",
+  "packages/nuxt": "0.24.11"
 }
diff --git a/apps/docs/.vitepress/config.mts b/apps/docs/.vitepress/config.mts
index 0a6e0841e..47c0b90ca 100644
--- a/apps/docs/.vitepress/config.mts
+++ b/apps/docs/.vitepress/config.mts
@@ -1,6 +1,9 @@
 import {defineConfig} from 'vitepress'
 import Icons from 'unplugin-icons/vite'
-import markdonnwItClass from '@toycode/markdown-it-class'
+import markdownItClass from '@toycode/markdown-it-class'
+import {demoContainer} from './plugins/demo-container'
+import Components from 'unplugin-vue-components/vite'
+import {BootstrapVueNextResolver} from 'bootstrap-vue-next'
 
 const title = 'BootstrapVueNext'
 const description = 'Quickly and Easily Integrate Bootstrap V5 Components With Vue 3'
@@ -23,7 +26,16 @@ export default defineConfig({
     ['meta', {property: 'twitter:description', name: 'twitter:description', content: description}],
   ],
   vite: {
-    plugins: [Icons()],
+    plugins: [
+      Icons(),
+      Components({
+        dirs: ['components', 'docs/components/demo'],
+        extensions: ['vue'],
+        dts: true,
+        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+        resolvers: [BootstrapVueNextResolver()],
+      }),
+    ],
   },
   locales: {
     root: {
@@ -42,7 +54,8 @@ export default defineConfig({
   },
   markdown: {
     config: (md) => {
-      md.use(markdonnwItClass, {table: ['table', 'table-striped']})
+      md.use(markdownItClass, {table: ['table', 'table-striped']})
+      md.use(demoContainer, 'src')
     },
   },
 })
diff --git a/apps/docs/.vitepress/markdown-it-class.d.ts b/apps/docs/.vitepress/markdown-it-class.d.ts
new file mode 100644
index 000000000..df32e882a
--- /dev/null
+++ b/apps/docs/.vitepress/markdown-it-class.d.ts
@@ -0,0 +1,5 @@
+declare module '@toycode/markdown-it-class' {
+  import {PluginSimple} from 'markdown-it'
+  const markdownItClass: PluginSimple
+  export default markdownItClass
+}
diff --git a/apps/docs/.vitepress/plugins/demo-container.ts b/apps/docs/.vitepress/plugins/demo-container.ts
new file mode 100644
index 000000000..356165793
--- /dev/null
+++ b/apps/docs/.vitepress/plugins/demo-container.ts
@@ -0,0 +1,83 @@
+import type {MarkdownEnv, MarkdownRenderer} from 'vitepress'
+import type {RuleBlock} from 'markdown-it/lib/parser_block.mjs'
+import path from 'path'
+
+// This plugin is inspired by vitepress' snippet plugin and must run before it to work
+//  It accepts all of the same syntax as the snippet plugin, but will render the demo
+//  _and_ display the example code inside of a HighlightCard component
+
+export const demoContainer = (md: MarkdownRenderer, srcDir: string) => {
+  const blockParser: RuleBlock = (state, startLine, endLine, silent) => {
+    const sentinal = '<<< DEMO '
+    const pos = state.bMarks[startLine] + state.tShift[startLine]
+    const max = state.eMarks[startLine]
+
+    // if it's indented more than 3 spaces, it should be a code block
+    if (state.sCount[startLine] - state.blkIndent >= 4) {
+      return false
+    }
+
+    if (state.src.slice(pos, pos + sentinal.length) !== sentinal) {
+      return false
+    }
+
+    if (silent) {
+      return true
+    }
+
+    const start = pos + sentinal.length
+    const end = state.skipSpacesBack(max, pos)
+
+    const rawPath = state.src.slice(start, end).trim().replace(/^@/, srcDir).trim()
+
+    const {filepath, extension, region, lines, lang, title} = rawPathToToken(rawPath)
+    const component = title.substring(0, title.indexOf('.'))
+
+    state.line += 1
+
+    const prefixToken = state.push('html_block', '', 0)
+    prefixToken.content = `<HighlightCard><${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
+    codeToken.src = [resolvedPath, region.slice(1)]
+    codeToken.markup = '```'
+    codeToken.map = [startLine, startLine + 1]
+
+    const postfixToken = state.push('html_block', '', 0)
+    postfixToken.content = `</template></HighlightCard>`
+
+    return true
+  }
+
+  md.block.ruler.before('snippet', 'demo', blockParser)
+}
+
+/**
+ * raw path format: "/path/to/file.extension#region {meta} [title]"
+ *    where #region, {meta} and [title] are optional
+ *    meta can be like '1,2,4-6 lang', 'lang' or '1,2,4-6'
+ *    lang can contain special characters like C++, C#, F#, etc.
+ *    path can be relative to the current file or absolute
+ *    file extension is optional
+ *    path can contain spaces and dots
+ *
+ * captures: ['/path/to/file.extension', 'extension', '#region', '{meta}', '[title]']
+ */
+const rawPathRegexp =
+  /^(.+?(?:(?:\.([a-z0-9]+))?))(?:(#[\w-]+))?(?: ?(?:{(\d+(?:[,-]\d+)*)? ?(\S+)?}))? ?(?:\[(.+)\])?$/
+
+function rawPathToToken(rawPath: string) {
+  const [filepath = '', extension = '', region = '', lines = '', lang = '', rawTitle = ''] = (
+    rawPathRegexp.exec(rawPath) || []
+  ).slice(1)
+
+  const title = rawTitle || filepath.split('/').pop() || ''
+
+  return {filepath, extension, region, lines, lang, title}
+}
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 7cd224e25..344904c67 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -31,6 +31,7 @@
     "prettier": "^3.2.5",
     "typescript": "^5.4.5",
     "unplugin-icons": "^0.19.0",
+    "unplugin-vue-components": "^0.27.0",
     "vitepress": "1.1.4",
     "vue": "^3.4.27"
   },
diff --git a/apps/docs/src/data/components/buttonToolbar.data.ts b/apps/docs/src/data/components/buttonToolbar.data.ts
index 466d96262..78fe5096c 100644
--- a/apps/docs/src/data/components/buttonToolbar.data.ts
+++ b/apps/docs/src/data/components/buttonToolbar.data.ts
@@ -1,5 +1,6 @@
 import type {BvnComponentProps} from 'bootstrap-vue-next'
 import type {ComponentReference, PropertyReference} from '../../types'
+import {buildCommonProps, pick} from '../../utils'
 
 export default {
   load: (): ComponentReference[] => [
@@ -7,25 +8,19 @@ export default {
       component: 'BButtonToolbar',
       props: {
         '': {
-          ariaLabel: {
-            type: 'string',
-            default: 'Group',
-          },
           justify: {
             type: 'boolean',
             default: false,
+            description:
+              'Make the toolbar span the maximum available width, by increasing spacing between the button groups, input groups and dropdowns',
           },
-          role: {
-            type: 'string',
-            default: 'toolbar',
-          },
+          ...pick(buildCommonProps(), ['ariaLabel', 'role']),
         } satisfies Record<keyof BvnComponentProps['BButtonToolbar'], PropertyReference>,
       },
       slots: [
         {
-          description: '',
           name: 'default',
-          scope: [],
+          description: 'Content to place in the button toolbar',
         },
       ],
       emits: [],
diff --git a/apps/docs/src/docs/components/breadcrumb.md b/apps/docs/src/docs/components/breadcrumb.md
index b5a7b9184..e4f05e611 100644
--- a/apps/docs/src/docs/components/breadcrumb.md
+++ b/apps/docs/src/docs/components/breadcrumb.md
@@ -14,26 +14,7 @@ Indicate the current page’s location within a navigational hierarchy that auto
 
 ## Overview
 
-<HighlightCard>
-  <BBreadcrumb :items="breadcrumbItems" />
-  <template #html>
-
-```vue
-<BBreadcrumb :items="breadcrumbItems" />
-
-<script setup lang="ts">
-import type {BreadcrumbItem} from 'bootstrap-vue-next'
-
-const breadcrumbItems = ref<BreadcrumbItem[]>([
-  {text: 'Admin', href: 'https://getbootstrap.com/'},
-  {text: 'Manage', href: '#'},
-  {text: 'Library'},
-])
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/BreadcrumbOverview.vue
 
 ## Breadcrumb items
 
@@ -43,20 +24,7 @@ The active state of last element is automatically set if it is `undefined`.
 
 ### Breadcrumb items as array of strings
 
-<HighlightCard>
-  <BBreadcrumb :items="breadcrumbStringArray" />
-  <template #html>
-
-```vue
-<BBreadcrumb :items="breadcrumbStringArray" />
-
-<script setup lang="ts">
-const breadcrumbStringArray = ['Admin', 'Manage', 'Library']
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/BreadcrumbAsArray.vue
 
 ## Manually placed items
 
@@ -64,34 +32,7 @@ You may also manually place individual `BBreadcrumbItem` child components in the
 the `BBreadcrumb` component, as an alternative to using the `items` prop, for greater control
 over the content of each item:
 
-<HighlightCard>
-  <BBreadcrumb>
-    <BBreadcrumbItem href="#home">
-      Home
-    </BBreadcrumbItem>
-    <BBreadcrumbItem href="#foo">Foo</BBreadcrumbItem>
-    <BBreadcrumbItem href="#bar" @click="alertEvent">Bar</BBreadcrumbItem>
-    <BBreadcrumbItem active>Baz</BBreadcrumbItem>
-  </BBreadcrumb>
-  <template #html>
-
-```vue
-<BBreadcrumb>
-  <BBreadcrumbItem href="#home"> Home </BBreadcrumbItem>
-  <BBreadcrumbItem href="#foo">Foo</BBreadcrumbItem>
-  <BBreadcrumbItem href="#bar" @click="alertEvent">Bar</BBreadcrumbItem>
-  <BBreadcrumbItem active>Baz</BBreadcrumbItem>
-</BBreadcrumb>
-
-<script setup lang="ts">
-const alertEvent = (event: PointerEvent) => {
-  alert(`Event ${event.target}`)
-}
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/BreadcrumbManual.vue
 
 Remember to set the `active` prop on the last item.
 
@@ -103,52 +44,10 @@ Remember to set the `active` prop on the last item.
 Two slots are provided to put additional content before and after the breadcrumb.
 Use slot `prepend` to put content before the breadcrumb. Use slot `append` to put content after the breadcrumb.
 
-<HighlightCard>
-  <BBreadcrumb>
-    <BBreadcrumbItem href="#home">
-      Home
-    </BBreadcrumbItem>
-    <BBreadcrumbItem href="#foo">Foo</BBreadcrumbItem>
-    <BBreadcrumbItem href="#bar">Bar</BBreadcrumbItem>
-    <BBreadcrumbItem active>Baz</BBreadcrumbItem>
-    <template v-slot:prepend><span class="mx-2">prepend text</span></template>
-    <template v-slot:append><span class="mx-2">append text</span></template>
-  </BBreadcrumb>
-  <template #html>
-
-```vue-html
-<BBreadcrumb>
-  <BBreadcrumbItem href="#home"> Home </BBreadcrumbItem>
-  <BBreadcrumbItem href="#foo">Foo</BBreadcrumbItem>
-  <BBreadcrumbItem href="#bar">Bar</BBreadcrumbItem>
-  <BBreadcrumbItem active>Baz</BBreadcrumbItem>
-  <template v-slot:prepend><span class="mx-2">prepend text</span></template>
-  <template v-slot:append><span class="mx-2">append text</span></template>
-</BBreadcrumb>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/BreadcrumbSlots.vue#template{vue-html}
 
 <ComponentReference :data="data" />
 
 <script setup lang="ts">
 import {data} from '../../data/components/breadcrumb.data'
-import {ref} from 'vue';
-import {BBreadcrumbItem, BBreadcrumb} from 'bootstrap-vue-next'
-import ComponentReference from '../../components/ComponentReference.vue'
-import ComponentSidebar from '../../components/ComponentSidebar.vue'
-import HighlightCard from '../../components/HighlightCard.vue'
-
-const breadcrumbItems = ref<BreadcrumbItem[]>([
-  { text: 'Admin', href:'https://getbootstrap.com/'},
-  { text: 'Manage', href:'#'},
-  { text: 'Library'},
-]);
-
-const breadcrumbStringArray = ['Admin', 'Manage', 'Library'];
-
-const alertEvent = (event: PointerEvent) => {
-  alert(`Event ${event.target}`);
-}
 </script>
diff --git a/apps/docs/src/docs/components/demo/BreadcrumbAsArray.vue b/apps/docs/src/docs/components/demo/BreadcrumbAsArray.vue
new file mode 100644
index 000000000..50de25071
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/BreadcrumbAsArray.vue
@@ -0,0 +1,7 @@
+<template>
+  <BBreadcrumb :items="breadcrumbStringArray" />
+</template>
+
+<script setup lang="ts">
+const breadcrumbStringArray = ['Admin', 'Manage', 'Library']
+</script>
diff --git a/apps/docs/src/docs/components/demo/BreadcrumbManual.vue b/apps/docs/src/docs/components/demo/BreadcrumbManual.vue
new file mode 100644
index 000000000..ca72f689b
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/BreadcrumbManual.vue
@@ -0,0 +1,15 @@
+<template>
+  <BBreadcrumb>
+    <BBreadcrumbItem href="#home"> Home </BBreadcrumbItem>
+    <BBreadcrumbItem href="#foo">Foo</BBreadcrumbItem>
+    <BBreadcrumbItem href="#bar" @click="alertEvent">Bar</BBreadcrumbItem>
+    <BBreadcrumbItem active>Baz</BBreadcrumbItem>
+  </BBreadcrumb>
+</template>
+
+<script setup lang="ts">
+const alertEvent = (event: PointerEvent) => {
+  // eslint-disable-next-line no-alert
+  alert(`Event ${event.target}`)
+}
+</script>
diff --git a/apps/docs/src/docs/components/demo/BreadcrumbOverview.vue b/apps/docs/src/docs/components/demo/BreadcrumbOverview.vue
new file mode 100644
index 000000000..740605946
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/BreadcrumbOverview.vue
@@ -0,0 +1,14 @@
+<template>
+  <BBreadcrumb :items="breadcrumbItems" />
+</template>
+
+<script setup lang="ts">
+import {type BreadcrumbItem} from 'bootstrap-vue-next'
+import {ref} from 'vue'
+
+const breadcrumbItems = ref<BreadcrumbItem[]>([
+  {text: 'Admin', href: 'https://getbootstrap.com/'},
+  {text: 'Manage', href: '#'},
+  {text: 'Library'},
+])
+</script>
diff --git a/apps/docs/src/docs/components/demo/BreadcrumbSlots.vue b/apps/docs/src/docs/components/demo/BreadcrumbSlots.vue
new file mode 100644
index 000000000..04ba340fa
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/BreadcrumbSlots.vue
@@ -0,0 +1,12 @@
+<template>
+  <!-- #region template -->
+  <BBreadcrumb>
+    <BBreadcrumbItem href="#home"> Home </BBreadcrumbItem>
+    <BBreadcrumbItem href="#foo">Foo</BBreadcrumbItem>
+    <BBreadcrumbItem href="#bar">Bar</BBreadcrumbItem>
+    <BBreadcrumbItem active>Baz</BBreadcrumbItem>
+    <template #prepend><span class="mx-2">prepend text</span></template>
+    <template #append><span class="mx-2">append text</span></template>
+  </BBreadcrumb>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md
index 949316807..e2c18512b 100644
--- a/apps/docs/src/docs/migration-guide.md
+++ b/apps/docs/src/docs/migration-guide.md
@@ -173,6 +173,11 @@ details.
 The `content` and `text-variant` props have been deprecated since Bootstrap 5 moved to using an
 embedded svg for the close icon. See [their migration guide](https://getbootstrap.com/docs/5.3/migration/#close-button-1) for details.
 
+## BButtonToolbar
+
+[Keyboard navigation](https://bootstrap-vue.org/docs/components/button-toolbar#keyboard-navigation) is
+not implemented.
+
 ## BForm
 
 Bootstrap 5 has dropped form-specific layout classes for the grid system. See the
@@ -280,7 +285,7 @@ BSVN no longer emits the `bv::link::clicked` event on `$root`.
 ### Replacement for Modal Message boxes
 
 [BootstrapVue](https://bootstrap-vue.org/docs/components/modal#modal-message-boxes) provided two methods on the `this.$bvModal` object called `msgBoxOk` and `msgBoxConfirm`.
-In holding with the Vue3 first philosophy, BootstrapVueNext provides a composible called [`useModalController`](/docs/composables/useModalController) that
+In holding with the Vue3 first philosophy, BootstrapVueNext provides a composable called [`useModalController`](/docs/composables/useModalController) that
 fills the same needs (and more).
 
 Please read the [`useModalController`](/docs/composables/useModalController) documentation and then come back here for examples of replacements
diff --git a/apps/docs/src/index.md b/apps/docs/src/index.md
index 0092734d4..e40eef62c 100644
--- a/apps/docs/src/index.md
+++ b/apps/docs/src/index.md
@@ -44,7 +44,7 @@ With BootstrapVueNext you can build fast, responsive, and ARIA accessible projec
 
 ## Overview
 
-With more than 35 components, several directives and composibles (and growing), BootstrapVueNext provides one of the most comprehensive implementations of the Bootstrap v5 component and grid system available for Vue.js v3 / Nuxt.js 3, complete with extensive and automated WAI-ARIA accessibility markup.
+With more than 35 components, several directives and composables (and growing), BootstrapVueNext provides one of the most comprehensive implementations of the Bootstrap v5 component and grid system available for Vue.js v3 / Nuxt.js 3, complete with extensive and automated WAI-ARIA accessibility markup.
 
 <div class="d-flex gap-2 mt-4">
   <BButton :to="withBase('/docs')" variant="primary">Get Started</BButton>
diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md
index b971238df..c83965626 100644
--- a/packages/bootstrap-vue-next/CHANGELOG.md
+++ b/packages/bootstrap-vue-next/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.24.11](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.10...bootstrapvuenext-v0.24.11) (2024-08-27)
+
+
+### Bug Fixes
+
+* **BPagination:** Correctly position ellipses when hideGotoEndButtons=true. ([#2148](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2148)) ([d708aa4](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/d708aa484200128799f40b69c0e66973d2e0f5f2))
+* **BPagination:** Get rid of bad binding on li ([#2150](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2150)) ([182dbc7](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/182dbc7971456e80cdbf257d9700d61d43b106ba))
+* pass attributes through in BDropdownItemButton ([#2143](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2143)) ([951bbf0](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/951bbf07bf7f4d99616da965b723014594cd6d41))
+
 ## [0.24.10](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.24.9...bootstrapvuenext-v0.24.10) (2024-08-20)
 
 
diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json
index 3388439ac..ed3862689 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.24.10",
+  "version": "0.24.11",
   "license": "MIT",
   "main": "./dist/bootstrap-vue-next.umd.js",
   "module": "./dist/bootstrap-vue-next.mjs",
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItemButton.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItemButton.vue
index d3cda157b..4a75ca488 100644
--- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItemButton.vue
+++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItemButton.vue
@@ -1,11 +1,12 @@
 <template>
-  <li role="presentation">
+  <li role="presentation" :class="wrapperClass" v-bind="props.wrapperAttrs">
     <button
       role="menu"
       type="button"
       class="dropdown-item"
       :class="computedClasses"
       :disabled="props.disabled"
+      v-bind="attrs"
       @click="clicked"
     >
       <slot />
@@ -16,7 +17,7 @@
 <script setup lang="ts">
 import {useDefaults} from '../../composables'
 import type {BDropdownItemButtonProps} from '../../types'
-import {computed} from 'vue'
+import {computed, useAttrs} from 'vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -28,6 +29,7 @@ const _props = withDefaults(defineProps<BDropdownItemButtonProps>(), {
   buttonClass: undefined,
   disabled: false,
   variant: null,
+  wrapperAttrs: undefined,
 })
 const props = useDefaults(_props, 'BDropdownItemButton')
 
@@ -35,6 +37,8 @@ const emit = defineEmits<{
   click: [value: MouseEvent]
 }>()
 
+const {class: wrapperClass, ...attrs} = useAttrs()
+
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   default?: (props: Record<string, never>) => any
diff --git a/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue b/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue
index 3e5790b0c..9fa12c930 100644
--- a/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue
+++ b/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue
@@ -6,40 +6,26 @@
     :aria-disabled="props.disabled"
     :aria-label="props.ariaLabel || undefined"
   >
-    <ReusableButton.define v-slot="{button, li, text, clickHandler}">
-      <li v-bind="li">
-        <component v-bind="button" :is="button.is" @click="clickHandler">
-          <slot
-            :name="text.name"
-            :disabled="text.disabled"
-            :page="text.page"
-            :index="text.index"
-            :active="text.active"
-            :content="text.value"
-          >
-            {{ text.value }}
-          </slot>
-        </component>
-      </li>
-    </ReusableButton.define>
-
-    <ReusableEllipsis.define>
-      <li v-bind="ellipsisProps.li">
-        <span v-bind="ellipsisProps.span">
+    <template v-for="page in pages" :key="`page-${page.id}`">
+      <li v-bind="page.li">
+        <span v-if="page.id === ELLIPSIS_BUTTON" v-bind="ellipsisProps.span">
           <slot name="ellipsis-text">
             {{ props.ellipsisText || '...' }}
           </slot>
         </span>
+        <component v-bind="page.button" :is="page.button.is" v-else @click="page.clickHandler">
+          <slot
+            :name="page.text.name"
+            :disabled="page.text.disabled"
+            :page="page.text.page"
+            :index="page.text.index"
+            :active="page.text.active"
+            :content="page.text.value"
+          >
+            {{ page.text.value }}
+          </slot>
+        </component>
       </li>
-    </ReusableEllipsis.define>
-
-    <template v-for="button in buttons" :key="`page-${button}`">
-      <ReusableButton.reuse v-if="button === FIRST_BUTTON" v-bind="firstButtonProps" />
-      <ReusableButton.reuse v-else-if="button === PREV_BUTTON" v-bind="prevButtonProps" />
-      <ReusableButton.reuse v-else-if="button === NEXT_BUTTON" v-bind="nextButtonProps" />
-      <ReusableButton.reuse v-else-if="button === LAST_BUTTON" v-bind="lastButtonProps" />
-      <ReusableEllipsis.reuse v-else-if="button === ELLIPSIS_BUTTON" />
-      <ReusableButton.reuse v-else-if="button !== null" v-bind="getPageButtonProps(button)" />
     </template>
   </ul>
 </template>
@@ -49,7 +35,7 @@ import {BvEvent} from '../../utils'
 import {computed, toRef, watch} from 'vue'
 import type {BPaginationProps, ClassValue} from '../../types'
 import {useAlignment, useDefaults} from '../../composables'
-import {createReusableTemplate, useToNumber} from '@vueuse/core'
+import {useToNumber} from '@vueuse/core'
 
 // Threshold of limit size when we start/stop showing ellipsis
 const ELLIPSIS_THRESHOLD = 3
@@ -60,6 +46,15 @@ const NEXT_BUTTON = -3
 const LAST_BUTTON = -4
 const ELLIPSIS_BUTTON = -5
 
+// This is necessary because type inference isn't succeeding for the pages computed
+interface PageButton {
+  id: number
+  li: Record<string, unknown>
+  button: Record<string, unknown>
+  text: Record<string, unknown>
+  clickHandler: (e: Readonly<MouseEvent>) => void
+}
+
 const _props = withDefaults(defineProps<BPaginationProps>(), {
   align: 'start',
   ariaControls: undefined,
@@ -262,9 +257,6 @@ const lastButtonProps = computed(() =>
   })
 )
 
-const ReusableButton = createReusableTemplate<ReturnType<typeof getButtonProps>>()
-const ReusableEllipsis = createReusableTemplate()
-
 const ellipsisProps = computed(() => ({
   li: {
     class: [
@@ -342,9 +334,29 @@ watch(pagination, (oldValue, newValue) => {
   }
 })
 
-const buttons = computed(() => {
+const pages = computed(
+  () =>
+    elements.value.map((p) => {
+      switch (p) {
+        case FIRST_BUTTON:
+          return {id: FIRST_BUTTON, ...firstButtonProps.value}
+        case PREV_BUTTON:
+          return {id: PREV_BUTTON, ...prevButtonProps.value}
+        case NEXT_BUTTON:
+          return {id: NEXT_BUTTON, ...nextButtonProps.value}
+        case LAST_BUTTON:
+          return {id: LAST_BUTTON, ...lastButtonProps.value}
+        case ELLIPSIS_BUTTON:
+          return {id: ELLIPSIS_BUTTON, ...ellipsisProps.value}
+        default:
+          return {id: p, ...getPageButtonProps(p)}
+      }
+    }) as PageButton[]
+)
+
+const elements = computed(() => {
   // The idea here is to create an array of all the buttons on the page control.
-  // This was we can keep the invariants in one place and the template code just
+  // This way we can keep the invariants in one place and the template code just
   // iterates over the array.
 
   const pages = numberOfPages.value
@@ -354,10 +366,11 @@ const buttons = computed(() => {
   const lastPage = props.lastNumber ? 1 : 0
   const hideEllipsis = props.hideEllipsis || limit <= ELLIPSIS_THRESHOLD
   const hideEndButtons = props.hideGotoEndButtons ? 1 : 0
+  const showEndButtons = props.hideGotoEndButtons ? 0 : 1
 
   // The first case is when all of the page buttons fit on the control, this is
   //  the simplest case and the only one that will create an array smaller than
-  //  Limit + 4 - hideEndButtons *2 (the [first, last,] prev, next buttons)
+  //  Limit + 4 - hideEndButtons * 2 (the [first, last,] prev, next buttons)
 
   if (pages < limit + firstPage + lastPage) {
     return [
@@ -366,7 +379,7 @@ const buttons = computed(() => {
       ...Array.from({length: pages}, (_, index) => index + 1),
       NEXT_BUTTON,
       !lastPage && !hideEndButtons ? LAST_BUTTON : null,
-    ].filter((x) => x !== null)
+    ].filter((x) => x !== null) as number[]
   }
 
   // All of the remaining cases result in an array that is exactly limit + 4 - hideEndButtons * 2 in length, so create
@@ -394,7 +407,7 @@ const buttons = computed(() => {
     buttons[buttons.length - 1] = NEXT_BUTTON
   }
 
-  // The next case is where the buttons page buttons start at the begginning, with
+  // The next case is where the page buttons start at the begginning, with
   //  no ellipsis at the beginning, but one at the end
 
   const halfLimit = Math.floor(limit / 2)
@@ -404,7 +417,7 @@ const buttons = computed(() => {
     }
 
     if (!hideEllipsis) {
-      buttons[buttons.length - 3] = ELLIPSIS_BUTTON
+      buttons[buttons.length - (2 + showEndButtons)] = ELLIPSIS_BUTTON
     }
   }
 
@@ -418,7 +431,7 @@ const buttons = computed(() => {
     }
 
     if (!hideEllipsis) {
-      buttons[2] = ELLIPSIS_BUTTON
+      buttons[1 + showEndButtons] = ELLIPSIS_BUTTON
     }
   }
 
@@ -431,21 +444,22 @@ const buttons = computed(() => {
     }
 
     if (!hideEllipsis) {
-      buttons[2] = ELLIPSIS_BUTTON
-      buttons[buttons.length - 3] = ELLIPSIS_BUTTON
+      buttons[1 + showEndButtons] = ELLIPSIS_BUTTON
+      buttons[buttons.length - (2 + showEndButtons)] = ELLIPSIS_BUTTON
     }
   }
 
   // Enable sanity check for debugging purposes
   // for (let i = 0; i < buttons.length; i++) {
   //   if (!buttons[i]) {
+  //     // eslint-disable-next-line no-console
   //     console.log(
   //       `Failed: button == ${i}, limit=${limit}, pages=${pages}, firstPage=${firstPage}, lastPage=${lastPage}, value=${value}`
   //     )
   //   }
   // }
 
-  return buttons as number[]
+  return buttons.filter((x) => x !== null) as number[]
 })
 </script>
 
diff --git a/packages/bootstrap-vue-next/src/components/BPagination/pagination.spec.ts b/packages/bootstrap-vue-next/src/components/BPagination/pagination.spec.ts
index 2c92112aa..eb1435b4c 100644
--- a/packages/bootstrap-vue-next/src/components/BPagination/pagination.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BPagination/pagination.spec.ts
@@ -133,6 +133,24 @@ describe('pagination', () => {
     expect(wrapper.find('[aria-label="Go to last page"]').exists()).toBeFalsy()
   })
 
+  it('has end ellipses in correct place when hideGotoEndButtons="true"', () => {
+    const wrapper = mount(BPagination, {
+      props: {totalRows: 100, perPage: 1, modelValue: 5, hideGotoEndButtons: true},
+    })
+    const buttons = wrapper.findAll('li')
+    const ellipses = buttons[buttons.length - 2]
+    expect(ellipses.attributes('role')).toBe('separator')
+  })
+
+  it('has start ellipses in correct place when hideGotoEndButtons="true"', () => {
+    const wrapper = mount(BPagination, {
+      props: {totalRows: 100, perPage: 1, modelValue: 5, hideGotoEndButtons: true},
+    })
+    const buttons = wrapper.findAll('li')
+    const [, ellipses] = buttons
+    expect(ellipses.attributes('role')).toBe('separator')
+  })
+
   it('does not have first button when firstNumber="true"', () => {
     const wrapper = mount(BPagination, {
       props: {totalRows: 100, perPage: 1, modelValue: 5, firstNumber: true},
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 5b33ce360..11e712123 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -121,6 +121,7 @@ export interface BDropdownItemButtonProps {
   active?: boolean
   activeClass?: ClassValue
   buttonClass?: ClassValue
+  wrapperAttrs?: Readonly<AttrsValue>
   disabled?: boolean
   variant?: ColorVariant | null
 }
diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md
index f61af0613..e646d77e3 100644
--- a/packages/nuxt/CHANGELOG.md
+++ b/packages/nuxt/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.24.11](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.10...nuxt-v0.24.11) (2024-08-27)
+
+
+### Miscellaneous Chores
+
+* **nuxt:** Synchronize main group versions
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * bootstrap-vue-next bumped to 0.24.11
+  * peerDependencies
+    * bootstrap-vue-next bumped to 0.24.11
+
 ## [0.24.10](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.24.9...nuxt-v0.24.10) (2024-08-20)
 
 
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index a5d2f8712..2362c0c8f 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.24.10",
+  "version": "0.24.11",
   "license": "MIT",
   "author": {
     "name": "Issayah",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 82f0aa8d7..c8083b62c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +16,7 @@ importers:
         version: 15.2.2
       turbo:
         specifier: latest
-        version: 2.0.11
+        version: 2.0.14
 
   apps/docs:
     devDependencies:
@@ -77,6 +77,9 @@ importers:
       unplugin-icons:
         specifier: ^0.19.0
         version: 0.19.0(@vue/compiler-sfc@3.4.31)(vue-template-compiler@2.7.16)
+      unplugin-vue-components:
+        specifier: ^0.27.0
+        version: 0.27.0(@babel/parser@7.24.7)(@nuxt/kit@3.12.3(rollup@4.18.1))(rollup@4.18.1)(vue@3.4.27(typescript@5.4.5))
       vitepress:
         specifier: 1.1.4
         version: 1.1.4(@algolia/client-search@4.23.3)(@types/node@20.12.12)(postcss@8.4.39)(sass@1.77.2)(search-insights@2.13.0)(terser@5.30.4)(typescript@5.4.5)
@@ -5741,38 +5744,38 @@ packages:
     resolution: {integrity: sha512-ZSDngmP1z6zw+FIkIBjvOp/II/mIub/O7Pp12j1WNsiCpg5R5wAc//i555bBQsE44O94btLt0xM/Zr2LQjwdCg==}
     engines: {node: ^16.14.0 || >=18.0.0}
 
-  turbo-darwin-64@2.0.11:
-    resolution: {integrity: sha512-YlHEEhcm+jI1BSZoLugGHUWDfRXaNaQIv7tGQBfadYjo9kixBnqoTOU6s1ubOrQMID+lizZZQs79GXwqM6vohg==}
+  turbo-darwin-64@2.0.14:
+    resolution: {integrity: sha512-kwfDmjNwlNfvtrvT29+ZBg5n1Wvxl891bFHchMJyzMoR0HOE9N1NSNdSZb9wG3e7sYNIu4uDkNk+VBEqJW0HzQ==}
     cpu: [x64]
     os: [darwin]
 
-  turbo-darwin-arm64@2.0.11:
-    resolution: {integrity: sha512-K/YW+hWzRQ/wGmtffxllH4M1tgy8OlwgXODrIiAGzkSpZl9+pIsem/F86UULlhsIeavBYK/LS5+dzV3DPMjJ9w==}
+  turbo-darwin-arm64@2.0.14:
+    resolution: {integrity: sha512-m3LXYEshCx3wc4ZClM6gb01KYpFmtjQ9IBF3A7ofjb6ahux3xlYZJZ3uFCLAGHuvGLuJ3htfiPbwlDPTdknqqw==}
     cpu: [arm64]
     os: [darwin]
 
-  turbo-linux-64@2.0.11:
-    resolution: {integrity: sha512-mv8CwGP06UPweMh1Vlp6PI6OWnkuibxfIJ4Vlof7xqjohAaZU5FLqeOeHkjQflH/6YrCVuS9wrK0TFOu+meTtA==}
+  turbo-linux-64@2.0.14:
+    resolution: {integrity: sha512-7vBzCPdoTtR92SNn2JMgj1FlMmyonGmpMaQdgAB1OVYtuQ6NVGoh7/lODfaILqXjpvmFSVbpBIDrKOT6EvcprQ==}
     cpu: [x64]
     os: [linux]
 
-  turbo-linux-arm64@2.0.11:
-    resolution: {integrity: sha512-wLE5tl4oriTmHbuayc0ki0csaCplmVLj+uCWtecM/mfBuZgNS9ICNM9c4sB+Cfl5tlBBFeepqRNgvRvn8WeVZg==}
+  turbo-linux-arm64@2.0.14:
+    resolution: {integrity: sha512-jwH+c0bfjpBf26K/tdEFatmnYyXwGROjbr6bZmNcL8R+IkGAc/cglL+OToqJnQZTgZvH7uDGbeSyUo7IsHyjuA==}
     cpu: [arm64]
     os: [linux]
 
-  turbo-windows-64@2.0.11:
-    resolution: {integrity: sha512-tja3zvVCSWu3HizOoeQv0qDJ+GeWGWRFOOM6a8i3BYnXLgGKAaDZFcjwzgC50tWiAw4aowIVR4OouwIyRhLBaQ==}
+  turbo-windows-64@2.0.14:
+    resolution: {integrity: sha512-w9/XwkHSzvLjmioo6cl3S1yRfI6swxsV1j1eJwtl66JM4/pn0H2rBa855R0n7hZnmI6H5ywLt/nLt6Ae8RTDmw==}
     cpu: [x64]
     os: [win32]
 
-  turbo-windows-arm64@2.0.11:
-    resolution: {integrity: sha512-sYjXP6k94Bqh99R+y3M1Ks6LRIEZybMz+7enA8GKl6JJ2ZFaXxTnS6q+/2+ii1+rRwxohj5OBb4gxODcF8Jd4w==}
+  turbo-windows-arm64@2.0.14:
+    resolution: {integrity: sha512-XaQlyYk+Rf4xS5XWCo8XCMIpssgGGy8blzLfolN6YBp4baElIWMlkLZHDbGyiFmCbNf9I9gJI64XGRG+LVyyjA==}
     cpu: [arm64]
     os: [win32]
 
-  turbo@2.0.11:
-    resolution: {integrity: sha512-imDlFFAvitbCm1JtDFJ6eG882qwxHUmVT2noPb3p2jq5o5DuXOchMbkVS9kUeC3/4WpY5N0GBZ3RvqNyjHZw1Q==}
+  turbo@2.0.14:
+    resolution: {integrity: sha512-00JjdCMD/cpsjP0Izkjcm8Oaor5yUCfDwODtaLb+WyblyadkaDEisGhy3Dbd5az9n+5iLSPiUgf+WjPbns6MRg==}
     hasBin: true
 
   type-check@0.4.0:
@@ -12879,32 +12882,32 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  turbo-darwin-64@2.0.11:
+  turbo-darwin-64@2.0.14:
     optional: true
 
-  turbo-darwin-arm64@2.0.11:
+  turbo-darwin-arm64@2.0.14:
     optional: true
 
-  turbo-linux-64@2.0.11:
+  turbo-linux-64@2.0.14:
     optional: true
 
-  turbo-linux-arm64@2.0.11:
+  turbo-linux-arm64@2.0.14:
     optional: true
 
-  turbo-windows-64@2.0.11:
+  turbo-windows-64@2.0.14:
     optional: true
 
-  turbo-windows-arm64@2.0.11:
+  turbo-windows-arm64@2.0.14:
     optional: true
 
-  turbo@2.0.11:
+  turbo@2.0.14:
     optionalDependencies:
-      turbo-darwin-64: 2.0.11
-      turbo-darwin-arm64: 2.0.11
-      turbo-linux-64: 2.0.11
-      turbo-linux-arm64: 2.0.11
-      turbo-windows-64: 2.0.11
-      turbo-windows-arm64: 2.0.11
+      turbo-darwin-64: 2.0.14
+      turbo-darwin-arm64: 2.0.14
+      turbo-linux-64: 2.0.14
+      turbo-linux-arm64: 2.0.14
+      turbo-windows-64: 2.0.14
+      turbo-windows-arm64: 2.0.14
 
   type-check@0.4.0:
     dependencies: