Disclosure

디스클로저와 아코디언은 네이티브 <details>와 <summary> 요소입니다. 컴포넌트는 없습니다. 키보드 조작, 스크린 리더가 읽는 펼침 상태, 닫힌 내용 안의 페이지 내 찾기, 열림 표시를 브라우저가 이미 처리합니다. Todae는 disclosure contract 토큰으로 todae.base 레이어에서 이 요소들의 스타일을 정합니다.

<details>
	<summary>Shipping details</summary>
	<Text>Orders ship within two business days.</Text>
</details>

아코디언

<details> 요소들에 같은 name을 주면 브라우저가 그중 최대 하나만 열어 둡니다. 하나만 열리는 아코디언입니다. 이름이 있는 디스클로저에는 disclosure.border로 구분선이 생깁니다. 처음부터 하나를 열어 두려면 open 속성을, 변화를 따라가려면 네이티브 toggle 이벤트를 쓰세요.

<details name="faq" open>
	<summary>What is Todae?</summary>
	…
</details>
<details name="faq">
	<summary>Does it ship icons?</summary>
	…
</details>

표시는 브라우저 자체의 것이며 디스클로저가 열리면 돌아갑니다. 직접 사용하는 아이콘 세트의 아이콘을 쓰려면 summary { list-style: none }으로 표시를 숨기고 summary 안에 아이콘을 넣으세요. 내용은 disclosure.motion.duration 동안 서서히 나타나며, 사용자가 동작 줄이기를 선호하면 움직이지 않습니다.

언제 쓰나요

언제: 독자가 그 자리에서 열어 볼 수 있는 선택적인 세부 내용. 자주 묻는 질문, 고급 설정, 긴 설명. 한 번에 하나만 열리는 여러 개 → 같은 name을 공유하는 아코디언.

쓰지 않을 때: 같은 대상의 여러 보기를 화살표 키로 하나씩 보여 줄 때 → Tabs. 작업을 막는 선택이나 폼 → Dialog. 대부분의 독자에게 필요한 내용 → 그냥 보여 주세요.