@reddb-io/ui-kit 0.3.3 → 0.3.5

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

@@ -0,0 +1,340 @@
+// Button at the Base subpath, through the same public seam a consumer uses.
+//
+// These assertions preserve the observable contract moved out of Application.
+// Base is now its only implementation and public export.
+
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { createRawSnippet, flushSync, type Snippet } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import {
+  APPEARANCE_THEMES,
+  BASE_THEME,
+  COLOR_SCHEMES,
+} from "../../../packages/theme/src/appearance";
+import { appearanceThemeCssPath, colorSchemeCssPath } from "../../../packages/theme/src/paths";
+import {
+  cascadeFor,
+  parseStylesheets,
+  resolveProperty,
+} from "../../../packages/theme/test/support/cascade";
+import {
+  BUTTON_INTENTS,
+  BUTTON_SIZES,
+  BUTTON_TONES,
+  BUTTON_VARIANTS,
+  TONES,
+  Button,
+  button,
+  buttonSpinner,
+} from "./fixtures/button-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+function text(content: string): Snippet {
+  return createRawSnippet(() => ({ render: () => `<span>${content}</span>` }));
+}
+
+function click(element: HTMLElement): void {
+  element.click();
+  flushSync();
+}
+
+const composition = parseStylesheets([
+  readFileSync(join(import.meta.dirname, "..", "..", "..", "packages", "tokens", "dist", "tokens.css"), "utf8"),
+  readFileSync(appearanceThemeCssPath(BASE_THEME), "utf8"),
+  ...APPEARANCE_THEMES.map((theme) => readFileSync(appearanceThemeCssPath(theme), "utf8")),
+  ...COLOR_SCHEMES.map((scheme) => readFileSync(colorSchemeCssPath(scheme), "utf8")),
+]);
+
+function channel(hex: string, offset: number): number {
+  const value = Number.parseInt(hex.slice(offset, offset + 2), 16) / 255;
+  return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+}
+
+function luminance(hex: string): number {
+  return 0.2126 * channel(hex, 1) + 0.7152 * channel(hex, 3) + 0.0722 * channel(hex, 5);
+}
+
+function contrast(left: string, right: string): number {
+  const [lighter, darker] = [luminance(left), luminance(right)].sort((a, b) => b - a);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+describe("the Base Button", () => {
+  it("is available through the Base consumer subpath", () => {
+    expect(Button).toBeDefined();
+    expect(button).toBeTypeOf("function");
+    expect(buttonSpinner).toBeTypeOf("function");
+    // Button's meaning is the shared tone vocabulary (ADR 0026); the old
+    // `BUTTON_INTENTS` name stays one release as the same list.
+    expect(BUTTON_TONES).toEqual(TONES);
+    expect(BUTTON_INTENTS).toBe(BUTTON_TONES);
+  });
+
+  it("renders a <button> that does not submit its form by accident", () => {
+    const element = rendered(render(Button, {}));
+    expect(element.tagName).toBe("BUTTON");
+    expect(element.getAttribute("type")).toBe("button");
+  });
+
+  it("renders its children", () => {
+    const element = rendered(render(Button, { children: text("Save") }));
+    expect(element.textContent?.trim()).toBe("Save");
+  });
+
+  it("wears exactly the classes its exported variants produce", () => {
+    for (const variant of BUTTON_VARIANTS) {
+      for (const size of BUTTON_SIZES) {
+        const element = rendered(render(Button, { variant, size }));
+        expect(classes(element)).toEqual(classesOf(button({ variant, size })));
+      }
+    }
+  });
+
+  it("defaults to the secondary variant at the medium size", () => {
+    const element = rendered(render(Button, {}));
+    expect(classes(element)).toEqual(classesOf(button({ variant: "secondary", size: "md" })));
+  });
+
+  it("composes every tone with every emphasis using only its token family", () => {
+    // A feedback intent keeps the emphasis hierarchy: primary fills with the
+    // role's fill material under its on-fill label, secondary outlines in its
+    // border, ghost carries only its ink — so the three emphases stay
+    // distinguishable (ADR 0009). Every one focuses with the one ink ring,
+    // offset from the control (ADR 0023).
+    const FOCUS = ["focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-focus"];
+    const feedback = (role: string) => ({
+      primary: [`bg-feedback-${role}-fill`, `text-feedback-${role}-on-fill`, ...FOCUS],
+      secondary: [
+        `border-feedback-${role}-border`,
+        `text-feedback-${role}-foreground`,
+        `hover:bg-feedback-${role}-surface`,
+        ...FOCUS,
+      ],
+      ghost: [`text-feedback-${role}-foreground`, `hover:bg-feedback-${role}-surface`, ...FOCUS],
+    });
+    const contracts = {
+      neutral: {
+        // Hover, press and an open popup fill with the opaque primary-active
+        // role the contrast contract pairs with on-primary (wave 5A).
+        primary: ["bg-primary", "text-on-primary", "hover:bg-primary-active", "aria-expanded:bg-primary-active", ...FOCUS],
+        secondary: ["border-control-edge", "bg-transparent", "text-foreground", ...FOCUS],
+        ghost: ["bg-transparent", "text-ink-muted", ...FOCUS],
+      },
+      danger: feedback("danger"),
+      success: feedback("success"),
+      warning: feedback("warning"),
+      info: feedback("info"),
+    } as const;
+
+    for (const [intent, variants] of Object.entries(contracts)) {
+      for (const [variant, expected] of Object.entries(variants)) {
+        const actual = classesOf(button({ tone: intent, variant } as never));
+        for (const token of expected) expect(actual.has(token), `${intent}/${variant}: ${token}`).toBe(true);
+        expect([...actual], `${intent}/${variant}`).not.toContainEqual(expect.stringMatching(/(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\()/i));
+        // The Brand red never draws focus, and no intent restates a ring of its own.
+        expect([...actual], `${intent}/${variant}`).not.toContainEqual(expect.stringMatching(/^focus-visible:ring-/));
+      }
+    }
+  });
+
+  it("renders the requested tone through the public component prop", () => {
+    for (const tone of TONES) {
+      for (const variant of BUTTON_VARIANTS) {
+        const element = rendered(render(Button, { tone, variant }));
+        expect(classes(element), `${tone}/${variant}`).toEqual(classesOf(button({ tone, variant })));
+      }
+    }
+  });
+
+  it("keeps the deprecated intent as a working alias that warns once in development", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      rendered(render(Button, { tone: "danger" }));
+      expect(warn).not.toHaveBeenCalled();
+      const aliased = [1, 2].map(() => rendered(render(Button, { intent: "warning", variant: "secondary" })));
+      for (const element of aliased) {
+        expect(classes(element)).toEqual(classesOf(button({ tone: "warning", variant: "secondary" })));
+      }
+      expect(warn).toHaveBeenCalledTimes(1);
+      expect(String(warn.mock.calls[0]![0])).toMatch(/\[reddb Button\] intent="warning" is deprecated.*tone="warning"/);
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("keeps labels AA on their fill and the ink focus ring 3:1 on every ground, in every appearance", () => {
+    // [fill the label sits on, label]. Outlined and ghost intents set their
+    // copy on whatever ground they are placed on; the contract measures the
+    // feedback copy on every ground, so here they are read on the page and on
+    // their own tinted hover surface.
+    const pairs: Record<string, Record<string, readonly [string, string][]>> = {
+      neutral: {
+        primary: [["--reddb-color-primary", "--reddb-color-on-primary"]],
+        secondary: [["--reddb-color-background", "--reddb-color-foreground"]],
+        ghost: [["--reddb-color-background", "--reddb-color-ink-muted"]],
+      },
+    };
+    for (const role of ["danger", "success", "warning", "info"]) {
+      const copy = `--reddb-color-feedback-${role}-foreground`;
+      pairs[role] = {
+        primary: [[`--reddb-color-feedback-${role}-fill`, `--reddb-color-feedback-${role}-on-fill`]],
+        secondary: [["--reddb-color-background", copy], [`--reddb-color-feedback-${role}-surface`, copy]],
+        ghost: [["--reddb-color-background", copy], [`--reddb-color-feedback-${role}-surface`, copy]],
+      };
+    }
+    const grounds = ["background", "elevation-sunken-surface", "elevation-base-surface", "elevation-raised-surface", "elevation-overlay-surface"];
+
+    for (const theme of APPEARANCE_THEMES) {
+      for (const scheme of COLOR_SCHEMES) {
+        const cascade = cascadeFor(composition, [
+          { "data-theme": theme.name, "data-color-scheme": scheme.name },
+        ]);
+        const at = (token: string) => resolveProperty(cascade, token);
+        for (const [intent, variants] of Object.entries(pairs)) {
+          for (const [variant, surfaces] of Object.entries(variants)) {
+            for (const [surfaceToken, labelToken] of surfaces) {
+              expect(contrast(at(surfaceToken), at(labelToken)), `${intent}/${variant} label on ${surfaceToken} at ${theme.name}/${scheme.name}`)
+                .toBeGreaterThanOrEqual(4.5);
+            }
+          }
+        }
+        // The offset ring is drawn on the ground around the Button, never on its fill.
+        for (const ground of grounds) {
+          expect(contrast(at(`--reddb-color-${ground}`), at("--reddb-color-focus")), `focus ring on ${ground} at ${theme.name}/${scheme.name}`)
+            .toBeGreaterThanOrEqual(3);
+        }
+      }
+    }
+  });
+
+  it("merges a caller's classes over its own", () => {
+    const element = rendered(render(Button, { class: "w-full" }));
+    expect(classes(element).has("w-full")).toBe(true);
+    expect(classes(element).has("border-control-edge")).toBe(true);
+  });
+
+  it("passes native attributes and handlers straight through", () => {
+    const onclick = vi.fn();
+    const element = rendered(render(Button, { onclick, type: "submit", "aria-pressed": "true" }));
+    expect(element.getAttribute("type")).toBe("submit");
+    expect(element.getAttribute("aria-pressed")).toBe("true");
+    click(element);
+    expect(onclick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not fire while disabled", () => {
+    const onclick = vi.fn();
+    const element = rendered(render(Button, { onclick, disabled: true }));
+    expect((element as HTMLButtonElement).disabled).toBe(true);
+    click(element);
+    expect(onclick).not.toHaveBeenCalled();
+  });
+});
+
+describe("the Base Button as an anchor", () => {
+  it("renders an <a> to wherever href points", () => {
+    const element = rendered(render(Button, { href: "/docs", children: text("Read the guide") }));
+    expect(element.tagName).toBe("A");
+    expect(element.getAttribute("href")).toBe("/docs");
+    expect(element.hasAttribute("type")).toBe(false);
+  });
+
+  it("wears the same variant classes as a button", () => {
+    for (const variant of BUTTON_VARIANTS) {
+      for (const size of BUTTON_SIZES) {
+        const anchor = rendered(render(Button, { href: "/docs", variant, size }));
+        expect(classes(anchor)).toEqual(classesOf(button({ variant, size })));
+      }
+    }
+  });
+
+  it("passes native anchor attributes straight through", () => {
+    const element = rendered(
+      render(Button, { href: "https://example.test", target: "_blank", rel: "noreferrer" }),
+    );
+    expect(element.getAttribute("target")).toBe("_blank");
+    expect(element.getAttribute("rel")).toBe("noreferrer");
+  });
+
+  it("preserves an explicit roving tab stop on native links", () => {
+    const link=rendered(render(Button,{href:"/docs",tabindex:-1}));
+    expect(link.tabIndex).toBe(-1);
+    const disabled=rendered(render(Button,{href:"/docs",tabindex:0,disabled:true}));
+    expect(disabled.tabIndex).toBe(-1);
+  });
+
+  it("withholds the destination while disabled", () => {
+    const element = rendered(render(Button, { href: "/docs", disabled: true }));
+    expect(element.hasAttribute("href")).toBe(false);
+    expect(element.getAttribute("tabindex")).toBe("-1");
+    expect(element.getAttribute("aria-disabled")).toBe("true");
+  });
+});
+
+describe("the Base Button while loading", () => {
+  it("is disabled, announces itself as busy, and does not fire", () => {
+    const onclick = vi.fn();
+    const element = rendered(render(Button, { onclick, loading: true, children: text("Save") }));
+    expect((element as HTMLButtonElement).disabled).toBe(true);
+    expect(element.getAttribute("aria-busy")).toBe("true");
+    click(element);
+    expect(onclick).not.toHaveBeenCalled();
+  });
+
+  it("draws an assistive-technology-hidden spinner beside its label", () => {
+    const element = rendered(render(Button, { loading: true, children: text("Save") }));
+    const spinner = element.querySelector("svg");
+    expect(spinner).not.toBeNull();
+    expect(classes(spinner!)).toEqual(classesOf(buttonSpinner({ size: "md" }).root()));
+    expect(spinner!.getAttribute("aria-hidden")).toBe("true");
+    expect(element.textContent).toContain("Save");
+  });
+
+  it("sizes the spinner with the button, on the Icon size role of the same name", () => {
+    for (const size of BUTTON_SIZES) {
+      const spinner = rendered(render(Button, { loading: true, size })).querySelector("svg")!;
+      expect(classes(spinner)).toEqual(classesOf(buttonSpinner({ size }).root()));
+      // Density-responsive, so it matches a leading Icon at every stop.
+      expect(classes(spinner).has(`size-[var(--reddb-spatial-icon-size-${size})]`), size).toBe(true);
+    }
+  });
+
+  it("draws the spinner in the button's own colour", () => {
+    const spinner = rendered(render(Button, { loading: true, variant: "secondary" })).querySelector("svg")!;
+    const strokeClasses = [...spinner.querySelectorAll("*")].flatMap((node) => [...classes(node)]);
+    expect(strokeClasses).toContain("stroke-current");
+    const coloured = [...classes(spinner), ...strokeClasses].filter((name) =>
+      /^(text|fill|stroke)-/.test(name),
+    );
+    expect(coloured.filter((name) => !/-(current|none)$/.test(name))).toEqual([]);
+  });
+
+  it("draws no spinner when it is not loading", () => {
+    expect(rendered(render(Button, { children: text("Save") })).querySelector("svg")).toBeNull();
+  });
+
+  it("takes an anchor out of action too", () => {
+    const element = rendered(render(Button, { href: "/docs", loading: true }));
+    expect(element.tagName).toBe("A");
+    expect(element.hasAttribute("href")).toBe(false);
+    expect(element.querySelector("svg")).not.toBeNull();
+  });
+});
+
+describe("the Base Button as a block", () => {
+  it("fills its column when asked, and only then", () => {
+    expect(classes(rendered(render(Button, { block: true }))).has("w-full")).toBe(true);
+    expect(classes(rendered(render(Button, {}))).has("w-full")).toBe(false);
+  });
+
+  it("wears the exported block classes on either native element", () => {
+    for (const variant of BUTTON_VARIANTS) {
+      const asButton = rendered(render(Button, { variant, block: true }));
+      expect(classes(asButton)).toEqual(classesOf(button({ variant, block: true })));
+
+      const asAnchor = rendered(render(Button, { href: "/docs", variant, block: true }));
+      expect(classes(asAnchor)).toEqual(classesOf(button({ variant, block: true })));
+    }
+  });
+});

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

@@ -0,0 +1,86 @@
+import { CalendarDate } from "@internationalized/date";
+import { flushSync, tick } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import CalendarContractFailures from "./fixtures/CalendarContractFailures.svelte";
+import CalendarConsumer from "./fixtures/CalendarConsumer.svelte";
+import { Calendar, calendar } from "./fixtures/calendar-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+async function keyboardNavigationFailures(root: HTMLElement): Promise<string[]> {
+  const active = root.querySelector<HTMLElement>('[data-bits-day][tabindex="0"]');
+  if (!active) return ["calendar has no date in the tab order"];
+
+  active.focus();
+  active.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+  await tick();
+  flushSync();
+  return document.activeElement !== active ? [] : ["arrow keys do not move date focus"];
+}
+
+describe("the deliberately failing Calendar fixture", () => {
+  it("diagnoses a calendar grid without keyboard navigation", async () => {
+    const root = rendered(render(CalendarContractFailures, {
+      failure: "calendar-without-keyboard-navigation",
+    }));
+
+    await expect(keyboardNavigationFailures(root)).resolves.toEqual([
+      "calendar has no date in the tab order",
+    ]);
+  });
+});
+
+describe("the Base Calendar", () => {
+  it("is available with its shared appearance seam through the Base consumer subpath", () => {
+    expect(Calendar).toBeDefined();
+    expect(calendar).toBeTypeOf("function");
+  });
+
+  it("renders no <header>, so a Calendar in a popover adds no banner landmark (wave 5A)", () => {
+    const root = rendered(render(Calendar, {
+      label: "Deployment date",
+      placeholder: new CalendarDate(2026, 6, 10),
+    }));
+    expect(root.querySelector("header")).toBeNull();
+    expect(root.querySelector("[data-calendar-header]")?.tagName).toBe("DIV");
+  });
+
+  it("provides a roving date tab stop and arrow-key focus navigation", async () => {
+    const root = rendered(render(Calendar, {
+      label: "Deployment date",
+      placeholder: new CalendarDate(2026, 6, 10),
+    }));
+    await expect(keyboardNavigationFailures(root)).resolves.toEqual([]);
+    expect(document.activeElement?.getAttribute("data-value")).toBe("2026-06-11");
+  });
+
+  it("selects one date and exposes selection semantically as well as visually", () => {
+    const onvaluechange = vi.fn();
+    const root = rendered(render(Calendar, {
+      label: "Deployment date",
+      placeholder: new CalendarDate(2026, 6, 10),
+      onvaluechange,
+    }));
+    const day = root.querySelector<HTMLElement>('[data-bits-day][data-value="2026-06-12"]')!;
+
+    day.click();
+    flushSync();
+
+    expect(onvaluechange.mock.calls.at(-1)?.[0]?.toString()).toBe("2026-06-12");
+    expect(day.hasAttribute("data-selected")).toBe(true);
+    expect(day.closest('[role="gridcell"]')?.getAttribute("aria-selected")).toBe("true");
+  });
+
+  it("keeps Density-owned geometry and inherits every nested appearance axis", () => {
+    const consumer = render(CalendarConsumer);
+    const root = consumer.querySelector<HTMLElement>("[data-nested-calendar]")!;
+    const styles = calendar();
+
+    expect(classes(root)).toEqual(classesOf(styles.root({ class: "max-w-sm" })));
+    expect(classes(root.querySelector("[data-bits-day]")!).has(
+      "size-[var(--reddb-spatial-control-height-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);
+  });
+});

package/vendor/ds/kits/base/test/card-busy.test.ts

@@ -0,0 +1,25 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import { Card } from "@reddb-io/design-system/base";
+import { render, rendered } from "./mount";
+
+describe("the Base Card busy contract", () => {
+  it("announces background work without removing the current content", () => {
+    const card = rendered(render(Card, {
+      title: "Query results",
+      busy: true,
+      busyLabel: "Running query against local.reddb",
+      children: createRawSnippet(() => ({ render: () => "<p>Four previous rows</p>" })),
+    }));
+
+    expect(card.getAttribute("aria-busy")).toBe("true");
+    expect(card.querySelector("[data-card-busy]")?.textContent).toContain("Running query against local.reddb");
+    expect(card.textContent).toContain("Four previous rows");
+  });
+
+  it("omits the busy announcement when idle", () => {
+    const card = rendered(render(Card, { title: "Query results" }));
+    expect(card.hasAttribute("aria-busy")).toBe(false);
+    expect(card.querySelector("[data-card-busy]")).toBeNull();
+  });
+});

package/vendor/ds/kits/base/test/card-divider-aspect-ratio-failures.test.ts

@@ -0,0 +1,29 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { lintKitSource, readVocabulary } from "@reddb-io/kit-lint";
+import { describe, expect, it } from "vitest";
+import SurfaceSeparationContractFailures from "./fixtures/SurfaceSeparationContractFailures.svelte";
+import { render } from "./mount";
+
+const FIXTURE = join(
+  import.meta.dirname,
+  "fixtures",
+  "SurfaceSeparationContractFailures.svelte",
+);
+
+describe("the deliberately failing Card and Divider fixtures", () => {
+  it("diagnoses Card spacing frozen against Density", () => {
+    const violations = lintKitSource(readFileSync(FIXTURE, "utf8"), FIXTURE, readVocabulary());
+    expect(violations.map((violation) => violation.found)).toContain("p-4");
+  });
+
+  it("diagnoses a visual Divider without separator semantics", () => {
+    const root = render(SurfaceSeparationContractFailures, {
+      failure: "missing-separator-semantics",
+    });
+    const divider = root.querySelector<HTMLElement>("[data-broken-divider]")!;
+
+    expect(divider.getAttribute("role")).not.toBe("separator");
+    expect(divider.hasAttribute("aria-orientation")).toBe(false);
+  });
+});

package/vendor/ds/kits/base/test/card-divider-aspect-ratio.test.ts

@@ -0,0 +1,201 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import {
+  AspectRatio,
+  CARD_ACTIONS_ALIGNMENTS,
+  CARD_ORIENTATIONS,
+  CARD_PADDINGS,
+  CARD_VARIANTS,
+  Card,
+  DEFAULT_ASPECT_RATIO,
+  DIVIDER_ORIENTATIONS,
+  Divider,
+  aspectRatio as aspectRatioAppearance,
+  card as cardAppearance,
+  divider as dividerAppearance,
+} from "./fixtures/surface-separation-consumer";
+import CardActionsConsumer from "./fixtures/CardActionsConsumer.svelte";
+import CardHorizontalConsumer from "./fixtures/CardHorizontalConsumer.svelte";
+import SurfaceSeparationConsumer from "./fixtures/SurfaceSeparationConsumer.svelte";
+import TestGlyph from "./fixtures/TestGlyph.svelte";
+import { classes, classesOf, render, rendered, styleOf } from "./mount";
+
+const text = (value: string) =>
+  createRawSnippet(() => ({ render: () => `<span>${value}</span>` }));
+
+describe("the Base Card", () => {
+  it("offers complete edge and Density-owned padding vocabularies", () => {
+    expect(CARD_VARIANTS).toEqual(["outline", "plain"]);
+    expect(CARD_PADDINGS).toEqual(["none", "sm", "md"]);
+    expect(CARD_ACTIONS_ALIGNMENTS).toEqual(["start", "center", "end", "between"]);
+    expect(CARD_ORIENTATIONS).toEqual(["vertical", "horizontal"]);
+
+    for (const variant of CARD_VARIANTS) {
+      for (const padding of CARD_PADDINGS) {
+        const element = rendered(render(Card, { variant, padding }));
+        expect(classes(element)).toEqual(
+          classesOf(cardAppearance({ variant, padding }).root()),
+        );
+      }
+    }
+  });
+
+  it("keeps every section inset live against the nearest Density scope", () => {
+    for (const padding of ["sm", "md"] as const) {
+      const element = rendered(
+        render(Card, {
+          padding,
+          title: "Surface",
+          children: text("Body"),
+          footer: text("Footer"),
+        }),
+      );
+      const tokenClass = `p-[var(--reddb-spatial-inset-${padding})]`;
+
+      for (const section of element.children) expect(classes(section).has(tokenClass)).toBe(true);
+      expect(element.hasAttribute("data-density")).toBe(false);
+    }
+  });
+
+  it("omits absent sections and keeps caller content in document order", () => {
+    const bodyOnly = rendered(render(Card, { children: text("Body") }));
+    expect(bodyOnly.children).toHaveLength(1);
+
+    const complete = rendered(
+      render(Card, { title: "Header", children: text("Body"), footer: text("Footer") }),
+    );
+    expect(classes(complete.querySelector("[data-card-footer]")!).has("justify-start")).toBe(true);
+    expect([...complete.children].map((section) => section.textContent?.trim())).toEqual([
+      "Header",
+      "Body",
+      "Footer",
+    ]);
+  });
+
+  it("aligns multiple footer actions without consumer layout classes", () => {
+    const alignments = {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+    } as const;
+
+    for (const [actionsAlign, expectedClass] of Object.entries(alignments)) {
+      const element = rendered(render(CardActionsConsumer, { actionsAlign }));
+      const footer = element.querySelector<HTMLElement>("[data-card-footer]")!;
+
+      expect(classes(footer).has(expectedClass)).toBe(true);
+      expect([...footer.querySelectorAll("button")].map((button) => button.className)).toEqual([
+        "",
+        "",
+      ]);
+    }
+  });
+
+  it("places media beside an ordered content column with a narrow-container fallback", () => {
+    const card = rendered(render(CardHorizontalConsumer));
+    const layout = card.querySelector<HTMLElement>("[data-card-layout]")!;
+    const media = card.querySelector<HTMLElement>("[data-card-media]")!;
+    const content = card.querySelector<HTMLElement>("[data-card-content]")!;
+
+    expect([...layout.children]).toEqual([media, content]);
+    expect(
+      [...content.children].map((section) =>
+        ["header", "body", "footer"].find((name) =>
+          section.hasAttribute(`data-card-${name}`),
+        ),
+      ),
+    ).toEqual(["header", "body", "footer"]);
+    expect([...content.children].map((section) => section.textContent?.trim())).toEqual([
+      "Release Ready to ship",
+      "Review the changes.",
+      "Publish",
+    ]);
+    for (const expected of ["@container/card", "overflow-hidden"]) {
+      expect(classes(card).has(expected)).toBe(true);
+    }
+    for (const expected of ["flex", "flex-col", "@sm/card:flex-row"]) {
+      expect(classes(layout).has(expected)).toBe(true);
+    }
+    expect(classes(media).has("@sm/card:w-2/5")).toBe(true);
+  });
+
+  it("renders a decorative title icon through Icon unless a full header replaces it", () => {
+    const standard = rendered(render(Card, { icon: TestGlyph, title: "Release" }));
+    const icon = standard.querySelector<SVGElement>("[data-card-header] [data-icon]")!;
+
+    expect(icon.hasAttribute("data-test-glyph")).toBe(true);
+    expect(icon.getAttribute("aria-hidden")).toBe("true");
+
+    const overridden = rendered(
+      render(Card, { icon: TestGlyph, title: "Ignored", header: text("Custom header") }),
+    );
+    expect(overridden.querySelector("[data-icon]")).toBeNull();
+    expect(overridden.querySelector("[data-card-header]")?.textContent?.trim()).toBe(
+      "Custom header",
+    );
+  });
+});
+
+describe("the Base Divider", () => {
+  it("exposes its visual direction as separator semantics", () => {
+    expect(DIVIDER_ORIENTATIONS).toEqual(["horizontal", "vertical"]);
+    for (const orientation of DIVIDER_ORIENTATIONS) {
+      const element = rendered(render(Divider, { orientation }));
+      expect(element.getAttribute("role")).toBe("separator");
+      expect(element.getAttribute("aria-orientation")).toBe(orientation);
+      expect(classes(element)).toEqual(classesOf(dividerAppearance({ orientation })));
+    }
+  });
+
+  it("stays outside the keyboard order", () => {
+    const element = rendered(render(Divider, {}));
+    expect(element.tabIndex).toBe(-1);
+  });
+});
+
+describe("the Base AspectRatio", () => {
+  it("defaults to 16:9 while accepting an arbitrary caller ratio", () => {
+    const standard = rendered(render(AspectRatio, {}));
+    const portrait = rendered(render(AspectRatio, { ratio: 3 / 4, class: "max-w-md" }));
+
+    expect(styleOf(standard, "aspect-ratio")).toBe(`${DEFAULT_ASPECT_RATIO} / 1`);
+    expect(styleOf(portrait, "aspect-ratio")).toBe(`${3 / 4} / 1`);
+    expect(classes(portrait)).toEqual(
+      classesOf(aspectRatioAppearance({ class: "max-w-md" })),
+    );
+  });
+
+  it("preserves focusable caller content", () => {
+    const root = render(AspectRatio, {
+      ratio: 1,
+      children: createRawSnippet(() => ({
+        render: () => '<button type="button">Open media</button>',
+      })),
+    });
+    const button = root.querySelector<HTMLButtonElement>("button")!;
+
+    button.focus();
+    expect(document.activeElement).toBe(button);
+  });
+});
+
+describe("surface and separation composition", () => {
+  it("inherits a nested appearance without selecting any axis", () => {
+    const root = render(SurfaceSeparationConsumer);
+    const scope = root.querySelector<HTMLElement>("[data-surface-appearance-scope]")!;
+    const capabilities = scope.querySelectorAll<HTMLElement>(
+      "[data-card], [data-divider], [data-aspect-ratio]",
+    );
+
+    expect(scope.getAttribute("data-theme")).toBe("marketing");
+    expect(scope.getAttribute("data-color-scheme")).toBe("dark");
+    expect(scope.getAttribute("data-density")).toBe("compact");
+    expect(capabilities.length).toBeGreaterThanOrEqual(4);
+    for (const capability of capabilities) {
+      expect(capability.hasAttribute("data-theme")).toBe(false);
+      expect(capability.hasAttribute("data-color-scheme")).toBe(false);
+      expect(capability.hasAttribute("data-density")).toBe(false);
+    }
+  });
+});