From 5ec057c34b2ee73b317a8dc67079991f528c4ca3 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 18:07:04 +0200
Subject: [PATCH 01/45] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Added=20Group?=
 =?UTF-8?q?=20componen=20interface=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/group/IVGroup.type.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/components/group/IVGroup.type.ts

diff --git a/src/components/group/IVGroup.type.ts b/src/components/group/IVGroup.type.ts
new file mode 100644
index 0000000..f8446ba
--- /dev/null
+++ b/src/components/group/IVGroup.type.ts
@@ -0,0 +1,19 @@
+/**
+ * Interface representing the props for the Group component.
+ */
+export default interface IVGroup {
+    /**
+     * Defines the visual style or status of the group.
+     * - `'default'`: Standard appearance.
+     * - `'error'`: Indicates an error state.
+     * - `'success'`: Indicates a successful state.
+     * - `undefined`: No specific type applied.
+     */
+    type: 'default' | 'error' | 'success' | undefined;
+
+    /**
+     * If true, disables the group component, making it non-interactive.
+     * Optional.
+     */
+    disabled?: boolean;
+}

From d5903668bad44b43b381564ccafc957f1dab3ec5 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 18:12:47 +0200
Subject: [PATCH 02/45] =?UTF-8?q?=E2=9C=A8=20feature:=20Added=20Group=20co?=
 =?UTF-8?q?mponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/group/VGroup.vue | 34 +++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/group/VGroup.vue

diff --git a/src/components/group/VGroup.vue b/src/components/group/VGroup.vue
new file mode 100644
index 0000000..88d2191
--- /dev/null
+++ b/src/components/group/VGroup.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type IVGroup from './IVGroup.type';
+
+const props = withDefaults(defineProps<IVGroup>(), {
+  type: 'default',
+  disabled: false,
+})
+</script>
+
+<template>
+<div :class="['container', {
+    'error': type === 'error',
+    'success': type === 'success',
+    'disabled': props.disabled,
+  }]"
+>
+    <slot></slot>
+</div>
+</template>
+
+<style lang="css" scoped>
+.container {
+  width: 100%;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  padding: 0 0 0 0.75rem;
+}
+
+.container.error {border-left: 2px solid var(--border-plain-error);}
+.container.success {border-left: 2px solid var(--border-plain-success);}
+.container.disabled {border: none;}
+</style>

From 451f665907c09440be963c36d968c8093c008390 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 18:15:18 +0200
Subject: [PATCH 03/45] =?UTF-8?q?=E2=9C=A8=20feature:=20Added=20Group=20co?=
 =?UTF-8?q?mponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/group/VGroup.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/group/VGroup.vue b/src/components/group/VGroup.vue
index 88d2191..a2cb2c1 100644
--- a/src/components/group/VGroup.vue
+++ b/src/components/group/VGroup.vue
@@ -9,12 +9,12 @@ const props = withDefaults(defineProps<IVGroup>(), {
 
 <template>
 <div :class="['container', {
-    'error': type === 'error',
-    'success': type === 'success',
-    'disabled': props.disabled,
-  }]"
+  'error': type === 'error',
+  'success': type === 'success',
+  'disabled': props.disabled,
+}]"
 >
-    <slot></slot>
+  <slot/>
 </div>
 </template>
 

From ba8ffaf82febd82e5b34aed155a650cf88e12eb2 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 18:28:28 +0200
Subject: [PATCH 04/45] =?UTF-8?q?=E2=9C=85=20test:=20added=20test=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/VGroup.spec.ts | 50 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 test/VGroup.spec.ts

diff --git a/test/VGroup.spec.ts b/test/VGroup.spec.ts
new file mode 100644
index 0000000..24dedac
--- /dev/null
+++ b/test/VGroup.spec.ts
@@ -0,0 +1,50 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import VGroup from '../src/components/group/VGroup.vue'
+
+describe('VGroup', () => {
+  test('renders default slot content', () => {
+    const wrapper = mount(VGroup, {
+      props: {type: undefined},
+      slots: {
+        default: '<span>Test Content</span>',
+      },
+    })
+    expect(wrapper.html()).toContain('Test Content')
+  })
+
+  test('applies default class when no type is specified', () => {
+    const wrapper = mount(VGroup)
+    expect(wrapper.classes()).toContain('container')
+    expect(wrapper.classes()).not.toContain('error')
+    expect(wrapper.classes()).not.toContain('success')
+  })
+
+  test('applies "error" class when type is "error"', () => {
+    const wrapper = mount(VGroup, {
+      props: { type: 'error' },
+    })
+    expect(wrapper.classes()).toContain('error')
+  })
+
+  test('applies "success" class when type is "success"', () => {
+    const wrapper = mount(VGroup, {
+      props: { type: 'success' },
+    })
+    expect(wrapper.classes()).toContain('success')
+  })
+
+  test('applies "disabled" class when disabled is true', () => {
+    const wrapper = mount(VGroup, {
+      props: { disabled: true, type: undefined },
+    })
+    expect(wrapper.classes()).toContain('disabled')
+  })
+
+  test('does not apply "disabled" class when disabled is false', () => {
+    const wrapper = mount(VGroup, {
+      props: { disabled: false, type: undefined },
+    })
+    expect(wrapper.classes()).not.toContain('disabled')
+  })
+})

From 22f3881b415214019d37bc564536da0c71fc0f77 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 21:22:19 +0200
Subject: [PATCH 05/45] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Added=20label?=
 =?UTF-8?q?=20component=20interface?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/label/IVLabel.type.ts | 39 ++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/label/IVLabel.type.ts

diff --git a/src/components/label/IVLabel.type.ts b/src/components/label/IVLabel.type.ts
new file mode 100644
index 0000000..d9e975a
--- /dev/null
+++ b/src/components/label/IVLabel.type.ts
@@ -0,0 +1,39 @@
+/**
+ * Interface representing the props for the Label component.
+ */
+export default interface IVLabel {
+  /**
+   * The text content displayed as the label.
+   */
+  label: string;
+
+  /**
+   * The visual style of the label, indicating its semantic meaning.
+   * - `default`: Standard label appearance.
+   * - `error`: Indicates an error state.
+   * - `success`: Indicates a successful or valid state.
+   *
+   * @default 'default'
+   */
+  type?: 'default' | 'error' | 'success' | undefined;
+
+  /**
+   * Whether the label is disabled. When true, the label appears inactive or grayed out.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Optional hint text displayed alongside or below the label to provide additional context.
+   */
+  hint?: string;
+
+  /**
+   * Indicates whether the associated field is required.
+   *
+   * @default false
+   */
+  required?: boolean;
+}
+

From 4fcc65dc17fbd08bd304aa518f1d8be97f15ba7f Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 21:25:00 +0200
Subject: [PATCH 06/45] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Added=20Group?=
 =?UTF-8?q?=20componen=20interface=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/group/IVGroup.type.ts | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/group/IVGroup.type.ts b/src/components/group/IVGroup.type.ts
index f8446ba..3a5c5e2 100644
--- a/src/components/group/IVGroup.type.ts
+++ b/src/components/group/IVGroup.type.ts
@@ -2,18 +2,17 @@
  * Interface representing the props for the Group component.
  */
 export default interface IVGroup {
-    /**
-     * Defines the visual style or status of the group.
-     * - `'default'`: Standard appearance.
-     * - `'error'`: Indicates an error state.
-     * - `'success'`: Indicates a successful state.
-     * - `undefined`: No specific type applied.
-     */
-    type: 'default' | 'error' | 'success' | undefined;
-
-    /**
-     * If true, disables the group component, making it non-interactive.
-     * Optional.
-     */
-    disabled?: boolean;
+  /**
+   * Defines the visual style or status of the group.
+   * - `'default'`: Standard appearance.
+   * - `'error'`: Indicates an error state.
+   * - `'success'`: Indicates a successful state.
+   * - `undefined`: No specific type applied.
+   */
+  type: 'default' | 'error' | 'success' | undefined;
+  /**
+   * If true, disables the group component, making it non-interactive.
+   * Optional.
+   */
+  disabled?: boolean;
 }

From a1c9f23840e1db4725309d6ca97a94eaf67b8d3f Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 21:43:23 +0200
Subject: [PATCH 07/45] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20=20Added=20Hin?=
 =?UTF-8?q?t=20component=20interface?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hint/IVHint.type.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/components/hint/IVHint.type.ts

diff --git a/src/components/hint/IVHint.type.ts b/src/components/hint/IVHint.type.ts
new file mode 100644
index 0000000..1cfd440
--- /dev/null
+++ b/src/components/hint/IVHint.type.ts
@@ -0,0 +1,28 @@
+/**
+ * Interface representing the properties of the Hint component.
+ */
+export default interface IVHint {
+  /**
+   * The title or main message displayed in the hint.
+   */
+  title: string;
+
+  /**
+   * Determines whether an icon should be displayed alongside the hint.
+   * Optional. Defaults to false if not provided.
+   */
+  icon?: boolean;
+
+  /**
+   * Specifies the type of hint to display.
+   * Can be one of the following: 'info', 'warning', 'alert', 'success', 'active', or an empty string.
+   * Optional.
+   */
+  type?: 'info' | 'warning' | 'alert' | 'success' | 'active' | '';
+
+  /**
+   * Indicates whether the hint is disabled.
+   * Optional. When true, the hint may appear inactive or be hidden.
+   */
+  disabled?: boolean;
+}

From 6d131ce9d223c74519d4f5b2e3c6435b5318fefc Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 21:51:54 +0200
Subject: [PATCH 08/45] =?UTF-8?q?=F0=9F=92=84=20Update=20the=20primevue=20?=
 =?UTF-8?q?configuration=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-configuration.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/style/primevue-configuration.css b/src/assets/style/primevue-configuration.css
index 3736d1a..84b0262 100644
--- a/src/assets/style/primevue-configuration.css
+++ b/src/assets/style/primevue-configuration.css
@@ -1,2 +1,3 @@
 @import './primevue-style/button.css';
 @import './primevue-style/accordion.css';
+@import './primevue-style/message.css';

From e8279f10dc0b29b68264322e7fc8f2c7b985c992 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 22:00:31 +0200
Subject: [PATCH 09/45] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Updated=20Hint?=
 =?UTF-8?q?=20component=20interface?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hint/IVHint.type.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/hint/IVHint.type.ts b/src/components/hint/IVHint.type.ts
