fix(design-system): preserve navigation link semantics

Signed-off-by: Arjun Mahanti <arjun@squareup.com>
Co-authored-by: Codex <noreply@openai.com>

desktop-next/src/features/design-system/catalog/display.tsx

@@ -30,7 +30,11 @@ export function CardDemo() {
       <p className="text-body text-secondary">
         A quiet container for a focused group of ideas.
       </p>
-      <Button nativeButton={false} render={<Link to="/design/compositions" />}>
+      <Button
+        nativeButton={false}
+        role="link"
+        render={<Link to="/design/compositions" />}
+      >
         Explore compositions
       </Button>
     </Card>
@@ -129,6 +133,7 @@ export function EmptyDemo() {
       action={
         <Button
           nativeButton={false}
+          role="link"
           render={<Link to="/design/compositions" />}
         >
           See an example project

desktop-next/src/features/design-system/ui/OverviewPage.tsx

@@ -17,11 +17,16 @@ export function OverviewPage() {
         intro="Quiet foundations. Expressive possibilities. A complete web component foundation for Buzz, with Inter, Lucide, and the same semantic roles from the smallest control to an agent’s response."
       />
       <div className="bui-inline mb-12">
-        <Button nativeButton={false} render={<Link to="/design/components" />}>
+        <Button
+          nativeButton={false}
+          role="link"
+          render={<Link to="/design/components" />}
+        >
           Explore {CATALOG.length} examples <ArrowRight aria-hidden="true" />
         </Button>
         <Button
           nativeButton={false}
+          role="link"
           variant="outline"
           render={<Link to="/design/compositions" />}
         >

desktop-next/tests/catalog.spec.ts

@@ -280,3 +280,14 @@ test("every foundation page renders its public vocabulary without errors", async
   }
   expect(errors).toEqual([]);
 });
+
+test("styled navigation preserves link semantics and opens the component catalog", async ({
+  page,
+}) => {
+  await page.goto("/design");
+  await page
+    .getByRole("link", { name: "Explore 54 examples", exact: true })
+    .click();
+  await expect(page).toHaveURL("/design/components");
+  await expect(page.locator(".catalog-entry")).toHaveCount(54);
+});