feat: Ajout de composant (#23)

| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Co-authored-by: kevin <kevin@yuno.malio.fr> Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr> Reviewed-on: #23 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-03-26 07:40:04 +00:00
parent 898bc0f761
commit 82c4cfaa90
78 changed files with 8700 additions and 155 deletions
--- a/app/components/malio/button/Button.test.ts
+++ b/app/components/malio/button/Button.test.ts
@@ -0,0 +1,218 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { DefineComponent } from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import Button from './Button.vue'
+
+type ButtonProps = {
+  id?: string
+  label?: string
+  disabled?: boolean
+  buttonClass?: string
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+  iconName?: string
+  iconPosition?: 'left' | 'right'
+  iconSize?: string | number
+}
+
+const ButtonForTest = Button as DefineComponent<ButtonProps>
+
+const mountComponent = (props: ButtonProps = {}, slots?: Record<string, string>) =>
+  mount(ButtonForTest, {
+    props,
+    slots,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioButton', () => {
+  it('renders a button with label', () => {
+    const wrapper = mountComponent({ label: 'Valider' })
+
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Valider')
+  })
+
+  it('renders slot content over label prop', () => {
+    const wrapper = mountComponent({ label: 'Prop' }, { default: 'Slot content' })
+
+    expect(wrapper.text()).toContain('Slot content')
+    expect(wrapper.text()).not.toContain('Prop')
+  })
+
+  it('uses provided id on button', () => {
+    const wrapper = mountComponent({ id: 'custom-id' })
+
+    expect(wrapper.get('button').attributes('id')).toBe('custom-id')
+  })
+
+  it('generates an id when missing', () => {
+    const wrapper = mountComponent()
+
+    const buttonId = wrapper.get('button').attributes('id')
+    expect(buttonId?.startsWith('malio-button-')).toBe(true)
+  })
+
+  it('sets type="button" on the button', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').attributes('type')).toBe('button')
+  })
+
+  it('emits click event when clicked', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toHaveLength(1)
+  })
+
+  it('does not emit click when disabled', async () => {
+    const wrapper = mountComponent({ disabled: true })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+
+  it('sets disabled attribute when disabled', () => {
+    const wrapper = mountComponent({ disabled: true })
+
+    expect(wrapper.get('button').attributes('disabled')).toBeDefined()
+  })
+
+  // --- Variant: Primary (default) ---
+
+  it('applies primary variant by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-primary')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+    expect(wrapper.get('button').classes()).toContain('cursor-pointer')
+  })
+
+  it('applies primary disabled styles', () => {
+    const wrapper = mountComponent({ disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+  })
+
+  // --- Variant: Secondary ---
+
+  it('applies secondary variant', () => {
+    const wrapper = mountComponent({ variant: 'secondary' })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-secondary')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+  })
+
+  it('applies secondary disabled styles', () => {
+    const wrapper = mountComponent({ variant: 'secondary', disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+  })
+
+  // --- Variant: Tertiary ---
+
+  it('applies tertiary variant with border and no background', () => {
+    const wrapper = mountComponent({ variant: 'tertiary' })
+
+    expect(wrapper.get('button').classes()).toContain('border')
+    expect(wrapper.get('button').classes()).toContain('border-m-btn-primary')
+    expect(wrapper.get('button').classes()).toContain('text-m-btn-primary')
+    expect(wrapper.get('button').classes()).toContain('bg-transparent')
+    expect(wrapper.get('button').classes()).not.toContain('text-white')
+  })
+
+  it('applies tertiary disabled styles with border', () => {
+    const wrapper = mountComponent({ variant: 'tertiary', disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('border')
+    expect(wrapper.get('button').classes()).toContain('border-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('text-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('bg-transparent')
+  })
+
+  // --- Variant: Danger ---
+
+  it('applies danger variant', () => {
+    const wrapper = mountComponent({ variant: 'danger' })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-danger')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+  })
+
+  it('applies danger disabled styles', () => {
+    const wrapper = mountComponent({ variant: 'danger', disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+  })
+
+  // --- Sizing ---
+
+  it('applies correct dimensions', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('w-[240px]')
+    expect(wrapper.get('button').classes()).toContain('h-[40px]')
+  })
+
+  it('applies font styles', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('text-base')
+    expect(wrapper.get('button').classes()).toContain('font-bold')
+  })
+
+  // --- buttonClass override ---
+
+  it('applies buttonClass', () => {
+    const wrapper = mountComponent({ buttonClass: 'w-full rounded-full' })
+
+    expect(wrapper.get('button').classes()).toContain('w-full')
+    expect(wrapper.get('button').classes()).toContain('rounded-full')
+  })
+
+  // --- Icon ---
+
+  it('renders icon on the right by default', () => {
+    const wrapper = mountComponent({ iconName: 'mdi:arrow-right' })
+
+    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
+  })
+
+  it('renders icon on the left when specified', () => {
+    const wrapper = mountComponent({ iconName: 'mdi:arrow-left', iconPosition: 'left' })
+
+    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
+  })
+
+  it('does not render icon when iconName is empty', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
+    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
+  })
+
+  it('passes icon name and size to icon component', () => {
+    const wrapper = mount(ButtonForTest, {
+      props: { iconName: 'mdi:check', iconSize: 18 },
+    })
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:check')
+    expect(iconComponent.props('width')).toBe(18)
+    expect(iconComponent.props('height')).toBe(18)
+  })
+})
--- a/app/components/malio/button/Button.vue
+++ b/app/components/malio/button/Button.vue
@@ -0,0 +1,102 @@
+<template>
+  <button
+    :id="buttonId"
+    :class="mergedButtonClass"
+    :disabled="disabled"
+    type="button"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <IconifyIcon
+      v-if="iconName && iconPosition === 'left'"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon-left"
+    />
+
+    <span><slot>{{ label }}</slot></span>
+
+    <IconifyIcon
+      v-if="iconName && iconPosition === 'right'"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon-right"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useId } from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ name: 'MalioButton', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    disabled?: boolean
+    buttonClass?: string
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+    iconName?: string
+    iconPosition?: 'left' | 'right'
+    iconSize?: string | number
+  }>(),
+  {
+    id: '',
+    label: '',
+    disabled: false,
+    buttonClass: '',
+    variant: 'primary',
+    iconName: '',
+    iconPosition: 'right',
+    iconSize: 16,
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const buttonId = computed(() => props.id || `malio-button-${generatedId}`)
+
+const variantClasses = computed(() => {
+  if (props.disabled) {
+    if (props.variant === 'tertiary') {
+      return 'border border-m-disabled text-m-disabled bg-transparent cursor-not-allowed'
+    }
+    return 'bg-m-disabled text-white cursor-not-allowed'
+  }
+
+  switch (props.variant) {
+    case 'secondary':
+      return 'bg-m-btn-secondary hover:bg-m-btn-secondary-hover active:bg-m-btn-secondary-active text-white cursor-pointer'
+    case 'tertiary':
+      return 'border border-m-btn-primary bg-transparent text-m-btn-primary hover:border-m-btn-primary-hover hover:text-m-btn-primary-hover active:border-m-btn-primary-active active:text-m-btn-primary-active cursor-pointer'
+    case 'danger':
+      return 'bg-m-btn-danger hover:bg-m-btn-danger-hover active:bg-m-btn-danger-active text-white cursor-pointer'
+    default:
+      return 'bg-m-btn-primary hover:bg-m-btn-primary-hover active:bg-m-btn-primary-active text-white cursor-pointer'
+  }
+})
+
+const mergedButtonClass = computed(() =>
+  twMerge(
+    'inline-flex w-[240px] h-[40px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    variantClasses.value,
+    props.buttonClass,
+  ),
+)
+
+const emit = defineEmits<{
+  (event: 'click', e: MouseEvent): void
+}>()
+
+function onClick(e: MouseEvent) {
+  if (!props.disabled) {
+    emit('click', e)
+  }
+}
+</script>
--- a/app/components/malio/button/ButtonIcon.test.ts
+++ b/app/components/malio/button/ButtonIcon.test.ts
@@ -0,0 +1,151 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import ButtonIcon from './ButtonIcon.vue'
+
+type ButtonIconProps = {
+  id?: string
+  icon: string
+  ariaLabel: string
+  disabled?: boolean
+  buttonClass?: string
+  iconSize?: string | number
+  variant?: 'filled' | 'ghost'
+}
+
+const ButtonIconForTest = ButtonIcon as DefineComponent<ButtonIconProps>
+
+const mountComponent = (props: ButtonIconProps = {icon: 'mdi:arrow-left', ariaLabel: 'Retour'}) =>
+  mount(ButtonIconForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioButtonIcon', () => {
+  it('renders a button with the icon', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
+  })
+
+  it('uses provided id on button', () => {
+    const wrapper = mountComponent({id: 'custom-id', icon: 'mdi:arrow-left', ariaLabel: 'Retour'})
+
+    expect(wrapper.get('button').attributes('id')).toBe('custom-id')
+  })
+
+  it('generates an id when missing', () => {
+    const wrapper = mountComponent()
+
+    const buttonId = wrapper.get('button').attributes('id')
+    expect(buttonId?.startsWith('malio-button-icon-')).toBe(true)
+  })
+
+  it('sets aria-label on button', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour'})
+
+    expect(wrapper.get('button').attributes('aria-label')).toBe('Retour')
+  })
+
+  it('sets type="button" on the button', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').attributes('type')).toBe('button')
+  })
+
+  it('passes icon name to icon component', () => {
+    const wrapper = mount(ButtonIconForTest, {
+      props: {icon: 'mdi:pencil-outline', ariaLabel: 'Modifier'},
+    })
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:pencil-outline')
+  })
+
+  it('passes icon size to icon component', () => {
+    const wrapper = mount(ButtonIconForTest, {
+      props: {icon: 'mdi:arrow-left', ariaLabel: 'Retour', iconSize: 32},
+    })
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('width')).toBe(32)
+    expect(iconComponent.props('height')).toBe(32)
+  })
+
+  it('emits click event when clicked', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toHaveLength(1)
+  })
+
+  it('does not emit click when disabled', async () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+
+  it('sets disabled attribute when disabled', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
+
+    expect(wrapper.get('button').attributes('disabled')).toBeDefined()
+  })
+
+  it('applies disabled styles when disabled', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
+
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+  })
+
+  it('applies cursor-pointer when not disabled', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('cursor-pointer')
+  })
+
+  it('applies white text color for icon visibility', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('text-white')
+  })
+
+  it('applies default background color', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-primary')
+  })
+
+  it('applies buttonClass', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', buttonClass: 'rounded-full'})
+
+    expect(wrapper.get('button').classes()).toContain('rounded-full')
+  })
+
+  it('applies ghost variant with no background and colored icon', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', variant: 'ghost'})
+
+    expect(wrapper.get('button').classes()).toContain('text-m-btn-primary')
+    expect(wrapper.get('button').classes()).not.toContain('bg-m-btn-primary')
+    expect(wrapper.get('button').classes()).not.toContain('text-white')
+  })
+
+  it('applies ghost disabled styles with no background', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', variant: 'ghost', disabled: true})
+
+    expect(wrapper.get('button').classes()).toContain('text-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+    expect(wrapper.get('button').classes()).not.toContain('bg-m-disabled')
+  })
+})
--- a/app/components/malio/button/ButtonIcon.vue
+++ b/app/components/malio/button/ButtonIcon.vue
@@ -0,0 +1,76 @@
+<template>
+  <button
+    :id="buttonId"
+    :class="mergedButtonClass"
+    :disabled="disabled"
+    :aria-label="ariaLabel"
+    type="button"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <IconifyIcon
+      :icon="icon"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import {computed, useAttrs, useId} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioButtonIcon', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    icon: string
+    ariaLabel: string
+    disabled?: boolean
+    buttonClass?: string
+    iconSize?: string | number
+    variant?: 'filled' | 'ghost'
+  }>(),
+  {
+    id: '',
+    disabled: false,
+    buttonClass: '',
+    iconSize: 24,
+    variant: 'filled',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const buttonId = computed(() => props.id || `malio-button-icon-${generatedId}`)
+
+const isFilled = computed(() => props.variant === 'filled')
+
+const mergedButtonClass = computed(() =>
+  twMerge(
+    'inline-flex items-center justify-center rounded-md p-1 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    isFilled.value
+      ? props.disabled
+        ? 'bg-m-disabled text-white cursor-not-allowed'
+        : 'bg-m-btn-primary hover:bg-m-btn-primary-hover active:bg-m-btn-primary-active text-white cursor-pointer'
+      : props.disabled
+        ? 'text-m-disabled cursor-not-allowed'
+        : 'text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active cursor-pointer',
+    props.buttonClass,
+  ),
+)
+
+const emit = defineEmits<{
+  (event: 'click', e: MouseEvent): void
+}>()
+
+function onClick(e: MouseEvent) {
+  if (!props.disabled) {
+    emit('click', e)
+  }
+}
+</script>
--- a/app/components/malio/checkbox/Checkbox.test.ts
+++ b/app/components/malio/checkbox/Checkbox.test.ts
@@ -0,0 +1,142 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import Checkbox from './Checkbox.vue'
+
+type CheckboxProps = {
+  id?: string
+  label?: string
+  name?: string
+  modelValue?: boolean | null
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+}
+
+const CheckboxForTest = Checkbox as DefineComponent<CheckboxProps>
+
+const mountCheckbox = (props: CheckboxProps = {}) =>
+  mount(CheckboxForTest, {props})
+
+describe('MalioCheckbox', () => {
+  it('renders a checkbox input', () => {
+    const wrapper = mountCheckbox()
+
+    expect(wrapper.get('input').attributes('type')).toBe('checkbox')
+  })
+
+  it('renders the label text', () => {
+    const wrapper = mountCheckbox({label: 'Accept terms'})
+
+    expect(wrapper.get('label').text()).toContain('Accept terms')
+  })
+
+  it('uses a provided id on input and label', () => {
+    const wrapper = mountCheckbox({
+      id: 'checkbox-id',
+      label: 'Accept terms',
+    })
+
+    expect(wrapper.get('input').attributes('id')).toBe('checkbox-id')
+    expect(wrapper.get('label').attributes('for')).toBe('checkbox-id')
+  })
+
+  it('generates an id when none is provided', () => {
+    const wrapper = mountCheckbox({label: 'Accept terms'})
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(inputId?.startsWith('malio-checkbox-')).toBe(true)
+    expect(wrapper.get('label').attributes('for')).toBe(inputId)
+  })
+
+  it('applies the name attribute', () => {
+    const wrapper = mountCheckbox({name: 'terms'})
+
+    expect(wrapper.get('input').attributes('name')).toBe('terms')
+  })
+
+  it('reflects the checked state from modelValue', () => {
+    const wrapper = mountCheckbox({modelValue: true})
+
+    expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('emits update:modelValue when toggled', async () => {
+    const wrapper = mountCheckbox({modelValue: false})
+    const input = wrapper.get('input')
+
+    await input.setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+  })
+
+  it('does not emit when readonly', async () => {
+    const wrapper = mountCheckbox({
+      modelValue: true,
+      readonly: true,
+    })
+    const input = wrapper.get('input')
+
+    await input.setValue(false)
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect((input.element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('sets disabled and required attributes', () => {
+    const wrapper = mountCheckbox({
+      disabled: true,
+      required: true,
+    })
+
+    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('input').attributes('required')).toBeDefined()
+  })
+
+  it('shows a hint message and links it with aria-describedby', () => {
+    const wrapper = mountCheckbox({hint: 'Required field'})
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(wrapper.get('p').text()).toBe('Required field')
+    expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
+  })
+
+  it('shows an error state and message', () => {
+    const wrapper = mountCheckbox({
+      label: 'Accept terms',
+      error: 'You must accept',
+    })
+
+    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    expect(wrapper.get('p').text()).toBe('You must accept')
+  })
+
+  it('shows success only when there is no error', () => {
+    const wrapper = mountCheckbox({
+      success: 'Valid',
+      error: 'Invalid',
+    })
+
+    expect(wrapper.get('p').text()).toBe('Invalid')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
+  })
+
+  it('shows success styles and message when there is no error', () => {
+    const wrapper = mountCheckbox({
+      label: 'Accept terms',
+      success: 'Valid',
+      modelValue: true,
+    })
+
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('p').text()).toBe('Valid')
+    expect(wrapper.get('p').classes()).toContain('text-m-success')
+  })
+})
--- a/app/components/malio/checkbox/Checkbox.vue
+++ b/app/components/malio/checkbox/Checkbox.vue
@@ -0,0 +1,227 @@
+<template>
+  <div :class="mergedGroupClass">
+    <input
+      :id="inputId"
+      :name="name"
+      :checked="isChecked"
+      :required="required"
+      :disabled="disabled"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      :class="mergedInputClass"
+      v-bind="attrs"
+      type="checkbox"
+      @change="onChange"
+    >
+
+    <label
+      v-if="label"
+      :for="inputId"
+      :class="mergedLabelClass"
+    >
+      <span>
+        <svg width="12" height="10" viewBox="0 0 12 10" aria-hidden="true">
+          <polyline points="1.5 6 4.5 9 10.5 1"/>
+        </svg>
+      </span>
+      <span>
+        {{ label }}
+      </span>
+    </label>
+
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="mergedMessageClass"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, useAttrs, useId} from 'vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    modelValue?: boolean | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+  }>(),
+  {
+    id: '',
+    label: '',
+    name: '',
+    modelValue: undefined,
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    disabled: false,
+    readonly: false,
+    hint: '',
+    error: '',
+    success: '',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const inputId = computed(() => props.id?.toString() || `malio-checkbox-${generatedId}`)
+const isChecked = computed(() => !!props.modelValue)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const disabled = computed(() => props.disabled)
+
+const describedBy = computed(() => {
+  if (!props.hint && !hasError.value && !hasSuccess.value) return undefined
+  return `${inputId.value}-describedby`
+})
+
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'checkbox-wrapper-4 mt-4 w-full',
+    props.groupClass,
+  ),
+)
+
+const mergedInputClass = computed(() =>
+  twMerge(
+    'inp-cbx peer',
+    props.inputClass,
+  ),
+)
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'cbx text-black',
+    disabled.value ? 'cursor-not-allowed text-black/60' : '',
+    hasError.value ? 'text-m-danger' : '',
+    hasSuccess.value ? 'text-m-success' : '',
+    props.labelClass,
+  ),
+)
+
+const mergedMessageClass = computed(() =>
+  twMerge(
+    'text-xs',
+    hasError.value
+      ? 'text-m-danger'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : 'text-m-muted',
+  ),
+)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const onChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+
+  if (props.readonly) {
+    target.checked = isChecked.value
+    return
+  }
+
+  emit('update:modelValue', target.checked)
+}
+</script>
+
+<style scoped>
+.cbx {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.cbx span {
+  display: inline-flex;
+  align-items: center;
+}
+
+.cbx span:first-child {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  transform: scale(1);
+  border: 2px solid rgb(0, 0, 0);
+  transition: all 0.1s ease;
+}
+
+.cbx span:first-child svg {
+  position: absolute;
+  top: 2px;
+  left: 1px;
+  fill: none;
+  stroke: #000000;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 16px;
+  stroke-dashoffset: 16px;
+  transition: all 0.125s ease;
+}
+
+.cbx span:last-child {
+  padding-left: 12px;
+  line-height: 18px;
+}
+
+.inp-cbx {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.inp-cbx:checked + .cbx span:first-child svg {
+  stroke-dashoffset: 0;
+}
+
+.inp-cbx + .cbx.text-m-danger span:first-child {
+  border-color: rgb(var(--m-danger) / 1);
+}
+.cbx.text-m-danger span:first-child svg {
+  stroke: rgb(var(--m-danger) / 1);
+}
+.inp-cbx:checked + .cbx.text-m-danger span:first-child {
+  border-color: rgb(var(--m-danger) / 1);
+}
+
+.inp-cbx + .cbx.text-m-success span:first-child {
+  border-color: rgb(var(--m-success) / 1);
+}
+.cbx.text-m-success span:first-child svg {
+  stroke: rgb(var(--m-success) / 1);
+}
+.inp-cbx:checked + .cbx.text-m-success span:first-child {
+  border-color: rgb(var(--m-success) / 1);
+}
+
+.inp-cbx:disabled + .cbx {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>
--- a/app/components/malio/drawer/Drawer.test.ts
+++ b/app/components/malio/drawer/Drawer.test.ts
@@ -0,0 +1,122 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { DefineComponent } from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import Drawer from './Drawer.vue'
+
+type DrawerProps = {
+  modelValue?: boolean
+  title?: string
+  showClose?: boolean
+  id?: string
+  drawerClass?: string
+}
+
+const DrawerForTest = Drawer as DefineComponent<DrawerProps>
+
+function mountComponent(props: DrawerProps = {}, slots?: Record<string, string>) {
+  return mount(DrawerForTest, {
+    props,
+    slots,
+    global: {
+      stubs: {
+        Teleport: true,
+      },
+    },
+  })
+}
+
+describe('MalioDrawer', () => {
+  it('does not render when modelValue is false', () => {
+    const wrapper = mountComponent({ modelValue: false })
+    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
+  })
+
+  it('renders when modelValue is true', () => {
+    const wrapper = mountComponent({ modelValue: true })
+    expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
+  })
+
+  it('renders the title', () => {
+    const wrapper = mountComponent({ modelValue: true, title: 'Mon tiroir' })
+    expect(wrapper.find('h2').text()).toBe('Mon tiroir')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mountComponent(
+      { modelValue: true },
+      { default: '<p data-test="content">Contenu du drawer</p>' },
+    )
+    expect(wrapper.find('[data-test="content"]').text()).toBe('Contenu du drawer')
+  })
+
+  it('emits update:modelValue false on backdrop click', async () => {
+    const wrapper = mountComponent({ modelValue: true })
+    await wrapper.find('[data-test="backdrop"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+  })
+
+  it('emits update:modelValue false on close button click', async () => {
+    const wrapper = mountComponent({ modelValue: true })
+    await wrapper.find('[data-test="close-button"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+  })
+
+  it('shows close button by default', () => {
+    const wrapper = mountComponent({ modelValue: true })
+    expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
+  })
+
+  it('hides close button when showClose is false', () => {
+    const wrapper = mountComponent({ modelValue: true, showClose: false })
+    expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
+  })
+
+  it('close button renders mdi:close icon', () => {
+    const wrapper = mountComponent({ modelValue: true })
+    const icon = wrapper.findComponent(IconifyIcon)
+    expect(icon.props('icon')).toBe('mdi:close')
+  })
+
+  it('uses custom id when provided', () => {
+    const wrapper = mountComponent({ modelValue: true, id: 'my-drawer' })
+    expect(wrapper.find('.fixed').attributes('id')).toBe('my-drawer')
+  })
+
+  it('generates an id when not provided', () => {
+    const wrapper = mountComponent({ modelValue: true })
+    const id = wrapper.find('.fixed').attributes('id')
+    expect(id).toMatch(/^malio-drawer-/)
+  })
+
+  it('has role="dialog" and aria-modal on panel', () => {
+    const wrapper = mountComponent({ modelValue: true })
+    const panel = wrapper.find('[data-test="panel"]')
+    expect(panel.attributes('role')).toBe('dialog')
+    expect(panel.attributes('aria-modal')).toBe('true')
+  })
+
+  it('aria-labelledby links to title id', () => {
+    const wrapper = mountComponent({ modelValue: true, id: 'test-drawer' })
+    const panel = wrapper.find('[data-test="panel"]')
+    expect(panel.attributes('aria-labelledby')).toBe('test-drawer-title')
+    expect(wrapper.find('h2').attributes('id')).toBe('test-drawer-title')
+  })
+
+  it('applies drawerClass to the panel', () => {
+    const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-lg' })
+    const panel = wrapper.find('[data-test="panel"]')
+    expect(panel.classes()).toContain('max-w-lg')
+  })
+
+  it('works in uncontrolled mode', () => {
+    const wrapper = mountComponent()
+    // Without modelValue, defaults to closed
+    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
+  })
+
+  it('close button has aria-label "Fermer"', () => {
+    const wrapper = mountComponent({ modelValue: true })
+    expect(wrapper.find('[data-test="close-button"]').attributes('aria-label')).toBe('Fermer')
+  })
+})
--- a/app/components/malio/drawer/Drawer.vue
+++ b/app/components/malio/drawer/Drawer.vue
@@ -0,0 +1,139 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      name="drawer"
+      appear
+      @after-leave="isRendered = false"
+    >
+      <div
+        v-if="isRendered && isOpen"
+        :id="componentId"
+        class="fixed inset-0 z-50 flex justify-end"
+        v-bind="attrs"
+      >
+        <div
+          class="absolute inset-0 bg-black/40"
+          data-test="backdrop"
+          @click="close"
+        />
+
+        <div
+          :class="twMerge(
+            'relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl',
+            drawerClass,
+          )"
+          role="dialog"
+          :aria-modal="true"
+          :aria-labelledby="titleId"
+          data-test="panel"
+        >
+          <div class="flex items-center justify-between px-5 pb-8 pt-8">
+            <h2
+              :id="titleId"
+              class="text-[32px] font-semibold text-m-primary"
+            >
+              {{ title }}
+            </h2>
+            <button
+              v-if="showClose"
+              type="button"
+              aria-label="Fermer"
+              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
+              data-test="close-button"
+              @click="close"
+            >
+              <IconifyIcon
+                icon="mdi:close"
+                :width="24"
+                :height="24"
+              />
+            </button>
+          </div>
+
+          <div
+            class="flex-1 overflow-y-auto px-5"
+          >
+            <slot />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs, useId, watch } from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ name: 'MalioDrawer', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    modelValue?: boolean
+    title?: string
+    showClose?: boolean
+    drawerClass?: string
+  }>(),
+  {
+    id: '',
+    modelValue: undefined,
+    title: '',
+    showClose: true,
+    drawerClass: '',
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const componentId = computed(() => props.id || `malio-drawer-${generatedId}`)
+const titleId = computed(() => `${componentId.value}-title`)
+
+const isControlled = computed(() => props.modelValue !== undefined)
+const localValue = ref(false)
+
+const isOpen = computed(() =>
+  isControlled.value ? props.modelValue! : localValue.value,
+)
+
+const isRendered = ref(isOpen.value)
+
+watch(isOpen, (val) => {
+  if (val) isRendered.value = true
+})
+
+function close() {
+  if (!isControlled.value) {
+    localValue.value = false
+  }
+  emit('update:modelValue', false)
+}
+</script>
+
+<style scoped>
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.drawer-enter-active > div:last-child,
+.drawer-leave-active > div:last-child {
+  transition: transform 0.3s ease;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+
+.drawer-enter-from > div:last-child,
+.drawer-leave-to > div:last-child {
+  transform: translateX(100%);
+}
+</style>
--- a/app/components/malio/input/Input.test.ts
+++ b/app/components/malio/input/Input.test.ts
@@ -161,19 +161,19 @@ describe('MalioInputText', () => {
  it('shows error message without label and icon', () => {
    const wrapper = mountInput({error: 'Error message test'})

-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
  })

  it('shows error message with label and without icon', () => {
    const wrapper = mountInput({error: 'Error message test', label: 'Error message'})

-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
  })

  it('shows error message with label and icon', () => {
@@ -183,19 +183,19 @@ describe('MalioInputText', () => {
      iconName: 'mdi:key-outline',
    })

-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
  })

  it('shows error message with icon and without label', () => {
    const wrapper = mountInput({error: 'Error message test', iconName: 'mdi:key-outline'})

-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
  })

  it('shows success message without label and icon', () => {
@@ -240,10 +240,10 @@ describe('MalioInputText', () => {
      success: 'Success message test',
    })

-    expect(wrapper.find('p.text-m-error').exists()).toBe(true)
-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.find('p.text-m-danger').exists()).toBe(true)
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
    expect(wrapper.get('input').classes()).not.toContain('border-m-success')
  })

@@ -265,7 +265,7 @@ describe('MalioInputText', () => {
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('pointer-events-none')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('absolute')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('top-1/2')
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('-translate-y-1/2')
  })
@@ -277,7 +277,7 @@ describe('MalioInputText', () => {
      label: 'Password',
    })

-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
    expect(wrapper.get('input').classes()).toContain('!pl-11')
    expect(wrapper.get('label').classes()).toContain('left-8')
  })
--- a/app/components/malio/input/InputAmount.test.ts
+++ b/app/components/malio/input/InputAmount.test.ts
@@ -53,7 +53,7 @@ describe('MalioInputAmount', () => {

    expect(wrapper.get('[data-test="icon"]').exists()).toBe(true)
    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
  })

  it('generates an amount-specific id', () => {
@@ -87,7 +87,7 @@ describe('MalioInputAmount', () => {

    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
    expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
-    expect(wrapper.get('p.text-m-error').text()).toBe('Montant invalide')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Montant invalide')
  })

  it('keeps dots as the decimal separator on input', async () => {
@@ -156,7 +156,7 @@ describe('MalioInputAmount', () => {
      iconPosition: 'left',
    })

-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
    expect(wrapper.get('input').classes()).toContain('!pl-11')
    expect(wrapper.get('label').classes()).toContain('left-8')
  })
--- a/app/components/malio/input/InputAmount.vue
+++ b/app/components/malio/input/InputAmount.vue
@@ -40,7 +40,7 @@
      data-test="icon"
      :class="[
      hasError
-        ? 'text-m-error'
+        ? 'text-m-danger'
        : hasSuccess
          ? 'text-m-success' : iconColor,
      iconPositionClass,
@@ -53,7 +53,7 @@
    :id="`${inputId}-describedby`"
    :class="[
        hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success'
            : 'text-m-muted',
@@ -143,7 +143,7 @@ const mergedInputClass = computed(() =>
    isFilled.value ? 'border-black' : 'border-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
    hasError.value
-      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
      : hasSuccess.value
        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
        : 'focus:border-m-primary',
@@ -159,7 +159,7 @@ const mergedLabelClass = computed(() =>
    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
    hasError.value
-      ? 'text-m-error'
+      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
@@ -230,7 +230,7 @@ const focusPaddingClass = computed(() => {
 })

 const iconPositionClass = computed(() => {
-  const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
+  const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })
 </script>
--- a/app/components/malio/input/InputNumber.test.ts
+++ b/app/components/malio/input/InputNumber.test.ts
@@ -0,0 +1,165 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import InputNumber from './InputNumber.vue'
+
+type InputNumberProps = {
+  modelValue?: string | null
+  label?: string
+  readonly?: boolean
+  min?: number | string
+  max?: number | string
+}
+
+const InputNumberForTest = InputNumber as DefineComponent<InputNumberProps>
+
+const mountInputNumber = (props: InputNumberProps = {}) =>
+  mount(InputNumberForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioInputNumber', () => {
+  it('renders the input with a fixed 22px height', () => {
+    const wrapper = mountInputNumber()
+    const input = wrapper.get('input')
+
+    expect(input.classes()).toContain('h-[22px]')
+  })
+
+  it('renders the increment and decrement buttons with a fixed 20px height', () => {
+    const wrapper = mountInputNumber()
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons).toHaveLength(2)
+  })
+
+  it('still emits update:modelValue on input', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('99')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['99'])
+  })
+
+  it('filters letters from the input value', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('a1b2c3')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['123'])
+    expect(input.element.value).toBe('123')
+  })
+
+  it('formats large numbers with spaces in the input display', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('1000000')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1000000'])
+    expect(input.element.value).toBe('1 000 000')
+  })
+
+  it('accepts decimal values with commas', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('12,5')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.5'])
+    expect(input.element.value).toBe('12.5')
+  })
+
+  it('keeps a trailing decimal separator while typing', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('12,')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.'])
+    expect(input.element.value).toBe('12.')
+  })
+
+  it('accepts a decimal starting with a comma', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue(',5')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['0.5'])
+    expect(input.element.value).toBe('0.5')
+  })
+
+  it('increments the current value when clicking plus', async () => {
+    const wrapper = mountInputNumber({modelValue: '2'})
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['3'])
+  })
+
+  it('increments decimal values with a step of 1', async () => {
+    const wrapper = mountInputNumber({modelValue: '1.5'})
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['2.5'])
+  })
+
+  it('decrements the current value when clicking minus', async () => {
+    const wrapper = mountInputNumber({modelValue: '2'})
+
+    await wrapper.findAll('button')[0].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1'])
+  })
+
+  it('does not change the value from buttons when readonly', async () => {
+    const wrapper = mountInputNumber({modelValue: '2', readonly: true})
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('disables minus and prevents decrement at min', async () => {
+    const wrapper = mountInputNumber({modelValue: '2', min: 2})
+    const minusButton = wrapper.findAll('button')[0]
+
+    expect(minusButton.attributes('disabled')).toBeDefined()
+
+    await minusButton.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('disables plus and prevents increment at max', async () => {
+    const wrapper = mountInputNumber({modelValue: '2', max: 2})
+    const plusButton = wrapper.findAll('button')[1]
+
+    expect(plusButton.attributes('disabled')).toBeDefined()
+
+    await plusButton.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('clamps manual input to max', async () => {
+    const wrapper = mountInputNumber({modelValue: '', max: 5})
+    const input = wrapper.get('input')
+
+    await input.setValue('12')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['5'])
+    expect(input.element.value).toBe('5')
+  })
+})
--- a/app/components/malio/input/InputNumber.vue
+++ b/app/components/malio/input/InputNumber.vue
@@ -0,0 +1,303 @@
+<template>
+  <div :class="mergedGroupClass" >
+    <label
+      v-if="label"
+      :for="inputId"
+      :class="mergedLabelClass"
+    >
+      {{ label }}
+    </label>
+    <button
+      type="button"
+      :disabled="isMinusDisabled"
+      @click="decrement"
+    >
+      <IconifyIcon
+        icon="mdi:minus"
+        :class="mergedButtonMinusClass"
+      />
+    </button>
+    <input
+      :id="inputId"
+      :name="name"
+      autocomplete="off"
+      :class="mergedInputClass"
+      :style="inputWidthStyle"
+      :value="displayedValue"
+      :required="required"
+      :disabled="disabled"
+      :readonly="readonly"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      v-bind="attrs"
+      type="text"
+      inputmode="numeric"
+      placeholder="_"
+      @input="onInput"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    >
+    <button
+      type="button"
+      :disabled="isPlusDisabled"
+      @click="increment"
+    >
+      <IconifyIcon
+        icon="mdi:plus"
+        :class="mergedButtonPlusClass"
+      />
+    </button>
+
+  </div>
+  <p
+    v-if="hint || hasError || hasSuccess"
+    :id="`${inputId}-describedby`"
+    :class="[
+        hasError
+          ? 'text-m-danger'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'text-xs ml-[2px] ',
+      ]"
+  >
+    {{ hint || error || success }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useAttrs, useId} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioInputNumber', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    modelValue?: string | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    required?: boolean
+    min?: number | string
+    max?: number | string
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    modelValue: undefined,
+    label: '',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    min: undefined,
+    max: undefined,
+    readonly: false,
+    disabled: false,
+    hint: '',
+    error: '',
+    success: '',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const localValue = ref('')
+const isFocused = ref(false)
+
+const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success)
+
+// Ajoute un separateur de milliers pour l'affichage dans le champ.
+const formatDisplayValue = (value: string) => {
+  if (!value) return ''
+  const [integerPart = '', decimalPart] = value.split('.')
+  const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+
+  if (decimalPart !== undefined) {
+    return `${formattedIntegerPart}.${decimalPart}`
+  }
+
+  return formattedIntegerPart
+}
+
+// Valeur visible dans l'input, avec formatage des milliers.
+const displayedValue = computed(() => formatDisplayValue(currentValue.value))
+const inputCharacterWidth = computed(() => Math.max(displayedValue.value.length, 1))
+
+// Transforme min/max en nombres utilisables.
+const parseBound = (value: number | string | undefined) => {
+  if (value === undefined || value === '') return undefined
+  const parsedValue = Number.parseFloat(String(value).replace(',', '.'))
+  return Number.isNaN(parsedValue) ? undefined : parsedValue
+}
+
+const minValue = computed(() => parseBound(props.min))
+const maxValue = computed(() => parseBound(props.max))
+
+// Recupere la valeur numerique brute actuellement saisie.
+const currentNumericValue = computed(() => {
+  if (currentValue.value === '') return undefined
+  const parsedValue = Number.parseFloat(currentValue.value)
+  return Number.isNaN(parsedValue) ? undefined : parsedValue
+})
+
+const inputWidthStyle = computed(() => ({
+  width: `calc(${inputCharacterWidth.value}ch + 30px)`,
+  maxWidth: '100%',
+}))
+
+const isMinusDisabled = computed(() =>
+  props.disabled || currentNumericValue.value <= minValue.value,
+)
+
+const isPlusDisabled = computed(() =>
+  props.disabled || currentNumericValue.value >= maxValue.value,
+
+)
+
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'relative mt-4 flex h-12 w-full items-center',
+    props.groupClass,
+  ),
+)
+
+const mergedInputClass = computed(() =>
+  twMerge(
+    ' peer h-[22px] min-w-0 border bg-white text-center outline-none placeholder:text-transparent text-lg border-x-0 border-black',
+    props.disabled ? 'cursor-not-allowed text-black/60' : 'cursor-text',
+    hasError.value
+      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
+      : hasSuccess.value
+        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+        : '',
+    props.inputClass,
+  ),
+)
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'cursor-pointer text-black mr-4 text-[18px]',
+    hasError.value ? 'text-m-danger' : '',
+    hasSuccess.value ? 'text-m-success' : '',
+    props.disabled ? 'cursor-not-allowed text-black/60' : '',
+    props.labelClass,
+  ),
+)
+
+const mergedButtonMinusClass = computed(() =>
+  twMerge(
+    'h-[22px] w-[40px] border border-black rounded-s-[3px]',
+    isMinusDisabled.value ? 'cursor-not-allowed text-black/60' : 'cursor-pointer',
+    hasError.value
+      ? 'border-m-danger'
+      : hasSuccess.value
+        ? 'border-m-success'
+        : '',
+  ),
+)
+
+const mergedButtonPlusClass = computed(() =>
+  twMerge(
+    'h-[22px] w-[40px] border border-black rounded-e-[3px]',
+    isPlusDisabled.value ? 'cursor-not-allowed text-black/60' : 'cursor-pointer',
+    hasError.value
+      ? 'border-m-danger'
+      : hasSuccess.value
+        ? 'border-m-success'
+        : '',
+  ),
+)
+
+const describedBy = computed(() => {
+  const ids: string[] = []
+  if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
+  if (hasError.value) ids.push(`${inputId.value}-error`)
+  if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
+  return ids.length ? ids.join(' ') : undefined
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+// Met a jour l'etat local si besoin puis emet la valeur brute.
+const updateValue = (value: string) => {
+  if (!isControlled.value) {
+    localValue.value = value
+  }
+  emit('update:modelValue', value)
+}
+
+// Force la valeur a rester entre les bornes min et max.
+const clampValue = (value: number) => {
+  if (minValue.value !== undefined && value < minValue.value) return minValue.value
+  if (maxValue.value !== undefined && value > maxValue.value) return maxValue.value
+  return value
+}
+
+// Garde uniquement les chiffres et la virgule puis applique les bornes.
+const normalizeValue = (value: string) => {
+  const sanitizedValue = value
+    .replace(/[^\d,.]/g, '')
+    .replace(/,/g, '.')
+
+  const [integerPart = '', ...decimalParts] = sanitizedValue.split('.')
+  const decimalPart = decimalParts.join('')
+  const hasDecimalSeparator = sanitizedValue.includes('.')
+
+  if (hasDecimalSeparator) {
+    const normalizedValue = `${integerPart || '0'}.${decimalPart}`
+    const parsedValue = Number.parseFloat(normalizedValue)
+
+    if (Number.isNaN(parsedValue)) return ''
+
+    const clampedValue = clampValue(parsedValue)
+    if (clampedValue !== parsedValue) return String(clampedValue)
+
+    return decimalPart === '' ? `${integerPart || '0'}.` : normalizedValue
+  }
+
+  return integerPart === '' ? '' : String(clampValue(Number.parseFloat(integerPart)))
+}
+
+// Reformate l'affichage dans le champ tout en conservant une valeur brute pour le v-model.
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const normalizedValue = normalizeValue(target.value)
+
+  target.value = formatDisplayValue(normalizedValue)
+  updateValue(normalizedValue)
+}
+
+// Retourne la valeur numerique courante, ou 0 si le champ est vide.
+const getNumericValue = () => {
+  const parsedValue = Number.parseFloat(currentValue.value || '0')
+  return Number.isNaN(parsedValue) ? 0 : parsedValue
+}
+
+// Retire 1 a la valeur si l'action est autorisee.
+const decrement = () => {
+  if (props.disabled || props.readonly || isMinusDisabled.value) return
+  updateValue(String(clampValue(getNumericValue() - 1)))
+}
+
+// Ajoute 1 a la valeur si l'action est autorisee.
+const increment = () => {
+  if (props.disabled || props.readonly || isPlusDisabled.value) return
+  updateValue(String(clampValue(getNumericValue() + 1)))
+}
+</script>
--- a/app/components/malio/input/InputPassword.test.ts
+++ b/app/components/malio/input/InputPassword.test.ts
@@ -0,0 +1,174 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import InputPassword from './InputPassword.vue'
+
+type InputPasswordProps = {
+  id?: string
+  label?: string
+  name?: string
+  autocomplete?: string
+  modelValue?: string | null
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  required?: boolean
+  maxLength?: number | string
+  minLength?: number | string
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  displayIcon?: boolean
+}
+
+const InputPasswordForTest = InputPassword as DefineComponent<InputPasswordProps>
+
+const mountComponent = (props: InputPasswordProps = {}) =>
+  mount(InputPasswordForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioInputPassword', () => {
+  it('renders the initial input value', () => {
+    const wrapper = mountComponent({modelValue: 'secret123'})
+
+    expect(wrapper.get('input').element.value).toBe('secret123')
+  })
+
+  it('renders the label text', () => {
+    const wrapper = mountComponent({label: 'Mot de passe'})
+
+    expect(wrapper.get('label').text()).toBe('Mot de passe')
+  })
+
+  it('has type password by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('input').attributes('type')).toBe('password')
+  })
+
+  it('toggles to type text when icon is clicked', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('[data-test="icon"]').trigger('click')
+
+    expect(wrapper.get('input').attributes('type')).toBe('text')
+  })
+
+  it('toggles back to password on second click', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('[data-test="icon"]').trigger('click')
+    await wrapper.get('[data-test="icon"]').trigger('click')
+
+    expect(wrapper.get('input').attributes('type')).toBe('password')
+  })
+
+  it('does not render icon when displayIcon is false', () => {
+    const wrapper = mountComponent({displayIcon: false})
+
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
+  })
+
+  it('renders icon by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
+  })
+
+  it('shows eye-off-outline icon when password is hidden', () => {
+    const wrapper = mountComponent()
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:eye-off-outline')
+  })
+
+  it('shows eye-outline icon when password is visible', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('[data-test="icon"]').trigger('click')
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:eye-outline')
+  })
+
+  it('emits update:modelValue on input change', async () => {
+    const wrapper = mountComponent({modelValue: ''})
+
+    await wrapper.get('input').setValue('new password')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new password'])
+  })
+
+  it('sets disabled styles when true', () => {
+    const wrapper = mountComponent({disabled: true})
+
+    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
+  })
+
+  it('sets readonly when true', () => {
+    const wrapper = mountComponent({readonly: true})
+
+    expect(wrapper.get('input').attributes('readonly')).toBeDefined()
+  })
+
+  it('shows error message and styles', () => {
+    const wrapper = mountComponent({error: 'Mot de passe requis'})
+
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Mot de passe requis')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
+    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
+  })
+
+  it('shows error style on icon', () => {
+    const wrapper = mountComponent({error: 'Error'})
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
+  })
+
+  it('shows success message and styles', () => {
+    const wrapper = mountComponent({success: 'Mot de passe valide'})
+
+    expect(wrapper.get('p.text-m-success').text()).toBe('Mot de passe valide')
+    expect(wrapper.get('input').classes()).toContain('border-m-success')
+  })
+
+  it('shows success style on icon', () => {
+    const wrapper = mountComponent({success: 'Success'})
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
+  })
+
+  it('links label to input via for/id', () => {
+    const wrapper = mountComponent({id: 'pwd', label: 'Password'})
+
+    expect(wrapper.get('input').attributes('id')).toBe('pwd')
+    expect(wrapper.get('label').attributes('for')).toBe('pwd')
+  })
+
+  it('generates an id when missing and reuses it on label', () => {
+    const wrapper = mountComponent({label: 'Password'})
+
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(inputId?.startsWith('malio-input-password-')).toBe(true)
+    expect(wrapper.get('label').attributes('for')).toBe(inputId)
+  })
+
+  it('aria-invalid is false when no error', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
+  })
+})
--- a/app/components/malio/input/InputPassword.vue
+++ b/app/components/malio/input/InputPassword.vue
@@ -0,0 +1,209 @@
+<template>
+  <div
+    :class="mergedGroupClass"
+  >
+    <input
+      :id="inputId"
+      :name="name"
+      :autocomplete="autocomplete"
+      :class="mergedInputClass"
+      :required="required"
+      :maxlength="maxLength"
+      :minlength="minLength"
+      :disabled="disabled"
+      :value="currentValue"
+      :readonly="readonly"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      v-bind="attrs"
+      placeholder="_"
+      :type="isPasswordVisible ? 'text' : 'password'"
+      @input="onInput"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    >
+
+    <label
+      v-if="label"
+      :for="inputId"
+      :class="mergedLabelClass"
+    >
+      {{ label }}
+    </label>
+
+    <IconifyIcon
+      v-if="displayIcon"
+      :icon="isPasswordVisible ? 'mdi:eye-outline' : 'mdi:eye-off-outline'"
+      :width="24"
+      :height="24"
+      data-test="icon"
+      :class="[
+      hasError
+        ? 'text-m-danger'
+        : hasSuccess
+          ? 'text-m-success' : 'text-m-muted',
+      'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
+    ]"
+      @click="toggleVisibility"
+    />
+
+  </div>
+  <p
+    v-if="hint || hasError || hasSuccess"
+    :id="`${inputId}-describedby`"
+    :class="[
+        hasError
+          ? 'text-m-danger'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 text-xs ml-[2px] ',
+      ]"
+  >
+    {{ hint || error || success }}
+  </p>
+</template>
+
+<script setup lang="ts">
+
+import {computed, ref, useAttrs, useId} from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioInputPassword', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    autocomplete?: string
+    modelValue?: string | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    required?: boolean
+    maxLength?: number | string
+    minLength?: number | string
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    displayIcon?: boolean
+  }>(),
+  {
+    id: '',
+    name: '',
+    autocomplete: 'off',
+    modelValue: undefined,
+    label: '',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    maxLength: undefined,
+    minLength: undefined,
+    readonly: false,
+    disabled: false,
+    hint: '',
+    error: '',
+    success: '',
+    displayIcon: true,
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const localValue = ref('')
+const isFocused = ref(false)
+const isPasswordVisible = ref(false)
+
+const toggleVisibility = () => {
+  isPasswordVisible.value = !isPasswordVisible.value
+}
+
+const inputId = computed(() => props.id?.toString() || `malio-input-password-${generatedId}`)
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success)
+const isFilled = computed(() => currentValue.value.trim().length > 0)
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'relative mt-4 flex h-12 w-full items-center',
+    props.groupClass,
+  ),
+)
+const mergedInputClass = computed(() =>
+  twMerge(
+    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 text-lg rounded-md',
+    isFilled.value ? 'border-black' : 'border-m-muted',
+    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
+    hasError.value
+      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
+      : hasSuccess.value
+        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+        : 'focus:border-m-primary',
+    props.displayIcon ? '!pr-10' : '',
+    'focus:pl-[11px]',
+    props.inputClass,
+  ),
+)
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
+    'left-3',
+    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
+    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
+    hasError.value
+      ? 'text-m-danger'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+    props.labelClass,
+  ),
+)
+
+const describedBy = computed(() => {
+  const ids: string[] = []
+  if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
+  if (hasError.value) ids.push(`${inputId.value}-error`)
+  if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
+  return ids.length ? ids.join(' ') : undefined
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (!isControlled.value) {
+    localValue.value = target.value
+  }
+  emit('update:modelValue', target.value)
+}
+
+const disabled = computed(() => props.disabled)
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+
+.grow-height {
+  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
+}
+
+.grow-height:focus {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .grow-height { transition: none; }
+}
+</style>
--- a/app/components/malio/input/InputText.vue
+++ b/app/components/malio/input/InputText.vue
@@ -40,7 +40,7 @@
      data-test="icon"
      :class="[
      hasError
-        ? 'text-m-error'
+        ? 'text-m-danger'
        : hasSuccess
          ? 'text-m-success' : iconColor,
      iconPositionClass,
@@ -53,7 +53,7 @@
    :id="`${inputId}-describedby`"
    :class="[
        hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success'
            : 'text-m-muted',
@@ -148,7 +148,7 @@ const mergedInputClass = computed(() =>
    isFilled.value ? 'border-black' : 'border-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
    hasError.value
-      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
      : hasSuccess.value
        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
        : 'focus:border-m-primary',
@@ -164,7 +164,7 @@ const mergedLabelClass = computed(() =>
    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
    hasError.value
-      ? 'text-m-error'
+      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
@@ -210,7 +210,7 @@ const focusPaddingClass = computed(() => {
 })

 const iconPositionClass = computed(() => {
-  const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
+  const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })
 </script>
--- a/app/components/malio/input/InputTextArea.test.ts
+++ b/app/components/malio/input/InputTextArea.test.ts
@@ -118,9 +118,9 @@ describe('MalioInputTextArea', () => {
      },
    })

-    expect(wrapper.get('textarea').classes()).toContain('border-m-error')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
+    expect(wrapper.get('textarea').classes()).toContain('border-m-danger')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error')
    expect(wrapper.get('textarea').attributes('aria-invalid')).toBe('true')
  })

