@mlola-ui/registry 1.0.0

package/snapshot/source/packages/components/carousel/carousel.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import * as React from "react";
+import { rovingIndex } from "@mlola-ui/behavior/logic";
+import { IconChevronLeft, IconChevronRight } from "@mlola-ui/icons";
+import { cx, useControllableState } from "../_internal/react";
+
+export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** One slide per entry. */
+  items: React.ReactNode[];
+  /** Accessible name for the carousel and its indicators. */
+  label?: string;
+  /** Accessible name per slide; defaults to “Slide N”. */
+  itemLabels?: string[];
+  /** Arrows wrap past the ends. Defaults to true. */
+  loop?: boolean;
+  /** The first visible slide. */
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (index: number) => void;
+  /** Slides visible at once. Defaults to 1. */
+  perView?: number;
+  /** The narrowest a slide may get; on small screens fewer slides show instead. */
+  minSlideWidth?: string;
+  /** How much of the next slide peeks in, as a CSS length, hinting there is more. */
+  peek?: string;
+  /** Milliseconds between slides; off by default, paused on hover, focus, a hidden tab and reduced motion. */
+  autoplay?: number;
+  /** Dots under the slides, a counter, or nothing. */
+  indicators?: "dots" | "counter" | "none";
+  /** Arrows over the slide edges. Defaults to true. */
+  arrows?: boolean;
+}
+
+const clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));
+
+/**
+ * Slides on a native scroll-snap track: swipe on touch, scroll with a
+ * trackpad, or use the arrows, dots and keyboard. Several slides can show at
+ * once, with the next one peeking in. Autoplay shows its progress on the
+ * active dot and pauses whenever the reader is looking closer.
+ */
+export function Carousel({
+  items,
+  label = "Carousel",
+  itemLabels,
+  loop = true,
+  value,
+  defaultValue = 0,
+  onValueChange,
+  perView = 1,
+  minSlideWidth,
+  peek,
+  autoplay,
+  indicators = "dots",
+  arrows = true,
+  className,
+  style,
+  ...props
+}: CarouselProps) {
+  const count = items.length;
+  const view = Math.max(1, Math.min(perView, count));
+  // How many slides actually fit, which minSlideWidth can lower on narrow screens.
+  const [fits, setFits] = React.useState(Math.floor(view));
+  // Positions the first visible slide can take.
+  const positions = Math.max(1, count - fits + 1);
+  const [requested, setRequested] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  const index = clamp(requested, 0, positions - 1);
+  const track = React.useRef<HTMLDivElement>(null);
+  const dots = React.useRef<Array<HTMLButtonElement | null>>([]);
+  const scrolled = React.useRef(index);
+  /** While an arrow or dot scrolls the track, passing positions are not reported. */
+  const heading = React.useRef<{ target: number; until: number } | null>(null);
+  const [paused, setPaused] = React.useState(false);
+  const [reduced, setReduced] = React.useState(false);
+
+  const labelFor = (position: number) => itemLabels?.[position] ?? `Slide ${position + 1}`;
+
+  const scrollTo = React.useCallback((target: number, smooth = true) => {
+    const element = track.current;
+    const slide = element?.children[target] as HTMLElement | undefined;
+    if (!element || !slide) return;
+    scrolled.current = target;
+    heading.current = { target, until: Date.now() + 800 };
+    // The track is the slides' offset parent, so offsetLeft is the scroll position.
+    element.scrollTo({ left: slide.offsetLeft, behavior: smooth && !reduced ? "smooth" : "auto" });
+  }, [reduced]);
+
+  const go = (next: number) => {
+    const target = loop ? ((next % positions) + positions) % positions : clamp(next, 0, positions - 1);
+    setRequested(target);
+    scrollTo(target);
+  };
+
+  // A value set from outside scrolls the track there.
+  React.useEffect(() => {
+    if (index !== scrolled.current) scrollTo(index);
+  }, [index, scrollTo]);
+
+  // The track's scroll position decides the current slide, whatever moved it.
+  const onScroll = () => {
+    const element = track.current;
+    if (!element) return;
+    const first = element.children[0] as HTMLElement | undefined;
+    const second = element.children[1] as HTMLElement | undefined;
+    const stride = first && second ? second.offsetLeft - first.offsetLeft : element.clientWidth;
+    const at = clamp(Math.round(element.scrollLeft / Math.max(1, stride)), 0, positions - 1);
+    // At the very end, the last position is current even if it cannot snap to the start.
+    const end = element.scrollLeft + element.clientWidth >= element.scrollWidth - 2 ? positions - 1 : at;
+    const flight = heading.current;
+    if (flight && Date.now() < flight.until && end !== flight.target) return;
+    heading.current = null;
+    if (end !== scrolled.current) {
+      scrolled.current = end;
+      setRequested(end);
+    }
+  };
+
+  React.useEffect(() => {
+    const element = track.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      const first = element.children[0] as HTMLElement | undefined;
+      const second = element.children[1] as HTMLElement | undefined;
+      if (!first) return;
+      const stride = second ? second.offsetLeft - first.offsetLeft : first.offsetWidth;
+      setFits(Math.max(1, Math.min(count, Math.floor((element.clientWidth + 1) / Math.max(1, stride)) || 1)));
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [count, view, minSlideWidth]);
+
+  React.useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+
+  // Autoplay: one timer per slide, stopped while paused or hidden.
+  React.useEffect(() => {
+    if (!autoplay || paused || reduced || positions < 2) return;
+    const timer = window.setTimeout(() => {
+      if (document.visibilityState === "visible") go(index + 1);
+    }, autoplay);
+    return () => window.clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoplay, paused, reduced, index, positions]);
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.target !== event.currentTarget) return;
+    if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      go(index + (event.key === "ArrowRight" ? 1 : -1));
+    }
+  };
+
+  const onDotKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const target = rovingIndex(positions, index, event.key, { horizontal: true, wrap: loop });
+    if (target < 0) return;
+    event.preventDefault();
+    go(target);
+    dots.current[target]?.focus();
+  };
+
+  if (count === 0) return null;
+
+  const atStart = !loop && index === 0;
+  const atEnd = !loop && index === positions - 1;
+  const playing = Boolean(autoplay) && !paused && !reduced && positions > 1;
+
+  return (
+    <div
+      {...props}
+      className={cx("ml-carousel", className)}
+      role="group"
+      aria-roledescription="carousel"
+      aria-label={label}
+      data-playing={playing || undefined}
+      style={{ ...style, "--ml-carousel-per-view": view, "--ml-carousel-peek": peek ?? "0px", "--ml-carousel-min": minSlideWidth ?? "0px", "--ml-carousel-autoplay": `${autoplay ?? 0}ms` } as React.CSSProperties}
+      onPointerEnter={() => setPaused(true)}
+      onPointerLeave={() => setPaused(false)}
+      onFocus={() => setPaused(true)}
+      onBlur={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node)) setPaused(false);
+      }}
+    >
+      <div className="ml-carousel-viewport">
+        <div ref={track} className="ml-carousel-track" tabIndex={0} aria-label={`${label}, use the arrow keys`} onScroll={onScroll} onKeyDown={onKeyDown}>
+          {items.map((item, position) => (
+            <div
+              key={position}
+              className="ml-carousel-slide"
+              role="group"
+              aria-roledescription="slide"
+              aria-label={`${position + 1} of ${count}: ${labelFor(position)}`}
+              data-current={(position >= index && position < index + fits) || undefined}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+        {arrows && positions > 1 ? (
+          <>
+            <button type="button" className="ml-carousel-arrow" data-side="previous" aria-label="Previous slide" disabled={atStart} onClick={() => go(index - 1)}>
+              <IconChevronLeft aria-hidden="true" size="1.1em" />
+            </button>
+            <button type="button" className="ml-carousel-arrow" data-side="next" aria-label="Next slide" disabled={atEnd} onClick={() => go(index + 1)}>
+              <IconChevronRight aria-hidden="true" size="1.1em" />
+            </button>
+          </>
+        ) : null}
+      </div>
+
+      {indicators === "dots" && positions > 1 ? (
+        <div className="ml-carousel-dots" role="group" aria-label={`Choose ${label.toLowerCase()}`} onKeyDown={onDotKeyDown}>
+          {Array.from({ length: positions }, (_, position) => {
+            const active = position === index;
+            return (
+              <button
+                key={position}
+                ref={(node) => {
+                  dots.current[position] = node;
+                }}
+                type="button"
+                className="ml-carousel-dot"
+                aria-current={active ? "true" : undefined}
+                aria-label={labelFor(position)}
+                tabIndex={active ? 0 : -1}
+                onClick={() => go(position)}
+              >
+                {/* Keyed by index so the autoplay fill restarts on every slide. */}
+                {active && playing ? <span key={index} className="ml-carousel-dot-fill" /> : null}
+              </button>
+            );
+          })}
+        </div>
+      ) : indicators === "counter" ? (
+        <p className="ml-carousel-counter" aria-live="polite">
+          {index + 1} / {positions}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/snapshot/source/packages/components/checkbox/checkbox.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import { composeRefs, cx, useControllableState } from "../_internal/react";
+import { IconCheck, IconMinus } from "@mlola-ui/icons";
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  indeterminate?: boolean;
+  label?: React.ReactNode;
+  description?: string;
+  error?: string;
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ checked, defaultChecked = false, onCheckedChange, indeterminate = false, disabled = false, required = false, label, description, error, id, className, "aria-describedby": describedBy, ...props }, ref) => {
+    const [current, setCurrent] = useControllableState({ value: checked, defaultValue: defaultChecked, onChange: onCheckedChange });
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const descriptionId = `${inputId}-description`;
+    const errorId = `${inputId}-error`;
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    React.useEffect(() => {
+      if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const state = indeterminate ? "indeterminate" : current ? "checked" : "unchecked";
+    return (
+      <div className={cx("ml-checkbox-field", className)} data-state={state} data-disabled={disabled ? "" : undefined} data-invalid={error ? "" : undefined}>
+        <span className="ml-checkbox-control">
+          <input
+            ref={composeRefs(inputRef, ref)}
+            id={inputId}
+            type="checkbox"
+            checked={current}
+            disabled={disabled}
+            required={required}
+            aria-checked={indeterminate ? "mixed" : current}
+            aria-invalid={error ? true : undefined}
+            aria-describedby={[describedBy, description && descriptionId, error && errorId].filter(Boolean).join(" ") || undefined}
+            className="ml-checkbox-input"
+            onChange={(event) => setCurrent(event.target.checked)}
+            {...props}
+          />
+          <span aria-hidden="true" className="ml-checkbox-indicator">
+            {indeterminate ? <IconMinus aria-hidden="true" size="0.75em" /> : current ? <IconCheck aria-hidden="true" size="0.75em" /> : null}
+          </span>
+        </span>
+        {label || description || error ? (
+          <span className="ml-checkbox-copy">
+            {label ? (
+              <label htmlFor={inputId} className="ml-checkbox-label">
+                {label}{required ? <span aria-hidden="true" className="ml-required-mark">*</span> : null}
+              </label>
+            ) : null}
+            {description ? <span id={descriptionId} className="ml-checkbox-description">{description}</span> : null}
+            {error ? <span id={errorId} role="alert" className="ml-checkbox-error">{error}</span> : null}
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+export { Checkbox };

package/snapshot/source/packages/components/color-picker/color-picker.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import * as React from "react";
+import { IconPen } from "@mlola-ui/icons";
+import { Field, fieldDescription } from "../input/input";
+import { Popover } from "../popover/popover";
+import { cx } from "../_internal/react";
+import { contrastRatio, formatColor, hsvToRgb, parseColor, rgbToHsv, type ColorFormat, type HSVA, type RGBA } from "./color";
+
+export type { ColorFormat, RGBA };
+export { contrastRatio, formatColor, parseColor } from "./color";
+
+export interface ColorPickerProps {
+  /** Any colour the picker reads: hex, rgb() or oklch(). */
+  value?: string;
+  defaultValue?: string;
+  /** Called with the colour in `format`. */
+  onValueChange?: (value: string) => void;
+  /** The format the value comes back in. */
+  format?: ColorFormat;
+  /** Offer an opacity slider. */
+  alpha?: boolean;
+  /** Colours one click away, such as the brand palette. */
+  swatches?: string[];
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  error?: React.ReactNode;
+  disabled?: boolean;
+  id?: string;
+  className?: string;
+}
+
+const WHITE: RGBA = { r: 255, g: 255, b: 255, a: 1 };
+const BLACK: RGBA = { r: 0, g: 0, b: 0, a: 1 };
+const clamp = (value: number) => Math.min(1, Math.max(0, value));
+
+/** Follow a pointer across an element from press to release, as fractions of its box. */
+function usePointerTrack(onMove: (x: number, y: number) => void) {
+  const read = (event: React.PointerEvent<HTMLElement>) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    onMove(clamp((event.clientX - box.left) / box.width), clamp((event.clientY - box.top) / box.height));
+  };
+  return {
+    onPointerDown: (event: React.PointerEvent<HTMLElement>) => {
+      if (event.button !== 0) return;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      event.currentTarget.focus();
+      read(event);
+    },
+    onPointerMove: (event: React.PointerEvent<HTMLElement>) => {
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) read(event);
+    },
+  };
+}
+
+/** A horizontal slider for hue or opacity: pointer, arrows (Shift for ten), Home and End. */
+function Track({ label, value, max, onChange, background, valueText, className }: { label: string; value: number; max: number; onChange: (value: number) => void; background: string; valueText: string; className: string }) {
+  const track = usePointerTrack((x) => onChange(x * max));
+  return (
+    <div
+      className={cx("ml-color-picker-track", className)}
+      role="slider"
+      tabIndex={0}
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={Math.round(value)}
+      aria-valuetext={valueText}
+      style={{ "--ml-color-track": background, "--ml-color-at": `${(value / max) * 100}%` } as React.CSSProperties}
+      onKeyDown={(event) => {
+        const step = (event.shiftKey ? 10 : 1) * (max / 100);
+        const keys: Record<string, number> = { ArrowRight: value + step, ArrowUp: value + step, ArrowLeft: value - step, ArrowDown: value - step, Home: 0, End: max };
+        if (event.key in keys) {
+          event.preventDefault();
+          onChange(Math.min(max, Math.max(0, keys[event.key])));
+        }
+      }}
+      {...track}
+    >
+      <span className="ml-color-picker-thumb" aria-hidden="true" />
+    </div>
+  );
+}
+
+/**
+ * A colour field: a swatch and its value that open a picker with a
+ * saturation and brightness area, hue and opacity sliders, a typed value in
+ * hex, rgb or oklch, the system eyedropper where the browser has one, preset
+ * swatches, and the colour's contrast against white and black.
+ */
+export function ColorPicker({ value, defaultValue = "#0a84ff", onValueChange, format = "hex", alpha = false, swatches, label, hint, error, disabled, id, className }: ColorPickerProps) {
+  const autoId = React.useId();
+  const fieldId = id ?? autoId;
+  const [inner, setInner] = React.useState(defaultValue);
+  const current = value ?? inner;
+  const rgba = parseColor(current) ?? parseColor(defaultValue) ?? BLACK;
+  // HSV is kept locally so hue survives greys and black, where RGB forgets it.
+  const [hsv, setHsv] = React.useState<HSVA>(() => rgbToHsv(rgba));
+  const [view, setView] = React.useState<ColorFormat>(format);
+  const [draft, setDraft] = React.useState<string | null>(null);
+  const [open, setOpen] = React.useState(false);
+  const shownHex = formatColor(rgba, "hex");
+
+  // Follow a value set from outside, unless it is the colour already shown.
+  React.useEffect(() => {
+    if (formatColor(hsvToRgb(hsv), "hex") !== shownHex) setHsv(rgbToHsv(rgba));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shownHex]);
+
+  const emit = (next: HSVA) => {
+    setHsv(next);
+    const text = formatColor(hsvToRgb(next), format);
+    if (value === undefined) setInner(text);
+    onValueChange?.(text);
+  };
+
+  const emitRgb = (next: RGBA) => {
+    const converted = rgbToHsv(next);
+    emit(converted.s === 0 || converted.v === 0 ? { ...converted, h: hsv.h } : converted);
+  };
+
+  const area = usePointerTrack((x, y) => emit({ ...hsv, s: x, v: 1 - y }));
+  const solid = formatColor({ ...rgba, a: 1 }, "hex");
+  const onWhite = contrastRatio(rgba, WHITE);
+  const onBlack = contrastRatio(rgba, BLACK);
+  const EyeDropper = typeof window !== "undefined" ? (window as unknown as { EyeDropper?: new () => { open: () => Promise<{ sRGBHex: string }> } }).EyeDropper : undefined;
+
+  const trigger = (
+    <button
+      id={fieldId}
+      type="button"
+      className="ml-input ml-color-picker-trigger"
+      disabled={disabled}
+      aria-invalid={error ? true : undefined}
+      aria-describedby={fieldDescription(fieldId, { hint, error })}
+      aria-label={`${typeof label === "string" ? label : "Colour"}: ${formatColor(rgba, format)}`}
+    >
+      <span className="ml-color-picker-swatch" style={{ "--ml-color": formatColor(rgba, "rgb") } as React.CSSProperties} aria-hidden="true" />
+      <span className="ml-color-picker-value">{formatColor(rgba, format)}</span>
+    </button>
+  );
+
+  return (
+    <Field id={fieldId} label={label} hint={hint} error={error} disabled={disabled} className={cx("ml-color-picker", className)}>
+      <Popover trigger={trigger} label={typeof label === "string" ? `Choose ${label.toLowerCase()}` : "Choose a colour"} open={open} onOpenChange={setOpen} className="ml-color-picker-popover">
+        <div className="ml-color-picker-panel">
+          <div
+            className="ml-color-picker-area"
+            role="slider"
+            tabIndex={0}
+            aria-label="Saturation and brightness"
+            aria-valuetext={`Saturation ${Math.round(hsv.s * 100)}%, brightness ${Math.round(hsv.v * 100)}%`}
+            style={{ "--ml-color-hue": `hsl(${hsv.h} 100% 50%)`, "--ml-color-x": `${hsv.s * 100}%`, "--ml-color-y": `${(1 - hsv.v) * 100}%` } as React.CSSProperties}
+            onKeyDown={(event) => {
+              const step = event.shiftKey ? 0.1 : 0.01;
+              const moves: Record<string, Partial<HSVA>> = { ArrowRight: { s: clamp(hsv.s + step) }, ArrowLeft: { s: clamp(hsv.s - step) }, ArrowUp: { v: clamp(hsv.v + step) }, ArrowDown: { v: clamp(hsv.v - step) } };
+              if (moves[event.key]) {
+                event.preventDefault();
+                emit({ ...hsv, ...moves[event.key] });
+              }
+            }}
+            {...area}
+          >
+            <span className="ml-color-picker-thumb" aria-hidden="true" style={{ background: solid }} />
+          </div>
+          <div className="ml-color-picker-sliders">
+            <Track
+              className="ml-color-picker-hue"
+              label="Hue"
+              value={hsv.h}
+              max={360}
+              valueText={`${Math.round(hsv.h)} degrees`}
+              background="linear-gradient(90deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00)"
+              onChange={(h) => emit({ ...hsv, h })}
+            />
+            {alpha ? (
+              <Track
+                className="ml-color-picker-alpha"
+                label="Opacity"
+                value={hsv.a * 100}
+                max={100}
+                valueText={`${Math.round(hsv.a * 100)}%`}
+                background={`linear-gradient(90deg, transparent, ${solid})`}
+                onChange={(a) => emit({ ...hsv, a: a / 100 })}
+              />
+            ) : null}
+          </div>
+          <div className="ml-color-picker-row">
+            <button type="button" className="ml-color-picker-format" aria-label={`Format: ${view}. Switch`} onClick={() => setView(view === "hex" ? "rgb" : view === "rgb" ? "oklch" : "hex")}>
+              {view.toUpperCase()}
+            </button>
+            <input
+              className="ml-color-picker-text"
+              aria-label={`Colour as ${view}`}
+              value={draft ?? formatColor(rgba, view)}
+              spellCheck={false}
+              onChange={(event) => {
+                setDraft(event.target.value);
+                const parsed = parseColor(event.target.value);
+                if (parsed) emitRgb(alpha ? parsed : { ...parsed, a: 1 });
+              }}
+              onBlur={() => setDraft(null)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") setDraft(null);
+              }}
+            />
+            {EyeDropper ? (
+              <button
+                type="button"
+                className="ml-color-picker-eyedropper"
+                aria-label="Pick a colour from the screen"
+                onClick={async () => {
+                  try {
+                    const result = await new EyeDropper().open();
+                    const parsed = parseColor(result.sRGBHex);
+                    if (parsed) emitRgb(parsed);
+                  } catch {
+                    // The reader pressed Escape.
+                  }
+                }}
+              >
+                <IconPen aria-hidden="true" size="1em" />
+              </button>
+            ) : null}
+          </div>
+          {swatches?.length ? (
+            <div className="ml-color-picker-swatches" role="group" aria-label="Presets">
+              {swatches.map((swatch) => {
+                const parsed = parseColor(swatch);
+                if (!parsed) return null;
+                const hex = formatColor(parsed, "hex");
+                return (
+                  <button
+                    key={swatch}
+                    type="button"
+                    className="ml-color-picker-preset"
+                    aria-label={hex}
+                    aria-pressed={hex === shownHex}
+                    style={{ "--ml-color": hex } as React.CSSProperties}
+                    onClick={() => emitRgb(parsed)}
+                  />
+                );
+              })}
+            </div>
+          ) : null}
+          <p className="ml-color-picker-contrast">
+            <span className="ml-color-picker-sample" style={{ "--ml-color": solid, color: onWhite >= onBlack ? "#fff" : "#000" } as React.CSSProperties} aria-hidden="true">
+              Aa
+            </span>
+            <span>
+              {onWhite.toFixed(1)}:1 on white <b data-pass={onWhite >= 4.5 || undefined}>{onWhite >= 4.5 ? "AA" : onWhite >= 3 ? "AA large" : "Fails"}</b>
+            </span>
+            <span>
+              {onBlack.toFixed(1)}:1 on black <b data-pass={onBlack >= 4.5 || undefined}>{onBlack >= 4.5 ? "AA" : onBlack >= 3 ? "AA large" : "Fails"}</b>
+            </span>
+          </p>
+        </div>
+      </Popover>
+    </Field>
+  );
+}