# XWUIIndicator

Wraps any content and overlays a small corner dot or label badge - typically to flag unread counts, online status, or "new" markers (Mantine Indicator equivalent). Place the badge with `position` (nine anchors from `top-start` to `bottom-end`), show text by enabling `withLabel` and supplying `label` data, and nudge it with `offset`. Set `inline` to render as a `<span>`, or `disabled` to hide the indicator while keeping the wrapped child.

## Usage

```ts
import { XWUIIndicator } from './XWUIIndicator';

const avatar = document.createElement('img');
avatar.src = '/avatar.png';

const indicator = new XWUIIndicator(
  container,
  { content: avatar, label: 5 },
  { position: 'top-end', withLabel: true }
);
```

## Basic Usage

A status dot overlaid on the top-end corner of an avatar.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A status dot overlaid on the top-end corner of an avatar.
```

## Count Label

Show an unread count instead of a plain dot via `withLabel` + `label`.

```example
file: examples/WithLabel.ts
html: examples/WithLabel.html
title: Count Label
description: Show an unread count instead of a plain dot via withLabel + label.
```

## Corner Positions

The dot can anchor to any of the nine corners via `position`.

```example
file: examples/Positions.ts
html: examples/Positions.html
title: Corner Positions
description: The dot can anchor to any of the nine corners via position.
```

```api
```