chrome

<tc-accordion>

Disclosure group built on native `<details>`. Single or multi-open mode, keyboard nav between summaries, animated caret.

import "@ra9/tan-compose-kit/accordion"

Props

Name	Type	Default	Description
`mode`	`"single" \| "multi"`	`"single"`	`single` closes other items when one opens. `multi` allows any number open at once.
`bordered`	`boolean`	`true`	Render an outer border and dividers between items.

Events

Event	Detail	When
`tc-change`	`{ open: string[] }`	Fires when an item opens or closes. `open` lists the ids (or summary text fallback) of currently-open items, in source order.

Slots

Slot	Description
`(default)`	One or more native `<details>` elements, each with its own `<summary>` heading.

CSS variables

Variable	Default	Description
`--tc-accordion-bg`	`var(--tc-color-surface, #ffffff)`	Item background.
`--tc-accordion-ink`	`var(--tc-color-ink, #14171f)`	Heading color.
`--tc-accordion-ink-soft`	`var(--tc-color-ink-soft, #4a5061)`	Body text color.
`--tc-accordion-rule`	`var(--tc-color-rule, #ece5d3)`	Border and divider color.
`--tc-accordion-radius`	`var(--tc-radius-md, 8px)`	Outer corner radius.
`--tc-accordion-accent`	`var(--tc-color-accent, #a16939)`	Focus outline color.
`--tc-accordion-font`	`var(--tc-font-sans, …)`	Font family.

Examples

Basic (single-open)

By default, opening one item closes the others. Items are plain <details> so they degrade gracefully if the script ever fails to load.

Why declarative components?

You describe what the element looks like and behaves like, the library builds the wiring. No template compiler, no JSX, no global runtime.

Is there a build step?

Only if you want one. The library publishes as ESM on JSR; you can import straight from a CDN or bundle with esbuild / Vite.

Does it work with React / Vue / Svelte?

Yes — Web Components are framework-neutral. Pass props as attributes, listen to tc-* events.

<tc-accordion> <details open> <summary>Why declarative components?</summary> <p>You describe what the element looks like and behaves like…</p> </details> <details> <summary>Is there a build step?</summary> <p>Only if you want one.</p> </details> </tc-accordion>

Multi-open

mode="multi" allows any number of items to be open at the same time.

Read access

View dashboards, run reports, browse records.

Write access

Create, edit, and delete records you own.

Admin access

Manage users, billing, and workspace settings.

<tc-accordion mode="multi"> <details><summary>Read access</summary>…</details> <details><summary>Write access</summary>…</details> <details><summary>Admin access</summary>…</details> </tc-accordion>

Borderless

Drop the outer border for an inline / inlay treatment that blends into the parent surface.

What's included in the free tier?

All components, all themes, no usage cap. The free tier is the only tier.

How do you ship updates?

Semantic version bumps on JSR. Patch releases are always backwards compatible.

<tc-accordion bordered="false"> <details>…</details> <details>…</details> </tc-accordion>

Listening for change

tc-change fires after every open / close with the current set of open items.

<tc-accordion id="faq"> <details id="pricing"><summary>Pricing</summary>…</details> <details id="support"><summary>Support</summary>…</details> </tc-accordion> <script> document.getElementById("faq").addEventListener("tc-change", (e) => { console.log("open items:", e.detail.open); // → ["pricing"] after opening the first }); </script>

Accessibility

Each item is a native <details> element. Screen readers announce expand / collapse without any extra wiring.
Keyboard support: ↑ / ↓ move focus between summaries, Home / End jump to the first / last. Space and Enter toggle the focused item (native <summary> behavior).
The caret is aria-hidden so it's not announced.
Authors should keep <summary> content concise — it acts as the disclosure label.

Theming

<tc-accordion style=" --tc-accordion-bg: #0b0c10; --tc-accordion-ink: #f3f3f3; --tc-accordion-ink-soft: #b8b8b8; --tc-accordion-rule: #1c1f26; --tc-accordion-accent: #ffc857; " > <details><summary>Dark item</summary><p>…</p></details> <details><summary>Another</summary><p>…</p></details> </tc-accordion>

← All components