From dc33cf4135673194d304542030d832e598b3c63e Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Fri, 29 May 2026 15:19:41 +0200
Subject: [PATCH] feat(inputs): UX polish across input family + localFilter +
 focus scrollbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Polish across the form input components, plus two new features and a few
standalone fixes.

Fixes
-----
* Reserve hint/error/success paragraph space (min-h-[1rem]) in 15
  components so a single error message no longer shifts neighboring grid
  cells: InputText, Email, Password, Phone, Amount, Number, Upload,
  Autocomplete, RichText, TextArea, Select, SelectCheckbox, Time,
  TimePicker, CalendarField, Checkbox.
* InputPhone: the '+' add button now follows the icon-state cascade
  (muted / primary on focus / black when filled / danger / success) like
  the other field icons instead of being permanently primary.
* Select and SelectCheckbox: chevron color follows the field state
  (muted by default, primary when open, black when an option is
  selected, danger / success on error / success) instead of always being
  text-current.
* InputTextArea: single-root component (was multi-root). The message
  wrapper used to occupy its own grid cell, breaking row-span layouts.
  Now flex flex-col, with the textarea area filling the available height
  via flex-1 and the message inside the same root.
* Disabled labels use text-m-muted (border-gray) instead of text-black/60
  (dark) across InputText, Email, Password, Amount, Phone, Upload,
  Autocomplete, TextArea, RichText. Also removes an unreachable
  peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60 rule that
  twMerge was silently overriding with text-black.
* InputAutocomplete: eliminates four sources of visual jitter when
  focusing / opening a field that already has a selected value.
  - Drop peer-focus:-translate-y-[1.55rem] extra label translate.
  - Drop the .grow-height:focus padding rule (no more height growth or
    downward text shift on focus).
  - Drop focus:pl-[11px] (no more 1px horizontal jump).
  - Replace !border-b-0 with !border-b-transparent so the bottom border
    still reserves its 1px while remaining invisible against the
    dropdown.
* Select / SelectCheckbox: same anti-jitter treatment.
  - Drop .grow-height:focus padding rule (~12px height growth gone).
  - Replace !border-b-0 / !border-t-0 with !border-b-transparent /
    !border-t-transparent across danger / success / primary branches.
* Button: default width 240px -> 200px to match the form button sizing
  used across the app. Test updated to match.

Features
--------
* InputTextArea: scrollbar turns primary blue on focus
  (scrollbar-color: rgb(var(--m-primary)) transparent), matching the
  Select listbox styling.
* InputAutocomplete: new localFilter prop (default false). When enabled,
  filters the options prop client-side based on the input value
  (case-insensitive label.includes(query)), so static lists no longer
  need a @search listener. Async/API usage keeps the existing behavior.
  Playground "Simple statique" and "Avec icône à gauche" examples use
  local-filter.

Playground
----------
* client.vue: tighter grid gap (gap-y-5) plus an example error on a
  SelectCheckbox to visually exercise the message-space fix.

Tests
-----
All component test files include regression coverage for the above.
720/720 tests pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .playground/pages/composant/form/client.vue   |   7 +-
 .../composant/input/inputAutocomplete.vue     |   2 +
 CHANGELOG.md                                  |  10 ++
 COMPONENTS.md                                 |   7 +-
 app/components/malio/button/Button.test.ts    |   2 +-
 app/components/malio/button/Button.vue        |   2 +-
 app/components/malio/checkbox/Checkbox.vue    |   3 +-
 .../malio/date/internal/CalendarField.vue     |   3 +-
 app/components/malio/input/Input.test.ts      |  16 ++
 app/components/malio/input/InputAmount.vue    |  10 +-
 .../malio/input/InputAutocomplete.test.ts     |  79 ++++++++++
 .../malio/input/InputAutocomplete.vue         |  48 +++---
 app/components/malio/input/InputEmail.vue     |   8 +-
 app/components/malio/input/InputNumber.vue    |   3 +-
 app/components/malio/input/InputPassword.vue  |   8 +-
 app/components/malio/input/InputPhone.test.ts |  35 +++++
 app/components/malio/input/InputPhone.vue     |  11 +-
 app/components/malio/input/InputRichText.vue  |  12 +-
 app/components/malio/input/InputText.vue      |   8 +-
 .../malio/input/InputTextArea.test.ts         |  34 ++++
 app/components/malio/input/InputTextArea.vue  | 147 +++++++++---------
 app/components/malio/input/InputUpload.vue    |   8 +-
 app/components/malio/select/Select.test.ts    |  66 ++++++++
 app/components/malio/select/Select.vue        |  31 ++--
 .../malio/select/SelectCheckbox.test.ts       |  66 ++++++++
 .../malio/select/SelectCheckbox.vue           |  31 ++--
 app/components/malio/time/Time.vue            |   3 +-
 app/components/malio/time/TimePicker.vue      |   3 +-
 28 files changed, 489 insertions(+), 174 deletions(-)

diff --git a/.playground/pages/composant/form/client.vue b/.playground/pages/composant/form/client.vue
index e2887a1..3650407 100644
--- a/.playground/pages/composant/form/client.vue
+++ b/.playground/pages/composant/form/client.vue
@@ -10,7 +10,7 @@
         />
         <h1 class="text-[32px] text-m-primary font-bold">Ajouter un client</h1>
       </div>
-      <div class="mt-[48px] grid grid-cols-3 gap-x-[80px] gap-y-8">
+      <div class="mt-[48px] grid grid-cols-3 gap-x-[80px] gap-y-5">
         <MalioInputText
           label="Nom du client (Entreprise)"
         />
@@ -22,6 +22,7 @@
         />
         <MalioSelectCheckbox
           v-model="multiselectValue"
+          error="test"
           label="Catégorie"
           :options="[
             {label: 'Catégorie 1', value: 'Catégorie 1'},
@@ -75,7 +76,7 @@
       <div class="mt-[60px]">
         <MalioTabList :tabs="tabs" v-model="tabsValue">
           <template #information>
