@reddb-io/ui-kit 0.3.4 → 0.3.5

package/vendor/ds/kits/base/test/navigation-menu.test.ts

@@ -0,0 +1,118 @@
+import { flushSync, tick } from "svelte";
+import { describe, expect, it } from "vitest";
+import {
+  NavigationMenu,
+  popover as popoverAppearance,
+  type NavigationMenuEntry,
+} from "@reddb-io/design-system/base";
+import { classes, classesOf, render } from "./mount";
+
+const ITEMS: readonly NavigationMenuEntry[] = [
+  { id: "overview", label: "Overview", href: "/overview", active: true },
+  {
+    id: "resources",
+    label: "Resources",
+    links: [
+      { id: "docs", label: "Documentation", href: "/docs", description: "Read the guides" },
+      { id: "support", label: "Support", href: "/support" },
+    ],
+  },
+  { id: "pricing", label: "Pricing", href: "/pricing" },
+];
+
+async function settle(): Promise<void> {
+  await tick();
+  await new Promise((resolve) => setTimeout(resolve, 10));
+  flushSync();
+}
+
+function press(element: Element, key: string): void {
+  element.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+  flushSync();
+}
+
+describe("the Base NavigationMenu", () => {
+  it("renders native links in a named navigation and roves the top-level focus", async () => {
+    const root = render(NavigationMenu, { label: "Primary", items: ITEMS });
+    const nav = root.querySelector<HTMLElement>("[data-navigation-menu-root]")!;
+    const controls = [...root.querySelectorAll<HTMLElement>("[data-navigation-menu-control]")];
+
+    expect(nav.tagName).toBe("NAV");
+    expect(nav.getAttribute("aria-label")).toBe("Primary");
+    expect(controls[0]!.tagName).toBe("A");
+    expect(controls[0]!.getAttribute("href")).toBe("/overview");
+    expect(controls[0]!.getAttribute("aria-current")).toBe("page");
+
+    controls[0]!.focus();
+    press(controls[0]!, "ArrowRight");
+    await settle();
+    expect(document.activeElement).toBe(controls[1]);
+  });
+
+  it("dismisses an opened navigation surface with Escape", async () => {
+    const root = render(NavigationMenu, { label: "Primary", items: ITEMS, delayDuration: 0 });
+    const trigger = root.querySelector<HTMLButtonElement>("[data-navigation-menu-trigger]")!;
+    trigger.focus();
+    trigger.click();
+    await settle();
+
+    const content = document.querySelector<HTMLElement>("[data-navigation-menu-surface]")!;
+    expect(content).not.toBeNull();
+    press(trigger, "Escape");
+    await settle();
+
+    expect(document.querySelector("[data-navigation-menu-surface]")).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("composes the canonical Popover surface and live Density roles", async () => {
+    const root = render(NavigationMenu, {
+      label: "Primary",
+      items: ITEMS,
+      value: "resources",
+      delayDuration: 0,
+      size: "lg",
+      class: "max-w-xl",
+    });
+    await settle();
+    const content = document.querySelector<HTMLElement>("[data-navigation-menu-surface]")!;
+
+    // The contract is "this surface IS the canonical Popover surface", so the
+    // expectation is read from the Popover rather than restated as a list of
+    // class names. A list goes stale the moment the Foundation renames a role —
+    // which is exactly how this assertion came to pin `bg-background` after
+    // elevation moved the Popover onto its overlay level.
+    //
+    // Composition is measured on a surface the caller has not overridden;
+    // the override itself is the assertion below.
+    render(NavigationMenu, { label: "Plain", items: ITEMS, value: "resources", delayDuration: 0 });
+    await settle();
+    const plain = [...document.querySelectorAll<HTMLElement>("[data-navigation-menu-surface]")].at(-1)!;
+    for (const tokenClass of classesOf(popoverAppearance())) {
+      expect(classes(plain).has(tokenClass), `composes ${tokenClass}`).toBe(true);
+    }
+    expect(classes(content).has("max-w-xl")).toBe(true);
+    expect(classes(root.querySelector("[data-navigation-menu-control]")!).has("h-[var(--reddb-spatial-control-height-lg)]")).toBe(true);
+    expect(content.querySelectorAll("a")).toHaveLength(2);
+  });
+
+  it("keeps a closed section's destinations in the document without a second tab stop", async () => {
+    const root = render(NavigationMenu, { label: "Primary", items: ITEMS, delayDuration: 0 });
+    const closed = root.querySelector<HTMLElement>('[data-navigation-menu-closed-links="resources"]')!;
+
+    // Crawlers and no-script readers find every destination while the section is closed …
+    expect(closed).not.toBeNull();
+    expect(closed.hidden).toBe(true);
+    expect([...closed.querySelectorAll("a")].map((link) => link.getAttribute("href")))
+      .toEqual(["/docs", "/support"]);
+    expect(closed.textContent).toContain("Read the guides");
+    expect(document.querySelector("[data-navigation-menu-surface]")).toBeNull();
+
+    // … and the real surface takes over on open, so no link is ever duplicated.
+    root.querySelector<HTMLButtonElement>("[data-navigation-menu-trigger]")!.click();
+    await settle();
+    expect(document.querySelector("[data-navigation-menu-surface]")).not.toBeNull();
+    expect(root.querySelector("[data-navigation-menu-closed-links]")).toBeNull();
+    expect(document.querySelectorAll('a[href="/docs"]')).toHaveLength(1);
+  });
+});

package/vendor/ds/kits/base/test/navigation-scope.test.ts

@@ -0,0 +1,62 @@
+// Issue 483: an injected navigation seam. Every in-app link inside a
+// NavigationScope — whichever component rendered it — activates through the
+// consumer's router; the browser keeps what is the user's or the browser's call.
+import { describe, expect, it, vi } from "vitest";
+import NavigationScopeConsumer from "./fixtures/NavigationScopeConsumer.svelte";
+import { render } from "./mount";
+
+function click(element: Element, init: MouseEventInit = {}): MouseEvent {
+  const event = new MouseEvent("click", { bubbles: true, cancelable: true, button: 0, ...init });
+  element.dispatchEvent(event);
+  return event;
+}
+
+describe("the Base NavigationScope", () => {
+  it("routes every in-app link inside it through the injected seam, whichever component rendered it", () => {
+    const navigate = vi.fn();
+    const root = render(NavigationScopeConsumer, { navigate });
+    const inApp = [
+      root.querySelector('[data-probe="link"]')!,
+      root.querySelector('nav a[href="/databases/main"]')!,
+      root.querySelector('a[href="/rows?page=2"]')!,
+      root.querySelector('[data-probe="caller"]')!,
+    ];
+    for (const anchor of inApp) {
+      const event = click(anchor);
+      expect(event.defaultPrevented, anchor.getAttribute("href")!).toBe(true);
+    }
+    expect(navigate.mock.calls.map(([href]) => href)).toEqual([
+      "/collections",
+      "/databases/main",
+      "/rows?page=2",
+      "/caller-owned",
+    ]);
+    expect(navigate.mock.calls[0]![1]).toBeInstanceOf(MouseEvent);
+  });
+
+  it("leaves to the browser what is the user's or the browser's call", () => {
+    const navigate = vi.fn();
+    const root = render(NavigationScopeConsumer, { navigate });
+    const caller = root.querySelector('[data-probe="caller"]')!;
+    for (const init of [{ metaKey: true }, { ctrlKey: true }, { shiftKey: true }, { altKey: true }, { button: 1 }]) {
+      expect(click(caller, init).defaultPrevented, JSON.stringify(init)).toBe(false);
+    }
+    for (const probe of ["external", "download", "blank", "fragment", "opt-out"]) {
+      expect(click(root.querySelector(`[data-probe="${probe}"]`)!).defaultPrevented, probe).toBe(false);
+    }
+    expect(navigate).not.toHaveBeenCalled();
+  });
+
+  it("changes nothing without a scope: links stay native anchors", () => {
+    const navigate = vi.fn();
+    const root = render(NavigationScopeConsumer, { navigate, scoped: false });
+    expect(click(root.querySelector('[data-probe="link"]')!).defaultPrevented).toBe(false);
+    expect(root.querySelector("[data-navigation-scope]")).toBeNull();
+    expect(navigate).not.toHaveBeenCalled();
+  });
+
+  it("renders no box of its own", () => {
+    const root = render(NavigationScopeConsumer, { navigate: vi.fn() });
+    expect(root.querySelector("[data-navigation-scope]")!.classList.contains("contents")).toBe(true);
+  });
+});

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

@@ -0,0 +1,94 @@
+import { createRawSnippet, flushSync, type Snippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import NotificationEmptyStateContractFailures from "./fixtures/NotificationEmptyStateContractFailures.svelte";
+import NotificationEmptyStateConsumer from "./fixtures/NotificationEmptyStateConsumer.svelte";
+import { Notification, notification } from "./fixtures/notification-empty-state-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function text(content: string): Snippet {
+  return createRawSnippet(() => ({ render: () => `<span>${content}</span>` }));
+}
+
+describe("the deliberately silent notification fixture", () => {
+  it("demonstrates a visible notification that never reaches assistive technology", () => {
+    const notification = rendered(
+      render(NotificationEmptyStateContractFailures, { failure: "silent-notification" }),
+    );
+
+    expect(notification.textContent).toContain("Deployment complete");
+    expect(notification.getAttribute("role")).toBeNull();
+    expect(notification.getAttribute("aria-live")).toBeNull();
+  });
+});
+
+describe("the Base Notification", () => {
+  it("announces transient feedback through the canonical Alert contract", () => {
+    const root = rendered(
+      render(Notification, {
+        feedback: "success",
+        title: "Deployment complete",
+        children: text("The new release is live."),
+      }),
+    );
+
+    const announcement = root.querySelector<HTMLElement>("[role=status]");
+    expect(announcement?.textContent).toContain("Deployment complete");
+    expect(announcement?.textContent).toContain("The new release is live.");
+  });
+
+  it("keeps Alert's assertive urgency for danger feedback", () => {
+    const root = rendered(render(Notification, { feedback: "danger", title: "Deployment failed" }));
+
+    expect(root.querySelector("[role=alert]")?.textContent).toContain("Deployment failed");
+    expect(root.querySelector("[role=status]")).toBeNull();
+  });
+
+  it("dismisses from a native keyboard-focusable Button and notifies the caller", () => {
+    let dismissals = 0;
+    const host = render(Notification, {
+      feedback: "warning",
+      title: "Capacity is nearly full",
+      dismissLabel: "Dismiss capacity warning",
+      ondismiss: () => dismissals++,
+    });
+    const dismiss = host.querySelector<HTMLButtonElement>("button")!;
+
+    expect(dismiss.type).toBe("button");
+    expect(dismiss.getAttribute("aria-label")).toBe("Dismiss capacity warning");
+    dismiss.focus();
+    expect(document.activeElement).toBe(dismiss);
+    dismiss.click();
+    flushSync();
+
+    expect(host.querySelector("[data-notification]")).toBeNull();
+    expect(dismissals).toBe(1);
+  });
+
+  it("wears its exported Density seam without selecting an appearance axis", () => {
+    const root = rendered(
+      render(Notification, {
+        feedback: "success",
+        title: "Deployment complete",
+        class: "mt-4",
+        id: "deployment-notification",
+      }),
+    );
+    const slots = notification();
+
+    expect(root.id).toBe("deployment-notification");
+    expect(classes(root)).toEqual(classesOf(slots.root({ class: "mt-4" })));
+    expect(classes(root).has("gap-[var(--reddb-spatial-gap-sm)]")).toBe(true);
+    expect(root.hasAttribute("data-theme")).toBe(false);
+    expect(root.hasAttribute("data-color-scheme")).toBe(false);
+    expect(root.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("inherits every appearance axis from a nested consumer scope", () => {
+    const nested = render(NotificationEmptyStateConsumer)
+      .querySelector<HTMLElement>("[data-nested-notification] > [data-notification]")!;
+
+    expect(nested.hasAttribute("data-theme")).toBe(false);
+    expect(nested.hasAttribute("data-color-scheme")).toBe(false);
+    expect(nested.hasAttribute("data-density")).toBe(false);
+  });
+});

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

@@ -0,0 +1,38 @@
+import { flushSync, tick } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import NumberField from "../src/NumberField.svelte";
+import Consumer from "./fixtures/NumberFieldConsumer.svelte";
+import { render } from "./mount";
+
+function edit(input:HTMLInputElement,text:string) { input.value=text;input.dispatchEvent(new Event("input",{bubbles:true}));flushSync(); }
+describe("NumberField's native numeric contract",()=>{
+  it("steps decimals exactly once, retains native bounds and associates its help",()=>{
+    const changed=vi.fn();const root=render(NumberField,{label:"Rate",value:0.3,min:0,max:0.5,step:0.1,help:"Sampling fraction",onvaluechange:changed});
+    const input=root.querySelector("input")!;const buttons=root.querySelectorAll("button");
+    buttons[1]!.click();flushSync();expect(input.valueAsNumber).toBe(0.4);expect(changed).toHaveBeenLastCalledWith(0.4);
+    buttons[1]!.click();flushSync();expect(input.valueAsNumber).toBe(0.5);expect(buttons[1]!.disabled).toBe(true);expect(changed).toHaveBeenCalledTimes(2);
+    buttons[1]!.click();expect(changed).toHaveBeenCalledTimes(2);
+    expect(root.querySelector(`label[for="${input.id}"]`)?.textContent).toContain("Rate");
+    expect(document.getElementById(input.getAttribute("aria-describedby")!)?.textContent).toBe("Sampling fraction");
+  });
+  it("retains invalid typed values for native validity and submits through FormData",()=>{
+    const root=render(Consumer);const input=root.querySelector("input")!;edit(input,"20");
+    expect(input.validity.rangeOverflow).toBe(true);expect(input.value).toBe("20");
+    expect(new FormData(root.querySelector("form")!).get("units")).toBe("20");
+    expect(root.querySelector("[data-bound-value]")?.textContent).toBe("20");
+  });
+  it("synchronizes cleared controlled values and native form resets",async()=>{
+    const root=render(Consumer);const input=root.querySelector("input")!;edit(input,"7");
+    [...root.querySelectorAll<HTMLButtonElement>('button')].find(button=>button.textContent?.trim()==="Clear externally")!.click();flushSync();
+    expect(root.querySelector("[data-bound-value]")?.textContent).toBe("empty");expect(input.value).toBe("");
+    root.querySelector("form")!.reset();await new Promise<void>(resolve=>setTimeout(resolve,0));await tick();flushSync();
+    expect(input.value).toBe("3");expect(root.querySelector("[data-bound-value]")?.textContent).toBe("3");
+  });
+  it("does not change a readonly or disabled value",()=>{
+    for(const props of [{readonly:true},{disabled:true}]) {
+      const changed=vi.fn();const root=render(NumberField,{label:"Managed",value:3,onvaluechange:changed,...props});
+      for(const button of root.querySelectorAll("button")){expect(button.disabled).toBe(true);button.click();}
+      expect(changed).not.toHaveBeenCalled();expect(root.querySelector("input")!.value).toBe("3");
+    }
+  });
+});

package/vendor/ds/kits/base/test/one-time-code-input.test.ts

@@ -0,0 +1,123 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import SpecializedEntryConsumer from "./fixtures/SpecializedEntryConsumer.svelte";
+import SpecializedEntryContractFailures from "./fixtures/SpecializedEntryContractFailures.svelte";
+import {
+  OneTimeCodeInput,
+  oneTimeCodeInput,
+} from "./fixtures/specialized-entry-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function segments(root: HTMLElement): HTMLInputElement[] {
+  return [...root.querySelectorAll<HTMLInputElement>("[data-otp-segment]")];
+}
+
+function paste(target: HTMLInputElement, text: string): void {
+  const event = new Event("paste", { bubbles: true, cancelable: true });
+  Object.defineProperty(event, "clipboardData", {
+    value: { getData: () => text },
+  });
+  target.dispatchEvent(event);
+  flushSync();
+}
+
+function otpPasteFailures(root: HTMLElement): string[] {
+  const controls = [...root.querySelectorAll<HTMLInputElement>('input[maxlength="1"]')];
+  if (controls.length === 0) return ["OTP has no one-character segments"];
+  paste(controls[0]!, "123456");
+  return controls.map(({ value }) => value).join("") === "123456"
+    ? []
+    : ["pasted OTP is not distributed across segments"];
+}
+
+describe("the Base OneTimeCodeInput", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(OneTimeCodeInput).toBeDefined();
+    expect(oneTimeCodeInput).toBeTypeOf("function");
+  });
+
+  it("composes a visibly named native group of one-character inputs", () => {
+    const root = rendered(render(OneTimeCodeInput, {
+      label: "Verification code",
+      name: "code",
+      length: 6,
+      required: true,
+    }));
+    const controls = segments(root);
+
+    expect(root.tagName).toBe("FIELDSET");
+    expect(root.querySelector(":scope > legend")?.textContent).toBe("Verification code");
+    expect(controls).toHaveLength(6);
+    expect(controls.every(({ maxLength }) => maxLength === 1)).toBe(true);
+    expect(controls.every(({ inputMode }) => inputMode === "numeric")).toBe(true);
+    expect(controls.every(({ required }) => required)).toBe(true);
+    expect(controls.map((control) => control.getAttribute("aria-label"))).toEqual([
+      "Digit 1 of 6", "Digit 2 of 6", "Digit 3 of 6",
+      "Digit 4 of 6", "Digit 5 of 6", "Digit 6 of 6",
+    ]);
+    controls[0]?.focus();
+    expect(document.activeElement).toBe(controls[0]);
+  });
+
+  it("distributes a pasted code, updates its form value, and reports completion", () => {
+    const oncomplete = vi.fn();
+    const form = rendered(render(SpecializedEntryConsumer, { otpOncomplete: oncomplete }));
+    const root = form.querySelector<HTMLElement>("[data-one-time-code-input]")!;
+    const controls = segments(root);
+
+    paste(controls[0]!, "12 34-56");
+
+    expect(controls.map(({ value }) => value).join("")).toBe("123456");
+    expect(root.querySelector<HTMLInputElement>('input[type="hidden"]')?.value).toBe("123456");
+    expect(new FormData(form as HTMLFormElement).get("verificationCode")).toBe("123456");
+    expect(document.activeElement).toBe(controls[5]);
+    expect(oncomplete).toHaveBeenCalledWith("123456");
+    expect(otpPasteFailures(root)).toEqual([]);
+  });
+
+  it("advances on entry and supports Backspace and arrow focus movement", () => {
+    const root = rendered(render(OneTimeCodeInput, { label: "Code", length: 4 }));
+    const controls = segments(root);
+
+    controls[0]!.value = "7";
+    controls[0]!.dispatchEvent(new InputEvent("input", { bubbles: true }));
+    flushSync();
+    expect(document.activeElement).toBe(controls[1]);
+
+    controls[1]!.dispatchEvent(new KeyboardEvent("keydown", { key: "Backspace", bubbles: true }));
+    expect(document.activeElement).toBe(controls[0]);
+    controls[0]!.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    expect(document.activeElement).toBe(controls[1]);
+    controls[1]!.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+    expect(document.activeElement).toBe(controls[0]);
+  });
+
+  it("wears token-backed appearance and inherits a nested appearance scope", () => {
+    const root = rendered(render(OneTimeCodeInput, { label: "Code", length: 4 }));
+    const styles = oneTimeCodeInput();
+    const nested = rendered(render(SpecializedEntryConsumer, {}))
+      .querySelector<HTMLElement>('[data-appearance-scope] [data-one-time-code-input]')!;
+
+    expect(classes(root)).toEqual(classesOf(styles.root()));
+    expect(classes(root.querySelector("[data-otp-list]")!)).toEqual(classesOf(styles.list()));
+    expect(classes(segments(root)[0]!)).toEqual(classesOf(styles.segment()));
+    expect(classes(segments(root)[0]!).has("h-[var(--reddb-spatial-control-height-md)]")).toBe(true);
+    expect(root.hasAttribute("data-theme")).toBe(false);
+    expect(root.hasAttribute("data-color-scheme")).toBe(false);
+    expect(root.hasAttribute("data-density")).toBe(false);
+    expect(nested.hasAttribute("data-theme")).toBe(false);
+    expect(nested.hasAttribute("data-color-scheme")).toBe(false);
+    expect(nested.hasAttribute("data-density")).toBe(false);
+  });
+});
+
+describe("the deliberately failing one-time-code fixture", () => {
+  it("diagnoses an OTP control that breaks paste", () => {
+    const root = rendered(render(SpecializedEntryContractFailures, {
+      failure: "broken-otp-paste",
+    }));
+    expect(otpPasteFailures(root)).toEqual([
+      "pasted OTP is not distributed across segments",
+    ]);
+  });
+});

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

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { Pagination, pagination as paginationAppearance } from "@reddb-io/design-system/base";
+import WayfindingContractFailures from "./fixtures/WayfindingContractFailures.svelte";
+import WayfindingConsumer from "./fixtures/WayfindingConsumer.svelte";
+import { classes, render } from "./mount";
+
+describe("the deliberately failing Pagination fixture", () => {
+  it("demonstrates pagination without accessible page labels", () => {
+    const root = render(WayfindingContractFailures, { failure: "pagination-labels" });
+    const pages = [...root.querySelectorAll<HTMLAnchorElement>("a")];
+
+    expect(pages.map((page) => page.getAttribute("aria-label"))).toEqual([null, null]);
+  });
+});
+
+describe("the Base Pagination", () => {
+  it("names every page and announces the current page without colour", () => {
+    const root = render(Pagination, {
+      pages: [
+        { page: 1, href: "?page=1" },
+        { page: 2, href: "?page=2", current: true },
+        { page: 3, href: "?page=3" },
+      ],
+    });
+    const links = [...root.querySelectorAll<HTMLAnchorElement>("a")];
+
+    expect(links.map((link) => link.getAttribute("aria-label"))).toEqual([
+      "Go to page 1",
+      "Page 2, current page",
+      "Go to page 3",
+    ]);
+    expect(links[1]!.getAttribute("aria-current")).toBe("page");
+    links[2]!.focus();
+    expect(document.activeElement).toBe(links[2]);
+  });
+
+  it("keeps token appearance live inside a nested appearance scope", () => {
+    const scope = render(WayfindingConsumer).querySelector<HTMLElement>("[data-wayfinding-scope]")!;
+    const root = scope.querySelector<HTMLElement>("[data-pagination]")!;
+    const current = root.querySelector<HTMLElement>('[aria-current="page"]')!;
+
+    expect(classes(root)).toEqual(new Set(paginationAppearance().root().split(/\s+/)));
+    expect(classes(current).has("h-[var(--reddb-spatial-control-height-sm)]")).toBe(true);
+    expect(scope.getAttribute("data-density")).toBe("compact");
+    expect(root.hasAttribute("data-theme")).toBe(false);
+    expect(root.hasAttribute("data-color-scheme")).toBe(false);
+    expect(root.hasAttribute("data-contrast")).toBe(false);
+    expect(root.hasAttribute("data-density")).toBe(false);
+  });
+});

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

@@ -0,0 +1,95 @@
+import { act, createElement as h } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { flushSync } from "svelte";
+import SveltePhoneInput from "../src/PhoneInput.svelte";
+import { PhoneInput as ReactPhoneInput } from "../react/src/PhoneInput";
+import { render } from "./mount";
+import { bindPhoneEditing, phoneCountries, phoneCountryOptions, phoneProblem, phoneSeparatorDeletion, phoneState } from "../src/core/phone-input";
+import type { PhoneInputContract } from "../src/core/contracts/phoneinput";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+let react: Root | undefined;
+afterEach(async () => { if (react) await act(() => react?.unmount()); react = undefined; document.querySelectorAll("form[data-phone-test]").forEach(node => node.remove()); });
+describe("portable country-aware phone contract", () => {
+  it.each([
+    ["BR", "11999991234", "(11) 99999-1234", "+5511999991234"],
+    ["BR", "1133334444", "(11) 3333-4444", "+551133334444"],
+    ["US", "2025550123", "(202) 555-0123", "+12025550123"],
+    ["PT", "912345678", "912 345 678", "+351912345678"],
+    ["GB", "02079460958", "020 7946 0958", "+442079460958"],
+    ["BR", "１１９９９９９１２３４", "(11) 99999-1234", "+5511999991234"],
+  ] as const)("formats %s without leaking mask or trunk prefixes to the value", (country, raw, display, value) => {
+    expect(phoneState(raw, country)).toMatchObject({ country, display, value, possible: true });
+    expect(phoneState(value, country).value).toBe(value);
+  });
+  it("infers international paste, rejects incomplete/long/extension numbers and respects restrictions", () => {
+    expect(phoneState("+12025550123", "BR")).toMatchObject({ country: "US", display: "(202) 555-0123", value: "+12025550123", possible: true });
+    expect(phoneState("+442079460958", "US").international).toBe("+44 20 7946 0958");
+    for (const text of ["+", "+5", "+9991234", "11999", "119999912341234567890", "11999991234 ext 123"]) {
+      const state = phoneState(text, "BR");
+      expect(state.possible, text).toBe(false);
+      expect(phoneProblem(state, ["BR"], false, "Required", "Invalid"), text).toBe("Invalid");
+    }
+    expect(phoneProblem(phoneState("", "BR"), ["BR"], false, "Required", "Invalid")).toBe("");
+    expect(phoneProblem(phoneState("", "BR"), ["BR"], true, "Required", "Invalid")).toBe("Required");
+    expect(phoneProblem(phoneState("+12025550123", "BR"), ["BR"], true, "Required", "Invalid")).toBe("Invalid");
+    expect(() => phoneCountries([])).toThrow(RangeError);
+    const options = phoneCountryOptions(["BR", "US"], "pt-BR");
+    expect(options.find(option => option.value === "BR")).toMatchObject({ label: "🇧🇷 +55", description: "Brasil" });
+    expect(options.find(option => option.value === "US")?.keywords).toContain("United States");
+  });
+  it("preserves selection, deletes digits across separators and waits for IME composition", () => {
+    const node = document.createElement("input"); node.type = "tel";
+    const changed = vi.fn(); const binding = bindPhoneEditing(node, phoneState("11999991234", "BR"), changed);
+    node.value = "(11) 99999-1234"; node.setSelectionRange(5, 5);
+    const before = new InputEvent("beforeinput", { inputType: "deleteContentBackward", cancelable: true }); node.dispatchEvent(before);
+    expect(before.defaultPrevented).toBe(true); expect(changed.mock.lastCall?.[0].value).toBe("+551999991234");
+    expect(node.selectionStart).toBe(2);
+    expect(phoneSeparatorDeletion("(11) 99999-1234", "deleteContentForward", 3, 3)).toEqual({ text: "1199991234", digits: 2 });
+    changed.mockClear(); node.dispatchEvent(new CompositionEvent("compositionstart")); node.value = "１１９９９９９１２３４"; node.dispatchEvent(new InputEvent("input", { isComposing: true }));
+    expect(changed).not.toHaveBeenCalled(); expect(node.value).toBe("１１９９９９９１２３４");
+    node.dispatchEvent(new CompositionEvent("compositionend")); expect(changed.mock.lastCall?.[0].value).toBe("+5511999991234");
+    binding.destroy();
+  });
+});
+
+for (const flavor of ["Svelte", "React"] as const) describe(`${flavor} phone forms`, () => {
+  async function mount(props: PhoneInputContract, changed = vi.fn()) {
+    const form = document.createElement("form"); form.id = "phone-test"; form.dataset.phoneTest = ""; document.body.append(form);
+    let root: HTMLElement;
+    if (flavor === "Svelte") root = render(SveltePhoneInput, { ...props, form: form.id, onvaluechange: changed });
+    else { root = document.createElement("div"); document.body.append(root); await act(() => { react = createRoot(root); react.render(h(ReactPhoneInput, { ...props, form: form.id, onValueChange: changed })); }); }
+    const input = root.querySelector<HTMLInputElement>('input[type="tel"]')!;
+    async function edit(text: string) { await act(() => { input.value = text; input.setSelectionRange(text.length, text.length); input.dispatchEvent(new InputEvent("input", { bubbles: true })); flushSync(); }); }
+    return { form, root, input, edit, changed };
+  }
+  it("shows a national mask but submits exactly one unmasked international value", async () => {
+    const { form, root, input, edit, changed } = await mount({ label: "Phone", name: "phone", defaultCountry: "BR", defaultValue: "+5511999991234", help: "Contact details", required: true });
+    expect(input.value).toBe("(11) 99999-1234"); expect(input.name).toBe("");
+    expect(new FormData(form).getAll("phone")).toEqual(["+5511999991234"]);
+    expect(document.getElementById(input.getAttribute("aria-describedby")!)?.textContent).toBe("Contact details");
+    await edit("+12025550123"); expect(input.value).toBe("(202) 555-0123"); expect(changed).toHaveBeenLastCalledWith("+12025550123");
+    expect(root.querySelector('[data-search-select-trigger]')?.getAttribute("aria-label")).toContain("United States");
+    expect(new FormData(form).getAll("phone")).toEqual(["+12025550123"]); expect(input.checkValidity()).toBe(true);
+  });
+  it("blocks incomplete/restricted numbers, keeps canonical drafts and resets an externally owned form", async () => {
+    const { form, input, edit, changed } = await mount({ label: "Phone", name: "phone", defaultCountry: "BR", countries: ["BR", "PT"], defaultValue: "+5511999991234", required: true });
+    await edit("11999"); expect(input.checkValidity()).toBe(false); expect(new FormData(form).get("phone")).toBe("+5511999");
+    await edit("+12025550123"); expect(input.checkValidity()).toBe(false); expect(new FormData(form).get("phone")).toBe("+12025550123");
+    await edit(""); expect(new FormData(form).get("phone")).toBe(""); expect(input.checkValidity()).toBe(false);
+    await act(async () => { form.reset(); await new Promise(resolve => setTimeout(resolve, 5)); flushSync(); });
+    expect(input.value).toBe("(11) 99999-1234"); expect(new FormData(form).get("phone")).toBe("+5511999991234"); expect(changed).toHaveBeenLastCalledWith("+5511999991234");
+  });
+  it("renders saved phones as selectable text and omits disabled fields from submission", async () => {
+    const saved = await mount({ label: "Saved phone", name: "phone", value: "+5511999991234", presentation: "text", sourceLabel: "Contacts API" });
+    expect(saved.root.querySelector('input:not([type="hidden"])')).toBeNull(); expect(saved.root.querySelector("button")).toBeNull();
+    expect(saved.root.querySelector("[data-phone-value]")?.textContent).toContain("+55 11 99999 1234");
+    expect(new FormData(saved.form).get("phone")).toBe("+5511999991234");
+  });
+  it("disables both editing controls and omits its named field", async () => {
+    const { form, root, input, changed } = await mount({ label: "Disabled phone", name: "phone", defaultValue: "+5511999991234", disabled: true });
+    expect(input.disabled).toBe(true); expect(root.querySelector<HTMLButtonElement>("button")?.disabled).toBe(true);
+    expect(new FormData(form).has("phone")).toBe(false); expect(changed).not.toHaveBeenCalled();
+  });
+});

package/vendor/ds/kits/base/test/phone-mockup.test.ts

@@ -0,0 +1,51 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_PHONE_MOCKUP_RATIO,
+  PhoneMockup,
+  phoneMockup as phoneMockupAppearance,
+} from "../src/index";
+import MockupContractFailures from "./fixtures/MockupContractFailures.svelte";
+import { classes, classesOf, render, rendered, styleOf } from "./mount";
+
+const queuePreview = () =>
+  createRawSnippet(() => ({
+    render: () =>
+      '<nav aria-label="Phone queue"><button type="button">Retry job</button></nav>',
+  }));
+
+describe("the deliberately failing frame fixture", () => {
+  it("swallows the accessible content when the whole frame is hidden", () => {
+    const root = render(MockupContractFailures, { failure: "swallowed-content" });
+    const article = root.querySelector<HTMLElement>('article[aria-label="Deployment preview"]')!;
+
+    expect(article.closest('[aria-hidden="true"]')).not.toBeNull();
+  });
+});
+
+describe("the Base PhoneMockup", () => {
+  it("keeps caller landmarks and focus outside its decorative phone body", () => {
+    const element = rendered(
+      render(PhoneMockup, { class: "max-w-xs", children: queuePreview() }),
+    );
+    const chrome = element.querySelector<HTMLElement>("[data-phone-mockup-chrome]")!;
+    const viewport = element.querySelector<HTMLElement>("[data-phone-mockup-viewport]")!;
+    const navigation = viewport.querySelector<HTMLElement>('nav[aria-label="Phone queue"]')!;
+    const button = navigation.querySelector<HTMLButtonElement>("button")!;
+
+    expect(element.getAttribute("role")).toBe("presentation");
+    expect(element.hasAttribute("aria-hidden")).toBe(false);
+    expect(chrome.getAttribute("aria-hidden")).toBe("true");
+    expect(chrome.querySelector("a, button, input, select, textarea")).toBeNull();
+    expect(navigation.getAttribute("aria-label")).toBe("Phone queue");
+    button.focus();
+    expect(document.activeElement).toBe(button);
+    expect(styleOf(viewport, "aspect-ratio")).toBe(`${DEFAULT_PHONE_MOCKUP_RATIO} / 1`);
+    expect(classes(element)).toEqual(
+      classesOf(phoneMockupAppearance().root({ class: "max-w-xs" })),
+    );
+    expect(element.hasAttribute("data-theme")).toBe(false);
+    expect(element.hasAttribute("data-color-scheme")).toBe(false);
+    expect(element.hasAttribute("data-density")).toBe(false);
+  });
+});