@@ -145,8 +145,8 @@ describe('MalioInputTextArea', () => {
      },
    })

-    expect(wrapper.get('textarea').classes()).toContain('border-m-error')
+    expect(wrapper.get('textarea').classes()).toContain('border-m-danger')
    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
-    expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error')
  })
 })
--- a/app/components/malio/input/InputTextArea.vue
+++ b/app/components/malio/input/InputTextArea.vue
@@ -12,7 +12,7 @@
      isFilled ? 'border-black' : 'border-m-muted',
      disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
      hasError
-        ? 'border-m-error focus:border-m-error focus:pl-[11px]'
+        ? 'border-m-danger focus:border-m-danger focus:pl-[11px]'
        : hasSuccess
          ? 'border-m-success focus:border-m-success focus:pl-[11px]'
          : 'focus:border-m-primary focus:pl-[11px]',
@@ -43,7 +43,7 @@
    shouldFloatLabel ? '-translate-y-[1.30rem] scale-90' : '',
    disabled ? 'text-black/60' : '',
    hasError
-      ? 'text-m-error'
+      ? 'text-m-danger'
      : hasSuccess
        ? 'text-m-success'
        : isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
@@ -67,7 +67,7 @@
      :id="`${inputId}-describedby`"
      :class="[
        hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success'
            : 'text-m-muted',
