# XWUIGameStatBar

An animated resource bar for HP, MP, XP, stamina, or BP, with preset color `variant`s (hp=red, mp=blue, xp=gold, stamina=green, bp=purple) or a `custom` color. It shows an optional icon, label, and `value`/`maxValue` text, animates the fill on change, plays a damage-flash trailing layer when the value drops, and pulses when the ratio falls below `lowThreshold`. Supports `horizontal`/`vertical` orientation. Update it via `setValue()`, `setRange(value, max)`, or `updateData()`, and read the current fill with `getPercentage()`.

The root is a `progressbar` and carries `aria-valuemin`, `aria-valuemax`, `aria-valuenow` and `aria-valuetext`, kept in sync on every update. `icon` is rendered as text, so an emoji or glyph works and markup is never parsed: the key is also a public custom element attribute. A `value` above `maxValue` fills the bar and adds `xwui-stat-bar--over`; a non-finite `value` blanks the readout to `--` and drops `aria-valuenow`, which is the ARIA spelling of an indeterminate reading. Variant colours and the fill transition live in the stylesheet, so a theme can restyle both without touching the component.

## Basic Usage

An animated HP/MP/XP bar with icon, value text, damage flash, and low-health pulse.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: An animated HP/MP/XP bar with icon, value text, damage flash, and low-health pulse.
```

## Resource Stack

A stacked HP / MP / XP readout using all three color presets, one bar per row.

```example
file: examples/ResourceStack.ts
title: Resource Stack
description: HP, MP, and XP bars stacked together, each variant in its own host row.
```

## Damage Flash

A full HP bar takes a big hit, showing the trailing damage-flash layer and low-health pulse.

```example
file: examples/DamageFlash.ts
title: Damage Flash
description: setValue() drops the bar sharply, painting the damage trail and triggering the low-health pulse.
```

```api
```