From 6745fee9c42e7b4361f4465e17867107df6535c4 Mon Sep 17 00:00:00 2001
From: Chad Nuttall <chadnuttall1@gmail.com>
Date: Sat, 3 Oct 2026 21:49:17 -0400
Subject: [PATCH 1/5] =?UTF-8?q?feat(ui):=20shared=20interaction=20primitiv?=
 =?UTF-8?q?es=20=E2=80=94=20press=20feedback,=20loading,=20motion=20tokens?=
 =?UTF-8?q?=20(#280)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Foundation layer for the interaction-polish pass:

- globals.css: shared --duration-press/fast/ui + --ease-ui tokens so
  component code never scatters magic durations; the reduced-motion
  guard now also caps every CSS transition (~instant state changes)
  and disables smooth scrolling, while keyframe indicators (spinners)
  stay functional
- Button: cursor-pointer (v4 preflight defaults to cursor:default),
  select-none, restrained active:scale-[0.98] press feedback, and a
  width-stable `loading` prop — spinner overlay + aria-busy, label
  keeps its layout box, accessible name becomes "Loading…", and the
  control can't double-fire
- Spinner + Skeleton primitives (skeleton pulse is motion-safe only)
- Input/Textarea/Select trigger: transitions, subtle hover border,
  aria-invalid styling; select chevron flips while open
- Checkbox/Radio: cursor, color transition, tiny check zoom-in
- Card: opt-in `interactive` treatment (2px lift + border emphasis)
- Badge: remove hover styles — status chips are read-only, not controls
- Dialog/Toast close buttons + Klaro buttons: cursor-pointer
- Tests covering the Button loading contract, press affordances,
  Spinner/Skeleton semantics, and Checkbox toggling

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/app/globals.css               |  30 +++++++++
 src/components/ui/badge.tsx       |   9 ++-
 src/components/ui/button.tsx      |  58 +++++++++++++++--
 src/components/ui/card.tsx        |  26 ++++++--
 src/components/ui/checkbox.tsx    |   6 +-
 src/components/ui/dialog.tsx      |   2 +-
 src/components/ui/input.tsx       |   2 +-
 src/components/ui/radio-group.tsx |   4 +-
 src/components/ui/select.tsx      |   8 ++-
 src/components/ui/skeleton.tsx    |  17 +++++
 src/components/ui/spinner.tsx     |  15 +++++
 src/components/ui/textarea.tsx    |   2 +-
 src/components/ui/toast.tsx       |   2 +-
 tests/ui-interactions.test.tsx    | 104 ++++++++++++++++++++++++++++++
 14 files changed, 262 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ui/skeleton.tsx
 create mode 100644 src/components/ui/spinner.tsx
 create mode 100644 tests/ui-interactions.test.tsx

diff --git a/src/app/globals.css b/src/app/globals.css
index 53cd031..0f33f13 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -44,6 +44,17 @@
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
+
+  /* Shared interaction timing (#280). Three durations cover every
+     micro-interaction so component code never scatters magic numbers:
+       press — pointer-down/active feedback (immediate)
+       fast  — hover, focus, colour/state transitions
+       ui    — menus, popovers, small panel entrances
+     Larger entrances keep tw-animate-css's defaults. */
+  --duration-press: 100ms;
+  --duration-fast: 150ms;
+  --duration-ui: 200ms;
+  --ease-ui: cubic-bezier(0.2, 0, 0, 1);
 }
 
 @layer base {
@@ -148,6 +159,24 @@
   .animate-out {
     animation: none;
   }
+
+  /* State changes go instant (#280): every CSS transition collapses to
+     ~0ms so hover/press/focus feedback still applies without motion.
+     Keyframe animations are left alone on purpose — the entrance
+     animations above are already suppressed, and remaining keyframe
+     uses (loading spinners) are functional indicators, not decoration.
+     The skeleton pulse opt-outs via motion-safe: instead. */
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+  }
+
+  /* Anchored scrolling counts as decorative motion here. */
+  html {
+    scroll-behavior: auto;
+  }
 }
 
 /* ---------- Klaro consent UI ----------
@@ -212,6 +241,7 @@
   min-height: 2.5rem;
   padding: 0.5rem 1rem;
   margin-right: 0;
+  cursor: pointer;
   border: 1px solid hsl(var(--border));
   border-radius: calc(var(--radius) - 2px);
   background-color: hsl(var(--secondary));
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index f6eae7c..30de126 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -3,17 +3,20 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
+// Status chips are read-only — every Badge in the app reports state,
+// none are controls. Hover styles would promise an interaction that
+// isn't there (#280), so variants intentionally carry no hover effect.
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+          "border-transparent bg-primary text-primary-foreground",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-secondary text-secondary-foreground",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+          "border-transparent bg-destructive text-destructive-foreground",
         outline: "text-foreground",
       },
     },
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index f51ad82..ab04677 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -2,9 +2,21 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
+import { Spinner } from "@/components/ui/spinner";
 
+// Interaction layer (#280):
+// - cursor-pointer: Tailwind v4 preflight leaves buttons on
+//   `cursor: default`, which made every action read as non-interactive.
+// - select-none: rapid clicks must never select the label text.
+// - active:scale-[0.98] at --duration-press: the button physically
+//   acknowledges the press before the network round-trip. Kept to 2%
+//   so it reads as weight, not a bounce. The `link` variant opts out —
+//   a text link should underline, not shrink.
+// - transition-all + --duration-fast: colour/hover/active changes ride
+//   the shared timing tokens. Reduced-motion users get the same states
+//   instantly via the global transition cap in globals.css.
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-fast active:duration-press cursor-pointer select-none active:scale-[0.98] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -13,7 +25,7 @@ const buttonVariants = cva(
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-primary underline-offset-4 hover:underline active:scale-100",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -33,12 +45,50 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  // True while an async action is in flight. The button becomes
+  // non-interactive (duplicate submissions can't fire), gains
+  // aria-busy, and shows a centred spinner over the hidden label —
+  // the label keeps its layout box so the button never changes size
+  // mid-interaction, and the accessible name becomes "Loading…".
+  loading?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }), loading && "pointer-events-none")}
+        ref={ref}
+        // Native `disabled` blocks re-clicks on real buttons; slotted
+        // children (usually <a>) get aria-disabled + pointer-events-none
+        // instead since anchors have no disabled attribute.
+        disabled={asChild ? undefined : disabled || loading}
+        aria-disabled={asChild && (disabled || loading) ? true : undefined}
+        aria-busy={loading || undefined}
+        {...props}
+      >
+        {loading ? (
+          <>
+            <span
+              className="inline-flex items-center justify-center gap-2 opacity-0"
+              aria-hidden="true"
+            >
+              {children}
+            </span>
+            <span
+              className="absolute inset-0 flex items-center justify-center"
+              aria-hidden="true"
+            >
+              <Spinner />
+            </span>
+            <span className="sr-only">Loading…</span>
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
+    );
   }
 );
 Button.displayName = "Button";
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 564155a..3159982 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,11 +1,27 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-xs", className)} {...props} />
-  )
-);
+// `interactive` marks a card whose whole surface activates something
+// (wrapped in a Link, or an onClick target). The affordance stays
+// restrained — a 2px lift, border emphasis, slightly deeper shadow —
+// and static cards keep the plain treatment so informational panels
+// don't beg for clicks (#280). Consumers wrap the card in the actual
+// interactive element (which carries the focus-visible ring).
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { interactive?: boolean }
+>(({ className, interactive = false, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-xs",
+      interactive &&
+        "transition-[transform,box-shadow,border-color] duration-fast hover:-translate-y-0.5 hover:border-foreground/20 hover:shadow-md active:translate-y-0 active:shadow-xs",
+      className
+    )}
+    {...props}
+  />
+));
 Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index b15bc2f..c0b1f18 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -11,13 +11,15 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background transition-colors duration-fast cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     )}
     {...props}
   >
+    {/* The check mounts on check — a tiny zoom-in makes the state
+        change legible; suppressed entirely under reduced-motion. */}
     <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
