@smicolon/fasla-ui 0.2.4 → 0.3.0

package/registry/ui/badge/badge.test.tsx

@@ -1,51 +1,286 @@
-import { describe, it, expect } from "vitest"
-import { render, screen } from "@testing-library/react"
-import { Badge } from "./badge"
+import * as React from "react"
+import { readFileSync } from "node:fs"
+import { dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+import { beforeAll, describe, it, expect, vi } from "vitest"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { Badge, type BadgeProps } from "./badge"
+
+const SOURCE = readFileSync(
+  resolve(dirname(fileURLToPath(import.meta.url)), "badge.tsx"),
+  "utf8"
+)
+
+const Star = () => (
+  <svg data-testid="icon" viewBox="0 0 24 24">
+    <path d="M12 2 15 9 22 9 16 14 18 21 12 17 6 21 8 14 2 9 9 9Z" />
+  </svg>
+)
+
+function badge(props: Partial<BadgeProps> = {}) {
+  render(
+    <Badge data-testid="badge" {...props}>
+      {props.children ?? "Badge"}
+    </Badge>
+  )
+  return screen.getByTestId("badge")
+}
 
 describe("Badge", () => {
-  it("renders with default props", () => {
-    render(<Badge>Default</Badge>)
-    expect(screen.getByText("Default")).toBeInTheDocument()
+  it("renders a span with Figma's defaults: Solid, Primary, sm, Rounded", () => {
+    const el = badge()
+    expect(el.tagName).toBe("SPAN")
+    expect(el).toHaveClass("bg-primary", "text-primary-foreground", "rounded-full")
+    expect(el).toHaveClass("min-h-5", "px-1.5", "py-0.5", "gap-0.5", "text-xs", "font-medium")
+  })
+
+  describe("variant × tone", () => {
+    const cases: Array<[BadgeProps["variant"], BadgeProps["tone"], string[]]> = [
+      ["solid", "primary", ["bg-primary", "text-primary-foreground"]],
+      ["solid", "secondary", ["bg-secondary", "text-secondary-foreground"]],
+      ["solid", "info", ["bg-info", "text-info-foreground"]],
+      ["solid", "success", ["bg-success", "text-success-foreground"]],
+      ["solid", "warning", ["bg-warning", "text-warning-foreground"]],
+      ["solid", "destructive", ["bg-destructive", "text-destructive-foreground"]],
+      ["soft", "primary", ["from-soft-primary", "to-soft-primary", "text-primary"]],
+      // Figma binds Soft Secondary's text to `foreground`, unlike Outline Secondary.
+      ["soft", "secondary", ["from-soft-secondary", "to-soft-secondary", "text-foreground"]],
+      ["soft", "info", ["from-soft-info", "to-soft-info", "text-info"]],
+      ["soft", "success", ["from-soft-success", "to-soft-success", "text-success"]],
+      ["soft", "warning", ["from-soft-warning", "to-soft-warning", "text-warning"]],
+      ["soft", "destructive", ["from-soft-destructive", "to-soft-destructive", "text-destructive"]],
+      ["outline", "primary", ["ring-primary", "text-primary"]],
+      ["outline", "secondary", ["ring-secondary", "text-secondary-foreground"]],
+      ["outline", "info", ["ring-info", "text-info"]],
+      ["outline", "success", ["ring-success", "text-success"]],
+      ["outline", "warning", ["ring-warning", "text-warning"]],
+      ["outline", "destructive", ["ring-destructive", "text-destructive"]],
+    ]
+
+    it.each(cases)("%s / %s binds the Figma tokens", (variant, tone, classes) => {
+      expect(badge({ variant, tone })).toHaveClass(...classes)
+    })
+
+    it("lays the Soft tint over card, as Figma stacks the two fills", () => {
+      expect(badge({ variant: "soft" })).toHaveClass("bg-card", "bg-gradient-to-r")
+    })
+
+    it("draws Outline's stroke inside, so it is the same size as Solid", () => {
+      const el = badge({ variant: "outline" })
+      expect(el).toHaveClass("ring-1", "ring-inset")
+      expect(el.className).not.toMatch(/\bborder\b/)
+    })
+
+    it("uses no raw colours", () => {
+      expect(SOURCE).not.toMatch(/#[0-9a-f]{3,8}\b/i)
+      expect(SOURCE).not.toMatch(/-(green|yellow|red|blue|sky|amber)-\d{2,3}/)
+    })
+  })
+
+  describe("size", () => {
+    it.each([
+      ["sm", ["min-h-5", "px-1.5", "py-0.5", "gap-0.5"]],
+      ["md", ["min-h-[1.375rem]", "px-2", "py-0.5", "gap-1"]],
+      ["lg", ["min-h-[1.625rem]", "px-3", "py-1", "gap-1.5"]],
+    ] as const)("%s matches Figma's padding and gap", (size, classes) => {
+      expect(badge({ size })).toHaveClass(...classes)
+    })
+
+    it("sets minimum heights, not fixed ones, so Arabic can grow", () => {
+      expect(SOURCE).not.toMatch(/(?<![\w-])h-(5|\[1\.375rem\]|\[1\.625rem\])/)
+    })
   })
 
-  it("renders with default variant styling", () => {
-    render(<Badge data-testid="badge">Default</Badge>)
-    expect(screen.getByTestId("badge")).toHaveClass("bg-primary")
+  describe("radius", () => {
+    it("Rounded is a pill", () => {
+      expect(badge({ radius: "rounded" })).toHaveClass("rounded-full")
+    })
+
+    it("Standard binds border radius/sm, never a literal 6px", () => {
+      expect(badge({ radius: "standard" })).toHaveClass("rounded-[var(--radius-sm)]")
+      expect(SOURCE).not.toMatch(/\[6px\]|:\s*6px/)
+    })
+  })
+
+  describe("icon and avatar", () => {
+    it("wraps the icon at 12px and hides it from assistive technology", () => {
+      badge({ icon: <Star /> })
+      const wrapper = screen.getByTestId("icon").parentElement!
+      expect(wrapper).toHaveAttribute("aria-hidden", "true")
+      expect(wrapper).toHaveClass("size-3", "[&>svg]:size-3")
+    })
+
+    it("clips the avatar to a 12px circle and keeps it accessible", () => {
+      badge({ avatar: <img src="/a.png" alt="Layla" /> })
+      const img = screen.getByAltText("Layla")
+      expect(img.parentElement).toHaveClass("size-3", "rounded-full", "overflow-hidden")
+      expect(img.parentElement).not.toHaveAttribute("aria-hidden")
+    })
+
+    it("allows both at once, as Figma's two independent booleans do", () => {
+      badge({ icon: <Star />, avatar: <img src="/a.png" alt="Layla" /> })
+      expect(screen.getByTestId("icon")).toBeInTheDocument()
+      expect(screen.getByAltText("Layla")).toBeInTheDocument()
+    })
+
+    it("renders icon, avatar, label, close in DOM order, which dir mirrors", () => {
+      const el = badge({
+        icon: <Star />,
+        avatar: <img src="/a.png" alt="Layla" />,
+        onClose: () => {},
+      })
+      const kids = Array.from(el.children)
+      expect(kids[0]).toContainElement(screen.getByTestId("icon"))
+      expect(kids[1]).toContainElement(screen.getByAltText("Layla"))
+      expect(kids[2]).toHaveTextContent("Badge")
+      expect(kids[3]?.tagName).toBe("BUTTON")
+    })
   })
 
-  it("renders with different variants", () => {
-    const { rerender } = render(<Badge variant="default" data-testid="badge">Default</Badge>)
-    expect(screen.getByTestId("badge")).toHaveClass("bg-primary")
+  describe("close", () => {
+    /*
+     * The default name is two hidden runs, and CSS keeps the one matching the
+     * nearest `lang`. jsdom loads no Tailwind, so inject exactly the compiled
+     * rules the name depends on; the accessible-name computation then drops
+     * the `display: none` run, as a browser does.
+     */
+    beforeAll(() => {
+      const style = document.createElement("style")
+      style.textContent = [
+        ".hidden { display: none }",
+        ".\\[\\&\\:lang\\(ar\\)\\]\\:hidden:lang(ar) { display: none }",
+        ".\\[\\&\\:lang\\(ar\\)\\]\\:inline:lang(ar) { display: inline }",
+      ].join("\n")
+      document.head.append(style)
+    })
 
-    rerender(<Badge variant="secondary" data-testid="badge">Secondary</Badge>)
-    expect(screen.getByTestId("badge")).toHaveClass("bg-secondary")
+    it("renders no button without onClose", () => {
+      badge()
+      expect(screen.queryByRole("button")).not.toBeInTheDocument()
+    })
 
-    rerender(<Badge variant="destructive" data-testid="badge">Destructive</Badge>)
-    expect(screen.getByTestId("badge")).toHaveClass("bg-destructive")
+    it("is a real button that calls onClose", () => {
+      const onClose = vi.fn()
+      badge({ onClose, children: "Cairo" })
+      const button = screen.getByRole("button", { name: "Remove Cairo" })
+      expect(button).toHaveAttribute("type", "button")
+      fireEvent.click(button)
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
 
-    rerender(<Badge variant="outline" data-testid="badge">Outline</Badge>)
-    expect(screen.getByTestId("badge")).toHaveClass("text-foreground")
+    it("falls back to a bare verb when the label is not plain text", () => {
+      render(
+        <Badge onClose={() => {}}>
+          <strong>Cairo</strong>
+        </Badge>
+      )
+      expect(screen.getByRole("button", { name: "Remove" })).toBeInTheDocument()
+    })
 
-    rerender(<Badge variant="success" data-testid="badge">Success</Badge>)
-    expect(screen.getByTestId("badge")).toHaveClass("bg-green-500")
+    it("names itself in Arabic when the page is Arabic", () => {
+      render(
+        <div lang="ar" dir="rtl">
+          <Badge onClose={() => {}}>القاهرة</Badge>
+        </div>
+      )
+      expect(screen.getByRole("button", { name: "إزالة القاهرة" })).toBeInTheDocument()
+    })
 
-    rerender(<Badge variant="warning" data-testid="badge">Warning</Badge>)
-    expect(screen.getByTestId("badge")).toHaveClass("bg-yellow-500")
+    it("follows the nearest lang, so an English island on an Arabic page stays English", () => {
+      render(
+        <div lang="ar">
+          <div lang="en">
+            <Badge onClose={() => {}}>Cairo</Badge>
+          </div>
+        </div>
+      )
+      expect(screen.getByRole("button", { name: "Remove Cairo" })).toBeInTheDocument()
+    })
+
+    it("follows a live language change without remounting", () => {
+      const { container } = render(
+        <div lang="en">
+          <Badge onClose={() => {}}>القاهرة</Badge>
+        </div>
+      )
+      expect(screen.getByRole("button", { name: "Remove القاهرة" })).toBeInTheDocument()
+      container.firstElementChild!.setAttribute("lang", "ar")
+      expect(screen.getByRole("button", { name: "إزالة القاهرة" })).toBeInTheDocument()
+    })
+
+    it("carries both names in the markup, so server HTML needs no script", () => {
+      badge({ onClose: () => {}, children: "Cairo" })
+      const runs = Array.from(screen.getByRole("button").querySelectorAll(".sr-only"))
+      expect(runs.map((r) => r.textContent)).toEqual(["Remove Cairo", "إزالة Cairo"])
+      expect(SOURCE).not.toMatch(/useEffect|useState|useLayoutEffect/)
+    })
+
+    it("takes an explicit label over the page language", () => {
+      render(
+        <div lang="ar">
+          <Badge onClose={() => {}} closeLabel="Remove filter: Cairo">
+            Cairo
+          </Badge>
+        </div>
+      )
+      const button = screen.getByRole("button", { name: "Remove filter: Cairo" })
+      expect(button.querySelector(".sr-only")).toBeNull()
+    })
+
+    it("widens the hit area to 24px without changing the 12px glyph", () => {
+      badge({ onClose: () => {} })
+      expect(screen.getByRole("button")).toHaveClass("size-3", "after:absolute", "after:-inset-1.5")
+    })
   })
 
-  it("applies custom className", () => {
-    render(<Badge className="custom-class" data-testid="badge">Badge</Badge>)
-    expect(screen.getByTestId("badge")).toHaveClass("custom-class")
+  describe("focus ring", () => {
+    it("exists only when there is something to focus", () => {
+      expect(badge().querySelector(".peer-focus-visible\\:opacity-100")).toBeNull()
+    })
+
+    it("follows the close button as a peer, 2px out, on the badge's own radius", () => {
+      const el = badge({ onClose: () => {} })
+      const ring = screen.getByRole("button").nextElementSibling!
+      expect(ring.parentElement).toBe(el)
+      expect(ring).toHaveAttribute("aria-hidden", "true")
+      expect(ring).toHaveClass(
+        "absolute",
+        "-inset-0.5",
+        "rounded-[inherit]",
+        "ring-1",
+        "opacity-0",
+        "peer-focus-visible:opacity-100"
+      )
+      expect(screen.getByRole("button")).toHaveClass("peer")
+    })
+
+    it.each([
+      ["primary", "ring-ring/50"],
+      ["secondary", "ring-ring/50"],
+      ["info", "ring-info/20"],
+      ["success", "ring-success/20"],
+      ["warning", "ring-warning/20"],
+      ["destructive", "ring-destructive/20"],
+    ] as const)("%s uses Figma's ring colour and opacity", (tone, cls) => {
+      badge({ tone, onClose: () => {} })
+      expect(screen.getByRole("button").nextElementSibling).toHaveClass(cls)
+    })
   })
 
-  it("renders with base styling classes", () => {
-    render(<Badge data-testid="badge">Badge</Badge>)
-    const badge = screen.getByTestId("badge")
-    expect(badge).toHaveClass("inline-flex", "items-center", "rounded-md", "border", "px-2.5", "py-0.5", "text-xs", "font-semibold")
+  it("is a client component, so a server component can render it", () => {
+    expect(SOURCE.startsWith('"use client"')).toBe(true)
   })
 
-  it("passes additional props to underlying element", () => {
-    render(<Badge data-testid="badge" aria-label="status badge">Status</Badge>)
-    expect(screen.getByTestId("badge")).toHaveAttribute("aria-label", "status badge")
+  it("forwards its ref, merges className and passes props through", () => {
+    const ref = React.createRef<HTMLSpanElement>()
+    render(
+      <Badge ref={ref} className="custom" aria-label="status" data-testid="badge">
+        Status
+      </Badge>
+    )
+    const el = screen.getByTestId("badge")
+    expect(ref.current).toBe(el)
+    expect(el).toHaveClass("custom")
+    expect(el).toHaveAttribute("aria-label", "status")
   })
 })

package/registry/ui/badge/badge.tsx

@@ -1,39 +1,251 @@
+"use client"
+
 import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { XIcon } from "lucide-react"
+import { cva } from "class-variance-authority"
 import { cn } from "../../../src/lib/utils"
 
+/**
+ * Built against the Figma `Badge` set (326:2134): Type × Tone × Size × Radius ×
+ * Direction × Stats, 432 variants. Every colour below is the token the set binds.
+ *
+ * Direction is not a prop. The row is a plain flex row in DOM order — icon,
+ * avatar, label, close — so `dir="rtl"` on the page mirrors it into Figma's RTL
+ * order (close, label, avatar, icon) with no RTL-specific class, and the type
+ * ramp re-leads `text-xs` to Cairo's 20px line on its own.
+ *
+ * Heights are minimums, not fixed. Figma pins md and lg to 22 and 26px, which
+ * holds English (a 16px line) but squeezes Arabic's 20px line into md's padding.
+ * Here RTL is allowed to grow: 24 / 24 / 28px against LTR's 20 / 22 / 26px.
+ */
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "relative inline-flex shrink-0 items-center whitespace-nowrap text-xs font-medium",
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-        success:
-          "border-transparent bg-green-500 text-white shadow hover:bg-green-500/80",
-        warning:
-          "border-transparent bg-yellow-500 text-white shadow hover:bg-yellow-500/80",
+        solid: "",
+        // Figma stacks two fills: `card` underneath, the translucent tint on
+        // top. Doing the same keeps the chip opaque and identical on any
+        // surface, rather than letting whatever is behind it show through.
+        soft: "bg-card bg-gradient-to-r",
+        // Figma's stroke is 1px INSIDE, so the badge is the same size as Solid.
+        // An inset ring draws exactly that; a border would add 2px.
+        outline: "ring-1 ring-inset",
+      },
+      tone: {
+        primary: "",
+        secondary: "",
+        info: "",
+        success: "",
+        warning: "",
+        destructive: "",
+      },
+      size: {
+        sm: "min-h-5 gap-0.5 px-1.5 py-0.5",
+        // 22px and 26px have no Tailwind step; they are Figma's fixed heights.
+        md: "min-h-[1.375rem] gap-1 px-2 py-0.5",
+        lg: "min-h-[1.625rem] gap-1.5 px-3 py-1",
+      },
+      radius: {
+        rounded: "rounded-full",
+        // Figma `border radius/sm`. No class is 6px in both apps.
+        standard: "rounded-[var(--radius-sm)]",
       },
     },
+    compoundVariants: [
+      { variant: "solid", tone: "primary", class: "bg-primary text-primary-foreground" },
+      { variant: "solid", tone: "secondary", class: "bg-secondary text-secondary-foreground" },
+      { variant: "solid", tone: "info", class: "bg-info text-info-foreground" },
+      { variant: "solid", tone: "success", class: "bg-success text-success-foreground" },
+      { variant: "solid", tone: "warning", class: "bg-warning text-warning-foreground" },
+      {
+        variant: "solid",
+        tone: "destructive",
+        class: "bg-destructive text-destructive-foreground",
+      },
+
+      { variant: "soft", tone: "primary", class: "from-soft-primary to-soft-primary text-primary" },
+      // Figma sets Soft Secondary's text on `foreground`, not `secondary-foreground`.
+      {
+        variant: "soft",
+        tone: "secondary",
+        class: "from-soft-secondary to-soft-secondary text-foreground",
+      },
+      { variant: "soft", tone: "info", class: "from-soft-info to-soft-info text-info" },
+      { variant: "soft", tone: "success", class: "from-soft-success to-soft-success text-success" },
+      { variant: "soft", tone: "warning", class: "from-soft-warning to-soft-warning text-warning" },
+      {
+        variant: "soft",
+        tone: "destructive",
+        class: "from-soft-destructive to-soft-destructive text-destructive",
+      },
+
+      { variant: "outline", tone: "primary", class: "ring-primary text-primary" },
+      { variant: "outline", tone: "secondary", class: "ring-secondary text-secondary-foreground" },
+      { variant: "outline", tone: "info", class: "ring-info text-info" },
+      { variant: "outline", tone: "success", class: "ring-success text-success" },
+      { variant: "outline", tone: "warning", class: "ring-warning text-warning" },
+      { variant: "outline", tone: "destructive", class: "ring-destructive text-destructive" },
+    ],
     defaultVariants: {
-      variant: "default",
+      variant: "solid",
+      tone: "primary",
+      size: "sm",
+      radius: "rounded",
     },
   }
 )
 
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+/**
+ * Figma's focus ring: its own node, 2px outside the badge on every side, a 1px
+ * line in the tone's colour at partial opacity — 50% on `ring` for the two
+ * neutral tones, 20% on the tone itself for the four status tones.
+ */
+const focusRingTone = {
+  primary: "ring-ring/50",
+  secondary: "ring-ring/50",
+  info: "ring-info/20",
+  success: "ring-success/20",
+  warning: "ring-warning/20",
+  destructive: "ring-destructive/20",
+}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+/** The close button's accessible name, per script, with the badge's label when it is plain text. */
+const CLOSE_LABELS = {
+  en: (label?: string) => (label ? `Remove ${label}` : "Remove"),
+  ar: (label?: string) => (label ? `إزالة ${label}` : "إزالة"),
 }
 
+type Variant = "solid" | "soft" | "outline"
+type Tone = keyof typeof focusRingTone
+type Size = "sm" | "md" | "lg"
+type Radius = "rounded" | "standard"
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Visual weight — Figma `Type`. Declared here rather than inherited from
+   * `VariantProps`, which widens every option with `| null`.
+   */
+  variant?: Variant
+  /** Semantic colour — Figma `Tone`. */
+  tone?: Tone
+  /** Figma `Size`. */
+  size?: Size
+  /** Figma `Radius`: `rounded` is a pill, `standard` is `border radius/sm`. */
+  radius?: Radius
+  /**
+   * Leading icon. Sized to 12px and coloured with `currentColor`, so pass any
+   * SVG icon without size or colour of its own. Decorative: hidden from
+   * assistive technology.
+   */
+  icon?: React.ReactNode
+  /**
+   * Leading avatar — a single image. The badge owns its 12px size and circular
+   * clip; the child only supplies the picture, and its own `alt`.
+   */
+  avatar?: React.ReactNode
+  /** Renders a close button at the trailing edge, and is called when it is pressed. */
+  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void
+  /**
+   * Accessible name for the close button — read by screen readers, never shown.
+   * Defaults to "Remove {label}" when the label is plain text, or "إزالة {label}"
+   * when the page's `lang` is Arabic; "Remove" / "إزالة" otherwise.
+   */
+  closeLabel?: string
+}
+
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    {
+      className,
+      variant = "solid",
+      tone = "primary",
+      size = "sm",
+      radius = "rounded",
+      icon,
+      avatar,
+      onClose,
+      closeLabel,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const label =
+      typeof children === "string" || typeof children === "number"
+        ? String(children).trim() || undefined
+        : undefined
+
+    return (
+      <span
+        ref={ref}
+        className={cn(badgeVariants({ variant, tone, size, radius }), className)}
+        {...props}
+      >
+        {icon && (
+          <span
+            aria-hidden="true"
+            className="inline-flex size-3 shrink-0 items-center justify-center [&>svg]:size-3"
+          >
+            {icon}
+          </span>
+        )}
+        {avatar && (
+          <span className="inline-flex size-3 shrink-0 overflow-hidden rounded-full [&>img]:size-full [&>img]:object-cover">
+            {avatar}
+          </span>
+        )}
+        <span>{children}</span>
+        {onClose && (
+          <>
+            <button
+              type="button"
+              aria-label={closeLabel}
+              onClick={onClose}
+              // The ring below is the badge's focus indicator, so the button
+              // draws none of its own. `after:` widens the hit area to 24×24px
+              // (WCAG 2.5.8) without moving anything: the glyph stays Figma's
+              // 12px, and an absolute pseudo-element can't change the badge's
+              // height even where it reaches past sm's 20px.
+              className="peer relative inline-flex size-3 shrink-0 cursor-pointer items-center justify-center rounded-full outline-none after:absolute after:-inset-1.5 after:content-['']"
+            >
+              {/*
+               * Without `closeLabel`, the name comes from these two hidden
+               * runs, and CSS keeps the one that matches the nearest `lang` —
+               * the same way `dir` is inherited. That is right in the server
+               * HTML before any script runs, and it follows a live language
+               * change; `display: none` takes the other out of the name.
+               */}
+              {!closeLabel && (
+                <>
+                  <span className="sr-only [&:lang(ar)]:hidden">{CLOSE_LABELS.en(label)}</span>
+                  <span className="sr-only hidden [&:lang(ar)]:inline">
+                    {CLOSE_LABELS.ar(label)}
+                  </span>
+                </>
+              )}
+              <XIcon aria-hidden="true" size={12} strokeWidth={1.5} />
+            </button>
+            {/*
+             * A sibling of the button, after it, so a plain
+             * `peer-focus-visible:` drives it — the one form the Storybook
+             * pseudo-state renderer can show. `:has()` would work in a browser
+             * but not in the states grid. `rounded-[inherit]` keeps the ring on
+             * the badge's own radius, as Figma binds the same token to both.
+             */}
+            <span
+              aria-hidden="true"
+              className={cn(
+                "pointer-events-none absolute -inset-0.5 rounded-[inherit] opacity-0 ring-1 peer-focus-visible:opacity-100",
+                focusRingTone[tone]
+              )}
+            />
+          </>
+        )}
+      </span>
+    )
+  }
+)
+Badge.displayName = "Badge"
+
 export { Badge, badgeVariants }

package/registry/ui/button/button.test.tsx

@@ -51,6 +51,12 @@ describe("Button", () => {
     expect(screen.getByText("Loading")).toBeInTheDocument()
   })
 
+  it("announces the loading text it is given", () => {
+    render(<Button loading loadingLabel="جارٍ الحفظ">حفظ</Button>)
+    expect(screen.getByText("جارٍ الحفظ")).toBeInTheDocument()
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument()
+  })
+
   it("is disabled when disabled prop is true", () => {
     render(<Button disabled>Disabled</Button>)
     expect(screen.getByRole("button")).toBeDisabled()

package/registry/ui/button/button.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { LoaderCircleIcon } from "lucide-react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../../src/lib/utils"
@@ -38,10 +39,12 @@ export interface ButtonProps
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
   loading?: boolean
+  /** Screen-reader text announced while loading */
+  loadingLabel?: string
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, loading, children, disabled, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading, loadingLabel = "Loading", children, disabled, ...props }, ref) => {
     const Comp = asChild ? Slot : "button"
     return (
       <Comp
@@ -52,28 +55,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {loading ? (
           <>
-            <svg
-              className="animate-spin"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              />
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              />
-            </svg>
-            <span className="sr-only">Loading</span>
+            <LoaderCircleIcon aria-hidden="true" className="animate-spin motion-reduce:animate-none" strokeWidth={1.5} />
+            <span className="sr-only">{loadingLabel}</span>
             {children}
           </>
         ) : (

package/registry/ui/card/card.tsx

@@ -34,7 +34,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
+    className={cn("font-semibold leading-none", className)}
     {...props}
   />
 ))