From 34432d904279bf44ed005798770c2759f34bf4df Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Sun, 11 May 2025 07:42:02 -0700
Subject: [PATCH 1/5] docs: implement on this page expand/collapse with
 useScrollspy (#2679)

---
 apps/docs/.vitepress/theme/Layout.vue         | 52 +++++++++++++++++--
 .../src/components/ComponentReference.vue     |  4 +-
 apps/docs/src/components/PageContents.vue     | 17 +++---
 apps/docs/src/components/PageContentsItem.vue | 29 ++++++++---
 apps/docs/src/types/index.ts                  |  6 +++
 5 files changed, 88 insertions(+), 20 deletions(-)

diff --git a/apps/docs/.vitepress/theme/Layout.vue b/apps/docs/.vitepress/theme/Layout.vue
index f01b921c4..cb85cdad1 100644
--- a/apps/docs/.vitepress/theme/Layout.vue
+++ b/apps/docs/.vitepress/theme/Layout.vue
@@ -138,7 +138,7 @@
                 header-class="pb-0 d-flex offcanvas-hidden-width"
                 body-class="py-2"
               >
-                <PageContents />
+                <PageContents :contents="contents" :active-id="activeId" />
               </BOffcanvas>
             </ClientOnly>
           </aside>
@@ -193,6 +193,7 @@ import {VPNavBarSearch} from 'vitepress/theme'
 import {appInfoKey} from './keys'
 import {useMediaQuery} from '@vueuse/core'
 import PageContents from '../../src/components/PageContents.vue'
+import {type ContentsItem, type HeaderItem} from '../../src/types'
 
 // https://vitepress.dev/reference/runtime-api#usedata
 const {page} = useData()
@@ -201,9 +202,11 @@ const route = useRoute()
 const content = useTemplateRef<ComponentPublicInstance<HTMLElement>>('_content')
 const target = useTemplateRef<ComponentPublicInstance<HTMLElement>>('_target')
 
-useScrollspy(content, target, {
-  contentQuery: ':scope > div > [id], #component-reference',
+const {current: activeId, list: items} = useScrollspy(content, target, {
+  contentQuery: ':scope > div > [id], #component-reference, .component-reference h3',
   targetQuery: ':scope [href]',
+  rootMargin: '0px 0px -25%',
+  manual: true,
 })
 
 const globalData = inject(appInfoKey, {
@@ -295,6 +298,49 @@ const set = (newValue: keyof typeof map) => {
   colorMode.value = newValue
 }
 
+const headers = computed(() =>
+  items.value.map((item) => {
+    const rawTag = item.el?.tagName?.toUpperCase() ?? ''
+    const isHeading = /^H[1-6]$/.test(rawTag)
+    const tag = isHeading ? rawTag : 'DIV'
+    const level = tag.startsWith('H') ? parseInt(tag.replace('H', '')) : 3
+    return {
+      ...item,
+      tag,
+      level,
+    } as HeaderItem
+  })
+)
+
+const contents = computed(() => {
+  const root: ContentsItem[] = []
+  const stack: ContentsItem[] = []
+
+  headers.value.forEach((header) => {
+    const item = {...header, children: [] as ContentsItem[]} as ContentsItem
+
+    while (stack.length && stack[stack.length - 1].level >= item.level) {
+      stack.pop()
+    }
+
+    if (stack.length === 0) {
+      root.push(item)
+    } else {
+      stack[stack.length - 1].children.push(item)
+    }
+
+    stack.push(item)
+  })
+
+  if (root.length !== 1) {
+    // Something isn't right if we have no root items or more than one root item
+    // eslint-disable-next-line no-console
+    console.warn('Unexpected header structure:', headers, 'Root items:', root)
+  }
+
+  return root.length > 0 ? root[0] : undefined
+})
+
 watch(
   () => route.path,
   () => {
diff --git a/apps/docs/src/components/ComponentReference.vue b/apps/docs/src/components/ComponentReference.vue
index 27c7df633..2a919f8bc 100644
--- a/apps/docs/src/components/ComponentReference.vue
+++ b/apps/docs/src/components/ComponentReference.vue
@@ -10,7 +10,9 @@
         <BContainer v-for="component in sortData" :key="component.component" fluid class="p-0">
           <BRow>
             <BCol>
-              <code class="display-6">{{ `<` + component.component + `>` }}</code>
+              <h3 :id="kebabCase(component.component)">
+                <code class="display-6">{{ `<` + component.component + `>` }}</code>
+              </h3>
             </BCol>
             <BCol v-if="globalData && component.sourcePath !== null" cols="4" class="text-md-right">
               <ViewSourceButton
diff --git a/apps/docs/src/components/PageContents.vue b/apps/docs/src/components/PageContents.vue
index d2d25b05b..4dcebce5c 100644
--- a/apps/docs/src/components/PageContents.vue
+++ b/apps/docs/src/components/PageContents.vue
@@ -1,19 +1,18 @@
 <template>
   <BNav vertical small class="otp-nav">
-    <PageContentsItem v-for="header in headers" :key="header.slug" :item="header" />
-    <BNavItem v-if="isComponentPage" href="#component-reference" link-class="otp-link"
-      >Component Reference</BNavItem
-    >
+    <PageContentsItem
+      v-for="item in contents?.children"
+      :key="item.id!"
+      :item="item"
+      :active-id="activeId"
+    />
   </BNav>
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
-import {useData} from 'vitepress'
+import type {ContentsItem} from 'src/types'
 
-const data = useData()
-const headers = computed(() => data.page.value.headers)
-const isComponentPage = computed(() => data.page.value.relativePath.includes('/components/'))
+defineProps<{contents?: ContentsItem; activeId: string | null}>()
 </script>
 
 <style lang="scss">
diff --git a/apps/docs/src/components/PageContentsItem.vue b/apps/docs/src/components/PageContentsItem.vue
index 0cc0c095c..b9ab264dd 100644
--- a/apps/docs/src/components/PageContentsItem.vue
+++ b/apps/docs/src/components/PageContentsItem.vue
@@ -1,18 +1,33 @@
 <template>
-  <BNavItem :href="item.link" link-class="otp-link">
-    <template #default>{{ item.title }}</template>
+  <BNavItem :href="buildLink(item)" link-class="otp-link" :active="item.id === activeId">
+    <template #default>{{ props.item.text }}</template>
     <template #after>
-      <BNav v-if="item.children?.length > 0" vertical small class="otp-nav">
-        <PageContentsItem v-for="child in item.children" :key="child.slug" :item="child" />
+      <BNav v-show="isVisible" vertical small class="otp-nav">
+        <PageContentsItem
+          v-for="child in item.children"
+          :key="child.id!"
+          :item="child"
+          :active-id="activeId"
+        />
       </BNav>
     </template>
   </BNavItem>
 </template>
 
 <script setup lang="ts">
-import {type Header} from 'vitepress'
+import type {ContentsItem} from 'src/types'
+import {computed} from 'vue'
 
-defineProps<{
-  item: Header
+const props = defineProps<{
+  item: ContentsItem
+  activeId: string | null
 }>()
+
+const buildLink = (item: ContentsItem): string => `#${item.id}`
+
+const childrenVisible = (item: ContentsItem): boolean =>
+  !!item.children?.length &&
+  item.children.some((child) => child.id === props.activeId || childrenVisible(child))
+
+const isVisible = computed(() => props.item.id === props.activeId || childrenVisible(props.item))
 </script>
diff --git a/apps/docs/src/types/index.ts b/apps/docs/src/types/index.ts
index a56d76b38..f1203bbf3 100644
--- a/apps/docs/src/types/index.ts
+++ b/apps/docs/src/types/index.ts
@@ -1,3 +1,5 @@
+import type {useScrollspy} from 'bootstrap-vue-next'
+
 export type ComponentItem = Exclude<keyof ComponentReference, 'component' | 'sections'>
 export type ComponentSection = 'Properties' | 'Events' | 'Slots'
 export type EmitArgReference = {arg: string; type: string; description?: string}
@@ -94,3 +96,7 @@ export type CollectiveMembersResponse = {
 export type CollectivePartialResponse = {
   members: CollectiveMembersResponse[]
 }
+
+export type ScrollspyItem = ReturnType<typeof useScrollspy>['list']['value'][0]
+export type HeaderItem = ScrollspyItem & {tag: string; level: number}
+export type ContentsItem = HeaderItem & {children: ContentsItem[]}

From beae36f4cbb2deea028f306677d8233a1cccb1e8 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Sun, 11 May 2025 07:43:58 -0700
Subject: [PATCH 2/5] docs: fix incorrect references and missed script sections
 (#2686)

---
 apps/docs/src/docs/components/form-tags.md | 97 ++--------------------
 apps/docs/src/docs/components/link.md      |  2 +-
 apps/docs/src/docs/components/spinner.md   |  3 -
 3 files changed, 7 insertions(+), 95 deletions(-)

diff --git a/apps/docs/src/docs/components/form-tags.md b/apps/docs/src/docs/components/form-tags.md
index d38d4add6..7f3bd2fe7 100644
--- a/apps/docs/src/docs/components/form-tags.md
+++ b/apps/docs/src/docs/components/form-tags.md
@@ -214,97 +214,12 @@ Note `<BFormTag>` requires BootstrapVueNext's custom CSS/SCSS for proper styling
 
 <ComponentReference :data="data" />
 
-<script setup lang="ts">
-  import {data} from '../../data/components/formTags.data'
-  import ComponentReference from '../../components/ComponentReference.vue'
-  import HighlightCard from '../../components/HighlightCard.vue'
-  import {BFormTags, BFormText, BFormGroup, BInputGroupText, BButton, BCard, BInputGroup, BFormTag, BFormInput, BFormSelect, BFormCheckbox, BFormInvalidFeedback, BDropdownForm, BDropdownDivider, BDropdownItemButton, BDropdownText, BDropdown} from 'bootstrap-vue-next'
-  import {ref, computed, watch} from 'vue'
-
-  const basicUsageTags = ref<string[]>([])
-  const usingSeparators = ref<string[]>(['apple', 'orange'])
-  const tagRemoval = ref<string[]>(['apple', 'orange', 'grape'])
-  const stylingOptions = ref<string[]>(['apple', 'orange', 'grape'])
-
-  const tagsValidator = ref<string[]>([])
-  const dirty = ref<boolean>(false)
-  const stateTagValidator = computed(() => {
-    // Overall component validation state
-    return dirty.value ? (tagsValidator.value.length > 2 && tagsValidator.value.length < 9) : null
-  })
-
-  watch(tagsValidator, () => {
-    // Set the dirty flag on first change to the tags array
-    dirty.value = true
-  })
-  const tagValidator = (tag) => {
-    // Individual tag validator function
-    return tag === tag.toLowerCase() && tag.length > 2 && tag.length < 6
-  }
-
-  const detectingTags = ref<string[]>([])
-  const validTags = ref<string[]>([])
-  const invalidTags = ref<string[]>([])
-  const duplicateTags = ref<string[]>([])
-  const onTagState = (valid, invalid, duplicate) => {
-    validTags.value = valid
-    invalidTags.value = invalid
-    duplicateTags.value = duplicate
-  }
-  const detectTagValidator = (tag) => {
-    return tag.length > 2 && tag.length < 6
-  }
-
-  const limitTagsModel = ref<string[]>([])
-  const limitTag = ref<number>(5)
-
-  const nativeTags = ref<string[]>(['apple', 'orange', 'banana', 'pear', 'peach'])
+<script lang="ts">
+import {data} from '../../data/components/formTags.data'
 
-  const customComponentTags = ref<string[]>(['apple', 'orange', 'banana'])
-
-  const customPredefinedTags = ref<string[]>([])
-  const options = ref<string[]>(['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'])
-  const availableOptions = computed(() => {
-    return options.value.filter(opt => customPredefinedTags.value.indexOf(opt) === -1)
-  })
-
-  const advancedDisabled = ref<boolean>(false)
-  const advancedTags = ref<string[]>([])
-  const newTag = ref<string>('')
-  const advancedState = computed(() => advancedTags.value.indexOf(newTag.value.trim()) > -1 ? false : null)
-  const resetInputValue = () => {
-        newTag.value = ''
-  }
-  const formatter = (value) => {
-    return value.toUpperCase()
+export default {
+  setup() {
+    return {data}
   }
-
-  const customDropdownOptions = ref<string[]>(['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'])
-  const customDropdownSearch = ref<string>('')
-  const customDropdownTags = ref<string[]>([])
-
-  const criteria = computed(() => customDropdownSearch.value.trim().toLowerCase())
-  const customDropdownAvailableOptions = computed(() => {
-  const searchCriteria = criteria.value
-
-  // Filter out already selected options
-  const optionsFiltered = customDropdownOptions.value.filter(opt => customDropdownTags.value.indexOf(opt) === -1)
-    if (searchCriteria) {
-      // Show only options that match criteria
-      return optionsFiltered.filter(opt => opt.toLowerCase().indexOf(searchCriteria) > -1);
-    }
-    // Show all options available
-    return optionsFiltered
-  })
-  const searchDesc = computed(() => {
-    if (criteria.value && customDropdownAvailableOptions.value.length === 0) {
-      return 'There are no tags matching your search criteria'
-    }
-    return ''
-  })
-  const onOptionClick = ({ option, addTag }) => {
-    addTag(option)
-    searchCriteria.value = ''
-  }
-
+}
 </script>
diff --git a/apps/docs/src/docs/components/link.md b/apps/docs/src/docs/components/link.md
index a5dd3cf7d..ce611104b 100644
--- a/apps/docs/src/docs/components/link.md
+++ b/apps/docs/src/docs/components/link.md
@@ -97,7 +97,7 @@ changes).
 <ComponentReference :data="data" />
 
 <script lang="ts">
-import {data} from '../../data/components/inputGroup.data'
+import {data} from '../../data/components/link.data'
 
 export default {
   setup() {
diff --git a/apps/docs/src/docs/components/spinner.md b/apps/docs/src/docs/components/spinner.md
index ba9910b15..c9a41db8b 100644
--- a/apps/docs/src/docs/components/spinner.md
+++ b/apps/docs/src/docs/components/spinner.md
@@ -106,9 +106,6 @@ As well, when no label is provided, the spinner will automatically have the attr
 
 <script lang="ts">
 import {data} from '../../data/components/spinner.data'
-import ComponentReference from '../../components/ComponentReference.vue'
-import HighlightCard from '../../components/HighlightCard.vue'
-import {BCard, BCardBody, BButton, BSpinner} from 'bootstrap-vue-next'
 
 export default {
   setup() {

From c61f532ce9c6ac232611084f25235e0926c7b836 Mon Sep 17 00:00:00 2001
From: Thierry Blind <tbl0605@gmail.com>
Date: Sun, 11 May 2025 16:52:14 +0200
Subject: [PATCH 3/5] fix(BTableSimple): fixed and nobordercollapse to work
 fixes #2685

---
 .../bootstrap-vue-next/src/components/BTable/BTableSimple.vue   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue
index 1d3f52f13..4f919002c 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue
@@ -73,6 +73,8 @@ const computedClasses = computed(() => [
     'table-sm': props.small,
     [`table-${props.variant}`]: props.variant !== null,
     'table-striped-columns': props.stripedColumns,
+    'b-table-fixed': props.fixed,
+    'b-table-no-border-collapse': props.noBorderCollapse,
   },
 ])
 const computedTableAttrs = computed(() => ({

From 070cb8c6795ea4b8c2e286f936819f8fb585fff1 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Sun, 11 May 2025 07:52:30 -0700
Subject: [PATCH 4/5] docs(BProgress): Parity pass (#2689)

---
 .../docs/src/data/components/progress.data.ts |  51 ++--
 .../docs/components/demo/ProgressAnimated.vue |   8 +
 .../components/demo/ProgressBackgrounds.vue   |   8 +
 .../docs/components/demo/ProgressBasic.vue    |   9 +
 .../components/demo/ProgressCustomLabels.vue  |  17 ++
 .../docs/components/demo/ProgressHeight.vue   |   6 +
 .../docs/components/demo/ProgressLabels.vue   |  14 ++
 .../components/demo/ProgressMultipleBars.vue  |   9 +
 .../docs/components/demo/ProgressStriped.vue  |   9 +
 .../docs/components/demo/ProgressWidth.vue    |  11 +
 apps/docs/src/docs/components/progress.md     | 235 +++---------------
 11 files changed, 150 insertions(+), 227 deletions(-)
 create mode 100644 apps/docs/src/docs/components/demo/ProgressAnimated.vue
 create mode 100644 apps/docs/src/docs/components/demo/ProgressBackgrounds.vue
 create mode 100644 apps/docs/src/docs/components/demo/ProgressBasic.vue
 create mode 100644 apps/docs/src/docs/components/demo/ProgressCustomLabels.vue
 create mode 100644 apps/docs/src/docs/components/demo/ProgressHeight.vue
 create mode 100644 apps/docs/src/docs/components/demo/ProgressLabels.vue
 create mode 100644 apps/docs/src/docs/components/demo/ProgressMultipleBars.vue
 create mode 100644 apps/docs/src/docs/components/demo/ProgressStriped.vue
 create mode 100644 apps/docs/src/docs/components/demo/ProgressWidth.vue

diff --git a/apps/docs/src/data/components/progress.data.ts b/apps/docs/src/data/components/progress.data.ts
index 4cf7a8f47..3e22cd4df 100644
--- a/apps/docs/src/data/components/progress.data.ts
+++ b/apps/docs/src/data/components/progress.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[] => [
@@ -11,55 +12,52 @@ export default {
           animated: {
             type: 'boolean',
             default: undefined,
-          },
-          bgVariant: {
-            type: 'ColorVariant | null',
-            default: undefined,
+            description: "Enable the animated background. Also automatically sets 'striped'",
           },
           height: {
             type: 'string',
             default: undefined,
+            description:
+              'Override the default height by specifying a CSS height value (including units)',
           },
           max: {
             type: 'Numberish',
             default: 100,
+            description: 'Set the maximum value',
           },
           precision: {
             type: 'Numberish',
             default: undefined,
+            description: 'The number of digits after the decimal to round the value to',
           },
           showProgress: {
             type: 'boolean',
             default: undefined,
+            description: 'Displays the current progress value as a percentage',
           },
           showValue: {
             type: 'boolean',
             default: undefined,
+            description: 'Displays the current progress value',
           },
           striped: {
             type: 'boolean',
             default: undefined,
-          },
-          textVariant: {
-            type: 'TextColorVariant | null',
-            default: undefined,
+            description: 'Enable the striped background',
           },
           value: {
             type: 'Numberish',
             default: undefined,
+            description: 'The current value of the progress bar',
           },
-          variant: {
-            type: 'ColorVariant | null',
-            default: undefined,
-          },
+          ...pick(buildCommonProps(), ['bgVariant', 'textVariant', 'variant']),
         } satisfies Record<keyof BvnComponentProps['BProgress'], PropertyReference>,
       },
       emits: [],
       slots: [
         {
-          description: '',
           name: 'default',
-          scope: [],
+          description: 'Content (progress bars) to place in the progress element',
         },
       ],
     },
@@ -71,55 +69,52 @@ export default {
           animated: {
             type: 'boolean',
             default: false,
-          },
-          bgVariant: {
-            type: 'ColorVariant | null',
-            default: null,
+            description: "Enable the animated background. Also automatically sets 'striped'",
           },
           label: {
             type: 'string',
             default: undefined,
+            description: 'Text string to explicitly set the label as',
           },
           max: {
             type: 'Numberish',
             default: undefined,
+            description: 'Set the maximum value',
           },
           precision: {
             type: 'Numberish',
             default: 0,
+            description: 'The number of digits after the decimal to round the value to',
           },
           showProgress: {
             type: 'boolean',
             default: false,
+            description: 'Displays the current progress value as a percentage',
           },
           showValue: {
             type: 'boolean',
             default: false,
+            description: 'Displays the current progress value',
           },
           striped: {
             type: 'boolean',
             default: false,
-          },
-          textVariant: {
-            type: 'TextColorVariant | null',
-            default: null,
+            description: 'Enable the striped background',
           },
           value: {
             type: 'Numberish',
             default: 0,
+            description: 'The current value of the progress bar',
           },
-          variant: {
-            type: 'ColorVariant | null',
-            default: null,
-          },
+          ...pick(buildCommonProps(), ['bgVariant', 'textVariant', 'variant']),
         } satisfies Record<keyof BvnComponentProps['BProgressBar'], PropertyReference>,
       },
       emits: [],
       slots: [
         {
-          description: '',
           name: 'default',
-          scope: [],
+          description:
+            'Content to place in the progress bar. Overrides the `label`, `show-progress` and `show-value` props',
         },
       ],
     },
diff --git a/apps/docs/src/docs/components/demo/ProgressAnimated.vue b/apps/docs/src/docs/components/demo/ProgressAnimated.vue
new file mode 100644
index 000000000..e7b6a1db8
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ProgressAnimated.vue
@@ -0,0 +1,8 @@
+<template>
+  <!-- #region template -->
+  <BProgress variant="success" :value="25" striped animated />
+  <BProgress class="mt-3" variant="info" :value="50" striped animated />
+  <BProgress class="mt-3" variant="warning" :value="75" striped animated />
+  <BProgress class="mt-3" variant="danger" :value="100" striped animated />
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/ProgressBackgrounds.vue b/apps/docs/src/docs/components/demo/ProgressBackgrounds.vue
new file mode 100644
index 000000000..a95fe7ea0
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ProgressBackgrounds.vue
@@ -0,0 +1,8 @@
+<template>
+  <!-- #region template -->
+  <BProgress variant="success" :value="25" />
+  <BProgress class="mt-3" variant="info" :value="50" />
+  <BProgress class="mt-3" variant="warning" :value="75" />
+  <BProgress class="mt-3" variant="danger" :value="100" />
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/ProgressBasic.vue b/apps/docs/src/docs/components/demo/ProgressBasic.vue
new file mode 100644
index 000000000..e36869c3c
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ProgressBasic.vue
@@ -0,0 +1,9 @@
+<template>
+  <!-- #region template -->
+  <BProgress :value="0" />
+  <BProgress class="mt-3" :value="25" />
+  <BProgress class="mt-3" :value="50" />
+  <BProgress class="mt-3" :value="75" />
+  <BProgress class="mt-3" :value="100" />
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/ProgressCustomLabels.vue b/apps/docs/src/docs/components/demo/ProgressCustomLabels.vue
new file mode 100644
index 000000000..8cde6bbc1
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ProgressCustomLabels.vue
@@ -0,0 +1,17 @@
+<template>
+  <!-- #region template -->
+  <h5>Custom label via default slot</h5>
+  <BProgress :max="50" height="2rem">
+    <BProgressBar :value="33.333333">
+      <span
+        >Progress: <strong>{{ (33.333333).toFixed(2) }} / {{ 50 }}</strong></span
+      >
+    </BProgressBar>
+  </BProgress>
+
+  <h5 class="mt-3">Custom label via property</h5>
+  <BProgress :max="50">
+    <BProgressBar :value="33.333333" :label="`${((33.333333 / 50) * 100).toFixed(2)}%`" />
+  </BProgress>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/ProgressHeight.vue b/apps/docs/src/docs/components/demo/ProgressHeight.vue
new file mode 100644
index 000000000..7a3711b27
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ProgressHeight.vue
@@ -0,0 +1,6 @@
+<template>
+  <!-- #region template -->
+  <BProgress :value="25" height="1px" />
+  <BProgress class="mt-3" :value="25" height="20px" />
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/ProgressLabels.vue b/apps/docs/src/docs/components/demo/ProgressLabels.vue
new file mode 100644
index 000000000..183f65c2b
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ProgressLabels.vue
@@ -0,0 +1,14 @@
+<template>
+  <!-- #region template -->
+  <h5>No label</h5>
+  <BProgress :value="33.3333" :max="50" />
+  <h5>Value label</h5>
+  <BProgress :value="33.3333" :max="50" show-value />
+  <h5>Progress label</h5>
+  <BProgress :value="33.3333" :max="50" show-progress />
+  <h5>Value label with precision</h5>
+  <BProgress :value="33.3333" :max="50" :precision="2" show-value />
+  <h5>Progress label with precision</h5>
+  <BProgress :value="33.3333" :max="50" :precision="2" show-progress />
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/ProgressMultipleBars.vue b/apps/docs/src/docs/components/demo/ProgressMultipleBars.vue
new file mode 100644
index 000000000..ab96ca6ab
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ProgressMultipleBars.vue
@@ -0,0 +1,9 @@
+<template>
+  <!-- #region template -->
+  <BProgress>
+    <BProgressBar :value="15" />
+    <BProgressBar :value="30" variant="success" />
+    <BProgressBar :value="20" variant="info" />
+  </BProgress>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/ProgressStriped.vue b/apps/docs/src/docs/components/demo/ProgressStriped.vue
new file mode 100644
index 000000000..dbc1635d3
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ProgressStriped.vue
@@ -0,0 +1,9 @@
+<template>
+  <!-- #region template -->
+  <BProgress striped :value="10" />
+  <BProgress striped class="mt-3" variant="success" :value="25" />
+  <BProgress striped class="mt-3" variant="info" :value="50" />
+  <BProgress striped class="mt-3" variant="warning" :value="75" />
+  <BProgress striped class="mt-3" variant="danger" :value="100" />
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/ProgressWidth.vue b/apps/docs/src/docs/components/demo/ProgressWidth.vue
new file mode 100644
index 000000000..4fcbd57fc
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ProgressWidth.vue
@@ -0,0 +1,11 @@
+<template>
+  <!-- #region template -->
+  <h5>Default width</h5>
+  <BProgress :value="75" class="mb-3" />
+
+  <h5>Custom widths</h5>
+  <BProgress :value="75" class="w-75 mb-2" />
+  <BProgress :value="75" class="w-50 mb-2" />
+  <BProgress :value="75" class="w-25" />
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/progress.md b/apps/docs/src/docs/components/progress.md
index 8f7adc760..aea8313f7 100644
--- a/apps/docs/src/docs/components/progress.md
+++ b/apps/docs/src/docs/components/progress.md
@@ -2,244 +2,81 @@
 
 <PageHeader>
 
-Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
+Use our custom progress component for displaying simple or complex progress bars, featuring
+support for horizontally stacked bars, animated backgrounds, and text labels.
 
 </PageHeader>
 
 ## Basic Usage
 
-<HighlightCard>
-  <BCard>
-    <BProgress :value="0" />
-    <BProgress class="mt-3" :value="25" />
-    <BProgress class="mt-3" :value="50" />
-    <BProgress class="mt-3" :value="75" />
-    <BProgress class="mt-3" :value="100" />
-  </BCard>
-  <template #html>
-
-```vue-html
-<BProgress :value="0" />
-<BProgress :value="25" />
-<BProgress :value="50" />
-<BProgress :value="75" />
-<BProgress :value="100" />
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/ProgressBasic.vue
 
 ## Value
 
 Set the maximum value with the `max` prop (default is `100`), and the current value via the `value` prop (default `0`).
 
-When creating multiple bars in a single process, place the value prop on the individual `BProgressBar` sub-components (see the Multiple Bars section below for more details)
+When creating multiple bars in a single process, place the value prop on the individual `BProgressBar` sub-components (see the [Multiple Bars](#multiple-bars) section below for more details)
 
 ## Labels
 
 Add labels to your progress bars by either enabling `show-progress` (percentage of max) or `show-value` for the current absolute value. You may also set the precision (number of digits after the decimal) via the `precision` prop (default is `0` digits after the decimal).
 
-<HighlightCard>
-  <BCard>
-    <h5>No label</h5>
-    <BProgress :value="33.3333" :max="50" class="mb-3" />
-    <h5>Value label</h5>
-    <BProgress :value="33.3333" :max="50" show-value class="mb-3" />
-    <h5>Progress label</h5>
-    <BProgress :value="33.3333" :max="50" show-progress class="mb-3" />
-    <h5>Value label with precision</h5>
-    <BProgress :value="33.3333" :max="50" :precision="2" show-value class="mb-3" />
-    <h5>Progress label with precision</h5>
-    <BProgress :value="33.3333" :max="50" :precision="2" show-progress class="mb-3" />
-  </BCard>
-  <template #html>
-
-```vue-html
-<h5>No label</h5>
-<BProgress :value="33.3333" :max="50" />
-<h5>Value label</h5>
-<BProgress :value="33.3333" :max="50" show-value />
-<h5>Progress label</h5>
-<BProgress :value="33.3333" :max="50" show-progress />
-<h5>Value label with precision</h5>
-<BProgress :value="33.3333" :max="50" :precision="2" show-value />
-<h5>Progress label with precision</h5>
-<BProgress :value="33.3333" :max="50" :precision="2" show-progress />
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/ProgressLabels.vue
 
 ### Custom progress label
 
-Need more control over the label? Provide your own label by using the default slot within a `BProgressBar` sub-component, or by using the `label` or `label-html` property on `BProgressBar`:
-
-<HighlightCard>
-  <BCard>
-    <h5>Custom label via default slot</h5>
-    <BProgress :max="50" height="2rem">
-      <BProgressBar :value="33.333333">
-        <span>Progress: <strong>{{ (33.333333).toFixed(2) }} / {{ 50 }}</strong></span>
-      </BProgressBar>
-    </BProgress>
-    <h5 class="mt-3">Custom label via property</h5>
-    <BProgress :max="50">
-      <BProgressBar :value="33.333333" :label="`${((33.333333 / 50) * 100).toFixed(2)}%`" />
-    </BProgress>
-    <h5 class="mt-3">Custom label via property (HTML support)</h5>
-    <BProgress :max="50">
-      <BProgressBar :value="33.333333">
-        <del>{{33.333333}}</del>
-      </BProgressBar>
-    </BProgress>
-  </BCard>
-  <template #html>
-
-```vue-html
-<h5>Custom label via default slot</h5>
-<BProgress :max="50" height="2rem">
-  <BProgressBar :value="33.333333">
-    <span>Progress: <strong>{{ (33.333333).toFixed(2) }} / {{ 50 }}</strong></span>
-  </BProgressBar>
-</BProgress>
-
-<h5 class="mt-3">Custom label via property</h5>
-<BProgress :max="50">
-  <BProgressBar
-    :value="33.333333"
-    :label="`${((33.333333 / 50) * 100).toFixed(2)}%`"
-  />
-</BProgress>
-
-<h5 class="mt-3">Custom label via property (HTML support)</h5>
-<BProgress :max="50">
-  <BProgressBar :value="33.333333">
-    <del>{{33.333333}}</del>
-  </BProgressBar>
-</BProgress>
-```
-
-  </template>
-</HighlightCard>
+Need more control over the label? Provide your own label by using the default slot within a `BProgressBar` sub-component, or by using the `label` property on `BProgressBar`:
 
-## Height
+<<< DEMO ./demo/ProgressCustomLabels.vue
 
-The height of the progress bar can be controlled with the height prop. The height value should be a standard CSS dimension (px, rem, em, etc.). The default height is 1rem.
+## Width
 
-<HighlightCard>
-  <BCard>
-    <BProgress :value="25" height="1px" />
-    <BProgress class="mt-3" :value="25" height="20px" />
-  </BCard>
-  <template #html>
+`<BProgress>` will always expand to the maximum with of its parent container. To change the width,
+place `<BProgress>` in a standard Bootstrap column or apply one of the standard Bootstrap width
+classes.
 
-```vue-html
-<BProgress :value="25" height="1px" />
-<BProgress :value="25" height="20px" />
-```
+<<< DEMO ./demo/ProgressWidth.vue
 
-  </template>
-</HighlightCard>
+## Height
 
-## Backgrounds
+The height of the progress bar can be controlled with the height prop. The height value should be a standard CSS dimension (px, rem, em, etc.). The default height is 1rem.
 
-Use background variants to change the appearance of individual progress bars. The default variant is `primary`.
+<<< DEMO ./demo/ProgressHeight.vue
 
-<HighlightCard>
-  <BCard>
-    <BProgress variant="success" :value="25" />
-    <BProgress class="mt-3" variant="info" :value="50" />
-    <BProgress class="mt-3" variant="warning" :value="75" />
-    <BProgress class="mt-3" variant="danger" :value="100" />
-  </BCard>
-  <template #html>
-
-```vue-html
-<BProgress variant="success" :value="25" />
-<BProgress variant="info" :value="50" />
-<BProgress variant="warning" :value="75" />
-<BProgress variant="danger" :value="100" />
-```
-
-  </template>
-</HighlightCard>
+## Backgrounds
 
-## Multiple bars
+Use background variants to change the appearance of individual progress bars. The default variant is `primary`.
 
-Include multiple `BProgressBar` sub-components in a `BProgress` component to build a horizontally stacked set of progress bars.
+<<< DEMO ./demo/ProgressBackgrounds.vue
 
-<HighlightCard>
-  <BCard>
-    <BProgress>
-      <BProgressBar :value="15" />
-      <BProgressBar :value="30" variant="success" />
-      <BProgressBar :value="20" variant="info" />
-    </BProgress>
-  </BCard>
-  <template #html>
-
-```vue-html
-<BProgress>
-  <BProgressBar :value="15" />
-  <BProgressBar :value="30" variant="success" />
-  <BProgressBar :value="20" variant="info" />
-</BProgress>
-```
-
-  </template>
-</HighlightCard>
-
-## Striped
+## Striped Background
 
 Set `striped` to apply a stripe via CSS gradient over the progress bar's background variant.
 
-<HighlightCard>
-  <BCard>
-    <BProgress striped :value="10" />
-    <BProgress striped class="mt-3" variant="success" :value="25" />
-    <BProgress striped class="mt-3" variant="info" :value="50" />
-    <BProgress striped class="mt-3" variant="warning" :value="75" />
-    <BProgress striped class="mt-3" variant="danger" :value="100" />
-  </BCard>
-  <template #html>
-
-```vue-html
-<BProgress striped :value="10" />
-<BProgress striped :value="25" variant="success" />
-<BProgress striped :value="50" variant="info" />
-<BProgress striped :value="75" variant="warning" />
-<BProgress striped :value="100" variant="danger" />
-```
-
-  </template>
-</HighlightCard>
-
-## Animated stripes
+<<< DEMO ./demo/ProgressStriped.vue
+
+## Animated Background
 
 The striped gradient can also be animated by setting the `animated` prop.
 
-<HighlightCard>
-  <BCard>
-    <BProgress :value="75" striped :animated="animate" />
-    <BButton class="mt-3" @click="animate = !animate">Toggle animation</BButton>
-  </BCard>
-  <template #html>
+<<< DEMO ./demo/ProgressAnimated.vue
 
-```vue
-<template>
-  <BProgress :value="75" striped :animated="animate" />
-  <BButton class="mt-3" @click="animate = !animate">Toggle animation</BButton>
-</template>
+::: info NOTE
+If `animated` is true, `striped` will automatically be enabled.
+:::
 
-<script setup lang="ts">
-import {ref} from 'vue'
+## Multiple bars
 
-const animate = ref(false)
-</script>
-```
+Include multiple `BProgressBar` sub-components in a `BProgress` component to build a horizontally stacked set of progress bars.
+
+<<< DEMO ./demo/ProgressMultipleBars.vue
+
+::: info NOTE
+
+- height, if specified, should always set on the `<BProgress>` component.
+- `<BProgressBar>` will not inherit value from `<BProgress>`.
 
-  </template>
-</HighlightCard>
+:::
 
 <ComponentReference :data="data" />
 

From dc85d942029552dc40fa558405ac5357a18904df Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 11 May 2025 09:53:25 -0500
Subject: [PATCH 5/5] chore: release main (#2690)

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

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 8d6e563f3..ffe60bdf2 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/bootstrap-vue-next": "0.29.2",
-  "packages/nuxt": "0.29.2"
+  "packages/bootstrap-vue-next": "0.29.3",
+  "packages/nuxt": "0.29.3"
 }
diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md
index ee5028b34..2aa121388 100644
--- a/packages/bootstrap-vue-next/CHANGELOG.md
+++ b/packages/bootstrap-vue-next/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.29.3](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.29.2...bootstrapvuenext-v0.29.3) (2025-05-11)
+
+
+### Bug Fixes
+
+* **BTableSimple:** fixed and nobordercollapse to work fixes [#2685](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2685) ([c61f532](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/c61f532ce9c6ac232611084f25235e0926c7b836))
+
 ## [0.29.2](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.29.1...bootstrapvuenext-v0.29.2) (2025-05-07)
 
 
diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json
index e8284d22a..acd3d23e3 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.29.2",
+  "version": "0.29.3",
   "license": "MIT",
   "main": "./dist/bootstrap-vue-next.umd.js",
   "module": "./dist/bootstrap-vue-next.mjs",
diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md
index 22e270e17..b5f926f67 100644
--- a/packages/nuxt/CHANGELOG.md
+++ b/packages/nuxt/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.29.3](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.29.2...nuxt-v0.29.3) (2025-05-11)
+
+
+### Miscellaneous Chores
+
+* **nuxt:** Synchronize main group versions
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * bootstrap-vue-next bumped to 0.29.3
+  * peerDependencies
+    * bootstrap-vue-next bumped to 0.29.3
+
 ## [0.29.2](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.29.1...nuxt-v0.29.2) (2025-05-07)
 
 
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index e900e8bfe..96033c8f2 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.29.2",
+  "version": "0.29.3",
   "license": "MIT",
   "author": {
     "name": "Issayah",