@reddb-io/ui-kit 0.3.4 → 0.3.5

package/vendor/ds/kits/base/src/switch.variants.ts

@@ -0,0 +1,20 @@
+// Switch's optional appearance seam. The native checkbox supplies binary and
+// form semantics; the moving thumb makes that state visible without color.
+
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const switchControl = tv({
+  base: [
+    "relative h-[var(--reddb-spatial-control-height-sm)] w-[max(var(--reddb-spatial-target-min),calc(var(--reddb-spatial-switch-track-height)*1.75))] shrink-0 appearance-none",
+    "cursor-pointer rounded-full border-0 bg-transparent",
+    "after:pointer-events-none after:absolute after:start-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 rtl:after:translate-x-1/2",
+    "after:h-[var(--reddb-spatial-switch-track-height)] after:w-[calc(var(--reddb-spatial-switch-track-height)*1.75)] after:rounded-full after:border after:border-control-edge after:bg-muted checked:after:bg-primary enabled:hover:after:border-foreground enabled:checked:hover:after:bg-primary-active",
+    "before:pointer-events-none before:absolute before:z-10 before:top-1/2 before:-translate-y-1/2 before:start-[calc(50%-var(--reddb-spatial-switch-track-height)*0.875+(var(--reddb-spatial-switch-track-height)-var(--reddb-spatial-switch-thumb-size))*0.5)]",
+    "before:h-[var(--reddb-spatial-switch-thumb-size)] before:aspect-square before:rounded-full before:bg-ink-muted checked:before:bg-on-primary before:transition-transform checked:before:translate-x-[calc(var(--reddb-spatial-switch-track-height)*0.75)] rtl:checked:before:-translate-x-[calc(var(--reddb-spatial-switch-track-height)*0.75)]",
+    "motion-reduce:before:transition-none",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    "aria-invalid:after:border-feedback-danger-border disabled:cursor-not-allowed disabled:opacity-50",
+  ].join(" "),
+});
+
+export type SwitchVariants = VariantProps<typeof switchControl>;

package/vendor/ds/kits/base/src/table.variants.ts

@@ -0,0 +1,31 @@
+// Table's token-only appearance seam; native table elements own semantics.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const table = tv({
+  slots: {
+    root: [
+      // A wide native table must not enlarge an ancestor grid/flex item's
+      // automatic minimum width. Isolate its inline intrinsic size while
+      // retaining native block sizing, sticky headers and scroll behavior.
+      "min-w-0 max-w-full overflow-x-auto rounded-md [contain:inline-size]",
+      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    ].join(" "),
+    table: "w-full min-w-max text-left text-sm text-foreground",
+    caption: [
+      "caption-top px-[var(--reddb-spatial-inset-md)]",
+      "pb-[var(--reddb-spatial-inset-sm)] text-left font-medium text-foreground",
+    ].join(" "),
+    header: "sticky top-0 z-10 border-b border-elevation-sunken-border bg-elevation-sunken-surface shadow-elevation-sunken",
+    row: "border-b border-muted",
+    head: [
+      "px-[var(--reddb-spatial-inset-md)] py-[var(--reddb-spatial-inset-sm)]",
+      "align-middle font-medium text-foreground",
+    ].join(" "),
+    cell: [
+      "px-[var(--reddb-spatial-inset-md)] py-[var(--reddb-spatial-inset-sm)]",
+      "align-middle text-foreground",
+    ].join(" "),
+  },
+});
+
+export type TableVariants = VariantProps<typeof table>;

package/vendor/ds/kits/base/src/tabs.variants.ts

