@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/app/test/category-filter.test.ts

@@ -0,0 +1,84 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import CategoryFilter from "../src/composites/CategoryFilter.svelte";
+import { categoryFilter } from "../src/composites/category-filter.variants";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const OPTIONS = [
+  { value: "shirts", label: "Shirts" },
+  { value: "shoes", label: "Shoes" },
+  { value: "accessories", label: "Accessories" },
+] as const;
+
+describe("CategoryFilter", () => {
+  it("composes a named set of native checkboxes whose active categories are announced", () => {
+    const root = rendered(
+      render(CategoryFilter, {
+        legend: "Categories",
+        options: OPTIONS,
+        value: ["shirts", "accessories"],
+        name: "category",
+      }),
+    );
+    const controls = [...root.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')];
+
+    expect(root.tagName).toBe("FIELDSET");
+    expect(root.querySelector(":scope > legend")?.textContent).toBe("Categories");
+    expect(controls.map((control) => control.checked)).toEqual([true, false, true]);
+    expect(controls.map((control) => control.name)).toEqual([
+      "category",
+      "category",
+      "category",
+    ]);
+    expect(controls.map((control) => control.value)).toEqual([
+      "shirts",
+      "shoes",
+      "accessories",
+    ]);
+    expect(controls.map((control) => root.querySelector(`label[for="${control.id}"]`)?.textContent?.trim()))
+      .toEqual(["Shirts", "Shoes", "Accessories"]);
+  });
+
+  it("keeps every category keyboard reachable and publishes changed active values", () => {
+    const onvaluechange = vi.fn();
+    const root = rendered(
+      render(CategoryFilter, {
+        legend: "Categories",
+        options: OPTIONS,
+        value: ["shirts"],
+        onvaluechange,
+      }),
+    );
+    const controls = [...root.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')];
+
+    controls[1]!.focus();
+    expect(document.activeElement).toBe(controls[1]);
+    controls[1]!.click();
+    flushSync();
+
+    expect(controls[1]!.checked).toBe(true);
+    expect(onvaluechange).toHaveBeenLastCalledWith(["shirts", "shoes"]);
+  });
+
+  it("keeps Density tokenized and inherits every nested appearance axis", () => {
+    const scope = document.createElement("div");
+    scope.dataset.theme = "application";
+    scope.dataset.colorScheme = "dark";
+    scope.dataset.density = "compact";
+    const target = render(CategoryFilter, {
+      legend: "Categories",
+      options: OPTIONS,
+      value: [],
+    });
+    scope.append(...target.children);
+    const surface = scope.querySelector<HTMLElement>("[data-category-filter]")!;
+    const list = surface.querySelector<HTMLElement>("[data-category-filter-list]")!;
+    const styles = categoryFilter();
+
+    for (const name of classesOf(styles.root())) expect(classes(surface)).toContain(name);
+    expect(classes(list)).toContain("gap-[var(--reddb-spatial-gap-sm)]");
+    expect(surface.hasAttribute("data-theme")).toBe(false);
+    expect(surface.hasAttribute("data-color-scheme")).toBe(false);
+    expect(surface.hasAttribute("data-density")).toBe(false);
+  });
+});

package/vendor/ds/kits/app/test/category-preview.test.ts

@@ -0,0 +1,75 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import CategoryPreview from "../src/composites/CategoryPreview.svelte";
+import { categoryPreview } from "../src/composites/category-preview.variants";
+import MerchandisingContractFailures from "./fixtures/MerchandisingContractFailures.svelte";
+import MerchandisingSurfacesConsumer from "./fixtures/MerchandisingSurfacesConsumer.svelte";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the deliberately failing category preview fixture", () => {
+  it("does not expose a discernible link target", () => {
+    const root = render(MerchandisingContractFailures);
+    const link = root.querySelector<HTMLAnchorElement>("[data-indiscernible-category-preview-link]")!;
+
+    expect(link.textContent?.trim()).toBe("");
+    expect(link.getAttribute("aria-label")).toBeNull();
+    expect(link.getAttribute("aria-labelledby")).toBeNull();
+    expect(link.querySelector("[alt]")).toBeNull();
+  });
+});
+
+describe("CategoryPreview", () => {
+  it("composes canonical Card, AspectRatio, and Link contracts into a discernible destination", () => {
+    const media = createRawSnippet(() => ({
+      render: () => '<img src="/desks.jpg" alt="Oak writing desk">',
+    }));
+    const preview = rendered(
+      render(CategoryPreview, {
+        name: "Desks",
+        href: "/categories/desks",
+        description: "Workspaces for every room.",
+        media,
+      }),
+    );
+    const link = preview.querySelector<HTMLAnchorElement>("[data-link]")!;
+
+    expect(preview.matches("[data-card][data-category-preview][role=article]")).toBe(true);
+    expect(preview.querySelector("[data-aspect-ratio] img")?.getAttribute("alt")).toBe(
+      "Oak writing desk",
+    );
+    expect(link.getAttribute("href")).toBe("/categories/desks");
+    expect(link.textContent).toBe("Desks");
+    expect(preview.getAttribute("aria-labelledby")).toBe(link.id);
+    expect(preview.textContent).toContain("Workspaces for every room.");
+  });
+
+  it("keeps the native category destination keyboard reachable", () => {
+    const root = render(MerchandisingSurfacesConsumer);
+    const link = root.querySelector<HTMLAnchorElement>("[data-category-preview] a")!;
+
+    link.focus();
+    expect(document.activeElement).toBe(link);
+  });
+
+  it("routes preview rhythm through Density and inherits every nested appearance axis", () => {
+    const root = render(MerchandisingSurfacesConsumer);
+    const preview = root.querySelector<HTMLElement>("[data-category-preview]")!;
+    const content = preview.querySelector<HTMLElement>("[data-category-preview-content]")!;
+
+    expect(classes(preview)).toEqual(classesOf(categoryPreview().root()));
+    expect(classes(content)).toContain("gap-[var(--reddb-spatial-gap-sm)]");
+    expect(classes(content)).toContain("pt-[var(--reddb-spatial-inset-sm)]");
+    expect(preview.closest('[data-theme="base"][data-color-scheme="dark"][data-density="compact"]'))
+      .not.toBeNull();
+    expect(preview.hasAttribute("data-theme")).toBe(false);
+    expect(preview.hasAttribute("data-color-scheme")).toBe(false);
+    expect(preview.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("ships showcase, consumer, distributed export, and readiness evidence", () => {
+    expect(render(MerchandisingSurfacesConsumer).querySelector("[data-category-preview]"))
+      .not.toBeNull();
+    expectLayoutReadiness("category-preview", "CategoryPreview");
+  });
+});

package/vendor/ds/kits/app/test/chat-message.test.ts

@@ -0,0 +1,70 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import ChatMessage from "../src/composites/ChatMessage.svelte";
+import { chatMessage } from "../src/composites/chat-message.variants";
+import SocialSurfacesConsumer from "./fixtures/SocialSurfacesConsumer.svelte";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const body = createRawSnippet(() => ({
+  render: () => '<p>Deployment is ready. <a href="/deployments/42">Open it</a></p>',
+}));
+const actions = createRawSnippet(() => ({
+  render: () => '<button type="button">Reply</button>',
+}));
+
+describe("ChatMessage", () => {
+  it("composes canonical media and avatar around caller-owned message content", () => {
+    const message = rendered(render(ChatMessage, {
+      author: "Ada Lovelace",
+      avatarFallback: "AL",
+      datetime: "2026-08-08T19:00:00Z",
+      time: "19:00",
+      children: body,
+      actions,
+    }));
+
+    expect(message.tagName).toBe("ARTICLE");
+    expect(message.getAttribute("aria-label")).toBe("Message from Ada Lovelace");
+    expect(message.querySelector("[data-media-object]")).not.toBeNull();
+    expect(message.querySelector("[data-avatar]")?.getAttribute("aria-label")).toBe("Ada Lovelace");
+    expect(message.querySelector("time")?.dateTime).toBe("2026-08-08T19:00:00Z");
+    expect(message.querySelector("[data-chat-message-body]")?.textContent).toContain("Deployment is ready.");
+  });
+
+  it("leaves message destinations and actions in native keyboard order", () => {
+    const message = rendered(render(ChatMessage, {
+      author: "Ada Lovelace",
+      avatarFallback: "AL",
+      datetime: "2026-08-08T19:00:00Z",
+      time: "19:00",
+      children: body,
+      actions,
+    }));
+    const controls = [...message.querySelectorAll<HTMLElement>("a, button")];
+
+    expect(controls.map((control) => control.textContent)).toEqual(["Open it", "Reply"]);
+    for (const control of controls) {
+      control.focus();
+      expect(document.activeElement).toBe(control);
+    }
+  });
+
+  it("keeps Density tokenized and inherits every nested appearance axis", () => {
+    const scope = rendered(render(SocialSurfacesConsumer));
+    const message = scope.querySelector<HTMLElement>("[data-chat-message]")!;
+    const styles = chatMessage();
+
+    expect(classes(message)).toEqual(expect.objectContaining(classesOf(styles.root())));
+    expect(classes(message.querySelector("[data-chat-message-header]")!))
+      .toContain("gap-[var(--reddb-spatial-gap-sm)]");
+    expect(message.hasAttribute("data-theme")).toBe(false);
+    expect(message.hasAttribute("data-color-scheme")).toBe(false);
+    expect(message.hasAttribute("data-density")).toBe(false);
+    expect(message.hasAttribute("data-motion")).toBe(false);
+  });
+
+  it("ships showcase, consumer, distributed export, and readiness evidence", () => {
+    expectLayoutReadiness("chat-message", "ChatMessage");
+  });
+});

package/vendor/ds/kits/app/test/checkout-form.test.ts

@@ -0,0 +1,134 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import CheckoutForm from "../src/composites/CheckoutForm.svelte";
+import { checkoutForm } from "../src/composites/checkout-form.variants";
+import CommerceContractFailures from "./fixtures/CommerceContractFailures.svelte";
+import CommerceSurfacesConsumer from "./fixtures/CommerceSurfacesConsumer.svelte";
+import { expectCommerceReadiness } from "./commerce-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function checkoutErrorFailures(root: HTMLElement): string[] {
+  const invalid = root.querySelector<HTMLElement>('[aria-invalid="true"]');
+  if (!invalid) return ["checkout error has no invalid control"];
+  const errorId = invalid?.getAttribute("aria-errormessage");
+  const error = errorId ? root.querySelector<HTMLElement>(`#${errorId}`) : null;
+  const described = new Set((invalid.getAttribute("aria-describedby") ?? "").split(/\s+/));
+  return error && described.has(error.id)
+    ? []
+    : ["checkout error is not associated with its invalid control"];
+}
+
+describe("the deliberately failing Checkout form fixture", () => {
+  it("diagnoses an error that is only visually adjacent to its field", () => {
+    const broken = rendered(
+      render(CommerceContractFailures, { failure: "checkout-error-is-unassociated" }),
+    );
+
+    expect(checkoutErrorFailures(broken)).toEqual([
+      "checkout error is not associated with its invalid control",
+    ]);
+  });
+});
+
+describe("CheckoutForm", () => {
+  const sections = [
+    {
+      legend: "Delivery",
+      fields: [
+        {
+          name: "postalCode",
+          label: "Postal code",
+          value: "",
+          required: true,
+          help: "Use the delivery address.",
+          error: "Enter a postal code.",
+          autocomplete: "postal-code" as const,
+        },
+      ],
+    },
+  ] as const;
+
+  it("composes native Form, Fieldset, Field, and Input associations", () => {
+    const form = rendered(
+      render(CheckoutForm, {
+        sections,
+        submitLabel: "Place order",
+        error: "Review the highlighted field.",
+        "aria-label": "Checkout",
+      }),
+    ) as HTMLFormElement;
+    const input = form.querySelector<HTMLInputElement>('input[name="postalCode"]')!;
+    const fieldError = form.querySelector<HTMLElement>("[data-field-invalid] [role='alert']")!;
+
+    expect(form.tagName).toBe("FORM");
+    expect(form.querySelector("fieldset > legend")?.textContent).toBe("Delivery");
+    expect(form.querySelector(`label[for="${input.id}"]`)?.textContent).toContain("Postal code");
+    expect(input.required).toBe(true);
+    expect(input.getAttribute("aria-errormessage")).toBe(fieldError.id);
+    expect(input.getAttribute("aria-describedby")?.split(" ")).toContain(fieldError.id);
+    expect(checkoutErrorFailures(form)).toEqual([]);
+    expect(form.getAttribute("aria-describedby")).toContain(
+      form.querySelector<HTMLElement>("[data-checkout-error]")!.id,
+    );
+    expect(new FormData(form).get("postalCode")).toBe("");
+  });
+
+  it("keeps native keyboard focus order and a submit control", () => {
+    const form = rendered(render(CheckoutForm, { sections, submitLabel: "Place order" }));
+    const input = form.querySelector<HTMLInputElement>("input")!;
+    const submit = form.querySelector<HTMLButtonElement>('button[type="submit"]')!;
+
+    input.focus();
+    expect(document.activeElement).toBe(input);
+    submit.focus();
+    expect(document.activeElement).toBe(submit);
+  });
+
+  it("adds a caller-owned composition seam without requiring convenience sections", () => {
+    const content = createRawSnippet(() => ({
+      render: () =>
+        '<fieldset data-payment><legend>Payment</legend><label for="card">Card number</label><input id="card" name="card" /></fieldset>',
+    }));
+    const actions = createRawSnippet(() => ({
+      render: () => '<button type="submit">Confirm order</button>',
+    }));
+    const form = rendered(
+      render(CheckoutForm, {
+        children: content,
+        actions,
+        "aria-label": "Advanced checkout",
+      }),
+    );
+
+    expect(form.querySelector("[data-payment] legend")?.textContent).toBe("Payment");
+    expect(form.querySelector('label[for="card"]')?.textContent).toBe("Card number");
+    expect(form.querySelector('button[type="submit"]')?.textContent).toBe("Confirm order");
+  });
+
+  it("inherits nested appearance and keeps every gap Density-owned", () => {
+    const scope = document.createElement("div");
+    scope.dataset.theme = "application";
+    scope.dataset.colorScheme = "dark";
+    scope.dataset.density = "compact";
+    const target = render(CheckoutForm, { sections, submitLabel: "Place order" });
+    scope.append(...target.children);
+    const form = scope.querySelector<HTMLElement>("[data-checkout-form]")!;
+    const styles = checkoutForm();
+
+    for (const name of classesOf(styles.root())) expect(classes(form)).toContain(name);
+    // The Form owns its row rhythm from the layout tier, and a section's
+    // fields keep the Fieldset's (ADR 0024): the composite re-spaces neither.
+    expect(classes(form)).toContain("gap-[var(--reddb-spatial-layout-gap-md)]");
+    for (const section of form.querySelectorAll("fieldset")) {
+      expect(classes(section)).toContain("gap-[var(--reddb-spatial-layout-gap-sm)]");
+    }
+    expect(form.hasAttribute("data-theme")).toBe(false);
+    expect(form.hasAttribute("data-color-scheme")).toBe(false);
+    expect(form.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("consumer-compiles, exports, showcases, and declares complete readiness", () => {
+    expect(render(CommerceSurfacesConsumer).querySelector("[data-checkout-form]")).not.toBeNull();
+    expectCommerceReadiness("checkout-form", "CheckoutForm");
+  });
+});

package/vendor/ds/kits/app/test/coherence.test.ts

@@ -0,0 +1,193 @@
+// The coherence rules wave 3b moved the application Kit onto, read off its
+// source — the same rules, and the same reading, as the Base Kit's own
+// `kits/base/test/coherence.test.ts`.
+//
+//   - Focus is ink (ADR 0023): every focus indicator an App class draws is the
+//     `focus` role as an outline, never the Brand red or any ring colour.
+//   - Container-first (ADR 0021): no App component steps on the viewport,
+//     except the page chrome ADR 0021 reserves it for — SidebarLayout's rail
+//     frame, whose compact presentation is a drawer fixed to the viewport.
+//   - Layout primitives own their rhythm (ADR 0024): the App's layout and
+//     commerce composites space their own blocks from the layout tier, and
+//     never re-space a Base Form or Fieldset.
+//   - One event dialect (ADR 0026): every DS callback is lowercase and is
+//     `onvaluechange`, `onopenchange`, `on<state>change`, or a discrete
+//     `on<noun>`; `onselect` — item activation — is the sanctioned exception.
+
+import { readFileSync } from "node:fs";
+import { relative } from "node:path";
+import { describe, expect, it } from "vitest";
+import {
+  checkoutForm,
+  multiColumnLayout,
+  orderHistory,
+  orderSummary,
+  productFeature,
+  productOverview,
+  productQuickview,
+  shoppingCart,
+  sidebarLayout,
+  splitView,
+} from "../src/index";
+import { kitSourceFiles, SRC_DIR } from "../tools/paths";
+import { classesOf } from "./mount";
+
+const files = kitSourceFiles()
+  .filter((file) => /\.(?:ts|svelte)$/.test(file))
+  .map((file) => ({ name: relative(SRC_DIR, file), text: readFileSync(file, "utf8") }));
+
+/** Every class-like token in a file's string literals and class attributes. */
+function tokens(text: string): string[] {
+  return [...text.matchAll(/["'`]([^"'`\n]*)["'`]/g)].flatMap(([, literal]) => literal!.split(/\s+/));
+}
+
+const VIEWPORT = /^(?:[a-z-]+:)*(?:max-)?(?:sm|md|lg|xl|2xl):/;
+
+describe("the source this file reads", () => {
+  it("is the Kit's components and their variants, both kinds", () => {
+    expect(files.filter(({ name }) => name.endsWith(".svelte")).length).toBeGreaterThan(30);
+    expect(files.filter(({ name }) => name.endsWith(".variants.ts")).length).toBeGreaterThan(30);
+  });
+});
+
+describe("the application Kit's focus indicators", () => {
+  it("draw only the ink focus role, as a 2px outline at a 2px offset", () => {
+    const offenders = files.flatMap(({ name, text }) =>
+      tokens(text)
+        .filter((token) => /focus(?:-visible|-within)?:/.test(token))
+        // `-outline-offset-2` is the same outline drawn inside a control a
+        // scroll region would otherwise clip (SidebarRail's tiles).
+        .filter((token) => /:(?:ring-(?!0\b)|-?outline-(?!none\b|hidden\b|2\b|offset-2\b|focus\b))/.test(token))
+        .map((token) => `${name}: ${token}`),
+    );
+    expect(offenders).toEqual([]);
+
+    // Every file that styles focus-visible styles it with the role.
+    for (const { name, text } of files) {
+      const styles = tokens(text).some((token) => /(?:^|:)focus-visible:(?:outline|ring)-/.test(token));
+      if (!styles) continue;
+      const outlines = tokens(text).filter((token) => /focus-visible:-?outline-(?:2|offset-2|focus)$/.test(token));
+      expect(outlines.length, `${name} draws the focus outline`).toBeGreaterThanOrEqual(3);
+    }
+  });
+
+  it("never names the Brand red or a feedback colour as a focus ring", () => {
+    const red = files.flatMap(({ name, text }) =>
+      tokens(text)
+        .filter((token) => /(?:ring|outline)-(?:primary|feedback-)/.test(token))
+        .map((token) => `${name}: ${token}`),
+    );
+    expect(red).toEqual([]);
+  });
+});
+
+describe("the application Kit's responsive steps", () => {
+  it("never query the viewport outside SidebarLayout's rail chrome", () => {
+    const offenders = files.flatMap(({ name, text }) =>
+      tokens(text)
+        .filter((token) => VIEWPORT.test(token))
+        .filter(() => !/(?:^|\/)(?:sidebar-layout\.variants\.ts|SidebarLayout\.svelte)$/.test(name))
+        .map((token) => `${name}: ${token}`),
+    );
+    expect(offenders).toEqual([]);
+  });
+
+  it("keep the panel SidebarLayout container-first, and the viewport for the rail frame alone", () => {
+    for (const side of ["start", "end"] as const) {
+      const panel = sidebarLayout({ side, rail: false });
+      const worn = [panel.root(), panel.region(), panel.sidebar(), panel.content()].flatMap((name) => [
+        ...classesOf(name),
+      ]);
+      expect(worn.filter((name) => VIEWPORT.test(name)), side).toEqual([]);
+      expect(classesOf(panel.root()).has("@container/sidebar-layout")).toBe(true);
+      expect(classesOf(panel.sidebar()).has("@3xl/sidebar-layout:basis-0")).toBe(true);
+      expect(classesOf(panel.content()).has("@3xl/sidebar-layout:basis-0")).toBe(true);
+    }
+  });
+
+  it("declare a named size container where the layout steps", () => {
+    expect(classesOf(multiColumnLayout().root()).has("@container/multi-column-layout")).toBe(true);
+    expect(classesOf(multiColumnLayout({ columns: "three" }).end()).has("@5xl/multi-column-layout:basis-0")).toBe(
+      true,
+    );
+    expect(classesOf(productFeature().root()).has("@container/product-feature")).toBe(true);
+    expect(classesOf(splitView().pane()).has("@container/split-pane")).toBe(true);
+  });
+
+  it("step the two-column commerce grids intrinsically on their own width", () => {
+    for (const worn of [productOverview().root(), productQuickview().content()]) {
+      const track = [...classesOf(worn)].find((name) => name.startsWith("grid-cols-"));
+      expect(track).toMatch(/^grid-cols-\[repeat\(auto-fill,/);
+      expect(track).toContain("var(--reddb-container-3xl)");
+      expect(track).toContain("var(--reddb-spatial-layout-gap-md)");
+    }
+    // A cart item wraps its controls below its details on its own width.
+    expect(classesOf(shoppingCart().item()).has("flex-wrap")).toBe(true);
+  });
+});
+
+describe("the application layout composites", () => {
+  it("space their own blocks from the layout tier", () => {
+    const LAYOUT_MD = "gap-[var(--reddb-spatial-layout-gap-md)]";
+    const LAYOUT_SM = "gap-[var(--reddb-spatial-layout-gap-sm)]";
+    expect(classesOf(multiColumnLayout().root()).has(LAYOUT_MD)).toBe(true);
+    expect(classesOf(sidebarLayout({ rail: false }).root()).has(LAYOUT_MD)).toBe(true);
+    expect(classesOf(productOverview().root()).has(LAYOUT_MD)).toBe(true);
+    expect(classesOf(productQuickview().content()).has(LAYOUT_MD)).toBe(true);
+    expect(classesOf(productFeature().root()).has(LAYOUT_MD)).toBe(true);
+    expect(classesOf(orderHistory().root()).has(LAYOUT_SM)).toBe(true);
+    expect(classesOf(orderSummary().content()).has(LAYOUT_SM)).toBe(true);
+  });
+
+  it("never re-space the Base Form and Fieldset they compose", () => {
+    for (const worn of [checkoutForm().root(), checkoutForm().section(), shoppingCart().root()]) {
+      expect([...classesOf(worn)].filter((name) => /^(?:gap|flex|grid)(?:-|$)/.test(name))).toEqual([]);
+    }
+  });
+});
+
+describe("the application Kit's event dialect", () => {
+  /** Discrete DS events: a noun, never a native event name — except `onselect`. */
+  // PlaybackControls emits a discrete step request; the application owns execution.
+  const DISCRETE = new Set(["ondismiss", "onremove", "onstep"]);
+  /** The sanctioned exception (maintainer decision, 2026-10-06): item activation. */
+  const SANCTIONED = new Set(["onselect"]);
+  const NATIVE = new Set(["onchange", "oninput", "onclick"]);
+
+  it("names every callback in the one dialect, with onselect as the sanctioned exception", () => {
+    const offenders: string[] = [];
+    let sanctioned = 0;
+    for (const { name, text } of files) {
+      const lines = text.split("\n");
+      lines.forEach((line, index) => {
+        const match = /^\s+(on[A-Za-z]+)\?:\s*(.*)$/.exec(line);
+        if (!match) return;
+        const [, callback, type] = match as unknown as [string, string, string];
+        const deprecated = /@deprecated/.test(lines[index - 1] ?? "");
+        const where = `${name}: ${callback}`;
+        if (deprecated) return;
+        if (callback !== callback.toLowerCase()) offenders.push(`${where} is not lowercase`);
+        else if (SANCTIONED.has(callback)) sanctioned += 1;
+        else if (NATIVE.has(callback)) {
+          if (!/Attributes\["on/.test(type)) offenders.push(`${where} reuses a native name: ${type}`);
+        } else if (!/^on[a-z]*change$/.test(callback) && !DISCRETE.has(callback)) {
+          offenders.push(`${where} is outside the dialect`);
+        }
+      });
+    }
+    expect(offenders).toEqual([]);
+    expect(sanctioned).toBeGreaterThan(0);
+  });
+
+  it("keeps every renamed callback only as a documented, deprecated alias", () => {
+    const aliases = files.flatMap(({ name, text }) => {
+      const lines = text.split("\n");
+      return lines.flatMap((line, index) => {
+        const match = /^\s+(on[A-Za-z]*[A-Z][A-Za-z]*|onvalueschange)\?:/.exec(line);
+        if (!match) return [];
+        return /@deprecated/.test(lines[index - 1] ?? "") ? [] : [`${name}: ${match[1]}`];
+      });
+    });
+    expect(aliases).toEqual([]);
+  });
+});