From c842f2fa565e78922c3480e1d758d3b94eab12f1 Mon Sep 17 00:00:00 2001
From: Julian Pollinger <julian@pollinger.dev>
Date: Wed, 17 Dec 2025 16:08:25 +0100
Subject: [PATCH 1/6] docs: fix typos in form documentation (#2956)

* docs: Fix typos in form documentation

* docs: typo in form documentation

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 apps/docs/src/docs/components/form.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/docs/src/docs/components/form.md b/apps/docs/src/docs/components/form.md
index ed946ea4c..860c5f56b 100644
--- a/apps/docs/src/docs/components/form.md
+++ b/apps/docs/src/docs/components/form.md
@@ -38,12 +38,12 @@ Custom form controls and selects are also supported.
 
 ## Floating Labels
 
-Wrap a `BFormInput`, `BFormTextarea`, or `BFormSelect` in a `BFormFloatingLable` to enable floating labesl. A `placeholder`
+Wrap a `BFormInput`, `BFormTextarea`, or `BFormSelect` in a `BFormFloatingLabel` to enable floating labels. A `placeholder`
 is required on each input in order to make the Bootstrap 5 `css` work correctly.
 
 <<< DEMO ./demo/FormFloatingLabels.vue#template{vue-html}
 
-Floating labels work correclty for disable state and readonly states. In addition to styled textual inputs, floating labels
+Floating labels work correctly for disabled state and readonly states. In addition to styled textual inputs, floating labels
 also work for plaintext inputs, textareas, input groups and selects.
 See the [Bootstrap 5 documentation](https://getbootstrap.com/docs/5.3/forms/floating-labels) for more details.
 

From a75332efab0c397d2125e23ad634267151e5d0c9 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Thu, 18 Dec 2025 11:29:00 +0200
Subject: [PATCH 2/6] fix: remove boolean and null from modal promise return
 types (#2957)

* Remove boolean and null from modal promise return types

Co-authored-by: xvaara <130606+xvaara@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: xvaara <130606+xvaara@users.noreply.github.com>
---
 .../src/composables/orchestratorShared.ts          |  6 +++---
 .../src/types/ComponentOrchestratorTypes.ts        | 14 +++++---------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/composables/orchestratorShared.ts b/packages/bootstrap-vue-next/src/composables/orchestratorShared.ts
index 0af65208f..8ac9611aa 100644
--- a/packages/bootstrap-vue-next/src/composables/orchestratorShared.ts
+++ b/packages/bootstrap-vue-next/src/composables/orchestratorShared.ts
@@ -22,12 +22,12 @@ export function buildPromise<TComponent, TParam, TArrayValue extends Orchestrato
   store: Ref<TArrayValue[]>
 ): {
   value: PromiseWithComponent<TComponent, TParam>
-  resolve: (value: BvTriggerableEvent | boolean | null) => void
+  resolve: (value: BvTriggerableEvent) => void
   stop: WatchHandle | undefined
 } {
-  let resolveFunc: (value: BvTriggerableEvent | boolean | null) => void = () => {}
+  let resolveFunc: (value: BvTriggerableEvent) => void = () => {}
 
-  const promise = new Promise<BvTriggerableEvent | boolean | null>((resolve) => {
+  const promise = new Promise<BvTriggerableEvent>((resolve) => {
     resolveFunc = resolve
   }) as PromiseWithComponent<TComponent, TParam>
 
diff --git a/packages/bootstrap-vue-next/src/types/ComponentOrchestratorTypes.ts b/packages/bootstrap-vue-next/src/types/ComponentOrchestratorTypes.ts
index 16d19a2ca..535d0773e 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentOrchestratorTypes.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentOrchestratorTypes.ts
@@ -12,7 +12,7 @@ import type BTooltip from '../components/BTooltip/BTooltip.vue'
 export type ControllerKey = symbol | string
 
 export interface PromiseWithComponent<T, P>
-  extends Promise<BvTriggerableEvent | boolean | null>,
+  extends Promise<BvTriggerableEvent>,
     PromiseWithComponentInternal<T, P> {}
 export interface PromiseWithComponentInternal<T, P> extends AsyncDisposable {
   id: ControllerKey
@@ -56,7 +56,7 @@ export type ToastOrchestratorArrayValue = Omit<BToastProps, 'modelValue'> & {
   'options': OrchestratorCreateOptions
   'promise': {
     value: PromiseWithComponent<typeof BToast, ToastOrchestratorParam>
-    resolve: (value: BvTriggerableEvent | boolean | null) => void
+    resolve: (value: BvTriggerableEvent) => void
     stop?: WatchHandle
   }
   'type': 'toast'
@@ -124,7 +124,7 @@ export type TooltipOrchestratorArrayValue = BTooltipProps & {
   '_component'?: Readonly<Component>
   'promise': {
     value: PromiseWithComponent<typeof BPopover | typeof BTooltip, PopoverOrchestratorParam>
-    resolve: (value: BvTriggerableEvent | boolean | null) => void
+    resolve: (value: BvTriggerableEvent) => void
     stop?: WatchHandle
   }
   'slots'?: {
@@ -166,7 +166,7 @@ export type PopoverOrchestratorArrayValue = BPopoverProps &
     '_component'?: Readonly<Component>
     'promise': {
       value: PromiseWithComponent<typeof BPopover | typeof BTooltip, PopoverOrchestratorParam>
-      resolve: (value: BvTriggerableEvent | boolean | null) => void
+      resolve: (value: BvTriggerableEvent) => void
       stop?: WatchHandle
     }
     'slots'?: {
@@ -206,7 +206,7 @@ export type ModalOrchestratorArrayValue = BModalProps & {
   'options': OrchestratorCreateOptions
   'promise': {
     value: PromiseWithComponent<typeof BModal, ModalOrchestratorParam>
-    resolve: (value: BvTriggerableEvent | boolean | null) => void
+    resolve: (value: BvTriggerableEvent) => void
     stop?: WatchHandle
   }
   '_component'?: Readonly<Component>
@@ -245,10 +245,6 @@ export type ModalOrchestratorCreateParam<ComponentProps = Record<string, unknown
 export type OrchestratorCreateOptions = {
   keep?: boolean
   resolveOnHide?: boolean
-  /*
-   * @deprecated
-   */
-  returnBoolean?: boolean
 }
 
 export type OrchestratorArrayValue =

From d583297576aaecc47127cc6f34353030df7b99ec Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Fri, 19 Dec 2025 12:50:35 -0800
Subject: [PATCH 3/6] feat(BFormGroup): add props to apply attrs to label and
 content wrappers in horizontal mode (#2960)

---
 .../src/data/components/formGroup.data.ts     | 12 +++
 .../demo/FormGroupWrapperAttrsBasic.vue       | 15 +++
 .../demo/FormGroupWrapperAttrsCustom.vue      | 25 +++++
 apps/docs/src/docs/components/form-group.md   | 20 ++++
 .../src/components/Comps/TFormGroup.vue       | 56 +++++++++++
 .../src/components/BFormGroup/BFormGroup.vue  | 10 +-
 .../components/BFormGroup/form-group.spec.ts  | 96 +++++++++++++++++++
 .../src/types/ComponentProps.ts               |  2 +
 8 files changed, 234 insertions(+), 2 deletions(-)
 create mode 100644 apps/docs/src/docs/components/demo/FormGroupWrapperAttrsBasic.vue
 create mode 100644 apps/docs/src/docs/components/demo/FormGroupWrapperAttrsCustom.vue

diff --git a/apps/docs/src/data/components/formGroup.data.ts b/apps/docs/src/data/components/formGroup.data.ts
index f4a54335e..b461f371d 100644
--- a/apps/docs/src/data/components/formGroup.data.ts
+++ b/apps/docs/src/data/components/formGroup.data.ts
@@ -41,6 +41,12 @@ export default {
           default: 'undefined',
           description: "Number of columns for the content width 'xl' screens and up",
         },
+        contentWrapperAttrs: {
+          type: 'Readonly<AttrsValue>',
+          default: 'undefined',
+          description:
+            'Additional attributes to apply to the content column wrapper in horizontal layout mode. Useful for adding custom classes or styles to control the width/layout of the content column. Only applies when using label-cols or content-cols props',
+        },
         description: {
           type: 'string',
           default: 'undefined',
@@ -139,6 +145,12 @@ export default {
           description:
             'Visually hides the label content, but makes it available to screen reader users',
         },
+        labelWrapperAttrs: {
+          type: 'Readonly<AttrsValue>',
+          default: 'undefined',
+          description:
+            'Additional attributes to apply to the label column wrapper in horizontal layout mode. Useful for adding custom classes or styles to override the default column width set by label-cols. Only applies when using label-cols or content-cols props',
+        },
         validFeedback: {
           type: 'string',
           default: 'undefined',
diff --git a/apps/docs/src/docs/components/demo/FormGroupWrapperAttrsBasic.vue b/apps/docs/src/docs/components/demo/FormGroupWrapperAttrsBasic.vue
new file mode 100644
index 000000000..1a0482bed
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/FormGroupWrapperAttrsBasic.vue
@@ -0,0 +1,15 @@
+<template>
+  <!-- #region template -->
+  <BFormGroup
+    label="My Label:"
+    label-for="my-input"
+    label-cols-md="3"
+    :label-wrapper-attrs="{
+      class: 'custom-label-width',
+      style: 'flex: 0 0 120px; max-width: 120px;',
+    }"
+  >
+    <BFormInput id="my-input" />
+  </BFormGroup>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/FormGroupWrapperAttrsCustom.vue b/apps/docs/src/docs/components/demo/FormGroupWrapperAttrsCustom.vue
new file mode 100644
index 000000000..248a59ca0
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/FormGroupWrapperAttrsCustom.vue
@@ -0,0 +1,25 @@
+<template>
+  <BFormGroup
+    label="Active:"
+    label-for="status"
+    label-align-md="end"
+    label-cols-md="3"
+    :label-wrapper-attrs="{
+      class: 'custom-label-field',
+    }"
+  >
+    <BFormCheckbox
+      id="status"
+      switch
+    />
+  </BFormGroup>
+</template>
+
+<style scoped>
+@media (min-width: 768px) {
+  :deep(.custom-label-field) {
+    flex: 0 0 120px !important;
+    max-width: 120px !important;
+  }
+}
+</style>
diff --git a/apps/docs/src/docs/components/form-group.md b/apps/docs/src/docs/components/form-group.md
index d35286bcf..f2749179a 100644
--- a/apps/docs/src/docs/components/form-group.md
+++ b/apps/docs/src/docs/components/form-group.md
@@ -91,6 +91,26 @@ value via the prop `label-text-align` and/or `label-align-{breakpoint}`.
 
 Alignment has no effect if the `label-visually-hidden` prop is set.
 
+### Customizing wrapper elements in horizontal layout
+
+When using horizontal layout (with `label-cols` or `content-cols` props), the label and content are wrapped in column elements. You can apply additional attributes, classes, or styles to these wrapper elements using the `label-wrapper-attrs` and `content-wrapper-attrs` props.
+
+This is particularly useful when you need to override the default column widths with custom sizing:
+
+<<< DEMO ./demo/FormGroupWrapperAttrsBasic.vue#template{vue-html}
+
+**Important Notes:**
+
+- These props **only apply in horizontal layout mode** (when `label-cols` or `content-cols` is set)
+- `label-wrapper-attrs` applies to the column wrapper around the label element
+- `content-wrapper-attrs` applies to the column wrapper around the content/input
+- Use `label-class` if you need to style the `<label>` or `<legend>` element itself
+- The `class` property in wrapper attrs will be merged with the Bootstrap column classes
+
+**Common use case:** You need more precise control over column widths than Bootstrap's 12-column grid provides. For example, setting a label to exactly 120px wide using flexbox properties:
+
+<<< DEMO ./demo/FormGroupWrapperAttrsCustom.vue{vue}
+
 ## Nested form groups
 
 Feel free to nest `BFormGroup` components to produce advanced form layouts and semantic grouping
diff --git a/apps/playground/src/components/Comps/TFormGroup.vue b/apps/playground/src/components/Comps/TFormGroup.vue
index 8da04c947..0b1045ed3 100644
--- a/apps/playground/src/components/Comps/TFormGroup.vue
+++ b/apps/playground/src/components/Comps/TFormGroup.vue
@@ -47,6 +47,44 @@
         </BFormGroup>
       </BCol>
     </BRow>
+    <BRow>
+      <BCol>
+        <h4 class="mt-4 mb-3">Using label-wrapper-attrs prop</h4>
+
+        <BFormGroup
+          label="Aktiv:"
+          label-for="test-active-fixed"
+          label-align-md="end"
+          label-cols-md="3"
+          :label-wrapper-attrs="{class: 'custom-label-field'}"
+          class="align-items-center test-form-group"
+        >
+          <BFormCheckbox id="test-active-fixed" placeholder="" switch />
+        </BFormGroup>
+
+        <BFormGroup
+          label="Standard:"
+          label-for="test-default-fixed"
+          label-align-md="end"
+          label-cols-md="3"
+          :label-wrapper-attrs="{class: 'custom-label-field'}"
+          class="align-items-center test-form-group"
+        >
+          <BFormCheckbox id="test-default-fixed" placeholder="" switch />
+        </BFormGroup>
+
+        <BFormGroup
+          label="Name:"
+          label-for="test-name-fixed"
+          label-align-md="end"
+          label-cols-md="3"
+          :label-wrapper-attrs="{class: 'custom-label-field'}"
+          class="align-items-center test-form-group"
+        >
+          <BFormInput id="test-name-fixed" placeholder="Enter name" />
+        </BFormGroup>
+      </BCol>
+    </BRow>
   </BContainer>
 </template>
 
@@ -69,3 +107,21 @@ const onTagState = (valid: string[], invalid: string[], duplicate: string[]) =>
 
 const name = ref('')
 </script>
+
+<style scoped>
+@media (min-width: 768px) {
+  :deep(.custom-label-field) {
+    flex: 0 0 120px !important;
+    max-width: 120px !important;
+    padding-right: 5px !important;
+    background-color: rgba(255, 0, 0, 0.1); /* Visual indicator to see if it's applied */
+  }
+}
+
+:deep(.test-form-group) {
+  border: 1px solid #dee2e6;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 0.25rem;
+}
+</style>
diff --git a/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue b/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
index b275fb91f..de894e72d 100644
--- a/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
@@ -35,7 +35,11 @@
     </ContentTemplate.define>
     <LabelContentTemplate.define>
       <template v-if="slots.label || props.label || isHorizontal">
-        <BCol v-if="isHorizontal" v-bind="labelColProps" :class="labelAlignClasses">
+        <BCol
+          v-if="isHorizontal"
+          v-bind="{...labelColProps, ...props.labelWrapperAttrs}"
+          :class="labelAlignClasses"
+        >
           <component
             :is="labelTag"
             :id="labelId"
@@ -63,7 +67,7 @@
     <!-- End of definitions -->
     <BFormRow v-if="isHorizontal" :class="rowAttrs.class" :style="rowAttrs.style">
       <LabelContentTemplate.reuse />
-      <BCol v-bind="contentColProps" ref="_content">
+      <BCol v-bind="{...contentColProps, ...props.contentWrapperAttrs}" ref="_content">
         <slot
           :id="computedId"
           :aria-describedby="null"
@@ -128,6 +132,7 @@ const _props = withDefaults(defineProps<BFormGroupProps>(), {
   contentColsMd: undefined,
   contentColsSm: undefined,
   contentColsXl: undefined,
+  contentWrapperAttrs: undefined,
   description: undefined,
   disabled: false,
   feedbackAriaLive: 'assertive',
@@ -149,6 +154,7 @@ const _props = withDefaults(defineProps<BFormGroupProps>(), {
   labelFor: undefined,
   labelSize: undefined,
   labelVisuallyHidden: false,
+  labelWrapperAttrs: undefined,
   state: null,
   tooltip: false,
   validFeedback: undefined,
diff --git a/packages/bootstrap-vue-next/src/components/BFormGroup/form-group.spec.ts b/packages/bootstrap-vue-next/src/components/BFormGroup/form-group.spec.ts
index 4461b9fff..d85c20ce4 100644
--- a/packages/bootstrap-vue-next/src/components/BFormGroup/form-group.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BFormGroup/form-group.spec.ts
@@ -512,5 +512,101 @@ describe('form-group', () => {
       const label = wrapper.find('label')
       expect(label.classes()).toContain('text-center')
     })
+
+    it('applies labelWrapperAttrs to label wrapper BCol in horizontal mode', () => {
+      const wrapper = mount(BFormGroup, {
+        props: {
+          label: 'Login:',
+          labelFor: 'loginname',
+          labelColsMd: 3,
+          labelWrapperAttrs: {
+            'class': 'custom-label-wrapper',
+            'data-testid': 'label-wrapper',
+          },
+        },
+        slots: {
+          default: h(BFormInput, {id: 'loginname'}),
+        },
+      })
+      // Find the BCol component that wraps the label
+      const [labelCol] = wrapper
+        .findAll('[class*="col-"]')
+        .filter((el) => el.html().includes('Login:'))
+      expect(labelCol?.classes()).toContain('custom-label-wrapper')
+      expect(labelCol?.attributes('data-testid')).toBe('label-wrapper')
+    })
+
+    it('applies contentWrapperAttrs to content wrapper BCol in horizontal mode', () => {
+      const wrapper = mount(BFormGroup, {
+        props: {
+          label: 'Login:',
+          labelFor: 'loginname',
+          labelColsMd: 3,
+          contentWrapperAttrs: {
+            'class': 'custom-content-wrapper',
+            'data-testid': 'content-wrapper',
+          },
+        },
+        slots: {
+          default: h(BFormInput, {id: 'loginname'}),
+        },
+      })
+      // Find the BCol component that wraps the content (it has data-testid)
+      const contentCol = wrapper.find('[data-testid="content-wrapper"]')
+      expect(contentCol.exists()).toBe(true)
+      expect(contentCol.classes()).toContain('custom-content-wrapper')
+      expect(contentCol.classes()).toContain('col')
+    })
+
+    it('allows labelWrapperAttrs class to override column sizing', () => {
+      const wrapper = mount(BFormGroup, {
+        props: {
+          label: 'Login:',
+          labelFor: 'loginname',
+          labelColsMd: 3,
+          labelWrapperAttrs: {
+            class: 'custom-width-class',
+            style: 'flex: 0 0 120px; max-width: 120px;',
+          },
+        },
+        slots: {
+          default: h(BFormInput, {id: 'loginname'}),
+        },
+      })
+      const [labelCol] = wrapper
+        .findAll('[class*="col-"]')
+        .filter((el) => el.html().includes('Login:'))
+      expect(labelCol?.classes()).toContain('custom-width-class')
+      // Vue normalizes shorthand flex to longhand properties
+      expect(labelCol?.attributes('style')).toContain('flex-basis: 120px')
+      expect(labelCol?.attributes('style')).toContain('max-width: 120px')
+    })
+
+    it('applies both labelWrapperAttrs and contentWrapperAttrs simultaneously', () => {
+      const wrapper = mount(BFormGroup, {
+        props: {
+          label: 'Login:',
+          labelFor: 'loginname',
+          labelColsMd: 3,
+          labelWrapperAttrs: {
+            'class': 'label-custom',
+            'data-testid': 'label-col',
+          },
+          contentWrapperAttrs: {
+            'class': 'content-custom',
+            'data-testid': 'content-col',
+          },
+        },
+        slots: {
+          default: h(BFormInput, {id: 'loginname'}),
+        },
+      })
+      const labelCol = wrapper.find('[data-testid="label-col"]')
+      const contentCol = wrapper.find('[data-testid="content-col"]')
+      expect(labelCol.exists()).toBe(true)
+      expect(contentCol.exists()).toBe(true)
+      expect(labelCol.classes()).toContain('label-custom')
+      expect(contentCol.classes()).toContain('content-custom')
+    })
   })
 })
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index 13dcfb564..ef4a6c4fd 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -1491,6 +1491,7 @@ export interface BFormGroupProps
   labelCols?: boolean | Numberish
   labelAlign?: string
   ariaInvalid?: AriaInvalid
+  contentWrapperAttrs?: Readonly<AttrsValue>
   description?: string
   disabled?: boolean
   feedbackAriaLive?: string
@@ -1502,6 +1503,7 @@ export interface BFormGroupProps
   labelFor?: string
   labelSize?: string
   labelVisuallyHidden?: boolean
+  labelWrapperAttrs?: Readonly<AttrsValue>
   state?: ValidationState
   tooltip?: boolean
   validFeedback?: string

From bec20879598129c67f6ef02b89e191a9384d9f46 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Fri, 19 Dec 2025 14:51:16 -0600
Subject: [PATCH 4/6] fix(BTable): restore dark mode support for sort icons
 (#2952)

---
 .../src/components/BTable/BTable.vue          |  2 +-
 .../src/components/BTable/_table.scss         | 73 ++++++++++++++++++-
 2 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index 0c75325be..cc54fa9fe 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -358,7 +358,7 @@ const computedFields = computed<TableField<Items>[]>(() =>
 
     const value = sortByModel.value?.find((sb) => el.key === sb.key)
     const sortValue =
-      el.sortable === false || isSortable.value === false
+      !el.sortable || isSortable.value === false
         ? undefined
         : value === undefined
           ? 'none'
diff --git a/packages/bootstrap-vue-next/src/components/BTable/_table.scss b/packages/bootstrap-vue-next/src/components/BTable/_table.scss
index 62d55aacf..481c253e4 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/_table.scss
+++ b/packages/bootstrap-vue-next/src/components/BTable/_table.scss
@@ -177,9 +177,15 @@ $b-table-sort-icon-bg-width: 1.5em !default;
 $b-table-sort-icon-bg-height: 1.5em !default;
 
 // Sort icon SVGs (arrows matching the current SortIcon component)
-$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 16 16'><path fill-rule='evenodd' opacity='0.4' d='M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z'/></svg>") !default;
-$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z'/></svg>") !default;
-$b-table-sort-icon-bg-descending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z'/></svg>") !default;
+// Light mode icons - dark fill
+$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23212529' viewBox='0 0 16 16'><path fill-rule='evenodd' opacity='0.4' d='M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z'/></svg>") !default;
+$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23212529' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z'/></svg>") !default;
+$b-table-sort-icon-bg-descending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23212529' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z'/></svg>") !default;
+
+// Dark mode icons - light fill
+$b-table-sort-icon-bg-not-sorted-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23dee2e6' viewBox='0 0 16 16'><path fill-rule='evenodd' opacity='0.4' d='M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z'/></svg>") !default;
+$b-table-sort-icon-bg-ascending-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23dee2e6' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z'/></svg>") !default;
+$b-table-sort-icon-bg-descending-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23dee2e6' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z'/></svg>") !default;
 
 .table th {
   &.b-table-sortable-column {
@@ -187,6 +193,40 @@ $b-table-sort-icon-bg-descending: url("data:image/svg+xml,<svg xmlns='http://www
   }
 }
 
+// Dark mode icon mixin - inner content (without thead/tfoot wrapper)
+@mixin table-sort-icons-dark-inner {
+  > tr {
+    > [aria-sort="none"] {
+      background-image: var(
+        --bvn-sort-icon-none,
+        bv-escape-svg($b-table-sort-icon-bg-not-sorted-dark)
+      );
+    }
+
+    > [aria-sort="ascending"] {
+      background-image: var(
+        --bvn-sort-icon-asc,
+        bv-escape-svg($b-table-sort-icon-bg-ascending-dark)
+      );
+    }
+
+    > [aria-sort="descending"] {
+      background-image: var(
+        --bvn-sort-icon-desc,
+        bv-escape-svg($b-table-sort-icon-bg-descending-dark)
+      );
+    }
+  }
+}
+
+// Dark mode icon mixin to avoid duplication
+@mixin table-sort-icons-dark {
+  > thead,
+  > tfoot {
+    @include table-sort-icons-dark-inner;
+  }
+}
+
 .table.b-table:not(.b-table-no-sort-icon) {
   > thead,
   > tfoot {
@@ -230,8 +270,26 @@ $b-table-sort-icon-bg-descending: url("data:image/svg+xml,<svg xmlns='http://www
     }
   }
 
+  // Apply dark mode icons via media query
+  @media (prefers-color-scheme: dark) {
+    @include table-sort-icons-dark;
+  }
+
+  // Apply dark mode icons when thead/tfoot explicitly has table-dark class
+  > thead.table-dark,
+  > tfoot.table-dark {
+    @include table-sort-icons-dark-inner;
+  }
+}
+
+// Apply dark mode icons when entire table has table-dark class
+.table.b-table.table-dark:not(.b-table-no-sort-icon) {
+  @include table-sort-icons-dark;
+}
+
+.table.b-table:not(.b-table-no-sort-icon) {
   // Padding adjustment for small tables
-  &.table-sm:not(.b-table-no-sort-icon) {
+  &.table-sm {
     > thead,
     > tfoot {
       > tr > [aria-sort] {
@@ -251,6 +309,13 @@ $b-table-sort-icon-bg-descending: url("data:image/svg+xml,<svg xmlns='http://www
   }
 }
 
+// Dark mode icon overrides for explicit [data-bs-theme="dark"]
+[data-bs-theme="dark"] {
+  .table.b-table:not(.b-table-no-sort-icon) {
+    @include table-sort-icons-dark;
+  }
+}
+
 .b-table {
   &.b-table-selectable {
     td {

From 562989bfbf3dbb5c14ae0f59b4b01b5744d1d371 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Fri, 19 Dec 2025 14:54:25 -0600
Subject: [PATCH 5/6] fix(BFormFile)!: align component with Bootstrap 5.3
 native file input styling (#2954)

---
 .../docs/src/data/components/formFile.data.ts |  11 +-
 .../components/demo/FormFileCustomText.vue    |   2 +-
 .../src/docs/demo/FormFileCaptureAfter.vue    |   6 +
 .../src/docs/demo/FormFileCaptureBefore.html  |   4 +
 apps/docs/src/docs/migration-guide.md         |  12 +
 apps/playground/src/Views/HomePage.vue        |   2 +
 .../src/components/Comps/TFormFile.vue        | 102 ++++++++
 architecture/BFORMFILE.md                     |  26 +-
 .../src/components/BFormFile/BFormFile.vue    | 118 +++++++--
 .../src/components/BFormFile/_form-file.scss  |  56 +++-
 .../components/BFormFile/form-file.spec.ts    | 243 ++++++++++++++++++
 .../src/types/ComponentProps.ts               |   2 +-
 12 files changed, 536 insertions(+), 48 deletions(-)
 create mode 100644 apps/docs/src/docs/demo/FormFileCaptureAfter.vue
 create mode 100644 apps/docs/src/docs/demo/FormFileCaptureBefore.html
 create mode 100644 apps/playground/src/components/Comps/TFormFile.vue

diff --git a/apps/docs/src/data/components/formFile.data.ts b/apps/docs/src/data/components/formFile.data.ts
index 37d01286e..a649d66a0 100644
--- a/apps/docs/src/data/components/formFile.data.ts
+++ b/apps/docs/src/data/components/formFile.data.ts
@@ -39,10 +39,10 @@ export default {
           description: 'Text for the browse button (custom mode only)',
         },
         capture: {
-          type: "'boolean' | 'user' | 'environment'",
-          default: false,
+          type: "'user' | 'environment'",
+          default: undefined,
           description:
-            "When set, will instruct the browser to use the device's camera (if supported)",
+            "When set, will instruct the browser to use the device's camera (if supported). 'user' requests the user-facing camera, 'environment' requests the outward-facing camera",
         },
         directory: {
           type: 'boolean',
@@ -52,7 +52,8 @@ export default {
         dropPlaceholder: {
           type: 'string',
           default: undefined,
-          description: 'Text to display when dragging files over the drop zone (custom mode only)',
+          description:
+            'Text to display when dragging files over the drop zone (custom mode only). Defaults to "Drop files here..." when not specified',
         },
         fileNameFormatter: {
           type: '(files: readonly File[]) => string',
@@ -94,7 +95,7 @@ export default {
         },
         placeholder: {
           type: 'string',
-          default: undefined,
+          default: 'No file chosen',
           description: 'Text to display when no file is selected (custom mode only)',
         },
         showFileNames: {
diff --git a/apps/docs/src/docs/components/demo/FormFileCustomText.vue b/apps/docs/src/docs/components/demo/FormFileCustomText.vue
index 43f357e08..101224360 100644
--- a/apps/docs/src/docs/components/demo/FormFileCustomText.vue
+++ b/apps/docs/src/docs/components/demo/FormFileCustomText.vue
@@ -3,7 +3,7 @@
     <BFormFile
       v-model="file1"
       browse-text="Choose File"
-      placeholder="No file chosen"
+      placeholder="No files selected"
     />
     <div class="mt-3">
       Selected: <strong>{{ file1?.name || 'None' }}</strong>
diff --git a/apps/docs/src/docs/demo/FormFileCaptureAfter.vue b/apps/docs/src/docs/demo/FormFileCaptureAfter.vue
new file mode 100644
index 000000000..c84f6b1d7
--- /dev/null
+++ b/apps/docs/src/docs/demo/FormFileCaptureAfter.vue
@@ -0,0 +1,6 @@
+<template>
+  <!-- #region template -->
+  <BFormFile capture="user" />
+  <BFormFile capture="environment" />
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/demo/FormFileCaptureBefore.html b/apps/docs/src/docs/demo/FormFileCaptureBefore.html
new file mode 100644
index 000000000..29acfcd71
--- /dev/null
+++ b/apps/docs/src/docs/demo/FormFileCaptureBefore.html
@@ -0,0 +1,4 @@
+<!-- #region template -->
+<BFormFile capture />
+<BFormFile :capture="true" />
+<!-- #endregion template -->
diff --git a/apps/docs/src/docs/migration-guide.md b/apps/docs/src/docs/migration-guide.md
index 76fda6b88..f813b37b4 100644
--- a/apps/docs/src/docs/migration-guide.md
+++ b/apps/docs/src/docs/migration-guide.md
@@ -213,6 +213,18 @@ See [Show and Hide](#show-and-hide) shared properties.
 As in `bootstrap-vue`, a simple `BAlert` is not visible by default. However, the means of showing the alert are different.
 The `bootstrap-vue` `show` prop is deprecated, use `model-value` instead.
 
+### BFormFile
+
+The `capture` prop no longer accepts a boolean value. Modern browser specifications require `capture` to be either `'user'` (for front-facing camera) or `'environment'` (for rear-facing camera).
+
+**Before:**
+
+<<< FRAGMENT ./demo/FormFileCaptureBefore.html#template{vue-html}
+
+**After:**
+
+<<< FRAGMENT ./demo/FormFileCaptureAfter.vue#template{vue-html}
+
 <<< FRAGMENT ./demo/AlertBefore.vue#template{vue-html}
 
 becomes
diff --git a/apps/playground/src/Views/HomePage.vue b/apps/playground/src/Views/HomePage.vue
index 55e82647e..b7b430094 100644
--- a/apps/playground/src/Views/HomePage.vue
+++ b/apps/playground/src/Views/HomePage.vue
@@ -65,6 +65,7 @@ import TDropdown from '../components/Comps/TDropdown.vue'
 import TForm from '../components/Comps/TForm.vue'
 import TFormCheckbox from '../components/Comps/TFormCheckbox.vue'
 import TFormCheckboxGroup from '../components/Comps/TFormCheckboxGroup.vue'
+import TFormFile from '../components/Comps/TFormFile.vue'
 import TFormFloatingLabel from '../components/Comps/TFormFloatingLabel.vue'
 import TFormGroup from '../components/Comps/TFormGroup.vue'
 import TFormInput from '../components/Comps/TFormInput.vue'
@@ -108,6 +109,7 @@ const comps: {name: string; is: unknown; disabled?: true}[] = [
   {name: 'Form', is: TForm},
   {name: 'FormCheckbox', is: TFormCheckbox},
   {name: 'FormCheckboxGroup', is: TFormCheckboxGroup},
+  {name: 'FormFile', is: TFormFile},
   {name: 'FormFloatingLabel', is: TFormFloatingLabel},
   {name: 'FormGroup', is: TFormGroup},
   {name: 'FormInput', is: TFormInput},
diff --git a/apps/playground/src/components/Comps/TFormFile.vue b/apps/playground/src/components/Comps/TFormFile.vue
new file mode 100644
index 000000000..ad95d748c
--- /dev/null
+++ b/apps/playground/src/components/Comps/TFormFile.vue
@@ -0,0 +1,102 @@
+<template>
+  <BContainer>
+    <h2 class="mt-4">Standard Usage</h2>
+    
+    <h3 class="mt-3">Basic (Multiple)</h3>
+    <BFormFile v-model="files1" multiple />
+    <div class="mt-2 small text-muted">Selected: {{ files1?.length || 0 }} files</div>
+    
+    <h3 class="mt-4">Invalid State</h3>
+    <BFormFile v-model="files2" :state="false" multiple />
+    <div class="invalid-feedback d-block">Please select valid files.</div>
+    
+    <h3 class="mt-4">Valid State</h3>
+    <BFormFile v-model="files3" :state="true" multiple />
+    <div class="valid-feedback d-block">Looks good!</div>
+    
+    <h3 class="mt-4">Single File</h3>
+    <BFormFile v-model="file1" />
+    <div class="mt-2 small text-muted">Selected: {{ file1?.name || 'None' }}</div>
+    
+    <h3 class="mt-4">With Label</h3>
+    <BFormFile v-model="files4" label="Choose files" multiple />
+    
+    <h3 class="mt-4">Small Size</h3>
+    <BFormFile v-model="files5" size="sm" multiple />
+    
+    <h3 class="mt-4">Large Size</h3>
+    <BFormFile v-model="files6" size="lg" multiple />
+    
+    <h3 class="mt-4">Disabled</h3>
+    <BFormFile v-model="files7" disabled multiple />
+    
+    <h3 class="mt-4">Custom Browse Text</h3>
+    <BFormFile v-model="files8" browse-text="Select Files" multiple />
+    
+    <h3 class="mt-4">Custom Placeholder</h3>
+    <BFormFile v-model="files9" placeholder="Choose your files..." multiple />
+    
+    <h2 class="mt-5">Plain Mode</h2>
+    
+    <h3 class="mt-3">Plain Basic</h3>
+    <BFormFile v-model="files10" plain multiple />
+    
+    <h3 class="mt-4">Plain Invalid State</h3>
+    <BFormFile v-model="files11" plain :state="false" multiple />
+    <div class="invalid-feedback d-block">Please select valid files.</div>
+    
+    <h3 class="mt-4">Plain Valid State</h3>
+    <BFormFile v-model="files12" plain :state="true" multiple />
+    <div class="valid-feedback d-block">Looks good!</div>
+    
+    <h2 class="mt-5">Input Groups</h2>
+    
+    <h3 class="mt-3">With Prepend</h3>
+    <div class="input-group">
+      <span class="input-group-text">Upload</span>
+      <BFormFile v-model="files13" multiple />
+    </div>
+    
+    <h3 class="mt-4">With Append</h3>
+    <div class="input-group">
+      <BFormFile v-model="files14" multiple />
+      <button class="btn btn-primary" type="button">Upload</button>
+    </div>
+    
+    <h3 class="mt-4">With Both</h3>
+    <div class="input-group">
+      <span class="input-group-text">Files</span>
+      <BFormFile v-model="files15" multiple />
+      <button class="btn btn-success" type="button">Submit</button>
+    </div>
+    
+    <h3 class="mt-4">Input Group - Invalid State</h3>
+    <div class="input-group">
+      <span class="input-group-text">Upload</span>
+      <BFormFile v-model="files16" :state="false" multiple />
+    </div>
+    <div class="invalid-feedback d-block">Please select valid files.</div>
+  </BContainer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const files1 = ref<File[] | null>(null)
+const files2 = ref<File[] | null>(null)
+const files3 = ref<File[] | null>(null)
+const file1 = ref<File | null>(null)
+const files4 = ref<File[] | null>(null)
+const files5 = ref<File[] | null>(null)
+const files6 = ref<File[] | null>(null)
+const files7 = ref<File[] | null>(null)
+const files8 = ref<File[] | null>(null)
+const files9 = ref<File[] | null>(null)
+const files10 = ref<File[] | null>(null)
+const files11 = ref<File[] | null>(null)
+const files12 = ref<File[] | null>(null)
+const files13 = ref<File[] | null>(null)
+const files14 = ref<File[] | null>(null)
+const files15 = ref<File[] | null>(null)
+const files16 = ref<File[] | null>(null)
+</script>
diff --git a/architecture/BFORMFILE.md b/architecture/BFORMFILE.md
index 702cfbf32..9566dee5d 100644
--- a/architecture/BFORMFILE.md
+++ b/architecture/BFORMFILE.md
@@ -74,20 +74,34 @@ Handles drag-and-drop file operations on the component wrapper.
 
 - Detects drag enter/leave/over events
 - Provides `isOverDropZone` reactive state
-- Validates dropped files against `accept` attribute
+- Accepts all file drops (no pre-filtering during drag)
 - Prevents default browser file opening behavior
 
 **Configuration:**
 
 ```typescript
-const {isOverDropZone} = useDropZone(dropZoneTarget, {
-  onDrop: (files) => onChange(files),
-  dataTypes: computedDataTypes, // Reactive computed ref
-  disabled: computed(() => props.disabled || props.plain || props.noDrop),
+const {isOverDropZone} = useDropZone(dropZoneRef, {
+  onDrop: (files) => {
+    if (files && !props.noDrop) {
+      handleFiles(files)
+    }
+  },
+  multiple: props.multiple || props.directory,
 })
 ```
 
-**Reactivity:** Passing `dataTypes` as a computed ref (rather than unwrapping it with `.value`) ensures the drop zone automatically updates when the `accept` prop changes.
+**Known Limitation - Drag Feedback:**
+
+The drop zone shows visual feedback for all dragged files, regardless of the `accept` attribute. This is because browsers don't reliably expose MIME type information during drag events, making it impossible to determine which files match the accept criteria before they're dropped ([VueUse issue #4523](https://github.com/vueuse/vueuse/issues/4523)).
+
+**Implementation Details:**
+
+- **Drag Feedback:** Visual overlay appears for all dragged files (good UX - users see immediate feedback)
+- **File Filtering:** After drop, files are validated against the `accept` attribute using custom validation logic
+- **Manual Filtering:** The `isFileAccepted()` function checks files against extension patterns (`.pdf`), MIME types (`image/png`), and wildcards (`image/*`)
+- **Native Input Sync:** Filtered files are set on the hidden input element using `DataTransfer` API for proper form submission support
+
+This approach provides a better user experience than showing no feedback, while still respecting the `accept` constraints after drop.
 
 ### File State Management
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
index 6ebac53fd..36c9c557e 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="rootRef" v-bind="processedAttrs.wrapperAttrs">
+  <div ref="rootRef" v-bind="processedAttrs.wrapperAttrs" class="b-form-file-root">
     <!-- Optional label -->
     <label
       v-if="hasLabelSlot || props.label"
@@ -23,18 +23,13 @@
       }"
     >
       <!-- Custom file control (mimics Bootstrap native input) -->
-      <div class="b-form-file-control" :class="computedClasses" :aria-disabled="props.disabled">
-        <!-- File name display -->
-        <div class="b-form-file-text">
-          <slot name="file-name" :files="selectedFiles" :names="fileNames">
-            <span v-if="hasFiles">{{ formattedFileNames }}</span>
-            <span v-else-if="hasPlaceholderSlot || props.placeholder" class="text-muted">
-              <slot name="placeholder">{{ props.placeholder }}</slot>
-            </span>
-          </slot>
-        </div>
-
-        <!-- Custom browse button -->
+      <div
+        class="b-form-file-control"
+        :class="computedClasses"
+        :aria-disabled="props.disabled"
+        @click="handleControlClick"
+      >
+        <!-- Custom browse button (now on LEFT to match Bootstrap v5) -->
         <button
           v-if="!props.noButton"
           :id="computedId"
@@ -44,10 +39,20 @@
           :disabled="props.disabled"
           :aria-label="props.ariaLabel"
           :aria-labelledby="props.ariaLabelledby"
-          @click="openFileDialog"
+          @click.stop="openFileDialog"
         >
           {{ effectiveBrowseText }}
         </button>
+
+        <!-- File name display -->
+        <div class="b-form-file-text">
+          <slot name="file-name" :files="selectedFiles" :names="fileNames">
+            <span v-if="hasFiles">{{ formattedFileNames }}</span>
+            <span v-else-if="hasPlaceholderSlot || props.placeholder" class="text-muted">
+              <slot name="placeholder">{{ props.placeholder }}</slot>
+            </span>
+          </slot>
+        </div>
       </div>
 
       <!-- Drag overlay (only shown when dragging) -->
@@ -165,7 +170,7 @@ const _props = withDefaults(defineProps<Omit<BFormFileProps, 'modelValue'>>(), {
   noButton: false,
   noDrop: false,
   plain: false,
-  placeholder: undefined,
+  placeholder: 'No file chosen',
   required: false,
   showFileNames: false,
   size: undefined,
@@ -185,6 +190,14 @@ const modelValue = defineModel<Exclude<BFormFileProps['modelValue'], undefined>>
 const attrs = useAttrs()
 
 const processedAttrs = computed(() => {
+  // In plain mode, pass all attributes to the input element
+  if (props.plain) {
+    return {
+      wrapperAttrs: {},
+      inputAttrs: attrs,
+    }
+  }
+  // In custom mode, split class/style to wrapper, rest to input
   const {class: wrapperClass, style: wrapperStyle, ...inputAttrs} = attrs
   const wrapperAttrs: Record<string, unknown> = {}
   if (wrapperClass !== undefined) wrapperAttrs.class = wrapperClass
@@ -207,12 +220,6 @@ const computedAccept = computed(() =>
   typeof props.accept === 'string' ? props.accept : props.accept.join(',')
 )
 
-// Computed data types for drop zone
-const computedDataTypes = computed(() => {
-  if (!computedAccept.value) return []
-  return computedAccept.value.split(',').map((type) => type.trim())
-})
-
 // VueUse file dialog (uses our hidden input element)
 const {
   open,
@@ -226,13 +233,15 @@ const {
 })
 
 // VueUse drop zone (replaces manual drag/drop)
+// Note: We don't pass dataTypes because the accept attribute handles validation
+// and there is no reliable way to get MIME types from in all browsers
+// https://github.com/vueuse/vueuse/issues/4523
 const {isOverDropZone} = useDropZone(dropZoneRef, {
   onDrop: (files) => {
     if (files && !props.noDrop) {
       handleFiles(files)
     }
   },
-  dataTypes: computedDataTypes,
   multiple: props.multiple || props.directory,
 })
 
@@ -248,10 +257,10 @@ const computedClasses = computed(() => [
 ])
 
 const computedPlainClasses = computed(() => [
+  'form-control',
   stateClass.value,
   {
     [`form-control-${props.size}`]: props.size !== undefined,
-    'form-control-file': true,
   },
 ])
 
@@ -291,9 +300,59 @@ const ariaLiveMessage = computed(() => {
 const effectiveBrowseText = computed(() => props.browseText ?? 'Browse')
 const effectiveDropPlaceholder = computed(() => props.dropPlaceholder ?? 'Drop files here...')
 
+// Validate file against accept criteria
+const isFileAccepted = (file: File): boolean => {
+  if (!computedAccept.value) return true
+
+  const acceptTypes = computedAccept.value.split(',').map((type) => type.trim())
+
+  return acceptTypes.some((acceptType) => {
+    // Extension match (e.g., .pdf)
+    if (acceptType.startsWith('.')) {
+      return file.name.toLowerCase().endsWith(acceptType.toLowerCase())
+    }
+    // Exact MIME type match (e.g., image/png)
+    if (!acceptType.includes('*')) {
+      return file.type === acceptType
+    }
+    // Wildcard MIME type match (e.g., image/* or */*)
+    const slashIndex = acceptType.indexOf('/')
+    if (slashIndex === -1) {
+      // Malformed wildcard pattern (no '/'): do not match anything
+      return false
+    }
+    const category = acceptType.slice(0, slashIndex)
+    // */* should match any MIME type
+    if (category === '*') {
+      return true
+    }
+    return file.type.startsWith(`${category}/`)
+  })
+}
+
 // File handling
 const handleFiles = (files: File[] | FileList, nativeEvent?: Event) => {
-  const fileArray = Array.from(files)
+  let fileArray: File[] = []
+
+  if (nativeEvent) {
+    // Plain mode: read from the event target (browser already filtered via accept)
+    const input = nativeEvent.target as HTMLInputElement
+    fileArray = input.files ? Array.from(input.files) : []
+  } else {
+    // Custom mode (drag & drop or file dialog): manually filter and set on hidden input
+    fileArray = Array.from(files).filter((file) => isFileAccepted(file))
+    if (customInputRef.value && typeof DataTransfer !== 'undefined') {
+      try {
+        const dataTransfer = new DataTransfer()
+        fileArray.forEach((file) => dataTransfer.items.add(file))
+        customInputRef.value.files = dataTransfer.files
+      } catch {
+        // In environments where DataTransfer is not fully supported, skip syncing files on the input
+      }
+    }
+  }
+
+  // Update internal state
   internalFiles.value = fileArray
 
   // Update model value
@@ -306,7 +365,7 @@ const handleFiles = (files: File[] | FileList, nativeEvent?: Event) => {
     modelValue.value = firstFile
   }
 
-  // Emit change event with files accessible
+  // Emit change event in nextTick to ensure DOM updates
   // In plain mode: forward the native event (has target.files)
   // In custom mode: create CustomEvent with files in detail
   nextTick(() => {
@@ -344,6 +403,15 @@ const openFileDialog = () => {
   }
 }
 
+// Handle click on control wrapper (make entire control clickable like Bootstrap v5)
+const handleControlClick = () => {
+  // Don't trigger if clicking the button itself (button has its own handler with .stop)
+  // Don't trigger if disabled
+  if (!props.disabled) {
+    openFileDialog()
+  }
+}
+
 // Plain mode change handler
 const onPlainChange = (e: Event) => {
   const input = e.target as HTMLInputElement
diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/_form-file.scss b/packages/bootstrap-vue-next/src/components/BFormFile/_form-file.scss
index 941ee65c9..9c0751908 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/_form-file.scss
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/_form-file.scss
@@ -15,12 +15,15 @@ input[type="file"].form-control-input-file-hide-button {
 .b-form-file-control {
   display: flex;
   align-items: stretch;
+  width: 100%;
   border: 1px solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);
   background-color: var(--bs-body-bg);
   transition:
     border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
+  position: relative;
+  cursor: pointer;
 
   &:focus-within:not([aria-disabled="true"]) {
     border-color: var(--bs-primary);
@@ -30,6 +33,11 @@ input[type="file"].form-control-input-file-hide-button {
 
   &.is-invalid {
     border-color: var(--bs-form-invalid-border-color);
+    padding-right: calc(1.5em + 0.75rem);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.1875rem) center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 
     &:focus-within {
       box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
@@ -38,6 +46,11 @@ input[type="file"].form-control-input-file-hide-button {
 
   &.is-valid {
     border-color: var(--bs-form-valid-border-color);
+    padding-right: calc(1.5em + 0.75rem);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.1875rem) center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 
     &:focus-within {
       box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
@@ -57,7 +70,8 @@ input[type="file"].form-control-input-file-hide-button {
 }
 
 .b-form-file-text {
-  flex: 1;
+  flex: 1 1 auto;
+  min-width: 0;
   padding: 0.375rem 0.75rem;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -69,17 +83,21 @@ input[type="file"].form-control-input-file-hide-button {
 .b-form-file-button {
   flex-shrink: 0;
   padding: 0.375rem 0.75rem;
-  margin: -1px -1px -1px 0;
+  margin: 0;
   color: var(--bs-body-color);
-  background-color: var(--bs-secondary-bg);
+  background-color: var(--bs-tertiary-bg);
   border: none;
-  border-left: 1px solid var(--bs-border-color);
-  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
+  border-right: 1px solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
   cursor: pointer;
   line-height: 1.5;
 
   &:hover:not(:disabled) {
-    background-color: var(--bs-tertiary-bg);
+    background-color: var(--bs-secondary-bg);
+  }
+
+  &:focus {
+    outline: 0;
   }
 
   &:disabled {
@@ -100,8 +118,8 @@ input[type="file"].form-control-input-file-hide-button {
   }
 
   .b-form-file-button {
-    margin: -1px -1px -1px 0;
-    border-radius: 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0;
+    margin: 0;
+    border-radius: var(--bs-border-radius-sm) 0 0 var(--bs-border-radius-sm);
   }
 }
 
@@ -117,8 +135,8 @@ input[type="file"].form-control-input-file-hide-button {
   }
 
   .b-form-file-button {
-    margin: -1px -1px -1px 0;
-    border-radius: 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0;
+    margin: 0;
+    border-radius: var(--bs-border-radius-lg) 0 0 var(--bs-border-radius-lg);
   }
 }
 
@@ -150,3 +168,21 @@ input[type="file"].form-control-input-file-hide-button {
   color: var(--bs-primary);
   font-weight: 500;
 }
+
+// Input group support - inherit flex behavior like native .form-control
+// The component's root wrapper (direct child of .input-group) needs flex properties
+.input-group > .b-form-file-root {
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 0;
+
+  // The wrapper and control inside need to fill the root wrapper
+  .b-form-file-wrapper {
+    width: 100%;
+
+    .b-form-file-control {
+      width: 100%;
+      min-width: 0;
+    }
+  }
+}
diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts b/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
index 9a90b6006..8da00f534 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
@@ -44,6 +44,37 @@ describe('form-file', () => {
     })
   })
 
+  describe('plain mode - classes', () => {
+    it('has form-control class on input when plain=true', () => {
+      const wrapper = mount(BFormFile, {
+        props: {plain: true},
+      })
+
+      const $input = wrapper.find('input')
+      expect($input.classes()).toContain('form-control')
+    })
+
+    it('does not have form-control-file class on input when plain=true', () => {
+      const wrapper = mount(BFormFile, {
+        props: {plain: true},
+      })
+
+      const $input = wrapper.find('input')
+      expect($input.classes()).not.toContain('form-control-file')
+    })
+
+    it('has custom class on input when plain=true and class attribute provided', () => {
+      const wrapper = mount(BFormFile, {
+        props: {plain: true},
+        attrs: {class: 'my-custom-class'},
+      })
+
+      const $input = wrapper.find('input')
+      expect($input.classes()).toContain('my-custom-class')
+      expect($input.classes()).toContain('form-control')
+    })
+  })
+
   describe('plain mode - input attributes', () => {
     it('has input element when plain=true', () => {
       const wrapper = mount(BFormFile, {props: {plain: true}})
@@ -302,6 +333,64 @@ describe('form-file', () => {
     })
   })
 
+  describe('validation state classes', () => {
+    it('has is-invalid class on control when state=false in custom mode', () => {
+      const wrapper = mount(BFormFile, {
+        props: {state: false},
+      })
+
+      const $control = wrapper.find('.b-form-file-control')
+      expect($control.classes()).toContain('is-invalid')
+    })
+
+    it('has is-valid class on control when state=true in custom mode', () => {
+      const wrapper = mount(BFormFile, {
+        props: {state: true},
+      })
+
+      const $control = wrapper.find('.b-form-file-control')
+      expect($control.classes()).toContain('is-valid')
+    })
+
+    it('does not have validation classes on control when state=undefined in custom mode', () => {
+      const wrapper = mount(BFormFile, {
+        props: {state: undefined},
+      })
+
+      const $control = wrapper.find('.b-form-file-control')
+      expect($control.classes()).not.toContain('is-invalid')
+      expect($control.classes()).not.toContain('is-valid')
+    })
+
+    it('has is-invalid class on input when state=false in plain mode', () => {
+      const wrapper = mount(BFormFile, {
+        props: {state: false, plain: true},
+      })
+
+      const $input = wrapper.find('input')
+      expect($input.classes()).toContain('is-invalid')
+    })
+
+    it('has is-valid class on input when state=true in plain mode', () => {
+      const wrapper = mount(BFormFile, {
+        props: {state: true, plain: true},
+      })
+
+      const $input = wrapper.find('input')
+      expect($input.classes()).toContain('is-valid')
+    })
+
+    it('does not have validation classes on input when state=undefined in plain mode', () => {
+      const wrapper = mount(BFormFile, {
+        props: {state: undefined, plain: true},
+      })
+
+      const $input = wrapper.find('input')
+      expect($input.classes()).not.toContain('is-invalid')
+      expect($input.classes()).not.toContain('is-valid')
+    })
+  })
+
   describe('custom mode - UI elements', () => {
     it('renders hidden input element for form submission in custom mode', () => {
       const wrapper = mount(BFormFile, {props: {name: 'testFile'}})
@@ -343,6 +432,16 @@ describe('form-file', () => {
       expect($button.text()).toBe('Choose File')
     })
 
+    it('browse button is positioned on the left (before text element)', () => {
+      const wrapper = mount(BFormFile)
+      const $control = wrapper.find('.b-form-file-control')
+      const {children} = $control.element
+
+      // Button should be first child, text should be second
+      expect(children[0].classList.contains('b-form-file-button')).toBe(true)
+      expect(children[1].classList.contains('b-form-file-text')).toBe(true)
+    })
+
     it('browse button is disabled when disabled prop true', () => {
       const wrapper = mount(BFormFile, {
         props: {disabled: true},
@@ -413,6 +512,16 @@ describe('form-file', () => {
       const $wrapper = wrapper.find('.b-form-file-wrapper')
       expect($wrapper.classes()).not.toContain('b-form-file-dragging')
     })
+
+    it('control click does not trigger when disabled', () => {
+      const wrapper = mount(BFormFile, {
+        props: {disabled: true},
+      })
+      const $control = wrapper.find('.b-form-file-control')
+
+      // Control should have aria-disabled
+      expect($control.attributes('aria-disabled')).toBe('true')
+    })
   })
 
   describe('plain mode - label and slots', () => {
@@ -594,4 +703,138 @@ describe('form-file', () => {
       expect(wrapper.vm.modelValue).toBe(null)
     })
   })
+
+  describe('input group integration', () => {
+    it('wrapper has proper structure for input group usage', () => {
+      const wrapper = mount(BFormFile)
+      const $wrapper = wrapper.find('.b-form-file-wrapper')
+
+      // Wrapper should exist and contain the control
+      expect($wrapper.exists()).toBe(true)
+      expect($wrapper.find('.b-form-file-control').exists()).toBe(true)
+    })
+
+    it('control maintains full width within wrapper', () => {
+      const wrapper = mount(BFormFile)
+      const $control = wrapper.find('.b-form-file-control')
+
+      // Control should exist (CSS sets width: 100% in input groups)
+      expect($control.exists()).toBe(true)
+    })
+  })
+
+  describe('file filtering with accept attribute', () => {
+    // Helper to create a mock File object
+    const createMockFile = (name: string, type: string): File => new File(['content'], name, {type})
+
+    it('accepts files matching extension pattern (.pdf)', async () => {
+      const wrapper = mount(BFormFile, {
+        props: {accept: '.pdf'},
+      })
+
+      const pdfFile = createMockFile('document.pdf', 'application/pdf')
+      const txtFile = createMockFile('document.txt', 'text/plain')
+
+      // Access the component's isFileAccepted method through vm
+      const component = wrapper.vm as unknown as {isFileAccepted: (file: File) => boolean}
+      expect(component.isFileAccepted).toBeDefined()
+      expect(component.isFileAccepted(pdfFile)).toBe(true)
+      expect(component.isFileAccepted(txtFile)).toBe(false)
+    })
+
+    it('accepts files matching exact MIME type (image/png)', async () => {
+      const wrapper = mount(BFormFile, {
+        props: {accept: 'image/png'},
+      })
+
+      const pngFile = createMockFile('image.png', 'image/png')
+      const jpgFile = createMockFile('image.jpg', 'image/jpeg')
+
+      const component = wrapper.vm as unknown as {isFileAccepted: (file: File) => boolean}
+      expect(component.isFileAccepted(pngFile)).toBe(true)
+      expect(component.isFileAccepted(jpgFile)).toBe(false)
+    })
+
+    it('accepts files matching wildcard MIME type (image/*)', async () => {
+      const wrapper = mount(BFormFile, {
+        props: {accept: 'image/*'},
+      })
+
+      const pngFile = createMockFile('image.png', 'image/png')
+      const jpgFile = createMockFile('image.jpg', 'image/jpeg')
+      const pdfFile = createMockFile('document.pdf', 'application/pdf')
+
+      const component = wrapper.vm as unknown as {isFileAccepted: (file: File) => boolean}
+      expect(component.isFileAccepted(pngFile)).toBe(true)
+      expect(component.isFileAccepted(jpgFile)).toBe(true)
+      expect(component.isFileAccepted(pdfFile)).toBe(false)
+    })
+
+    it('accepts all files with wildcard pattern (*/*)', async () => {
+      const wrapper = mount(BFormFile, {
+        props: {accept: '*/*'},
+      })
+
+      const pngFile = createMockFile('image.png', 'image/png')
+      const pdfFile = createMockFile('document.pdf', 'application/pdf')
+      const txtFile = createMockFile('document.txt', 'text/plain')
+
+      const component = wrapper.vm as unknown as {isFileAccepted: (file: File) => boolean}
+      expect(component.isFileAccepted(pngFile)).toBe(true)
+      expect(component.isFileAccepted(pdfFile)).toBe(true)
+      expect(component.isFileAccepted(txtFile)).toBe(true)
+    })
+
+    it('accepts files matching multiple accept types', async () => {
+      const wrapper = mount(BFormFile, {
+        props: {accept: ['.pdf', 'image/png', 'text/*']},
+      })
+
+      const pdfFile = createMockFile('document.pdf', 'application/pdf')
+      const pngFile = createMockFile('image.png', 'image/png')
+      const txtFile = createMockFile('document.txt', 'text/plain')
+      const jpgFile = createMockFile('image.jpg', 'image/jpeg')
+
+      const component = wrapper.vm as unknown as {isFileAccepted: (file: File) => boolean}
+      expect(component.isFileAccepted(pdfFile)).toBe(true)
+      expect(component.isFileAccepted(pngFile)).toBe(true)
+      expect(component.isFileAccepted(txtFile)).toBe(true)
+      expect(component.isFileAccepted(jpgFile)).toBe(false)
+    })
+
+    it('handles case-insensitive extension matching', async () => {
+      const wrapper = mount(BFormFile, {
+        props: {accept: '.PDF'},
+      })
+
+      const lowerPdf = createMockFile('document.pdf', 'application/pdf')
+      const upperPdf = createMockFile('document.PDF', 'application/pdf')
+
+      const component = wrapper.vm as unknown as {isFileAccepted: (file: File) => boolean}
+      expect(component.isFileAccepted(lowerPdf)).toBe(true)
+      expect(component.isFileAccepted(upperPdf)).toBe(true)
+    })
+
+    it('rejects files with malformed wildcard pattern (no slash)', async () => {
+      const wrapper = mount(BFormFile, {
+        props: {accept: 'image'},
+      })
+
+      const pngFile = createMockFile('image.png', 'image/png')
+
+      const component = wrapper.vm as unknown as {isFileAccepted: (file: File) => boolean}
+      expect(component.isFileAccepted(pngFile)).toBe(false)
+    })
+
+    it('accepts all files when accept is undefined', async () => {
+      const wrapper = mount(BFormFile)
+
+      const pngFile = createMockFile('image.png', 'image/png')
+      const pdfFile = createMockFile('document.pdf', 'application/pdf')
+
+      const component = wrapper.vm as unknown as {isFileAccepted: (file: File) => boolean}
+      expect(component.isFileAccepted(pngFile)).toBe(true)
+      expect(component.isFileAccepted(pdfFile)).toBe(true)
+    })
+  })
 })
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
index ef4a6c4fd..c7075d0ca 100644
--- a/packages/bootstrap-vue-next/src/types/ComponentProps.ts
+++ b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -322,7 +322,7 @@ export interface BFormFileProps {
   accept?: string | readonly string[]
   autofocus?: boolean
   browseText?: string
-  capture?: boolean | 'user' | 'environment'
+  capture?: 'user' | 'environment'
   directory?: boolean
   disabled?: boolean
   dropPlaceholder?: string

From b69deff5f8f72090dc3303adff3de2a0d1bd503e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 19 Dec 2025 14:56:06 -0600
Subject: [PATCH 6/6] chore: release main (#2958)

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

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 71c9a88c3..baf2fb755 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/bootstrap-vue-next": "0.41.0",
-  "packages/nuxt": "0.41.0"
+  "packages/bootstrap-vue-next": "0.42.0",
+  "packages/nuxt": "0.42.0"
 }
diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md
index 9989a5a91..d8096a53f 100644
--- a/packages/bootstrap-vue-next/CHANGELOG.md
+++ b/packages/bootstrap-vue-next/CHANGELOG.md
@@ -1,5 +1,23 @@
 # Changelog
 
+## [0.42.0](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.41.0...bootstrapvuenext-v0.42.0) (2025-12-19)
+
+
+### ⚠ BREAKING CHANGES
+
+* **BFormFile:** align component with Bootstrap 5.3 native file input styling ([#2954](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2954))
+
+### Features
+
+* **BFormGroup:** add props to apply attrs to label and content wrappers in horizontal mode ([#2960](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2960)) ([d583297](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/d583297576aaecc47127cc6f34353030df7b99ec))
+
+
+### Bug Fixes
+
+* **BFormFile:** align component with Bootstrap 5.3 native file input styling ([#2954](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2954)) ([562989b](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/562989bfbf3dbb5c14ae0f59b4b01b5744d1d371))
+* **BTable:** restore dark mode support for sort icons ([#2952](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2952)) ([bec2087](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/bec20879598129c67f6ef02b89e191a9384d9f46))
+* remove boolean and null from modal promise return types ([#2957](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2957)) ([a75332e](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/a75332efab0c397d2125e23ad634267151e5d0c9))
+
 ## [0.41.0](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.40.9...bootstrapvuenext-v0.41.0) (2025-12-12)
 
 
diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json
index 7440d80f7..467ae926e 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": "Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "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 de6e2ce5c..94ed46802 100644
--- a/packages/nuxt/CHANGELOG.md
+++ b/packages/nuxt/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.42.0](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.41.0...nuxt-v0.42.0) (2025-12-19)
+
+
+### Miscellaneous Chores
+
+* **nuxt:** Synchronize main group versions
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * bootstrap-vue-next bumped to 0.42.0
+  * peerDependencies
+    * bootstrap-vue-next bumped to 0.42.0
+
 ## [0.41.0](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.40.9...nuxt-v0.41.0) (2025-12-12)
 
 
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 9c8af7d7f..cc7e40a16 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.41.0",
+  "version": "0.42.0",
   "license": "MIT",
   "author": {
     "name": "Issayah",