# XWUIHrInsightsPanel

Embeddable HR insights widget that extends `XWUIComponent` directly (not a shell page) for dropping HR analytics into a host layout. It projects its state through `projectHrInsightsPanelView` and mounts a root `div.xwui-hr--insights-panel` carrying `data-component="XWUIHrInsightsPanel"`; the current `mountContent` scaffold renders a locale-aware label ("HR data" / "بيانات HR") as the placeholder for the insights content. Config is minimal - `className` and `locale` ('en' | 'ar') - and `data` is an open key/value map, so construct it as `new XWUIHrInsightsPanel(host, {}, { locale: 'en' })`.

## Basic Usage

Mounts the insights panel widget into a host element with an English locale, rendering the `xwui-hr--insights-panel` root and its localized HR-data content placeholder.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Constructs XWUIHrInsightsPanel with empty data and a locale config, mounting the panel root into a host div.
```

## Arabic locale (RTL)

Constructs the widget with `{ locale: 'ar' }`, so the root renders its Arabic placeholder text (`بيانات HR`).

```example
file: examples/ArabicLocale.ts
html: examples/ArabicLocale.html
title: Arabic locale (RTL)
description: `{ locale: 'ar' }` switches the placeholder copy to Arabic for right-to-left hosts.
```

## Custom class hook

Passes `{ className: 'insights--wide' }`, appended to the `xwui-hr--insights-panel` root class so host CSS can target this instance.

```example
file: examples/CustomClass.ts
html: examples/CustomClass.html
title: Custom class hook
description: A `className` is merged onto the widget root for host-level styling.
```

```api
```