Accordion

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@morphos/layout'

@Component()
class MyComponent extends StatefulComponent {
  @State() accordion = new Accordion({ type: 'single', collapsible: true })

  render() {
    return (
      <Accordion accordion={this.accordion}>
        <AccordionItem accordion={this.accordion} value="item-1">
          <AccordionTrigger accordion={this.accordion} item="item-1">
            What is Morphos?
          </AccordionTrigger>
          <AccordionContent accordion={this.accordion} item="item-1">
            Morphos is a headless PraxisJS component library.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem accordion={this.accordion} value="item-2">
          <AccordionTrigger accordion={this.accordion} item="item-2">
            Is it accessible?
          </AccordionTrigger>
          <AccordionContent accordion={this.accordion} item="item-2">
            Yes — it follows WAI-ARIA authoring practices.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    )
  }
}

.morphos-accordion-trigger[data-expanded]::after {
  transform: rotate(-135deg);
}

.morphos-accordion-item:last-child {
  border-bottom: none;
}