@fy-/fws-vue 2.2.62 → 2.2.64

package/components/fws/UserFlow.vue

@@ -219,161 +219,225 @@ onMounted(async () => {
     <form
       v-if="!completed"
       class="fws-login w-full"
+      aria-labelledby="login-title"
       @submit.prevent="userFlow()"
     >
-      <!-- <FyLoader id="klblogin" /> -->
-      <div class="w-full">
+      <!-- Message / Header -->
+      <div
+        v-if="responseMessage"
+        class="fws-login__header mb-4"
+      >
         <h2
-          v-if="responseMessage"
-          class="text-lg text-fv-neutral-700 dark:text-fv-neutral-300 px-2"
+          id="login-title"
+          class="text-lg font-medium text-fv-neutral-700 dark:text-fv-neutral-300"
         >
           {{ responseMessage }}
         </h2>
-        <template v-if="hasOauth && !showEmail">
-          <div class="flex flex-col gap-2 px-2 justify-center py-2">
-            <template v-for="field of responseFields" :key="field.id">
-              <a
-                v-if="field.type && field.type === 'oauth2' && field.button"
-                href="javascript:void(0);"
-                class="flex border border-fv-neutral-300 dark:border-fv-neutral-700 shadow items-center gap-2 justify-start btn neutral defaults w-full mx-auto !font-semibold"
-                :style="`background: ${
-                  field.button['background-color']
-                }; color: ${$getContrastingTextColor(
-                  field.button['background-color'],
-                )}`"
-                @click="
-                  () => {
-                    if (field.info.Button_Extra?.trigger) {
-                      doTrigger(field);
-                    }
-                    else {
-                      userFlow({ initial: true, oauth: field.id });
-                    }
-                  }
-                "
-              >
-                <img
-                  :key="`${field.label}oauth`"
-                  class="h-12 w-12 block p-2 mr-3"
-                  :alt="field.info.Name"
-                  :src="field.button.logo"
-                >
-                <div>
-                  {{
-                    $t("user_flow_signin_with", {
-                      provider: field.name,
-                    })
-                  }}
-                </div>
-              </a>
-            </template>
-            <button
-              type="button"
-              class="flex items-center gap-2 justify-start btn neutral defaults w-full mx-auto !font-semibold"
-              @click="
-                () => {
-                  showEmail = true;
+      </div>
+
+      <!-- OAuth providers section -->
+      <div v-if="hasOauth && !showEmail" class="fws-login__oauth space-y-3">
+        <div
+          v-for="field of responseFields"
+          v-show="field.type && field.type === 'oauth2' && field.button"
+          :key="field.id"
+        >
+          <button
+            type="button"
+            class="flex w-full items-center justify-start gap-3 px-4 py-2.5 rounded-lg border border-fv-neutral-200 dark:border-fv-neutral-700
+                   transition-all duration-200 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-fv-neutral-800
+                   focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600"
+            :style="`background: ${
+              field.button['background-color']
+            }; color: ${$getContrastingTextColor(
+              field.button['background-color'],
+            )}`"
+            :aria-label="`${$t('user_flow_signin_with', { provider: field.name })}`"
+            @click="
+              () => {
+                if (field.info.Button_Extra?.trigger) {
+                  doTrigger(field);
                 }
-              "
+                else {
+                  userFlow({ initial: true, oauth: field.id });
+                }
+              }
+            "
+          >
+            <img
+              :key="`${field.label}oauth`"
+              class="h-6 w-6 flex-shrink-0"
+              :alt="field.info.Name"
+              :src="field.button.logo"
             >
-              <EnvelopeIcon class="h-12 w-12 block p-2 mr-3" />
-              <div>
-                {{
-                  $t("user_flow_signin_with", {
-                    provider: $t("user_flow_provider_email_cta"),
-                  })
-                }}
-              </div>
-            </button>
+            <span class="text-base font-medium">
+              {{ $t("user_flow_signin_with", { provider: field.name }) }}
+            </span>
+          </button>
+        </div>
+
+        <div class="relative my-6">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full border-t border-fv-neutral-200 dark:border-fv-neutral-700" />
           </div>
-        </template>
-        <div
-          v-if="forceAction || (showEmail && initial) || !initial"
-          class="px-2 py-2"
+          <div class="relative flex justify-center text-sm">
+            <span class="px-2 bg-white dark:bg-fv-neutral-800 text-fv-neutral-500 dark:text-fv-neutral-400">
+              {{ $t("user_flow_or") }}
+            </span>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          class="flex w-full items-center justify-start gap-3 px-4 py-2.5 rounded-lg border border-fv-neutral-200 dark:border-fv-neutral-700
+                 bg-white dark:bg-fv-neutral-700 text-fv-neutral-800 dark:text-white
+                 hover:bg-fv-neutral-50 dark:hover:bg-fv-neutral-650 transition-all duration-200
+                 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600"
+          aria-label="Sign in with email"
+          @click="showEmail = true"
         >
-          <template v-if="responseFields && responseFields.length > 0">
-            <template v-for="field of responseFields" :key="field.label">
+          <EnvelopeIcon class="h-6 w-6 text-fv-primary-500 dark:text-fv-primary-400 flex-shrink-0" />
+          <span class="text-base font-medium">
+            {{ $t("user_flow_signin_with", { provider: $t("user_flow_provider_email_cta") }) }}
+          </span>
+        </button>
+      </div>
+
+      <!-- Form fields section -->
+      <div
+        v-if="forceAction || (showEmail && initial) || !initial"
+        class="fws-login__form space-y-4"
+      >
+        <template v-if="responseFields && responseFields.length > 0">
+          <!-- Labels and text elements -->
+          <template v-for="field of responseFields" :key="field.label">
+            <div
+              v-if="field.type === 'label'"
+              class="mb-2"
+            >
               <h3
-                v-if="field.type === 'label'"
-                class="pt-2 pb-1 text-sm text-fv-neutral-500 dark:text-fv-neutral-400"
-                :class="
+                class="text-sm"
+                :class="[
                   field.style === 'error'
-                    ? 'text-sm my-2 p-1 font-semibold text-red-800 dark:text-red-300'
-                    : ''
-                "
+                    ? 'p-3 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 font-medium'
+                    : 'text-fv-neutral-600 dark:text-fv-neutral-400',
+                ]"
               >
-                <a v-if="field.link" :href="field.link" class="fws-link mb-3">{{
-                  field.label
-                }}</a>
-                <span v-else class="mb-2" v-html="field.label" />
+                <a
+                  v-if="field.link"
+                  :href="field.link"
+                  class="text-fv-primary-600 dark:text-fv-primary-400 hover:underline focus:outline-none focus:ring-2 focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600 rounded"
+                >
+                  {{ field.label }}
+                </a>
+                <span v-else v-html="field.label" />
               </h3>
+            </div>
 
-              <template v-if="field.cat === 'input'">
-                <template
-                  v-if="
-                    field.type === 'text'
-                      || field.type === 'password'
-                      || field.type === 'email'
-                      || field.type === 'mask'
-                      || field.type === 'tel'
-                      || field.type === 'number'
-                      || field.type === 'phone'
-                  "
-                >
-                  <DefaultInput
-                    v-if="field.name"
-                    :id="field.name"
-                    ref="inputs"
-                    v-model="formData[field.name]"
-                    :label="field.label"
-                    :mask="field.mask"
-                    class="mt-3"
-                    :placeholder="
-                      field.name === 'name' ? 'John Doe' : field.label
-                    "
-                    :error="fieldsError[field.name]"
-                    :type="field.type"
-                    :req="responseReq.includes(field.name)"
-                    :autocomplete="autocompleteValue(field.name)"
-                  />
-                </template>
-              </template>
-              <template v-if="field.type === 'checkbox'">
+            <!-- Input fields -->
+            <template v-if="field.cat === 'input'">
+              <template
+                v-if="
+                  field.type === 'text'
+                    || field.type === 'password'
+                    || field.type === 'email'
+                    || field.type === 'mask'
+                    || field.type === 'tel'
+                    || field.type === 'number'
+                    || field.type === 'phone'
+                "
+              >
                 <DefaultInput
                   v-if="field.name"
                   :id="field.name"
-                  v-model:checkbox-value="formData[field.name]"
-                  class="mt-3"
+                  ref="inputs"
+                  v-model="formData[field.name]"
                   :label="field.label"
+                  :mask="field.mask"
+                  :placeholder="
+                    field.name === 'name' ? 'John Doe' : field.label
+                  "
                   :error="fieldsError[field.name]"
                   :type="field.type"
                   :req="responseReq.includes(field.name)"
-                  :link-icon="field.link"
+                  :autocomplete="autocompleteValue(field.name)"
                 />
               </template>
             </template>
-            <div
-              v-if="responseError && responseError.token"
-              class="text-sm my-2 p-1 font-semibold text-red-800 dark:text-red-300"
-              v-html="$t(responseError.token)"
-            />
-            <div v-if="responseReq.includes('password') && 0" class="reset-pwd">
-              <a
-                href="javascript:void(0)"
-                @click="
-                  () => {
-                    eventBus.emit('ResetPasswordModal', true);
-                    pwdRecoverMailSent = false;
-                  }
-                "
-              >{{ $t("recover_pwd_link") }}</a>
-            </div>
-            <button class="btn primary medium mt-4">
-              {{ $t("cta_login_next") }}
-            </button>
+
+            <!-- Checkbox inputs -->
+            <template v-if="field.type === 'checkbox'">
+              <DefaultInput
+                v-if="field.name"
+                :id="field.name"
+                v-model:checkbox-value="formData[field.name]"
+                :label="field.label"
+                :error="fieldsError[field.name]"
+                :type="field.type"
+                :req="responseReq.includes(field.name)"
+                :link-icon="field.link"
+              />
+            </template>
           </template>
-        </div>
+
+          <!-- Error message -->
+          <div
+            v-if="responseError && responseError.token"
+            class="p-3 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-sm font-medium"
+            role="alert"
+            v-html="$t(responseError.token)"
+          />
+
+          <!-- Password recovery link -->
+          <div
+            v-if="responseReq.includes('password') && 0"
+            class="text-right my-2"
+          >
+            <button
+              type="button"
+              class="text-fv-primary-600 dark:text-fv-primary-400 text-sm hover:underline focus:outline-none focus:ring-2 focus:ring-fv-primary-500 rounded"
+              @click="
+                () => {
+                  eventBus.emit('ResetPasswordModal', true);
+                  pwdRecoverMailSent = false;
+                }
+              "
+            >
+              {{ $t("recover_pwd_link") }}
+            </button>
+          </div>
+
+          <!-- Submit button -->
+          <button
+            type="submit"
+            class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm
+                   text-white bg-fv-primary-600 hover:bg-fv-primary-700 dark:bg-fv-primary-700 dark:hover:bg-fv-primary-800
+                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600
+                   dark:focus:ring-offset-fv-neutral-800 font-medium transition-all duration-200"
+            aria-label="Continue"
+          >
+            {{ $t("cta_login_next") }}
+          </button>
+        </template>
       </div>
     </form>
   </ClientOnly>
 </template>
+
+<style scoped>
+.fws-login {
+  @apply transition-all duration-300;
+}
+
+.fws-login__oauth button,
+.fws-login__form button[type="submit"] {
+  @apply transition-all duration-200;
+}
+
+@media (max-width: 640px) {
+  .fws-login__oauth,
+  .fws-login__form {
+    @apply px-0;
+  }
+}
+</style>

package/components/ui/DefaultInput.vue

@@ -187,7 +187,7 @@ defineExpose({ focus, blur, getInputRef })
               :name="id"
               :class="{
                 'error': checkErrors,
-                'bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg block w-full dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white transition-all duration-200': type !== 'range',
+                'bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg block w-full dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-300 dark:text-white transition-all duration-200': type !== 'range',
                 'p-2.5': type !== 'range',
                 'focus:border-fv-primary-500 dark:focus:border-fv-primary-500': !checkErrors,
                 'focus:ring-2 focus:ring-fv-primary-300 dark:focus:ring-fv-primary-800 focus:ring-opacity-50': type !== 'range',
@@ -288,7 +288,7 @@ defineExpose({ focus, blur, getInputRef })
               :aria-invalid="checkErrors ? 'true' : 'false'"
               class="block p-2.5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50 rounded-lg
                      border border-fv-neutral-300 focus:ring-2 focus:ring-fv-primary-300 focus:border-fv-primary-500
-                     dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400
+                     dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-300
                      dark:text-white dark:focus:ring-fv-primary-800 dark:focus:border-fv-primary-500
                      transition-colors duration-200 shadow-sm"
               @focus="handleFocus"
@@ -332,7 +332,7 @@ defineExpose({ focus, blur, getInputRef })
             :aria-invalid="checkErrors ? 'true' : 'false'"
             class="block p-2.5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50
                    rounded-lg border border-fv-neutral-300 focus:ring-2 focus:ring-fv-primary-300 focus:border-fv-primary-500
-                   dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400
+                   dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-300
                    dark:text-white dark:focus:ring-fv-primary-800 dark:focus:border-fv-primary-500
                    transition-colors duration-200 shadow-sm min-h-[100px]"
             @focus="handleFocus"
@@ -375,7 +375,7 @@ defineExpose({ focus, blur, getInputRef })
               class="appearance-none bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm
                      rounded-lg focus:ring-2 focus:ring-fv-primary-300 focus:border-fv-primary-500
                      block w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600
-                     dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-800
+                     dark:placeholder-fv-neutral-300 dark:text-white dark:focus:ring-fv-primary-800
                      dark:focus:border-fv-primary-500 shadow-sm transition-colors duration-200 pr-10"
               @focus="handleFocus"
               @blur="handleBlur"
@@ -577,6 +577,7 @@ input, select, textarea, input[type="range"]::-webkit-slider-thumb, input[type="
 input::placeholder,
 textarea::placeholder,
 select::placeholder {
-  @apply text-fv-neutral-400 dark:text-fv-neutral-500;
+  @apply text-fv-neutral-400 dark:text-fv-neutral-300;
+  opacity: 0.8;
 }
 </style>

package/components/ui/DefaultNotif.vue

@@ -3,10 +3,11 @@ import type { Component } from 'vue'
 import {
   CheckCircleIcon,
   ExclamationTriangleIcon,
-  LightBulbIcon,
+  InformationCircleIcon,
   SparklesIcon,
+  XMarkIcon,
 } from '@heroicons/vue/24/solid'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 import ScaleTransition from './transitions/ScaleTransition.vue'
 
@@ -31,9 +32,12 @@ const eventBus = useEventBus()
 /** Current displayed notification */
 const currentNotif = ref<NotifProps | null>(null)
 
-/** Progress percentage (0 to 100) for the notification’s life */
+/** Progress percentage (0 to 100) for the notification's life */
 const progress = ref(0)
 
+/** Is the notification paused (e.g., when hovering) */
+const isPaused = ref(false)
+
 /** References to setTimeout / setInterval so we can clear them properly */
 let hideTimeout: ReturnType<typeof setTimeout> | null = null
 let progressInterval: ReturnType<typeof setInterval> | null = null
@@ -55,7 +59,7 @@ function onCall(data: NotifProps) {
 
   // Automatically compute an icon if none is provided
   if (!data.imgIcon) {
-    if (data.type === 'info') data.imgIcon = LightBulbIcon
+    if (data.type === 'info') data.imgIcon = InformationCircleIcon
     else if (data.type === 'warning') data.imgIcon = ExclamationTriangleIcon
     else if (data.type === 'success') data.imgIcon = CheckCircleIcon
     else if (data.type === 'secret') data.imgIcon = SparklesIcon
@@ -72,7 +76,7 @@ function onCall(data: NotifProps) {
   // (B) Animate the progress bar from 0 to 100% within that time
   progress.value = 0
   progressInterval = setInterval(() => {
-    if (currentNotif.value && data.time) {
+    if (currentNotif.value && data.time && !isPaused.value) {
       // update progress based on a 100ms tick
       progress.value += (100 / (data.time / 100))
       // if progress hits or exceeds 100, hide
@@ -89,6 +93,7 @@ function onCall(data: NotifProps) {
 function hideNotif() {
   currentNotif.value = null
   progress.value = 0
+  isPaused.value = false
 
   if (hideTimeout) {
     clearTimeout(hideTimeout)
@@ -100,6 +105,124 @@ function hideNotif() {
   }
 }
 
+/** Pause the notification timer on hover */
+function pauseTimer() {
+  isPaused.value = true
+
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+    hideTimeout = null
+  }
+}
+
+/** Resume the notification timer after hover */
+function resumeTimer() {
+  if (!currentNotif.value) return
+
+  isPaused.value = false
+
+  // Calculate remaining time based on progress
+  const remainingTime = currentNotif.value.time
+    ? Math.max(currentNotif.value.time * (1 - progress.value / 100), 1000)
+    : 5000
+
+  // Reset the timeout with the remaining time
+  hideTimeout = setTimeout(() => hideNotif(), remainingTime)
+}
+
+/** Execute CTA action if provided */
+function handleCtaClick() {
+  if (currentNotif.value?.ctaAction) {
+    currentNotif.value.ctaAction()
+  }
+}
+
+/** Get ARIA label based on notification type */
+const ariaDescribedBy = computed(() => {
+  if (!currentNotif.value) return ''
+  return `notif-${currentNotif.value.type || 'info'}`
+})
+
+/** Get background color based on notification type */
+const bgColor = computed(() => {
+  if (!currentNotif.value) return ''
+
+  switch (currentNotif.value.type) {
+    case 'success':
+      return 'bg-green-50 dark:bg-green-900/20'
+    case 'warning':
+      return 'bg-amber-50 dark:bg-amber-900/20'
+    case 'secret':
+      return 'bg-fuchsia-50 dark:bg-fuchsia-900/20'
+    default: // info
+      return 'bg-blue-50 dark:bg-blue-900/20'
+  }
+})
+
+/** Get border color based on notification type */
+const borderColor = computed(() => {
+  if (!currentNotif.value) return ''
+
+  switch (currentNotif.value.type) {
+    case 'success':
+      return 'border-green-300 dark:border-green-700'
+    case 'warning':
+      return 'border-amber-300 dark:border-amber-700'
+    case 'secret':
+      return 'border-fuchsia-300 dark:border-fuchsia-700'
+    default: // info
+      return 'border-blue-300 dark:border-blue-700'
+  }
+})
+
+/** Get text color based on notification type */
+const textColor = computed(() => {
+  if (!currentNotif.value) return ''
+
+  switch (currentNotif.value.type) {
+    case 'success':
+      return 'text-green-800 dark:text-green-200'
+    case 'warning':
+      return 'text-amber-800 dark:text-amber-200'
+    case 'secret':
+      return 'text-fuchsia-800 dark:text-fuchsia-200'
+    default: // info
+      return 'text-blue-800 dark:text-blue-200'
+  }
+})
+
+/** Get icon color based on notification type */
+const iconColor = computed(() => {
+  if (!currentNotif.value) return ''
+
+  switch (currentNotif.value.type) {
+    case 'success':
+      return 'text-green-500 dark:text-green-400'
+    case 'warning':
+      return 'text-amber-500 dark:text-amber-400'
+    case 'secret':
+      return 'text-fuchsia-500 dark:text-fuchsia-400'
+    default: // info
+      return 'text-blue-500 dark:text-blue-400'
+  }
+})
+
+/** Get progress bar color based on notification type */
+const progressColor = computed(() => {
+  if (!currentNotif.value) return ''
+
+  switch (currentNotif.value.type) {
+    case 'success':
+      return 'bg-green-500 dark:bg-green-400'
+    case 'warning':
+      return 'bg-amber-500 dark:bg-amber-400'
+    case 'secret':
+      return 'bg-fuchsia-500 dark:bg-fuchsia-400'
+    default: // info
+      return 'bg-blue-500 dark:bg-blue-400'
+  }
+})
+
 /**
  * Setup: Listen to the global event bus
  */
@@ -120,62 +243,127 @@ onUnmounted(() => {
     <div
       v-if="currentNotif !== null"
       id="base-notif"
-      class=" mb-4 fixed bottom-4 right-8 !z-[2000] bg-fv-neutral-50/[.6] dark:bg-neutral-800/[.85] rounded-lg border overflow-hidden shadow-lg"
+      class="fixed bottom-4 right-4 sm:right-8 z-[2000] max-w-sm w-full sm:w-96 rounded-lg border shadow-lg overflow-hidden backdrop-blur-sm transition-all duration-300 transform"
       role="alert"
-      :class="{
-        'text-fv-neutral-800 border-fv-neutral-300 dark:text-fv-neutral-400 dark:border-fv-neutral-600':
-          currentNotif.type === 'info',
-        'text-red-800 border-red-300 dark:text-red-300 dark:border-red-800':
-          currentNotif.type === 'warning',
-        'text-green-800 border-green-300 dark:text-green-300 dark:border-green-800':
-          currentNotif.type === 'success',
-        'text-fuchsia-800 border-fuchsia-300 dark:text-fuchsia-300 dark:border-fuchsia-800':
-          currentNotif.type === 'secret',
-      }"
+      :aria-describedby="ariaDescribedBy"
+      :class="[bgColor, borderColor, textColor]"
+      @mouseenter="pauseTimer"
+      @mouseleave="resumeTimer"
     >
-      <div class="relative  h-[4px] bg-fv-neutral-900/[.2] rounded-full overflow-hidden ">
-        <!-- We re-use text color (text-*) as background or define a custom color -->
+      <!-- Progress bar -->
+      <div class="relative h-1 bg-gray-200 dark:bg-gray-700 overflow-hidden">
         <div
-          class="absolute left-0 top-0 h-full bg-current transition-[width]"
+          class="absolute left-0 top-0 h-full transition-[width] ease-linear"
+          :class="progressColor"
           :style="{ width: `${progress}%` }"
         />
       </div>
-      <div class="p-2">
-        <div class="flex items-center gap-2">
-          <img
-            v-if="currentNotif.imgSrc"
-            class="flex-shrink-0 w-6 h-6"
-            :src="currentNotif.imgSrc"
-            :alt="currentNotif.title"
+
+      <div class="p-4">
+        <!-- Header with icon and title -->
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <div class="flex-shrink-0" :class="[iconColor]">
+              <img
+                v-if="currentNotif.imgSrc"
+                class="w-6 h-6 rounded-full"
+                :src="currentNotif.imgSrc"
+                :alt="currentNotif.title"
+              >
+              <component
+                :is="currentNotif.imgIcon"
+                v-else
+                class="w-6 h-6"
+                aria-hidden="true"
+              />
+            </div>
+            <h3
+              :id="ariaDescribedBy"
+              class="text-base font-semibold truncate"
+              v-text="currentNotif.title"
+            />
+          </div>
+
+          <!-- Close button -->
+          <button
+            type="button"
+            class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900"
+            :class="iconColor"
+            aria-label="Close notification"
+            @click="hideNotif"
           >
-          <component
-            :is="currentNotif.imgIcon"
-            v-else
-            class="flex-shrink-0 w-6 h-6"
-          />
-          <h3 class="text-lg font-medium" v-text="currentNotif.title" />
+            <XMarkIcon class="h-5 w-5" aria-hidden="true" />
+          </button>
         </div>
 
-        <!-- Optional content -->
+        <!-- Notification content -->
         <div
           v-if="currentNotif.content"
-          class="mt-2 text-sm prose-sm prose-invert"
+          class="mt-2 text-sm"
+          :class="textColor"
           v-html="currentNotif.content"
         />
 
-        <!-- CTA row (if you need more buttons, just extend it) -->
-        <div class="flex justify-end gap-2 pt-3">
+        <!-- CTA buttons -->
+        <div
+          v-if="currentNotif.ctaText || currentNotif.ctaLink || currentNotif.ctaAction"
+          class="mt-3 flex justify-end gap-2"
+        >
+          <a
+            v-if="currentNotif.ctaLink"
+            :href="currentNotif.ctaLink"
+            class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
+            :class="{
+              'bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500': currentNotif.type === 'info' || !currentNotif.type,
+              'bg-amber-600 hover:bg-amber-700 text-white focus:ring-amber-500': currentNotif.type === 'warning',
+              'bg-green-600 hover:bg-green-700 text-white focus:ring-green-500': currentNotif.type === 'success',
+              'bg-fuchsia-600 hover:bg-fuchsia-700 text-white focus:ring-fuchsia-500': currentNotif.type === 'secret',
+            }"
+          >
+            {{ currentNotif.ctaText || $t("action_cta") }}
+          </a>
           <button
+            v-else-if="currentNotif.ctaAction"
             type="button"
-            class="btn neutral small"
-            aria-label="Close"
-            @click="hideNotif"
+            class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
+            :class="{
+              'bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500': currentNotif.type === 'info' || !currentNotif.type,
+              'bg-amber-600 hover:bg-amber-700 text-white focus:ring-amber-500': currentNotif.type === 'warning',
+              'bg-green-600 hover:bg-green-700 text-white focus:ring-green-500': currentNotif.type === 'success',
+              'bg-fuchsia-600 hover:bg-fuchsia-700 text-white focus:ring-fuchsia-500': currentNotif.type === 'secret',
+            }"
+            @click="handleCtaClick"
           >
-            <!-- i18n example, or plain text like "Dismiss" -->
-            {{ $t("dismiss_cta") }}
+            {{ currentNotif.ctaText || $t("action_cta") }}
           </button>
         </div>
       </div>
     </div>
   </ScaleTransition>
 </template>
+
+<style scoped>
+/* Optional: Add animation for notifications */
+@keyframes slide-in-right {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+#base-notif {
+  animation: slide-in-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* Improve dark mode */
+@media (prefers-color-scheme: dark) {
+  #base-notif {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+  }
+}
+</style>

package/components/ui/DefaultPaging.vue

@@ -153,100 +153,144 @@ onMounted(() => {
 <template>
   <div
     v-if="items && items.page_max > 1 && items.page_no"
-    class="flex items-center justify-center"
+    class="flex flex-col items-center justify-center"
   >
-    <div class="paging-container">
-      <nav aria-label="Pagination">
-        <ul class="flex items-center -space-x-px h-8 text-sm">
-          <li v-if="items.page_no >= 2">
+    <div class="paging-container w-full">
+      <nav aria-label="Pagination" class="mb-2 flex justify-center">
+        <ul class="pagination-list">
+          <!-- Previous Button -->
+          <li v-if="items.page_no >= 2" class="pagination-item md:block">
             <button
               type="button"
-              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+              class="pagination-button pagination-nav-button"
+              :aria-label="$t('previous_paging')"
+              title="Previous page"
               @click="prev()"
             >
+              <ChevronLeftIcon class="w-5 h-5" aria-hidden="true" />
               <span class="sr-only">{{ $t("previous_paging") }}</span>
-              <ChevronLeftIcon class="w-4 h-4" />
             </button>
           </li>
-          <li v-if="items.page_no - 2 > 1">
+          <li v-else class="pagination-item invisible md:hidden">
+            <div class="pagination-placeholder">
+              <ChevronLeftIcon class="w-5 h-5 invisible" aria-hidden="true" />
+            </div>
+          </li>
+
+          <!-- First Page -->
+          <li v-if="items.page_no - 2 > 1" class="pagination-item hidden md:block">
             <router-link
-              class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+              class="pagination-link"
               :to="page(1)"
+              aria-label="Go to page 1"
             >
               1
             </router-link>
           </li>
-          <li v-if="items.page_no - 2 > 2">
-            <div
-              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400"
-            >
-              ...
+
+          <!-- Ellipsis after first page -->
+          <li v-if="items.page_no - 2 > 2" class="pagination-item hidden md:block" aria-hidden="true">
+            <div class="pagination-ellipsis">
+              <span>•••</span>
             </div>
           </li>
+
+          <!-- Pages before current page -->
           <template v-for="i in 2">
             <li
               v-if="items.page_no - (3 - i) >= 1"
               :key="`page-${items.page_no - (3 - i)}`"
+              class="pagination-item hidden sm:block"
             >
               <router-link
-                class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+                class="pagination-link"
                 :to="page(items.page_no - (3 - i))"
+                :aria-label="`Go to page ${items.page_no - (3 - i)}`"
               >
                 {{ items.page_no - (3 - i) }}
               </router-link>
             </li>
           </template>
-          <li>
+
+          <!-- Current Page -->
+          <li class="pagination-item">
             <div
               aria-current="page"
-              class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-primary-600 border border-primary-300 bg-primary-50 dark:border-fv-neutral-700 dark:bg-fv-neutral-700 dark:text-white"
+              class="pagination-current"
+              :aria-label="`Current page, Page ${items.page_no}`"
             >
               {{ items.page_no }}
             </div>
           </li>
+
+          <!-- Pages after current page -->
           <template v-for="i in 2">
             <li
               v-if="items.page_no + i <= items.page_max"
               :key="`page-x-${items.page_no + i}`"
+              class="pagination-item hidden sm:block"
             >
               <router-link
-                class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+                class="pagination-link"
                 :to="page(items.page_no + i)"
+                :aria-label="`Go to page ${items.page_no + i}`"
               >
                 {{ items.page_no + i }}
               </router-link>
             </li>
           </template>
-          <li v-if="items.page_no + 2 < items.page_max - 1">
-            <div
-              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400"
-            >
-              ...
+
+          <!-- Ellipsis before last page -->
+          <li v-if="items.page_no + 2 < items.page_max - 1" class="pagination-item hidden md:block" aria-hidden="true">
+            <div class="pagination-ellipsis">
+              <span>•••</span>
             </div>
           </li>
-          <li v-if="items.page_no + 2 < items.page_max">
+
+          <!-- Last Page -->
+          <li v-if="items.page_no + 2 < items.page_max" class="pagination-item hidden md:block">
             <router-link
-              class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+              class="pagination-link"
               :to="page(items.page_max)"
+              :aria-label="`Go to page ${items.page_max}`"
             >
               {{ items.page_max }}
             </router-link>
           </li>
-          <li v-if="items.page_no < items.page_max">
+
+          <!-- Next Button -->
+          <li v-if="items.page_no < items.page_max" class="pagination-item md:block">
             <button
               type="button"
-              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+              class="pagination-button pagination-nav-button"
+              :aria-label="$t('next_paging')"
+              title="Next page"
               @click="next()"
             >
+              <ChevronRightIcon class="w-5 h-5" aria-hidden="true" />
               <span class="sr-only">{{ $t("next_paging") }}</span>
-              <ChevronRightIcon class="w-4 h-4" />
             </button>
           </li>
+          <li v-else class="pagination-item invisible md:hidden">
+            <div class="pagination-placeholder">
+              <ChevronRightIcon class="w-5 h-5 invisible" aria-hidden="true" />
+            </div>
+          </li>
         </ul>
       </nav>
+
+      <!-- Mobile page indication (x of y) -->
+      <div class="sm:hidden text-center mb-2">
+        <span class="text-sm font-medium text-fv-neutral-700 dark:text-fv-neutral-200">
+          Page {{ items.page_no }} of {{ items.page_max }}
+        </span>
+      </div>
+
+      <!-- Results summary -->
       <p
         v-if="showLegend"
-        class="text-xs text-fv-neutral-700 dark:text-fv-neutral-400 pt-0.5"
+        class="text-xs text-center text-fv-neutral-700 dark:text-fv-neutral-400"
+        aria-live="polite"
       >
         {{
           $t("global_paging", {
@@ -259,3 +303,65 @@ onMounted(() => {
     </div>
   </div>
 </template>
+
+<style scoped>
+.pagination-list {
+  @apply inline-flex items-center justify-center gap-1 shadow-sm rounded-lg;
+}
+
+.pagination-item {
+  @apply flex items-center justify-center;
+}
+
+.pagination-link,
+.pagination-button,
+.pagination-current,
+.pagination-ellipsis,
+.pagination-placeholder {
+  @apply flex items-center justify-center;
+  min-width: 2.25rem;
+  height: 2.25rem;
+}
+
+.pagination-link {
+  @apply px-3 py-2 rounded-md text-sm font-medium bg-white border border-fv-neutral-200
+    text-fv-neutral-700 hover:bg-fv-neutral-50 hover:text-fv-primary-600
+    focus:z-10 focus:outline-none focus:ring-2 focus:ring-fv-primary-500 focus:ring-offset-1
+    transition-colors duration-200
+    dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-200
+    dark:hover:bg-fv-neutral-700 dark:hover:text-white
+    dark:focus:ring-fv-primary-500;
+}
+
+.pagination-current {
+  @apply px-3 py-2 rounded-md text-sm font-bold
+    bg-fv-primary-100 text-fv-primary-700 border border-fv-primary-300
+    dark:bg-fv-primary-900 dark:text-fv-primary-100 dark:border-fv-primary-700;
+}
+
+.pagination-nav-button {
+  @apply p-2 rounded-md text-fv-neutral-600 bg-white border border-fv-neutral-200
+    hover:bg-fv-neutral-50 hover:text-fv-primary-600
+    focus:z-10 focus:outline-none focus:ring-2 focus:ring-fv-primary-500 focus:ring-offset-1
+    transition-colors duration-200
+    dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-300
+    dark:hover:bg-fv-neutral-700 dark:hover:text-white;
+}
+
+.pagination-ellipsis {
+  @apply px-2 py-1 text-fv-neutral-500 dark:text-fv-neutral-400;
+}
+
+@media (max-width: 640px) {
+  .pagination-list {
+    @apply gap-2;
+  }
+
+  .pagination-link,
+  .pagination-button,
+  .pagination-current {
+    min-width: 2rem;
+    height: 2rem;
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.2.62",
+  "version": "2.2.64",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",