# <aihio-stack>

Vertical layout primitive that applies the system's spacing rhythm between its children.

Intents: `layout`, `container`.

## Attributes

- `gap` (`tight` | `sm` | `md` | `lg`): Vertical spacing between children, from the spacing tokens. Default: `md`.
- `align` (`start` | `center` | `end` | `stretch`): Cross-axis alignment of children. Default: `stretch`.

## Slots

- `default`: Any flow content to stack vertically.

## Accessibility obligations

- (warn) When the stack groups a titled region of the page: Use a semantic sectioning element (<section>, <nav>, <main>) around or inside the stack. aihio-stack does not create a landmark.

## Examples

### A heading and its copy

```html
<aihio-stack>
  <h2>Notifications</h2>
  <p>Choose how you want to hear from us.</p>
</aihio-stack>
```

### Centered, with room between

```html
<aihio-stack gap="lg" align="center">
  <aihio-avatar alt="Jane Doe"></aihio-avatar>
  <aihio-button>Follow</aihio-button>
</aihio-stack>
```

## Mistakes

### gap="medium" is not valid. The scale is tight, sm, md, lg.

Don't (aihio lint: invalid-enum-attribute):

```html
<aihio-stack gap="medium"><p>One</p></aihio-stack>
```

Do:

```html
<aihio-stack gap="md"><p>One</p></aihio-stack>
```

### Hand-rolled spacing drifts from the token scale. Use aihio-stack so the rhythm stays system-owned.

Don't (aihio lint: hand-rolled-layout):

```html
<div style="display:flex;flex-direction:column;gap:16px"><p>One</p></div>
```

Do:

```html
<aihio-stack gap="md"><p>One</p></aihio-stack>
```