@godxjp/ui 5.0.2 → 6.0.0

package/src/lib/__tests__/format-date.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it, beforeEach } from "vitest";
+import { getDateFnsLocale } from "../../app/locales";
+import {
+  detectFormatDateKind,
+  formatDate,
+  formatCalendarDate,
+  resetDatetimeContextForTests,
+  syncDatetimeContext,
+} from "../datetime";
+
+describe("formatDate (unified) — regression suite", () => {
+  beforeEach(() => {
+    resetDatetimeContextForTests();
+    syncDatetimeContext({
+      locale: "en",
+      timezone: "Asia/Ho_Chi_Minh",
+      timeFormat: "24h",
+      dateFormat: "iso",
+      dateFnsLocale: getDateFnsLocale("en"),
+    });
+  });
+
+  it("auto-detects ISO date-only string", () => {
+    expect(formatDate("2026-05-01")).toBe("2026-05-01");
+    expect(detectFormatDateKind("2026-05-01")).toBe("date");
+  });
+
+  it("auto-detects HH:mm time string", () => {
+    expect(formatDate("14:30", { kind: "auto" })).toBe("14:30");
+    expect(detectFormatDateKind("14:30")).toBe("time");
+  });
+
+  it("auto-detects ISO datetime instant with timezone shift", () => {
+    expect(formatDate("2026-05-01T14:30:00Z")).toMatch(/2026-05-01 21:30/);
+  });
+
+  it("uses AppProvider defaults when options omitted", () => {
+    expect(formatDate("2026-05-01T14:30:00Z", { kind: "datetime" })).toMatch(/21:30/);
+  });
+
+  it("allows per-call timezone override", () => {
+    expect(formatDate("2026-05-01T14:30:00Z", { kind: "datetime", timezone: "UTC" })).toMatch(
+      /2026-05-01 14:30/,
+    );
+    expect(
+      formatDate("2026-05-01T14:30:00Z", { kind: "datetime", timezone: "Asia/Tokyo" }),
+    ).toMatch(/2026-05-01 23:30/);
+  });
+
+  it("formats calendar Date with kind calendar", () => {
+    expect(formatDate(new Date(2026, 4, 2), { kind: "calendar" })).toBe("2026-05-02");
+  });
+
+  it("uses dateFormat from context for date-only strings (dmy)", () => {
+    syncDatetimeContext({
+      locale: "vi",
+      timezone: "Asia/Ho_Chi_Minh",
+      timeFormat: "24h",
+      dateFormat: "dmy",
+      dateFnsLocale: getDateFnsLocale("vi"),
+    });
+    expect(formatDate("2026-05-01")).toBe("01/05/2026");
+  });
+
+  it("uses dateFormat iso for ja default (yyyy-MM-dd)", () => {
+    syncDatetimeContext({
+      locale: "ja",
+      timezone: "Asia/Tokyo",
+      timeFormat: "24h",
+      dateFormat: "iso",
+      dateFnsLocale: getDateFnsLocale("ja"),
+    });
+    expect(formatDate("2026-05-01")).toBe("2026-05-01");
+    expect(formatDate("2026-05-01T14:30:00Z", { kind: "datetime" })).toMatch(/2026-05-01 23:30/);
+  });
+
+  it("uses dateFormat mdy for en (MM/dd/yyyy)", () => {
+    syncDatetimeContext({
+      locale: "en",
+      timezone: "UTC",
+      timeFormat: "12h",
+      dateFormat: "mdy",
+      dateFnsLocale: getDateFnsLocale("en"),
+    });
+    expect(formatDate("2026-05-01")).toBe("05/01/2026");
+  });
+
+  it("formatCalendarDate respects dateFormat override per call", () => {
+    expect(formatCalendarDate(new Date(2026, 4, 2), { dateFormat: "dmy" })).toBe("02/05/2026");
+  });
+
+  it("returns em dash for empty values", () => {
+    expect(formatDate(null)).toBe("—");
+    expect(formatDate("")).toBe("—");
+    expect(formatDate(undefined)).toBe("—");
+  });
+});

