Menu
Public repository / master
AkurAI-Framework / site/frontend/components.html
Latest change b34c72a614f00efd0c0d58bdc5e3ccc63f07c682 - docs: fix stale info (v0.1.0 status, roadmap, crate table) + file remaining-feature batch ledger (BATCHES.md) by Ólafur Búi Ólafsson
{% include "header" %}
<main class="container components">
<header class="page-head">
<span class="eyebrow">Component library</span>
<h1>Components</h1>
<p class="lede">The built-in UI primitives, grouped by category. Everything here is plain
server-rendered HTML + CSS — native elements first, no framework runtime, no build step.</p>
</header>
<nav class="comp-index" aria-label="Component categories">
<a href="#g-actions">Actions</a>
<a href="#g-forms">Forms</a>
<a href="#g-data">Data display</a>
<a href="#g-feedback">Feedback</a>
<a href="#g-navigation">Navigation</a>
<a href="#g-overlays">Overlays</a>
<a href="#g-utilities">Utilities</a>
</nav>
<h2 class="comp-group" id="g-actions">Actions</h2>
<section class="comp-cat" id="buttons">
<h2>Buttons</h2>
<div class="comp-demo">
<a class="btn btn-primary" href="#buttons">Primary</a>
<a class="btn btn-secondary" href="#buttons">Secondary</a>
<a class="btn btn-ghost" href="#buttons">Ghost</a>
<a class="btn btn-primary btn-sm" href="#buttons">Small</a>
<button class="btn btn-secondary" disabled>Disabled</button>
</div>
</section>
<section class="comp-cat" id="button-group">
<h2>Button group</h2>
<div class="comp-demo">
<div class="btn-group" role="group" aria-label="View switcher">
<button type="button" class="btn btn-sm is-active" aria-pressed="true">List</button>
<button type="button" class="btn btn-sm" aria-pressed="false">Grid</button>
<button type="button" class="btn btn-sm" aria-pressed="false">Board</button>
</div>
</div>
</section>
<section class="comp-cat" id="icon-button">
<h2>Icon button</h2>
<div class="comp-demo">
<button type="button" class="btn-icon" aria-label="Search">
<span aria-hidden="true">⚲</span>
</button>
<button type="button" class="btn-icon btn-ghost" aria-label="Edit">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="btn-icon btn-icon-sm" aria-label="Close">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M6 6l12 12M18 6L6 18"/>
</svg>
</button>
</div>
</section>
<section class="comp-cat" id="dropdown-menu">
<h2>Dropdown menu</h2>
<div class="comp-demo">
<details class="dropdown">
<summary class="btn btn-secondary">
Options <span class="split-caret" aria-hidden="true">▾</span>
</summary>
<div class="menu" role="menu" aria-label="Options">
<a class="menu-item" role="menuitem" href="#button-group">
<span class="menu-icon" aria-hidden="true">▤</span>View item
</a>
<button type="button" class="menu-item" role="menuitem">
<span class="menu-icon" aria-hidden="true">✎</span>Rename
</button>
<button type="button" class="menu-item" role="menuitem">
<span class="menu-icon" aria-hidden="true">⧉</span>Duplicate
</button>
<hr class="menu-separator" role="separator" />
<button type="button" class="menu-item is-destructive" role="menuitem">
<span class="menu-icon" aria-hidden="true">✕</span>Delete
</button>
</div>
</details>
</div>
</section>
<section class="comp-cat" id="split-button">
<h2>Split button</h2>
<div class="comp-demo">
<div class="split-btn">
<button type="button" class="btn btn-primary">Save</button>
<details class="dropdown">
<summary class="btn btn-primary" aria-label="More save options">
<span class="split-caret" aria-hidden="true">▾</span>
</summary>
<div class="menu menu-end" role="menu" aria-label="Save options">
<button type="button" class="menu-item" role="menuitem">Save and close</button>
<button type="button" class="menu-item" role="menuitem">Save as draft</button>
<button type="button" class="menu-item" role="menuitem">Save a copy</button>
</div>
</details>
</div>
</div>
</section>
<h2 class="comp-group" id="g-forms">Forms</h2>
<section class="comp-cat" id="forms">
<h2>Form controls</h2>
<div class="comp-demo form-grid">
<label>Text input<input type="text" placeholder="Ada Lovelace" /></label>
<label>Email<input type="email" placeholder="ada@example.com" /></label>
<label>Password<input type="password" placeholder="••••••••" /></label>
<label>Select<select><option>One</option><option>Two</option></select></label>
<label class="span-2">Textarea<textarea rows="3" placeholder="Notes…"></textarea></label>
<fieldset>
<legend>Radio</legend>
<label class="inline"><input type="radio" name="r" checked /> A</label>
<label class="inline"><input type="radio" name="r" /> B</label>
</fieldset>
<div class="stack">
<label class="inline"><input type="checkbox" checked /> Checkbox</label>
<label>Range<input type="range" min="0" max="100" value="60" /></label>
</div>
</div>
</section>
<!-- ===========================================================================
Forms extras showcase — category "Forms"
Blocks: .switch, .input-group, .search, .field, .dropzone
=========================================================================== -->
<section class="comp-cat" id="switch">
<h2>Switch / toggle</h2>
<div class="comp-demo stack">
<label class="switch">
<input type="checkbox" class="switch-input" role="switch" />
<span class="switch-text">Email notifications</span>
</label>
<label class="switch">
<input type="checkbox" class="switch-input" role="switch" checked />
<span class="switch-text">
Two-factor authentication
<small>Require a code at every sign-in</small>
</span>
</label>
<label class="switch">
<input type="checkbox" class="switch-input" role="switch" disabled />
<span class="switch-text">Beta features (disabled)</span>
</label>
<label class="switch">
<input type="checkbox" class="switch-input" role="switch" checked disabled />
<span class="switch-text">Locked on (disabled)</span>
</label>
</div>
</section>
<section class="comp-cat" id="input-group">
<h2>Input group</h2>
<div class="comp-demo stack">
<label for="ig-url">Website</label>
<div class="input-group">
<span class="input-addon">https://</span>
<input type="text" id="ig-url" placeholder="your-site" />
<span class="input-addon">.com</span>
</div>
<label for="ig-user">Username</label>
<div class="input-group">
<span class="input-addon">@</span>
<input type="text" id="ig-user" placeholder="username" />
</div>
<label for="ig-price">Price</label>
<div class="input-group">
<span class="input-addon">ISK</span>
<input type="text" id="ig-price" placeholder="0" inputmode="numeric" />
<span class="input-addon">/mo</span>
</div>
</div>
</section>
<section class="comp-cat" id="search">
<h2>Search input</h2>
<div class="comp-demo stack">
<label for="search-empty">Search (empty)</label>
<div class="search">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="11" cy="11" r="7"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="search" id="search-empty" placeholder="Search components…" />
<button type="button" class="search-clear" aria-label="Clear search">×</button>
</div>
<label for="search-typing">Search (typing)</label>
<div class="search">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="11" cy="11" r="7"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="search" id="search-typing" value="dropzone" placeholder="Search components…" />
<button type="button" class="search-clear" aria-label="Clear search">×</button>
</div>
</div>
</section>
<section class="comp-cat" id="field">
<h2>Field with validation</h2>
<div class="comp-demo stack">
<div class="field">
<label for="f-name" class="field-required">Full name</label>
<input type="text" id="f-name" aria-describedby="f-name-hint" />
<span class="field-hint" id="f-name-hint">As it appears on your ID.</span>
</div>
<div class="field is-invalid">
<label for="f-email" class="field-required">Email</label>
<input type="email" id="f-email" value="not-an-email"
aria-invalid="true" aria-describedby="f-email-hint f-email-err" />
<span class="field-hint" id="f-email-hint">We'll never share it.</span>
<span class="field-error" id="f-email-err">Enter a valid email address.</span>
</div>
<div class="field is-valid">
<label for="f-handle">Handle</label>
<input type="text" id="f-handle" value="olibui" aria-describedby="f-handle-hint" />
<span class="field-hint" id="f-handle-hint">Looks good — that handle is available.</span>
</div>
</div>
</section>
<section class="comp-cat" id="dropzone">
<h2>File dropzone</h2>
<div class="comp-demo stack">
<label class="dropzone" for="dz-idle">
<svg class="dropzone-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 16V4"></path><path d="m6 10 6-6 6 6"></path>
<path d="M4 20h16"></path>
</svg>
<span class="dropzone-title">Drop files here or <b>browse</b></span>
<span class="dropzone-hint">PNG, JPG or PDF up to 10 MB</span>
<input type="file" id="dz-idle" class="dropzone-input"
accept="image/png,image/jpeg,application/pdf" multiple />
</label>
<label class="dropzone is-dragover" for="dz-drag">
<svg class="dropzone-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 16V4"></path><path d="m6 10 6-6 6 6"></path>
<path d="M4 20h16"></path>
</svg>
<span class="dropzone-title">Release to upload</span>
<span class="dropzone-hint">Drag-over state (preview)</span>
<input type="file" id="dz-drag" class="dropzone-input" />
</label>
</div>
</section>
<h2 class="comp-group" id="g-data">Data display</h2>
<section class="comp-cat" id="cards">
<h2>Cards</h2>
<div class="comp-demo grid-3">
{% for c in cards %}
<div class="card">
<h3>{{ c.title }}</h3>
<p class="muted">{{ c.body }}</p>
</div>
{% endfor %}
</div>
</section>
<section class="comp-cat" id="table">
<h2>Data table</h2>
<div class="comp-demo">
<table class="table">
<thead><tr>{% for col in table.columns %}<th>{{ col }}</th>{% endfor %}</tr></thead>
<tbody>{% for row in table.rows %}<tr>{% for cell in row %}<td>{{ cell }}</td>{% endfor %}</tr>{% endfor %}</tbody>
</table>
</div>
</section>
<section class="comp-cat" id="badges">
<h2>Badges</h2>
<div class="comp-demo">
{% for b in badges %}<span class="badge badge-{{ b.kind }}">{{ b.label }}</span>{% endfor %}
</div>
</section>
<section class="comp-cat" id="data-display">
<h2>Data display</h2>
<!-- Description list -->
<div class="comp-demo">
<dl class="desc-list">
<dt>Name</dt>
<dd>AkurAI Framework</dd>
<dt>Version</dt>
<dd>0.1.0</dd>
<dt>Status</dt>
<dd><span class="badge">Stable</span></dd>
<dt>License</dt>
<dd>MIT</dd>
</dl>
</div>
<!-- Metric -->
<div class="comp-demo">
<div class="metric">
<span class="metric-value">12,480</span>
<span class="metric-label">Requests</span>
<span class="metric-delta is-up">▲ 8.2%</span>
</div>
<div class="metric">
<span class="metric-value">142 ms</span>
<span class="metric-label">Avg latency</span>
<span class="metric-delta is-down">▼ 3.1%</span>
</div>
<div class="metric">
<span class="metric-value">99.98%</span>
<span class="metric-label">Uptime</span>
<span class="metric-delta is-up">▲ 0.4%</span>
</div>
</div>
<!-- Tag / chip -->
<div class="comp-demo">
<span class="tag">rust</span>
<span class="tag">no-build</span>
<span class="tag">sqlite</span>
<span class="tag">
semantic-search
<button class="tag-remove" type="button" aria-label="Remove semantic-search">×</button>
</span>
<span class="tag">
dark-theme
<button class="tag-remove" type="button" aria-label="Remove dark-theme">×</button>
</span>
</div>
<!-- Avatar -->
<div class="comp-demo">
<span class="avatar avatar-sm" role="img" aria-label="Óli Búi">ÓB</span>
<span class="avatar" role="img" aria-label="Klara">KL</span>
<span class="avatar avatar-lg avatar-status" role="img" aria-label="Jeeves, online">JV</span>
<span class="avatar-group" role="group" aria-label="Team members">
<span class="avatar" role="img" aria-label="Anna">AN</span>
<span class="avatar" role="img" aria-label="Björn">BJ</span>
<span class="avatar" role="img" aria-label="Caro">CA</span>
<span class="avatar avatar-more" role="img" aria-label="3 more members">+3</span>
</span>
</div>
<!-- Code block -->
<div class="comp-demo">
<div class="code-block">
<div class="code-block-bar">
<span class="code-block-name">main.rs</span>
<button class="code-block-copy" type="button" data-display-copy>Copy</button>
</div>
<pre><code>fn main() {
println!("AkurAI Framework — single binary, zero deps");
}</code></pre>
</div>
</div>
</section>
<h2 class="comp-group" id="g-feedback">Feedback</h2>
<section class="comp-cat" id="alerts">
<h2>Alerts</h2>
<div class="comp-demo stack">
{% for a in alerts %}
<div class="alert alert-{{ a.kind }}"><strong>{{ a.title }}</strong> <span>{{ a.text }}</span></div>
{% endfor %}
</div>
</section>
<!-- ============================================================
Feedback components showcase
============================================================ -->
<section class="comp-cat" id="toast">
<h2>Toast / notification</h2>
<div class="comp-demo stack">
<p class="muted small">Toasts stack in a fixed corner region and auto-dismiss after ~4s. Click to spawn one.</p>
<button type="button" class="btn" id="toast-demo-btn">Spawn toast</button>
<!-- Static reference examples -->
<div class="toast toast-success" role="status">
<span class="toast-icon" aria-hidden="true">✓</span>
<span class="toast-title">Saved</span>
<button type="button" class="toast-close" aria-label="Dismiss notification">×</button>
<span class="toast-text">Your changes were saved successfully.</span>
</div>
<div class="toast toast-info" role="status">
<span class="toast-icon" aria-hidden="true">i</span>
<span class="toast-title">Heads up</span>
<button type="button" class="toast-close" aria-label="Dismiss notification">×</button>
<span class="toast-text">A new version is available.</span>
</div>
<div class="toast toast-warning" role="status">
<span class="toast-icon" aria-hidden="true">!</span>
<span class="toast-title">Almost full</span>
<button type="button" class="toast-close" aria-label="Dismiss notification">×</button>
<span class="toast-text">Storage is at 92% capacity.</span>
</div>
<div class="toast toast-danger" role="status">
<span class="toast-icon" aria-hidden="true">✕</span>
<span class="toast-title">Upload failed</span>
<button type="button" class="toast-close" aria-label="Dismiss notification">×</button>
<span class="toast-text">The connection was lost. Try again.</span>
</div>
</div>
<!-- Live region: JS-spawned toasts mount here -->
<div class="toast-region" id="feedback-toast-region" aria-live="polite" aria-atomic="false"></div>
</section>
<section class="comp-cat" id="banner">
<h2>Banner</h2>
<div class="comp-demo stack">
<div class="banner banner-info" role="status">
<span class="banner-icon" aria-hidden="true">i</span>
<span class="banner-text"><strong>Maintenance:</strong> scheduled downtime Sunday 02:00–03:00 UTC.</span>
</div>
<div class="banner banner-warning" role="status">
<span class="banner-icon" aria-hidden="true">!</span>
<span class="banner-text"><strong>Trial ending:</strong> 3 days left on your plan.</span>
</div>
<div class="banner banner-danger" role="alert" data-feedback-dismissible>
<span class="banner-icon" aria-hidden="true">✕</span>
<span class="banner-text"><strong>Action required:</strong> verify your email to keep your account active.</span>
<button type="button" class="banner-close" aria-label="Dismiss banner">×</button>
</div>
</div>
</section>
<section class="comp-cat" id="progress">
<h2>Progress</h2>
<div class="comp-demo stack">
<div>
<p class="small muted">Determinate (66%)</p>
<div class="progress" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress" style="--progress-value:66%">
<span class="progress-bar"></span>
</div>
</div>
<div>
<p class="small muted">Indeterminate</p>
<div class="progress progress-indeterminate" role="progressbar" aria-label="Loading" aria-valuetext="Loading">
<span class="progress-bar"></span>
</div>
</div>
<div>
<p class="small muted">Ring (75%)</p>
<div class="progress-ring" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Completion" style="--progress-value:75%">
<span class="progress-ring-label">75%</span>
</div>
</div>
</div>
</section>
<section class="comp-cat" id="spinner">
<h2>Spinner</h2>
<div class="comp-demo">
<span class="spinner spinner-sm" role="status"><span class="visually-hidden">Loading</span></span>
<span class="spinner spinner-md" role="status"><span class="visually-hidden">Loading</span></span>
<span class="spinner spinner-lg" role="status"><span class="visually-hidden">Loading</span></span>
</div>
</section>
<section class="comp-cat" id="skeleton">
<h2>Skeleton</h2>
<div class="comp-demo stack" aria-busy="true">
<div class="card" style="display:flex;gap:1rem;align-items:center">
<span class="skeleton skeleton-avatar" aria-hidden="true"></span>
<div style="flex:1">
<span class="skeleton skeleton-line" aria-hidden="true"></span>
<span class="skeleton skeleton-line skeleton-line-sm" aria-hidden="true"></span>
</div>
</div>
<span class="skeleton skeleton-card" aria-hidden="true"></span>
<span class="visually-hidden">Loading content…</span>
</div>
</section>
<section class="comp-cat" id="empty">
<h2>Empty state</h2>
<div class="comp-demo">
<div class="empty">
<span class="empty-icon" aria-hidden="true">📭</span>
<p class="empty-title">No projects yet</p>
<p class="empty-text">Create your first project to start tracking work and collaborating with your team.</p>
<button type="button" class="btn">New project</button>
</div>
</div>
</section>
<h2 class="comp-group" id="g-navigation">Navigation</h2>
<section class="comp-cat" id="tabs">
<h2>Tabs</h2>
<div class="comp-demo">
<div class="tabs" role="tablist" aria-label="Account settings">
<button class="tab" role="tab" id="tab-profile" aria-controls="panel-profile" aria-selected="true">Profile</button>
<button class="tab" role="tab" id="tab-billing" aria-controls="panel-billing" aria-selected="false">Billing</button>
<button class="tab" role="tab" id="tab-team" aria-controls="panel-team" aria-selected="false">Team</button>
</div>
<div class="tabpanel" role="tabpanel" id="panel-profile" aria-labelledby="tab-profile" tabindex="0">
<p class="muted">Your profile details and public identity live here.</p>
</div>
<div class="tabpanel" role="tabpanel" id="panel-billing" aria-labelledby="tab-billing" tabindex="0" hidden>
<p class="muted">Manage payment methods and invoices.</p>
</div>
<div class="tabpanel" role="tabpanel" id="panel-team" aria-labelledby="tab-team" tabindex="0" hidden>
<p class="muted">Invite members and assign roles.</p>
</div>
</div>
</section>
<section class="comp-cat" id="breadcrumbs">
<h2>Breadcrumbs</h2>
<div class="comp-demo">
<nav aria-label="Breadcrumb">
<ol class="crumbs">
<li><a href="#">Home</a></li>
<li><span class="crumbs-sep" aria-hidden="true">/</span><a href="#">Components</a></li>
<li><span class="crumbs-sep" aria-hidden="true">/</span><a href="#">Navigation</a></li>
<li><span class="crumbs-sep" aria-hidden="true">/</span><span aria-current="page">Breadcrumbs</span></li>
</ol>
</nav>
</div>
</section>
<section class="comp-cat" id="pagination">
<h2>Pagination</h2>
<div class="comp-demo">
<nav class="pager" aria-label="Pagination">
<ul>
<li><span class="pager-disabled" aria-disabled="true">Prev</span></li>
<li><a href="#" aria-current="page">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next page">Next</a></li>
</ul>
</nav>
</div>
</section>
<section class="comp-cat" id="steps">
<h2>Steps / Stepper</h2>
<div class="comp-demo">
<ol class="steps" aria-label="Progress">
<li class="step is-done">
<span class="step-marker" aria-hidden="true"></span>
<span class="step-label">Account <span class="small muted">(done)</span></span>
</li>
<li class="step is-done">
<span class="step-marker" aria-hidden="true"></span>
<span class="step-label">Profile <span class="small muted">(done)</span></span>
</li>
<li class="step is-current" aria-current="step">
<span class="step-marker" aria-hidden="true"></span>
<span class="step-label">Payment</span>
</li>
<li class="step">
<span class="step-marker" aria-hidden="true"></span>
<span class="step-label">Confirm</span>
</li>
</ol>
</div>
</section>
<section class="comp-cat" id="navlist">
<h2>Menu list</h2>
<div class="comp-demo">
<nav aria-label="Settings">
<ul class="navlist">
<li><a href="#">General</a></li>
<li><a href="#" aria-current="page">Security</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">Integrations</a></li>
<li><a href="#">Billing</a></li>
</ul>
</nav>
</div>
</section>
<h2 class="comp-group" id="g-overlays">Overlays</h2>
<section class="comp-cat" id="overlays">
<h2>Overlays</h2>
<!-- ---------- Modal / dialog ---------- -->
<div class="comp-demo stack">
<h3 class="muted small">Modal / dialog</h3>
<div>
<button class="btn btn-primary" data-open-modal="demo-modal">Open modal</button>
</div>
<dialog id="demo-modal" class="modal" aria-labelledby="demo-modal-title">
<div class="modal-head">
<h4 class="modal-title" id="demo-modal-title">Confirm deployment</h4>
<button class="modal-close" data-close-modal aria-label="Close dialog">×</button>
</div>
<div class="modal-body">
<p>You're about to ship the current build to production. This runs the release
engine and restarts the service.</p>
<p>Anyone connected will see a brief reconnect. Continue?</p>
</div>
<div class="modal-foot">
<button class="btn" data-close-modal>Cancel</button>
<button class="btn btn-primary" data-close-modal>Deploy</button>
</div>
</dialog>
</div>
<!-- ---------- Drawer / sheet ---------- -->
<div class="comp-demo stack">
<h3 class="muted small">Drawer / sheet</h3>
<div>
<button class="btn" data-open-drawer="demo-drawer">Open drawer</button>
</div>
<div id="demo-drawer" class="drawer" aria-hidden="true">
<div class="drawer-backdrop" data-close-drawer></div>
<aside class="drawer-panel" role="dialog" aria-modal="true" aria-labelledby="demo-drawer-title">
<div class="drawer-head">
<h4 class="drawer-title" id="demo-drawer-title">Filters</h4>
<button class="modal-close" data-close-drawer aria-label="Close drawer">×</button>
</div>
<div class="drawer-body">
<p>Refine the result set. Changes apply live.</p>
<label for="drawer-q">Search</label>
<input id="drawer-q" type="text" placeholder="Type to filter…">
<label for="drawer-sort">Sort by</label>
<select id="drawer-sort">
<option>Most recent</option>
<option>Name</option>
<option>Size</option>
</select>
</div>
<div class="drawer-foot">
<button class="btn" data-close-drawer>Cancel</button>
<button class="btn btn-primary" data-close-drawer>Apply</button>
</div>
</aside>
</div>
</div>
<!-- ---------- Popover ---------- -->
<div class="comp-demo stack">
<h3 class="muted small">Popover</h3>
<details class="popover">
<summary class="btn">Account options</summary>
<div class="popover-panel" role="group" aria-label="Account options">
<p class="popover-title">Signed in as Óli</p>
<p>Switch the active workspace or sign out below.</p>
<label for="pop-ws" class="small">Workspace</label>
<select id="pop-ws">
<option>AkurAI</option>
<option>localai</option>
</select>
</div>
</details>
</div>
<!-- ---------- Tooltip ---------- -->
<div class="comp-demo">
<h3 class="muted small">Tooltip</h3>
<span class="tooltip">
<button class="btn" aria-describedby="tip-sync">Sync now</button>
<span class="tooltip-tip" role="tooltip" id="tip-sync">
Pulls the latest records from all connected sources.
</span>
</span>
</div>
</section>
<h2 class="comp-group" id="g-utilities">Utilities</h2>
<section class="comp-cat" id="disclosure">
<h2>Disclosure</h2>
<div class="comp-demo">
<details><summary>What is a disclosure?</summary><p class="muted">A native expandable section — zero JavaScript.</p></details>
</div>
</section>
</main>
{% include "footer" %}