# Accordion

A container with multiple collapsible sections where only one section can be expanded at a time.

## Usage

Wrap one or more `Disclosure` children.
```svelte
<Accordion {...props}>
  <Disclosure label="Section 1" {...props}>Content</Disclosure>
  <Disclosure label="Section 2" {...props}>Content</Disclosure>
</Accordion>
```

If you do not need open/close animation or programmatic state tracking, native `<details name="...">` elements already give exclusive single-open behavior on their own; reach for Accordion only when you need those extras.

## Anatomy

The `class` attribute values represent `part` names. Other attributes represent their corresponding props.

```svelte
<div class="whole" role="group">
  {#if children}
    {children}
  {:else}
    {#each items as item}
      <Disclosure id={item.value} label={item.label} inactive={item.inactive}>
        {item.panel}
      </Disclosure>
    {/each}
  {/if}
</div>
```

### Dependency

- [Disclosure](/docs/disclosure)

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `items` | `AccordionItem[]` | - | Data-mode array of `AccordionItem`; each item has a unique `value` addressed by `current`, a `label` as string / `Snippet<[open, variant]>` / component, a `panel` as `Snippet<[variant]>` / component, and optional `inactive` |
| `children` | `Snippet` | - | Declarative mode: place `<Disclosure id=...>` children directly; when both `children` and `items` are supplied, `children` wins |
| `current` | `string` | - | Bindable `value` of the open item; `undefined` means all closed. Accordion is exclusive (at most one item open at a time) |
| `styling` | `SVSClass` | - | Styling override |
| `variant` | `SVSVariant` | `NEUTRAL` | Variant |
| `disclosure` | `DisclosureProps` | - | Default props applied to the data-mode inner `Disclosure` |
## Styling

To learn more, see [Styling](/docs/styling).

### Variant Management

No automatic switching.

### Default Class Name

`svs-accordion`

Internal dependent components combine the parent class with their own default class names, resulting in multiple classes (e.g., `svs-accordion svs-disclosure`).

## Behavior

Declarative `<Disclosure id=...>` children automatically coordinate exclusive open state through `current` and inherit the base `variant`/`styling`.

## Accessibility

### ARIA Roles and Attributes

The component applies these automatically:

- Accordion (`whole` `<div>`): `role="group"`.

Each item is a `Disclosure` child. See [Disclosure](/docs/disclosure) for each item's ARIA attributes and keyboard behavior.

### Standards Basis

Accordion items are built on native `<details>` / `<summary>` through Disclosure, so keyboard and assistive-technology support follows the browser standard for disclosure controls. See the [Concepts standards-first guidance](/docs/concepts) for the library's approach.

## Exports

### Types

```ts
type AccordionComponent = { component: Component<any>; props?: Record<string, unknown> };
type AccordionItem = {
  value: string; // REQUIRED, unique within `items`. Addresses `current`.
  label: string | Snippet<[boolean, string]> | AccordionComponent;
  panel: Snippet<[string]> | AccordionComponent;
  inactive?: string | boolean; // (false) reason string OR true; forwarded to Disclosure
};
interface AccordionProps {
  items?: AccordionItem[];
  children?: Snippet;
  current?: string; // bindable, undefined = all closed
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  disclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps | "id" | "inactive">;
}
type AccordionReqdProps = never;
type AccordionBindProps = "current";
```

### Others

No additional exports are available.

## Examples

The example code uses Tailwind CSS along with `SVSClass`.

### Basic

**Code**

```svelte src=AccordionBasic.svelte
<script lang="ts">
  import { Accordion } from "svseeds";

  const items = [
    { value: "1", label: "First Item", panel: panel1 },
    { value: "2", label: "Second Item", panel: panel2 },
    { value: "3", label: "Third Item", panel: panel3 },
  ];
  const styling = {
    whole: "w-100 rounded-md border border-teal-500 overflow-hidden",
  };
  const childStyle = {
    whole: "w-full",
    label: "p-2 block font-medium bg-teal-600 cursor-pointer select-none [&::-webkit-details-marker]:hidden hover:underline",
    main: "py-1 px-2",
  };
  const myProps = {
    items,
    styling,
    disclosure: {
      styling: childStyle,
    },
  };
</script>

{#snippet panel1(_variant: string)}
  Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.
{/snippet}
{#snippet panel2(_variant: string)}
  Justo sea et. Sea est accusam sanctus feugait sed dolore lorem consectetuer est.
{/snippet}
{#snippet panel3(_variant: string)}
  No dolore aliquip et aliquip sed lorem et qui nihil dolor sit lorem no sit. Esse sed ipsum et diam takimata.
{/snippet}

<Accordion {...myProps} />
```
### With Interactive Variant

**Code**

```svelte src=AccordionPract.svelte
<script lang="ts">
  import { Accordion } from "svseeds";
  import ChevronDown from "@lucide/svelte/icons/chevron-down";

  let { variant = $bindable() } = $props();
  const items = [
    { value: "1", label: label1, panel: panel1 },
    { value: "2", label: label2, panel: panel2 },
    { value: "3", label: label3, panel: panel3 },
  ];
  const variantStyle = {
    neutral: "border-gray-400",
    active: "border-teal-500",
    inactive: "border-red-500",
    blue: "border-blue-500",
    yellow: "border-yellow-500",
    sky: "border-sky-500",
  };
  const styling = {
    whole: {
      base: "p-10 w-100 border",
      ...variantStyle,
    },
  };
  const childStyle = {
    whole: "w-full",
    label:
      "p-2 flex justify-between items-center font-medium border-b border-gray-400 cursor-pointer select-none [&::-webkit-details-marker]:hidden",
    main: "py-1 px-2",
  };
  const myProps = {
    items,
    styling,
    disclosure: {
      styling: childStyle,
    },
  };
</script>

{#snippet label1(open: boolean, _variant: string)}
  First Item
  {@render icon(open)}
{/snippet}
{#snippet label2(open: boolean, _variant: string)}
  Second Item
  {@render icon(open)}
{/snippet}
{#snippet label3(open: boolean, _variant: string)}
  Third Item
  {@render icon(open)}
{/snippet}
{#snippet panel1(_variant: string)}
  Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.
{/snippet}
{#snippet panel2(_variant: string)}
  Justo sea et. Sea est accusam sanctus feugait sed dolore lorem consectetuer est.
{/snippet}
{#snippet panel3(_variant: string)}
  No dolore aliquip et aliquip sed lorem et qui nihil dolor sit lorem no sit. Esse sed ipsum et diam takimata.
{/snippet}

<Accordion {variant} {...myProps} />

{#snippet icon(open: boolean)}
  <div class={["size-fit transition-[rotate] duration-400", { "rotate-180": open }]}>
    <ChevronDown class="size-5 stroke-gray-500" />
  </div>
{/snippet}
```