Merge upstream/main into feat/ds-015-018-icon-button-input-field-textarea

Resolves conflicts in numeric.tsx and button.test.tsx against PR SO4-Markets#445,
which landed its own independent (and more complete) fix for the same
NumericText regression this branch also fixed. Took upstream's version of
numeric.tsx as-is: it keeps Numeric's original "danger"/"brand-long"/
"brand-short" roles under a LegacyNumericRole alias for backward
compatibility, alongside a properly separated NumericText/numericTextVariants
for the newer neutral/muted/positive/negative/warning/accent role set.

Reverted this branch's role="warning" edits in TradeInfoRows.tsx and
PositionsList.tsx back to role="danger" to match the restored
LegacyNumericRole type Numeric now uses upstream.

button.test.tsx conflict was just import ordering; kept both the sorted
imports and the `screen` import upstream's new test needs.

Author: balisdev

apps/web/src/features/trade/components/positions/PositionsList.tsx

@@ -153,7 +153,7 @@ export function PositionsList({ onSelectPosition }: Props) {
       header: "Liq.",
       accessor: (p) => {
         const closeToLiq = Math.abs(p.markPrice - p.liquidationPrice) / p.markPrice <= 0.1
-        return <Numeric value={p.liquidationPrice} format="usd" role={closeToLiq ? "warning" : "neutral"} />
+        return <Numeric value={p.liquidationPrice} format="usd" role={closeToLiq ? "danger" : "neutral"} />
       },
     },
     {

apps/web/src/features/trade/components/trade-panel/TradeInfoRows.tsx

@@ -62,7 +62,7 @@ export function TradeInfoRows({
     <div className="min-w-0 space-y-1 overflow-x-hidden text-xs">
       <Row label="Entry price" value={estimatedEntryPrice > 0 ? <Numeric value={estimatedEntryPrice} format="usd" role="neutral" /> : "-"} />
       {tradeMode === "Limit" && <Row label="Limit price" value="-" />}
-      <Row label="Liq. price" value={liquidationPrice > 0 ? <Numeric value={liquidationPrice} format="usd" role="warning" /> : "-"} />
+      <Row label="Liq. price" value={liquidationPrice > 0 ? <Numeric value={liquidationPrice} format="usd" role="danger" /> : "-"} />
       <Row
         label="Funding"
         value={
@@ -72,7 +72,7 @@ export function TradeInfoRows({
         }
       />
       <Row label="Position fee" value={<Numeric value={fees.positionFeeUsd} format="usd" role="neutral" />} />
-      <Row label="Price impact" value={<Numeric value={priceImpactPct} format="pct" role={Math.abs(priceImpactPct) > 0.5 ? "warning" : "neutral"} />} />
+      <Row label="Price impact" value={<Numeric value={priceImpactPct} format="pct" role={Math.abs(priceImpactPct) > 0.5 ? "danger" : "neutral"} />} />
       <ExecutionFeeRow value={executionFeeDisplay} />
       <div className="border-t border-border pt-1">
         <Row label="Total fees" value={<Numeric value={fees.totalFeesUsd} format="usd" role="neutral" />} bold />

packages/ui/src/components/button.test.tsx

@@ -1,7 +1,27 @@
 import { describe, expect, it } from "vitest"
-import { render } from "@testing-library/react"
+import { render, screen } from "@testing-library/react"
 import { axe } from "vitest-axe"
-import { Button } from "./button"
+import { Button, buttonVariants } from "./button"
+
+const VARIANTS = [
+  "default",
+  "outline",
+  "secondary",
+  "ghost",
+  "destructive",
+  "link",
+] as const
+
+const SIZES = [
+  "default",
+  "xs",
+  "sm",
+  "lg",
+  "icon",
+  "icon-xs",
+  "icon-sm",
+  "icon-lg",
+] as const
 
 describe("Button accessibility", () => {
   it("has no accessibility violations", async () => {
@@ -26,3 +46,44 @@ describe("Button accessibility", () => {
     expect(results).toHaveNoViolations()
   })
 })
+
+describe("Button variants and sizes", () => {
+  it.each(VARIANTS)("renders the %s variant without violations", async (variant) => {
+    const { container } = render(<Button variant={variant}>Action</Button>)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  it.each(SIZES)("renders the %s size without violations", async (size) => {
+    const isIconSize = size.startsWith("icon")
+    const { container } = render(
+      isIconSize ? (
+        <Button size={size} aria-label="Action">
+          <svg viewBox="0 0 24 24" />
+        </Button>
+      ) : (
+        <Button size={size}>Action</Button>
+      )
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  it("every variant defines default, hover, active, and disabled classes", () => {
+    for (const variant of VARIANTS) {
+      const className = buttonVariants({ variant })
+      expect(className).toMatch(/hover:/)
+      expect(className).toMatch(/active:/)
+    }
+    // disabled + focus-visible states live in the shared base classes.
+    expect(buttonVariants({})).toMatch(/disabled:/)
+    expect(buttonVariants({})).toMatch(/focus-visible:/)
+  })
+
+  it("keeps the icon-only button's accessible name from aria-label, not the icon", () => {
+    render(
+      <Button size="icon" aria-label="Settings">
+        <svg viewBox="0 0 24 24" />
+      </Button>
+    )
+    expect(screen.getByRole("button", { name: "Settings" })).toBeInTheDocument()
+  })
+})

packages/ui/src/components/button.tsx

@@ -9,16 +9,17 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/80 active:not-aria-[haspopup]:bg-primary/70",
         outline:
-          "border-border hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30",
+          "border-border hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground active:not-aria-[haspopup]:bg-input/70 dark:bg-input/30 dark:active:not-aria-[haspopup]:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground active:not-aria-[haspopup]:bg-secondary/70",
         ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground active:not-aria-[haspopup]:bg-muted/70 dark:hover:bg-muted/50 dark:active:not-aria-[haspopup]:bg-muted/40",
         destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 active:not-aria-[haspopup]:bg-destructive/30 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40 dark:active:not-aria-[haspopup]:bg-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline active:not-aria-[haspopup]:text-primary/70",
       },
       size: {
         default:

packages/ui/src/components/loading-button.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { axe } from "vitest-axe"
+import { LoadingButton } from "./loading-button"
+
+describe("LoadingButton", () => {
+  it("is disabled and aria-busy while loading, with text content", async () => {
+    const { container } = render(
+      <LoadingButton isLoading loadingText="Confirming...">
+        Stake
+      </LoadingButton>
+    )
+    const button = screen.getByRole("button", { name: "Confirming..." })
+    expect(button).toBeDisabled()
+    expect(button).toHaveAttribute("aria-busy", "true")
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  it("falls back to children as the loading label when loadingText is omitted", () => {
+    render(<LoadingButton isLoading>Stake</LoadingButton>)
+    expect(screen.getByRole("button", { name: "Stake" })).toBeInTheDocument()
+  })
+
+  it("is not disabled and not aria-busy when not loading", () => {
+    render(<LoadingButton>Stake</LoadingButton>)
+    const button = screen.getByRole("button", { name: "Stake" })
+    expect(button).not.toBeDisabled()
+    expect(button).not.toHaveAttribute("aria-busy")
+  })
+
+  it("keeps the width-reserving spinner slot present (but hidden) when not loading", () => {
+    const { container } = render(<LoadingButton>Stake</LoadingButton>)
+    const slot = container.querySelector('[aria-hidden="true"]')
+    expect(slot).toBeInTheDocument()
+    expect(slot).toHaveClass("invisible")
+  })
+
+  it("supports an icon-only loading button, keeping its accessible name", async () => {
+    const { container } = render(
+      <LoadingButton isLoading size="icon" aria-label="Stake">
+        <svg viewBox="0 0 24 24" />
+      </LoadingButton>
+    )
+    const button = screen.getByRole("button", { name: "Stake" })
+    expect(button).toBeDisabled()
+    expect(button).toHaveAttribute("aria-busy", "true")
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

packages/ui/src/components/loading-button.tsx

@@ -13,6 +13,10 @@ type LoadingButtonProps = ComponentProps<typeof Button> & {
  * Button that owns its own pending presentation: disables itself, flags
  * `aria-busy` and swaps in a spinner. The spinner is `aria-hidden`, so the
  * accessible name is exactly `loadingText` (or the children).
+ *
+ * The spinner sits in a fixed-size slot that's always present (just hidden
+ * via `invisible` when not loading), so entering the loading state never
+ * changes the button's width.
  */
 function LoadingButton({
   isLoading = false,
@@ -30,14 +34,16 @@ function LoadingButton({
       className={cn("gap-1.5", className)}
       {...props}
     >
-      {isLoading ? (
-        <>
-          <Spinner />
-          {loadingText ?? children}
-        </>
-      ) : (
-        children
-      )}
+      <span
+        aria-hidden="true"
+        className={cn(
+          "inline-flex size-3 shrink-0 items-center justify-center",
+          !isLoading && "invisible"
+        )}
+      >
+        {isLoading && <Spinner />}
+      </span>
+      {isLoading ? (loadingText ?? children) : children}
     </Button>
   )
 }