Components — Loidolt Theme

Actions

Every pressable action, in six variants and three sizes.

A square button for a single glyph, named by its `label`.

A segmented control for a short, always-visible set of choices.

A pressable row: hover surface, optional selected state, link or button by `href`.

Forms

Label, description, and error wiring for one control.

The same wiring for a group of related controls.

A standalone label for a control that `Field` does not wrap.

The text input, in underlined and `boxed` forms.

Multi-line text, sharing the input treatment.

A number input with clamped spin buttons.

A native select over an `Option[]`.

A searchable single choice: type to narrow a long list, then pick with the keyboard.

A searchable multiple choice whose picks show as removable chips.

A value, or a range between two thumbs, chosen along a track.

A password field with a button that reveals what was typed.

A one-time code entered into a row of square cells.

Capture a signature by drawing it, or by typing a name as the accessible alternative.

A checkbox with its label, including an indeterminate state.

One choice from a small set, as native radios in a fieldset.

An immediate on/off control for a setting that applies at once.

A file picker in the system's input clothes — Input cannot be `type="file"`.

A palette as a real radio group — one pressed swatch, arrow-key movement.

Surfaces

A titled block of content with an optional footer.

A framed region for tool content — heavier than a card, quieter than a dialog.

A titled page region with an actions slot.

The heading block at the top of a page.

A rule between content, horizontal or vertical.

A framed media box: fixed ratio, sunken or paper surface, contained content.

A dashboard tile: one hero number over a utility label, optionally a link.

A person or account, as a photo with initials to fall back on.

A status chip that never reads as pressable.

Data

A scrollable data table with sorting, sticky headers, and an empty state.

A `<th>` that can sort.

The "nothing here yet" case, with a way out of it.

Page controls over a total item count.

A table driven by `createDataTable()`: sorting, search, filters, paging, selection and in-place editing.

A search field bound to a data table — across every searchable column, or one `column`.

A menu of checkboxes that filters a column to the chosen values, with counts.

A menu that shows and hides a data table's columns.

A data table's footer: the visible range, rows per page, and the page trail.

The filters narrowing a list, each removable on its own, with Clear all.

A monospace block for tokens and URLs — select-all by default, one-press copy on request.

A message thread: author, meta line, pre-wrapped body, with optional numbered markers.

Previous/next through an ordered set with an 'n of N' readout — Pagination's sibling for one-at-a-time review.

A selectable rail of thumbnails — listbox semantics and scroll-into-view built in.

Feedback

A persistent message about the state of the page.

A transient message about something that just happened.

The fixed live region toasts are announced from.

A determinate or indeterminate progress bar.

A small activity indicator.

A placeholder block for content still loading.

A colored dot that reports state where a Badge is too loud, named by `label`.

A status region that speaks changes to screen readers without moving focus.

A numbered accent chip — dot form for lists, pin form for points on a canvas.

Overlays

A modal for a task the page cannot hold.

A decision that has to be answered before anything else continues.

A modal panel anchored to an edge — the narrow-viewport form of a sidebar.

Non-modal content anchored to a trigger.

A menu of actions, from an items array or your own snippet.

A short hint attached to a control.

App-level tooltip grouping and delays.

Layout

Header, main, footer — the outermost frame.

The sidebar / canvas / inspector grid.

A complementary column beside the canvas.

A toolbar pinned to a corner of a positioned container — zoom controls, canvas actions.

A box that keeps its shape — `video`, `photo`, `square`, `portrait`, `wide` or any ratio.

A labelled row of list controls — search, filters, view options — with an end cluster.

A filter area that expands under its toggle, on an auto-fit grid.

Media

A video with this system's controls: seek, volume, speed, captions, picture-in-picture and full screen.

Audio with a title, artist, artwork and the shared control bar.

A YouTube or Vimeo video behind a click-to-load facade.

A gallery of images, videos, audio and embeds that opens each in a `Lightbox`.

A full-screen viewer for a list of media, with zoom, swipe and thumbnails.

A slideshow showing one item at a time, following the WAI-ARIA carousel pattern.

Charts

Any ECharts option, themed from the tokens and wrapped as an accessible figure.

A chart’s data as a table — the non-visual alternative every chart carries.

Lines over shared categories — trends over time. `area` fills under them.

Bars, vertical or horizontal, side by side or stacked.

Parts of a whole. `innerRadius` makes it a donut with a centre label.

Stages narrowing from first to last, such as a conversion funnel.

Points on two value axes, with optional least-squares trend lines.

Several series compared across the same measures.

One reading on a scale, filled in the accent colour or shown with a needle.

A grid of values coloured on the sequential ramp.

Nested sizes as rectangles; click a group to zoom into it.

Open, high, low and close per period, with optional volume and zoom.

Flows between named nodes, sized by volume.

Maps

A MapLibre map on the loidolt basemap, recoloured with the theme and moved by keyboard as well as pointer.

GeoJSON (or any MapLibre source) for the layers inside it, with optional clustering.

Polygons filled from a source, in the first series colour unless told otherwise.

Lines — routes, boundaries, outlines — in the accent colour by default.

Points as circles, with a ring in the surface colour so they stand off the basemap.

Text and icons placed on features, labelled in the map label colour with a halo.

Polygons raised into 3D by a height property.

Point density as a heatmap, coloured on the sequential ramp.

Raster tiles or a georeferenced image, such as a scanned plan.

The loidolt pin on a map: a real button with a name, and an optional popup.

A non-modal panel pointing at a spot on the map.

Any content as a map control, stacked in a corner with MapLibre’s own.

A key for the colours on a map — categories or a continuous ramp.

Several legends in one control, each collapsible.

The coordinate under the pointer, or at the centre for keyboard users, with the zoom.

A toggle between the loidolt basemap, the plain one, and styles of your own.

Every place on a map as a list — the non-visual way to find one and go to it.

A map control listing its layers, to show, fade and reorder them.

deck.gl layers drawn on the map, for data too large or too 3D for MapLibre alone.

Docs

Markdown rendered into loidolt prose — safe by default, highlighted and diagrammed in the browser.

A whole documentation page: title and description from frontmatter, the document, its contents and previous/next links.

One highlighted block of code, with an optional filename and a copy button.

A Mermaid diagram as a named picture, with a written description and its source to hand.

The headings of a page, marking the one being read.

A table of contents beside the page, or behind a button on narrow screens.

An index of documentation: sections, each a grid of page cards.

A page in a docs index — the whole card is the link.

Theme

Switches between style presets — colours, corners, density and voice — wired to `createTheme({ presets })`.

A compact icon button that cycles light / dark / system, wired to `createTheme()`.