mevebu 1.2.0 → 1.4.0

package/mevebu/libs/js/tools/case-converter.js

@@ -25,15 +25,14 @@ const CASES = [
   ["snake_case", (words) => words.map((word) => word.toLowerCase()).join("_")],
   ["kebab-case", (words) => words.map((word) => word.toLowerCase()).join("-")],
   ["CONSTANT_CASE", (words) => words.map((word) => word.toUpperCase()).join("_")],
-  ["Train-Case", (words) => words.map(cap).join("-")],
-];
+  ["Train-Case", (words) => words.map(cap).join("-")]];
 
 export function mount(slot) {
   const PIN = "case-converter";
   const saved = readPin(PIN, { input: "Hello world from mevebu", active: "camelCase" });
 
   const source = textArea({ value: saved.input ?? "", rows: 4, "aria-label": "Text to convert", placeholder: "Type or paste text" });
-  const list = el("div", { class: "mvb-cases" });
+  const list = el("div", { class: "grid gap-1" });
   let active = CASES.some(([name]) => name === saved.active) ? saved.active : "camelCase";
 
   function convert() {
@@ -41,9 +40,10 @@ export function mount(slot) {
     for (const row of list.children) {
       const convertCase = CASES.find(([name]) => name === row.dataset.case)[1];
       const value = words.length ? convertCase(words) : "";
-      row.querySelector(".mvb-case__value").textContent = value;
+      row.querySelector("[data-value]").textContent = value;
       const on = row.dataset.case === active;
-      row.classList.toggle("mvb-on", on);
+      if (on) row.dataset.on = "";
+      else delete row.dataset.on;
       row.setAttribute("aria-pressed", String(on));
     }
     writePin(PIN, { input: source.value, active });
@@ -53,23 +53,22 @@ export function mount(slot) {
     const button = el(
       "button",
       {
-        class: "mvb-case", type: "button", dataset: { case: name }, "aria-pressed": String(name === active),
+        class: "group flex w-full cursor-pointer items-baseline justify-between gap-3 rounded-r1 border border-transparent bg-transparent px-3 py-[9px] text-start transition-colors duration-150 hover:bg-deck-2 data-[on]:border-jade data-[on]:bg-jade-soft", type: "button", dataset: { case: name }, "aria-pressed": String(name === active),
         onclick: async () => {
           active = name;
           convert();
-          const value = button.querySelector(".mvb-case__value").textContent.trim();
+          const value = button.querySelector("[data-value]").textContent.trim();
           if (value) toast((await copyText(value)) ? "Copied" : "Copy failed");
-        },
-      },
-      el("span", { class: "mvb-case__name" }, name),
-      el("span", { class: "mvb-case__value" })
+        }},
+      el("span", { class: "flex-none text-2xs font-semibold text-ink-2 group-data-[on]:text-ink" }, name),
+      el("span", { class: "wrap-anywhere text-end font-mono text-sm", dataset: { value: "" } })
     );
     list.append(button);
   }
 
   source.addEventListener("input", convert);
 
-  const card = toolcard({ body: stack(panel("Text", source), panel("Select a case to copy it", list)) });
+  const card = toolcard({ body: stack(panel("Text", source), panel("Cases", list)) });
   slot.append(card.node);
   convert();
 

package/mevebu/libs/js/tools/case-inspector.js

@@ -24,8 +24,7 @@ const CASES = [
   ["snake_case", (words) => words.map((word) => word.toLowerCase()).join("_")],
   ["kebab-case", (words) => words.map((word) => word.toLowerCase()).join("-")],
   ["CONSTANT_CASE", (words) => words.map((word) => word.toUpperCase()).join("_")],
-  ["Train-Case", (words) => words.map(cap).join("-")],
-];
+  ["Train-Case", (words) => words.map(cap).join("-")]];
 
 function detectCase(text) {
   const t = text.trim();
@@ -53,13 +52,13 @@ function detectCase(text) {
 
 export function mount(slot) {
   const source = textArea({ rows: 5, value: "helloWorld", "aria-label": "Text", placeholder: "Type or paste text" });
-  const detected = el("span", { class: "mvb-kv__v" }, "No letters");
+  const detected = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "No letters");
   const kv = el(
     "div",
-    { class: "mvb-kv" },
-    el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, "Detected case"), detected)
+    { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
+    el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, "Detected case"), detected)
   );
