@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/palette-generator/palette-generator.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+// Ported from bencho Palette (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+} from "react";
+
+import { Button } from "@/components/button";
+import { cn } from "@/lib/utils";
+
+/*
+ * A row of swatches and a refresh button. Pressing it shrinks the swatches to
+ * round blobs that melt together through a goo filter, swaps the colours at
+ * the smallest point, and pops them back out as rectangles.
+ *
+ * Colours are data, shown through inline style. The source generated OKLCH
+ * ramps from numbers; this library's token audit forbids colour functions in
+ * component source (literal or templated), so the default generator composes
+ * semantic tokens instead: a light-to-dark ramp walking between two
+ * neighbouring hue tokens, mixed toward the background at the light end and
+ * the foreground at the dark end — exactly the "one hue family" ramp the
+ * source produces, and it follows the theme. A consumer who wants free OKLCH
+ * palettes passes `generate` (the story shows one).
+ *
+ * The morph is phase-driven CSS (melt → pop → idle) on data-phase; only the
+ * blur of the goo filter is tweened in JS, because an SVG filter attribute
+ * cannot be transitioned. Reduced motion swaps the colours at once.
+ */
+
+export interface PaletteColor {
+  /** Any CSS colour: shown as the swatch's background. */
+  value: string;
+  /** Announced and used as the swatch's accessible name. */
+  name: string;
+}
+
+export type PaletteGenerate = (count: number, random: () => number) => PaletteColor[];
+
+/** Hue tokens in wheel order, so neighbours make a family. */
+const HUES = ["destructive", "warning", "success", "info", "primary"] as const;
+
+/**
+ * The default generator: a light-to-dark ramp between two neighbouring hue
+ * tokens. Every colour is a color-mix of semantic tokens.
+ */
+export const generateTokenPalette: PaletteGenerate = (count, random) => {
+  const start = Math.floor(random() * HUES.length);
+  const from = HUES[start] ?? "info";
+  const to = HUES[(start + 1) % HUES.length] ?? "success";
+  const depth = 30 + Math.round(random() * 25);
+  return Array.from({ length: count }, (_, index) => {
+    const t = count === 1 ? 0.5 : index / (count - 1);
+    const hue = `color-mix(in oklch, var(--color-${to}) ${String(Math.round(t * 100))}%, var(--color-${from}))`;
+    // Lighter than the hue toward the start, darker toward the end.
+    const toward = t < 0.5 ? "background" : "foreground";
+    const amount = Math.round(Math.abs(0.5 - t) * 2 * depth);
+    const value = `color-mix(in oklab, ${hue} ${String(100 - amount)}%, var(--color-${toward}))`;
+    const tone = t < 0.25 ? "pale " : t > 0.75 ? "deep " : "";
+    const family = t < 0.2 ? from : t > 0.8 ? to : `${from}–${to}`;
+    return { value, name: `${tone}${family}` };
+  });
+};
+
+/** A tiny seeded PRNG, so the first palette is the same on server and client. */
+function seeded(seed: number): () => number {
+  let state = seed;
+  return () => {
+    state = (state + 0x6d2b79f5) | 0;
+    let t = Math.imul(state ^ (state >>> 15), 1 | state);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function reducedMotion(): boolean {
+  return (
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+/** Timeline of one press, in milliseconds. */
+const MELT = 300;
+const SETTLE = 1000;
+
+const paletteGeneratorVariants = cva("flex w-[18.75rem] max-w-full gap-1.5", {
+  variants: {
+    /** A hairline ring on both slabs — the source's Stroke switch. */
+    stroke: {
+      true: "[&>[data-slab]]:shadow-[inset_0_0_0_1px_var(--color-border)]",
+      false: "",
+    },
+  },
+  defaultVariants: { stroke: false },
+});
+
+const slab = cn(
+  "rounded-[calc(var(--palette-generator-radius)+10px)] bg-card p-2.5 text-card-foreground",
+  "transition-[scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]",
+);
+
+export interface PaletteGeneratorProps
+  extends
+    Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange">,
+    VariantProps<typeof paletteGeneratorVariants> {
+  /** Controlled palette. */
+  colors?: PaletteColor[];
+  /** Initial palette when uncontrolled. Defaults to a generated one. */
+  defaultColors?: PaletteColor[];
+  /** Called with each new palette. */
+  onColorsChange?: (colors: PaletteColor[]) => void;
+  /** Swatches per palette. */
+  count?: number;
+  /** Makes a palette. Defaults to `generateTokenPalette`. */
+  generate?: PaletteGenerate;
+  /** How deep the shrink and melt go, 0–100. */
+  morph?: number;
+  /** Swatch corner radius in pixels; the slabs are 10px rounder. */
+  radius?: number;
+  /** The refresh button's accessible name. */
+  generateLabel?: string;
+  /** Names the swatch list. */
+  paletteLabel?: string;
+}
+
+/** Swatches that melt together and pop back out in a new palette. */
+export function PaletteGenerator({
+  className,
+  stroke,
+  colors: colorsProp,
+  defaultColors,
+  onColorsChange,
+  count = 4,
+  generate = generateTokenPalette,
+  morph = 50,
+  radius = 14,
+  generateLabel = "Generate a new palette",
+  paletteLabel = "Palette",
+  style,
+  ...props
+}: PaletteGeneratorProps) {
+  const filterId = `dowel-palette-goo-${useId().replace(/[^a-zA-Z0-9-]/g, "")}`;
+  const [uncontrolled, setUncontrolled] = useState(
+    () => defaultColors ?? generate(count, seeded(count)),
+  );
+  const colors = colorsProp ?? uncontrolled;
+  const [phase, setPhase] = useState<"idle" | "melt" | "pop">("idle");
+  const [presses, setPresses] = useState(0);
+  const [announced, setAnnounced] = useState("");
+  const blurRef = useRef<SVGFEGaussianBlurElement | null>(null);
+  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
+  const frame = useRef(0);
+  const depth = Math.min(100, Math.max(0, morph)) / 100;
+
+  useEffect(
+    () => () => {
+      for (const timer of timers.current) clearTimeout(timer);
+      cancelAnimationFrame(frame.current);
+    },
+    [],
+  );
+
+  /** Tweens the goo blur, since an SVG filter attribute cannot transition. */
+  function tweenBlur(from: number, to: number, duration: number) {
+    cancelAnimationFrame(frame.current);
+    const started = performance.now();
+    const step = (now: number) => {
+      const t = Math.min(1, (now - started) / duration);
+      blurRef.current?.setAttribute("stdDeviation", String(from + (to - from) * t));
+      if (t < 1) frame.current = requestAnimationFrame(step);
+    };
+    frame.current = requestAnimationFrame(step);
+  }
+
+  function swap() {
+    const next = generate(count, Math.random);
+    if (colorsProp === undefined) setUncontrolled(next);
+    onColorsChange?.(next);
+    setAnnounced(`New palette: ${next.map((color) => color.name).join(", ")}`);
+  }
+
+  function press() {
+    setPresses((current) => current + 1);
+    for (const timer of timers.current) clearTimeout(timer);
+    timers.current = [];
+    if (reducedMotion()) {
+      swap();
+      return;
+    }
+    const blur = 1 + 4 * depth;
+    setPhase("melt");
+    tweenBlur(0, blur, MELT - 50);
+    timers.current.push(
+      setTimeout(() => {
+        swap();
+        setPhase("pop");
+        tweenBlur(blur, 0, SETTLE - MELT);
+      }, MELT),
+      setTimeout(() => {
+        setPhase("idle");
+      }, SETTLE),
+    );
+  }
+
+  return (
+    <div
+      data-slot="palette-generator"
+      data-phase={phase}
+      className={cn(paletteGeneratorVariants({ stroke }), className)}
+      style={
+        {
+          "--palette-generator-radius": `${String(radius)}px`,
+          "--palette-generator-morph": String(depth),
+          ...style,
+        } as CSSProperties
+      }
+      {...props}
+    >
+      <svg width="0" height="0" aria-hidden="true" className="absolute">
+        <defs>
+          <filter id={filterId}>
+            <feGaussianBlur ref={blurRef} in="SourceGraphic" stdDeviation="0" result="blur" />
+            <feColorMatrix
+              in="blur"
+              mode="matrix"
+              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 26 -13"
+            />
+          </filter>
+        </defs>
+      </svg>
+      <div
+        data-slab=""
+        data-slot="palette-generator-swatches"
+        className={cn(slab, "min-w-0 flex-1 in-data-[phase=melt]:scale-[0.965]")}
+      >
+        <ul
+          aria-label={paletteLabel}
+          className="flex h-[3.625rem] gap-1"
+          style={phase === "idle" ? undefined : { filter: `url(#${filterId})` }}
+        >
+          {colors.map((color, index) => (
+            <li key={index} className="grid min-w-0 flex-1 place-items-center">
+              <span
+                role="img"
+                aria-label={color.name}
+                data-slot="palette-generator-swatch"
+                className={cn(
+                  "block size-full rounded-[var(--palette-generator-radius)]",
+                  "transition-[width,height,border-radius] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+                  "in-data-[phase=pop]:ease-[var(--ease-overshoot)]",
+                  "in-data-[phase=melt]:h-[calc(100%-(100%-2.375rem)*var(--palette-generator-morph))]",
+                  "in-data-[phase=melt]:w-[calc(100%-(100%-2.375rem)*var(--palette-generator-morph))]",
+                  "in-data-[phase=melt]:rounded-[50%]",
+                )}
+                style={{ backgroundColor: color.value }}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div data-slab="" className={cn(slab, "shrink-0 motion-safe:active:scale-[0.94]")}>
+        <Button
+          variant="ghost"
+          aria-label={generateLabel}
+          data-slot="palette-generator-refresh"
+          className={cn(
+            "h-[3.625rem] w-[1.875rem] rounded-[var(--palette-generator-radius)] p-0 text-muted-foreground",
+            "hover:bg-transparent hover:text-[color-mix(in_oklab,var(--color-muted-foreground)_45%,var(--color-card))]",
+          )}
+          onClick={press}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+            className="size-[1.125rem] transition-[rotate] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]"
+            style={{ rotate: `${String(presses * 180)}deg` }}
+          >
+            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16M8 16H3v5" />
+          </svg>
+        </Button>
+      </div>
+      <span role="status" aria-live="polite" className="sr-only">
+        {announced}
+      </span>
+    </div>
+  );
+}
+
+export { paletteGeneratorVariants };

package/src/components/photo-stack/index.ts

@@ -0,0 +1 @@
+export { PhotoStack, type PhotoStackPhoto, type PhotoStackProps } from "./photo-stack";

package/src/components/photo-stack/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "photo-stack",
+  title: "Photo Stack",
+  description:
+    "A pile of photos: flick the top one away and it springs to the back, or tap, key or button through them.",
+  category: "display",
+  status: "beta",
+  dependencies: ["motion", "radix-ui"],
+  registryDependencies: ["button"],
+  files: ["photo-stack.tsx"],
+  a11y:
+    'A carousel region (aria-roledescription="carousel") of labelled slides; only the top photo is exposed, the ' +
+    'rest are aria-hidden and inert. The top photo carries a real button ("Show next photo") so Enter and Space ' +
+    "cycle it; arrow keys move either way (mirrored in right-to-left layouts); optional previous/next buttons " +
+    "give a visible pointer-free path; a polite status region announces the new photo. Dragging is a convenience " +
+    "on top of these and is switched off under reduced motion, where cards also move without animating.",
+});

package/src/components/photo-stack/photo-stack.tsx

@@ -0,0 +1,310 @@
+"use client";
+
+// Ported from SmoothUI Photo Stack (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { MotionConfig, motion, type PanInfo } from "motion/react";
+import { Direction } from "radix-ui";
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ComponentPropsWithRef,
+  type KeyboardEvent,
+} from "react";
+
+import { Button } from "@/components/button";
+import { focusRing, mirrorForDirection } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A deck of photos. Flick the top one away and it springs to the back.
+ *
+ * This is one of the places `motion` earns its keep (ADR 0014): the card
+ * leaves on a spring that carries the velocity of the flick, which a CSS
+ * transition cannot know. Everything else is a pointer-free path to the same
+ * result — tap the top photo, press Enter or Space on it, use the arrow keys,
+ * or the optional previous/next buttons — so the drag is a convenience, never
+ * the only way through. Under reduced motion the drag is off and cards move
+ * without animating.
+ */
+
+export interface PhotoStackPhoto {
+  id: string;
+  src: string;
+  /** Describes the photo. Also names the slide when there is no `name`. */
+  alt: string;
+  /** Caption title over the top photo. */
+  name?: string;
+  /** Caption line under the name. */
+  subtitle?: string;
+}
+
+/** Resting offset and scale for each position in the pile (0 = top). */
+const POSITIONS = [
+  { x: 0, y: 0, scale: 1 },
+  { x: 16, y: 12, scale: 0.95 },
+  { x: 32, y: 24, scale: 0.9 },
+] as const;
+
+/** A flick further or faster than this sends the card to the back. */
+const DISTANCE = 80;
+const VELOCITY = 500;
+
+export function flickedAway(info: Pick<PanInfo, "offset" | "velocity">) {
+  return Math.abs(info.offset.x) > DISTANCE || Math.abs(info.velocity.x) > VELOCITY;
+}
+
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+
+function subscribeToMotionPreference(onChange: () => void) {
+  const query = window.matchMedia(REDUCED_MOTION);
+  query.addEventListener("change", onChange);
+  return () => query.removeEventListener("change", onChange);
+}
+
+/** Live, unlike a one-off read: turning the setting on mid-session stops the drag. */
+function usePrefersReducedMotion() {
+  return useSyncExternalStore(
+    subscribeToMotionPreference,
+    () => window.matchMedia(REDUCED_MOTION).matches,
+    () => false,
+  );
+}
+
+function isRtl(element: Element) {
+  return element.closest("[dir]")?.getAttribute("dir") === "rtl";
+}
+
+export interface PhotoStackProps extends ComponentPropsWithRef<"div"> {
+  /** The photos. The first starts on top. */
+  photos: PhotoStackPhoto[];
+  /** The photo on top (controlled). */
+  index?: number;
+  /** The photo on top at first (uncontrolled). */
+  defaultIndex?: number;
+  /** Called when another photo comes to the top. */
+  onIndexChange?: (index: number) => void;
+  /** Shows previous and next buttons under the stack. */
+  controls?: boolean;
+}
+
+/** A draggable pile of photos you flick, tap or key through. */
+export function PhotoStack({
+  className,
+  photos,
+  index,
+  defaultIndex = 0,
+  onIndexChange,
+  controls = false,
+  ...props
+}: PhotoStackProps) {
+  const count = photos.length;
+  const [uncontrolled, setUncontrolled] = useState(defaultIndex);
+  const current = count === 0 ? 0 : (((index ?? uncontrolled) % count) + count) % count;
+  const [announcement, setAnnouncement] = useState("");
+  const reduceMotion = usePrefersReducedMotion();
+  const flip = Direction.useDirection() === "rtl" ? -1 : 1;
+  const hintId = `dowel-photo-stack-${useId().replace(/:/g, "")}`;
+  // A released drag is followed by a click. Without this the card would cycle
+  // twice and land second from the top instead of at the back.
+  const dragged = useRef(false);
+  // The button that cycles lives on the top photo, so it is a new element
+  // after every cycle. Focus follows it rather than falling to the page.
+  const pile = useRef<HTMLDivElement>(null);
+  const refocus = useRef(false);
+  useEffect(() => {
+    if (!refocus.current) return;
+    refocus.current = false;
+    pile.current?.querySelector<HTMLElement>('[data-slot="photo-stack-next"]')?.focus();
+  }, [current]);
+
+  function go(step: 1 | -1) {
+    if (count < 2) return;
+    const next = (current + step + count) % count;
+    if (index === undefined) setUncontrolled(next);
+    onIndexChange?.(next);
+    const photo = photos[next];
+    if (photo) {
+      setAnnouncement(`${photo.name ?? photo.alt}, ${String(next + 1)} of ${String(count)}`);
+    }
+  }
+
+  /** Arrow keys on any of the stack's buttons move through the photos. */
+  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
+    const rtl = flip === -1 || isRtl(event.currentTarget);
+    const steps: Record<string, 1 | -1> = {
+      ArrowDown: 1,
+      ArrowUp: -1,
+      ArrowRight: rtl ? -1 : 1,
+      ArrowLeft: rtl ? 1 : -1,
+    };
+    const step = steps[event.key];
+    if (step === undefined) return;
+    event.preventDefault();
+    go(step);
+  }
+
+  return (
+    <MotionConfig reducedMotion="user">
+      <div
+        role="region"
+        aria-roledescription="carousel"
+        aria-label={props["aria-labelledby"] ? undefined : "Photos"}
+        data-slot="photo-stack"
+        className={cn("flex w-56 flex-col items-center gap-4", className)}
+        {...props}
+      >
+        <div
+          ref={pile}
+          data-slot="photo-stack-pile"
+          className="relative aspect-7/9 w-full select-none"
+        >
+          {photos.map((photo, i) => {
+            const position = (i - current + count) % count;
+            const rest = POSITIONS[Math.min(position, POSITIONS.length - 1)] ?? POSITIONS[0];
+            const top = position === 0;
+            const label = `${photo.name ?? photo.alt}, ${String(i + 1)} of ${String(count)}`;
+
+            return (
+              <motion.div
+                key={photo.id}
+                role="group"
+                aria-roledescription="slide"
+                aria-label={label}
+                aria-hidden={top ? undefined : true}
+                inert={!top}
+                data-slot="photo-stack-photo"
+                data-position={position}
+                className={cn(
+                  "absolute inset-0 overflow-hidden rounded-2xl border border-border bg-card shadow-lg",
+                  top && !reduceMotion && "cursor-grab active:cursor-grabbing",
+                )}
+                style={{ zIndex: count - position }}
+                initial={false}
+                animate={{ x: rest.x * flip, y: rest.y, scale: rest.scale, rotate: 0 }}
+                transition={{ type: "spring", stiffness: 320, damping: 30 }}
+                drag={top && !reduceMotion ? "x" : false}
+                dragSnapToOrigin
+                onDragStart={() => {
+                  dragged.current = true;
+                }}
+                onDragEnd={(_, info) => {
+                  if (flickedAway(info)) go(1);
+                  // The trailing click, if any, arrives before this runs.
+                  setTimeout(() => {
+                    dragged.current = false;
+                  }, 0);
+                }}
+              >
+                <img
+                  src={photo.src}
+                  alt={photo.alt}
+                  draggable={false}
+                  className="size-full object-cover object-top"
+                />
+                {photo.name || photo.subtitle ? (
+                  <div
+                    data-slot="photo-stack-caption"
+                    className={cn(
+                      "absolute inset-x-0 bottom-0 flex flex-col gap-px p-3.5 text-white",
+                      "bg-linear-to-t from-overlay to-transparent",
+                      "transition-opacity duration-[var(--duration-normal)]",
+                      !top && "opacity-0",
+                    )}
+                  >
+                    {photo.name ? (
+                      <span className="text-sm font-semibold">{photo.name}</span>
+                    ) : null}
+                    {photo.subtitle ? (
+                      <span className="text-xs opacity-85">{photo.subtitle}</span>
+                    ) : null}
+                  </div>
+                ) : null}
+                {top ? (
+                  <button
+                    type="button"
+                    aria-label="Show next photo"
+                    aria-describedby={hintId}
+                    data-slot="photo-stack-next"
+                    className={cn(
+                      "absolute inset-0 rounded-[inherit] bg-transparent",
+                      focusRing,
+                    )}
+                    onKeyDown={handleKeyDown}
+                    onClick={() => {
+                      if (dragged.current) {
+                        dragged.current = false;
+                        return;
+                      }
+                      refocus.current = true;
+                      go(1);
+                    }}
+                  />
+                ) : (
+                  <span
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-0 bg-card"
+                    style={{ opacity: position === 1 ? 0.2 : 0.36 }}
+                  />
+                )}
+              </motion.div>
+            );
+          })}
+        </div>
+
+        {controls ? (
+          <div data-slot="photo-stack-controls" className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Previous photo"
+              onClick={() => go(-1)}
+              onKeyDown={handleKeyDown}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+                className={mirrorForDirection}
+              >
+                <path d="m15 18-6-6 6-6" />
+              </svg>
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Next photo"
+              onClick={() => go(1)}
+              onKeyDown={handleKeyDown}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+                className={mirrorForDirection}
+              >
+                <path d="m9 18 6-6-6-6" />
+              </svg>
+            </Button>
+          </div>
+        ) : null}
+
+        <span id={hintId} className="sr-only">
+          Sends the top photo to the back. Arrow keys move through the photos.
+        </span>
+        <span role="status" aria-live="polite" className="sr-only">
+          {announcement}
+        </span>
+      </div>
+    </MotionConfig>
+  );
+}

package/src/components/photo-tabs/index.ts

@@ -0,0 +1 @@
+export { PhotoTabs, photoTabsVariants, type PhotoTab, type PhotoTabsProps } from "./photo-tabs";

package/src/components/photo-tabs/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "photo-tabs",
+  title: "Photo Tabs",
+  description: "A photo with a floating bar of icon tabs; each tab swaps the photo.",
+  category: "display",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: ["tabs"],
+  files: ["photo-tabs.tsx"],
+  a11y:
+    "Built on Dowel's Tabs: the ARIA tabs pattern with roving focus, arrow keys, Home/End and focusable panels. " +
+    "The tab list is named by `listLabel`; each icon-only tab carries its label as visually hidden text and the " +
+    "icon is aria-hidden. Each panel's image has alt text (defaulting to the label). With a fine pointer the bar " +
+    "hides until the photo is hovered or anything inside it has focus, so keyboard users always see it; on touch " +
+    "it is always visible. The hover pill is aria-hidden and its movement stops under reduced motion.",
+});