-            <div class="grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
+            <div class="grid grid-cols-3 gap-x-[80px] gap-y-5 mt-12 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
               <MalioInputTextArea label="Descritpion" resize="none" groupClass="row-span-2" textInput="h-full"/>
               <MalioInputText v-model="concurrent" label="Concurrent"/>
               <MalioDate
@@ -92,7 +93,7 @@
             </div>
           </template>
           <template #adresses>
-            <div class="relative grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
+            <div class="relative grid grid-cols-3 gap-x-[80px] gap-y-5 mt-12 bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
               <MalioButtonIcon
                 icon="mdi:delete-outline"
                 aria-label="Supprimer l'adresse"
diff --git a/.playground/pages/composant/input/inputAutocomplete.vue b/.playground/pages/composant/input/inputAutocomplete.vue
index 73a70b5..7597851 100644
--- a/.playground/pages/composant/input/inputAutocomplete.vue
+++ b/.playground/pages/composant/input/inputAutocomplete.vue
@@ -6,6 +6,7 @@
         v-model="simpleValue"
         label="Pays"
         :options="staticOptions"
+        local-filter
       />
       <p class="mt-2 text-sm text-m-muted">
         Valeur sélectionnée : <code>{{ simpleValue ?? 'null' }}</code>
@@ -20,6 +21,7 @@
         icon-name="mdi:magnify"
         icon-position="left"
         :options="staticOptions"