package/src/lib/__tests__/format.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import { getDateFnsLocale } from "../../app/locales";
+import { syncDatetimeContext } from "../datetime";
+import {
+  formatBytes,
+  formatCurrency,
+  formatDateTime,
+  formatRelative,
+  formatTime,
+  humanError,
+  shortId,
+} from "../format";
+
+describe("format helpers", () => {
+  it("formatDateTime returns dash for null", () => {
+    expect(formatDateTime(null)).toBe("—");
+  });
+
+  it("formatDateTime formats ISO string in synced timezone", () => {
+    syncDatetimeContext({
+      locale: "en",
+      timezone: "UTC",
+      timeFormat: "24h",
+      dateFormat: "iso",
+      dateFnsLocale: getDateFnsLocale("en"),
+    });
+    expect(formatDateTime("2026-05-01T14:30:00Z")).toMatch(/2026-05-01 14:30/);
+  });
+
+  it("formatTime respects 12h vs 24h", () => {
+    const d = "2026-05-01T14:30:00Z";
+    expect(formatTime(d, { timeFormat: "24h" })).toMatch(/\d{2}:\d{2}/);
+    expect(formatTime(d, { timeFormat: "12h" })).toMatch(/PM|AM|am|pm/);
+  });
+
+  it("formatRelative returns relative phrase", () => {
+    const recent = new Date(Date.now() - 60_000).toISOString();
+    expect(formatRelative(recent)).toMatch(/minute/i);
+  });
+
+  it("formatBytes scales units", () => {
+    expect(formatBytes(512)).toBe("512 B");
+    expect(formatBytes(2048)).toBe("2.0 KB");
+  });
+
+  it("formatCurrency formats minor units", () => {
+    expect(formatCurrency(1995, "USD")).toMatch(/19\.95/);
+  });
+
+  it("shortId truncates long ids", () => {
+    expect(shortId("0123456789abcdef")).toBe("01234567…");
+  });
+
+  it("humanError extracts message from Error", () => {
+    expect(humanError(new Error("fail"))).toBe("fail");
+    expect(humanError(new Error("500 Bad: body"))).toBe("body");
+  });
+
+  it("humanError returns generic for non-Error", () => {
+    expect(humanError("plain")).toMatch(/retry|thử lại|再試行/i);
+  });
+});

package/src/lib/__tests__/theme-tokens-audit.test.ts

