@reddb-io/ui-kit 0.3.4 → 0.3.5

package/vendor/ds/kits/base/test/event-dialect.test.ts

@@ -0,0 +1,239 @@
+// One event dialect (ADR 0026), proven through the public Base subpath.
+//
+// A value control is `bind:value` plus `onvaluechange(value)`; a disclosure
+// or overlay is `bind:open` plus `onopenchange(open)`; any other bindable
+// state `<state>` reports through `on<state>change`. A native event name is
+// never reused with a payload that is not that Event, so `onchange` keeps the
+// native Event on Checkbox, Switch and Select, and the renamed DS callbacks
+// stay one release as aliases that still fire and warn once in development.
+// `onselect` (item activation) is the sanctioned exception and is untouched.
+
+import { createRawSnippet, flushSync } from "svelte";
+import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from "vitest";
+import {
+  Accordion,
+  Carousel,
+  Checkbox,
+  DateField,
+  Disclosure,
+  Input,
+  RadioGroup,
+  Select,
+  Slider,
+  Swap,
+  Switch,
+  Tabs,
+  Textarea,
+  ToggleButton,
+} from "@reddb-io/design-system/base";
+import { render, rendered } from "./mount";
+
+const TAB_ITEMS = [
+  { value: "overview", label: "Overview" },
+  { value: "events", label: "Events" },
+];
+const SECTIONS = [
+  { value: "changes", label: "What changed?" },
+  { value: "impact", label: "What is the impact?" },
+];
+const slides = ["One", "Two"].map((label) => ({
+  label,
+  content: createRawSnippet(() => ({ render: () => `<p>${label}</p>` })),
+}));
+
+function press(element: Element, key: string): void {
+  element.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true }));
+  flushSync();
+}
+
+function type(element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, value: string, event = "input"): void {
+  element.value = value;
+  element.dispatchEvent(new Event(event, { bubbles: true }));
+  flushSync();
+}
+
+let warn: MockInstance<typeof console.warn>;
+beforeEach(() => {
+  warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+});
+afterEach(() => {
+  warn.mockRestore();
+});
+
+const warnings = () => warn.mock.calls.map(([message]) => String(message));
+
+describe("the canonical callbacks", () => {
+  it("reports a value change through onvaluechange on Tabs, Accordion and Carousel", () => {
+    const tabsChange = vi.fn();
+    const tabs = rendered(render(Tabs, { label: "View", items: TAB_ITEMS, onvaluechange: tabsChange }));
+    const [first] = [...tabs.querySelectorAll<HTMLButtonElement>('[role="tab"]')];
+    first!.focus();
+    press(first!, "ArrowRight");
+    expect(tabsChange).toHaveBeenCalledWith("events");
+
+    const accordionChange = vi.fn();
+    const accordion = rendered(render(Accordion, { label: "Questions", items: SECTIONS, onvaluechange: accordionChange }));
+    accordion.querySelectorAll<HTMLButtonElement>("button[aria-expanded]")[1]!.click();
+    flushSync();
+    expect(accordionChange).toHaveBeenLastCalledWith(["impact"]);
+
+    const carouselChange = vi.fn();
+    const carousel = rendered(render(Carousel, { label: "Slides", slides, onvaluechange: carouselChange }));
+    carousel.querySelector<HTMLButtonElement>("[aria-label='Next slide']")!.click();
+    flushSync();
+    expect(carouselChange).toHaveBeenCalledWith(1);
+    expect(warnings()).toEqual([]);
+  });
+
+  it("reports open state through onopenchange and other bindable state through on<state>change", () => {
+    const openChange = vi.fn();
+    const disclosure = rendered(render(Disclosure, { label: "Details", onopenchange: openChange }));
+    disclosure.querySelector<HTMLButtonElement>("button")!.click();
+    flushSync();
+    expect(openChange).toHaveBeenCalledWith(true);
+
+    const swappedChange = vi.fn();
+    rendered(render(Swap, { label: "Show detail", onswappedchange: swappedChange })).click();
+    flushSync();
+    expect(swappedChange).toHaveBeenCalledWith(true);
+
+    const pressedChange = vi.fn();
+    rendered(render(ToggleButton, { label: "Bold", onpressedchange: pressedChange })).click();
+    flushSync();
+    expect(pressedChange).toHaveBeenCalledWith(true);
+    expect(warnings()).toEqual([]);
+  });
+
+  it("gives every value control onvaluechange while native events keep their Event", () => {
+    const inputChange = vi.fn();
+    const nativeInput = vi.fn();
+    const input = rendered(render(Input, { "aria-label": "Name", onvaluechange: inputChange, oninput: nativeInput })) as HTMLInputElement;
+    type(input, "Ada");
+    expect(inputChange).toHaveBeenCalledWith("Ada");
+    expect(nativeInput.mock.calls[0]![0]).toBeInstanceOf(Event);
+
+    const textareaChange = vi.fn();
+    const textarea = rendered(render(Textarea, { "aria-label": "Notes", onvaluechange: textareaChange })) as HTMLTextAreaElement;
+    type(textarea, "Hello");
+    expect(textareaChange).toHaveBeenCalledWith("Hello");
+
+    const selectChange = vi.fn();
+    const nativeChange = vi.fn();
+    const select = rendered(
+      render(Select, {
+        "aria-label": "Region",
+        options: [
+          { value: "eu", label: "Europe" },
+          { value: "us", label: "United States" },
+        ],
+        onvaluechange: selectChange,
+        onchange: nativeChange,
+      }),
+    ) as HTMLSelectElement;
+    type(select, "us", "change");
+    expect(selectChange).toHaveBeenCalledWith("us");
+    expect(nativeChange.mock.calls[0]![0]).toBeInstanceOf(Event);
+
+    const sliderChange = vi.fn();
+    const slider = rendered(render(Slider, { label: "Volume", onvaluechange: sliderChange }))
+      .querySelector<HTMLInputElement>('input[type="range"]')!;
+    type(slider, "40");
+    expect(sliderChange).toHaveBeenCalledWith(40);
+
+    const radioChange = vi.fn();
+    const radio = rendered(
+      render(RadioGroup, {
+        legend: "Channel",
+        name: "channel",
+        options: [
+          { value: "stable", label: "Stable" },
+          { value: "beta", label: "Beta" },
+        ],
+        onvaluechange: radioChange,
+      }),
+    );
+    radio.querySelectorAll<HTMLInputElement>('input[type="radio"]')[1]!.click();
+    flushSync();
+    expect(radioChange).toHaveBeenCalledWith("beta");
+
+    const dateChange = vi.fn();
+    const date = rendered(render(DateField, { label: "Start", onvaluechange: dateChange }));
+    const [year, month, day] = [...date.querySelectorAll<HTMLInputElement>("input")];
+    type(year!, "2026");
+    type(month!, "10");
+    expect(dateChange).not.toHaveBeenCalled();
+    type(day!, "05");
+    expect(dateChange).toHaveBeenCalledWith("2026-10-05");
+    expect(warnings()).toEqual([]);
+  });
+
+  it("reports checked state through oncheckedchange beside the native onchange Event", () => {
+    for (const Control of [Checkbox, Switch]) {
+      const checkedChange = vi.fn();
+      const nativeChange = vi.fn();
+      const input = rendered(render(Control, { label: "Notify me", oncheckedchange: checkedChange, onchange: nativeChange }))
+        .querySelector<HTMLInputElement>("input")!;
+      input.click();
+      flushSync();
+      expect(checkedChange).toHaveBeenCalledWith(true);
+      expect(nativeChange.mock.calls[0]![0]).toBeInstanceOf(Event);
+    }
+  });
+});
+
+describe("the deprecated aliases (one release)", () => {
+  it("still fire, and warn once per name in development", () => {
+    const tabsChange = vi.fn();
+    for (const _ of [1, 2]) {
+      const tabs = rendered(render(Tabs, { label: "View", items: TAB_ITEMS, onchange: tabsChange }));
+      const [first] = [...tabs.querySelectorAll<HTMLButtonElement>('[role="tab"]')];
+      first!.focus();
+      press(first!, "ArrowRight");
+    }
+    expect(tabsChange).toHaveBeenCalledWith("events");
+
+    const disclosureChange = vi.fn();
+    rendered(render(Disclosure, { label: "Details", onchange: disclosureChange }))
+      .querySelector<HTMLButtonElement>("button")!
+      .click();
+    flushSync();
+    expect(disclosureChange).toHaveBeenCalledWith(true);
+
+    const carouselChange = vi.fn();
+    rendered(render(Carousel, { label: "Slides", slides, onchange: carouselChange }))
+      .querySelector<HTMLButtonElement>("[aria-label='Next slide']")!
+      .click();
+    flushSync();
+    expect(carouselChange).toHaveBeenCalledWith(1);
+
+    const swapChange = vi.fn();
+    rendered(render(Swap, { label: "Show detail", onchange: swapChange })).click();
+    flushSync();
+    expect(swapChange).toHaveBeenCalledWith(true);
+
+    expect(warnings()).toEqual([
+      expect.stringMatching(/\[reddb Tabs\] onchange is deprecated.*onvaluechange/),
+      expect.stringMatching(/\[reddb Disclosure\] onchange is deprecated.*onopenchange/),
+      expect.stringMatching(/\[reddb Carousel\] onchange is deprecated.*onvaluechange/),
+      expect.stringMatching(/\[reddb Swap\] onchange is deprecated.*onswappedchange/),
+    ]);
+  });
+
+  it("keeps Accordion's bound expanded working beside the canonical value", () => {
+    const accordionChange = vi.fn();
+    const root = rendered(
+      render(Accordion, { label: "Questions", items: SECTIONS, expanded: ["changes"], onchange: accordionChange }),
+    );
+    const controls = [...root.querySelectorAll<HTMLButtonElement>("button[aria-expanded]")];
+    expect(controls.map(({ ariaExpanded }) => ariaExpanded)).toEqual(["true", "false"]);
+    controls[1]!.click();
+    flushSync();
+    expect(controls.map(({ ariaExpanded }) => ariaExpanded)).toEqual(["false", "true"]);
+    expect(accordionChange).toHaveBeenLastCalledWith(["impact"]);
+    expect(warnings()).toEqual([
+      expect.stringMatching(/\[reddb Accordion\] expanded is deprecated.*bind:value/),
+      expect.stringMatching(/\[reddb Accordion\] onchange is deprecated.*onvaluechange/),
+    ]);
+  });
+});
+

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

