<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>, а раскрытие анимируется через <code class="code">Accordion.init()</code>.</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="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></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="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></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>