From 01f29c2f0f652effd6841da3cf3ce77f1be98a5a Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 16:17:50 +0200
Subject: [PATCH] feat(input) : anneau de focus clavier sur InputPassword

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

diff --git a/app/components/malio/input/InputPassword.vue b/app/components/malio/input/InputPassword.vue
index cf2996e..e5984ef 100644
--- a/app/components/malio/input/InputPassword.vue
+++ b/app/components/malio/input/InputPassword.vue
@@ -20,8 +20,8 @@
         placeholder="_"
         :type="isPasswordVisible ? 'text' : 'password'"
         @input="onInput"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        @focus="isFocused = true; onKbdFocus()"
+        @blur="isFocused = false; onKbdBlur()"
       >
 
       <label
@@ -70,9 +70,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: 'MalioInputPassword', inheritAttrs: false})
 
+const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
+
 const props = withDefaults(
   defineProps<{
     id?: string
@@ -147,6 +150,7 @@ const mergedGroupClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
+    keyboardFocused.value ? 'm-focus-ring-kbd' : '',
     isReadonly.value ? '' : 'grow-height',
     isReadonly.value
       ? 'border-black'