# Yeti 7.0.0-alpha.0

Yeti is a plain-CSS framework. Three rules cover every component: identity is a class (`class="card"`), configuration is a `data-*` attribute with a fixed value list (`data-gap="md"`), and state is native or ARIA (`open`, `aria-current`), never a class. Layouts arrange, recipes compose layouts, components are styled things. Every attribute below is validated: a value not in its list is an error. Docs: https://foundationcss.com/yeti/

To begin a page, start from dist/starter/index.html, a complete and valid page (skip link, sticky nav, hero, card grid, prose, footer), and dist/starter/theme.css, the essential theme settings with their defaults, commented out. Copy both and delete what the page does not need.

## box (layout, class="box")

Pads its content on all sides, with an optional border and an optional surface.

Attributes:
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Padding on every side.
- data-gap-inline: none | xs | sm | md | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Padding on the two sides only, over whatever data-gap set: a band wide at the sides and ordinary top and bottom.
- data-gap-block: none | xs | sm | md | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Padding top and bottom only, over whatever data-gap set.
- data-surface: base | raised | sunken — Fill the box with one of the three surface tones, making it a visible panel. Absent, the box is transparent and only its padding does anything.

On children:
- data-border on * (boolean) — Draw a border of the border width, in the border color. Works on any element; it is a box's most common marker, which is why it is listed here.
- data-paint on *: primary | secondary | success | warning | alert | neutral | white | black | grey | grey-0 | grey-10 | grey-20 | grey-30 | grey-40 | grey-50 | grey-60 | grey-70 | grey-80 | grey-90 | grey-100 — Fill this element with a color by name: a hue at its base step with the text made for it, a constant, or a step of the greyscale. Up to grey-40 the text stays the page text; from grey-50 it becomes the page surface.
- data-text on *: primary | secondary | success | warning | alert | neutral | white | black | grey | grey-0 | grey-10 | grey-20 | grey-30 | grey-40 | grey-50 | grey-60 | grey-70 | grey-80 | grey-90 | grey-100 — Color this element's words by name, from the same list. On an element that is also painted it wins over the automatic text color.

## breakout (layout, class="breakout")

Keeps its children in a centered reading column with gutters, and lets any child carrying data-bleed span the full width.

Attributes:
- data-max: 2xs | xs | sm | md (default) | lg | xl | 2xl — The widest the reading column may be.
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — The gutter on each side, and the space between children.

On children:
- data-bleed on > * (boolean) — Breaks the child out of the column to span the full width.
- data-note on > * (boolean) — A margin note: in the end gutter beside the child it follows when the breakout is wide, in the column when it is not.

## center (layout, class="center")

Centers a column of content horizontally, up to a maximum width, with gutters on narrow screens.

Attributes:
- data-max: 2xs | xs | sm | md | lg | xl (default) | 2xl — The widest the content column may be.
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — The gutter on each side when the container is narrower than the maximum.
- data-intrinsic (boolean) — Shrink the column to its content (still no wider than data-max) and center it, with each child centered on its own width inside it.

## cluster (layout, class="cluster")

Lays its children out in a row that wraps, keeping one gap between them on both axes.

Attributes:
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between items, horizontally and between wrapped rows.
- data-align: start | center (default) | end | stretch | baseline — Vertical alignment of items within a row.
- data-justify: start (default) | center | end | between | around | evenly — How items are distributed along the row.
- data-threshold: 2xs | xs | sm | md | lg | xl | 2xl — The cluster's own width below which it is a column of full-width items; at or above it, the wrapping row. Makes the cluster a size container, so it takes the width of its block instead of its content.

## columns (layout, class="columns")

Lays its children out as equal columns when the container is wider than a threshold, and as rows when it is not.

Attributes:
- data-threshold: 2xs | xs | sm | md (default) | lg | xl | 2xl — The container width below which the columns become rows.
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between columns, and between rows once they stack.
- data-align: start | center | end | stretch (default) | baseline — Vertical alignment of the columns.
- data-justify: start (default) | center | end | between | around | evenly — Distribution of the columns along the row when they do not fill it.
- data-columns: 1 | 2 | 3 | 4 | 5 | 6 — The most columns on one row; further children each take a full row.

