@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/ui/button/button.tsx

@@ -1,64 +1,338 @@
+"use client"
+
 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 { cva } from "class-variance-authority"
 import { cn } from "../../../src/lib/utils"
 
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none 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",
+/**
+ * Built against the Figma `Button` set (307:333, 1,200 variants) and `Icon
+ * Button` set (3615:13506, 480 variants): Type × Style × Size × State × Radius,
+ * plus Direction on Button. Every colour below is the token the sets bind.
+ *
+ * `variant` keeps shadcn's names, each pinned to one Figma Type and Style, and
+ * adds Figma's Soft. `tone` reaches the other Styles of a Type, so
+ * `variant="outline" tone="destructive"` is Outline/Destructive.
+ *
+ * The icon sizes are Figma's Icon Button: the same Types, Styles and states,
+ * square, with one 16px icon and no label.
+ *
+ * Direction is not a prop. The row is a plain flex row in DOM order, so
+ * `dir="rtl"` on the page mirrors it into Figma's RTL variant, and the type
+ * ramp re-leads the label to Cairo's line on its own.
+ */
+
+type Variant = "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "soft"
+type Tone = "primary" | "secondary" | "destructive"
+type Size = "xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg"
+/** shadcn's names for the middle sizes, kept so existing calls keep working. */
+type SizeAlias = "default" | "icon"
+const SIZE_ALIAS: Record<SizeAlias, Size> = { default: "md", icon: "icon-md" }
+const resolveSize = (size: Size | SizeAlias): Size => SIZE_ALIAS[size as SizeAlias] ?? (size as Size)
+type Radius = "standard" | "rounded"
+
+/** Each shadcn variant is one Figma Type, in the Style that matches its name. */
+const TYPE = {
+  default: "solid",
+  secondary: "solid",
+  destructive: "solid",
+  outline: "outline",
+  ghost: "ghost",
+  link: "link",
+  soft: "soft",
+} as const
+
+const DEFAULT_TONE: Record<Variant, Tone> = {
+  default: "primary",
+  secondary: "secondary",
+  destructive: "destructive",
+  outline: "secondary",
+  ghost: "secondary",
+  link: "primary",
+  soft: "primary",
+}
+
+// Figma stacks a second, translucent fill on the first for Clicked (and for
+// Soft in every state). A one-colour gradient is that second fill: it paints
+// over the background colour without replacing it.
+const PRESSED_OVERLAY = "active:bg-gradient-to-r active:from-soft-primary active:to-soft-primary"
+
+const styles = cva(
+  [
+    "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap font-medium",
+    "transition-[color,background-color,opacity] duration-150 motion-reduce:transition-none",
+    // Figma's Focus ring: a 2px band in `ring`, from 2px to 4px outside the
+    // button, with the gap left clear. Its own layer, so it never competes
+    // with Outline's inset ring and draws the same in Tailwind 3 and 4.
+    "[outline:none] after:pointer-events-none after:absolute after:-inset-1 after:opacity-0 after:ring-2 after:ring-inset after:ring-ring focus-visible:after:opacity-100",
+    // Windows high contrast drops fills and box-shadows, so the ring and every
+    // fill vanish. The system border keeps the button's edge, and a system
+    // outline marks focus. (`[outline:none]`, not `outline-none`: Tailwind 3's
+    // version is a transparent outline that forced colours paints visibly.)
+    "forced-colors:border forced-colors:border-[ButtonText] focus-visible:forced-colors:[outline:2px_solid_Highlight] focus-visible:forced-colors:[outline-offset:2px]",
+    // Disabled is the Enabled look at half opacity, in every Type.
+    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  ],
   {
     variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+      type: {
+        // Hover and Clicked fade the whole button, as in Figma.
+        solid: "",
+        // `card` underneath, the tint on top — Figma's two fills.
+        soft: "bg-card bg-gradient-to-r",
+        // Figma's stroke is 1px INSIDE, so the button is the same size as
+        // Solid. An inset ring draws exactly that; a border would push the
+        // label in by 1px.
+        outline: "bg-background shadow-sm ring-1 ring-inset",
+        ghost: "",
+        // Always underlined, so a link reads as one at rest and on touch
+        // screens. Hover and Clicked fade it like Solid.
+        link: "underline hover:opacity-90 active:opacity-80 forced-colors:border-0",
+      },
+      tone: {
+        primary: "",
+        secondary: "",
+        destructive: "",
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        // 26px has no Tailwind step; it is Figma's xs height.
+        xs: "h-[1.625rem] gap-1.5 px-2 text-xs",
+        sm: "h-8 gap-1.5 px-3 text-sm",
+        md: "h-9 gap-2 px-4 text-sm",
+        lg: "h-10 gap-2 px-6 text-sm",
+        "icon-xs": "size-[1.625rem]",
+        "icon-sm": "size-8",
+        "icon-md": "size-9",
+        "icon-lg": "size-10",
+      },
+      radius: {
+        // Figma `border radius/md`. No class is 8px in both apps. The ring's
+        // outer edge is 4px further out, so 4px rounder (Figma `border
+        // radius/lg` on its inner edge).
+        standard: "rounded-[var(--radius-md)] after:rounded-[calc(var(--radius-md)+4px)]",
+        rounded: "rounded-full after:rounded-full",
       },
     },
+    compoundVariants: [
+      { type: "solid", tone: "primary", class: "bg-primary text-primary-foreground hover:opacity-90 active:opacity-80" },
+      // Secondary is the one Solid that tints on Clicked instead of fading.
+      {
+        type: "solid",
+        tone: "secondary",
+        class: `bg-secondary text-secondary-foreground hover:opacity-90 active:opacity-100 ${PRESSED_OVERLAY}`,
+      },
+      {
+        type: "solid",
+        tone: "destructive",
+        class: "bg-destructive text-destructive-foreground hover:opacity-90 active:opacity-80",
+      },
+
+      {
+        type: "soft",
+        tone: "primary",
+        class:
+          "from-soft-primary to-soft-primary text-primary hover:from-soft-primary-20 hover:to-soft-primary-20 active:from-soft-primary-30 active:to-soft-primary-30",
+      },
+      {
+        type: "soft",
+        tone: "secondary",
+        class:
+          "from-soft-secondary to-soft-secondary text-secondary-foreground hover:from-soft-secondary-20 hover:to-soft-secondary-20 active:from-soft-secondary-30 active:to-soft-secondary-30",
+      },
+      {
+        type: "soft",
+        tone: "destructive",
+        class:
+          "from-soft-destructive to-soft-destructive text-destructive hover:from-soft-destructive-20 hover:to-soft-destructive-20 active:from-soft-destructive-30 active:to-soft-destructive-30",
+      },
+
+      {
+        type: "outline",
+        tone: "primary",
+        class: `text-primary ring-primary hover:bg-accent hover:text-accent-foreground active:bg-accent active:text-accent-foreground ${PRESSED_OVERLAY}`,
+      },
+      {
+        type: "outline",
+        tone: "secondary",
+        class: `text-foreground ring-border hover:bg-secondary active:bg-secondary ${PRESSED_OVERLAY}`,
+      },
+      // Destructive swaps its background for the tint, as Figma does.
+      {
+        type: "outline",
+        tone: "destructive",
+        class: "text-destructive ring-destructive hover:bg-soft-destructive active:bg-soft-destructive-20",
+      },
+
+      {
+        type: "ghost",
+        tone: "primary",
+        class: `text-primary hover:bg-accent hover:text-accent-foreground active:bg-accent active:text-accent-foreground ${PRESSED_OVERLAY}`,
+      },
+      { type: "ghost", tone: "secondary", class: `text-foreground hover:bg-accent active:bg-accent ${PRESSED_OVERLAY}` },
+      { type: "ghost", tone: "destructive", class: "text-destructive hover:bg-soft-destructive active:bg-soft-destructive-20" },
+
+      { type: "link", tone: "primary", class: "text-primary" },
+      { type: "link", tone: "secondary", class: "text-secondary-foreground" },
+      { type: "link", tone: "destructive", class: "text-destructive" },
+    ],
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      type: "solid",
+      tone: "primary",
+      size: "md",
+      radius: "standard",
     },
   }
 )
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+type ButtonVariantOptions = {
+  variant?: Variant | null
+  tone?: Tone | null
+  size?: Size | SizeAlias | null
+  radius?: Radius | null
+  className?: string
+}
+
+/**
+ * The button's classes, for styling another element as a button — a link,
+ * say. Takes the same `variant`, `tone`, `size` and `radius` as `Button`.
+ */
+function buttonVariants({ variant, tone, size, radius, className }: ButtonVariantOptions = {}) {
+  const v = variant ?? "default"
+  return cn(styles({ type: TYPE[v], tone: tone ?? DEFAULT_TONE[v], size: size ? resolveSize(size) : size, radius }), className)
+}
+
+const ICON_SIZES = new Set<Size>(["icon-xs", "icon-sm", "icon-md", "icon-lg"])
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Figma `Style`. Each variant has its own default: Primary for `default`,
+   * `link` and `soft`, Secondary for `outline` and `ghost`.
+   */
+  tone?: Tone
+  /**
+   * Figma `Type`: `default` is Solid; `outline`, `ghost`, `soft` and `link`
+   * are the other four. shadcn's `secondary` and `destructive` still work:
+   * they are Solid in the Secondary and Destructive tones.
+   */
+  variant?: Variant
+  /**
+   * Figma `Size`: `xs` 26px, `sm` 32px, `md` 36px, `lg` 40px. The `icon-*`
+   * sizes are Icon Button, square at the same heights, and need an accessible
+   * name — `aria-label` or visually hidden text. shadcn's `default` and `icon`
+   * still work as `md` and `icon-md`.
+   */
+  size?: Size | SizeAlias
+  /** Figma `Radius`: `standard` is `border radius/md`, `rounded` is a pill. */
+  radius?: Radius
+  /** Renders its only child instead of a `<button>`, with the button's styles. */
   asChild?: boolean
