Merge branch 'main' into chore--refactoring-and-dependency-updates

Author: Sqrcz

docs/components/modal.md

@@ -4,6 +4,7 @@ import FwbModalExampleSize from './modal/examples/FwbModalExampleSize.vue'
 import FwbModalExampleEscapable from './modal/examples/FwbModalExampleEscapable.vue'
 import FwbModalExamplePersistent from './modal/examples/FwbModalExamplePersistent.vue'
 import FwbModalExamplePosition from './modal/examples/FwbModalExamplePosition.vue'
+import FwbModalExampleFocusTrap from './modal/examples/FwbModalExampleFocusTrap.vue'
 </script>
 # Vue Modal - Flowbite
 
@@ -158,15 +159,33 @@ import { FwbModal } from 'flowbite-vue'
 </script>
 ```
 
+## Focus Trap
+
+You can enable focus trapping by setting the `focus-trap` prop to `true`. This keeps the focus within the modal, preventing users from tabbing to elements outside of it, which improves accessibility.
+
+<fwb-modal-example-focus-trap />
+```vue
+<template>
+  <fwb-modal />
+  <fwb-modal focus-trap />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>
+```
+
 ## API
 
 ### Props:
 
-| Name         | Values                                                    | Default |
-|--------------|-----------------------------------------------------------|---------|
-| size         | `md`,`lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl` | 2xl     |
-| notEscapable | `true`, `false`                                           | `false` |
-| persistent   | `true`, `false`                                           | `true`  |
+| Name         | Values                                                                                                                            | Default |
+|--------------|-----------------------------------------------------------------------------------------------------------------------------------|---------|
+| size         | `xs`, `sm`, `md`,`lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`                                                               | `2xl`   |
+| position     | `top-start`, `top-center`, `top-end`, `center-start`, `center`, `center-end`, `bottom-start`, `bottom-center`, `bottom-end` | `center`|
+| notEscapable | `true`, `false`                                                                                                                   | `false` |
+| persistent   | `true`, `false`                                                                                                                   | `false` |
+| focusTrap    | `true`, `false`                                                                                                                   | `false` |
 
 ### Events:
 | Name            | Type                                                                             |

docs/components/modal/examples/FwbModalExample.vue

@@ -9,6 +9,7 @@
       :persistent="persistent"
       :size="size"
       :position="position"
+      :focus-trap="focusTrap"
       @close="closeModal"
     >
       <template #header>
@@ -56,6 +57,7 @@ interface ModalProps {
   persistent?: boolean
   triggerText?: string
   position?: ModalPosition
+  focusTrap?: boolean
 }
 
 withDefaults(defineProps<ModalProps>(), {
@@ -64,6 +66,7 @@ withDefaults(defineProps<ModalProps>(), {
   persistent: false,
   triggerText: 'Open Modal',
   position: 'center',
+  focusTrap: false,
 })
 
 const isShowModal = ref(false)

docs/components/modal/examples/FwbModalExampleFocusTrap.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw flex justify-start space-x-2">
+    <fwb-modal-example
+      trigger-text="Without Focus Trap"
+    />
+    <fwb-modal-example
+      focus-trap
+      trigger-text="With Focus Trap"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import FwbModalExample from './FwbModalExample.vue'
+</script>

package-lock.json

@@ -68,7 +68,8 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.4",
     "@tailwindcss/vite": "^4.1.4",
-    "@vueuse/core": "13.1.0",
+    "@vueuse/core": "12.8.2",
+    "@vueuse/integrations": "^13.1.0",
     "classnames": "2.5.1",
     "floating-vue": "^5.2.2",
     "flowbite": "3.1.2",