@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/app/test/sidebar-layout.test.ts

@@ -0,0 +1,133 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import SidebarLayout from "../src/composites/SidebarLayout.svelte";
+import { sidebarLayout } from "../src/composites/sidebar-layout.variants";
+import ApplicationLayoutsContractFailures from "./fixtures/ApplicationLayoutsContractFailures.svelte";
+import ApplicationLayoutsConsumer from "./fixtures/ApplicationLayoutsConsumer.svelte";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const snippet = (html: string) => createRawSnippet(() => ({ render: () => html }));
+
+describe("the deliberately failing Sidebar layout fixture", () => {
+  it("diagnoses a sidebar arrangement that loses its main landmark", () => {
+    const root = render(ApplicationLayoutsContractFailures, { failure: "sidebar-without-main" });
+
+    expect(root.querySelector("aside")).not.toBeNull();
+    expect(root.querySelector("[data-broken-sidebar-main]")).not.toBeNull();
+    expect(root.querySelector("main")).toBeNull();
+  });
+});
+
+describe("SidebarLayout", () => {
+  it("pairs a named complementary landmark with one focusable main landmark", () => {
+    const layout = rendered(
+      render(SidebarLayout, {
+        sidebarLabel: "Workspace navigation",
+        sidebar: snippet('<a href="/nodes">Nodes</a>'),
+        children: snippet("<h1>Node alpha</h1>"),
+      }),
+    );
+    const aside = layout.querySelector<HTMLElement>("aside")!;
+    const main = layout.querySelector<HTMLElement>("main")!;
+
+    expect(aside.getAttribute("aria-label")).toBe("Workspace navigation");
+    expect(aside.querySelector("a")?.getAttribute("href")).toBe("/nodes");
+    expect(main.id).toBe("main-content");
+    expect(main.tabIndex).toBe(-1);
+    expect(main.textContent).toBe("Node alpha");
+    expect(layout.querySelectorAll("main")).toHaveLength(1);
+  });
+
+  it("keeps landmark and focus order aligned when the sidebar changes sides", () => {
+    const content = {
+      sidebar: snippet('<button type="button">Navigation</button>'),
+      children: snippet('<button type="button">Workspace</button>'),
+    };
+    const start = rendered(render(SidebarLayout, { ...content, side: "start" }));
+    const end = rendered(render(SidebarLayout, { ...content, side: "end" }));
+
+    expect([...start.children].map((child) => child.tagName)).toEqual(["ASIDE", "MAIN"]);
+    expect([...end.children].map((child) => child.tagName)).toEqual(["MAIN", "ASIDE"]);
+    expect([...end.querySelectorAll("button")].map((button) => button.textContent)).toEqual([
+      "Workspace",
+      "Navigation",
+    ]);
+    expect(classes(end)).toEqual(classesOf(sidebarLayout({ side: "end" }).root()));
+  });
+
+  it("composes canonical Stacks and routes structural spacing through Density", () => {
+    const layout = rendered(
+      render(SidebarLayout, {
+        gap: "lg",
+        sidebar: snippet("<p>Navigation</p>"),
+        children: snippet("<p>Workspace</p>"),
+      }),
+    );
+
+    // The gutter is the layout tier (ADR 0024); the regions' rhythm is the
+    // caller's chosen Stack gap.
+    expect(classes(layout).has("gap-[var(--reddb-spatial-layout-gap-md)]")).toBe(true);
+    for (const region of layout.children) {
+      const stack = region.querySelector<HTMLElement>("[data-stack]")!;
+      expect(stack).not.toBeNull();
+      expect(classes(stack).has("gap-[var(--reddb-spatial-gap-lg)]")).toBe(true);
+      expect(stack.hasAttribute("data-density")).toBe(false);
+    }
+  });
+
+  it("takes the consumer's target id, native attributes, and local class", () => {
+    const layout = rendered(
+      render(SidebarLayout, {
+        id: "workspace-layout",
+        class: "relative",
+        mainId: "workspace-content",
+      }),
+    );
+
+    expect(layout.id).toBe("workspace-layout");
+    expect(layout.querySelector("main")?.id).toBe("workspace-content");
+    expect(classes(layout)).toEqual(
+      classesOf(sidebarLayout({ side: "start" }).root({ class: "relative" })),
+    );
+  });
+
+  it("compiles at the public export and inherits every nested appearance axis", () => {
+    const root = render(ApplicationLayoutsConsumer);
+    const layout = root.querySelector<HTMLElement>("[data-sidebar-layout]")!;
+
+    expect(layout.closest('[data-theme="base"][data-color-scheme="dark"][data-density="compact"]'))
+      .not.toBeNull();
+    expect(layout.hasAttribute("data-theme")).toBe(false);
+    expect(layout.hasAttribute("data-color-scheme")).toBe(false);
+    expect(layout.hasAttribute("data-density")).toBe(false);
+    // Inside the consumer's ApplicationShell the shell owns the one <main>
+    // (wave 5A); the layout's region keeps the caller's focus-target id.
+    expect(root.querySelectorAll("main")).toHaveLength(1);
+    expect(layout.querySelectorAll("main")).toHaveLength(0);
+    expect(layout.querySelector("#deployment-content")?.tagName).toBe("DIV");
+  });
+
+  it("opts primary rails into visible labels while preserving destinations and mobile labels", () => {
+    const navigation = [
+      { id: "users", label: "Users", fallback: "US", href: "/users" },
+      { id: "settings", label: "Application settings", fallback: "AS", href: "/settings" },
+    ];
+    for (const showRailLabels of [false, true]) {
+      const layout = render(SidebarLayout, { navigation, currentId: "users", showRailLabels });
+      const rail = layout.querySelector("[data-primary-navigation-rail]")!;
+      expect(rail.querySelectorAll("[data-sidebar-rail-label]")).toHaveLength(showRailLabels ? 2 : 0);
+      if (showRailLabels) expect([...rail.querySelectorAll("[data-sidebar-rail-label]")].map(label => label.textContent))
+        .toEqual(navigation.map(item => item.label));
+      expect(rail.querySelector('[data-sidebar-rail-item="users"]')?.getAttribute("href")).toBe("/users");
+      expect(rail.querySelector('[data-sidebar-rail-item="users"]')?.getAttribute("aria-current")).toBe("page");
+      const dock = layout.querySelector("[data-primary-navigation-bottom]")!;
+      expect(dock.textContent).toContain("Users");
+      expect(dock.textContent).toContain("Application settings");
+    }
+  });
+
+  it("ships complete showcase, consumer, distributed export, and readiness evidence", () => {
+    expectLayoutReadiness("sidebar-layout", "SidebarLayout");
+  });
+});

