That's super interesting, thanks for opening this PR!

I'm wondering about the names of these new modifiers, given Symfony and some popular form validation JS libraries:

• Symfony has Length(min: a, max: b) and Range(min: a, max :b)
• VeeValidate has min/max for length, and min_value/max_value/between for number range validation
• React Hook Form has minLength and maxLength, and min/max for number range validation
• Vuelidate has minLength/maxLength for length, and minValue/maxValue/between for number range validation

If it is possible, I would like to see an advanced syntax closest to what Symfony can provide:

• length(min: 3)
• length(min: 1, max:10)
• range(min: 1990)
• range(max: 2025)
• range(min: 1990, max: 2025)

Do you think it could be possible?

EDIT: By reading existing tests, examples, and source code, I don't think using directive(arg:value) or directive(arg=value) could be possible since it may breaks addClass (.arg\:value or .arg\=value can be used a CSS selector).
Maybe... length({ min: 3}) or length{min: 3}..?

Otherwise, we can keep the simple syntax but we should add the _ after min and max:

• min_length(3)
• min_length(1)|max_length(10)
• min_value(1990)
• max_value(2025)
• min_value(1990)|max_value(2025)

Also, please ensure to keep the CI green and format the JavaScript code by following the commands listed here https://github.com/symfony/ux/blob/2.x/CONTRIBUTING.md#working-with-assets, it would also help to reduce syntax noices in the PR.

Thanks!

Final review round, and it will be fine for me. Mainly documentation improvements and some TypeScript nitpick

Thanks!