Components

Collapsible

Disclosure with a 200ms cds height animation (clip-path keeps focus rings visible sideways), instant / fade / grid modes, a rotating caret and claude.ai trigger recipes.

Disclosure rows

Settings › Memory projects: 45px rows on a 5 % divider; hover draws an 8px-radius ghost fill and hides the divider. Content can be found by the browser's find-in-page when unmount-on-hide is off.

disclosure-row recipe

Summaries of the reading list, grouped by topic. Prefers short bullet lists.

light

Summaries of the reading list.

dark

Summaries of the reading list.

Content modes

Height (default, 200ms cds ease-out), instant, height + fade with a 160ms close, and grid rows. Reduced motion: every mode is instant.

animated (height)

instant (:animated=false)

Project 1

Project 2

Project 3

fade, close 160ms

Chat 1

Chat 2

Chat 3

grid rows (Cowork aside)

Read the brief
Draft the outline
Review

Caret and other recipes

CollapsibleCaret follows the surrounding Collapsible (−90° in RTL). Recipes: card (session rail) and file-header (diff).

Carets

card recipe (compact rail)

src/app.vue · src/main.ts · …

file-header recipe (diff)

+ const open = shallowRef(true)