@@ -0,0 +1,106 @@
+import { describe, expect, it } from "vitest";
+import FieldInputConsumer from "./fixtures/FieldInputConsumer.svelte";
+import FieldInputAccessibilityFailures from "./fixtures/FieldInputAccessibilityFailures.svelte";
+import { Field, field } from "./fixtures/field-input-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function control(root: HTMLElement): HTMLInputElement {
+  const input = root.querySelector("input");
+  expect(input, "the Field rendered no Input").not.toBeNull();
+  return input!;
+}
+
+function associationFailures(root: HTMLElement): string[] {
+  const failures: string[] = [];
+  for (const input of root.querySelectorAll("input")) {
+    const id = input.id;
+    const labelled =
+      input.hasAttribute("aria-label") ||
+      (id !== "" && [...root.querySelectorAll("label")].some((label) => label.htmlFor === id));
+    if (!labelled) failures.push("missing label association");
+
+    const error = root.querySelector<HTMLElement>("[id$='-error']");
+    if (input.getAttribute("aria-invalid") === "true" && error) {
+      const describedBy = new Set((input.getAttribute("aria-describedby") ?? "").split(/\s+/));
+      const errorMessage = input.getAttribute("aria-errormessage");
+      if (!describedBy.has(error.id) || errorMessage !== error.id) {
+        failures.push("missing error association");
+      }
+    }
+
+    if (input.dataset.intendedRequired === "true" && !input.required) {
+      failures.push("required was not forwarded");
+    }
+    if (input.dataset.intendedPattern && input.pattern !== input.dataset.intendedPattern) {
+      failures.push("pattern was not forwarded");
+    }
+  }
+  return failures;
+}
+
+describe("the Base Field", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(Field).toBeDefined();
+    expect(field).toBeTypeOf("function");
+  });
+
+  it("owns the label and associates it with its control", () => {
+    const root = rendered(render(FieldInputConsumer, {}));
+    const input = control(root);
+    const label = root.querySelector("label");
+
+    expect(input.id).not.toBe("");
+    expect(label?.getAttribute("for")).toBe(input.id);
+    expect(label?.textContent?.trim()).toBe("Email address");
+    expect(associationFailures(root)).toEqual([]);
+  });
+
+  it("uses an explicit control id when the consumer supplies one", () => {
+    const root = rendered(render(FieldInputConsumer, { id: "account-email" }));
+    expect(control(root).id).toBe("account-email");
+    expect(root.querySelector("label")?.getAttribute("for")).toBe("account-email");
+  });
+
+  it("associates help and an announced error without replacing either", () => {
+    const root = rendered(
+      render(FieldInputConsumer, {
+        id: "account-email",
+        help: "We only use this for account notices.",
+        error: "Enter a valid email address.",
+      }),
+    );
+    const input = control(root);
+    const describedBy = new Set((input.getAttribute("aria-describedby") ?? "").split(/\s+/));
+
+    expect(describedBy).toEqual(new Set(["account-email-help", "account-email-error"]));
+    expect(input.getAttribute("aria-errormessage")).toBe("account-email-error");
+    expect(input.getAttribute("aria-invalid")).toBe("true");
+    expect(root.querySelector("#account-email-help")?.textContent).toContain("account notices");
+    expect(root.querySelector("#account-email-error")?.getAttribute("role")).toBe("alert");
+    expect(associationFailures(root)).toEqual([]);
+  });
+
+  it("owns required semantics visibly and through the native control", () => {
+    const root = rendered(render(FieldInputConsumer, { required: true }));
+    expect(control(root).required).toBe(true);
+    expect(root.querySelector("label")?.textContent).toContain("required");
+  });
+
+  it("wears exactly the classes exposed by its public variant seam", () => {
+    const root = rendered(render(FieldInputConsumer, {}));
+    const styles = field();
+    expect(classes(root)).toEqual(classesOf(styles.root()));
+    expect(classes(root.querySelector("label")!)).toEqual(classesOf(styles.label()));
+  });
+});
+
+describe("the deliberately failing Field accessibility fixtures", () => {
+  it.each([
+    ["missing-label", ["missing label association"]],
+    ["missing-error-association", ["missing error association"]],
+    ["invalid-native-forwarding", ["missing label association", "required was not forwarded", "pattern was not forwarded"]],
+  ] as const)("diagnoses %s", (failure, expected) => {
+    const root = rendered(render(FieldInputAccessibilityFailures, { failure }));
+    expect(associationFailures(root)).toEqual(expected);
+  });
+});

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

