@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/base/test/date-range-field.test.ts

@@ -0,0 +1,96 @@
+import { describe, expect, it } from "vitest";
+import DateEntryContractFailures from "./fixtures/DateEntryContractFailures.svelte";
+import DateEntryConsumer from "./fixtures/DateEntryConsumer.svelte";
+import { DateRangeField, dateRangeField } from "./fixtures/date-entry-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function formValue(root: HTMLElement, name: string): string | null {
+  return root.querySelector<HTMLInputElement>(`input[type="hidden"][name="${name}"]`)?.value ?? null;
+}
+
+function isOrdered(start: string | null, end: string | null): boolean {
+  return start !== null && end !== null && start <= end;
+}
+
+describe("the deliberately failing DateRangeField fixture", () => {
+  it("diagnoses a range that permits inverted bounds", () => {
+    const root = rendered(render(DateEntryContractFailures, { failure: "inverted-range" }));
+
+    expect(isOrdered(
+      root.querySelector<HTMLInputElement>('[name="deploymentStart"]')?.value ?? null,
+      root.querySelector<HTMLInputElement>('[name="deploymentEnd"]')?.value ?? null,
+    )).toBe(false);
+  });
+});
+
+describe("the Base DateRangeField", () => {
+  it("publishes ordered bounds and refuses an inverted controlled range", () => {
+    const ordered = rendered(render(DateRangeField, {
+      label: "Deployment window",
+      startLabel: "Starts",
+      endLabel: "Ends",
+      startName: "deploymentStart",
+      endName: "deploymentEnd",
+      startValue: "2026-08-10",
+      endValue: "2026-08-20",
+    }));
+    const inverted = rendered(render(DateRangeField, {
+      label: "Deployment window",
+      startLabel: "Starts",
+      endLabel: "Ends",
+      startName: "deploymentStart",
+      endName: "deploymentEnd",
+      startValue: "2026-08-20",
+      endValue: "2026-08-10",
+    }));
+
+    expect(isOrdered(formValue(ordered, "deploymentStart"), formValue(ordered, "deploymentEnd"))).toBe(true);
+    expect(formValue(inverted, "deploymentStart")).toBe("2026-08-20");
+    expect(formValue(inverted, "deploymentEnd")).toBeNull();
+    expect(inverted.getAttribute("aria-invalid")).toBe("true");
+    expect(inverted.querySelector('[role="alert"]')?.textContent).toContain("before");
+  });
+
+  it("owns native group semantics while composing both canonical DateFields", () => {
+    const root = rendered(render(DateRangeField, {
+      label: "Deployment window",
+      startLabel: "Starts",
+      endLabel: "Ends",
+      startValue: "2026-08-20",
+      endValue: "2026-08-10",
+      help: "Use the release calendar.",
+      rangeError: "The end must not be before the start.",
+      required: true,
+      class: "max-w-2xl",
+    }));
+    const styles = dateRangeField();
+    const segments = [...root.querySelectorAll<HTMLInputElement>("[data-date-segment]")];
+
+    expect(root.tagName).toBe("FIELDSET");
+    expect(root.querySelector(":scope > legend")?.textContent).toBe("Deployment window");
+    expect(segments).toHaveLength(6);
+    expect(segments.every(({ required }) => required)).toBe(true);
+    expect(segments.every(({ tabIndex }) => tabIndex === 0)).toBe(true);
+    expect(root.getAttribute("aria-describedby")).toContain("help");
+    expect(root.getAttribute("aria-describedby")).toContain("error");
+    expect(root.querySelector('[role="alert"]')?.textContent).toBe("The end must not be before the start.");
+    expect(classes(root)).toEqual(classesOf(styles.root({ class: "max-w-2xl" })));
+    expect(classes(root.querySelector("[data-date-range-fields]")!)).toEqual(classesOf(styles.fields()));
+    expect(root.hasAttribute("data-theme")).toBe(false);
+    expect(root.hasAttribute("data-color-scheme")).toBe(false);
+    expect(root.hasAttribute("data-density")).toBe(false);
+
+    segments[3]!.focus();
+    segments[3]!.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    expect(document.activeElement).toBe(segments[4]);
+  });
+
+  it("inherits every appearance axis from a nested consumer scope", () => {
+    const nested = render(DateEntryConsumer)
+      .querySelector<HTMLElement>("[data-nested-date-range-field] > fieldset")!;
+
+    expect(nested.hasAttribute("data-theme")).toBe(false);
+    expect(nested.hasAttribute("data-color-scheme")).toBe(false);
+    expect(nested.hasAttribute("data-density")).toBe(false);
+  });
+});

