feature #3154 [Toolkit] Add support for documenting props/blocks API (Kocal)

This PR was merged into the 2.x branch.

Discussion
----------

[Toolkit] Add support for documenting props/blocks API

| Q              | A
| -------------- | ---
| Bug fix?       | no
| New feature?   | yes <!-- please update src/**/CHANGELOG.md files -->
| Deprecations?  | no <!-- if yes, also update UPGRADE-*.md and src/**/CHANGELOG.md -->
| Documentation? | no <!-- required for new features, or documentation updates -->
| Issues         | Fix #2950 <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License        | MIT

Props and blocks now render like that:
<img width="1130" height="581" alt="image" src="https://github.com/user-attachments/assets/73073232-b030-40de-b332-d4515a34bb09" />

I also updated/fixed some examples or components

Commits
-------

133943b [Site] Document Toolkit recipes props and blocks

Author: Kocal

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig

@@ -1,3 +1,5 @@
+{# @prop open boolean Open (or not) the AlertDialog at initial rendering, default to `false` #}
+{# @block content The default block #}
 {%- props open = false, id -%}
 
 {%- set _alert_dialog_open = open %}

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Action.html.twig

@@ -1,4 +1,6 @@
-{% props variant = 'default' %}
+{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The variant, default to `default` #}
+{# @block content The default block #}
+{%- props variant = 'default' -%}
 <twig:Button variant="{{ variant }}" {{ ...attributes }}>
     {{- block(outerBlocks.content) -}}
 </twig:Button>

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Cancel.html.twig

@@ -1,7 +1,4 @@
-<twig:Button
-    variant="outline"
-    data-action="click->alert-dialog#close"
-    {{ ...attributes }}
->
+{# @block content The default block #}
+<twig:Button variant="outline" data-action="click->alert-dialog#close" {{ ...attributes }}>
     {{- block(outerBlocks.content) -}}
 </twig:Button>

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Content.html.twig

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <dialog
     id="{{ _alert_dialog_id }}"
     {{ _alert_dialog_open ? 'open' }}

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Description.html.twig

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <p
     id="{{ _alert_dialog_description_id }}"
     class="{{ 'text-muted-foreground text-sm ' ~ attributes.render('class')|tailwind_merge }}"

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Footer.html.twig

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <footer
     class="{{ 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Header.html.twig

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <header
     class="{{ 'flex flex-col gap-2 text-center sm:text-left ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Title.html.twig

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <h2
     id="{{ _alert_dialog_title_id }}"
     class="{{ 'text-lg font-semibold ' ~ attributes.render('class')|tailwind_merge }}"

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Trigger.html.twig

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 {%- set trigger_attrs = {
     'data-action': 'click->alert-dialog#open',
     'data-alert-dialog-target': 'trigger',

src/Toolkit/kits/shadcn/alert/templates/components/Alert.html.twig

@@ -1,3 +1,5 @@
+{# @prop variant 'default'|'destructive' The variant, default to `default` #}
+{# @block content The default block #}
 {%- props variant = 'default' -%}
 {%- set style = html_cva(
     base: 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',