@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/base/test/popover-link-preview-failures.test.ts

@@ -0,0 +1,43 @@
+import { flushSync } from "svelte";
+import { describe, expect, it } from "vitest";
+import PopoverLinkPreviewFailures from "./fixtures/PopoverLinkPreviewFailures.svelte";
+import { render } from "./mount";
+
+function viewportFailures(root: HTMLElement, viewportWidth: number): string[] {
+  const overlay = root.querySelector<HTMLElement>("[data-broken-overlay]")!;
+  const left = Number.parseFloat(overlay.style.left);
+  const width = Number.parseFloat(overlay.style.width);
+  return left + width <= viewportWidth ? [] : ["overlay escapes the viewport"];
+}
+
+describe("the deliberately failing Popover and LinkPreview fixtures", () => {
+  it("diagnoses an anchored overlay that escapes the viewport", () => {
+    const root = render(PopoverLinkPreviewFailures, { failure: "viewport-escape" });
+    expect(viewportFailures(root, 1024)).toEqual(["overlay escapes the viewport"]);
+  });
+
+  it("diagnoses an overlay that traps focus permanently", () => {
+    const root = render(PopoverLinkPreviewFailures, { failure: "permanent-focus-trap" });
+    root.querySelector<HTMLButtonElement>("[data-popover-trigger]")!.click();
+    flushSync();
+
+    const overlay = root.querySelector<HTMLElement>("[data-broken-overlay]")!;
+    const trapped = overlay.querySelector<HTMLButtonElement>("button")!;
+    trapped.focus();
+
+    const tab = new KeyboardEvent("keydown", {
+      key: "Tab",
+      bubbles: true,
+      cancelable: true,
+    });
+    trapped.dispatchEvent(tab);
+    overlay.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    flushSync();
+
+    expect(tab.defaultPrevented).toBe(true);
+    expect(document.activeElement).toBe(trapped);
+    expect(root.querySelector("[data-broken-overlay]") ? ["focus trap cannot be dismissed"] : []).toEqual([
+      "focus trap cannot be dismissed",
+    ]);
+  });
+});

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

