# XWUIGameRacePanel

A race/species selection panel rendered as a card grid: each entry in `data.races` becomes a card showing its `icon`, `name`, optional `lore` text, and a row of `traits` badges, laid out across `conf_comp.columns` (default 3). Clicking a card calls `select()`, marks it against `data.selectedId`, and fires any `onSelect()` listeners; the `showLore` and `showTraits` config flags hide the lore line or trait badges, and `updateData()` swaps in a new race list. Use it in a character-creation flow when the player needs to pick a race and compare each option's traits and backstory side by side.

## Basic Usage

Instantiates the panel against `#app` with empty data and config, so it mounts the grid container with no race cards yet.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A bare XWUIGameRacePanel mounted with the default 3-column grid and lore/trait display enabled, ready to be populated via updateData().
```

## Compact List

A single-column race list with lore hidden, so each card is just an icon, name, and its trait badges.

```example
file: examples/CompactList.ts
html: examples/CompactList.html
title: Compact List
description: A single-column (columns: 1) picker with showLore off, leaving icon, name, and trait badges per card.
```

## Trait Showcase

A two-column gallery of four lore-rich races, each carrying a deep set of trait badges to emphasize racial differences.

```example
file: examples/TraitShowcase.ts
html: examples/TraitShowcase.html
title: Trait Showcase
description: A two-column grid of four races with full lore and four trait badges each, showing how longer trait lists lay out.
```

```api
```