@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/base/test/radio-group.test.ts

@@ -0,0 +1,180 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import BinaryChoiceConsumer from "./fixtures/BinaryChoiceConsumer.svelte";
+import BinaryChoiceContractFailures from "./fixtures/BinaryChoiceContractFailures.svelte";
+import { RadioGroup, radioGroup } from "./fixtures/binary-choice-consumer";
+import { fieldset } from "./fixtures/form-scaffolding-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const OPTIONS = [
+  { value: "stable", label: "Stable" },
+  { value: "preview", label: "Preview" },
+  { value: "nightly", label: "Nightly", disabled: true },
+] as const;
+
+function radioNameFailures(root: HTMLElement): string[] {
+  const names = new Set(
+    [...root.querySelectorAll<HTMLInputElement>('input[type="radio"]')].map(
+      (control) => control.name,
+    ),
+  );
+  return names.size === 1 && !names.has("")
+    ? []
+    : ["radio group does not share one non-empty name"];
+}
+
+describe("the Base RadioGroup", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(RadioGroup).toBeDefined();
+    expect(radioGroup).toBeTypeOf("function");
+  });
+
+  it("composes Fieldset into one visibly named native radio group", () => {
+    const element = rendered(
+      render(RadioGroup, {
+        legend: "Release channel",
+        name: "channel",
+        options: OPTIONS,
+        required: true,
+      }),
+    ) as HTMLFieldSetElement;
+    const controls = [...element.querySelectorAll<HTMLInputElement>('input[type="radio"]')];
+
+    expect(element.tagName).toBe("FIELDSET");
+    expect(element.querySelector(":scope > legend")?.textContent).toBe("Release channel");
+    expect(controls).toHaveLength(3);
+    expect(controls.map(({ name }) => name)).toEqual(["channel", "channel", "channel"]);
+    expect(controls.every(({ required }) => required)).toBe(true);
+    expect(controls[2]?.disabled).toBe(true);
+    expect(
+      controls.map((control) =>
+        element.querySelector(`label[for="${control.id}"]`)?.textContent?.trim(),
+      ),
+    ).toEqual(["Stable", "Preview", "Nightly"]);
+    expect(radioNameFailures(element)).toEqual([]);
+  });
+
+  it("takes help and an error through Fieldset and names them from every radio", () => {
+    const element = rendered(
+      render(RadioGroup, {
+        legend: "Release channel",
+        name: "channel",
+        options: OPTIONS,
+        help: "Preview ships weekly.",
+        error: "Choose a channel.",
+      }),
+    ) as HTMLFieldSetElement;
+    const controls = [...element.querySelectorAll<HTMLInputElement>('input[type="radio"]')];
+    const help = element.querySelector<HTMLElement>(":scope > p:not([role])")!;
+    const error = element.querySelector<HTMLElement>(':scope > [role="alert"]')!;
+    const styles = fieldset();
+
+    expect(help.textContent).toBe("Preview ships weekly.");
+    expect(error.textContent).toBe("Choose a channel.");
+    expect(classes(help)).toEqual(classesOf(styles.help()));
+    expect(classes(error)).toEqual(classesOf(styles.error()));
+    expect(classes(error).has("text-feedback-danger-foreground")).toBe(true);
+    expect(element.getAttribute("data-fieldset-invalid")).toBe("true");
+    for (const control of controls) {
+      expect(control.getAttribute("aria-invalid")).toBe("true");
+      expect(control.getAttribute("aria-errormessage")).toBe(error.id);
+      expect(control.getAttribute("aria-describedby")).toBe(`${help.id} ${error.id}`);
+    }
+    // No error, no invalid state: only the help still describes each radio.
+    const valid = rendered(
+      render(RadioGroup, { legend: "Release channel", name: "valid", options: OPTIONS, help: "Weekly." }),
+    );
+    for (const control of valid.querySelectorAll<HTMLInputElement>('input[type="radio"]')) {
+      expect(control.hasAttribute("aria-invalid")).toBe(false);
+      expect(control.hasAttribute("aria-errormessage")).toBe(false);
+      expect(control.getAttribute("aria-describedby")).toBe(valid.querySelector(":scope > p")!.id);
+    }
+  });
+
+  it("draws each radio beside its native input and steps a disabled option's label down", () => {
+    const element = rendered(
+      render(RadioGroup, { legend: "Release channel", name: "channel", options: OPTIONS }),
+    );
+    const styles = radioGroup();
+    const controls = [...element.querySelectorAll<HTMLInputElement>('input[type="radio"]')];
+
+    for (const control of controls) {
+      const choice = control.parentElement!;
+      expect(classes(choice)).toEqual(classesOf(styles.choice()));
+      expect(classes(control.nextElementSibling!)).toEqual(classesOf(styles.box()));
+      expect(classes(control.nextElementSibling!.nextElementSibling!)).toEqual(classesOf(styles.dot()));
+      expect(classes(control.nextElementSibling!).has("rounded-full")).toBe(true);
+      expect(classes(control.nextElementSibling!).has("peer-aria-invalid:border-feedback-danger-border")).toBe(true);
+      // A radio is `:indeterminate` while its group is unanswered, so the
+      // Checkbox's mixed fill must never reach it.
+      expect([...classes(control.nextElementSibling!)].some((name) => name.includes("indeterminate"))).toBe(false);
+      expect(classes(control.closest("label")!).has("has-disabled:text-ink-muted")).toBe(true);
+    }
+  });
+
+  it("keeps native focus, exclusive selection, form value, and keyboard events", () => {
+    const onkeydown = vi.fn();
+    const form = rendered(render(BinaryChoiceConsumer, { radioOnkeydown: onkeydown }));
+    const controls = [...form.querySelectorAll<HTMLInputElement>('input[name="channel"]')];
+
+    expect(controls[0]?.checked).toBe(true);
+    controls[1]!.click();
+    flushSync();
+    expect(controls[0]?.checked).toBe(false);
+    expect(controls[1]?.checked).toBe(true);
+    expect(new FormData(form as HTMLFormElement).get("channel")).toBe("preview");
+
+    controls[1]!.focus();
+    expect(document.activeElement).toBe(controls[1]);
+    controls[1]!.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowUp", bubbles: true }),
+    );
+    flushSync();
+    expect(onkeydown).toHaveBeenCalledTimes(1);
+    expect(onkeydown.mock.calls[0]?.[0]).toMatchObject({ key: "ArrowUp" });
+  });
+
+  it("wears its exported appearance without selecting an appearance axis", () => {
+    const element = rendered(
+      render(RadioGroup, {
+        legend: "Release channel",
+        name: "channel",
+        options: OPTIONS,
+        class: "min-w-0",
+      }),
+    );
+    const styles = radioGroup();
+    const list = element.querySelector<HTMLElement>("[data-radio-list]")!;
+    const control = element.querySelector<HTMLInputElement>('input[type="radio"]')!;
+    const nested = rendered(render(BinaryChoiceConsumer, {})).querySelector<HTMLFieldSetElement>(
+      "[data-appearance-scope] fieldset",
+    )!;
+
+    expect(classes(element)).toEqual(classesOf(styles.root({ class: "min-w-0" })));
+    expect(classes(list)).toEqual(classesOf(styles.list()));
+    expect(classes(control)).toEqual(classesOf(styles.control()));
+    expect(classes(list).has("gap-[var(--reddb-spatial-gap-sm)]")).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.querySelector("[data-radio-list]")!).has(
+        "gap-[var(--reddb-spatial-gap-sm)]",
+      ),
+    ).toBe(true);
+  });
+});
+
+describe("the deliberately failing radio-group fixture", () => {
+  it("diagnoses radios without one shared name", () => {
+    const root = rendered(
+      render(BinaryChoiceContractFailures, { failure: "unshared-radio-name" }),
+    );
+    expect(radioNameFailures(root)).toEqual([
+      "radio group does not share one non-empty name",
+    ]);
+  });
+});