+        local-filter
       />
     </div>
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 260de2c..93568d6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -36,6 +36,8 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-36] Création d'un composant modal (dialogue centré, focus-trap, scroll-lock, footer fixe)
 * [#MUI-37] Création d'un composant accordéon
 * [#MUI-39] Création d'un sélecteur d'heure à molettes (MalioTimePicker) ; DateTime rebranché dessus (remplace l'input time natif intérimaire)
+* InputAutocomplete : prop `localFilter` pour le filtrage côté client des listes statiques (case-insensitive `label.includes(query)`), sans avoir à brancher `@search`
+* InputTextArea : la scrollbar passe en primary (bleu) au focus, comme la liste du Select
 
 ### Changed
 * [#MUI-35] Refonte du composant drawer : slots `#header`/`#footer`, prop `side` (droite/gauche), `dismissable`, `closeOnEscape`, classes d'override, focus-trap, scroll-lock et fermeture au clavier. **Breaking** : la prop `title` est remplacée par le slot `#header`.
@@ -44,3 +46,11 @@ Liste des évolutions de la librairie Malio layer UI
 * Drawer : le slot `#footer` est désormais rendu hors de la zone scrollable (épinglé en bas, comme la modal) ; seul le body défile et la scrollbar ne s'étend plus derrière le footer
 * Hauteur des boutons de pagination du datatable alignée sur le select (40px)
 * Distribution de `tailwind.config.ts` aux projets consommateurs avec paths `content` absolus
+* Espace réservé (`min-h-[1rem]`) pour le paragraphe hint/error/success de 15 composants (Input*, Select*, Time*, CalendarField, Checkbox) — l'apparition d'une erreur ne décale plus les cellules voisines dans une grille
+* InputPhone : la croix `+` (add button) suit la même cascade d'état que les autres icônes du champ (muted / primary en focus / black quand rempli / danger / success) au lieu d'être figée en primary
+* Select / SelectCheckbox : le chevron suit l'état du champ (muted par défaut, primary à l'ouverture, black avec une option sélectionnée, danger / success en cas d'erreur ou succès) au lieu de `text-current`
+* InputTextArea : composant single-root (était multi-root) — le wrapper du message ne prend plus sa propre cellule de grille, `row-span-2` fonctionne à nouveau
+* Label désactivé en `text-m-muted` (gris des bordures) au lieu de `text-black/60` sur les inputs à floating-label (InputText, Email, Password, Amount, Phone, Upload, Autocomplete, TextArea, RichText)
+* InputAutocomplete : suppression de 4 sources de saut visuel au focus / ouverture (extra translate label, padding `grow-height:focus`, `focus:pl-[11px]`, `!border-b-0` remplacé par `!border-b-transparent`)
+* Select / SelectCheckbox : mêmes correctifs anti-saut (suppression du padding `grow-height:focus` et remplacement de `!border-b-0` / `!border-t-0` par leurs variantes `transparent`)
+* MalioButton : largeur par défaut alignée sur `w-[200px]` (au lieu de `w-[240px]`) pour correspondre au sizing des formulaires de l'app
diff --git a/COMPONENTS.md b/COMPONENTS.md
index 72182c8..69210b5 100644
--- a/COMPONENTS.md
+++ b/COMPONENTS.md
@@ -146,7 +146,7 @@ Champ téléphone (`type="tel"` + `inputmode="tel"`) avec icône `mdi:phone-outl
 
 ## MalioInputAutocomplete
 
-Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtrer une liste d'options, ou pour déclencher une recherche côté parent (API). Le parent alimente `options` et `loading` en réponse à l'event `search` — c'est lui qui gère l'appel API, l'auth, la transformation et le cache.
+Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtrer une liste d'options, ou pour déclencher une recherche côté parent (API). Par défaut le parent alimente `options` et `loading` en réponse à l'event `search` — c'est lui qui gère l'appel API, l'auth, la transformation et le cache. Pour une liste **statique** courte, activer `localFilter` fait filtrer le composant lui-même (case-insensitive `label.includes(query)`) sans avoir à brancher `@search`.
 
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
@@ -159,6 +159,7 @@ Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtr
 | `debounce` | `number` | `300` | Délai (ms) avant émission de `search` |
 | `minSearchLength` | `number` | `0` | Caractères mini avant d'émettre `search` |
 | `allowCreate` | `boolean` | `false` | Autorise la saisie libre validée par Entrée (émet `create`) |
+| `localFilter` | `boolean` | `false` | Filtre `options` côté client par sous-chaîne du label (case-insensitive). À utiliser pour les listes statiques courtes ; en mode API on laisse `false` et le parent répond à `@search`. |
 | `iconName` | `string` | `''` | Icône Iconify décorative |
 | `iconPosition` | `'left' \| 'right'` | `'left'` | Position de l'icône décorative |
 | `iconSize` | `string \| number` | `24` | Taille de l'icône |
@@ -185,8 +186,8 @@ Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtr
 **Clavier :** `↓` / `↑` navigation, `Entrée` sélection (ou création), `Échap` ferme le dropdown.
 
 ```vue
-<!-- Usage statique -->
-<MalioInputAutocomplete v-model="country" label="Pays" :options="countries" />
+<!-- Usage statique (filtrage côté client via local-filter) -->
+<MalioInputAutocomplete v-model="country" label="Pays" :options="countries" local-filter />
 
 <!-- Usage API (parent gère le fetch) -->
 <MalioInputAutocomplete
diff --git a/app/components/malio/button/Button.test.ts b/app/components/malio/button/Button.test.ts
index 2534828..972bd1b 100644
--- a/app/components/malio/button/Button.test.ts
+++ b/app/components/malio/button/Button.test.ts
@@ -162,7 +162,7 @@ describe('MalioButton', () => {
   it('applies correct dimensions', () => {
     const wrapper = mountComponent()
 
-    expect(wrapper.get('button').classes()).toContain('w-[240px]')
+    expect(wrapper.get('button').classes()).toContain('w-[200px]')
     expect(wrapper.get('button').classes()).toContain('h-[40px]')
   })
 
diff --git a/app/components/malio/button/Button.vue b/app/components/malio/button/Button.vue
index c6e3205..397eb83 100644
--- a/app/components/malio/button/Button.vue
+++ b/app/components/malio/button/Button.vue
@@ -84,7 +84,7 @@ const variantClasses = computed(() => {
 
 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',
+    'inline-flex w-[200px] 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,
   ),
diff --git a/app/components/malio/checkbox/Checkbox.vue b/app/components/malio/checkbox/Checkbox.vue
index a968a15..a5ee3df 100644
--- a/app/components/malio/checkbox/Checkbox.vue
+++ b/app/components/malio/checkbox/Checkbox.vue
@@ -30,7 +30,6 @@
     </label>
 
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${inputId}-describedby`"
       :class="mergedMessageClass"
     >
@@ -121,7 +120,7 @@ const mergedLabelClass = computed(() =>
 
 const mergedMessageClass = computed(() =>
   twMerge(
-    'text-xs',
+    'text-xs min-h-[1rem]',
     hasError.value
       ? 'text-m-danger'
       : hasSuccess.value
diff --git a/app/components/malio/date/internal/CalendarField.vue b/app/components/malio/date/internal/CalendarField.vue
index 15e9148..b89d616 100644
--- a/app/components/malio/date/internal/CalendarField.vue
+++ b/app/components/malio/date/internal/CalendarField.vue
@@ -85,11 +85,10 @@
     </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',
+        'mt-1 ml-[2px] text-xs min-h-[1rem]',
       ]"
     >
       {{ error || success || hint }}
diff --git a/app/components/malio/input/Input.test.ts b/app/components/malio/input/Input.test.ts
index 167bb35..85db24c 100644
--- a/app/components/malio/input/Input.test.ts
+++ b/app/components/malio/input/Input.test.ts
@@ -126,6 +126,13 @@ describe('MalioInputText', () => {
     expect(wrapper.get('input').classes()).toContain('text-black/60')
   })
 
+  it('shows muted label color when disabled (matches border color)', () => {
+    const wrapper = mountInput({label: 'Email', disabled: true, modelValue: 'foo@bar.com'})
+
+    expect(wrapper.get('label').classes()).toContain('text-m-muted')
+    expect(wrapper.get('label').classes()).not.toContain('text-black/60')
+  })
+
   it('emits update:modelValue on input change', async () => {
     const wrapper = mountInput({modelValue: ''})
 
@@ -253,6 +260,15 @@ describe('MalioInputText', () => {
     expect(wrapper.get('p.text-m-muted').text()).toBe('Hint message test')
   })
 
+  it('reserves space for the message even when no hint/error/success is set', () => {
+    const wrapper = mountInput({})
+
+    const p = wrapper.find('p')
+    expect(p.exists()).toBe(true)
+    expect(p.text()).toBe('')
+    expect(p.classes()).toContain('min-h-[1rem]')
+  })
+
   it('does not render label when label prop is missing', () => {
     const wrapper = mountInput({labelClass: 'text-red-500'})
 
diff --git a/app/components/malio/input/InputAmount.vue b/app/components/malio/input/InputAmount.vue
index 210cea9..3226bdc 100644
--- a/app/components/malio/input/InputAmount.vue
+++ b/app/components/malio/input/InputAmount.vue
@@ -44,7 +44,6 @@
 
     </div>
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -52,7 +51,7 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'mt-1 text-xs ml-[2px] ',
+          'mt-1 text-xs ml-[2px] min-h-[1rem]',
         ]"
     >
       {{ hint || error || success }}
@@ -109,7 +108,7 @@ const props = withDefaults(
     hint: '',
     error: '',
     success: '',
-    iconSize: 24,
+    iconSize: 20,
     iconColor: 'text-m-muted',
   },
 )
@@ -153,12 +152,13 @@ const mergedLabelClass = computed(() =>
     'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
     labelPositionClass.value,
     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',
+        : disabled.value
+          ? 'text-m-muted'
+          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
diff --git a/app/components/malio/input/InputAutocomplete.test.ts b/app/components/malio/input/InputAutocomplete.test.ts
index c7a56bc..64810f8 100644
--- a/app/components/malio/input/InputAutocomplete.test.ts
+++ b/app/components/malio/input/InputAutocomplete.test.ts
@@ -28,6 +28,7 @@ type InputAutocompleteProps = {
   debounce?: number
   minSearchLength?: number
   allowCreate?: boolean
+  localFilter?: boolean
   iconName?: string
   iconPosition?: 'left' | 'right'
   iconSize?: string | number
@@ -427,4 +428,82 @@ describe('MalioInputAutocomplete', () => {
 
     expect(wrapper.get('input').element.value).toBe('Custom')
   })
+
+  it('does not filter options when localFilter is false (default)', async () => {
+    const wrapper = mountComponent({options})
+
+    await wrapper.get('input').trigger('focus')
+    await wrapper.get('input').setValue('fr')
+
+    expect(wrapper.findAll('[data-test="option"]')).toHaveLength(3)
+  })
+
+  it('filters options client-side when localFilter is true', async () => {
+    const wrapper = mountComponent({options, localFilter: true})
+
+    await wrapper.get('input').trigger('focus')
+    await wrapper.get('input').setValue('fr')
+
+    const items = wrapper.findAll('[data-test="option"]')
+    expect(items).toHaveLength(1)
+    expect(items[0].text()).toBe('France')
+  })
+
+  it('localFilter is case-insensitive and matches substrings', async () => {
+    const wrapper = mountComponent({options, localFilter: true})
+
+    await wrapper.get('input').trigger('focus')
+    await wrapper.get('input').setValue('GIQ')
+
+    const items = wrapper.findAll('[data-test="option"]')
+    expect(items).toHaveLength(1)
+    expect(items[0].text()).toBe('Belgique')
+  })
+
+  it('localFilter shows all options when input is empty', async () => {
+    const wrapper = mountComponent({options, localFilter: true})
+
+    await wrapper.get('input').trigger('focus')
+
+    expect(wrapper.findAll('[data-test="option"]')).toHaveLength(3)
+  })
+
+  it('localFilter shows the no-results state when nothing matches', async () => {
+    const wrapper = mountComponent({options, localFilter: true})
+
+    await wrapper.get('input').trigger('focus')
+    await wrapper.get('input').setValue('zzzzz')
+
+    expect(wrapper.findAll('[data-test="option"]')).toHaveLength(0)
+    expect(wrapper.find('[data-test="no-results-text"]').exists()).toBe(true)
+  })
+
+  it('keeps the floating label at the same position whether focused or not (no jump)', async () => {
+    const wrapper = mountComponent({options, label: 'Pays', modelValue: 'fr'})
+
+    // when a value is selected and the field is not focused, the label is already floated
+    const labelClasses = wrapper.get('label').classes()
+    expect(labelClasses).toContain('-translate-y-[1.25rem]')
+    // and there is no extra peer-focus translate that would make it jump on click
+    expect(labelClasses).not.toContain('peer-focus:-translate-y-[1.55rem]')
+  })
+
+  it('does not shift inner text horizontally on focus (no focus:pl change)', () => {
+    const wrapper = mountComponent({options})
+
+    const inputClasses = wrapper.get('input').classes()
+    expect(inputClasses).not.toContain('focus:pl-[11px]')
+  })
+
+  it('keeps the bottom border allocation when open (transparent, not zero)', async () => {
+    const wrapper = mountComponent({options})
+
+    await wrapper.get('input').trigger('focus')
+
+    const inputClasses = wrapper.get('input').classes()
+    // border-b-0 would shrink the bottom border to 0px and grow content area by 1px;
+    // border-b-transparent keeps the 1px allocation but hides the line
+    expect(inputClasses).not.toContain('!border-b-0')
+    expect(inputClasses).toContain('!border-b-transparent')
+  })
 })
diff --git a/app/components/malio/input/InputAutocomplete.vue b/app/components/malio/input/InputAutocomplete.vue
index 5c57090..00321f5 100644
--- a/app/components/malio/input/InputAutocomplete.vue
+++ b/app/components/malio/input/InputAutocomplete.vue
@@ -107,7 +107,7 @@
           {{ minSearchText }}
         </li>
         <li
-          v-else-if="options.length === 0"
+          v-else-if="filteredOptions.length === 0"
           class="px-3 py-2 text-m-muted"
           data-test="no-results-text"
         >
@@ -115,7 +115,7 @@
         </li>
         <template v-else>
           <li
-            v-for="(opt, index) in options"
+            v-for="(opt, index) in filteredOptions"
             :id="optionId(index)"
             :key="String(opt.value)"
             data-test="option"
@@ -136,11 +136,10 @@
       </ul>
     </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',
+        'mt-1 ml-[2px] text-xs min-h-[1rem]',
       ]"
     >
       {{ hint || error || success }}
@@ -180,6 +179,7 @@ const props = withDefaults(
     debounce?: number
     minSearchLength?: number
     allowCreate?: boolean
+    localFilter?: boolean
     iconName?: string
     iconPosition?: 'left' | 'right'
     iconSize?: string | number
@@ -207,6 +207,7 @@ const props = withDefaults(
     debounce: 300,
     minSearchLength: 0,
     allowCreate: false,
+    localFilter: false,
     iconName: '',
     iconPosition: 'left',
     iconSize: 24,
@@ -253,9 +254,18 @@ const showMinSearch = computed(() =>
   props.minSearchLength > 0 && inputValue.value.length < props.minSearchLength,
 )
 
+const filteredOptions = computed(() => {
+  if (!props.localFilter) return props.options
+  const query = inputValue.value.trim().toLowerCase()
+  if (query === '') return props.options
+  return props.options.filter(opt =>
+    opt.label.toLowerCase().includes(query),
+  )
+})
+
 const optionId = (index: number) => `${inputId.value}-option-${index}`
 const activeOptionId = computed(() =>
-  activeIndex.value >= 0 && props.options[activeIndex.value]
+  activeIndex.value >= 0 && filteredOptions.value[activeIndex.value]
     ? optionId(activeIndex.value)
     : undefined,
 )
@@ -294,11 +304,6 @@ const iconInputPaddingClass = computed(() => {
   return parts.join(' ')
 })
 
-const focusPaddingClass = computed(() => {
-  if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
-  return 'focus:pl-[11px]'
-})
-
 const labelPositionClass = computed(() =>
   props.iconName && props.iconPosition === 'left' ? 'left-11' : 'left-3',
 )
@@ -315,10 +320,9 @@ const mergedInputClass = computed(() =>
       : hasSuccess.value
         ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
         : 'focus:border-m-primary',
-    isOpen.value ? '!rounded-b-none !border-b-0' : '',
+    isOpen.value ? '!rounded-b-none !border-b-transparent' : '',
     props.inputClass,
     iconInputPaddingClass.value,
-    focusPaddingClass.value,
   ),
 )
 
@@ -326,13 +330,14 @@ const mergedLabelClass = computed(() =>
   twMerge(
     'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
     labelPositionClass.value,
-    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
-    props.disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
+    shouldFloatLabel.value ? '-translate-y-[1.25rem] scale-90' : '',
     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.disabled
+          ? 'text-m-muted'
+          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
@@ -432,8 +437,8 @@ const onKeydown = (event: KeyboardEvent) => {
 
   if (event.key === 'Enter') {
     event.preventDefault()
-    if (activeIndex.value >= 0 && props.options[activeIndex.value]) {
-      onSelect(props.options[activeIndex.value])
+    if (activeIndex.value >= 0 && filteredOptions.value[activeIndex.value]) {
+      onSelect(filteredOptions.value[activeIndex.value])
       return
     }
     if (props.allowCreate && inputValue.value !== '') {
@@ -450,7 +455,7 @@ const onKeydown = (event: KeyboardEvent) => {
     if (!isOpen.value) {
       isOpen.value = true
     }
-    activeIndex.value = Math.min(activeIndex.value + 1, props.options.length - 1)
+    activeIndex.value = Math.min(activeIndex.value + 1, filteredOptions.value.length - 1)
     return
   }
 
@@ -481,12 +486,7 @@ onBeforeUnmount(() => {
 }
 
 .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;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/app/components/malio/input/InputEmail.vue b/app/components/malio/input/InputEmail.vue
index c0498dd..e728e1e 100644
--- a/app/components/malio/input/InputEmail.vue
+++ b/app/components/malio/input/InputEmail.vue
@@ -42,7 +42,6 @@
 
     </div>
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -50,7 +49,7 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'mt-1 text-xs ml-[2px] ',
+          'mt-1 text-xs ml-[2px] min-h-[1rem]',
         ]"
     >
       {{ hint || error || success }}
@@ -147,12 +146,13 @@ const mergedLabelClass = computed(() =>
     'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
     labelPositionClass.value,
     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',
+        : disabled.value
+          ? 'text-m-muted'
+          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
diff --git a/app/components/malio/input/InputNumber.vue b/app/components/malio/input/InputNumber.vue
index d39c2b4..78ed4d2 100644
--- a/app/components/malio/input/InputNumber.vue
+++ b/app/components/malio/input/InputNumber.vue
@@ -51,7 +51,6 @@
 
     </div>
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -59,7 +58,7 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'text-xs ml-[2px] ',
+          'text-xs ml-[2px] min-h-[1rem]',
         ]"
     >
       {{ hint || error || success }}
diff --git a/app/components/malio/input/InputPassword.vue b/app/components/malio/input/InputPassword.vue
index c28d73e..4bd805d 100644
--- a/app/components/malio/input/InputPassword.vue
+++ b/app/components/malio/input/InputPassword.vue
@@ -47,7 +47,6 @@
 
     </div>
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -55,7 +54,7 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'mt-1 text-xs ml-[2px] ',
+          'mt-1 text-xs ml-[2px] min-h-[1rem]',
         ]"
     >
       {{ hint || error || success }}
@@ -155,12 +154,13 @@ const mergedLabelClass = computed(() =>
     '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',
+        : disabled.value
+          ? 'text-m-muted'
+          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
diff --git a/app/components/malio/input/InputPhone.test.ts b/app/components/malio/input/InputPhone.test.ts
index 95e334c..3bce6d5 100644
--- a/app/components/malio/input/InputPhone.test.ts
+++ b/app/components/malio/input/InputPhone.test.ts
@@ -298,6 +298,41 @@ describe('MalioInputPhone', () => {
     expect(wrapper.get('input').classes()).toContain('!pr-10')
   })
 
+  it('shows default add button color when empty and unfocused', () => {
+    const wrapper = mountComponent({addable: true})
+
+    expect(wrapper.get('[data-test="add-button"]').classes()).toContain('text-m-muted')
+    expect(wrapper.get('[data-test="add-button"]').classes()).not.toContain('text-m-primary')
+  })
+
+  it('shows primary add button color on focus', async () => {
+    const wrapper = mountComponent({addable: true})
+
+    await wrapper.get('input').trigger('focus')
+
+    expect(wrapper.get('[data-test="add-button"]').classes()).toContain('text-m-primary')
+  })
+
+  it('shows black add button color when filled and unfocused', () => {
+    const wrapper = mountComponent({addable: true, modelValue: '+33612345678'})
+
+    expect(wrapper.get('[data-test="add-button"]').classes()).toContain('text-black')
+  })
+
+  it('error overrides focus color on add button', async () => {
+    const wrapper = mountComponent({addable: true, error: 'Numéro invalide'})
+
+    await wrapper.get('input').trigger('focus')
+
+    expect(wrapper.get('[data-test="add-button"]').classes()).toContain('text-m-danger')
+  })
+
+  it('success applies to add button', () => {
+    const wrapper = mountComponent({addable: true, success: 'Numéro valide'})
+
+    expect(wrapper.get('[data-test="add-button"]').classes()).toContain('text-m-success')
+  })
+
   it('applies mask via maska directive', async () => {
     const wrapper = mountComponent({mask: '+## # ## ## ## ##'})
 
diff --git a/app/components/malio/input/InputPhone.vue b/app/components/malio/input/InputPhone.vue
index 9d3b9ee..33a61cc 100644
--- a/app/components/malio/input/InputPhone.vue
+++ b/app/components/malio/input/InputPhone.vue
@@ -60,7 +60,6 @@
 
     </div>
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -68,7 +67,7 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'mt-1 text-xs ml-[2px] ',
+          'mt-1 text-xs ml-[2px] min-h-[1rem]',
         ]"
     >
       {{ hint || error || success }}
@@ -175,19 +174,21 @@ const mergedLabelClass = computed(() =>
     'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
     labelPositionClass.value,
     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',
+        : disabled.value
+          ? 'text-m-muted'
+          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
 
 const mergedAddButtonClass = computed(() =>
   twMerge(
-    'absolute right-[10px] top-1/2 -translate-y-1/2 cursor-pointer text-m-primary transition-opacity hover:opacity-70',
+    'absolute right-[10px] top-1/2 -translate-y-1/2 cursor-pointer transition-opacity hover:opacity-70',
+    iconStateClass.value,
     (props.disabled || props.readonly) ? 'cursor-not-allowed opacity-40 hover:opacity-40' : '',
   ),
 )
diff --git a/app/components/malio/input/InputRichText.vue b/app/components/malio/input/InputRichText.vue
index e07ae1b..a2e9ddc 100644
--- a/app/components/malio/input/InputRichText.vue
+++ b/app/components/malio/input/InputRichText.vue
@@ -184,7 +184,6 @@
     </div>
 
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${editorId}-describedby`"
       :class="[
         hasError
@@ -192,7 +191,7 @@
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
-        'mt-1 text-xs ml-[2px]',
+        'mt-1 text-xs ml-[2px] min-h-[1rem]',
       ]"
     >
       {{ error || success || hint }}
@@ -279,10 +278,11 @@ const mergedLabelClass = computed(() =>
       ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
-        : isFocused.value
-          ? 'text-m-primary'
-          : 'text-m-text',
-    props.disabled ? 'text-black/60' : '',
+        : props.disabled
+          ? 'text-m-muted'
+          : isFocused.value
+            ? 'text-m-primary'
+            : 'text-m-text',
     props.labelClass,
   ),
 )
diff --git a/app/components/malio/input/InputText.vue b/app/components/malio/input/InputText.vue
index 80a9ccf..c574f29 100644
--- a/app/components/malio/input/InputText.vue
+++ b/app/components/malio/input/InputText.vue
@@ -44,7 +44,6 @@
 
     </div>
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -52,7 +51,7 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'mt-1 text-xs ml-[2px] ',
+          'mt-1 text-xs ml-[2px] min-h-[1rem]',
         ]"
     >
       {{ hint || error || success }}
@@ -158,12 +157,13 @@ const mergedLabelClass = computed(() =>
     'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
     labelPositionClass.value,
     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',
+        : disabled.value
+          ? 'text-m-muted'
+          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
diff --git a/app/components/malio/input/InputTextArea.test.ts b/app/components/malio/input/InputTextArea.test.ts
index e5819fd..89913fc 100644
--- a/app/components/malio/input/InputTextArea.test.ts
+++ b/app/components/malio/input/InputTextArea.test.ts
@@ -149,4 +149,38 @@ describe('MalioInputTextArea', () => {
     expect(wrapper.find('p.text-m-success').exists()).toBe(false)
     expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error')
   })
+
+  it('renders as a single root element (works as a single grid item)', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const wrapper = mount(InputTextAreaForTest, {
+      attachTo: host,
+    })
+
+    // host > div[data-v-app] > component roots
+    const app = host.firstElementChild as HTMLElement
+    expect(app.children.length).toBe(1)
+
+    wrapper.unmount()
+    host.remove()
+  })
+
+  it('applies primary scrollbar class on focus', async () => {
+    const wrapper = mount(InputTextAreaForTest)
+
+    expect(wrapper.get('textarea').classes()).not.toContain('textarea-scrollbar-primary')
+
+    await wrapper.get('textarea').trigger('focus')
+
+    expect(wrapper.get('textarea').classes()).toContain('textarea-scrollbar-primary')
+  })
+
+  it('removes primary scrollbar class on blur', async () => {
+    const wrapper = mount(InputTextAreaForTest)
+
+    await wrapper.get('textarea').trigger('focus')
+    await wrapper.get('textarea').trigger('blur')
+
+    expect(wrapper.get('textarea').classes()).not.toContain('textarea-scrollbar-primary')
+  })
 })
diff --git a/app/components/malio/input/InputTextArea.vue b/app/components/malio/input/InputTextArea.vue
index e236ca9..691a892 100644
--- a/app/components/malio/input/InputTextArea.vue
+++ b/app/components/malio/input/InputTextArea.vue
@@ -1,79 +1,82 @@
 <template>
   <div :class="mergedGroupClass">
-    <textarea
-      :id="inputId"
-      :name="name"
+    <div class="relative w-full flex-1">
+      <textarea
+        :id="inputId"
+        :name="name"
 
-      :autocomplete="autocomplete"
-      class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent overflow-auto"
-      :class="[
-      isFilled ? 'border-black' : 'border-m-muted',
-      disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
-      hasError
-        ? 'border-m-danger focus:border-m-danger'
-        : hasSuccess
-          ? 'border-m-success focus:border-m-success'
-          : 'focus:border-m-primary',
-      textInput,
-      showCounterComputed ? 'pb-6' : '',
-      rounded,
-    ]"
-      :required="required"
-      :maxlength="maxLength"
-      :rows="rowsCount"
-      :disabled="disabled"
-      :value="currentValue"
-      :readonly="readonly"
-      :aria-invalid="hasError"
-      :aria-describedby="describedBy"
-      :style="textareaStyle"
-      v-bind="attrs"
-      placeholder="_"
-      @input="onInput"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-    <label
-      v-if="label"
-      :for="inputId"
-      class="floating-label absolute left-3 top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
-      :class="[
-    shouldFloatLabel ? '-translate-y-[1.30rem] scale-90' : '',
-    disabled ? 'text-black/60' : '',
-    hasError
-      ? 'text-m-danger'
-      : hasSuccess
-        ? 'text-m-success'
-        : isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
-      textLabel,
-      ]"
-    >
-      {{ label }}
-    </label>
-    <span
-      v-if="showCounterComputed"
-      class="pointer-events-none absolute bottom-2 left-3 text-xs text-m-muted"
-    >
-      {{ currentLength }}/{{ maxLength }}
-    </span>
-  </div>
-  <div
-    v-if="hasError || hasSuccess || hint"
-    class="mt-1 flex items-center justify-between gap-2 text-xs"
-  >
-    <p
-      :id="`${inputId}-describedby`"
-      :class="[
+        :autocomplete="autocomplete"
+        class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent overflow-auto"
+        :class="[
+        isFilled ? 'border-black' : 'border-m-muted',
+        disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
         hasError
