From 718c44d19cd1781ec86e3777e726585b4018a2d4 Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Fri, 14 Feb 2025 11:09:54 +0200
Subject: [PATCH 1/7] feat(BModal): use css var for zindex, add helper vars and
 ontop class

---
 .../src/components/BModal/BModal.vue          | 39 +++++++++++++++++--
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
index 8fcddb85b..32ab8395a 100644
--- a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
+++ b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
@@ -16,6 +16,7 @@
           {
             fade: !computedNoAnimation,
             show: isVisible,
+            ontop: (activeModalCount ?? 0) - 1 === (activePosition ?? 0),
           },
         ]"
         role="dialog"
@@ -114,6 +115,7 @@
           :class="{
             fade: !computedNoAnimation,
             show: backdropVisible || computedNoAnimation,
+            ontop: (activeModalCount ?? 0) - 1 === (activePosition ?? 0),
           }"
           @click="hide('backdrop')"
         />
@@ -125,7 +127,16 @@
 <script setup lang="ts">
 import {onKeyStroke, useFocus} from '@vueuse/core'
 import {useActivatedFocusTrap} from '../../composables/useActivatedFocusTrap'
-import {computed, type CSSProperties, type EmitFn, useTemplateRef, watch} from 'vue'
+import {
+  computed,
+  type CSSProperties,
+  type EmitFn,
+  nextTick,
+  onMounted,
+  ref,
+  useTemplateRef,
+  watch,
+} from 'vue'
 import type {BModalProps} from '../../types/ComponentProps'
 import {BvTriggerableEvent} from '../../utils'
 import BButton from '../BButton/BButton.vue'
@@ -395,7 +406,23 @@ watch(stackWithoutSelf, (newValue, oldValue) => {
     hide()
 })
 