--- a/app/components/malio/input/InputUpload.test.ts
+++ b/app/components/malio/input/InputUpload.test.ts
@@ -0,0 +1,175 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import InputUpload from './InputUpload.vue'
+
+type InputUploadProps = {
+  id?: string
+  label?: string
+  modelValue?: string | null
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  disabled?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  displayIcon?: boolean
+  accept?: string
+}
+
+const InputUploadForTest = InputUpload as DefineComponent<InputUploadProps>
+
+const mountComponent = (props: InputUploadProps = {}) =>
+  mount(InputUploadForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioInputUpload', () => {
+  it('renders the initial display value', () => {
+    const wrapper = mountComponent({modelValue: 'document.pdf'})
+
+    expect(wrapper.get('input[type="text"]').element.value).toBe('document.pdf')
+  })
+
+  it('renders the label text', () => {
+    const wrapper = mountComponent({label: 'Téléverser un fichier'})
+
+    expect(wrapper.get('label').text()).toBe('Téléverser un fichier')
+  })
+
+  it('has a hidden file input', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('input[type="file"]').exists()).toBe(true)
+    expect(wrapper.find('input[type="file"]').classes()).toContain('hidden')
+  })
+
+  it('text input is readonly', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('input[type="text"]').attributes('readonly')).toBeDefined()
+  })
+
+  it('renders icon by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
+  })
+
+  it('does not render icon when displayIcon is false', () => {
+    const wrapper = mountComponent({displayIcon: false})
+
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
+  })
+
+  it('shows the correct upload icon', () => {
+    const wrapper = mountComponent()
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:cloud-arrow-up-outline')
+  })
+
+  it('emits update:modelValue when a file is selected', async () => {
+    const wrapper = mountComponent({modelValue: ''})
+    const fileInput = wrapper.find('input[type="file"]')
+    const file = new File(['content'], 'test.pdf', {type: 'application/pdf'})
+
+    Object.defineProperty(fileInput.element, 'files', {
+      value: [file],
+    })
+    await fileInput.trigger('change')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test.pdf'])
+  })
+
+  it('emits file-selected with the File object when a file is selected', async () => {
+    const wrapper = mountComponent({modelValue: ''})
+    const fileInput = wrapper.find('input[type="file"]')
+    const file = new File(['content'], 'test.pdf', {type: 'application/pdf'})
+
+    Object.defineProperty(fileInput.element, 'files', {
+      value: [file],
+    })
+    await fileInput.trigger('change')
+
+    expect(wrapper.emitted('file-selected')?.[0]).toEqual([file])
+  })
+
+  it('sets disabled on both inputs when disabled is true', () => {
+    const wrapper = mountComponent({disabled: true})
+
+    expect(wrapper.get('input[type="text"]').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('input[type="file"]').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('input[type="text"]').classes()).toContain('cursor-not-allowed')
+  })
+
+  it('shows error message and styles', () => {
+    const wrapper = mountComponent({error: 'Fichier requis'})
+
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Fichier requis')
+    expect(wrapper.get('input[type="text"]').classes()).toContain('border-m-danger')
+    expect(wrapper.get('input[type="text"]').attributes('aria-invalid')).toBe('true')
+  })
+
+  it('shows error style on icon', () => {
+    const wrapper = mountComponent({error: 'Error'})
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
+  })
+
+  it('shows success message and styles', () => {
+    const wrapper = mountComponent({success: 'Fichier valide'})
+
+    expect(wrapper.get('p.text-m-success').text()).toBe('Fichier valide')
+    expect(wrapper.get('input[type="text"]').classes()).toContain('border-m-success')
+  })
+
+  it('shows success style on icon', () => {
+    const wrapper = mountComponent({success: 'Success'})
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
+  })
+
+  it('shows hint message', () => {
+    const wrapper = mountComponent({hint: 'PDF uniquement'})
+
+    expect(wrapper.get('p.text-m-muted').text()).toBe('PDF uniquement')
+  })
+
+  it('links label to input via for/id', () => {
+    const wrapper = mountComponent({id: 'upload', label: 'Fichier'})
+
+    expect(wrapper.get('input[type="text"]').attributes('id')).toBe('upload')
+    expect(wrapper.get('label').attributes('for')).toBe('upload')
+  })
+
+  it('generates an id when missing and reuses it on label', () => {
+    const wrapper = mountComponent({label: 'Fichier'})
+
+    const inputId = wrapper.get('input[type="text"]').attributes('id')
+
+    expect(inputId?.startsWith('malio-input-upload-')).toBe(true)
+    expect(wrapper.get('label').attributes('for')).toBe(inputId)
+  })
+
+  it('aria-invalid is false when no error', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('input[type="text"]').attributes('aria-invalid')).toBe('false')
+  })
+
+  it('passes accept attribute to file input', () => {
+    const wrapper = mountComponent({accept: '.pdf,.doc'})
+
+    expect(wrapper.get('input[type="file"]').attributes('accept')).toBe('.pdf,.doc')
+  })
+})
--- a/app/components/malio/input/InputUpload.vue
+++ b/app/components/malio/input/InputUpload.vue
@@ -0,0 +1,209 @@
+<template>
+  <div
+    :class="mergedGroupClass"
+  >
+    <input
+      ref="fileInputRef"
+      type="file"
+      :accept="accept"
+      class="hidden"
+      :disabled="disabled"
+      @change="onFileChange"
+    >
+
+    <input
+      :id="inputId"
+      :class="mergedInputClass"
+      :disabled="disabled"
+      :value="currentDisplayValue"
+      :readonly="true"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      v-bind="attrs"
+      placeholder="_"
+      type="text"
+      @click="openFilePicker"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    >
+
+    <label
+      v-if="label"
+      :for="inputId"
+      :class="mergedLabelClass"
+    >
+      {{ label }}
+    </label>
+
+    <IconifyIcon
+      v-if="displayIcon"
+      icon="mdi:cloud-arrow-up-outline"
+      :width="24"
+      :height="24"
+      data-test="icon"
+      :class="[
+      hasError
+        ? 'text-m-danger'
+        : hasSuccess
+          ? 'text-m-success' : 'text-m-muted',
+      'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
+    ]"
+    />
+
+  </div>
+  <p
+    v-if="hint || hasError || hasSuccess"
+    :id="`${inputId}-describedby`"
+    :class="[
+        hasError
+          ? 'text-m-danger'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 text-xs ml-[2px] ',
+      ]"
+  >
+    {{ hint || error || success }}
+  </p>
+</template>
+
+<script setup lang="ts">
+
+import {computed, ref, useAttrs, useId} from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioInputUpload', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    modelValue?: string | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    disabled?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    displayIcon?: boolean
+    accept?: string
+  }>(),
+  {
+    id: '',
+    modelValue: undefined,
+    label: '',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    disabled: false,
+    hint: '',
+    error: '',
+    success: '',
+    displayIcon: true,
+    accept: '',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const localValue = ref('')
+const isFocused = ref(false)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+const inputId = computed(() => props.id?.toString() || `malio-input-upload-${generatedId}`)
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentDisplayValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const shouldFloatLabel = computed(() => isFocused.value || currentDisplayValue.value.length > 0)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success)
+const isFilled = computed(() => currentDisplayValue.value.trim().length > 0)
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'relative mt-4 flex h-12 w-full items-center',
+    props.groupClass,
+  ),
+)
+const mergedInputClass = computed(() =>
+  twMerge(
+    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 text-lg rounded-md',
+    isFilled.value ? 'border-black' : 'border-m-muted',
+    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-pointer',
+    hasError.value
+      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
+      : hasSuccess.value
+        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+        : 'focus:border-m-primary',
+    props.displayIcon ? '!pr-10' : '',
+    'focus:pl-[11px]',
+    props.inputClass,
+  ),
+)
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
+    'left-3',
+    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
+    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
+    hasError.value
+      ? 'text-m-danger'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+    props.labelClass,
+  ),
+)
+
+const describedBy = computed(() => {
+  const ids: string[] = []
+  if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
+  if (hasError.value) ids.push(`${inputId.value}-error`)
+  if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
+  return ids.length ? ids.join(' ') : undefined
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+  (event: 'file-selected', file: File): void
+}>()
+
+const openFilePicker = () => {
+  if (props.disabled) return
+  fileInputRef.value?.click()
+}
+
+const onFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (file) {
+    const fileName = file.name
+    if (!isControlled.value) {
+      localValue.value = fileName
+    }
+    emit('update:modelValue', fileName)
+    emit('file-selected', file)
+  }
+}
+
+const disabled = computed(() => props.disabled)
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+
+.grow-height {
+  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
+}
+
+.grow-height:focus {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .grow-height { transition: none; }
+}
+</style>
--- a/app/components/malio/radio/RadioButton.test.ts
+++ b/app/components/malio/radio/RadioButton.test.ts
@@ -112,8 +112,8 @@ describe('MalioRadioButton', () => {
    })

    expect(wrapper.get('.radio-control').classes()).toContain('is-error')
