@reddb-io/ui-kit 0.3.4 → 0.3.5

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

@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import FormScaffoldingConsumer from "./fixtures/FormScaffoldingConsumer.svelte";
+import FormScaffoldingFailures from "./fixtures/FormScaffoldingFailures.svelte";
+import { Label, label } from "./fixtures/form-scaffolding-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function labelFailures(root: HTMLElement): string[] {
+  const failures: string[] = [];
+  for (const control of root.querySelectorAll<HTMLInputElement>("input, select, textarea")) {
+    const associated =
+      control.hasAttribute("aria-label") ||
+      (control.id !== "" && root.querySelector(`label[for="${control.id}"]`) !== null);
+    if (!associated) failures.push("control has no accessible label");
+  }
+  return failures;
+}
+
+describe("the Base Label", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(Label).toBeDefined();
+    expect(label).toBeTypeOf("function");
+  });
+
+  it("is a native label associated with its control", () => {
+    const root = rendered(render(FormScaffoldingConsumer, {}));
+    const element = root.querySelector<HTMLLabelElement>('[data-testid="display-name-label"]')!;
+    const control = root.querySelector<HTMLInputElement>("#display-name")!;
+
+    expect(element.tagName).toBe("LABEL");
+    expect(element.htmlFor).toBe(control.id);
+    expect(element.textContent?.trim()).toBe("Display name");
+    expect(labelFailures(root)).toEqual([]);
+
+    expect(element.control).toBe(control);
+    control.focus();
+    expect(document.activeElement).toBe(control);
+  });
+
+  it("forwards native attributes and consumer classes", () => {
+    const root = rendered(render(FormScaffoldingConsumer, {}));
+    const element = root.querySelector<HTMLLabelElement>('[data-testid="display-name-label"]')!;
+
+    expect(element.title).toBe("Your public name");
+    expect(classes(element)).toEqual(classesOf(label({ class: "tracking-wide" })));
+    expect(classes(element).has("tracking-wide")).toBe(true);
+  });
+
+  it("does not select an appearance axis inside a nested appearance scope", () => {
+    const root = rendered(render(FormScaffoldingConsumer, {}));
+    const element = root.querySelector<HTMLLabelElement>(
+      '[data-appearance-scope] [data-testid="nested-label"]',
+    )!;
+
+    expect(element.hasAttribute("data-theme")).toBe(false);
+    expect(element.hasAttribute("data-color-scheme")).toBe(false);
+    expect(element.hasAttribute("data-density")).toBe(false);
+    expect(classes(element)).toEqual(classesOf(label()));
+  });
+});
+
+describe("the deliberately failing Label fixture", () => {
+  it("diagnoses an unlabelled control", () => {
+    const root = rendered(
+      render(FormScaffoldingFailures, { failure: "unlabelled-control" }),
+    );
+    expect(labelFailures(root)).toEqual(["control has no accessible label"]);
+  });
+});

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

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import InlineTextConsumer from "./fixtures/InlineTextConsumer.svelte";
+import { classes, render } from "./mount";
+
+describe("inline text composition", () => {
+  it("inherits nested appearance axes while keeping Density roles live", () => {
+    const root = render(InlineTextConsumer);
+    const scope = root.querySelector<HTMLElement>("[data-inline-text-scope]")!;
+    const link = scope.querySelector<HTMLElement>("[data-link]")!;
+    const kbd = scope.querySelector<HTMLElement>("[data-kbd]")!;
+    const codeBlock = scope.querySelector<HTMLElement>("[data-code-block]")!;
+
+    expect(scope.getAttribute("data-theme")).toBe("marketing");
+    expect(scope.getAttribute("data-color-scheme")).toBe("dark");
+    expect(scope.getAttribute("data-density")).toBe("compact");
+
+    for (const capability of [link, kbd, codeBlock]) {
+      expect(capability.hasAttribute("data-theme")).toBe(false);
+      expect(capability.hasAttribute("data-color-scheme")).toBe(false);
+      expect(capability.hasAttribute("data-density")).toBe(false);
+    }
+
+    expect([...classes(codeBlock)].some((name) => name.includes("var(--reddb-spatial"))).toBe(
+      false,
+    );
+    const densityOwned = [...codeBlock.querySelectorAll<HTMLElement>("[class]")].flatMap(
+      (element) => [...classes(element)].filter((name) => name.includes("var(--reddb-spatial")),
+    );
+    expect(densityOwned.length).toBeGreaterThan(0);
+  });
+});

