# XWUIHrSalaryBenchmarkPage

Compensation page for comparing a role's pay against market data (KSA) as a p25/median/p75 box-and-whisker plot. It loads `hrApi.listSalaryBenchmarks()`, builds a query bar with a search input and a `datalist` of known roles, and follows a call-and-response pattern: until a recognized role is selected it shows an empty-state pitch ("Compare your organization's salaries to the market") with explanatory bullets; once a role matches, it renders the box plot via the shared `renderBoxPlot`/`ensureCompStyles` helpers. The region label is fixed to "in KSA" and all copy is localized for English/Arabic via `locale`. Use it to give compensation teams an on-demand market read for a specific job title.

## Basic Usage

Mounts the Salary Benchmark page against `#app` with a title/description and loads benchmark 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-benchmark query page in English, with the role search/datalist populated from sandbox benchmark data and the box plot shown once a role is picked.
```

## 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-benchmark lookup in Arabic with a right-to-left layout; labels and the role prompt localize and titleAr drives 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-benchmark lookup in a 720px centred column with breadcrumbs hidden, for an embedded compensation panel.
```

```api
```