Stack
import "@taprootio/espalier/stack";
<esp-stack>
A vertical flow: children stack in a column with a themed gap — "column, gap X" without writing flexbox (ADR-010's micro half).
The default cross-axis alignment is stretch, matching normal block
flow: grids, form fields, and text fill the column — with one
deliberate exception: slotted esp-button and esp-button-group
keep their natural width, because a field should fill its column
while the submit button under it should not. That is the pairing a
plain flex column cannot express with any single align-items
value. An explicit align — align="stretch" included, authored as
an attribute or assigned to the property — governs every child
uniformly; removing the attribute restores the default state, and
align-self on any child overrides either way.
Slots
<esp-stack> has a slot:
Default
The stacked children.
Attributes
<esp-stack> has the following attributes:
gap
gap has a default value of "normal".
Gap between children as a space-scale step name
(none, tiny, small, normal, medium, big, large,
huge).
align
align has a default value of "stretch".
Cross-axis alignment of children: start, center, end, or
stretch.
intent
intent has a default value of undefined.
The element's intent — its meaning: neutral
(no pin), or success, warning, danger, info — each pinned
to its fixed status family (blue for info), retunable per theme
via intents. On token-emitting controls a non-neutral intent pins the
filled-action pair to that family, derived over the governing
zone's theme; class-styled chrome (badges, callouts, status pills)
opts out of inline emission and renders its treatment from CSS
classes instead. An intent never repaints the surrounding zone,
which is what contexts are for. Removing the attribute restores
the element's own default intent.
context
context has a default value of undefined.
A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.
Methods
<esp-stack> has the following methods:
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
CSS Parts
<esp-stack> has a CSS part:
stack
The flex column.
CSS Properties
<esp-stack> has the following CSS properties:
--esp-stack-gap
Overrides the gap between children. Defaults to the gap attribute's step, normal when unset.
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).