+      className={cn("flex items-center justify-center text-current data-[state=checked]:animate-in data-[state=checked]:fade-in-0 data-[state=checked]:zoom-in-75")}
     >
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 11d4d54..32775ca 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-all duration-fast cursor-pointer hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 1dd2d91..fc13534 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
     <input
       type={type}
       className={cn(
-        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors duration-fast file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground enabled:hover:border-foreground/30 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-invalid:border-destructive aria-invalid:ring-destructive/40 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       ref={ref}
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
index f8a8f9f..01e4f9a 100644
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -26,12 +26,12 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background transition-colors duration-fast cursor-pointer focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center data-[state=checked]:animate-in data-[state=checked]:fade-in-0 data-[state=checked]:zoom-in-75">
         <Circle className="h-2.5 w-2.5 fill-current text-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 87e5a44..60fb702 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -14,14 +14,16 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors duration-fast cursor-pointer placeholder:text-muted-foreground enabled:hover:border-foreground/30 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 data-[state=open]:border-ring data-[state=open]:[&_svg]:rotate-180",
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      {/* Chevron flips while the menu is open so the trigger visibly
+          owns the open state — data-[state=open] lives on the trigger. */}
+      <ChevronDown className="h-4 w-4 opacity-50 transition-transform duration-fast" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -98,7 +100,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors duration-fast focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..b615949
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils";
+
+// Loading placeholder (#280). Sized to the layout it replaces so
+// content doesn't jump when real data lands. The pulse is
+// motion-safe-only: under prefers-reduced-motion the block stays
+// static rather than shimmering.
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("rounded-md bg-muted motion-safe:animate-pulse", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
new file mode 100644
index 0000000..4ebb292
--- /dev/null
+++ b/src/components/ui/spinner.tsx
@@ -0,0 +1,15 @@
+import { LoaderCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// Shared loading indicator (#280). Decorative — callers own the
+// accessible loading semantics (Button renders it inside an
+// aria-busy control; standalone uses should pair it with a text
+// label or sr-only copy describing what is loading).
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <LoaderCircle
+      className={cn("size-4 animate-spin", className)}
+      aria-hidden="true"
+    />
+  );
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index e0d9d85..f8b14f6 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ classNa
   return (
     <textarea
       className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors duration-fast placeholder:text-muted-foreground enabled:hover:border-foreground/30 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-invalid:border-destructive aria-invalid:ring-destructive/40 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       ref={ref}
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index cea8bf5..cf3ccc5 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -66,7 +66,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity cursor-pointer hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className
     )}
     toast-close=""
diff --git a/tests/ui-interactions.test.tsx b/tests/ui-interactions.test.tsx
new file mode 100644
index 0000000..f8c8400
--- /dev/null
+++ b/tests/ui-interactions.test.tsx
@@ -0,0 +1,104 @@
+// Tests for the shared interaction primitives (#280): the Button
+// loading contract (width-stable, non-reentrant, accessible), Spinner,
+// Skeleton, and Checkbox state feedback.
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
+
+describe("Button press + pointer affordances", () => {
+  test("buttons advertise pointer cursor and a press state", () => {
+    render(<Button>Save</Button>);
+    const button = screen.getByRole("button", { name: "Save" });
+    expect(button.className).toContain("cursor-pointer");
+    expect(button.className).toContain("active:scale-[0.98]");
+  });
+
+  test("link variant opts out of the scale press", () => {
+    render(
+      <Button variant="link" asChild>
+        <a href="/somewhere">Read more</a>
+      </Button>,
+    );
+    expect(screen.getByRole("link", { name: "Read more" }).className).toContain(
+      "active:scale-100",
+    );
+  });
+});
+
+describe("Button loading", () => {
+  test("exposes aria-busy, becomes non-interactive, and announces Loading", () => {
+    render(<Button loading>Save changes</Button>);
+    const button = screen.getByRole("button", { name: "Loading…" });
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute("aria-busy", "true");
+  });
+
+  test("preserves the label's layout box while loading", () => {
+    // The children keep their (invisible) layout footprint so the
+    // button can't shrink or grow when the spinner appears.
+    render(<Button loading>Save changes</Button>);
+    const labelSpan = screen.getByText("Save changes");
+    expect(labelSpan).toHaveAttribute("aria-hidden", "true");
+    expect(labelSpan.className).toContain("opacity-0");
+  });
+
+  test("cannot be re-clicked while loading", () => {
+    const onClick = vi.fn();
+    render(
+      <Button loading onClick={onClick}>
+        Save changes
+      </Button>,
+    );
+    fireEvent.click(screen.getByRole("button"));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test("resumes normal behaviour once loading clears", () => {
+    const onClick = vi.fn();
+    const { rerender } = render(
+      <Button loading={false} onClick={onClick}>
+        Save changes
+      </Button>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+    rerender(
+      <Button loading onClick={onClick}>
+        Save changes
+      </Button>,
+    );
+    expect(screen.getByRole("button")).toHaveAttribute("aria-busy", "true");
+  });
+});
+
+describe("Spinner", () => {
+  test("is purely decorative — callers own the loading semantics", () => {
+    const { container } = render(<Spinner />);
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "aria-hidden",
+      "true",
+    );
+  });
+});
+
+describe("Skeleton", () => {
+  test("is hidden from AT and only pulses when motion is allowed", () => {
+    render(<Skeleton data-testid="s" className="h-10 w-24" />);
+    const el = screen.getByTestId("s");
+    expect(el).toHaveAttribute("aria-hidden", "true");
+    expect(el.className).toContain("motion-safe:animate-pulse");
+  });
+});
+
+describe("Checkbox", () => {
+  test("still toggles through pointer and keyboard semantics", () => {
+    render(<Checkbox aria-label="Agree" />);
+    const box = screen.getByRole("checkbox", { name: "Agree" });
+    expect(box).toHaveAttribute("data-state", "unchecked");
+    fireEvent.click(box);
+    expect(box).toHaveAttribute("data-state", "checked");
+  });
+});

From 729b58f1eace59f1e180d420b0f188109ce7b7ee Mon Sep 17 00:00:00 2001
From: Chad Nuttall <chadnuttall1@gmail.com>
Date: Sat, 3 Oct 2026 22:02:01 -0400
Subject: [PATCH 2/5] Add loadingText for labelled pending states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Width-stable loading keeps the hidden label's layout box, but some
consequential actions read better with the in-flight verb visible
("Deleting…", "Logging out…"). loadingText swaps the label for
spinner + text; callers choose it deliberately.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/components/ui/button.tsx | 41 +++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index ab04677..c327e0b 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -50,11 +50,15 @@ export interface ButtonProps
   // aria-busy, and shows a centred spinner over the hidden label —
   // the label keeps its layout box so the button never changes size
   // mid-interaction, and the accessible name becomes "Loading…".
+  // Pass loadingText when the in-flight verb matters ("Deleting…"):
+  // it replaces the label outright — allowed to shift width, callers
+  // pick it deliberately for consequential actions.
   loading?: boolean;
+  loadingText?: string;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading = false, loadingText, disabled, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
@@ -69,21 +73,28 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {loading ? (
-          <>
-            <span
-              className="inline-flex items-center justify-center gap-2 opacity-0"
-              aria-hidden="true"
-            >
-              {children}
-            </span>
-            <span
-              className="absolute inset-0 flex items-center justify-center"
-              aria-hidden="true"
-            >
+          loadingText !== undefined ? (
+            <>
               <Spinner />
-            </span>
-            <span className="sr-only">Loading…</span>
-          </>
+              {loadingText}
+            </>
+          ) : (
+            <>
+              <span
+                className="inline-flex items-center justify-center gap-2 opacity-0"
+                aria-hidden="true"
+              >
+                {children}
+              </span>
+              <span
+                className="absolute inset-0 flex items-center justify-center"
+                aria-hidden="true"
+              >
+                <Spinner />
+              </span>
+              <span className="sr-only">Loading…</span>
+            </>
+          )
         ) : (
           children
         )}

From cafe3712318331d05d21b5e3dfd65c18e8c33a0b Mon Sep 17 00:00:00 2001
From: Chad Nuttall <chadnuttall1@gmail.com>
Date: Sat, 3 Oct 2026 22:08:19 -0400
Subject: [PATCH 3/5] Address CodeRabbit review on interaction primitives
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- asChild + loading no longer wraps Slot's child in a fragment —
  the slotted element stays Slot's direct child so cloned classes
  and aria attributes still reach it
- props spread moves before the disabled/aria guards so callers
  can't weaken the loading contract
- Select trigger chevron rotates via group data-state instead of a
  descendant svg selector, so child icons aren't flipped too
- Spinner gains an optional label (role="status" + sr-only) for
  standalone use
- transition-all narrowed to explicit property lists on Button and
  the dialog close button
- the loading-resumption test now verifies clicks work again after
  loading clears

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/components/ui/button.tsx   | 11 +++++++----
 src/components/ui/dialog.tsx   |  2 +-
 src/components/ui/select.tsx   |  7 ++++---
 src/components/ui/spinner.tsx  | 24 ++++++++++++++++++------
 tests/ui-interactions.test.tsx |  7 +++++++
 5 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index c327e0b..01ed8d0 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -12,11 +12,12 @@ import { Spinner } from "@/components/ui/spinner";
 //   acknowledges the press before the network round-trip. Kept to 2%
 //   so it reads as weight, not a bounce. The `link` variant opts out —
 //   a text link should underline, not shrink.
-// - transition-all + --duration-fast: colour/hover/active changes ride
+// - explicit transition list + --duration-fast: colour/hover/active
+//   changes ride
 //   the shared timing tokens. Reduced-motion users get the same states
 //   instantly via the global transition cap in globals.css.
 const buttonVariants = cva(
-  "relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-fast active:duration-press cursor-pointer select-none active:scale-[0.98] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-fast active:duration-press cursor-pointer select-none active:scale-[0.98] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -67,12 +68,14 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         // Native `disabled` blocks re-clicks on real buttons; slotted
         // children (usually <a>) get aria-disabled + pointer-events-none
         // instead since anchors have no disabled attribute.
+        {...props}
+        // Spread props first so a caller's aria-busy/aria-disabled
+        // can't weaken the loading guards below.
         disabled={asChild ? undefined : disabled || loading}
         aria-disabled={asChild && (disabled || loading) ? true : undefined}
         aria-busy={loading || undefined}
-        {...props}
       >
-        {loading ? (
+        {loading && !asChild ? (
           loadingText !== undefined ? (
             <>
               <Spinner />
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 32775ca..545bb19 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-all duration-fast cursor-pointer hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity duration-fast cursor-pointer hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 60fb702..33a7f79 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -14,7 +14,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors duration-fast cursor-pointer placeholder:text-muted-foreground enabled:hover:border-foreground/30 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 data-[state=open]:border-ring data-[state=open]:[&_svg]:rotate-180",
+      "group flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors duration-fast cursor-pointer placeholder:text-muted-foreground enabled:hover:border-foreground/30 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 data-[state=open]:border-ring",
       className
     )}
     {...props}
@@ -22,8 +22,9 @@ const SelectTrigger = React.forwardRef<
     {children}
     <SelectPrimitive.Icon asChild>
       {/* Chevron flips while the menu is open so the trigger visibly
-          owns the open state — data-[state=open] lives on the trigger. */}
-      <ChevronDown className="h-4 w-4 opacity-50 transition-transform duration-fast" />
+          owns the open state. Scoped via `group` so svgs passed as
+          children aren't rotated too. */}
+      <ChevronDown className="h-4 w-4 opacity-50 transition-transform duration-fast group-data-[state=open]:rotate-180" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
index 4ebb292..da8e20a 100644
--- a/src/components/ui/spinner.tsx
+++ b/src/components/ui/spinner.tsx
@@ -1,15 +1,27 @@
 import { LoaderCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
 
-// Shared loading indicator (#280). Decorative — callers own the
-// accessible loading semantics (Button renders it inside an
-// aria-busy control; standalone uses should pair it with a text
-// label or sr-only copy describing what is loading).
-export function Spinner({ className }: { className?: string }) {
-  return (
+// Shared loading indicator (#280). Decorative by default — Button
+// renders it inside an aria-busy control. Standalone uses can pass
+// `label` to get role="status" + sr-only text announcing what loads.
+export function Spinner({
+  className,
+  label,
+}: {
+  className?: string;
+  label?: string;
+}) {
+  const icon = (
     <LoaderCircle
       className={cn("size-4 animate-spin", className)}
       aria-hidden="true"
     />
   );
+  if (!label) return icon;
+  return (
+    <span role="status" className="inline-flex">
+      {icon}
+      <span className="sr-only">{label}</span>
+    </span>
+  );
 }
diff --git a/tests/ui-interactions.test.tsx b/tests/ui-interactions.test.tsx
index f8c8400..cb650f4 100644
--- a/tests/ui-interactions.test.tsx
+++ b/tests/ui-interactions.test.tsx
@@ -71,6 +71,13 @@ describe("Button loading", () => {
       </Button>,
     );
     expect(screen.getByRole("button")).toHaveAttribute("aria-busy", "true");
+    rerender(
+      <Button loading={false} onClick={onClick}>
+        Save changes
+      </Button>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+    expect(onClick).toHaveBeenCalledTimes(2);
   });
 });
 

From 04c1744680c0e26cb2869c52b4856d2bbd7ea490 Mon Sep 17 00:00:00 2001
From: Chad Nuttall <chadnuttall1@gmail.com>
Date: Sun, 4 Oct 2026 21:58:59 -0400
Subject: [PATCH 4/5] fix(ui): block keyboard activation on inert slotted
 buttons (#280)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CodeRabbit finding on #282: for `asChild` buttons, aria-disabled +
pointer-events-none left a focused <a> keyboard-activatable — Enter
fires the href via keydown's default action, and a slotted <button>
can still fire click on Space keyup. Add event-level guards while
inert (click + Enter/Space), drop the control from the tab order, and
leave all other keys — Tab included — untouched so focus never traps.
Regression coverage for loading and disabled slotted anchors plus the
interactive case.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/components/ui/button.tsx   | 29 ++++++++++++++++--
 tests/ui-interactions.test.tsx | 56 ++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 01ed8d0..134026b 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -59,8 +59,25 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, loading = false, loadingText, disabled, children, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading = false, loadingText, disabled, children, onClick, onKeyDown, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
+    const inert = disabled || loading;
+    // Slotted children aren't real buttons — aria-disabled and
+    // pointer-events-none leave a focused <a> keyboard-activatable
+    // (Enter activates the href on keydown's default action) and a
+    // slotted <button> can still fire click on Space keyup. Block
+    // activation at the event level while inert, without touching
+    // other keys (Tab must still move focus on).
+    const guardClick = (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const guardKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }), loading && "pointer-events-none")}
@@ -71,9 +88,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
         // Spread props first so a caller's aria-busy/aria-disabled
         // can't weaken the loading guards below.
-        disabled={asChild ? undefined : disabled || loading}
-        aria-disabled={asChild && (disabled || loading) ? true : undefined}
+        disabled={asChild ? undefined : inert}
+        aria-disabled={asChild && inert ? true : undefined}
         aria-busy={loading || undefined}
+        // An inert slotted control leaves the tab order entirely —
+        // matching native disabled semantics instead of letting focus
+        // land on a control that cannot act.
+        tabIndex={asChild && inert ? -1 : props.tabIndex}
+        onClick={asChild && inert ? guardClick : onClick}
+        onKeyDown={asChild && inert ? guardKeyDown : onKeyDown}
       >
         {loading && !asChild ? (
           loadingText !== undefined ? (
diff --git a/tests/ui-interactions.test.tsx b/tests/ui-interactions.test.tsx
index cb650f4..4032d14 100644
--- a/tests/ui-interactions.test.tsx
+++ b/tests/ui-interactions.test.tsx
@@ -2,6 +2,7 @@
 // loading contract (width-stable, non-reentrant, accessible), Spinner,
 // Skeleton, and Checkbox state feedback.
 import { fireEvent, render, screen } from "@testing-library/react";
+import type { MouseEvent } from "react";
 import { describe, expect, test, vi } from "vitest";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -79,6 +80,61 @@ describe("Button loading", () => {
     fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
     expect(onClick).toHaveBeenCalledTimes(2);
   });
+
+  test("a loading slotted anchor is not keyboard-activatable", () => {
+    // A slotted <a> has no native disabled — aria-disabled +
+    // pointer-events-none alone leave Enter able to fire the href.
+    const onClick = vi.fn();
+    render(
+      <Button asChild loading onClick={onClick}>
+        <a href="/somewhere">Read more</a>
+      </Button>,
+    );
+    const link = screen.getByRole("link", { name: "Read more" });
+    expect(link).toHaveAttribute("aria-disabled", "true");
+    expect(link).toHaveAttribute("aria-busy", "true");
+    expect(link).toHaveAttribute("tabIndex", "-1");
+    // Enter activation on an anchor is keydown's default action —
+    // preventing it prevents the click entirely.
+    expect(fireEvent.keyDown(link, { key: "Enter" })).toBe(false);
+    expect(fireEvent.keyDown(link, { key: " " })).toBe(false);
+    fireEvent.click(link);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test("a disabled slotted anchor gets the same inert treatment", () => {
+    const onClick = vi.fn();
+    render(
+      <Button asChild disabled onClick={onClick}>
+        <a href="/somewhere">Read more</a>
+      </Button>,
+    );
+    const link = screen.getByRole("link", { name: "Read more" });
+    expect(link).toHaveAttribute("aria-disabled", "true");
+    expect(link).toHaveAttribute("tabIndex", "-1");
+    expect(fireEvent.keyDown(link, { key: "Enter" })).toBe(false);
+    fireEvent.click(link);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test("an interactive slotted anchor keeps full keyboard behaviour", () => {
+    // Guard keys only while inert — Enter/Space and click work, and
+    // unrelated keys (Tab) must pass through so focus can still move.
+    // preventDefault keeps jsdom from logging a navigation notice.
+    const onClick = vi.fn((e: MouseEvent) => e.preventDefault());
+    render(
+      <Button asChild onClick={onClick}>
+        <a href="/somewhere">Read more</a>
+      </Button>,
+    );
+    const link = screen.getByRole("link", { name: "Read more" });
+    expect(link).not.toHaveAttribute("aria-disabled");
+    expect(link).not.toHaveAttribute("tabIndex");
+    expect(fireEvent.keyDown(link, { key: "Enter" })).toBe(true);
+    expect(fireEvent.keyDown(link, { key: "Tab" })).toBe(true);
+    fireEvent.click(link);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe("Spinner", () => {

From ba4c65b6f53facbdcaa512fe129dbc212db2527c Mon Sep 17 00:00:00 2001
From: Chad Nuttall <chadnuttall1@gmail.com>
Date: Sun, 4 Oct 2026 22:16:06 -0400
Subject: [PATCH 5/5] fix(ui): suppress child-owned activation handlers while
 inert (#280)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up CodeRabbit finding on #282: Radix Slot invokes the child's
own handlers before Button's guards, so a slotted element's onClick
or onKeyDown could still run while loading/disabled. While inert the
child is cloned with activation handlers replaced — non-activation
keys still fall through to the child's own handler. Covered by a
regression test for child-owned click/Enter/Space handlers.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/components/ui/button.tsx   | 33 ++++++++++++++++++++++++++++++++-
 tests/ui-interactions.test.tsx | 22 ++++++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 134026b..ab484e2 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -78,6 +78,37 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         e.stopPropagation();
       }
     };
+    // Slot calls the CHILD's own handlers before ours — an inert
+    // slotted element's onClick/onKeyDown would still run. While inert,
+    // replace activation handlers on the child itself; non-activation
+    // keys still fall through to the child's own handler.
+    const slottedChildren =
+      asChild &&
+      inert &&
+      React.isValidElement<{
+        onClick?: React.MouseEventHandler;
+        onKeyDown?: React.KeyboardEventHandler;
+        onKeyUp?: React.KeyboardEventHandler;
+      }>(children)
+        ? React.cloneElement(children, {
+            onClick: guardClick,
+            onKeyDown: (e: React.KeyboardEvent) => {
+              if (e.key === "Enter" || e.key === " ") {
+                guardKeyDown(e);
+              } else {
+                children.props.onKeyDown?.(e);
+              }
+            },
+            onKeyUp: (e: React.KeyboardEvent) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+              } else {
+                children.props.onKeyUp?.(e);
+              }
+            },
+          })
+        : children;
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }), loading && "pointer-events-none")}
@@ -122,7 +153,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             </>
           )
         ) : (
-          children
+          slottedChildren
         )}
       </Comp>
     );
diff --git a/tests/ui-interactions.test.tsx b/tests/ui-interactions.test.tsx
index 4032d14..724ccc2 100644
--- a/tests/ui-interactions.test.tsx
+++ b/tests/ui-interactions.test.tsx
@@ -102,6 +102,28 @@ describe("Button loading", () => {
     expect(onClick).not.toHaveBeenCalled();
   });
 
+  test("an inert slotted child's own activation handlers are suppressed", () => {
+    // Slot invokes child-owned handlers before the Button's guards —
+    // while inert the child's onClick/onKeyDown must not run at all.
+    const childClick = vi.fn();
+    const childKey = vi.fn();
+    render(
+      <Button asChild loading>
+        <a href="/somewhere" onClick={childClick} onKeyDown={childKey}>
+          Read more
+        </a>
+      </Button>,
+    );
+    const link = screen.getByRole("link", { name: "Read more" });
+    fireEvent.click(link);
+    fireEvent.keyDown(link, { key: "Enter" });
+    fireEvent.keyUp(link, { key: " " });
+    expect(childClick).not.toHaveBeenCalled();
+    // Non-activation keys still reach the child handler.
+    expect(fireEvent.keyDown(link, { key: "ArrowDown" })).toBe(true);
+    expect(childKey).toHaveBeenCalledTimes(1);
+  });
+
   test("a disabled slotted anchor gets the same inert treatment", () => {
     const onClick = vi.fn();
     render(