import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";

import * as ExpandStories from "./Expand.stories";

<Meta of={ExpandStories} />

# Expand

Expand is an in-page element used to hide cluttering details that a user may wish to reveal, such as raw
details of an alert or event.

It has one unnamed slot for the content to be displayed.

## Usage

```Typescript
import "@goauthentik/elements/Expand.js";
```

```html
<ak-expand><p>Your primary content goes here</p></ak-expand>
```

To show the expanded content on initial render:

```html
<ak-expand expanded><p>Your primary content goes here</p></ak-expand>
```

## Demo

### Default: The content is hidden

<Story of={ExpandStories.DefaultStory} />

### Expanded

<Story of={ExpandStories.Expanded} />
