Accordion

A stack of AccordionItems that share a border and spacing.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Accordion-0.tess

<template>
  <Accordion>
    <AccordionItem>
      <span slot="title">Is it accessible?</span>
      Yes. Each heading is a button that says whether its region is open.
    </AccordionItem>
    <AccordionItem>
      <span slot="title">Can I change it?</span>
      It is a copy in your project, so yes.
    </AccordionItem>
  </Accordion>
</template>

Installation

CLIManual

npmpnpmyarnbun

npx @pixelscriptio/tessera add Accordion

pnpm exec tessera add Accordion

yarn tessera add Accordion

bunx @pixelscriptio/tessera add Accordion

Also installs AccordionItem, which it uses.
Works with Tessera 0.9.0 or newer.

Copy and paste the code into your project

Put it in system/components. Add AccordionItem the same way.

system/components/Accordion.tess

<contract>
{
  "name": "Accordion",
  "role": "group",
  "description": "A stack of AccordionItems that share a border and spacing.",
  "since": "0.5.0",
  "parts": ["root"],
  "slots": {
    "default": "AccordionItem components"
  },
  "preview": {
    "slots": {
      "default": [
        {
          "component": "AccordionItem",
          "props": {
            "open": true
          },
          "slots": {
            "title": "What is Tessera?",
            "default": "A design-system-first frontend framework."
          }
        },
        {
          "component": "AccordionItem",
          "slots": {
            "title": "Is it accessible?",
            "default": "Every component is tested against its contract, in both themes."
          }
        },
        {
          "component": "AccordionItem",
          "slots": {
            "title": "Can I change the look?",
            "default": "Change the tokens and every component follows."
          }
        }
      ]
    }
  }
}
</contract>

<template>
  <div class="root" role="group">
    <slot />
  </div>
</template>

<style>
.root {
  border-top: 1px solid $color.border.default;
  background: $color.surface.default;
}
</style>

Check your design tokens
Your design system needs these. tessera add reports the ones that are missing; by hand, run npx @pixelscriptio/tessera check.
color.border.default color.surface.default

Usage

Using Accordion

An accordion groups AccordionItems so they share a border and spacing. Each item opens and closes on its own: an accordion does not close the others when one opens.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Accordion-0.tess

<template>
  <Accordion>
    <AccordionItem>
      <span slot="title">Is it accessible?</span>
      Yes. Each heading is a button that says whether its region is open.
    </AccordionItem>
    <AccordionItem>
      <span slot="title">Can I change it?</span>
      It is a copy in your project, so yes.
    </AccordionItem>
  </Accordion>
</template>

API reference

Slots

Slot	Content
`default`	AccordionItem components

Anatomy


Role	`group`
Parts	`root`
Since	0.5.0

Design tokens it uses

Your design system needs these. tessera add checks that it has them, and can add the ones it lacks.

color.border.default color.surface.default

Checksum

661d27d5168b06ffb43f57ca53cae55bb68f2fd673455593e760589a74e4b794