<!-- 
  Component: collapsible.html
  Configurable State: themeColor ('primary'|'secondary'|'destructive'), size ('sm'|'md'|'lg'), isOpen (boolean)
  Usage: Bind styles dynamically using hx-class="{ 'bg-primary': themeColor === 'primary' }" or hx-style="{ width: size === 'lg' ? '100%' : 'auto' }"
-->
<details hx-ext="reactive" hx-state="{ themeColor: \'primary\', size: \'md\', isOpen: false }"  class="group border border-border rounded-md bg-background [&_summary::-webkit-details-marker]:hidden">
  <summary class="flex justify-between items-center p-4 font-medium cursor-pointer hover:bg-accent">
    {title}
    <span class="transition group-open:rotate-180">↓</span>
  </summary>
  <div class="p-4 pt-0 text-sm text-muted-foreground border-t border-border mt-2">
    {content}
  </div>
</details>