{
  "title": "Disclosure",
  "path": "/components/disclosure",
  "url": "https://design.werklist.com/components/disclosure",
  "text": "https://design.werklist.com/agent/components/disclosure",
  "summary": "Hides a section or a detail until the reader asks for it, then shows it in place.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Disclosure",
  "purpose": "Hides a section or a detail until the reader opens it, and shows it in place.",
  "use": [
    "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."
  ],
  "avoid": [
    "Anything the task requires.",
    "Navigation between pages: use the side navigation.",
    "More than one level of nesting: use a tree."
  ],
  "variants": [
    {
      "name": "section",
      "use": "A row that leads with a chevron and holds the heading, and opens a panel below."
    },
    {
      "name": "inline",
      "use": "A phrase inside content that reads Show and turns to Hide when open."
    }
  ],
  "anatomy": [
    {
      "part": "Section row",
      "measure": "at least 44 px; padding 9 px above and below, 8 px before the chevron, 12 px at the end; gap 8 px",
      "token": "--space-2, --space-3"
    },
    {
      "part": "Section heading",
      "measure": "Body, 16 px on 26 px, bold",
      "token": "--type-body, --text"
    },
    {
      "part": "Compact row",
      "measure": "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"
    },
    {
      "part": "Chevron",
      "measure": "16 px, pointing right, before the heading, stroke 2.25; turns a quarter to point down when open",
      "token": "--text-muted"
    },
    {
      "part": "Hover fill",
      "measure": "radius 8 px, fine pointer only",
      "token": "--glass-fill-hover"
    },
    {
      "part": "Panel",
      "measure": "starts under the heading's first letter; 16 px below the content",
      "token": "--space-4"
    },
    {
      "part": "Between sections",
      "measure": "4 px, no lines",
      "token": "--space-1"
    },
    {
      "part": "Inline phrase",
      "measure": "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",
      "token": "--text-muted"
    }
  ],
  "states": [
    {
      "name": "closed",
      "change": "chevron points right; panel hidden"
    },
    {
      "name": "open",
      "change": "chevron points down; panel shown; height and opacity over 150 ms",
      "tokens": [
        "--duration-fast",
        "--ease-standard"
      ]
    },
    {
      "name": "hover",
      "change": "faint fill on the section row; fine pointer only",
      "tokens": [
        "--glass-fill-hover"
      ]
    },
    {
      "name": "focus visible",
      "change": "2 px ring on the row or phrase",
      "tokens": [
        "--focus-ring"
      ]
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Moves to the next heading or into an open panel"
    },
    {
      "key": "Enter",
      "action": "Opens or closes"
    },
    {
      "key": "Space",
      "action": "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"
  ],
  "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."
  ]
}