@reddb-io/ui-kit 0.3.4 → 0.3.5

package/vendor/ds/kits/base/test/card-media.test.ts

@@ -0,0 +1,113 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import {
+  CARD_MEDIA_FITS,
+  CARD_MEDIA_POSITIONS,
+  CARD_MEDIA_RATIOS,
+  CARD_MEDIA_SPANS,
+  Card,
+} from "./fixtures/surface-separation-consumer";
+import { classes, render, rendered } from "./mount";
+
+const image = createRawSnippet(() => ({
+  render: () => '<img src="/product.webp" alt="Product" width="1200" height="800" />',
+}));
+
+describe("the Base Card media model", () => {
+  it("exposes the complete orthogonal media vocabulary", () => {
+    expect(CARD_MEDIA_FITS).toEqual(["cover", "contain"]);
+    expect(CARD_MEDIA_POSITIONS).toEqual(["center", "top", "bottom", "start", "end"]);
+    expect(CARD_MEDIA_RATIOS).toEqual(["16/9", "4/3", "1/1", "auto"]);
+    expect(CARD_MEDIA_SPANS).toEqual(["third", "two-fifths", "half", "background"]);
+  });
+
+  it("maps fit, focal position, and ratio independently onto the media region", () => {
+    const expectedFit = {
+      cover: "[&>*]:object-cover",
+      contain: "[&>*]:object-contain",
+    } as const;
+    const expectedPosition = {
+      center: "[&>*]:object-center",
+      top: "[&>*]:object-top",
+      bottom: "[&>*]:object-bottom",
+      start: "[&>*]:object-left",
+      end: "[&>*]:object-right",
+    } as const;
+    const expectedRatio = {
+      "16/9": "aspect-video",
+      "4/3": "aspect-[4/3]",
+      "1/1": "aspect-square",
+      auto: "aspect-auto",
+    } as const;
+
+    for (const fit of CARD_MEDIA_FITS) {
+      const media = rendered(render(Card, { media: image, fit })).querySelector(
+        "[data-card-media]",
+      )!;
+      expect(classes(media).has(expectedFit[fit])).toBe(true);
+    }
+    for (const position of CARD_MEDIA_POSITIONS) {
+      const media = rendered(
+        render(Card, { media: image, position }),
+      ).querySelector("[data-card-media]")!;
+      expect(classes(media).has(expectedPosition[position])).toBe(true);
+    }
+    for (const ratio of CARD_MEDIA_RATIOS) {
+      const media = rendered(
+        render(Card, { media: image, ratio }),
+      ).querySelector("[data-card-media]")!;
+      expect(classes(media).has(expectedRatio[ratio])).toBe(true);
+    }
+  });
+
+  it("gives horizontal media every declared width and vertical media a full-bleed band", () => {
+    const widths = {
+      third: "@sm/card:w-1/3",
+      "two-fifths": "@sm/card:w-2/5",
+      half: "@sm/card:w-1/2",
+    } as const;
+
+    for (const span of ["third", "two-fifths", "half"] as const) {
+      const horizontal = rendered(
+        render(Card, { media: image, orientation: "horizontal", span }),
+      ).querySelector("[data-card-media]")!;
+      const vertical = rendered(
+        render(Card, { media: image, orientation: "vertical", span }),
+      ).querySelector("[data-card-media]")!;
+
+      expect(classes(horizontal).has(widths[span])).toBe(true);
+      expect(classes(vertical).has("w-full")).toBe(true);
+    }
+  });
+
+  it("layers background media behind content with the BackgroundMedia scrim contract", () => {
+    const card = rendered(
+      render(Card, {
+        media: image,
+        span: "background",
+        title: "Overlaid title",
+      }),
+    );
+    const media = card.querySelector("[data-card-media]")!;
+    const content = card.querySelector("[data-card-content]")!;
+    const scrim = card.querySelector("[data-background-media-scrim]")!;
+
+    expect(classes(media).has("absolute")).toBe(true);
+    expect(classes(media).has("inset-0")).toBe(true);
+    expect(classes(content).has("relative")).toBe(true);
+    expect(classes(content).has("z-10")).toBe(true);
+    expect(scrim.getAttribute("data-background-media-scrim")).toBe("strong");
+  });
+
+  it("preserves media aspect and clips every span to the Card radius", () => {
+    for (const span of CARD_MEDIA_SPANS) {
+      const card = rendered(render(Card, { media: image, span }));
+      const media = card.querySelector("[data-card-media]")!;
+
+      expect(classes(card).has("rounded-lg")).toBe(true);
+      expect(classes(card).has("overflow-hidden")).toBe(true);
+      expect(classes(media).has("[&>*]:object-cover")).toBe(true);
+      expect(classes(media).has("[&>*]:object-fill")).toBe(false);
+    }
+  });
+});

