@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/base/test/section-heading.test.ts

@@ -0,0 +1,59 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import SurfaceControlsConsumer from "./fixtures/SurfaceControlsConsumer.svelte";
+import {
+  SECTION_HEADING_LEVELS,
+  SECTION_HEADING_SIZES,
+  SectionHeading,
+  sectionHeading,
+} from "./fixtures/surface-controls-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function heading(element: HTMLElement): HTMLElement {
+  return element.querySelector("h1, h2, h3, h4, h5, h6") as HTMLElement;
+}
+
+describe("the Base SectionHeading", () => {
+  it("keeps visual size independent from document-outline depth", () => {
+    expect(SECTION_HEADING_LEVELS).toEqual([1, 2, 3, 4, 5, 6]);
+    expect(SECTION_HEADING_SIZES).toEqual(["sm", "md", "lg", "display"]);
+
+    for (const size of SECTION_HEADING_SIZES) {
+      const shallow = heading(rendered(render(SectionHeading, { title: "Deployments", level: 1, size })));
+      const deep = heading(rendered(render(SectionHeading, { title: "Deployments", level: 5, size })));
+      expect(shallow.tagName).toBe("H1");
+      expect(deep.tagName).toBe("H5");
+      expect(classes(shallow)).toEqual(classes(deep));
+      expect(classes(deep)).toEqual(classesOf(sectionHeading({ size }).title()));
+    }
+  });
+
+  it("renders supporting text and caller-owned canonical actions", () => {
+    const actions = createRawSnippet(() => ({
+      render: () => '<button type="button">Filter</button>',
+    }));
+    const root = rendered(
+      render(SectionHeading, {
+        title: "Deployments",
+        description: "Recent activity",
+        actions,
+      }),
+    );
+
+    expect(root.querySelector("h2")?.textContent).toBe("Deployments");
+    expect(root.querySelector("p")?.textContent).toBe("Recent activity");
+    expect(root.querySelector("[data-section-heading-title]")?.textContent).toBe("Deployments");
+    expect(root.querySelector("[data-section-heading-description]")?.textContent).toBe("Recent activity");
+    expect(root.querySelector("button")?.textContent).toBe("Filter");
+  });
+
+  it("uses Density roles and inherits every nested appearance axis", () => {
+    const root = render(SurfaceControlsConsumer)
+      .querySelector<HTMLElement>("[data-section-heading]")!;
+
+    expect(classes(root).has("gap-[var(--reddb-spatial-gap-lg)]")).toBe(true);
+    expect(root.hasAttribute("data-theme")).toBe(false);
+    expect(root.hasAttribute("data-color-scheme")).toBe(false);
+    expect(root.hasAttribute("data-density")).toBe(false);
+  });
+});

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