@@ -0,0 +1,176 @@
+import { readFileSync, readdirSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+const componentsRoot = join(dirname(fileURLToPath(import.meta.url)), "../../components");
+const srcRoot = join(dirname(fileURLToPath(import.meta.url)), "../..");
+
+/** Raw Tailwind palette in components breaks theme axes — use semantic tokens instead. */
+const FORBIDDEN_PALETTE = [
+  /\bbg-green-/,
+  /\bbg-blue-/,
+  /\bbg-amber-/,
+  /\bbg-red-\d/,
+  /\btext-green-/,
+  /\btext-blue-/,
+  /\btext-amber-/,
+  /\bborder-green-/,
+  /\bborder-blue-/,
+  /\bborder-amber-/,
+];
+
+/** Fixed control heights bypass --control-height density axis. */
+const FORBIDDEN_CONTROL_HEIGHT = [
+  /\bh-8\b/,
+  /\bh-9\b/,
+  /\bh-10\b/,
+  /\bh-11\b/,
+  /\bh-12\b/,
+  /\bsize-7\b/,
+  /\bsize-8\b/,
+  /\bsize-9\b/,
+];
+
+/** Legacy date formatting — must use formatDate. */
+const FORBIDDEN_DATE_FORMAT = [
+  /from ["']date-fns["']/,
+  /\.toLocaleString\s*\(/,
+  /\.toLocaleDateString\s*\(/,
+];
+
+const SKIP_CONTROL_HEIGHT_DIRS = new Set(["feedback/skeleton.tsx"]);
+
+const INTERACTIVE_MUST_USE_CONTROL_STYLES = [
+  "data-entry/select.tsx",
+  "data-entry/textarea.tsx",
+  "data-entry/command.tsx",
+  "data-display/table.tsx",
+  "data-display/data-table.tsx",
+];
+
+const RTL_LOGICAL_PRIMITIVES = [
+  "data-entry/select.tsx",
+  "navigation/dropdown-menu.tsx",
+  "feedback/sheet.tsx",
+];
+
+const FORBIDDEN_RTL_PHYSICAL_SNIPPETS = [
+  "absolute left-",
+  "absolute right-",
+  " pl-",
+  " pr-",
+  " ml-auto",
+  " mr-auto",
+  "data-[inset=true]:pl-",
+];
+
+function listTsxFiles(dir: string): string[] {
+  const entries = readdirSync(dir, { withFileTypes: true });
+  const files: string[] = [];
+  for (const entry of entries) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name === "__tests__") continue;
+      files.push(...listTsxFiles(full));
+    } else if (entry.name.endsWith(".tsx")) {
+      files.push(full);
+    }
+  }
+  return files;
+}
+
+function findAllViolations(patterns: RegExp[], content: string): string[] {
+  const hits: string[] = [];
+  for (const pattern of patterns) {
+    const matches = content.match(new RegExp(pattern.source, "g"));
+    if (matches) hits.push(...matches);
+  }
+  return [...new Set(hits)];
+}
+
+describe("theme token audit (components)", () => {
+  const files = listTsxFiles(componentsRoot);
+
+  it("does not use raw palette colors in any component file", () => {
+    const offenders: string[] = [];
+    for (const file of files) {
+      const rel = relative(componentsRoot, file);
+      const content = readFileSync(file, "utf8");
+      const hits = findAllViolations(FORBIDDEN_PALETTE, content);
+      if (hits.length > 0) offenders.push(`${rel}: ${hits.join(", ")}`);
+    }
+    expect(offenders, "Use semantic tokens (primary, success, warning, info, accent)").toEqual([]);
+  });
+
+  it("does not hardcode control heights in interactive components", () => {
+    const offenders: string[] = [];
+    for (const file of files) {
+      const rel = relative(componentsRoot, file);
+      if (SKIP_CONTROL_HEIGHT_DIRS.has(rel)) continue;
+      const content = readFileSync(file, "utf8");
+      const hits = findAllViolations(FORBIDDEN_CONTROL_HEIGHT, content);
+      if (hits.length > 0) offenders.push(`${rel}: ${hits.join(", ")}`);
+    }
+    expect(offenders, "Use var(--control-height) via control-styles.ts").toEqual([]);
+  });
+
+  it("interactive primitives import control-styles", () => {
+    const missing: string[] = [];
+    for (const rel of INTERACTIVE_MUST_USE_CONTROL_STYLES) {
+      const content = readFileSync(join(componentsRoot, rel), "utf8");
+      if (!content.includes("control-styles")) missing.push(rel);
+    }
+    expect(missing, "Must import shared control-styles").toEqual([]);
+  });
+
+  it("components do not call toLocaleString for display dates", () => {
+    const offenders: string[] = [];
+    for (const file of files) {
+      const rel = relative(componentsRoot, file);
+      const content = readFileSync(file, "utf8");
+      const hits = findAllViolations(FORBIDDEN_DATE_FORMAT, content);
+      if (hits.length > 0) offenders.push(`${rel}: ${hits.join(", ")}`);
+    }
+    expect(offenders, "Use formatDate from @/lib/datetime").toEqual([]);
+  });
+
+  it("shadcn primitive chrome uses logical direction utilities", () => {
+    const offenders: string[] = [];
+    for (const rel of RTL_LOGICAL_PRIMITIVES) {
+      const content = readFileSync(join(componentsRoot, rel), "utf8");
+      const hits = FORBIDDEN_RTL_PHYSICAL_SNIPPETS.filter((snippet) => content.includes(snippet));
+      if (hits.length > 0) offenders.push(`${rel}: ${hits.join(", ")}`);
+    }
+    expect(offenders, "Use start/end, ps/pe, ms/me for RTL-safe primitive chrome").toEqual([]);
+  });
+
+  it("dialog close offset uses logical CSS", () => {
+    const content = readFileSync(join(srcRoot, "styles/dialog-layout.css"), "utf8");
+    expect(content).toContain("inset-inline-end: var(--space-dialog-close-offset)");
+    expect(content).not.toContain("right: var(--space-dialog-close-offset)");
+  });
+});
+
+describe("theme token audit (lib/datetime)", () => {
+  it("format-date module exists and exports formatDate", () => {
+    const index = readFileSync(join(srcRoot, "lib/datetime/index.ts"), "utf8");
+    expect(index).toContain("formatDate");
+  });
+});
+
+describe("theme token audit (badge/status)", () => {
+  it("status-badge uses tone classes from control-styles", () => {
+    const content = readFileSync(join(componentsRoot, "data-display/status-badge.tsx"), "utf8");
+    expect(content).toContain("toneSuccessClass");
+    expect(content).toContain("toneWarningClass");
+    expect(content).toContain("toneInfoClass");
+    expect(content).not.toMatch(/green-500/);
+  });
+
+  it("badge success variant uses toneSuccessClass", () => {
+    const content = readFileSync(join(componentsRoot, "data-display/badge.tsx"), "utf8");
+    expect(content).toContain("toneSuccessClass");
+    expect(content).not.toMatch(/bg-green-/);
+  });
+});

package/src/lib/__tests__/theme-tokens-css.test.ts

@@ -0,0 +1,118 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "../..");
+
+function readSrc(relative: string): string {
+  return readFileSync(join(root, relative), "utf8");
+}
+
+function readStyle(name: string): string {
+  return readSrc(`styles/${name}`);
+}
+
+describe("theme CSS tokens (base.css + layout owners)", () => {
+  const base = readSrc("tokens/base.css");
+  const tokenCss = [
+    base,
+    readSrc("tokens/foundation.css"),
+    readSrc("tokens/primitives/layout.css"),
+    readSrc("tokens/primitives/control.css"),
+    readSrc("tokens/primitives/card.css"),
+    readSrc("tokens/primitives/table.css"),
+    readSrc("tokens/primitives/feedback.css"),
+    readSrc("tokens/primitives/badge.css"),
+  ].join("\n");
+  const index = readSrc("styles/index.css");
+  const density = readStyle("density.css");
+  const control = readStyle("control.css");
+
+  it("defines semantic color tokens in :root", () => {
+    for (const token of [
+      "--primary:",
+      "--accent:",
+      "--ring:",
+      "--success:",
+      "--warning:",
+      "--info:",
+      "--attention:",
+      "--tracking-internal:",
+      "--tracking-seller:",
+      "--tracking-yamato:",
+      "--destructive:",
+    ]) {
+      expect(tokenCss, `missing ${token} in token graph`).toContain(token);
+    }
+  });
+
+  it("defines density primitives in :root", () => {
+    for (const token of [
+      "--control-height-compact",
+      "--control-height-default",
+      "--control-height-comfortable",
+      "--table-row-height-compact",
+      "--table-row-height-default",
+      "--table-row-height-comfortable",
+      "--table-cell-padding-y",
+    ]) {
+      expect(tokenCss, `missing ${token}`).toContain(token);
+    }
+  });
+
+  it("uses base.css as the token manifest", () => {
+    for (const file of [
+      "foundation.css",
+      "primitives/layout.css",
+      "primitives/control.css",
+      "primitives/card.css",
+      "primitives/table.css",
+      "primitives/feedback.css",
+      "primitives/badge.css",
+    ]) {
+      expect(base).toContain(`@import "./${file}"`);
+    }
+  });
+
+  it("maps semantic colors in @theme for Tailwind", () => {
+    for (const token of [
+      "--color-primary:",
+      "--color-accent:",
+      "--color-ring:",
+      "--color-success:",
+      "--color-warning:",
+      "--color-info:",
+      "--color-attention:",
+      "--color-tracking-internal:",
+      "--color-tracking-seller:",
+      "--color-tracking-yamato:",
+    ]) {
+      expect(index, `missing ${token} in index.css @theme`).toContain(token);
+    }
+  });
+
+  it("defines ui-control utilities in control.css", () => {
+    expect(control).toContain(".ui-control {");
+    expect(control).toContain("height: var(--control-height)");
+    expect(control).toContain(".ui-control-multiline {");
+    expect(control).toContain("font-size: var(--font-size-sm)");
+  });
+
+  it("sets --table-cell-padding-y per density class", () => {
+    expect(density).toContain(".ui-density-compact {");
+    expect(density).toMatch(/ui-density-compact[\s\S]*--table-cell-padding-y/);
+    expect(density).toMatch(/ui-density-comfortable[\s\S]*--table-cell-padding-y/);
+  });
+
+  it("wires Tailwind text-* to typography tokens", () => {
+    expect(index).toContain("--text-sm: var(--font-size-sm)");
+    expect(index).toContain("--text-xs: var(--font-size-xs)");
+  });
+
+  it("imports split layout CSS owners", () => {
+    for (const file of ["density.css", "layout.css", "card-layout.css", "table-layout.css"]) {
+      expect(index).toContain(`@import "./${file}"`);
+    }
+  });
+});

