# XWUIHrOnboardingGrid

Lightweight HR widget (extends `XWUIComponent`) intended to embed an onboarding data grid inside a larger HR screen. It renders a root `div.xwui-hr--onboarding-grid` (with `data-component="XWUIHrOnboardingGrid"`) whose body is driven by `XWUIHrOnboardingGridLogic`/`projectHrOnboardingGridView`; the only `conf_comp` keys are `className` and `locale` (`en` or `ar`, default `en`), and `data` is open-ended. Use it as a composable onboarding-grid building block rather than a full routed page.

## Basic Usage

Instantiates the widget in `#app` with empty data and `locale: 'en'`.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Creates an XWUIHrOnboardingGrid widget with default data and an English locale.
```

## Arabic Locale

Renders the widget in Arabic by setting `locale: 'ar'`.

```example
file: examples/ArabicLocale.ts
html: examples/ArabicLocale.html
title: Arabic Locale
description: Sets locale to ar so the onboarding grid renders its labels in Arabic, right-to-left.
```

## Custom Class

Adds a custom class to the widget root via the `className` config.

```example
file: examples/CustomClass.ts
html: examples/CustomClass.html
title: Custom Class
description: Passes className 'my-hr-widget' so callers can scope their own styles to the widget root.
```

```api
```