-    expect(wrapper.get('.radio-text').classes()).toContain('text-m-error')
-    expect(wrapper.get('.radio-message').classes()).toContain('text-m-error')
+    expect(wrapper.get('.radio-text').classes()).toContain('text-m-danger')
+    expect(wrapper.get('.radio-message').classes()).toContain('text-m-danger')
    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
  })

@@ -137,7 +137,7 @@ describe('MalioRadioButton', () => {
    expect(wrapper.get('.radio-control').classes()).toContain('is-error')
    expect(wrapper.get('.radio-control').classes()).not.toContain('is-success')
    expect(wrapper.get('.radio-message').text()).toBe('Selection required')
-    expect(wrapper.get('.radio-message').classes()).toContain('text-m-error')
+    expect(wrapper.get('.radio-message').classes()).toContain('text-m-danger')
  })

  it('merges custom classes on group, input and label', () => {
--- a/app/components/malio/radio/RadioButton.vue
+++ b/app/components/malio/radio/RadioButton.vue
@@ -125,7 +125,7 @@ const mergedInputClass = computed(() =>
 const mergedLabelClass = computed(() =>
  twMerge(
    'radio-text mt-px cursor-pointer text-black',
-    hasError.value ? 'text-m-error' : '',
+    hasError.value ? 'text-m-danger' : '',
    hasSuccess.value ? 'text-m-success' : '',
    disabled.value ? 'cursor-not-allowed text-black/60' : '',
    props.labelClass,
@@ -136,7 +136,7 @@ const mergedMessageClass = computed(() =>
  twMerge(
    'radio-message ml-3 -mt-1 text-xs',
    hasError.value
-      ? 'text-m-error'
+      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'text-m-muted',
@@ -170,11 +170,11 @@ const onChange = (event: Event) => {
 }

 .radio-control.is-error input[type='radio'] {
-  border-color: rgb(var(--m-error) / 1);
+  border-color: rgb(var(--m-danger) / 1);
 }

 .radio-control.is-error .radio-dot {
-  color: rgb(var(--m-error) / 1);
+  color: rgb(var(--m-danger) / 1);
 }

 .radio-control.is-success input[type='radio'] {
--- a/app/components/malio/select/Select.test.ts
+++ b/app/components/malio/select/Select.test.ts
@@ -139,9 +139,9 @@ describe('MalioSelect', () => {
      },
    })

-    expect(wrapper.get('button').classes()).toContain('border-m-error')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('p.text-m-error').text()).toBe('Selection error')
+    expect(wrapper.get('button').classes()).toContain('border-m-danger')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error')
    expect(wrapper.get('button').attributes('aria-invalid')).toBe('true')
  })

@@ -170,8 +170,8 @@ describe('MalioSelect', () => {
      },
    })

-    expect(wrapper.get('button').classes()).toContain('border-m-error')
+    expect(wrapper.get('button').classes()).toContain('border-m-danger')
    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
-    expect(wrapper.get('p.text-m-error').text()).toBe('Selection error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error')
  })
 })