-          ? 'text-m-danger'
+          ? 'border-m-danger focus:border-m-danger'
           : hasSuccess
-            ? 'text-m-success'
-            : 'text-m-muted',
-        'ml-[2px]',
+            ? 'border-m-success focus:border-m-success'
+            : 'focus:border-m-primary',
+        isFocused ? 'textarea-scrollbar-primary' : '',
+        textInput,
+        showCounterComputed ? 'pb-6' : '',
+        rounded,
       ]"
+        :required="required"
+        :maxlength="maxLength"
+        :rows="rowsCount"
+        :disabled="disabled"
+        :value="currentValue"
+        :readonly="readonly"
+        :aria-invalid="hasError"
+        :aria-describedby="describedBy"
+        :style="textareaStyle"
+        v-bind="attrs"
+        placeholder="_"
+        @input="onInput"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      />
+      <label
+        v-if="label"
+        :for="inputId"
+        class="floating-label absolute left-3 top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
+        :class="[
+      shouldFloatLabel ? '-translate-y-[1.30rem] scale-90' : '',
+      hasError
+        ? 'text-m-danger'
+        : hasSuccess
+          ? 'text-m-success'
+          : disabled
+            ? 'text-m-muted'
+            : isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
+        textLabel,
+        ]"
+      >
+        {{ label }}
+      </label>
+      <span
+        v-if="showCounterComputed"
+        class="pointer-events-none absolute bottom-2 left-3 text-xs text-m-muted"
+      >
+        {{ currentLength }}/{{ maxLength }}
+      </span>
+    </div>
+    <div
+      class="mt-1 flex items-center justify-between gap-2 text-xs min-h-[1rem]"
     >