@@ -0,0 +1,125 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import TextareaSelectContractFailures from "./fixtures/TextareaSelectContractFailures.svelte";
+import TextareaSelectConsumer from "./fixtures/TextareaSelectConsumer.svelte";
+import { Select, select } from "./fixtures/textarea-select-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function renderedSelect(props: Record<string, unknown> = {}): HTMLSelectElement {
+  return rendered(render(Select, props)) as HTMLSelectElement;
+}
+
+function keyboardSelectFailures(root: HTMLElement): string[] {
+  const control = root.querySelector("select");
+  return control && control.tabIndex >= 0 ? [] : ["control is not a native keyboard select"];
+}
+
+describe("the Base Select", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(Select).toBeDefined();
+    expect(select).toBeTypeOf("function");
+  });
+
+  it("is the native select and delegates keyboard and focus behavior to the platform", () => {
+    const onkeydown = vi.fn();
+    const element = renderedSelect({ name: "region", onkeydown });
+    expect(element.tagName).toBe("SELECT");
+    element.focus();
+    expect(document.activeElement).toBe(element);
+
+    element.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    flushSync();
+    expect(onkeydown).toHaveBeenCalledTimes(1);
+    expect(onkeydown.mock.calls[0]?.[0]).toMatchObject({ key: "ArrowDown" });
+  });
+
+  it("forwards native identity, selection, and constraint attributes unchanged", () => {
+    const element = renderedSelect({
+      id: "deployment-region",
+      name: "region",
+      autocomplete: "country-name",
+      required: true,
+      multiple: true,
+      size: 4,
+      "aria-invalid": "true",
+    });
+
+    expect(element.id).toBe("deployment-region");
+    expect(element.name).toBe("region");
+    expect(element.getAttribute("autocomplete")).toBe("country-name");
+    expect(element.required).toBe(true);
+    expect(element.multiple).toBe(true);
+    expect(element.size).toBe(4);
+    expect(element.getAttribute("aria-invalid")).toBe("true");
+  });
+
+  it("renders caller-owned options and participates in native validation and form submission", () => {
+    const form = rendered(render(TextareaSelectConsumer, { required: true }));
+    const element = form.querySelector<HTMLSelectElement>('select[name="region"]')!;
+
+    expect([...element.options].map(({ value }) => value)).toEqual([
+      "",
+      "us-east-1",
+      "sa-east-1",
+    ]);
+    expect(element.value).toBe("sa-east-1");
+    expect(element.checkValidity()).toBe(true);
+    expect(new FormData(form as HTMLFormElement).get("region")).toBe("sa-east-1");
+
+    element.value = "";
+    expect(element.checkValidity()).toBe(false);
+  });
+
+  it("renders declarative flat options without replacing the native select", () => {
+    const element = renderedSelect({
+      value: "POST",
+      options: [
+        { value: "GET", label: "GET" },
+        { value: "POST", label: "POST" },
+        { value: "TRACE", label: "TRACE", disabled: true },
+      ],
+    });
+
+    expect([...element.options].map(({ value, text, disabled }) => ({ value, text, disabled })))
+      .toEqual([
+        { value: "GET", text: "GET", disabled: false },
+        { value: "POST", text: "POST", disabled: false },
+        { value: "TRACE", text: "TRACE", disabled: true },
+      ]);
+    expect(element.value).toBe("POST");
+  });
+
+  it("forwards native change handlers", () => {
+    const onchange = vi.fn();
+    const element = renderedSelect({ onchange });
+    const option = document.createElement("option");
+    option.value = "compact";
+    element.append(option);
+    element.value = "compact";
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+    flushSync();
+    expect(onchange).toHaveBeenCalledTimes(1);
+  });
+
+  it("composes with Field without losing its accessible associations", () => {
+    const form = rendered(render(TextareaSelectConsumer, { required: true }));
+    const element = form.querySelector<HTMLSelectElement>('select[name="region"]')!;
+    const label = form.querySelector<HTMLLabelElement>(`label[for="${element.id}"]`);
+    expect(label?.textContent).toContain("Region");
+    expect(element.required).toBe(true);
+  });
+
+  it("wears exactly its exported appearance and merges consumer classes", () => {
+    const element = renderedSelect({ class: "min-w-0" });
+    expect(classes(element)).toEqual(classesOf(select({ class: "min-w-0" })));
+    expect(classes(element).has("min-w-0")).toBe(true);
+    expect(classes(element).has("focus-visible:outline-focus")).toBe(true);
+  });
+});
+
+describe("the deliberately failing keyboard-select fixture", () => {
+  it("diagnoses a pointer-only substitute", () => {
+    const root = rendered(render(TextareaSelectContractFailures, { failure: "mouse-only-select" }));
+    expect(keyboardSelectFailures(root)).toEqual(["control is not a native keyboard select"]);
+  });
+});

package/vendor/ds/kits/base/test/setup-storage.ts

