mevebu 1.3.0 → 1.4.1

package/mevebu/libs/js/tools/add-subtract-days.js

@@ -5,8 +5,7 @@ const UNITS = [
   { value: "days", label: "Days" },
   { value: "weeks", label: "Weeks" },
   { value: "months", label: "Months" },
-  { value: "years", label: "Years" },
-];
+  { value: "years", label: "Years" }];
 
 const pad = (n) => String(n).padStart(2, "0");
 
@@ -24,7 +23,7 @@ function parseDate(value) {
 const iso = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  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), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const date = textInput({ type: "date", value: "2026-01-01", "aria-label": "Start date" });
@@ -35,12 +34,12 @@ export function mount(slot) {
     [{ value: "add", label: "Add" }, { value: "subtract", label: "Subtract" }],
     { value: "add", label: "Direction", onChange: (value) => { mode = value; run(); } }
   );
-  const result = el("span", { class: "mvb-stat__v" }, "-");
-  const tile = el("div", { class: "mvb-stat" }, result, el("span", { class: "mvb-stat__k" }, "Result"));
-  const stats = el("div", { class: "mvb-stats" }, tile);
-  const isoOut = el("span", { class: "mvb-kv__v" }, "-");
-  const weekday = el("span", { class: "mvb-kv__v" }, "-");
-  const kv = el("div", { class: "mvb-kv" }, kvRow("ISO date", isoOut), kvRow("Weekday", weekday));
+  const result = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const tile = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, result, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Result"));
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, tile);
+  const isoOut = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const weekday = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const kv = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" }, kvRow("ISO date", isoOut), kvRow("Weekday", weekday));
   const error = notice("error");
   let text = "";
 