-      {{ error || success || hint }}
-    </p>
+      <p
+        :id="`${inputId}-describedby`"
+        :class="[
+          hasError
+            ? 'text-m-danger'
+            : hasSuccess
+              ? 'text-m-success'
+              : 'text-m-muted',
+          'ml-[2px]',
+        ]"
+      >
+        {{ error || success || hint }}
+      </p>
+    </div>
   </div>
 </template>
 
@@ -138,7 +141,7 @@ const props = withDefaults(
 )
 
 const mergedGroupClass = computed(() =>
-  twMerge('relative w-full', props.groupClass),
+  twMerge('flex flex-col w-full', props.groupClass),
 )
 
 const attrs = useAttrs()
@@ -188,4 +191,8 @@ const onInput = (event: Event) => {
   background: white;
   padding: 0 0.25rem;
 }
+
+.textarea-scrollbar-primary {
+  scrollbar-color: rgb(var(--m-primary)) transparent;
+}
 </style>
diff --git a/app/components/malio/input/InputUpload.vue b/app/components/malio/input/InputUpload.vue
index 70e873a..fd22bfe 100644
--- a/app/components/malio/input/InputUpload.vue
+++ b/app/components/malio/input/InputUpload.vue
@@ -50,7 +50,6 @@
 
     </div>
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${inputId}-describedby`"
       :class="[
           hasError
@@ -58,7 +57,7 @@
             : hasSuccess
               ? 'text-m-success'
               : 'text-m-muted',
-          'mt-1 text-xs ml-[2px] ',
+          'mt-1 text-xs ml-[2px] min-h-[1rem]',
         ]"
     >
       {{ hint || error || success }}
@@ -144,12 +143,13 @@ const mergedLabelClass = computed(() =>
     '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',
+        : disabled.value
+          ? 'text-m-muted'
+          : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
     props.labelClass,
   ),
 )
diff --git a/app/components/malio/select/Select.test.ts b/app/components/malio/select/Select.test.ts
index dae6334..0e4cbce 100644
--- a/app/components/malio/select/Select.test.ts
+++ b/app/components/malio/select/Select.test.ts
@@ -207,4 +207,70 @@ describe('MalioSelect', () => {
     expect(wrapper.find('p.text-m-success').exists()).toBe(false)
     expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error')
   })
+
+  it('shows muted chevron color when empty and closed', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-muted')
+  })
+
+  it('shows primary chevron color when open', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-primary')
+  })
+
+  it('shows black chevron color when an option is selected and closed', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: 'fr', options},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-black')
+  })
+
+  it('shows muted chevron color when disabled', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: 'fr', options, disabled: true},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-muted')
+  })
+
+  it('shows danger chevron color on error even when open', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options, error: 'Selection error'},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-danger')
+  })
+
+  it('shows success chevron color on success', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options, success: 'OK'},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-success')
+  })
+
+  it('keeps the bottom border allocation when open downward (transparent, not zero)', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const buttonClasses = wrapper.get('button').classes()
+    // !border-b-0 would shrink the bottom border to 0px and grow content area by 1px;
+    // !border-b-transparent keeps the 1px allocation but hides the line
+    expect(buttonClasses).not.toContain('!border-b-0')
+    expect(buttonClasses).toContain('!border-b-transparent')
+  })
 })
diff --git a/app/components/malio/select/Select.vue b/app/components/malio/select/Select.vue
index c7127f1..2d4540c 100644
--- a/app/components/malio/select/Select.vue
+++ b/app/components/malio/select/Select.vue
@@ -13,19 +13,19 @@
           hasError
             ? isOpen
               ? openDirection === 'down'
-                ? 'rounded-b-none !border !border-m-danger !border-b-0'
-                : 'rounded-t-none !border !border-m-danger !border-t-0'
+                ? 'rounded-b-none !border !border-m-danger !border-b-transparent'
+                : 'rounded-t-none !border !border-m-danger !border-t-transparent'
               : 'border-m-danger'
             : hasSuccess
               ? isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-success !border-b-0'
-                  : 'rounded-t-none !border !border-m-success !border-t-0'
+                  ? 'rounded-b-none !border !border-m-success !border-b-transparent'
+                  : 'rounded-t-none !border !border-m-success !border-t-transparent'
                 : 'border-m-success'
               : isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-primary !border-b-0'
-                  : 'rounded-t-none !border !border-m-primary !border-t-0'
+                  ? 'rounded-b-none !border !border-m-primary !border-b-transparent'
+                  : 'rounded-t-none !border !border-m-primary !border-t-transparent'
                 : isOptionSelected
                   ? 'border-black'
                   : 'border-m-muted',
@@ -73,13 +73,20 @@
       </span>
 
       <span
+        data-test="chevron"
         class="absolute right-3 top-1/2 -translate-y-1/2"
         :class="[
           hasError
             ? 'text-m-danger'
             : hasSuccess
               ? 'text-m-success'
-              : 'text-current'
+              : disabled
+                ? 'text-m-muted'
+                : isOpen
+                  ? 'text-m-primary'
+                  : isOptionSelected
+                    ? 'text-black'
+                    : 'text-m-muted'
         ]"
       >
       <slot name="icon">
@@ -145,7 +152,6 @@
     </ul>
     </div>
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${buttonId}-describedby`"
       :class="[
         hasError
