Keystone demo

Style + icons + behavior, each loaded from a single tag. This page uses all three; comment any one out in the source to see the others still work.

Accent theme

Swap the accent color with data-ks-accent on <html> (or any container). The primary steel-blue is unchanged; -subtle / -muted tints derive via color-mix so every preset works in light and dark.

Buttons

Form (with validation)

Form niceties

Rich-text editor

Combobox (searchable & multi-select)

Badges, chips & alerts

Overlays & feedback

Right-click the Keystone site link (or any selected text) to open the custom context menu.

Promise-based dialogs

await Keystone.confirm() / .alert() / .prompt() — built on the modal, resolved on choice.

Result: (none yet)

Tabs & accordion

Data & status

Table utilities

Sortable columns, a frozen first column, a toolbar, and a responsive card-stack — all composable on the same .ks-table. Click a header (or focus it and press Enter/Space) to cycle ascending → descending → original. Type is auto-detected per column. Narrow the window below 640px to see rows stack into labeled cards. Without JS it stays a plain static table.

Empty state (as a full-width <td> row):

Table pack

Four behaviors over one shared controller, so they compose: the pipeline is always filter → sort → page. Type in the filter and the pager recounts; sort a column and you land back on page 1; select-all ticks the whole filtered set, not just this page; export writes what you are looking at, in the order you are looking at it, minus any column you hid. Rows added later by an API call are picked up automatically. Without JS it is one plain, complete table.

Commands, time & clipboard

Press ⌘K (or Ctrl+K) for the palette — it only binds once a page registers a command, so pages that don't use it keep their shortcut. Timestamps rewrite themselves and keep current on one shared tick. Copy buttons read a literal, a selector, or the nearest <pre>. And this whole page has a print stylesheet — try ⌘P.

Keystone.commands.open()

Charts — real axes

data-ks-x="time" reads each row label as a date and plots it at its true position. The two charts below hold the same readings: on the left a category axis spaces them evenly, on the right a time axis shows what actually happened — three samples a minute apart, then a six-hour hole, then two more. Also here: data-ks-ref threshold lines, click-a-key-to-isolate, and PNG / CSV export.

Async regions

The four-state dance every data screen does — loading → error+retry → empty → data — as markup instead of app code. Presentation only: Keystone owns which slot shows, the retry button, the poll timer and the stale clock; you own the fetch. Force each state below. Note that a failed reload keeps the last good numbers on screen and just marks the region stale — blanking a working board because one refresh timed out is worse than slightly old data.

App primitives

Building blocks for data-heavy app screens — all style-only, working in light and dark.

Charts

Bar, line/area, donut and sparklines, rendered from real <table> markup (or inline JSON / the JS API). Without the module the tables below simply render; with it, each table stays reachable behind “View data” — it is the chart's screen-reader representation. Series colors are the validated --ks-chart-1…8 slots (colorblind-safe in light and dark, assigned in fixed order — never rank, never a state color). Hover or focus any mark for its values.

Inline sparklines ride along in text or table cells: CPU , memory , deploys — colored via currentColor, defaulting to slot 1.

Charts — live data, morph & annotations

An update doesn't redraw a chart, it moves it. Marks are keyed by meaning — series × category, tick value — so a bar that changed is the same bar resizing, a reading that scrolls off a rolling window slides out the left, and isolating a series (click a legend key) rescales the axis smoothly. Table-fed charts watch their table: re-render its rows from an async poll and the chart follows. Hit targets, tooltips and the table are right the instant the data lands; reduced motion simply swaps.

Infographics — gauges, grids, boards & flows

Eight forms in the charts module, each built from markup you'd write anyway — a <meter> or a <table>, which stays as the chart's screen-reader twin and its no-JS fallback. Color does one job per form: categorical slots for identity, the steel sequential ramp for magnitude, the ordinal ramp for ordered stages, and state tones only for state — always with a word and a glyph. Dense grids are one tab stop: focus one and walk it with the arrow keys.

Motion — controls, progress & reveal

State changes animate: the check mark springs in, the radio core scales up, the switch knob slides while its track eases off→on. Progress eases width changes and offers a looping --indeterminate sweep. All of this respects prefers-reduced-motion.

Motion — sequence, constancy & live values

Motion that shows change: a list arrives in order, a sorted row glides to its new place, a polled number ticks from what it showed to what it is now. The navbar's motion button (or Keystone.motion.set('reduce')) switches all of it off in-app — persisted, scoped like density, and never able to turn motion back on over an OS that asked for less.

Draw

.ks-draw on an inline SVG draws its line work in when it is first seen; labels fade in behind. For diagrams and process illustrations — fully drawn without JS, under reduced motion, and in print.

Infographics — meter, ring, steps & proportion

CSS-only forms with a non-visual twin built in: <meter> is announced natively, rings carry role="progressbar", steps are an ordered list, a proportion bar's legend is its text. Tone signals state (always beside a word), and every one of them renders with only keystone.css loaded.

Density modes

Scale control heights, padding and font for data-dense screens without re-theming. Add data-ks-density="compact", "default" or "comfortable" to <html> or any container. Compact clamps interactive controls to a 32px minimum tap target. The middle column below writes "default" explicitly — it is pixel-identical to omitting the attribute, and it is the only way to reset a subtree to 1x inside a comfortable ancestor (see below).

Resetting inside a dense page. Density nests, so a container inside a comfortable ancestor inherits 1.25x — and until now there was no way back. Writing data-ks-density="default" returns a subtree to 1x, which is what a data table on an otherwise roomy page wants.

Sound & haptics

Optional official plugins, shipped off in plugins/config.json. Enable them below to feel/hear them — then click any button on the page. Haptics need a device with a vibration motor.

Stateful fields

Add the stateful attribute and a field remembers its value across reloads — persisted to the browser's private file system (a port of pio). Type below, then refresh.

Requires the File System Access API (Chromium/WebKit). Other browsers no-op silently. Radios persist by group name.

Icons

Rendered from the embedded webfont via .ks-i-<category>-<name>.