@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/base/test/code-block.test.ts

@@ -0,0 +1,148 @@
+import { flushSync } from "svelte";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CodeBlock, codeBlock as codeBlockAppearance } from "@reddb-io/design-system/base";
+import InlineTextContractFailures from "./fixtures/InlineTextContractFailures.svelte";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const SOURCE = `function answer() {
+  return 42;
+}`;
+
+afterEach(() => {
+  Reflect.deleteProperty(navigator, "clipboard");
+});
+
+describe("the deliberately failing CodeBlock fixture", () => {
+  it("demonstrates source whitespace lost outside preformatted semantics", () => {
+    const code = rendered(
+      render(InlineTextContractFailures, { failure: "collapsed-code", source: SOURCE }),
+    );
+
+    expect(code.tagName).toBe("CODE");
+    expect(code.closest("pre")).toBeNull();
+    expect(code.textContent).toBe("function answer() { return 42; }");
+  });
+});
+
+describe("the Base CodeBlock", () => {
+  it("preserves source whitespace with native pre and code semantics", () => {
+    const root = rendered(render(CodeBlock, { code: SOURCE, language: "TypeScript" }));
+    const pre = root.querySelector("pre")!;
+    const code = pre.querySelector("code")!;
+
+    expect(code.textContent).toBe(SOURCE);
+    expect(root.querySelector("[data-code-block-language]")?.textContent).toBe("TypeScript");
+    expect(classes(root)).toEqual(classesOf(codeBlockAppearance().root()));
+  });
+
+  it("copies the exact source from a keyboard-focusable canonical Button", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: { writeText },
+    });
+    const root = rendered(render(CodeBlock, { code: SOURCE }));
+    const copy = root.querySelector<HTMLButtonElement>("[data-code-block-copy]")!;
+
+    copy.focus();
+    expect(document.activeElement).toBe(copy);
+    copy.click();
+
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith(SOURCE));
+    await vi.waitFor(() => expect(copy.textContent?.trim()).toBe("Copied"));
+  });
+});
+
+describe("the CodeBlock grammar (wave 5D)", () => {
+  const keywords = new Set(["function", "return"]);
+  const grammar = {
+    tokenize(code: string) {
+      return [...code.matchAll(/[A-Za-z_]\w*|\d+|\s+|[^\sA-Za-z_\d]+/g)].map(([value]) => ({
+        kind: keywords.has(value) ? "keyword" : /^\d+$/.test(value) ? "number" : "text",
+        value,
+      }));
+    },
+  };
+
+  it("renders synchronous token spans whose text is exactly the source", () => {
+    const code = rendered(render(CodeBlock, { code: SOURCE, grammar })).querySelector("code")!;
+    const spans = [...code.querySelectorAll("[data-code-token]")];
+    expect(spans.length).toBeGreaterThan(3);
+    expect(code.textContent).toBe(SOURCE);
+    const keyword = spans.find((span) => span.textContent === "return")!;
+    expect(keyword.getAttribute("data-code-token")).toBe("keyword");
+    expect(classes(keyword).has("text-primary-text")).toBe(true);
+    expect(spans.find((span) => span.textContent === "42")!.getAttribute("data-code-token")).toBe("number");
+  });
+
+  it("falls back to the exact source when a grammar would not reproduce it", () => {
+    const lossy = { tokenize: () => [{ kind: "keyword", value: "function" }] };
+    const code = rendered(render(CodeBlock, { code: SOURCE, grammar: lossy })).querySelector("code")!;
+    expect(code.textContent).toBe(SOURCE);
+  });
+
+  it("renders plain text with no grammar", () => {
+    const code = rendered(render(CodeBlock, { code: SOURCE })).querySelector("code")!;
+    expect(code.querySelector("[data-code-token]")).toBeNull();
+  });
+});
+
+describe("the CodeBlock scroll region (wave 5A)", () => {
+  let measure: ResizeObserverCallback | undefined;
+  beforeEach(() => {
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        constructor(callback: ResizeObserverCallback) {
+          measure = callback;
+        }
+        observe(): void {}
+        disconnect(): void {}
+      },
+    );
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  /** jsdom lays nothing out: state the pre's scroll geometry, then let the observer fire. */
+  function resize(pre: HTMLElement, scrollWidth: number): void {
+    Object.defineProperty(pre, "scrollWidth", { configurable: true, value: scrollWidth });
+    Object.defineProperty(pre, "clientWidth", { configurable: true, value: 300 });
+    measure?.([], {} as ResizeObserver);
+    flushSync();
+  }
+
+  it("adds no tab stop to a block that fits", () => {
+    const pre = rendered(render(CodeBlock, { code: SOURCE, language: "TypeScript" })).querySelector("pre")!;
+    resize(pre, 300);
+
+    expect(pre.hasAttribute("tabindex")).toBe(false);
+    expect(pre.hasAttribute("role")).toBe(false);
+    expect(pre.hasAttribute("aria-label")).toBe(false);
+  });
+
+  it("becomes a named, keyboard-reachable region while it overflows, and stops when it fits", () => {
+    const pre = rendered(render(CodeBlock, { code: SOURCE, language: "TypeScript" })).querySelector("pre")!;
+    resize(pre, 900);
+    expect(pre.getAttribute("tabindex")).toBe("0");
+    expect(pre.getAttribute("role")).toBe("region");
+    expect(pre.getAttribute("aria-label")).toBe("TypeScript code");
+    pre.focus();
+    expect(document.activeElement).toBe(pre);
+
+    resize(pre, 300);
+    expect(pre.hasAttribute("tabindex")).toBe(false);
+    expect(pre.hasAttribute("role")).toBe(false);
+  });
+
+  it("names the region from regionLabel, or Code sample without a language", () => {
+    const named = rendered(render(CodeBlock, { code: SOURCE, regionLabel: "Install command" })).querySelector("pre")!;
+    resize(named, 900);
+    expect(named.getAttribute("aria-label")).toBe("Install command");
+
+    const plain = rendered(render(CodeBlock, { code: SOURCE })).querySelector("pre")!;
+    resize(plain, 900);
+    expect(plain.getAttribute("aria-label")).toBe("Code sample");
+  });
+});

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