package/vendor/ds/kits/app/test/sidebar-navigation-bottom-navigation-store-navigation.test.ts

@@ -0,0 +1,245 @@
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import BottomNavigation from "../src/composites/BottomNavigation.svelte";
+import SidebarNavigation from "../src/composites/SidebarNavigation.svelte";
+import StoreNavigation from "../src/composites/StoreNavigation.svelte";
+import { bottomNavigation } from "../src/composites/bottom-navigation.variants";
+import { navigationItems } from "../src/composites/navigation.behavior";
+import { sidebarNavigation } from "../src/composites/sidebar-navigation.variants";
+import { storeNavigation } from "../src/composites/store-navigation.variants";
+import NavigationSurfacesConsumer from "./fixtures/NavigationSurfacesConsumer.svelte";
+import NavigationContractFailures from "./fixtures/NavigationContractFailures.svelte";
+import TestGlyph from "./fixtures/TestGlyph.svelte";
+import { render, rendered } from "./mount";
+
+const ITEMS = [
+  { id: "overview", label: "Overview", href: "/overview" },
+  { id: "activity", label: "Activity", href: "/activity" },
+  { id: "settings", label: "Settings", href: "/settings" },
+] as const;
+const REPO_ROOT = join(import.meta.dirname, "..", "..", "..");
+
+describe("the shared current-item contract", () => {
+  it("rejects navigation unless currentId identifies exactly one destination", () => {
+    expect(() => navigationItems(ITEMS, "missing")).toThrow(
+      'currentId "missing" must identify exactly one navigation item',
+    );
+    expect(() =>
+      navigationItems([...ITEMS, { id: "overview", label: "Duplicate", href: "/duplicate" }], "overview"),
+    ).toThrow('currentId "overview" must identify exactly one navigation item');
+  });
+});
+
+describe("the deliberately failing navigation fixtures", () => {
+  it("exposes sidebar navigation with no announced current item", () => {
+    const broken = rendered(
+      render(NavigationContractFailures, { failure: "sidebar-without-current" }),
+    );
+
+    expect(broken.querySelectorAll('[aria-current="page"]')).toHaveLength(0);
+  });
+
+  it("exposes a bottom bar with no keyboard-reachable destination", () => {
+    const broken = rendered(
+      render(NavigationContractFailures, { failure: "bottom-unreachable-by-keyboard" }),
+    );
+
+    expect(broken.querySelectorAll('a[href], button, [tabindex="0"]')).toHaveLength(0);
+  });
+});
+
+describe("BottomNavigation", () => {
+  it("keeps every destination in native focus order and announces the current one", () => {
+    const navigation = rendered(
+      render(BottomNavigation, {
+        label: "Primary",
+        items: ITEMS,
+        currentId: "overview",
+      }),
+    );
+    const links = [...navigation.querySelectorAll<HTMLAnchorElement>("[data-navigation-item]")];
+
+    expect(navigation.tagName).toBe("NAV");
+    expect(links.map((link) => link.tabIndex)).toEqual([0, 0, 0]);
+    for (const link of links) {
+      link.focus();
+      expect(document.activeElement).toBe(link);
+    }
+    expect(links.map((link) => link.getAttribute("aria-current"))).toEqual([
+      "page",
+      null,
+      null,
+    ]);
+  });
+});
+
+describe("navigation destination glyphs", () => {
+  it("draws an optional glyph through the Base Icon contract on sidebar and bottom surfaces", () => {
+    const items = [
+      { id: "overview", label: "Overview", href: "/overview", icon: TestGlyph },
+      { id: "activity", label: "Activity", href: "/activity" },
+    ];
+
+    for (const surface of [SidebarNavigation, BottomNavigation]) {
+      const navigation = rendered(
+        render(surface, { label: "Primary", items, currentId: "overview" }),
+      );
+      const [withGlyph, withoutGlyph] = [
+        ...navigation.querySelectorAll<HTMLElement>("[data-navigation-item]"),
+      ];
+
+      expect(withGlyph?.querySelector("svg[data-icon]")?.getAttribute("aria-hidden")).toBe("true");
+      expect(withGlyph?.querySelector("svg[data-icon]")?.getAttribute("color")).toBe(
+        "var(--reddb-color-foreground)",
+      );
+      expect(withGlyph?.textContent?.trim()).toBe("Overview");
+      expect(withoutGlyph?.querySelector("svg")).toBeNull();
+      expect(withoutGlyph?.querySelector('[aria-hidden="true"]')).toBeNull();
+    }
+  });
+});
+
+describe("StoreNavigation", () => {
+  it("composes the canonical Navbar around caller-owned store regions and one current item", () => {
+    const navigation = rendered(
+      render(StoreNavigation, {
+        label: "Store",
+        items: ITEMS,
+        currentId: "settings",
+        collapse: "expanded",
+        announcement: createRawSnippet(() => ({ render: () => "<span>Free delivery</span>" })),
+        brand: createRawSnippet(() => ({ render: () => '<a href="/">Acme</a>' })),
+        actions: createRawSnippet(() => ({ render: () => '<a href="/cart">Cart</a>' })),
+      }),
+    );
+    const navbar = navigation.querySelector<HTMLElement>("[data-navbar]")!;
+    const links = [...navbar.querySelectorAll<HTMLAnchorElement>("[data-navbar-link]")];
+
+    expect(navigation.dataset.storeNavigation).toBe("");
+    expect(navigation.firstElementChild?.dataset.storeAnnouncement).toBe("");
+    expect(navigation.firstElementChild?.textContent).toBe("Free delivery");
+    expect(navbar.getAttribute("aria-label")).toBe("Store");
+    expect(navbar.querySelector('[data-navbar-region="brand"]')?.textContent).toBe("Acme");
+    expect(navbar.querySelector('[data-navbar-region="actions"]')?.textContent).toBe("Cart");
+    expect(links.map((link) => link.getAttribute("aria-current"))).toEqual([
+      null,
+      null,
+      "page",
+    ]);
+  });
+});
+
+describe("the three navigation surfaces as a public consumer", () => {
+  it("compile together and inherit every nested appearance axis", () => {
+    const scope = rendered(render(NavigationSurfacesConsumer));
+    const surfaces = scope.querySelectorAll<HTMLElement>(
+      "[data-sidebar-navigation], [data-bottom-navigation], [data-store-navigation]",
+    );
+
+    expect(scope.matches('[data-theme="application"][data-color-scheme="dark"][data-density="compact"]'))
+      .toBe(true);
+    expect(surfaces).toHaveLength(3);
+    for (const surface of surfaces) {
+      expect(surface.hasAttribute("data-theme")).toBe(false);
+      expect(surface.hasAttribute("data-color-scheme")).toBe(false);
+      expect(surface.hasAttribute("data-density")).toBe(false);
+    }
+    expect([...scope.querySelectorAll<HTMLAnchorElement>("a[href]")].every((link) => link.tabIndex === 0))
+      .toBe(true);
+  });
+
+  it("route every spatial value through Density-owned roles", () => {
+    for (const classes of [
+      sidebarNavigation().list(),
+      sidebarNavigation().item(),
+      bottomNavigation().list(),
+      bottomNavigation().item(),
+      storeNavigation().announcement(),
+    ]) {
+      expect(classes).toContain("var(--reddb-spatial-");
+      expect(classes).not.toMatch(/(?:^|\s)(?:h|p[trblxy]?|gap)-[1-9]/);
+    }
+  });
+});
+
+describe("navigation release readiness", () => {
+  const capabilities = [
+    ["sidebar-navigation", "SidebarNavigation"],
+    ["bottom-navigation", "BottomNavigation"],
+    ["store-navigation", "StoreNavigation"],
+  ] as const;
+
+  for (const [id, exported] of capabilities) {
+    it(`${id} is implemented, showcased, consumer-compiled, and distributed`, () => {
+      const definitions = JSON.parse(
+        readFileSync(join(REPO_ROOT, "scripts", "producer", "readiness.json"), "utf8"),
+      ) as Array<{
+        id: string;
+        baselineDisposition: string;
+        canonicalKit: string;
+        export: string;
+        evidence: Record<string, string[]>;
+      }>;
+      const definition = definitions.find((candidate) => candidate.id === id);
+
+      expect(definition).toMatchObject({
+        id,
+        baselineDisposition: "implemented",
+        canonicalKit: "application",
+        export: exported,
+      });
+      expect(Object.keys(definition!.evidence).sort()).toEqual([
+        "accessibility",
+        "appearance",
+        "behavior",
+        "consumerCompilation",
+        "documentation",
+        "showcase",
+      ]);
+      for (const paths of Object.values(definition!.evidence)) {
+        expect(paths.length).toBeGreaterThan(0);
+        for (const path of paths) expect(existsSync(join(REPO_ROOT, path)), path).toBe(true);
+      }
+
+      const snapshot = JSON.parse(
+        readFileSync(
+          join(REPO_ROOT, "packages", "baseline", "snapshot", "baseline-v1.json"),
+          "utf8",
+        ),
+      ) as { capabilities: Array<{ id: string; classification: string; status: string }> };
+      expect(snapshot.capabilities.find((capability) => capability.id === id)).toMatchObject({
+        classification: "application",
+        status: "implemented",
+      });
+
+      const barrel = readFileSync(join(REPO_ROOT, "kits", "app", "src", "index.ts"), "utf8");
+      expect(barrel).toContain(`export { default as ${exported} }`);
+    });
+  }
+});
+
+describe("SidebarNavigation", () => {
+  it("renders a named native navigation list with exactly one current item", () => {
+    const navigation = rendered(
+      render(SidebarNavigation, {
+        label: "Workspace",
+        items: ITEMS,
+        currentId: "activity",
+      }),
+    );
+    const links = [...navigation.querySelectorAll<HTMLAnchorElement>("[data-navigation-item]")];
+
+    expect(navigation.tagName).toBe("NAV");
+    expect(navigation.getAttribute("aria-label")).toBe("Workspace");
+    expect(navigation.querySelector("ul")?.children).toHaveLength(3);
+    expect(links.map((link) => link.getAttribute("href"))).toEqual([
+      "/overview",
+      "/activity",
+      "/settings",
+    ]);
+    expect(links.filter((link) => link.getAttribute("aria-current") === "page"))
+      .toEqual([links[1]]);
+  });
+});

