Input with pulsed background animation

<!--
  Расхождение с апстримом: `isFocused` зафиксирован в начальном
  состоянии оригинала (`useState(false)`) — значения полей задаются
  фиксированными пропсами, чтобы статика совпадала без взаимодействия.
-->
<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
</script>

<template>
  <Field class="max-w-xs">
    <FieldLabel for="pulsed-input">Pulsed Background</FieldLabel>
    <div class="relative">
      <div class="bg-primary/20 pointer-events-none absolute inset-0 rounded-md transition-opacity duration-300 animate-pulse" />
      <Input
        id="pulsed-input"
        placeholder="Animation stops on focus..."
        class="focus-visible:bg-background relative bg-transparent shadow-none transition-colors duration-300"
      />
    </div>
  </Field>
</template>