Timestamped actor / action / resource rows for compliance, security review, and operational tracing. table-ui carries the rows; tag-ui carries the action verb's severity; the card header carries filters. Distinct from timeline-ui (single-actor chronological events) and from feed-ui (notifications / posts surface).
Multi-actor history needing scan + filter + occasional drill-down. Audit logs are compliance evidence: every row is a who / when / what / where on a single resource class. The table-ui format scales to thousands of rows + cursor pagination; if the use case is single-actor narrative or fewer than ~20 events, prefer timeline-ui.
Standard layout: title + filters in the header, table in a bleed section, footer carrying status + pagination. Action column uses a tag-ui colored by verb severity (success/warning/danger). Resource column uses code-ui for monospace IDs.
<tbody>/<tr> in light DOM; the HTML parser foster-parents those out of custom elements. Set [columns] and [data] via the JS API (see audit-log.examples.js).create/update = primary, delete/revoke = danger, read/export = muted. The color is the audit signal at a glance; never use uncolored text.<code> — monospace makes scanning vertically aligned IDs trivial. <code-ui> is the BLOCK component (CODE label + Copy chrome); for a table cell use the native inline element. Never truncate trailing chars (they're how the user disambiguates similar IDs).