@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/base/test/framework-slides.test.ts

@@ -0,0 +1,100 @@
+import { mount, unmount, flushSync } from "svelte";
+import { act, createElement as h, createRef, type ComponentType } from "react";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { expect, it } from "vitest";
+import * as react from "../react/src";
+import Fixture from "./fixtures/FrameworkSlides.svelte";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+type Name = "SlideFrame" | "TitleSlide" | "SectionSlide" | "TwoColumnSlide" | "FigureSlide" | "QuoteSlide" | "BulletsSlide" | "Deck";
+type Scenario = { name: Name; options: Record<string, unknown> };
+const link = () => h("a", { href: "/report" }, "Read report");
+function props({ name, options }: Scenario) {
+  const common = { ...options, className: "consumer-extra", "data-consumer": "forwarded" };
+  if (name === "SlideFrame") return { ...common, children: link() };
+  if (name === "Deck") return { ...common, children: h(react.SlideFrame, { label: "Nested slide" }, link()) };
+  if (name === "TwoColumnSlide") return { ...common, start: [h("h3", { key: "h" }, "Before"), h("p", { key: "p" }, "Manual review")], end: [h("h3", { key: "h" }, "After"), h("a", { key: "a", href: "/report" }, "Read report")] };
+  if (name === "FigureSlide") return { ...common, figure: h("table", null, h("caption", null, "Replicas"), h("tbody", null, h("tr", null, h("th", { scope: "row" }, "api-01"), h("td", null, "Ready")))) };
+  return common;
+}
+async function render(scenario: Scenario) {
+  const a = document.createElement("div"); const b = document.createElement("div"); document.body.append(a, b);
+  const native = (options: Record<string, unknown>) => ({ ...options, class: "consumer-extra", "data-consumer": "forwarded" });
+  const svelte = mount(Fixture, { target: a, props: { ...scenario, options: native(scenario.options) } }); flushSync();
+  const root = createRoot(b);
+  await act(() => root.render(h(react[scenario.name] as ComponentType<any>, props(scenario))));
+  return { a, b, update: async (options: Record<string, unknown>) => {
+    flushSync(() => svelte.update(native(options)));
+    await act(() => root.render(h(react[scenario.name] as ComponentType<any>, props({ ...scenario, options }))));
+  }, cleanup: async () => { await act(() => root.unmount()); await unmount(svelte); a.remove(); b.remove(); } };
+}
+function snapshot(target: HTMLElement) {
+  return [...target.querySelectorAll("*")].map(element => ({ tag: element.tagName, classes: [...element.classList].sort(),
+    attributes: Object.fromEntries([...element.attributes].filter(a => a.name !== "class" && a.name !== "style" && !a.name.startsWith("data-svelte"))
+      .map(a => [a.name, a.name.startsWith("data-") && a.value === "true" ? "" : a.value]).sort()),
+    text: element.children.length ? undefined : element.textContent?.trim() }));
+}
+const minimal: Scenario[] = [
+  { name: "SlideFrame", options: { label: "Overview" } },
+  { name: "TitleSlide", options: { title: "Collection review" } },
+  { name: "SectionSlide", options: { title: "Coverage" } },
+  { name: "TwoColumnSlide", options: { title: "Before and after" } },
+  { name: "FigureSlide", options: { title: "Replica health" } },
+  { name: "QuoteSlide", options: { quote: "Keep the critical path clear.", attribution: "Operations" } },
+  { name: "BulletsSlide", options: { title: "Next steps", items: ["Review", "Ship", "Review"] } },
+  { name: "Deck", options: { label: "Collection review" } },
+];
+const scenarios = minimal.flatMap(scenario => [scenario, ...["background", "raised"].map(surface => ({ ...scenario, options: { ...scenario.options, surface, label: "Custom accessible name", number: 0, total: 7, eyebrow: "Monthly review", level: 3, subtitle: "Ready for review", presenter: "Operations team", summary: "What changed", caption: "Snapshot at 12:00 UTC", source: "Team review" } }))]);
+// Extra options above are native forwarded attributes on layouts that do not own them.
+for (const scenario of scenarios) it(`matches ${scenario.name} content, naming and frame recipes ${scenario.options.surface ?? "minimal"}`, async () => {
+  const r = await render(scenario);
+  try { expect(snapshot(r.b)).toEqual(snapshot(r.a)); } finally { await r.cleanup(); }
+});
+for (const framework of ["svelte", "react"] as const) {
+  it(`${framework}: updates frame naming, counts and surfaces without changing native content`, async () => {
+    const r = await render(minimal[0]!);
+    try {
+      const target = framework === "react" ? r.b : r.a;
+      const link = target.querySelector<HTMLAnchorElement>("a")!; link.focus(); expect(document.activeElement).toBe(link);
+      await r.update({ label: "Updated overview", number: 2, total: 7, surface: "raised" });
+      const frame = target.querySelector('[data-slide-frame]')!;
+      expect(frame.getAttribute("aria-label")).toBe("Updated overview");
+      expect(frame.getAttribute("aria-roledescription")).toBe("slide");
+      expect(frame.getAttribute("data-slide-surface")).toBe("raised");
+      expect(target.querySelector(".sr-only")?.textContent).toBe("Slide 2 of 7");
+      expect(target.querySelector("a")).toBe(link);
+      await r.update({ label: "Final overview", number: 3 });
+      expect(target.querySelector(".sr-only")?.textContent).toBe("Slide 3");
+      await r.update({ label: "Unnumbered" });
+      expect(target.querySelector("[data-slide-number-label]")).toBeNull();
+    } finally { await r.cleanup(); }
+  });
+  it(`${framework}: keeps heading outline separate from appearance and updates ordered points`, async () => {
+    const r = await render(minimal.find(s => s.name === "BulletsSlide")!);
+    try {
+      const target = framework === "react" ? r.b : r.a;
+      await r.update({ title: "Follow-up", label: "Actions", level: 3, items: [] });
+      expect(target.querySelector("h3")?.textContent).toBe("Follow-up");
+      expect(target.querySelector("h3")?.getAttribute("data-type-role")).toBe("title");
+      expect(target.querySelectorAll("li")).toHaveLength(0);
+      await r.update({ title: "Follow-up", items: ["Ship", "Monitor"] });
+      expect([...target.querySelectorAll("li")].map(li => li.textContent)).toEqual(["Ship", "Monitor"]);
+    } finally { await r.cleanup(); }
+  });
+}
+for (const scenario of minimal) it(`supports native refs and stable SSR hydration for ${scenario.name}`, async () => {
+  const target = document.createElement("div"); document.body.append(target);
+  const ref = createRef<HTMLElement>();
+  const component = h(react[scenario.name] as ComponentType<any>, { ...props(scenario), ref });
+  target.innerHTML = renderToString(component);
+  const original = target.firstElementChild;
+  const errors: unknown[] = [];
+  let root: ReturnType<typeof hydrateRoot>;
+  await act(() => { root = hydrateRoot(target, component, { onRecoverableError: error => errors.push(error) }); });
+  try { expect(ref.current).toBe(original); expect(target.firstElementChild).toBe(original); expect(errors).toEqual([]); }
+  finally { await act(() => root!.unmount()); target.remove(); }
+});
+it("escapes supplied titles and quotations in React SSR", () => {
+  const html = renderToString(h(react.QuoteSlide, { quote: '<script>alert("x")</script>', attribution: "Operations" }));
+  expect(html).not.toContain("<script>"); expect(html).toContain("&lt;script&gt;");
+});

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

