layout — wyrd.component.stack
Layout primitive that arranges child content along one flex axis using the normative Layout DSL spacing scale.
Install @wyrd-company/react or the Flutter package and use it directly —
your DESIGN.md does the styling.
$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity: name: Stack tag: wyrd-stack package: wyrd.component.stack title: Stack summary: Layout primitive that arranges child content along one flex axis using the normative Layout DSL spacing scale.relationships: related-to: - layout-dsl - puck-layout-authoring - flexiblebox - quality-parity-and-gatesclassification: category: layout composition: single-slot interactive: falsetarget-strategy: react: required flutter: requiredsurface: properties: - name: direction type: kind: enum values: - row - column required: false default: column serializable: true summary: Main-axis direction for child layout. - name: gap type: kind: integer minimum: 0 maximum: 8 required: false default: 0 serializable: true summary: Space between children as an index into the normative Layout DSL spacing scale. - name: padding type: kind: integer minimum: 0 maximum: 8 required: false default: 0 serializable: true summary: Uniform inner padding as an index into the normative Layout DSL spacing scale. slots: - name: content content: true required: true cardinality: one-or-many accepts: - component - content summary: Child layout nodes arranged by the stack. events: [] states: [] parts: - name: root summary: Flex layout root. slots: - contentmessages: []obligations: accessibility: role: none keyboard: [] semantics: - Preserves child order and semantics without adding interactive behavior. behavior: model: stateless interactions: [] hostEffects: [] conditions: - rtl - density-compact - text-expansion - safe-area sdui: status: serializable serializableProperties: - direction - gap - padding serializableSlots: - content eventBindings: [] notes: Stack lowers to the Layout DSL FlexContainer primitive during Puck-to-SDUI normalisation.examples: - name: vertical state: default properties: direction: column gap: 2 padding: 1 slots: content: Draft | In review | Ready - name: horizontal state: default properties: direction: row gap: 2 padding: 1 slots: content: Contract | Projection | Package
Generated from the contract's examples block.
Previews are the published @wyrd-company/react component, themed by the
brand's role tokens — flip the site's light/dark toggle and they follow.
import { WyrdStack } from "@wyrd-company/react";
<WyrdStack direction="column" gap={2} padding={1}>
Draft | In review | Ready
</WyrdStack>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdStack(
direction: 'column',
gap: 2,
padding: 1,
child: Text('Draft | In review | Ready'),
)import { WyrdStack } from "@wyrd-company/react";
<WyrdStack direction="row" gap={2} padding={1}>
Contract | Projection | Package
</WyrdStack>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdStack(
direction: 'row',
gap: 2,
padding: 1,
child: Text('Contract | Projection | Package'),
)| Name | Type | Default | Summary |
|---|---|---|---|
direction | row | column | column | Main-axis direction for child layout. |
gap | integer | 0 | Space between children as an index into the normative Layout DSL spacing scale. |
padding | integer | 0 | Uniform inner padding as an index into the normative Layout DSL spacing scale. |
| Slot | Cardinality | Accepts | Summary |
|---|---|---|---|
content | one-or-many | component, content | Child layout nodes arranged by the stack. |
From the contract's accessibility obligations. Role none
Status: serializable. Stack lowers to the Layout DSL FlexContainer primitive during Puck-to-SDUI normalisation.
| Serializable | Members |
|---|---|
| Properties | direction, gap, padding |
| Slots | content |
| Events | — |