On children:
- data-span on > *: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 — How many shares of the row the child takes: 2 is twice a plain sibling. Below the threshold it stacks like the rest.

## container (layout, class="container")

Makes its box the thing a container query measures, so what is inside can respond to its width instead of the viewport's.

On children:
- data-show on *: 2xs | xs | sm | md | lg | xl | 2xl — Show this element only while the nearest size container is this wide or wider. Below that width it is not rendered at all, and it is not in the accessibility tree either.
- data-hide on *: 2xs | xs | sm | md | lg | xl | 2xl — Hide this element once the nearest size container is this wide or wider. Below that width it is rendered as usual.

## cover (layout, class="cover")

Fills at least the viewport's height and centers one child vertically, with optional content pinned above and below it.

Attributes:
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Minimum space between the centered child and whatever sits above or below it.
- data-height: sm | md | lg | xl | half | full (default) — The band's least height: a stop of the height scale, half the viewport, or the whole of it. Content taller than the band grows it; nothing is cut off.

On children:
- data-center on > * (boolean) — Centers the child in the space the others leave; exactly one child carries it.

## frame (layout, class="frame")

Holds one child in a fixed aspect ratio, cropping an image, video or embedded document to fill it and centering anything else.

Attributes:
- data-ratio: 1/1 | 4/3 | 3/2 | 16/9 (default) | 21/9 — Width to height.

## grid (layout, class="grid")

Fits as many equal columns as the container allows at a minimum width, up to an optional maximum count.

Attributes:
- data-min: none | 2xs | xs (default) | sm | md | lg | xl | 2xl — The narrowest a column may be. With none, only data-columns decides the count; none is meant to be paired with data-columns, and alone gives a single full-width column.
- data-columns: 1 | 2 | 3 | 4 | 5 | 6 — The most columns allowed. Fewer appear when the container cannot fit that many at data-min; with data-min="none" the count is exact. With data-fold, the count only ever halves.
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between columns and rows.
- data-rows: 2 | 3 | 4 | 5 | 6 — Line up the parts of the children across each row: the value is how many rows each child spans, one per part.
- data-fold (boolean) — Halve the column count as the grid narrows instead of stepping down one at a time. Needs data-columns 2, 4, or 6 and uses data-min as the width per column. data-min="none" has no meaning with a fold: the count needs a width per column.
- data-tracks: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 — A fixed number of equal tracks that children are placed on with data-start and data-span, leaving any track nothing is placed on empty. Replaces the fitted columns, so data-min and data-columns have no effect alongside it, and it does not mix with data-fold.
- data-threshold: 2xs | xs | sm | md (default) | lg | xl | 2xl — With data-tracks: the grid's own width below which every child takes the whole row, in source order; at or above it, the placement applies.

On children:
- data-start on > *: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 — In a tracks grid, the column line the child begins on. Without it the child flows into the next free track.
- data-span on > *: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 — In a tracks grid, how many tracks the child covers. Without it the child covers one.

## icon (layout, class="icon")

Sizes an inline SVG to the surrounding text and aligns it with the text beside it.

Attributes:
- data-gap: none | xs (default) | sm | md | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between the icon and its text.
- data-align: start | center (default) | end | stretch | baseline — How the icon lines up with the text: centered on the line, or on the baseline.

## layer (layout, class="layer")

Stacks its children in one box, later ones on top, with the box as tall as the tallest of them.

Attributes:
- data-align: start | center | end | stretch (default) | baseline — Vertical alignment of every child in the box. baseline behaves as start here.

On children:
- data-align-self on > *: start | center | end | stretch | baseline — Where the child sits vertically: start, center, end, stretch, or baseline.
- data-justify-self on > *: start | center | end | stretch — Where the child sits horizontally: start, center, end, or stretch.

## masonry (layout, class="masonry")

Packs items of uneven height into columns with no gaps under the short ones.

Attributes:
- data-min: none | 2xs | xs (default) | sm | md | lg | xl | 2xl — The narrowest a column may be. none is meant to be paired with data-columns, which then gives an exact count; alone it gives a single full-width column.
- data-columns: 1 | 2 | 3 | 4 | 5 | 6 — The most columns allowed. Fewer appear when the container cannot fit that many at data-min.
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between columns and between items.