@@ -0,0 +1,32 @@
+// Tabs' token-only appearance seam; Bits UI owns selection and roving focus.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export interface TabItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export const tabs = tv({
+  slots: {
+    root: "min-w-0",
+    list: "flex flex-wrap gap-[var(--reddb-spatial-gap-sm)] border-b border-muted",
+    // The active tab wears the shared selection language (DESIGN.md,
+    // "Interactive states"): a neutral surface, full-weight ink, and a 2px
+    // ink underline on the edge it shares with the list's rule. Every
+    // trigger carries the same 2px edge — transparent until active — so
+    // selecting a tab moves nothing.
+    trigger: [
+      "-mb-px h-[var(--reddb-spatial-control-height-sm)] rounded-b-none border-0 border-b-2 border-transparent",
+      "data-[state=active]:border-foreground data-[state=active]:bg-foreground/10",
+      "data-[state=active]:font-medium data-[state=active]:text-foreground",
+      "data-[state=inactive]:text-ink-muted",
+    ].join(" "),
+    content: [
+      "py-[var(--reddb-spatial-inset-md)] text-foreground",
+      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    ].join(" "),
+  },
+});
+
+export type TabsVariants = VariantProps<typeof tabs>;

package/vendor/ds/kits/base/src/text.variants.ts

@@ -0,0 +1,51 @@
+// Text: running copy in one of the Theme's reading roles (ADR 0025).
+//
+// Body is the reading role; caption is the smaller, supporting one. Size, line
+// height, tracking and weight are the role's, so Application reads at 14px,
+// Marketing at 18px and a document at 16px with no prop changing.
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+
+const ROLE = {
+  body: "text-body",
+  caption: "text-caption",
+} as const;
+
+/**
+ * Ink, or the secondary reading role (`ink-muted`, never the `muted` surface).
+ * It is `ink`, not `tone`: `tone` is the semantic vocabulary (ADR 0026).
+ */
+const INK = {
+  default: "text-foreground",
+  muted: "text-ink-muted",
+} as const;
+
+export const text = tv(
+  {
+    base: "",
+    variants: { role: ROLE, ink: INK },
+    defaultVariants: { role: "body", ink: "default" },
+  },
+  typeRoleMerge,
+);
+
+export type TextVariants = VariantProps<typeof text>;
+export type TextRole = NonNullable<TextVariants["role"]>;
+export type TextInk = NonNullable<TextVariants["ink"]>;
+export const TEXT_ROLES = Object.keys(ROLE) as readonly TextRole[];
+export const TEXT_INKS = Object.keys(INK) as readonly TextInk[];
+/** The elements Text may render: block copy, an inline run, or fine print. */
+export const TEXT_ELEMENTS = ["p", "span", "div", "small"] as const;
+export type TextElement = (typeof TEXT_ELEMENTS)[number];
+
+/** A caption supports what it sits under, so it reads muted unless told otherwise. */
+export function defaultTextInk(role: TextRole): TextInk {
+  return role === "caption" ? "muted" : "default";
+}
+
+/** @deprecated Text's ink is `ink` (ADR 0026); use `TextInk`. Removed next release. */
+export type TextTone = TextInk;
+/** @deprecated Text's ink is `ink` (ADR 0026); use `TEXT_INKS`. Removed next release. */
+export const TEXT_TONES = TEXT_INKS;
+/** @deprecated Text's ink is `ink` (ADR 0026); use `defaultTextInk`. Removed next release. */
+export const defaultTextTone = defaultTextInk;

package/vendor/ds/kits/base/src/textarea.variants.ts

@@ -0,0 +1,19 @@
+// Textarea's public appearance seam. The native multiline behavior stays in
+// the element; consumers can extend this appearance without copying it.
+
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+
+export const textarea = tv({
+  base: [
+    "flex min-h-[var(--reddb-spatial-control-height-lg)] w-full resize-y",
+    "rounded-md border border-control-edge bg-background",
+    "px-[var(--reddb-spatial-inset-md)] py-[var(--reddb-spatial-inset-sm)]",
+    "text-editable-md text-foreground placeholder:text-ink-muted",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    "aria-invalid:border-feedback-danger-border",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+  ].join(" "),
+}, typeRoleMerge);
+
+export type TextareaVariants = VariantProps<typeof textarea>;

package/vendor/ds/kits/base/src/time-field.variants.ts

@@ -0,0 +1,21 @@
+// TimeField's appearance seam composes the canonical Field and Input skins;
+// only the segmented clock arrangement is new.
+
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+import { field } from "./field.variants";
+import { input } from "./input.variants";
+
+export const timeField = tv({
+  slots: {
+    root: field().root(),
+    segments: "flex items-center gap-[var(--reddb-spatial-gap-sm)]",
+    segment: [
+      input(),
+      "w-[var(--reddb-spatial-control-height-md)] px-0 text-center tabular-nums",
+    ].join(" "),
+    separator: "text-foreground",
+  },
+}, typeRoleMerge);
+
+export type TimeFieldVariants = VariantProps<typeof timeField>;

