{props.children}
; } // Panel is a live demo with no source alongside it — for the components whose usage is // obvious from looking at them. Demo (with code) is for the ones where it is not. function Panel(props: { title: string; children?: JSXElement }) { return (Kjøl JS Web
Every component in the Solid kit, running. Not a screenshot of one anywhere: each block
below is the real component, imported from @ui/* and rendered
on this page. Use the sidebar to jump to a group.
onclick, oninput,{" "}
onchange, never onClick. And
many props accept a signal getter as well as a value, so you can pass{" "}
value={"{"}name{"}"} rather than{" "}
value={"{"}name(){"}"} and let the component track it.
dark: rule.
Nothing beside the wordmark? Then this build is production — which is what it is telling you.
Padded, and grows to fill its row.
A border instead of a shadow.
The same, with a clipped corner.
The last two are the same name in the solid and regular styles. Which one you get by default is a CSS variable the app sets, read at runtime.
one: {one() || "—"} · several:{" "} {many().join(", ") || "—"}
Two characters before it asks; 200 ms after you stop typing. A response for a query you have already typed past is DISCARDED rather than shown — which is the whole bug with hand-rolled autocompletes.
Same selection model as the field above; only the thing you click on differs.
FormCheckbox in this kit, and that is deliberate. The
signature pad hands you back the drawing as an SVG string.
Draw in it. Clearing it emits an empty string, so "did they sign?" is just a length check.
The same grid the picker drops down, usable directly when you want it inline. Pass{" "}
variant="month" for the big version.
Click a Qty or Price cell and type; Tab and the arrow keys move between editable cells. The grid does not own the rows — it tells you which cell changed and hands the value back.
data. Give it{" "}
url instead and the same column list drives a server-side
query — the sort identifier becomes the sort key, the search fields become query parameters,
and pagination is handled for you. Nothing else on the page changes.
document.body, positions from
its trigger's bounding box, and flips or shifts when it would otherwise run off the screen.
<div id="portal">{" "}
at the bottom of your index.html.
A tooltip that only answers to a mouse is a tooltip a keyboard user cannot read.
Click outside, or press Escape. Only the TOPMOST floating panel closes per press.
Placement bottom-end.
Move the cursor across the gap and onto this panel — it stays open. Select this text to prove it. Without that grace period the panel would close in the dead space between the two, which is what happens once a panel is portaled and CSS :hover no longer reaches it.
The items raise toasts, which is how you can see that an item really does close its own menu — and that the one marked closeOnClick={"{false}"} does not.
Open the modal, then the nested one inside it, and press Escape twice: modals unwind ONE LAYER per press rather than all at once.
Portaled to document.body, so no ancestor's{" "}
overflow: hidden or transform can clip it — the two
things that silently clip a floating panel.
Escape closes THIS one first, not the one behind it.
All set for {wizardName() || "nobody"}. Finish to close.
); }, }, ]} />duration: null) waits for the user instead.
useToast() throws outside a{" "}
<ToastProvider> — which is one of only two providers
this kit has.
A brief acknowledgement that data you are looking at was changed by somebody else. It is not a toast: it belongs next to the thing that moved, not in the corner.
{s}
; return ( ); } // ---- fuzzy search -------------------------------------------------------- const KIT_NAMES = [ "AutoTable", "Accordion", "Alert", "Badge", "ButtonUI", "Calendar", "CellGrid", "FormCombobox", "DatePicker", "FormInput", "Menu", "Modal", "FormMultiSelect", "Popover", "PrettyTable", "SegmentedButtons", "FormSignaturePad", "TabGroup", "ThemeToggle", "ToastProvider", "ToggleSwitch", "Tooltip", "TutorialProvider", "SidebarNav", "Chart", "FuzzyMatch", ]; // Both "and" and "&" spellings appear here on purpose: with andAmpersand on, typing // either finds both, and the exact spelling ranks above the substituted one. // "Standard" / "Brand" hold an "and" that is NOT the whole word — left untouched. const AND_AMP_NAMES = [ "First Bank & Trust", "First Bank and Trust Company", "Smith & Wesson Financial", "Johnson and Johnson Federal CU", "Highland Savings & Loan", "Standard Chartered", "Brand Mortgage Group", "AT&T Employees CU", ]; function Search() { const [hit, setHit] = createSignal(""); return (
The scorer is headless too: rankFuzzyMatches and{" "}
fuzzySegments give you the ranking and the highlight runs,
and you render them however you like.
andAmpersand and the word "and" and the symbol "&"
match each other, so "First Bank and Trust" also finds "First Bank & Trust". The exact
spelling still wins — the substituted form is a penalized extra pass, not a free swap — and a
stray "and" inside "Standard" or "Brand" is left alone.
@ui/Chart draws SVG — no charting library, nothing vendored, no{" "}
<canvas>. Because the picture is JSX it is already reactive:
change series and Solid re-renders the marks that moved. There is
no update() to call.
var(--color-chart-1) …), so the palette inverts for dark mode with
the rest of the site — a canvas paints pixels and cannot read a CSS variable. And every mark is a
real element, so hovering shows a crosshair and one tooltip listing every series at that point.
title; a multi-series chart also draws a
legend. Click a legend key — say Errors or a donut slice — to hide it, and the scale
and marks recompute from what's left. The threeD prop gives
every plot a 3D grid — bars extrude, a line or area draws flat over it, the donut tilts.
The same depth and tilt give the grid
itself perspective: a floor recedes from the value-0 baseline into a back wall. Bars extrude into
that space; a line or area stays flat on the front plane, drawn over the grid and read against the
front axis — the stroke is not itself extruded, since depth on a hairline reads as noise.{" "}
tilt runs 1 (head-on, near-flat) to 0 (bird's-eye);{" "}
depth is the sweep length in px.
kind prop picks the form —{" "}
"line" | "area" | "bar" | "pie" | "donut" — and{" "}
stacked, horizontal,{" "}
curve, threeD{" "}
(with depth / tilt),{" "}
title, palette and{" "}
valueFormat refine it. The legend it draws for a multi-series or
pie/donut chart is interactive — clicking a key toggles that series or slice. The width is measured
from the container, so a chart fills whatever column you give it.
horizontal runs the categories down the y-axis;{" "}
stacked layers the series with a 2px surface gap between segments.
@ui/USHeatmap shades each state on a themed sequential ramp and
projects points (latitude/longitude) with a dependency-free
albersUsa port — so Anchorage and Honolulu land on the Alaska and Hawaii insets. With{" "}
proportional, each dot's area scales with its value. Hover a
state or a point.
bg-surface,{" "}
text-ink, border-line — and what
those mean is decided in one place. Dark mode re-points a dozen CSS variables and not one
component knows it happened.
Press it. Every component on this page moves — none of them were told. Your choice is
remembered, and it is the same choice Kjøl Wasm Web reads: both layers of this site share
one kjol-theme key, so the theme survives crossing between
two front-ends that share no code at all.
{t.name}
{t.role}
The swatch class is written out in full in the source, not built as{" "}
"bg-" + name. Tailwind finds the classes it must compile by
scanning the source for literal strings — a concatenation is invisible to it, and every
swatch here would come out colourless.
A red-50 wash is invisible on a near-black surface. An
alert's tint has to become a deep, transparent one — a different colour, not a
different value of the same one. One of only two places a{" "}
dark: variant survives.
The neutral button is dark on a light page and light on a dark one, so its label must
invert with it — text-white would disappear the moment
the fill went pale. Hence three tokens, not one. The other place.