78 UI Kit v0.4.0: the pieces dashboards kept asking for

This is the first release since the kit got its own blog posts, so here's the plan: one short post per release, what's new and why, and links to the live examples on 78uikit.com. The full details are always in the changelog.

Why this release

Most of it comes from one rule: if an app builds the same thing by hand twice, it goes in the kit. 78trade had been hand-building a handful of little pieces two or three times each. Now they're kit components, documented, and 78trade can delete its local copies on its next update.

What's new

• ._78-meta: the dim line of facts under a headline ("Tech · 3 days · score 72"). The kit draws the dots between them, and it can clamp to one or two lines.
• ._78-status: a badge with a short caption explaining it ("Caution · half risk"). On a phone the caption drops neatly to its own line.
• ._78-notes: quiet notes inside a card. An alert is too loud for "nothing to do, and here's why", so this is the calm version, with an optional colored dot per line.
• Stat cards got a slot for a small control next to the label (a toggle, say) and key : value lines with the keys lined up in one column.
• ._78-grid: a grid with no breakpoints. Columns are as many as fit, and an item can span two columns when there's room and the full row when there isn't. The existing KPI and card grids are now presets of it, and they render exactly as before.
• A table toolbar: the filter-and-dates row that sits above a data table, as its own small set of classes.
• ._78-card-stack and neutral figures, for lists of cards and for numbers that don't mean "good" or "bad".
• ._78-form-inline: a field and its button on one row, like "dismiss, with a reason" in a card footer.
• The "On this page" rail (_78.toc): the contents rail you see on the docs pages, now in the kit for anyone to use. It builds itself from the page's headings, highlights where you are as you scroll, and turns into a dropdown on a phone. The docs site now uses the kit's version instead of its own.
• ._78-text-aurora: a slow, shifting color gradient for a hero word or a wordmark. Purely for fun. It stays readable in both themes, and it holds still for anyone who has asked their system for reduced motion.

Two things that look different

• Cards in a grid now line up at the top. A spacing rule meant for stacked cards was pushing every card after the first down a little, even in a grid. If you'd added your own fix for that, you can remove it.
• Two paragraphs in a row in an alert or a card now have a gap. They used to run together.

Nothing was removed or renamed, so existing pages keep working.

Under the hood

Same as last time: the tickets came off the board, Bob built them one at a time, each with its docs page and a live example, and every page was checked in light and dark, at desktop and phone width, before release. One nice catch along the way: the docs site's own paragraph spacing had been quietly overriding the kit inside every live example, so the examples weren't showing the kit's real spacing. They are now.

Get it

Bump your CDN links to @v0.4.0, or grab it from GitHub. Everything new has a live example on 78uikit.com.