package/vendor/ds/kits/base/src/time-range-field.variants.ts

@@ -0,0 +1,21 @@
+// TimeRangeField composes Fieldset and TimeField; this seam only owns the
+// relationship between the two fields and the group's supporting text.
+
+import { tv, type VariantProps } from "tailwind-variants";
+import { fieldset } from "./fieldset.variants";
+
+export const timeRangeField = tv({
+  slots: {
+    root: fieldset().root(),
+    // The pair answers to the width it is given, not the window (ADR 0021):
+    // side by side from the DS's `md` container step (28rem), stacked below.
+    // The size container is a wrapper of its own, so the native fieldset —
+    // the component's root — keeps its rendering and its intrinsic width.
+    frame: "@container/range-field min-w-0",
+    fields: "grid gap-[var(--reddb-spatial-layout-gap-sm)] @md/range-field:grid-cols-2",
+    help: fieldset().help(),
+    error: fieldset().error(),
+  },
+});
+
+export type TimeRangeFieldVariants = VariantProps<typeof timeRangeField>;

package/vendor/ds/kits/base/src/timeline.variants.ts

@@ -0,0 +1,22 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const timeline = tv({
+  slots: {
+    root: "m-0 grid list-none gap-[var(--reddb-spatial-gap-md)] ps-0 text-foreground",
+    // The connector is placed from the marker's own size, named once, instead of
+    // offsets that only happened to match a 12px dot (0.3125rem, top-4).
+    item: "group relative grid min-w-0 grid-cols-[auto_1fr] gap-[var(--reddb-spatial-gap-sm)] [--timeline-marker:0.75rem]",
+    marker: [
+      "mt-1 size-[var(--timeline-marker)] rounded-full border-2 border-foreground bg-background",
+      "after:absolute after:bottom-[calc(-1*var(--reddb-spatial-gap-md))] after:start-[calc(var(--timeline-marker)/2-0.5px)]",
+      "after:top-[calc(0.25rem+var(--timeline-marker))] after:border-s after:border-muted",
+      "group-last:after:hidden",
+    ].join(" "),
+    content: "grid min-w-0 gap-[var(--reddb-spatial-gap-sm)]",
+    time: "font-mono text-sm tabular-nums text-ink-muted",
+    title: "font-medium text-foreground",
+    description: "m-0 text-sm text-ink-muted",
+  },
+});
+
+export type TimelineVariants = VariantProps<typeof timeline>;

package/vendor/ds/kits/base/src/toggle-button.variants.ts

@@ -0,0 +1,26 @@
+// ToggleButton extends canonical Button appearance with a perceivable pressed state.
+//
+// Pressed is a selection, not the view's primary action, so it wears the
+// shared selection language (DESIGN.md, "Interactive states"): a neutral
+// surface, full-weight foreground ink, and a 2px ink indicator on the bottom
+// edge. The indicator is ink, not the Brand red, because it is the non-text
+// mark of the state and must hold 3:1 (WCAG 1.4.11) against the pressed
+// surface in every appearance: the red edge measured 2.76:1 on the Marketing
+// light surface (wave 5A). The Brand red never fills a pressed control.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const toggleButton = tv({
+  base: [
+    "aria-pressed:bg-foreground/10 aria-pressed:text-foreground",
+    "aria-pressed:border-b-2 aria-pressed:border-b-foreground",
+  ].join(" "),
+  variants: {
+    pressed: {
+      true: "font-medium",
+      false: "",
+    },
+  },
+  defaultVariants: { pressed: false },
+});
+
+export type ToggleButtonVariants = VariantProps<typeof toggleButton>;

package/vendor/ds/kits/base/src/toggle-group.variants.ts

