<section class="section docs-section" id="accordion">
	<h2 class="section-title">Accordion</h2>
	<p class="docs-section-description">
		Accordion и Disclosure используют native <code class="code">&lt;details&gt;</code> / <code class="code">&lt;summary&gt;</code>, поэтому раскрытие работает без JS.
	</p>

	<div class="block">
		<div class="accordion">
			<details class="accordion-item" open>
				<summary class="accordion-summary">
					<span class="accordion-summary-content">
						<i class="ph ph-list-checks"></i>
						Release checklist
					</span>
					<i class="ph ph-caret-down accordion-icon"></i>
				</summary>
				<div class="accordion-panel">
					<p>Check component states, copy examples, keyboard focus, and responsive layout before release.</p>
				</div>
			</details>
			<details class="accordion-item">
				<summary class="accordion-summary">
					<span class="accordion-summary-content">
						<i class="ph ph-article"></i>
						Documentation notes
					</span>
					<i class="ph ph-caret-down accordion-icon"></i>
				</summary>
				<div class="accordion-panel">
					<p>Keep component copy short and include code examples for the smallest useful markup.</p>
				</div>
			</details>
			<details class="accordion-item">
				<summary class="accordion-summary">
					<span class="accordion-summary-content">
						<i class="ph ph-activity"></i>
						Runtime behavior
					</span>
					<i class="ph ph-caret-down accordion-icon"></i>
				</summary>
				<div class="accordion-panel">
					<p>Use native disclosure behavior when the component does not need custom animation or async content.</p>
				</div>
			</details>
		</div>
	</div>

	<div class="block">
		<details class="disclosure">
			<summary class="accordion-summary">
				<span class="accordion-summary-content">Compact disclosure</span>
				<i class="ph ph-caret-down accordion-icon"></i>
			</summary>
			<div class="accordion-panel">
				<p>Use this variant for a single expandable group inside forms or metadata blocks.</p>
			</div>
		</details>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Accordion HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="accordion"&gt;
  &lt;details class="accordion-item" open&gt;
    &lt;summary class="accordion-summary"&gt;
      &lt;span class="accordion-summary-content"&gt;
        &lt;i class="ph ph-list-checks"&gt;&lt;/i&gt;
        Release checklist
      &lt;/span&gt;
      &lt;i class="ph ph-caret-down accordion-icon"&gt;&lt;/i&gt;
    &lt;/summary&gt;
    &lt;div class="accordion-panel"&gt;
      &lt;p&gt;Check component states, copy examples, keyboard focus, and responsive layout.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/details&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Disclosure HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;details class="disclosure"&gt;
  &lt;summary class="accordion-summary"&gt;
    &lt;span class="accordion-summary-content"&gt;Compact disclosure&lt;/span&gt;
    &lt;i class="ph ph-caret-down accordion-icon"&gt;&lt;/i&gt;
  &lt;/summary&gt;
  &lt;div class="accordion-panel"&gt;
    &lt;p&gt;Use this variant for a single expandable group.&lt;/p&gt;
  &lt;/div&gt;
&lt;/details&gt;</code></pre>
	</div>
</section>