-  const list = el("div", { class: "mvb-cases" });
+  const list = el("div", { class: "grid gap-1" });
   let active = "No letters";
 
   function detectedValue() {
@@ -73,9 +72,10 @@ export function mount(slot) {
     detected.textContent = active;
     for (const row of list.children) {
       const convert = CASES.find(([name]) => name === row.dataset.case)[1];
-      row.querySelector(".mvb-case__value").textContent = words.length ? convert(words) : "";
+      row.querySelector("[data-value]").textContent = words.length ? convert(words) : "";
       const on = row.dataset.case === active;
-      row.classList.toggle("mvb-on", on);
+      if (on) row.dataset.on = "";
+      else delete row.dataset.on;
       row.setAttribute("aria-pressed", String(on));
     }
   }
@@ -84,14 +84,13 @@ export function mount(slot) {
     const button = el(
       "button",
       {
-        class: "mvb-case", type: "button", dataset: { case: name }, "aria-pressed": "false",
+        class: "group flex w-full cursor-pointer items-baseline justify-between gap-3 rounded-r1 border border-transparent bg-transparent px-3 py-[9px] text-start transition-colors duration-150 hover:bg-deck-2 data-[on]:border-jade data-[on]:bg-jade-soft", type: "button", dataset: { case: name }, "aria-pressed": "false",
         onclick: async () => {
-          const value = button.querySelector(".mvb-case__value").textContent.trim();
+          const value = button.querySelector("[data-value]").textContent.trim();
           if (value) toast((await copyText(value)) ? "Copied" : "Copy failed");
-        },
-      },
-      el("span", { class: "mvb-case__name" }, name),
-      el("span", { class: "mvb-case__value" })
+        }},
+      el("span", { class: "flex-none text-2xs font-semibold text-ink-2 group-data-[on]:text-ink" }, name),
+      el("span", { class: "wrap-anywhere text-end font-mono text-sm", dataset: { value: "" } })
     );
     list.append(button);
   }
@@ -103,8 +102,7 @@ export function mount(slot) {
       stack(panel("Text", source)),
       stack(kv, panel("Cases", list))
     ),
-    foot: actions(copyButton(detectedValue, "Copy detected", "fill")),
-  });
+    foot: actions(copyButton(detectedValue, "Copy detected", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/cash-denomination.js

@@ -12,14 +12,14 @@ export function mount(slot) {
   const saved = readPin(PIN, {});
   const counts = new Map();
 
-  const listWrap = el("div", { class: "mvb-scroll" });
-  const stats = el("div", { class: "mvb-stats" });
+  const listWrap = el("div", { class: "max-h-80 overflow-auto" });
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" });
   const note = notice("note");
   note.write("Values are generic. Match them to your currency.");
 
-  const tile = (key, value) => el("div", { class: "mvb-stat" },
-    el("span", { class: "mvb-stat__v" }, String(value)),
-    el("span", { class: "mvb-stat__k" }, key));
+  const tile = (key, value) => el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+    el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, String(value)),
+    el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
 
   const readCount = (value) => {
     const input = counts.get(value);
@@ -40,7 +40,7 @@ export function mount(slot) {
       el("th", {}, fmt(value)),
       el("td", {}, fmt(readCount(value))),
       el("td", {}, fmt(value * readCount(value)))));
-    listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+    listWrap.replaceChildren(el("table", { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
       el("thead", {}, el("tr", {}, el("th", {}, "Value"), el("th", {}, "Count"), el("th", {}, "Subtotal"))),
       el("tbody", {}, ...rows)));
     const pieces = DENOMINATIONS.reduce((sum, value) => sum + readCount(value), 0);
@@ -63,8 +63,7 @@ export function mount(slot) {
       () => DENOMINATIONS.map((value) => `${fmt(value)} x ${readCount(value)} = ${fmt(value * readCount(value))}`).join("\n"),
       "Copy count",
       "fill"
-    )),
-  });
+    ))});
   slot.append(card.node);
   render();
 

