.md

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 install @dcupl/core

Usage

<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

<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>

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

<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>