@buttonschool/create-wireframe 0.1.1 → 0.2.0

package/README.md

@@ -10,13 +10,17 @@ cd my-app
 pnpm dev
 ```
 
+Or with npm or yarn: `npm create @buttonschool/wireframe my-app` / `yarn create @buttonschool/wireframe my-app`. The CLI runs the matching install command (pnpm, npm, or yarn). Then `pnpm build` and `pnpm preview` (or `npm run build` / `npm run preview`) to build and preview production.
+
 ## What’s included
 
 - **Vite** – dev server with HMR, `pnpm dev` / `pnpm build` / `pnpm preview`
+- **Two-page starter** – Start (small word game, Spelling Bee–style) and token showcase; CSS is linked from HTML (`<link>` in each page’s head); every root-level `.html` file is automatically a page (add a file and a nav link, no config change)
 - **Design tokens** – `src/kit/tokens.css`: grayscale palette, semantic color aliases, spacing scale, border radius, typography (Comic Neue)
 - **Comic Neue** – via [@fontsource/comic-neue](https://fontsource.org/fonts/comic-neue) (OFL-1.1)
 - **Lucide** – dependency only; [Lucide icons](https://lucide.dev) – import and render as SVG as needed
 - **AGENTS.md** – short instructions for AI/code-gen (tokens location, dev server, icons)
+- **Accessibility** – starter includes basic a11y: live regions, current-page marking on nav, and visually hidden labels where needed; extend as you build.
 
 First version: tokens + font + icons only, no component CSS. Not opinionated; add your own structure.
 

package/index.js

@@ -8,6 +8,14 @@ import { spawn } from "child_process";
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const templateDir = join(__dirname, "template");
 
+function getPackageManager() {
+  const execPath = process.env.npm_execpath || "";
+  const userAgent = process.env.npm_config_user_agent || "";
+  if (execPath.includes("pnpm") || userAgent.startsWith("pnpm/")) return "pnpm";
+  if (execPath.includes("yarn") || userAgent.startsWith("yarn/")) return "yarn";
+  return "npm";
+}
+
 const projectName = process.argv[2];
 if (!projectName) {
   console.error("Usage: pnpm create @buttonschool/wireframe <project-name>");
@@ -27,12 +35,17 @@ const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
 pkg.name = projectName;
 writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
 
-const child = spawn("pnpm", ["install"], {
+const pm = getPackageManager();
+const installCmd = pm === "pnpm" ? "pnpm" : pm === "yarn" ? "yarn" : "npm";
+const installArgs = pm === "npm" ? ["install"] : ["install"];
+const devCmd = pm === "pnpm" ? "pnpm dev" : pm === "yarn" ? "yarn dev" : "npm run dev";
+
+const child = spawn(installCmd, installArgs, {
   cwd: targetDir,
   stdio: "inherit",
   shell: true,
 });
 child.on("close", (code) => {
   if (code !== 0) process.exit(code);
-  console.log(`\nDone. Run:\n  cd ${projectName}\n  pnpm dev\n`);
+  console.log(`\nDone. Run:\n  cd ${projectName}\n  ${devCmd}\n`);
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@buttonschool/create-wireframe",
-  "version": "0.1.1",
-  "description": "Scaffold a Vite-based wireframe prototype with tokens, Comic Neue, and Lucide",
+  "version": "0.2.0",
+  "description": "Scaffold a Vite-based wireframe prototype with tokens, components, Comic Neue, and Lucide",
   "type": "module",
   "bin": "index.js",
   "files": [

package/template/.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true

package/template/AGENTS.md

@@ -2,10 +2,16 @@
 
 This is a **wireframe prototype** scaffold. Stack: **Vite** (vanilla JS), design tokens, **Comic Neue** font, and **Lucide** icons. Keep structure minimal; suitable for code-gen and rapid iteration.
 
+The project starts with **three HTML pages**: **Start** (`index.html`) has a small word game (Spelling Bee–style); **Tokens** (`tokens.html`) showcases the design tokens; **Components** (`components.html`) showcases the wireframe kit controls. All share a nav linking to each other. The nav is a single **Nunjucks partial**: `_partials/nav.html` (uses `site.nav.*` from `src/strings.json` and `current` for `aria-current="page"`). Each HTML page includes it and receives a `current` value via `vite.config.js` so the active link is marked. To add a page: add the `.html` file, add a link in `_partials/nav.html`, add a `variables` entry in `vite.config.js` with `{ ...strings, current: "yourpage" }`, and add a link in `main.css` if you add page-specific styles. Styles are linked from each page’s `<head>` via `<link rel="stylesheet" href="/src/styles/main.css">`. Prefer writing markup in HTML files and using JS only for behavior. To add a page: add a new `.html` file at the project root and add a link to it in the nav; no need to edit Vite config (every root-level HTML file is automatically a page).
+
+## Styles
+
+Styles are organized under `src/styles/`: `main.css` (orchestration), `base.css`, `layout.css`, `components/` (e.g. nav), and `pages/` (home, tokens-showcase, components-showcase). Reusable controls live under **`src/kit/components/`** — one CSS file per component (button, input, textarea, checkbox, radio, select, label, field), using `--wire-*` tokens and `.wire-*` class names (e.g. `.wire-button`, `.wire-input`). Use `.wire-field` to wrap a label and its control for consistent spacing. The select can be wrapped in `.wire-select-wrap` for a CSS-only chevron (pseudo-element, no icon element or JS). To remove or add a page or component, edit the corresponding file and the `@import` list in `styles/main.css`.
+
 ## Tokens
 
 - **Location:** `src/kit/tokens.css`
-- **Usage:** CSS custom properties on `:root` with `--wire-*` prefix: colors (grayscale + semantic aliases), spacing (`--wire-space-*`), radius (`--wire-radius-*`), typography (`--wire-font-family`, `--wire-line-height`). Use them in your CSS, e.g. `color: var(--wire-text-primary);`, `padding: var(--wire-space-md);`.
+- **Usage:** CSS custom properties on `:root` with `--wire-*` prefix: colors (grayscale + semantic aliases), spacing (`--wire-space-*`), radius (`--wire-radius-*`), border width (`--wire-border-width`, default 2px for controls and strokes), typography (`--wire-font-family`, `--wire-line-height`), font sizes (`--wire-text-xs` through `--wire-text-2xl`, plus semantic aliases like `--wire-text-body`, `--wire-text-heading`, `--wire-text-subheading`, `--wire-text-caption`, `--wire-text-label`), and sizing (`--wire-size-icon-sm`, `--wire-size-icon-md`, `--wire-size-icon-lg`, `--wire-size-avatar-sm`, `--wire-size-avatar-md`, `--wire-size-avatar-lg`). Use them in your CSS, e.g. `color: var(--wire-text-primary);`, `padding: var(--wire-space-md);`, `font-size: var(--wire-text-body);`, `width: var(--wire-size-icon-md); height: var(--wire-size-icon-md);`.
 
 ## Dev server
 
@@ -13,4 +19,8 @@ This is a **wireframe prototype** scaffold. Stack: **Vite** (vanilla JS), design
 
 ## Icons
 
-- **Lucide** is installed. Import icons and render as SVG (e.g. use the `lucide` package API or copy SVGs from [Lucide](https://lucide.dev)). Prefer semantic icon names; keep icons consistent with wireframe style.
+- **Lucide** is installed. Import icons and render as SVG (e.g. use the `lucide` package API or copy SVGs from [Lucide](https://lucide.dev)). Prefer semantic icon names; keep icons consistent with wireframe style. Example: the Start page uses `data-lucide="crown"` in the HTML and `createIcons({ icons: { Crown } })` from `lucide` in JS to render the crown icon.
+
+## Accessibility
+
+The starter includes basic a11y: `aria-live` for dynamic feedback, `aria-current="page"` on the nav, and `.visually-hidden` for labels. Extend with focus management, landmarks, and ARIA as needed.

package/template/_partials/nav.html

@@ -0,0 +1,5 @@
+<nav class="site-nav">
+  <a href="/" {% if current == "start" %}aria-current="page"{% endif %}>{{ site.nav.start }}</a>
+  <a href="/tokens.html" {% if current == "tokens" %}aria-current="page"{% endif %}>{{ site.nav.tokens }}</a>
+  <a href="/components.html" {% if current == "components" %}aria-current="page"{% endif %}>{{ site.nav.components }}</a>
+</nav>

package/template/components.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/src/styles/main.css" />
+    <title>Components – Wireframe</title>
+  </head>
+  <body>
+    {% include "_partials/nav.html" %}
+    <main class="components-showcase">
+      <h1>Components</h1>
+      <p class="components-showcase-intro">Reusable controls from the wireframe kit. Use classes <code>.wire-button</code>, <code>.wire-input</code>, and the rest in your HTML.</p>
+
+      <section class="showcase-section">
+        <h2>Buttons</h2>
+        <div class="component-demo-row">
+          <button type="button" class="wire-button">Default</button>
+          <button type="button" class="wire-button wire-button--primary">Primary</button>
+          <button type="button" class="wire-button" disabled>Disabled</button>
+        </div>
+      </section>
+
+      <section class="showcase-section">
+        <h2>Text input</h2>
+        <div class="component-demo-block">
+          <div class="wire-field">
+            <label class="wire-label" for="demo-input">Label</label>
+            <input type="text" id="demo-input" class="wire-input" placeholder="Placeholder text" />
+          </div>
+        </div>
+        <div class="component-demo-block">
+          <input type="text" class="wire-input" placeholder="No label" disabled />
+        </div>
+      </section>
+
+      <section class="showcase-section">
+        <h2>Textarea</h2>
+        <div class="component-demo-block">
+          <div class="wire-field">
+            <label class="wire-label" for="demo-textarea">Message</label>
+            <textarea id="demo-textarea" class="wire-textarea" rows="4" placeholder="Enter text…"></textarea>
+          </div>
+        </div>
+      </section>
+
+      <section class="showcase-section">
+        <h2>Checkbox</h2>
+        <div class="component-demo-stack">
+          <label class="wire-checkbox">
+            <input type="checkbox" name="demo-cb" />
+            <span>Option one</span>
+          </label>
+          <label class="wire-checkbox">
+            <input type="checkbox" name="demo-cb" checked />
+            <span>Option two (checked)</span>
+          </label>
+          <label class="wire-checkbox">
+            <input type="checkbox" name="demo-cb" disabled />
+            <span>Option three (disabled)</span>
+          </label>
+        </div>
+      </section>
+
+      <section class="showcase-section">
+        <h2>Radio</h2>
+        <div class="component-demo-stack">
+          <label class="wire-radio">
+            <input type="radio" name="demo-radio" value="a" />
+            <span>Choice A</span>
+          </label>
+          <label class="wire-radio">
+            <input type="radio" name="demo-radio" value="b" checked />
+            <span>Choice B</span>
+          </label>
+          <label class="wire-radio">
+            <input type="radio" name="demo-radio" value="c" disabled />
+            <span>Choice C (disabled)</span>
+          </label>
+        </div>
+      </section>
+
+      <section class="showcase-section">
+        <h2>Select</h2>
+        <div class="component-demo-block">
+          <div class="wire-field">
+            <label class="wire-label" for="demo-select">Choose one</label>
+            <span class="wire-select-wrap">
+              <select id="demo-select">
+                <option value="">Select…</option>
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+              </select>
+            </span>
+          </div>
+        </div>
+        <div class="component-demo-block">
+          <span class="wire-select-wrap">
+            <select disabled>
+              <option>Disabled select</option>
+            </select>
+          </span>
+        </div>
+      </section>
+
+      <section class="showcase-section">
+        <h2>Label</h2>
+        <div class="component-demo-stack">
+          <div class="wire-field">
+            <label class="wire-label" for="demo-label-plain">Plain label</label>
+            <input type="text" id="demo-label-plain" class="wire-input" />
+          </div>
+          <div class="wire-field">
+            <label class="wire-label wire-label--required" for="demo-label-required">Required field</label>
+            <input type="text" id="demo-label-required" class="wire-input" />
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

package/template/index.html

@@ -3,10 +3,33 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <link rel="stylesheet" href="/src/styles/main.css" />
+    <title>{{ site.title }}</title>
   </head>
   <body>
-    <div id="app"></div>
+    {% include "_partials/nav.html" %}
+    <main class="game-area">
+      <p class="bee-score" aria-live="polite"><i data-lucide="crown" class="bee-score-icon" aria-hidden="true"></i><span class="bee-score-value">0</span><span class="bee-score-label visually-hidden">{{ game.scoreLabel }}</span></p>
+      <div class="bee-focus-region" tabindex="-1">
+        <div class="bee-honeycomb" aria-hidden="true"></div>
+        <div class="bee-input-row">
+        <label for="bee-word" class="visually-hidden">{{ game.inputLabel }}</label>
+        <input
+          type="text"
+          id="bee-word"
+          class="bee-input"
+          placeholder="{{ game.inputPlaceholder }}"
+          autocomplete="off"
+          autocapitalize="off"
+          maxlength="15"
+        />
+        <button type="button" class="bee-submit">{{ game.submitButton }}</button>
+        </div>
+      </div>
+      <p class="bee-feedback" aria-live="polite"></p>
+      <h2 class="bee-found-heading">{{ game.foundHeading }}</h2>
+      <ul class="bee-found-list" aria-live="polite"></ul>
+    </main>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>

package/template/package.json

@@ -13,6 +13,8 @@
   },
   "devDependencies": {
     "@fontsource/comic-neue": "^5.1.0",
-    "vite": "^6.0.0"
+    "@fontsource/monaspace-argon": "^5.1.0",
+    "vite": "^6.0.0",
+    "vite-plugin-nunjucks": "^0.2.0"
   }
 }

package/template/src/game.js

@@ -0,0 +1,302 @@
+/**
+ * Spelling Bee clone – pangram WIREFRAME.
+ * Letters: W, I, R, E, F, A, M. Center letter E (required in every word).
+ */
+
+import { createIcons, Crown } from "lucide";
+import strings from "./strings.json";
+
+const LETTERS = ["W", "I", "R", "E", "F", "A", "M"];
+const CENTER_LETTER = "E";
+const MIN_LENGTH = 4;
+const STORAGE_KEY = "wireframe-bee-found";
+
+const WORD_LIST = new Set([
+  "aerie",
+  "aerier",
+  "afar",
+  "afear",
+  "affair",
+  "affirm",
+  "affirmer",
+  "afire",
+  "aimer",
+  "airer",
+  "airfare",
+  "airframe",
+  "airier",
+  "area",
+  "arear",
+  "aria",
+  "arrear",
+  "aware",
+  "awarer",
+  "eerie",
+  "eerier",
+  "emir",
+  "ewer",
+  "faerie",
+  "fair",
+  "fairer",
+  "fame",
+  "fare",
+  "farer",
+  "farm",
+  "farmer",
+  "farmwife",
+  "farrier",
+  "fear",
+  "fearer",
+  "femme",
+  "ferm",
+  "fermi",
+  "fewer",
+  "fief",
+  "fierier",
+  "fife",
+  "fifer",
+  "fire",
+  "firearm",
+  "firer",
+  "firm",
+  "firmer",
+  "firmware",
+  "frame",
+  "framer",
+  "free",
+  "freer",
+  "freeware",
+  "friar",
+  "frier",
+  "iffier",
+  "imam",
+  "mafia",
+  "maim",
+  "maimer",
+  "mama",
+  "mamma",
+  "mare",
+  "marm",
+  "marrer",
+  "marrier",
+  "meme",
+  "mere",
+  "merer",
+  "merrier",
+  "miff",
+  "miffier",
+  "mime",
+  "mimer",
+  "mire",
+  "raffia",
+  "rammer",
+  "rare",
+  "rarefier",
+  "rarer",
+  "rawer",
+  "reaffirm",
+  "ream",
+  "reamer",
+  "rear",
+  "rearer",
+  "rearm",
+  "reef",
+  "reefer",
+  "refer",
+  "referee",
+  "referrer",
+  "refire",
+  "reframe",
+  "reifier",
+  "rewarm",
+  "rewear",
+  "rewire",
+  "rife",
+  "riff",
+  "riffraff",
+  "rime",
+  "rimer",
+  "rimfire",
+  "rimmer",
+  "wafer",
+  "waif",
+  "ware",
+  "warfare",
+  "warfarer",
+  "warier",
+  "warm",
+  "warmer",
+  "wear",
+  "wearer",
+  "wearier",
+  "weer",
+  "weir",
+  "were",
+  "wife",
+  "wire",
+  "wireframe",
+  "wirer",
+  "wirier",
+  "wrier",
+]);
+
+function isPangram(word) {
+  const lower = word.toLowerCase();
+  return LETTERS.every((letter) => lower.includes(letter.toLowerCase()));
+}
+
+function usesOnlyLetters(word) {
+  const allowed = new Set(LETTERS.map((l) => l.toLowerCase()));
+  return [...word.toLowerCase()].every((ch) => allowed.has(ch));
+}
+
+function hasCenterLetter(word) {
+  return word.toLowerCase().includes(CENTER_LETTER.toLowerCase());
+}
+
+function scoreWord(word) {
+  const len = word.length;
+  if (len < MIN_LENGTH) return 0;
+  let pts = len === 4 ? 1 : len === 5 ? 2 : len === 6 ? 3 : 4;
+  if (isPangram(word)) pts += 7;
+  return pts;
+}
+
+function validate(word) {
+  const w = word.trim().toLowerCase();
+  if (!w) return { ok: false, message: "" };
+  if (w.length < MIN_LENGTH) return { ok: false, message: strings.game.feedback.tooShort };
+  if (!hasCenterLetter(w)) return { ok: false, message: strings.game.feedback.missingCenter };
+  if (!usesOnlyLetters(w)) return { ok: false, message: strings.game.feedback.invalidLetters };
+  if (!WORD_LIST.has(w)) return { ok: false, message: strings.game.feedback.notInList };
+  return { ok: true, word: w };
+}
+
+function init() {
+  createIcons({ icons: { Crown } });
+
+  const area = document.querySelector(".game-area");
+  if (!area) return;
+
+  const focusRegion = area.querySelector(".bee-focus-region");
+  const scoreEl = area.querySelector(".bee-score");
+  const honeycombEl = area.querySelector(".bee-honeycomb");
+  const inputEl = area.querySelector(".bee-input");
+  const submitBtn = area.querySelector(".bee-submit");
+  const feedbackEl = area.querySelector(".bee-feedback");
+  const foundListEl = area.querySelector(".bee-found-list");
+
+  if (!focusRegion || !scoreEl || !honeycombEl || !inputEl || !submitBtn || !feedbackEl || !foundListEl) return;
+
+  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
+  const loaded = Array.isArray(saved)
+    ? saved.filter((w) => typeof w === "string" && WORD_LIST.has(w.toLowerCase()))
+    : [];
+  const foundOrdered = [...new Set(loaded)];
+  const found = new Set(foundOrdered);
+  let totalScore = foundOrdered.reduce((sum, w) => sum + scoreWord(w), 0);
+
+  function setFeedback(text, success = false, error = false) {
+    feedbackEl.textContent = text;
+    feedbackEl.classList.toggle("bee-feedback--success", success);
+    feedbackEl.classList.toggle("bee-feedback--error", error);
+  }
+
+  function updateScore() {
+    const val = scoreEl.querySelector(".bee-score-value");
+    if (val) val.textContent = totalScore;
+  }
+
+  function saveFound() {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(foundOrdered));
+  }
+
+  function renderFoundWords() {
+    foundListEl.innerHTML = "";
+    const sorted = [...foundOrdered].sort((a, b) => a.localeCompare(b));
+    sorted.forEach((word) => {
+      const li = document.createElement("li");
+      li.textContent = word;
+      if (isPangram(word)) li.classList.add("bee-pangram");
+      foundListEl.appendChild(li);
+    });
+  }
+
+  function submitWord() {
+    const raw = inputEl.value;
+    const result = validate(raw);
+    if (!result.ok) {
+      setFeedback(result.message || strings.game.feedback.tryAgain, false, true);
+      inputEl.value = "";
+      return;
+    }
+    const { word } = result;
+    if (found.has(word)) {
+      setFeedback(strings.game.feedback.alreadyFound, false, true);
+      inputEl.value = "";
+      return;
+    }
+    foundOrdered.push(word);
+    found.add(word);
+    totalScore += scoreWord(word);
+    saveFound();
+    setFeedback(isPangram(word) ? strings.game.feedback.pangram : strings.game.feedback.good, true, false);
+    inputEl.value = "";
+    inputEl.focus();
+    updateScore();
+    renderFoundWords();
+  }
+
+  submitBtn.addEventListener("click", submitWord);
+  inputEl.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") submitWord();
+    else if (!e.ctrlKey && !e.metaKey && !e.altKey) {
+      const upper = (e.key || "").toUpperCase();
+      if (LETTERS.includes(upper)) {
+        const span = honeycombEl.querySelector(`[data-letter="${upper}"]`);
+        if (span) span.classList.add("bee-letter--typed-press");
+      }
+    }
+  });
+  inputEl.addEventListener("keyup", (e) => {
+    if (e.ctrlKey || e.metaKey || e.altKey) return;
+    const upper = (e.key || "").toUpperCase();
+    if (LETTERS.includes(upper)) {
+      const span = honeycombEl.querySelector(`[data-letter="${upper}"]`);
+      if (span) span.classList.remove("bee-letter--typed-press");
+    }
+  });
+
+  function appendLetter(letter) {
+    if (inputEl.value.length >= 15) return;
+    inputEl.value += letter.toLowerCase();
+    inputEl.focus();
+  }
+
+  honeycombEl.innerHTML = "";
+  const outer = LETTERS.filter((l) => l !== CENTER_LETTER);
+  const centerNode = document.createElement("span");
+  centerNode.className = "bee-letter bee-letter--center";
+  centerNode.textContent = CENTER_LETTER;
+  centerNode.setAttribute("aria-hidden", "true");
+  centerNode.setAttribute("data-letter", CENTER_LETTER);
+  centerNode.addEventListener("mousedown", () => focusRegion.focus());
+  centerNode.addEventListener("click", () => appendLetter(CENTER_LETTER));
+  honeycombEl.appendChild(centerNode);
+  outer.forEach((letter) => {
+    const span = document.createElement("span");
+    span.className = "bee-letter";
+    span.textContent = letter;
+    span.setAttribute("aria-hidden", "true");
+    span.setAttribute("data-letter", letter);
+    span.addEventListener("mousedown", () => focusRegion.focus());
+    span.addEventListener("click", () => appendLetter(letter));
+    honeycombEl.appendChild(span);
+  });
+
+  updateScore();
+  renderFoundWords();
+  setFeedback(strings.game.hint);
+}
+
+init();

package/template/src/kit/components/button.css

@@ -0,0 +1,53 @@
+/* Wireframe Kit – button component. Uses --wire-* tokens only. */
+
+.wire-button {
+  padding: var(--wire-space-md) var(--wire-space-xl);
+  font-family: inherit;
+  font-size: var(--wire-text-body);
+  font-weight: var(--wire-font-weight-bold);
+  color: var(--wire-text-primary);
+  background-color: var(--wire-surface);
+  border: var(--wire-border-width) solid var(--wire-border);
+  border-radius: var(--wire-radius-lg);
+  cursor: pointer;
+}
+
+.wire-button:hover {
+  background-color: var(--wire-surface-alt);
+  border-color: var(--wire-dark);
+}
+
+.wire-button:focus {
+  outline: none;
+  border-color: var(--wire-dark);
+}
+
+.wire-button:disabled {
+  color: var(--wire-text-muted);
+  background-color: var(--wire-surface-alt);
+  border-width: var(--wire-border-width);
+  border-color: var(--wire-border-light);
+  cursor: not-allowed;
+}
+
+/* Primary: use sparingly (e.g. one per view). */
+.wire-button--primary {
+  color: var(--wire-white);
+  background-color: var(--wire-dark);
+  border-color: var(--wire-dark);
+}
+
+.wire-button--primary:hover {
+  background-color: var(--wire-black);
+  border-color: var(--wire-black);
+}
+
+.wire-button--primary:focus {
+  border-color: var(--wire-black);
+}
+
+.wire-button--primary:disabled {
+  color: var(--wire-mid);
+  background-color: var(--wire-lighter);
+  border-color: var(--wire-lighter);
+}

package/template/src/kit/components/checkbox.css

@@ -0,0 +1,26 @@
+/* Wireframe Kit – checkbox component. Uses --wire-* tokens only. */
+
+.wire-checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--wire-space-sm);
+  cursor: pointer;
+  font-size: var(--wire-text-body);
+  color: var(--wire-text-primary);
+}
+
+.wire-checkbox input {
+  width: var(--wire-size-icon-md);
+  height: var(--wire-size-icon-md);
+  accent-color: var(--wire-dark);
+  cursor: pointer;
+}
+
+.wire-checkbox:has(input:disabled) {
+  color: var(--wire-text-muted);
+  cursor: not-allowed;
+}
+
+.wire-checkbox:has(input:disabled) input {
+  cursor: not-allowed;
+}

package/template/src/kit/components/field.css

@@ -0,0 +1,11 @@
+/* Wireframe Kit – field component. Wraps a label and control for consistent spacing. */
+
+.wire-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wire-space-2xs);
+}
+
+.wire-field .wire-label {
+  margin-block-end: 0;
+}