archivedcreated 2026-09-11· last activity 2026-09-11
Why
PolicyCard's default slot (c19) was only ever used for a violations table — it wasn't a generic composition point. Promoting the table to a standalone component and switching to a prop-based API keeps the summary logic contained within PolicyCard while making the table reusable on the full security policy detail page.
Objective
Create SecurityViolationsTable as a standalone layer component and replace PolicyCard's default slot with a violationSamples prop.
Scope
Layer: New security/ViolationsTable.vue, modified security/PolicyCard.vue
Design site: Updated PolicyCard demo, new ViolationsTable demo, registry entries
SecurityPolicyCard — new violationSamples prop; when non-empty, renders ViolationsTable in adjacent panel with "Violation Samples X of Y" footer and Remediate button
Slot removed — prop is the API now
Backward compatible — no violationSamples = same card render as before
Outcome
ViolationsTable serves double duty: PolicyCard uses it internally for summary view, security policy detail page can use it directly for the full dataset.
Visual record
3 captures — heroes, page slices, and full-page renders. Click to view.