-const defaultModalDialogZIndex = 1056
+onMounted(() => {
+  watch(
+    renderRef,
+    (v) => {
+      if (!v) return
+      nextTick(() => {
+        if (!element.value) return
+        defaultModalDialogZIndex.value = parseInt(
+          window.getComputedStyle(element.value).getPropertyValue('--bs-modal-zindex')
+        )
+      })
+    },
+    {immediate: true}
+  )
+})
+
+const defaultModalDialogZIndex = ref(1056)
 const computedZIndexNumber = computed<number>(() =>
   // Make sure that newly opened modals have a higher z-index than currently active ones.
   // All active modals have a z-index of ('defaultZIndex' - 'stackSize' - 'positionInStack').
@@ -404,15 +431,19 @@ const computedZIndexNumber = computed<number>(() =>
 
   showRef.value || isLeaving.value
     ? // Just for reference there is a single frame in which the modal is not active but still has a higher z-index than the active ones due to _when_ it calculates its position. It's a small visual effect
-      defaultModalDialogZIndex -
+      defaultModalDialogZIndex.value -
       ((activeModalCount?.value ?? 0) * 2 - (activePosition?.value ?? 0) * 2)
-    : defaultModalDialogZIndex
+    : defaultModalDialogZIndex.value
 )
 const computedZIndex = computed<CSSProperties>(() => ({
   'z-index': computedZIndexNumber.value,
+  '--b-position': activePosition?.value ?? 0,
+  '--b-count': activeModalCount?.value ?? 0,
 }))
 const computedZIndexBackdrop = computed<CSSProperties>(() => ({
   'z-index': computedZIndexNumber.value - 1,
+  '--b-position': activePosition?.value ?? 0,
+  '--b-count': activeModalCount?.value ?? 0,
 }))
 
 const sharedSlots = computed<SharedSlotsData>(() => ({

From f130e79f662e8ea1809c04cbfa7b84a40a50096f Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Thu, 22 May 2025 23:26:37 +0300
Subject: [PATCH 2/7] add better zindex calculation and inverse positions

---
 .../src/components/BModal/BModal.vue          | 24 ++++++++++++-------
 .../bootstrap-vue-next/src/styles/styles.scss |  5 ++++
 packages/bootstrap-vue-next/src/utils/dom.ts  |  6 +++++
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
index fabc79867..a3dea6fcc 100644
--- a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
+++ b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
@@ -15,7 +15,7 @@
           {
             fade: !computedNoAnimation,
             show: isVisible,
-            ontop: (activeModalCount ?? 0) - 1 === (activePosition ?? 0),
+            ...sharedClasses,
           },
         ]"
         role="dialog"
@@ -25,7 +25,7 @@
         v-bind="$attrs"
         :style="computedZIndex"
         style="display: block"
-        @mousedown.self="hide('backdrop')"
+        @mousedown.left.self="hide('backdrop')"
       >
         <div class="modal-dialog" :class="modalDialogClasses">
           <div v-if="contentShowing" class="modal-content" :class="props.contentClass">
@@ -117,7 +117,7 @@
           :class="{
             fade: !computedNoAnimation,
             show: backdropVisible || computedNoAnimation,
-            ontop: (activeModalCount ?? 0) - 1 === (activePosition ?? 0),
+            ...sharedClasses,
           }"
           @click="hide('backdrop')"
         />
@@ -148,7 +148,7 @@ import BCloseButton from '../BButton/BCloseButton.vue'
 import {useDefaults} from '../../composables/useDefaults'
 import {useId} from '../../composables/useId'
 import {useSafeScrollLock} from '../../composables/useSafeScrollLock'
-import {isEmptySlot} from '../../utils/dom'
+import {getModalZIndex, isEmptySlot} from '../../utils/dom'
 import {useColorVariantClasses} from '../../composables/useColorVariantClasses'
 import {useModalManager} from '../../composables/useModalManager'
 import {useShowHide} from '../../composables/useShowHide'
@@ -373,6 +373,13 @@ const titleClasses = computed(() => [
     ['visually-hidden']: props.titleVisuallyHidden,
   },
 ])
+
+const sharedClasses = computed(() => ({
+  [`stack-position-${activePosition?.value ?? 0}`]: true,
+  [`stack-inverse-position-${(activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0)}`]:
+    true,
+}))
+
 const disableCancel = computed(() => props.cancelDisabled || props.busy)
 const disableOk = computed(() => props.okDisabled || props.busy)
 
@@ -386,6 +393,8 @@ watch(stackWithoutSelf, (newValue, oldValue) => {
     hide()
 })
 
+const defaultModalDialogZIndex = ref(getModalZIndex(element.value ?? document.body))
+
 onMounted(() => {
   watch(
     renderRef,
@@ -393,16 +402,13 @@ onMounted(() => {
       if (!v) return
       nextTick(() => {
         if (!element.value) return
-        defaultModalDialogZIndex.value = parseInt(
-          window.getComputedStyle(element.value).getPropertyValue('--bs-modal-zindex')
-        )
+        defaultModalDialogZIndex.value = getModalZIndex(element.value)
       })
     },
     {immediate: true}
   )
 })
 
-const defaultModalDialogZIndex = ref(1056)
 const computedZIndexNumber = computed<number>(() =>
   // Make sure that newly opened modals have a higher z-index than currently active ones.
   // All active modals have a z-index of ('defaultZIndex' - 'stackSize' - 'positionInStack').
@@ -418,11 +424,13 @@ const computedZIndexNumber = computed<number>(() =>
 const computedZIndex = computed<CSSProperties>(() => ({
   'z-index': computedZIndexNumber.value,
   '--b-position': activePosition?.value ?? 0,
+  '--b-inverse-position': (activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0),
   '--b-count': activeModalCount?.value ?? 0,
 }))
 const computedZIndexBackdrop = computed<CSSProperties>(() => ({
   'z-index': computedZIndexNumber.value - 1,
   '--b-position': activePosition?.value ?? 0,
+  '--b-inverse-position': (activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0),
   '--b-count': activeModalCount?.value ?? 0,
 }))
 
diff --git a/packages/bootstrap-vue-next/src/styles/styles.scss b/packages/bootstrap-vue-next/src/styles/styles.scss
index abd5aea52..2132ee8ec 100644
--- a/packages/bootstrap-vue-next/src/styles/styles.scss
+++ b/packages/bootstrap-vue-next/src/styles/styles.scss
@@ -68,3 +68,8 @@
 .no-transition {
   transition: none !important;
 }
+
+:root {
+  --bs-modal-zindex: #{$zindex-modal};
+  --bs-toast-max-width: #{$toast-max-width};
+}
diff --git a/packages/bootstrap-vue-next/src/utils/dom.ts b/packages/bootstrap-vue-next/src/utils/dom.ts
index 578dd4897..1eb9dc80c 100644
--- a/packages/bootstrap-vue-next/src/utils/dom.ts
+++ b/packages/bootstrap-vue-next/src/utils/dom.ts
@@ -66,3 +66,9 @@ export const sortSlotElementsByPosition = (
   if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1
   return 0
 }
+
+export const getModalZIndex = (element: Readonly<HTMLElement>) =>
+  Number.parseInt(
+    window.getComputedStyle(element ?? document.body).getPropertyValue('--bs-modal-zindex'),
+    10
+  ) || 1055

From 002742bc38e70828a12b156979366c5d6d38aefb Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Thu, 22 May 2025 23:45:56 +0300
Subject: [PATCH 3/7] Update packages/bootstrap-vue-next/src/utils/dom.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 packages/bootstrap-vue-next/src/utils/dom.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/utils/dom.ts b/packages/bootstrap-vue-next/src/utils/dom.ts
index 1eb9dc80c..c40d91621 100644
--- a/packages/bootstrap-vue-next/src/utils/dom.ts
+++ b/packages/bootstrap-vue-next/src/utils/dom.ts
@@ -67,8 +67,13 @@ export const sortSlotElementsByPosition = (
   return 0
 }
 
-export const getModalZIndex = (element: Readonly<HTMLElement>) =>
-  Number.parseInt(
-    window.getComputedStyle(element ?? document.body).getPropertyValue('--bs-modal-zindex'),
-    10
-  ) || 1055
+export const getModalZIndex = (element?: Readonly<HTMLElement | null>): number => {
+  const target = element ?? document.body
+  const raw    = window
+    .getComputedStyle(target)
+    .getPropertyValue('--bs-modal-zindex')
+    .trim()
+
+  const parsed = Number.parseInt(raw, 10)
+  return Number.isFinite(parsed) ? parsed : 1055
+}

From b3728246d295680d076cc6dda33c5b9a8aa0b5d6 Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Thu, 22 May 2025 23:50:43 +0300
Subject: [PATCH 4/7] smol fiks

---
 .../src/components/BModal/BModal.vue                 | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
index a3dea6fcc..fda0c3c7b 100644
--- a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
+++ b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
@@ -374,12 +374,6 @@ const titleClasses = computed(() => [
   },
 ])
 
-const sharedClasses = computed(() => ({
-  [`stack-position-${activePosition?.value ?? 0}`]: true,
-  [`stack-inverse-position-${(activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0)}`]:
-    true,
-}))
-
 const disableCancel = computed(() => props.cancelDisabled || props.busy)
 const disableOk = computed(() => props.okDisabled || props.busy)
 
@@ -388,6 +382,12 @@ const {activePosition, activeModalCount, stackWithoutSelf} = useModalManager(
   modelValue.value
 )
 
+const sharedClasses = computed(() => ({
+  [`stack-position-${activePosition?.value ?? 0}`]: true,
+  [`stack-inverse-position-${(activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0)}`]:
+    true,
+}))
+
 watch(stackWithoutSelf, (newValue, oldValue) => {
   if (newValue.length > oldValue.length && showRef.value === true && props.noStacking === true)
     hide()

From 402c5a73279346134aefa26dcf83e3d0b0710262 Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Thu, 22 May 2025 23:54:29 +0300
Subject: [PATCH 5/7] forgot ssr safety

---
 packages/bootstrap-vue-next/src/utils/dom.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/utils/dom.ts b/packages/bootstrap-vue-next/src/utils/dom.ts
index c40d91621..6fc88f91d 100644
--- a/packages/bootstrap-vue-next/src/utils/dom.ts
+++ b/packages/bootstrap-vue-next/src/utils/dom.ts
@@ -68,12 +68,9 @@ export const sortSlotElementsByPosition = (
 }
 
 export const getModalZIndex = (element?: Readonly<HTMLElement | null>): number => {
+  if (typeof window === 'undefined') return 1055
   const target = element ?? document.body
-  const raw    = window
-    .getComputedStyle(target)
-    .getPropertyValue('--bs-modal-zindex')
-    .trim()
-
+  const raw = window.getComputedStyle(target).getPropertyValue('--bs-modal-zindex').trim()
   const parsed = Number.parseInt(raw, 10)
   return Number.isFinite(parsed) ? parsed : 1055
 }

From 0b25eb8420edc0f74192fdfea67eabaa77287e4e Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Fri, 23 May 2025 00:24:25 +0300
Subject: [PATCH 6/7] add an example off stack css vars and classes

---
 apps/docs/src/docs/components/modal.md | 46 ++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/apps/docs/src/docs/components/modal.md b/apps/docs/src/docs/components/modal.md
index e65f8b5e1..75bd98aae 100644
--- a/apps/docs/src/docs/components/modal.md
+++ b/apps/docs/src/docs/components/modal.md
@@ -174,6 +174,10 @@ Feel free to mix vertically `centered` with `scrollable`.
   </BModal>
   <BModal v-model="nestedModal3" size="sm" title="Third Modal" ok-only>
     <p class="my-1">Third Modal</p>
+    <BButton @click="nestedModal4 = !nestedModal4" size="sm">Open Fouth Modal</BButton>
+  </BModal>
+  <BModal v-model="nestedModal4" size="sm" title="Fourth Modal" ok-only>
+    <p class="my-1">Fourth Modal</p>
   </BModal>
   <template #html>
 
@@ -193,6 +197,10 @@ Feel free to mix vertically `centered` with `scrollable`.
 
   <BModal v-model="nestedModal3" size="sm" title="Third Modal" ok-only>
     <p class="my-1">Third Modal</p>
+    <BButton @click="nestedModal4 = !nestedModal4" size="sm">Open Fouth Modal</BButton>
+  </BModal>
+  <BModal v-model="nestedModal4" size="sm" title="Fourth Modal" ok-only>
+    <p class="my-1">Fourth Modal</p>
   </BModal>
 </template>
 
@@ -200,7 +208,27 @@ Feel free to mix vertically `centered` with `scrollable`.
 const nestedModal1 = ref(false)
 const nestedModal2 = ref(false)
 const nestedModal3 = ref(false)
+const nestedModal4 = ref(false)
 </script>
+<style>
+// just a little example of the variables and classes for stack
+.modal {
+  --bs-modal-zindex: 1900;
+  transform: translate(
+    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px),
+    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px)
+  );
+  transition:
+    transform 0.5s,
+    opacity 0.15s linear !important;
+}
+.modal:not(.stack-inverse-position-0) {
+  opacity: calc(1 - ((var(--b-count, 0) - var(--b-position, 0)) * 0.1));
+}
+.modal-backdrop:not(.stack-inverse-position-0) {
+  opacity: 0 !important;
+}
+</style>
 ```
 
   </template>
@@ -240,4 +268,22 @@ const preventFn = (e: Event) => {
 const nestedModal1 = ref(false)
 const nestedModal2 = ref(false)
 const nestedModal3 = ref(false)
+const nestedModal4 = ref(false)
 </script>
+
+<style>
+.modal {
+  --bs-modal-zindex: 1900;
+  transform: translate(
+    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px),
+    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px)
+  );
+  transition: transform 0.5s, opacity 0.15s linear !important;
+}
+.modal:not(.stack-inverse-position-0) {
+  opacity: calc(1 - ((var(--b-count, 0) - var(--b-position, 0)) * 0.1));
+}
+.modal-backdrop:not(.stack-inverse-position-0) {
+  opacity: 0 !important;
+}
+</style>

From 23c7ad09813e4d997d742a1dd224ac81d74b82aa Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Fri, 23 May 2025 01:21:29 +0300
Subject: [PATCH 7/7] right comment

---
 apps/docs/src/docs/components/modal.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/src/docs/components/modal.md b/apps/docs/src/docs/components/modal.md
index 75bd98aae..9f19cb3b9 100644
--- a/apps/docs/src/docs/components/modal.md
+++ b/apps/docs/src/docs/components/modal.md
@@ -211,7 +211,7 @@ const nestedModal3 = ref(false)
 const nestedModal4 = ref(false)
 </script>
 <style>
-// just a little example of the variables and classes for stack
+/* just a little example of the variables and classes for stack */
 .modal {
   --bs-modal-zindex: 1900;
   transform: translate(