# Disclosure

Hides a section or a detail until the reader opens it, and shows it in place.

* Kind: component
* Page: https://design.werklist.com/components/disclosure
* Version: 2.1.2

## When to use it

* Detail most readers skip, such as quoted text or message details.
* The sections of a record on a small screen, such as the documents, work permit and interview notes in a candidate's file.
* Advanced settings below the common ones.

## When not to use it

* Anything the task requires.
* Navigation between pages: use the side navigation.
* More than one level of nesting: use a tree.

## Rules

* Permitted: a closed section for detail most readers skip.
* Not permitted: required information in a closed section.
* Not permitted: a section that is always open but still looks and acts like a toggle.
* Opening one section does not close another.

## Anatomy

* Section row: at least 44 px; padding 9 px above and below, 8 px before the chevron, 12 px at the end; gap 8 px (--space-2, --space-3)
* Section heading: Body, 16 px on 26 px, bold (--type-body, --text)
* Compact row: in a dense side panel used with a mouse, such as a list of folders: bold, padding 4 px by 6 px, a 14 px chevron, 4 px gap
* Chevron: 16 px, pointing right, before the heading, stroke 2.25; turns a quarter to point down when open (--text-muted)
* Hover fill: radius 8 px, fine pointer only (--glass-fill-hover)
* Panel: starts under the heading's first letter; 16 px below the content (--space-4)
* Between sections: 4 px, no lines (--space-1)
* Inline phrase: medium weight, --text-muted, --text on hover; a 14 px chevron pointing down, 4 px after it, turns over when open; target 24 px high, 44 px on touch (--text-muted)

## Variants

* section: A row that leads with a chevron and holds the heading, and opens a panel below.
* inline: A phrase inside content that reads Show and turns to Hide when open.

## States

* closed: chevron points right; panel hidden
* open: chevron points down; panel shown; height and opacity over 150 ms (--duration-fast, --ease-standard)
* hover: faint fill on the section row; fine pointer only (--glass-fill-hover)
* focus visible: 2 px ring on the row or phrase (--focus-ring)

## Keyboard

* Tab: Moves to the next heading or into an open panel
* Enter: Opens or closes
* Space: Opens or closes

## Accessibility

* The expanded state is announced, and find in page opens a closed section that holds a match.
* When sections form a list, the summary holds the section's heading element.
* The inline phrase changes between Show and Hide; the expanded state says the same thing.
* A printed page shows every section open; on screen they return to how they were.
* On a wide screen, a group of sections may stay open all the time; its headings are then plain headings, not toggles.

## Content

* Name what the section holds; sentence case, no full stop, one line at 360 px.
* Inline phrases start with Show or Hide and name the content.

## Tokens

* --type-body
* --text
* --text-muted
* --glass-fill-hover
* --radius-lg
* --space-1
* --space-2
* --space-3
* --space-4
* --focus-ring
* --duration-fast
* --ease-standard