## overlay (layout, class="overlay")

Holds one child over the rest, centered, without pushing anything around; the parent is the box it covers.

Attributes:
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — The least space kept between the held child and the edges of the box.
- data-fixed (boolean) — Center the held child over the viewport instead of this box, and keep it there while the page scrolls.

On children:
- data-over on > * (boolean) — Lifts the child out of the flow and centers it over the box; exactly one child carries it.
- data-fill on > [data-over] (boolean) — On the same child: cover the box rather than sit centred in it, which is what a veil, a dimmer or a loading state wants. Positioning only, so a veil that wants its own content centred puts a layout inside itself.

## scroller (layout, class="scroller")

Lays its children out in a single row that scrolls horizontally.

Attributes:
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between items.
- data-width: 2xs | xs | sm | md | lg | xl | 2xl — Give every item this width instead of its natural one.
- data-snap (boolean) — Snap each item's start edge into place as the track scrolls.
- data-justify: start | center | end — Where each item settles along the track when data-snap is set: its start edge, its center, or its end. Nothing without data-snap.

## sidebar (layout, class="sidebar")

Places a fixed-width sidebar beside flexible content, and stacks them when the content would drop below half the width.

Attributes:
- data-side: start (default) | end — Which child is the sidebar: the first (start) or the last (end).
- data-width: 2xs | xs | sm (default) | md | lg | xl | 2xl — The sidebar's preferred width.
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between the two children, side by side or stacked.
- data-align: start | center | end | stretch (default) | baseline — Vertical alignment of the two children when side by side.

On children:
- data-sticky on > * (boolean) — Pins this child at --yeti-sticky-offset from the top of the scrollport while the other one scrolls past it. It takes its own height rather than the row's, since a stretched item has nowhere to move.

## stack (layout, class="stack")

Stacks its children vertically with one consistent gap between them.

Attributes:
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between children. A pair such as sm-lg grows fluidly from the first stop to the second.
- data-align: start | center | end | stretch (default) | baseline — Horizontal alignment of the children.
- data-fill (boolean) — Make the stack at least as tall as the viewport, so a child carrying data-split reaches the bottom.
- data-rule (boolean) — A line between children, of the border width in the border color, in the middle of each gap. The gap is unchanged.

On children:
- data-split on > * (boolean) — Pushes the child and everything after it to the end of the stack when the stack is taller than its content.
- data-space on > *: none | xs | sm | md | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — The gap before this one child, larger or smaller than the stack's own: more room above a heading, less between a label and its field. Does nothing on the first child; data-split wins on a child carrying both.
- data-sticky on > * (boolean) — Pins this child at --yeti-sticky-offset from the top of the scrollport while the rest of the stack scrolls past it. It keeps the full width of the column, a stack stretching its children on the inline axis.

## timeline (layout, class="timeline")

Lays its entries along a rail with a marker each, on one side, or on alternate sides of a centred rail when it is wide.

Attributes:
- data-gap: none | xs | sm | md | lg (default) | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between entries.
- data-alternate (boolean) — Put entries on alternate sides of a centred rail once the list is wide enough.

## hero (recipe, class="hero")

Fills the viewport's height with copy on one side and a figure on the other, centered, and stacks them below a container width; the one-class form of a cover holding columns.

Attributes:
- data-threshold: 2xs | xs | sm | md | lg (default) | xl | 2xl — The container width below which copy and figure become rows.
- data-gap: none | xs | sm | md | lg (default) | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between copy and figure.
- data-ratio: 1/1 | 4/3 (default) | 3/2 | 16/9 | 21/9 — The figure's aspect ratio.
- data-align: start | center (default) | end | stretch | baseline — Vertical alignment of copy and figure when side by side.
- data-side: start | end — Put the figure at the start or the end of the row regardless of source order. Once stacked, source order rules: write the copy first to meet the headline first on a phone. Moves it visually only; reading order stays as written.
- data-height: sm | md | lg | xl | half | full (default) — The band's least height: a stop of the height scale, half the viewport, or the whole of it, as a cover takes it. Content taller than the band grows it.

