feat(inputs): UX polish across input family + localFilter + focus scrollbar

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>

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')
+  })
 })