@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/app/test/product-list.test.ts

@@ -0,0 +1,95 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import ProductList from "../src/composites/ProductList.svelte";
+import { productList } from "../src/composites/product-list.variants";
+import ProductCatalogueConsumer from "./fixtures/ProductCatalogueConsumer.svelte";
+import ProductCatalogueContractFailures from "./fixtures/ProductCatalogueContractFailures.svelte";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the deliberately failing product list fixture", () => {
+  it("has neither a collection name nor a name for its icon-only action", () => {
+    const root = render(ProductCatalogueContractFailures);
+    const list = root.querySelector("[data-unnamed-product-list]")!;
+    const action = root.querySelector("[data-unnamed-product-action]")!;
+
+    expect(list.getAttribute("aria-label")).toBeNull();
+    expect(list.getAttribute("aria-labelledby")).toBeNull();
+    expect(action.textContent?.trim()).toBe("");
+    expect(action.getAttribute("aria-label")).toBeNull();
+  });
+});
+
+describe("ProductList", () => {
+  it("composes canonical GridList and Card contracts into a named product collection", () => {
+    const actions = createRawSnippet(() => ({
+      render: () => '<button type="button">Add Field notes to basket</button>',
+    }));
+    const list = rendered(
+      render(ProductList, {
+        label: "Stationery",
+        columns: 3,
+        items: [
+          {
+            id: "field-notes",
+            name: "Field notes",
+            href: "/products/field-notes",
+            description: "A pocket notebook.",
+            price: "$12",
+            actions,
+          },
+          { id: "desk-pad", name: "Desk pad", price: "$18" },
+        ],
+      }),
+    );
+
+    expect(list.matches("ul[data-grid-list][data-product-list]")).toBe(true);
+    expect(list.getAttribute("aria-label")).toBe("Stationery");
+    expect(list.querySelectorAll("[data-card][data-product-list-item]")).toHaveLength(2);
+    expect(list.querySelector("a")?.getAttribute("href")).toBe("/products/field-notes");
+    expect(list.querySelector("a")?.textContent).toBe("Field notes");
+    const item = list.querySelector("[data-product-list-item]")!;
+    expect(item.getAttribute("aria-labelledby")).toBe(
+      item.querySelector("[data-product-list-name]")?.id,
+    );
+  });
+
+  it("preserves native product-link and action focus order", () => {
+    const actions = createRawSnippet(() => ({
+      render: () => '<button type="button">Add to basket</button>',
+    }));
+    const list = rendered(
+      render(ProductList, {
+        label: "Stationery",
+        items: [{ id: "field-notes", name: "Field notes", href: "/notes", actions }],
+      }),
+    );
+    const controls = [...list.querySelectorAll<HTMLElement>("a, button")];
+
+    expect(controls.map((control) => control.textContent)).toEqual([
+      "Field notes",
+      "Add to basket",
+    ]);
+    for (const control of controls) {
+      control.focus();
+      expect(document.activeElement).toBe(control);
+    }
+  });
+
+  it("routes collection rhythm through Density and inherits nested appearance", () => {
+    const root = render(ProductCatalogueConsumer);
+    const list = root.querySelector<HTMLElement>("[data-product-list]")!;
+
+    expect(classes(list)).toEqual(classesOf(productList().root()));
+    expect(classes(list).has("gap-[var(--reddb-spatial-gap-md)]")).toBe(true);
+    expect(list.closest('[data-theme="base"][data-color-scheme="dark"][data-density="compact"]'))
+      .not.toBeNull();
+    expect(list.hasAttribute("data-theme")).toBe(false);
+    expect(list.hasAttribute("data-color-scheme")).toBe(false);
+    expect(list.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("ships showcase, consumer, distributed export, and readiness evidence", () => {
+    expectLayoutReadiness("product-list", "ProductList");
+  });
+});

package/vendor/ds/kits/app/test/product-overview.test.ts

@@ -0,0 +1,92 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import ProductOverview from "../src/composites/ProductOverview.svelte";
+import { productOverview } from "../src/composites/product-overview.variants";
+import ProductCatalogueConsumer from "./fixtures/ProductCatalogueConsumer.svelte";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const media = createRawSnippet(() => ({
+  render: () => '<img src="/field-notes.jpg" alt="Black field-notes book">',
+}));
+
+describe("ProductOverview", () => {
+  it("composes canonical heading and stack contracts without owning product copy", () => {
+    const children = createRawSnippet(() => ({ render: () => "<p>Dot-grid paper.</p>" }));
+    const actions = createRawSnippet(() => ({
+      render: () => '<button type="button">Add to basket</button>',
+    }));
+    const overview = rendered(
+      render(ProductOverview, {
+        title: "Field notes",
+        description: "A pocket notebook.",
+        price: "$12",
+        media,
+        children,
+        actions,
+      }),
+    );
+
+    expect(overview.matches("section[data-product-overview][aria-labelledby]")).toBe(true);
+    expect(overview.querySelector("[data-section-heading] h2")?.textContent).toBe("Field notes");
+    expect(overview.getAttribute("aria-labelledby")).toBe(
+      overview.querySelector("[data-section-heading] h2")?.id,
+    );
+    expect(overview.querySelector("[data-product-overview-media] img")?.getAttribute("alt")).toBe(
+      "Black field-notes book",
+    );
+    expect(overview.querySelector("[data-product-overview-price]")?.textContent).toBe("$12");
+    expect(overview.querySelector("[data-product-overview-body]")?.textContent).toContain(
+      "Dot-grid paper.",
+    );
+  });
+
+  it("keeps caller-owned actions in native focus order", () => {
+    const actions = createRawSnippet(() => ({
+      render: () =>
+        '<span><a href="/shipping">Shipping</a><button type="button">Add to basket</button></span>',
+    }));
+    const overview = rendered(render(ProductOverview, { title: "Field notes", media, actions }));
+    const controls = [...overview.querySelectorAll<HTMLElement>("a, button")];
+
+    expect(controls.map((control) => control.textContent)).toEqual(["Shipping", "Add to basket"]);
+    for (const control of controls) {
+      control.focus();
+      expect(document.activeElement).toBe(control);
+    }
+  });
+
+  it("routes layout rhythm through Density and inherits nested appearance", () => {
+    const root = render(ProductCatalogueConsumer);
+    const overview = root.querySelector<HTMLElement>("[data-product-overview]")!;
+
+    expect(classes(overview)).toEqual(classesOf(productOverview().root()));
+    expect(classes(overview).has("gap-[var(--reddb-spatial-layout-gap-md)]")).toBe(true);
+    // Its two columns step on its own width, never the window's (ADR 0021).
+    expect([...classes(overview)].some((name) => /^(?:max-)?(?:sm|md|lg|xl):/.test(name))).toBe(false);
+    expect(overview.closest('[data-theme="base"][data-color-scheme="dark"][data-density="compact"]'))
+      .not.toBeNull();
+    expect(overview.hasAttribute("data-theme")).toBe(false);
+    expect(overview.hasAttribute("data-color-scheme")).toBe(false);
+    expect(overview.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("ships showcase, consumer, distributed export, and readiness evidence", () => {
+    expectLayoutReadiness("product-overview", "ProductOverview");
+  });
+});
+
+describe("ProductOverview image", () => {
+  it("renders the product image through the Base Image, with its priority", () => {
+    const overview = rendered(
+      render(ProductOverview, {
+        title: "Field notes",
+        image: { src: "/notes.webp", alt: "Field-notes book", width: 800, height: 800 },
+        priority: true,
+      }),
+    );
+    const element = overview.querySelector("[data-product-overview-media] img")!;
+    expect(element.getAttribute("width")).toBe("800");
+    expect(element.getAttribute("fetchpriority")).toBe("high");
+  });
+});

package/vendor/ds/kits/app/test/product-quickview.test.ts

@@ -0,0 +1,116 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import ProductQuickview from "../src/composites/ProductQuickview.svelte";
+import { productQuickview } from "../src/composites/product-quickview.variants";
+import ProductCatalogueConsumer from "./fixtures/ProductCatalogueConsumer.svelte";
+import ProductCatalogueContractFailures from "./fixtures/ProductCatalogueContractFailures.svelte";
+import { labelInName } from "./label-in-name";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, click, render, rendered } from "./mount";
+
+describe("the deliberately failing product quickview fixture", () => {
+  it("dismisses without restoring focus to the control that opened it", () => {
+    const root = render(ProductCatalogueContractFailures);
+    const trigger = root.querySelector<HTMLButtonElement>("[data-broken-quickview-trigger]")!;
+    const dialog = root.querySelector<HTMLDialogElement>("[data-broken-quickview]")!;
+    const action = root.querySelector<HTMLButtonElement>("[data-broken-quickview-action]")!;
+
+    trigger.focus();
+    click(trigger);
+    expect(document.activeElement).toBe(action);
+    dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+
+    expect(dialog.open).toBe(false);
+    expect(document.activeElement).not.toBe(trigger);
+  });
+});
+
+describe("ProductQuickview", () => {
+  it("composes the canonical Dialog labeling and focus-return lifecycle", () => {
+    const children = createRawSnippet(() => ({
+      render: () => '<button type="button" data-buy>Add to basket</button>',
+    }));
+    const root = render(ProductQuickview, {
+      triggerLabel: "Quick view Field notes",
+      title: "Field notes",
+      description: "A pocket notebook.",
+      children,
+    });
+    const wrapper = rendered(root);
+    const trigger = root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!;
+    const dialog = root.querySelector<HTMLDialogElement>("dialog")!;
+
+    expect(wrapper.matches("[data-product-quickview]")).toBe(true);
+    expect(trigger.getAttribute("aria-label")).toBe("Quick view Field notes");
+    trigger.focus();
+    click(trigger);
+    expect(document.activeElement).toBe(root.querySelector("[data-buy]"));
+    dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    expect(dialog.open).toBe(false);
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("names a custom trigger with a label that starts with the words it shows (WCAG 2.5.3)", () => {
+    const shown = (text: string) => createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
+    const named = render(ProductQuickview, {
+      triggerLabel: "Quick view Field notes",
+      title: "Field notes",
+      trigger: shown("Quick view"),
+    }).querySelector<HTMLButtonElement>("[data-dialog-trigger]")!;
+    const plain = render(ProductQuickview, {
+      triggerLabel: "Quick view Field notes",
+      title: "Field notes",
+    }).querySelector<HTMLButtonElement>("[data-dialog-trigger]")!;
+    const mismatched = render(ProductQuickview, {
+      triggerLabel: "Quick view Field notes",
+      title: "Field notes",
+      trigger: shown("Preview Field notes"),
+    }).querySelector<HTMLButtonElement>("[data-dialog-trigger]")!;
+
+    expect(named.getAttribute("aria-label")).toBe("Quick view Field notes");
+    expect(labelInName(named)).toBe(true);
+    expect(plain.textContent?.trim()).toBe("Quick view Field notes");
+    expect(labelInName(plain)).toBe(true);
+    // The shape wave 6B removed from the showcase: the visible words are not in the name.
+    expect(labelInName(mismatched)).toBe(false);
+  });
+
+  it("contains Tab navigation within the quickview", () => {
+    const children = createRawSnippet(() => ({
+      render: () =>
+        '<span><button type="button" data-first-action>Choose size</button><button type="button" data-last-action>Add</button></span>',
+    }));
+    const root = render(ProductQuickview, {
+      triggerLabel: "Quick view Field notes",
+      title: "Field notes",
+      children,
+    });
+    click(root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!);
+    const dialog = root.querySelector<HTMLDialogElement>("dialog")!;
+    const close = root.querySelector<HTMLButtonElement>("[data-dialog-close]")!;
+    const last = root.querySelector<HTMLButtonElement>("[data-last-action]")!;
+
+    last.focus();
+    dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", bubbles: true }));
+    expect(document.activeElement).toBe(close);
+  });
+
+  it("routes quickview rhythm through Density and inherits nested appearance", () => {
+    const root = render(ProductCatalogueConsumer);
+    const quickview = root.querySelector<HTMLElement>("[data-product-quickview]")!;
+
+    expect(classes(quickview)).toEqual(classesOf(productQuickview().root()));
+    expect(classes(quickview.querySelector("[data-product-quickview-content]")!).has(
+      "gap-[var(--reddb-spatial-layout-gap-md)]",
+    )).toBe(true);
+    expect(quickview.closest('[data-theme="base"][data-color-scheme="dark"][data-density="compact"]'))
+      .not.toBeNull();
+    expect(quickview.hasAttribute("data-theme")).toBe(false);
+    expect(quickview.hasAttribute("data-color-scheme")).toBe(false);
+    expect(quickview.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("ships showcase, consumer, distributed export, and readiness evidence", () => {
+    expectLayoutReadiness("product-quickview", "ProductQuickview");
+  });
+});

package/vendor/ds/kits/app/test/react-consumer.tsx

@@ -0,0 +1,36 @@
+import { createRef } from "react";
+import { ActionPanel, ActivityFeed, ApplicationShell, BottomNavigation, CardHeading, CategoryFilter, CategoryPreview, ChatMessage, CheckoutForm, CommandPalette, ContextMenu, Diff, Filter, Incentive, ListRow, Menubar, MultiColumnLayout, NavItem, NodeBadge, OrderHistory, OrderSummary, PageHeading, Pill, ProductFeature, ProductList, ProductOverview, ProductQuickview, Review, ShoppingCart, SidebarLayout, SidebarNavigation, SidebarPanel, SidebarRail, SpeedDial, SplitView, StoreNavigation, TaskList, Toolbar, type TaskListItem, type ShoppingCartItem, type CheckoutSection } from "../react/src";
+const items = [{ id: "requests", label: "Requests", href: "/requests" }];
+const tasks: readonly TaskListItem[] = [{ id: "replay", title: "Replay", state: "running", progress: 0 }];
+const cart: readonly ShoppingCartItem[] = [{id:"api",name:"API",price:"$42",quantity:1,media:<span>API</span>}];
+const sections: readonly CheckoutSection[] = [{legend:"Billing",fields:[{name:"company",label:"Company",inputmode:"text",autocomplete:"organization"}]}];
+export const nativeApp = <ApplicationShell embedded header={<span>Workspace</span>}><SidebarLayout main={false} navigation={items} currentId="requests" sidebar={({ item, close }) => <SidebarPanel title={item?.label ?? "Requests"} toolbar={<button onClick={close}>Back</button>} />}>
+ <PageHeading title="Requests" context={<span>Workspace</span>} actions={<button>New request</button>} />
+ <CardHeading title="Traffic" /><ActionPanel title="Retention" actions={<button>Save</button>} />
+ <ActivityFeed items={[]} /><BottomNavigation label="Workspace" items={items} currentId="requests" />
+ <CategoryFilter legend="Services" options={[]} onValueChange={values=>values.map(value=>value.trim())} />
+ <CategoryPreview name="Compute" href="/compute" media={0} /><ChatMessage author="Ana" avatarFallback="AN" datetime="2026-10-20" time="Now">Hello</ChatMessage>
+ <CheckoutForm sections={sections} submitLabel="Continue" /><CommandPalette triggerLabel="Commands" contentLabel="Commands" label="Search" onSelect={command=>command.id.trim()} />
+ <ContextMenu triggerLabel="Actions" contentLabel="Actions" /><Diff rows={[]} /><Filter legend="Environment" options={[]} onValueChange={value=>value.trim()} />
+ <Incentive title="Faster" icon={<span>✓</span>} /><ListRow href="/trace" title="Trace" /><Menubar label="Editor" />
+ <MultiColumnLayout start={<span>Filters</span>} end={<span>Detail</span>}>Requests</MultiColumnLayout><NavItem href="/requests" current="page" />
+ <NodeBadge name="sao-01" /><OrderHistory title="Invoices" caption="History" orders={[]} /><OrderSummary title="Usage" lines={[]} totalLabel="Total" total="$0" />
+ <Pill onDismiss={()=>{}}>Production</Pill><ProductFeature title="Tracing" media={<span>Trace</span>} /><ProductList label="Services" items={[]} />
+ <ProductOverview title="API" /><ProductQuickview triggerLabel="Inspect" title="API" actions={({close})=><button onClick={close}>Done</button>} />
+ <Review author="Ana" avatarFallback="AN" rating={4}>Useful tracing</Review><ShoppingCart title="Resources" items={cart} totalLabel="Total" total="$42" onQuantityChange={(id, quantity)=>`${id}: ${quantity.toFixed()}`} />
+ <SidebarNavigation label="Workspace" items={items} currentId="requests" /><SidebarRail label="Workspace" items={items} onSelect={id=>id.trim()} />
+ <SpeedDial triggerLabel="Create" contentLabel="Resources" /><SplitView fraction={0.5} onFractionChange={fraction=>fraction.toFixed(2)} />
+ <StoreNavigation label="Workspace" items={items} currentId="requests" /><TaskList label="Tasks" items={tasks} actions={item=><button>{item.id}</button>} /><Toolbar label="Actions" />
+</SidebarLayout></ApplicationShell>;
+export const refs = <><Pill ref={createRef<HTMLSpanElement>()} /><NodeBadge name="sao" ref={createRef<HTMLSpanElement>()} /><CheckoutForm ref={createRef<HTMLFormElement>()} /><CategoryFilter legend="Services" options={[]} ref={createRef<HTMLFieldSetElement>()} /><SplitView ref={createRef<HTMLDivElement>()} /></>;
+// @ts-expect-error A category image is a required content seam.
+const missingMedia = <CategoryPreview name="Compute" href="/compute" />;
+// @ts-expect-error Actions remain required for an action panel.
+const missingAction = <ActionPanel title="Retention" />;
+// @ts-expect-error Task lifecycle names follow the canonical vocabulary.
+const invalidTask = <TaskList label="Tasks" items={[{id:"x",title:"Replay",state:"done"}]} />;
+// @ts-expect-error Native React event attributes keep their real event payload.
+const invalidEvent = <CheckoutForm onSubmit={(value: string)=>value.trim()} />;
+// @ts-expect-error A span ref cannot target a form.
+const invalidRef = <CheckoutForm ref={createRef<HTMLSpanElement>()} />;
+void [missingMedia, missingAction, invalidTask, invalidEvent, invalidRef];

package/vendor/ds/kits/app/test/review.test.ts

@@ -0,0 +1,84 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import Review from "../src/composites/Review.svelte";
+import { review } from "../src/composites/review.variants";
+import SocialContractFailures from "./fixtures/SocialContractFailures.svelte";
+import SocialSurfacesConsumer from "./fixtures/SocialSurfacesConsumer.svelte";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const body = createRawSnippet(() => ({ render: () => "<p>Clear and dependable.</p>" }));
+const actions = createRawSnippet(() => ({
+  render: () => '<button type="button">Mark helpful</button>',
+}));
+
+describe("the deliberately failing Review fixture", () => {
+  it("demonstrates a rating conveyed by colour alone", () => {
+    const broken = rendered(render(SocialContractFailures, { failure: "colour-only-rating" }));
+    const rating = broken.querySelector<HTMLElement>('[aria-label="Rating"]')!;
+
+    expect(rating.textContent).toBe("★★★★★");
+    expect(rating.querySelector("input, meter, output")).toBeNull();
+    expect(rating.textContent).not.toMatch(/\d/);
+  });
+});
+
+describe("Review", () => {
+  it("composes canonical Card, MediaObject, Avatar, and Rating contracts", () => {
+    const reviewElement = rendered(render(Review, {
+      author: "Ada Lovelace",
+      avatarFallback: "AL",
+      rating: 4,
+      maxRating: 5,
+      datetime: "2026-08-08",
+      time: "8 August 2026",
+      children: body,
+      actions,
+    }));
+
+    expect(reviewElement.tagName).toBe("ARTICLE");
+    expect(reviewElement.getAttribute("aria-label")).toBe("Review by Ada Lovelace");
+    expect(reviewElement.querySelector("[data-card]")).not.toBeNull();
+    expect(reviewElement.querySelector("[data-media-object]")).not.toBeNull();
+    expect(reviewElement.querySelector("[data-avatar]")?.getAttribute("aria-label")).toBe("Ada Lovelace");
+    expect(reviewElement.querySelector("time")?.dateTime).toBe("2026-08-08");
+    expect(reviewElement.querySelectorAll('[data-rating] input[type="radio"]')).toHaveLength(5);
+    expect(reviewElement.querySelector("[data-rating] output")?.textContent).toContain("4 of 5");
+  });
+
+  it("conveys the score through symbols, text, and native state rather than colour alone", () => {
+    const reviewElement = rendered(render(Review, {
+      author: "Ada Lovelace",
+      avatarFallback: "AL",
+      rating: 4,
+      maxRating: 5,
+      children: body,
+    }));
+    const marks = [...reviewElement.querySelectorAll<HTMLElement>("[data-rating-mark]")];
+    const checked = reviewElement.querySelector<HTMLInputElement>('[data-rating] input:checked')!;
+
+    expect(marks.map((mark) => mark.textContent)).toEqual(["★", "★", "★", "★", "☆"]);
+    expect(checked.value).toBe("4");
+    expect(reviewElement.querySelector("[data-rating] output")?.textContent).toContain("4 of 5");
+  });
+
+  it("preserves caller-owned action focus and inherits every nested appearance axis", () => {
+    const scope = rendered(render(SocialSurfacesConsumer));
+    const reviewElement = scope.querySelector<HTMLElement>("[data-review]")!;
+    const action = reviewElement.querySelector<HTMLButtonElement>("button")!;
+
+    expect(classes(reviewElement)).toEqual(expect.objectContaining(classesOf(review().root())));
+    expect(classes(reviewElement.querySelector("[data-review-content]")!))
+      .toContain("gap-[var(--reddb-spatial-gap-md)]");
+    action.focus();
+    expect(document.activeElement).toBe(action);
+    expect(reviewElement.hasAttribute("data-theme")).toBe(false);
+    expect(reviewElement.hasAttribute("data-color-scheme")).toBe(false);
+    expect(reviewElement.hasAttribute("data-density")).toBe(false);
+    expect(reviewElement.hasAttribute("data-motion")).toBe(false);
+  });
+
+  it("ships showcase, consumer, distributed export, and readiness evidence", () => {
+    expectLayoutReadiness("review", "Review");
+  });
+});

package/vendor/ds/kits/app/test/settings-row.test.ts

@@ -0,0 +1,34 @@
+import { mount, unmount, flushSync } from "svelte";
+import { createElement as h } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, describe, expect, it } from "vitest";
+import { SettingsRow } from "../react/src/SettingsRow";
+import { Button } from "../../base/react/src/Button";
+import { Input } from "../../base/react/src/Input";
+import Fixture from "./fixtures/SettingsRows.svelte";
+
+afterEach(() => document.body.replaceChildren());
+describe("settings-row associations in both native adapters", () => {
+  it.each(["React", "Svelte"])("%s keeps field help separate and preserves native action names", async flavor => {
+    let mounted: ReturnType<typeof mount> | undefined;
+    if (flavor === "React") {
+      document.body.innerHTML = renderToStaticMarkup(h("div", null,
+        h(SettingsRow, { label: "Signing secret", description: "At least 16 characters.", id: "secret", children: control => h(Input, { ...control, type: "password" }) }),
+        h(SettingsRow, { label: "HTTPS and mobile access", description: "Connect another device.", actions: h(Button, null, "Configure HTTPS") }),
+      ));
+    } else {
+      mounted = mount(Fixture, { target: document.body });
+      flushSync();
+    }
+    try {
+      const input = document.querySelector("input")!;
+      expect(input.labels?.[0]?.textContent).toBe("Signing secret");
+      expect(input.id).toBe("secret");
+      expect(document.getElementById(input.getAttribute("aria-describedby")!)?.textContent).toBe("At least 16 characters.");
+      const action = document.querySelector("button")!;
+      expect(action.textContent?.trim()).toBe("Configure HTTPS");
+      expect(action.hasAttribute("aria-labelledby")).toBe(false);
+      expect(action.hasAttribute("aria-label")).toBe(false);
+    } finally { if (mounted) await unmount(mounted); }
+  });
+});

package/vendor/ds/kits/app/test/shell-brand.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import ShellBrandComposition from "./fixtures/ShellBrandComposition.svelte";
+import { render, rendered } from "./mount";
+
+describe("the application shell brand composition", () => {
+  it.each([
+    { navbar: true, rail: true, expectedRegion: "navbar" },
+    { navbar: false, rail: true, expectedRegion: "rail" },
+    { navbar: false, rail: false, expectedRegion: "panel" },
+  ])(
+    "renders exactly one brand in the $expectedRegion region",
+    ({ navbar, rail, expectedRegion }) => {
+      const shell = rendered(render(ShellBrandComposition, { navbar, rail }));
+      const marks = [...shell.querySelectorAll("[data-shell-brand-mark]")];
+
+      expect(marks).toHaveLength(1);
+      expect(marks[0]?.closest("[data-shell-brand-region]")?.getAttribute(
+        "data-shell-brand-region",
+      )).toBe(expectedRegion);
+    },
+  );
+});

package/vendor/ds/kits/app/test/shopping-cart.test.ts

@@ -0,0 +1,172 @@
+import { flushSync } from "svelte";
+import { createRawSnippet } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import ShoppingCart from "../src/composites/ShoppingCart.svelte";
+import { shoppingCart } from "../src/composites/shopping-cart.variants";
+import { expectCommerceReadiness } from "./commerce-readiness";
+import CommerceContractFailures from "./fixtures/CommerceContractFailures.svelte";
+import CommerceSurfacesConsumer from "./fixtures/CommerceSurfacesConsumer.svelte";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function cartAnnouncementFailures(root: HTMLElement): string[] {
+  const total = root.querySelector("output");
+  return total?.getAttribute("aria-live") === "polite" &&
+    total.getAttribute("aria-atomic") === "true"
+    ? []
+    : ["cart total is not announced when it changes"];
+}
+
+const ITEMS = [
+  { id: "keyboard", name: "Mechanical keyboard", price: "$48.00", quantity: 1 },
+] as const;
+
+describe("the deliberately failing Shopping cart fixture", () => {
+  it("diagnoses a total whose changes are never announced", () => {
+    const broken = rendered(render(CommerceContractFailures, { failure: "cart-total-is-silent" }));
+    expect(cartAnnouncementFailures(broken)).toEqual([
+      "cart total is not announced when it changes",
+    ]);
+  });
+});
+
+describe("ShoppingCart", () => {
+  it("composes a native Form with named quantities and a polite atomic total", () => {
+    const form = rendered(
+      render(ShoppingCart, {
+        title: "Shopping cart",
+        items: ITEMS,
+        totalLabel: "Total",
+        total: "$48.00",
+      }),
+    ) as HTMLFormElement;
+    const quantity = form.querySelector<HTMLInputElement>('input[type="number"]')!;
+
+    expect(form.tagName).toBe("FORM");
+    expect(form.querySelector("li h3")?.textContent).toBe("Mechanical keyboard");
+    expect(quantity.name).toBe("quantity[keyboard]");
+    expect(new FormData(form).get(quantity.name)).toBe("1");
+    expect(form.querySelector("output")?.textContent).toContain("$48.00");
+    expect(cartAnnouncementFailures(form)).toEqual([]);
+  });
+
+  it.each([
+    [1, "h2"],
+    [3, "h4"],
+    [6, "h6"],
+  ] as const)("places item names one level below a level %i cart heading", (level, itemHeading) => {
+    const form = rendered(
+      render(ShoppingCart, {
+        title: "Shopping cart",
+        level,
+        items: ITEMS,
+        totalLabel: "Total",
+        total: "$48.00",
+      }),
+    );
+
+    expect(form.querySelector(`li ${itemHeading}`)?.textContent).toBe("Mechanical keyboard");
+  });
+
+  it("keeps quantity and removal controls in native focus order", () => {
+    const onquantitychange = vi.fn();
+    const onremove = vi.fn();
+    const form = rendered(
+      render(ShoppingCart, {
+        title: "Shopping cart",
+        items: ITEMS,
+        totalLabel: "Total",
+        total: "$48.00",
+        onquantitychange,
+        onremove,
+        actions: createRawSnippet(() => ({ render: () => '<button type="submit">Checkout</button>' })),
+      }),
+    );
+    const quantity = form.querySelector<HTMLInputElement>('input[type="number"]')!;
+    const remove = form.querySelector<HTMLButtonElement>('button[type="button"]')!;
+
+    quantity.focus();
+    expect(document.activeElement).toBe(quantity);
+    quantity.value = "2";
+    quantity.dispatchEvent(new Event("input", { bubbles: true }));
+    flushSync();
+    expect(onquantitychange).toHaveBeenCalledWith("keyboard", 2);
+
+    remove.focus();
+    expect(document.activeElement).toBe(remove);
+    remove.click();
+    expect(onremove).toHaveBeenCalledWith("keyboard");
+  });
+
+  it("renders caller-owned item media, details, item actions, and an empty state", () => {
+    const media = createRawSnippet(() => ({
+      render: () => '<img src="/keyboard.webp" alt="Mechanical keyboard">',
+    }));
+    const details = createRawSnippet(() => ({
+      render: () => '<p data-custom-details>Graphite · Type C</p>',
+    }));
+    const itemActions = createRawSnippet(() => ({
+      render: () => '<a href="/save">Save for later</a>',
+    }));
+    const populated = rendered(
+      render(ShoppingCart, {
+        title: "Shopping cart",
+        items: [{ ...ITEMS[0], media, details, actions: itemActions }],
+        totalLabel: "Total",
+        total: "$48.00",
+      }),
+    );
+
+    expect(populated.querySelector("[data-cart-item-media] img")?.getAttribute("alt")).toBe(
+      "Mechanical keyboard",
+    );
+    expect(populated.querySelector("[data-custom-details]")?.textContent).toContain(
+      "Graphite · Type C",
+    );
+    expect(populated.querySelector('[data-cart-item-actions] a')?.getAttribute("href")).toBe(
+      "/save",
+    );
+
+    const empty = rendered(
+      render(ShoppingCart, {
+        title: "Shopping cart",
+        items: [],
+        totalLabel: "Total",
+        total: "$0.00",
+        empty: createRawSnippet(() => ({
+          render: () => '<p data-cart-recovery>Your basket is empty. Choose a product.</p>',
+        })),
+      }),
+    );
+
+    expect(empty.querySelector("[data-cart-empty] [data-cart-recovery]")).not.toBeNull();
+    expect(empty.querySelector("[data-cart-total]")).toBeNull();
+  });
+
+  it("inherits nested appearance and keeps item rhythm Density-owned", () => {
+    const scope = document.createElement("div");
+    scope.dataset.theme = "application";
+    scope.dataset.colorScheme = "dark";
+    scope.dataset.density = "compact";
+    const target = render(ShoppingCart, {
+      title: "Shopping cart",
+      items: ITEMS,
+      totalLabel: "Total",
+      total: "$48.00",
+    });
+    scope.append(...target.children);
+    const cart = scope.querySelector<HTMLElement>("[data-shopping-cart]")!;
+    const styles = shoppingCart();
+
+    for (const name of classesOf(styles.root())) expect(classes(cart)).toContain(name);
+    // The Form owns the rhythm between the cart's rows (ADR 0024).
+    expect(classes(cart)).toContain("gap-[var(--reddb-spatial-layout-gap-md)]");
+    expect(cart.hasAttribute("data-theme")).toBe(false);
+    expect(cart.hasAttribute("data-color-scheme")).toBe(false);
+    expect(cart.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("consumer-compiles, exports, showcases, and declares complete readiness", () => {
+    expect(render(CommerceSurfacesConsumer).querySelector("[data-shopping-cart]")).not.toBeNull();
+    expectCommerceReadiness("shopping-cart", "ShoppingCart");
+  });
+});