# Disclosure

A component that reveals or hides additional content when toggled.

## Usage

Use standalone, or inside `Accordion`.
```svelte
<Disclosure label="Section" {...props}>Content</Disclosure>
```

## Anatomy

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

```svelte
<details class="whole" {...rest}>
  <summary class="label" aria-disabled aria-description>
    {label}
  </summary>
  <div class="main" transition:slide conditional>
    {children}
  </div>
</details>
```

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `label*` | `string | Snippet` | - | Trigger label; receives open and variant |
| `children*` | `Snippet` | - | Panel content; receives variant |
| `open` | `boolean` | `false` | Bindable open/closed state |
| `duration` | `number` | `200` | Default slide duration; feeds the default slide params |
| `transition` | `DisclosureTransition` | - | Overrides the open/close animation, default slide |
| `inactive` | `string | boolean` | - | Soft-disable: reason string via `aria-description`, or `true` without a reason |
| `attach` | `Attachment` | - | Svelte attachment on the details element |
| `element` | `HTMLDetailsElement` | - | Bindable details element |
| `styling` | `SVSClass` | - | Styling override |
| `variant` | `SVSVariant` | `NEUTRAL` | Bindable variant |
`*` required. Other `HTMLDetailsAttributes` except `name` are passed to `<details>` via rest props; `class` is merged onto the root.

## Styling

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

### Variant Management

When the details element is closed, `neutral` is applied; when it is open, `active` is applied. If the `variant` prop is specified, the specified value is applied instead of `neutral`.

### Default Class Name

`svs-disclosure`

## Accessibility

### ARIA Roles and Attributes

The component applies these automatically:

- Summary (`label` `<summary>`): `aria-disabled="true"` when `inactive` is set, and `aria-description` when `inactive` is a reason string.

The managed inactive attributes are component-owned while inactive handling is active; pointer activation is suppressed instead of using a non-native disabled state.

### Standards Basis

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

## Exports

### Types

```ts
interface DisclosureProps extends Omit<HTMLDetailsAttributes, "children" | "name"> {
  label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
  children: Snippet<[string]>; // Snippet<[variant]>
  open?: boolean; // bindable (false)
  duration?: number; // (200)
  transition?: DisclosureTransition;
  inactive?: string | boolean; // reason string (aria-description) OR true for reason-less soft-disable
  attach?: Attachment<HTMLDetailsElement>;
  element?: HTMLDetailsElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // bindable (VARIANT.NEUTRAL)
  // other HTMLDetailsAttributes except `name` are passed to <details> via ...rest; `class` is merged onto root
}
type DisclosureReqdProps = "label" | "children";
type DisclosureBindProps = "open" | "variant" | "element";
type DisclosureTransition = {
  fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => TransitionConfig;
  params?: unknown;
};
```

### Others

No additional exports are available.

## Examples

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

### Basic

**Code**

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

  const styling = {
    whole: "w-100 rounded-md border border-teal-500 overflow-hidden",
    label: "p-2 block font-medium bg-teal-500 cursor-pointer select-none [&::-webkit-details-marker]:hidden hover:underline",
    main: "py-1 px-2",
  };
  const myProps = {
    label: "Title",
    styling,
  };
</script>

<Disclosure {...myProps}>
  Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.
</Disclosure>
```
### With Interactive Variant

**Code**

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

  let { variant = $bindable() } = $props();
  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: "m-2 w-100",
    label: {
      base: "p-2 flex justify-between items-center font-medium border-b cursor-pointer select-none [&::-webkit-details-marker]:hidden",
      ...variantStyle,
    },
    main: "py-1 px-2",
  };
  const myProps = {
    styling,
  };
</script>

<Disclosure bind:variant {...myProps}>
  {#snippet label(open: boolean)}
    Title
    {@render icon(open)}
  {/snippet}
  Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.
</Disclosure>

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