{#
    Collapsible section with a heading trigger and a chevron.

    heading      string  visible heading text (required)
    id           string  unique per page; wires aria-controls (required)
    open         bool    initial state (default false)
    headingLevel int     aria-level of the heading (default 2)
    contentClass string  classes on the body wrapper (default 'rte-content')
    storageKey   string  persist open state in sessionStorage (default '')
#}
<div {{ stimulus_controller('toggle',
        { 'open': open|default(false), 'storageKey': storageKey|default('') },
        { 'closed': 'hidden', 'iconOpen': 'rotate-180' }) }}>
    <button type="button"
            class="flex items-center justify-between w-full text-left"
            data-action="toggle#toggle"
            data-toggle-target="trigger"
            aria-expanded="{{ open|default(false) ? 'true' : 'false' }}"
            aria-controls="{{ id }}-content">
        <span class="block text-2xl md:text-3xl font-bold mb-2"
              role="heading"
              aria-level="{{ headingLevel|default(2) }}">
            {{ heading }}
        </span>
        <span class="shrink-0 transition-transform" data-toggle-target="icon">
            {{ icon('chevron-down', 'w-5 h-5') }}
        </span>
    </button>

    <div id="{{ id }}-content"
         class="{{ contentClass|default('rte-content') }}"
         data-toggle-target="content">
        {% block body %}{% endblock %}
    </div>
</div>