On children:
- data-min on > *: none | 2xs | xs | sm | md | lg | xl | 2xl — The narrowest this child may get while the two share a row; the other gives way. Stacked, it has no effect.
- data-span on > *: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 — How many shares of the row this child takes; the other child's default is 1.

## media (recipe, class="media")

Puts a figure beside a block of text and stacks them when the text would drop below half the width; the one-class form of a sidebar holding a frame and a stack.

Attributes:
- data-width: 2xs | xs (default) | sm | md | lg | xl | 2xl — The figure's preferred width.
- data-ratio: 1/1 (default) | 4/3 | 3/2 | 16/9 | 21/9 — The figure's aspect ratio.
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between the figure and the text.
- data-align: start | center | end | stretch (default) | baseline — Vertical alignment of figure and text when side by side.
- data-max: 2xs | xs | sm | md | lg | xl | 2xl — The widest the text may run side by side; the figure takes the rest of a wide row. data-width still sets where the two stack.
- data-side: start | end — Put the figure at the start or the end while side by side, regardless of source order. Stacked, the source order holds.

## shell (recipe, class="shell")

The page skeleton: header on top, footer at the bottom of the viewport when the page is short, and a body row where nav and aside sit beside main while there is room.

Attributes:
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between the rows, and between nav, main, and aside.
- data-width: 2xs | xs | sm (default) | md | lg | xl | 2xl — The preferred width of nav and aside. Three regions share a row once the container is about four times this width plus the gaps; two regions need about half that.

On children:
- data-sticky on > div > :is(nav, aside) (boolean) — Pins the nav or the aside at --yeti-sticky-offset from the top of the scrollport while main scrolls past it.

## accordion (component, class="accordion")

A column of disclosures built on details and summary, each opening to show its panel, with the browser doing the opening, the keyboard, and the announcing.

## affix (component, class="affix")

Joins a control with what belongs beside it, a unit, a symbol, a button, or another control, into one thing with a shared border and height.

## alert (component, class="alert")

A message in a hue: a tinted box with a colored edge, an optional icon, and an optional close button that the module wires up.

Attributes:
- data-variant: primary (default) | secondary | success | warning | alert | danger | neutral | black | white — Which hue: success for done, warning for careful, danger for wrong (alert is the same ladder under its Foundation 6 name), primary for news.
- data-emphasis: high | medium (default) | low — How loud: medium is a tint, high a solid fill, low the border alone.

On children:
- data-close on > button (boolean) — The close button; removes the alert when alert.js is loaded.

module: alert.js (optional)
- event yeti:close — Dispatched on the .alert after the fade and before it is removed, while it is still in the page.

## badge (component, class="badge")

A small inline label for a status or a count, tinted by a hue.

Attributes:
- data-variant: primary (default) | secondary | success | warning | alert | danger | neutral | black | white — Which hue tints the badge.
- data-emphasis: high | medium (default) | low — medium is a subtle tint with dark text, high a solid fill, low text alone.
- data-size: sm | md (default) | lg — The text size the badge sits beside; the badge renders one step smaller.

## breadcrumbs (component, class="breadcrumbs")

The trail from the home page to the current one, each step a link, with a separator between them that is seen and not read.

Attributes:
- data-size: sm | md (default) | lg — The text step.

## button (component, class="button")

An action with a face: a hue, an emphasis, and a size, with every state taken from the element itself.

Attributes:
- data-variant: primary (default) | secondary | success | warning | alert | danger | neutral | black | white — Which hue's ladder the button uses.
- data-emphasis: high (default) | medium | low — How loud: high is a solid fill, medium an outline, low text alone.
- data-size: sm | md (default) | lg — Scales the text and the padding together.

## buttons (component, class="buttons")

A group of buttons: a wrapping row, or one joined control with data-affix.

Attributes:
- data-gap: none | xs | sm (default) | md | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between buttons when not affixed.
- data-affix (boolean) — Join the buttons into one segmented control that shares borders.

## card (component, class="card")

A bordered surface for one thing: an optional figure that bleeds to the edges, a body, and a footer that sits at the bottom; a row with the picture beside the text once the card's content reaches the md width.