+  /** Shows a spinner, disables the button and announces `loadingLabel`. */
   loading?: boolean
   /** Screen-reader text announced while loading */
   loadingLabel?: string
 }
 
+/** Warns, in development only, when an icon-only button has no accessible name. */
+function useIconButtonNameCheck(ref: React.RefObject<HTMLElement | null>, isIcon: boolean) {
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === "production" || !isIcon) return
+    const el = ref.current
+    if (!el) return
+    const named =
+      el.getAttribute("aria-label")?.trim() ||
+      el.getAttribute("aria-labelledby")?.trim() ||
+      el.getAttribute("title")?.trim() ||
+      el.textContent?.trim()
+    if (!named) {
+      console.warn(
+        "[fasla-ui] Button: an icon-only button needs an accessible name. Add aria-label, or text inside the button (it can be visually hidden)."
+      )
+    }
+    // Checked once, after the first paint: a warning per re-render would bury
+    // the console without saying anything new.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}
+
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, loading, loadingLabel = "Loading", children, disabled, ...props }, ref) => {
+  (
+    {
+      className,
+      variant = "default",
+      tone,
+      size: sizeProp = "md",
+      radius = "standard",
+      asChild = false,
+      loading = false,
+      loadingLabel = "Loading",
+      children,
+      disabled,
+      onClickCapture,
+      ...props
+    },
+    ref
+  ) => {
     const Comp = asChild ? Slot : "button"
+    const size = resolveSize(sizeProp)
+    const isIcon = ICON_SIZES.has(size)
+    const inactive = Boolean(disabled || loading)
+
+    const innerRef = React.useRef<HTMLButtonElement | null>(null)
+    const setRef = React.useCallback(
+      (node: HTMLButtonElement | null) => {
+        innerRef.current = node
+        if (typeof ref === "function") ref(node)
+        else if (ref) ref.current = node
+      },
+      [ref]
+    )
+    useIconButtonNameCheck(innerRef, isIcon)
+
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        disabled={disabled || loading}
+        ref={setRef}
+        data-slot="button"
+        data-variant={variant}
+        data-tone={tone ?? DEFAULT_TONE[variant]}
+        data-size={size}
+        className={buttonVariants({ variant, tone, size, radius, className })}
+        // A link or other non-button child can't be `disabled`. It is marked
+        // with aria-disabled instead, which the same styles respond to, and
+        // taken out of the tab order so Enter can't follow it either.
+        disabled={asChild ? undefined : inactive}
+        aria-disabled={asChild && inactive ? true : undefined}
+        tabIndex={asChild && inactive ? -1 : undefined}
+        // Only a slotted child is marked busy: it has no status of its own,
+        // and a busy region can hold back the button's loading status.
+        aria-busy={(asChild && loading) || undefined}
+        // Blocked in the capture phase: Slot runs the child's own onClick
+        // before the button's, so a bubble-phase guard would come too late.
+        onClickCapture={
+          asChild && inactive
+            ? (event: React.MouseEvent<HTMLButtonElement>) => {
+                event.preventDefault()
+                event.stopPropagation()
+              }
+            : onClickCapture
+        }
         {...props}
       >
-        {loading ? (
+        {loading && !asChild ? (
           <>
             <LoaderCircleIcon aria-hidden="true" className="animate-spin motion-reduce:animate-none" strokeWidth={1.5} />
-            <span className="sr-only">{loadingLabel}</span>
-            {children}
+            {/* A status, so it is announced even when aria-label names the button. */}
+            <span role="status" className="sr-only">
+              {loadingLabel}
+            </span>
+            {/* An icon button has room for one glyph: the spinner replaces it. */}
+            {!isIcon && children}
           </>
+        ) : asChild && inactive && React.isValidElement<React.HTMLAttributes<HTMLElement>>(children) ? (
+          // Slot runs the child's own handlers before the button's, so an
+          // inactive child is given none; the guard above stops navigation.
+          React.cloneElement(children, { onClick: undefined, onClickCapture: undefined })
         ) : (
           children
         )}

package/registry/ui/calendar/calendar.test.tsx

@@ -0,0 +1,192 @@
+import * as React from "react"
+import { describe, it, expect, vi } from "vitest"
+import { render, screen, fireEvent, act } from "@testing-library/react"
+import { Calendar } from "./calendar"
+
+/**
+ * What these tests can and cannot prove.
+ *
+ * jsdom applies no stylesheet and has no layout, so the visual tests assert
+ * **class presence only**. The 32px days, the 8px row gaps, the band's
+ * corners, the arrows on the outer edges and the RTL mirror were measured in
+ * a real browser. The wiring — the week's first day per direction, the
+ * Arabic month and weekday names, Western digits, the day states and the
+ * selection — is real DOM and is tested as such.
+ */
+
+const JUNE = new Date(2026, 5, 1)
+const TODAY = new Date(2026, 5, 17)
+const day = (date: number, month = 5) => new Date(2026, month, date)
+
+const slot = (name: string, root: ParentNode = document) => root.querySelector<HTMLElement>(`[data-slot=${name}]`)
+const weekdays = () => [...document.querySelectorAll("thead th")].map((th) => th.textContent)
+/** The day button for an ISO date in the month it belongs to. */
+const dayButton = (iso: string) =>
+  document.querySelector<HTMLElement>(`td[data-day="${iso}"]:not([data-outside]) [data-slot=calendar-day]`)!
+
+describe("Calendar — layout", () => {
+  it("draws Figma's card: background, 12px padding, 8px corners and the sm shadow", () => {
+    render(<Calendar mode="single" defaultMonth={JUNE} />)
+    expect(slot("calendar")).toHaveClass("bg-background", "p-3", "rounded-[var(--radius-md)]", "shadow")
+  })
+
+  it("lets className override the card", () => {
+    render(<Calendar mode="single" defaultMonth={JUNE} className="p-0 shadow-none" />)
+    expect(slot("calendar")).toHaveClass("p-0", "shadow-none")
+    expect(slot("calendar")).not.toHaveClass("p-3")
+  })
+
+  it("always shows six weeks, with the outside days", () => {
+    render(<Calendar mode="single" defaultMonth={JUNE} />)
+    expect(document.querySelectorAll("tbody tr")).toHaveLength(6)
+    expect(document.querySelector('td[data-day="2026-05-31"][data-outside]')).not.toBeNull()
+  })
+
+  it("starts the week on Sunday in LTR, with two-letter weekdays", () => {
+    render(<Calendar mode="single" defaultMonth={JUNE} />)
+    expect(weekdays()).toEqual(["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"])
+    expect(screen.getByText("June 2026")).toBeInTheDocument()
+  })
+
+  it("starts the week on Saturday in Arabic, with one-letter weekdays, Arabic months and Western digits", () => {
+    render(
+      <div dir="rtl" lang="ar">
+        <Calendar mode="single" defaultMonth={JUNE} />
+      </div>
+    )
+    expect(weekdays()).toEqual(["س", "ح", "ن", "ث", "ر", "خ", "ج"])
+    expect(screen.getByText("يونيو 2026")).toBeInTheDocument()
+    expect(slot("calendar")).toHaveAttribute("dir", "rtl")
+    expect(dayButton("2026-06-17")).toHaveTextContent("17")
+  })
+
+  it("treats a right-to-left page with no lang as Arabic", () => {
+    render(
+      <div dir="rtl">
+        <Calendar mode="single" defaultMonth={JUNE} />
+      </div>
+    )
+    expect(weekdays()[0]).toBe("س")
+  })
+
+  it("keeps an explicit weekStartsOn", () => {
+    render(<Calendar mode="single" defaultMonth={JUNE} weekStartsOn={1} />)
+    expect(weekdays()[0]).toBe("Mo")
+  })
+})
+
+describe("Calendar — navigation", () => {
+  it("uses Icon Button, Outline Primary xs, for the arrows", () => {
+    render(<Calendar mode="single" defaultMonth={JUNE} />)
+    const previous = screen.getByRole("button", { name: /previous month/i })
+    expect(previous).toHaveAttribute("data-slot", "button")
+    expect(previous).toHaveAttribute("data-variant", "outline")
+    expect(previous).toHaveAttribute("data-tone", "primary")
+    expect(previous).toHaveAttribute("data-size", "icon-xs")
+  })
+
+  it("puts arrows on the outer months only", () => {
+    render(<Calendar mode="range" defaultMonth={JUNE} numberOfMonths={3} />)
+    const months = [...document.querySelectorAll("[data-slot=calendar] > div > div")]
+    expect(months).toHaveLength(3)
+    expect(months[0]!.querySelectorAll("button[aria-label*='Previous']")).toHaveLength(1)
+    expect(months[1]!.querySelectorAll("[data-slot=button]")).toHaveLength(0)
+    expect(months[2]!.querySelectorAll("button[aria-label*='Next']")).toHaveLength(1)
+  })
+
+  it("moves a month with the arrows", async () => {
+    render(<Calendar mode="single" defaultMonth={JUNE} />)
+    await act(async () => fireEvent.click(screen.getByRole("button", { name: /next month/i })))
+    expect(screen.getByText("July 2026")).toBeInTheDocument()
+  })
+
+  it("names the arrows in Arabic on an Arabic page", () => {
+    render(
+      <div dir="rtl" lang="ar">
+        <Calendar mode="single" defaultMonth={JUNE} />
+      </div>
+    )
+    expect(screen.getByRole("button", { name: "اذهب إلى الشهر السابق" })).toBeInTheDocument()
+  })
+
+  it("swaps the arrows for a month and a year Select with captionLayout=dropdown", () => {
+    render(
+      <Calendar
+        mode="single"
+        defaultMonth={JUNE}
+        captionLayout="dropdown"
+        startMonth={new Date(2020, 0)}
+        endMonth={new Date(2030, 11)}
+      />
+    )
+    expect(document.querySelectorAll("[data-slot=select-trigger]")).toHaveLength(2)
+    expect(screen.queryByRole("button", { name: /previous month/i })).toBeNull()
+    // The menus sit 16px above the grid, as the month's name does: the month's gap, no margin of their own.
+    const caption = document.querySelector("[data-slot=calendar] [data-slot=select-trigger]")!.closest("[data-slot=calendar] > div > div > div")!
+    expect(caption.parentElement).toHaveClass("gap-4")
+    expect(caption.className).not.toMatch(/(^|\s)m[tby]?-/)
+  })
+})
+
+describe("Calendar — days", () => {
+  it("draws plain, outside, today and chosen days as Figma does", () => {
+    render(<Calendar mode="single" defaultMonth={JUNE} today={TODAY} selected={day(6)} />)
+    expect(dayButton("2026-06-10")).toHaveClass("text-foreground", "hover:bg-accent", "size-8", "rounded-[var(--radius-md)]")
+    expect(document.querySelector('td[data-day="2026-05-31"] [data-slot=calendar-day]')).toHaveClass("text-muted-foreground")
+    expect(dayButton("2026-06-17")).toHaveClass("bg-accent", "text-accent-foreground")
+    expect(dayButton("2026-06-06")).toHaveClass("bg-primary", "text-primary-foreground")
+  })
+
+  it("marks a chosen today with a dot", () => {
+    render(<Calendar mode="single" defaultMonth={JUNE} today={TODAY} selected={TODAY} />)
+    expect(dayButton("2026-06-17")).toHaveClass("bg-primary", "after:size-[3px]", "after:bg-primary-foreground")
+  })
+
+  it("dims and blocks disabled days", () => {
+    render(<Calendar mode="single" defaultMonth={JUNE} disabled={{ from: day(9), to: day(11) }} />)
+    expect(dayButton("2026-06-10")).toBeDisabled()
+    expect(dayButton("2026-06-10")).toHaveClass("disabled:opacity-50")
+  })
+
+  it("chooses a day", async () => {
+    const onSelect = vi.fn()
+    render(<Calendar mode="single" defaultMonth={JUNE} onSelect={onSelect} />)
+    await act(async () => fireEvent.click(dayButton("2026-06-12")))
+    expect(onSelect).toHaveBeenCalledWith(day(12), expect.anything(), expect.anything(), expect.anything())
+  })
+
+  it("rounds days fully with radius=rounded", () => {
+    render(<Calendar mode="single" radius="rounded" defaultMonth={JUNE} selected={day(6)} />)
+    expect(dayButton("2026-06-06")).toHaveClass("rounded-full")
+  })
+})
+
+describe("Calendar — range", () => {
+  const range = { from: day(7), to: day(18) }
+
+  it("draws the ends in primary and the days between on an accent band", () => {
+    render(<Calendar mode="range" defaultMonth={JUNE} selected={range} />)
+    const td = (iso: string) => document.querySelector<HTMLElement>(`td[data-day="${iso}"]:not([data-outside])`)!
+    expect(dayButton("2026-06-07")).toHaveClass("bg-primary")
+    expect(dayButton("2026-06-18")).toHaveClass("bg-primary")
+    expect(dayButton("2026-06-10")).toHaveClass("text-accent-foreground")
+    expect(dayButton("2026-06-10")).not.toHaveClass("bg-primary")
+    expect(td("2026-06-07")).toHaveClass("bg-accent", "rounded-s-[var(--radius-md)]")
+    expect(td("2026-06-10")).toHaveClass("bg-accent", "first:rounded-s-[var(--radius-md)]", "last:rounded-e-[var(--radius-md)]")
+    expect(td("2026-06-18")).toHaveClass("bg-accent", "rounded-e-[var(--radius-md)]")
+    expect(td("2026-06-20")).not.toHaveClass("bg-accent")
+  })
+
+  it("draws an outside day once, in its own month, when several months show", () => {
+    render(<Calendar mode="range" defaultMonth={JUNE} numberOfMonths={2} selected={{ from: day(1, 6), to: day(4, 6) }} />)
+    const outside = document.querySelector<HTMLElement>('td[data-day="2026-07-01"][data-outside]')!
+    expect(outside).not.toHaveClass("bg-accent")
+    expect(outside.querySelector("[data-slot=calendar-day]")).not.toHaveClass("bg-primary")
+    expect(dayButton("2026-07-01")).toHaveClass("bg-primary")
+  })
+
+  it("keeps a range across outside days with one month", () => {
+    render(<Calendar mode="range" defaultMonth={JUNE} selected={{ from: day(28), to: day(2, 6) }} />)
+    expect(document.querySelector('td[data-day="2026-07-01"][data-outside]')).toHaveClass("bg-accent")
+  })
+})