@@ -0,0 +1,38 @@
+// ToggleGroup's public option contract and token-only group appearance seam.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export interface ToggleGroupOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export const toggleGroup = tv({
+  slots: {
+    root: "min-w-0",
+    // The standard segmented control (maintainer decision, 2026-10-06): the
+    // group is exactly one Button tall — `control-height-md`, its border
+    // included — and its segments sit flush, split by control-edge dividers.
+    // This deliberately drops the inset the group carried since issue 423.
+    list: [
+      "box-border inline-flex h-[var(--reddb-spatial-control-height-md)] flex-nowrap items-stretch gap-0 rounded-md",
+      "border border-control-edge",
+    ].join(" "),
+    // Every option carries the 2px bottom edge the pressed indicator paints,
+    // transparent until pressed, so choosing an option moves nothing. Each
+    // option but the last draws the divider on its inline end; the outer
+    // segments follow the group's rounding so a pressed fill stays inside it.
+    option: [
+      "h-auto rounded-none border-0 border-b-2 border-e border-transparent border-e-control-edge last:border-e-0",
+      "first:rounded-s-md last:rounded-e-md",
+      "px-[var(--reddb-spatial-inset-md)] leading-normal",
+    ].join(" "),
+  },
+  variants: {
+    // An error edges the whole group in the danger role, as an invalid Input
+    // is edged; the separators between options keep the control edge.
+    invalid: { true: { list: "border-feedback-danger-border" } },
+  },
+});
+
+export type ToggleGroupVariants = VariantProps<typeof toggleGroup>;

package/vendor/ds/kits/base/src/tone.ts

@@ -0,0 +1,24 @@
+// The one semantic vocabulary every Kit speaks (ADR 0026).
+//
+// A component that expresses meaning takes `tone`, and every value resolves to
+// the same Feedback Role in every component: `info` is feedback-info on a Card
+// exactly as on an Alert, a Badge or a Button. How strongly a tone is drawn —
+// filled, tinted, outlined or plain — is a separate emphasis axis owned by each
+// component (Button's `variant`, Badge's `variant`), never a tone value, so the
+// accent (`primary`, `brand`) is not a tone.
+//
+// Base declares the vocabulary once; child Kits import it from here rather
+// than restating it, so the list cannot drift between components.
+
+/** The tone vocabulary: neutral plus the four Feedback Roles. */
+export const TONES = ["neutral", "info", "success", "warning", "danger"] as const;
+export type Tone = (typeof TONES)[number];
+
+/** The tones that name a Feedback Role (ADR 0009) — every tone except neutral. */
+export const FEEDBACK_TONES = ["info", "success", "warning", "danger"] as const satisfies readonly Tone[];
+export type FeedbackTone = (typeof FEEDBACK_TONES)[number];
+
+/** Whether a value belongs to the tone vocabulary. */
+export function isTone(value: unknown): value is Tone {
+  return typeof value === "string" && (TONES as readonly string[]).includes(value);
+}

package/vendor/ds/kits/base/src/tooltip.variants.ts

@@ -0,0 +1,14 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** Token-only supplemental content appearance; behavior remains in Tooltip.svelte. */
+export const tooltip = tv({
+  base: [
+    "z-50 whitespace-nowrap rounded-md border border-elevation-overlay-border bg-elevation-overlay-surface text-foreground shadow-elevation-overlay",
+    // One line of xs copy on a control-height-sm band: it measured 40px at the
+    // neutral stop with inset padding above and below.
+    "flex min-h-[var(--reddb-spatial-control-height-sm)] items-center px-[var(--reddb-spatial-inset-sm)] text-xs",
+    "motion-safe:transition-opacity motion-reduce:transition-none",
+  ].join(" "),
+});
+
+export type TooltipVariants = VariantProps<typeof tooltip>;

package/vendor/ds/kits/base/src/transfer.variants.ts

@@ -0,0 +1,5 @@
+import { tv } from "tailwind-variants";
+/** Invisible lifecycle anchor shared by the native renderers. */
+export const transfer = tv({
+  base: "pointer-events-none absolute size-0 overflow-hidden",
+});

package/vendor/ds/kits/base/src/type-roles.ts