package/mevebu/libs/js/tools/cash-flow.js

@@ -20,15 +20,15 @@ export function mount(slot) {
     [{ value: "in", label: "In" }, { value: "out", label: "Out" }],
     { value: "in", label: "Direction", onChange: (next) => { type = next; } }
   );
-  const listWrap = el("div", { class: "mvb-scroll" });
-  const stats = el("div", { class: "mvb-stats" });
+  const listWrap = el("div", { class: "max-h-80 overflow-auto" });
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" });
 
   const addButton = button("Add", { icon: "plus", kind: "fill" });
 
   const save = () => writePin(PIN, { opening: Number(opening.value) || 0, entries });
-  const tile = (key, value) => el("div", { class: "mvb-stat" },
-    el("span", { class: "mvb-stat__v" }, String(value)),
-    el("span", { class: "mvb-stat__k" }, key));
+  const tile = (key, value) => el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+    el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, String(value)),
+    el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
 
   function totals() {
     let balance = Number(opening.value) || 0;
@@ -69,7 +69,7 @@ export function mount(slot) {
           el("td", {}, fmt(balance)),
           el("td", {}, removeButton(entry)));
       });
-      listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+      listWrap.replaceChildren(el("table", { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
         el("thead", {}, el("tr", {}, el("th", {}, "Label"), el("th", {}, "In"), el("th", {}, "Out"), el("th", {}, "Balance"), el("th", {}, ""))),
         el("tbody", {}, ...rows)));
     }
@@ -113,8 +113,7 @@ export function mount(slot) {
       copyButton(() => totals().lines.join("\n"), "Copy summary"),
       downloadButton(() => csv(), "cash-flow.csv", "Save CSV", "text/csv"),
       addButton
-    ),
-  });
+    )});
   slot.append(card.node);
   render();
 

package/mevebu/libs/js/tools/cert-expiry.js

@@ -5,8 +5,8 @@ const DAY = 86400000;
 const pad = (value) => String(value).padStart(2, "0");
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "-");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
@@ -16,14 +16,13 @@ export function mount(slot) {
   const dateField = textInput({
     type: "date",
     value: `${soon.getFullYear()}-${pad(soon.getMonth() + 1)}-${pad(soon.getDate())}`,
-    "aria-label": "Expiry date",
-  });
+    "aria-label": "Expiry date"});
   const warnField = numberInput({ min: "1", max: "365", value: "30", "aria-label": "Warn threshold in days" });
 
   const daysTile = tile("Days left");
   const weeksTile = tile("Weeks left");
   const statusTile = tile("Status");
-  const stats = el("div", { class: "mvb-stats" }, daysTile, weeksTile, statusTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, daysTile, weeksTile, statusTile);
   const status = notice("note");
   const error = notice("error");
   let summary = "";
@@ -53,8 +52,7 @@ export function mount(slot) {
 
     if (days < 0) status.write(`Expired ${Math.abs(days)} days ago.`);
     else if (days === 0) status.write("Expires today.");
-    else if (days <= threshold) status.write(`Expires in ${days} days, within the ${threshold} day warning window.`);
-    else status.write(`Expires in ${days} days.`);
+    else if (days <= threshold) status.write(`Inside the ${threshold} day warning window.`);
 
     summary = `Expires ${expiry.toLocaleDateString()}, ${days} days left, ${state}.`;
   }
@@ -67,13 +65,11 @@ export function mount(slot) {
       stack(
         panel("Expiry date", dateField),
         panel("Warn within days", warnField),
-        el("p", { class: "mvb-note" }, "The date stays in this tab."),
         error
       ),
       stack(stats, status)
     ),
