Component kit/Page primitivesPhone

Page primitives

The pieces every real page rebuilt on its own in Round 4, now one shared set: the overlay layer, tabs, sticky save and action bars, the record header, key/value asides, list rows and two more status chips.

Kit v2. Same values the approved pages already use, so switching a page to these is pixel-neutral.

Sticky-safe shell

The frame, main column and phone frame clip instead of hiding overflow, so a sticky top bar, toolbar or save bar sticks on a real page.

Nothing to see changes: overflow:clip clips exactly like hidden but is not a scroll container, so position:sticky children stick to the page scroll.

Uses.frame{overflow:clip}.main{overflow:clip}.phone{overflow:clip}

Overlay layer

Full-viewport layer for sheets, dialogs, guards and the help drawer on a real page.

A page puts its sheets, dialogs and help drawer in a fixed layer, so they cover the viewport and not the frame. .below-bar keeps the help drawer under the top bar and beside the sidebar.

Uses.k-layer.k-layer.below-bar.k-sheet-b[data-k-toggle]

Tab strip

Page and section navigation. A segmented control is a value; tabs move you between views.

Lifetime value £8,420 across 14 orders. Last order RJ-24117, a navy chalk-stripe three-piece.
Uses.tabs.tab[role=tab]aria-controls--tab-h

Record header

Detail pages: who it is, its state, the facts, and the ranked actions.

JW

James Whitfield

ActiveVIP
james.whitfield@hey.comLondon, GBCustomer since Mar 2022
Uses.k-rec.k-rec-t.k-rec-m.k-rec-a.avatar

Key/value aside

Facts in a side column. Long ids wrap instead of pushing the column wide.

Order
RJ-24117
Envelope id
env_01J9ZQ4X8T6K3M2W7RBN5HCY0D
ERP
In sync
Placed
9 Oct 2026, 14:22
Total
£1,890.00 · GBP
Uses.k-kv--kv-label

Sticky save bar

A whole-page form keeps Save in view. Type in the field to see the dirty state.

All changes savedUnsaved changesNot saved. Try again.
Uses.k-savebar.k-saved.k-dirty.k-err[data-k-form][data-k-discard]

List row without a thumbnail

Campaigns, rules, tickets and releases on a phone: title, one line, chips, and a trailing figure.

Autumn tailoring editEmail · 4,812 recipients · sent 2 OctEnded38% open£12,940Wedding season waistcoatsEmail · scheduled for 20 Oct, 09:00ScheduledHolland & Sherry flannel launchEmail · draft, last edited by CamillaDraft
Uses.k-list.k-li.k-li .r--li-min-h

Phone action bar

One primary in thumb reach above the tab bar. Select swaps it to a selection bar.

RJ-24110Navy chalk-stripe three-piece
RJ-24111Navy chalk-stripe three-piece
RJ-24112Navy chalk-stripe three-piece
RJ-24113Navy chalk-stripe three-piece
RJ-24114Navy chalk-stripe three-piece
RJ-24115Navy chalk-stripe three-piece
RJ-24116Navy chalk-stripe three-piece
3 selected
Uses.k-actbar.k-actbar.sel.k-selmsg[data-k-when]

Switch

kit.js flips a switch on click. A page that flips it itself, or opens a confirm, is left alone.

Sell jacket onlySell trousers onlyAs designed (always on)
Uses.switch[role=switch]aria-checked.switch.lock

Two more states

A campaign that ran its course, and a column no backend stage feeds yet.

DraftScheduledLivePausedEndedNot mapped
Finishing · not mappedNo ERP stage feeds this column yet, so no orders show here.
Uses.chip.ended.chip.unmapped.k-unmapped.dot.neutral