package/vendor/ds/kits/base/test/link-preview.test.ts

@@ -0,0 +1,80 @@
+import { createRawSnippet, flushSync, tick } from "svelte";
+import { describe, expect, it } from "vitest";
+import { LinkPreview, linkPreview as linkPreviewAppearance } from "@reddb-io/design-system/base";
+import { classes, classesOf, render } from "./mount";
+
+async function settle(): Promise<void> {
+  await tick();
+  await new Promise((resolve) => setTimeout(resolve, 10));
+  flushSync();
+}
+
+function surface(): HTMLElement | null {
+  return document.querySelector("[data-link-preview-surface]");
+}
+
+describe("the Base LinkPreview", () => {
+  it("opens from keyboard focus without replacing the native link", async () => {
+    const root = render(LinkPreview, {
+      href: "/clusters/primary",
+      label: "Primary cluster",
+      previewLabel: "Primary cluster preview",
+      openDelay: 0,
+      children: createRawSnippet(() => ({
+        render: () => '<button type="button" data-preview-action>Open cluster</button>',
+      })),
+    });
+    const trigger = root.querySelector<HTMLAnchorElement>("[data-link-preview-trigger]")!;
+
+    expect(trigger.tagName).toBe("A");
+    expect(trigger.getAttribute("href")).toBe("/clusters/primary");
+    expect(trigger.getAttribute("role")).toBe("link");
+    trigger.focus();
+    await settle();
+
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    expect(surface()?.getAttribute("role")).toBe("dialog");
+    expect(surface()?.getAttribute("aria-label")).toBe("Primary cluster preview");
+    expect(document.activeElement).toBe(trigger);
+    expect(surface()?.tabIndex).toBe(-1);
+  });
+
+  it("dismisses with Escape without trapping or moving focus", async () => {
+    const root = render(LinkPreview, {
+      href: "/regions",
+      label: "Regions",
+      previewLabel: "Regions preview",
+      open: true,
+      openDelay: 0,
+      closeDelay: 0,
+    });
+    const trigger = root.querySelector<HTMLAnchorElement>("[data-link-preview-trigger]")!;
+    trigger.focus();
+    await settle();
+    expect(surface()).not.toBeNull();
+
+    trigger.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await settle();
+
+    expect(surface()).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("uses the shared collision-aware surface appearance", async () => {
+    render(LinkPreview, {
+      href: "/metrics",
+      label: "Metrics",
+      previewLabel: "Metrics preview",
+      open: true,
+      collisionPadding: 16,
+      class: "max-w-lg",
+    });
+    await settle();
+    const element = surface()!;
+
+    expect(element.dataset.avoidCollisions).toBe("true");
+    expect(element.dataset.collisionPadding).toBe("16");
+    expect(classes(element)).toEqual(classesOf(linkPreviewAppearance({ class: "max-w-lg" })));
+    expect(classes(element).has("motion-reduce:transition-none")).toBe(true);
+  });
+});

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

@@ -0,0 +1,63 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import { Link, LinkPreview, link as linkAppearance } from "@reddb-io/design-system/base";
+import InlineTextContractFailures from "./fixtures/InlineTextContractFailures.svelte";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const text = (value: string) =>
+  createRawSnippet(() => ({ render: () => `<span>${value}</span>` }));
+
+describe("the deliberately failing Link fixture", () => {
+  it("demonstrates a link distinguishable from prose by colour alone", () => {
+    const link = rendered(
+      render(InlineTextContractFailures, { failure: "colour-only-link" }),
+    ).querySelector<HTMLAnchorElement>("[data-broken-link]")!;
+
+    expect(classes(link).has("text-primary")).toBe(true);
+    expect([...classes(link)].some((name) => name.includes("underline"))).toBe(false);
+  });
+});
+
+describe("the Base Link", () => {
+  it("keeps native link semantics and a non-colour affordance", () => {
+    const link = rendered(
+      render(Link, {
+        href: "/guide",
+        children: text("Usage guide"),
+        class: "font-medium",
+      }),
+    ) as HTMLAnchorElement;
+
+    expect(link.tagName).toBe("A");
+    expect(link.getAttribute("href")).toBe("/guide");
+    expect(link.textContent).toBe("Usage guide");
+    expect(classes(link)).toEqual(classesOf(linkAppearance({ class: "font-medium" })));
+    expect(classes(link).has("underline")).toBe(true);
+
+    link.focus();
+    expect(document.activeElement).toBe(link);
+    expect(classes(link).has("focus-visible:outline-focus")).toBe(true);
+  });
+
+  it("is the canonical native-link affordance composed by LinkPreview", () => {
+    const root = render(LinkPreview, {
+      href: "/guide",
+      label: "Usage guide",
+      previewLabel: "Usage guide preview",
+      triggerClass: "font-medium",
+    });
+    const trigger = root.querySelector<HTMLAnchorElement>("[data-link-preview-trigger]")!;
+
+    expect(classes(trigger)).toEqual(classesOf(linkAppearance({ class: "font-medium" })));
+  });
+
+  it("is ink, not accent: foreground text with the underline, thickening on hover", () => {
+    const link = rendered(render(Link, { href: "/guide", children: text("Usage guide") }));
+    const names = classes(link);
+
+    expect(names.has("text-foreground")).toBe(true);
+    expect(names.has("underline")).toBe(true);
+    expect(names.has("hover:decoration-2")).toBe(true);
+    expect([...names].some((name) => /^(?:hover:)?text-primary/.test(name))).toBe(false);
+  });
+});

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

@@ -0,0 +1,60 @@
+// The anti-hardcode lint, asked of the Base Kit.
+//
+// Issue #47's third acceptance criterion. The rule and its counter-examples
+// live with the linter (packages/kit-lint), because they are facts about the
+// rule; what is a fact about this Kit is that every file it ships is clean and
+// that the command CI runs says so with a zero exit code.
+//
+// The Kit's README promised the rule would arrive here by extraction rather
+// than by copy, so this suite also pins the extraction itself: the Base Kit's
+// linter IS the application Kit's, reached through the shared package.
+
+import { spawnSync } from "node:child_process";
+import { join } from "node:path";
+import {
+  lintKitFiles,
+  readInteractionAllowlist,
+  readTypeLedger,
+  readVocabulary,
+  settleInteractionAllowlist,
+  settleTypeLedger,
+} from "@reddb-io/kit-lint";
+import { describe, expect, it } from "vitest";
+import { KIT_ROOT, kitSourceFiles } from "../tools/paths";
+
+describe("anti-hardcode lint", () => {
+  it("passes on every file of the real Kit", () => {
+    const files = kitSourceFiles();
+    expect(files.length).toBeGreaterThan(0);
+    // Type debt the Kit carried when the type rule arrived is deferred by its
+    // ledger (ADR 0025); nothing else is, and no ledger entry may outlive its debt.
+    const outcome = settleTypeLedger(lintKitFiles(files, readVocabulary()), KIT_ROOT, readTypeLedger(KIT_ROOT), files);
+    // Rule 8 (wave 6A): an interactive element that draws its own states is
+    // justified in the Kit's interaction allowlist, which may not outlive it.
+    const interaction = settleInteractionAllowlist(outcome.violations, KIT_ROOT, readInteractionAllowlist(KIT_ROOT), files);
+    expect(interaction.violations).toEqual([]);
+    expect(outcome.stale).toEqual([]);
+    expect(interaction.stale).toEqual([]);
+  });
+
+  it("reads the Kit's components and modules, and not the Marks", () => {
+    // A Mark is the Brand's drawing, reproduced unaltered: its hex fills are
+    // the drawing itself, and linting them would demand the one edit the
+    // licence forbids. So the Logo reaches a Mark as a file rather than as
+    // markup, and the lint has nothing in it to object to.
+    const files = kitSourceFiles();
+    expect(files.some((file) => file.endsWith("Logo.svelte"))).toBe(true);
+    expect(files.some((file) => file.endsWith(".svg"))).toBe(false);
+  });
+});
+
+describe("the lint command", () => {
+  const TSX = join(KIT_ROOT, "node_modules", ".bin", "tsx");
+  const CLI = join(KIT_ROOT, "tools", "lint-cli.ts");
+
+  it("exits zero on the real Kit", () => {
+    const { status, stdout } = spawnSync(TSX, [CLI], { cwd: KIT_ROOT, encoding: "utf8" });
+    expect(stdout).toContain("passed");
+    expect(status).toBe(0);
+  }, 30_000);
+});

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

@@ -0,0 +1,45 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import { ListContainer, card } from "./fixtures/collection-structure-consumer";
+import CollectionStructureConsumer from "./fixtures/CollectionStructureConsumer.svelte";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the Base ListContainer", () => {
+  it("is available through Base", () => {
+    expect(ListContainer).toBeDefined();
+  });
+
+  it("composes the canonical Card while preserving caller-owned list controls", () => {
+    const element = rendered(render(ListContainer, {
+      title: "Deployments",
+      description: "Recent environments",
+      variant: "raised",
+      padding: "sm",
+      class: "min-w-0",
+      "aria-label": "Deployment list",
+      children: createRawSnippet(() => ({
+        render: () => '<ul><li><a href="/alpha">Alpha</a></li><li><button>Retry</button></li></ul>',
+      })),
+    }));
+
+    expect(element.hasAttribute("data-card")).toBe(true);
+    expect(element.textContent).toContain("Deployments");
+    expect(element.getAttribute("aria-label")).toBe("Deployment list");
+    expect(classes(element)).toEqual(classesOf(card({
+      variant: "raised",
+      padding: "sm",
+    }).root({ class: "min-w-0" })));
+    expect([...element.querySelectorAll<HTMLElement>("a, button")].map((item) => item.textContent))
+      .toEqual(["Alpha", "Retry"]);
+    expect(element.tabIndex).toBe(-1);
+  });
+
+  it("inherits every nested appearance axis", () => {
+    const element = render(CollectionStructureConsumer)
+      .querySelector<HTMLElement>("[data-nested-list-container]")!;
+
+    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/list.test.ts

@@ -0,0 +1,60 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import CollectionStructureContractFailures from "./fixtures/CollectionStructureContractFailures.svelte";
+import CollectionStructureConsumer from "./fixtures/CollectionStructureConsumer.svelte";
+import { LIST_GAPS, List, list } from "./fixtures/collection-structure-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the deliberately failing List fixture", () => {
+  it("diagnoses a visual collection without list semantics", () => {
+    const element = rendered(render(CollectionStructureContractFailures, {
+      failure: "missing-list-semantics",
+    }));
+
+    expect(element.matches("ul, ol")).toBe(false);
+    expect(element.getAttribute("role")).not.toBe("list");
+  });
+});
+
+describe("the Base List", () => {
+  it("is available through Base", () => {
+    expect(List).toBeDefined();
+  });
+
+  it("renders unordered and ordered collections with native list semantics", () => {
+    const children = createRawSnippet(() => ({
+      render: () => "<li>Alpha</li>",
+    }));
+    const unordered = rendered(render(List, { children }));
+    const ordered = rendered(render(List, { children, ordered: true }));
+
+    expect(unordered.tagName).toBe("UL");
+    expect(ordered.tagName).toBe("OL");
+    expect(ordered.firstElementChild?.textContent).toBe("Alpha");
+  });
+
+  it("keeps Density-owned spacing in its public appearance seam", () => {
+    expect(LIST_GAPS).toEqual(["sm", "md", "lg"]);
+    const element = rendered(render(List, {
+      gap: "lg",
+      class: "min-w-0",
+      "aria-label": "Results",
+    }));
+
+    expect(list).toBeTypeOf("function");
+    expect(classes(element)).toEqual(classesOf(list({ gap: "lg", class: "min-w-0" })));
+    expect(element.getAttribute("aria-label")).toBe("Results");
+    expect(element.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("inherits nested appearance without changing caller-owned focus order", () => {
+    const element = render(CollectionStructureConsumer)
+      .querySelector<HTMLElement>("[data-nested-list]")!;
+
+    expect(element.hasAttribute("data-theme")).toBe(false);
+    expect(element.hasAttribute("data-color-scheme")).toBe(false);
+    expect(element.hasAttribute("data-density")).toBe(false);
+    expect([...element.querySelectorAll<HTMLElement>("a, button")].map((item) => item.textContent))
+      .toEqual(["Alpha", "Retry"]);
+  });
+});

package/vendor/ds/kits/base/test/loading-indicator.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import {
+  LOADING_INDICATOR_SIZES,
+  LoadingIndicator,
+  loadingIndicator as loadingIndicatorAppearance,
+} from "./fixtures/progress-feedback-consumer";
+import ProgressFeedbackConsumer from "./fixtures/ProgressFeedbackConsumer.svelte";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the Base LoadingIndicator", () => {
+  it("announces a polite busy status with a useful default sentence", () => {
+    const element = rendered(render(LoadingIndicator, {}));
+
+    expect(element.getAttribute("role")).toBe("status");
+    expect(element.getAttribute("aria-live")).toBe("polite");
+    expect(element.getAttribute("aria-busy")).toBe("true");
+    expect(element.textContent?.trim()).toBe("Loading…");
+    expect(element.querySelector("svg")!.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("keeps a visually hidden label available to assistive technology", () => {
+    const element = rendered(
+      render(LoadingIndicator, { label: "Loading nodes…", labelHidden: true }),
+    );
+    const label = element.querySelector("span")!;
+
+    expect(label.textContent).toBe("Loading nodes…");
+    expect(classes(label).has("sr-only")).toBe(true);
+  });
+
+  it("animates only behind platform motion preferences", () => {
+    for (const size of LOADING_INDICATOR_SIZES) {
+      const spinner = rendered(render(LoadingIndicator, { size })).querySelector("svg")!;
+      expect(classes(spinner).has("motion-safe:animate-spin")).toBe(true);
+      expect(classes(spinner).has("motion-reduce:animate-pulse")).toBe(true);
+      expect([...classes(spinner)].some((name) => name.startsWith("animate-"))).toBe(false);
+    }
+  });
+
+  it("sizes the spinner on the Icon size role of the same name", () => {
+    for (const size of LOADING_INDICATOR_SIZES) {
+      const spinner = rendered(render(LoadingIndicator, { size })).querySelector("svg")!;
+      expect(classes(spinner).has(`size-[var(--reddb-spatial-icon-size-${size})]`), size).toBe(true);
+    }
+  });
+
+  it("inherits nested appearance and stays outside the keyboard order", () => {
+    const root = render(ProgressFeedbackConsumer);
+    const element = root.querySelector<HTMLElement>("[data-loading-indicator]")!;
+
+    expect(classes(element)).toEqual(classesOf(loadingIndicatorAppearance().root()));
+    expect(element.tabIndex).toBe(-1);
+    expect(element.hasAttribute("data-theme")).toBe(false);
+    expect(element.hasAttribute("data-color-scheme")).toBe(false);
+    expect(element.hasAttribute("data-density")).toBe(false);
+  });
+});