<section class="section docs-section" id="tabs">
	<h2 class="section-title">Tabs</h2>
	<p class="docs-section-description">
		Tabs переключают связанные панели внутри одного контекста. Компонент поддерживает click, keyboard navigation и ARIA state через <code class="code">Tabs.init()</code>.
	</p>

	<div class="block">
		<div class="tabs" data-tabs>
			<div class="tabs-list" aria-label="Project sections">
				<button class="tab tab-active" type="button" aria-controls="tabs-overview">
					<i class="ph ph-chart-bar"></i>
					Overview
				</button>
				<button class="tab" type="button" aria-controls="tabs-activity">
					<i class="ph ph-clock"></i>
					Activity
				</button>
				<button class="tab" type="button" aria-controls="tabs-settings">
					<i class="ph ph-sliders"></i>
					Settings
				</button>
			</div>
			<div class="tabs-panels">
				<div class="tab-panel tab-panel-active" id="tabs-overview">
					<p>Overview keeps the primary status, totals, and next actions visible without leaving the current screen.</p>
				</div>
				<div class="tab-panel" id="tabs-activity">
					<p>Activity contains the latest events, audit notes, and handoff messages for the same record.</p>
				</div>
				<div class="tab-panel" id="tabs-settings">
					<p>Settings groups secondary options that affect this context but do not need full page navigation.</p>
				</div>
			</div>
		</div>
	</div>

	<div class="block">
		<div class="tabs tabs-compact" data-tabs>
			<div class="tabs-list" aria-label="Compact tabs">
				<button class="tab tab-active" type="button" aria-controls="tabs-compact-api">API</button>
				<button class="tab" type="button" aria-controls="tabs-compact-webhooks">Webhooks</button>
				<button class="tab" type="button" aria-controls="tabs-compact-billing" aria-disabled="true">Billing</button>
			</div>
			<div class="tabs-panels">
				<div class="tab-panel tab-panel-active" id="tabs-compact-api">
					<p>Use compact tabs in dense panels, settings pages, and narrow metadata blocks.</p>
				</div>
				<div class="tab-panel" id="tabs-compact-webhooks">
					<p>Disabled tabs can stay visible when a feature is unavailable for the current object.</p>
				</div>
				<div class="tab-panel" id="tabs-compact-billing">
					<p>Billing content is disabled in this example.</p>
				</div>
			</div>
		</div>
	</div>

	<div class="block">
		<div class="tabs tabs-vertical" data-tabs>
			<div class="tabs-list" aria-label="Vertical tabs">
				<button class="tab tab-active" type="button" aria-controls="tabs-profile">Profile</button>
				<button class="tab" type="button" aria-controls="tabs-access">Access</button>
				<button class="tab" type="button" aria-controls="tabs-notes">Notes</button>
			</div>
			<div class="tabs-panels">
				<div class="tab-panel tab-panel-active" id="tabs-profile">
					<p>Vertical tabs work well when labels are longer or the panel needs a stable left rail.</p>
				</div>
				<div class="tab-panel" id="tabs-access">
					<p>Use them for account details, admin records, or focused configuration groups.</p>
				</div>
				<div class="tab-panel" id="tabs-notes">
					<p>On smaller screens the tab rail becomes a horizontal scrollable list.</p>
				</div>
			</div>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Tabs HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="tabs" data-tabs&gt;
  &lt;div class="tabs-list" aria-label="Project sections"&gt;
    &lt;button class="tab tab-active" type="button" aria-controls="panel-overview"&gt;Overview&lt;/button&gt;
    &lt;button class="tab" type="button" aria-controls="panel-activity"&gt;Activity&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="tabs-panels"&gt;
    &lt;div class="tab-panel tab-panel-active" id="panel-overview"&gt;Overview content&lt;/div&gt;
    &lt;div class="tab-panel" id="panel-activity"&gt;Activity content&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
</section>