@@ -0,0 +1,14 @@
+// Node 26 ships its own `localStorage`/`sessionStorage` globals, which are
+// `undefined` without `--localstorage-file` and shadow jsdom's Web Storage in
+// Vitest. Point both back at the jsdom window so components that persist a
+// preference (AppearanceSwitch) are tested against the browser API they use,
+// on every Node the repo supports.
+const dom = (globalThis as { jsdom?: { window: Record<string, unknown> } }).jsdom;
+if (dom) {
+  for (const key of ["localStorage", "sessionStorage"] as const) {
+    Object.defineProperty(globalThis, key, {
+      configurable: true,
+      get: () => dom.window[key],
+    });
+  }
+}

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

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import {
+  SKELETON_SHAPES,
+  Skeleton,
+  skeleton as skeletonAppearance,
+} from "./fixtures/progress-feedback-consumer";
+import ProgressFeedbackConsumer from "./fixtures/ProgressFeedbackConsumer.svelte";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the Base Skeleton", () => {
+  it("offers text, rectangle, and circle placeholders without prescribing content", () => {
+    expect(SKELETON_SHAPES).toEqual(["text", "rectangle", "circle"]);
+    for (const shape of SKELETON_SHAPES) {
+      const element = rendered(render(Skeleton, { shape, class: "max-w-md" }));
+      expect(element.getAttribute("data-shape")).toBe(shape);
+      expect(classes(element)).toEqual(
+        classesOf(skeletonAppearance({ shape, class: "max-w-md" })),
+      );
+    }
+  });
+
+  it("is decorative by default and announces busy only when given ownership", () => {
+    const decorative = rendered(render(Skeleton, {}));
+    const announcing = rendered(render(Skeleton, { label: "Loading node summary" }));
+
+    expect(decorative.getAttribute("aria-hidden")).toBe("true");
+    expect(decorative.hasAttribute("role")).toBe(false);
+    expect(announcing.getAttribute("role")).toBe("status");
+    expect(announcing.getAttribute("aria-live")).toBe("polite");
+    expect(announcing.getAttribute("aria-busy")).toBe("true");
+    expect(announcing.getAttribute("aria-label")).toBe("Loading node summary");
+  });
+
+  it("pulses only when motion is welcome and leaves rectangle height live to Density", () => {
+    const rectangle = rendered(render(Skeleton, { shape: "rectangle" }));
+
+    expect(classes(rectangle).has("motion-safe:animate-pulse")).toBe(true);
+    expect([...classes(rectangle)].some((name) => name.startsWith("animate-"))).toBe(false);
+    expect(classes(rectangle).has("min-h-[var(--reddb-spatial-control-height-lg)]")).toBe(true);
+  });
+
+  it("inherits nested appearance without interrupting caller focus order", () => {
+    const root = render(ProgressFeedbackConsumer);
+    const element = root.querySelector<HTMLElement>("[data-skeleton]")!;
+    const buttons = root.querySelectorAll<HTMLButtonElement>("button");
+
+    buttons[0]!.focus();
+    expect(document.activeElement).toBe(buttons[0]);
+    expect(element.tabIndex).toBe(-1);
+    buttons[1]!.focus();
+    expect(document.activeElement).toBe(buttons[1]);
+    expect(element.hasAttribute("data-theme")).toBe(false);
+    expect(element.hasAttribute("data-color-scheme")).toBe(false);
+    expect(element.hasAttribute("data-density")).toBe(false);
+  });
+});

package/vendor/ds/kits/base/test/skip-link.test.ts