@@ -0,0 +1,79 @@
+import { createRawSnippet, flushSync, tick } from "svelte";
+import { describe, expect, it } from "vitest";
+import { Popover, popover as popoverAppearance } from "@reddb-io/design-system/base";
+import { classes, classesOf, render } from "./mount";
+
+async function settle(): Promise<void> {
+  await tick();
+  await new Promise((resolve) => setTimeout(resolve, 10));
+  flushSync();
+}
+
+function surface(): HTMLElement | null {
+  return document.querySelector("[data-popover-surface]");
+}
+
+describe("the Base Popover", () => {
+  it("opens a labeled dialog from the canonical Button trigger", async () => {
+    const root = render(Popover, {
+      triggerLabel: "Deployment actions",
+      contentLabel: "Deployment actions",
+      children: createRawSnippet(() => ({
+        render: () => '<button type="button" data-action>Restart deployment</button>',
+      })),
+    });
+    const trigger = root.querySelector<HTMLButtonElement>("[data-popover-trigger]")!;
+
+    expect(trigger.tagName).toBe("BUTTON");
+    expect(trigger.getAttribute("aria-label")).toBe("Deployment actions");
+    expect(trigger.getAttribute("aria-haspopup")).toBe("dialog");
+    expect(classes(trigger).has("inline-flex")).toBe(true);
+
+    trigger.click();
+    await settle();
+
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    expect(surface()?.getAttribute("role")).toBe("dialog");
+    expect(surface()?.getAttribute("aria-label")).toBe("Deployment actions");
+    expect(trigger.getAttribute("aria-controls")).toBe(surface()?.id);
+  });
+
+  it("dismisses with Escape and returns focus to its trigger", async () => {
+    const root = render(Popover, {
+      triggerLabel: "Open filters",
+      contentLabel: "Filters",
+      children: createRawSnippet(() => ({
+        render: () => '<button type="button" data-filter>Apply filters</button>',
+      })),
+    });
+    const trigger = root.querySelector<HTMLButtonElement>("[data-popover-trigger]")!;
+    trigger.focus();
+    trigger.click();
+    await settle();
+
+    const action = document.querySelector<HTMLButtonElement>("[data-filter]")!;
+    expect(document.activeElement).toBe(action);
+    action.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await settle();
+
+    expect(surface()).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("uses collision-aware positioning and its exported token appearance", async () => {
+    render(Popover, {
+      triggerLabel: "Open details",
+      contentLabel: "Details",
+      open: true,
+      collisionPadding: 12,
+      class: "max-w-md",
+    });
+    await settle();
+    const element = surface()!;
+
+    expect(element.dataset.avoidCollisions).toBe("true");
+    expect(element.dataset.collisionPadding).toBe("12");
+    expect(classes(element)).toEqual(classesOf(popoverAppearance({ class: "max-w-md" })));
+    expect(classes(element).has("motion-reduce:transition-none")).toBe(true);
+  });
+});

package/vendor/ds/kits/base/test/progress-loading-failures.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import ProgressLoadingContractFailures from "./fixtures/ProgressLoadingContractFailures.svelte";
+import { render } from "./mount";
+
+describe("the deliberately failing progress and loading fixtures", () => {
+  it("demonstrates a determinate progress bar without an accessible value", () => {
+    const root = render(ProgressLoadingContractFailures, {
+      failure: "missing-progress-value",
+    });
+    const progress = root.querySelector<HTMLElement>("[data-broken-progress]")!;
+
+    expect(
+      root.querySelector<HTMLElement>("[data-broken-progress-fill]")!.style.width,
+    ).toBe("72%");
+    expect(progress.getAttribute("role")).toBe("progressbar");
+    expect(progress.hasAttribute("aria-valuenow")).toBe(false);
+  });
+
+  it("demonstrates a spinner that never announces that its region is busy", () => {
+    const root = render(ProgressLoadingContractFailures, { failure: "silent-spinner" });
+    const loading = root.querySelector<HTMLElement>("[data-broken-loading]")!;
+
+    expect(loading.querySelector("[data-broken-spinner]")).not.toBeNull();
+    expect(loading.getAttribute("role")).not.toBe("status");
+    expect(loading.hasAttribute("aria-busy")).toBe(false);
+  });
+});

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

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import {
+  Progress,
+  isDeterminate,
+  normalizeRange,
+  progress as progressAppearance,
+} from "./fixtures/progress-feedback-consumer";
+import ProgressFeedbackConsumer from "./fixtures/ProgressFeedbackConsumer.svelte";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the Base Progress", () => {
+  it("announces and draws the same normalized determinate value", () => {
+    const element = rendered(
+      render(Progress, { value: 125, min: 0, max: 100, label: "Deployment progress" }),
+    );
+    const indicator = element.querySelector<HTMLElement>("[data-progress-indicator]")!;
+
+    expect(element.getAttribute("role")).toBe("progressbar");
+    expect(element.getAttribute("aria-label")).toBe("Deployment progress");
+    expect(element.getAttribute("aria-valuenow")).toBe("100");
+    expect(element.getAttribute("aria-valuetext")).toBe("100%");
+    expect(indicator.style.width).toBe("100%");
+  });
+
+  it("represents indeterminate work without inventing a current value", () => {
+    const element = rendered(render(Progress, { label: "Preparing deployment" }));
+    const indicator = element.querySelector<HTMLElement>("[data-progress-indicator]")!;
+
+    expect(element.getAttribute("data-state")).toBe("indeterminate");
+    expect(element.hasAttribute("aria-valuenow")).toBe(false);
+    expect(element.getAttribute("aria-valuetext")).toBe("In progress");
+    expect(classes(indicator).has("motion-safe:animate-pulse")).toBe(true);
+    expect([...classes(indicator)].some((name) => name.startsWith("animate-"))).toBe(false);
+  });
+
+  it("can expose the accessible label and value as a visible summary", () => {
+    const determinate = rendered(render(Progress, {
+      value: 72,
+      label: "Deployment progress",
+      summary: true,
+    }));
+    expect(determinate.querySelector("[data-progress-summary]")?.textContent).toContain("Deployment progress");
+    expect(determinate.querySelector("[data-progress-summary]")?.textContent).toContain("72%");
+
+    const indeterminate = rendered(render(Progress, {
+      label: "Provisioning database",
+      summary: true,
+    }));
+    expect(indeterminate.querySelector("[data-progress-summary]")?.textContent).toContain("In progress");
+  });
+
+  it("shares one clamping contract with the other numeric feedback", () => {
+    expect(isDeterminate(0)).toBe(true);
+    expect(isDeterminate(undefined)).toBe(false);
+    expect(normalizeRange(-5, 0, 10)).toEqual({ min: 0, max: 10, value: 0, percent: 0 });
+    expect(normalizeRange(5, 10, 10)).toEqual({ min: 10, max: 11, value: 10, percent: 0 });
+  });
+
+  it("wears its extension seam and inherits nested appearance and Density", () => {
+    const root = render(ProgressFeedbackConsumer);
+    const scope = root.querySelector<HTMLElement>("[data-progress-feedback-scope]")!;
+    const element = scope.querySelector<HTMLElement>("[data-progress]")!;
+
+    expect(classes(element)).toEqual(classesOf(progressAppearance().root()));
+    expect(scope.getAttribute("data-density")).toBe("compact");
+    expect(element.hasAttribute("data-theme")).toBe(false);
+    expect(element.hasAttribute("data-color-scheme")).toBe(false);
+    expect(element.hasAttribute("data-density")).toBe(false);
+  });
+});

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