--- a/app/components/malio/select/Select.vue
+++ b/app/components/malio/select/Select.vue
@@ -1,8 +1,7 @@
 <template>
  <div
    ref="root"
-    class="relative mt-4 w-full"
-    :class="[minWidth, maxWidth]"
+    :class="mergedGroupClass"
  >
    <button
      :id="buttonId"
@@ -12,9 +11,9 @@
          hasError
            ? isOpen
              ? openDirection === 'down'
-                ? 'rounded-b-none !border-2 !border-m-error !border-b-0'
-                : 'rounded-t-none !border-2 !border-m-error !border-t-0'
-              : 'border-m-error'
+                ? 'rounded-b-none !border-2 !border-m-danger !border-b-0'
+                : 'rounded-t-none !border-2 !border-m-danger !border-t-0'
+              : 'border-m-danger'
            : hasSuccess
              ? isOpen
                ? openDirection === 'down'
@@ -46,7 +45,7 @@
        :class="[
          isOpen ? 'top-2  z-30' : 'top-2',
          hasError
-            ? 'text-m-error'
+            ? 'text-m-danger'
            : hasSuccess
              ? 'text-m-success'
              : isOpen
@@ -75,7 +74,7 @@
        class="absolute right-3 top-1/2 -translate-y-1/2"
        :class="[
          hasError
-            ? 'text-m-error'
+            ? 'text-m-danger'
            : hasSuccess
              ? 'text-m-success'
              : 'text-current'
@@ -109,7 +108,7 @@
            ? 'select-scrollbar-success'
            : 'select-scrollbar-primary',
        hasError
-          ? 'border-m-error'
+          ? 'border-m-danger'
          : hasSuccess
            ? 'border-m-success'
            : 'border-m-primary'
@@ -140,7 +139,7 @@
    :id="`${buttonId}-describedby`"
    :class="[
      hasError
-        ? 'text-m-error'
+        ? 'text-m-danger'
        : hasSuccess
          ? 'text-m-success'
          : 'text-m-muted',
@@ -154,6 +153,7 @@
 <script setup lang="ts">
 import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'

 defineOptions({name: 'MalioSelect', inheritAttrs: false})