@@ -153,7 +159,7 @@
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
-        'mt-1 ml-[2px] text-xs',
+        'mt-1 ml-[2px] text-xs min-h-[1rem]',
       ]"
     >
       {{ error || success || hint }}
@@ -330,12 +336,7 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
 }
 
 .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;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/app/components/malio/select/SelectCheckbox.test.ts b/app/components/malio/select/SelectCheckbox.test.ts
index 8956d89..db9c5aa 100644
--- a/app/components/malio/select/SelectCheckbox.test.ts
+++ b/app/components/malio/select/SelectCheckbox.test.ts
@@ -182,4 +182,70 @@ describe('MalioSelectCheckbox', () => {
     const root = wrapper.find('button').element.parentElement
     expect(root?.className).toContain('mt-4')
   })
+
+  it('shows muted chevron color when nothing is selected and closed', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-muted')
+  })
+
+  it('shows primary chevron color when open', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-primary')
+  })
+
+  it('shows black chevron color when options are selected and closed', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr'], options},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-black')
+  })
+
+  it('shows muted chevron color when disabled', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: ['fr'], options, disabled: true},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-muted')
+  })
+
+  it('shows danger chevron color on error even when open', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, error: 'Selection error'},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-danger')
+  })
+
+  it('shows success chevron color on success', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options, success: 'OK'},
+    })
+
+    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-success')
+  })
+
+  it('keeps the bottom border allocation when open downward (transparent, not zero)', async () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const buttonClasses = wrapper.get('button').classes()
+    // !border-b-0 would shrink the bottom border to 0px and grow content area by 1px;
+    // !border-b-transparent keeps the 1px allocation but hides the line
+    expect(buttonClasses).not.toContain('!border-b-0')
+    expect(buttonClasses).toContain('!border-b-transparent')
+  })
 })