package/src/lib/__tests__/token-governance.test.ts

@@ -0,0 +1,191 @@
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const root = join(import.meta.dirname, "../..");
+
+const LAYOUT_CSS_FILES = [
+  "density.css",
+  "layout.css",
+  "control.css",
+  "card-layout.css",
+  "table-layout.css",
+  "dialog-layout.css",
+  "alert-layout.css",
+  "badge-layout.css",
+];
+
+/** Components fully on data-slot + *-layout.css — must stay free of Tailwind spacing utilities. */
+const MIGRATED_LAYOUT_COMPONENTS = [
+  "components/data-display/table.tsx",
+  "components/data-display/empty-state.tsx",
+  "components/data-display/status-badge.tsx",
+  "components/data-display/data-table.tsx",
+  "components/feedback/dialog.tsx",
+  "components/feedback/alert.tsx",
+  "components/data-display/card.tsx",
+];
+
+/** Pending migration — tracked separately; do not add new files without a layout owner. */
+const SPACING_UTILITY_ALLOWLIST = new Set([
+  "calendar.tsx",
+  "command.tsx",
+  "upload.tsx",
+  "upload-crop-dialog.tsx",
+  "cascader.tsx",
+  "tree-select.tsx",
+  "transfer.tsx",
+  "time-picker.tsx",
+  "tabs.tsx",
+  "tabs-items.tsx",
+  "steps.tsx",
+  "sheet.tsx",
+  "dropdown-menu.tsx",
+  "pagination.tsx",
+  "skeleton.tsx",
+  "choice-field.tsx",
+  "radio.tsx",
+  "color-picker.tsx",
+  "autocomplete.tsx",
+  "date-range-picker.tsx",
+  "locale-picker.tsx",
+  "timezone-picker.tsx",
+  "date-format-picker.tsx",
+  "query-refetch-button.tsx",
+  "key-value-grid.tsx",
+  "card.tsx", // CardStat title uses text-2xl override (value typography)
+  "button.tsx", // size variants use token-backed arbitrary lengths
+]);
+
+const FORBIDDEN_IN_COMPONENTS =
+  /\b(p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|gap|space-[xy])-(0|0\.5|1|1\.5|2|2\.5|3|3\.5|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96)\b/;
+
+const FORBIDDEN_RAW_COLORS =
+  /\b(text|bg|border)-(emerald|red|green|blue|yellow|orange|pink|purple|gray|slate|zinc|neutral|stone|amber|lime|teal|cyan|indigo|violet|fuchsia|rose)-/;
+
+function walkComponents(dir: string): string[] {
+  const out: string[] = [];
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) {
+      out.push(...walkComponents(full));
+    } else if (entry.endsWith(".tsx") && !entry.endsWith(".test.tsx")) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+describe("token governance", () => {
+  const base = readFileSync(join(root, "tokens/base.css"), "utf8");
+  const tokenCss = [
+    base,
+    readFileSync(join(root, "tokens/foundation.css"), "utf8"),
+    readFileSync(join(root, "tokens/primitives/layout.css"), "utf8"),
+    readFileSync(join(root, "tokens/primitives/control.css"), "utf8"),
+    readFileSync(join(root, "tokens/primitives/card.css"), "utf8"),
+    readFileSync(join(root, "tokens/primitives/table.css"), "utf8"),
+    readFileSync(join(root, "tokens/primitives/feedback.css"), "utf8"),
+    readFileSync(join(root, "tokens/primitives/badge.css"), "utf8"),
+  ].join("\n");
+
+  it("imports all layout CSS owners from index.css", () => {
+    const index = readFileSync(join(root, "styles/index.css"), "utf8");
+    for (const file of LAYOUT_CSS_FILES) {
+      expect(index, `missing @import ./${file}`).toContain(`@import "./${file}"`);
+    }
+    expect(index).not.toContain(".ui-stack-md {");
+    expect(index).not.toContain('[data-slot="card-header"]');
+  });
+
+  it("uses base.css as the token manifest", () => {
+    for (const file of [
+      "foundation.css",
+      "primitives/layout.css",
+      "primitives/control.css",
+      "primitives/card.css",
+      "primitives/table.css",
+      "primitives/feedback.css",
+      "primitives/badge.css",
+    ]) {
+      expect(base).toContain(`@import "./${file}"`);
+    }
+  });
+
+  it("defines component slot tokens in the token graph", () => {
+    for (const token of [
+      "--space-dialog-inset",
+      "--space-alert-inset",
+      "--space-table-cell-x",
+      "--space-badge-x",
+      "--card-title-font-size",
+      "--control-height-default",
+    ]) {
+      expect(tokenCss).toContain(token);
+    }
+  });
+
+  it("keeps migrated components free of Tailwind spacing utilities", () => {
+    const violations: string[] = [];
+
+    for (const relative of MIGRATED_LAYOUT_COMPONENTS) {
+      const src = readFileSync(join(root, relative), "utf8");
+      if (FORBIDDEN_IN_COMPONENTS.test(src)) {
+        violations.push(relative.split("/").pop()!);
+      }
+    }
+
+    expect(violations, `move spacing to *-layout.css: ${violations.join(", ")}`).toEqual([]);
+  });
+
+  it("keeps non-allowlisted components on migration track (informational cap)", () => {
+    const componentsDir = join(root, "components");
+    const pending: string[] = [];
+
+    for (const file of walkComponents(componentsDir)) {
+      const name = file.split("/").pop()!;
+      const relative = file.slice(root.length + 1);
+      if (MIGRATED_LAYOUT_COMPONENTS.some((m) => relative.endsWith(m.replace(/^components\//, ""))))
+        continue;
+      if (SPACING_UTILITY_ALLOWLIST.has(name)) continue;
+
+      const src = readFileSync(file, "utf8");
+      if (FORBIDDEN_IN_COMPONENTS.test(src)) {
+        pending.push(name);
+      }
+    }
+
+    expect(pending.length, `pending layout migration: ${pending.join(", ")}`).toBeLessThan(30);
+  });
+
+  it("keeps migrated components free of raw Tailwind palette colors", () => {
+    const violations: string[] = [];
+
+    for (const relative of MIGRATED_LAYOUT_COMPONENTS) {
+      if (relative.endsWith("card.tsx")) continue;
+      const src = readFileSync(join(root, relative), "utf8");
+      if (FORBIDDEN_RAW_COLORS.test(src)) {
+        violations.push(relative.split("/").pop()!);
+      }
+    }
+
+    expect(violations, `use semantic tokens: ${violations.join(", ")}`).toEqual([]);
+  });
+
+  it("legacy scan — non-migrated must not grow unbounded", () => {
+    const componentsDir = join(root, "components");
+    const violations: string[] = [];
+
+    for (const file of walkComponents(componentsDir)) {
+      const name = file.split("/").pop()!;
+      if (SPACING_UTILITY_ALLOWLIST.has(name)) continue;
+
+      const src = readFileSync(file, "utf8");
+      if (FORBIDDEN_RAW_COLORS.test(src)) {
+        violations.push(name);
+      }
+    }
+
+    expect(violations.length).toBeLessThan(15);
+  });
+});

package/src/lib/__tests__/variants.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { densityClass, inlineGapClass, stackGapClass } from "../variants";
+
+describe("variants maps", () => {
+  it("maps page density to ui classes", () => {
+    expect(densityClass.compact).toBe("ui-density-compact");
+    expect(densityClass.default).toBe("ui-density-default");
+    expect(densityClass.comfortable).toBe("ui-density-comfortable");
+  });
+
+  it("maps stack gaps", () => {
+    expect(stackGapClass.md).toBe("ui-stack-md");
+  });
+
+  it("maps inline gaps", () => {
+    expect(inlineGapClass.sm).toBe("ui-inline-sm");
+  });
+});