@@ -0,0 +1,138 @@
+// Prose: rendered CommonMark and GFM on the Theme's type roles (ADR 0025,
+// ADR 0027 "Documents: Prose and print").
+//
+// What is pinned here is the contract that does not need a browser: every
+// element of the CommonMark and GFM set has a rule, each rule reaches its
+// element through a zero-specificity `:where(&)` wrapper (so a Kit component
+// inside a document keeps its own look), the headings map onto roles and not
+// sizes, links are ink with a persistent underline, rhythm comes from the
+// layout tier, and the component selects no appearance axis. The rendered
+// result — markers, tables, print — is the showcase browser test's.
+
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import { PROSE_ELEMENTS, PROSE_MEASURES, Prose, prose } from "@reddb-io/design-system/base";
+import { SRC_DIR } from "../tools/paths";
+import { classes, render, rendered } from "./mount";
+
+const html = (markup: string) => createRawSnippet(() => ({ render: () => `<div>${markup}</div>` }));
+
+/** Every class Prose wears by default, split on whitespace. */
+const base = prose().split(/\s+/);
+
+/** The utilities a `[:where(&)_<selector>]:` variant applies to its element. */
+function rulesFor(selector: string): string[] {
+  const prefix = `[:where(&)_${selector}]:`;
+  return base.filter((name) => name.startsWith(prefix)).map((name) => name.slice(prefix.length));
+}
+
+describe("the Base Prose", () => {
+  it("offers DS-named measures and document elements", () => {
+    expect([...PROSE_MEASURES]).toEqual(["prose", "content", "full"]);
+    expect([...PROSE_ELEMENTS]).toEqual(["div", "article", "section"]);
+  });
+
+  it("renders its children under a data-prose root at the reading measure", () => {
+    const root = rendered(render(Prose, { children: html("<p>Copy</p>") }));
+    expect(root.tagName).toBe("DIV");
+    expect(root.hasAttribute("data-prose")).toBe(true);
+    expect(root.getAttribute("data-prose-measure")).toBe("prose");
+    expect(classes(root)).toContain("max-w-prose");
+    expect(classes(root)).toContain("text-body");
+    expect(classes(root)).toContain("text-foreground");
+    expect(root.querySelector("p")?.textContent).toBe("Copy");
+  });
+
+  it("takes its measure and element from props, never from an axis", () => {
+    for (const measure of PROSE_MEASURES) {
+      const root = rendered(render(Prose, { measure, as: "article", children: html("<p>x</p>") }));
+      expect(root.tagName).toBe("ARTICLE");
+      expect(root.getAttribute("data-prose-measure")).toBe(measure);
+      for (const attribute of ["data-theme", "data-color-scheme", "data-density"]) {
+        expect(root.hasAttribute(attribute), attribute).toBe(false);
+      }
+    }
+    expect(classes(rendered(render(Prose, { measure: "full", children: html("") })))).toContain("max-w-none");
+  });
+
+  it("tints alternate table rows only when striped", () => {
+    const stripe = "[:where(&)_tbody_tr:nth-child(even)]:bg-muted";
+    expect(classes(rendered(render(Prose, { children: html("") })))).not.toContain(stripe);
+    expect(classes(rendered(render(Prose, { striped: true, children: html("") })))).toContain(stripe);
+  });
+
+  it("has a rule for every CommonMark and GFM element", () => {
+    const elements = [
+      "h1", "h2", "h3", "h4", "h5", "h6", "a", "code", "kbd", "mark", "ul", "ol", "dt", "dd",
+      "blockquote", "pre", "hr", "img", "figcaption", "details", "summary", "table", "caption", "th", "td",
+    ];
+    const selectors = new Set(
+      base.flatMap((name) => /^\[:where\(&\)_(.+?)\]:/.exec(name)?.[1] ?? []),
+    );
+    const covered = (element: string) =>
+      [...selectors].some((selector) => new RegExp(`(^|[(,_])${element}(?=$|[),_:+>\\[])`).test(selector));
+    expect(elements.filter((element) => !covered(element))).toEqual([]);
+    // Task items, footnotes, strikethrough and alignment: the GFM extensions.
+    expect(rulesFor("li:has(>input[type=checkbox])")).toContain("list-none");
+    expect(rulesFor("li>input[type=checkbox]")).toContain("accent-primary");
+    expect(rulesFor("[data-footnotes]")).toContain("text-caption");
+    expect(rulesFor(":is(del,s)")).toContain("text-ink-muted");
+    expect(rulesFor("[align=center]")).toContain("text-center");
+    expect(rulesFor("[align=right]")).toContain("text-end");
+  });
+
+  it("styles descendants at zero specificity, so a Kit component inside keeps its own classes", () => {
+    const descendant = base.filter((name) => name.startsWith("["));
+    expect(descendant.length).toBeGreaterThan(100);
+    expect(descendant.filter((name) => !name.startsWith("[:where(&)"))).toEqual([]);
+  });
+
+  it("maps the outline onto the Theme's type roles, never onto a size step", () => {
+    expect(rulesFor("h1")).toContain("text-title");
+    expect(rulesFor("h2")).toContain("text-heading");
+    expect(rulesFor("h3")).toContain("text-heading");
+    expect(rulesFor("h4")).toEqual(expect.arrayContaining(["text-body", "font-bold"]));
+    expect(rulesFor("h5")).toEqual(expect.arrayContaining(["text-body", "font-medium"]));
+    expect(rulesFor("h6")).toEqual(expect.arrayContaining(["text-eyebrow", "text-ink-muted"]));
+    expect(rulesFor("figcaption")).toContain("text-caption");
+    const sizes = base.filter((name) => /:text-(?:xs|sm|base|lg|\d*xl|\[)/.test(name));
+    expect(sizes).toEqual([]);
+  });
+
+  it("draws links in ink with a persistent underline and the ink focus outline (WCAG 1.4.1, ADR 0023)", () => {
+    expect(rulesFor("a")).toEqual(expect.arrayContaining(["text-foreground", "underline"]));
+    expect(rulesFor("a:focus-visible")).toEqual(
+      expect.arrayContaining(["outline-2", "outline-offset-2", "outline-focus"]),
+    );
+    expect(base.some((name) => /_a[^\]]*\]:(?:text-primary|no-underline)/.test(name))).toBe(false);
+  });
+
+  it("keeps visible list markers at every depth", () => {
+    expect(rulesFor("ul")).toContain("list-disc");
+    expect(rulesFor("ul_ul")).toContain("list-[circle]");
+    expect(rulesFor("ol")).toContain("list-decimal");
+    expect(rulesFor("ol_ol")).toContain("list-[lower-alpha]");
+    expect(rulesFor("li::marker")).toContain("text-ink-muted");
+  });
+
+  it("takes vertical rhythm from Density's layout tier (ADR 0024)", () => {
+    expect(base.filter((name) => name.startsWith("[:where(&)>*+*]:"))).toEqual([
+      "[:where(&)>*+*]:mt-[var(--reddb-spatial-layout-gap-sm)]",
+    ]);
+    expect(rulesFor(":is(h1,h2)")).toContain("mt-[var(--reddb-spatial-layout-gap-lg)]");
+    const vertical = base.filter((name) => /:(?:mt|mb|my|pt|pb|py)-/.test(name));
+    // Block spacing is a Density role; only an inline run's own padding is
+    // typographic (`em`), because it hugs a glyph rather than separating blocks.
+    expect(
+      vertical.filter((name) => !/(?:-\[var\(--reddb-spatial-[a-z-]+\)\]|-0|-\[\d*\.?\d+em\])$/.test(name)),
+    ).toEqual([]);
+  });
+
+  it("is built from tv() descendant variants: no <style> block and no typography plugin", () => {
+    const source = readFileSync(join(SRC_DIR, "Prose.svelte"), "utf8");
+    expect(source).not.toMatch(/<style\b/);
+    expect(readFileSync(join(SRC_DIR, "prose.variants.ts"), "utf8")).not.toMatch(/@tailwindcss\/typography/);
+  });
+});

