@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/base/test/framework-identity-controls.test.ts

@@ -0,0 +1,162 @@
+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 { afterEach, describe, expect, it, vi } from "vitest";
+import * as react from "../react/src";
+import Fixture from "./fixtures/FrameworkIdentityControls.svelte";
+import { appearanceStorageKey } from "../src/appearance-switch.behavior";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+type Name = "Avatar" | "ToggleGroup" | "AppearanceSwitch";
+const options = [{ value: "all", label: "All" }, { value: "blocked", label: "Unavailable", disabled: true }, { value: "assigned", label: "Assigned" }, { value: "unread", label: "Unread" }];
+const appearanceOptions = [{ value: "application", label: "Application" }, { value: "blocked", label: "Unavailable", disabled: true }, { value: "marketing", label: "Marketing" }];
+const base = { Avatar: { name: "Ada Lovelace", fallback: "AL" }, ToggleGroup: { legend: "Conversations", name: "view", options }, AppearanceSwitch: { label: "Theme", axis: "theme", name: "appearance", options: appearanceOptions } };
+const cleanups: (() => Promise<void>)[] = [];
+afterEach(async () => { while (cleanups.length) await cleanups.pop()!(); });
+function storage(initial: Record<string, string> = {}) {
+  const values = new Map(Object.entries(initial));
+  return { getItem: vi.fn((key: string) => values.get(key) ?? null), setItem: vi.fn((key: string, value: string) => { values.set(key, value); }) };
+}
+async function interact(fn: () => void) { await act(async () => { fn(); flushSync(); }); }
+async function reset(form: HTMLFormElement) { await act(async () => { form.reset(); await new Promise(resolve => setTimeout(resolve, 0)); flushSync(); }); }
+async function render(name: Name, supplied: Record<string, any> = {}) {
+  const a = document.createElement("div"), b = document.createElement("div"); document.body.append(a, b);
+  const appearance = name === "AppearanceSwitch" ? { root: document.createElement("div"), storage: storage() } : {};
+  const props = (next: Record<string, any>) => ({ ...base[name], ...appearance, ...next });
+  const native = (next: Record<string, any>) => Object.fromEntries(Object.entries(props(next)).map(([key, value]) => [key === "className" ? "class" : key.startsWith("on") ? key.toLowerCase() : key, value]));
+  const component = mount(Fixture, { target: a, props: { name, options: native(supplied) } }); flushSync();
+  const root = createRoot(b);
+  const element = (next: Record<string, any>) => h("form", null, h(react[name] as ComponentType<any>, props(next)));
+  await act(() => root.render(element(supplied)));
+  cleanups.push(async () => { await act(() => root.unmount()); await unmount(component); a.remove(); b.remove(); });
+  return { a, b, appearance, update: async (next: Record<string, any>) => { flushSync(() => component.update(native(next))); await act(() => root.render(element(next))); } };
+}
+function snapshot(target: HTMLElement) {
+  const ids = [...target.querySelectorAll("[id]")].map(el => el.id);
+  const normalize = (v: string) => v.split(" ").map(token => ids.includes(token) ? `id-${ids.indexOf(token)}` : token).join(" ");
+  return [...target.querySelectorAll("*")].map(el => ({ tag: el.tagName, classes: [...el.classList].sort(),
+    attrs: Object.fromEntries([...el.attributes].filter(a => !["class", "selected", "value"].includes(a.name) && !a.name.startsWith("data-svelte"))
+      .map(a => [a.name, ["id", "for", "aria-labelledby", "aria-describedby", "aria-errormessage"].includes(a.name) ? normalize(a.value) : a.name.startsWith("data-") && a.value === "true" ? "" : a.value]).sort()),
+    value: el instanceof HTMLInputElement || el instanceof HTMLSelectElement ? el.value : undefined,
+    text: el.children.length ? undefined : el.textContent?.trim() }));
+}
+for (const [name, supplied] of [
+  ...(["sm", "md", "lg"] as const).map(size => ["Avatar", { size, src: "/ada.png", className: "consumer-avatar", imageClass: "consumer-image", fallbackClass: "consumer-fallback" }]),
+  ["Avatar", {}], ["ToggleGroup", {}], ["ToggleGroup", { defaultValue: "unread" }],
+  ["ToggleGroup", { value: "assigned", disabled: true, help: "Scope of the list", error: "Review your scope", className: "consumer-group", listClass: "consumer-list", optionClass: "consumer-option" }],
+  ["ToggleGroup", { options: [] }], ["ToggleGroup", { options: options.map(option => ({ ...option, disabled: true })) }],
+  ["AppearanceSwitch", {}], ["AppearanceSwitch", { defaultValue: "marketing", disabled: true, className: "consumer-select", id: "consumer-appearance" }],
+  ["AppearanceSwitch", { options: [] }], ["AppearanceSwitch", { options: appearanceOptions.map(option => ({ ...option, disabled: true })) }],
+] as [Name, Record<string, any>][]) it(`matches ${name} semantics, slots and native defaults ${JSON.stringify(supplied)}`, async () => {
+  const r = await render(name, supplied); expect(snapshot(r.b)).toEqual(snapshot(r.a));
+});
+for (const flavor of ["svelte", "react"] as const) describe(`${flavor} identity and settings`, () => {
+  it("recovers a replaced image after failure, retaining the named text alternative", async () => {
+    const r = await render("Avatar", { src: "/missing.png" }), target = flavor === "react" ? r.b : r.a;
+    expect(target.querySelector("img")!.style.aspectRatio).toBe("1 / 1");
+    await interact(() => target.querySelector("img")!.dispatchEvent(new Event("error")));
+    expect(target.querySelector("img")).toBeNull(); expect(target.querySelector('[role="img"]')?.getAttribute("aria-label")).toBe("Ada Lovelace");
+    expect(target.textContent?.trim()).toBe("AL"); await r.update({ src: "/replacement.png", name: "Grace Hopper", fallback: "GH" });
+    expect(target.querySelector("img")?.getAttribute("src")).toBe("/replacement.png"); expect(target.textContent?.trim()).toBe("GH");
+    await r.update({ fallback: "GH" }); expect(target.querySelector("img")).toBeNull();
+  });
+  it("uses roving selection, skips disabled choices, wraps, and follows RTL", async () => {
+    const changed = vi.fn(), r = await render("ToggleGroup", { onValueChange: changed }), target = flavor === "react" ? r.b : r.a;
+    const buttons = [...target.querySelectorAll("button")];
+    async function key(index: number, key: string) { await interact(() => buttons[index]!.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }))); }
+    await key(0, "ArrowRight"); expect(document.activeElement).toBe(buttons[2]);
+    expect(buttons.map(button => button.getAttribute("aria-pressed"))).toEqual(["false", "false", "true", "false"]);
+    await key(2, "End"); expect(document.activeElement).toBe(buttons[3]); await key(3, "ArrowDown"); expect(document.activeElement).toBe(buttons[0]);
+    await key(0, "ArrowUp"); expect(document.activeElement).toBe(buttons[3]); await key(3, "Home"); expect(document.activeElement).toBe(buttons[0]);
+    await r.update({ onValueChange: changed, dir: "rtl" });
+    // jsdom does not inherit computed direction, so put the actual inherited browser result on the list.
+    (target.querySelector('[role="group"]') as HTMLElement).style.direction = "rtl";
+    await key(0, "ArrowLeft"); expect(document.activeElement).toBe(buttons[2]);
+    const count = changed.mock.calls.length; await interact(() => buttons[2]!.click()); expect(changed).toHaveBeenCalledTimes(count);
+    expect(buttons.filter(button => button.tabIndex === 0)).toEqual([buttons[2]]);
+  });
+  it("serializes the selected value and resets without a user callback, including canceled reset", async () => {
+    const changed = vi.fn(), r = await render("ToggleGroup", { defaultValue: "assigned", onValueChange: changed }), target = flavor === "react" ? r.b : r.a;
+    const form = target.querySelector("form")!, buttons = [...target.querySelectorAll("button")];
+    await interact(() => buttons[3]!.click()); expect(new FormData(form).get("view")).toBe("unread");
+    form.addEventListener("reset", event => event.preventDefault(), { once: true }); await reset(form); expect(new FormData(form).get("view")).toBe("unread");
+    await reset(form); expect(new FormData(form).get("view")).toBe("assigned"); expect(changed).toHaveBeenCalledTimes(1);
+    await interact(() => buttons[0]!.click()); expect(changed).toHaveBeenLastCalledWith("all");
+    await r.update({ disabled: true }); expect(new FormData(form).has("view")).toBe(false);
+    await interact(() => buttons[3]!.click()); expect(changed).toHaveBeenCalledTimes(2);
+  });
+  it("routes an external form and its reset to the same group", async () => {
+    const external = document.createElement("form"); external.id = `external-${flavor}`; document.body.append(external);
+    try {
+      const r = await render("ToggleGroup", { form: external.id, defaultValue: "assigned" }), target = flavor === "react" ? r.b : r.a;
+      (flavor === "react" ? r.a : r.b).querySelector<HTMLInputElement>('input[type="hidden"]')!.disabled = true;
+      await interact(() => target.querySelectorAll("button")[3]!.click()); expect(new FormData(external).get("view")).toBe("unread");
+      await reset(external); expect(new FormData(external).get("view")).toBe("assigned");
+    } finally { external.remove(); }
+  });
+  it("restores enabled stored appearance, preserves other axes and handles blocked storage", async () => {
+    const root = document.createElement("div"); root.dataset.colorScheme = "dark"; root.dataset.density = "compact";
+    const persistence = storage({ [appearanceStorageKey("theme")]: "marketing" }), changed = vi.fn();
+    const r = await render("AppearanceSwitch", { root, storage: persistence, onValueChange: changed }), target = flavor === "react" ? r.b : r.a;
+    const select = target.querySelector("select")!;
+    expect(select.value).toBe("marketing"); expect(root.dataset.theme).toBe("marketing"); expect(changed).not.toHaveBeenCalled();
+    await interact(() => { select.value = "application"; select.dispatchEvent(new Event("change", { bubbles: true })); });
+    expect(changed).toHaveBeenCalledExactlyOnceWith("application"); expect(root.dataset.theme).toBe("application"); expect(root.dataset.colorScheme).toBe("dark"); expect(root.dataset.density).toBe("compact");
+    const denied = { getItem: () => { throw new Error("denied"); }, setItem: () => { throw new Error("quota"); } };
+    await r.update({ root, storage: denied });
+    await interact(() => { select.value = "marketing"; select.dispatchEvent(new Event("change", { bubbles: true })); });
+    expect(select.value).toBe("marketing"); expect(root.dataset.theme).toBe("marketing");
+  });
+  it("ignores stale/disabled stored options, applies new scopes and resets the native selection", async () => {
+    const root = document.createElement("div"), persistence = storage({ [appearanceStorageKey("theme")]: "blocked" });
+    const changed = vi.fn(), r = await render("AppearanceSwitch", { root, storage: persistence, defaultValue: "application", onValueChange: changed }), target = flavor === "react" ? r.b : r.a;
+    const select = target.querySelector("select")!, form = target.querySelector("form")!; expect(select.value).toBe("application");
+    await interact(() => { select.value = "marketing"; select.dispatchEvent(new Event("change", { bubbles: true })); });
+    expect(new FormData(form).get("appearance")).toBe("marketing"); await reset(form); expect(select.value).toBe("application"); expect(root.dataset.theme).toBe("application"); expect(changed).toHaveBeenCalledTimes(1);
+    await r.update({ axis: "density", options: [{ value: "tiny", label: "Tiny" }, { value: "spacious", label: "Spacious" }], defaultValue: "application", root, storage: persistence });
+    expect(select.value).toBe("tiny"); expect(root.dataset.density).toBe("tiny"); expect(root.dataset.theme).toBe("application");
+  });
+});
+for (const [name, props, selector] of [
+  ["Avatar", { name: "Ada", fallback: "AL" }, "span"],
+  ["ToggleGroup", { legend: "Scope", options, defaultValue: "unread" }, "fieldset"],
+  ["AppearanceSwitch", { label: "Theme", axis: "theme", options: appearanceOptions, defaultValue: "marketing", root: document.createElement("div"), storage: storage() }, "select"],
+] as const) it(`hydrates ${name} without replacing the native element`, async () => {
+  const target = document.createElement("div"), ref = createRef<HTMLElement>(), errors: unknown[] = [];
+  document.body.append(target); const element = h(react[name] as ComponentType<any>, { ...props, ref });
+  target.innerHTML = renderToString(element); const original = target.querySelector(selector);
+  let root!: ReturnType<typeof hydrateRoot>; await act(() => { root = hydrateRoot(target, element, { onRecoverableError: error => errors.push(error) }); });
+  try { expect(target.querySelector(selector)).toBe(original); expect(ref.current).toBe(original); expect(errors).toEqual([]); }
+  finally { await act(() => root.unmount()); target.remove(); }
+});
+it("keeps controlled React selection and appearance caller-owned until acknowledged", async () => {
+  for (const name of ["ToggleGroup", "AppearanceSwitch"] as const) {
+    const target = document.createElement("div"), root = createRoot(target), changed = vi.fn(), appearanceRoot = document.createElement("div"); document.body.append(target);
+    const props = { ...base[name], value: name === "ToggleGroup" ? "all" : "application", onValueChange: changed, ...(name === "AppearanceSwitch" ? { root: appearanceRoot, storage: storage({ [appearanceStorageKey("theme")]: "marketing" }) } : {}) };
+    const element = () => h("form", null, h(react[name] as ComponentType<any>, props)); await act(() => root.render(element()));
+    try {
+      if (name === "ToggleGroup") { await interact(() => target.querySelectorAll("button")[3]!.click()); expect(target.querySelector('[aria-pressed="true"]')?.textContent).toBe("All"); }
+      else { const select = target.querySelector("select")!; await interact(() => { select.value = "marketing"; select.dispatchEvent(new Event("change", { bubbles: true })); }); expect(select.value).toBe("application"); expect(appearanceRoot.dataset.theme).toBe("application"); }
+      expect(changed).toHaveBeenCalledTimes(1); await reset(target.querySelector("form")!);
+      props.value = changed.mock.calls[0]![0]; await act(() => root.render(element()));
+      if (name === "ToggleGroup") expect(target.querySelector('[aria-pressed="true"]')?.textContent).toBe("Unread");
+      else expect(appearanceRoot.dataset.theme).toBe("marketing");
+    } finally { await act(() => root.unmount()); target.remove(); }
+  }
+});
+
+it("adopts an image that already failed before React hydration, then retries replacement sources", async () => {
+  const target = document.createElement("div"); document.body.append(target);
+  const props = { name: "Workspace", fallback: "WS", src: "/cached-failure.png" };
+  target.innerHTML = renderToString(h(react.Avatar, props));
+  const image = target.querySelector("img")!;
+  Object.defineProperty(image, "complete", { value: true }); Object.defineProperty(image, "naturalWidth", { value: 0 });
+  let root!: ReturnType<typeof hydrateRoot>; await act(() => { root = hydrateRoot(target, h(react.Avatar, props)); });
+  try {
+    expect(target.querySelector("img")).toBeNull(); expect(target.textContent).toBe("WS");
+    await act(() => root.render(h(react.Avatar, { ...props, src: "/replacement.png" })));
+    expect(target.querySelector("img")?.getAttribute("src")).toBe("/replacement.png");
+    await act(() => root.render(h(react.Avatar, props)));
+    expect(target.querySelector("img")?.getAttribute("src")).toBe("/cached-failure.png");
+  } finally { await act(() => root.unmount()); target.remove(); }
+});

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

