## ADDED Requirements

### Requirement: Layouts are invoked via `data-layout` attributes
All layout patterns SHALL be activated through `data-layout` attribute values on HTML elements. No CSS classes or inline styles SHALL be required to produce a layout.

#### Scenario: data-layout="row" creates horizontal flex container
- **WHEN** an element has `data-layout="row"` (e.g., `<nav data-layout="row">`)
- **THEN** the element MUST have `display: flex` and `flex-direction: row`

#### Scenario: data-layout="col" creates vertical flex container
- **WHEN** an element has `data-layout="col"`
- **THEN** the element MUST have `display: flex` and `flex-direction: column`

#### Scenario: data-layout="spread" distributes items across the main axis
- **WHEN** an element has `data-layout="spread"`
- **THEN** it MUST have `display: flex`, `justify-content: space-between`, and `align-items: center`

#### Scenario: data-layout="center" centers items on both axes
- **WHEN** an element has `data-layout="center"`
- **THEN** it MUST have `display: flex`, `align-items: center`, and `justify-content: center`

#### Scenario: data-layout="stack" creates a vertical column with gap
- **WHEN** an element has `data-layout="stack"`
- **THEN** it MUST have `display: flex`, `flex-direction: column`, and a `gap` value using the ASW spacing token

### Requirement: Existing grid layouts are preserved
The existing `data-layout="grid-2"` and `data-layout="grid-3"` patterns from the current framework SHALL continue to work unchanged.

#### Scenario: grid-2 creates 2-column CSS grid
- **WHEN** an element has `data-layout="grid-2"`
- **THEN** it MUST have `display: grid` and `grid-template-columns: repeat(2, 1fr)`

#### Scenario: grid-3 creates 3-column CSS grid
- **WHEN** an element has `data-layout="grid-3"`
- **THEN** it MUST have `display: grid` and `grid-template-columns: repeat(3, 1fr)`

### Requirement: Flexbox layouts are responsive by default
All flexbox layout patterns SHALL wrap on narrow viewports unless explicitly prevented.

#### Scenario: Row wraps on small screens
- **WHEN** `data-layout="row"` is displayed on a viewport narrower than 640px
- **THEN** its items MUST wrap to a new line (`flex-wrap: wrap`)