@@ -94,8 +93,7 @@ export function mount(slot) {
       ),
       stack(stats, panel("Result", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/age-calculator.js

@@ -32,20 +32,20 @@ function calendarDiff(from, to) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  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), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const today = new Date();
   const birth = textInput({ type: "date", value: "1990-01-01", "aria-label": "Birth date" });
   const at = textInput({ type: "date", value: `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`, "aria-label": "Age at date" });
 
-  const age = el("span", { class: "mvb-kv__v" }, "-");
-  const totalDays = el("span", { class: "mvb-kv__v" }, "-");
-  const nextDate = el("span", { class: "mvb-kv__v" }, "-");
-  const nextIn = el("span", { class: "mvb-kv__v" }, "-");
+  const age = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const totalDays = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const nextDate = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const nextIn = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
   const kv = el(
     "div",
-    { class: "mvb-kv" },
+    { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
     kvRow("Age", age),
     kvRow("Total days", totalDays),
     kvRow("Next birthday", nextDate),
@@ -97,8 +97,7 @@ export function mount(slot) {
       stack(panel("Birth date", birth), panel("Age at", at), error),
       stack(panel("Result", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy age", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy age", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/api-request-builder.js

@@ -36,8 +36,8 @@ function build(method, url, headers, body) {
 export function mount(slot) {
   const methodSelect = selectInput(METHODS, { value: "GET", "aria-label": "Method" });
   const urlInput = textInput({ value: "https://api.example.com/users", "aria-label": "URL", spellcheck: "false" });
-  const headerInput = textArea({ rows: 5, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Headers", placeholder: "Content-Type: application/json", value: "Accept: application/json" });
-  const bodyInput = textArea({ rows: 6, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Body", placeholder: '{"name":"Ada"}', value: '{\n  "name": "Ada"\n}' });
+  const headerInput = textArea({ rows: 5, "aria-label": "Headers", placeholder: "Content-Type: application/json", value: "Accept: application/json" });
+  const bodyInput = textArea({ rows: 6, "aria-label": "Body", placeholder: '{"name":"Ada"}', value: '{\n  "name": "Ada"\n}' });
   const result = output({ rows: 14 });
   const hint = notice("note");
 
@@ -65,8 +65,7 @@ export function mount(slot) {
       ),
       stack(panel("fetch", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy snippet", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy snippet", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -10,8 +10,7 @@ const UNITS = [
   { value: "in2", label: "Square inch", factor: 0.00064516 },
   { value: "ft2", label: "Square foot", factor: 0.09290304 },
   { value: "yd2", label: "Square yard", factor: 0.83612736 },
-  { value: "acre", label: "Acre", factor: 4046.8564224 },
-];
+  { value: "acre", label: "Acre", factor: 4046.8564224 }];
 
 const byId = Object.fromEntries(UNITS.map((unit) => [unit.value, unit]));
 const options = UNITS.map(({ value, label }) => ({ value, label }));
@@ -28,11 +27,11 @@ export function mount(slot) {
   const value = numberInput({ value: "1", step: "any", "aria-label": "Value" });
   const from = selectInput(options, { value: "m2", "aria-label": "From unit" });
   const to = selectInput(options, { value: "ft2", "aria-label": "To unit" });
-  const result = el("span", { class: "mvb-stat__v" }, "-");
-  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "Result"), result));
-  const factor = el("p", { class: "mvb-note" });
+  const result = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Result"), result));
+  const factor = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
   const error = notice("error");
-  const scroll = el("div", { class: "mvb-scroll" });
+  const scroll = el("div", { class: "max-h-80 overflow-auto" });
   let text = "";
 
   function run() {
@@ -52,7 +51,7 @@ export function mount(slot) {
     const out = (n * a.factor) / b.factor;
     result.textContent = `${fmt(out)} ${b.value}`;
     factor.textContent = `1 ${a.value} = ${fmt(a.factor / b.factor)} ${b.value}`;
-    scroll.replaceChildren(el("table", { class: "mvb-ttable" },
+    scroll.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", {}, "Unit"), el("th", {}, "Value"))),
       el("tbody", {}, ...UNITS.map((unit) => el("tr", {},
         el("td", {}, unit.label),
@@ -76,8 +75,7 @@ export function mount(slot) {
       stack(panel("Value", value), panel("From", from), panel("To", to), error),
       stack(panel("Result", stats), factor, panel("All units", scroll))
     ),
-    foot: actions(swap, copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(swap, copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/aspect-ratio.js

@@ -8,18 +8,18 @@ export function mount(slot) {
   const width = numberInput({ value: 1920, min: "1", "aria-label": "Width" });
   const height = numberInput({ value: 1080, min: "1", "aria-label": "Height" });
 
-  const ratioValue = el("span", { class: "mvb-kv__v" }, "-");
-  const decimalValue = el("span", { class: "mvb-kv__v" }, "-");
+  const ratioValue = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const decimalValue = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
   const list = el(
     "div",
-    { class: "mvb-kv" },
-    el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, "Ratio"), ratioValue),
-    el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, "Decimal"), decimalValue)
+    { 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" }, "Ratio"), ratioValue),
+    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" }, "Decimal"), decimalValue)
   );
 
   const newWidth = numberInput({ value: 800, min: "1", "aria-label": "New width" });
   const newHeight = numberInput({ value: 450, min: "1", "aria-label": "New height" });
-  const box = el("div", { class: "mvb-preview__box" });
+  const box = el("div", { class: "grid h-[120px] w-[min(200px,100%)] place-items-center bg-jade text-2xs text-on-jade" });
   const code = output();
   let ratioText = "16 / 9";
 
@@ -68,10 +68,9 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(panel("Width", width), panel("Height", height), list),
-      stack(el("div", { class: "mvb-preview" }, box), panel("New width", newWidth), panel("New height", newHeight), code)
+      stack(el("div", { class: "grid min-h-40 place-items-center overflow-hidden rounded-r1 border border-orbit bg-deck-2 p-[22px]" }, box), panel("New width", newWidth), panel("New height", newHeight), code)
     ),
-    foot: actions(copyButton(() => `aspect-ratio: ${ratioText};`, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(() => `aspect-ratio: ${ratioText};`, "Copy CSS", "fill"))});
   slot.append(card.node);
   update();
 

package/mevebu/libs/js/tools/average-calculator.js

@@ -12,8 +12,8 @@ function parseNumbers(text) {
 }
 
 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;
 }
@@ -25,7 +25,7 @@ export function mount(slot) {
   const mode = tile("Mode");
   const count = tile("Count");
   const sum = tile("Sum");
-  const stats = el("div", { class: "mvb-stats" }, mean, median, mode, count, sum);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, mean, median, mode, count, sum);
   const error = notice("error");
   let text = "";
 
@@ -72,8 +72,7 @@ export function mount(slot) {
       stack(panel("Numbers", source), error),
       stack(stats)
     ),
-    foot: actions(copyButton(() => text, "Copy summary", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy summary", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/base64.js

@@ -27,7 +27,7 @@ function decode(text) {
 
 export function mount(slot) {
   const plain = textArea({ rows: 7, value: "hello mevebu", "aria-label": "Plain text" });
-  const coded = textArea({ rows: 7, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Base64" });
+  const coded = textArea({ rows: 7, "aria-label": "Base64" });
   const urlSafeBox = checkbox("URL-safe, no padding", { checked: false });
   const error = notice("error");
   let guard = false;
@@ -71,8 +71,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => plain.value, "Copy text"),
       copyButton(() => coded.value, "Copy Base64", "fill"),
-    ),
-  });
+    )});
   slot.append(card.node);
   refresh();
 

package/mevebu/libs/js/tools/binary-calculator.js

@@ -8,11 +8,11 @@ function parse(text) {
 }
 
 export function mount(slot) {
-  const first = textInput({ value: "1011", class: "mvb-in mvb-in--mono", "aria-label": "First number" });
-  const second = textInput({ value: "0110", class: "mvb-in mvb-in--mono", "aria-label": "Second number" });
-  const result = el("span", { class: "mvb-stat__v" }, "-");
-  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "Binary"), result));
-  const decimal = el("p", { class: "mvb-note" });
+  const first = textInput({ value: "1011", mono: true, "aria-label": "First number" });
+  const second = textInput({ value: "0110", mono: true, "aria-label": "Second number" });
+  const result = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Binary"), result));
+  const decimal = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
   const error = notice("error");
   let mode = "add";
   let text = "";
@@ -47,8 +47,7 @@ export function mount(slot) {
       stack(panel("First number", first), panel("Second number", second), panel("Operation", chips), error),
       stack(panel("Result", stats), decimal)
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/border-radius.js

@@ -5,11 +5,11 @@ const KEYS = ["tl", "tr", "br", "bl"];
 
 function slider(label, value) {
   const input = rangeInput({ min: 0, max: 100, value, "aria-label": label });
-  const val = el("span", { class: "mvb-slider__val" }, `${value}px`);
+  const val = el("span", { class: "text-end font-mono text-2xs text-ink-2" }, `${value}px`);
   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
   );
@@ -27,11 +27,10 @@ export function mount(slot) {
     tl: slider("Top left", corners.tl),
     tr: slider("Top right", corners.tr),
     br: slider("Bottom right", corners.br),
-    bl: slider("Bottom left", corners.bl),
-  };
+    bl: slider("Bottom left", corners.bl)};
 
   const linkSwitch = switchControl("Link corners", { checked: true });
-  const previewBox = el("div", { class: "mvb-preview__box" });
+  const previewBox = el("div", { class: "grid h-[120px] w-[min(200px,100%)] place-items-center bg-jade text-2xs text-on-jade" });
   const code = output();
 
   function css() {
@@ -75,10 +74,9 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(linkSwitch, sliders.tl, sliders.tr, sliders.br, sliders.bl),
-      stack(el("div", { class: "mvb-preview" }, previewBox), code)
+      stack(el("div", { class: "grid min-h-40 place-items-center overflow-hidden rounded-r1 border border-orbit bg-deck-2 p-[22px]" }, previewBox), code)
     ),
-    foot: actions(copyButton(css, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(css, "Copy CSS", "fill"))});
   slot.append(card.node);
   update();
 

package/mevebu/libs/js/tools/box-shadow.js

@@ -9,11 +9,11 @@ function hexToRgb(hex) {
 
 function slider(label, { min, max, value, unit = "px" }) {
   const input = rangeInput({ min, max, 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
   );
@@ -31,7 +31,7 @@ export function mount(slot) {
   const opacity = slider("Opacity", { min: 0, max: 100, value: 35, unit: "%" });
   const picker = colorInput({ value: "#1b1b1f", "aria-label": "Shadow color" });
   const inset = switchControl("Inset", {});
-  const previewBox = el("div", { class: "mvb-preview__box" });
+  const previewBox = el("div", { class: "grid h-[120px] w-[min(200px,100%)] place-items-center bg-jade text-2xs text-on-jade" });
   const code = output();
 
   function css() {
@@ -58,10 +58,9 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(x, y, blur, spread, opacity, panel("Color", picker), inset),
-      stack(el("div", { class: "mvb-preview" }, previewBox), code)
+      stack(el("div", { class: "grid min-h-40 place-items-center overflow-hidden rounded-r1 border border-orbit bg-deck-2 p-[22px]" }, previewBox), code)
     ),
-    foot: actions(copyButton(() => `box-shadow: ${css()};`, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(() => `box-shadow: ${css()};`, "Copy CSS", "fill"))});
   slot.append(card.node);
   update();
 

package/mevebu/libs/js/tools/break-even.js

@@ -6,8 +6,8 @@ function fmt(n) {
 }
 
 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;
 }
@@ -19,7 +19,7 @@ export function mount(slot) {
   const unitsTile = tile("Break-even units");
   const revenueTile = tile("Revenue");
   const marginTile = tile("Contribution");
-  const stats = el("div", { class: "mvb-stats" }, unitsTile, revenueTile, marginTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, unitsTile, revenueTile, marginTile);
   const error = notice("error");
   let text = "";
 
@@ -57,8 +57,7 @@ export function mount(slot) {
       stack(panel("Fixed costs", fixed), panel("Price per unit", price), panel("Variable cost per unit", variable), error),
       stack(stats)
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/business-days.js

@@ -20,7 +20,7 @@ function parseDate(value) {
 const iso = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  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), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const start = textInput({ type: "date", value: "2026-01-01", "aria-label": "Start date" });
@@ -29,13 +29,13 @@ export function mount(slot) {
   const weekdays = toggleRow(DAY_LABELS.map((label, index) => ({ value: index, label, checked: index >= 1 && index <= 5 })));
   const holidays = textArea({ rows: 4, placeholder: "2026-01-01", "aria-label": "Holidays, one per line" });
 
-  const working = el("span", { class: "mvb-kv__v" }, "-");
-  const calendar = el("span", { class: "mvb-kv__v" }, "-");
-  const weekend = el("span", { class: "mvb-kv__v" }, "-");
-  const holidayCount = el("span", { class: "mvb-kv__v" }, "-");
+  const working = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const calendar = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const weekend = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const holidayCount = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
   const kv = el(
     "div",
-    { class: "mvb-kv" },
+    { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
     kvRow("Working days", working),
     kvRow("Calendar days", calendar),
     kvRow("Weekend days", weekend),
@@ -109,8 +109,7 @@ export function mount(slot) {
       ),
       stack(panel("Holidays", holidays), panel("Count", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/canonical-tag.js

@@ -6,15 +6,15 @@ const esc = (value) =>
   String(value).replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[char]));
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  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), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const source = textInput({ value: "https://example.com/blog/post/?utm_source=news#comments", "aria-label": "Page URL" });
   const result = output({ rows: 2 });
   const error = notice("error");
-  const normalized = el("span", { class: "mvb-kv__v" }, "-");
-  const length = el("span", { class: "mvb-kv__v" }, "-");
-  const kv = el("div", { class: "mvb-kv" }, kvRow("Canonical URL", normalized), kvRow("Length", length));
+  const normalized = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const length = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const kv = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" }, kvRow("Canonical URL", normalized), kvRow("Length", length));
   let canonical = "";
 
   function clear() {
@@ -52,8 +52,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => canonical, "Copy URL"),
       copyButton(() => result.textContent, "Copy tag", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   run();
 

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

@@ -2,8 +2,8 @@
 import { el, bench, stack, panel, textArea, numberInput, 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;
 }
@@ -16,7 +16,7 @@ export function mount(slot) {
   const wordsTile = tile("Words");
   const linesTile = tile("Lines");
   const leftTile = tile("Left");
-  const stats = el("div", { class: "mvb-stats" }, charsTile, wordsTile, linesTile, leftTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, charsTile, wordsTile, linesTile, leftTile);
   const note = notice("note");
 
   let summary = "";
@@ -43,8 +43,7 @@ export function mount(slot) {
       `${chars} characters`,
       `${words} words`,
       `${lines} lines`,
-      cap > 0 ? `${cap - chars} left of ${cap}` : "No limit set",
-    ].join("\n");
+      cap > 0 ? `${cap - chars} left of ${cap}` : "No limit set"].join("\n");
   }
 
   source.addEventListener("input", run);
@@ -55,8 +54,7 @@ export function mount(slot) {
       stack(panel("Caption", source), panel("Character limit", limit)),
       stack(stats, note)
     ),
-    foot: actions(copyButton(() => summary, "Copy summary", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy summary", "fill"))});
   slot.append(card.node);
   run();
 

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,16 +53,15 @@ 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);
   }

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