index 1cfd440..c86f724 100644
--- a/src/components/hint/IVHint.type.ts
+++ b/src/components/hint/IVHint.type.ts
@@ -7,11 +7,8 @@ export default interface IVHint {
    */
   title: string;
 
-  /**
-   * Determines whether an icon should be displayed alongside the hint.
-   * Optional. Defaults to false if not provided.
-   */
-  icon?: boolean;
+  /** Name of the icon to display */
+  icon?: string;
 
   /**
    * Specifies the type of hint to display.

From 1a13f203de0ef42423874e8511b31414c136af6d Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 22:55:25 +0200
Subject: [PATCH 10/45] =?UTF-8?q?=F0=9F=92=84=20Adding=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20accordion=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/message.css | 87 +++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 src/assets/style/primevue-style/message.css

diff --git a/src/assets/style/primevue-style/message.css b/src/assets/style/primevue-style/message.css
new file mode 100644
index 0000000..4cae7fe
--- /dev/null
+++ b/src/assets/style/primevue-style/message.css
@@ -0,0 +1,87 @@
+:root {
+  --p-message-simple-content-padding: 0;
+  --p-message-outlined-border-width: var(--border-width);
+  --p-message-close-icon-size: 1rem;
+  --p-message-close-icon-lg-size: 1.125rem;
+  --p-message-close-icon-sm-size: 0.875rem;
+  --p-message-close-button-width: 1.75rem;
+  --p-message-close-button-height: 1.75rem;
+  --p-message-close-button-border-radius: 0px;
+  --p-message-close-button-focus-ring-width: var(--focus-width);
+  --p-message-close-button-focus-ring-style: var(--focus-style);
+  --p-message-close-button-focus-ring-offset: var(--focus-offset);
+  --p-message-icon-size: calc(0.125rem + var(--text-body-MD-standard-text-Regular-size));
+  --p-message-icon-lg-size: calc(0.125rem + var(--text-body-MD-standard-text-Regular-size));
+  --p-message-icon-sm-size: calc(0.125rem + var(--text-body-XS-mention-text-Regular-size));
+  --p-message-text-font-size: var(--text-body-MD-standard-text-Regular-size);
+  --p-message-text-font-weight: var(--text-body-XS-mention-text-Regular-weight);
+  --p-message-text-lg-font-size: var(--text-body-MD-standard-text-Regular-size);
+  --p-message-text-sm-font-size: var(--text-body-XS-mention-text-Regular-size);
+  --p-message-content-padding: 0.5rem 0.75rem;
+  --p-message-content-gap: 0.75rem;
+  --p-message-content-lg-padding: 0.625rem 0.875rem;
+  --p-message-content-sm-padding: 0.375rem 0.625rem;
+  --p-message-border-radius: 0px;
+  --p-message-border-width: var(--border-width);
+  --p-message-transition-duration: var(--transition-duration);
+  /* --p-message-contrast-background:
+  --p-message-contrast-border-color:
+  --p-message-contrast-color:
+  --p-message-contrast-shadow:
+  --p-message-contrast-simple-color:
+  --p-message-contrast-outlined-color:
+  --p-message-contrast-outlined-border-color:
+  --p-message-contrast-close-button-hover-background:
+  --p-message-contrast-close-button-focus-ring-color:
+  --p-message-contrast-close-button-focus-ring-shadow:  */
+  --p-message-secondary-background: none;
+  --p-message-secondary-border-color: none;
+  --p-message-secondary-color: none;
+  --p-message-secondary-shadow: none;
+  --p-message-secondary-simple-color: var(--text-mention-grey);
+  --p-message-secondary-outlined-color: none;
+  --p-message-secondary-outlined-border-color: none;
+  --p-message-secondary-close-button-hover-background: none;
+  --p-message-secondary-close-button-focus-ring-color: none;
+  --p-message-secondary-close-button-focus-ring-shadow: none;
+  --p-message-error-background: color-mix(in srgb,var(--background-contrast-error),transparent 5%);
+  --p-message-error-border-color: var(--border-plain-error);
+  --p-message-error-color: var(--text-default-grey);
+  --p-message-error-shadow: none;
+  --p-message-error-simple-color: var(--text-default-grey);
+  --p-message-error-outlined-color: none;
+  --p-message-error-outlined-border-color: none;
+  --p-message-error-close-button-hover-background: none;
+  --p-message-error-close-button-focus-ring-color: none;
+  --p-message-error-close-button-focus-ring-shadow: none;
+  --p-message-warn-background: color-mix(in srgb,var(--background-contrast-warning),transparent 5%);
+  --p-message-warn-border-color: var(--border-plain-warning);
+  --p-message-warn-color: var(--text-default-grey);
+  --p-message-warn-shadow: none;
+  --p-message-warn-simple-color: var(--text-default-grey);
+  --p-message-warn-outlined-color: none;
+  --p-message-warn-outlined-border-color: none;
+  --p-message-warn-close-button-hover-background: none;
+  --p-message-warn-close-button-focus-ring-color: none;
+  --p-message-warn-close-button-focus-ring-shadow: none;
+  --p-message-success-background: color-mix(in srgb,var(--background-contrast-success),transparent 5%);
+  --p-message-success-border-color: var(--border-plain-success);
+  --p-message-success-color: var(--text-default-grey);
+  --p-message-success-shadow: none;
+  --p-message-success-simple-color: var(--text-default-grey);
+  --p-message-success-outlined-color: var(none);
+  --p-message-success-outlined-border-color: var(none);
+  --p-message-success-close-button-hover-background: none;
+  --p-message-success-close-button-focus-ring-color: none;
+  --p-message-success-close-button-focus-ring-shadow: none;
+  --p-message-info-background: color-mix(in srgb,var(--background-contrast-info),transparent 5%);
+  --p-message-info-border-color: var(--border-plain-info);
+  --p-message-info-color: var(--text-default-grey);
+  --p-message-info-shadow: none;
+  --p-message-info-simple-color: var(--text-default-grey);
+  --p-message-info-outlined-color: none;
+  --p-message-info-outlined-border-color: none;
+  --p-message-info-close-button-hover-background: none;
+  --p-message-info-close-button-focus-ring-color: none;
+  --p-message-info-close-button-focus-ring-shadow: none;
+}

From 698eb9eee6d0e1185bf6d88f2703deae2d7640b1 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 23:03:33 +0200
Subject: [PATCH 11/45] =?UTF-8?q?=F0=9F=92=84=20Updating=20the=20style=20o?=
 =?UTF-8?q?f=20the=20primevue=20accordion=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/message.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/assets/style/primevue-style/message.css b/src/assets/style/primevue-style/message.css
index 4cae7fe..f115ee3 100644
--- a/src/assets/style/primevue-style/message.css
+++ b/src/assets/style/primevue-style/message.css
@@ -27,13 +27,13 @@
   /* --p-message-contrast-background:
   --p-message-contrast-border-color:
   --p-message-contrast-color:
-  --p-message-contrast-shadow:
-  --p-message-contrast-simple-color:
-  --p-message-contrast-outlined-color:
+  --p-message-contrast-shadow: */
+  --p-message-contrast-simple-color: var(--text-action-high-blue-france);
+  /* --p-message-contrast-outlined-color:
   --p-message-contrast-outlined-border-color:
   --p-message-contrast-close-button-hover-background:
   --p-message-contrast-close-button-focus-ring-color:
-  --p-message-contrast-close-button-focus-ring-shadow:  */
+  --p-message-contrast-close-button-focus-ring-shadow: */
   --p-message-secondary-background: none;
   --p-message-secondary-border-color: none;
   --p-message-secondary-color: none;
@@ -48,7 +48,7 @@
   --p-message-error-border-color: var(--border-plain-error);
   --p-message-error-color: var(--text-default-grey);
   --p-message-error-shadow: none;
-  --p-message-error-simple-color: var(--text-default-grey);
+  --p-message-error-simple-color: var(--text-default-error);
   --p-message-error-outlined-color: none;
   --p-message-error-outlined-border-color: none;
   --p-message-error-close-button-hover-background: none;
@@ -58,7 +58,7 @@
   --p-message-warn-border-color: var(--border-plain-warning);
   --p-message-warn-color: var(--text-default-grey);
   --p-message-warn-shadow: none;
-  --p-message-warn-simple-color: var(--text-default-grey);
+  --p-message-warn-simple-color: var(--text-default-warning);
   --p-message-warn-outlined-color: none;
   --p-message-warn-outlined-border-color: none;
   --p-message-warn-close-button-hover-background: none;
@@ -68,7 +68,7 @@
   --p-message-success-border-color: var(--border-plain-success);
   --p-message-success-color: var(--text-default-grey);
   --p-message-success-shadow: none;
-  --p-message-success-simple-color: var(--text-default-grey);
+  --p-message-success-simple-color: var(--text-default-success);
   --p-message-success-outlined-color: var(none);
   --p-message-success-outlined-border-color: var(none);
   --p-message-success-close-button-hover-background: none;
@@ -78,7 +78,7 @@
   --p-message-info-border-color: var(--border-plain-info);
   --p-message-info-color: var(--text-default-grey);
   --p-message-info-shadow: none;
-  --p-message-info-simple-color: var(--text-default-grey);
+  --p-message-info-simple-color: var(--text-default-info);
   --p-message-info-outlined-color: none;
   --p-message-info-outlined-border-color: none;
   --p-message-info-close-button-hover-background: none;

From 7dfca1b256254d779085137bcaa9175178e28fed Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 23:12:18 +0200
Subject: [PATCH 12/45] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Updated=20Hint?=
 =?UTF-8?q?=20component=20interface?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hint/IVHint.type.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/hint/IVHint.type.ts b/src/components/hint/IVHint.type.ts
