From c427f5a7c5a29f98268813c319dd42b3969b01dc Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 16:27:13 +0200
Subject: [PATCH] feat(input) : anneau de focus clavier sur InputNumber (champ
 + boutons +/-)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/input/InputNumber.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/components/malio/input/InputNumber.vue b/app/components/malio/input/InputNumber.vue
index f9e009f..73ffe7b 100644
--- a/app/components/malio/input/InputNumber.vue
+++ b/app/components/malio/input/InputNumber.vue
@@ -10,6 +10,7 @@
       </label>
       <button
         type="button"
+        class="m-focus-ring rounded-malio"
         :disabled="isMinusDisabled"
         @click="decrement"
       >
@@ -35,11 +36,12 @@
         inputmode="numeric"
         placeholder="_"
         @input="onInput"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="isFocused = true; onKbdFocus()"
+        @blur="isFocused = false; onKbdBlur()"
       >
       <button
         type="button"
+        class="m-focus-ring rounded-malio"
         :disabled="isPlusDisabled"
         @click="increment"
       >
@@ -73,9 +75,12 @@ import {computed, ref, useAttrs, useId} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {useKbdFocusRing} from '../shared/useKbdFocusRing'
 
 defineOptions({name: 'MalioInputNumber', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string
@@ -184,6 +189,7 @@ const mergedGroupClass = computed(() =>
 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',
+    keyboardFocused.value ? 'm-focus-ring-kbd' : '',
     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'