Accordion

Example

<div data-slean="accordion">
	<details name="accordion-faq" open>
		<summary>Shipping</summary>
		<div data-slean-part="content">Orders ship within two working days from the Rotterdam warehouse.</div>
	</details>
	<details name="accordion-faq">
		<summary>Returns</summary>
		<div data-slean-part="content">Thirty days, with the original packaging.</div>
	</details>
	<details name="accordion-faq">
		<summary>Warranty</summary>
		<div data-slean-part="content">Two years on parts and labour, from the date of delivery.</div>
	</details>
</div>

<script lang="ts">
	// Nothing to import but the optional stylesheet: the browser owns the details elements.
	import '@svelte-lean/styles/accordion.css';
</script>

<div data-slean="accordion">
	<details name="accordion-faq" open>
		<summary>Shipping</summary>
		<div data-slean-part="content">Orders ship within two working days from the Rotterdam warehouse.</div>
	</details>
	<details name="accordion-faq">
		<summary>Returns</summary>
		<div data-slean-part="content">Thirty days, with the original packaging.</div>
	</details>
	<details name="accordion-faq">
		<summary>Warranty</summary>
		<div data-slean-part="content">Two years on parts and labour, from the date of delivery.</div>
	</details>
</div>

Why this implementation exists

An accordion is a list of disclosures where opening one closes the others. The platform has that as an attribute: <details> elements with the same name form an exclusive group, and the browser closes the open item when another opens. Enter and Space toggle an item, each summary is announced as a button with its expanded state, and find-in-page opens the item that holds a match. None of it needs a script.

Disclosure is the page for one <details>; its styles make every item a row with a rule under it. Accordion uses the same element and the same attribute and adds only a root: a bordered list with rules between the items, rounded ends and an inset focus ring. Pick Disclosure for items that stand alone and Accordion for a set that reads as one block.

Usage

The markup needs no package. Install @svelte-lean/styles for the stylesheet; @svelte-lean/primitives adds the typed contract and nothing at runtime.

npm install @svelte-lean/styles

pnpm add @svelte-lean/styles

yarn add @svelte-lean/styles

bun add @svelte-lean/styles

import '@svelte-lean/styles/accordion.css';

Give every accordion its own name: the browser groups all <details> of the document that share a value, wherever they are. Render open on at most one item of a group; with more, the browser keeps the first and closes the rest while parsing.

Leave name off when several items may be open. The exclusive group can always be closed completely; an item that must stay visible belongs outside the accordion.

Anatomy

Runtime profile

Tier 0: the accordion has no behavior module, the Vite plugin maps accordion to no module, and the native-only fixture proves the path ships no Svelte Lean JavaScript.

Accessibility contract

• Each <summary> is exposed as a button with an expanded state that controls its item; no ARIA attribute is needed.
• Enter and Space toggle an item; Tab moves between summaries and into open content. The arrow-key movement between headers that the WAI-ARIA accordion pattern marks optional is not provided.
• A heading inside <summary> is valid HTML, but screen readers differ in whether they still expose it as a heading, so the contract does not require one.
• <details> has no disabled state and an exclusive group can always be closed completely.

Keyboard

Platform features

Without JavaScript

Fully functional, exclusive groups included: the name attribute is read by the browser, not by a script.

Server rendering

Static HTML. Render open on the item that starts expanded; the server output is the final state.

Before hydration

Nothing is attached. An item the reader opens before hydration stays open after it.

Styling

accordion.css draws the root's border and radius, the rule between items, the summary row with its hover fill and inset focus ring, the chevron (two borders on summary::after), the content padding, and the height transition on ::details-content that runs where interpolate-size is supported. The tokens it reads:

State selectors the stylesheet targets, all from the platform or ARIA: ::details-content, :first-child, :focus-visible, :hover, :last-child, [open].

Controlled integration

The open attribute of each item is its state. Bind it per item; an item closed by its exclusive sibling fires toggle, and the binding follows.

<script lang="ts">
	// Each item's open attribute is its state; bind it. Opening one item of the group closes
	// the other, and Svelte's binding follows through the toggle event.
	const items = [
		{ id: 'shipping', title: 'Shipping', text: 'Orders ship within two working days.' },
		{ id: 'returns', title: 'Returns', text: 'Thirty days, with the original packaging.' }
	];
	let open: Record<string, boolean> = $state({ shipping: true, returns: false });
	const current = $derived(items.find((item) => open[item.id])?.title ?? 'none');
</script>

<div data-slean="accordion">
	{#each items as item (item.id)}
		<details name="checkout-faq" bind:open={open[item.id]}>
			<summary>{item.title}</summary>
			<div data-slean-part="content">{item.text}</div>
		</details>
	{/each}
</div>
<p>Open: {current}</p>

Compatibility notes

Exclusive groups are Baseline since September 2024 (Chrome 120, Safari 17.2, Firefox 130); in older browsers every item opens on its own. Find-in-page opens a closed item in Chrome 97, Firefox 139 and Safari 26.2. ::details-content is Baseline since September 2025, but the height animates only where interpolate-size exists, which is Chrome 129 and not Firefox or Safari; elsewhere the content appears without a transition.

Examples

Several open

Without a name each item opens and closes on its own; the root still draws one list.

<!-- No name: every item opens and closes on its own. -->
<div data-slean="accordion">
	<details open>
		<summary>Notifications</summary>
		<div data-slean-part="content">…</div>
	</details>
	<details open>
		<summary>Privacy</summary>
		<div data-slean-part="content">…</div>
	</details>
</div>

Testing

• apps/playground/tests/primitives/display.spec.ts Playwright: open state, exclusive groups, stretched links, roles and names, carousel scrolling, axe
• packages/styles/tests static checks of the stylesheet (layers, tokens, specificity, dark parity)

Source

• packages/primitives/src/accordion/contract.md the contract in prose: semantics, keyboard, focus, ARIA, SSR, JS-disabled behavior
• packages/primitives/src/accordion/contract.ts typed constants: name, tier, base, parts, options, events
• packages/styles/css/accordion.css the optional stylesheet