package/vendor/ds/kits/base/test/quiet-control.test.ts

@@ -0,0 +1,89 @@
+// The interaction-state contract for quiet controls (wave 6A).
+import { describe, expect, it } from "vitest";
+import * as base from "../src/index";
+import { button } from "../src/button.variants";
+import {
+  QUIET_FOCUS,
+  QUIET_HOVER,
+  QUIET_OPEN,
+  QUIET_PRESSED,
+  quietControl,
+} from "../src/quiet-control.variants";
+
+const set = (classes: string) => new Set(classes.split(/\s+/).filter(Boolean));
+
+describe("quietControl, the one interaction-state contract", () => {
+  it("draws rest, hover, pressed, open, focus and disabled the way DESIGN.md names them", () => {
+    const names = set(quietControl());
+    for (const name of [
+      "bg-transparent",
+      "hover:bg-foreground/8",
+      "active:bg-foreground/12",
+      "[&[aria-haspopup][aria-expanded=true]]:bg-foreground/10",
+      "focus-visible:outline-2",
+      "focus-visible:outline-offset-2",
+      "focus-visible:outline-focus",
+      "disabled:pointer-events-none",
+      "disabled:opacity-50",
+      "aria-disabled:opacity-50",
+      "text-ink-muted",
+      "hover:text-foreground",
+    ]) {
+      expect(names.has(name), name).toBe(true);
+    }
+    // States land at once: no transition eases a colour (or the focus outline).
+    expect([...names].some((name) => name.startsWith("transition"))).toBe(false);
+    // No opacity is ever a hover or press state.
+    expect([...names].some((name) => /(?:hover|active):opacity-/.test(name))).toBe(false);
+  });
+
+  it("makes pressed stronger than hover, and open between them", () => {
+    const alpha = (state: string) => Number(/\/(\d+)$/.exec(state)![1]);
+    expect(alpha(QUIET_PRESSED)).toBeGreaterThan(alpha(QUIET_HOVER));
+    expect(alpha(QUIET_OPEN)).toBeGreaterThan(alpha(QUIET_HOVER));
+    expect(alpha(QUIET_OPEN)).toBeLessThan(alpha(QUIET_PRESSED));
+  });
+
+  it("keeps a selected item on the selected surface under the pointer", () => {
+    const names = set(quietControl({ selected: true }));
+    expect(names.has("bg-foreground/10")).toBe(true);
+    expect(names.has("hover:bg-foreground/10")).toBe(true);
+    expect(names.has("hover:bg-foreground/8")).toBe(false);
+    expect(names.has("font-medium")).toBe(true);
+  });
+
+  it("insets the focus outline where a scroll region would clip it", () => {
+    const names = set(quietControl({ focus: "inset" }));
+    expect(names.has("focus-visible:-outline-offset-2")).toBe(true);
+    expect(names.has("focus-visible:outline-offset-2")).toBe(false);
+  });
+
+  it("lets a slot's geometry and resting colour win while the states stay", () => {
+    const names = set(quietControl({ ink: "foreground", class: "rounded-md bg-background px-[var(--reddb-spatial-inset-sm)]" }));
+    expect(names.has("bg-background")).toBe(true);
+    expect(names.has("bg-transparent")).toBe(false);
+    expect(names.has("hover:bg-foreground/8")).toBe(true);
+    expect(names.has("text-foreground")).toBe(true);
+  });
+
+  it("is what a ghost Button wears", () => {
+    const ghost = set(button({ variant: "ghost" }));
+    for (const state of [QUIET_HOVER, QUIET_PRESSED, QUIET_OPEN, ...QUIET_FOCUS.split(" ")]) {
+      expect(ghost.has(state), state).toBe(true);
+    }
+  });
+
+  it("gives every filled Button an opaque active fill, never an opacity", () => {
+    for (const tone of ["neutral", "info", "success", "warning", "danger"] as const) {
+      const names = [...set(button({ variant: "primary", tone }))];
+      expect(names.some((name) => /opacity-/.test(name) && /hover|active/.test(name)), tone).toBe(false);
+      const active = tone === "neutral" ? "bg-primary-active" : `bg-feedback-${tone}-fill-active`;
+      for (const state of ["hover", "active", "aria-expanded"]) expect(names, `${tone} ${state}`).toContain(`${state}:${active}`);
+    }
+  });
+
+  it("is exported to every child Kit through the Base barrel", () => {
+    expect(base.quietControl).toBe(quietControl);
+    expect(base.QUIET_HOVER).toBe(QUIET_HOVER);
+  });
+});