package/vendor/ds/kits/app/test/sidebar-panel.test.ts

@@ -0,0 +1,29 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import SidebarPanel from "../src/composites/SidebarPanel.svelte";
+import { render, rendered } from "./mount";
+
+describe("contextual sidebar panel", () => {
+  it("offers only requested actions and a named scrolling body", () => {
+    const ondismiss = vi.fn();
+    const root = rendered(render(SidebarPanel, { title: "Workspace", backHref: "/workspaces", backLabel: "All workspaces", ondismiss }));
+    expect(root.querySelector('a[href="/workspaces"]')?.textContent).toContain("All workspaces");
+    root.querySelector<HTMLButtonElement>('button[aria-label="Close Workspace"]')!.click();
+    expect(ondismiss).toHaveBeenCalledTimes(1);
+    const body = root.querySelector('[data-scroll-area]');
+    expect(body?.getAttribute("aria-label")).toBe("Workspace items");
+    expect(body?.getAttribute("tabindex")).toBe("0");
+  });
+  it("replaces both default contextual controls when a toolbar is provided", () => {
+    const toolbar = createRawSnippet(() => ({ render: () => '<a href="/custom">Custom context</a>' }));
+    const root = rendered(render(SidebarPanel, { title: "Workspace", backHref: "/workspaces", ondismiss: vi.fn(), toolbar }));
+    const row = root.querySelector('[data-sidebar-panel-toolbar]')!;
+    expect(row.querySelectorAll("a,button")).toHaveLength(1);
+    expect(row.querySelector('a')?.getAttribute("href")).toBe("/custom");
+    expect(row.querySelector("button")).toBeNull();
+  });
+  it("adds no automatic contextual controls to a content-only panel", () => {
+    const root = rendered(render(SidebarPanel, { title: "Workspace" }));
+    expect(root.querySelector('[data-sidebar-panel-toolbar]')).toBeNull();
+  });
+});