import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Foundations/CIBG Gap Register" />

# CIBG gap register

CIBG Huisstijl (ADR-0003) is the design system of record — a component wraps a vendored class
before it hand-rolls anything. **Grep the vendored CSS
(`public/cibg-huisstijl/css/huisstijl.min.css`) before adding new surface CSS to a component.**
When no vendored pattern exists, the component is a **CIBG-gap extension**: allowed, but only
marked so every deviation from the design system is auditable.

## Marker format

```ts
// CIBG-GAP EXTENSION: <closest CIBG concept, or "n/a"> — <why hand-rolled>
```

placed above the `@Component` decorator, plus `parameters: { cibgGap: true }` and a
"CIBG-gap extension" line in the story's `docs.description.component`.

## The register

| Component                               | Closest CIBG concept | Why hand-rolled                                                                                                                                        |
| --------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `skeleton`                              | Laadindicatie        | No loading-skeleton class in the vendored build.                                                                                                       |
| `spinner`                               | Laadindicatie        | No loading-spinner class in the vendored build.                                                                                                        |
| `rich-text-editor`                      | Tekstgebied          | No rich-text/WYSIWYG pattern; toolbar buttons still use vendored `.btn-ghost` (WP-10).                                                                 |
| `wizard-shell` (error summary only)     | Foutmelding          | No error-summary/Veldvalidatie list class; renders inside a vendored `.feedback-error` alert.                                                          |
| `application-link` (non-navigating row) | Aanvragen            | The vendored `.dashboard-block.applications li a` chain only styles `<a>`; `.static-row` mirrors it from tokens for the informational (non-link) case. |
| `debug-state`                           | n/a                  | Dev-only tool, deliberately off-theme — see the component's own `ponytail:` note.                                                                      |
| `status-badge`                          | n/a                  | Deliberate custom status dot, not Bootstrap's `.badge` (pill padding/colour don't fit).                                                                |
| `placeholder-chip`                      | n/a                  | No vendored inline-chip/tag class.                                                                                                                     |

Not a gap: `confirmation` renders entirely with vendored `.confirmation*` classes (no `styles:
[...]` block) — its header comment names the pattern, no marker needed. The `upload/` suite
renders entirely with vendored classes (`.file-picker-drop-area`, `.btn-upload`, …) — reworked
onto them rather than marked (see WP-11's correction note). `task-list`, `application-list`, and
`choice-list` each wrap a distinct vendored pattern (Keuzelijst / Aanvragen / Keuzelijst) and name
it in their own header comment — no marker needed, they don't hand-roll surface CSS.

## Hygiene

`upload-status-banner` (a 23-line near-identity wrapper over `app-alert` with one consumer) was
deleted; its consumer (`document-upload`) now uses `<app-alert>` directly.

`card` (`.app-card`, a generic white surface) was deleted — it had zero consumers; the grey
vendored **Datablock** (`app-data-block`) is the single data surface. The convergence verdicts
for the pairs we deliberately keep separate live in
[Atomic Design → Convergence decisions](?path=/docs/foundations-atomic-design--docs).

## Keeping this register honest

No automated check diffs this table against the markers in code (skipped as not worth a CI
script for a table this small — reviewed at PR time instead, same as any other doc). If markers
and this table drift, trust the code and fix the table.