# XWUIHrSetupPayPage

Shell page for the HR Setup → Pay configuration domain. It extends `HrSetupPage` (fixed `domain = 'pay'`), fetches its sections via `hrApi.listSetupSections('pay')`, and renders them into the page content area as a `xwui-hr-setup-list` where each entry shows a bold section label above its description. The page chrome (title `Setup - Pay`, breadcrumbs, asides, sticky actions, footer) is inherited from `XWUIShellPage`; supply `data.title`/`titleAr` to override the heading and `conf_comp.hrApiOptions`, `conf_comp.hrApi`, or `conf_comp.locale` to control data source and language.

## Basic Usage

Mounts the Pay setup page against a sandbox mock HR API (`hrApiOptions: { env: 'sandbox' }`, `locale: 'en'`), with a custom title and description; the section list is loaded asynchronously after the DOM is set up.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Renders the Pay setup page with a sandbox mock IHrApi and an English locale, loading its setup sections on mount.
```

## 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 pay setup page in Arabic with a right-to-left layout and an Arabic heading via titleAr.
```

## 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 pay setup sections in a 720px centred column with breadcrumbs hidden, for an embedded payroll settings panel.
```

```api
```