# 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/

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

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

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-border (boolean) — Draw a border of the border width, in the border colour.

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

## 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-limit: 2 | 3 | 4 | 5 — The most columns allowed on one row; further children each take a full row.

On children:
- data-span on > *: 1 | 2 | 3 | 4 | 5 | 6 — 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.

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

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 media 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-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-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-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-ranks: 2 | 3 | 4 | 5 | 6 — Line up the parts of the children across each row: the value is how many parts a child has, and each part takes one row.

## 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-fixed (boolean) — Center the held child over the viewport instead of this box, and keep it there while the page scrolls.
- 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.

On children:
- data-over on > * (boolean) — Lifts the child out of the flow and centers it over the box; exactly one child carries it.

## 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-snap (boolean) — Snap each item's start edge into place as the track scrolls.
- data-width: 2xs | xs | sm | md | lg | xl | 2xl — Give every item this width instead of its natural one.

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

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

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.

## 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 — Force the figure to the start or the end regardless of source order. Moves it visually only; reading order stays as written.

## 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-side: start | end — Force the figure to the start or the end regardless of source order. Moves it visually only; reading order stays as written.

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

## 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 coloured edge, an optional icon, and an optional close button that the module wires up.

Attributes:
- data-variant: primary (default) | secondary | success | warning | alert | neutral — Which hue: success for done, warning for careful, alert for wrong, 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-dismiss on > button (boolean) — The close button; removes the alert when alert.js is loaded.

module: alert.js (optional)

## 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 | neutral — 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 | neutral — 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.
- data-open (string) — The id of a dialog this button opens, when dialog.js is loaded.

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

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

Attributes:
- data-attach (boolean) — Fuse the buttons into one segmented control that shares borders.
- 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 attached.

## 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-ratio: 1/1 | 4/3 | 3/2 | 16/9 (default) | 21/9 — The figure's aspect ratio when the card is wide.
- 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-raised (boolean) — A shadow instead of a border.
- data-variant: primary | secondary | success | warning | alert | neutral — Tints the border and adds a bar along the top; the body stays plain.

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)

## 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 — 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 that names it, with the page behind it inert and focus held inside.

Attributes:
- data-width: 2xs | xs | sm | md (default) | lg | xl | 2xl — How wide the dialog may grow.

module: dialog.js (optional)

## 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-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.
- data-variant: primary (default) | secondary | success | warning | alert | neutral — The colour of a checked checkbox or radio.

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.

## 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-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-variant: primary (default) | secondary | success | warning | alert | neutral — The hue of the current link and of the hover tint.
- 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.

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-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-variant: primary (default) | secondary | success | warning | alert | neutral — The hue of the current page and of the hover tint.
- data-justify: start (default) | center | end | between | around | evenly — Where the links sit in the row.
- data-size: sm | md (default) | lg — The text step.

## 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 | neutral — The hue of the filled part.
- data-size: sm | md (default) | lg — The bar's thickness: half the size's space step.

## 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-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.
- data-size: sm | md (default) | lg — The depth of the cut: twice the size's space step.

## 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 | neutral — 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-grid (boolean) — Borders around every cell instead of lines between rows.

On children:
- data-numeric on td, th (boolean) — A cell of numbers: end-aligned with tabular figures.

## 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-orientation: horizontal (default) | vertical — Whether the tab list runs along the top or down the side.
- data-variant: primary (default) | secondary | success | warning | alert | neutral — The hue of the selected tab and its edge.
- 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.

module: tabs.js (optional)

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

## 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 | scale — Which arrival: a fade, a rise from below, or a growth from slightly small.
- 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.

## 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 and deepens its shadow while the pointer is on it or a keyboard is inside it.