diff --git a/app/components/malio/select/SelectCheckbox.vue b/app/components/malio/select/SelectCheckbox.vue
index 16bd449..673f12b 100644
--- a/app/components/malio/select/SelectCheckbox.vue
+++ b/app/components/malio/select/SelectCheckbox.vue
@@ -13,19 +13,19 @@
           hasError
             ? isOpen
               ? openDirection === 'down'
-                ? 'rounded-b-none !border !border-m-danger !border-b-0'
-                : 'rounded-t-none !border !border-m-danger !border-t-0'
+                ? 'rounded-b-none !border !border-m-danger !border-b-transparent'
+                : 'rounded-t-none !border !border-m-danger !border-t-transparent'
               : 'border-m-danger'
             : hasSuccess
               ? isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-success !border-b-0'
-                  : 'rounded-t-none !border !border-m-success !border-t-0'
+                  ? 'rounded-b-none !border !border-m-success !border-b-transparent'
+                  : 'rounded-t-none !border !border-m-success !border-t-transparent'
                 : 'border-m-success'
               : isOpen
                 ? openDirection === 'down'
-                  ? 'rounded-b-none !border !border-m-primary !border-b-0'
-                  : 'rounded-t-none !border !border-m-primary !border-t-0'
+                  ? 'rounded-b-none !border !border-m-primary !border-b-transparent'
+                  : 'rounded-t-none !border !border-m-primary !border-t-transparent'
                 : isOptionSelected
                   ? 'border-black'
                   : 'border-m-muted',