index c86f724..1cfd440 100644
--- a/src/components/hint/IVHint.type.ts
+++ b/src/components/hint/IVHint.type.ts
@@ -7,8 +7,11 @@ export default interface IVHint {
    */
   title: string;
 
-  /** Name of the icon to display */
-  icon?: string;
+  /**
+   * Determines whether an icon should be displayed alongside the hint.
+   * Optional. Defaults to false if not provided.
+   */
+  icon?: boolean;
 
   /**
    * Specifies the type of hint to display.

From e6ece32d74be95b2e456305fdb2953f18e800ff4 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 23:21:31 +0200
Subject: [PATCH 13/45] =?UTF-8?q?=E2=9C=A8=20feature:=20Added=20Hint=20com?=
 =?UTF-8?q?ponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hint/VHint.vue | 54 +++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/components/hint/VHint.vue

diff --git a/src/components/hint/VHint.vue b/src/components/hint/VHint.vue
new file mode 100644
index 0000000..3edaf9d
--- /dev/null
+++ b/src/components/hint/VHint.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import Message from 'primevue/message';
+import type IVHint from './IVHint.type';
+import { computed } from 'vue';
+import styles from '@visua/typography.module.css';
+
+const props = withDefaults(defineProps<IVHint>(), {
+  title: '',
+  icon: false,
+  type: '',
+  disabled: false,
+})
+
+const iconClass = computed(() => {
+  switch (props.type) {
+    case 'alert': return 'ri-spam-fill';
+    case 'warning' : return 'ri-alert-fill';
+    case 'success' : return 'var(--text-default-success)';
+    case 'info': return 'ri-information-fill';
+    default:
+      return undefined;
+}
+});
+
+const severity = computed(() => {
+  switch (props.type) {
+    case 'alert': return 'error';
+    case 'warning' : return 'warn';
+    case 'success' : return 'success';
+    case 'info' : return 'info';
+    case 'active': return 'contrast'
+    default:
+      return 'secondary';
+  }
+});
+</script>
+
+<template>
+  <Message
+    variant="simple"
+    :severity="severity"
+    :class="[styles['text-body-XS-mention-text-Regular'], {'disabled': props.disabled }]"
+    :icon="props.icon ? iconClass: undefined"
+    :closable="false"
+    size="small"
+    role="alert"
+  >
+    {{ props.title }}
+  </Message>
+</template>
+
+<style scoped>
+.p-message.disabled {color: var(--text-disabled-grey);}
+</style>

From 93fccc88bb3f5cc4765918a1c98654ef457cd587 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 23:38:16 +0200
Subject: [PATCH 14/45] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Updated=20labe?=
 =?UTF-8?q?l=20component=20interface?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/label/IVLabel.type.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/label/IVLabel.type.ts b/src/components/label/IVLabel.type.ts
index d9e975a..caad633 100644
--- a/src/components/label/IVLabel.type.ts
+++ b/src/components/label/IVLabel.type.ts
@@ -35,5 +35,12 @@ export default interface IVLabel {
    * @default false
    */
   required?: boolean;
+
+  /**
+   * The ID of the input element that this label is associated with.
+   * This helps improve accessibility by linking the label to its corresponding input.
+   */
+  for: string;
+
 }
 

From 29a0094b50d7a441619a86fa4f778c816ea5fb63 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 23:42:59 +0200
Subject: [PATCH 15/45] =?UTF-8?q?=E2=9C=A8=20feature:=20Added=20Label=20co?=
 =?UTF-8?q?mponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/label/VLabel.vue | 48 +++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/label/VLabel.vue

diff --git a/src/components/label/VLabel.vue b/src/components/label/VLabel.vue
new file mode 100644
index 0000000..bd5bb36
--- /dev/null
+++ b/src/components/label/VLabel.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type IVLabel from './IVLabel.type';
+import styles from '@visua/typography.module.css';
+import VHint from '../hint/VHint.vue';
+
+const props = withDefaults(defineProps<IVLabel>(), {
+  type: 'default',
+  disabled: false,
+  required: false,
+  hint: undefined,
+});
+</script>
+
+<template>
+  <label
+    :for="props.for"
+    :class="[styles['text-body-MD-standard-text-Regular'], {
+      'label': props.type === 'default',
+      'success': props.type === 'success',
+      'error': props.type === 'error',
+      'disabled': props.disabled,
+    }]"
+    :aria-label="props.label"
+    :aria-disabled="props.disabled"
+    :aria-required="props.required"
+  >
+    {{ props.label }}
+    <slot name="required-type">
+      <span
+        v-if="'required' in $attrs && $attrs.required !== false"
+        :class="{ 'required': props.required }"
+      >*</span>
+    </slot>
+    <VHint
+      v-if="props.hint"
+      :title="props.hint"
+      :disabled="props.disabled"
+    />
+  </label>
+</template>
+
+<style lang="css" scoped>
+.label {color: var(--text-label-grey);}
+.success {color: var(--text-default-success);}
+.error {color: var(--text-default-error);}
+.disabled {color: var(--text-disabled-grey);}
+.required {color: var(--minor-red-marianne);}
+</style>

From 2bf927615796e984921d84d996091e927db84109 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 00:41:21 +0200
Subject: [PATCH 16/45] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20=20Added=20Inp?=
 =?UTF-8?q?ut=20component=20interface=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/IVInput.type.ts | 251 +++++++++++++++++++++++++++
 1 file changed, 251 insertions(+)
 create mode 100644 src/components/input/IVInput.type.ts

diff --git a/src/components/input/IVInput.type.ts b/src/components/input/IVInput.type.ts
new file mode 100644
index 0000000..cbe45f4
--- /dev/null
+++ b/src/components/input/IVInput.type.ts
@@ -0,0 +1,251 @@
+import type { HintedString, Nullable} from '@primevue/core';
+import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
+
+/**
+ * Interface representing the props for the InputText component.
+ */
+export interface IInputText {
+  /**
+   * The unique identifier for the input element.
+   */
+  id?: string;
+
+  /**
+   * The ID used to associate the input with a description element for accessibility.
+   */
+  descriptionId?: string;
+
+  /**
+   * Optional hint text displayed below the input.
+   */
+  hint?: string;
+
+  /**
+   * Indicates whether the input is in an invalid state.
+   */
+  isInvalid?: boolean;
+
+  /**
+   * Indicates whether the input is in a valid state.
+   */
+  isValid?: boolean;
+
+  /**
+   * If true, renders a <textarea> instead of a standard input.
+   */
+  isTextarea?: boolean;
+
+  /**
+   * If true, wraps the input in an additional wrapper element.
+   */
+  isWithWrapper?: boolean;
+
+  /**
+   * Controls the visibility of the label. If false, the label is visually hidden.
+   */
+  labelVisible?: boolean;
+
+  /**
+   * The text content of the label associated with the input.
+   */
+  label?: string;
+
+  /**
+   * Custom CSS class applied to the label element.
+   */
+  labelClass?: string;
+
+  /**
+   * The bound value of the input, supporting string, number, or null.
+   */
+  modelValue?: string | number | null;
+
+  /**
+   * Custom CSS class applied to the wrapper element.
+   */
+  wrapperClass?: string;
+
+  /**
+   * If true, the input type is set to "password" to mask the input content.
+   */
+  isPassword?: boolean;
+}
+
+/**
+ * Defines valid properties in Password component.
+ */
+export interface PasswordProps {
+  /**
+   * Value of the component.
+   */
+  modelValue?: Nullable<string>;
+  /**
+   * The default value for the input when not controlled by `modelValue`.
+   */
+  defaultValue?: Nullable<string>;
+  /**
+   * The name attribute for the element, typically used in form submissions.
+   */
+  name?: string | undefined;
+  /**
+   * Text to prompt password entry. Defaults to PrimeVue Locale configuration.
+   */
+  promptLabel?: string | undefined;
+  /**
+   * Regex for a medium level password.
+   * @defaultValue ^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})
+   */
+  mediumRegex?: string | RegExp | undefined;
+  /**
+   * Regex for a strong level password.
+   * @defaultValue ^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})
+   */
+  strongRegex?: string | RegExp | undefined;
+  /**
+   * Text for a weak password. Defaults to PrimeVue Locale configuration.
+   */
+  weakLabel?: string | undefined;
+  /**
+   * Text for a medium password. Defaults to PrimeVue Locale configuration.
+   */
+  mediumLabel?: string | undefined;
+  /**
+   * Text for a strong password. Defaults to PrimeVue Locale configuration.
+   */
+  strongLabel?: string | undefined;
+  /**
+   * Whether to show the strength indicator or not.
+   * @defaultValue true
+   */
+  feedback?: boolean | undefined;
+  /**
+   * A valid query selector or an HTMLElement to specify where the overlay gets attached.
+   * @defaultValue body
+   */
+  appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
+  /**
+   * Whether to show an icon to display the password as plain text.
+   * @defaultValue false
+   */
+  toggleMask?: boolean | undefined;
+  /**
+   * Icon to hide displaying the password as plain text.
+   */
+  maskIcon?: string | undefined;
+  /**
+   * Icon to show displaying the password as plain text.
+   */
+  unmaskIcon?: string | undefined;
+  /**
+   * Defines the size of the component.
+   */
+  size?: HintedString<'small' | 'large'> | undefined;
+  /**
+   * When present, it specifies that the component should have invalid state style.
+   * @defaultValue false
+   */
+  invalid?: boolean | undefined;
+  /**
+   * When present, it specifies that the component should be disabled.
+   * @defaultValue false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Specifies the input variant of the component.
+   * @defaultValue null
+   */
+  variant?: HintedString<'outlined' | 'filled'> | undefined | null;
+  /**
+   * Placeholder text for the input.
+   */
+  placeholder?: string | undefined;
+  /**
+   * When present, it specifies that an input field must be filled out before submitting the form.
+   * @defaultValue false
+   */
+  required?: boolean | undefined;
+  /**
+   * Spans 100% width of the container when enabled.
+   * @defaultValue null
+   */
+  fluid?: boolean | undefined;
+  /**
+   * When present, it specifies that an input element should automatically get focus when the page loads.
+   * @defaultValue null
+   */
+  autofocus?: boolean | undefined;
+  /**
+   * Identifier of the underlying input element.
+   */
+  inputId?: string | undefined;
+  /**
+   * Inline style of the input field.
+   */
+  inputStyle?: object | undefined;
+  /**
+   * Style class of the input field.
+   */
+  inputClass?: string | object | undefined;
+  /**
+   * Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
+   */
+  inputProps?: InputHTMLAttributes | undefined;
+  /**
+   * Identifier of the underlying overlay panel element.
+   */
+  panelId?: string | undefined;
+  /**
+   * Style class of the overlay panel.
+   */
+  panelClass?: string | object | undefined;
+  /**
+   * Inline style of the overlay panel.
+   */
+  panelStyle?: object | undefined;
+  /**
+   * Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
+   */
+  panelProps?: HTMLAttributes | undefined;
+  /**
+   * Identifier of the underlying overlay element.
+   */
+  overlayId?: string | undefined;
+  /**
+   * Style class of the overlay.
+   */
+  overlayClass?: string | object | undefined;
+  /**
+   * Inline style of the overlay.
+   */
+  overlayStyle?: object | undefined;
+  /**
+   * Used to pass all properties of the HTMLDivElement to the overlay inside the component.
+   */
+  overlayProps?: HTMLAttributes | undefined;
+  /**
+   * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+   */
+  ariaLabelledby?: string | undefined;
+  /**
+   * Establishes a string value that labels the component.
+   */
+  ariaLabel?: string | undefined;
+  /**
+   * Form control object, typically used for handling validation and form state.
+   */
+}
+
+/**
+ * Extended interface for the VInputText component.
+ * Combines selected properties from PasswordProps and IInputText,
+ * with additional support for password hints.
+ */
+export default interface IVInputText
+  extends Partial<Omit<PasswordProps, 'modelValue'>>,
+    Partial<IInputText> {
+  /**
+   * Hint(s) displayed to guide the user when entering a password.
+   * Can be a single string or an array of strings.
+   */
+  passwordHint?: string | Array<string>;
+}