@@ -0,0 +1,22 @@
+// The Theme's type roles as the Kit's class merger must see them (ADR 0025).
+//
+// tailwind-variants resolves conflicting classes with tailwind-merge, which
+// only knows Tailwind's default type scale. To it, `text-display` is an
+// unknown text utility and so a colour — it would silently drop either the role or
+// `text-foreground` from the same element. Declaring the roles as font sizes
+// keeps both, and lets a caller's `class="text-caption"` replace a role
+// rather than stack on it.
+
+/** The Theme's type role utilities (text-display … text-eyebrow), by role name. */
+export const TYPE_ROLE_UTILITIES = ["display", "title", "heading", "body", "caption", "eyebrow"] as const;
+
+/** The tailwind-variants config every type-role recipe passes as its second argument. */
+export const typeRoleMerge = {
+  twMergeConfig: {
+    extend: {
+      classGroups: {
+        "font-size": [{ text: [...TYPE_ROLE_UTILITIES, "editable-sm", "editable-md", "editable-lg"] }],
+      },
+    },
+  },
+};

package/vendor/ds/kits/base/src/window-mockup.variants.ts

@@ -0,0 +1,18 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const DEFAULT_WINDOW_MOCKUP_RATIO = 16 / 9;
+
+export const windowMockup = tv({
+  slots: {
+    root: "overflow-hidden rounded-lg border border-muted bg-background text-foreground shadow-lg",
+    chrome:
+      "flex min-h-[var(--reddb-spatial-control-height-sm)] items-center gap-[var(--reddb-spatial-gap-sm)] border-b border-muted bg-muted px-[var(--reddb-spatial-inset-sm)]",
+    controls: "flex shrink-0 gap-[var(--reddb-spatial-gap-sm)]",
+    control: "size-2 rounded-full bg-muted",
+    title: "min-w-0 flex-1 truncate text-center text-xs text-ink-muted",
+    balance: "w-10 shrink-0",
+    viewport: "bg-background",
+  },
+});
+
+export type WindowMockupVariants = VariantProps<typeof windowMockup>;

package/vendor/ds/kits/base/svelte.config.js

@@ -0,0 +1,6 @@
+// The Kit ships plain Svelte 5 source with no preprocessor: `lang="ts"` in a
+// component is handled by the compiler itself, and styling comes from the
+// Theme Layer's utilities rather than from anything that would need a CSS
+// pipeline. The config exists so the Svelte plugin stops guessing.
+/** @type {import('@sveltejs/vite-plugin-svelte').SvelteConfig} */
+export default {};

package/vendor/ds/kits/base/test/accessible-name.test.ts

@@ -0,0 +1,66 @@
+// The accessible-name contract (wave 5A), proven through the public Base subpath.
+//
+// Input, Textarea and Select are named by a Field, `aria-label`,
+// `aria-labelledby` or a native <label>; an icon-only Button by `aria-label`.
+// The props stay optional in the type (requiring them is a later, breaking
+// decision), so a control that reaches the page unnamed warns once in
+// development through `warnA11y`, the sibling of `warnDeprecated`.
+
+import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from "vitest";
+import { warnA11y } from "@reddb-io/design-system/base";
+import AccessibleNameConsumer from "./fixtures/AccessibleNameConsumer.svelte";
+import { render } from "./mount";
+
+let warn: MockInstance<typeof console.warn>;
+beforeEach(() => {
+  warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+});
+afterEach(() => {
+  warn.mockRestore();
+});
+
+const warnings = () => warn.mock.calls.map(([message]) => String(message));
+type Case = Parameters<typeof AccessibleNameConsumer>[1]["case"];
+
+describe("the accessible-name contract", () => {
+  it.each<Case>(["field", "aria-label", "aria-labelledby", "label-for", "wrapping-label"])(
+    "stays silent for a field named through %s",
+    (which) => {
+      render(AccessibleNameConsumer, { case: which });
+      expect(warnings()).toEqual([]);
+    },
+  );
+
+  it.each<[Case, string]>([
+    ["unnamed-input", "Input"],
+    ["unnamed-textarea", "Textarea"],
+    ["unnamed-select", "Select"],
+  ])("warns once in development when %s has no name", (which, component) => {
+    render(AccessibleNameConsumer, { case: which });
+    render(AccessibleNameConsumer, { case: which });
+    const mine = warnings().filter((message) => message.startsWith(`[reddb ${component}]`));
+    // Two unnamed mounts, one warning: once per session.
+    expect(mine).toEqual([expect.stringMatching(/no accessible name/)]);
+  });
+
+  it("warns when a Field's label is empty", () => {
+    render(AccessibleNameConsumer, { case: "empty-field" });
+    expect(warnings()).toEqual([expect.stringMatching(/^\[reddb Field\] has an empty `label`/)]);
+  });
+
+  it.each<Case>(["text-button", "sr-only-button", "labelled-icon-button"])("stays silent for a named %s", (which) => {
+    render(AccessibleNameConsumer, { case: which });
+    expect(warnings()).toEqual([]);
+  });
+
+  it("warns when an icon-only Button has no aria-label", () => {
+    render(AccessibleNameConsumer, { case: "icon-button" });
+    expect(warnings()).toEqual([expect.stringMatching(/^\[reddb Button\] .*no accessible name.*aria-label/)]);
+  });
+
+  it("is exported beside warnDeprecated and dedupes per component and problem", () => {
+    warnA11y("Probe", "is unnamed", "Name it.");
+    warnA11y("Probe", "is unnamed", "Name it.");
+    expect(warnings()).toEqual(["[reddb Probe] is unnamed. Name it."]);
+  });
+});

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

