<section class="section docs-section" id="timeline">
	<h2 class="section-title">Timeline</h2>
	<p class="docs-section-description">
		Timeline и Activity Log показывают историю событий, audit trail, job updates и системные изменения.
	</p>

	<div class="block">
		<ol class="timeline">
			<li class="timeline-item timeline-item-success">
				<span class="timeline-marker"><i class="ph ph-check-circle"></i></span>
				<div class="timeline-content">
					<article class="timeline-card">
						<div class="timeline-header">
							<h3 class="timeline-title">Build completed</h3>
							<time class="timeline-time" datetime="2026-04-11T22:24:00">22:24</time>
						</div>
						<p class="timeline-text">Production bundle finished without warnings.</p>
						<div class="timeline-meta">
							<span class="chip chip-success">Done</span>
							<span class="chip">CI</span>
						</div>
					</article>
				</div>
			</li>
			<li class="timeline-item timeline-item-warning">
				<span class="timeline-marker"><i class="ph ph-warning"></i></span>
				<div class="timeline-content">
					<article class="timeline-card">
						<div class="timeline-header">
							<h3 class="timeline-title">Review requested</h3>
							<time class="timeline-time" datetime="2026-04-11T22:18:00">22:18</time>
						</div>
						<p class="timeline-text">Design tokens changed and need one visual pass before release.</p>
						<div class="timeline-meta">
							<span class="chip chip-warning">Review</span>
						</div>
					</article>
				</div>
			</li>
			<li class="timeline-item">
				<span class="timeline-marker"><i class="ph ph-git-commit"></i></span>
				<div class="timeline-content">
					<article class="timeline-card">
						<div class="timeline-header">
							<h3 class="timeline-title">Commit pushed</h3>
							<time class="timeline-time" datetime="2026-04-11T22:10:00">22:10</time>
						</div>
						<p class="timeline-text">Component documentation and demo examples were updated.</p>
					</article>
				</div>
			</li>
		</ol>
	</div>

	<div class="block">
		<div class="activity-log">
			<div class="activity-log-row">
				<time class="activity-log-time" datetime="2026-04-11T22:24:00">22:24</time>
				<span class="activity-log-title">Build completed</span>
				<span class="badge badge-success">Done</span>
			</div>
			<div class="activity-log-row">
				<time class="activity-log-time" datetime="2026-04-11T22:18:00">22:18</time>
				<span class="activity-log-title">Review requested</span>
				<span class="badge badge-warning">Pending</span>
			</div>
			<div class="activity-log-row">
				<time class="activity-log-time" datetime="2026-04-11T22:10:00">22:10</time>
				<span class="activity-log-title">Commit pushed</span>
				<span class="badge badge-secondary">Info</span>
			</div>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Timeline HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;ol class="timeline"&gt;
  &lt;li class="timeline-item timeline-item-success"&gt;
    &lt;span class="timeline-marker"&gt;&lt;i class="ph ph-check-circle"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;div class="timeline-content"&gt;
      &lt;article class="timeline-card"&gt;
        &lt;div class="timeline-header"&gt;
          &lt;h3 class="timeline-title"&gt;Build completed&lt;/h3&gt;
          &lt;time class="timeline-time" datetime="2026-04-11T22:24:00"&gt;22:24&lt;/time&gt;
        &lt;/div&gt;
        &lt;p class="timeline-text"&gt;Production bundle finished without warnings.&lt;/p&gt;
      &lt;/article&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ol&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Activity Log HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="activity-log"&gt;
  &lt;div class="activity-log-row"&gt;
    &lt;time class="activity-log-time" datetime="2026-04-11T22:24:00"&gt;22:24&lt;/time&gt;
    &lt;span class="activity-log-title"&gt;Build completed&lt;/span&gt;
    &lt;span class="badge badge-success"&gt;Done&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
</section>