-    foot: actions(copyButton(() => summary, "Copy summary", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy summary", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/changelog-generator.js

@@ -5,12 +5,11 @@ const GROUPS = [
   { key: "added", label: "Added" },
   { key: "changed", label: "Changed" },
   { key: "fixed", label: "Fixed" },
-  { key: "removed", label: "Removed" },
-];
+  { key: "removed", label: "Removed" }];
 
 export function mount(slot) {
-  const version = textInput({ value: "1.0.0", class: "mvb-in mvb-in--mono", "aria-label": "Version" });
-  const date = el("input", { class: "mvb-in", type: "date", value: new Date().toISOString().slice(0, 10), "aria-label": "Date" });
+  const version = textInput({ value: "1.0.0", mono: true, "aria-label": "Version" });
+  const date = el("input", { class: "min-w-0 rounded-r1 border border-orbit bg-deck text-ink transition-[border-color,box-shadow] duration-150 placeholder:text-ink-3 hover:border-orbit-hard focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft w-full min-h-[var(--ctl)] px-3 py-2.5 text-base", type: "date", value: new Date().toISOString().slice(0, 10), "aria-label": "Date" });
   const fields = GROUPS.map((group) => ({ ...group, area: textArea({ rows: 3, "aria-label": group.label }) }));
   const out = output({ rows: 16 });
   let text = "";
@@ -37,8 +36,7 @@ export function mount(slot) {
       stack(panel("Version", version), panel("Date", date), ...fields.map((group) => panel(group.label, group.area))),
       stack(panel("Changelog", out))
     ),
-    foot: actions(copyButton(() => text, "Copy Markdown", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy Markdown", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/character-counter.js

@@ -6,8 +6,8 @@ const chars = (text) => [...text].length;
 const withoutSpaces = (text) => [...text.replace(/\s/g, "")].length;
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "0");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
@@ -19,11 +19,11 @@ export function mount(slot) {
   const totalTile = tile("Characters");
   const noSpaceTile = tile("Without spaces");
   const wordsTile = tile("Words");
-  const stats = el("div", { class: "mvb-stats" }, totalTile, noSpaceTile, wordsTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, totalTile, noSpaceTile, wordsTile);
 
-  const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Character limit" }, el("div", { class: "mvb-meter__fill" }));
+  const meter = el("div", { class: "h-2 overflow-hidden rounded-full bg-deck-2", role: "img", "aria-label": "Character limit" }, el("div", { class: "h-full w-0 rounded-full bg-orbit-hard transition-[width,background-color] duration-150 data-[level=weak]:bg-danger data-[level=ok]:bg-star data-[level=strong]:bg-jade" }));
   const limitNote = notice("note");
-  const fill = meter.querySelector(".mvb-meter__fill");
+  const fill = meter.firstElementChild;
 
   let counts = { total: 0, noSpace: 0, words: 0 };
 
@@ -31,8 +31,7 @@ export function mount(slot) {
     return [
       `${counts.total} characters`,
       `${counts.noSpace} without spaces`,
-      `${counts.words} words`,
-    ].join("\n");
+      `${counts.words} words`].join("\n");
   }
 
   function run() {
@@ -40,8 +39,7 @@ export function mount(slot) {
     counts = {
       total: chars(text),
       noSpace: withoutSpaces(text),
-      words: text.trim() ? text.trim().split(/\s+/).length : 0,
-    };
+      words: text.trim() ? text.trim().split(/\s+/).length : 0};
     totalTile.set(String(counts.total));
     noSpaceTile.set(String(counts.noSpace));
     wordsTile.set(String(counts.words));
@@ -50,11 +48,11 @@ export function mount(slot) {
     if (limit > 0) {
       const ratio = counts.total / limit;
       fill.style.width = `${Math.min(100, ratio * 100)}%`;
-      fill.className = `mvb-meter__fill ${ratio > 1 ? "mvb-weak" : ratio > 0.8 ? "mvb-ok" : "mvb-strong"}`;
+      fill.dataset.level = ratio > 1 ? "weak" : ratio > 0.8 ? "ok" : "strong";
       limitNote.write(ratio > 1 ? `${counts.total - limit} over the limit.` : `${limit - counts.total} characters left.`);
     } else {
       fill.style.width = "0%";
-      fill.className = "mvb-meter__fill";
+      delete fill.dataset.level;
       limitNote.write("");
     }
   }
@@ -69,8 +67,7 @@ export function mount(slot) {
       stack(panel("Text", source), panel("Character limit", limitField)),
       stack(stats, meter, limitNote)
     ),
-    foot: actions(clearButton, copyButton(summary, "Copy summary", "fill")),
-  });
+    foot: actions(clearButton, copyButton(summary, "Copy summary", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/checklist.js

@@ -9,16 +9,16 @@ export function mount(slot) {
   let list = Array.isArray(saved) ? saved : [];
 
   const entry = textInput({ placeholder: "New item", "aria-label": "New item" });
-  const listWrap = el("div", { class: "mvb-scroll" });
-  const stats = el("div", { class: "mvb-stats" });
+  const listWrap = el("div", { class: "max-h-80 overflow-auto" });
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" });
 
   const addButton = button("Add", { icon: "plus", kind: "fill" });
   const clearDone = button("Clear finished", { icon: "trash" });
   const copyList = copyButton(() => listText(), "Copy list");
 
-  const tile = (key, value) => el("div", { class: "mvb-stat" },
-    el("span", { class: "mvb-stat__v" }, String(value)),
-    el("span", { class: "mvb-stat__k" }, key));
+  const tile = (key, value) => el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+    el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, String(value)),
+    el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
 
   const save = () => writePin(PIN, list);
 
@@ -75,8 +75,7 @@ export function mount(slot) {
       stack(panel("New item", entry)),
       stack(stats, panel("Items", listWrap))
     ),
-    foot: actions(copyList, clearDone, addButton),
-  });
+    foot: actions(copyList, clearDone, addButton)});
   slot.append(card.node);
   renderList();
 