@@ -0,0 +1,81 @@
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import DisclosureFamilyConsumer from "./fixtures/DisclosureFamilyConsumer.svelte";
+import DisclosureFamilyContractFailures from "./fixtures/DisclosureFamilyContractFailures.svelte";
+import { Accordion, accordion } from "./fixtures/disclosure-family-consumer";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const ITEMS = [
+  { value: "changes", label: "What changed?" },
+  { value: "impact", label: "Who is affected?" },
+] as const;
+
+function expandedStateFailures(root: HTMLElement): string[] {
+  const controls = [...root.querySelectorAll<HTMLButtonElement>("button")];
+  return controls.length > 0 && controls.every((control) => control.hasAttribute("aria-expanded"))
+    ? []
+    : ["accordion triggers do not expose expanded state"];
+}
+
+describe("the Base Accordion", () => {
+  it("is available with its Extension Seam through the Base consumer subpath", () => {
+    expect(Accordion).toBeDefined();
+    expect(accordion).toBeTypeOf("function");
+  });
+
+  it("associates every trigger with a region and exposes expanded state", () => {
+    const root = rendered(render(Accordion, {
+      label: "Release questions",
+      items: ITEMS,
+      expanded: ["changes"],
+    }));
+    const controls = [...root.querySelectorAll<HTMLButtonElement>("button[aria-expanded]")];
+
+    expect(root.getAttribute("aria-label")).toBe("Release questions");
+    expect(controls.map(({ ariaExpanded }) => ariaExpanded)).toEqual(["true", "false"]);
+    expect(root.querySelector(`#${controls[0]!.getAttribute("aria-controls")}`)?.getAttribute("role")).toBe("region");
+    expect(expandedStateFailures(root)).toEqual([]);
+  });
+
+  it("toggles sections while single mode keeps at most one expanded", () => {
+    const onchange = vi.fn();
+    const root = rendered(render(Accordion, {
+      label: "Release questions",
+      items: ITEMS,
+      expanded: ["changes"],
+      onchange,
+    }));
+    const controls = [...root.querySelectorAll<HTMLButtonElement>("button[aria-expanded]")];
+
+    controls[1]!.click();
+    flushSync();
+    expect(controls.map(({ ariaExpanded }) => ariaExpanded)).toEqual(["false", "true"]);
+    expect(onchange).toHaveBeenLastCalledWith(["impact"]);
+    controls[1]!.click();
+    flushSync();
+    expect(controls.map(({ ariaExpanded }) => ariaExpanded)).toEqual(["false", "false"]);
+  });
+
+  it("keeps token appearance and every appearance axis live in a nested scope", () => {
+    const consumer = rendered(render(DisclosureFamilyConsumer, {}));
+    const root = consumer.querySelector<HTMLElement>("[data-appearance-scope] [data-accordion]")!;
+    const styles = accordion();
+
+    expect(classes(root)).toEqual(classesOf(styles.root()));
+    expect(classes(root.querySelector("button")!).has("min-h-[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);
+  });
+});
+
+describe("the deliberately failing Accordion fixture", () => {
+  it("diagnoses an accordion without expanded state", () => {
+    const root = rendered(render(DisclosureFamilyContractFailures, {
+      failure: "accordion-without-expanded-state",
+    }));
+    expect(expandedStateFailures(root)).toEqual([
+      "accordion triggers do not expose expanded state",
+    ]);
+  });
+});

package/vendor/ds/kits/base/test/alert-dialog.test.ts

@@ -0,0 +1,81 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import {
+  AlertDialog,
+  alertDialog as alertDialogAppearance,
+  alertDialogActions,
+  button,
+} from "./fixtures/drawer-alert-dialog-consumer";
+import { classes, classesOf, render } from "./mount";
+
+function text(content: string) {
+  return createRawSnippet(() => ({ render: () => `<p>${content}</p>` }));
+}
+
+describe("the Base AlertDialog", () => {
+  it("keeps destructive confirmation open when the outside surface is clicked", () => {
+    const root = render(AlertDialog, {
+      triggerLabel: "Delete deployment",
+      title: "Delete deployment?",
+      confirmLabel: "Delete",
+      children: text("This cannot be undone."),
+    });
+    root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!.click();
+    const dialog = root.querySelector<HTMLDialogElement>("dialog")!;
+
+    expect(dialog.getAttribute("role")).toBe("alertdialog");
+    dialog.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(dialog.open).toBe(true);
+  });
+
+  it("focuses the safe action and restores invoking focus after either decision", () => {
+    const onconfirm = vi.fn();
+    const root = render(AlertDialog, {
+      triggerLabel: "Delete deployment",
+      title: "Delete deployment?",
+      confirmLabel: "Delete",
+      cancelLabel: "Keep deployment",
+      onconfirm,
+      children: text("This cannot be undone."),
+    });
+    const trigger = root.querySelector<HTMLButtonElement>("[data-dialog-trigger]")!;
+    trigger.focus();
+    trigger.click();
+    const dialog = root.querySelector<HTMLDialogElement>("dialog")!;
+    const cancel = root.querySelector<HTMLButtonElement>("[data-alert-dialog-cancel]")!;
+
+    expect(document.activeElement).toBe(cancel);
+    cancel.click();
+    expect(dialog.open).toBe(false);
+    expect(document.activeElement).toBe(trigger);
+    expect(onconfirm).not.toHaveBeenCalled();
+
+    trigger.click();
+    root.querySelector<HTMLButtonElement>("[data-alert-dialog-confirm]")!.click();
+    expect(dialog.open).toBe(false);
+    expect(document.activeElement).toBe(trigger);
+    expect(onconfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it("wears its exported token appearance and canonical Button actions", () => {
+    const root = render(AlertDialog, {
+      triggerLabel: "Delete deployment",
+      title: "Delete deployment?",
+      confirmLabel: "Delete",
+      class: "consumer-alert-dialog",
+    });
+    const dialog = root.querySelector("dialog")!;
+    const actions = root.querySelector("[data-alert-dialog-actions]")!;
+    const cancel = root.querySelector("[data-alert-dialog-cancel]")!;
+    const confirm = root.querySelector("[data-alert-dialog-confirm]")!;
+
+    expect(classes(dialog)).toEqual(
+      classesOf(alertDialogAppearance({ class: "consumer-alert-dialog" })),
+    );
+    expect(classes(actions)).toEqual(classesOf(alertDialogActions()));
+    expect(classes(actions).has("gap-[var(--reddb-spatial-gap-md)]")).toBe(true);
+    expect(classes(cancel)).toEqual(classesOf(button({ variant: "secondary", size: "sm" })));
+    expect(classes(confirm)).toEqual(classesOf(button({ variant: "primary", tone: "danger", size: "sm" })));
+    expect(classes(dialog).has("motion-reduce:transition-none")).toBe(true);
+  });
+});