Advanced password strength indicator with progress

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "eye" и "x") — см. docs/PORTING.md §5. `password`
  и `isVisible` зафиксированы в начальном состоянии оригинала
  (`useState("")`/`useState(false)`), поэтому счётчик силы пароля и
  список требований соответствуют пустому вводу — значения полей
  задаются фиксированными пропсами, чтобы статика совпадала без
  взаимодействия.
-->
<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

const strengthScore = 0
const requirements = [
  "At least 8 characters",
  "At least 1 number",
  "At least 1 lowercase letter",
  "At least 1 uppercase letter",
  "At least 1 special character",
]
</script>

<template>
  <div class="w-full max-w-xs">
    <Field>
      <FieldLabel for="secure-password">Secure Password</FieldLabel>
      <div class="relative">
        <Input
          aria-describedby="secure-password-description"
          class="pe-9"
          id="secure-password"
          placeholder="Create a strong password"
          type="password"
        />
        <button
          aria-controls="password"
          aria-label="Show password"
          aria-pressed="false"
          class="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
          type="button"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-eye"
            aria-hidden="true"
          >
            <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
            <circle cx="12" cy="12" r="3" />
          </svg>
        </button>
      </div>
    </Field>

    <!-- Segmented Progress Bar -->
    <div
      aria-label="Password strength"
      :aria-valuemax="5"
      :aria-valuemin="0"
      :aria-valuenow="strengthScore"
      class="mt-3 mb-4 flex gap-1"
      role="progressbar"
    >
      <div
        v-for="i in 5"
        :key="i"
        class="h-1 flex-1 rounded-full transition-colors duration-500 bg-border"
      />
    </div>

    <div class="mb-3 flex items-center justify-between">
      <p class="text-foreground text-sm font-medium" id="secure-password-description">
        Enter a password
      </p>
      <span class="text-muted-foreground text-xs">{{ `${strengthScore}/5 requirements met` }}</span>
    </div>

    <ul aria-label="Password requirements" class="space-y-1.5">
      <li v-for="req in requirements" :key="req" class="flex items-center gap-1">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x text-muted-foreground/60 size-3.5"
          aria-hidden="true"
        >
          <path d="M18 6 6 18" />
          <path d="m6 6 12 12" />
        </svg>
        <span class="text-xs transition-colors text-muted-foreground">
          {{ req }}
          <span class="sr-only"> - Requirement not met</span>
        </span>
      </li>
    </ul>
  </div>
</template>