package/vendor/ds/kits/base/test/radial-progress.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import {
+  RADIAL_PROGRESS_SIZES,
+  RadialProgress,
+  radialProgress as radialProgressAppearance,
+} from "./fixtures/progress-feedback-consumer";
+import ProgressFeedbackConsumer from "./fixtures/ProgressFeedbackConsumer.svelte";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("the Base RadialProgress", () => {
+  it("uses the linear progress value contract around a non-color arc", () => {
+    const element = rendered(
+      render(RadialProgress, { value: 64, label: "Indexing progress" }),
+    );
+    const indicator = element.querySelector<SVGCircleElement>("circle:last-of-type")!;
+
+    expect(element.getAttribute("role")).toBe("progressbar");
+    expect(element.getAttribute("aria-valuenow")).toBe("64");
+    expect(element.getAttribute("aria-valuetext")).toBe("64%");
+    expect(element.querySelector("span")!.textContent).toBe("64%");
+    expect(indicator.getAttribute("stroke-dashoffset")).toBe("36");
+  });
+
+  it("supports indeterminate radial work without exposing a false value", () => {
+    const element = rendered(render(RadialProgress, { label: "Indexing" }));
+    const svg = element.querySelector("svg")!;
+
+    expect(element.hasAttribute("aria-valuenow")).toBe(false);
+    expect(element.getAttribute("aria-valuetext")).toBe("In progress");
+    expect(classes(svg).has("motion-safe:animate-spin")).toBe(true);
+    expect([...classes(svg)].some((name) => name.startsWith("animate-"))).toBe(false);
+  });
+
+  it("offers a closed graphic size vocabulary", () => {
+    expect(RADIAL_PROGRESS_SIZES).toEqual(["sm", "md", "lg"]);
+    for (const size of RADIAL_PROGRESS_SIZES) {
+      const element = rendered(render(RadialProgress, { value: 50, size }));
+      expect(classes(element)).toEqual(
+        classesOf(radialProgressAppearance({ size }).root()),
+      );
+    }
+  });
+
+  it("inherits nested appearance without selecting an axis", () => {
+    const root = render(ProgressFeedbackConsumer);
+    const element = root.querySelector<HTMLElement>("[data-radial-progress]")!;
+
+    expect(element.hasAttribute("data-theme")).toBe(false);
+    expect(element.hasAttribute("data-color-scheme")).toBe(false);
+    expect(element.hasAttribute("data-density")).toBe(false);
+  });
+});

