# Disclosure

Tabs, accordions, and carousels that show and hide content to keep the interface compact.

## Tabs

Tabbed panels with keyboard navigation and ARIA support. The tabs are a row of pills like the code-tab pills: a hairline outline, ink fill for the active tab. The tablist and panel carry `docs-tabs-list` and `docs-tabs-panel`, so a framing parent can turn the row into a header strip.

### Example

**npm**

```bash
npm install @dcupl/core
```

**yarn**

```bash
yarn add @dcupl/core
```

**pnpm**

```bash
pnpm add @dcupl/core
```

#### Usage

```html
<docs-tabs>
  <docs-tab key="npm" label="npm">
    <p>npm content</p>
  </docs-tab>
  <docs-tab key="yarn" label="yarn">
    <p>yarn content</p>
  </docs-tab>
</docs-tabs>
```

## Accordion

A disclosure list framed by the 1.5px rule (6px corners): semibold triggers with a chevron, items separated by hairlines. One item is open at a time unless `allowMultiple` is set.

### Single open (default)

dcupl is an in-memory data store for JavaScript/TypeScript: define models, load your data, then query and filter it.

dcupl loads data into memory and indexes it. Queries run entirely in the browser or Node.js runtime.

Use dcupl when you need fast client-side filtering, faceted search, or real-time data manipulation without server roundtrips.

### Multiple open

Run `npm install @dcupl/core` to add dcupl to your project.

Configure your models and data sources before calling `dcupl.init()`.

#### Usage

```html
<docs-accordion [allowMultiple]="false">
  <docs-accordion-item title="Question 1">
    Answer 1
  </docs-accordion-item>
  <docs-accordion-item title="Question 2" [open]="true">
    Answer 2 (open by default)
  </docs-accordion-item>
</docs-accordion>
```

## Carousel

A swipeable slide carousel framed by the 1.5px rule (6px corners), with square-ish arrow buttons and square position markers (mint for the current slide, like the table of contents). Supports touch, autoplay and keyboard.

### Example

### Slide 1

Swipe or use arrows to navigate

### Slide 2

Touch gestures supported on mobile

### Slide 3

Click a marker to jump to a slide

### With autoplay

Auto-advances every 3 seconds

Pauses on touch interaction

Resumes after interaction ends

#### Usage

```html
<docs-carousel
  [autoplay]="false"
  [autoplayInterval]="5000"
  [showDots]="true"
  [showArrows]="true"
  [loop]="true"
>
  <docs-carousel-slide>
    <div>Slide 1 content</div>
  </docs-carousel-slide>
  <docs-carousel-slide>
    <div>Slide 2 content</div>
  </docs-carousel-slide>
</docs-carousel>
```