@@ -0,0 +1,256 @@
+import { mount, unmount, flushSync } from "svelte";
+import { act, createElement as h, type ComponentType } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { parseDate, toCalendar, HebrewCalendar } from "@internationalized/date";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import * as react from "../react/src";
+import Fixture from "./fixtures/FrameworkManaged.svelte";
+HTMLElement.prototype.scrollIntoView ??= () => {};
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+const cleanups: (() => Promise<void>)[] = [];
+afterEach(async () => { while (cleanups.length) await cleanups.pop()!(); });
+const items = [{ value: "overview", label: "Overview" }, { value: "disabled", label: "Unavailable", disabled: true }, { value: "details", label: "Details" }];
+const defaults = {
+ LinkPreview: { href: "#preview", label: "Trace guide", previewLabel: "Guide preview", openDelay: 0, closeDelay: 0 },
+ NavigationScope: { navigate: (_href: string, _event: MouseEvent) => {} },
+ DateField: { label: "Date", name: "date" }, TimeField: { label: "Time", name: "time" },
+ DateRangeField: { label: "Dates", startLabel: "From date", endLabel: "To date", startName: "from", endName: "to" },
+ TimeRangeField: { label: "Times", startLabel: "From time", endLabel: "To time", startName: "from", endName: "to" },
+ Calendar: { label: "Review date", placeholder: parseDate("2026-06-10") }, RangeCalendar: { label: "Review dates", placeholder: parseDate("2026-06-10") },
+ DatePicker: { label: "Date", calendarLabel: "Choose date", placeholder: parseDate("2026-06-10") },
+ DateRangePicker: { label: "Dates", startLabel: "Start", endLabel: "End", calendarLabel: "Choose dates", placeholder: parseDate("2026-06-10") },
+ SearchSelect: { label: "Region", name: "region", options: [{ value: "sao", label: "São Paulo", keywords: ["br"] }, { value: "fra", label: "Frankfurt", description: "Europe" }, { value: "off", label: "Unavailable", disabled: true }] },
+ Carousel: { label: "Release notes", slides: [{ label: "First" }, { label: "Second" }] },
+ Navbar: { label: "Review navigation", collapse: "collapsed" as const, links: [{ id: "overview", label: "Overview", href: "#overview" }] },
+ NavigationMenu: { label: "Review destinations", items: [{ id: "learn", label: "Learn", links: [{ id: "guide", label: "Guide", href: "/guide" }] }] },
+ Dialog: { title: "Review", triggerLabel: "Open review" }, Drawer: { title: "Review", triggerLabel: "Open review" }, AlertDialog: { title: "Review", triggerLabel: "Open review", confirmLabel: "Delete" },
+ Disclosure: { label: "Review" }, Accordion: { label: "Review", items }, Tabs: { label: "Review", items },
+ Popover: { triggerLabel: "Open review", contentLabel: "Review" },
+ Combobox: { label: "Region", name: "region", options: items },
+ DropdownMenu: { triggerLabel: "Actions", contentLabel: "Review actions", items: [{ id: "inspect", label: "Inspect" }] },
+ Tooltip: { label: "Help", content: "Review help" },
+};
+type Name = keyof typeof defaults;
+async function interact(fn: () => void) { await act(async () => { fn(); flushSync(); }); }
+async function render(name: Name, extra: Record<string, any> = {}) {
+ const a = document.createElement("div"), b = document.createElement("div"); document.body.append(a, b);
+ const changed = { svelte: vi.fn(), react: vi.fn() };
+ const native = (extra: Record<string, any>) => Object.fromEntries(Object.entries({ ...defaults[name], ...extra }).map(([key, value]) => [key === "className" ? "class" : key.startsWith("on") ? key.toLowerCase() : key, value]));
+ const svelte = mount(Fixture, { target: a, props: { name, options: native(extra), changed: changed.svelte } }); flushSync();
+ const root = createRoot(b);
+ const element = (extra: Record<string, any>) => h("form", null, h(react[name] as ComponentType<any>, { ...defaults[name], ...extra,
+  ...(["Accordion", "Tabs", "Combobox", "SearchSelect", "Calendar", "RangeCalendar", "DateField", "TimeField", "DateRangeField", "TimeRangeField", "DatePicker", "DateRangePicker"].includes(name) ? { onValueChange: changed.react } : { onOpenChange: changed.react }),
+  ...(["Accordion", "Tabs"].includes(name) ? { children: (item: { value: string }) => h("p", null, `${item.value} details`) } : name === "NavigationScope" ? { children: [h("a", { key: "inspect", href: "/inspect" }, "Inspect request"), h("a", { key: "summary", href: "#summary" }, "Summary")] } : ["Dialog", "Drawer", "AlertDialog", "Disclosure", "Popover"].includes(name) ? { children: h("div", null, h("button", { type: "button" }, "Review detail"), ...(["Dialog", "Drawer"].includes(name) ? [h(react.Popover, { triggerLabel: "Nested options", contentLabel: "Nested choices" }, h("button", { type: "button" }, "Choose nested option"))] : [])) } : {}),
+ }));
+ await act(() => root.render(element(extra)));
+ cleanups.push(async () => { await act(() => root.unmount()); await unmount(svelte); a.remove(); b.remove(); });
+ return { a, b, changed, update: async (extra: Record<string, any>) => { flushSync(() => svelte.update(native(extra))); await act(() => root.render(element(extra))); } };
+}
+for (const flavor of ["svelte", "react"] as const) describe(`${flavor} managed contracts`, () => {
+ for (const name of ["Dialog", "Drawer", "AlertDialog"] as const) it(`${name} opens a named top-layer surface, closes with Escape and returns focus`, async () => {
+  const r = await render(name), target = flavor === "react" ? r.b : r.a, trigger = target.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!, dialog = target.querySelector("dialog")!;
+  trigger.focus(); await interact(() => trigger.click()); expect(dialog.open).toBe(true); expect(document.activeElement?.closest("dialog")).toBe(dialog);
+  expect(document.getElementById(dialog.getAttribute("aria-labelledby")!)?.textContent).toBe("Review"); expect(document.documentElement.style.overflow).toBe("hidden");
+  await interact(() => dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true })));
+  expect(dialog.open).toBe(false); expect(document.activeElement).toBe(trigger); expect(document.documentElement.style.overflow).not.toBe("hidden"); expect(r.changed[flavor].mock.calls.map(call => call[0])).toEqual([true, false]);
+ });
+ it("opens and collapses one labelled region without changing its trigger", async () => {
+  const r = await render("Disclosure"), target = flavor === "react" ? r.b : r.a, trigger = target.querySelector("button")!;
+  expect(trigger.getAttribute("aria-expanded")).toBe("false"); await interact(() => trigger.click()); expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  const region = target.querySelector('[role="region"]')!; expect(region.textContent).toBe("Review detail"); expect(region.getAttribute("aria-labelledby")).toBe(trigger.id);
+  await interact(() => trigger.click()); expect(trigger.getAttribute("aria-expanded")).toBe("false"); expect(r.changed[flavor].mock.calls.map(call => call[0])).toEqual([true, false]);
+ });
+ it("keeps one expanded item in single mode and excludes disabled choices", async () => {
+  const r = await render("Accordion"), target = flavor === "react" ? r.b : r.a, triggers = [...target.querySelectorAll("button")];
+  await interact(() => triggers[0]!.click()); expect(triggers[0]!.getAttribute("aria-expanded")).toBe("true");
+  await interact(() => triggers[2]!.click()); expect(triggers[0]!.getAttribute("aria-expanded")).toBe("false"); expect(triggers[2]!.getAttribute("aria-expanded")).toBe("true");
+  expect(triggers[1]!.disabled).toBe(true); expect(r.changed[flavor].mock.calls.map(call => call[0])).toEqual([["overview"], ["details"]]);
+ });
+ it("selects enabled tabs, associates their panels and honors a disabled collection", async () => {
+  const r = await render("Tabs"), target = flavor === "react" ? r.b : r.a, triggers = [...target.querySelectorAll<HTMLButtonElement>('[role="tab"]')];
+  expect(triggers[0]!.getAttribute("aria-selected")).toBe("true"); await interact(() => triggers[2]!.click()); expect(triggers[2]!.getAttribute("aria-selected")).toBe("true");
+  const panel = target.querySelector<HTMLElement>(`[id="${triggers[2]!.getAttribute("aria-controls")}"]`)!; expect(panel.textContent).toBe("details details");
+  await r.update({ disabled: true }); expect([...target.querySelectorAll<HTMLButtonElement>('[role="tab"]')].every(trigger => trigger.disabled)).toBe(true);
+ });
+});
+for (const name of Object.keys(defaults) as Name[]) it(`renders ${name} natively on the server without opening its overlay`, () => {
+ const html = renderToString(h(react[name] as ComponentType<any>, defaults[name])); expect(html.length).toBeGreaterThan(0);
+ if (["Dialog", "Drawer", "AlertDialog"].includes(name)) { expect(html).toContain("<dialog"); expect(html).not.toMatch(/<dialog[^>]+ open=/); }
+});
+
+async function type(input: HTMLInputElement, value: string) {
+ await interact(() => { Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(input, value); input.dispatchEvent(new Event("input", { bubbles: true })); });
+}
+for (const flavor of ["svelte", "react"] as const) describe(`${flavor} date, search and navigation contracts`, () => {
+ for (const name of ["DateField", "TimeField"] as const) it(`${name} retains partial drafts, submits complete values and resets silently`, async () => {
+  const r = await render(name), root = flavor === "react" ? r.b : r.a, controls = [...root.querySelectorAll<HTMLInputElement>('input:not([type="hidden"])')];
+  const values = name === "DateField" ? ["2024", "02", "29"] : ["23", "59"], form = root.querySelector("form")!;
+  await type(controls[0]!, values[0]!); expect(new FormData(form).get(name === "DateField" ? "date" : "time")).toBeNull();
+  for (let i = 1; i < controls.length; i++) await type(controls[i]!, values[i]!);
+  expect(new FormData(form).get(name === "DateField" ? "date" : "time")).toBe(values.join(name === "DateField" ? "-" : ":"));
+  const calls = r.changed[flavor].mock.calls.length; await interact(() => form.reset()); await act(() => new Promise(resolve => setTimeout(resolve, 10)));
+  expect(controls.map(control => control.value)).toEqual(values.map(() => "")); expect(r.changed[flavor]).toHaveBeenCalledTimes(calls);
+ });
+ it("rejects impossible dates without discarding a partial edit", async () => {
+  const r = await render("DateField"), root = flavor === "react" ? r.b : r.a, controls = [...root.querySelectorAll<HTMLInputElement>('input:not([type="hidden"])')];
+  for (const [index, value] of ["2023", "02", "29"].entries()) await type(controls[index]!, value);
+  expect(new FormData(root.querySelector("form")!).get("date")).toBeNull(); expect(controls[2]!.value).toBe("29");
+ });
+ it("navigates dates by keyboard and refuses disabled dates", async () => {
+  const r = await render("Calendar", { minValue: parseDate("2026-06-09"), isDateDisabled: (date: any) => date.toString() === "2026-06-11" }), root = flavor === "react" ? r.b : r.a;
+  const day = (value: string) => root.querySelector<HTMLElement>(`[data-calendar-date="${value}"], [data-bits-day][data-value="${value}"]`)!;
+  const start = day("2026-06-10"); start.focus(); await interact(() => start.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true, cancelable: true })));
+  expect(document.activeElement).toBe(day("2026-06-12")); await interact(() => day("2026-06-12").click());
+  expect(r.changed[flavor].mock.calls.at(-1)?.[0]?.toString()).toBe("2026-06-12");
+  expect(day("2026-06-11").getAttribute("aria-disabled") === "true" || day("2026-06-11").hasAttribute("disabled")).toBe(true);
+ });
+ it("selects an ordered inclusive date range", async () => {
+  const r = await render("RangeCalendar"), root = flavor === "react" ? r.b : r.a;
+  const day = (value: string) => root.querySelector<HTMLElement>(`[data-calendar-date="${value}"], [data-bits-day][data-value="${value}"]`)!;
+  await interact(() => day("2026-06-12").click()); await interact(() => day("2026-06-10").click());
+  const next = r.changed[flavor].mock.calls.at(-1)?.[0]; expect(next.start.toString()).toBe("2026-06-10"); expect(next.end.toString()).toBe("2026-06-12");
+ });
+ it("searches choices by accent-insensitive aliases and submits the selected value", async () => {
+  const r = await render("SearchSelect"), root = flavor === "react" ? r.b : r.a;
+  await interact(() => root.querySelector<HTMLButtonElement>("[data-search-select-trigger]")!.click());
+  const popup = document.querySelector<HTMLElement>("[data-search-select-surface]")!; expect(popup).toBeTruthy();
+  await type(popup.querySelector("input")!, "br");
+  const options = [...popup.querySelectorAll<HTMLElement>('[role="option"]')]; expect(options.map(option => option.textContent?.trim())).toEqual(["São Paulo"]);
+  await interact(() => { options[0]!.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, cancelable: true })); options[0]!.click(); }); expect(new FormData(root.querySelector("form")!).get("region")).toBe("sao");
+  expect(r.changed[flavor].mock.calls.at(-1)?.[0]).toBe("sao");
+ });
+ it("opens the compact navbar, exposes its destinations, and restores focus on Escape", async () => {
+  const r = await render("Navbar"), root = flavor === "react" ? r.b : r.a, trigger = root.querySelector<HTMLButtonElement>("[data-navbar-toggle]")!;
+  await interact(() => trigger.click()); expect(trigger.getAttribute("aria-expanded")).toBe("true"); expect(root.querySelector<HTMLElement>("[data-navbar-panel]")!.hidden).toBe(false);
+  await interact(() => trigger.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }))); expect(trigger.getAttribute("aria-expanded")).toBe("false"); expect(document.activeElement).toBe(trigger);
+ });
+ it("rotates slides only after an explicit navigation action by default", async () => {
+  const r = await render("Carousel"), root = flavor === "react" ? r.b : r.a;
+  expect(root.querySelectorAll('[data-carousel-slide]:not([hidden])')).toHaveLength(1);
+  await interact(() => root.querySelector<HTMLButtonElement>('[aria-label="Next slide"]')!.click()); expect(root.querySelector("[data-carousel-position]")!.textContent?.trim()).toBe("2 of 2"); expect(root.querySelector("[data-carousel-rotation]")).toBeNull();
+ });
+ it("invalidates a pending confirmation when its overlay closes and reopens", async () => {
+  let finish!: () => void; const confirm = vi.fn(() => new Promise<void>(resolve => { finish = resolve; }));
+  const r = await render("AlertDialog", { onConfirm: confirm }), root = flavor === "react" ? r.b : r.a, trigger = root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!, dialog = root.querySelector("dialog")!;
+  await interact(() => trigger.click()); await interact(() => { root.querySelector<HTMLButtonElement>("[data-alert-dialog-confirm]")!.click(); root.querySelector<HTMLButtonElement>("[data-alert-dialog-confirm]")!.click(); }); expect(confirm).toHaveBeenCalledTimes(1);
+  await interact(() => dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }))); await interact(() => trigger.click()); await interact(() => finish()); expect(dialog.open).toBe(true);
+ });
+});
+
+for (const flavor of ["svelte", "react"] as const) describe(`${flavor} anchored and routed behavior`, () => {
+ it("opens a named popover, focuses its content, then returns focus on Escape", async () => {
+  const r = await render("Popover"), root = flavor === "react" ? r.b : r.a, trigger = root.querySelector<HTMLButtonElement>("[data-popover-trigger]")!;
+  trigger.focus(); await interact(() => trigger.click()); const popup = document.querySelector<HTMLElement>("[data-popover-surface]")!;
+  expect(popup.getAttribute("aria-label")).toBe("Review");
+  // The managed native adapter schedules focus after positioning. Assert its
+  // observable result instead of depending on a particular animation frame.
+  await vi.waitFor(() => expect(popup.contains(document.activeElement)).toBe(true));
+  await interact(() => document.activeElement!.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true })));
+  await vi.waitFor(() => {
+   expect(trigger.getAttribute("aria-expanded")).toBe("false");
+   expect(document.activeElement).toBe(trigger);
+  });
+ });
+ it("keeps menu rows named and activates one enabled command", async () => {
+  const action = vi.fn(), r = await render("DropdownMenu", { items: [{ id: "inspect", label: "Inspect", onselect: action }, { id: "locked", label: "Locked", disabled: true }] }), root = flavor === "react" ? r.b : r.a;
+  await interact(() => root.querySelector<HTMLButtonElement>("[data-dropdown-menu-trigger]")!.click());
+  const popup = document.querySelector<HTMLElement>("[data-dropdown-menu-surface]")!, items = [...popup.querySelectorAll<HTMLElement>('[role="menuitem"]')];
+  expect(popup.getAttribute("aria-label")).toBe("Review actions"); expect(items[1]!.getAttribute("aria-disabled")).toBe("true");
+  await interact(() => items[0]!.click()); expect(action).toHaveBeenCalledTimes(1);
+ });
+ it("opens a named navigation section without losing its crawlable destinations", async () => {
+  const r = await render("NavigationMenu"), root = flavor === "react" ? r.b : r.a; expect(root.querySelector('a[href="/guide"]')).toBeTruthy();
+  await interact(() => root.querySelector<HTMLButtonElement>("[data-navigation-menu-trigger]")!.click());
+  expect(document.querySelector("[data-navigation-menu-surface]")!.textContent).toContain("Guide");
+ });
+ it("filters the editable combobox and reports selection independently from typed text", async () => {
+  const r = await render("Combobox"), root = flavor === "react" ? r.b : r.a, input = root.querySelector("input:not([type=hidden])") as HTMLInputElement;
+  await interact(() => input.focus()); await type(input, "Detail"); await interact(() => input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true, cancelable: true })));
+  const popup = document.querySelector<HTMLElement>("[data-combobox-surface]")!, item = popup.querySelector<HTMLElement>('[role="option"]')!;
+  expect(item.textContent?.trim()).toBe("Details"); await interact(() => { item.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, cancelable: true })); item.click(); });
+  expect(r.changed[flavor].mock.calls.at(-1)?.[0]).toBe("details"); expect(new FormData(root.querySelector("form")!).get("region")).toBe("details");
+ });
+ it("routes plain in-app links once while preserving native modified and fragment clicks", async () => {
+  const navigate = vi.fn(), r = await render("NavigationScope", { navigate }), root = flavor === "react" ? r.b : r.a, link = root.querySelector('a[href="/inspect"]')!;
+  const analytics = vi.fn(); document.addEventListener("click", analytics);
+  try {
+   await interact(() => link.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, ctrlKey: true })));
+   expect(navigate).not.toHaveBeenCalled();
+   await interact(() => link.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true })));
+   expect(navigate).toHaveBeenCalledTimes(1); expect(navigate.mock.calls[0]![0]).toBe("/inspect"); expect(analytics).toHaveBeenCalledTimes(2);
+  } finally { document.removeEventListener("click", analytics); }
+ });
+});
+
+for (const flavor of ["svelte", "react"] as const) describe(`${flavor} descriptions and range forms`, () => {
+ it("keeps a link preview a native link and never steals focus", async () => {
+  const r = await render("LinkPreview"), root = flavor === "react" ? r.b : r.a, link = root.querySelector<HTMLAnchorElement>("[data-link-preview-trigger]")!;
+  expect(link.getAttribute("href")).toBe("#preview"); expect(link.getAttribute("role")).toBe("link"); link.focus();
+  await r.update({ open: true }); expect(document.querySelector("[data-link-preview-surface]")?.getAttribute("aria-label")).toBe("Guide preview"); expect(document.activeElement).toBe(link);
+ });
+ it("exposes a supplemental tooltip description on keyboard focus", async () => {
+  const r = await render("Tooltip"), root = flavor === "react" ? r.b : r.a, trigger = root.querySelector<HTMLElement>("[data-tooltip-trigger]")!;
+  await interact(() => { document.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", bubbles: true })); trigger.focus(); });
+  await act(() => new Promise(resolve => setTimeout(resolve, 30)));
+  const description = document.getElementById(trigger.getAttribute("aria-describedby")!); expect(description?.textContent).toContain("Review help"); expect(trigger.getAttribute("aria-label")).toBe("Help");
+ });
+ for (const name of ["DateRangeField", "TimeRangeField"] as const) it(`${name} excludes inverted end values and announces an error`, async () => {
+  const r = await render(name, { startValue: name === "DateRangeField" ? "2026-06-12" : "12:30", endValue: name === "DateRangeField" ? "2026-06-10" : "10:00" }), root = flavor === "react" ? r.b : r.a;
+  expect(new FormData(root.querySelector("form")!).get("to")).toBeNull(); expect(root.querySelector('[role="alert"]')?.textContent).toContain("cannot be before");
+ });
+});
+
+for (const flavor of ["svelte", "react"] as const) describe(`${flavor} portal boundaries`, () => {
+ it("preserves all three subtree axes and follows live changes", async () => {
+  const r = await render("Popover"), root = flavor === "react" ? r.b : r.a;
+  for (const [axis, value] of [["theme", "marketing"], ["color-scheme", "light"], ["density", "tiny"]]) root.setAttribute(`data-${axis}`, value!);
+  await interact(() => root.querySelector<HTMLButtonElement>("[data-popover-trigger]")!.click()); const popup = document.querySelector<HTMLElement>("[data-popover-surface]")!;
+  for (const [axis, value] of [["theme", "marketing"], ["color-scheme", "light"], ["density", "tiny"]]) expect(popup.closest(`[data-${axis}]`)?.getAttribute(`data-${axis}`)).toBe(value);
+  await interact(() => root.setAttribute("data-density", "spacious")); expect(popup.closest('[data-density]')?.getAttribute("data-density")).toBe("spacious");
+ });
+ it("keeps nested popovers in their native modal and dismisses one layer at a time", async () => {
+  const r = await render("Dialog"), root = flavor === "react" ? r.b : r.a, dialog = root.querySelector("dialog")!;
+  await interact(() => root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!.click());
+  const trigger = dialog.querySelector<HTMLButtonElement>("[data-popover-trigger]")!; await interact(() => trigger.click());
+  const popup = document.querySelector<HTMLElement>("[data-popover-surface]")!; expect(popup.closest("dialog")).toBe(dialog); expect(popup.contains(document.activeElement)).toBe(true);
+  await interact(() => document.activeElement!.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true })));
+  expect(dialog.open).toBe(true); expect(trigger.getAttribute("aria-expanded")).toBe("false");
+ });
+});
+
+for (const flavor of ["svelte", "react"] as const) for (const name of ["DatePicker", "DateRangePicker"] as const) it(`${flavor} ${name} restores the initial empty form value after a Calendar selection`, async () => {
+  const r = await render(name, { name: "date", startName: "start", endName: "end" }), root = flavor === "react" ? r.b : r.a;
+  await interact(() => root.querySelector<HTMLButtonElement>("[data-popover-trigger]")!.click());
+  const day = (value: string) => document.querySelector<HTMLElement>(`[data-calendar-date="${value}"], [data-bits-day][data-value="${value}"]`)!;
+  await interact(() => day("2026-06-10").click()); if (name === "DateRangePicker") await interact(() => day("2026-06-12").click());
+  const form = root.querySelector("form")!; expect(new FormData(form).get(name === "DatePicker" ? "date" : "start")).toBe("2026-06-10");
+  const calls = r.changed[flavor].mock.calls.length; await interact(() => form.reset()); await act(() => new Promise(resolve => setTimeout(resolve, 20)));
+  expect(new FormData(form).get(name === "DatePicker" ? "date" : "start")).toBeNull(); expect(r.changed[flavor]).toHaveBeenCalledTimes(calls);
+});
+
+for (const flavor of ["svelte", "react"] as const) describe(`${flavor} locale-aware calendar geometry`, () => {
+ for (const weekStartsOn of [0, 1] as const) it(`keeps explicit week start ${weekStartsOn} independent of en-GB locale`, async () => {
+  const r = await render("Calendar", { locale: "en-GB", weekStartsOn }), root = flavor === "react" ? r.b : r.a;
+  const first = root.querySelector<HTMLElement>("[data-calendar-date], [data-bits-day]")!;
+  expect(first.dataset.calendarDate ?? first.dataset.value).toBe(weekStartsOn === 0 ? "2026-05-31" : "2026-06-01");
+  const day = root.querySelector<HTMLElement>('[data-calendar-date="2026-06-10"], [data-bits-day][data-value="2026-06-10"]')!; day.focus();
+  await interact(() => day.dispatchEvent(new KeyboardEvent("keydown", {key:"Home",bubbles:true,cancelable:true})));
+  const active = document.activeElement as HTMLElement; expect(active.dataset.calendarDate ?? active.dataset.value).toBe(weekStartsOn === 0 ? "2026-06-07" : "2026-06-08");
+ });
+ it("preserves non-Gregorian month labels, date identity and right-to-left direction", async () => {
+  const date = toCalendar(parseDate("2026-06-10"), new HebrewCalendar());
+  const r = await render("Calendar", { locale: "he-IL", placeholder: date }), root = flavor === "react" ? r.b : r.a;
+  expect(root.querySelector('[dir="rtl"]')).toBeTruthy();
+  const month = new Intl.DateTimeFormat("he-IL", {month:"long",calendar:"hebrew"}).format(date.toDate("UTC"));
+  expect(root.textContent).toContain(month);
+  const day = root.querySelector<HTMLElement>('[data-calendar-date="2026-06-10"], [data-bits-day][data-value="2026-06-10"]')!;
+  await interact(() => day.click()); expect(r.changed[flavor].mock.calls.at(-1)?.[0].calendar.identifier).toBe("hebrew");
+ });
+});
+
+for (const flavor of ["svelte","react"] as const) it(`${flavor} keeps boundary Tab inside an anchored focus scope`, async () => {
+ const r=await render("Popover"),root=flavor==="react"?r.b:r.a;await interact(()=>root.querySelector<HTMLButtonElement>("[data-popover-trigger]")!.click());
+ const popup=document.querySelector<HTMLElement>("[data-popover-surface]")!,button=popup.querySelector("button")!;button.focus();
+ const tab=new KeyboardEvent("keydown",{key:"Tab",bubbles:true,cancelable:true});await interact(()=>button.dispatchEvent(tab));expect(tab.defaultPrevented).toBe(true);expect(popup.contains(document.activeElement)).toBe(true);expect(root.querySelector("[data-popover-trigger]")!.getAttribute("aria-expanded")).toBe("true");
+});

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