@@ -0,0 +1,49 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import { SkipLink, skipLink as skipLinkAppearance } from "./fixtures/layout-consumer";
+import LayoutConsumer from "./fixtures/LayoutConsumer.svelte";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the Base SkipLink", () => {
+  it("targets the canonical main landmark with a useful default label", () => {
+    const root = render(LayoutConsumer);
+    const link = root.querySelector<HTMLAnchorElement>("[data-skip-link]")!;
+    const target = root.querySelector<HTMLElement>(link.hash)!;
+
+    expect(link.getAttribute("href")).toBe("#main-content");
+    expect(link.textContent).toBe("Skip to main content");
+    expect(target.tagName).toBe("MAIN");
+    expect(target.tabIndex).toBe(-1);
+
+    link.click();
+    expect(document.activeElement).toBe(target);
+  });
+
+  it("is keyboard focusable and carries a focus-visible escape from visual hiding", () => {
+    const link = rendered(render(SkipLink)) as HTMLAnchorElement;
+
+    link.focus();
+
+    expect(document.activeElement).toBe(link);
+    expect(classes(link)).toEqual(classesOf(skipLinkAppearance()));
+    expect(classes(link).has("sr-only")).toBe(true);
+    expect(classes(link).has("focus:not-sr-only")).toBe(true);
+    expect(classes(link).has("focus-visible:outline-focus")).toBe(true);
+  });
+
+  it("preserves native anchor attributes and caller-owned content", () => {
+    const link = rendered(
+      render(SkipLink, {
+        href: "#article",
+        rel: "bookmark",
+        class: "uppercase",
+        children: createRawSnippet(() => ({ render: () => "<span>Jump to article</span>" })),
+      }),
+    ) as HTMLAnchorElement;
+
+    expect(link.getAttribute("href")).toBe("#article");
+    expect(link.getAttribute("rel")).toBe("bookmark");
+    expect(link.textContent).toBe("Jump to article");
+    expect(classes(link)).toEqual(classesOf(skipLinkAppearance({ class: "uppercase" })));
+  });
+});

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

@@ -0,0 +1,89 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import RangePressedConsumer from "./fixtures/RangePressedConsumer.svelte";
+import RangePressedContractFailures from "./fixtures/RangePressedContractFailures.svelte";
+import { Slider, slider } from "./fixtures/range-pressed-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function accessibleValueFailures(root: HTMLElement): string[] {
+  const selector = 'input[type="range"], [role="slider"]';
+  const control = root.matches(selector)
+    ? root
+    : root.querySelector<HTMLElement>(selector);
+  if (!control) return ["slider is missing"];
+  if (control instanceof HTMLInputElement && Number.isFinite(control.valueAsNumber)) return [];
+  return control.hasAttribute("aria-valuenow") || control.hasAttribute("aria-valuetext")
+    ? []
+    : ["slider has no accessible value"];
+}
+
+describe("the Base Slider", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(Slider).toBeDefined();
+    expect(slider).toBeTypeOf("function");
+  });
+
+  it("composes Field around a named native range with an accessible value", () => {
+    const root = rendered(
+      render(Slider, {
+        label: "Deployment capacity",
+        min: 10,
+        max: 90,
+        step: 10,
+        value: 40,
+        formatValue: (current: number) => `${current}%`,
+      }),
+    );
+    const control = root.querySelector<HTMLInputElement>('input[type="range"]')!;
+
+    expect(root.querySelector(`label[for="${control.id}"]`)?.textContent).toContain(
+      "Deployment capacity",
+    );
+    expect(control.valueAsNumber).toBe(40);
+    expect(control.min).toBe("10");
+    expect(control.max).toBe("90");
+    expect(control.step).toBe("10");
+    expect(control.getAttribute("aria-valuetext")).toBe("40%");
+    expect(root.querySelector("output")?.textContent).toBe("40%");
+    expect(accessibleValueFailures(root)).toEqual([]);
+  });
+
+  it("keeps native focus, keyboard events, live value, and form submission", () => {
+    const oninput = vi.fn();
+    const form = rendered(render(RangePressedConsumer, { sliderOninput: oninput }));
+    const control = form.querySelector<HTMLInputElement>('input[name="capacity"]')!;
+
+    control.focus();
+    expect(document.activeElement).toBe(control);
+    control.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    control.value = "60";
+    control.dispatchEvent(new Event("input", { bubbles: true }));
+    flushSync();
+
+    expect(oninput).toHaveBeenCalledTimes(1);
+    expect(form.querySelector(`output[for="${control.id}"]`)?.textContent).toBe("60%");
+    expect(new FormData(form as HTMLFormElement).get("capacity")).toBe("60");
+  });
+
+  it("wears token-backed appearance inside a caller-owned nested scope", () => {
+    const form = rendered(render(RangePressedConsumer, {}));
+    const root = form.querySelector<HTMLElement>("[data-appearance-scope] [data-slider]")!;
+    const control = root.querySelector<HTMLInputElement>('input[type="range"]')!;
+    const styles = slider();
+
+    expect(classes(control)).toEqual(classesOf(styles.control()));
+    expect(classes(control).has("h-[var(--reddb-spatial-control-height-sm)]")).toBe(true);
+    expect(root.hasAttribute("data-theme")).toBe(false);
+    expect(root.hasAttribute("data-color-scheme")).toBe(false);
+    expect(root.hasAttribute("data-density")).toBe(false);
+  });
+});
+
+describe("the deliberately failing Slider fixture", () => {
+  it("diagnoses a slider without an accessible value", () => {
+    const root = rendered(
+      render(RangePressedContractFailures, { failure: "missing-slider-value" }),
+    );
+    expect(accessibleValueFailures(root)).toEqual(["slider has no accessible value"]);
+  });
+});

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

