{% if not comp %}

{% blocktranslate %}Pick a component on the {{ side|upper }} dropdown above to start comparing.{% endblocktranslate %}

{% else %}

{% trans "Loading preview…" %}

Cotton

{% if comp.auto_props or comp.has_slots or comp.accepts_attrs %}

{% for prop in comp.auto_props %} {% if not prop.hidden %}

{{ prop.clean_name }} {% if prop.type == 'boolean' %}bool {% elif prop.type == 'select' %}enum {% elif prop.type == 'number' %}num {% else %}str{% endif %}

{% if prop.description %}

{% endif %} {% if prop.type == 'select' %} {% elif prop.type == 'boolean' %} {% elif prop.type == 'number' %} {% else %} {% endif %}

{% endif %} {% endfor %} {% if comp.accepts_attrs %}

{% trans "Extra attributes" %} attrs {% blocktranslate %}{{ attrs }} pass-through — anything you type lands on the rendered HTML. Try disabled, id="…", data-*, aria-*, style="…"… Heads up: class may duplicate if the component already declares one (HTML keeps the first).{% endblocktranslate %}

{% endif %} {% for slot in comp.slots %}

{{ slot.name|default:"slot" }} slot

{% if slot.description %}

{% endif %}

{% endfor %}

{% endif %}