@@ -0,0 +1,96 @@
+import { mount, unmount, flushSync } from "svelte";
+import { act, createElement as h, forwardRef, type ComponentType } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import * as react from "../react/src";
+import { ICON_COLORS, ICON_SIZES } from "../src/core/icon";
+import { LOGO_LAYOUTS, LOGO_SURFACES, shipsMark } from "../src/logo.marks";
+import { CARD_MEDIA_RATIOS, CARD_MEDIA_SPANS, CARD_TONES } from "../src/card.variants";
+import { IMAGE_FITS, IMAGE_POSITIONS } from "../src/image.variants";
+import Fixture from "./fixtures/FrameworkMedia.svelte";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+const Glyph = forwardRef<SVGSVGElement, react.IconGlyphProps>(({ size, color, strokeWidth, ...rest }, ref) => h("svg", { ...rest, ref, "data-test-glyph": true, width: size, height: size, color, stroke: color, strokeWidth, viewBox: "0 0 24 24" }));
+const image = { src: "/photo.webp", alt: "São Paulo region", width: 800, height: 600 };
+type Scenario = { name: "Icon" | "Image" | "Logo" | "Card"; options?: Record<string, unknown>; rich?: boolean; glyph?: boolean };
+function props({ name, options = {}, rich, glyph }: Scenario) {
+  const common = { ...options, className: "consumer-extra", "data-consumer": "forwarded" };
+  if (name === "Icon") return { ...common, ...(glyph ? { icon: Glyph } : {}) };
+  if (name !== "Card") return common;
+  return { ...common, ...(glyph ? { icon: Glyph } : {}), ...(rich ? { header: h("strong", null, "Custom header"), media: h("span", null, "Custom media") } : {}), footer: h("button", { type: "button" }, "Details"), children: h("span", null, "Card content") };
+}
+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()),
+    style: element.getAttribute("style") ? Object.fromEntries([...((element as HTMLElement).style)].sort().map(n => [n, (element as HTMLElement).style.getPropertyValue(n)])) : undefined,
+    text: element.children.length ? undefined : element.textContent?.trim() }));
+}
+const scenarios: Scenario[] = [
+  ...ICON_SIZES.flatMap(size => ICON_COLORS.flatMap(color => [false, true].map(glyph => ({ name: "Icon" as const, options: { icon: "menu", size, color, "aria-label": "Navigation" }, glyph })))),
+  ...IMAGE_FITS.flatMap(fit => IMAGE_POSITIONS.flatMap(position => [false, true].map(priority => ({ name: "Image" as const, options: { ...image, fit, position, priority } })))),
+  { name: "Image", options: { ...image, alt: "", decorative: true, ratio: 1 } },
+  { name: "Image", options: { ...image, priority: true, loading: "lazy", srcset: "/small.webp 400w, /large.webp 800w", sizes: "50vw", sources: [{ srcset: "/photo.avif", type: "image/avif" }, { srcset: "/crop.webp", media: "(min-width: 48rem)", sizes: "30vw" }] } },
+  ...LOGO_LAYOUTS.flatMap(layout => LOGO_SURFACES.filter(on => shipsMark(layout, on)).flatMap(on => [false, true].map(link => ({ name: "Logo" as const, options: { layout, on, ...(link ? { href: "/", label: "RedDB home" } : {}), size: 24, loading: "lazy", fetchpriority: "low" } })))),
+  ...CARD_TONES.flatMap(tone => ["outline", "plain"].flatMap(variant => [false, true].map(raised => ({ name: "Card" as const, options: { tone, variant, raised, title: "Region", description: "Primary cluster", busy: raised }, glyph: true })))),
+  ...CARD_MEDIA_SPANS.flatMap(span => CARD_MEDIA_RATIOS.flatMap(ratio => ["horizontal", "vertical"].map(orientation => ({ name: "Card" as const, options: { image, span, ratio, orientation, priority: true } })))),
+  { name: "Card", rich: true, glyph: true, options: { title: "Replaced", description: "Replaced", image, busy: true, busyLabel: "Refreshing region", busyLabelHidden: true } },
+];
+for (const scenario of scenarios) it(`matches ${scenario.name} semantics, content, geometry and appearance ${JSON.stringify(scenario)}`, async () => {
+  const result = await render(scenario);
+  try { expect(snapshot(result.b)).toEqual(snapshot(result.a)); } finally { await result.cleanup(); }
+});
+for (const framework of ["react", "svelte"] as const) describe(`${framework} media behavior`, () => {
+  it("updates background work without replacing content or custom sections", async () => {
+    const r = await render({ name: "Card", rich: true, options: { title: "Replaced", image } });
+    try {
+      const target = framework === "react" ? r.b : r.a;
+      const content = target.querySelector("[data-card-body] > span");
+      expect(target.textContent).not.toContain("Replaced"); expect(target.querySelector("img")).toBeNull();
+      await r.update({ title: "Replaced", image, busy: true, busyLabel: "Refreshing" });
+      expect(target.querySelector("[data-card-body] > span")).toBe(content);
+      expect(target.querySelector('[aria-busy="true"]')).not.toBeNull();
+      expect(target.querySelector('[role="status"]')?.textContent).toContain("Refreshing");
+      await r.update({ title: "Replaced", image });
+      expect(target.querySelector('[role="status"]')).toBeNull();
+    } finally { await r.cleanup(); }
+  });
+  it("follows document Color Scheme changes and respects explicit local surfaces", async () => {
+    document.documentElement.setAttribute("data-color-scheme", "light");
+    const r = await render({ name: "Logo" });
+    try {
+      const target = framework === "react" ? r.b : r.a;
+      const before = target.querySelector("img")!.getAttribute("src");
+      await act(async () => { document.documentElement.setAttribute("data-color-scheme", "dark"); await new Promise(resolve => setTimeout(resolve, 0)); flushSync(); });
+      expect(target.firstElementChild?.getAttribute("data-logo-on")).toBe("dark");
+      expect(target.querySelector("img")!.getAttribute("src")).not.toBe(before);
+      await r.update({ on: "light" });
+      expect(target.firstElementChild?.getAttribute("data-logo-on")).toBe("light");
+    } finally { await r.cleanup(); document.documentElement.removeAttribute("data-color-scheme"); }
+  });
+});
+it("React refuses unlabelled, unsized or contradictory images and unshipped or illegible Marks during SSR", () => {
+  for (const options of [{ src: "/x", alt: "", ratio: 1 }, { src: "/x", alt: "Content" }, { src: "/x", alt: "Content", decorative: true, ratio: 1 }]) {
+    expect(() => renderToString(h(react.Image, options as react.ImageProps))).toThrow("Image:");
+  }
+  expect(() => renderToString(h(react.Logo, { layout: "icon", on: "dark" }))).toThrow("ships no icon Mark");
+  expect(() => renderToString(h(react.Logo, { size: 8 }))).toThrow("below the 16px minimum");
+});
+
+it("React accepts numeric renderable slots without falling back or leaking them outside sections", () => {
+  const html = renderToString(h(react.Card, { title: "Replaced title", image, header: 0, media: 0, footer: 0 }));
+  const target = document.createElement("div"); target.innerHTML = html;
+  for (const slot of ["header", "media", "footer"]) expect(target.querySelector(`[data-card-${slot}]`)?.textContent).toBe("0");
+  expect(target.querySelector("img")).toBeNull(); expect(target.textContent).not.toContain("Replaced title");
+});