package/vendor/ds/kits/base/test/card-tone-api.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { CARD_TONES, DEPRECATED_CARD_TONES, TONES } from "./fixtures/surface-separation-consumer";
+
+describe("the Base Card tone vocabulary", () => {
+  it("publishes the shared tone set through the Base Kit entry point", () => {
+    // One vocabulary (ADR 0026): Card's tones are TONES, and `brand` — an
+    // emphasis, not a tone — stays one release as a deprecated value.
+    expect(CARD_TONES).toEqual(TONES);
+    expect(CARD_TONES).toEqual(["neutral", "info", "success", "warning", "danger"]);
+    expect(DEPRECATED_CARD_TONES).toEqual(["brand"]);
+  });
+});

package/vendor/ds/kits/base/test/card-tone-contrast.test.ts

@@ -0,0 +1,120 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+import {
+  APPEARANCE_THEMES,
+  BASE_THEME,
+  COLOR_SCHEMES,
+} from "../../../packages/theme/src/appearance";
+import {
+  appearanceThemeCssPath,
+  colorSchemeCssPath,
+} from "../../../packages/theme/src/paths";
+import {
+  cascadeFor,
+  over,
+  parseStylesheets,
+  resolveColor,
+  resolveProperty,
+} from "../../../packages/theme/test/support/cascade";
+
+/** Where a Card can sit: the page and every elevation surface. */
+const GROUNDS = ["background", "sunken", "base", "raised", "overlay"].map((ground) =>
+  ground === "background" ? "--reddb-color-background" : `--reddb-color-elevation-${ground}-surface`,
+);
+
+const composition = parseStylesheets([
+  readFileSync(
+    join(import.meta.dirname, "..", "..", "..", "packages", "tokens", "dist", "tokens.css"),
+    "utf8",
+  ),
+  readFileSync(appearanceThemeCssPath(BASE_THEME), "utf8"),
+  ...APPEARANCE_THEMES.map((theme) =>
+    readFileSync(appearanceThemeCssPath(theme), "utf8"),
+  ),
+  ...COLOR_SCHEMES.map((scheme) => readFileSync(colorSchemeCssPath(scheme), "utf8")),
+]);
+
+const contracts = {
+  neutral: {
+    surface: "--reddb-color-background",
+    title: "--reddb-color-foreground",
+    description: "--reddb-color-ink-muted",
+    body: "--reddb-color-foreground",
+  },
+  brand: {
+    surface: "--reddb-color-primary",
+    title: "--reddb-color-on-primary",
+    description: "--reddb-color-on-primary",
+    body: "--reddb-color-on-primary",
+  },
+  success: {
+    surface: "--reddb-color-feedback-success-surface",
+    title: "--reddb-color-feedback-success-foreground",
+    description: "--reddb-color-feedback-success-foreground",
+    body: "--reddb-color-feedback-success-foreground",
+  },
+  warning: {
+    surface: "--reddb-color-feedback-warning-surface",
+    title: "--reddb-color-feedback-warning-foreground",
+    description: "--reddb-color-feedback-warning-foreground",
+    body: "--reddb-color-feedback-warning-foreground",
+  },
+  danger: {
+    surface: "--reddb-color-feedback-danger-surface",
+    title: "--reddb-color-feedback-danger-foreground",
+    description: "--reddb-color-feedback-danger-foreground",
+    body: "--reddb-color-feedback-danger-foreground",
+  },
+  info: {
+    surface: "--reddb-color-feedback-info-surface",
+    title: "--reddb-color-feedback-info-foreground",
+    description: "--reddb-color-feedback-info-foreground",
+    body: "--reddb-color-feedback-info-foreground",
+  },
+} as const;
+
+function channel(hex: string, offset: number): number {
+  const value = Number.parseInt(hex.slice(offset, offset + 2), 16) / 255;
+  return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+}
+
+function luminance(hex: string): number {
+  return 0.2126 * channel(hex, 1) + 0.7152 * channel(hex, 3) + 0.0722 * channel(hex, 5);
+}
+
+function contrast(left: string, right: string): number {
+  const [lighter, darker] = [luminance(left), luminance(right)].sort((a, b) => b - a);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+describe("the Base Card tone contrast contract", () => {
+  it("keeps title, description, and body at normal-text AA in every appearance", () => {
+    for (const theme of APPEARANCE_THEMES) {
+      for (const scheme of COLOR_SCHEMES) {
+        const cascade = cascadeFor(composition, [
+          { "data-theme": theme.name, "data-color-scheme": scheme.name },
+        ]);
+
+        for (const [tone, contract] of Object.entries(contracts)) {
+          // A translucent tone surface (ADR 0019) is measured over every
+          // ground the Card can land on.
+          const fill = resolveColor(cascade, contract.surface);
+          const surfaces =
+            fill.alpha === 1
+              ? [fill.hex]
+              : GROUNDS.map((ground) => over(fill, resolveProperty(cascade, ground)));
+          for (const surface of surfaces) {
+            for (const region of ["title", "description", "body"] as const) {
+              const foreground = resolveProperty(cascade, contract[region]);
+              expect(
+                contrast(surface, foreground),
+                `${tone} ${region} at ${theme.name}/${scheme.name}`,
+              ).toBeGreaterThanOrEqual(4.5);
+            }
+          }
+        }
+      }
+    }
+  });
+});

package/vendor/ds/kits/base/test/card-tone.test.ts

@@ -0,0 +1,103 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import { Card } from "./fixtures/surface-separation-consumer";
+import { classes, render, rendered } from "./mount";
+
+// `info` is feedback-info here as on every component (ADR 0026); `brand` is a
+// deprecated value kept one release with its accent fill.
+const tones = ["neutral", "brand", "success", "warning", "danger", "info"] as const;
+const variants = ["outline", "plain"] as const;
+const orientations = ["vertical", "horizontal"] as const;
+
+const contracts = {
+  neutral: {
+    surface: "bg-elevation-raised-surface",
+    border: "border-muted",
+    foreground: "text-foreground",
+    description: "text-ink-muted",
+  },
+  brand: {
+    surface: "bg-[var(--reddb-color-primary)]",
+    border: "border-[var(--reddb-color-primary)]",
+    foreground: "text-[var(--reddb-color-on-primary)]",
+    description: "text-[var(--reddb-color-on-primary)]",
+  },
+  success: {
+    surface: "bg-[var(--reddb-color-feedback-success-surface)]",
+    border: "border-[var(--reddb-color-feedback-success-border)]",
+    foreground: "text-[var(--reddb-color-feedback-success-foreground)]",
+    description: "text-[var(--reddb-color-feedback-success-foreground)]",
+  },
+  warning: {
+    surface: "bg-[var(--reddb-color-feedback-warning-surface)]",
+    border: "border-[var(--reddb-color-feedback-warning-border)]",
+    foreground: "text-[var(--reddb-color-feedback-warning-foreground)]",
+    description: "text-[var(--reddb-color-feedback-warning-foreground)]",
+  },
+  danger: {
+    surface: "bg-[var(--reddb-color-feedback-danger-surface)]",
+    border: "border-[var(--reddb-color-feedback-danger-border)]",
+    foreground: "text-[var(--reddb-color-feedback-danger-foreground)]",
+    description: "text-[var(--reddb-color-feedback-danger-foreground)]",
+  },
+  info: {
+    surface: "bg-[var(--reddb-color-feedback-info-surface)]",
+    border: "border-[var(--reddb-color-feedback-info-border)]",
+    foreground: "text-[var(--reddb-color-feedback-info-foreground)]",
+    description: "text-[var(--reddb-color-feedback-info-foreground)]",
+  },
+} as const;
+
+const content = createRawSnippet(() => ({ render: () => "<span>Body</span>" }));
+const media = createRawSnippet(() => ({ render: () => '<img src="/media.webp" alt="" />' }));
+
+describe("the Base Card tone contract", () => {
+  it("warns once in development when the deprecated brand tone is used", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      rendered(render(Card, { tone: "info", title: "Info" }));
+      expect(warn).not.toHaveBeenCalled();
+      rendered(render(Card, { tone: "brand", title: "Brand" }));
+      rendered(render(Card, { tone: "brand", title: "Brand" }));
+      expect(warn).toHaveBeenCalledTimes(1);
+      expect(String(warn.mock.calls[0]![0])).toMatch(/\[reddb Card\] tone="brand" is deprecated/);
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("composes every token-owned tone with both variants and orientations", () => {
+    for (const tone of tones) {
+      for (const variant of variants) {
+        for (const orientation of orientations) {
+          const card = rendered(
+            render(Card, {
+              tone,
+              variant,
+              orientation,
+              title: "Title",
+              description: "Description",
+              children: content,
+              footer: content,
+              media,
+            }),
+          );
+          const contract = contracts[tone];
+
+          expect(card.dataset.tone).toBe(tone);
+          expect(classes(card).has(contract.surface), `${tone}/${variant}/${orientation}`).toBe(true);
+          expect(classes(card).has(contract.foreground), `${tone}/${variant}/${orientation}`).toBe(true);
+          expect(classes(card).has(variant === "outline" ? contract.border : "border-transparent")).toBe(true);
+
+          for (const selector of ["[data-card-header]", "[data-card-title]", "[data-card-body]", "[data-card-footer]"]) {
+            expect(classes(card.querySelector(selector)!).has(contract.foreground), `${tone} ${selector}`).toBe(true);
+          }
+          expect(classes(card.querySelector("[data-card-description]")!).has(contract.description)).toBe(true);
+
+          const mediaClasses = classes(card.querySelector("[data-card-media]")!);
+          expect([...mediaClasses].some((name) => name.startsWith("bg-") || name.startsWith("text-"))).toBe(false);
+        }
+      }
+    }
+  });
+});

package/vendor/ds/kits/base/test/carousel.test.ts

@@ -0,0 +1,63 @@
+import { createRawSnippet, flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import { Carousel } from "./fixtures/media-presentation-consumer";
+import { render, rendered } from "./mount";
+
+const slides = ["Architecture", "Delivery", "Operations"].map((label) => ({
+  label,
+  content: createRawSnippet(() => ({ render: () => `<p>${label}</p>` })),
+}));
+
+describe("the Base Carousel", () => {
+  it("names its slide set and moves through it with canonical controls", () => {
+    const element = rendered(render(Carousel, {
+      label: "Platform capabilities",
+      slides,
+    }));
+    const panels = [...element.querySelectorAll<HTMLElement>("[data-carousel-slide]")];
+    const next = element.querySelector<HTMLButtonElement>("[aria-label='Next slide']")!;
+
+    expect(element.getAttribute("role")).toBe("region");
+    expect(element.getAttribute("aria-roledescription")).toBe("carousel");
+    expect(element.getAttribute("aria-label")).toBe("Platform capabilities");
+    expect(panels.map((panel) => panel.hidden)).toEqual([false, true, true]);
+    expect(panels[0]?.getAttribute("aria-label")).toBe("1 of 3 — Architecture");
+
+    next.focus();
+    next.click();
+    flushSync();
+    expect(document.activeElement).toBe(next);
+    expect(panels.map((panel) => panel.hidden)).toEqual([true, false, true]);
+  });
+
+  it("makes opt-in rotation explicitly pausable", () => {
+    vi.useFakeTimers();
+    try {
+      const element = rendered(render(Carousel, {
+        label: "Platform capabilities",
+        slides,
+        autoplay: true,
+        interval: 1_000,
+      }));
+      const panels = [...element.querySelectorAll<HTMLElement>("[data-carousel-slide]")];
+      const viewport = element.querySelector<HTMLElement>("[data-carousel-viewport]")!;
+      const rotation = element.querySelector<HTMLButtonElement>("[data-carousel-rotation]")!;
+
+      expect(rotation.getAttribute("aria-label")).toBe("Pause slide rotation");
+      expect(viewport.getAttribute("aria-live")).toBe("off");
+      vi.advanceTimersByTime(1_000);
+      flushSync();
+      expect(panels.map((panel) => panel.hidden)).toEqual([true, false, true]);
+
+      rotation.click();
+      flushSync();
+      expect(rotation.getAttribute("aria-label")).toBe("Resume slide rotation");
+      expect(viewport.getAttribute("aria-live")).toBe("polite");
+      vi.advanceTimersByTime(2_000);
+      flushSync();
+      expect(panels.map((panel) => panel.hidden)).toEqual([true, false, true]);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

package/vendor/ds/kits/base/test/checkbox.test.ts

@@ -0,0 +1,165 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import BinaryChoiceConsumer from "./fixtures/BinaryChoiceConsumer.svelte";
+import BinaryChoiceContractFailures from "./fixtures/BinaryChoiceContractFailures.svelte";
+import { Checkbox, checkbox } from "./fixtures/binary-choice-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function renderedCheckbox(props: Record<string, unknown> = {}): HTMLInputElement {
+  const root = rendered(render(Checkbox, { label: "Share diagnostics", ...props }));
+  return root.querySelector<HTMLInputElement>('input[type="checkbox"]')!;
+}
+
+function checkboxNamingFailures(root: HTMLElement): string[] {
+  const control = root.querySelector<HTMLInputElement>('input[type="checkbox"]');
+  const label = control?.id
+    ? root.querySelector<HTMLLabelElement>(`label[for="${control.id}"]`)
+    : control?.closest("label");
+  return control && (label?.textContent?.trim() || control.getAttribute("aria-label"))
+    ? []
+    : ["checkbox has no accessible label"];
+}
+
+describe("the Base Checkbox", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(Checkbox).toBeDefined();
+    expect(checkbox).toBeTypeOf("function");
+  });
+
+  it("composes Field into a visible native checkbox contract", () => {
+    const root = rendered(
+      render(Checkbox, {
+        label: "Share diagnostics",
+        help: "Includes anonymous performance measurements.",
+        error: "Choose whether diagnostics may be shared.",
+        required: true,
+        name: "telemetry",
+      }),
+    );
+    const element = root.querySelector<HTMLInputElement>('input[type="checkbox"]')!;
+    const label = root.querySelector<HTMLLabelElement>(`label[for="${element.id}"]`);
+
+    expect(element.type).toBe("checkbox");
+    expect(element.name).toBe("telemetry");
+    expect(element.required).toBe(true);
+    expect(label?.textContent).toContain("Share diagnostics");
+    expect(element.getAttribute("aria-describedby")?.split(" ")).toHaveLength(2);
+    expect(element.getAttribute("aria-invalid")).toBe("true");
+    expect(checkboxNamingFailures(root)).toEqual([]);
+  });
+
+  it("puts the control first and its label beside it, with help aligned under the label", () => {
+    const root = rendered(
+      render(Checkbox, {
+        label: "Share diagnostics",
+        help: "Includes anonymous performance measurements.",
+        error: "Choose whether diagnostics may be shared.",
+      }),
+    );
+    const element = root.querySelector<HTMLInputElement>('input[type="checkbox"]')!;
+    const label = root.querySelector<HTMLLabelElement>(`label[for="${element.id}"]`)!;
+    const help = root.querySelector<HTMLElement>(`#${element.id}-help`)!;
+    const error = root.querySelector<HTMLElement>(`#${element.id}-error`)!;
+    const order = [...root.children];
+
+    expect(root.getAttribute("data-field-layout")).toBe("inline");
+    // Control first, label after it, on one two-column row.
+    expect(order.indexOf(element.closest("[data-choice-control]")!)).toBe(0);
+    expect(order.indexOf(label)).toBe(1);
+    expect(classes(root).has("grid-cols-[auto_minmax(0,1fr)]")).toBe(true);
+    expect(classes(root).has("items-center")).toBe(true);
+    // The label stays a clickable native label.
+    expect(classes(label).has("cursor-pointer")).toBe(true);
+    // Help and error wrap underneath, aligned with the label text.
+    expect(classes(help).has("col-start-2")).toBe(true);
+    expect(classes(error).has("col-start-2")).toBe(true);
+    // The association contract is unchanged by the layout.
+    expect(element.getAttribute("aria-describedby")).toBe(`${help.id} ${error.id}`);
+    expect(element.getAttribute("aria-invalid")).toBe("true");
+    expect(element.getAttribute("aria-errormessage")).toBe(error.id);
+
+    label.click();
+    expect(element.checked).toBe(true);
+  });
+
+  it("keeps native focus, checked state, form value, and change events", () => {
+    const onchange = vi.fn();
+    const form = rendered(render(BinaryChoiceConsumer, { checkboxOnchange: onchange }));
+    const element = form.querySelector<HTMLInputElement>('input[type="checkbox"]')!;
+
+    element.focus();
+    expect(document.activeElement).toBe(element);
+    expect(element.checked).toBe(true);
+    expect(new FormData(form as HTMLFormElement).get("telemetry")).toBe("allowed");
+
+    element.checked = false;
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+    flushSync();
+    expect(onchange).toHaveBeenCalledTimes(1);
+    expect(new FormData(form as HTMLFormElement).has("telemetry")).toBe(false);
+  });
+
+  it("keeps the native input as a control-height pointer target and draws the box beside it", () => {
+    const element = renderedCheckbox({ error: "Choose one." });
+    const styles = checkbox();
+    const choice = element.parentElement!;
+    const [box, mark] = [element.nextElementSibling!, element.nextElementSibling!.nextElementSibling!];
+
+    // The input is the only control: the drawing is hidden and inert.
+    expect(choice.matches("[data-choice-control]")).toBe(true);
+    expect(classes(choice)).toEqual(classesOf(styles.root()));
+    expect(classes(choice).has("size-[var(--reddb-spatial-control-height-sm)]")).toBe(true);
+    expect(classes(element).has("appearance-none")).toBe(true);
+    expect(classes(element).has("size-full")).toBe(true);
+    expect(classes(box)).toEqual(classesOf(styles.box()));
+    expect(classes(mark)).toEqual(classesOf(styles.mark()));
+    for (const drawn of [box, mark]) {
+      expect(drawn.getAttribute("aria-hidden")).toBe("true");
+      expect(classes(drawn).has("pointer-events-none")).toBe(true);
+    }
+    // The box is a glyph: the icon role sizes it, not the control height.
+    expect(classes(box).has("size-[var(--reddb-spatial-icon-size-md)]")).toBe(true);
+    // Every state the input holds reaches the drawing through `peer-*`.
+    expect(classes(element).has("peer")).toBe(true);
+    expect(classes(box).has("peer-aria-invalid:border-feedback-danger-border")).toBe(true);
+    expect(classes(box).has("peer-checked:bg-primary")).toBe(true);
+    expect(classes(box).has("peer-focus-visible:outline-focus")).toBe(true);
+    expect(classes(mark).has("peer-checked:visible")).toBe(true);
+    expect(classes(choice).has("has-disabled:opacity-50")).toBe(true);
+    // A mixed checkbox keeps the native dash: the fill, and the mark laid flat.
+    expect(classes(box).has("peer-indeterminate:bg-primary")).toBe(true);
+    expect(classes(mark).has("peer-indeterminate:visible")).toBe(true);
+    expect(classes(mark).has("peer-indeterminate:rotate-0")).toBe(true);
+    // Forced colors hand the control back to the platform, focus outline and all.
+    expect(classes(element).has("forced-colors:appearance-auto")).toBe(true);
+    expect(classes(element).has("focus-visible:outline-hidden")).toBe(true);
+    expect(classes(box).has("forced-colors:hidden")).toBe(true);
+  });
+
+  it("wears its exported appearance without selecting an appearance axis", () => {
+    const element = renderedCheckbox({ class: "shrink-0" });
+    const nested = rendered(render(BinaryChoiceConsumer, {})).querySelector<HTMLInputElement>(
+      '[data-appearance-scope] input[type="checkbox"]:not([role])',
+    )!;
+
+    expect(classes(element)).toEqual(classesOf(checkbox().control({ class: "shrink-0" })));
+    expect(classes(element).has("shrink-0")).toBe(true);
+    expect(classes(element).has("focus-visible:outline-hidden")).toBe(true);
+    expect(element.hasAttribute("data-theme")).toBe(false);
+    expect(element.hasAttribute("data-color-scheme")).toBe(false);
+    expect(element.hasAttribute("data-density")).toBe(false);
+    expect(nested.hasAttribute("data-theme")).toBe(false);
+    expect(nested.hasAttribute("data-color-scheme")).toBe(false);
+    expect(nested.hasAttribute("data-density")).toBe(false);
+    expect(classes(nested.parentElement!).has("size-[var(--reddb-spatial-control-height-sm)]")).toBe(true);
+  });
+});
+
+describe("the deliberately failing checkbox fixture", () => {
+  it("diagnoses a checkbox without an accessible label", () => {
+    const root = rendered(
+      render(BinaryChoiceContractFailures, { failure: "unlabelled-checkbox" }),
+    );
+    expect(checkboxNamingFailures(root)).toEqual(["checkbox has no accessible label"]);
+  });
+});