Attributes:
- data-variant: primary | secondary | success | warning | alert | danger | neutral | black | white — Tints the border and adds a bar along the top; the body stays plain.
- data-threshold: 2xs | xs | sm | md (default) | lg | xl | 2xl — The card's own width from which the picture sits beside the text instead of on top.
- data-ratio: 1/1 | 4/3 | 3/2 | 16/9 (default) | 21/9 — The picture's aspect ratio while it sits on top of the body. Past data-threshold the picture moves beside the body and fills that column, and the ratio stops applying.
- data-raised (boolean) — A shadow instead of a border.

On children:
- data-stretch on a (boolean) — Stretches the link over the whole card, so the card is clickable while the link keeps its own name.

## carousel (component, class="carousel")

Slides on a scroll-snapping track with dots that link to each one, scrolled by the browser, with an optional module so following a dot costs no history entry.

Attributes:
- data-slides: 1 (default) | 2 | 3 | 4 — How many slides are visible at once.
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between slides, and above the dots.

On children:
- data-track on > * (boolean) — The scrolling track that holds the slides.
- data-slide on > [data-track] > * (boolean) — One slide, with an id a dot can link to.
- data-dots on > * (boolean) — The list of links to the slides, one per slide.

module: carousel.js (optional)
- event yeti:slide with detail { index, slide } — Dispatched on the .carousel when a dot scrolls the track, with the slide's zero-based index.

## demo (component, class="demo")

A live example in a box the reader can drag narrower and wider, with a bar naming the example and the width stop the box is at, and the code beneath it.

Attributes:
- data-height: sm | md (default) | lg | xl | half | full — The preview box's height. A frame inside cannot size to its content, so this is where that is set; with data-resize="both" it is the starting height.
- data-width: 2xs | xs | sm | md | lg | xl | 2xl — The preview box's starting width, before the reader drags it. Full width when absent.
- data-resize: width (default) | both — Which way the reader can drag the box: its width only, or both width and height.
- data-stylesheet (string) — Read by the module: the stylesheet the frame it builds should load, when it is not the host page's own yeti.css; yeti.js is expected beside it.

On children:
- data-preview on > div (string) — Marks the resizable box and names the example; the bar across the top of the box shows the value. Direct markup taller than the box scrolls, so a box holding it carries tabindex="0" to stay reachable from the keyboard; a framed box does not.

module: demo.js (optional)

## dialog (component, class="dialog")

The native dialog element as a modal, opened by a button whose commandfor names it, with the page behind it inert and focus held inside.

Attributes:
- data-max: 2xs | xs | sm | md (default) | lg | xl | 2xl — The widest the dialog may grow, from the width scale; it is always narrower than the viewport by a gutter.

module: dialog.js (optional)
- event yeti:open — Dispatched on the dialog once the browser has opened it from a commandfor button.
- event yeti:close — Dispatched on the dialog when it closes, however it was closed.

## dropdown (component, class="dropdown")

A button and a panel of links and buttons that opens under it, closing on Escape or a click outside, with no script unless it is asked to open on hover.

Attributes:
- data-side: start (default) | end — Which edge of the trigger the panel lines up with.
- data-trigger: click (default) | hover — What opens the panel. Click always works; hover adds opening under the pointer, and needs the optional module and a pointer that hovers.

module: hover.js (optional)

## field (component, class="field")

One form control with its label, an optional hint, and an error that shows itself when the control is invalid.

Attributes:
- data-variant: primary (default) | secondary | success | warning | alert | danger | neutral | black | white — The color of a checked checkbox or radio.
- data-size: sm | md (default) | lg — Scales the control's height and text.
- data-inline (boolean) — Put the label beside the control. Checkboxes and radios are inline without it.

On children:
- data-hint on > * (boolean) — Help text, referenced by the control's aria-describedby.
- data-error on > * (boolean) — The error message, hidden until the control is invalid.

module: range.js (optional)

module: validate.js (optional)
- event yeti:invalid with detail { controls } — Dispatched on the form when a submit is refused, carrying the invalid controls in document order.

## nav (component, class="nav")

