Version 2.1.0 - Update UI

src/components/UI/Error.vue

@@ -1,30 +1,32 @@
 <template>
-    <div>
-     <Icon icon="fa-solid fa-circle-exclamation"></Icon>
-     <div class="error-message">
-        <slot></slot>
-     </div>
-   
+    <div class="feedback" role="alert">
+        <Icon class="feedback-icon" icon="fa-solid fa-circle-exclamation" aria-hidden="true"></Icon>
+        <div class="error-message">
+            <slot></slot>
+        </div>
     </div>
-  
 </template>
+<script setup>
+/**
+ * Message d'erreur en rouge (role="alert" : annoncé immédiatement). Slot par défaut : le message.
+ */
+</script>
 <style scoped>
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+/* Spécificité de « div » (comme avant) : une classe posée par le parent reste prioritaire */
+div:where(.feedback) {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-error);
+    animation: u-fade-in 0.5s ease-in-out;
 }
 
-    div {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        color: var(--text-error);
-        animation: fadeIn 0.5s ease-in-out;
-    }
+.feedback-icon {
+    flex-shrink: 0;
+}
 
-    .error-message {
-        display: flex;
-        text-align: justify;
-    }
+.error-message {
+    display: flex;
+    text-align: justify;
+}
 </style>