# Web Component Incidents

Use this reference when a prototype validates but still looks wrong.

## Bare Card Body Content

**Symptom:** Card text touches the left edge or vertical spacing collapses.

**Cause:** The artifact used `hf-card` as if it included React `Card.Content` padding.

**Fix:** Use `hf-app-shell-card`, a specialized component such as `hf-metric-card`, or the approved `data-hf-slot="card-content"` wrapper pattern from [composition.md](composition.md).

## React Attributes Copied Into WC Markup

**Symptom:** Static validation reports unsupported attributes.

**Cause:** JSX examples were copied into HTML without checking the WC manifest. Common failures include `label` on `hf-field`, `options` on `hf-radio-group`, `subtitle` on `hf-page-header`, and React-only switch thumb icon props on `hf-switch`.

**Fix:** Check [components.md](components.md) and use only listed attributes. For page subtitles, use `supporting-text`.

## Dashboard Contract Passes But Layout Is Weak

**Symptom:** Required tags exist, but the screen feels sparse, flush, or unfinished.

**Cause:** Validation checked tag presence but not composition quality.

**Fix:** Use `hf-app-shell`, `hf-app-sidebar`, `hf-app-shell-card`, `hf-page-header`, `hf-metric-card`, `hf-data-table`, and chart WCs together. The first viewport should contain real content and consistent spacing.

## Native Controls In WC Artifacts

**Symptom:** Output includes native controls even though HUMAIN WCs exist.

**Cause:** The generator fell back to generic HTML.

**Fix:** Replace native controls with `hf-button`, `hf-input`, `hf-textarea`, `hf-radio-group`, `hf-checkbox-group`, `hf-switch`, and `hf-data-table`.