Audit logs
Present security events with timestamp, actor and action in a stable table.
Live preview
| When | Actor | Action |
|---|---|---|
| [email protected] | Updated policy | |
| [email protected] | Read project |
HTML
<div class="xsh-table-wrap">
<table class="xsh-table xsh-audit">
<caption>Example audit trail</caption>
<thead>
<tr>
<th>When</th>
<th>Actor</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<time datetime="2026-10-30T10:00:00">10:00</time>
</td>
<td>[email protected]</td>
<td>Updated policy</td>
</tr>
<tr>
<td>
<time datetime="2026-10-30T09:40:00">09:40</time>
</td>
<td>[email protected]</td>
<td>Read project</td>
</tr>
</tbody>
</table>
</div>Installation & markup
Include the local stylesheet and script once on the page, then place the component inside a data-xsh-ui root. The example above works without a build system.
<link rel="stylesheet" href="/dist/xshna-ui.css">
<div data-xsh-ui>
<!-- Add the HTML example above -->
</div>
<script defer src="/dist/xshna-ui.js"></script>Component API
Public classes, attributes and hooks used by this example. Keep the xsh- prefix intact.
| Identifier | Contract |
|---|---|
xsh-audit | Used by the example markup and component styles or behavior. |
xsh-table | Used by the example markup and component styles or behavior. |
time | Used by the example markup and component styles or behavior. |
Accessibility & keyboard
Table headers map actions to timestamp and actor.
Implementation note. Authorization and reliable audit capture are backend responsibilities.
Interaction contract
Behavioral components use the shared delegated runtime; visual-only primitives rely on semantic HTML and CSS. Runtime controls emit bubbling xsh:* CustomEvents; bind application handlers to those events when server persistence, API data or navigation is required.