<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">
                    <GnTabs v-model="tab" :items="tabs">
                      <template #overview><p>Overview keeps the primary status, totals, and next actions visible without leaving the current screen.</p></template>
                      <template #activity><p>Activity contains the latest events, audit notes, and handoff messages for the same record.</p></template>
                      <template #settings><p>Settings groups secondary options that affect this context but do not need full page navigation.</p></template>
                    </GnTabs>
                  </div>
                  <div class="block">
                    <GnTabs v-model="tabCompact" :items="tabsCompact" compact>
                      <template #api><p>Use compact tabs in dense panels, settings pages, and narrow metadata blocks.</p></template>
                      <template #webhooks><p>Disabled tabs can stay visible when a feature is unavailable for the current object.</p></template>
                      <template #billing><p>Billing content is disabled in this example.</p></template>
                    </GnTabs>
                  </div>
                  <div class="block">
                    <GnTabs v-model="tabVertical" :items="tabsVertical" vertical>
                      <template #profile><p>Vertical tabs work well when labels are longer or the panel needs a stable left rail.</p></template>
                      <template #access><p>Use them for account details, admin records, or focused configuration groups.</p></template>
                      <template #notes><p>On smaller screens the tab rail becomes a horizontal scrollable list.</p></template>
                    </GnTabs>
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Tabs 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="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>