@@ -101,13 +101,20 @@
       </span>
 
       <span
+        data-test="chevron"
         class="absolute right-3 top-1/2 -translate-y-1/2"
         :class="[
           hasError
             ? 'text-m-danger'
             : hasSuccess
               ? 'text-m-success'
-              : 'text-current'
+              : disabled
+                ? 'text-m-muted'
+                : isOpen
+                  ? 'text-m-primary'
+                  : isOptionSelected
+                    ? 'text-black'
+                    : 'text-m-muted'
         ]"
       >
       <slot name="icon">
@@ -194,7 +201,6 @@
     </ul>
     </div>
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${buttonId}-describedby`"
       :class="[
         hasError
@@ -202,7 +208,7 @@
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
-        'mt-1 ml-[2px] text-xs',
+        'mt-1 ml-[2px] text-xs min-h-[1rem]',
       ]"
     >
       {{ error || success || hint }}
@@ -409,12 +415,7 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
 }
 
 .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;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/app/components/malio/time/Time.vue b/app/components/malio/time/Time.vue
index 27eabe7..a3801c7 100644
--- a/app/components/malio/time/Time.vue
+++ b/app/components/malio/time/Time.vue
@@ -58,7 +58,6 @@
     </div>
 
     <p
-      v-if="hint || hasError || hasSuccess"
       :id="`${inputId}-describedby`"
       :class="[
         hasError
@@ -66,7 +65,7 @@
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
-        'mt-1 ml-[2px] text-xs',
+        'mt-1 ml-[2px] text-xs min-h-[1rem]',
       ]"
     >
       {{ error || success || hint }}
diff --git a/app/components/malio/time/TimePicker.vue b/app/components/malio/time/TimePicker.vue
index a292b77..9a5d656 100644
--- a/app/components/malio/time/TimePicker.vue
+++ b/app/components/malio/time/TimePicker.vue
@@ -78,11 +78,10 @@
     </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',
+        'mt-1 ml-[2px] text-xs min-h-[1rem]',
       ]"
     >
       {{ error || success || hint }}