@tangle-network/ui 11.12.0 → 11.13.1

package/src/markdown/code-block.test.tsx

@@ -1,13 +1,91 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { afterEach, describe, expect, it } from "vitest";
 import { CodeBlock, CopyButton } from "./code-block";
 
+afterEach(cleanup);
+
+describe("CodeBlock scoped semantic colors", () => {
+  it("keeps code readable before the renderer loads, then applies live semantic colors and line numbers", async () => {
+    const { container } = render(<CodeBlock code={'const message = "hello";'} language="javascript" showLineNumbers />);
+    expect(container.querySelector("pre code")?.textContent).toBe('const message = "hello";');
+    await waitFor(() => expect(container.innerHTML).toContain("var(--syntax-keyword, currentColor)"));
+    expect(container.innerHTML).toContain("var(--syntax-string, currentColor)");
+    expect(container.innerHTML).toContain("var(--syntax-comment, currentColor)");
+    expect(container.querySelector(".react-syntax-highlighter-line-number")).not.toBeNull();
+    expect(container.querySelector("pre code")?.textContent?.replace(/^1/, "")).toBe('const message = "hello";');
+  });
+
+  it("inherits a named scope by default without inserting its own mode", () => {
+    const { container } = render(<section data-theme="arena-light"><CodeBlock data-testid="code" code="const x = 1" language="javascript" /></section>);
+    const code = screen.getByTestId("code");
+    expect(code.hasAttribute("data-theme")).toBe(false);
+    const before = code.innerHTML;
+    container.querySelector("section")!.setAttribute("data-theme", "arena");
+    expect(code.innerHTML).toBe(before); // References stay live; the browser fixture checks the computed colors.
+  });
+
+  it.each([true, false])("preserves explicit light=%s as an opposite nested mode", (light) => {
+    render(<section data-theme={light ? "dark" : "light"}><CodeBlock data-testid="code" code="x" light={light} /></section>);
+    expect(screen.getByTestId("code").getAttribute("data-theme")).toBe(light ? "light" : "dark");
+  });
+
+  it("preserves caller attributes, labels, children and custom scopes", () => {
+    render(<CodeBlock data-testid="code" data-theme="aubergine" className="caller" code="echo hello" language="bash" label="BASHRC"><button>Copy example</button></CodeBlock>);
+    expect(screen.getByTestId("code").getAttribute("data-theme")).toBe("aubergine");
+    expect(screen.getByTestId("code").classList.contains("caller")).toBe(true);
+    expect(screen.getByText("BASHRC")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Copy example" })).toBeTruthy();
+  });
+
+  it("server-renders readable code with the same semantic references independent of document theme", () => {
+    const source = <CodeBlock code="const x = 1" language="javascript" />;
+    document.documentElement.className = "dark";
+    const dark = renderToString(source);
+    expect(dark).toContain("const x = 1");
+    expect(dark).toContain("var(--syntax-foreground, currentColor)");
+    document.documentElement.className = "light";
+    expect(renderToString(source)).toBe(dark);
+    document.documentElement.removeAttribute("class");
+  });
+});
+
+// Retain the existing header/label/copy-slot contracts alongside theme coverage.
 describe("CodeBlock", () => {
   it("renders the code through the syntax highlighter", () => {
     const { container } = render(<CodeBlock code={"const x = 1;"} language="typescript" />);
     expect(container.querySelector("code")).not.toBeNull();
   });
 
+  it.each([
+    ["javascript", "const answer = 42;"],
+    ["js", "const answer = 42;"],
+    ["brainfuck", "++[>+++<-]"],
+    ["not-a-language", "const answer = 42;"],
+  ])("keeps the default highlighter's tokens for language %s", async (language, code) => {
+    const baseline = document.createElement("div");
+    baseline.innerHTML = renderToString(<SyntaxHighlighter language={language}>{code}</SyntaxHighlighter>);
+    const expected = Array.from(baseline.querySelectorAll("pre code span"), (span) => span.textContent);
+    expect(expected.length).toBeGreaterThan(0);
+
+    const { container } = render(<CodeBlock code={code} language={language} />);
+    await waitFor(() => expect(container.querySelectorAll("pre code span").length).toBe(expected.length));
+    expect(Array.from(container.querySelectorAll("pre code span"), (span) => span.textContent)).toEqual(expected);
+    expect(container.querySelector("pre code")?.textContent).toBe(code);
+  });
+
+  it("preserves whitespace and line numbering after the renderer loads", async () => {
+    const code = "\tfirst  \n  second\n";
+    const baseline = document.createElement("div");
+    baseline.innerHTML = renderToString(<SyntaxHighlighter language="text" showLineNumbers>{code}</SyntaxHighlighter>);
+    const { container } = render(<CodeBlock code={code} language="text" showLineNumbers />);
+    expect(container.querySelector("pre code")?.textContent).toBe(code);
+    await waitFor(() => expect(container.querySelectorAll(".react-syntax-highlighter-line-number").length)
+      .toBe(baseline.querySelectorAll(".react-syntax-highlighter-line-number").length));
+    expect(container.querySelector("pre code")?.textContent).toBe(baseline.querySelector("pre code")?.textContent);
+  });
+
   it("uses `label` as the header text, overriding `language`", () => {
     const { getByText, queryByText } = render(
       <CodeBlock code={"x"} language="typescript" label="config.ts" />,

package/src/markdown/code-block.tsx

@@ -7,28 +7,24 @@ import {
   type HTMLAttributes,
   type ReactNode,
 } from "react";
-import SyntaxHighlighter from "react-syntax-highlighter";
+import type SyntaxHighlighter from "react-syntax-highlighter";
 import { Check, Copy } from "lucide-react";
 import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 
-// Theme-aware syntax highlighting — reads CSS custom properties at render time.
-// Override --syntax-* tokens in tokens.css per theme.
-function getSyntaxTheme(): { [key: string]: React.CSSProperties } {
-  const el = typeof document !== "undefined" ? document.documentElement : null;
-  const v = (name: string, fallback: string) =>
-    el ? getComputedStyle(el).getPropertyValue(name).trim() || fallback : fallback;
-
-  const comment  = v("--syntax-comment", "#6B7094");
-  const keyword  = v("--syntax-keyword", "#A78FFF");
-  const string   = v("--syntax-string", "#10b981");
-  const fn       = v("--syntax-function", "#6D9FFF");
-  const number   = v("--syntax-number", "#FFB347");
-  const meta     = v("--syntax-meta", "#8263FF");
-  const error    = v("--syntax-error", "#FF4D6D");
-  const variable = v("--syntax-variable", "#C4C0D8");
-  const fg       = v("--syntax-foreground", "#E8E6F6");
-
+// Leave variables unresolved: the browser resolves them on each token span,
+// including nested themes, inline overrides and CSS/media changes. No document
+// sampling, observers, layout reads or React re-render are needed to recolor code.
+const syntaxTheme: { [key: string]: React.CSSProperties } = (() => {
+  const comment = "var(--syntax-comment, currentColor)";
+  const keyword = "var(--syntax-keyword, currentColor)";
+  const string = "var(--syntax-string, currentColor)";
+  const fn = "var(--syntax-function, currentColor)";
+  const number = "var(--syntax-number, currentColor)";
+  const meta = "var(--syntax-meta, currentColor)";
+  const error = "var(--syntax-error, currentColor)";
+  const variable = "var(--syntax-variable, currentColor)";
+  const fg = "var(--syntax-foreground, currentColor)";
   return {
     "hljs-comment":           { color: comment, fontStyle: "italic" },
     "hljs-quote":             { color: comment, fontStyle: "italic" },
@@ -67,11 +63,22 @@ function getSyntaxTheme(): { [key: string]: React.CSSProperties } {
     "hljs-emphasis":          { fontStyle: "italic" },
     "hljs":                   { color: fg, background: "transparent" },
   };
+})();
+
+type Highlighter = typeof SyntaxHighlighter;
+let highlighterPromise: Promise<Highlighter> | undefined;
+
+function loadHighlighter(): Promise<Highlighter> {
+  // Preserve the default renderer's language behavior, including alias inputs
+  // and unknown-language auto-detection. Its light async variant differs.
+  return highlighterPromise ??= import("react-syntax-highlighter/dist/esm/default-highlight")
+    .then((module) => module.default)
+    .catch((error: unknown) => {
+      highlighterPromise = undefined;
+      throw error;
+    });
 }
 
-// tangleLight removed — getSyntaxTheme() reads --syntax-* CSS vars which are overridden
-// per theme in tokens.css (vault, dawn themes set light values).
-
 export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
   code: string;
   language?: string;
@@ -82,55 +89,45 @@ export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
    */
   label?: string;
   showLineNumbers?: boolean;
-  /** Force light theme; defaults to dark */
+  /** Force light (true) or dark (false); omitted inherits the nearest theme. */
   light?: boolean;
   children?: ReactNode;
 }
 
-const LIGHT_THEMES = new Set(["vault", "dawn"]);
-
-function detectLightTheme() {
-  return (
-    typeof document !== "undefined" &&
-    LIGHT_THEMES.has(document.documentElement.getAttribute("data-sandbox-theme") ?? "")
-  );
-}
-
-function useIsLightTheme(): boolean {
-  const [isLight, setIsLight] = useState(detectLightTheme);
-
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    setIsLight(detectLightTheme());
-    const observer = new MutationObserver(() => setIsLight(detectLightTheme()));
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-sandbox-theme"],
-    });
-    return () => observer.disconnect();
-  }, []);
-
-  return isLight;
-}
-
 export const CodeBlock = memo(
-  ({ code, language, label, showLineNumbers = false, light: lightProp, className, children, ...props }: CodeBlockProps) => {
-    const isLight = useIsLightTheme();
-    const light = lightProp ?? isLight;
-    const theme = getSyntaxTheme();
-    const bg = "bg-card border-border";
-    const headerBg = light ? "bg-muted/50 border-border" : "bg-background border-border";
-    const langColor = "text-muted-foreground";
+  ({ code, language, label, showLineNumbers = false, light, className, children, ...props }: CodeBlockProps) => {
+    const [Highlighter, setHighlighter] = useState<Highlighter | null>(null);
+    useEffect(() => {
+      let active = true;
+      void loadHighlighter().then((component) => {
+        if (active) setHighlighter(() => component);
+      }).catch(() => {
+        // A failed chunk leaves the code readable; a later mount can retry.
+      });
+      return () => { active = false; };
+    }, []);
+
     const headerLabel = label ?? language;
+    const mode = light === undefined ? {} : { "data-theme": light ? "light" : "dark" };
+    const customStyle = {
+      margin: 0,
+      padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
+      background: "transparent",
+      fontSize: "var(--code-font-size, 0.8125rem)",
+      lineHeight: "var(--code-line-height, 1.5)",
+      overflowX: "auto" as const,
+    };
+    const codeTagProps = { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } };
 
     return (
       <div
-        className={cn("group relative overflow-hidden rounded-lg border font-mono", bg, className)}
+        className={cn("group relative overflow-hidden rounded-lg border font-mono", "bg-card border-border", className)}
         {...props}
+        {...mode}
       >
         {headerLabel && (
-          <div className={cn("flex items-center justify-between border-b px-3 py-1", headerBg)}>
-            <span className={cn("text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest", langColor)}>
+          <div className="flex items-center justify-between border-b border-border px-3 py-1 bg-[var(--code-header-bg,hsl(var(--background)))]">
+            <span className="text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest text-muted-foreground">
               {headerLabel}
             </span>
             {children}
@@ -141,28 +138,27 @@ export const CodeBlock = memo(
             {children}
           </div>
         )}
-        <SyntaxHighlighter
-          language={language ?? "text"}
-          style={theme}
-          showLineNumbers={showLineNumbers}
-          lineNumberStyle={{
-            color: light ? "#8B92B8" : "#4A4D6A",
-            minWidth: "2.5em",
-            paddingRight: "1em",
-          }}
-          customStyle={{
-            margin: 0,
-            padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
-            background: "transparent",
-            fontSize: "var(--code-font-size, 0.8125rem)",
-            lineHeight: "var(--code-line-height, 1.5)",
-            overflowX: "auto",
-          }}
-          codeTagProps={{ style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } }}
-          wrapLines={false}
-        >
-          {code}
-        </SyntaxHighlighter>
+        {Highlighter ? (
+          <Highlighter
+            language={language ?? "text"}
+            style={syntaxTheme}
+            showLineNumbers={showLineNumbers}
+            lineNumberStyle={{
+              color: "var(--syntax-comment, currentColor)",
+              minWidth: "2.5em",
+              paddingRight: "1em",
+            }}
+            customStyle={customStyle}
+            codeTagProps={codeTagProps}
+            wrapLines={false}
+          >
+            {code}
+          </Highlighter>
+        ) : (
+          <pre style={{ ...syntaxTheme.hljs, ...customStyle }}>
+            <code style={{ ...codeTagProps.style, whiteSpace: "pre" }}>{code}</code>
+          </pre>
+        )}
       </div>
     );
   },

package/src/primitives/button.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { useId, useState } from 'react'
 import { Button } from './button'
 
 const meta: Meta<typeof Button> = {
@@ -17,7 +18,7 @@ export const Secondary: Story = { args: { variant: 'secondary' } }
 export const Outline: Story = { args: { variant: 'outline' } }
 export const Ghost: Story = { args: { variant: 'ghost' } }
 export const Destructive: Story = { args: { variant: 'destructive', children: 'Delete' } }
-export const Loading: Story = { args: { loading: true, children: 'Loading...' } }
+export const Loading: Story = { args: { loading: true, children: 'Save changes' } }
 
 export const AllSizes: Story = {
   name: 'All Sizes',
@@ -46,3 +47,38 @@ export const AllVariants: Story = {
     </div>
   ),
 }
+
+export const ActionContracts: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Toggle disabled/loading, then try pointer, Enter and Space activation. Native buttons retain their submit default; links keep their action name while unavailable. Emulate prefers-reduced-motion to check the spinner and press effect.',
+      },
+    },
+  },
+  render: function ActionContracts() {
+    const resultId = useId()
+    const [disabled, setDisabled] = useState(false)
+    const [loading, setLoading] = useState(false)
+    const [submits, setSubmits] = useState(0)
+    const [opens, setOpens] = useState(0)
+    return (
+      <div className="flex max-w-lg flex-col gap-4">
+        <div className="flex gap-4">
+          <label><input type="checkbox" checked={disabled} onChange={event => setDisabled(event.target.checked)} /> Disabled</label>
+          <label><input type="checkbox" checked={loading} onChange={event => setLoading(event.target.checked)} /> Loading</label>
+        </div>
+        <form className="flex flex-wrap gap-3" onSubmit={event => { event.preventDefault(); setSubmits(value => value + 1) }}>
+          <Button disabled={disabled} loading={loading}>Save changes</Button>
+          <Button asChild disabled={disabled} loading={loading}>
+            <button disabled={false} aria-busy={false}>Submit slotted button</button>
+          </Button>
+          <Button asChild disabled={disabled} loading={loading}>
+            <a href={`#${resultId}`} onClick={() => setOpens(value => value + 1)}>Open result</a>
+          </Button>
+        </form>
+        <p id={resultId} role="status">Submissions: {submits}. Link activations: {opens}.</p>
+      </div>
+    )
+  },
+}

package/src/primitives/button.test.tsx

@@ -0,0 +1,230 @@
+import * as React from "react";
+import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { hydrateRoot, type Root } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button } from "./button";
+
+afterEach(cleanup);
+
+describe.each(["disabled", "loading"] as const)("%s controls", (state) => {
+  it.each([false, true])("natively disables button elements (asChild=%s)", async (asChild) => {
+    const user = userEvent.setup();
+    const click = vi.fn();
+    const submit = vi.fn((event: React.FormEvent) => event.preventDefault());
+    render(<form onSubmit={submit}>
+      <Button {...{ [state]: true }} asChild={asChild} onClick={click}>
+        {asChild ? <button disabled={false} aria-busy={false}>Save</button> : "Save"}
+      </Button>
+      <input aria-label="Next field" />
+    </form>);
+    const button = screen.getByRole("button", { name: "Save" });
+    expect(button).toBeDisabled();
+    expect(button).toHaveAccessibleName("Save");
+    if (state === "loading") expect(button).toHaveAttribute("aria-busy", "true");
+    await user.click(button);
+    button.click();
+    button.focus();
+    expect(button).not.toHaveFocus();
+    await user.keyboard("{Enter} ");
+    expect(click).not.toHaveBeenCalled();
+    expect(submit).not.toHaveBeenCalled();
+    await user.tab();
+    expect(screen.getByRole("textbox")).toHaveFocus();
+  });
+
+  it("blocks slotted anchor activation before child AND slot capture/bubble handlers", async () => {
+    const user = userEvent.setup();
+    const activation = vi.fn();
+    const handlers = {
+      onClick: activation, onClickCapture: activation,
+      onAuxClick: activation, onAuxClickCapture: activation,
+      onDoubleClick: activation, onDoubleClickCapture: activation,
+      onPointerDown: activation, onPointerDownCapture: activation,
+      onPointerUp: activation, onPointerUpCapture: activation,
+      onMouseDown: activation, onMouseDownCapture: activation,
+      onMouseUp: activation, onMouseUpCapture: activation,
+      onKeyDown: activation, onKeyDownCapture: activation,
+      onKeyUp: activation, onKeyUpCapture: activation,
+    };
+    render(<div onClick={activation}>
+      <Button asChild {...{ [state]: true }} aria-busy={false} {...handlers}>
+        <a href="#destination" tabIndex={0} aria-disabled={false} aria-busy={false} {...handlers}>
+          <span>Open account</span>
+        </a>
+      </Button>
+      <button>Next action</button>
+    </div>);
+    const link = screen.getByRole("link", { name: "Open account" });
+    expect(link).toHaveAttribute("aria-disabled", "true");
+    expect(link).toHaveAttribute("tabindex", "-1");
+    expect(link).not.toHaveAttribute("disabled");
+    expect(link).not.toHaveAttribute("href");
+    if (state === "loading") expect(link).toHaveAttribute("aria-busy", "true");
+    const target = screen.getByText("Open account");
+    expect(fireEvent.click(target)).toBe(false);
+    expect(fireEvent.doubleClick(target)).toBe(false);
+    expect(fireEvent(target, new MouseEvent("auxclick", { bubbles: true, cancelable: true, button: 1 }))).toBe(false);
+    expect(fireEvent.pointerDown(target)).toBe(false);
+    expect(fireEvent.pointerUp(target)).toBe(false);
+    expect(fireEvent.mouseDown(target)).toBe(false);
+    expect(fireEvent.mouseUp(target)).toBe(false);
+    for (const key of ["Enter", " "]) {
+      expect(fireEvent.keyDown(link, { key })).toBe(false);
+      expect(fireEvent.keyUp(link, { key })).toBe(false);
+    }
+    await user.click(target);
+    link.click();
+    // Even programmatically focused, a disabled link cannot activate by keyboard.
+    link.focus();
+    await user.keyboard("{Enter} ");
+    expect(activation).not.toHaveBeenCalled();
+    link.blur();
+    await user.tab();
+    expect(screen.getByRole("button", { name: "Next action" })).toHaveFocus();
+  });
+});
+
+it("retains the action name and hides the reduced-motion spinner from accessibility", () => {
+  const { rerender } = render(<Button loading aria-busy={false}>Save changes</Button>);
+  const button = screen.getByRole("button", { name: "Save changes" });
+  expect(button).toHaveAttribute("aria-busy", "true");
+  const spinner = button.querySelector("svg");
+  expect(spinner).toHaveAttribute("aria-hidden", "true");
+  expect(spinner).toHaveAttribute("focusable", "false");
+  expect(spinner).toHaveClass("motion-reduce:animate-none");
+  expect(button).toHaveClass("motion-reduce:transition-none", "motion-reduce:active:scale-100");
+  expect(button.querySelector("title")).toBeNull();
+  rerender(<Button loading size="icon" aria-label="Refresh reports"><span aria-hidden="true">↻</span></Button>);
+  expect(screen.getByRole("button")).toHaveAccessibleName("Refresh reports");
+});
+
+it.each(["disabled", "loading"] as const)("restores link attributes and original Slot handler order when %s ends", async (state) => {
+  const user = userEvent.setup();
+  const calls: string[] = [];
+  const ui = (unavailable: boolean) => <Button asChild {...{ [state]: unavailable }} onClick={() => calls.push("slot")}>
+    <a href="#destination" tabIndex={2} onClick={(event) => { event.preventDefault(); calls.push("child"); }}>Open</a>
+  </Button>;
+  const { rerender } = render(ui(true));
+  const link = screen.getByRole("link");
+  rerender(ui(false));
+  expect(link).toHaveAttribute("href", "#destination");
+  expect(link).toHaveAttribute("tabindex", "2");
+  expect(link).not.toHaveAttribute("aria-disabled");
+  expect(link).not.toHaveAttribute("aria-busy");
+  expect(link).not.toHaveAttribute("role");
+  await user.click(link);
+  expect(calls).toEqual(["child", "slot"]);
+  calls.length = 0;
+  link.focus();
+  await user.keyboard("{Enter}");
+  expect(calls).toEqual(["child", "slot"]);
+});
+
+it("preserves non-activation keyboard handlers on disabled links", () => {
+  const calls: string[] = [];
+  render(<Button asChild disabled onKeyDownCapture={() => calls.push("slot capture")} onKeyDown={() => calls.push("slot bubble")}>
+    <a href="#destination" onKeyDownCapture={() => calls.push("child capture")} onKeyDown={() => calls.push("child bubble")}>Open</a>
+  </Button>);
+  expect(fireEvent.keyDown(screen.getByRole("link"), { key: "ArrowRight" })).toBe(true);
+  expect(calls).toEqual(["child capture", "slot capture", "child bubble", "slot bubble"]);
+});
+
+it("respects a native child's own disabled state", () => {
+  render(<Button asChild disabled={false}><button disabled>Save</button></Button>);
+  expect(screen.getByRole("button")).toBeDisabled();
+});
+
+it("composes refs on a slotted native button", () => {
+  const outerRef = React.createRef<HTMLButtonElement>();
+  const childRef = React.createRef<HTMLButtonElement>();
+  const { unmount } = render(<Button asChild ref={outerRef}><button ref={childRef}>Save</button></Button>);
+  expect(outerRef.current).toBe(screen.getByRole("button"));
+  expect(childRef.current).toBe(outerRef.current);
+  unmount();
+  expect(outerRef.current).toBeNull();
+  expect(childRef.current).toBeNull();
+});
+
+it("preserves caller busy state when Button is not loading", () => {
+  render(<><Button aria-busy>Save</Button><Button asChild aria-busy><a href="#destination">Open</a></Button></>);
+  expect(screen.getByRole("button")).toHaveAttribute("aria-busy", "true");
+  expect(screen.getByRole("link")).toHaveAttribute("aria-busy", "true");
+});
+
+it("preserves implicit submission, explicit types, and enabled keyboard activation", async () => {
+  const user = userEvent.setup();
+  const submit = vi.fn((event: React.FormEvent) => event.preventDefault());
+  render(<form onSubmit={submit}>
+    <Button>Implicit submit</Button>
+    <Button asChild><button>Slotted submit</button></Button>
+    <Button type="button">Explicit button</Button>
+    <Button type="submit">Explicit submit</Button>
+    <Button asChild type="submit"><button type="button">Child button</button></Button>
+  </form>);
+  const implicit = screen.getByRole("button", { name: "Implicit submit" });
+  expect(implicit).not.toHaveAttribute("type");
+  await user.click(implicit);
+  await user.click(screen.getByRole("button", { name: "Slotted submit" }));
+  await user.click(screen.getByRole("button", { name: "Explicit submit" }));
+  expect(submit).toHaveBeenCalledTimes(3);
+  await user.click(screen.getByRole("button", { name: "Explicit button" }));
+  await user.click(screen.getByRole("button", { name: "Child button" }));
+  expect(submit).toHaveBeenCalledTimes(3);
+  implicit.focus();
+  await user.keyboard("{Enter} ");
+  expect(submit).toHaveBeenCalledTimes(5);
+});
+
+it("forwards native refs and composes both refs on a slotted anchor", () => {
+  const nativeRef = React.createRef<HTMLButtonElement>();
+  const anchorRef = React.createRef<HTMLAnchorElement>();
+  const slotRef = vi.fn();
+  const { rerender, unmount } = render(<>
+    <Button ref={nativeRef}>Save</Button>
+    <Button asChild loading ref={slotRef}><a ref={anchorRef} href="#destination">Open</a></Button>
+  </>);
+  const link = screen.getByRole("link");
+  expect(nativeRef.current).toBe(screen.getByRole("button"));
+  expect(anchorRef.current).toBe(link);
+  expect(slotRef).toHaveBeenLastCalledWith(link);
+  rerender(<>
+    <Button ref={nativeRef}>Save</Button>
+    <Button asChild ref={slotRef}><a ref={anchorRef} href="#destination">Open</a></Button>
+  </>);
+  expect(anchorRef.current).toBe(link);
+  expect(slotRef).toHaveBeenLastCalledWith(link);
+  unmount();
+  expect(nativeRef.current).toBeNull();
+  expect(anchorRef.current).toBeNull();
+  expect(slotRef).toHaveBeenLastCalledWith(null);
+});
+
+it("hydrates disabled/loading native and slotted controls without changing their names", async () => {
+  const ui = <>
+    <Button loading>Save</Button>
+    <Button asChild loading><button>Submit</button></Button>
+    <Button asChild disabled><a href="#destination">Open</a></Button>
+  </>;
+  const container = document.createElement("div");
+  container.innerHTML = renderToString(ui);
+  document.body.appendChild(container);
+  const html = container.innerHTML;
+  const recoverableError = vi.fn();
+  const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+  let root: Root | undefined;
+  try {
+    await act(async () => { root = hydrateRoot(container, ui, { onRecoverableError: recoverableError }); });
+    expect(container.innerHTML).toBe(html);
+    expect(within(container).getByRole("button", { name: "Save" })).toBeDisabled();
+    expect(within(container).getByRole("button", { name: "Submit" })).toBeDisabled();
+    expect(within(container).getByRole("link", { name: "Open" })).not.toHaveAttribute("href");
+    expect(recoverableError).not.toHaveBeenCalled();
+    expect(consoleError).not.toHaveBeenCalled();
+  } finally {
+    await act(async () => { root?.unmount(); });
+    consoleError.mockRestore();
+    container.remove();
+  }
+});