Static sites

@lit-material/site-kit holds the pieces of a prerendered site that have to work before any script runs: plain HTML templates, one stylesheet, and small scripts that add behaviour. This site and rws8.tech are built with it.

Install

npm install @lit-material/site-kit

Render the templates with Lit SSR (or any Lit render), load @lit-material/site-kit/css/site-kit.css, and call the init functions from your client entry. The styles sit in one cascade layer, so your own CSS overrides them without specificity fights.

FAQ

Questions on native <details>: they open without JavaScript, find-in-page reaches closed answers, and exclusive keeps one open at a time.

Does it need JavaScript?

No. Each question is a <details> element; the browser opens and closes it.

Can more than one be open?

Not with exclusive set: it becomes the name attribute, and opening one closes the others.

Is it searchable?

Yes. Ctrl+F finds text in closed answers and opens them.

faq([{ question: "Does it need JavaScript?", answer: "No." }], { exclusive: "faq" })

Numbered steps

Install the kit
npm install @lit-material/site-kit
Render the templates
On the server, in your prerender step.
Call the scripts
In the client entry, once.

An <ol> numbered by CSS counters, so screen readers count the steps.

Terminal

$ npm create lit-material-app my-appScaffolding my-app…$ cd my-app && npm run devLocal: http://localhost:5173/

The prerendered block shows the finished session; initTerminal() replays it while it's on screen, unless the visitor prefers reduced motion. It is one image to assistive technology, described by label.

Keys and shortcuts

Press / or Ctrl+K to search this site.

Search: /orCtrl+K
Close search: Esc

Scripts

import { initThemeToggle } from "@lit-material/site-kit/client/theme.js";
import { initMenu } from "@lit-material/site-kit/client/menu.js";
import { initSearch } from "@lit-material/site-kit/client/search.js";
import { initTerminal } from "@lit-material/site-kit/client/terminal.js";
import { initReveal } from "@lit-material/site-kit/client/reveal.js";

initThemeToggle({ key: "my-theme" });
initMenu();
initSearch({ emptyHint: "Try a component name." });
initTerminal();
initReveal();

Theme: themeBootScript(key) goes inline in <head>. It applies the stored choice before first paint and adds js to <html>. The themeToggle icon follows the theme in CSS, so it is right before scripts run.
Menu: menuToggle() opens the panel it controls. Escape closes it and returns focus; widening past the breakpoint closes it too.
Search: searchDialog() plus searchButton(). The Pagefind index loads on first use; pass load for another index.
Reveal: .reveal elements get .in on entering the viewport. Hide them only under html.js.