<section class="section docs-section" id="data-patterns">
                  <h2 class="section-title">Data Patterns</h2>
                  <p class="docs-section-description">Toolbar, search field, pagination, empty state и skeleton закрывают типовые состояния таблиц, списков и страниц с данными.</p>
                  <div class="block">
                    <div class="toolbar">
                      <div class="toolbar-group">
                        <div>
                          <h3 class="toolbar-title">Projects</h3>
                          <span class="toolbar-meta">24 items</span>
                        </div>
                      </div>
                      <div class="toolbar-group">
                        <div class="input-group input-group-compact search-field">
                          <span class="input-group-addon">
                            <i class="ph ph-magnifying-glass"></i>
                          </span>
                          <input class="input-group-input" type="search" value="release" placeholder="Search">
                          <button class="input-group-action" type="button" data-input-clear aria-label="Clear search">
                            <i class="ph ph-x"></i>
                          </button>
                        </div>
                        <button class="btn btn-primary btn-small with-icon" type="button">
                          <i class="ph ph-funnel"></i>
                          Filter
                        </button>
                        <button class="btn btn-accent btn-small with-icon" type="button">
                          <i class="ph ph-plus"></i>
                          Create
                        </button>
                      </div>
                    </div>
                  </div>
                  <div class="block">
                    <div class="input-group">
                      <span class="input-group-addon">https://</span>
                      <input class="input-group-input" type="text" value="example.gnexus.local" placeholder="Domain">
                      <button class="input-group-action" type="button">Save</button>
                    </div>
                  </div>
                  <div class="block">
                    <nav class="pagination" aria-label="Pagination">
                      <button class="pagination-item" type="button" disabled>
                        <i class="ph ph-arrow-left"></i>
                      </button>
                      <button class="pagination-item pagination-item-active" type="button" aria-current="page">1</button>
                      <button class="pagination-item" type="button">2</button>
                      <button class="pagination-item" type="button">3</button>
                      <span class="pagination-ellipsis">...</span>
                      <button class="pagination-item" type="button">12</button>
                      <button class="pagination-item" type="button">
                        <i class="ph ph-arrow-right"></i>
                      </button>
                    </nav>
                  </div>
                  <div class="block">
                    <GnEmptyState title="No results" text="Nothing matched the current filters. Reset the query or create a new item.">
                      <template #actions>
                        <GnButton variant="secondary" size="sm">Reset</GnButton>
                        <GnButton variant="accent" size="sm">Create</GnButton>
                      </template>
                    </GnEmptyState>
                  </div>
                  <div class="block">
                    <div class="skeleton-stack" aria-label="Loading preview">
                      <span class="skeleton skeleton-title"></span>
                      <span class="skeleton skeleton-line"></span>
                      <span class="skeleton skeleton-line" style="width: 84%"></span>
                      <span class="skeleton skeleton-line" style="width: 68%"></span>
                      <span class="skeleton skeleton-block"></span>
                    </div>
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Toolbar 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="toolbar"&gt;
  &lt;div class="toolbar-group"&gt;
    &lt;div&gt;
      &lt;h3 class="toolbar-title"&gt;Projects&lt;/h3&gt;
      &lt;span class="toolbar-meta"&gt;24 items&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="toolbar-group"&gt;
    &lt;div class="input-group input-group-compact search-field"&gt;
      &lt;span class="input-group-addon"&gt;&lt;i class="ph ph-magnifying-glass"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;input class="input-group-input" type="search" placeholder="Search"&gt;
      &lt;button class="input-group-action" type="button" data-input-clear aria-label="Clear search"&gt;
        &lt;i class="ph ph-x"&gt;&lt;/i&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;button class="btn btn-accent btn-small"&gt;Create&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Input Group 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="input-group"&gt;
  &lt;span class="input-group-addon"&gt;https://&lt;/span&gt;
  &lt;input class="input-group-input" type="text" placeholder="Domain"&gt;
  &lt;button class="input-group-action" type="button"&gt;Save&lt;/button&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Pagination 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;nav class="pagination" aria-label="Pagination"&gt;
  &lt;button class="pagination-item" type="button" disabled&gt;Prev&lt;/button&gt;
  &lt;button class="pagination-item pagination-item-active" type="button" aria-current="page"&gt;1&lt;/button&gt;
  &lt;button class="pagination-item" type="button"&gt;2&lt;/button&gt;
  &lt;span class="pagination-ellipsis"&gt;...&lt;/span&gt;
  &lt;button class="pagination-item" type="button"&gt;12&lt;/button&gt;
  &lt;button class="pagination-item" type="button"&gt;Next&lt;/button&gt;
&lt;/nav&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Empty State 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="empty-state"&gt;
  &lt;div class="empty-state-icon"&gt;&lt;i class="ph ph-package"&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;h3 class="empty-state-title"&gt;No results&lt;/h3&gt;
  &lt;p class="empty-state-text"&gt;Nothing matched the current filters.&lt;/p&gt;
  &lt;div class="empty-state-actions"&gt;
    &lt;button class="btn btn-secondary btn-small"&gt;Reset&lt;/button&gt;
    &lt;button class="btn btn-accent btn-small"&gt;Create&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Skeleton 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="skeleton-stack" aria-label="Loading preview"&gt;
  &lt;span class="skeleton skeleton-title"&gt;&lt;/span&gt;
  &lt;span class="skeleton skeleton-line"&gt;&lt;/span&gt;
  &lt;span class="skeleton skeleton-line" style="width: 84%"&gt;&lt;/span&gt;
  &lt;span class="skeleton skeleton-block"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Input Patterns JS</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-js">InputPatterns.init();

// Available on the global namespace too:
GNexusUIKit.InputPatterns.init();</code></pre>
	</div>
</section>