<aihio-stack> v1.0.0 Markdown for agents

Stack

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

Intents layout container

Variants

Every value of the attributes that change how it looks. The values come from the schema.

`gap`

Vertical spacing between children, from the spacing tokens.

gap="tight"

gap="sm"

gap="md"

gap="lg"

Examples

Each one rendered live, over the markup that produces it.

A heading and its copy

Notifications

Choose how you want to hear from us.

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

Centered, with room between

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

Mistakes

Each one beside its fix, with what aihio lint says about it. The prompt fragment gives agents the same pairs, and the build fails if the linter stops catching one or a fix stops passing.

`gap="medium"` is not valid.

The scale is tight, sm, md, lg.

Don't

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

aihio lint reports

invalid-enum-attribute error invalid gap="medium". Use gap="md". Expected one of: tight, sm, md, lg. Suggests gap="md"

One

<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

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

aihio lint reports

hand-rolled-layout warn <div> lays out its children with an inline display: flex. Use <aihio-stack>, which spaces them from the token scale. Suggests <aihio-stack>

One

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

API

Every attribute, property, method, and event the schema declares for aihio-stack.

Attributes

gap: one of tightsmmdlg default md; Vertical spacing between children, from the spacing tokens.
align: one of startcenterendstretch default stretch; Cross-axis alignment of children.

Slots

default: Any flow content to stack vertically.

Composition

Allowed children: anything

Accessibility

What you have to provide, and what the component already does. The obligations with a rule are checked by aihio lint and by the dev build's console warnings.

Your 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.

Not machine-checkable: a judgment for the author.

Handled for you

Purely presentational: adds no role, no landmark, and no tab stop, so the semantics of its children are untouched.

In patterns

Canonical compositions that use aihio-stack.