# XWUIGameAltitudeDepth

Vertical altitude/depth gauge. It draws a vertical bar with a moving marker line for the current `altitude`, a sea-level reference line, sky/ground gradient zones, tick marks at intervals, and a numeric value label. Data props are `altitude`, `seaLevel`, and the `maxAltitude`/`minAltitude` bounds; `conf_comp` sets the visible `range`, the `unit` (`m` or `ft`), and toggles the `showLabel` value. Update the reading with `setAltitude(altitude)` or `updateData({ altitude, seaLevel })`.

`range` gives the gauge a span centred on `seaLevel`, and it applies only when neither `maxAltitude` nor `minAltitude` is supplied: explicit bounds always win, so passing both is not ambiguous. The root is a `meter` and carries `aria-valuemin`, `aria-valuemax`, `aria-valuenow` and `aria-valuetext`; the readout sits in a polite live region so a descent is announced rather than only drawn. An altitude past either bound pins the marker and adds `xwui-altitude-depth--out-of-range`; a non-finite `altitude` rests the marker at sea level, blanks the readout to `--` and drops `aria-valuenow`. A value-only update repaints two nodes instead of rebuilding the gauge, so `setAltitude()` is safe to call per frame.

## Basic Usage

Mounts the vertical altitude gauge with its sea-level marker.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Mounts the altitude/depth gauge with its vertical bar, sea-level line, gradient zones, and numeric value.
```

## Feet Unit

Reads a high altitude in feet by switching the unit config to imperial, with the value label shown.

```example
file: examples/FeetUnit.ts
html: examples/FeetUnit.html
title: Feet Unit
description: A 9800 ft altitude with unit set to ft and showLabel on, the marker riding above the sea-level line.
```

## Deep Dive

Drives the reading below sea level so the marker enters the ground zone and the value flips to its below-sea state.

```example
file: examples/DeepDive.ts
html: examples/DeepDive.html
title: Deep Dive
description: A negative altitude below sea level that drops the marker into the depth zone, then dives further via setAltitude().
```

```api
```