mevebu 1.3.0 → 1.4.1

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 = "";
@@ -70,8 +69,7 @@ export function mount(slot) {
       ),
       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,7 +91,7 @@ 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" });
 
   // `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
@@ -136,14 +136,13 @@ export function mount(slot) {
   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", "init");
 

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();
 

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

@@ -32,13 +32,13 @@ function toHsl({ r, g, b }) {
 
 export function mount(slot) {
   const picker = colorInput({ value: "#f5b942", "aria-label": "Pick a color" });
-  const hexInput = textInput({ value: "#F5B942", class: "mvb-in mvb-in--mono", "aria-label": "Hex value" });
-  const swatch = el("div", { class: "mvb-swatch" });
+  const hexInput = textInput({ value: "#F5B942", mono: true, "aria-label": "Hex value" });
+  const swatch = el("div", { class: "h-14 rounded-r1 border border-orbit-hard bg-deck-2" });
   const error = notice("error");
   let current = "#f5b942";
 
   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 () => {
@@ -82,8 +82,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => `--color: ${current};`, "Copy CSS"),
       copyButton(() => current, "Copy hex", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   read("#F5B942", false);
 

package/mevebu/libs/js/tools/content-calendar.js

@@ -19,7 +19,7 @@ export function mount(slot) {
     { value: "Idea", label: "Status", onChange: (next) => { status = next; } }
   );
 
-  const listWrap = el("div", { class: "mvb-scroll" });
+  const listWrap = el("div", { class: "max-h-80 overflow-auto" });
   const addButton = button("Add", { icon: "plus", kind: "fill" });
 
   const save = () => writePin(PIN, { entries });
@@ -46,7 +46,7 @@ export function mount(slot) {
       el("td", {}, entry.platform || ""),
       el("td", {}, entry.status),
       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", {}, "Date"), el("th", {}, "Topic"), el("th", {}, "Platform"), el("th", {}, "Status"), el("th", {}, ""))),
       el("tbody", {}, ...rows)));
@@ -100,8 +100,7 @@ export function mount(slot) {
       downloadButton(() => csv(), "content-calendar.csv", "Save CSV", "text/csv"),
       downloadButton(() => markdown(), "content-calendar.md", "Save Markdown", "text/markdown"),
       addButton
-    ),
-  });
+    )});
   slot.append(card.node);
   render();
 

package/mevebu/libs/js/tools/contrast-checker.js

@@ -31,19 +31,19 @@ export function mount(slot) {
   const bgPicker = colorInput({ value: "#ffffff", "aria-label": "Background color" });
 
   const kvRow = (key) => {
-    const value = el("span", { class: "mvb-kv__v" }, "-");
-    return { v: value, node: el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), value) };
+    const value = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+    return { v: value, node: 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" }, key), value) };
   };
   const ratioRow = kvRow("Contrast ratio");
   const normalAA = kvRow("Normal text AA");
   const normalAAA = kvRow("Normal text AAA");
   const largeAA = kvRow("Large text AA");
   const largeAAA = kvRow("Large text AAA");
-  const list = el("div", { class: "mvb-kv" }, ratioRow.node, normalAA.node, normalAAA.node, largeAA.node, largeAAA.node);
+  const list = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" }, ratioRow.node, normalAA.node, normalAAA.node, largeAA.node, largeAAA.node);
 
   const sample = el(
     "div",
-    { class: "mvb-preview__sample" },
+    { class: "w-full rounded-lg border border-orbit bg-deck px-[18px] py-4" },
     el("p", { style: "margin:0 0 8px;font-size:20px;font-weight:700" }, "Large text sample"),
     el("p", { style: "margin:0;font-size:15px" }, "Normal text sample for the contrast reading.")
   );
@@ -82,8 +82,7 @@ export function mount(slot) {
       stack(panel("Text color", textPicker), panel("Background color", bgPicker)),
       stack(sample, list)
     ),
-    foot: actions(swap, copyButton(() => reading, "Copy result", "fill")),
-  });
+    foot: actions(swap, copyButton(() => reading, "Copy result", "fill"))});
   slot.append(card.node);
   update();
 

package/mevebu/libs/js/tools/cron-builder.js

@@ -38,8 +38,7 @@ const FIELDS = [
   ["hour", "Hour", "0-23", "*"],
   ["day", "Day of month", "1-31", "*"],
   ["month", "Month", "1-12", "*"],
-  ["weekday", "Day of week", "0-6", "*"],
-];
+  ["weekday", "Day of week", "0-6", "*"]];
 
 export function mount(slot) {
   const inputs = {};
@@ -49,8 +48,8 @@ export function mount(slot) {
     return panel(label, input, hint);
   });
 
-  const expression = textInput({ readonly: true, class: "mvb-in mvb-in--mono", "aria-label": "Cron expression" });
-  const reading = el("p", { class: "mvb-note" });
+  const expression = textInput({ readonly: true, mono: true, "aria-label": "Cron expression" });
+  const reading = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
   const error = notice("error");
 
   function run() {
@@ -80,8 +79,7 @@ export function mount(slot) {
       stack(...controls, error),
       stack(panel("Expression", expression), panel("Reading", reading))
     ),
-    foot: actions(reset, copyButton(() => expression.value, "Copy expression", "fill")),
-  });
+    foot: actions(reset, copyButton(() => expression.value, "Copy expression", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/css-clamp.js

@@ -3,11 +3,11 @@ import { el, bench, stack, rangeInput, output, copyButton, actions, toolcard } f
 
 function slider(label, { min, max, step, value, unit }) {
   const input = rangeInput({ min, max, step, value, "aria-label": label });
-  const val = el("span", { class: "mvb-slider__val" }, `${value}${unit}`);
+  const val = el("span", { class: "text-end font-mono text-2xs text-ink-2" }, `${value}${unit}`);
   const node = el(
     "div",
-    { class: "mvb-slider" },
-    el("span", { class: "mvb-slider__label" }, label),
+    { class: "grid items-center gap-2.5 [grid-template-columns:88px_minmax(0,1fr)_62px] max-[45rem]:[grid-template-columns:minmax(0,1fr)_62px]" },
+    el("span", { class: "text-2xs font-semibold text-ink-2 max-[45rem]:col-span-2" }, label),
     input,
     val
   );
@@ -24,7 +24,7 @@ export function mount(slot) {
 
   const sample = el(
     "div",
-    { class: "mvb-preview__sample" },
+    { class: "w-full rounded-lg border border-orbit bg-deck px-[18px] py-4" },
     el("p", { style: "margin:0" }, "The quick brown fox jumps over the lazy dog.")
   );
   const code = output();
@@ -55,8 +55,7 @@ export function mount(slot) {
       stack(min, preferred, max),
       stack(sample, code)
     ),
-    foot: actions(copyButton(() => `font-size: ${clampValue()};`, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(() => `font-size: ${clampValue()};`, "Copy CSS", "fill"))});
   slot.append(card.node);
   update();