@@ -176,6 +176,7 @@ const props = withDefaults(defineProps<{
  textLabel?: string
  rounded?: string
  disabled?: boolean
+  groupClass?: string
 }>(), {
  options: () => [],
  emptyOptionLabel: '',
@@ -190,6 +191,7 @@ const props = withDefaults(defineProps<{
  textLabel: 'text-sm',
  rounded: 'rounded-md',
  disabled: false,
+  groupClass: '',
 })

 const emit = defineEmits<{
@@ -208,6 +210,9 @@ const normalizedOptions = computed<Option[]>(() => [
  {label: props.emptyOptionLabel, value: null},
  ...props.options,
 ])
+const mergedGroupClass = computed(() =>
+  twMerge('relative mt-4 w-full', props.minWidth, props.maxWidth, props.groupClass),
+)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const isOptionSelected = computed(() =>
@@ -315,7 +320,6 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))

 :deep(ul[role="listbox"]) {
  scrollbar-width: auto;
-  scrollbar-gutter: stable;
 }

 :deep(.select-scrollbar-primary) {
--- a/app/components/malio/select/SelectCheckbox.test.ts
+++ b/app/components/malio/select/SelectCheckbox.test.ts
@@ -0,0 +1,178 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import SelectCheckbox from './SelectCheckbox.vue'
+
+type Option = {
+  label: string
+  value: string | number
+}
+
+type SelectCheckboxProps = {
+  modelValue: Array<string | number>
+  options?: Option[]
+  emptyOptionLabel?: string
+  label?: string
+  hint?: string
+  error?: string
+  success?: string
+  minWidth?: string
+  maxWidth?: string
+  textField?: string
+  textValue?: string
+  textLabel?: string
+  rounded?: string
+  displayTag?: boolean
+  displaySelectAll?: boolean
+  selectAllLabel?: string
+  disabled?: boolean
+}
+
+const SelectCheckboxForTest = SelectCheckbox as DefineComponent<SelectCheckboxProps>
+
+const options: Option[] = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Canada', value: 'ca'},
+]
+
+describe('MalioSelectCheckbox', () => {
+  it('renders checkbox inputs for options', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    expect(checkboxes).toHaveLength(options.length)
+  })
+
+  it('emits an array with the toggled option value', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr'], options},
+    })
+
+    await wrapper.get('button').trigger('click')
+    const checkboxInputs = wrapper.findAll('input[type="checkbox"]')
+    await checkboxInputs[1].setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['fr', 'be']])
+  })
+
+  it('shows the selected count over the total count in the trigger', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr', 'ca'], options},
+    })
+
+    expect(wrapper.text()).toContain('2/3')
+  })
+
+  it('shows 0 over the total count when nothing is selected', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    expect(wrapper.text()).toContain('0/3')
+  })
+
+  it('hides the summary when displayTag is enabled and options are selected', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr', 'ca'], options, displayTag: true},
+    })
+
+    expect(wrapper.text()).not.toContain('2/3')
+    expect(wrapper.text()).toContain('France')
+    expect(wrapper.text()).toContain('Canada')
+  })
+
+  it('hides the summary when displayTag is enabled and nothing is selected', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, displayTag: true, emptyOptionLabel: 'Aucune selection'},
+    })
+
+    expect(wrapper.text()).not.toContain('0/3')
+    expect(wrapper.text()).toContain('Aucune selection')
+  })
+
+  it('does not show select all checkbox by default', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    expect(checkboxes).toHaveLength(options.length)
+  })
+
+  it('shows select all checkbox when displaySelectAll is true', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, displaySelectAll: true},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    expect(checkboxes).toHaveLength(options.length + 1)
+    expect(wrapper.text()).toContain('Tout sélectionner')
+  })
+
+  it('shows custom select all label', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, displaySelectAll: true, selectAllLabel: 'Sélectionner tout'},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.text()).toContain('Sélectionner tout')
+  })
+
+  it('emits all values when select all is clicked and none selected', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, displaySelectAll: true},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    await checkboxes[0].setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['fr', 'be', 'ca']])
+  })
+
+  it('emits empty array when select all is clicked and all selected', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr', 'be', 'ca'], options, displaySelectAll: true},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    await checkboxes[0].setValue(false)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+  })
+
+  it('select all checkbox is checked when all options are selected', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr', 'be', 'ca'], options, displaySelectAll: true},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    expect((checkboxes[0].element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('select all checkbox is unchecked when not all options are selected', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr'], options, displaySelectAll: true},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    expect((checkboxes[0].element as HTMLInputElement).checked).toBe(false)
+  })
+})
--- a/app/components/malio/select/SelectCheckbox.vue
+++ b/app/components/malio/select/SelectCheckbox.vue
@@ -0,0 +1,410 @@
+<template>
+  <div
+    ref="root"
+    class="relative mt-4 w-full"
+    :class="[minWidth, maxWidth]"
+  >
+    <button
+      :id="buttonId"
+      type="button"
+      class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-2 focus-visible:border-m-primary"
+      :class="[
+          hasError
+            ? isOpen
+              ? openDirection === 'down'
+                ? 'rounded-b-none !border-2 !border-m-danger !border-b-0'
+                : 'rounded-t-none !border-2 !border-m-danger !border-t-0'
+              : 'border-m-danger'
+            : hasSuccess
+              ? isOpen
+                ? openDirection === 'down'
+                  ? 'rounded-b-none !border-2 !border-m-success !border-b-0'
+                  : 'rounded-t-none !border-2 !border-m-success !border-t-0'
+                : 'border-m-success'
+              : isOpen
+                ? openDirection === 'down'
+                  ? 'rounded-b-none !border-2 !border-m-primary !border-b-0'
+                  : 'rounded-t-none !border-2 !border-m-primary !border-t-0'
+            : isOptionSelected
+                  ? 'border-black'
+                  : 'border-m-muted',
+          disabled ? 'cursor-not-allowed border-m-muted text-black/60' : 'cursor-pointer',
+          label ? 'min-h-[40px]' : 'h-[40px] py-0',
+          rounded,
+          textField,
+  ]"
+      :aria-expanded="isOpen"
+      :aria-controls="listboxId"
+      :aria-invalid="hasError"
+      :aria-describedby="describedBy"
+      :disabled="disabled"
+      @click="toggle"
+    >
+      <label
+        v-if="label"
+        class="floating-label pointer-events-none absolute left-3 inline-block origin-left transition-transform duration-150 font-medium"
+        :class="[
+          shouldFloatLabel ? 'top-2 z-30' : 'top-1/2 -translate-y-1/2',
+          hasError
+            ? 'text-m-danger'
+            : hasSuccess
+              ? 'text-m-success'
+              : isOpen
+                ? 'text-m-primary'
+                : isOptionSelected
+                  ? 'text-black'
+                  : 'text-m-muted',
+          textLabel,
+        ]"
+        :style="labelTransformStyle"
+      >
+        {{ label }}
+      </label>
+
+      <div
+        v-if="displayTags && selectedOptions.length > 0"
+        class="flex flex-wrap items-center justify-start gap-1"
+        :class="[label ? 'pt-1' : '']"
+      >
+        <span
+          v-for="option in selectedOptions"
+          :key="String(option.value)"
+          class="inline-flex max-w-full items-center rounded-md border border-black px-2 text-sm leading-none text-black"
+        >
+          <span class="truncate pb-[2px]">{{ option.label }}</span>
+        </span>
+      </div>
+
+      <span
+        v-else-if="displayTag && emptyOptionLabel"
+        class="block truncate text-right"
+        :class="[
+          textValue,
+          label ? 'pl-24' : '',
+          'text-m-muted'
+        ]"
+      >
+        {{ emptyOptionLabel }}
+      </span>
+
+      <span
+        v-if="!displayTag"
+        class="block truncate text-right"
+        :class="[
+          textValue,
+          label ? 'pl-24' : '',
+          isOptionSelected ? 'text-black' : 'text-m-muted'
+        ]"
+      >
+        {{ selectionSummary }}
+      </span>
+
+      <span
+        class="absolute right-3 top-1/2 -translate-y-1/2"
+        :class="[
+          hasError
+            ? 'text-m-danger'
+            : hasSuccess
+              ? 'text-m-success'
+              : 'text-current'
+        ]"
+      >
+      <slot name="icon">
+        <IconifyIcon
+          icon="mdi:chevron-down"
+          width="20"
+          class="transition-transform duration-300"
+          :class="isOpen ? 'rotate-180' : 'rotate-0'"
+        />
+      </slot>
+    </span>
+    </button>
+
+    <ul
+      v-if="isOpen"
+      :id="listboxId"
+      ref="listRef"
+      role="listbox"
+      :aria-labelledby="buttonId"
+      class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
+      :class="[
+        openDirection === 'down'
+          ? 'top-[calc(100%-2px)] rounded-b-md border-t-0'
+          : 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
+        hasError
+          ? 'select-scrollbar-error'
+          : hasSuccess
+            ? 'select-scrollbar-success'
+            : 'select-scrollbar-primary',
+        hasError
+          ? 'border-m-danger'
+          : hasSuccess
+            ? 'border-m-success'
+            : 'border-m-primary'
+      ]"
+    >
+      <li
+        v-if="displaySelectAll"
+        class="border-b border-m-muted/30 px-3 py-2"
+        @mousedown.prevent
+      >
+        <Checkbox
+          :model-value="allSelected"
+          :label="selectAllLabel"
+          :disabled="disabled"
+          group-class="!mt-0"
+          label-class="option-checkbox w-full cursor-pointer font-semibold"
+          tabindex="-1"
+          @update:model-value="toggleAll"
+        />
+      </li>
+      <li
+        v-for="(opt, index) in normalizedOptions"
+        :id="optionId(index)"
+        :key="String(opt.value)"
+        role="option"
+        :aria-selected="isChecked(opt.value)"
+        class="px-3 py-2"
+        :class="[
+            index === activeIndex ? 'bg-m-muted/10' : '',
+            isChecked(opt.value) ? 'bg-m-muted/10 font-semibold' : '',
+            'text-black'
+          ]"
+        @mouseenter="activeIndex = index"
+        @mousedown.prevent
+      >
+        <Checkbox
+          :model-value="isChecked(opt.value)"
+          :label="opt.label || '\u00A0'"
+          :disabled="disabled"
+          group-class="!mt-0"
+          label-class="option-checkbox w-full cursor-pointer"
+          tabindex="-1"
+          @update:model-value="toggleOption(opt.value)"
+        />
+      </li>
+    </ul>
+  </div>
+  <p
+    v-if="hint || hasError || hasSuccess"
+    :id="`${buttonId}-describedby`"
+    :class="[
+      hasError
+        ? 'text-m-danger'
+        : hasSuccess
+          ? 'text-m-success'
+          : 'text-m-muted',
+      'mt-1 ml-[2px] text-xs',
+    ]"
+  >
+    {{ error || success || hint }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import Checkbox from '../checkbox/Checkbox.vue'
+
+defineOptions({name: 'MalioSelectCheckbox', inheritAttrs: false})
+
+type Option = {
+  label: string;
+  value: string | number
+}
+const props = withDefaults(defineProps<{
+  modelValue: Array<string | number>
+  options?: Option[]
+  emptyOptionLabel?: string
+  label?: string
+  hint?: string
+  error?: string
+  success?: string
+  minWidth?: string
+  maxWidth?: string
+  textField?: string
+  textValue?: string
+  textLabel?: string
+  rounded?: string
+  displayTag?: boolean
+  displaySelectAll?: boolean
+  selectAllLabel?: string
+  disabled?: boolean
+}>(), {
+  options: () => [],
+  emptyOptionLabel: '',
+  label: '',
+  hint: '',
+  error: '',
+  success: '',
+  minWidth: 'w-96',
+  maxWidth: '',
+  textField: 'text-lg',
+  textValue: 'text-lg',
+  textLabel: 'text-sm',
+  rounded: 'rounded-md',
+  displayTag: false,
+  displaySelectAll: false,
+  selectAllLabel: 'Tout sélectionner',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Array<string | number>): void
+}>()
+const root = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const activeIndex = ref(-1)
+const openDirection = ref<'down' | 'up'>('down')
+const uid = useId()
+const buttonId = `custom-select-btn-${uid}`
+const listboxId = `custom-select-listbox-${uid}`
+const listRef = ref<HTMLElement | null>(null)
+const listHeight = ref(0)
+const normalizedOptions = computed<Option[]>(() => props.options)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const isOptionSelected = computed(() =>
+  props.modelValue.length > 0
+)
+const selectedOptions = computed(() =>
+  normalizedOptions.value.filter(option => props.modelValue.includes(option.value)),
+)
+const displayTags = computed(() =>
+  props.displayTag && selectedOptions.value.length > 0,
+)
+const shouldFloatLabel = computed(() =>
+  isOpen.value || displayTags.value
+)
+const selectionSummary = computed(() =>
+  `${props.modelValue.length}/${normalizedOptions.value.length}`
+)
+const describedBy = computed(() =>
+  (hasError.value || hasSuccess.value || !!props.hint) ? `${buttonId}-describedby` : undefined,
+)
+
+function optionId(index: number) {
+  return `custom-select-opt-${uid}-${index}`
+}
+
+function updateOpenDirection() {
+  if (!root.value) return
+
+  const rect = root.value.getBoundingClientRect()
+  const estimatedListHeight = Math.min(normalizedOptions.value.length * 40, 240)
+  const spaceBelow = window.innerHeight - rect.bottom
+  const spaceAbove = rect.top
+
+  openDirection.value =
+    spaceBelow >= estimatedListHeight || spaceBelow >= spaceAbove
+      ? 'down'
+      : 'up'
+}
+
+function open() {
+  updateOpenDirection()
+  isOpen.value = true
+
+  const selectedIndex = normalizedOptions.value.findIndex(o => props.modelValue.includes(o.value))
+  activeIndex.value = selectedIndex >= 0 ? selectedIndex : 0
+
+  nextTick(() => {
+    if (openDirection.value === 'up' && listRef.value) {
+      listHeight.value = listRef.value.offsetHeight
+    } else {
+      listHeight.value = 0
+    }
+  })
+}
+
+const labelTransformStyle = computed(() => {
+  if (!shouldFloatLabel.value) {
+    return undefined
+  }
+
+  if (!isOpen.value || openDirection.value === 'down') {
+    return {
+      transform: 'translateY(-1.15rem) scale(0.9)',
+    }
+  }
+
+  const extraOffset = 8 // marge visuelle au-dessus de la liste en px
+  const total = 4 + listHeight.value + extraOffset
+
+  return {
+    transform: `translateY(-${total}px) scale(0.9)`,
+  }
+})
+
+function close() {
+  isOpen.value = false
+}
+
+function toggle() {
+  if (props.disabled) return
+  if (isOpen.value) {
+    close()
+    return
+  }
+  open()
+}
+
+const allSelected = computed(() =>
+  normalizedOptions.value.length > 0
+  && normalizedOptions.value.every(opt => props.modelValue.includes(opt.value)),
+)
+
+function toggleAll() {
+  if (allSelected.value) {
+    emit('update:modelValue', [])
+  } else {
+    emit('update:modelValue', normalizedOptions.value.map(opt => opt.value))
+  }
+}
+
+function isChecked(value: string | number) {
+  return props.modelValue.includes(value)
+}
+
+function toggleOption(value: string | number) {
+  if (isChecked(value)) {
+    emit('update:modelValue', props.modelValue.filter(item => item !== value))
+    return
+  }
+
+  emit('update:modelValue', [...props.modelValue, value])
+}
+
+function onClickOutside(e: MouseEvent) {
+  if (!root.value) return
+  if (!root.value.contains(e.target as Node)) close()
+}
+
+onMounted(() => document.addEventListener('mousedown', onClickOutside))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+
+:deep(ul[role="listbox"]) {
+  scrollbar-width: auto;
+  scrollbar-gutter: stable;
+}
+
+:deep(.select-scrollbar-primary) {
+  scrollbar-color: rgb(var(--m-primary)) transparent;
+}
+
+:deep(.select-scrollbar-error) {
+  scrollbar-color: #000000 transparent;
+}
+
+:deep(.select-scrollbar-success) {
+  scrollbar-color: #000000 transparent;
+}
+
+</style>
--- a/app/components/malio/sidebar/Sidebar.test.ts
+++ b/app/components/malio/sidebar/Sidebar.test.ts
@@ -0,0 +1,205 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import Sidebar from './Sidebar.vue'
+
+type SidebarItem = {
+  label: string
+  to: string
+}
+
+type SidebarSection = {
+  label?: string
+  icon?: string
+  items: SidebarItem[]
+}
+
+type SidebarProps = {
+  sections: SidebarSection[]
+  modelValue?: boolean
+  id?: string
+  sidebarClass?: string
+  toggleClass?: string
+}
+
+const SidebarForTest = Sidebar as DefineComponent<SidebarProps>
+
+const sections: SidebarSection[] = [
+  {
+    label: 'LOGISTIQUE / TRANSPORT',
+    icon: 'mdi:truck-delivery',
+    items: [
+      {label: 'Réception / Expédition', to: '/reception'},
+      {label: 'Validation expédition', to: '/validation'},
+    ],
+  },
+  {
+    label: 'COMMERCIAL',
+    icon: 'mdi:handshake',
+    items: [
+      {label: 'Répertoire Fournisseurs', to: '/fournisseurs'},
+    ],
+  },
+]
+
+const stubs = {
+  NuxtLink: {
+    template: '<a :href="to" v-bind="$attrs"><slot /></a>',
+    props: ['to'],
+  },
+}
+
+function mountComponent(props: SidebarProps, slots?: Record<string, string>) {
+  return mount(SidebarForTest, {
+    props,
+    slots,
+    global: {stubs},
+  })
+}
+
+describe('MalioSidebar', () => {
+  it('renders expanded by default', () => {
+    const wrapper = mountComponent({sections})
+    const aside = wrapper.find('aside')
+    expect(aside.classes()).toContain('w-[280px]')
+  })
+
+  it('renders section labels with icons when expanded', () => {
+    const wrapper = mountComponent({sections})
+    const sectionHeaders = wrapper.findAll('nav > div > div')
+    expect(sectionHeaders).toHaveLength(2)
+    expect(sectionHeaders[0].text()).toContain('LOGISTIQUE / TRANSPORT')
+    expect(sectionHeaders[1].text()).toContain('COMMERCIAL')
+  })
+
+  it('renders all menu items with icons and labels', () => {
+    const wrapper = mountComponent({sections})
+    const links = wrapper.findAll('a')
+    expect(links).toHaveLength(3)
+    expect(links[0].text()).toContain('Réception / Expédition')
+    expect(links[1].text()).toContain('Validation expédition')
+    expect(links[2].text()).toContain('Répertoire Fournisseurs')
+  })
+
+  it('renders NuxtLink with correct to prop', () => {
+    const wrapper = mountComponent({sections})
+    const links = wrapper.findAll('a')
+    expect(links[0].attributes('href')).toBe('/reception')
+    expect(links[2].attributes('href')).toBe('/fournisseurs')
+  })
+
+  it('renders section icons via IconifyIcon', () => {
+    const wrapper = mountComponent({sections})
+    const icons = wrapper.findAllComponents(IconifyIcon)
+    // 2 section icons + 1 toggle chevron = 3
+    expect(icons).toHaveLength(3)
+    expect(icons[0].props('icon')).toBe('mdi:truck-delivery')
+    expect(icons[1].props('icon')).toBe('mdi:handshake')
+  })
+
+  it('toggle button shows chevron-left when expanded', () => {
+    const wrapper = mountComponent({sections})
+    const toggleIcon = wrapper.findAllComponents(IconifyIcon).at(-1)!
+    expect(toggleIcon.props('icon')).toBe('mdi:chevron-left')
+  })
+
+  it('collapses on toggle click in uncontrolled mode', async () => {
+    const wrapper = mountComponent({sections})
+    const toggleBtn = wrapper.find('button')
+
+    await toggleBtn.trigger('click')
+
+    const aside = wrapper.find('aside')
+    expect(aside.classes()).toContain('w-[72px]')
+  })
+
+  it('hides section label text when collapsed but keeps section icon', async () => {
+    const wrapper = mountComponent({sections})
+    await wrapper.find('button').trigger('click')
+
+    const sectionHeaders = wrapper.findAll('nav > div > div')
+    expect(sectionHeaders).toHaveLength(2)
+    // Label text spans are hidden
+    sectionHeaders.forEach((header) => {
+      expect(header.findAll('span').filter(s => s.classes().includes('text-[11px]'))).toHaveLength(0)
+    })
+  })
+
+  it('hides item text when collapsed', async () => {
+    const wrapper = mountComponent({sections})
+    await wrapper.find('button').trigger('click')
+
+    const itemSpans = wrapper.findAll('a span')
+    expect(itemSpans).toHaveLength(0)
+  })
+
+  it('toggle button shows chevron-right when collapsed', async () => {
+    const wrapper = mountComponent({sections})
+    await wrapper.find('button').trigger('click')
+
+    const toggleIcon = wrapper.findAllComponents(IconifyIcon).at(-1)!
+    expect(toggleIcon.props('icon')).toBe('mdi:chevron-right')
+  })
+
+  it('emits update:modelValue on toggle click', async () => {
+    const wrapper = mountComponent({sections, modelValue: false})
+    await wrapper.find('button').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+  })
+
+  it('respects modelValue in controlled mode', () => {
+    const wrapper = mountComponent({sections, modelValue: true})
+    const aside = wrapper.find('aside')
+    expect(aside.classes()).toContain('w-[72px]')
+  })
+
+  it('renders logo slot when expanded', () => {
+    const wrapper = mountComponent({sections}, {
+      logo: '<img alt="Malio" src="/logo.svg" />',
+    })
+    expect(wrapper.find('img[alt="Malio"]').exists()).toBe(true)
+  })
+
+  it('renders logo-collapsed slot when collapsed', async () => {
+    const wrapper = mountComponent({sections}, {
+      'logo-collapsed': '<img alt="M" src="/logo-m.svg" />',
+    })
+    await wrapper.find('button').trigger('click')
+
+    expect(wrapper.find('img[alt="M"]').exists()).toBe(true)
+  })
+
+  it('uses custom id when provided', () => {
+    const wrapper = mountComponent({sections, id: 'my-sidebar'})
+    expect(wrapper.find('aside').attributes('id')).toBe('my-sidebar')
+  })
+
+  it('toggle button has correct aria-label', async () => {
+    const wrapper = mountComponent({sections})
+    const btn = wrapper.find('button')
+    expect(btn.attributes('aria-label')).toBe('Plier le menu')
+
+    await btn.trigger('click')
+    expect(btn.attributes('aria-label')).toBe('Déplier le menu')
+  })
+
+  it('section without label does not render a section header', () => {
+    const noLabelSections: SidebarSection[] = [
+      {items: [{label: 'Item', to: '/'}]},
+    ]
+    const wrapper = mountComponent({sections: noLabelSections})
+    expect(wrapper.findAll('nav > div > div')).toHaveLength(0)
+  })
+
+  it('renders section icon in collapsed mode', async () => {
+    const wrapper = mountComponent({sections})
+    await wrapper.find('button').trigger('click')
+
+    const icons = wrapper.findAllComponents(IconifyIcon)
+    // 2 section icons + 1 toggle = 3
+    expect(icons[0].props('icon')).toBe('mdi:truck-delivery')
+    expect(icons[1].props('icon')).toBe('mdi:handshake')
+  })
+})
--- a/app/components/malio/sidebar/Sidebar.vue
+++ b/app/components/malio/sidebar/Sidebar.vue
@@ -0,0 +1,139 @@
+<template>
+  <aside
+    :id="componentId"
+    :class="twMerge(
+      'relative flex h-full flex-col bg-m-bg',
+      collapsed ? 'w-[72px]' : 'w-[280px]',
+      sidebarClass,
+    )"
+    v-bind="$attrs"
+  >
+    <div :class="['px-[20px] py-[14px]', collapsed ? '' : 'mx-[10px] border-b-2 border-m-primary']">
+      <slot
+        v-if="collapsed"
+        name="logo-collapsed"
+      />
+      <slot
+        v-else
+        name="logo"
+      />
+    </div>
+
+    <nav class="flex-1 overflow-y-auto mb-4">
+      <div
+        v-for="(section, sectionIndex) in sections"
+        :key="sectionIndex"
+        :class="collapsed ? 'first:border-t-2 first:border-m-primary' : 'mx-[10px] border-t-2 border-m-primary first:border-t-0'"
+      >
+        <div
+          v-if="section.label"
+          :class="[
+            'flex items-center gap-2 px-[10px] pt-2 pb-3',
+            collapsed ? 'justify-center pt-[40px]' : '',
+          ]"
+        >
+          <IconifyIcon
+            v-if="section.icon"
+            :icon="section.icon"
+            :width="24"
+            class="shrink-0 text-m-primary"
+          />
+          <span
+            v-if="!collapsed"
+            class="text-[15px] font-bold uppercase text-m-primary"
+          >
+            {{ section.label }}
+          </span>
+        </div>
+        <ul>
+          <li
+            v-for="item in section.items"
+            :key="item.to"
+            :class="collapsed ? '' : 'pb-2 last:pb-1'"
+          >
+            <NuxtLink
+              :to="item.to"
+              :class="twMerge(
+                'block truncate rounded-md text-[15px] text-m-text text-black transition-colors hover:bg-m-surface leading-[150%]',
+                collapsed ? 'px-3 text-center' : 'pl-[42px] pr-3',
+              )"
+            >
+              <span v-if="!collapsed">{{ item.label }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+    <button
+      type="button"
+      :aria-label="collapsed ? 'Déplier le menu' : 'Plier le menu'"
+      :class="twMerge(
+        'absolute top-1/2 -translate-y-1/2 right-0 translate-x-1/2 z-10',
+        'flex h-8 w-8 items-center justify-center rounded-full border border-m-border bg-white shadow-sm',
+        'cursor-pointer transition-colors hover:bg-m-surface',
+        toggleClass,
+      )"
+      @click="toggleCollapse"
+    >
+      <IconifyIcon
+        :icon="collapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
+        :width="18"
+      />
+    </button>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useId} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioSidebar', inheritAttrs: false})
+
+export type SidebarItem = {
+  label: string
+  to: string
+}
+
+export type SidebarSection = {
+  label?: string
+  icon?: string
+  items: SidebarItem[]
+}
+
+const props = withDefaults(defineProps<{
+  sections: SidebarSection[]
+  modelValue?: boolean
+  id?: string
+  sidebarClass?: string
+  toggleClass?: string
+}>(), {
+  modelValue: undefined,
+  id: '',
+  sidebarClass: '',
+  toggleClass: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const generatedId = useId()
+const componentId = computed(() => props.id || `malio-sidebar-${generatedId}`)
+
+const isControlled = computed(() => props.modelValue !== undefined)
+const localValue = ref(false)
+
+const collapsed = computed(() =>
+  isControlled.value ? props.modelValue! : localValue.value,
+)
+
+function toggleCollapse() {
+  const newValue = !collapsed.value
+  if (!isControlled.value) {
+    localValue.value = newValue
+  }
+  emit('update:modelValue', newValue)
+}
+</script>
--- a/app/components/malio/tab/TabList.test.ts
+++ b/app/components/malio/tab/TabList.test.ts
@@ -0,0 +1,137 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import TabList from './TabList.vue'
+
+type Tab = {
+  key: string
+  label: string
+  icon?: string
+}
+
+type TabListProps = {
+  tabs: Tab[]
+  modelValue?: string
+  id?: string
+}
+
+const TabListForTest = TabList as DefineComponent<TabListProps>
+
+const tabs: Tab[] = [
+  {key: 'home', label: 'Accueil', icon: 'mdi:home'},
+  {key: 'settings', label: 'Paramètres'},
+  {key: 'profile', label: 'Profil', icon: 'mdi:account'},
+]
+
+function mountComponent(props: TabListProps, slots?: Record<string, string>) {
+  return mount(TabListForTest, {
+    props,
+    slots,
+  })
+}
+
+describe('MalioTabList', () => {
+  it('renders all tab buttons with correct labels', () => {
+    const wrapper = mountComponent({tabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons).toHaveLength(3)
+    expect(buttons[0].text()).toContain('Accueil')
+    expect(buttons[1].text()).toContain('Paramètres')
+    expect(buttons[2].text()).toContain('Profil')
+  })
+
+  it('renders icons for tabs that have one', () => {
+    const wrapper = mountComponent({tabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons[0].find('svg').exists()).toBe(true)
+    expect(buttons[2].find('svg').exists()).toBe(true)
+  })
+
+  it('does not render icon when tab has no icon', () => {
+    const wrapper = mountComponent({tabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons[1].find('svg').exists()).toBe(false)
+  })
+
+  it('first tab is active by default in uncontrolled mode', () => {
+    const wrapper = mountComponent({tabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons[0].attributes('aria-selected')).toBe('true')
+    expect(buttons[1].attributes('aria-selected')).toBe('false')
+    expect(buttons[2].attributes('aria-selected')).toBe('false')
+  })
+
+  it('shows the panel content for the active tab (v-show)', () => {
+    const wrapper = mountComponent({tabs}, {
+      home: '<p>Home content</p>',
+      settings: '<p>Settings content</p>',
+      profile: '<p>Profile content</p>',
+    })
+    const panels = wrapper.findAll('[role="tabpanel"]')
+    expect(panels[0].attributes('style')).toBeUndefined()
+    expect(panels[1].attributes('style')).toContain('display: none')
+    expect(panels[2].attributes('style')).toContain('display: none')
+  })
+
+  it('switches tab on click in uncontrolled mode', async () => {
+    const wrapper = mountComponent({tabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+
+    await buttons[1].trigger('click')
+
+    expect(buttons[1].attributes('aria-selected')).toBe('true')
+    expect(buttons[0].attributes('aria-selected')).toBe('false')
+  })
+
+  it('emits update:modelValue on click in controlled mode', async () => {
+    const wrapper = mountComponent({tabs, modelValue: 'home'})
+    const buttons = wrapper.findAll('[role="tab"]')
+
+    await buttons[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['profile'])
+  })
+
+  it('respects modelValue for active tab in controlled mode', () => {
+    const wrapper = mountComponent({tabs, modelValue: 'settings'})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons[0].attributes('aria-selected')).toBe('false')
+    expect(buttons[1].attributes('aria-selected')).toBe('true')
+    expect(buttons[2].attributes('aria-selected')).toBe('false')
+  })
+
+  it('sets correct aria-controls and aria-labelledby', () => {
+    const wrapper = mountComponent({tabs, id: 'test'})
+    const buttons = wrapper.findAll('[role="tab"]')
+    const panels = wrapper.findAll('[role="tabpanel"]')
+
+    expect(buttons[0].attributes('aria-controls')).toBe('test-panel-home')
+    expect(buttons[1].attributes('aria-controls')).toBe('test-panel-settings')
+    expect(panels[0].attributes('aria-labelledby')).toBe('test-tab-home')
+    expect(panels[1].attributes('aria-labelledby')).toBe('test-tab-settings')
+  })
+
+  it('has role="tablist" on the tab container', () => {
+    const wrapper = mountComponent({tabs})
+    expect(wrapper.find('[role="tablist"]').exists()).toBe(true)
+  })
+
+  it('active tab has tabindex 0, others have -1', () => {
+    const wrapper = mountComponent({tabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons[0].attributes('tabindex')).toBe('0')
+    expect(buttons[1].attributes('tabindex')).toBe('-1')
+    expect(buttons[2].attributes('tabindex')).toBe('-1')
+  })
+
+  it('renders icon props correctly via findComponent', () => {
+    const wrapper = mount(TabListForTest, {
+      props: {tabs},
+    })
+    const icons = wrapper.findAllComponents(IconifyIcon)
+    expect(icons).toHaveLength(2)
+    expect(icons[0].props('icon')).toBe('mdi:home')
+    expect(icons[1].props('icon')).toBe('mdi:account')
+  })
+})
--- a/app/components/malio/tab/TabList.vue
+++ b/app/components/malio/tab/TabList.vue
@@ -0,0 +1,87 @@
+<template>
+  <div v-bind="$attrs">
+    <div
+      role="tablist"
+      class="flex justify-center gap-[60px] border-b border-m-primary"
+    >
+      <button
+        v-for="tab in tabs"
+        :id="`${componentId}-tab-${tab.key}`"
+        :key="tab.key"
+        role="tab"
+        type="button"
+        :aria-selected="activeTab === tab.key"
+        :aria-controls="`${componentId}-panel-${tab.key}`"
+        :tabindex="activeTab === tab.key ? 0 : -1"
+        :class="[
+          'flex items-center gap-[18px] text-[24px] font-medium transition-colors cursor-pointer',
+          activeTab === tab.key
+            ? 'border-b-2 border-m-primary text-m-primary font-bold outline-b'
+            : 'border-transparent text-m-primary/50 hover:text-m-primary/70',
+        ]"
+        @click="selectTab(tab.key)"
+      >
+        <IconifyIcon
+          v-if="tab.icon"
+          :icon="tab.icon"
+          :width="20"
+        />
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <div
+      v-for="tab in tabs"
+      v-show="activeTab === tab.key"
+      :id="`${componentId}-panel-${tab.key}`"
+      :key="tab.key"
+      role="tabpanel"
+      :aria-labelledby="`${componentId}-tab-${tab.key}`"
+    >
+      <slot :name="tab.key" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useId} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+
+defineOptions({name: 'MalioTabList', inheritAttrs: false})
+
+type Tab = {
+  key: string
+  label: string
+  icon?: string
+}
+
+const props = withDefaults(defineProps<{
+  tabs: Tab[]
+  modelValue?: string
+  id?: string
+}>(), {
+  modelValue: undefined,
+  id: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const generatedId = useId()
+const componentId = computed(() => props.id || `malio-tab-list-${generatedId}`)
+
+const isControlled = computed(() => props.modelValue !== undefined)
+const localValue = ref(props.tabs.length > 0 ? props.tabs[0].key : '')
+
+const activeTab = computed(() =>
+  isControlled.value ? props.modelValue! : localValue.value,
+)
+
+function selectTab(key: string) {
+  if (!isControlled.value) {
+    localValue.value = key
+  }
+  emit('update:modelValue', key)
+}
+</script>
--- a/app/components/malio/time/Time.test.ts
+++ b/app/components/malio/time/Time.test.ts
@@ -0,0 +1,79 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import Time from './Time.vue'
+
+type TimeProps = {
+  id?: string
+  label?: string
+  name?: string
+  modelValue?: string | null
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+}
+
+const TimeForTest = Time as DefineComponent<TimeProps>
+
+const mountTime = (props: TimeProps = {}) =>
+  mount(TimeForTest, {props})
+
+describe('MalioTime', () => {
+  it('renders two text inputs and a separator', () => {
+    const wrapper = mountTime()
+
+    expect(wrapper.findAll('input')).toHaveLength(2)
+    expect(wrapper.text()).toContain(':')
+  })
+
+  it('uses separate ids for hours and minutes inputs', () => {
+    const wrapper = mountTime({label: 'Horaire'})
+    const inputs = wrapper.findAll('input')
+
+    expect(inputs[0].attributes('id')).toContain('-hours')
+    expect(inputs[1].attributes('id')).toContain('-minutes')
+    expect(wrapper.get('label').attributes('for')).toBe(inputs[0].attributes('id'))
+  })
+
+  it('clamps values to 24 hours and 59 minutes', async () => {
+    const wrapper = mountTime({modelValue: ''})
+    const inputs = wrapper.findAll('input')
+
+    await inputs[0].setValue('99')
+    await inputs[1].setValue('88')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['23:59'])
+    expect((inputs[0].element as HTMLInputElement).value).toBe('23')
+    expect((inputs[1].element as HTMLInputElement).value).toBe('59')
+  })
+
+  it('pads single digits on blur', async () => {
+    const wrapper = mountTime({modelValue: ''})
+    const inputs = wrapper.findAll('input')
+
+    await inputs[0].setValue('7')
+    await inputs[0].trigger('blur')
+    await inputs[1].setValue('5')
+    await inputs[1].trigger('blur')
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['07:05'])
+    expect((inputs[0].element as HTMLInputElement).value).toBe('07')
+    expect((inputs[1].element as HTMLInputElement).value).toBe('05')
+  })
+
+  it('applies the primary border to the focused field', async () => {
+    const wrapper = mountTime()
+    const inputs = wrapper.findAll('input')
+
+    await inputs[0].trigger('focus')
+
+    expect(inputs[0].classes()).toContain('border-m-primary')
+    expect(inputs[1].classes()).not.toContain('border-m-primary')
+  })
+})
--- a/app/components/malio/time/Time.vue
+++ b/app/components/malio/time/Time.vue
@@ -0,0 +1,264 @@
+<template>
+  <div>
+    <div :class="mergedGroupClass">
+      <label
+        v-if="label"
+        :for="hoursInputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
+
+      <div class="flex items-center gap-2">
+        <input
+          :id="hoursInputId"
+          :name="hoursName"
+          autocomplete="off"
+          :class="mergedInputClass('hours')"
+          :required="required"
+          :disabled="disabled"
+          :readonly="readonly"
+          :aria-invalid="!!error"
+          :aria-describedby="describedBy"
+          :value="hoursValue"
+          v-bind="attrs"
+          type="text"
+          inputmode="numeric"
+          placeholder="00"
+          maxlength="2"
+          @input="onHoursInput"
+          @focus="activeField = 'hours'"
+          @blur="onHoursBlur"
+        >
+
+        <span class="text-[18px] text-black">:</span>
+
+        <input
+          ref="minutesInputRef"
+          :id="minutesInputId"
+          :name="minutesName"
+          autocomplete="off"
+          :class="mergedInputClass('minutes')"
+          :required="required"
+          :disabled="disabled"
+          :readonly="readonly"
+          :aria-invalid="!!error"
+          :aria-describedby="describedBy"
+          :value="minutesValue"
+          v-bind="attrs"
+          type="text"
+          inputmode="numeric"
+          placeholder="00"
+          maxlength="2"
+          @input="onMinutesInput"
+          @focus="activeField = 'minutes'"
+          @blur="onMinutesBlur"
+        >
+      </div>
+    </div>
+
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="[
+        hasError
+          ? 'text-m-danger'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 ml-[2px] text-xs',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, nextTick, ref, useAttrs, useId, watch} from 'vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioTime', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    modelValue?: string | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    modelValue: undefined,
+    label: '',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    readonly: false,
+    disabled: false,
+    hint: '',
+    error: '',
+    success: '',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const hoursValue = ref('')
+const minutesValue = ref('')
+const activeField = ref<'hours' | 'minutes' | null>(null)
+const minutesInputRef = ref<HTMLInputElement | null>(null)
+
+const inputId = computed(() => props.id?.toString() || `malio-time-${generatedId}`)
+const hoursInputId = computed(() => `${inputId.value}-hours`)
+const minutesInputId = computed(() => `${inputId.value}-minutes`)
+const hoursName = computed(() => (props.name ? `${props.name}-hours` : ''))
+const minutesName = computed(() => (props.name ? `${props.name}-minutes` : ''))
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const padSegment = (value: string) => (value === '' ? '' : value.padStart(2, '0'))
+
+const sanitizeDigits = (value: string) =>
+  value.replace(/\D/g, '').slice(0, 2)
+
+const normalizeHours = (value: string) => {
+  const digits = sanitizeDigits(value)
+  if (digits === '') return ''
+  if (Number.parseInt(digits, 10) > 23) return '23'
+  return digits
+}
+
+const normalizeMinutes = (value: string) => {
+  const digits = sanitizeDigits(value)
+  if (digits === '') return ''
+  if (Number.parseInt(digits, 10) > 59) return '59'
+  return digits
+}
+
+const parseTimeValue = (value: string | null | undefined) => {
+  if (!value) return {hours: '', minutes: ''}
+
+  const [rawHours = '', rawMinutes = ''] = value.split(':')
+
+  return {
+    hours: normalizeHours(rawHours),
+    minutes: normalizeMinutes(rawMinutes),
+  }
+}
+
+const syncFromModelValue = (value: string | null | undefined) => {
+  if (activeField.value) return
+  const parsedValue = parseTimeValue(value)
+  hoursValue.value = parsedValue.hours
+  minutesValue.value = parsedValue.minutes
+}
+
+watch(() => props.modelValue, syncFromModelValue, {immediate: true})
+
+const describedBy = computed(() =>
+  (props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
+)
+
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'relative mt-4 flex w-full items-center',
+    props.groupClass,
+  ),
+)
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'mt-px mr-4 cursor-pointer text-black text-[18px]',
+    hasError.value ? 'text-m-danger' : '',
+    hasSuccess.value ? 'text-m-success' : '',
+    props.disabled ? 'cursor-not-allowed text-black/60' : '',
+    props.labelClass
+  ),
+)
+
+const mergedInputClass = (field: 'hours' | 'minutes') =>
+  twMerge(
+    'h-[30px] w-10 border bg-white text-center text-[18px] outline-none rounded-md placeholder:text-m-muted',
+    props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
+    hasError.value
+      ? 'focus:border-2 border-m-danger focus:border-m-danger'
+      : hasSuccess.value
+        ? 'focus:border-2 border-m-success focus:border-m-success'
+        : activeField.value === field
+          ? 'border-2 border-m-primary text-m-primary'
+          : 'border-black text-black',
+    props.inputClass,
+  )
+
+const emitCurrentValue = (pad = false) => {
+  if (!hoursValue.value && !minutesValue.value) {
+    emit('update:modelValue', '')
+    return
+  }
+
+  const h = pad ? padSegment(hoursValue.value || '0') : (hoursValue.value || '00')
+  const m = pad ? padSegment(minutesValue.value || '0') : (minutesValue.value || '00')
+
+  emit('update:modelValue', `${h}:${m}`)
+}
+
+const onHoursInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const normalizedValue = normalizeHours(target.value)
+
+  hoursValue.value = normalizedValue
+  target.value = normalizedValue
+  emitCurrentValue()
+
+  if (normalizedValue.length === 2) {
+    nextTick(() => minutesInputRef.value?.focus())
+  }
+}
+
+const onMinutesInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const normalizedValue = normalizeMinutes(target.value)
+
+  minutesValue.value = normalizedValue
+  target.value = normalizedValue
+  emitCurrentValue()
+}
+
+const formatFieldOnBlur = (field: 'hours' | 'minutes') => {
+  if (field === 'hours' && hoursValue.value) {
+    hoursValue.value = padSegment(hoursValue.value)
+  }
+
+  if (field === 'minutes' && minutesValue.value) {
+    minutesValue.value = padSegment(minutesValue.value)
+  }
+
+  emitCurrentValue(true)
+}
+
+const onHoursBlur = () => {
+  formatFieldOnBlur('hours')
+  activeField.value = null
+}
+
+const onMinutesBlur = () => {
+  formatFieldOnBlur('minutes')
+  activeField.value = null
+}
+</script>