# XWUIHrSalaryBandsPage

Compensation page that renders the pay-range ledger per job family as a table, fetched via `hrApi.listSalaryBands()`. Each row shows Job family, Level group, Level, Minimum / Midpoint / Maximum (locale-formatted numbers), band Width (`±widthPct%`), and a "% outside band" status pill toned success/warning/danger based on `outsideBandPct` (0 = success, ≥100 = danger, otherwise warning). It surfaces a results count above the table, shows a localized loading state while fetching, and supports English/Arabic via the `locale` config. Use it to review and audit min/midpoint/max salary structures by level group.

## Basic Usage

Mounts the Salary Bands page against `#app` with a title/description and loads band data from the sandbox HR API (`hrApiOptions: { env: 'sandbox' }`, `locale: 'en'`).

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Renders the salary-bands ledger table in English, populating min/midpoint/max rows and outside-band status pills from sandbox data.
```

## Arabic (RTL)

The page rendered in Arabic with a right-to-left layout - built-in labels, status pills, and loading text localize, and `titleAr` supplies the heading.

```example
file: examples/ArabicLocale.ts
html: examples/ArabicLocale.html
title: Arabic (RTL)
description: The salary-bands ledger in Arabic with a right-to-left layout, localized level labels and status pills, and titleAr driving the heading.
```

## Embedded Panel

A width-constrained, centred layout (`maxWidth: '720px'`, `centered: true`) with the breadcrumb row hidden - the shape used when the page is dropped into a narrow settings column.

```example
file: examples/EmbeddedPanel.ts
html: examples/EmbeddedPanel.html
title: Embedded Panel
description: The salary-bands table constrained to a 720px centred column with breadcrumbs hidden, for embedding in a compensation settings panel.
```

```api
```