chore: dependency update

.github/workflows/node.js.yml

@@ -12,8 +12,9 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x, 22.x, 24.x]
+        node-version: [22.x, 24.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+        # Vite 7 requires Node 20.19+ or 22.12+
     steps:
     - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
@@ -27,8 +28,9 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+        # Vite 7 requires Node 20.19+ or 22.12+
     steps:
     - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
@@ -42,8 +44,9 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x, 22.x, 24.x]
+        node-version: [22.x, 24.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+        # Vite 7 requires Node 20.19+ or 22.12+
     steps:
     - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
@@ -57,8 +60,9 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x, 22.x, 24.x]
+        node-version: [22.x, 24.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+        # Vite 7 requires Node 20.19+ or 22.12+
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}

.node-version

@@ -1 +1 @@
-18.20.6
+24.12.0

docs/components/alert.md

@@ -207,7 +207,7 @@ The following alert components can be used if you wish to disclose more informat
   <fwb-alert type="info">
     <template #icon>
       <svg
-        class="flex-shrink-0 w-4 h-4 mr-2"
+        class="shrink-0 w-4 h-4 mr-2"
         aria-hidden="true"
         xmlns="http://www.w3.org/2000/svg"
         fill="currentColor"

docs/components/fileInput.md

@@ -36,7 +36,7 @@ const file = ref(null)
 ```vue
 <template>
   <fwb-file-input v-model="files" label="Upload file" multiple />
-  <div v-if="files.length !== 0" class="mt-4 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md">
+  <div v-if="files.length !== 0" class="mt-4 border border-gray-300 dark:border-gray-600 p-2 rounded-md">
     <div v-for="file in files" :key="file">
       {{ file.name }}
     </div>
@@ -57,7 +57,7 @@ const files = ref([])
 ```vue
 <template>
   <fwb-file-input v-model="file" label="Upload file">
-    <p class="!mt-1 text-sm text-gray-500 dark:text-gray-300">
+    <p class="mt-1! text-sm text-gray-500 dark:text-gray-300">
       SVG, PNG, JPG or GIF (MAX. 800x400px).
     </p>
   </fwb-file-input>

docs/components/fileInput/examples/FwbFileInputExampleHelper.vue

@@ -4,7 +4,7 @@
       v-model="file"
       label="Upload file"
     >
-      <p class="!mt-1 text-sm text-gray-500 dark:text-gray-300">
+      <p class="mt-1! text-sm text-gray-500 dark:text-gray-300">
         SVG, PNG, JPG or GIF (MAX. 800x400px).
       </p>
     </fwb-file-input>

docs/components/footer.md

@@ -56,7 +56,7 @@ Use this component to show your brand’s logo, a few website links and the copy
 ```vue
 <template>
   <fwb-footer footer-type="logo">
-    <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
+    <div class="w-full max-w-(--breakpoint-xl) mx-auto p-4 md:py-8">
       <div class="sm:flex sm:items-center sm:justify-between">
         <fwb-footer-brand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
         <fwb-footer-link-group class="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">

docs/components/footer/examples/FwbFooterExampleWithLogo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="vp-raw">
     <fwb-footer footer-type="logo">
-      <div class="mx-auto w-full max-w-screen-xl p-4 md:py-8">
+      <div class="mx-auto w-full max-w-(--breakpoint-xl) p-4 md:py-8">
         <div class="sm:flex sm:items-center sm:justify-between">
           <fwb-footer-brand
             alt="Flowbite Logo"

docs/components/heading.md

@@ -133,7 +133,7 @@ Use the `class` attribute to apply the tailwind classes.
 
 ```vue
 <template>
-  <fwb-heading class="!text-xl italic underline">Custom heading</fwb-heading>
+  <fwb-heading class="text-xl! italic underline">Custom heading</fwb-heading>
 </template>
 
 <script setup>

docs/components/image.md

@@ -116,7 +116,7 @@ Use the `img-class` prop to apply tailwind classes.
 <template>
   <fwb-img
     alt="flowbite-vue"
-    img-class="rounded-lg border-[1px]"
+    img-class="rounded-lg border"
     size="max-w-lg"
     src="/images/examples/image.png"
   />

docs/components/jumbotron/examples/FwbJumbotronGradientExample.vue

@@ -40,7 +40,7 @@
           </button>
         </div>
       </form>
-      <div class="absolute left-0 top-0 z-0 size-full bg-gradient-to-b from-blue-50 to-transparent dark:from-blue-900" />
+      <div class="absolute left-0 top-0 z-0 size-full bg-linear-to-b from-blue-50 to-transparent dark:from-blue-900" />
     </fwb-jumbotron>
   </div>
 </template>

docs/components/radio.md

@@ -126,31 +126,31 @@ const picked = ref('Vue JS')
     Technology {{ picked }}
   </fwb-p>
   <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+    <li class="w-full m-0! pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
       <fwb-radio
         v-model="picked"
         label="Svelte"
         name="radio-horizontal"
         value="Svelte"
       />
     </li>
-    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+    <li class="w-full m-0! pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
       <fwb-radio
         v-model="picked"
         label="Vue JS"
         name="radio-horizontal"
         value="Vue JS"
       />
     </li>
-    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+    <li class="w-full m-0! pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
       <fwb-radio
         v-model="picked"
         label="React"
         name="radio-horizontal"
         value="React"
       />
     </li>
-    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
+    <li class="w-full m-0! pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
       <fwb-radio
         v-model="picked"
         label="Angular"

docs/components/radio/examples/FwbRadioExampleListHorizontal.vue

@@ -4,31 +4,31 @@
       Technology {{ picked }}
     </fwb-p>
     <ul class="w-full items-center rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:flex">
-      <li class="!m-0 flex w-full rounded-t-lg border-gray-200 pl-3 dark:border-gray-600">
+      <li class="m-0! flex w-full rounded-t-lg border-gray-200 pl-3 dark:border-gray-600">
         <fwb-radio
           v-model="picked"
           label="Svelte"
           name="radio-horizontal"
           value="Svelte"
         />
       </li>
-      <li class="!m-0 flex w-full rounded-t-lg border-gray-200 pl-3 dark:border-gray-600">
+      <li class="m-0! flex w-full rounded-t-lg border-gray-200 pl-3 dark:border-gray-600">
         <fwb-radio
           v-model="picked"
           label="Vue JS"
           name="radio-horizontal"
           value="Vue JS"
         />
       </li>
-      <li class="!m-0 flex w-full rounded-t-lg border-gray-200 pl-3 dark:border-gray-600">
+      <li class="m-0! flex w-full rounded-t-lg border-gray-200 pl-3 dark:border-gray-600">
         <fwb-radio
           v-model="picked"
           label="React"
           name="radio-horizontal"
           value="React"
         />
       </li>
-      <li class="!m-0 flex w-full rounded-t-lg border-gray-200 pl-3 dark:border-gray-600">
+      <li class="m-0! flex w-full rounded-t-lg border-gray-200 pl-3 dark:border-gray-600">
         <fwb-radio
           v-model="picked"
           label="Angular"