# XWUIPanel

The universal layout primitive: a flex container with an optional header, a scrollable flexible body, and an optional footer. Reach for it everywhere a region needs a fixed header/footer around scrolling content - sidebar panels, main content areas, nested sections, or cards with toolbars. Header and footer auto-show when their data is provided (or force them with `showHeader` / `showFooter`); tune `bodyPadding`, disable body scrolling with `bodyNoScroll`, and toggle `fillHeight`. Slots accept HTML strings or `HTMLElement`s, and runtime setters (`setHeader`, `setBody`, `setFooter`) plus accessors (`getBodyElement`, …) let you mount child components into each region.

## Usage

```ts
import { XWUIPanel } from './XWUIPanel';

const panel = new XWUIPanel(
  container,
  { header: '<h3>Details</h3>', body: contentEl, footer: actionsEl },
  { fillHeight: true, bodyPadding: 16 }
);

panel.setBody(updatedContentEl);
```

## HeaderBodyFooter

```example
file: examples/HeaderBodyFooter.ts
html: examples/HeaderBodyFooter.html
title: HeaderBodyFooter
description: A panel with all three regions - header, body, and footer - filling a fixed-height container.
```

## ScrollableBody

```example
file: examples/ScrollableBody.ts
html: examples/ScrollableBody.html
title: ScrollableBody
description: A panel with a long body that scrolls inside a fixed-height container, with bodyPadding applied.
```

## Chat Window

A messaging panel with a pinned contact header and composer footer wrapped around a scrolling conversation body.

```example
file: examples/ChatWindow.ts
html: examples/ChatWindow.html
title: Chat Window
description: Chat layout with fixed header and footer around a scrollable message list.
```

## Metric Card

KPI stat tiles that size to their content using fillHeight:false and a non-scrolling body.

```example
file: examples/MetricCard.ts
html: examples/MetricCard.html
title: Metric Card
description: Content-sized KPI cards using fillHeight:false, bodyNoScroll, and forced header/footer.
```

```api
```