<.dm_collapse id="collapse-single-default">
  <:trigger>Click to expand</:trigger>
  <:content>This is the collapsible content area.</:content>
</.dm_collapse>

<.dm_collapse id="collapse-single-card-variant" variant="card">
  <:trigger>Card style collapse</:trigger>
  <:content>Content inside a card-styled collapse panel.</:content>
</.dm_collapse>

<.dm_collapse id="collapse-single-open" open color="primary" variant="bordered">
  <:trigger>Open by default</:trigger>
  <:content>This panel starts open with primary color border.</:content>
</.dm_collapse>

<.dm_collapse id="collapse-variants-ghost" variant="ghost">
  <:trigger>Ghost variant</:trigger>
  <:content>Ghost content</:content>
</.dm_collapse>
<.dm_collapse id="collapse-variants-divider" variant="divider">
  <:trigger>Divider variant</:trigger>
  <:content>Divider content</:content>
</.dm_collapse>

<.dm_collapse id="collapse-colors-secondary" color="secondary" variant="bordered">
  <:trigger>Secondary color</:trigger>
  <:content>Secondary colored border.</:content>
</.dm_collapse>
<.dm_collapse id="collapse-colors-tertiary" color="tertiary" variant="bordered">
  <:trigger>Tertiary color</:trigger>
  <:content>Tertiary colored border.</:content>
</.dm_collapse>
<.dm_collapse id="collapse-colors-accent" color="accent" variant="card">
  <:trigger>Accent color</:trigger>
  <:content>Accent colored card collapse.</:content>
</.dm_collapse>

<.dm_collapse id="collapse-sizes-size-sm" size="sm" variant="card">
  <:trigger>Small collapse</:trigger>
  <:content>Compact small-sized collapse.</:content>
</.dm_collapse>
<.dm_collapse id="collapse-sizes-size-lg" size="lg" variant="card">
  <:trigger>Large collapse</:trigger>
  <:content>Spacious large-sized collapse.</:content>
</.dm_collapse>

<.dm_collapse id="collapse-animations-fade" variant="card" animation="fade">
  <:trigger>Fade animation</:trigger>
  <:content>Content fades in and out.</:content>
</.dm_collapse>
<.dm_collapse id="collapse-animations-slide" variant="card" animation="slide">
  <:trigger>Slide animation</:trigger>
  <:content>Content slides in and out.</:content>
</.dm_collapse>
<.dm_collapse id="collapse-animations-fast" speed="fast" variant="card" animation="slide">
  <:trigger>Fast slide</:trigger>
  <:content>Fast animation speed.</:content>
</.dm_collapse>
<.dm_collapse id="collapse-animations-slow" speed="slow" variant="card" animation="fade">
  <:trigger>Slow fade</:trigger>
  <:content>Slow animation speed.</:content>
</.dm_collapse>

<.dm_collapse id="collapse-single-nested" nested variant="bordered">
  <:trigger>Nested panel</:trigger>
  <:content>Indented content with left border accent.</:content>
</.dm_collapse>

<.dm_collapse disabled id="collapse-single-disabled" variant="card">
  <:trigger>Disabled (cannot open)</:trigger>
  <:content>This content should not be accessible.</:content>
</.dm_collapse>