From cf3e6251859f865fbce2157e00b7efa693223cc8 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 00:44:21 +0200
Subject: [PATCH 17/45] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Updated=20Inpu?=
 =?UTF-8?q?t=20component=20interface=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/IVInput.type.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/input/IVInput.type.ts b/src/components/input/IVInput.type.ts
index cbe45f4..f37d624 100644
--- a/src/components/input/IVInput.type.ts
+++ b/src/components/input/IVInput.type.ts
@@ -240,7 +240,7 @@ export interface PasswordProps {
  * Combines selected properties from PasswordProps and IInputText,
  * with additional support for password hints.
  */
-export default interface IVInputText
+export default interface IVInput
   extends Partial<Omit<PasswordProps, 'modelValue'>>,
     Partial<IInputText> {
   /**

From c371d453d380d7dd78f696164ea55c0f565a063e Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 00:51:14 +0200
Subject: [PATCH 18/45] =?UTF-8?q?=F0=9F=92=84=20Adding=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20style=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/input.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/assets/style/primevue-style/input.css

diff --git a/src/assets/style/primevue-style/input.css b/src/assets/style/primevue-style/input.css
new file mode 100644
index 0000000..46f1d56
--- /dev/null
+++ b/src/assets/style/primevue-style/input.css
@@ -0,0 +1,17 @@
+:root{
+  --p-inputtext-background: var(--input-background);
+  --p-inputtext-disabled-background: var(--input-disabled-background);
+  --p-inputtext-border-color: var(--input-border-color);
+  --p-inputtext-hover-border-color: var(--input-border-color);
+  --p-inputtext-focus-border-color: var(--input-border-color);
+  --p-inputtext-color: var(--input-color);
+  --p-inputtext-disabled-color: var(--input-disabled-color);
+  --p-inputtext-placeholder-color: var(--input-color);
+  --p-inputtext-padding-x: var(--input-padding-x);
+  --p-inputtext-padding-y: var(--input-padding-y);
+  --p-inputtext-border-radius: var(--input-border-raduis);
+  --p-inputtext-focus-ring-color: var(--focus-color);
+  --p-inputtext-focus-ring-width: var(--focus-width);
+  --p-inputtext-focus-ring-style: var(--focus-style);
+  --p-inputtext-focus-ring-offset: var(--focus-offset);
+}

From d14d0afe6b9094b0256b5702f5657f66670defc3 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 00:52:51 +0200
Subject: [PATCH 19/45] =?UTF-8?q?=F0=9F=92=84=20Adding=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20textarea=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/textarea.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/assets/style/primevue-style/textarea.css

diff --git a/src/assets/style/primevue-style/textarea.css b/src/assets/style/primevue-style/textarea.css
new file mode 100644
index 0000000..8ecfde3
--- /dev/null
+++ b/src/assets/style/primevue-style/textarea.css
@@ -0,0 +1,17 @@
+:root{
+  --p-textarea-background: var(--input-background);
+  --p-textarea-disabled-background: var(--input-disabled-background);
+  --p-textarea-border-color: var(--input-border-color);
+  --p-textarea-hover-border-color: var(--input-border-color);
+  --p-textarea-focus-border-color: var(--input-border-color);
+  --p-textarea-color: var(--input-color);
+  --p-textarea-disabled-color: var(--input-disabled-color);
+  --p-textarea-placeholder-color: var(--input-color);
+  --p-textarea-padding-x: var(--input-padding-x);
+  --p-textarea-padding-y: var(--input-padding-y);
+  --p-textarea-border-radius: var(--input-border-raduis);
+  --p-textarea-focus-ring-color: var(--focus-color);
+  --p-textarea-focus-ring-width: var(--focus-width);
+  --p-textarea-focus-ring-style: var(--focus-style);
+  --p-textarea-focus-ring-offset: var(--focus-offset);
+}

From fe29e7bd3dabb9f03ad5b278429a044e1af8dbe8 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 00:55:31 +0200
Subject: [PATCH 20/45] =?UTF-8?q?=F0=9F=92=84=20Adding=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20password=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/password.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/assets/style/primevue-style/password.css

diff --git a/src/assets/style/primevue-style/password.css b/src/assets/style/primevue-style/password.css
new file mode 100644
index 0000000..2b171f9
--- /dev/null
+++ b/src/assets/style/primevue-style/password.css
@@ -0,0 +1,16 @@
+:root{
+  --p-password-meter-background: var(--background-contrast-grey);
+  --p-password-meter-border-radius: 0.75rem;
+  --p-password-meter-height: var(--input-padding-y);
+  --p-password-icon-color: var(--input-color);
+  --p-password-overlay-background: var(--input-background);
+  --p-password-overlay-border-color: var(--input-border-color);
+  --p-password-overlay-border-radius: 0px;
+  --p-password-overlay-color: var(--input-color);
+  --p-password-overlay-padding: 0.75rem;
+  --p-password-overlay-shadow: var(--shadow);
+  --p-password-content-gap: 0.125rem;
+  --p-password-strength-weak-background: var(--background-action-high-error);
+  --p-password-strength-medium-background: var(--background-action-high-warning);
+  --p-password-strength-strong-background: var(--background-action-high-success);
+}

From 56cbdb451a9c1276cc57b064bf416d19f587706f Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 01:01:03 +0200
Subject: [PATCH 21/45] =?UTF-8?q?=F0=9F=92=84=20Adding=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20divider=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/divider.css | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/assets/style/primevue-style/divider.css

diff --git a/src/assets/style/primevue-style/divider.css b/src/assets/style/primevue-style/divider.css
new file mode 100644
index 0000000..ce7305b
--- /dev/null
+++ b/src/assets/style/primevue-style/divider.css
@@ -0,0 +1,11 @@
+:root{
+  --p-divider-vertical-margin: 0 1rem;
+  --p-divider-vertical-padding: 0.5rem 0;
+  --p-divider-vertical-content-padding: 0.5rem 0;
+  --p-divider-horizontal-margin: 1rem 0;
+  --p-divider-horizontal-padding: 0 1rem;
+  --p-divider-horizontal-content-padding: 0 0.5rem;
+  --p-divider-content-background: var(--background-default-grey);
+  --p-divider-content-color: var(--text-label-grey);
+  --p-divider-border-color: var(--border-default-grey);
+}

From fb37a42db6c640c7ff66da82ebe895e68fd84958 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 01:01:50 +0200
Subject: [PATCH 22/45] =?UTF-8?q?=F0=9F=92=84=20Update=20the=20primevue=20?=
 =?UTF-8?q?configuration=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-configuration.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/assets/style/primevue-configuration.css b/src/assets/style/primevue-configuration.css
index 84b0262..eded339 100644
--- a/src/assets/style/primevue-configuration.css
+++ b/src/assets/style/primevue-configuration.css
@@ -1,3 +1,6 @@
 @import './primevue-style/button.css';
 @import './primevue-style/accordion.css';
 @import './primevue-style/message.css';
+@import './primevue-style/input.css';
+@import './primevue-style/password.css';
+@import './primevue-style/textarea.css';

From a1a318510d946e392efaf6ba7a2b208f754f2e11 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 01:13:06 +0200
Subject: [PATCH 23/45] =?UTF-8?q?=E2=9C=A8=20feature:=20Added=20Divider=20?=
 =?UTF-8?q?component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/divider/VDivider.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/components/divider/VDivider.vue

diff --git a/src/components/divider/VDivider.vue b/src/components/divider/VDivider.vue
new file mode 100644
index 0000000..def7f46
--- /dev/null
+++ b/src/components/divider/VDivider.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Divider from 'primevue/divider';
+import type { DividerProps } from 'primevue/divider';
+
+export type IVDivider = Partial<Omit<DividerProps, 'dt' | 'pt' | 'ptOptions' | 'unstyled'>>
+const props = withDefaults(defineProps<IVDivider>(), {
+  align: undefined,
+  layout: 'horizontal',
+  type: 'solid',
+})
+</script>
+
+<template>
+  <Divider :align="props.align" :layout="props.layout" :type="props.type"/>
+</template>

From a2b7120257b9fd4865732ff663830f10b620f5d4 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 02:01:32 +0200
Subject: [PATCH 24/45] =?UTF-8?q?=E2=9C=A8=20feature:=20Updated=20Label=20?=
 =?UTF-8?q?component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/label/VLabel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/label/VLabel.vue b/src/components/label/VLabel.vue
index bd5bb36..01c44c0 100644
--- a/src/components/label/VLabel.vue
+++ b/src/components/label/VLabel.vue
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<IVLabel>(), {
     {{ props.label }}
     <slot name="required-type">
       <span
-        v-if="'required' in $attrs && $attrs.required !== false"
+        v-if="props.required"
         :class="{ 'required': props.required }"
       >*</span>
     </slot>

From 3e028d04c6535c8fe3ea15242dd7efd8d0faa86d Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 02:02:53 +0200
Subject: [PATCH 25/45] =?UTF-8?q?=E2=9C=A8=20feature:=20Added=20Input=20co?=
 =?UTF-8?q?mponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/VInput.vue | 224 ++++++++++++++++++++++++++++++++
 1 file changed, 224 insertions(+)
 create mode 100644 src/components/input/VInput.vue

diff --git a/src/components/input/VInput.vue b/src/components/input/VInput.vue
new file mode 100644
index 0000000..4e51b19
--- /dev/null
+++ b/src/components/input/VInput.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import VHint from '../hint/VHint.vue';
+import VDivider from '../divider/VDivider.vue';
+import VLabel from '../label/VLabel.vue';
+import type IVInput from './IVInput.type';
+import { computed, useAttrs, useId, ref, watch } from 'vue';
+import styles from '@visua/typography.module.css';
+import Password from 'primevue/password';
+
+const props = withDefaults(defineProps<IVInput>(), {
+  id: () => useId(),
+  descriptionId: undefined,
+  hint: '',
+  label: '',
+  modelValue: '',
+  wrapperClass: '',
+  isInvalid: false,
+  isValid: false,
+  isTextarea: false,
+  labelVisible: false,
+  isPassword: false,
+  weakLabel: 'Faible',
+  mediumLabel: 'Moyen',
+  strongLabel: 'Fort',
+  promptLabel: 'Entrez un mot de passe',
+  toggleMask: false,
+  placeholder: '',
+  passwordHint: undefined,
+})
+const attrs = useAttrs()
+
+const isDisabled = computed(() => 'disabled' in attrs)
+
+const emit = defineEmits([
+  'update:modelValue',
+  'value-change',
+  'change'
+])
+
+const localModelValue = ref(props.modelValue);
+watch(() => props.modelValue, (newVal) => {
+  if(localModelValue.value !== newVal) {
+        localModelValue.value = newVal;
+    }
+});
+watch(localModelValue, (newVal) => {
+    if(props.modelValue !== newVal){
+        emit('update:modelValue', newVal);
+    }
+});
+
+
+
+const labelState = computed(() => {
+  if(!props.isInvalid && !props.isValid && !isDisabled.value) return 'default';
+  else if(!props.isInvalid && props.isValid && !isDisabled.value) return 'success';
+  else if(props.isInvalid && !props.isValid && !isDisabled.value) return 'error';
+  else return undefined
+})
+
+</script>
+
+<template>
+  <div class="main-container">
+    <VLabel
+      v-if="props.labelVisible"
+      :for="props.id"
+      :label="props.label"
+      :required="!isDisabled"
+      :disabled="isDisabled"
+      :type="labelState"
+      :hint="props.hint"
+    >
+      <template #required-type v-if="props.required">
+        <slot name="required-type"/>
+      </template>
+    </VLabel>
+    <!-- Password -->
+    <Password
+      v-if="props.isPassword"
+      :id="props.id"
+      v-bind="attrs"
+      :class="[styles['text-body-MD-standard-text-Regular'], {
+        'p-password': true,
+        'error': props.isInvalid && !props.isValid && !isDisabled,
+        'success': !props.isInvalid && props.isValid && !isDisabled,
+      }]"
+      :disabled="isDisabled"
+      :aria-disabled="isDisabled"
+      :aria-describedby="descriptionId || undefined"
+      :weakLabel="props.weakLabel"
+      :mediumLabel="props.mediumLabel"
+      :strongLabel="props.strongLabel"
+      :promptLabel="props.promptLabel"
+      :toggleMask="props.toggleMask"
+      :placeholder="props.placeholder"
+      :fluid="true"
+      v-model:model-value="localModelValue"
+      @update:model-value="emit('update:modelValue', $event)"
+      @valueChange="emit('value-change', $event)"
+      @change="emit('change', $event)"
+    >
+      <template #header>
+        <div
+          :class="styles['text-body-MD-standard-text-Medium']"
+          style="padding-bottom: 0.5rem;"
+        >Niveau de complexité</div>
+      </template>
+      <template v-if="props.passwordHint !== undefined" #footer>
+        <VDivider/>
+        <VHint title="Votre mot de passe doit contenir au moins :"/>
+        <div
+          role="alert"
+          aria-live="polite"
+        >
+          <template v-if="Array.isArray(props.passwordHint)">
+            <VHint
+              v-for="message in props.passwordHint"
+              :key="`password-hint-${message}`"
+              :id="descriptionId"
+              :data-testid="descriptionId"
+              :title="message"
+              type="info"
+              icon
+            />
+          </template>
+          <VHint
+            v-else-if="props.passwordHint"
+            :title="props.passwordHint"
+            :id="descriptionId"
+            :data-testid="descriptionId"
+            type="info"
+            icon
+          />
+        </div>
+      </template>
+    </Password>
+
+    <!-- Textarea -->
+    <Textarea
+      v-else-if="props.isTextarea"
+      :id="props.id"
+      v-bind="attrs"
+      :class="[styles['text-body-MD-standard-text-Regular'], {
+        'p-textarea': true,
+        'error': props.isInvalid && !props.isValid && !isDisabled,
+        'success': !props.isInvalid && props.isValid && !isDisabled,
+      }]"
+      :disabled="isDisabled"
+      :aria-disabled="isDisabled"
+      :aria-describedby="descriptionId || undefined"
+      :placeholder="props.placeholder"
+      @valueChange="emit('value-change', $event)"
+    />
+
+    <!-- InputText -->
+    <InputText
+      v-else
+      :id="props.id"
+      v-bind="attrs"
+      :class="[styles['text-body-MD-standard-text-Regular'], {
+        'p-inputtext': true,
+        'error': props.isInvalid && !props.isValid && !isDisabled,
+        'success': !props.isInvalid && props.isValid && !isDisabled,
+      }]"
+      :disabled="isDisabled"
+      :aria-disabled="isDisabled"
+      :aria-describedby="descriptionId || undefined"
+      :placeholder="props.placeholder"
+      v-model:model-value="localModelValue"
+      @update:model-value="emit('update:modelValue', $event)"
+      @valueChange="emit('value-change', $event)"
+    />
+  </div>
+</template>
+
+<style lang="css" scoped>
+
+.main-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.5rem;
+}
+
+.p-textarea {
+  min-height: 5.5rem;
+  max-height: fit-content;
+}
+
+.p-password,
+.p-inputtext { height: 2.5rem;}
+
+.p-password,
+.p-textarea,
+.p-inputtext {width: inherit;}
+
+.p-textarea,
+.p-inputtext {border: var(--border-width) solid var(--input-border-color);}
+
+.p-password.success, .p-password.success:focus-visible, .p-password.success:hover,
+.p-textarea.success, .p-textarea.success:focus-visible, .p-textarea.success:hover,
+.p-inputtext.success, .p-inputtext.success:focus-visible, .p-inputtext.success:hover {border: var(--large-border-width) solid var(--border-plain-success);}
+
+.p-password.success, .p-password.success:focus-visible, .p-password.success:hover,
+.p-textarea.error, .p-textarea.error:focus-visible, .p-textarea.error:hover,
+.p-inputtext.error, .p-inputtext.error:focus-visible, .p-inputtext.error:hover {border: var(--large-border-width) solid var(--border-plain-error);}
+
+.p-password:disabled,
+.p-textarea:disabled,
+.p-inputtext:disabled {
+  border-color: var(--border-disabled-grey);
+  color: var(--text-disabled-grey);
+  background-color: var(--background-disabled-grey);
+}
+
+.label-disabled,
+.p-password:disabled,
+.p-textarea:disabled,
+.p-inputtext:disabled {color: var(--text-disabled-grey);}
+</style>

From 816bbf0ba6567c8f89b1f5daeae480e302e60314 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 02:03:24 +0200
Subject: [PATCH 26/45] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Updated=20Inpu?=
 =?UTF-8?q?t=20component=20interface=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/IVInput.type.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/input/IVInput.type.ts b/src/components/input/IVInput.type.ts
index f37d624..32bc29c 100644
--- a/src/components/input/IVInput.type.ts
+++ b/src/components/input/IVInput.type.ts
@@ -58,7 +58,7 @@ export interface IInputText {
   /**
    * The bound value of the input, supporting string, number, or null.
    */
-  modelValue?: string | number | null;
+  modelValue?: string | null;
 
   /**
    * Custom CSS class applied to the wrapper element.

From 56a44478278e69a022793b95ce671e08e1be45eb Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 02:05:06 +0200
Subject: [PATCH 27/45] =?UTF-8?q?=F0=9F=92=84=20Update=20the=20primevue=20?=
 =?UTF-8?q?configuration=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-configuration.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/style/primevue-configuration.css b/src/assets/style/primevue-configuration.css
index eded339..b1e7e7b 100644
--- a/src/assets/style/primevue-configuration.css
+++ b/src/assets/style/primevue-configuration.css
@@ -4,3 +4,4 @@
 @import './primevue-style/input.css';
 @import './primevue-style/password.css';
 @import './primevue-style/textarea.css';
+@import './primevue-style/divider.css';

From 75128e71ed7f11f908b82acf80660594371cb378 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 09:12:22 +0200
Subject: [PATCH 28/45] =?UTF-8?q?=F0=9F=92=84=20Adding=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20form=20field=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/form.css | 28 ++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/assets/style/primevue-style/form.css

diff --git a/src/assets/style/primevue-style/form.css b/src/assets/style/primevue-style/form.css
new file mode 100644
index 0000000..48f62cc
--- /dev/null
+++ b/src/assets/style/primevue-style/form.css
@@ -0,0 +1,28 @@
+:root {
+  --p-form-field-background: var(--input-background);
+  --p-form-field-disabled-background: var(--input-disabled-background);
+  --p-form-field-border-color: var(--input-border-color);
+  --p-form-field-hover-border-color: var(--input-border-color);
+  --p-form-field-focus-border-color: var(--input-border-color);
+  --p-form-field-color: var(--input-color);
+  --p-form-field-disabled-color: var(--input-disabled-color);
+  --p-form-field-placeholder-color: var(--input-color);
+  --p-form-field-icon-color: var(--input-color);
+  --p-form-field-padding-x: var(--input-padding-x);
+  --p-form-field-padding-y: var(--input-padding-y);
+  --p-form-field-border-radius: var(--input-border-raduis);
+  --p-form-field-transition-duration: var(--transition-duration);
+  --p-form-field-focus-ring-width: 0;
+  --p-form-field-focus-ring-style: none;
+  --p-form-field-focus-ring-color: transparent;
+  --p-form-field-focus-ring-offset: 0;
+  --p-form-field-focus-ring-shadow: none;
+  --p-form-field-lg-font-size: 1.125rem;
+  --p-form-field-lg-padding-x: 0.875rem;
+  --p-form-field-lg-padding-y: 0.625rem;
+  --p-form-field-sm-font-size: 0.875rem;
+  --p-form-field-sm-padding-x: 0.625rem;
+  --p-form-field-sm-padding-y: 0.375rem;
+  --p-form-field-placeholder-color: var(--input-color);
+  --p-form-field-invalid-border-color: var(--border-plain-error);
+}

From a337f6ebe4a266ff8f22d2546a6fb6661236a9c2 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 09:13:18 +0200
Subject: [PATCH 29/45] =?UTF-8?q?=F0=9F=92=84=20Adding=20the=20style=20of?=
 =?UTF-8?q?=20various=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/various.css | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 src/assets/style/primevue-style/various.css

diff --git a/src/assets/style/primevue-style/various.css b/src/assets/style/primevue-style/various.css
new file mode 100644
index 0000000..cfd1d7b
--- /dev/null
+++ b/src/assets/style/primevue-style/various.css
@@ -0,0 +1,6 @@
+:root{
+  --p-icon-size: 1rem;
+  --p-text-muted-color: var(--text-action-high-grey);
+  --p-transition-duration: var(--transition-duration);
+  --p-anchor-gutter: 2px;
+}

From 8443ebaf93d9140671c427f24ac94ad3122058b0 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 09:14:18 +0200
Subject: [PATCH 30/45] =?UTF-8?q?=F0=9F=92=84=20Updating=20the=20style=20o?=
 =?UTF-8?q?f=20the=20primevue=20style=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/input.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/style/primevue-style/input.css b/src/assets/style/primevue-style/input.css
index 46f1d56..fdba0ba 100644
--- a/src/assets/style/primevue-style/input.css
+++ b/src/assets/style/primevue-style/input.css
@@ -14,4 +14,5 @@
   --p-inputtext-focus-ring-width: var(--focus-width);
   --p-inputtext-focus-ring-style: var(--focus-style);
   --p-inputtext-focus-ring-offset: var(--focus-offset);
+  --p-inputtext-invalid-border-color: var(--border-plain-error);
 }

From e686c4fd45ead43b45164a46b0102c775140b810 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 09:14:58 +0200
Subject: [PATCH 31/45] =?UTF-8?q?=F0=9F=92=84=20Update=20the=20primevue=20?=
 =?UTF-8?q?configuration=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-configuration.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/assets/style/primevue-configuration.css b/src/assets/style/primevue-configuration.css
index b1e7e7b..1ae4ed8 100644
--- a/src/assets/style/primevue-configuration.css
+++ b/src/assets/style/primevue-configuration.css
@@ -5,3 +5,5 @@
 @import './primevue-style/password.css';
 @import './primevue-style/textarea.css';
 @import './primevue-style/divider.css';
+@import './primevue-style/various.css';
+@import './primevue-style/form.css';

From e44e17fe7d397a2b06092e3c1b3a78bbc8fca92f Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 09:34:10 +0200
Subject: [PATCH 32/45] =?UTF-8?q?=F0=9F=92=84=20Updating=20the=20style=20o?=
 =?UTF-8?q?f=20the=20primevue=20form=20field=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/form.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/assets/style/primevue-style/form.css b/src/assets/style/primevue-style/form.css
index 48f62cc..3fc94be 100644
--- a/src/assets/style/primevue-style/form.css
+++ b/src/assets/style/primevue-style/form.css
@@ -23,6 +23,5 @@
   --p-form-field-sm-font-size: 0.875rem;
   --p-form-field-sm-padding-x: 0.625rem;
   --p-form-field-sm-padding-y: 0.375rem;
-  --p-form-field-placeholder-color: var(--input-color);
   --p-form-field-invalid-border-color: var(--border-plain-error);
 }

From ca4c258ea13392fb4d204ac0c09983869e8edd6d Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 09:54:03 +0200
Subject: [PATCH 33/45] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Updated=20Inpu?=
 =?UTF-8?q?t=20component=20interface=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/IVInput.type.ts | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/input/IVInput.type.ts b/src/components/input/IVInput.type.ts
index 32bc29c..d026266 100644
--- a/src/components/input/IVInput.type.ts
+++ b/src/components/input/IVInput.type.ts
@@ -56,7 +56,7 @@ export interface IInputText {
   labelClass?: string;
 
   /**
-   * The bound value of the input, supporting string, number, or null.
+   * The bound value of the input, supporting string or null.
    */
   modelValue?: string | null;
 
@@ -69,8 +69,31 @@ export interface IInputText {
    * If true, the input type is set to "password" to mask the input content.
    */
   isPassword?: boolean;
+
+  /**
+   * If true, disables the input field.
+   */
+  disabled?: boolean;
+
+  /**
+   * Placeholder text displayed inside the input when it's empty.
+   */
+  placeholder?: string;
+
+  /**
+   * Error message(s) displayed when the input is invalid.
+   * Can be a single string or an array of strings.
+   */
+  errorMessage?: string | string[];
+
+  /**
+   * Success message(s) displayed when the input is valid.
+   * Can be a single string or an array of strings.
+   */
+  validMessage?: string | string[];
 }
 
+
 /**
  * Defines valid properties in Password component.
  */
@@ -242,7 +265,7 @@ export interface PasswordProps {
  */
 export default interface IVInput
   extends Partial<Omit<PasswordProps, 'modelValue'>>,
-    Partial<IInputText> {
+    Partial<Omit<IInputText, 'wrapperClass' | 'labelClass'>> {
   /**
    * Hint(s) displayed to guide the user when entering a password.
    * Can be a single string or an array of strings.

From 66cb7aa8a336a283d71d5cbb4652577936be7c17 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 09:55:46 +0200
Subject: [PATCH 34/45] =?UTF-8?q?=E2=9C=A8=20feature:=20Added=20error=20an?=
 =?UTF-8?q?d=20valid=20message?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/VInput.vue | 91 +++++++++++++++++++++++++--------
 1 file changed, 69 insertions(+), 22 deletions(-)

diff --git a/src/components/input/VInput.vue b/src/components/input/VInput.vue
index 4e51b19..9649a87 100644
--- a/src/components/input/VInput.vue
+++ b/src/components/input/VInput.vue
@@ -28,10 +28,13 @@ const props = withDefaults(defineProps<IVInput>(), {
   toggleMask: false,
   placeholder: '',
   passwordHint: undefined,
+  disabled: false,
+  errorMessage: '',
+  validMessage: '',
 })
 const attrs = useAttrs()
 
-const isDisabled = computed(() => 'disabled' in attrs)
+// const props.disabled = computed(() => 'disabled' in attrs)
 
 const emit = defineEmits([
   'update:modelValue',
@@ -54,9 +57,9 @@ watch(localModelValue, (newVal) => {
 
 
 const labelState = computed(() => {
-  if(!props.isInvalid && !props.isValid && !isDisabled.value) return 'default';
-  else if(!props.isInvalid && props.isValid && !isDisabled.value) return 'success';
-  else if(props.isInvalid && !props.isValid && !isDisabled.value) return 'error';
+  if(!props.isInvalid && !props.isValid && !props.disabled) return 'default';
+  else if(!props.isInvalid && props.isValid && !props.disabled) return 'success';
+  else if(props.isInvalid && !props.isValid && !props.disabled) return 'error';
   else return undefined
 })
 
@@ -68,8 +71,8 @@ const labelState = computed(() => {
       v-if="props.labelVisible"
       :for="props.id"
       :label="props.label"
-      :required="!isDisabled"
-      :disabled="isDisabled"
+      :required="!props.disabled"
+      :disabled="props.disabled"
       :type="labelState"
       :hint="props.hint"
     >
@@ -84,11 +87,11 @@ const labelState = computed(() => {
       v-bind="attrs"
       :class="[styles['text-body-MD-standard-text-Regular'], {
         'p-password': true,
-        'error': props.isInvalid && !props.isValid && !isDisabled,
-        'success': !props.isInvalid && props.isValid && !isDisabled,
+        'error': props.isInvalid && !props.isValid && !props.disabled,
+        'success': !props.isInvalid && props.isValid && !props.disabled,
       }]"
-      :disabled="isDisabled"
-      :aria-disabled="isDisabled"
+      :disabled="props.disabled"
+      :aria-disabled="props.disabled"
       :aria-describedby="descriptionId || undefined"
       :weakLabel="props.weakLabel"
       :mediumLabel="props.mediumLabel"
@@ -145,11 +148,11 @@ const labelState = computed(() => {
       v-bind="attrs"
       :class="[styles['text-body-MD-standard-text-Regular'], {
         'p-textarea': true,
-        'error': props.isInvalid && !props.isValid && !isDisabled,
-        'success': !props.isInvalid && props.isValid && !isDisabled,
+        'error': props.isInvalid && !props.isValid && !props.disabled,
+        'success': !props.isInvalid && props.isValid && !props.disabled,
       }]"
-      :disabled="isDisabled"
-      :aria-disabled="isDisabled"
+      :disabled="props.disabled"
+      :aria-disabled="props.disabled"
       :aria-describedby="descriptionId || undefined"
       :placeholder="props.placeholder"
       @valueChange="emit('value-change', $event)"
@@ -162,17 +165,62 @@ const labelState = computed(() => {
       v-bind="attrs"
       :class="[styles['text-body-MD-standard-text-Regular'], {
         'p-inputtext': true,
-        'error': props.isInvalid && !props.isValid && !isDisabled,
-        'success': !props.isInvalid && props.isValid && !isDisabled,
+        'error': props.isInvalid && !props.isValid && !props.disabled,
+        'success': !props.isInvalid && props.isValid && !props.disabled,
       }]"
-      :disabled="isDisabled"
-      :aria-disabled="isDisabled"
+      :disabled="props.disabled"
+      :aria-disabled="props.disabled"
       :aria-describedby="descriptionId || undefined"
       :placeholder="props.placeholder"
       v-model:model-value="localModelValue"
       @update:model-value="emit('update:modelValue', $event)"
       @valueChange="emit('value-change', $event)"
     />
+      <div
+    role="alert"
+    aria-live="polite"
+  >
+    <template v-if="Array.isArray(props.errorMessage)">
+      <VHint
+        v-for="message in props.errorMessage"
+        :id="descriptionId"
+        :key="message"
+        :data-testid="descriptionId"
+        :title="message"
+        type="alert"
+        icon
+      />
+    </template>
+    <VHint
+      v-else-if="errorMessage"
+      :id="descriptionId"
+      :key="`error-${errorMessage}`"
+      :data-testid="descriptionId"
+      :title="`${errorMessage}`"
+      type="alert"
+      icon
+    />
+    <template v-if="Array.isArray(props.validMessage)">
+      <VHint
+        v-for="message in props.validMessage"
+        :id="descriptionId"
+        :key="message"
+        :data-testid="descriptionId"
+        :title="message"
+        type="success"
+        icon
+      />
+    </template>
+    <VHint
+      v-else-if="validMessage"
+      :id="descriptionId"
+      :key="`error-${validMessage}`"
+      :data-testid="descriptionId"
+      :title="`${validMessage}`"
+      type="success"
+      icon
+    />
+  </div>
   </div>
 </template>
 
@@ -215,10 +263,9 @@ const labelState = computed(() => {
   border-color: var(--border-disabled-grey);
   color: var(--text-disabled-grey);
   background-color: var(--background-disabled-grey);
+  --p-inputtext-placeholder-color: var(--text-disabled-grey);
+  --p-form-field-placeholder-color: var(--text-disabled-grey);
+  --p-textarea-placeholder-color: var(--text-disabled-grey);
 }
 
-.label-disabled,
-.p-password:disabled,
-.p-textarea:disabled,
-.p-inputtext:disabled {color: var(--text-disabled-grey);}
 </style>

From 121780cebe364b285f7650ec70bb5e0c215fae3a Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 10:08:04 +0200
Subject: [PATCH 35/45] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bug=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/VInput.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/input/VInput.vue b/src/components/input/VInput.vue
index 9649a87..61b5f01 100644
--- a/src/components/input/VInput.vue
+++ b/src/components/input/VInput.vue
@@ -165,8 +165,8 @@ const labelState = computed(() => {
       v-bind="attrs"
       :class="[styles['text-body-MD-standard-text-Regular'], {
         'p-inputtext': true,
-        'error': props.isInvalid && !props.isValid && !props.disabled,
-        'success': !props.isInvalid && props.isValid && !props.disabled,
+        'error': props.isInvalid && !props.isValid && !props.disabled || !!props.errorMessage,
+        'success': !props.isInvalid && props.isValid && !props.disabled && !props.errorMessage,
       }]"
       :disabled="props.disabled"
       :aria-disabled="props.disabled"
@@ -180,7 +180,7 @@ const labelState = computed(() => {
     role="alert"
     aria-live="polite"
   >
-    <template v-if="Array.isArray(props.errorMessage)">
+    <template v-if="Array.isArray(props.errorMessage) && props.isInvalid">
       <VHint
         v-for="message in props.errorMessage"
         :id="descriptionId"
@@ -192,7 +192,7 @@ const labelState = computed(() => {
       />
     </template>
     <VHint
-      v-else-if="errorMessage"
+      v-else-if="errorMessage && props.isInvalid"
       :id="descriptionId"
       :key="`error-${errorMessage}`"
       :data-testid="descriptionId"
@@ -200,7 +200,7 @@ const labelState = computed(() => {
       type="alert"
       icon
     />
-    <template v-if="Array.isArray(props.validMessage)">
+    <template v-if="Array.isArray(props.validMessage) && props.isValid">
       <VHint
         v-for="message in props.validMessage"
         :id="descriptionId"
@@ -212,7 +212,7 @@ const labelState = computed(() => {
       />
     </template>
     <VHint
-      v-else-if="validMessage"
+      v-else-if="validMessage && props.isValid"
       :id="descriptionId"
       :key="`error-${validMessage}`"
       :data-testid="descriptionId"

From 10e23a05f7d06e4d96bc45562798e823f3d35e2f Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 10:11:25 +0200
Subject: [PATCH 36/45] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bug=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/VInput.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/input/VInput.vue b/src/components/input/VInput.vue
index 61b5f01..f99d9d1 100644
--- a/src/components/input/VInput.vue
+++ b/src/components/input/VInput.vue
@@ -180,7 +180,7 @@ const labelState = computed(() => {
     role="alert"
     aria-live="polite"
   >
-    <template v-if="Array.isArray(props.errorMessage) && props.isInvalid">
+    <template v-if="Array.isArray(props.errorMessage)">
       <VHint
         v-for="message in props.errorMessage"
         :id="descriptionId"
@@ -192,7 +192,7 @@ const labelState = computed(() => {
       />
     </template>
     <VHint
-      v-else-if="errorMessage && props.isInvalid"
+      v-else-if="errorMessage"
       :id="descriptionId"
       :key="`error-${errorMessage}`"
       :data-testid="descriptionId"
@@ -200,7 +200,7 @@ const labelState = computed(() => {
       type="alert"
       icon
     />
-    <template v-if="Array.isArray(props.validMessage) && props.isValid">
+    <template v-if="Array.isArray(props.validMessage)">
       <VHint
         v-for="message in props.validMessage"
         :id="descriptionId"
@@ -212,7 +212,7 @@ const labelState = computed(() => {
       />
     </template>
     <VHint
-      v-else-if="validMessage && props.isValid"
+      v-else-if="validMessage"
       :id="descriptionId"
       :key="`error-${validMessage}`"
       :data-testid="descriptionId"

From e4670e3d18d0804c5ca9ac2c5723cdb936b26e0e Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 10:14:30 +0200
Subject: [PATCH 37/45] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bug=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/VInput.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/input/VInput.vue b/src/components/input/VInput.vue
index f99d9d1..23992fa 100644
--- a/src/components/input/VInput.vue
+++ b/src/components/input/VInput.vue
@@ -87,8 +87,8 @@ const labelState = computed(() => {
       v-bind="attrs"
       :class="[styles['text-body-MD-standard-text-Regular'], {
         'p-password': true,
-        'error': props.isInvalid && !props.isValid && !props.disabled,
-        'success': !props.isInvalid && props.isValid && !props.disabled,
+        'error': props.isInvalid && !props.isValid && !props.disabled || !!props.errorMessage,
+        'success': !props.isInvalid && props.isValid && !props.disabled && !props.errorMessage || !!props.validMessage,
       }]"
       :disabled="props.disabled"
       :aria-disabled="props.disabled"
@@ -148,8 +148,8 @@ const labelState = computed(() => {
       v-bind="attrs"
       :class="[styles['text-body-MD-standard-text-Regular'], {
         'p-textarea': true,
-        'error': props.isInvalid && !props.isValid && !props.disabled,
-        'success': !props.isInvalid && props.isValid && !props.disabled,
+        'error': props.isInvalid && !props.isValid && !props.disabled || !!props.errorMessage,
+        'success': !props.isInvalid && props.isValid && !props.disabled  && !props.errorMessage || !!props.validMessage,
       }]"
       :disabled="props.disabled"
       :aria-disabled="props.disabled"
@@ -166,7 +166,7 @@ const labelState = computed(() => {
       :class="[styles['text-body-MD-standard-text-Regular'], {
         'p-inputtext': true,
         'error': props.isInvalid && !props.isValid && !props.disabled || !!props.errorMessage,
-        'success': !props.isInvalid && props.isValid && !props.disabled && !props.errorMessage,
+        'success': !props.isInvalid && props.isValid && !props.disabled && !props.errorMessage || !!props.validMessage,
       }]"
       :disabled="props.disabled"
       :aria-disabled="props.disabled"

From c4287009893402b03e34b8913e3b49d00bbb88f7 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 10:17:19 +0200
Subject: [PATCH 38/45] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bug=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hint/VHint.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/hint/VHint.vue b/src/components/hint/VHint.vue
index 3edaf9d..9292fb2 100644
--- a/src/components/hint/VHint.vue
+++ b/src/components/hint/VHint.vue
@@ -15,7 +15,7 @@ const iconClass = computed(() => {
   switch (props.type) {
     case 'alert': return 'ri-spam-fill';
     case 'warning' : return 'ri-alert-fill';
-    case 'success' : return 'var(--text-default-success)';
+    case 'success' : return 'ri-checkbox-circle-fill';
     case 'info': return 'ri-information-fill';
     default:
       return undefined;

From 247ab61454c1921acb4bc063ac7544abea4c4a39 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 12:21:33 +0200
Subject: [PATCH 39/45] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bug=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hint/VHint.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/hint/VHint.vue b/src/components/hint/VHint.vue
index 9292fb2..455181a 100644
--- a/src/components/hint/VHint.vue
+++ b/src/components/hint/VHint.vue
@@ -51,4 +51,9 @@ const severity = computed(() => {
 
 <style scoped>
 .p-message.disabled {color: var(--text-disabled-grey);}
+
+.p-message-icon{
+  display: flex;
+  align-items: center;
+}
 </style>

From 8b9310b794116527308ec9660a8edc5245f6e942 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 12:22:19 +0200
Subject: [PATCH 40/45] =?UTF-8?q?=E2=9C=A8=20feature:=20Updated=20Label=20?=
 =?UTF-8?q?component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/label/VLabel.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/label/VLabel.vue b/src/components/label/VLabel.vue
index 01c44c0..ae1cd1e 100644
--- a/src/components/label/VLabel.vue
+++ b/src/components/label/VLabel.vue
@@ -22,7 +22,6 @@ const props = withDefaults(defineProps<IVLabel>(), {
     }]"
     :aria-label="props.label"
     :aria-disabled="props.disabled"
-    :aria-required="props.required"
   >
     {{ props.label }}
     <slot name="required-type">

From 748b6e67db675f846290c856a83755d9d6fdfea3 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 12:22:48 +0200
Subject: [PATCH 41/45] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bug=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/VInput.vue | 50 +++++++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 9 deletions(-)

diff --git a/src/components/input/VInput.vue b/src/components/input/VInput.vue
index 23992fa..b76375d 100644
--- a/src/components/input/VInput.vue
+++ b/src/components/input/VInput.vue
@@ -31,6 +31,7 @@ const props = withDefaults(defineProps<IVInput>(), {
   disabled: false,
   errorMessage: '',
   validMessage: '',
+  feedback: false,
 })
 const attrs = useAttrs()
 
@@ -85,10 +86,11 @@ const labelState = computed(() => {
       v-if="props.isPassword"
       :id="props.id"
       v-bind="attrs"
+      class="p-password"
       :class="[styles['text-body-MD-standard-text-Regular'], {
-        'p-password': true,
         'error': props.isInvalid && !props.isValid && !props.disabled || !!props.errorMessage,
         'success': !props.isInvalid && props.isValid && !props.disabled && !props.errorMessage || !!props.validMessage,
+        'disabled': props.disabled,
       }]"
       :disabled="props.disabled"
       :aria-disabled="props.disabled"
@@ -97,8 +99,9 @@ const labelState = computed(() => {
       :mediumLabel="props.mediumLabel"
       :strongLabel="props.strongLabel"
       :promptLabel="props.promptLabel"
-      :toggleMask="props.toggleMask"
+      :toggleMask="props.toggleMask && !props.disabled"
       :placeholder="props.placeholder"
+      :feedback="props.feedback"
       :fluid="true"
       v-model:model-value="localModelValue"
       @update:model-value="emit('update:modelValue', $event)"
@@ -246,26 +249,55 @@ const labelState = computed(() => {
 .p-textarea,
 .p-inputtext {width: inherit;}
 
-.p-textarea,
-.p-inputtext {border: var(--border-width) solid var(--input-border-color);}
 
-.p-password.success, .p-password.success:focus-visible, .p-password.success:hover,
 .p-textarea.success, .p-textarea.success:focus-visible, .p-textarea.success:hover,
-.p-inputtext.success, .p-inputtext.success:focus-visible, .p-inputtext.success:hover {border: var(--large-border-width) solid var(--border-plain-success);}
+.p-inputtext.success, .p-inputtext.success:focus-visible, .p-inputtext.success:hover {
+  border: var(--large-border-width) solid var(--border-plain-success);
+}
+
+
+.p-password.success{
+  --p-inputtext-border-color: transparent;
+  --p-inputtext-hover-border-color: transparent;
+  --p-inputtext-focus-border-color: transparent;
+  border-radius: var(--input-border-raduis);
+  border: var(--large-border-width) solid var(--border-plain-success);
+}
+
+.p-password.error{
+  --p-inputtext-border-color: transparent;
+  --p-inputtext-hover-border-color: transparent;
+  --p-inputtext-focus-border-color: transparent;
+  border-radius: var(--input-border-raduis);
+  border: var(--large-border-width) solid var(--border-plain-error);
+}
 
-.p-password.success, .p-password.success:focus-visible, .p-password.success:hover,
 .p-textarea.error, .p-textarea.error:focus-visible, .p-textarea.error:hover,
 .p-inputtext.error, .p-inputtext.error:focus-visible, .p-inputtext.error:hover {border: var(--large-border-width) solid var(--border-plain-error);}
 
-.p-password:disabled,
+
 .p-textarea:disabled,
 .p-inputtext:disabled {
-  border-color: var(--border-disabled-grey);
+  border: var(--border-width) solid var(--border-disabled-grey);
   color: var(--text-disabled-grey);
   background-color: var(--background-disabled-grey);
   --p-inputtext-placeholder-color: var(--text-disabled-grey);
   --p-form-field-placeholder-color: var(--text-disabled-grey);
   --p-textarea-placeholder-color: var(--text-disabled-grey);
+  --p-form-field-border-color: var(--border-disabled-grey);
+  --p-inputtext-border-color: var(--border-disabled-grey);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.p-password.disabled{
+  --p-inputtext-border-color: var(--border-disabled-grey);
+  --p-inputtext-hover-border-color: var(--border-disabled-grey);
+  --p-inputtext-focus-border-color: var(--border-disabled-grey);
+  --p-inputtext-placeholder-color: var(--text-disabled-grey);
+  --p-form-field-placeholder-color: var(--text-disabled-grey);
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 </style>

From 8e25f34b7fc166cc2880cef60d9c315189f621c2 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 12:24:26 +0200
Subject: [PATCH 42/45] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bug=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/VInput.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/input/VInput.vue b/src/components/input/VInput.vue
index b76375d..1a11733 100644
--- a/src/components/input/VInput.vue
+++ b/src/components/input/VInput.vue
@@ -35,8 +35,6 @@ const props = withDefaults(defineProps<IVInput>(), {
 })
 const attrs = useAttrs()
 
-// const props.disabled = computed(() => 'disabled' in attrs)
-
 const emit = defineEmits([
   'update:modelValue',
   'value-change',

From 1925a060bc47e28efadbb319cdf428deecb1d33a Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 15:26:29 +0200
Subject: [PATCH 43/45] =?UTF-8?q?=E2=9C=85=20test:=20added=20test=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/VInput.spec.ts | 190 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 test/VInput.spec.ts

diff --git a/test/VInput.spec.ts b/test/VInput.spec.ts
new file mode 100644
index 0000000..5b039d7
--- /dev/null
+++ b/test/VInput.spec.ts
@@ -0,0 +1,190 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import VInput from '../src/components/input/VInput.vue'
+
+const globalConfig = {
+  global: {
+    mocks: {
+      $primevue: {
+        config: {}
+      }
+    },
+    stubs: {
+      VHint: true,
+      VDivider: true,
+      Password: true,
+      Textarea: true,
+      VLabel: true,
+    }
+  }
+}
+
+const noStubVLabelConfig = {
+  ...globalConfig.global,
+  stubs: {
+    ...globalConfig.global.stubs,
+    VLabel: false,
+  }
+}
+
+const noStubTextareaConfig = {
+  ...globalConfig.global,
+  stubs: {
+    ...globalConfig.global.stubs,
+    Textarea: false,
+  }
+}
+
+const noStubPasswordConfig = {
+  ...globalConfig.global,
+  stubs: {
+    ...globalConfig.global.stubs,
+    Textarea: false,
+  }
+}
+
+describe('VInput.vue', () => {
+  it('renders InputText by default', () => {
+    const wrapper = mount(VInput, globalConfig)
+    expect(wrapper.find('input').exists()).toBe(true)
+  })
+
+  it('renders VLabel when labelVisible is true and passes the label prop', () => {
+    const wrapper = mount(VInput, {
+      props: {
+        labelVisible: true,
+        label: 'Username'
+      },
+      global: noStubVLabelConfig
+    })
+
+    const labelComponent = wrapper.findComponent({ name: 'VLabel' })
+    expect(labelComponent.exists()).toBe(true)
+    expect(labelComponent.props('label')).toBe('Username')
+    expect(wrapper.text()).toContain('Username')
+  })
+
+  it('does not render VLabel when labelVisible is false', () => {
+    const wrapper = mount(VInput, {
+      props: {
+        labelVisible: false,
+        label: 'Username'
+      },
+      global: noStubVLabelConfig
+    })
+
+    const labelComponent = wrapper.findComponent({ name: 'VLabel' })
+    expect(labelComponent.exists()).toBe(false)
+  })
+
+  // Test : update:modelValue from InputText
+  it('emits update:modelValue when input value changes', async () => {
+    const wrapper = mount(VInput, {
+      props: {
+        modelValue: ''
+      },
+      global: globalConfig.global
+    })
+
+    const input = wrapper.find('input')
+    await input.setValue('new value')
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new value'])
+  })
+
+  // Test : value-change from InputText
+  it('emits value-change when InputText emits valueChange', async () => {
+    const wrapper = mount(VInput, {
+      props: {
+        modelValue: ''
+      },
+      global: globalConfig.global
+    })
+
+    const inputText = wrapper.findComponent({ name: 'InputText' })
+    inputText.vm.$emit('valueChange', 'changed')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('value-change')).toBeTruthy()
+    expect(wrapper.emitted('value-change')![0]).toEqual(['changed'])
+  })
+
+    // Test : value-change from Textarea
+  it('emits value-change when Textarea emits valueChange', async () => {
+    const wrapper = mount(VInput, {
+      props: {
+        isTextarea: true,
+        modelValue: ''
+      },
+      global: noStubTextareaConfig
+    })
+
+    const textarea = wrapper.findComponent({ name: 'Textarea' })
+    textarea.vm.$emit('valueChange', 'textarea changed')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('value-change')).toBeTruthy()
+    expect(wrapper.emitted('value-change')![0]).toEqual(['textarea changed'])
+  })
+
+  // Test : value-change from Password
+  it('emits value-change when Password emits valueChange', async () => {
+    const wrapper = mount(VInput, {
+      props: {
+        isPassword: true,
+        modelValue: ''
+      },
+      global: noStubPasswordConfig
+    })
+
+    const password = wrapper.findComponent({ name: 'Password' })
+    password.vm.$emit('valueChange', 'password changed')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('value-change')).toBeTruthy()
+    expect(wrapper.emitted('value-change')![0]).toEqual(['password changed'])
+  })
+
+  // Test : update:modelValue from Password
+  it('emits update:modelValue when Password value changes', async () => {
+    const wrapper = mount(VInput, {
+      props: {
+        isPassword: true,
+        modelValue: ''
+      },
+      global: noStubPasswordConfig
+    })
+
+    const password = wrapper.findComponent({ name: 'Password' })
+    password.vm.$emit('update:modelValue', 'new-password')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new-password'])
+  })
+
+  // Test : change from Password
+  it('emits change when Password emits change', async () => {
+    const wrapper = mount(VInput, {
+      props: {
+        isPassword: true,
+        modelValue: ''
+      },
+      global: noStubPasswordConfig
+    })
+
+    const password = wrapper.findComponent({ name: 'Password' })
+    password.vm.$emit('change', 'password-changed')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('change')).toBeTruthy()
+    expect(wrapper.emitted('change')![0]).toEqual(['password-changed'])
+  })
+
+})

From 522821a3f6390903e9e9101e0c3219ee5db3d2cf Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 15:27:38 +0200
Subject: [PATCH 44/45] Display some input components

---
 src/App.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3c30836..42b178a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,8 @@
 // import VButtonView from '../template/VButtonView.vue'
 // import VButtonGroupView from '../template/VButtonGroupView.vue';
 // import VLinkView from '../template/VLinkView.vue';
-import VAccordionView from '../template/VAccordionView.vue';
+// import VAccordionView from '../template/VAccordionView.vue';
+import VInputView from '../template/VInputView.vue';
 </script>
 
 
@@ -10,5 +11,6 @@ import VAccordionView from '../template/VAccordionView.vue';
   <!-- <VButtonView/> -->
   <!-- <VButtonGroupView/> -->
    <!-- <VLinkView/> -->
-    <VAccordionView/>
+    <!-- <VAccordionView/> -->
+  <VInputView/>
 </template>

From 3d6e6be4633028305b084787e95bdba63b8397c3 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 15:28:21 +0200
Subject: [PATCH 45/45] =?UTF-8?q?=F0=9F=92=84=20Updating=20the=20style=20o?=
 =?UTF-8?q?f=20the=20primevue=20accordion=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/message.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/style/primevue-style/message.css b/src/assets/style/primevue-style/message.css
index f115ee3..41c98bc 100644
--- a/src/assets/style/primevue-style/message.css
+++ b/src/assets/style/primevue-style/message.css
@@ -18,7 +18,7 @@
   --p-message-text-lg-font-size: var(--text-body-MD-standard-text-Regular-size);
   --p-message-text-sm-font-size: var(--text-body-XS-mention-text-Regular-size);
   --p-message-content-padding: 0.5rem 0.75rem;
-  --p-message-content-gap: 0.75rem;
+  --p-message-content-gap: 0.5rem;
   --p-message-content-lg-padding: 0.625rem 0.875rem;
   --p-message-content-sm-padding: 0.375rem 0.625rem;
   --p-message-border-radius: 0px;