@@ -0,0 +1,64 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import {
+  GRID_LIST_COLUMNS,
+  GridList,
+  gridList,
+  list,
+} from "./fixtures/collection-structure-consumer";
+import CollectionStructureConsumer from "./fixtures/CollectionStructureConsumer.svelte";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the Base GridList", () => {
+  it("is available through Base", () => {
+    expect(GridList).toBeDefined();
+  });
+
+  it("renders a plain div grid without list semantics when list is false (wave 5A)", () => {
+    const element = rendered(render(GridList, {
+      columns: 2,
+      gap: "lg",
+      list: false,
+      children: createRawSnippet(() => ({ render: () => "<article>KPI</article>" })),
+    }));
+
+    expect(element.tagName).toBe("DIV");
+    expect(element.hasAttribute("role")).toBe(false);
+    expect(element.hasAttribute("data-grid-list")).toBe(true);
+    expect(classes(element)).toEqual(classesOf(list({ gap: "lg", class: gridList({ columns: 2 }) })));
+  });
+
+  it("composes List semantics with a caller-selected responsive grid", () => {
+    expect(GRID_LIST_COLUMNS).toEqual([1, 2, 3, 4]);
+    const element = rendered(render(GridList, {
+      columns: 3,
+      gap: "sm",
+      class: "min-w-0",
+      "aria-label": "Services",
+      children: createRawSnippet(() => ({
+        render: () => '<li><a href="/service">API</a><button>Restart</button></li>',
+      })),
+    }));
+
+    expect(element.tagName).toBe("UL");
+    expect(element.hasAttribute("data-list")).toBe(true);
+    expect(element.getAttribute("aria-label")).toBe("Services");
+    expect(classes(element)).toEqual(classesOf(list({
+      gap: "sm",
+      class: gridList({ columns: 3, class: "min-w-0" }),
+    })));
+    expect([...element.querySelectorAll<HTMLElement>("a, button")].map((item) => item.textContent))
+      .toEqual(["API", "Restart"]);
+    expect(element.tabIndex).toBe(-1);
+    expect(element.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("inherits every nested appearance axis", () => {
+    const element = render(CollectionStructureConsumer)
+      .querySelector<HTMLElement>("[data-nested-grid-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/icon.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it, vi } from "vitest";
+import { ICON_COLORS, ICON_SIZES, Icon } from "../src/index";
+import TestGlyph from "./fixtures/TestGlyph.svelte";
+import { render, rendered } from "./mount";
+
+describe("the Base Icon", () => {
+  it("binds a lucide-shaped glyph to Density size and semantic color tokens", () => {
+    expect(ICON_SIZES).toEqual(["sm", "md", "lg"]);
+
+    const icon = rendered(
+      render(Icon, {
+        icon: TestGlyph,
+        size: "sm",
+        color: "primary",
+        "aria-label": "Create",
+      }),
+    );
+
+    expect(icon.hasAttribute("data-icon")).toBe(true);
+    expect(icon.getAttribute("width")).toBe("var(--reddb-spatial-icon-size-sm)");
+    expect(icon.getAttribute("height")).toBe("var(--reddb-spatial-icon-size-sm)");
+    expect(icon.getAttribute("color")).toBe("var(--reddb-color-primary)");
+    expect(icon.getAttribute("stroke")).toBe("var(--reddb-color-primary)");
+    expect(icon.getAttribute("stroke-width")).toBe("2");
+    expect(icon.getAttribute("aria-label")).toBe("Create");
+    expect(icon.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("inherits the surrounding ink when asked for the current color", () => {
+    const icon = rendered(render(Icon, { icon: TestGlyph, color: "current", "aria-hidden": "true" }));
+
+    expect(icon.getAttribute("color")).toBe("currentColor");
+    expect(icon.getAttribute("stroke")).toBe("currentColor");
+  });
+
+  it("draws the deprecated muted alias in ink-muted and warns once in development", () => {
+    // `muted` is a surface role (ink at 8%, ADR 0019): a glyph drawn in it
+    // measured 1.19:1. It is out of the vocabulary and kept one release as an
+    // alias, so an existing `color="muted"` turns legible instead of breaking.
+    expect(ICON_COLORS).not.toContain("muted");
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      rendered(render(Icon, { icon: TestGlyph, color: "ink-muted", "aria-hidden": "true" }));
+      expect(warn).not.toHaveBeenCalled();
+
+      const icons = [1, 2].map(() =>
+        rendered(render(Icon, { icon: TestGlyph, color: "muted", "aria-hidden": "true" })),
+      );
+      for (const icon of icons) {
+        expect(icon.getAttribute("color")).toBe("var(--reddb-color-ink-muted)");
+        expect(icon.getAttribute("stroke")).toBe("var(--reddb-color-ink-muted)");
+      }
+      expect(warn).toHaveBeenCalledTimes(1);
+      expect(String(warn.mock.calls[0]![0])).toMatch(/color="muted" is deprecated.*color="ink-muted"/);
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});

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

@@ -0,0 +1,120 @@
+import { describe, expect, it } from "vitest";
+import { IMAGE_FITS, IMAGE_POSITIONS, Image } from "../src/index";
+import { classes, render } from "./mount";
+
+const img = (target: HTMLElement) => target.querySelector("img")!;
+
+describe("the Base Image", () => {
+  it("loads lazily and decodes asynchronously by default, reserving its intrinsic box", () => {
+    const element = img(render(Image, { src: "/a.webp", alt: "A chart", width: 1600, height: 900 }));
+    expect(element.getAttribute("alt")).toBe("A chart");
+    expect(element.getAttribute("width")).toBe("1600");
+    expect(element.getAttribute("height")).toBe("900");
+    expect(element.getAttribute("loading")).toBe("lazy");
+    expect(element.getAttribute("decoding")).toBe("async");
+    expect(element.hasAttribute("fetchpriority")).toBe(false);
+    expect(Number.parseFloat(element.style.aspectRatio)).toBeCloseTo(1600 / 900);
+    expect(classes(element).has("h-auto")).toBe(true);
+    expect(classes(element).has("max-w-full")).toBe(true);
+  });
+
+  it("marks the priority image for high-priority, eager, synchronous loading", () => {
+    const element = img(
+      render(Image, { src: "/hero.webp", alt: "Hero", width: 1200, height: 675, priority: true }),
+    );
+    expect(element.getAttribute("fetchpriority")).toBe("high");
+    expect(element.getAttribute("loading")).toBe("eager");
+    expect(element.getAttribute("decoding")).toBe("sync");
+    expect(element.hasAttribute("data-image-priority")).toBe(true);
+  });
+
+  it("reserves a caller ratio when the intrinsic size is unknown", () => {
+    const element = img(render(Image, { src: "/a.webp", alt: "A", ratio: 4 / 3 }));
+    expect(element.hasAttribute("width")).toBe(false);
+    expect(Number.parseFloat(element.style.aspectRatio)).toBeCloseTo(4 / 3);
+  });
+
+  it("refuses an unsized image", () => {
+    expect(() => render(Image, { src: "/a.webp", alt: "A" })).toThrow(/width and height.*or ratio/);
+    expect(() => render(Image, { src: "/a.webp", alt: "A", width: 100 })).toThrow(/ratio/);
+  });
+
+  it("refuses an empty alternative unless the image is declared decorative", () => {
+    expect(() => render(Image, { src: "/a.webp", alt: "", ratio: 1 })).toThrow(/decorative/);
+    expect(() => render(Image, { src: "/a.webp", alt: "   ", ratio: 1 })).toThrow(/decorative/);
+    expect(() => render(Image, { src: "/a.webp", alt: "A", decorative: true, ratio: 1 })).toThrow(
+      /decorative/,
+    );
+    const element = img(render(Image, { src: "/a.webp", alt: "", decorative: true, ratio: 1 }));
+    expect(element.getAttribute("alt")).toBe("");
+  });
+
+  it("passes srcset and sizes through, and renders picture sources in order", () => {
+    const target = render(Image, {
+      src: "/a-960.jpg",
+      alt: "A",
+      width: 960,
+      height: 540,
+      srcset: "/a-480.jpg 480w, /a-960.jpg 960w",
+      sizes: "(min-width: 48rem) 50vw, 100vw",
+      sources: [
+        { srcset: "/a-480.avif 480w, /a-960.avif 960w", type: "image/avif" },
+        { srcset: "/a-480.webp 480w, /a-960.webp 960w", type: "image/webp" },
+      ],
+    });
+    const picture = target.querySelector("picture")!;
+    expect(picture).not.toBeNull();
+    expect(classes(picture).has("contents")).toBe(true);
+    const sources = [...picture.querySelectorAll("source")];
+    expect(sources.map((source) => source.getAttribute("type"))).toEqual(["image/avif", "image/webp"]);
+    expect(sources[0]!.getAttribute("sizes")).toBe("(min-width: 48rem) 50vw, 100vw");
+    const element = img(target);
+    expect(element.parentElement).toBe(picture);
+    expect(element.getAttribute("srcset")).toBe("/a-480.jpg 480w, /a-960.jpg 960w");
+    expect(element.getAttribute("sizes")).toBe("(min-width: 48rem) 50vw, 100vw");
+  });
+
+  it("takes fit and focal position from the named vocabulary", () => {
+    for (const fit of IMAGE_FITS) {
+      const element = img(render(Image, { src: "/a.webp", alt: "A", ratio: 1, fit }));
+      expect(classes(element).has(`object-${fit}`)).toBe(true);
+    }
+    const physical = { center: "center", top: "top", bottom: "bottom", start: "left", end: "right" };
+    for (const position of IMAGE_POSITIONS) {
+      const element = img(render(Image, { src: "/a.webp", alt: "A", ratio: 1, position }));
+      expect(classes(element).has(`object-${physical[position]}`)).toBe(true);
+    }
+  });
+});
+
+describe("Base composites taking an image", () => {
+  const asset = { src: "/card.webp", alt: "Card art", width: 1200, height: 800 };
+
+  it("renders a Card image inside the media region at the Card's ratio, fit and position", async () => {
+    const { Card } = await import("../src/index");
+    const target = render(Card, { title: "A", image: asset, fit: "contain", position: "top", priority: true });
+    const element = img(target);
+    expect(element.closest("[data-card-media]")).not.toBeNull();
+    expect(Number.parseFloat(element.style.aspectRatio)).toBeCloseTo(16 / 9);
+    expect(classes(element).has("object-contain")).toBe(true);
+    expect(classes(element).has("object-top")).toBe(true);
+    expect(element.getAttribute("fetchpriority")).toBe("high");
+  });
+
+  it("prioritises only the Carousel slide shown first", async () => {
+    const { Carousel } = await import("../src/index");
+    const target = render(Carousel, {
+      label: "Wallpapers",
+      priority: true,
+      initialIndex: 1,
+      slides: [
+        { label: "One", image: { ...asset, src: "/1.webp" } },
+        { label: "Two", image: { ...asset, src: "/2.webp" } },
+        { label: "Three", image: { ...asset, src: "/3.webp" } },
+      ],
+    });
+    const images = [...target.querySelectorAll("img")];
+    expect(images.map((element) => element.getAttribute("loading"))).toEqual(["lazy", "eager", "lazy"]);
+    expect(images[1]!.getAttribute("fetchpriority")).toBe("high");
+  });
+});

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

@@ -0,0 +1,68 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import StatusVocabularyConsumer from "./fixtures/StatusVocabularyConsumer.svelte";
+import {
+  INDICATOR_POSITIONS,
+  Indicator,
+  indicator,
+} from "./fixtures/status-vocabulary-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const content = createRawSnippet(() => ({ render: () => '<button type="button">Inbox</button>' }));
+const marker = createRawSnippet(() => ({ render: () => '<span aria-label="3 unread">3</span>' }));
+
+describe("the Base Indicator", () => {
+  it("is available with every placement and its Extension Seam through Base", () => {
+    expect(Indicator).toBeDefined();
+    expect(indicator).toBeTypeOf("function");
+    expect(INDICATOR_POSITIONS).toEqual([
+      "top-start",
+      "top-center",
+      "top-end",
+      "middle-start",
+      "middle-end",
+      "bottom-start",
+      "bottom-center",
+      "bottom-end",
+    ]);
+  });
+
+  it("places caller-owned marker content at every canonical anchor", () => {
+    const seen = new Set<string>();
+    for (const position of INDICATOR_POSITIONS) {
+      const root = rendered(render(Indicator, { position, marker, children: content }));
+      const placed = root.querySelector<HTMLElement>("[data-indicator-marker]")!;
+      expect(classes(placed)).toEqual(classesOf(indicator({ position }).marker()));
+      expect(placed.textContent).toBe("3");
+      seen.add(placed.className);
+    }
+    expect(seen.size).toBe(INDICATOR_POSITIONS.length);
+  });
+
+  it("preserves the native focus behavior of caller-owned content", () => {
+    const root = rendered(render(Indicator, { marker, children: content }));
+    const button = root.querySelector<HTMLButtonElement>("button")!;
+    expect(root.tabIndex).toBe(-1);
+    button.focus();
+    expect(document.activeElement).toBe(button);
+  });
+
+  it("merges native attributes without selecting any appearance axis", () => {
+    const root = rendered(render(Indicator, {
+      marker,
+      children: content,
+      id: "inbox-indicator",
+      class: "isolate",
+    }));
+    const nested = rendered(render(StatusVocabularyConsumer, {}))
+      .querySelector<HTMLElement>("[data-indicator]")!;
+
+    expect(root.id).toBe("inbox-indicator");
+    expect(classes(root)).toEqual(classesOf(indicator().root({ class: "isolate" })));
+    for (const element of [root, nested]) {
+      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/inline-edit.test.ts

@@ -0,0 +1,56 @@
+import { flushSync, tick } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import InlineEdit from "../src/InlineEdit.svelte";
+import { render } from "./mount";
+
+async function edit(root:HTMLElement) { root.querySelector<HTMLButtonElement>("button")!.click(); flushSync(); await tick(); return root.querySelector<HTMLInputElement>("input")!; }
+function type(input:HTMLInputElement,value:string) { input.value=value;input.dispatchEvent(new Event("input",{bubbles:true}));flushSync(); }
+async function submit(root:HTMLElement) { root.querySelector("form")!.dispatchEvent(new SubmitEvent("submit",{bubbles:true,cancelable:true}));await tick();flushSync();await tick(); }
+
+describe("InlineEdit committed and draft state",()=>{
+  it("presents saved API values as plain text without a focusable input until explicitly unlocked",async()=>{
+    const changed=vi.fn();const root=render(InlineEdit,{label:"API name",value:"From API",presentation:"input",sourceLabel:"Configuration API",onvaluechange:changed});
+    expect(root.querySelector("input")).toBeNull();
+    expect(root.querySelector("[data-inline-edit-value]")?.textContent?.trim()).toBe("From API");
+    expect(root.querySelector("[data-inline-edit-value]")?.getAttribute("tabindex")).toBeNull();
+    expect(root.querySelector("[data-saved-value]")?.textContent).toContain("Configuration API");
+    const input=await edit(root);expect(input.readOnly).toBe(false);type(input,"Updated API value");await submit(root);
+    expect(changed).toHaveBeenCalledExactlyOnceWith("Updated API value");
+    expect(root.querySelector("input")).toBeNull();
+    expect(root.querySelector("[data-inline-edit-value]")?.textContent?.trim()).toBe("Updated API value");
+  });
+  it("never renders the saved password in the read DOM",async()=>{
+    const root=render(InlineEdit,{label:"Secret",value:"private-api-secret",inputType:"password",presentation:"input"});
+    expect(root.innerHTML).not.toContain("private-api-secret");
+    expect(root.querySelector("[data-inline-edit-value]")?.textContent?.trim()).toBe("••••••••");
+    expect((await edit(root)).type).toBe("password");
+  });
+  it("does not expose draft changes as committed values and restores the edit trigger after save",async()=>{
+    const changed=vi.fn();const root=render(InlineEdit,{label:"Project name",value:"Original",onvaluechange:changed});
+    const input=await edit(root);expect(document.activeElement).toBe(input);type(input,"Updated");expect(changed).not.toHaveBeenCalled();
+    await submit(root);expect(changed).toHaveBeenCalledExactlyOnceWith("Updated");expect(root.textContent).toContain("Updated");
+    expect(document.activeElement).toBe(root.querySelector("button"));
+  });
+  it("Escape discards the draft and reopens from the committed value",async()=>{
+    const changed=vi.fn();const root=render(InlineEdit,{label:"Name",value:"Original",onvaluechange:changed});
+    const input=await edit(root);type(input,"Discarded");input.dispatchEvent(new KeyboardEvent("keydown",{key:"Escape",bubbles:true,cancelable:true}));await tick();flushSync();
+    expect(changed).not.toHaveBeenCalled();expect((await edit(root)).value).toBe("Original");
+  });
+  it("retains invalid and rejected drafts, associates the error, and retries without data loss",async()=>{
+    const save=vi.fn().mockRejectedValueOnce(new Error("offline")).mockResolvedValue(undefined),changed=vi.fn();
+    const root=render(InlineEdit,{label:"Name",value:"Original",onconfirm:save,onvaluechange:changed});
+    const input=await edit(root);type(input,"   ");await submit(root);expect(save).not.toHaveBeenCalled();expect(input.getAttribute("aria-invalid")).toBe("true");
+    expect(root.querySelector("[role=alert]")!.id).toBe(input.getAttribute("aria-describedby"));
+    type(input,"Retry me");await submit(root);expect(input.value).toBe("Retry me");expect(changed).not.toHaveBeenCalled();expect(document.activeElement).toBe(input);
+    await submit(root);expect(changed).toHaveBeenCalledExactlyOnceWith("Retry me");
+  });
+  it("blocks duplicate persistence while a request is pending",async()=>{
+    let finish!:()=>void;const save=vi.fn(()=>new Promise<void>(resolve=>finish=resolve));
+    const root=render(InlineEdit,{label:"Name",value:"A",onconfirm:save});const input=await edit(root);type(input,"B");await submit(root);await submit(root);
+    expect(save).toHaveBeenCalledTimes(1);expect(input.disabled).toBe(true);finish();await tick();flushSync();
+  });
+  it("keeps composition Enter inside the input instead of submitting the draft",async()=>{
+    const root=render(InlineEdit,{label:"Name",value:"A"});const input=await edit(root);
+    const event=new KeyboardEvent("keydown",{key:"Enter",isComposing:true,bubbles:true,cancelable:true});input.dispatchEvent(event);expect(event.defaultPrevented).toBe(true);
+  });
+});

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

@@ -0,0 +1,82 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import { Input, input } from "./fixtures/field-input-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function renderedInput(props: Record<string, unknown> = {}): HTMLInputElement {
+  return rendered(render(Input, props)) as HTMLInputElement;
+}
+
+describe("the Base Input", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(Input).toBeDefined();
+    expect(input).toBeTypeOf("function");
+  });
+
+  it("is the native input and keeps native focus behavior", () => {
+    const element = renderedInput({ name: "query", type: "search" });
+    expect(element.tagName).toBe("INPUT");
+    element.focus();
+    expect(document.activeElement).toBe(element);
+  });
+
+  it("forwards native identity, entry, and constraint attributes unchanged", () => {
+    const element = renderedInput({
+      id: "account-email",
+      name: "email",
+      type: "email",
+      autocomplete: "email",
+      inputmode: "email",
+      placeholder: "name@example.com",
+      required: true,
+      pattern: ".+@example\\.com",
+      maxlength: 64,
+      size: 40,
+      "aria-invalid": "true",
+    });
+
+    expect(element.id).toBe("account-email");
+    expect(element.name).toBe("email");
+    expect(element.type).toBe("email");
+    expect(element.autocomplete).toBe("email");
+    expect(element.inputMode).toBe("email");
+    expect(element.placeholder).toBe("name@example.com");
+    expect(element.required).toBe(true);
+    expect(element.pattern).toBe(".+@example\\.com");
+    expect(element.maxLength).toBe(64);
+    expect(element.size).toBe(40);
+    expect(element.getAttribute("aria-invalid")).toBe("true");
+  });
+
+  it("retains the browser's native validity contract", () => {
+    const element = renderedInput({
+      name: "email",
+      type: "email",
+      required: true,
+      pattern: ".+@example\\.com",
+      value: "not-an-email",
+    });
+    expect(element.checkValidity()).toBe(false);
+
+    element.value = "person@example.com";
+    expect(element.checkValidity()).toBe(true);
+  });
+
+  it("forwards native event handlers", () => {
+    const oninput = vi.fn();
+    const element = renderedInput({ oninput });
+    element.value = "typed";
+    element.dispatchEvent(new InputEvent("input", { bubbles: true }));
+    flushSync();
+    expect(oninput).toHaveBeenCalledTimes(1);
+  });
+
+  it("wears exactly its exported appearance and merges consumer classes", () => {
+    const element = renderedInput({ class: "min-w-0" });
+    expect(classes(element)).toEqual(classesOf(input({ class: "min-w-0" })));
+    expect(classes(element).has("min-w-0")).toBe(true);
+    // Focus is ink (ADR 0023): the focus outline, never the Brand red.
+    expect(classes(element).has("focus-visible:outline-focus")).toBe(true);
+    expect([...classes(element)].some((name) => name.includes("ring-primary"))).toBe(false);
+  });
+});

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

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { KBD_SIZES, Kbd, kbd as kbdAppearance } from "@reddb-io/design-system/base";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the Base Kbd", () => {
+  it("renders a chord as semantic key caps with hidden visual separators", () => {
+    const chord = rendered(
+      render(Kbd, { keys: ["Ctrl", "Shift", "K"], separator: "+" }),
+    );
+    const caps = [...chord.querySelectorAll("kbd")];
+    const separators = [...chord.querySelectorAll("[aria-hidden='true']")];
+
+    expect(chord.tagName).toBe("KBD");
+    expect(caps.map((cap) => cap.textContent)).toEqual(["Ctrl", "Shift", "K"]);
+    expect(separators.map((separator) => separator.textContent)).toEqual(["+", "+"]);
+    expect(chord.tabIndex).toBe(-1);
+  });
+
+  it("offers typography-owned sizes without selecting an appearance axis", () => {
+    expect(KBD_SIZES).toEqual(["sm", "md"]);
+
+    for (const size of KBD_SIZES) {
+      const chord = rendered(render(Kbd, { keys: ["K"], size }));
+      const cap = chord.querySelector("kbd")!;
+
+      expect(classes(cap)).toEqual(classesOf(kbdAppearance({ size })));
+      expect(cap.hasAttribute("data-theme")).toBe(false);
+      expect(cap.hasAttribute("data-color-scheme")).toBe(false);
+      expect(cap.hasAttribute("data-density")).toBe(false);
+    }
+  });
+});

package/vendor/ds/kits/base/test/label-in-name.ts

@@ -0,0 +1,43 @@
+// WCAG 2.5.3 (Label in Name) as axe-core 4.14 checks it in
+// `label-content-name-mismatch`, reduced to what a DOM test can see. The
+// visible text is the element's text less `.sr-only` content (aria-hidden text
+// is still on screen, so it counts); both strings are cut into words, with
+// parentheticals and punctuation dropped, and the visible words must run, in
+// order, inside the accessible name. The axe gate proves the rule in a real
+// browser; this lets a unit test pin a component's naming without it.
+
+const words = (text: string): string[] =>
+  text
+    .normalize("NFKD")
+    .replace(/\([^()]*\)/g, " ")
+    .toLowerCase()
+    .split(/[^\p{L}\p{N}]+/u)
+    .filter(Boolean);
+
+/** The text a sighted reader sees on `element`: its text content less `.sr-only` nodes. */
+export function visibleText(element: Element): string {
+  const clone = element.cloneNode(true) as Element;
+  for (const hidden of clone.querySelectorAll(".sr-only")) hidden.remove();
+  return (clone.textContent ?? "").replace(/\s+/g, " ").trim();
+}
+
+/** The accessible name: `aria-labelledby`, then `aria-label`, then the element's text. */
+export function accessibleName(element: Element): string {
+  const labelledby = element.getAttribute("aria-labelledby");
+  if (labelledby) {
+    return labelledby
+      .split(/\s+/)
+      .map((id) => element.ownerDocument.getElementById(id)?.textContent ?? "")
+      .join(" ")
+      .trim();
+  }
+  return (element.getAttribute("aria-label") ?? element.textContent ?? "").replace(/\s+/g, " ").trim();
+}
+
+/** Whether the visible words run, in order, inside the accessible name. */
+export function labelInName(element: Element): boolean {
+  const shown = words(visibleText(element));
+  if (shown.length === 0) return true;
+  const named = words(accessibleName(element));
+  return named.some((_, start) => shown.every((word, offset) => named[start + offset] === word));
+}