Optional Layer
Use the class-based UI kit when you only need the language. Use the Web Component layer when you want declarative HTML, attributes, slots, DOM events, and the same design vocabulary from plain browser markup.
The package export is `@incursa/ui-kit/web-components`. Pair it with `@incursa/ui-kit/web-components/style.css` for the default look, then import the runtime once to register the shipped elements.
<link rel="stylesheet" href="/node_modules/@incursa/ui-kit/web-components/style.css">
<script type="module">
import "@incursa/ui-kit/web-components";
</script>The v1 layer covers layouts, navbar/tabs/user-menu, field/input-group/choice-group/readonly-field/validation-summary, state/live-region/auto-refresh/theme-switcher, button/button-group/button-toolbar/close-button, alert/empty-state/list-group/key-value hosts, badge/spinner atoms, sparkline trends, and disclosure/dialog/drawer.
Tables, filters, bulk workflows, files, utilities, and most other presentation-only atoms stay CSS-first for now. Sparklines are promoted because dense metric tables need a reusable accessible trend primitive.
Plain HTML equivalent
This is the CSS-first version of the same screen shape. It works, but the structure is louder because every wrapper is spelled out by hand.
<section class="inc-card">
<div class="inc-card__header">
<h2 class="inc-card__title">Queue summary</h2>
</div>
<div class="inc-card__body">
<table class="inc-table inc-table--sm inc-table--data-table">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
</section>Web Components equivalent
The Web Component layer lets the browser own the semantics while the slots keep the layout contract obvious and reusable.
<inc-card elevated>
<div slot="header" class="inc-card__header">
<h2 class="inc-card__title">Queue summary</h2>
</div>
<div slot="body">
<table class="inc-table inc-table--sm inc-table--data-table">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
</inc-card>Badge hosts standardize tone and pill styling without making you memorize the class suffix chain.
Spinner hosts standardize loading variants and accessible labels.
Button hosts wrap native controls and standardize tone, size, and loading defaults.
Alerts and empty-state shells keep the repeated runtime scaffolding declarative.
Create a named filter set so your operators can reuse it across screens.
List-group hosts standardize repeated action-row markup without changing list semantics.
Key-value hosts standardize the repeated description-list pair pattern.
Static pages can pass simple numeric values. Timestamped benchmark history can use the `points` JSON attribute or the `points` property.
Markers and reference lines remain decorative support. The surrounding cell should still show the current value and delta.
| Benchmark | Current | History | Delta |
|---|---|---|---|
| HTTP/3 plaintext | 5,510 rps |
|
+3.1% |
| QPACK decode | 1.42 ms |
|
Best |
The Web Component layer does not replace the table styling language. It reuses the same class-based table system where that is still the right contract.
| Project | Period | Amount | Status |
|---|---|---|---|
| AP-2026-00142 | March 2026 | $18,240.22 | Approved |
| AP-2026-00144 | March 2026 | $4,992.00 | Pending |
The color story and compact action buttons still match the CSS-first kit exactly.
Visible to operators.
Project name is required.
Disclosure content stays native-details based in the WC layer.
Capture an audit-safe explanation.
Choose the person responsible.