@@ -0,0 +1,95 @@
+import { describe, expect, it } from "vitest";
+import FormScaffoldingConsumer from "./fixtures/FormScaffoldingConsumer.svelte";
+import FormScaffoldingFailures from "./fixtures/FormScaffoldingFailures.svelte";
+import { Fieldset, fieldset } from "./fixtures/form-scaffolding-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function groupingFailures(root: HTMLElement): string[] {
+  const intendedGroup = root.querySelector("[data-intended-group]");
+  const group = intendedGroup?.closest("fieldset");
+  const legend = group?.querySelector(":scope > legend");
+  return group && legend?.textContent?.trim() ? [] : ["controls lost fieldset grouping semantics"];
+}
+
+describe("the Base Fieldset", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(Fieldset).toBeDefined();
+    expect(fieldset).toBeTypeOf("function");
+  });
+
+  it("is a native named group whose controls keep native focus", () => {
+    const root = rendered(render(FormScaffoldingConsumer, {}));
+    const element = root.querySelector<HTMLFieldSetElement>("fieldset")!;
+    const legend = element.querySelector(":scope > legend");
+    const control = element.querySelector<HTMLInputElement>("input")!;
+
+    expect(element.tagName).toBe("FIELDSET");
+    expect(legend?.textContent?.trim()).toBe("Contact preferences");
+    expect(groupingFailures(root)).toEqual([]);
+
+    control.focus();
+    expect(document.activeElement).toBe(control);
+  });
+
+  it("forwards native disabled grouping to every contained control", () => {
+    const root = rendered(render(FormScaffoldingConsumer, { disabledGroup: true }));
+    const element = root.querySelector<HTMLFieldSetElement>("fieldset")!;
+    const control = element.querySelector<HTMLInputElement>("input")!;
+
+    expect(element.disabled).toBe(true);
+    expect(control.matches(":disabled")).toBe(true);
+  });
+
+  it("renders a group's help and error and steps the legend down when the group is disabled", () => {
+    const element = rendered(
+      render(Fieldset, { legend: "Delivery", id: "delivery", help: "Pick one.", error: "Choose a delivery." }),
+    ) as HTMLFieldSetElement;
+    const styles = fieldset();
+    const help = element.querySelector<HTMLElement>("#delivery-help")!;
+    const error = element.querySelector<HTMLElement>("#delivery-error")!;
+
+    expect(help.textContent).toBe("Pick one.");
+    expect(classes(help)).toEqual(classesOf(styles.help()));
+    expect(error.getAttribute("role")).toBe("alert");
+    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");
+    expect(classes(element).has("group/fieldset")).toBe(true);
+    expect(classes(element.querySelector("legend")!).has("group-disabled/fieldset:text-ink-muted")).toBe(true);
+
+    const quiet = rendered(render(Fieldset, { legend: "Delivery" }));
+    expect(quiet.querySelector("p")).toBeNull();
+    expect(quiet.hasAttribute("data-fieldset-invalid")).toBe(false);
+  });
+
+  it("wears exactly its exported appearance and merges consumer classes", () => {
+    const root = rendered(render(FormScaffoldingConsumer, {}));
+    const element = root.querySelector<HTMLFieldSetElement>("fieldset")!;
+    const styles = fieldset();
+
+    expect(classes(element)).toEqual(classesOf(styles.root({ class: "min-w-0" })));
+    expect(classes(element.querySelector("legend")!)).toEqual(classesOf(styles.legend()));
+  });
+
+  it("keeps Density and nested appearance selection outside the component", () => {
+    const root = rendered(render(FormScaffoldingConsumer, {}));
+    const element = root.querySelector<HTMLFieldSetElement>(
+      "[data-appearance-scope] fieldset",
+    )!;
+
+    expect(element.hasAttribute("data-theme")).toBe(false);
+    expect(element.hasAttribute("data-color-scheme")).toBe(false);
+    expect(element.hasAttribute("data-density")).toBe(false);
+    // Field to field inside a group is the layout tier's smaller step (ADR 0024).
+    expect(classes(element).has("gap-[var(--reddb-spatial-layout-gap-sm)]")).toBe(true);
+  });
+});
+
+describe("the deliberately failing Fieldset fixture", () => {
+  it("diagnoses controls whose visual group lost native semantics", () => {
+    const root = rendered(
+      render(FormScaffoldingFailures, { failure: "lost-fieldset-group" }),
+    );
+    expect(groupingFailures(root)).toEqual(["controls lost fieldset grouping semantics"]);
+  });
+});

