@reddb-io/ui-kit 0.3.3 → 0.3.5

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

@@ -0,0 +1,177 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import RangePressedConsumer from "./fixtures/RangePressedConsumer.svelte";
+import RangePressedContractFailures from "./fixtures/RangePressedContractFailures.svelte";
+import { ToggleGroup, toggleGroup } from "./fixtures/range-pressed-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const OPTIONS = [
+  { value: "left", label: "Left" },
+  { value: "center", label: "Center" },
+  { value: "right", label: "Right" },
+] as const;
+
+function singleSelectionFailures(root: HTMLElement): string[] {
+  const buttons = [...root.querySelectorAll<HTMLButtonElement>("button[aria-pressed]")];
+  return buttons.length > 0 && buttons.filter((button) => button.ariaPressed === "true").length === 1
+    ? []
+    : ["toggle group does not expose exactly one pressed option"];
+}
+
+describe("the Base ToggleGroup", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(ToggleGroup).toBeDefined();
+    expect(toggleGroup).toBeTypeOf("function");
+  });
+
+  it("composes Fieldset and ToggleButton into one named single selection", () => {
+    const root = rendered(
+      render(ToggleGroup, {
+        legend: "Alignment",
+        options: OPTIONS,
+        value: "center",
+      }),
+    );
+    const buttons = [...root.querySelectorAll<HTMLButtonElement>("button[aria-pressed]")];
+
+    expect(root.tagName).toBe("FIELDSET");
+    expect(root.querySelector(":scope > legend")?.textContent).toBe("Alignment");
+    expect(root.querySelector("[role='group']")).not.toBeNull();
+    expect(buttons.map(({ textContent }) => textContent?.trim())).toEqual(["Left", "Center", "Right"]);
+    expect(buttons.map(({ ariaPressed }) => ariaPressed)).toEqual(["false", "true", "false"]);
+    expect(buttons.map(({ tabIndex }) => tabIndex)).toEqual([-1, 0, -1]);
+    expect(singleSelectionFailures(root)).toEqual([]);
+  });
+
+  it("moves the single selection by click and submits it", () => {
+    const onvaluechange = vi.fn();
+    const form = rendered(render(RangePressedConsumer, { groupOnvaluechange: onvaluechange }));
+    const root = form.querySelector<HTMLElement>("[data-toggle-group]")!;
+    const buttons = [...root.querySelectorAll<HTMLButtonElement>("button[aria-pressed]")];
+
+    buttons[2]!.click();
+    flushSync();
+    expect(buttons.map(({ ariaPressed }) => ariaPressed)).toEqual(["false", "false", "true"]);
+    expect(singleSelectionFailures(root)).toEqual([]);
+    expect(new FormData(form as HTMLFormElement).get("alignment")).toBe("right");
+    expect(onvaluechange).toHaveBeenCalledWith("right");
+
+    buttons[2]!.click();
+    flushSync();
+    expect(singleSelectionFailures(root)).toEqual([]);
+  });
+
+  it("uses roving focus and arrow keys to select one enabled option", () => {
+    const root = rendered(
+      render(ToggleGroup, { legend: "Alignment", options: OPTIONS, value: "left" }),
+    );
+    const buttons = [...root.querySelectorAll<HTMLButtonElement>("button[aria-pressed]")];
+
+    buttons[0]!.focus();
+    buttons[0]!.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true, cancelable: true }),
+    );
+    flushSync();
+    expect(document.activeElement).toBe(buttons[1]);
+    expect(buttons.map(({ ariaPressed }) => ariaPressed)).toEqual(["false", "true", "false"]);
+    expect(buttons.map(({ tabIndex }) => tabIndex)).toEqual([-1, 0, -1]);
+  });
+
+  it("takes help and an error through Fieldset, names them from every option and edges the group in danger", () => {
+    const root = rendered(
+      render(ToggleGroup, {
+        legend: "Alignment",
+        options: OPTIONS,
+        value: "center",
+        help: "Applies to every paragraph.",
+        error: "Justified text is not available here.",
+      }),
+    );
+    const buttons = [...root.querySelectorAll<HTMLButtonElement>("button[aria-pressed]")];
+    const list = root.querySelector<HTMLElement>("[role='group']")!;
+    const help = root.querySelector<HTMLElement>(":scope > p:not([role])")!;
+    const error = root.querySelector<HTMLElement>(':scope > [role="alert"]')!;
+
+    expect(error.textContent).toBe("Justified text is not available here.");
+    expect(classes(error).has("text-feedback-danger-foreground")).toBe(true);
+    for (const button of buttons) {
+      expect(button.getAttribute("aria-invalid")).toBe("true");
+      expect(button.getAttribute("aria-errormessage")).toBe(error.id);
+      expect(button.getAttribute("aria-describedby")).toBe(`${help.id} ${error.id}`);
+    }
+    expect(classes(list)).toEqual(classesOf(toggleGroup({ invalid: true }).list()));
+    expect(classes(list).has("border-feedback-danger-border")).toBe(true);
+    expect(classes(list).has("border-control-edge")).toBe(false);
+    // The separators between options keep the control edge.
+    for (const button of buttons) expect(classes(button).has("border-e-control-edge")).toBe(true);
+    expect(buttons.map(({ ariaPressed }) => ariaPressed)).toEqual(["false", "true", "false"]);
+  });
+
+  // Maintainer decision (2026-10-06): the standard segmented control. The
+  // group is exactly one Button tall (control-height-md, border included) and
+  // its segments sit flush, split by control-edge dividers; this replaces the
+  // inset the group carried since issue 423.
+  it("draws a one-Button-tall border-role contour with flush, divided segments", () => {
+    const form = rendered(render(RangePressedConsumer, {}));
+    const root = form.querySelector<HTMLElement>("[data-appearance-scope] [data-toggle-group]")!;
+    const list = root.querySelector<HTMLElement>("[role='group']")!;
+    const options = [...list.querySelectorAll<HTMLElement>("button")];
+    const styles = toggleGroup();
+
+    expect(classes(list)).toEqual(classesOf(styles.list()));
+    expect(options).toHaveLength(3);
+    expect(options[0]!.nextElementSibling).toBe(options[1]);
+    expect(classes(list).has("gap-0")).toBe(true);
+    expect(classes(list).has("border-control-edge")).toBe(true);
+    expect(classes(list).has("h-[var(--reddb-spatial-control-height-md)]")).toBe(true);
+    expect(classes(list).has("box-border")).toBe(true);
+    expect([...classes(list)].some((name) => /^p[xy]?-/.test(name))).toBe(false);
+    expect(classes(list).has("border-muted")).toBe(false);
+    expect(classes(list).has("rounded-md")).toBe(true);
+    for (const option of options) {
+      expect(classes(option).has("border-0")).toBe(true);
+      expect(classes(option).has("border-e")).toBe(true);
+      expect(classes(option).has("border-e-control-edge")).toBe(true);
+      expect(classes(option).has("last:border-e-0")).toBe(true);
+      expect(classes(option).has("rounded-none")).toBe(true);
+      expect(classes(option).has("leading-normal")).toBe(true);
+      expect(classes(option).has("h-auto")).toBe(true);
+      expect(classes(option).has("px-[var(--reddb-spatial-inset-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);
+  });
+});
+
+describe("the deliberately failing ToggleGroup fixture", () => {
+  it("diagnoses a group without single-selection semantics", () => {
+    const root = rendered(
+      render(RangePressedContractFailures, { failure: "multi-select-toggle-group" }),
+    );
+    expect(singleSelectionFailures(root)).toEqual([
+      "toggle group does not expose exactly one pressed option",
+    ]);
+  });
+});
+
+describe("the ToggleGroup pressed language", () => {
+  it("draws the pressed option neutral with a 2px ink bottom indicator, never a red fill", () => {
+    const root = rendered(render(ToggleGroup, { legend: "Alignment", options: OPTIONS, value: "center" }));
+    const buttons = [...root.querySelectorAll<HTMLButtonElement>("button[aria-pressed]")];
+    const pressed = buttons.find((button) => button.getAttribute("aria-pressed") === "true")!;
+
+    expect(pressed.textContent?.trim()).toBe("Center");
+    expect(classes(pressed).has("font-medium")).toBe(true);
+    for (const button of buttons) {
+      const names = classes(button);
+      expect(names.has("aria-pressed:bg-foreground/10")).toBe(true);
+      expect(names.has("aria-pressed:text-foreground")).toBe(true);
+      expect(names.has("aria-pressed:border-b-foreground")).toBe(true);
+      // The edge is reserved on every option, transparent until pressed.
+      expect(names.has("border-b-2")).toBe(true);
+      expect(names.has("border-transparent")).toBe(true);
+      expect([...names].some((name) => /(?:^|:)bg-primary(?:\/|$)|text-on-primary/.test(name))).toBe(false);
+    }
+  });
+});

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

@@ -0,0 +1,61 @@
+import { createRawSnippet, flushSync } from "svelte";
+import { describe, expect, it } from "vitest";
+import { Tooltip, tooltip as tooltipAppearance } from "./fixtures/dialog-tooltip-consumer";
+import { classes, classesOf, render } from "./mount";
+
+describe("the Base Tooltip", () => {
+  it("opens from keyboard focus and describes an independently named trigger", () => {
+    const root = render(Tooltip, {
+      label: "Copy connection string",
+      content: "Copies the value to your clipboard",
+      children: createRawSnippet(() => ({ render: () => "<span>Copy</span>" })),
+    });
+    const trigger = root.querySelector<HTMLButtonElement>("[data-tooltip-trigger]")!;
+
+    trigger.focus();
+    flushSync();
+
+    const tooltip = document.body.querySelector<HTMLElement>('[role="tooltip"]')!;
+    expect(trigger.getAttribute("aria-label")).toBe("Copy connection string");
+    expect(trigger.getAttribute("aria-describedby")).toBe(tooltip.id);
+    expect(tooltip.textContent).toBe("Copies the value to your clipboard");
+  });
+
+  it("dismisses with Escape without moving focus", () => {
+    const root = render(Tooltip, { label: "Database status", content: "Healthy" });
+    const trigger = root.querySelector<HTMLButtonElement>("[data-tooltip-trigger]")!;
+    trigger.focus();
+    flushSync();
+
+    trigger.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    flushSync();
+
+    expect(document.body.querySelector('[role="tooltip"]')).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("opens for a pointer and closes when the pointer leaves", () => {
+    const root = render(Tooltip, { label: "Region help", content: "Choose the nearest region" });
+    const trigger = root.querySelector<HTMLButtonElement>("[data-tooltip-trigger]")!;
+
+    trigger.dispatchEvent(new MouseEvent("mouseenter"));
+    flushSync();
+    expect(document.body.querySelector('[role="tooltip"]')?.textContent).toBe(
+      "Choose the nearest region",
+    );
+
+    trigger.dispatchEvent(new MouseEvent("mouseleave"));
+    flushSync();
+    expect(document.body.querySelector('[role="tooltip"]')).toBeNull();
+  });
+
+  it("wears its exported token appearance and honors reduced motion", () => {
+    const root = render(Tooltip, { label: "Status help", content: "Updated every minute" });
+    root.querySelector<HTMLButtonElement>("[data-tooltip-trigger]")!.focus();
+    flushSync();
+    const element = document.body.querySelector('[role="tooltip"]')!;
+
+    expect(classes(element)).toEqual(classesOf(tooltipAppearance()));
+    expect(classes(element).has("motion-reduce:transition-none")).toBe(true);
+  });
+});

package/vendor/ds/kits/base/test/type-primitives.test.ts

@@ -0,0 +1,191 @@
+// The type Primitives: Heading, Text and Eyebrow (ADR 0025; audit DIR-3,
+// CMP-12, media-07).
+//
+// What is pinned is the contract the ADR gives them: they consume ONLY the
+// Theme's type roles — one `text-<role>` utility carries size, line height,
+// tracking and weight — they take no raw size, weight or tracking, Heading's
+// outline level is independent of its look, and none of them selects an
+// appearance axis (a Marketing island makes them larger by itself).
+
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { createRawSnippet } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import {
+  EYEBROW_ELEMENTS,
+  Eyebrow,
+  HEADING_LEVELS,
+  HEADING_ROLES,
+  Heading,
+  TEXT_ELEMENTS,
+  TEXT_INKS,
+  TEXT_ROLES,
+  Text,
+  eyebrow,
+  heading,
+  text,
+} from "@reddb-io/design-system/base";
+import { SRC_DIR } from "../tools/paths";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const words = (content: string) => createRawSnippet(() => ({ render: () => `<span>${content}</span>` }));
+
+/** Classes that would set type outside a role: a size step, a weight, a tracking or a line height. */
+const RAW_TYPE_RE = /^(?:text-(?:xs|sm|base|lg|\d*xl|display-(?:sm|md|lg)|\[.*\])|font-(?:\w+|\[.*\])|tracking-.+|leading-.+)$/;
+const ROLE_UTILITY_RE = /^text-(display|title|heading|body|caption|eyebrow)$/;
+
+function typeClasses(element: Element): { roles: string[]; raw: string[] } {
+  const all = [...classes(element)];
+  return {
+    roles: all.filter((name) => ROLE_UTILITY_RE.test(name)),
+    raw: all.filter((name) => RAW_TYPE_RE.test(name) && !ROLE_UTILITY_RE.test(name)),
+  };
+}
+
+function expectNoAxis(element: Element) {
+  for (const attribute of ["data-theme", "data-color-scheme", "data-density"]) {
+    expect(element.hasAttribute(attribute), attribute).toBe(false);
+  }
+}
+
+describe("the Base Heading", () => {
+  it("offers the Theme's heading roles and every outline level", () => {
+    expect([...HEADING_ROLES]).toEqual(["display", "title", "heading"]);
+    expect([...HEADING_LEVELS]).toEqual([1, 2, 3, 4, 5, 6]);
+  });
+
+  it("keeps the outline level separate from the role it reads as", () => {
+    for (const level of HEADING_LEVELS) {
+      for (const role of HEADING_ROLES) {
+        const element = rendered(render(Heading, { level, role, children: words("Ship it") }));
+        expect(element.tagName).toBe(`H${level}`);
+        expect(element.dataset.typeRole).toBe(role);
+        expect(classes(element)).toEqual(classesOf(heading({ role })));
+      }
+    }
+  });
+
+  it("reads as a title at level 1 and a heading below it when no role is chosen", () => {
+    expect(rendered(render(Heading, { level: 1, children: words("Page") })).dataset.typeRole).toBe("title");
+    expect(rendered(render(Heading, { children: words("Section") })).tagName).toBe("H2");
+    for (const level of [2, 3, 4, 5, 6] as const) {
+      expect(rendered(render(Heading, { level, children: words("Section") })).dataset.typeRole).toBe("heading");
+    }
+  });
+
+  it("sets type only through its role, in ink, without selecting an axis", () => {
+    for (const role of HEADING_ROLES) {
+      const element = rendered(render(Heading, { role, children: words("Title") }));
+      expect(typeClasses(element)).toEqual({ roles: [`text-${role}`], raw: [] });
+      expect(classes(element).has("text-foreground")).toBe(true);
+      expectNoAxis(element);
+    }
+  });
+
+  it("forwards native attributes, such as the id an aria-labelledby points at", () => {
+    const element = rendered(render(Heading, { id: "pricing", children: words("Pricing") }));
+    expect(element.id).toBe("pricing");
+    expect(element.textContent).toBe("Pricing");
+  });
+});
+
+describe("the Base Text", () => {
+  it("offers the Theme's reading roles, two inks and four elements", () => {
+    expect([...TEXT_ROLES]).toEqual(["body", "caption"]);
+    expect([...TEXT_INKS]).toEqual(["default", "muted"]);
+    expect([...TEXT_ELEMENTS]).toEqual(["p", "span", "div", "small"]);
+  });
+
+  it("renders body copy in ink by default, a caption in muted ink", () => {
+    const body = rendered(render(Text, { children: words("Copy") }));
+    expect(body.tagName).toBe("P");
+    expect(classes(body)).toEqual(classesOf(text({ role: "body", ink: "default" })));
+    expect(classes(body).has("text-foreground")).toBe(true);
+
+    const caption = rendered(render(Text, { role: "caption", children: words("Fig. 1") }));
+    expect(classes(caption)).toEqual(classesOf(text({ role: "caption", ink: "muted" })));
+    // Secondary text is ink-muted, never the `muted` surface role (AGENTS.md).
+    expect(classes(caption).has("text-ink-muted")).toBe(true);
+    expect(classes(caption).has("text-muted")).toBe(false);
+  });
+
+  it("lets the ink and the element be chosen, and nothing about its type", () => {
+    for (const as of TEXT_ELEMENTS) {
+      for (const role of TEXT_ROLES) {
+        for (const ink of TEXT_INKS) {
+          const element = rendered(render(Text, { as, role, ink, children: words("Copy") }));
+          expect(element.tagName).toBe(as.toUpperCase());
+          expect(element.dataset.typeRole).toBe(role);
+          expect(typeClasses(element)).toEqual({ roles: [`text-${role}`], raw: [] });
+          expectNoAxis(element);
+        }
+      }
+    }
+  });
+
+  it("keeps the deprecated tone prop as a working alias that warns once in development", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const elements = [1, 2].map(() =>
+        rendered(render(Text, { tone: "muted", children: words("Copy") })),
+      );
+      for (const element of elements) {
+        expect(classes(element)).toEqual(classesOf(text({ role: "body", ink: "muted" })));
+      }
+      // `ink` wins over the alias.
+      const both = rendered(render(Text, { ink: "default", tone: "muted", children: words("Copy") }));
+      expect(classes(both)).toEqual(classesOf(text({ role: "body", ink: "default" })));
+      expect(warn).toHaveBeenCalledTimes(1);
+      expect(String(warn.mock.calls[0]![0])).toMatch(/\[reddb Text\] tone="muted" is deprecated.*ink="muted"/);
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});
+
+describe("the Base Eyebrow", () => {
+  it("is an uppercase micro-label in muted ink, sized and tracked by the eyebrow role", () => {
+    const element = rendered(render(Eyebrow, { children: words("New") }));
+    expect(element.tagName).toBe("P");
+    expect(classes(element)).toEqual(classesOf(eyebrow()));
+    expect(classes(element).has("uppercase")).toBe(true);
+    expect(classes(element).has("text-ink-muted")).toBe(true);
+    // One tracking — the role's — instead of the three the Kits spelled by hand.
+    expect(typeClasses(element)).toEqual({ roles: ["text-eyebrow"], raw: [] });
+    expectNoAxis(element);
+  });
+
+  it("labels a heading and is never one", () => {
+    expect([...EYEBROW_ELEMENTS]).toEqual(["p", "span", "div"]);
+    for (const as of EYEBROW_ELEMENTS) {
+      expect(rendered(render(Eyebrow, { as, children: words("New") })).tagName).toBe(as.toUpperCase());
+    }
+  });
+});
+
+describe("the type roles under the Kit's class merger", () => {
+  it("keeps a role beside its colour, and lets a caller's role replace it rather than stack", () => {
+    // tailwind-merge reads an unknown text utility as a colour; the roles are declared as sizes.
+    expect(classesOf(heading({ role: "display" }))).toEqual(new Set(["text-foreground", "text-balance", "text-display"]));
+    const overridden = classesOf(text({ role: "body", class: "text-caption" }));
+    expect(overridden.has("text-caption")).toBe(true);
+    expect(overridden.has("text-body")).toBe(false);
+    expect(overridden.has("text-foreground")).toBe(true);
+    expect(classesOf(eyebrow({ class: "text-primary-text" })).has("text-eyebrow")).toBe(true);
+  });
+});
+
+describe("the type Primitives' source", () => {
+  it("names no type value outside the roles and offers no size, weight or tracking prop", () => {
+    for (const name of ["heading", "text", "eyebrow"]) {
+      const variants = readFileSync(join(SRC_DIR, `${name}.variants.ts`), "utf8");
+      const literals = [...variants.matchAll(/"([^"\n]*)"/g)].flatMap((match) => match[1]!.split(/\s+/));
+      expect(literals.filter((token) => RAW_TYPE_RE.test(token) && !ROLE_UTILITY_RE.test(token)), name).toEqual([]);
+    }
+    for (const component of ["Heading", "Text", "Eyebrow"]) {
+      const source = readFileSync(join(SRC_DIR, `${component}.svelte`), "utf8");
+      const props = /interface Props[^{]*\{([\s\S]*?)\n {2}\}/.exec(source)![1]!;
+      expect(props, component).not.toMatch(/^\s*(size|weight|tracking|leading|fontSize)\??:/m);
+    }
+  });
+});