A bar with a brand, a list of links, and actions, that collapses the links behind a toggle at its own width and opens them as a sheet, a drawer, or a screen.

Attributes:
- data-variant: primary (default) | secondary | success | warning | alert | danger | neutral | black | white — The hue of the current link and of the hover tint.
- data-threshold: 2xs | xs | sm | md (default) | lg | xl | 2xl — The nav's own width at or above which the links sit in the bar; below it they are behind the toggle.
- data-panel: sheet (default) | drawer | screen — The shape of the open list below the threshold: a sheet under the bar, a drawer from the start edge, or the whole screen.
- data-gap: none | xs | sm (default) | md | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between the bar's parts and between the links.
- data-sticky (boolean) — Keep the bar at the top of the scrollport as the page scrolls, at --yeti-sticky-offset from the edge.

On children:
- data-brand on > * (boolean) — The site's name or mark, usually a link home.
- data-close on li (boolean) — The item holding the button that closes the panel; hidden in the bar.
- data-actions on > * (boolean) — Buttons at the end of the bar.

## pagination (component, class="pagination")

Links to the pages of a long list, each a square target, the current one filled, shrinking to Previous, the current page, and Next when it is narrow.

Attributes:
- data-variant: primary (default) | secondary | success | warning | alert | danger | neutral | black | white — The hue of the current page and of the hover tint.
- data-size: sm | md (default) | lg — The text step.
- data-threshold: 2xs | xs | sm (default) | md | lg | xl | 2xl — The pagination's own width below which only Previous, the current page, and Next remain.
- data-justify: start (default) | center | end | between | around | evenly — Where the links sit in the row.

## progress (component, class="progress")

The native progress element as a thin bar in a hue, filled to its value, or striped and moving when it has none.

Attributes:
- data-variant: primary (default) | secondary | success | warning | alert | danger | neutral | black | white — The hue of the filled part.
- data-size: sm | md (default) | lg — The bar's thickness: half the size's space step.
- data-scroll (boolean) — Fill with how far the nearest scroll container has been scrolled, the page when the bar is at its top, instead of with a value: a reading-progress bar. On a block with the class, not a progress element, and hidden from assistive tech; where a scroll timeline is unsupported the bar is not shown.

## seam (component, class="seam")

Gives a section a shaped edge, a slant, a curve, or a wave, cut from its own background so whatever is behind shows through.

Attributes:
- data-shape: slant (default) | curve | wave — The shape of the cut edge.
- data-size: sm | md (default) | lg — The depth of the cut: twice the size's space step.
- data-edge: top | bottom (default) | both — Which edge is cut.
- data-flip (boolean) — Mirror the shape horizontally, for alternating sections. A curve is symmetric and does not change.

## spinner (component, class="spinner")

A turning ring in a hue, the size of the text, for waiting with no known end; a busy button shows the same ring after its label.

Attributes:
- data-variant: primary (default) | secondary | success | warning | alert | danger | neutral | black | white — The hue of the bright edge.
- data-size: sm | md (default) | lg — The ring is one em of the size's text step.

## table (component, class="table")

A data table styled in place: header rule, row lines, optional stripes, hover, and cell borders, with numeric columns that line up.

Attributes:
- data-size: sm | md (default) | lg — Cell padding and text size; sm is the compact table.
- data-striped (boolean) — Tint every other body row.
- data-hover (boolean) — Tint the row under the pointer.
- data-border (boolean) — Borders around every cell instead of lines between rows, as a box draws its border.
- data-nowrap (boolean) — Every cell keeps its line; put the table in a scroller.
- data-fixed (boolean) — Fixed table layout: the columns share the width equally, whatever their content. A width on a first-row header cell makes that column wider and the rest share what is left.

On children:
- data-numeric on * (boolean) — Tabular figures, so digits line up, on any element; on a table's cells and headers the column is end-aligned too.
- data-nowrap on th, td (boolean) — This cell keeps its line.
- data-align on th, td, tr: start | center | end — Aligns the text of this cell, or of every cell in this row. A cell's own data-align or data-numeric outranks its row's.

## tabs (component, class="tabs")

A row of tabs over their panels, showing one at a time when its module is loaded and all of them when it is not.

