The Kit
Tidemark builds every widget on its site from the pieces the workspace package under docs/kit/ exports as @tidemark/kit, through one entry for the controls a reader works a widget through, one for the chrome a widget sets around what it draws, one for the gate every moving drawing passes, and one for the helpers that write a drawing's markup and the curves its motion takes, so a new widget takes one of these pieces before writing its own. Each entry declares its pieces once, in the pieces.json beside its code, naming when a widget reaches for each, what it stands in place of, and the examples it is set out in. The source of every piece follows, written by mise run docs:render from those declarations.
Back and Next walk the whole kit one piece at a time, and the scene above the card changes as the walk crosses into each part of it. Point at a dot or a piece to read it, and press it to walk there.
1 of 22 · Controls
Radius
20 kmRing
Toronto on Cararra
1 of 4 · Station
Hohonu_tide_Port_Clyde_ME
Gulf of Maine Research Institute
Hohonu
NAVD88
Zag radio-group
Zag select
Zag pagination
Its own
Zag switch
Zag meter
Its own
Its own
Its own
Its own
Its own
Its own
Its own
Its own
Its own
Its own
Its own
Its own
Its own
Its own
Its own
Its own
module reads it
modules read it
ChoiceMenuPagerGripSwitchMeterStackCardMark KeyKey TilesReachFitEvery ValueIntentInline CodePinnedMotionDrivenSettledFoldingMarkupTimingA reader picks one of a few options laid out in a row or a grid.
A reader picks one of many options, grouped under headings, from a chip that opens a list.
A widget shows one of a run of items at a time.
A reader drags, pans, or steps a value between two bounds.
A reader turns one thing on or off.
A widget shows how far a value reaches toward a bound, such as a color's contrast.
A widget trades between layers in one place without moving the page.
A reader reaches for a mark, and a card says what it is.
A chart names its marks in a corner of the drawing.
A key names a drawing's entries as tiles above what each records.
A widget shows the mark a reader points at or focuses ahead of the one they picked.
A row or a foot sets the longest wording that fits its width.
A widget keeps the table it draws, for a reader without scripts or one who wants the grid.
A calm reveal opens once a mouse rests on it, on a press, or on keyboard focus.
A widget sets a line whose backticks mark code.
A widget pins a block to the top of the window as the page scrolls.
A drawing asks whether the site's drawings hold or play.
A drawing moves on the browser's clock from mounting to unmounting.
A value settles on each new one over the site's settle duration.
A widget folds its view away while it changes what the view shows.
A drawing writes its markup the same byte for byte wherever it is built.
A drawing reads the site's durations, its pauses, its glide, and the curves it steps through.
In place of
A row of buttons each toggling its own state, with the radio roles and the arrow keys written by hand.
How it behaves
Three Across
The arrow keys move the pick and the focus along the row and wrap at either end.
Swatches
Home and End take the first and the last, and only the picked tile sits in the tab order.
To take it up
import { Choice, landing } from '@tidemark/kit/controls'