@@ -0,0 +1,124 @@
+// The coherence rules wave 3a moved the Base Kit onto, read off its source.
+//
+//   - Focus is ink (ADR 0023): every focus indicator a Base class draws is the
+//     `focus` role as an outline, never the Brand red, a feedback ring, or
+//     any other ring colour.
+//   - Container-first (ADR 0021): no Base component steps on the viewport.
+//     Base ships no page chrome that would be allowed to.
+//   - Layout primitives own their rhythm (ADR 0024): Form, Fieldset and Stack
+//     draw the space between their own children from the layout tier.
+//   - One event dialect (ADR 0026): every DS callback is lowercase and is
+//     `onvaluechange`, `onopenchange`, `on<state>change` for a bindable state,
+//     or a discrete `on<noun>`. A native name (`onchange`, `oninput`,
+//     `onclick`) carries its native Event, or is a deprecated alias.
+//     `onselect` — item activation — is the sanctioned exception.
+
+import { readFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+import {
+  descriptionList,
+  fieldset,
+  form,
+  gridList,
+  navbar,
+  sectionHeading,
+  stack,
+} from "@reddb-io/design-system/base";
+import { classesOf } from "./mount";
+
+const SOURCE = join(import.meta.dirname, "..", "src");
+const files = readdirSync(SOURCE)
+  .filter((name) => /\.(?:ts|svelte)$/.test(name))
+  .map((name) => ({ name, text: readFileSync(join(SOURCE, name), "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+/));
+}
+
+describe("the Base 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))
+        .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([]);
+
+    const focusing = files.filter(({ text }) => tokens(text).some((token) => /focus-visible:outline-focus$/.test(token)));
+    // 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));
+      const outlines = tokens(text).filter((token) => /focus-visible:outline-(?:2|offset-2|focus)$/.test(token));
+      if (!styles || name === "dialog.variants.ts") continue;
+      expect(outlines.length, `${name} draws the focus outline`).toBeGreaterThanOrEqual(3);
+    }
+    expect(focusing.length).toBeGreaterThanOrEqual(17);
+  });
+});
+
+describe("the Base Kit's responsive steps", () => {
+  it("never query the viewport: every step is a container step", () => {
+    const viewport = /^(?:[a-z-]+:)*(?:max-)?(?:sm|md|lg|xl|2xl):/;
+    const offenders = files.flatMap(({ name, text }) =>
+      tokens(text).filter((token) => viewport.test(token)).map((token) => `${name}: ${token}`),
+    );
+    expect(offenders).toEqual([]);
+  });
+
+  it("declare a named size container where the layout steps", () => {
+    expect(classesOf(descriptionList().root()).has("@container/description-list")).toBe(true);
+    expect(classesOf(navbar().root()).has("@container/navbar")).toBe(true);
+    expect(classesOf(sectionHeading().root()).has("@container/section-heading")).toBe(true);
+    // GridList steps intrinsically on its own width — no viewport, no wrapper.
+    for (const columns of [2, 3, 4] as const) {
+      const worn = gridList({ columns });
+      expect(worn).toMatch(/grid-cols-\[repeat\(auto-fill,/);
+      expect(worn).toContain("var(--reddb-container-lg)");
+    }
+  });
+});
+
+describe("the Base layout primitives", () => {
+  it("own the rhythm between their children from the layout tier", () => {
+    expect(classesOf(form()).has("gap-[var(--reddb-spatial-layout-gap-md)]")).toBe(true);
+    expect(classesOf(fieldset().root()).has("gap-[var(--reddb-spatial-layout-gap-sm)]")).toBe(true);
+    expect(classesOf(fieldset().legend()).has("mb-[var(--reddb-spatial-layout-gap-sm)]")).toBe(true);
+    expect(classesOf(stack({ gap: "section" })).has("gap-[var(--reddb-spatial-section-gap)]")).toBe(true);
+  });
+});
+
+describe("the Base Kit's event dialect", () => {
+  /** Discrete DS events: a noun, never a native event name — except `onselect`. */
+  const DISCRETE = new Set(["ondismiss", "oncomplete", "onconfirm"]);
+  /** 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.filter((file) => file.name.endsWith(".svelte") || file.name.endsWith(".ts"))) {
+      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 (callback !== callback.toLowerCase()) offenders.push(`${where} is not lowercase`);
+        else if (SANCTIONED.has(callback)) sanctioned += 1;
+        else if (NATIVE.has(callback)) {
+          // A native name keeps its native Event, or it is a one-release alias.
+          if (!/Attributes\["on/.test(type) && !deprecated) 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);
+  });
+});

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

@@ -0,0 +1,172 @@
+import { flushSync, tick } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import ComboboxConsumer from "./fixtures/ComboboxConsumer.svelte";
+import ComboboxContractFailures from "./fixtures/ComboboxContractFailures.svelte";
+import {
+  Combobox,
+  combobox,
+  input as inputAppearance,
+  popover as popoverAppearance,
+} from "./fixtures/combobox-consumer";
+import { classes, classesOf, render } from "./mount";
+
+const regions = [
+  { value: "us-east-1", label: "North America" },
+  { value: "sa-east-1", label: "South America" },
+];
+
+async function settle(): Promise<void> {
+  await tick();
+  await new Promise((resolve) => setTimeout(resolve, 10));
+  flushSync();
+}
+
+function activeDescendantFailures(root: HTMLElement): string[] {
+  const input = root.querySelector<HTMLInputElement>('[role="combobox"]')!;
+  input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+  flushSync();
+  const activeId = input.getAttribute("aria-activedescendant");
+  return activeId && document.getElementById(activeId)?.getAttribute("role") === "option"
+    ? []
+    : ["keyboard highlight is not exposed through aria-activedescendant"];
+}
+
+function retainedInputFailures(root: HTMLElement): string[] {
+  const input = root.querySelector<HTMLInputElement>('[role="combobox"]')!;
+  input.value = "south";
+  input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+  flushSync();
+  return input.value === "south" ? [] : ["typed input was discarded"];
+}
+
+describe("the Base Combobox", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(Combobox).toBeDefined();
+    expect(combobox).toBeTypeOf("function");
+  });
+
+  it("composes Field into one visibly named typeahead control", () => {
+    const root = render(Combobox, {
+      label: "Region",
+      help: "Type to narrow the available regions.",
+      name: "region",
+      options: regions,
+      required: true,
+    });
+    const input = root.querySelector<HTMLInputElement>('[role="combobox"]')!;
+    const label = root.querySelector<HTMLLabelElement>(`label[for="${input.id}"]`);
+
+    expect(label?.textContent).toContain("Region");
+    expect(input.required).toBe(true);
+    expect(input.getAttribute("aria-describedby")).not.toBeNull();
+    expect(input.getAttribute("aria-autocomplete")).toBe("list");
+  });
+
+  it("retains typed input while narrowing the caller-owned options", async () => {
+    const root = render(Combobox, { label: "Region", options: regions });
+    const input = root.querySelector<HTMLInputElement>('[role="combobox"]')!;
+
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "s", bubbles: true }));
+    input.value = "south";
+    input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+    await settle();
+
+    expect(input.value).toBe("south");
+    expect(
+      [...document.querySelectorAll('[role="option"]')].map((option) => option.textContent?.trim()),
+    ).toEqual(["South America"]);
+  });
+
+  it("keeps focus on the input while active-descendant navigation selects an option", async () => {
+    const root = render(Combobox, { label: "Region", options: regions });
+    const input = root.querySelector<HTMLInputElement>('[role="combobox"]')!;
+    input.focus();
+
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    await settle();
+    const activeId = input.getAttribute("aria-activedescendant");
+    const activeOption = activeId ? document.getElementById(activeId) : null;
+
+    expect(document.activeElement).toBe(input);
+    expect(activeOption?.getAttribute("role")).toBe("option");
+    expect(activeOption?.textContent).toContain("North America");
+
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    await settle();
+
+    expect(input.value).toBe("South America");
+    expect(input.getAttribute("aria-expanded")).toBe("false");
+    expect(document.activeElement).toBe(input);
+  });
+
+  it("submits one selected value and announces selection without relying on color", async () => {
+    const onvaluechange = vi.fn();
+    const root = render(ComboboxConsumer, { required: true, onvaluechange });
+    const form = root.querySelector<HTMLFormElement>("form")!;
+    const input = form.querySelector<HTMLInputElement>('[role="combobox"]')!;
+
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    await settle();
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    await settle();
+
+    expect(new FormData(form).get("region")).toBe("sa-east-1");
+    expect(onvaluechange).toHaveBeenCalledWith("sa-east-1");
+    expect(input.value).toBe("South America");
+
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    await settle();
+    const option = document.querySelector<HTMLElement>('[role="option"][data-value="sa-east-1"]')!;
+    expect(option.getAttribute("aria-selected")).toBe("true");
+    expect(option.textContent).toContain("Selected");
+
+    // Highlight and selection are neutral: the Brand red never fills an option.
+    const names = classes(option);
+    expect(names.has("data-[highlighted]:bg-foreground/10")).toBe(true);
+    expect(names.has("data-[selected]:font-medium")).toBe(true);
+    expect([...names].some((name) => /(?:^|:)bg-primary(?:\/|$)|text-on-primary/.test(name))).toBe(false);
+  });
+
+  it("renders an externally selected value as its visible option label", () => {
+    const root = render(ComboboxConsumer, { value: "sa-east-1" });
+    const form = root.querySelector<HTMLFormElement>("form")!;
+    const input = root.querySelector<HTMLInputElement>('[role="combobox"]')!;
+
+    expect(input.value).toBe("South America");
+    expect(new FormData(form).get("region")).toBe("sa-east-1");
+  });
+
+  it("composes Input and Popover appearance inside a nested axis scope", async () => {
+    const root = render(ComboboxConsumer, {});
+    const scope = root.querySelector<HTMLElement>("[data-appearance-scope]")!;
+    const input = scope.querySelector<HTMLInputElement>('[role="combobox"]')!;
+    const styles = combobox();
+
+    expect(classes(input)).toEqual(classesOf(inputAppearance({ class: styles.input() })));
+    expect(classes(input).has("h-[var(--reddb-spatial-control-height-md)]")).toBe(true);
+    expect(scope.querySelector("[data-combobox]")?.parentElement?.className).toContain("max-w-md");
+
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    await settle();
+    const surface = document.querySelector<HTMLElement>("[data-combobox-surface]")!;
+    expect(classes(surface)).toEqual(classesOf(popoverAppearance({ class: styles.content() })));
+    expect(classes(surface).has("motion-reduce:transition-none")).toBe(true);
+    expect(surface.dataset.avoidCollisions).toBe("true");
+  });
+});
+
+describe("the deliberately failing Combobox fixtures", () => {
+  it("diagnoses missing active-descendant semantics", () => {
+    const root = render(ComboboxContractFailures, { failure: "missing-active-descendant" });
+    expect(activeDescendantFailures(root)).toEqual([
+      "keyboard highlight is not exposed through aria-activedescendant",
+    ]);
+  });
+
+  it("diagnoses a typeahead that discards typed input", () => {
+    const root = render(ComboboxContractFailures, { failure: "discarded-input" });
+    expect(retainedInputFailures(root)).toEqual(["typed input was discarded"]);
+  });
+});

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

@@ -0,0 +1,113 @@
+import { readFileSync } from "node:fs";
+import { basename, join } from "node:path";
+import { describe, expect, it } from "vitest";
+import { BASE_COMPONENTS, BASE_COMPOSITES, BASE_PRIMITIVES } from "../src/index";
+import { KIT_MANIFEST, SRC_DIR, kitComponentFiles } from "../tools/paths";
+
+// What the Base Kit is, checked rather than described.
+//
+// Two claims matter here, and both are mechanical: the Kit routes to every
+// consumer and inherits nothing (it is the root every other Kit declares,
+// ADR 0004), and its public surface lists exactly the components on disk. The
+// second is worth having before there is a component: it is the seam the Logo
+// (issue #46) arrives through, and it fails the moment a component is added
+// without being exported.
+
+describe("the Base Kit's routing manifest", () => {
+  const manifest = JSON.parse(readFileSync(KIT_MANIFEST, "utf8")) as {
+    name: string;
+    audience: "*" | string[];
+    parents?: string[];
+  };
+
+  it("is named base", () => {
+    expect(manifest.name).toBe("base");
+  });
+
+  it("routes to every consumer", () => {
+    // Not an allowlist: no consumer can be outside the Kit every Kit inherits.
+    expect(manifest.audience).toBe("*");
+  });
+
+  it("inherits nothing — it is the root of the Kit graph", () => {
+    expect(manifest.parents ?? []).toEqual([]);
+  });
+});
+
+describe("the Base Kit's public surface", () => {
+  it("lists exactly the components on disk", () => {
+    const onDisk = kitComponentFiles().map((file) => basename(file, ".svelte")).sort();
+
+    expect([...BASE_COMPONENTS]).toEqual(onDisk);
+  });
+
+  it("exports one module per listed component", () => {
+    const index = readFileSync(join(SRC_DIR, "index.ts"), "utf8");
+
+    for (const component of BASE_COMPONENTS) {
+      expect(index).toContain(`export { default as ${component} }`);
+    }
+  });
+
+  it("classifies every canonical composition and partitions the public surface", () => {
+    expect(BASE_COMPOSITES).toEqual([
+      "Accordion",
+      "AlertDialog",
+      "AppearanceSwitch",
+      "Avatar",
+      "Breadcrumbs",
+      "BrowserMockup",
+      "BulletsSlide",
+      "Calendar",
+      "Card",
+      "Carousel",
+      "Checkbox",
+      "CodeBlock",
+      "Combobox",
+      "DateField",
+      "DatePicker",
+      "DateRangeField",
+      "DateRangePicker",
+      "Drawer",
+      "DropdownMenu",
+      "Disclosure",
+      "Field",
+      "FigureSlide",
+      "FileInput",
+      "GridList",
+      "InlineEdit",
+      "ListContainer",
+      "Navbar",
+      "NavigationMenu",
+      "Notification",
+      "NumberField",
+      "OneTimeCodeInput",
+      "Pagination",
+      "PhoneInput",
+      "PhoneMockup",
+      "Popover",
+      "QuoteSlide",
+      "RadioGroup",
+      "RangeCalendar",
+      "Rating",
+      "SearchSelect",
+      "SectionSlide",
+      "Slider",
+      "Statistic",
+      "Steps",
+      "Swap",
+      "Switch",
+      "Tabs",
+      "TimeField",
+      "TimeRangeField",
+      "Timeline",
+      "TitleSlide",
+      "ToggleButton",
+      "ToggleGroup",
+      "TwoColumnSlide",
+      "WindowMockup",
+    ]);
+    expect(new Set([...BASE_PRIMITIVES, ...BASE_COMPOSITES])).toEqual(new Set(BASE_COMPONENTS));
+    expect(BASE_PRIMITIVES.filter((name) => BASE_COMPOSITES.includes(name as never))).toEqual([]);
+  });
+});

package/vendor/ds/kits/base/test/consumer-check.test.ts

@@ -0,0 +1,42 @@
+// The Kit's source, under a consumer's own compiler.
+//
+// A Kit ships as source (ADR 0002), so the compiler that judges it is the
+// consumer's: it can mount, render and pass every test in this suite while
+// failing the first `svelte-check` it meets in an application. Issue #50 was
+// exactly that, in the application Kit; this is the same guard for the first
+// component of this one.
+//
+// It matters more here than it looks. The Logo reaches a Mark by IMPORTING the
+// `.svg`, and which declaration makes that legal is the whole question this
+// check answers: the consumer tsconfig brings `vite/client`, the way a real
+// application does, and the Kit ships no `*.svg` declaration of its own — a
+// wildcard ambient module can only be declared once in a program, so shipping
+// one would break a consumer's build with a duplicate-identifier error in a
+// file they did not write.
+
+import { spawnSync } from "node:child_process";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+import { KIT_ROOT } from "../tools/paths";
+
+describe("the Kit's source, under a consumer's own compiler", () => {
+  it("type-checks clean — no error, no warning, in any component", () => {
+    const svelteCheck = join(KIT_ROOT, "node_modules", ".bin", "svelte-check");
+    const { status, stdout, stderr } = spawnSync(
+      svelteCheck,
+      [
+        "--workspace",
+        ".",
+        "--tsconfig",
+        "./tsconfig.consumer.json",
+        "--fail-on-warnings",
+        "--output",
+        "human",
+      ],
+      { cwd: KIT_ROOT, encoding: "utf8" },
+    );
+
+    expect(`${stdout}${stderr}`).toContain("0 errors and 0 warnings");
+    expect(status).toBe(0);
+  }, 120_000);
+});

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

@@ -0,0 +1,31 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { lintKitSource, readVocabulary } from "@reddb-io/kit-lint";
+import { describe, expect, it } from "vitest";
+import ContainerStackSkipLinkFailures from "./fixtures/ContainerStackSkipLinkFailures.svelte";
+import { render } from "./mount";
+
+const FIXTURE = join(import.meta.dirname, "fixtures", "ContainerStackSkipLinkFailures.svelte");
+
+describe("the deliberately failing layout and keyboard-bypass fixtures", () => {
+  it("diagnoses Container and Stack spacing frozen against Density", () => {
+    const violations = lintKitSource(readFileSync(FIXTURE, "utf8"), FIXTURE, readVocabulary());
+    const found = violations.map((violation) => violation.found);
+
+    expect(found).toContain("px-4");
+    expect(found).toContain("gap-2");
+  });
+
+  it("diagnoses a keyboard bypass that stays hidden and targets nothing", () => {
+    const root = render(ContainerStackSkipLinkFailures, { failure: "unusable-bypass" });
+    const link = root.querySelector<HTMLAnchorElement>("[data-broken-skip-link]")!;
+    link.focus();
+
+    const failures = [
+      link.classList.contains("focus:not-sr-only") ? undefined : "focused link remains hidden",
+      root.querySelector(link.hash) ? undefined : "bypass target does not exist",
+    ].filter(Boolean);
+
+    expect(failures).toEqual(["focused link remains hidden", "bypass target does not exist"]);
+  });
+});

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

@@ -0,0 +1,41 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import { Container, container as containerAppearance } from "./fixtures/layout-consumer";
+import LayoutConsumer from "./fixtures/LayoutConsumer.svelte";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the Base Container", () => {
+  it("bounds content with a Density-owned inline inset", () => {
+    const root = render(Container, {
+      "aria-label": "Account content",
+      children: createRawSnippet(() => ({ render: () => "<p>Account</p>" })),
+    });
+    const element = rendered(root);
+
+    expect(element.tagName).toBe("DIV");
+    expect(element.getAttribute("aria-label")).toBe("Account content");
+    expect(classes(element)).toEqual(classesOf(containerAppearance()));
+    // `wide` (80rem, the former max-w-7xl) is the default DS-named width (ADR 0021).
+    expect(classes(element).has("max-w-wide")).toBe(true);
+    expect(element.dataset.containerSize).toBe("wide");
+    expect(classes(element).has("px-[var(--reddb-spatial-inset-md)]")).toBe(true);
+    expect(element.textContent).toBe("Account");
+  });
+
+  it("merges a local class without selecting Density", () => {
+    const element = rendered(render(Container, { class: "relative" }));
+
+    expect(classes(element)).toEqual(classesOf(containerAppearance({ class: "relative" })));
+    expect(element.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("composes inside a nested Density scope", () => {
+    const root = render(LayoutConsumer);
+    const outer = root.querySelector<HTMLElement>('[aria-label="Deployment content"]')!;
+    const inner = root.querySelector<HTMLElement>('[aria-label="Compact nested content"]')!;
+
+    expect(classes(outer)).toEqual(classesOf(containerAppearance()));
+    expect(classes(inner)).toEqual(classesOf(containerAppearance()));
+    expect(inner.closest('[data-density="compact"]')).not.toBeNull();
+  });
+});