# astro-better-details

Native details/summary disclosure panels with animated chevron and CSS custom property theming.

> For the index of this section of the site, see [llms.txt](https://lambdalatitudinarians.org/llms.txt)

# astro-better-details

Expandable disclosure panels built on the native `<details>`/`<summary>` HTML elements. No JavaScript required. Includes an animated chevron and CSS custom property theming.

Current version: **0.1.0** --[npm](https://www.npmjs.com/package/astro-better-details)

## Installation

```shell-session
$ npm install astro-better-details
```

## Usage

Pass the title as a prop for plain text headers:

```jsx
import Details from 'astro-better-details/Details.astro';

<Details title="Section title">
  Content goes here. Supports **markdown** and MDX components.
</Details>
```

Use the `title` slot when the header needs inline markup — code, links, or other components:

```jsx
<Details>
  <span slot="title">Why use <code>astro-better-details</code>?</span>
  Content goes here.
</Details>
```

## Live examples

Click to expand

This content is hidden by default and revealed when clicked. Supports any MDX content including code blocks, lists, and other components.

Open by default

Pass the `open` prop to render the panel pre-expanded.

Title with inline `code` via the slot Use the `title` slot when the header needs inline markup that a plain string prop can’t express.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | — | Plain-text header label; use the `title` slot for inline markup |
| `open` | `boolean` | `false` | Render the panel pre-expanded |
| `class` | `string` | — | Extra class(es) added to the `<details>` element |

## Slots

| Slot | Description |
| --- | --- |
| `title` | Header content with inline markup — code, links, components; takes precedence over the `title` prop |
| (default) | Body content revealed when expanded |

## Theming

The component exposes CSS custom properties on `.abt-details`:

| Property | Controls |
| --- | --- |
| `--abt-details-border` | Border color of the outer container |
| `--abt-details-separator` | Border color of the line between header and body when open (defaults to `--abt-details-border`; set to `transparent` to hide) |
| `--abt-details-summary-bg` | Background color of the summary/header bar |
| `--abt-details-chevron` | Color of the rotating chevron icon |

Override to match your brand:

```css
.abt-details {
  --abt-details-border:     #ddd6fe;
  --abt-details-summary-bg: #f5f3ff;
  --abt-details-chevron:    #7c3aed;
}

.dark .abt-details {
  --abt-details-border:     #1c0e00;
  --abt-details-summary-bg: #111111;
  --abt-details-chevron:    #9ca3af;
}
```

### Tailwind Typography note

Applying `.prose` directly to `.abt-details-body` causes `@tailwindcss/typography` to italicize `<figcaption>` elements, which conflicts with code block titles from `astro-better-code-blocks`. Wrap prose content in a `<div>` inside the slot instead:

```jsx
<Details title="With prose styling">
  <div class="prose prose-slate dark:prose-invert max-w-none">
    Content with prose typography here.
  </div>
</Details>
```