package/vendor/ds/kits/base/test/radio-cards.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it, vi } from "vitest";
+import { flushSync } from "svelte";
+import RadioGroup from "../src/RadioGroup.svelte";
+import { render } from "./mount";
+
+describe("RadioGroup rich choices",()=>{
+  it("keeps native labels, shared names, descriptions and unavailable reasons",()=>{
+    const changed=vi.fn();const root=render(RadioGroup,{legend:"Topology",name:"topology",variant:"cards",value:"single",help:"Choose one topology.",required:true,onvaluechange:changed,options:[
+      {value:"single",label:"Single node",description:"For development."},
+      {value:"replicated",label:"Replicated",description:"For failover."},
+      {value:"multi",label:"Multi-region",description:"Enable another region first.",disabled:true},
+    ]});
+    const radios=root.querySelectorAll<HTMLInputElement>('input[type="radio"]');
+    expect([...radios].map(radio=>radio.name)).toEqual(["topology","topology","topology"]);
+    expect(radios[0]!.checked).toBe(true);expect(radios[2]!.disabled).toBe(true);
+    const descriptions=radios[2]!.getAttribute("aria-describedby")!.split(" ").map(id=>document.getElementById(id)?.textContent);
+    expect(descriptions).toEqual(["Choose one topology.","Enable another region first."]);
+    radios[1]!.click();flushSync();expect(changed).toHaveBeenCalledExactlyOnceWith("replicated");expect(radios[0]!.checked).toBe(false);
+    expect(radios[1]!.required).toBe(true);
+  });
+});