chore: refactoring and dependency updates

.github/workflows/node.js.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 22.x]
+        node-version: [20.x, 22.x, 24.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
     - uses: actions/checkout@v4
@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
     - uses: actions/checkout@v4
@@ -42,7 +42,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 22.x]
+        node-version: [20.x, 22.x, 24.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
     - uses: actions/checkout@v4
@@ -57,7 +57,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 22.x]
+        node-version: [20.x, 22.x, 24.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
       - uses: actions/checkout@v4

docs/components/card/examples/FwbCardExample.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="vp-raw inline-flex flex-wrap gap-2">
-    <fwb-card href="#" class="w-sm">
+    <fwb-card
+      href="#"
+      class="w-sm"
+    >
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
           Noteworthy technology acquisitions 2021

docs/components/textarea/examples/FwbTextareaExampleDisabled.vue

@@ -1,6 +1,6 @@
 <template>
   <form
-    class="vp-raw"
+    class="gap-2 grid vp-raw"
     @submit.prevent
   >
     <fwb-textarea
@@ -22,7 +22,10 @@
       placeholder="Cannot be edited"
       readonly
     />
-    <fwb-button type="submit">
+    <fwb-button
+      class="justify-self-start"
+      type="submit"
+    >
       Validate
     </fwb-button>
   </form>

docs/components/toastProvider/examples/UpdateToast.vue

@@ -1,41 +1,43 @@
 <template>
-  <flowbite-themable theme="blue">
-    <fwb-toast
-      v-bind="$attrs"
-      @close="$emit('close')"
-    >
-      <template #icon>
-        <svg
-          aria-hidden="true"
-          class="size-5"
-          fill="#ffff"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-            clip-rule="evenodd"
-          />
-        </svg>
-      </template>
-      <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
-      <div class="mb-2 text-sm font-normal">
-        <slot />
-      </div>
-      <div class="grid grid-cols-2 gap-2">
-        <fwb-button size="xs">
-          Update
-        </fwb-button>
-        <fwb-button
-          size="xs"
-          :color="'alternative'"
-        >
-          Not now
-        </fwb-button>
-      </div>
-    </fwb-toast>
-  </flowbite-themable>
+  <div>
+    <flowbite-themable theme="blue">
+      <fwb-toast
+        v-bind="$attrs"
+        @close="$emit('close')"
+      >
+        <template #icon>
+          <svg
+            aria-hidden="true"
+            class="size-5"
+            fill="#ffff"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </template>
+        <span class="mb-1 font-semibold text-gray-900 dark:text-white text-sm">Update available</span>
+        <div class="mb-2 font-normal text-sm">
+          <slot />
+        </div>
+        <div class="gap-2 grid grid-cols-2">
+          <fwb-button size="xs">
+            Update
+          </fwb-button>
+          <fwb-button
+            size="xs"
+            :color="'alternative'"
+          >
+            Not now
+          </fwb-button>
+        </div>
+      </fwb-toast>
+    </flowbite-themable>
+  </div>
 </template>
 
 <script lang="ts" setup>