# xpl-tab-panel

`xpl-tab-panel` is the **content region** for one tab. Place each panel in the **`panel`** slot of `xpl-tabs` and set **`target`** to the same string as its paired **`xpl-tab`**. Only the panel whose `target` matches the group’s selection is visible; others stay hidden via CSS until selected.

## When to use

- One panel per tab in the same `xpl-tabs` as the corresponding `xpl-tab`.
- Put any markup or other components in the **default slot** (panel body).

## Usage

```html
<xpl-tabs value="overview">
  <xpl-tab slot="heading" target="overview">Overview</xpl-tab>
  <xpl-tab slot="heading" target="activity">Activity</xpl-tab>
  <xpl-tab-panel slot="panel" target="overview">
    <p class="xpl-text-body">Overview content.</p>
  </xpl-tab-panel>
  <xpl-tab-panel slot="panel" target="activity">
    <p class="xpl-text-body">Activity content.</p>
  </xpl-tab-panel>
</xpl-tabs>
```

The parent **`xpl-tabs`** updates each panel’s **`selected`** state from **`value`** / user interaction; consumers typically only set **`target`** and slot content.

## Accessibility

- The host sets **`role="tabpanel"`**, a stable **`id`** (`…-panel-<target>` scoped by the parent **`xpl-tabs`** instance), and **`aria-labelledby`** referencing the paired tab control’s **`id`**. Use the same **`target`** on **`xpl-tab`** and **`xpl-tab-panel`** so the references stay aligned (see **`xpl-tabs`** accessibility section for the full id pattern).
- Hidden panels use display toggling (`xpl-tab-panel` / `--selected` in `tabs.css`), not `aria-hidden` on the host; panel content stays in the DOM for simpler state sync.

## Token use

| Part | Token / approach |
| ---- | ---------------- |
| Panel visibility | `tabs.css`: hidden unless `xpl-tab-panel--selected` (`display` via Tailwind `@apply`) |
| Default padding | `py-6` in `tabs.css` on `.xpl-tab-panel` |
| Inner content | Use typography classes (`xpl-text-body`, etc.) and Foundation tokens as elsewhere in Apollo |

<!-- Auto Generated Below -->


## Properties

| Property   | Attribute  | Description                                                | Type      | Default     |
| ---------- | ---------- | ---------------------------------------------------------- | --------- | ----------- |
| `selected` | `selected` | Whether the panel is selected                              | `boolean` | `false`     |
| `target`   | `target`   | The target of the tab, required for the tab to be selected | `string`  | `undefined` |


## Slots

| Slot | Description                           |
| ---- | ------------------------------------- |
|      | Content rendered inside of the panel. |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*