@datametria/vue-components 2.4.0 → 2.4.2

package/src/components/DatametriaPasswordInput.vue

@@ -1,448 +1,437 @@
-<template>
-  <div class="datametria-password-input">
-    <label v-if="label" :for="inputId" class="datametria-password-input__label">
-      {{ label }}
-      <span v-if="required" class="datametria-password-input__required">*</span>
-    </label>
-    
-    <div class="datametria-password-input__wrapper">
-      <input
-        :id="inputId"
-        :value="modelValue"
-        :type="showPassword ? 'text' : 'password'"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :required="required"
-        :autocomplete="autocomplete"
-        :class="inputClasses"
-        :aria-invalid="!!errorMessage"
-        :aria-describedby="ariaDescribedby"
-        @input="handleInput"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @keyup="checkCapsLock"
-      />
-      
-      <button
-        type="button"
-        class="datametria-password-input__toggle"
-        :aria-label="showPassword ? 'Ocultar senha' : 'Mostrar senha'"
-        @click="toggleVisibility"
-        tabindex="-1"
-      >
-        <svg v-if="showPassword" class="datametria-password-input__icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-        </svg>
-        <svg v-else class="datametria-password-input__icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-        </svg>
-      </button>
-    </div>
-
-    <!-- Caps Lock Warning -->
-    <p v-if="capsLockOn" class="datametria-password-input__warning">
-      ⚠️ Caps Lock está ativado
-    </p>
-
-    <!-- Strength Indicator -->
-    <div v-if="showStrength && modelValue" class="datametria-password-input__strength">
-      <div class="datametria-password-input__strength-bar">
-        <div 
-          :class="strengthBarClasses"
-          :style="{ width: `${strengthPercentage}%` }"
-        ></div>
-      </div>
-      <span :class="strengthTextClasses">{{ strengthText }}</span>
-    </div>
-
-    <!-- Requirements -->
-    <div v-if="showRequirements && isFocused" :id="`${inputId}-requirements`" class="datametria-password-input__requirements">
-      <p class="datametria-password-input__requirements-title">A senha deve conter:</p>
-      <ul class="datametria-password-input__requirements-list">
-        <li :class="{ 'valid': requirements.minLength }">
-          <span class="datametria-password-input__check">{{ requirements.minLength ? '✓' : '○' }}</span>
-          Mínimo {{ minLength }} caracteres
-        </li>
-        <li :class="{ 'valid': requirements.hasUppercase }">
-          <span class="datametria-password-input__check">{{ requirements.hasUppercase ? '✓' : '○' }}</span>
-          Pelo menos 1 letra maiúscula
-        </li>
-        <li :class="{ 'valid': requirements.hasLowercase }">
-          <span class="datametria-password-input__check">{{ requirements.hasLowercase ? '✓' : '○' }}</span>
-          Pelo menos 1 letra minúscula
-        </li>
-        <li :class="{ 'valid': requirements.hasNumber }">
-          <span class="datametria-password-input__check">{{ requirements.hasNumber ? '✓' : '○' }}</span>
-          Pelo menos 1 número
-        </li>
-        <li :class="{ 'valid': requirements.hasSpecial }">
-          <span class="datametria-password-input__check">{{ requirements.hasSpecial ? '✓' : '○' }}</span>
-          Pelo menos 1 caractere especial
-        </li>
-      </ul>
-    </div>
-
-    <!-- Error Message -->
-    <p v-if="errorMessage" :id="`${inputId}-error`" class="datametria-password-input__error">
-      {{ errorMessage }}
-    </p>
-
-    <!-- Help Text -->
-    <p v-if="helpText && !errorMessage" :id="`${inputId}-help`" class="datametria-password-input__help">
-      {{ helpText }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-
-interface Props {
-  modelValue?: string
-  label?: string
-  placeholder?: string
-  errorMessage?: string
-  helpText?: string
-  disabled?: boolean
-  required?: boolean
-  minLength?: number
-  showStrength?: boolean
-  showRequirements?: boolean
-  autocomplete?: 'current-password' | 'new-password'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  disabled: false,
-  required: false,
-  minLength: 8,
-  showStrength: true,
-  showRequirements: true,
-  autocomplete: 'current-password'
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  'strength-change': [strength: number]
-}>()
-
-const inputId = computed(() => `password-${Math.random().toString(36).substr(2, 9)}`)
-const showPassword = ref(false)
-const isFocused = ref(false)
-const capsLockOn = ref(false)
-
-// Requirements validation
-const requirements = computed(() => ({
-  minLength: props.modelValue.length >= props.minLength,
-  hasUppercase: /[A-Z]/.test(props.modelValue),
-  hasLowercase: /[a-z]/.test(props.modelValue),
-  hasNumber: /\d/.test(props.modelValue),
-  hasSpecial: /[!@#$%^&*(),.?":{}|<>]/.test(props.modelValue)
-}))
-
-// Password strength calculation
-const strength = computed(() => {
-  if (!props.modelValue) return 0
-  
-  let score = 0
-  const reqs = requirements.value
-  
-  if (reqs.minLength) score += 20
-  if (reqs.hasUppercase) score += 20
-  if (reqs.hasLowercase) score += 20
-  if (reqs.hasNumber) score += 20
-  if (reqs.hasSpecial) score += 20
-  
-  return score
-})
-
-const strengthPercentage = computed(() => strength.value)
-
-const strengthText = computed(() => {
-  const s = strength.value
-  if (s === 0) return ''
-  if (s <= 40) return 'Fraca'
-  if (s <= 60) return 'Média'
-  if (s <= 80) return 'Boa'
-  return 'Forte'
-})
-
-const strengthBarClasses = computed(() => [
-  'datametria-password-input__strength-fill',
-  {
-    'datametria-password-input__strength-fill--weak': strength.value <= 40,
-    'datametria-password-input__strength-fill--medium': strength.value > 40 && strength.value <= 60,
-    'datametria-password-input__strength-fill--good': strength.value > 60 && strength.value <= 80,
-    'datametria-password-input__strength-fill--strong': strength.value > 80
-  }
-])
-
-const strengthTextClasses = computed(() => [
-  'datametria-password-input__strength-text',
-  {
-    'datametria-password-input__strength-text--weak': strength.value <= 40,
-    'datametria-password-input__strength-text--medium': strength.value > 40 && strength.value <= 60,
-    'datametria-password-input__strength-text--good': strength.value > 60 && strength.value <= 80,
-    'datametria-password-input__strength-text--strong': strength.value > 80
-  }
-])
-
-const inputClasses = computed(() => [
-  'datametria-password-input__field',
-  {
-    'datametria-password-input__field--error': props.errorMessage,
-    'datametria-password-input__field--disabled': props.disabled
-  }
-])
-
-const ariaDescribedby = computed(() => {
-  const ids = []
-  if (props.showRequirements && isFocused.value) ids.push(`${inputId.value}-requirements`)
-  if (props.errorMessage) ids.push(`${inputId.value}-error`)
-  if (props.helpText && !props.errorMessage) ids.push(`${inputId.value}-help`)
-  return ids.length > 0 ? ids.join(' ') : undefined
-})
-
-const handleInput = (event: Event) => {
-  const value = (event.target as HTMLInputElement).value
-  emit('update:modelValue', value)
-}
-
-const handleFocus = () => {
-  isFocused.value = true
-}
-
-const handleBlur = () => {
-  isFocused.value = false
-}
-
-const toggleVisibility = () => {
-  showPassword.value = !showPassword.value
-}
-
-const checkCapsLock = (event: KeyboardEvent) => {
-  capsLockOn.value = event.getModifierState('CapsLock')
-}
-
-// Watch strength changes and emit
-watch(strength, (newStrength) => {
-  if (props.modelValue) {
-    emit('strength-change', newStrength)
-  }
-})
-</script>
-
-<style scoped>
-.datametria-password-input {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dm-spacing-2, 0.5rem);
-}
-
-.datametria-password-input__label {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: var(--dm-font-weight-medium, 500);
-  color: var(--dm-neutral-700, #374151);
-}
-
-.datametria-password-input__required {
-  color: var(--dm-error, #ef4444);
-}
-
-.datametria-password-input__wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.datametria-password-input__field {
-  width: 100%;
-  padding: var(--dm-spacing-3, 0.75rem);
-  padding-right: var(--dm-spacing-12, 3rem);
-  border: 1px solid var(--dm-neutral-300, #d1d5db);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  font-size: var(--dm-font-size-base, 1rem);
-  transition: all var(--dm-transition-base, 0.2s);
-}
-
-.datametria-password-input__field:focus {
-  outline: none;
-  border-color: var(--dm-primary, #0072CE);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
-}
-
-.datametria-password-input__field--error {
-  border-color: var(--dm-error, #ef4444);
-}
-
-.datametria-password-input__field--error:focus {
-  border-color: var(--dm-error, #ef4444);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-error, #ef4444) 10%, transparent);
-}
-
-.datametria-password-input__field--disabled {
-  background: var(--dm-neutral-100, #f3f4f6);
-  cursor: not-allowed;
-}
-
-.datametria-password-input__toggle {
-  position: absolute;
-  right: var(--dm-spacing-3, 0.75rem);
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: var(--dm-spacing-1, 0.25rem);
-  color: var(--dm-neutral-500, #6b7280);
-  transition: color var(--dm-transition-base, 0.2s);
-}
-
-.datametria-password-input__toggle:hover {
-  color: var(--dm-neutral-700, #374151);
-}
-
-.datametria-password-input__toggle:focus {
-  outline: 2px solid var(--dm-primary, #0072CE);
-  outline-offset: 2px;
-  border-radius: var(--dm-radius-sm, 0.25rem);
-}
-
-.datametria-password-input__icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.datametria-password-input__warning {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-warning, #f59e0b);
-  margin: 0;
-}
-
-.datametria-password-input__strength {
-  display: flex;
-  align-items: center;
-  gap: var(--dm-spacing-3, 0.75rem);
-}
-
-.datametria-password-input__strength-bar {
-  flex: 1;
-  height: var(--dm-spacing-2, 0.5rem);
-  background: var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-sm, 0.25rem);
-  overflow: hidden;
-}
-
-.datametria-password-input__strength-fill {
-  height: 100%;
-  transition: width var(--dm-transition-slow, 0.3s) ease, background-color var(--dm-transition-slow, 0.3s) ease;
-  border-radius: var(--dm-radius-sm, 0.25rem);
-}
-
-.datametria-password-input__strength-fill--weak {
-  background: var(--dm-error, #ef4444);
-}
-
-.datametria-password-input__strength-fill--medium {
-  background: var(--dm-warning, #f59e0b);
-}
-
-.datametria-password-input__strength-fill--good {
-  background: var(--dm-info, #3b82f6);
-}
-
-.datametria-password-input__strength-fill--strong {
-  background: var(--dm-success, #10b981);
-}
-
-.datametria-password-input__strength-text {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: var(--dm-font-weight-medium, 500);
-  min-width: 4rem;
-}
-
-.datametria-password-input__strength-text--weak {
-  color: var(--dm-error, #ef4444);
-}
-
-.datametria-password-input__strength-text--medium {
-  color: var(--dm-warning, #f59e0b);
-}
-
-.datametria-password-input__strength-text--good {
-  color: var(--dm-info, #3b82f6);
-}
-
-.datametria-password-input__strength-text--strong {
-  color: var(--dm-success, #10b981);
-}
-
-.datametria-password-input__requirements {
-  padding: var(--dm-spacing-3, 0.75rem);
-  background: var(--dm-neutral-50, #f9fafb);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-md, 0.375rem);
-}
-
-.datametria-password-input__requirements-title {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: var(--dm-font-weight-medium, 500);
-  color: var(--dm-neutral-700, #374151);
-  margin: 0 0 var(--dm-spacing-2, 0.5rem) 0;
-}
-
-.datametria-password-input__requirements-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--dm-spacing-1, 0.25rem);
-}
-
-.datametria-password-input__requirements-list li {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-500, #6b7280);
-  display: flex;
-  align-items: center;
-  gap: var(--dm-spacing-2, 0.5rem);
-}
-
-.datametria-password-input__requirements-list li.valid {
-  color: var(--dm-success, #10b981);
-}
-
-.datametria-password-input__check {
-  font-weight: var(--dm-font-weight-semibold, 600);
-  min-width: 1rem;
-}
-
-.datametria-password-input__error {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-error, #ef4444);
-  margin: 0;
-}
-
-.datametria-password-input__help {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-500, #6b7280);
-  margin: 0;
-}
-
-/* Dark Mode Support - Hybrid Approach */
-
-/* Fallback automático (sem JS) */
-@media (prefers-color-scheme: dark) {
-  .datametria-password-input {
-    background: var(--dm-bg-color-dark, #1e1e1e);
-    color: var(--dm-text-primary-dark, #e0e0e0);
-    border-color: var(--dm-border-color-dark, #404040);
+<template>
+  <div class="datametria-password-input" :class="wrapperClasses">
+    <label v-if="label" :for="inputId" class="datametria-password-input__label">
+      {{ label }}
+      <span v-if="required" class="datametria-password-input__required">*</span>
+    </label>
+    
+    <div class="datametria-password-input__wrapper">
+      <input
+        :id="inputId"
+        :value="modelValue"
+        :type="showPassword ? 'text' : 'password'"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :required="required"
+        :autocomplete="autocomplete"
+        :class="inputClasses"
+        :aria-label="label || placeholder"
+        :aria-required="required"
+        :aria-invalid="!!errorMessage"
+        :aria-describedby="ariaDescribedby"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keyup="checkCapsLock"
+      />
+      
+      <button
+        type="button"
+        class="datametria-password-input__toggle"
+        :aria-label="showPassword ? 'Ocultar senha' : 'Mostrar senha'"
+        @click="toggleVisibility"
+      >
+        <svg v-if="showPassword" class="datametria-password-input__icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+        </svg>
+        <svg v-else class="datametria-password-input__icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+        </svg>
+      </button>
+    </div>
+
+    <p v-if="capsLockOn" class="datametria-password-input__warning" role="alert">
+      ⚠️ Caps Lock está ativado
+    </p>
+
+    <div v-if="showStrength && modelValue" class="datametria-password-input__strength">
+      <div class="datametria-password-input__strength-bar">
+        <div :class="strengthBarClasses" :style="{ width: `${strengthPercentage}%` }"></div>
+      </div>
+      <span :class="strengthTextClasses">{{ strengthText }}</span>
+    </div>
+
+    <div v-if="showRequirements && isFocused" :id="`${inputId}-requirements`" class="datametria-password-input__requirements">
+      <p class="datametria-password-input__requirements-title">A senha deve conter:</p>
+      <ul class="datametria-password-input__requirements-list">
+        <li :class="{ 'valid': requirements.minLength }">
+          <span class="datametria-password-input__check">{{ requirements.minLength ? '✓' : '○' }}</span>
+          Mínimo {{ minLength }} caracteres
+        </li>
+        <li :class="{ 'valid': requirements.hasUppercase }">
+          <span class="datametria-password-input__check">{{ requirements.hasUppercase ? '✓' : '○' }}</span>
+          Pelo menos 1 letra maiúscula
+        </li>
+        <li :class="{ 'valid': requirements.hasLowercase }">
+          <span class="datametria-password-input__check">{{ requirements.hasLowercase ? '✓' : '○' }}</span>
+          Pelo menos 1 letra minúscula
+        </li>
+        <li :class="{ 'valid': requirements.hasNumber }">
+          <span class="datametria-password-input__check">{{ requirements.hasNumber ? '✓' : '○' }}</span>
+          Pelo menos 1 número
+        </li>
+        <li :class="{ 'valid': requirements.hasSpecial }">
+          <span class="datametria-password-input__check">{{ requirements.hasSpecial ? '✓' : '○' }}</span>
+          Pelo menos 1 caractere especial
+        </li>
+      </ul>
+    </div>
+
+    <p v-if="errorMessage" :id="`${inputId}-error`" role="alert" aria-live="polite" class="datametria-password-input__error">
+      {{ errorMessage }}
+    </p>
+
+    <p v-if="helpText && !errorMessage" :id="`${inputId}-help`" class="datametria-password-input__help">
+      {{ helpText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useAnalytics } from '@/composables/useAnalytics'
+
+interface Props {
+  modelValue?: string
+  label?: string
+  placeholder?: string
+  errorMessage?: string
+  helpText?: string
+  disabled?: boolean
+  required?: boolean
+  minLength?: number
+  showStrength?: boolean
+  showRequirements?: boolean
+  autocomplete?: 'current-password' | 'new-password'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  disabled: false,
+  required: false,
+  minLength: 8,
+  showStrength: true,
+  showRequirements: true,
+  autocomplete: 'current-password',
+  size: 'md'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'strength-change': [strength: number]
+}>()
+
+const { trackEvent } = useAnalytics()
+const inputId = `password-${Math.random().toString(36).substr(2, 9)}`
+const showPassword = ref(false)
+const isFocused = ref(false)
+const capsLockOn = ref(false)
+
+const requirements = computed(() => ({
+  minLength: props.modelValue.length >= props.minLength,
+  hasUppercase: /[A-Z]/.test(props.modelValue),
+  hasLowercase: /[a-z]/.test(props.modelValue),
+  hasNumber: /\d/.test(props.modelValue),
+  hasSpecial: /[!@#$%^&*(),.?":{}|<>]/.test(props.modelValue)
+}))
+
+const strength = computed(() => {
+  if (!props.modelValue) return 0
+  let score = 0
+  const reqs = requirements.value
+  if (reqs.minLength) score += 20
+  if (reqs.hasUppercase) score += 20
+  if (reqs.hasLowercase) score += 20
+  if (reqs.hasNumber) score += 20
+  if (reqs.hasSpecial) score += 20
+  return score
+})
+
+const strengthPercentage = computed(() => strength.value)
+
+const strengthText = computed(() => {
+  const s = strength.value
+  if (s === 0) return ''
+  if (s <= 40) return 'Fraca'
+  if (s <= 60) return 'Média'
+  if (s <= 80) return 'Boa'
+  return 'Forte'
+})
+
+const wrapperClasses = computed(() => ({
+  [`datametria-password-input--${props.size}`]: true
+}))
+
+const strengthBarClasses = computed(() => [
+  'datametria-password-input__strength-fill',
+  {
+    'datametria-password-input__strength-fill--weak': strength.value <= 40,
+    'datametria-password-input__strength-fill--medium': strength.value > 40 && strength.value <= 60,
+    'datametria-password-input__strength-fill--good': strength.value > 60 && strength.value <= 80,
+    'datametria-password-input__strength-fill--strong': strength.value > 80
+  }
+])
+
+const strengthTextClasses = computed(() => [
+  'datametria-password-input__strength-text',
+  {
+    'datametria-password-input__strength-text--weak': strength.value <= 40,
+    'datametria-password-input__strength-text--medium': strength.value > 40 && strength.value <= 60,
+    'datametria-password-input__strength-text--good': strength.value > 60 && strength.value <= 80,
+    'datametria-password-input__strength-text--strong': strength.value > 80
+  }
+])
+
+const inputClasses = computed(() => [
+  'datametria-password-input__field',
+  {
+    'datametria-password-input__field--error': props.errorMessage,
+    'datametria-password-input__field--disabled': props.disabled
   }
+])
+
+const ariaDescribedby = computed(() => {
+  const ids = []
+  if (props.showRequirements && isFocused.value) ids.push(`${inputId}-requirements`)
+  if (props.errorMessage) ids.push(`${inputId}-error`)
+  if (props.helpText && !props.errorMessage) ids.push(`${inputId}-help`)
+  return ids.length > 0 ? ids.join(' ') : undefined
+})
+
+const handleInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value
+  emit('update:modelValue', value)
+}
+
+const handleFocus = () => {
+  isFocused.value = true
+  trackEvent('password_input_focus', {
+    component: 'DatametriaPasswordInput',
+    size: props.size
+  })
+}
+
+const handleBlur = () => {
+  isFocused.value = false
+}
+
+const toggleVisibility = () => {
+  showPassword.value = !showPassword.value
+  trackEvent('password_visibility_toggle', {
+    component: 'DatametriaPasswordInput',
+    visible: showPassword.value
+  })
+}
+
+const checkCapsLock = (event: KeyboardEvent) => {
+  capsLockOn.value = event.getModifierState('CapsLock')
+}
+
+watch(strength, (newStrength) => {
+  if (props.modelValue) {
+    emit('strength-change', newStrength)
+  }
+})
+</script>
+
+<style scoped>
+.datametria-password-input {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.datametria-password-input__label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-password-input__required {
+  color: var(--color-error, #ef4444);
+}
+
+.datametria-password-input__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.datametria-password-input__field {
+  width: 100%;
+  padding: 8px 40px 8px 12px;
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: 6px;
+  background: var(--color-background, #fff);
+  color: var(--color-text-primary, #1f2937);
+  font-size: 14px;
+  transition: all 0.2s;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.datametria-password-input__field:hover:not(:disabled) {
+  border-color: var(--color-primary, #3b82f6);
+}
+
+.datametria-password-input__field:focus {
+  outline: none;
+  border-color: var(--color-primary, #3b82f6);
+  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+}
+
+.datametria-password-input__field--error {
+  border-color: var(--color-error, #ef4444);
+}
+
+.datametria-password-input__field--disabled {
+  background: var(--color-background-muted, #f3f4f6);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.datametria-password-input__toggle {
+  position: absolute;
+  right: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.datametria-password-input__icon {
+  width: 20px;
+  height: 20px;
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.datametria-password-input__warning {
+  font-size: 12px;
+  color: var(--color-warning, #f59e0b);
+}
+
+.datametria-password-input__strength {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.datametria-password-input__strength-bar {
+  flex: 1;
+  height: 4px;
+  background: var(--color-background-muted, #f3f4f6);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.datametria-password-input__strength-fill {
+  height: 100%;
+  transition: width 0.3s, background-color 0.3s;
+}
+
+.datametria-password-input__strength-fill--weak { background: var(--color-error, #ef4444); }
+.datametria-password-input__strength-fill--medium { background: var(--color-warning, #f59e0b); }
+.datametria-password-input__strength-fill--good { background: var(--color-info, #3b82f6); }
+.datametria-password-input__strength-fill--strong { background: var(--color-success, #10b981); }
+
+.datametria-password-input__strength-text {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.datametria-password-input__strength-text--weak { color: var(--color-error, #ef4444); }
+.datametria-password-input__strength-text--medium { color: var(--color-warning, #f59e0b); }
+.datametria-password-input__strength-text--good { color: var(--color-info, #3b82f6); }
+.datametria-password-input__strength-text--strong { color: var(--color-success, #10b981); }
+
+.datametria-password-input__requirements {
+  padding: 12px;
+  background: var(--color-background-alt, #f9fafb);
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.datametria-password-input__requirements-title {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-password-input__requirements-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.datametria-password-input__requirements-list li {
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.datametria-password-input__requirements-list li.valid {
+  color: var(--color-success, #10b981);
+}
+
+.datametria-password-input__check {
+  margin-right: 4px;
+}
+
+.datametria-password-input__error {
+  font-size: 12px;
+  color: var(--color-error, #ef4444);
+}
+
+.datametria-password-input__help {
+  font-size: 12px;
+  color: var(--color-text-secondary, #6b7280);
+}
+
+/* Tamanhos */
+.datametria-password-input--xs .datametria-password-input__field {
+  padding: 2px 36px 2px 6px;
+  font-size: 11px;
+  min-height: 1.75rem;
+}
+
+.datametria-password-input--sm .datametria-password-input__field {
+  padding: 4px 38px 4px 8px;
+  font-size: 12px;
+  min-height: 2rem;
+}
+
+.datametria-password-input--md .datametria-password-input__field {
+  padding: 8px 40px 8px 12px;
+  font-size: 14px;
+  min-height: 2.5rem;
+}
+
+.datametria-password-input--lg .datametria-password-input__field {
+  padding: 12px 44px 12px 16px;
+  font-size: 16px;
+  min-height: 3rem;
+}
+
+.datametria-password-input--xl .datametria-password-input__field {
+  padding: 16px 48px 16px 20px;
+  font-size: 18px;
+  min-height: 3.5rem;
 }
 
-/* Controle manual via useTheme() */
-[data-theme="dark"] .datametria-password-input {
-  background: var(--dm-bg-color-dark, #1e1e1e);
-  color: var(--dm-text-primary-dark, #e0e0e0);
-  border-color: var(--dm-border-color-dark, #404040);
+@media (max-width: 640px) {
+  .datametria-password-input--xs .datametria-password-input__field { min-height: 2rem; }
+  .datametria-password-input--sm .datametria-password-input__field { min-height: 2.25rem; }
+  .datametria-password-input--md .datametria-password-input__field { min-height: 2.75rem; }
+  .datametria-password-input--lg .datametria-password-input__field { min-height: 3.25rem; }
+  .datametria-password-input--xl .datametria-password-input__field { min-height: 3.75rem; }
 }
-</style>
+</style>