Attributes:
- data-variant: primary (default) | secondary | success | warning | alert | danger | neutral | black | white — The hue of the selected tab and its edge.
- data-orientation: horizontal (default) | vertical — Whether the tab list runs along the top or down the side.
- data-gap: none | xs | sm | md (default) | lg | xl | 2xl | 3xl | xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | md-lg | md-xl | md-2xl | md-3xl | lg-xl | lg-2xl | lg-3xl | xl-2xl | xl-3xl | 2xl-3xl — Space between the list and the panels.
- data-emphasis: high — The selected tab is filled with the variant; without it the selected tab is underlined.

module: tabs.js (optional)
- event yeti:select with detail { tab, panel } — Dispatched on the .tabs when a click, an arrow key, or a hash reveal selects a tab; never for the pass at load that finds no hash to reveal.

## toc (component, class="toc")

A column of links to the headings on the page, with the one being read marked as the reader scrolls.

Attributes:
- data-variant: primary (default) | secondary | success | warning | alert | danger | neutral | black | white — The hue of the current link and its edge bar.
- data-size: sm | md (default) | lg — The text step, and the inset of each link with it.
- data-numbered (boolean) — Number the entries before their links, nested ones as 2.1, in the muted color.

module: toc.js (optional)
- event yeti:current with detail { link, heading } — Dispatched on the .toc when the mark moves to another link.

## tooltip (component, class="tooltip")

A short hint that appears beside a control on hover and on focus, described to assistive tech and needing no script.

Attributes:
- data-placement: top (default) | bottom | start | end — Which side of the trigger the bubble sits on.

## attention (utility, class="attention")

Plays one pulse or one shake on load, to point at something that has just changed.

Attributes:
- data-attention: pulse (default) | shake — Which gesture: a swell and settle, or a shake from side to side.

## billboard (utility, class="billboard")

Sizes display text to the container it is in, clamped between two steps of the type scale, so a headline fills the board it is on.

Attributes:
- data-fit: xs-sm | xs-md | xs-lg | xs-xl | xs-2xl | xs-3xl | xs-display | sm-md | sm-lg | sm-xl | sm-2xl | sm-3xl | sm-display | md-lg | md-xl | md-2xl | md-3xl (default) | md-display | lg-xl | lg-2xl | lg-3xl | lg-display | xl-2xl | xl-3xl | xl-display | 2xl-3xl | 2xl-display | 3xl-display — The two ends of the clamp, as a pair of type steps: the smallest the line may set and the largest.

## enter (utility, class="enter")

Plays one arrival, on load or as the element scrolls into view, either for the element itself or for each of its children in turn.

Attributes:
- data-enter: fade (default) | rise | fall | slide | scale — Which arrival: a fade, a rise from below, a fall from above, a slide from the side data-side names, or a growth from slightly small.
- data-side: start (default) | end — Which side a slide comes from. The sides are logical, so start is the right edge in a right-to-left page.
- data-stagger (boolean) — Animate the element's children one after another instead of the element itself, each a step later than the last.
- data-view (boolean) — Play as the element scrolls into view instead of on load. Where a scroll timeline is unsupported, or the reader has asked for less motion, it plays on load instead.
- data-once (boolean) — Arrives once, as it first comes near the viewport; without enter.js it is simply there, not animated.

module: enter.js (optional)

## lede (utility, class="lede")

The standfirst: the sentence under a page's heading that says what the page is, set larger than the prose it introduces.

## lift (utility, class="lift")

Raises the element slightly, or grows it a little, and deepens its shadow while the pointer is on it or a keyboard is inside it.

Attributes:
- data-lift: rise (default) | scale — Which gesture: rise by --yeti-lift-distance, or scale by --yeti-lift-scale, for a tile in a row where a rise would break the line.

## print (utility, class="print")

Marks an element as belonging to one medium: on the printed page only, or on the screen only.

Attributes:
- data-print: only (default) | none — Which medium the element belongs to: only, on paper and nowhere else, or none, everywhere but paper.

## visually-hidden (utility, class="visually-hidden")

Takes words out of sight and leaves them in the accessibility tree, for the name a control needs when its face is a picture.