@@ -0,0 +1,207 @@
+// Presentations (ADR 0027): SlideFrame, the slide layouts and Deck.
+//
+// What is pinned here is the markup contract jsdom can see: the frame is a
+// named "slide" group carrying `data-slide-frame` (the attribute the Theme's
+// print rules key on), it scales a fixed canvas with `zoom` rather than a
+// transform, it pins the layout and section tiers to the neutral stop's Brand
+// steps without selecting an axis, and every layout takes its type from the
+// Theme's roles. Geometry — the 16:9 ratio, scaling, overflow — is measured in
+// a real browser by the showcase (`slide-frame.browser.test.ts`).
+
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { createRawSnippet, type Component } from "svelte";
+import { describe, expect, it } from "vitest";
+import {
+  BulletsSlide,
+  Deck,
+  FigureSlide,
+  QuoteSlide,
+  SLIDE_SURFACES,
+  SectionSlide,
+  SlideFrame,
+  TitleSlide,
+  TwoColumnSlide,
+  slideFrame,
+} from "@reddb-io/design-system/base";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const words = (content: string) => createRawSnippet(() => ({ render: () => `<span>${content}</span>` }));
+const DENSITY_DIR = join(import.meta.dirname, "..", "..", "..", "packages", "tokens", "dist");
+
+function expectNoAxis(target: HTMLElement) {
+  for (const attribute of ["data-theme", "data-color-scheme", "data-density"]) {
+    expect(target.querySelector(`[${attribute}]`), attribute).toBeNull();
+  }
+}
+
+/** Every layout, with the props it needs to render. */
+const LAYOUTS: readonly { name: string; component: Component<never>; props: Record<string, unknown>; titleRole?: string }[] = [
+  {
+    name: "TitleSlide",
+    component: TitleSlide as Component<never>,
+    props: { title: "One system", eyebrow: "reddb.io", subtitle: "Every medium", presenter: "The DS team" },
+    titleRole: "display",
+  },
+  { name: "SectionSlide", component: SectionSlide as Component<never>, props: { title: "Part two", summary: "Media" }, titleRole: "display" },
+  {
+    name: "TwoColumnSlide",
+    component: TwoColumnSlide as Component<never>,
+    props: { title: "Before and after", start: words("before"), end: words("after") },
+    titleRole: "title",
+  },
+  {
+    name: "FigureSlide",
+    component: FigureSlide as Component<never>,
+    props: { title: "Readiness by medium", figure: words("chart"), caption: "Audit, 2026-10-05" },
+    titleRole: "title",
+  },
+  { name: "QuoteSlide", component: QuoteSlide as Component<never>, props: { quote: "Tokens only.", attribution: "AGENTS.md" } },
+  {
+    name: "BulletsSlide",
+    component: BulletsSlide as Component<never>,
+    props: { title: "Non-negotiables", items: ["Tokens only", "Density owns spatial values"] },
+    titleRole: "title",
+  },
+];
+
+describe("the Base SlideFrame", () => {
+  it("is a named slide group carrying the print hook", () => {
+    const frame = rendered(render(SlideFrame, { label: "Opening", children: words("Hello") }));
+    expect(frame.getAttribute("role")).toBe("group");
+    expect(frame.getAttribute("aria-roledescription")).toBe("slide");
+    expect(frame.getAttribute("aria-label")).toBe("Opening");
+    expect(frame.hasAttribute("data-slide-frame")).toBe(true);
+    expect(frame.querySelector("[data-slide-safe-area]")?.textContent).toBe("Hello");
+  });
+
+  it("is a 16:9 size container that zooms a fixed canvas instead of transforming it", () => {
+    const frame = rendered(render(SlideFrame, { label: "Canvas" }));
+    const stage = frame.querySelector("[data-slide-stage]")!;
+    for (const name of ["@container/slide-frame", "aspect-video", "w-full", "overflow-hidden", "break-inside-avoid"]) {
+      expect(classes(frame).has(name), name).toBe(true);
+    }
+    for (const name of ["w-[60rem]", "aspect-video", "[zoom:tan(atan2(100cqi,60rem))]", "@container/slide"]) {
+      expect(classes(stage).has(name), name).toBe(true);
+    }
+    const all = [...classes(frame), ...classes(stage)];
+    expect(all.filter((name) => /^(?:scale-|transform|\[transform)/.test(name))).toEqual([]);
+  });
+
+  it("pins the layout and section tiers to the comfortable stop's Brand steps", () => {
+    const comfortable = readFileSync(join(DENSITY_DIR, "density-comfortable.css"), "utf8");
+    const stage = rendered(render(SlideFrame, { label: "Rhythm" })).querySelector("[data-slide-stage]")!;
+    const pinned = [...classes(stage)]
+      .map((name) => /^\[(--reddb-spatial-[a-z-]+):(.+)\]$/.exec(name))
+      .filter((match): match is RegExpExecArray => match !== null);
+
+    expect(pinned.map((match) => match[1]).sort()).toEqual([
+      "--reddb-spatial-layout-gap-lg",
+      "--reddb-spatial-layout-gap-md",
+      "--reddb-spatial-layout-gap-sm",
+      "--reddb-spatial-section-gap",
+      "--reddb-spatial-section-inset",
+    ]);
+    for (const [, property, value] of pinned) {
+      expect(comfortable, property).toContain(`${property}: ${value};`);
+    }
+  });
+
+  it("shows its position in the deck and announces it in words", () => {
+    const frame = rendered(render(SlideFrame, { label: "Third", number: 3, total: 8 }));
+    const number = frame.querySelector("[data-slide-number-label]")!;
+    expect(frame.dataset.slideNumber).toBe("3");
+    expect(frame.dataset.slideTotal).toBe("8");
+    expect(number.querySelector(".sr-only")?.textContent).toBe("Slide 3 of 8");
+    expect(number.querySelector('[aria-hidden="true"]')?.textContent).toBe("3 / 8");
+    expect(rendered(render(SlideFrame, { label: "Unnumbered" })).querySelector("[data-slide-number-label]")).toBeNull();
+  });
+
+  it("sets a slide on the background or the raised ground without selecting an axis", () => {
+    expect([...SLIDE_SURFACES]).toEqual(["background", "raised"]);
+    for (const surface of SLIDE_SURFACES) {
+      const target = render(SlideFrame, { label: surface, surface });
+      const frame = rendered(target);
+      expect(frame.dataset.slideSurface).toBe(surface);
+      expect(classes(frame)).toEqual(classesOf(slideFrame({ surface }).root()));
+      expectNoAxis(target);
+    }
+    expect(classes(rendered(render(SlideFrame, { label: "Default" }))).has("bg-background")).toBe(true);
+  });
+});
+
+describe("the Base slide layouts", () => {
+  for (const { name, component, props, titleRole } of LAYOUTS) {
+    it(`${name} is a SlideFrame whose type comes only from the Theme's roles`, () => {
+      const target = render(component, { ...props, number: 2, total: 6 } as never);
+      const frame = rendered(target);
+      expect(frame.hasAttribute("data-slide-frame")).toBe(true);
+      expect(frame.getAttribute("aria-roledescription")).toBe("slide");
+      expect(frame.getAttribute("aria-label")).toBeTruthy();
+      expect(frame.dataset.slideNumber).toBe("2");
+      expectNoAxis(target);
+
+      for (const element of [frame, ...frame.querySelectorAll("*")]) {
+        const raw = [...classes(element)].filter((cls) =>
+          /^(?:text-(?:xs|sm|base|lg|\d*xl|display-(?:sm|md|lg)|\[.*\])|font-(?:semibold|light|black|\[.*\])|tracking-.+|leading-.+)$/.test(cls),
+        );
+        expect(raw, `${name}: ${element.tagName}`).toEqual([]);
+      }
+
+      if (titleRole) {
+        const heading = frame.querySelector("[data-heading]") as HTMLElement;
+        expect(heading.tagName).toBe("H2");
+        expect(heading.dataset.typeRole).toBe(titleRole);
+        expect(frame.getAttribute("aria-label")).toBe(props.title);
+      }
+    });
+  }
+
+  it("lets a caller name the slide and choose the title's outline level", () => {
+    const frame = rendered(render(TitleSlide, { title: "Deck", level: 1, label: "Opening slide" }));
+    expect(frame.getAttribute("aria-label")).toBe("Opening slide");
+    expect(frame.querySelector("h1")?.textContent).toBe("Deck");
+  });
+
+  it("places TwoColumnSlide's columns in reading order", () => {
+    const frame = rendered(render(TwoColumnSlide, { title: "Columns", start: words("first"), end: words("second") }));
+    expect([...frame.querySelectorAll<HTMLElement>("[data-slide-column]")].map((column) => [column.dataset.slideColumn, column.textContent])).toEqual([
+      ["start", "first"],
+      ["end", "second"],
+    ]);
+  });
+
+  it("gives FigureSlide's figure the remaining height and a native caption", () => {
+    const frame = rendered(render(FigureSlide, { title: "Figure", figure: words("chart"), caption: "Source: audit" }));
+    const figure = frame.querySelector("figure[data-slide-figure]")!;
+    expect(figure.querySelector("[data-slide-figure-body]")?.textContent).toBe("chart");
+    expect(classes(figure.querySelector("[data-slide-figure-body]")!).has("flex-1")).toBe(true);
+    expect(figure.querySelector("figcaption")?.textContent).toBe("Source: audit");
+  });
+
+  it("sets QuoteSlide as a blockquote with its attribution, in the title role", () => {
+    const frame = rendered(render(QuoteSlide, { quote: "Tokens only.", attribution: "AGENTS.md", source: "Non-negotiables" }));
+    expect(frame.getAttribute("aria-label")).toBe("Quote from AGENTS.md");
+    const quote = frame.querySelector("blockquote p")!;
+    expect(quote.textContent).toBe("“Tokens only.”");
+    expect(classes(quote).has("text-title")).toBe(true);
+    expect(frame.querySelector("figcaption")?.textContent?.replace(/\s+/g, " ").trim()).toBe("AGENTS.md, Non-negotiables");
+  });
+
+  it("lists BulletsSlide's points natively, in the heading role", () => {
+    const frame = rendered(render(BulletsSlide, { title: "Points", items: ["One", "Two", "Three"] }));
+    const list = frame.querySelector("ul[data-slide-points]")!;
+    expect([...list.querySelectorAll("li")].map((item) => item.textContent)).toEqual(["One", "Two", "Three"]);
+    expect(classes(list).has("text-heading")).toBe(true);
+  });
+});
+
+describe("the Base Deck", () => {
+  it("is a named region stacking its slides with a Density-owned layout gap", () => {
+    const deck = rendered(render(Deck, { label: "About the DS", children: words("slides") }));
+    expect(deck.tagName).toBe("SECTION");
+    expect(deck.getAttribute("aria-label")).toBe("About the DS");
+    expect(deck.hasAttribute("data-deck")).toBe(true);
+    expect(classes(deck).has("gap-[var(--reddb-spatial-layout-gap-lg)]")).toBe(true);
+  });
+});