package/vendor/ds/kits/base/test/date-range-picker.test.ts

@@ -0,0 +1,104 @@
+import { flushSync, tick } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import DatePickerContractFailures from "./fixtures/DatePickerContractFailures.svelte";
+import DatePickerConsumer from "./fixtures/DatePickerConsumer.svelte";
+import { DateRangePicker, dateRangePicker } from "./fixtures/date-picker-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+async function settle(): Promise<void> {
+  await tick();
+  await new Promise((resolve) => setTimeout(resolve, 10));
+  flushSync();
+}
+
+function formValue(root: ParentNode, name: string): string | null {
+  return root.querySelector<HTMLInputElement>(`input[type="hidden"][name="${name}"]`)?.value ?? null;
+}
+
+function calendarBound(root: ParentNode, bound: "start" | "end"): string | null {
+  return root.querySelector<HTMLElement>(`[data-bits-day][data-range-${bound}]`)?.dataset.value ?? null;
+}
+
+function synchronizationFailures(root: ParentNode): string[] {
+  return formValue(root, "deploymentStart") === calendarBound(root, "start")
+    && formValue(root, "deploymentEnd") === calendarBound(root, "end")
+    ? []
+    : ["date range fields and range calendar are desynchronized"];
+}
+
+describe("the deliberately failing DateRangePicker fixture", () => {
+  it("diagnoses field bounds and calendar endpoints with different dates", () => {
+    const root = rendered(render(DatePickerContractFailures, {
+      failure: "date-range-picker-desynchronization",
+    }));
+
+    expect(synchronizationFailures(root)).toEqual([
+      "date range fields and range calendar are desynchronized",
+    ]);
+  });
+});
+
+describe("the Base DateRangePicker", () => {
+  it("keeps partial selection open and publishes a synchronized complete range", async () => {
+    const onvaluechange = vi.fn();
+    const root = render(DateRangePicker, {
+      label: "Deployment window",
+      startLabel: "Starts",
+      endLabel: "Ends",
+      calendarLabel: "Deployment window calendar",
+      startName: "deploymentStart",
+      endName: "deploymentEnd",
+      startValue: "2026-06-10",
+      endValue: "2026-06-12",
+      open: true,
+      onvaluechange,
+    });
+    await settle();
+
+    expect(synchronizationFailures(document)).toEqual([]);
+    document.querySelector<HTMLElement>('[data-bits-day][data-value="2026-06-15"]')!.click();
+    await settle();
+    expect(document.querySelector("[data-popover-surface]")).not.toBeNull();
+    expect(formValue(root, "deploymentStart")).toBe("2026-06-15");
+    expect(formValue(root, "deploymentEnd")).toBeNull();
+
+    document.querySelector<HTMLElement>('[data-bits-day][data-value="2026-06-18"]')!.click();
+    await settle();
+    expect(formValue(root, "deploymentEnd")).toBe("2026-06-18");
+    expect(onvaluechange).toHaveBeenLastCalledWith({
+      start: "2026-06-15",
+      end: "2026-06-18",
+    });
+    expect(document.querySelector("[data-popover-surface]")).toBeNull();
+  });
+
+  it("composes canonical appearance without selecting an axis", () => {
+    const root = rendered(render(DateRangePicker, {
+      label: "Deployment window",
+      startLabel: "Starts",
+      endLabel: "Ends",
+      calendarLabel: "Deployment window calendar",
+      class: "max-w-2xl",
+    }));
+    const styles = dateRangePicker();
+
+    expect(classes(root)).toEqual(classesOf(styles.root({ class: "max-w-2xl" })));
+    expect(root.querySelector("[data-date-range-field]")).not.toBeNull();
+    expect(root.querySelector("[data-popover-trigger]")).not.toBeNull();
+    expect(root.hasAttribute("data-theme")).toBe(false);
+    expect(root.hasAttribute("data-color-scheme")).toBe(false);
+    expect(root.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("inherits every appearance axis from a nested consumer scope", () => {
+    const root = render(DatePickerConsumer)
+      .querySelector<HTMLElement>("[data-nested-date-range-picker] > [data-date-range-picker]")!;
+
+    expect(root.hasAttribute("data-theme")).toBe(false);
+    expect(root.hasAttribute("data-color-scheme")).toBe(false);
+    expect(root.hasAttribute("data-density")).toBe(false);
+    expect(classes(root.querySelector("[data-date-segment]")!).has(
+      "h-[var(--reddb-spatial-control-height-md)]",
+    )).toBe(true);
+  });
+});

package/vendor/ds/kits/base/test/description-list.test.ts

@@ -0,0 +1,84 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import CollectionStructureContractFailures from "./fixtures/CollectionStructureContractFailures.svelte";
+import CollectionStructureConsumer from "./fixtures/CollectionStructureConsumer.svelte";
+import {
+  DescriptionList,
+  DESCRIPTION_LIST_GAPS,
+  descriptionList,
+  type DescriptionListItem,
+} from "./fixtures/collection-structure-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function hasTermDetailPairs(element: HTMLElement): boolean {
+  const entries = [...element.children];
+  return entries.length > 0 && entries.every((entry) => {
+    const children = [...entry.children];
+    return children.length === 2 && children[0]?.tagName === "DT" && children[1]?.tagName === "DD";
+  });
+}
+
+describe("the deliberately failing DescriptionList fixture", () => {
+  it("diagnoses broken term/detail pairing", () => {
+    const element = rendered(render(CollectionStructureContractFailures, {
+      failure: "broken-term-detail-pairing",
+    }));
+
+    expect(element.tagName).toBe("DL");
+    expect(hasTermDetailPairs(element)).toBe(false);
+  });
+});
+
+describe("the Base DescriptionList", () => {
+  it("is available through Base", () => {
+    expect(DescriptionList).toBeDefined();
+  });
+
+  it("owns one native term/detail pair per caller entry", () => {
+    const items: readonly DescriptionListItem[] = [
+      { term: "Region", detail: "South America" },
+      {
+        term: "Owner",
+        detail: createRawSnippet(() => ({ render: () => '<a href="/team">Platform team</a>' })),
+      },
+    ];
+    const element = rendered(render(DescriptionList, {
+      items,
+      "aria-label": "Service details",
+    }));
+
+    expect(element.tagName).toBe("DL");
+    expect(hasTermDetailPairs(element)).toBe(true);
+    expect([...element.querySelectorAll("dt")].map((term) => term.textContent?.trim()))
+      .toEqual(["Region", "Owner"]);
+    expect(element.querySelector("a")?.textContent).toBe("Platform team");
+    expect(element.getAttribute("aria-label")).toBe("Service details");
+    expect(element.tabIndex).toBe(-1);
+  });
+
+  it("keeps Density-owned pairing space in its public appearance seam", () => {
+    expect(DESCRIPTION_LIST_GAPS).toEqual(["sm", "md", "lg"]);
+    const element = rendered(render(DescriptionList, {
+      items: [{ term: "Region", detail: "South America" }],
+      gap: "lg",
+      class: "min-w-0",
+    }));
+    const slots = descriptionList({ gap: "lg" });
+
+    expect(classes(element)).toEqual(classesOf(slots.root({ class: "min-w-0" })));
+    expect(classes(element.querySelector("[data-description-item]")!))
+      .toEqual(classesOf(slots.item()));
+    expect(element.hasAttribute("data-theme")).toBe(false);
+    expect(element.hasAttribute("data-color-scheme")).toBe(false);
+    expect(element.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("inherits every nested appearance axis", () => {
+    const element = render(CollectionStructureConsumer)
+      .querySelector<HTMLElement>("[data-nested-description-list]")!;
+
+    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/dialog-tooltip-failures.test.ts

@@ -0,0 +1,52 @@
+import { flushSync } from "svelte";
+import { describe, expect, it } from "vitest";
+import DialogTooltipBehaviorFailures from "./fixtures/DialogTooltipBehaviorFailures.svelte";
+import { render } from "./mount";
+
+describe("the deliberately failing Dialog and Tooltip fixtures", () => {
+  it("diagnoses a Dialog without an accessible label", () => {
+    const root = render(DialogTooltipBehaviorFailures, { failure: "missing-label" });
+    const dialog = root.querySelector('[role="dialog"]')!;
+    const named = dialog.hasAttribute("aria-label") || dialog.hasAttribute("aria-labelledby");
+    expect(named ? [] : ["dialog has no accessible label"]).toEqual([
+      "dialog has no accessible label",
+    ]);
+  });
+
+  it("diagnoses a Dialog that ignores Escape", () => {
+    const root = render(DialogTooltipBehaviorFailures, { failure: "ignored-escape" });
+    root.querySelector<HTMLButtonElement>("[data-opener]")!.click();
+    flushSync();
+    root
+      .querySelector<HTMLElement>('[role="dialog"]')!
+      .dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    flushSync();
+    expect(root.querySelector("[data-broken-dialog]") ? ["Escape did not dismiss"] : []).toEqual([
+      "Escape did not dismiss",
+    ]);
+  });
+
+  it("diagnoses a Dialog that loses the invoking focus", () => {
+    const root = render(DialogTooltipBehaviorFailures, { failure: "lost-focus" });
+    const opener = root.querySelector<HTMLButtonElement>("[data-opener]")!;
+    opener.focus();
+    opener.click();
+    flushSync();
+    const close = root.querySelector<HTMLButtonElement>("[data-close]")!;
+    close.focus();
+    close.click();
+    flushSync();
+    expect(document.activeElement === opener ? [] : ["focus was not restored"]).toEqual([
+      "focus was not restored",
+    ]);
+  });
+
+  it("diagnoses a pointer-only Tooltip trigger", () => {
+    const root = render(DialogTooltipBehaviorFailures, { failure: "pointer-only-tooltip" });
+    root.querySelector<HTMLButtonElement>("[data-tooltip-trigger]")!.focus();
+    flushSync();
+    expect(root.querySelector('[role="tooltip"]') ? [] : ["focus did not open tooltip"]).toEqual([
+      "focus did not open tooltip",
+    ]);
+  });
+});

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

@@ -0,0 +1,122 @@
+import { createRawSnippet, type Snippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import { Dialog, dialog as dialogAppearance } from "./fixtures/dialog-tooltip-consumer";
+import { classes, classesOf, render } from "./mount";
+
+function text(content: string): Snippet {
+  return createRawSnippet(() => ({ render: () => `<span>${content}</span>` }));
+}
+
+describe("the Base Dialog", () => {
+  it("replaces the default close control with a custom header while retaining its accessible title", () => {
+    const root = render(Dialog, { title: "Contact information", triggerLabel: "Open contact", header: text("Custom contact toolbar"), children: text("Contact details") });
+    root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!.click();
+    const dialog = root.querySelector<HTMLDialogElement>("dialog")!;
+    const title = dialog.querySelector("[data-dialog-title]")!;
+    expect(title.className).toContain("sr-only");
+    expect(dialog.getAttribute("aria-labelledby")).toBe(title.id);
+    expect(dialog.querySelector("[data-dialog-header]")?.textContent).toBe("Custom contact toolbar");
+    expect(dialog.querySelector("[data-dialog-close]")).toBeNull();
+    expect(dialog.querySelector("[data-dialog-body]")?.className).toContain("overflow-y-auto");
+  });
+  it("labels the modal from its visible title and description", () => {
+    const root = render(Dialog, {
+      triggerLabel: "Edit deployment",
+      title: "Edit deployment",
+      description: "Changes take effect immediately.",
+      children: text("Dialog body"),
+    });
+    const trigger = root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!;
+
+    trigger.click();
+
+    const dialog = root.querySelector<HTMLDialogElement>("dialog")!;
+    const title = root.querySelector<HTMLElement>("[data-dialog-title]")!;
+    const description = root.querySelector<HTMLElement>("[data-dialog-description]")!;
+    expect(dialog.open).toBe(true);
+    expect(dialog.getAttribute("aria-modal")).toBe("true");
+    expect(dialog.getAttribute("aria-labelledby")).toBe(title.id);
+    expect(dialog.getAttribute("aria-describedby")).toBe(description.id);
+    expect(title.textContent).toBe("Edit deployment");
+  });
+
+  it("dismisses from the keyboard with Escape", () => {
+    const root = render(Dialog, {
+      triggerLabel: "Open settings",
+      title: "Settings",
+    });
+    root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!.click();
+    const dialog = root.querySelector<HTMLDialogElement>("dialog")!;
+
+    dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+
+    expect(dialog.open).toBe(false);
+  });
+
+  it("moves focus into the modal and restores it after dismissal", () => {
+    const root = render(Dialog, {
+      triggerLabel: "Open members",
+      title: "Members",
+      children: createRawSnippet(() => ({
+        render: () => '<button data-first-member type="button">Invite member</button>',
+      })),
+    });
+    const trigger = root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!;
+    trigger.focus();
+
+    trigger.click();
+    const dialog = root.querySelector<HTMLDialogElement>("dialog")!;
+    expect(document.activeElement).toBe(root.querySelector("[data-first-member]"));
+
+    dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("contains Tab navigation within the modal", () => {
+    const root = render(Dialog, {
+      triggerLabel: "Open actions",
+      title: "Actions",
+      children: createRawSnippet(() => ({
+        render: () =>
+          '<div><button data-first type="button">First</button><button data-last type="button">Last</button></div>',
+      })),
+    });
+    root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!.click();
+    const dialog = root.querySelector<HTMLDialogElement>("dialog")!;
+    const first = root.querySelector<HTMLButtonElement>("[data-dialog-close]")!;
+    const last = root.querySelector<HTMLButtonElement>("[data-last]")!;
+
+    last.focus();
+    dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", bubbles: true }));
+    expect(document.activeElement).toBe(first);
+
+    first.focus();
+    dialog.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Tab", shiftKey: true, bubbles: true }),
+    );
+    expect(document.activeElement).toBe(last);
+  });
+
+  it("provides a labeled close control", () => {
+    const root = render(Dialog, { triggerLabel: "Open help", title: "Help" });
+    root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!.click();
+    const dialog = root.querySelector<HTMLDialogElement>("dialog")!;
+    const close = root.querySelector<HTMLButtonElement>("[data-dialog-close]")!;
+
+    expect(close.getAttribute("aria-label")).toBe("Close Help");
+    close.click();
+    expect(dialog.open).toBe(false);
+  });
+
+  it("wears its exported token appearance and honors reduced motion", () => {
+    const root = render(Dialog, {
+      triggerLabel: "Open details",
+      title: "Details",
+      class: "max-w-xl",
+    });
+    const element = root.querySelector("dialog")!;
+
+    expect(classes(element)).toEqual(classesOf(dialogAppearance({ class: "max-w-xl" })));
+    expect(classes(element).has("motion-reduce:transition-none")).toBe(true);
+  });
+});

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

@@ -0,0 +1,51 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import DisclosureFamilyConsumer from "./fixtures/DisclosureFamilyConsumer.svelte";
+import { Disclosure, disclosure } from "./fixtures/disclosure-family-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the Base Disclosure", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(Disclosure).toBeDefined();
+    expect(disclosure).toBeTypeOf("function");
+  });
+
+  it("associates a canonical trigger with its expandable region", () => {
+    const root = rendered(render(Disclosure, { label: "Advanced details", open: true }));
+    const trigger = root.querySelector<HTMLButtonElement>("button")!;
+    const region = root.querySelector<HTMLElement>('[role="region"]')!;
+
+    expect(classes(trigger).has("inline-flex")).toBe(true);
+    expect(trigger.ariaExpanded).toBe("true");
+    expect(trigger.getAttribute("aria-controls")).toBe(region.id);
+    expect(region.getAttribute("aria-labelledby")).toBe(trigger.id);
+  });
+
+  it("toggles visible content and reports the controlled state", () => {
+    const onchange = vi.fn();
+    const root = rendered(render(Disclosure, {
+      label: "Advanced details",
+      open: true,
+      onchange,
+    }));
+    const trigger = root.querySelector<HTMLButtonElement>("button")!;
+
+    trigger.click();
+    flushSync();
+    expect(trigger.ariaExpanded).toBe("false");
+    expect(root.querySelector('[role="region"]')).toBeNull();
+    expect(onchange).toHaveBeenCalledWith(false);
+  });
+
+  it("keeps token appearance and every appearance axis live in a nested scope", () => {
+    const consumer = rendered(render(DisclosureFamilyConsumer, {}));
+    const root = consumer.querySelector<HTMLElement>("[data-appearance-scope] [data-disclosure]")!;
+    const styles = disclosure();
+
+    expect(classes(root)).toEqual(classesOf(styles.root()));
+    expect(classes(root.querySelector("button")!).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);
+  });
+});

package/vendor/ds/kits/base/test/drawer-alert-dialog-appearance.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import DrawerAlertDialogConsumer from "./fixtures/DrawerAlertDialogConsumer.svelte";
+import { classes, render } from "./mount";
+
+describe("Drawer and AlertDialog in a nested appearance scope", () => {
+  it("leave Theme, Color Scheme, and Density selection to their consumer", () => {
+    const root = render(DrawerAlertDialogConsumer);
+    const scope = root.querySelector<HTMLElement>("[data-overlay-appearance-scope]")!;
+    const overlays = [
+      scope.querySelector("[data-nested-drawer]"),
+      scope.querySelector("[data-nested-alert-dialog]"),
+    ];
+
+    expect(scope.getAttribute("data-theme")).toBe("marketing");
+    expect(scope.getAttribute("data-color-scheme")).toBe("dark");
+    expect(scope.getAttribute("data-density")).toBe("compact");
+    for (const overlay of overlays) {
+      expect(overlay).not.toBeNull();
+      expect(overlay!.hasAttribute("data-theme")).toBe(false);
+      expect(overlay!.hasAttribute("data-color-scheme")).toBe(false);
+      expect(overlay!.hasAttribute("data-density")).toBe(false);
+      expect(classes(overlay!).has("p-[var(--reddb-spatial-inset-lg)]")).toBe(true);
+    }
+  });
+});

package/vendor/ds/kits/base/test/drawer-alert-dialog-failures.test.ts

@@ -0,0 +1,36 @@
+import { flushSync } from "svelte";
+import { describe, expect, it } from "vitest";
+import DrawerAlertDialogBehaviorFailures from "./fixtures/DrawerAlertDialogBehaviorFailures.svelte";
+import { render } from "./mount";
+
+describe("the deliberately failing Drawer and AlertDialog fixtures", () => {
+  it("diagnoses a Drawer that loses the invoking focus", () => {
+    const root = render(DrawerAlertDialogBehaviorFailures, { failure: "drawer-lost-focus" });
+    const opener = root.querySelector<HTMLButtonElement>("[data-opener]")!;
+    opener.focus();
+    opener.click();
+    flushSync();
+    const close = root.querySelector<HTMLButtonElement>("[data-close]")!;
+    close.focus();
+    close.click();
+    flushSync();
+
+    expect(document.activeElement === opener ? [] : ["focus was not restored"]).toEqual([
+      "focus was not restored",
+    ]);
+  });
+
+  it("diagnoses an AlertDialog dismissed by an outside click", () => {
+    const root = render(DrawerAlertDialogBehaviorFailures, {
+      failure: "alert-outside-dismissal",
+    });
+    root.querySelector<HTMLButtonElement>("[data-opener]")!.click();
+    flushSync();
+    root.querySelector<HTMLElement>("[data-broken-alert-dialog]")!.click();
+    flushSync();
+
+    expect(root.querySelector("[data-broken-alert-dialog]") ? [] : ["outside click dismissed"]).toEqual([
+      "outside click dismissed",
+    ]);
+  });
+});

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

@@ -0,0 +1,49 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import { DRAWER_SIDES, Drawer, drawer as drawerAppearance } from "./fixtures/drawer-alert-dialog-consumer";
+import { classes, classesOf, render } from "./mount";
+
+describe("the Base Drawer", () => {
+  it("moves focus into the drawer and restores it after keyboard dismissal", () => {
+    const root = render(Drawer, {
+      triggerLabel: "Open filters",
+      title: "Filters",
+      children: createRawSnippet(() => ({
+        render: () => '<button data-first-filter type="button">Apply filters</button>',
+      })),
+    });
+    const trigger = root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!;
+    trigger.focus();
+
+    trigger.click();
+    const dialog = root.querySelector<HTMLDialogElement>("dialog")!;
+    expect(document.activeElement).toBe(root.querySelector("[data-first-filter]"));
+
+    dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    expect(dialog.open).toBe(false);
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  // Which edge a side paints at is a rendered fact a class name cannot prove:
+  // `right-0` once passed here while the panel opened on the left. The showcase
+  // browser test (apps/showcase/test/drawer.browser.test.ts) measures it.
+  it("renders every side with its exported appearance", () => {
+    expect(DRAWER_SIDES).toEqual(["top", "right", "bottom", "left"]);
+
+    for (const side of DRAWER_SIDES) {
+      const root = render(Drawer, {
+        triggerLabel: `Open ${side} drawer`,
+        title: `${side} drawer`,
+        side,
+        class: "consumer-drawer",
+      });
+      const element = root.querySelector("dialog")!;
+
+      expect(classes(element)).toEqual(
+        classesOf(drawerAppearance({ side, class: "consumer-drawer" })),
+      );
+      expect(classes(element).has("p-[var(--reddb-spatial-inset-lg)]")).toBe(true);
+      expect(classes(element).has("motion-reduce:transition-none")).toBe(true);
+    }
+  });
+});