package/vendor/ds/kits/base/test/file-input.test.ts

@@ -0,0 +1,99 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import SpecializedEntryConsumer from "./fixtures/SpecializedEntryConsumer.svelte";
+import SpecializedEntryContractFailures from "./fixtures/SpecializedEntryContractFailures.svelte";
+import { FileInput, fileInput } from "./fixtures/specialized-entry-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function filenameFeedbackFailures(root: HTMLElement): string[] {
+  const input = root.querySelector<HTMLInputElement>('input[type="file"]');
+  const feedback = root.querySelector<HTMLElement>("[data-file-name]");
+  return input && feedback?.getAttribute("aria-live") === "polite"
+    ? []
+    : ["selected filename is not exposed as polite visible feedback"];
+}
+
+function setFiles(input: HTMLInputElement, names: string[]): void {
+  const files = names.map((name) => new File([name], name, { type: "text/plain" }));
+  Object.defineProperty(input, "files", {
+    configurable: true,
+    writable: true,
+    value: Object.assign(files, { item: (index: number) => files[index] ?? null }),
+  });
+}
+
+describe("the Base FileInput", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(FileInput).toBeDefined();
+    expect(fileInput).toBeTypeOf("function");
+  });
+
+  it("composes Field and Input into one labeled native file control", () => {
+    const root = rendered(render(FileInput, {
+      label: "Upload evidence",
+      help: "PDF only.",
+      name: "evidence",
+      accept: ".pdf",
+      multiple: true,
+      required: true,
+    }));
+    const input = root.querySelector<HTMLInputElement>('input[type="file"]')!;
+
+    expect(input.type).toBe("file");
+    expect(input.name).toBe("evidence");
+    expect(input.accept).toBe(".pdf");
+    expect(input.multiple).toBe(true);
+    expect(input.required).toBe(true);
+    expect(root.querySelector<HTMLLabelElement>(`label[for="${input.id}"]`)?.textContent)
+      .toContain("Upload evidence");
+    expect(input.getAttribute("aria-describedby")).toContain(`${input.id}-help`);
+    input.focus();
+    expect(document.activeElement).toBe(input);
+  });
+
+  it("keeps selected filenames visible and announced while forwarding change", () => {
+    const onchange = vi.fn();
+    const root = rendered(render(FileInput, { label: "Attachments", multiple: true, onchange }));
+    const input = root.querySelector<HTMLInputElement>('input[type="file"]')!;
+    const feedback = root.querySelector<HTMLElement>("[data-file-name]")!;
+
+    expect(feedback.textContent).toContain("No files selected");
+    setFiles(input, ["trace.txt", "report.txt"]);
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+    flushSync();
+
+    expect(feedback.textContent).toContain("trace.txt, report.txt");
+    expect(feedback.getAttribute("aria-live")).toBe("polite");
+    expect(onchange).toHaveBeenCalledTimes(1);
+    expect(filenameFeedbackFailures(root)).toEqual([]);
+  });
+
+  it("wears token-backed appearance and inherits a nested appearance scope", () => {
+    const root = rendered(render(FileInput, { label: "Upload", class: "min-w-0" }));
+    const styles = fileInput();
+    const input = root.querySelector<HTMLInputElement>('input[type="file"]')!;
+    const nested = rendered(render(SpecializedEntryConsumer, {}))
+      .querySelector<HTMLElement>('[data-appearance-scope] [data-file-input]')!;
+
+    expect(classes(root)).toEqual(classesOf(styles.root()));
+    expect(classes(input)).toEqual(classesOf(styles.control({ class: "min-w-0" })));
+    expect(classes(input).has("h-[var(--reddb-spatial-control-height-md)]")).toBe(true);
+    expect(root.hasAttribute("data-theme")).toBe(false);
+    expect(root.hasAttribute("data-color-scheme")).toBe(false);
+    expect(root.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);
+  });
+});
+
+describe("the deliberately failing file-input fixture", () => {
+  it("diagnoses a file control that hides its selected filename", () => {
+    const root = rendered(render(SpecializedEntryContractFailures, {
+      failure: "hidden-file-name",
+    }));
+    expect(filenameFeedbackFailures(root)).toEqual([
+      "selected filename is not exposed as polite visible feedback",
+    ]);
+  });
+});