package/mevebu/libs/js/tools/citation-number-check.js

@@ -2,8 +2,8 @@
 import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "0");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
@@ -47,8 +47,8 @@ export function mount(slot) {
   const refsTile = tile("References");
   const missingTile = tile("Missing");
   const unusedTile = tile("Unused");
-  const stats = el("div", { class: "mvb-stats" }, citedTile, refsTile, missingTile, unusedTile);
-  const tableWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, citedTile, refsTile, missingTile, unusedTile);
+  const tableWrap = el("div", { class: "max-h-80 overflow-auto" });
   const note = notice("note");
   note.write("A number match does not prove the reference is correct.");
   let report = "";
@@ -66,14 +66,13 @@ export function mount(slot) {
 
     const rows = [
       ...missing.map((n) => [n, "Cited, no reference"]),
-      ...unused.map((n) => [n, "Reference, not cited"]),
-    ];
+      ...unused.map((n) => [n, "Reference, not cited"])];
     if (!body.value.trim() && !list.value.trim()) {
-      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "Paste the text and the reference list."));
+      tableWrap.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Paste the text and the reference list."));
     } else if (!rows.length) {
-      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "Every number matches."));
+      tableWrap.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Every number matches."));
     } else {
-      tableWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+      tableWrap.replaceChildren(el("table", { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
         el("thead", {}, el("tr", {}, el("th", {}, "Number"), el("th", {}, "Problem"))),
         el("tbody", {}, ...rows.map((row) => el("tr", {},
           el("th", {}, String(row[0])),
@@ -84,8 +83,7 @@ export function mount(slot) {
 
     report = [
       ...missing.map((n) => `${n}: cited, no reference`),
-      ...unused.map((n) => `${n}: reference, not cited`),
-    ].join("\n");
+      ...unused.map((n) => `${n}: reference, not cited`)].join("\n");
   }
 
   body.addEventListener("input", run);
@@ -96,8 +94,7 @@ export function mount(slot) {
       stack(panel("Text with citations", body), panel("Reference list", list), note),
       stack(stats, panel("Problems", tableWrap))
     ),
-    foot: actions(copyButton(() => report, "Copy problems", "fill")),
-  });
+    foot: actions(copyButton(() => report, "Copy problems", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/coin-flip.js

@@ -7,8 +7,8 @@ const TOSS_MS = 400;
 
 /** A tally tile. The value is the node the tool writes to. */
 function tile(key) {
-  const value = el("span", { class: "mvb-stat__v" }, "0");
-  const row = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, key));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const row = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
   return { row, value };
 }
 
@@ -19,12 +19,12 @@ export function mount(slot) {
   let tails = Number(saved.tails) || 0;
   let timer = 0;
 
-  const coin = el("div", { class: "mvb-coin", role: "img", "aria-label": "Coin, not flipped yet" }, "?");
-  const verdict = el("p", { class: "mvb-flip__result min-h-7", "aria-live": "polite" });
+  const coin = el("div", { class: "grid size-32 select-none place-items-center rounded-full bg-jade text-display font-bold text-on-jade data-[toss]:animate-toss", role: "img", "aria-label": "Coin, not flipped yet" }, "?");
+  const verdict = el("p", { class: "text-lg font-bold tracking-[-0.01em] min-h-7", "aria-live": "polite" });
   const headsTile = tile("Heads");
   const tailsTile = tile("Tails");
   const totalTile = tile("Total");
-  const stats = el("div", { class: "mvb-stats" }, headsTile.row, tailsTile.row, totalTile.row);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, headsTile.row, tailsTile.row, totalTile.row);
 
   function render(decision) {
     verdict.textContent = decision;
@@ -40,9 +40,9 @@ export function mount(slot) {
 
   flipButton.addEventListener("click", () => {
     clearTimeout(timer);
-    coin.classList.remove("mvb-toss");
+    delete coin.dataset.toss;
     void coin.offsetWidth;
-    coin.classList.add("mvb-toss");
+    coin.dataset.toss = "";
     timer = setTimeout(() => {
       const isHeads = randomInt(2) === 0;
       if (isHeads) heads++;
@@ -65,16 +65,14 @@ export function mount(slot) {
       stack(panel("Coin", coin)),
       stack(panel("Result", verdict), stats)
     ),
-    foot: actions(resetButton, flipButton),
-  });
+    foot: actions(resetButton, flipButton)});
   slot.append(card.node);
   render("");
 
   return {
     unmount() {
       clearTimeout(timer);
-    },
-  };
+    }};
 }
 
 export default { mount };

package/mevebu/libs/js/tools/color-converter.js

@@ -70,12 +70,12 @@ function luminance({ r, g, b }) {
 }
 
 export function mount(slot) {
-  const anyField = textInput({ value: "#F5B942", class: "mvb-in mvb-in--mono", "aria-label": "Any color" });
+  const anyField = textInput({ value: "#F5B942", mono: true, "aria-label": "Any color" });
   const picker = colorInput({ value: "#f5b942", "aria-label": "Pick a color" });
-  const swatch = el("div", { class: "mvb-swatch" });
+  const swatch = el("div", { class: "h-14 rounded-r1 border border-orbit-hard bg-deck-2" });
 
   const readonly = (label) => {
-    const field = textInput({ readonly: true, class: "mvb-in mvb-in--mono", "aria-label": `${label}, press to copy` });
+    const field = textInput({ readonly: true, mono: true, "aria-label": `${label}, press to copy` });
     const wrap = panel(label, field);
     wrap.style.cursor = "pointer";
     wrap.addEventListener("click", async () => {
@@ -91,14 +91,16 @@ export function mount(slot) {
   const cssField = readonly("CSS variable");
 
   const error = notice("error");
-  const reading = el("p", { class: "mvb-note" });
+  const reading = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
 
-  function show(color, keepPicker) {
+  // `from` names the control the value came from. The text field is never
+  // rewritten while it is being typed into: "#abc" is valid shorthand one
+  // keystroke before it is valid six digit hex, so echoing the expanded form
+  // back would wipe out the rest of what was being typed.
+  function show(color, from) {
     const hex = hexOf(color);
-    if (!keepPicker) {
-      anyField.value = hex.toUpperCase();
-      picker.value = hex;
-    }
+    if (from !== "text") anyField.value = hex.toUpperCase();
+    picker.value = hex;
     hexField.querySelector("input").value = hex.toUpperCase();
     const { h, s, l } = hslOf(color);
     rgbField.querySelector("input").value = color.a < 1
@@ -113,32 +115,36 @@ export function mount(slot) {
     reading.textContent = `Contrast ${onWhite}:1 on white, ${onBlack}:1 on black.${Number(onWhite) >= 4.5 ? "" : " Low on white."}${Number(onBlack) >= 4.5 ? "" : " Low on black."}`;
   }
 
-  function read(text, keepPicker) {
+  function read(text, from) {
+    // An empty field is not a mistake, it is someone clearing it to start over.
+    if (!text.trim()) {
+      error.write("");
+      return;
+    }
     const color = parse(text);
     if (!color) {
       error.write("That color was not recognized.");
       return;
     }
     error.write("");
-    show(color, keepPicker);
+    show(color, from);
   }
 
-  anyField.addEventListener("input", () => read(anyField.value, false));
-  picker.addEventListener("input", () => read(picker.value, true));
+  anyField.addEventListener("input", () => read(anyField.value, "text"));
+  picker.addEventListener("input", () => read(picker.value, "picker"));
 
   const card = toolcard({
     body: bench(
       stack(
-        panel("Color", el("div", { class: "mvb-row" }, picker, anyField)),
+        panel("Color", el("div", { class: "flex min-w-0 flex-wrap items-center gap-2" }, picker, anyField)),
         error,
         panel(null, swatch),
         reading
       ),
       stack(hexField, rgbField, hslField, cssField)
-    ),
-  });
+    )});
   slot.append(card.node);
-  read("#F5B942", false);
+  read("#F5B942", "init");
 
   return {};
 }

package/mevebu/libs/js/tools/color-palette.js

@@ -59,7 +59,7 @@ function palette(hex, scheme) {
 
 export function mount(slot) {
   const picker = colorInput({ value: "#f5b942", "aria-label": "Base color" });
-  const swatches = el("div", { class: "mvb-swatches" });
+  const swatches = el("div", { class: "grid gap-2 [grid-template-columns:repeat(auto-fit,minmax(96px,1fr))]" });
   let colors = [];
   let scheme = "analogous";
 
@@ -67,8 +67,7 @@ export function mount(slot) {
     [
       { value: "analogous", label: "Analogous" },
       { value: "complementary", label: "Complementary" },
-      { value: "monochrome", label: "Monochrome" },
-    ],
+      { value: "monochrome", label: "Monochrome" }],
     { value: scheme, label: "Scheme", onChange: (value) => { scheme = value; paint(); } }
   );
 
@@ -82,9 +81,9 @@ export function mount(slot) {
       ...colors.map((hex) =>
         el(
           "button",
-          { class: "mvb-swatchcard", type: "button", onclick: () => copyOne(hex) },
-          el("span", { class: "mvb-swatchcard__chip", style: `background:${hex}` }),
-          el("span", { class: "mvb-swatchcard__code" }, hex)
+          { class: "grid cursor-pointer gap-1.5 rounded-r1 border border-orbit bg-deck p-2 text-start transition-colors duration-150 hover:border-jade", type: "button", onclick: () => copyOne(hex) },
+          el("span", { class: "h-[52px] rounded-lg border border-orbit-hard", style: `background:${hex}` }),
+          el("span", { class: "font-mono text-2xs text-ink-2" }, hex)
         )
       )
     );
@@ -99,8 +98,7 @@ export function mount(slot) {
     ),
     foot: actions(
       copyButton(() => colors.map((hex, i) => `--color-${i + 1}: ${hex};`).join("\n"), "Copy CSS variables", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   paint();