# Layout Header

## Usage

Top bar for page titles, app bars, and toolbars.

```ts
import { LayoutHeader } from '@astryx-vue/core/Layout'
```

`LayoutHeader` is the fixed top region of a `Layout`. It keeps its height while `LayoutContent` scrolls underneath, so a title, a breadcrumb, or a row of actions stays reachable.

`height` is a number of pixels or any CSS length. `padding` sets the region inset, and `paddingBlockEnd` changes only the bottom edge, which is how a tab underline or a divider reaches the header's own edge. `hasDivider` draws the bottom rule; leave it out and the header follows `defaultHasDividers` on the parent `Layout`.

```vue
<script setup lang="ts">
import { Button } from '@astryx-vue/core/Button'
import { Heading } from '@astryx-vue/core/Heading'
import { Layout, LayoutContent, LayoutHeader } from '@astryx-vue/core/Layout'
import { HStack } from '@astryx-vue/core/Stack'
</script>

<template>
  <Layout>
    <template #header>
      <LayoutHeader has-divider>
        <HStack :gap="2" h-align="between" align="center">
          <Heading :level="4">
            Dashboard
          </Heading>
          <Button label="New Item" variant="primary" />
        </HStack>
      </LayoutHeader>
    </template>
    <LayoutContent>
      Select a report.
    </LayoutContent>
  </Layout>
</template>
```

## Examples

Common configurations, variations, and states.

### With actions

A fixed page header with a title and a primary action, above scrollable content. Use LayoutHeader inside Layout for persistent page-level headers.

```vue
<script setup lang="ts">
import { Button } from '@astryx-vue/core/Button'
import { Card } from '@astryx-vue/core/Card'
import { Heading } from '@astryx-vue/core/Heading'
import { Layout, LayoutContent, LayoutHeader } from '@astryx-vue/core/Layout'
import { HStack } from '@astryx-vue/core/Stack'
</script>

<template>
  <Layout>
    <template #header>
      <LayoutHeader has-divider>
        <HStack :gap="2" h-align="between" align="center">
          <Heading :level="4">
            Dashboard
          </Heading>
          <Button label="New Item" variant="primary" />
        </HStack>
      </LayoutHeader>
    </template>
    <LayoutContent>
      <Card variant="muted" />
    </LayoutContent>
  </Layout>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `hasDivider` | `boolean` | — | Draws a rule along the bottom edge. When it is not set, `defaultHasDividers` on the parent `Layout` decides, and `false` is the last fallback. |
| `height` | `number \| string` | — | Header height. Numbers are pixels, strings are used as they are. |
| `label` | `string` | — | Accessible name for the landmark element. |
| `padding` | `SpacingStep` | — | Internal padding using the spacing scale. `0` lets the content manage its own inset. |
| `paddingBlockEnd` | `SpacingStep` | — | Bottom padding only. Overrides `padding` on that edge, so a tab underline or a rule can reach the header edge. |
| `role` | `string` | — | ARIA landmark role. |

`SpacingStep` accepts these values:

```ts
type SpacingStep = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10
```

## Slots

- `default`: the header content.

## Template ref

`LayoutHeader` exposes `element`.
Its type is `HTMLDivElement | null`.

## Native attributes

The root element receives HTML attributes, `aria-*` attributes, `data-*` attributes, `class`, and `style`. `class` is merged with the component's own classes.