/*
 * Stack-layout — section
 *
 * Vertical or horizontal stack with consistent gap. Simpler than
 * Split/Grid — no responsive collapse, just a flex container with
 * tokenized gap.
 *
 *   <section class="stack-layout">
 *     <div>One</div>
 *     <div>Two</div>
 *     <div>Three</div>
 *   </section>
 *
 *   <section class="stack-layout" data-direction="horizontal">…</section>
 *   <section class="stack-layout" data-gap="s">…</section>
 */

@layer malevich.components {
  .stack-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-gap-elements-m);

    padding-block: var(--space-inset-section-m);
    padding-inline: var(--space-inset-section-m);

    inline-size: 100%;
    box-sizing: border-box;
  }

  /* Direction */
  .stack-layout[data-direction="horizontal"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Gap variants — pick from semantic gap tokens */
  .stack-layout[data-gap="s"] {
    gap: var(--space-gap-elements-s);
  }
  .stack-layout[data-gap="m"] {
    gap: var(--space-gap-elements-m);
  }
  .stack-layout[data-gap="l"] {
    gap: var(--space-gap-blocks-m);
  }
  .stack-layout[data-gap="xl"] {
    gap: var(--space-gap-blocks-l);
  }

  /* Alignment along the cross-axis */
  .stack-layout.-start {
    align-items: flex-start;
  }
  .stack-layout.-center {
    align-items: center;
  }
  .stack-layout.-end {
    align-items: flex-end;
  }
  .stack-layout.-stretch {
    align-items: stretch;
  }

  /* Justify along the main-axis (horizontal direction only) */
  .stack-layout[data-direction="horizontal"].-between {
    justify-content: space-between;
  }
  .stack-layout[data-direction="horizontal"].-around {
    justify-content: space-around;
  }
  .stack-layout[data-direction="horizontal"].-evenly {
    justify-content: space-evenly;
  }
}

This component is pure CSS — no JavaScript required.

# Stack-Layout — AGENTS.md

> Auto-generated from `stack-layout.docs.md` + the modifier applicability matrix.
> Edit those source files; this file regenerates on build.

## Identity

- **Component:** `stack-layout`
- **Layer:** sections
- **Status:** stable
- **Last updated:** 2026-05-19

## Summary

- Toolbars, action rows.

## Variants

| Variant | Class / data | Effect |
|---------|--------------|--------|
| Vertical | `.stack-layout` (default) | Flex column |
| Horizontal | `data-direction="horizontal"` | Flex row, wraps |
| Gap s/m/l/xl | `data-gap="s|m|l|xl"` | Adjust gap token |
| Cross-axis align | `.-start` / `.-center` / `.-end` / `.-stretch` | align-items |
| Justify (h only) | `.-between` / `.-around` / `.-evenly` | justify-content |

## Modifier applicability

Per ADR-0007. Modifiers attach via `data-{category}="value"` attributes.

| Category | Accepts |
|---|---|
| `background` | — |
| `surface` | — |
| `effect` | — |
| `shader` | — |
| `rhythm` | `compact`, `regular`, `spacious` |
| `motion` | any value |
| `behavior` | — |

## Anatomy

```html
<!-- Vertical (default) -->
<section class="stack-layout">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</section>

<!-- Horizontal toolbar -->
<div class="stack-layout" data-direction="horizontal" data-gap="s">
  <button class="button -ghost -s">Bold</button>
  <button class="button -ghost -s">Italic</button>
  <button class="button -ghost -s">Underline</button>
</div>

<!-- Spread to ends -->
<div class="stack-layout" data-direction="horizontal" class="-between">
  <h1>Title</h1>
  <button class="button -primary">Action</button>
</div>
```

## Tokens consumed

- `--space-gap-elements-{s,m}`, `--space-gap-blocks-{m,l}` — gaps
- `--space-inset-section-m` — outer padding