package/vendor/ds/kits/base/test/range-calendar.test.ts

@@ -0,0 +1,102 @@
+import { CalendarDate } from "@internationalized/date";
+import { flushSync, tick } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import CalendarContractFailures from "./fixtures/CalendarContractFailures.svelte";
+import CalendarConsumer from "./fixtures/CalendarConsumer.svelte";
+import { calendar, RangeCalendar } from "./fixtures/calendar-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function selectionAnnouncementFailures(root: HTMLElement): string[] {
+  const politeLog = root.ownerDocument.querySelector<HTMLElement>(
+    '[data-bits-announcer] [aria-live="polite"]',
+  );
+  const announcements = politeLog
+    ? [...politeLog.children].map((message) => (message as HTMLElement).innerText)
+    : [];
+  return announcements.some((message) => message?.startsWith("Selected Dates:"))
+    ? []
+    : ["selected range is not politely announced"];
+}
+
+describe("the deliberately failing RangeCalendar fixture", () => {
+  it("diagnoses a selected range without an announcement", () => {
+    const root = rendered(render(CalendarContractFailures, {
+      failure: "range-without-announcement",
+    }));
+
+    expect(selectionAnnouncementFailures(root)).toEqual([
+      "selected range is not politely announced",
+    ]);
+  });
+});
+
+describe("the Base RangeCalendar", () => {
+  it("renders no <header>, so a RangeCalendar in a popover adds no banner landmark (wave 5A)", () => {
+    const root = rendered(render(RangeCalendar, {
+      label: "Release window",
+      placeholder: new CalendarDate(2026, 6, 10),
+    }));
+    expect(root.querySelector("header")).toBeNull();
+    expect(root.querySelector("[data-range-calendar-header]")?.tagName).toBe("DIV");
+  });
+
+  it("is available with the Calendar appearance seam through the Base consumer subpath", () => {
+    expect(RangeCalendar).toBeDefined();
+    expect(calendar).toBeTypeOf("function");
+  });
+
+  it("shares the roving keyboard grid and keeps focus on one date", async () => {
+    const root = rendered(render(RangeCalendar, {
+      label: "Deployment window",
+      placeholder: new CalendarDate(2026, 6, 10),
+    }));
+    const focused = root.querySelector<HTMLElement>(
+      '[data-bits-day][data-value="2026-06-10"]',
+    )!;
+
+    focused.focus();
+    focused.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    await tick();
+    flushSync();
+
+    expect(document.activeElement?.getAttribute("data-value")).toBe("2026-06-11");
+    expect(root.querySelectorAll('[data-bits-day][tabindex="0"]')).toHaveLength(1);
+  });
+
+  it("selects and politely announces an inclusive range without relying on colour", () => {
+    const onvaluechange = vi.fn();
+    const root = rendered(render(RangeCalendar, {
+      label: "Deployment window",
+      placeholder: new CalendarDate(2026, 6, 10),
+      onvaluechange,
+    }));
+
+    root.querySelector<HTMLElement>('[data-bits-day][data-value="2026-06-10"]')!.click();
+    root.querySelector<HTMLElement>('[data-bits-day][data-value="2026-06-12"]')!.click();
+    flushSync();
+
+    const selected = onvaluechange.mock.calls.at(-1)?.[0];
+    expect(selected?.start?.toString()).toBe("2026-06-10");
+    expect(selected?.end?.toString()).toBe("2026-06-12");
+    expect(root.querySelector('[data-bits-day][data-range-start]')?.textContent).toContain("10");
+    expect(root.querySelector('[data-bits-day][data-range-middle]')?.textContent).toContain("11");
+    expect(root.querySelector('[data-bits-day][data-range-end]')?.textContent).toContain("12");
+    expect(root.querySelector('[data-range-start][role="gridcell"]')?.getAttribute("aria-selected"))
+      .toBe("true");
+    expect(selectionAnnouncementFailures(root)).toEqual([]);
+  });
+
+  it("shares Density-owned geometry and inherits every nested appearance axis", () => {
+    const consumer = render(CalendarConsumer);
+    const root = consumer.querySelector<HTMLElement>("[data-nested-range-calendar]")!;
+    const styles = calendar();
+
+    expect(classes(root)).toEqual(classesOf(styles.root({ class: "max-w-sm" })));
+    expect(classes(root.querySelector("[data-bits-day]")!).has(
+      "size-[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/rating.test.ts

@@ -0,0 +1,98 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import RangePressedConsumer from "./fixtures/RangePressedConsumer.svelte";
+import { Rating, rating } from "./fixtures/range-pressed-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the Base Rating", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(Rating).toBeDefined();
+    expect(rating).toBeTypeOf("function");
+  });
+
+  it("composes Fieldset and Label into one named, exclusive value", () => {
+    const root = rendered(
+      render(Rating, { legend: "Release confidence", name: "confidence", max: 5, value: 3 }),
+    ) as HTMLFieldSetElement;
+    const controls = [...root.querySelectorAll<HTMLInputElement>('input[type="radio"]')];
+
+    expect(root.tagName).toBe("FIELDSET");
+    expect(root.querySelector(":scope > legend")?.textContent).toBe("Release confidence");
+    expect(controls).toHaveLength(5);
+    expect(controls.map(({ name }) => name)).toEqual(Array(5).fill("confidence"));
+    expect(controls.map(({ value }) => value)).toEqual(["1", "2", "3", "4", "5"]);
+    expect(controls.filter(({ checked }) => checked).map(({ value }) => value)).toEqual(["3"]);
+    expect(root.querySelector("output")?.textContent).toBe("3 of 5");
+  });
+
+  it("makes selection visible without colour and submits the selected native value", () => {
+    const form = rendered(render(RangePressedConsumer, {}));
+    const root = form.querySelector<HTMLElement>("[data-rating]")!;
+    const controls = [...root.querySelectorAll<HTMLInputElement>('input[name="confidence"]')];
+
+    expect([...root.querySelectorAll("[data-rating-mark]")].map(({ textContent }) => textContent)).toEqual([
+      "★",
+      "★",
+      "★",
+      "☆",
+      "☆",
+    ]);
+    controls[4]!.click();
+    flushSync();
+    expect(controls.filter(({ checked }) => checked).map(({ value }) => value)).toEqual(["5"]);
+    expect(root.querySelector("output")?.textContent).toBe("5 of 5");
+    expect(new FormData(form as HTMLFormElement).get("confidence")).toBe("5");
+  });
+
+  it("takes help and an error through Fieldset, names them from every stop and marks in danger", () => {
+    const root = rendered(
+      render(Rating, {
+        legend: "Support quality",
+        name: "support",
+        help: "Shared with the support team.",
+        error: "Rate the support you received.",
+        required: true,
+      }),
+    ) as HTMLFieldSetElement;
+    const controls = [...root.querySelectorAll<HTMLInputElement>('input[type="radio"]')];
+    const help = root.querySelector<HTMLElement>(":scope > p:not([role])")!;
+    const error = root.querySelector<HTMLElement>(':scope > [role="alert"]')!;
+
+    expect(error.textContent).toBe("Rate the support you received.");
+    expect(classes(error).has("text-feedback-danger-foreground")).toBe(true);
+    expect(controls).toHaveLength(5);
+    for (const control of controls) {
+      expect(control.getAttribute("aria-invalid")).toBe("true");
+      expect(control.getAttribute("aria-errormessage")).toBe(error.id);
+      expect(control.getAttribute("aria-describedby")).toBe(`${help.id} ${error.id}`);
+    }
+    for (const mark of root.querySelectorAll("[data-rating-mark]")) {
+      expect(classes(mark).has("peer-aria-invalid:text-feedback-danger-foreground")).toBe(true);
+    }
+  });
+
+  it("keeps native focus and keyboard events", () => {
+    const onkeydown = vi.fn();
+    const form = rendered(render(RangePressedConsumer, { ratingOnkeydown: onkeydown }));
+    const control = form.querySelector<HTMLInputElement>('input[name="confidence"]')!;
+
+    control.focus();
+    expect(document.activeElement).toBe(control);
+    control.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    flushSync();
+    expect(onkeydown).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps its token appearance and axes free in a nested scope", () => {
+    const form = rendered(render(RangePressedConsumer, {}));
+    const root = form.querySelector<HTMLElement>("[data-appearance-scope] [data-rating]")!;
+    const list = root.querySelector<HTMLElement>("[data-rating-list]")!;
+    const styles = rating();
+
+    expect(classes(list)).toEqual(classesOf(styles.list()));
+    expect(classes(list).has("gap-[var(--reddb-spatial-gap-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/react-accessible-name.test.ts

@@ -0,0 +1,44 @@
+import { act, createElement as h, createRef } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button } from "../react/src/Button";
+import { Input } from "../react/src/Input";
+import { Select } from "../react/src/Select";
+import { Textarea } from "../react/src/Textarea";
+import { Field } from "../react/src/Field";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+afterEach(() => { document.body.replaceChildren(); vi.restoreAllMocks(); });
+describe("native React accessibility diagnostics", () => {
+  it("warns about unnamed controls and action labels overridden by row context, without changing DOM", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const container = document.createElement("div"); document.body.append(container);
+    const inputRef = createRef<HTMLInputElement>();
+    const root = createRoot(container);
+    await act(() => root.render(h("div", null,
+      h(Input, { ref: inputRef }), h(Textarea), h(Select), h(Button, null, h("svg", { "aria-hidden": true })),
+      h("span", { id: "context" }, "HTTPS access"), h(Button, { "aria-labelledby": "context" }, "Configure HTTPS"),
+    )));
+    expect(warn.mock.calls.map(call => String(call[0])).join("\n")).toContain("[reddb Input]");
+    expect(warn.mock.calls.map(call => String(call[0])).join("\n")).toContain("[reddb Textarea]");
+    expect(warn.mock.calls.map(call => String(call[0])).join("\n")).toContain("[reddb Select]");
+    expect(warn.mock.calls.map(call => String(call[0])).join("\n")).toContain("visible text is missing");
+    expect(inputRef.current).toBe(container.querySelector("input"));
+    expect(container.querySelector("button[aria-labelledby]")?.getAttribute("aria-labelledby")).toBe("context");
+    await act(() => root.unmount());
+    expect(inputRef.current).toBeNull();
+  });
+
+  it("accepts native labels and Field associations without inventing names", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const container = document.createElement("div"); document.body.append(container);
+    const root = createRoot(container);
+    await act(() => root.render(h("div", null,
+      h(Field, { label: "Name", help: "Used for billing", children: control => h(Input, control) }),
+      h("label", null, "Notes", h(Textarea)),
+      h(Select, { "aria-label": "Region" }), h(Button, null, "Save"),
+    )));
+    expect(warn).not.toHaveBeenCalled();
+    await act(() => root.unmount());
+  });
+});