package/vendor/ds/kits/base/test/fixtures/AccessibleNameConsumer.svelte

@@ -0,0 +1,65 @@
+<!-- Wave 5A: every way a field and a Button get their accessible name, and the ways they do not. -->
+<script lang="ts">
+  import { Button, Field, Input, Select, Textarea } from "@reddb-io/design-system/base";
+
+  interface Props {
+    case:
+      | "field"
+      | "aria-label"
+      | "aria-labelledby"
+      | "label-for"
+      | "wrapping-label"
+      | "unnamed-input"
+      | "unnamed-textarea"
+      | "unnamed-select"
+      | "empty-field"
+      | "text-button"
+      | "sr-only-button"
+      | "icon-button"
+      | "labelled-icon-button";
+  }
+
+  const { case: which }: Props = $props();
+</script>
+
+{#if which === "field"}
+  <Field label="Name">
+    {#snippet children(control)}<Input {...control} />{/snippet}
+  </Field>
+  <Field label="Notes">
+    {#snippet children(control)}<Textarea {...control} />{/snippet}
+  </Field>
+  <Field label="Region">
+    {#snippet children(control)}<Select {...control} options={[{ value: "a", label: "A" }]} />{/snippet}
+  </Field>
+{:else if which === "aria-label"}
+  <Input aria-label="Search" />
+  <Textarea aria-label="Notes" />
+  <Select aria-label="Region"><option>A</option></Select>
+{:else if which === "aria-labelledby"}
+  <span id="name-label">Name</span>
+  <Input aria-labelledby="name-label" />
+{:else if which === "label-for"}
+  <label for="native-name">Name</label>
+  <Input id="native-name" />
+{:else if which === "wrapping-label"}
+  <label>Name <Input /></label>
+{:else if which === "unnamed-input"}
+  <Input placeholder="Placeholder is not a name" />
+{:else if which === "unnamed-textarea"}
+  <Textarea />
+{:else if which === "unnamed-select"}
+  <Select><option>A</option></Select>
+{:else if which === "empty-field"}
+  <Field label="">
+    {#snippet children(control)}<Input {...control} />{/snippet}
+  </Field>
+{:else if which === "text-button"}
+  <Button>Save</Button>
+{:else if which === "sr-only-button"}
+  <Button><svg aria-hidden="true"></svg><span class="sr-only">Close</span></Button>
+{:else if which === "icon-button"}
+  <Button><svg aria-hidden="true"></svg></Button>
+{:else if which === "labelled-icon-button"}
+  <Button aria-label="Close"><svg aria-hidden="true"></svg></Button>
+{/if}

package/vendor/ds/kits/base/test/fixtures/BinaryChoiceConsumer.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { Checkbox, Form, RadioGroup, Switch } from "@reddb-io/design-system/base";
+
+  interface Props {
+    checkboxChecked?: boolean;
+    checkboxOnchange?: (event: Event) => void;
+    radioOnkeydown?: (event: KeyboardEvent) => void;
+    switchOnchange?: (event: Event) => void;
+  }
+
+  const {
+    checkboxChecked = true,
+    checkboxOnchange,
+    radioOnkeydown,
+    switchOnchange,
+  }: Props = $props();
+
+  const channels = [
+    { value: "stable", label: "Stable" },
+    { value: "preview", label: "Preview" },
+  ] as const;
+</script>
+
+<Form data-testid="binary-choice-form">
+  <Checkbox
+    label="Share diagnostics"
+    name="telemetry"
+    value="allowed"
+    checked={checkboxChecked}
+    onchange={checkboxOnchange}
+  />
+
+  <RadioGroup
+    legend="Release channel"
+    name="channel"
+    options={channels}
+    value="stable"
+    onkeydown={radioOnkeydown}
+  />
+
+  <Switch
+    label="Automatic updates"
+    name="updates"
+    value="automatic"
+    onchange={switchOnchange}
+  />
+
+  <div
+    data-appearance-scope
+    data-theme="marketing"
+    data-color-scheme="dark"
+    data-density="compact"
+  >
+    <Checkbox label="Nested diagnostics" name="nested-diagnostics" />
+    <RadioGroup
+      legend="Nested channel"
+      name="nested-channel"
+      options={channels}
+      value="preview"
+    />
+    <Switch label="Nested updates" name="nested-updates" />
+  </div>
+</Form>