feature #3804 [Toolkit][Shadcn] Add form recipe (Kocal)

This PR was merged into the 3.x branch.

Discussion
----------

[Toolkit][Shadcn] Add form recipe

| Q              | A
| -------------- | ---
| Bug fix?       | no
| New feature?   | yes
| Deprecations?  | no
| Documentation? | no
| Issues         | Part of #3233
| License        | MIT

Adds the `form` recipe to the Shadcn kit: a set of accessible layout wrappers (`Form`, `Form:Item`, `Form:Label`, `Form:Description`, `Form:Message`) for building forms around Symfony form fields. It's pure Twig and CSS, no Stimulus controller involved.

When a `Form:Item` contains a `Form:Message`, its `Form:Label` automatically switches to the destructive color. This is handled entirely in CSS via a `group-has` selector, no client-side state needed.

Split out of #3473 (closed in favor of this PR and its two siblings for `sheet` and `drawer`), itself part of #3233.

Commits
-------

86d1064 [Toolkit][Shadcn] Add form recipe

Author: Kocal

src/Toolkit/CHANGELOG.md

@@ -14,6 +14,7 @@
 - [Shadcn] Add `slider` recipe
 - [Shadcn] Add `drawer` recipe
 - [Shadcn] Add `sheet` recipe
+- [Shadcn] Add `form` recipe
 - [Shadcn][Flowbite] Merge component classes with `attributes.defaults({ class: '...'|tailwind_classes })` instead of `tailwind_merge` (consumer classes now override component variants)
 - [Shadcn] Fix Field/Label, InputGroup and Pagination silently dropping their own base classes when forwarding to a child component (their checked/disabled/nested/dark styles now apply)
 - [Shadcn] Fix `dialog` opening on initial render when `open` is `false`

src/Toolkit/kits/shadcn/form/README.md

@@ -0,0 +1,59 @@
+# Form
+
+A set of layout wrappers to build accessible forms with label, description and error-message slots.
+
+```twig {"preview":true}
+<twig:Form class="mx-auto w-full max-w-md">
+    <twig:Form:Item>
+        <twig:Form:Label for="form-email">Email</twig:Form:Label>
+        <twig:Input id="form-email" name="email" type="email" placeholder="you@example.com" />
+        <twig:Form:Description>We'll never share your email with anyone else.</twig:Form:Description>
+    </twig:Form:Item>
+    <twig:Form:Item>
+        <twig:Form:Label for="form-bio">Bio</twig:Form:Label>
+        <twig:Textarea id="form-bio" name="bio" placeholder="Tell us a bit about yourself" />
+        <twig:Form:Description>You can @mention other users and organizations.</twig:Form:Description>
+    </twig:Form:Item>
+    <div class="flex justify-end gap-2">
+        <twig:Button type="button" variant="outline">Cancel</twig:Button>
+        <twig:Button type="submit">Save</twig:Button>
+    </div>
+</twig:Form>
+```
+
+## Installation
+
+::: installation
+
+## Usage
+
+```twig
+<twig:Form>
+    <twig:Form:Item>
+        <twig:Form:Label for="form-username">Username</twig:Form:Label>
+        <twig:Input id="form-username" name="username" placeholder="shadcn" />
+        <twig:Form:Description>This is your public display name.</twig:Form:Description>
+    </twig:Form:Item>
+    <twig:Button type="submit">Submit</twig:Button>
+</twig:Form>
+```
+
+## Examples
+
+### Validation
+
+When a `Form:Item` contains a `Form:Message`, its `Form:Label` switches to the destructive color.
+
+```twig {"preview":true}
+<twig:Form class="mx-auto w-full max-w-md">
+    <twig:Form:Item>
+        <twig:Form:Label for="form-validation-email">Email</twig:Form:Label>
+        <twig:Input id="form-validation-email" name="email" type="email" value="not-an-email" aria-invalid="true" />
+        <twig:Form:Message>Please enter a valid email address.</twig:Form:Message>
+    </twig:Form:Item>
+</twig:Form>
+```
+
+## API Reference
+
+::: api-reference

src/Toolkit/kits/shadcn/form/manifest.json

@@ -0,0 +1,16 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Form",
+    "version-added": "3.5",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": [
+            "twig/html-extra:^3.24.0",
+            "symfony/ux-twig-component:^3.5",
+            "tales-from-a-dev/twig-tailwind-extra:^1.3.0"
+        ]
+    }
+}

src/Toolkit/kits/shadcn/form/templates/components/Form.html.twig

@@ -0,0 +1,9 @@
+{# @block content The form fields, typically a list of `Form:Item`. #}
+<form
+    data-slot="form"
+    {{ attributes.defaults({
+        class: 'space-y-6'|tailwind_classes,
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</form>

src/Toolkit/kits/shadcn/form/templates/components/Form/Description.html.twig

@@ -0,0 +1,9 @@
+{# @block content The help text. #}
+<p
+    data-slot="form-description"
+    {{ attributes.defaults({
+        class: 'text-sm text-muted-foreground'|tailwind_classes,
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</p>

src/Toolkit/kits/shadcn/form/templates/components/Form/Item.html.twig

@@ -0,0 +1,9 @@
+{# @block content A `Form:Label`, a form control, an optional `Form:Description` and an optional `Form:Message`. #}
+<div
+    data-slot="form-item"
+    {{ attributes.defaults({
+        class: 'group/form-item grid gap-2'|tailwind_classes,
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/form/templates/components/Form/Label.html.twig

@@ -0,0 +1,9 @@
+{# @block content The label text. #}
+<label
+    data-slot="form-label"
+    {{ attributes.defaults({
+        class: 'flex items-center gap-2 text-sm font-medium leading-none select-none group-has-[[data-slot=form-message]]/form-item:text-destructive'|tailwind_classes,
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</label>

src/Toolkit/kits/shadcn/form/templates/components/Form/Message.html.twig

@@ -0,0 +1,9 @@
+{# @block content The validation error message. #}
+<p
+    data-slot="form-message"
+    {{ attributes.defaults({
+        class: 'text-sm text-destructive'|tailwind_classes,
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</p>