@smicolon/fasla-ui 0.2.4 → 0.4.0

package/registry/effects/effects.test.tsx

@@ -0,0 +1,266 @@
+import { describe, it, expect, vi, afterEach } from "vitest"
+import { act, fireEvent, render, waitFor } from "@testing-library/react"
+import { ShimmerButton } from "./shimmer-button/shimmer-button"
+import { AnimatedGradient } from "./animated-gradient/animated-gradient"
+import { TypewriterText } from "./typewriter-text/typewriter-text"
+import { Spotlight, SpotlightCard } from "./spotlight/spotlight"
+import { GlowCard } from "./glow-card/glow-card"
+import { BorderBeam, GlowingBorder } from "./border-beam/border-beam"
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe("ShimmerButton", () => {
+  it("draws the sheen in primary-foreground by default, so it shows on the primary background", () => {
+    const { getByRole } = render(<ShimmerButton>Shop</ShimmerButton>)
+    expect(getByRole("button").style.getPropertyValue("--shimmer-color")).toContain("--primary-foreground")
+  })
+
+  it("sizes the sheen with shimmerSize, full width by default", () => {
+    const { getByRole, rerender } = render(<ShimmerButton>Shop</ShimmerButton>)
+    expect(getByRole("button").style.getPropertyValue("--shimmer-size")).toBe("100%")
+    rerender(<ShimmerButton shimmerSize="3rem">Shop</ShimmerButton>)
+    const button = getByRole("button")
+    expect(button.style.getPropertyValue("--shimmer-size")).toBe("3rem")
+    const sheen = Array.from(button.querySelectorAll<HTMLElement>("div")).find((el) => el.style.width)
+    expect(sheen?.style.width).toBe("var(--shimmer-size)")
+  })
+
+  it("ships its own keyframes, so it needs no Tailwind config", () => {
+    const { container } = render(<ShimmerButton>Shop</ShimmerButton>)
+    expect(container.querySelector("style")?.textContent).toContain("@keyframes fasla-shimmer")
+  })
+})
+
+describe("TypewriterText", () => {
+  it("does not restart when the parent passes a new inline onComplete", () => {
+    vi.useFakeTimers()
+    const { container, rerender } = render(<TypewriterText text="Hello" speed={10} onComplete={() => {}} />)
+    act(() => {
+      vi.advanceTimersByTime(35)
+    })
+    const typed = container.textContent
+    rerender(<TypewriterText text="Hello" speed={10} onComplete={() => {}} />)
+    expect(container.textContent).toBe(typed)
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+    expect(container.textContent).toBe("Hello|")
+  })
+
+  it("calls the latest onComplete once the text is typed", () => {
+    vi.useFakeTimers()
+    const first = vi.fn()
+    const latest = vi.fn()
+    const { rerender } = render(<TypewriterText text="Hi" speed={10} onComplete={first} />)
+    rerender(<TypewriterText text="Hi" speed={10} onComplete={latest} />)
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+    expect(first).not.toHaveBeenCalled()
+    expect(latest).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe("SpotlightCard", () => {
+  it("centres the light on the pointer", () => {
+    const { container } = render(<SpotlightCard spotlightSize={300}>Card</SpotlightCard>)
+    fireEvent.mouseEnter(container.firstElementChild!)
+    const light = container.querySelector<HTMLElement>(".rounded-full")!
+    expect(light.style.left).toBe("-150px")
+    expect(light.style.top).toBe("-150px")
+  })
+})
+
+describe("GlowCard", () => {
+  it("puts the glow between the card surface and the content, not under an opaque layer", () => {
+    const { container, getByText } = render(<GlowCard hoverOnly={false}>Card</GlowCard>)
+    const root = container.firstElementChild as HTMLElement
+    expect(root.className).toContain("bg-card")
+    const content = getByText("Card")
+    expect(content.className).not.toContain("bg-")
+    expect(root.firstElementChild?.className).toContain("opacity-100")
+  })
+})
+
+describe("BorderBeam", () => {
+  it("paints the beam above the content", () => {
+    const { container, getByText } = render(<BorderBeam>Card</BorderBeam>)
+    const root = container.firstElementChild as HTMLElement
+    const beam = root.lastElementChild as HTMLElement
+    expect(root.firstElementChild).toBe(getByText("Card"))
+    expect(beam.className).toContain("z-10")
+    expect(beam.getAttribute("aria-hidden")).toBe("true")
+  })
+})
+
+describe("GlowingBorder", () => {
+  it("draws a coloured ring above the content with a tight glow and no spread", () => {
+    const { container, getByText } = render(
+      <GlowingBorder glowColor="red" intensity="lg">
+        Card
+      </GlowingBorder>
+    )
+    const root = container.firstElementChild as HTMLElement
+    const ring = root.lastElementChild as HTMLElement
+    expect(root.firstChild?.textContent).toBe(getByText("Card").textContent)
+    expect(ring.className).toContain("z-10")
+    const shadow = ring.style.boxShadow
+    expect(shadow).toContain("inset 0 0 0 2px red")
+    // Every outer layer is a blur with zero spread: "0 0 <blur>px 0".
+    for (const layer of shadow.split(/,(?![^(]*\))/).slice(1)) {
+      expect(layer.trim()).toMatch(/^0 0 \d+px 0 red$/)
+    }
+  })
+})
+
+describe("Spotlight", () => {
+  it("keeps the resting light centred when the container resizes, until the pointer moves", async () => {
+    let resize: () => void = () => {}
+    const saved = globalThis.ResizeObserver
+    globalThis.ResizeObserver = class {
+      constructor(callback: () => void) {
+        resize = callback
+      }
+      observe() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver
+    let width = 400
+    const widthSpy = vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(() => width)
+    const heightSpy = vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockImplementation(() => 200)
+    try {
+      const { container } = render(<Spotlight size={100}>Panel</Spotlight>)
+      const light = container.querySelector<HTMLElement>(".rounded-full")!
+      // framer writes translateX(<n>px); jsdom has no DOMMatrix to parse it.
+      const x = () => Number(/translateX\((-?[\d.]+)px\)/.exec(light.style.transform)?.[1] ?? 0)
+      // framer writes the transform on its next frame, hence waitFor.
+      await waitFor(() => expect(x()).toBe(200)) // centre of 400
+      width = 800
+      act(() => resize())
+      await waitFor(() => expect(x()).toBe(400)) // centre of 800
+      fireEvent.mouseMove(container.firstElementChild!, { clientX: 10, clientY: 10 })
+      width = 1000
+      act(() => resize())
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      expect(x()).not.toBe(500) // the pointer has taken over from the centre
+    } finally {
+      widthSpy.mockRestore()
+      heightSpy.mockRestore()
+      globalThis.ResizeObserver = saved
+    }
+  })
+})
+
+/**
+ * A blank string prop (what a cleared Storybook control or an empty form field
+ * passes) falls back to the default instead of emptying the style it feeds.
+ */
+describe("blank string props fall back to their defaults", () => {
+  it("ShimmerButton: every string prop", () => {
+    const { getByRole } = render(
+      <ShimmerButton shimmerColor="" shimmerSize=" " shimmerDuration="" borderRadius="" background="">
+        Shop
+      </ShimmerButton>
+    )
+    const style = getByRole("button").style
+    expect(style.getPropertyValue("--shimmer-color")).toContain("--primary-foreground")
+    expect(style.getPropertyValue("--shimmer-size")).toBe("100%")
+    expect(style.getPropertyValue("--shimmer-duration")).toBe("2s")
+    expect(style.getPropertyValue("--border-radius")).toBe("0.5rem")
+    expect(style.getPropertyValue("--background")).toBe("var(--primary)")
+  })
+
+  it("ShimmerButton: no stacked motion-safe hover variant, anywhere in the source", async () => {
+    const { getByRole } = render(<ShimmerButton>Shop</ShimmerButton>)
+    expect(getByRole("button").className).toContain("hover:scale-105")
+    // Tailwind generates classes it finds in comments, so check the file itself.
+    const { readFileSync } = await import("node:fs")
+    const { resolve } = await import("node:path")
+    const source = readFileSync(resolve(__dirname, "shimmer-button/shimmer-button.tsx"), "utf8")
+    expect(source).not.toMatch(/motion-(safe|reduce):(hover|focus)/)
+  })
+
+  it("BorderBeam and GlowingBorder", async () => {
+    const beam = render(<BorderBeam colorFrom="" colorTo="">Card</BorderBeam>)
+    const ring = beam.container.firstElementChild!.lastElementChild as HTMLElement
+    await waitFor(() => expect(ring.style.background).toContain("var(--primary) 360deg"))
+    expect(ring.style.background).toContain("transparent 270deg")
+
+    const glow = render(<GlowingBorder glowColor="" borderRadius="">Card</GlowingBorder>)
+    const root = glow.container.firstElementChild as HTMLElement
+    expect(root.style.borderRadius).toBe("0.5rem")
+    expect((root.lastElementChild as HTMLElement).style.boxShadow).toContain("var(--primary)")
+  })
+
+  it("GlowCard and GlowContainer", () => {
+    const card = render(<GlowCard glowColor="" hoverOnly={false}>Card</GlowCard>)
+    const layer = card.container.firstElementChild!.firstElementChild as HTMLElement
+    expect(layer.style.background).toContain("var(--primary)")
+  })
+
+  it("Spotlight and SpotlightCard", () => {
+    const spot = render(<Spotlight color="">Panel</Spotlight>)
+    expect(spot.container.querySelector<HTMLElement>(".rounded-full")!.style.background).toContain("var(--primary)")
+    const card = render(<SpotlightCard spotlightColor="">Card</SpotlightCard>)
+    fireEvent.mouseEnter(card.container.firstElementChild!)
+    expect(card.container.querySelector<HTMLElement>(".rounded-full")!.style.background).toContain("var(--primary)")
+  })
+
+  it("AnimatedGradient: blank colours are dropped, an empty list uses the default", () => {
+    const empty = render(<AnimatedGradient colors={[]} />)
+    expect(empty.container.querySelectorAll(".rounded-full")).toHaveLength(4)
+    const some = render(<AnimatedGradient colors={["", "red", " "]} />)
+    const blobs = some.container.querySelectorAll<HTMLElement>(".rounded-full")
+    expect(blobs).toHaveLength(1)
+    expect(blobs[0]!.style.background).toBe("red")
+  })
+
+  it("TypewriterText: a blank cursorChar keeps the default cursor", () => {
+    const { container } = render(<TypewriterText text="Hi" cursorChar="" />)
+    expect(container.querySelector("[aria-hidden]")?.textContent).toBe("|")
+  })
+})
+
+describe("Spotlight size", () => {
+  // The light's centre is its translate plus its left offset plus half its size.
+  const centreOf = (light: HTMLElement) => {
+    const translate = Number(/translateX\((-?[\d.]+)px\)/.exec(light.style.transform)?.[1] ?? 0)
+    return translate + parseFloat(light.style.left) + light.offsetWidth / 2
+  }
+
+  it("keeps the light centred on the pointer when size changes after the pointer moved", async () => {
+    const widthSpy = vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(function (this: HTMLElement) {
+      return this.classList.contains("rounded-full") ? parseFloat(this.style.width) : 400
+    })
+    try {
+      const { container, rerender } = render(<Spotlight size={100}>Panel</Spotlight>)
+      const root = container.firstElementChild!
+      fireEvent.mouseMove(root, { clientX: 120, clientY: 60 })
+      const light = () => container.querySelector<HTMLElement>(".rounded-full")!
+      await waitFor(() => expect(Math.round(centreOf(light()))).toBe(120))
+      rerender(<Spotlight size={300}>Panel</Spotlight>)
+      await waitFor(() => expect(light().style.width).toBe("300px"))
+      expect(Math.round(centreOf(light()))).toBe(120)
+      expect(light().style.left).toBe("-150px")
+    } finally {
+      widthSpy.mockRestore()
+    }
+  })
+
+  it("keeps the resting light at the container's centre when size changes", async () => {
+    const widthSpy = vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(function (this: HTMLElement) {
+      return this.classList.contains("rounded-full") ? parseFloat(this.style.width) : 400
+    })
+    try {
+      const { container, rerender } = render(<Spotlight size={100}>Panel</Spotlight>)
+      const light = () => container.querySelector<HTMLElement>(".rounded-full")!
+      await waitFor(() => expect(Math.round(centreOf(light()))).toBe(200))
+      rerender(<Spotlight size={300}>Panel</Spotlight>)
+      await waitFor(() => expect(light().style.width).toBe("300px"))
+      expect(Math.round(centreOf(light()))).toBe(200)
+    } finally {
+      widthSpy.mockRestore()
+    }
+  })
+})

package/registry/effects/glow-card/glow-card.tsx

@@ -3,6 +3,27 @@
 import * as React from "react"
 import { cn } from "../../../src/lib/utils"
 
+/**
+ * Whether the user asks for reduced motion. It starts false, so the server and
+ * the first client render agree, then follows the setting as it changes.
+ */
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false)
+  React.useEffect(() => {
+    if (typeof window.matchMedia !== "function") return
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
+    setReduced(query.matches)
+    const onChange = () => setReduced(query.matches)
+    query.addEventListener("change", onChange)
+    return () => query.removeEventListener("change", onChange)
+  }, [])
+  return reduced
+}
+
+/** The value, or the fallback when it is missing or blank (a cleared control, say). */
+const filled = (value: string | undefined, fallback: string) =>
+  value && value.trim() ? value : fallback
+
 export interface GlowCardProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Glow color (any CSS color) */
   glowColor?: string
@@ -16,7 +37,7 @@ export interface GlowCardProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export function GlowCard({
-  glowColor = "hsl(var(--primary))",
+  glowColor: glowColorProp,
   glowIntensity = 60,
   followMouse = false,
   hoverOnly = true,
@@ -24,29 +45,30 @@ export function GlowCard({
   children,
   ...props
 }: GlowCardProps) {
+  const glowColor = filled(glowColorProp, "var(--primary)")
   const cardRef = React.useRef<HTMLDivElement>(null)
-  const [mousePosition, setMousePosition] = React.useState({ x: 50, y: 50 })
+  // Pointer position in px from the card's top-left; null keeps the glow centred.
+  const [mousePosition, setMousePosition] = React.useState<{ x: number; y: number } | null>(null)
   const [isHovering, setIsHovering] = React.useState(false)
 
-  // Check for reduced motion preference
-  const prefersReducedMotion = React.useMemo(() => {
-    if (typeof window === "undefined") return false
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  }, [])
+  const prefersReducedMotion = usePrefersReducedMotion()
 
   const handleMouseMove = React.useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
       if (!followMouse || !cardRef.current || prefersReducedMotion) return
 
       const rect = cardRef.current.getBoundingClientRect()
-      const x = ((e.clientX - rect.left) / rect.width) * 100
-      const y = ((e.clientY - rect.top) / rect.height) * 100
-      setMousePosition({ x, y })
+      setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top })
     },
     [followMouse, prefersReducedMotion]
   )
 
   const showGlow = prefersReducedMotion ? false : hoverOnly ? isHovering : true
+  // The glow layer overhangs the card by the blur radius on every side, so the
+  // blur has colour to spread instead of fading into the card's clipped edge.
+  const overhang = glowIntensity
+  const glowAt = mousePosition ? `${mousePosition.x + overhang}px ${mousePosition.y + overhang}px` : "50% 50%"
+  const edgeAt = mousePosition ? `${mousePosition.x}px ${mousePosition.y}px` : "50% 50%"
 
   return (
     <div
@@ -54,45 +76,45 @@ export function GlowCard({
       onMouseMove={handleMouseMove}
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
-      className={cn("relative overflow-hidden rounded-xl", className)}
+      className={cn("relative isolate overflow-hidden rounded-xl border bg-card", className)}
       {...props}
     >
-      {/* Glow effect */}
+      {/*
+        Glow: above the card surface and below the content, so it shows through
+        it. The colour is softened so text on top keeps its contrast.
+      */}
       <div
+        aria-hidden="true"
         className={cn(
-          "pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300",
+          "pointer-events-none absolute opacity-0 transition-opacity duration-300",
           showGlow && "opacity-100"
         )}
         style={{
-          background: followMouse
-            ? `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, ${glowColor}, transparent 70%)`
-            : `radial-gradient(circle at 50% 50%, ${glowColor}, transparent 70%)`,
+          inset: -overhang,
+          background: `radial-gradient(circle at ${glowAt}, color-mix(in oklch, ${glowColor} 60%, transparent), transparent 40%)`,
           filter: `blur(${glowIntensity}px)`,
         }}
       />
 
-      {/* Border glow */}
+      {/* Card content */}
+      <div className="relative">{children}</div>
+
+      {/* Edge glow: a 1px ring above the content, just inside the border */}
       <div
+        aria-hidden="true"
         className={cn(
-          "pointer-events-none absolute inset-0 rounded-xl opacity-0 transition-opacity duration-300",
-          showGlow && "opacity-50"
+          "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-300",
+          showGlow && "opacity-100"
         )}
         style={{
-          background: followMouse
-            ? `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, ${glowColor}, transparent 50%)`
-            : undefined,
+          background: `radial-gradient(circle at ${edgeAt}, ${glowColor}, transparent 50%)`,
           padding: "1px",
-          WebkitMask:
-            "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+          WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
           WebkitMaskComposite: "xor",
+          mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
           maskComposite: "exclude",
         }}
       />
-
-      {/* Card content */}
-      <div className="relative z-10 rounded-xl border bg-card">
-        {children}
-      </div>
     </div>
   )
 }
@@ -106,29 +128,18 @@ export interface GlowContainerProps extends React.HTMLAttributes<HTMLDivElement>
 }
 
 export function GlowContainer({
-  glowColor = "hsl(var(--primary))",
+  glowColor: glowColorProp,
   duration = 3,
   className,
   children,
   ...props
 }: GlowContainerProps) {
-  const prefersReducedMotion = React.useMemo(() => {
-    if (typeof window === "undefined") return false
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  }, [])
+  const glowColor = filled(glowColorProp, "var(--primary)")
+  const prefersReducedMotion = usePrefersReducedMotion()
 
   return (
     <div
       className={cn("relative overflow-hidden rounded-xl p-px", className)}
-      style={
-        !prefersReducedMotion
-          ? {
-              background: `linear-gradient(90deg, ${glowColor}, transparent, ${glowColor})`,
-              backgroundSize: "200% 100%",
-              animation: `glow-slide ${duration}s linear infinite`,
-            }
-          : { background: glowColor }
-      }
       {...props}
     >
       <style dangerouslySetInnerHTML={{ __html: `
@@ -137,6 +148,20 @@ export function GlowContainer({
           100% { background-position: -200% 0; }
         }
       ` }} />
+      {/* The glow is its own layer so it can mirror in RTL and slide in the reading direction */}
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 rtl:-scale-x-100"
+        style={
+          !prefersReducedMotion
+            ? {
+                background: `linear-gradient(90deg, ${glowColor}, transparent, ${glowColor})`,
+                backgroundSize: "200% 100%",
+                animation: `glow-slide ${duration}s linear infinite`,
+              }
+            : { background: glowColor }
+        }
+      />
       <div className="relative z-10 rounded-[11px] bg-background">
         {children}
       </div>

package/registry/effects/shimmer-button/shimmer-button.tsx

@@ -8,7 +8,7 @@ export interface ShimmerButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Shimmer color */
   shimmerColor?: string
-  /** Shimmer size in pixels */
+  /** Width of the sheen, as any CSS length or percentage of the button */
   shimmerSize?: string
   /** Border radius */
   borderRadius?: string
@@ -18,6 +18,26 @@ export interface ShimmerButtonProps
   background?: string
 }
 
+/** The value, or the fallback when it is missing or blank (a cleared control, say). */
+const filled = (value: string | undefined, fallback: string) =>
+  value && value.trim() ? value : fallback
+
+const DEFAULTS = {
+  // primary-foreground, not primary: a primary sheen on the primary background is invisible
+  shimmerColor: "color-mix(in oklch, var(--primary-foreground) 35%, transparent)",
+  shimmerSize: "100%",
+  shimmerDuration: "2s",
+  borderRadius: "0.5rem",
+  background: "var(--primary)",
+}
+
+const SHIMMER_KEYFRAMES = `
+  @keyframes fasla-shimmer {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(100%); }
+  }
+`
+
 /**
  * A button with an animated shimmer effect.
  * The shimmer respects prefers-reduced-motion.
@@ -28,11 +48,11 @@ export const ShimmerButton = React.forwardRef<
 >(
   (
     {
-      shimmerColor = "hsl(var(--primary) / 0.2)",
-      shimmerSize = "0.1em",
-      shimmerDuration = "2s",
-      borderRadius = "0.5rem",
-      background = "hsl(var(--primary))",
+      shimmerColor,
+      shimmerSize,
+      shimmerDuration,
+      borderRadius,
+      background,
       className,
       children,
       ...props
@@ -45,40 +65,59 @@ export const ShimmerButton = React.forwardRef<
       <button
         ref={ref}
         className={cn(
-          "group relative inline-flex h-10 items-center justify-center overflow-hidden whitespace-nowrap px-6 py-2 text-sm font-medium text-primary-foreground transition-all hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          "group relative inline-flex h-10 items-center justify-center overflow-hidden whitespace-nowrap px-6 py-2 text-sm font-medium text-primary-foreground transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          // Plain hover, gated in JS rather than with a stacked motion-safe
+          // hover variant: Storybook's pseudo-states addon rewrites that
+          // stacked rule into invalid CSS and throws. Tailwind reads comments
+          // too, so the stacked class name must not appear here either.
+          !prefersReducedMotion && "hover:scale-105",
           className
         )}
         style={
           {
-            "--shimmer-color": shimmerColor,
-            "--shimmer-size": shimmerSize,
-            "--shimmer-duration": shimmerDuration,
-            "--border-radius": borderRadius,
-            "--background": background,
+            // A blank value (a cleared control, say) falls back to the default
+            // rather than emptying the variable, which would hide the sheen,
+            // stop it, square the corners or clear the background.
+            "--shimmer-color": filled(shimmerColor, DEFAULTS.shimmerColor),
+            "--shimmer-size": filled(shimmerSize, DEFAULTS.shimmerSize),
+            "--shimmer-duration": filled(shimmerDuration, DEFAULTS.shimmerDuration),
+            "--border-radius": filled(borderRadius, DEFAULTS.borderRadius),
+            "--background": filled(background, DEFAULTS.background),
             borderRadius: "var(--border-radius)",
             background: "var(--background)",
           } as React.CSSProperties
         }
         {...props}
       >
-        {/* Shimmer effect */}
+        {/* Shimmer effect: mirrored in RTL so it sweeps in the reading direction */}
         {!prefersReducedMotion && (
           <div
-            className="absolute inset-0 overflow-hidden"
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-0 overflow-hidden rtl:-scale-x-100"
             style={{ borderRadius: "var(--border-radius)" }}
           >
+            {/*
+              The keyframes ship with the component, so it animates without any
+              Tailwind config. The track is the button's width and travels from
+              fully before it to fully after it; the sheen sits at its centre.
+            */}
+            <style dangerouslySetInnerHTML={{ __html: SHIMMER_KEYFRAMES }} />
             <div
-              className="animate-shimmer absolute inset-0 -translate-x-full"
+              className="absolute inset-0 flex justify-center"
               style={{
-                background: `linear-gradient(
-                  90deg,
-                  transparent 0%,
-                  var(--shimmer-color) 50%,
-                  transparent 100%
-                )`,
-                animationDuration: "var(--shimmer-duration)",
+                transform: "translateX(-100%)",
+                animation: "fasla-shimmer var(--shimmer-duration) ease-in-out infinite",
               }}
-            />
+            >
+              <div
+                className="h-full shrink-0"
+                style={{
+                  width: "var(--shimmer-size)",
+                  background:
+                    "linear-gradient(90deg, transparent 0%, var(--shimmer-color) 50%, transparent 100%)",
+                }}
+              />
+            </div>
           </div>
         )}