Accordion

import {
  AccordionGroup, AccordionTrigger, AccordionPanel, AccordionContent,
  BuiAccordion, BuiAccordionItem, BuiAccordionTrigger, BuiAccordionContent,
} from 'ng-blatui';

<div ngAccordionGroup buiAccordion [multiExpandable]="false">
  <div buiAccordionItem>
    <h3 class="flex">
      <button ngAccordionTrigger buiAccordionTrigger [panel]="p1">Is it accessible?</button>
    </h3>
    <div ngAccordionPanel #p1="ngAccordionPanel" buiAccordionContent>
      <ng-template ngAccordionContent><div class="pb-4">Yes — via Angular Aria.</div></ng-template>
    </div>
  </div>
</div>

<!-- allow several panels open at once -->
<div ngAccordionGroup buiAccordion [multiExpandable]="true">…items…</div>

<!-- gap + a border per item -->
<div ngAccordionGroup buiAccordion class="flex flex-col gap-2">
  <div buiAccordionItem class="rounded-lg border px-4">…</div>
</div>

<div ngAccordionGroup buiAccordion class="divide-y rounded-lg border [&>*]:px-4">
  …items…
</div>

<button ngAccordionTrigger buiAccordionTrigger [panel]="p1">
  <span class="flex items-center gap-2"><span class="inline-flex"><svg><!-- icon --></svg></span> Billing</span>
  <svg><!-- chevron (the trigger rotates the first >svg) --></svg>
</button>

<!-- gap + a full border per item -->
<div ngAccordionGroup buiAccordion class="flex flex-col gap-2">
  <div buiAccordionItem class="bg-card rounded-lg border px-4">…</div>
</div>

<!-- filled header: style the trigger -->
<button ngAccordionTrigger buiAccordionTrigger class="bg-muted rounded-md px-3 hover:no-underline" [panel]="p1">
  General <svg><!-- chevron --></svg>
</button>

<button ngAccordionTrigger buiAccordionTrigger [panel]="p1">
  <span class="flex items-center gap-3"><span class="grid size-7 place-items-center rounded-full bg-primary text-xs">JD</span> Jane Doe</span>
  <svg><!-- chevron --></svg>
</button>

<button ngAccordionTrigger buiAccordionTrigger [panel]="p1">
  <span class="flex flex-col items-start">
    <span>Notifications</span>
    <span class="text-muted-foreground text-xs font-normal">Email & push</span>
  </span>
  <svg><!-- chevron --></svg>
</button>

<!-- highlight the open item with a has-[] variant -->
<div buiAccordionItem class="rounded-lg px-4 has-[button[aria-expanded=true]]:bg-accent">…</div>

<!-- bordered group + a leading icon per trigger -->
<div ngAccordionGroup buiAccordion class="divide-y rounded-lg border [&>*]:px-4">
  <button ngAccordionTrigger buiAccordionTrigger [panel]="p1">
    <span class="flex items-center gap-2"><svg><!-- icon --></svg> Help</span><svg><!-- chevron --></svg>
  </button>
</div>

<!-- open one panel initially with [expanded] (Aria model) -->
<button ngAccordionTrigger buiAccordionTrigger [panel]="p1" [expanded]="true">Title <svg><!-- chevron --></svg></button>

<!-- swap the chevron-down for an up/down chevrons icon -->
<button ngAccordionTrigger buiAccordionTrigger [panel]="p1">
  Title <svg><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg>
</button>

<!-- chevron on the left: place it first + justify-start -->
<button ngAccordionTrigger buiAccordionTrigger class="justify-start gap-2" [panel]="p1">
  <svg><path d="m9 18 6-6-6-6" /></svg> Title
</button>

<!-- the open item lifts into a card via has-[] -->
<div buiAccordionItem class="rounded-lg border-b-0 px-4 has-[button[aria-expanded=true]]:bg-card has-[button[aria-expanded=true]]:border has-[button[aria-expanded=true]]:shadow-sm">…</div>

<!-- subtle fill on the open item -->
<div buiAccordionItem class="rounded-lg border-b-0 px-4 has-[button[aria-expanded=true]]:bg-primary/5">…</div>

<!-- wrap the icons in a span (not a direct >svg child, so the base 180° rotate is skipped) -->
<button ngAccordionTrigger buiAccordionTrigger class="[&[aria-expanded=true]_.acc-plus]:hidden [&[aria-expanded=true]_.acc-minus]:inline" [panel]="p1">
  Title
  <span class="inline-flex">
    <svg class="acc-plus"><path d="M5 12h14M12 5v14" /></svg>
    <svg class="acc-minus hidden"><path d="M5 12h14" /></svg>
  </span>
</button>

<!-- a plus that rotates 45° into an × on expand -->
<button ngAccordionTrigger buiAccordionTrigger class="[&[aria-expanded=true]_.acc-rot]:rotate-45" [panel]="p1">
  Title <span class="inline-flex"><svg class="acc-rot transition-transform"><path d="M5 12h14M12 5v14" /></svg></span>
</button>