@setsquare/ui 0.1.0

package/dist/styles/tokens.css

@@ -0,0 +1,295 @@
+/* @setsquare/ui tokens — generated from tokens/tokens.json by scripts/build-css.mjs. Do not edit. */
+/* <html data-conformance="aa|aaa" class="dark?"> picks one of four themes. */
+:root {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-full: 9999px;
+  --target-min-aa: 24px;
+  --target-min-aaa: 44px;
+  --target-floor: 24px;
+  --control-height-aa: 36px;
+  --control-height-aaa: 36px;
+  --control-height-sm-aa: 28px;
+  --control-height-sm-aaa: 28px;
+  --control-height-lg-aa: 44px;
+  --control-height-lg-aaa: 44px;
+  --control-pad-x-aa: 12px;
+  --control-pad-x-aaa: 12px;
+  --control-gap-aa: 8px;
+  --control-gap-aaa: 12px;
+  --nav-item-height-aa: 36px;
+  --nav-item-height-aaa: 36px;
+  --nav-item-gap-aa: 2px;
+  --nav-item-gap-aaa: 4px;
+  --choice-size-aa: 20px;
+  --choice-size-aaa: 20px;
+  --field-gap-aa: 20px;
+  --field-gap-aaa: 28px;
+  --toast-timeout-aa: 8000ms;
+  --toast-timeout-aaa: 0ms;
+  --focus-width-aa: 2px;
+  --focus-width-aaa: 3px;
+  --focus-offset: 2px;
+  --paragraph-gap-aa: 1em;
+  --paragraph-gap-aaa: 1.5lh;
+  --measure-aa: 75ch;
+  --measure-aaa: 64ch;
+  --motion-distance-aa: 8px;
+  --motion-distance-aaa: 0px;
+  --header-height-aa: 56px;
+  --header-height-aaa: 56px;
+  --sidebar-width-aa: 256px;
+  --sidebar-width-aaa: 256px;
+  --sidebar-width-collapsed-aa: 56px;
+  --sidebar-width-collapsed-aaa: 72px;
+  --rail-width-aa: 72px;
+  --rail-width-aaa: 88px;
+  --subnav-width-aa: 224px;
+  --subnav-width-aaa: 240px;
+  --panel-width-aa: 320px;
+  --panel-width-aaa: 360px;
+  --gutter: 24px;
+  --content-max: 1440px;
+  --site-max: 1180px;
+  --site-max-narrow: 768px;
+  --site-gutter: clamp(20px, calc(3.2 * var(--site-vw, 1vw)), 44px);
+  --section-y: clamp(56px, calc(7 * var(--site-vw, 1vw)), 112px);
+  --section-y-tight: clamp(40px, calc(5 * var(--site-vw, 1vw)), 80px);
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1280px;
+  --duration-fast: 120ms;
+  --duration-exit: 150ms;
+  --duration-enter: 210ms;
+  --duration-panel: 200ms;
+  --duration-loading-delay: 400ms;
+  --duration-spin: 900ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --z-header: 30;
+  --z-sidebar: 40;
+  --z-sheet: 50;
+  --z-popover: 60;
+  --font-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --target-min: var(--target-min-aa);
+  --control-height: var(--control-height-aa);
+  --control-height-sm: var(--control-height-sm-aa);
+  --control-height-lg: var(--control-height-lg-aa);
+  --control-pad-x: var(--control-pad-x-aa);
+  --control-gap: var(--control-gap-aa);
+  --nav-item-height: var(--nav-item-height-aa);
+  --nav-item-gap: var(--nav-item-gap-aa);
+  --choice-size: var(--choice-size-aa);
+  --field-gap: var(--field-gap-aa);
+  --toast-timeout: var(--toast-timeout-aa);
+  --focus-width: var(--focus-width-aa);
+  --paragraph-gap: var(--paragraph-gap-aa);
+  --measure: var(--measure-aa);
+  --motion-distance: var(--motion-distance-aa);
+  --header-height: var(--header-height-aa);
+  --sidebar-width: var(--sidebar-width-aa);
+  --sidebar-width-collapsed: var(--sidebar-width-collapsed-aa);
+  --rail-width: var(--rail-width-aa);
+  --subnav-width: var(--subnav-width-aa);
+  --panel-width: var(--panel-width-aa);
+}
+:root[data-conformance="aaa"] {
+  --target-min: var(--target-min-aaa);
+  --control-height: var(--control-height-aaa);
+  --control-height-sm: var(--control-height-sm-aaa);
+  --control-height-lg: var(--control-height-lg-aaa);
+  --control-pad-x: var(--control-pad-x-aaa);
+  --control-gap: var(--control-gap-aaa);
+  --nav-item-height: var(--nav-item-height-aaa);
+  --nav-item-gap: var(--nav-item-gap-aaa);
+  --choice-size: var(--choice-size-aaa);
+  --field-gap: var(--field-gap-aaa);
+  --toast-timeout: var(--toast-timeout-aaa);
+  --focus-width: var(--focus-width-aaa);
+  --paragraph-gap: var(--paragraph-gap-aaa);
+  --measure: var(--measure-aaa);
+  --motion-distance: var(--motion-distance-aaa);
+  --header-height: var(--header-height-aaa);
+  --sidebar-width: var(--sidebar-width-aaa);
+  --sidebar-width-collapsed: var(--sidebar-width-collapsed-aaa);
+  --rail-width: var(--rail-width-aaa);
+  --subnav-width: var(--subnav-width-aaa);
+  --panel-width: var(--panel-width-aaa);
+}
+@media (prefers-reduced-motion: reduce) { :root { --motion-distance: 0px; } }
+
+/* Light · AA */
+:root {
+  --brand: #2f47c9;
+  --brand-subtle: #eceffc;
+  --background: #ffffff;
+  --foreground: #161a1f;
+  --card: #ffffff;
+  --card-foreground: var(--foreground);
+  --popover: #ffffff;
+  --popover-foreground: var(--foreground);
+  --muted: #f2f4f6;
+  --muted-foreground: #59626d;
+  --secondary: #eceff3;
+  --secondary-foreground: var(--foreground);
+  --accent: #e7ebf0;
+  --accent-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: #ffffff;
+  --border: #e0e4e9;
+  --input: #7a838e;
+  --ring: var(--brand);
+  --destructive: #bf2a2a;
+  --destructive-foreground: #ffffff;
+  --destructive-subtle: #fdecec;
+  --success: #0a6f61;
+  --success-subtle: #e2f4f0;
+  --warning: #8a4f00;
+  --warning-subtle: #fdf0da;
+  --overlay: #0c0e1166;
+  --sidebar: #f6f7f9;
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--brand);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: #e8ebf0;
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --shadow-sm: 0 1px 2px #161a1f0f, 0 1px 3px #161a1f14;
+  --shadow-lg: 0 4px 8px #161a1f14, 0 16px 32px -4px #161a1f29;
+}
+
+/* Dark · AA */
+:root.dark {
+  --brand: #8fa3ff;
+  --brand-subtle: #1b2246;
+  --background: #0e1116;
+  --foreground: #e7eaee;
+  --card: #151a21;
+  --card-foreground: var(--foreground);
+  --popover: #1a2029;
+  --popover-foreground: var(--foreground);
+  --muted: #1b212a;
+  --muted-foreground: #9ba5b1;
+  --secondary: #202731;
+  --secondary-foreground: var(--foreground);
+  --accent: #232b36;
+  --accent-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: #0e1116;
+  --border: #28303a;
+  --input: #6b7582;
+  --ring: var(--brand);
+  --destructive: #f47a70;
+  --destructive-foreground: #0e1116;
+  --destructive-subtle: #3a1616;
+  --success: #4fd3b8;
+  --success-subtle: #0f2c27;
+  --warning: #f0b45c;
+  --warning-subtle: #2f230f;
+  --overlay: #000000a6;
+  --sidebar: #11151b;
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--brand);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: #1f2630;
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --shadow-sm: 0 1px 3px #000000a6;
+  --shadow-lg: 0 16px 32px -4px #000000cc;
+}
+
+/* Light · AAA */
+:root[data-conformance="aaa"] {
+  --brand: #22369f;
+  --brand-subtle: #e6eafb;
+  --background: #ffffff;
+  --foreground: #0c0e11;
+  --card: #ffffff;
+  --card-foreground: var(--foreground);
+  --popover: #ffffff;
+  --popover-foreground: var(--foreground);
+  --muted: #f1f3f5;
+  --muted-foreground: #3c444e;
+  --secondary: #e9ecf0;
+  --secondary-foreground: var(--foreground);
+  --accent: #e3e7ec;
+  --accent-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: #ffffff;
+  --border: #7f8792;
+  --input: #5d6570;
+  --ring: var(--brand);
+  --destructive: #8c1818;
+  --destructive-foreground: #ffffff;
+  --destructive-subtle: #fbe7e7;
+  --success: #06544a;
+  --success-subtle: #ddf1ec;
+  --warning: #663a00;
+  --warning-subtle: #fcecd2;
+  --overlay: #0c0e1180;
+  --sidebar: #f4f6f8;
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--brand);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: #e3e7ec;
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --shadow-sm: none;
+  --shadow-lg: 0 4px 8px #0c0e1129, 0 16px 32px -4px #0c0e1140;
+}
+
+/* Dark · AAA */
+:root[data-conformance="aaa"].dark {
+  --brand: #b0beff;
+  --brand-subtle: #1a2148;
+  --background: #07090c;
+  --foreground: #f5f7f9;
+  --card: #0e1217;
+  --card-foreground: var(--foreground);
+  --popover: #12171e;
+  --popover-foreground: var(--foreground);
+  --muted: #151a21;
+  --muted-foreground: #c5ccd4;
+  --secondary: #1a2029;
+  --secondary-foreground: var(--foreground);
+  --accent: #1f2630;
+  --accent-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: #07090c;
+  --border: #6c7580;
+  --input: #8c96a3;
+  --ring: var(--brand);
+  --destructive: #ffa39b;
+  --destructive-foreground: #07090c;
+  --destructive-subtle: #3a1313;
+  --success: #86e6d0;
+  --success-subtle: #0d2a25;
+  --warning: #f8cd8c;
+  --warning-subtle: #2c200c;
+  --overlay: #000000b3;
+  --sidebar: #0b0e12;
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--brand);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: #1b222b;
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --shadow-sm: none;
+  --shadow-lg: 0 16px 32px -4px #000000e6;
+}

package/dist/testing/index.d.ts

@@ -0,0 +1,321 @@
+/**
+ * @setsquare/ui/testing — checks on a rendered page, for use in Playwright (or anything with a
+ * `page.evaluate`). They look at what the browser actually laid out, so they find what the lint rules cannot:
+ * a wrapper without `relative`, a third-party widget, CSS from elsewhere.
+ *
+ * - Positioning: `findUncontainedPositioning`, `findHiddenOverflowScrolls`, `expectPositioningContained`.
+ * - Targets: `findSmallTargets`, `findOverlappingTargets`, `expectTargetsSized` — the target is the element a
+ *   pointer hits (Layer 1), measured as laid out, not the paint inside it.
+ * - Focus: `findInvisibleFocus`, `expectFocusVisible` — every control a keyboard reaches must change on screen
+ *   when it takes focus. These take screenshots, so they need a Playwright page.
+ * - Links: `findUndistinguishedLinks`, `expectLinksDistinguished` — a link in running text must be findable
+ *   without colour (WCAG's F73 and G183), or with `{ underline: true }`, underlined.
+ * - Cursors: `findCursorMismatches`, `expectCursorsMatch` — one cursor rule on every target: the pointer on
+ *   what is pressed, the I-beam on text entry, not-allowed when disabled. These hover, so they need a page
+ *   with a mouse.
+ * - Reflow: `findPageOverflow`, `expectPageReflows` — at the width the page is laid out at, nothing makes it
+ *   scroll sideways or runs off its edge, apart from content in a scroller of its own.
+ * - Text spacing: `findClippedText`, `expectTextUnclipped` — with WCAG 1.4.12's four spacing metrics applied,
+ *   no text is cut off by its box or spills out of one.
+ * - Motion: `findEndlessAnimations`, `expectAnimationsPausable` — nothing moves for more than five seconds
+ *   unless a visible control on the page pauses it.
+ *
+ * The DOM scans are self-contained functions: `page.evaluate(findSmallTargets)` runs them in the page.
+ * Nothing here imports Playwright.
+ */
+export interface UncontainedElement {
+    /** The absolutely positioned element, described as `tag#id.class "name"`. */
+    element: string;
+    /** What it is: React Aria's hidden input, sr-only text, something focusable, or something else. */
+    kind: 'hidden-input' | 'sr-only' | 'focusable' | 'other';
+    /** Its nearest scroll container. */
+    scroller: string;
+    /** The positioned ancestor it is laid out against — outside the scroller, which is the bug. */
+    containingBlock: string;
+}
+/**
+ * Every `position: absolute` element whose containing block lies outside its nearest scroll container
+ * (`overflow: auto | scroll`). Such an element does not scroll with the content it belongs to, and scrolling
+ * it into view scrolls an ancestor instead. Returns [] when the page is clean.
+ */
+export declare function findUncontainedPositioning(root?: ParentNode): UncontainedElement[];
+export interface HiddenOverflowScroll {
+    /** What was focused or brought into view. */
+    trigger: string;
+    /** The overflow:hidden element that scrolled — people cannot scroll it back. */
+    scrolled: string;
+    x: number;
+    y: number;
+}
+/**
+ * Focus every focusable element, and bring every absolutely positioned element into view the way a screen
+ * reader's cursor or find-in-page would (so not a decorative, aria-hidden one with no text), with each scroll
+ * container scrolled first to its start and then to its
+ * end. Reports every time an `overflow: hidden` element scrolled as a result: content that moved with no way
+ * to scroll it back, which is the blank space at the bottom of the page. Restores scroll positions and focus.
+ */
+export declare function findHiddenOverflowScrolls(root?: ParentNode): HiddenOverflowScroll[];
+/** Anything with Playwright's `page.evaluate`. */
+export interface Evaluates {
+    evaluate<R, A>(fn: (arg: A) => R | Promise<R>, arg: A): Promise<R>;
+}
+export interface PositioningReport {
+    uncontained: UncontainedElement[];
+    hiddenOverflowScrolls: HiddenOverflowScroll[];
+}
+/** Runs both scans in the page. */
+export declare function checkPositioning(page: Evaluates): Promise<PositioningReport>;
+/**
+ * Throws, listing every finding, unless the page is clean. Use it after the page reaches the state you want to
+ * check — open the panel, show the errors — since only what is rendered can be checked.
+ *
+ * ```ts
+ * import { expectPositioningContained } from '@setsquare/ui/testing';
+ * test('settings', async ({ page }) => { await page.goto('/settings'); await expectPositioningContained(page); });
+ * ```
+ */
+export declare function expectPositioningContained(page: Evaluates): Promise<void>;
+export interface TargetFinding {
+    /** The target, described as `tag#id.class "name"`. */
+    element: string;
+    width: number;
+    height: number;
+}
+export interface SmallTargetOptions {
+    /** Minimum size in CSS px. Default: the page's --target-min (24px at AA, 44px at AAA). */
+    min?: number;
+    /** Targets to leave out, such as ones covered by the Equivalent exception. */
+    ignore?: string;
+}
+/**
+ * Every pointer target smaller than the minimum in either axis. A target is an interactive element as laid
+ * out — for a visually hidden input (React Aria's checkbox, radio, switch, slider), the control around it that
+ * a pointer actually hits. Disabled, hidden and aria-hidden elements are skipped, and so are inline elements
+ * (display: inline), which is how this approximates the Inline exception for links in a sentence.
+ * Returns [] when every target is big enough.
+ */
+export declare function findSmallTargets(options?: SmallTargetOptions, root?: ParentNode): TargetFinding[];
+export interface OverlapFinding {
+    a: string;
+    b: string;
+    /** Overlapping area in CSS px². WCAG leaves it out of both targets' size. */
+    area: number;
+}
+/**
+ * Pairs of targets whose boxes overlap on screen, where neither contains the other. WCAG's definition of
+ * target leaves the overlapping area out of the measurement, so an overlap can take a target below its
+ * minimum even when its box is big enough. Three-layer controls keep the target in the layout, so they don't
+ * overlap by construction; this finds targets made bigger with an overlay or a negative margin. Only what is
+ * on screen is compared (something scrolled or translated out of view overlaps nothing), and only within one
+ * layer: a toast or popover over the page is left to the focus-obscured checks.
+ */
+export declare function findOverlappingTargets(root?: ParentNode): OverlapFinding[];
+/** Throws, listing every finding, unless every target meets the minimum and no two targets overlap. */
+export declare function expectTargetsSized(page: Evaluates, options?: SmallTargetOptions): Promise<void>;
+/** What `findInvisibleFocus` needs from a page: Playwright's `Page` has all of it. */
+export interface ScreenshotPage extends Evaluates {
+    keyboard: {
+        press(key: string): Promise<void>;
+    };
+    screenshot(options: {
+        clip: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+        animations?: 'disabled' | 'allow';
+        caret?: 'hide' | 'initial';
+    }): Promise<Uint8Array>;
+}
+export interface InvisibleFocus {
+    element: string;
+    /**
+     * `unchanged`: the pixels around it were the same focused and not. `offscreen`: it could not be seen at all.
+     * `trapped`: focus could not be moved off it (the only control in a modal), so there was nothing to compare
+     * against — not a failure, but not checked either.
+     */
+    reason: 'unchanged' | 'offscreen' | 'trapped';
+}
+export interface FocusVisibleOptions {
+    /** CSS px of surrounding page to include, for rings drawn outside the control. Default 8. */
+    pad?: number;
+    /**
+     * Elements not to check, such as a demo that paints its focus ring all the time, or parts checked on another
+     * page. Focus can still move to them while the others are checked.
+     */
+    ignore?: string;
+}
+/**
+ * Focuses every control a keyboard can reach, one at a time, and compares a screenshot of it (and `pad` px
+ * around it) with focus on it and with focus somewhere else. An element whose pixels do not change has no
+ * visible focus indicator, which fails WCAG 2.4.7. "Somewhere else" is another control far from this one —
+ * not the page body, because a modal dialog or menu would pull focus straight back. Tooltips are hidden, and
+ * transitions, animations and the text caret are turned off, so only the indicator can make the difference.
+ * This is the check that finds a ring styled on an element that never receives focus.
+ */
+export declare function findInvisibleFocus(page: ScreenshotPage, options?: FocusVisibleOptions): Promise<InvisibleFocus[]>;
+/** Throws, listing every control whose focus cannot be seen, unless there are none. `trapped` ones are skipped. */
+export declare function expectFocusVisible(page: ScreenshotPage, options?: FocusVisibleOptions): Promise<void>;
+export interface LinkFinding {
+    /** The link, described as `tag "text"`. */
+    element: string;
+    /** Contrast ratio between the link's colour and the text around it, to two decimals. */
+    contrast: number;
+    /**
+     * `colour-only`: nothing but colour tells it from the text around it, and at under 3:1 (G183's threshold)
+     * — WCAG's F73 failure. `no-underline`: only with `{ underline: true }`, a link that WCAG accepts (bold,
+     * italic or 3:1) but that has no underline.
+     */
+    reason: 'colour-only' | 'no-underline';
+}
+export interface LinkOptions {
+    /**
+     * Require an underline on every link in running text, which is this package's rule (brand colour is under
+     * 3:1 against body text in every theme). Default false: accept anything WCAG does — an underline or border,
+     * bold, italic, or colour at 3:1 or more against the text around it.
+     */
+    underline?: boolean;
+    /** Links to leave out. */
+    ignore?: string;
+}
+/**
+ * Every link in running text that people who can't tell the colours apart could not find. A link counts as
+ * in running text when it is laid out inline and the block around it has words of its own — so navigation,
+ * lists of links and link buttons are left alone, as WCAG's F73 leaves them. A link passes on an underline or
+ * bottom border the text around it doesn't have, a heavier weight (600+ against 200 lighter), italics the
+ * text around it doesn't have, or a colour at least 3:1 against that text (G183). Returns [] when every link
+ * is distinguished.
+ */
+export declare function findUndistinguishedLinks(options?: LinkOptions, root?: ParentNode): LinkFinding[];
+/** Throws, listing every finding, unless every link in running text can be told apart without colour. */
+export declare function expectLinksDistinguished(page: Evaluates, options?: LinkOptions): Promise<void>;
+/** What `findCursorMismatches` needs from a page: Playwright's `Page` has all of it. */
+export interface HoverPage extends Evaluates {
+    mouse: {
+        move(x: number, y: number): Promise<void>;
+    };
+}
+/**
+ * What each kind of target shows. `press`: anything pressed — buttons, links, checkboxes, options, menu
+ * items, selectable rows, sortable column headers. `text`: text entry — inputs, textareas, date segments.
+ * `drag`: a slider thumb. `disabled`, `pending` (a button waiting on its action), `readonly` (a checkbox that
+ * can't change), and `current` (the current page in breadcrumbs, disabled because it is where you are).
+ */
+export type CursorKind = 'press' | 'text' | 'drag' | 'disabled' | 'pending' | 'readonly' | 'current';
+export interface CursorOptions {
+    /**
+     * The cursors each kind may show. Defaults: press `pointer`; text `text` or `auto` (which is the I-beam
+     * over editable text); drag `grab`; disabled `not-allowed`; pending `wait` or `progress`; readonly and
+     * current `default`. `false` leaves a kind unchecked — `{ press: ['default'] }` checks a product that keeps
+     * the arrow on buttons, as Tailwind's own reset does.
+     */
+    expect?: Partial<Record<CursorKind, string[] | false>>;
+    /** Targets to leave out. */
+    ignore?: string;
+}
+export interface CursorFinding {
+    element: string;
+    kind: CursorKind;
+    expected: string[];
+    /** Each cursor that was not expected, and where it showed: the centre or an edge of the target. */
+    actual: {
+        cursor: string;
+        at: 'centre' | 'edge';
+    }[];
+}
+/**
+ * Hovers every target and reads the cursor at its centre and just inside each corner — the whole of Layer 1,
+ * not only the paint — so a child that resets the cursor, or a target whose edge still shows the arrow, is
+ * found. Hovering first means states that only appear on hover (React Aria's data-hovered) count. Points
+ * covered by another target (a checkbox in a row) are that target's, and are checked on its own turn. A
+ * visually hidden input stands for its label (a checkbox, radio or switch) or, for a range input, the thumb
+ * around it; one with neither (a drop zone's hidden button) has no pointer target and is skipped. No WCAG
+ * criterion covers the cursor: this checks that one rule is applied everywhere.
+ */
+export declare function findCursorMismatches(page: HoverPage, options?: CursorOptions): Promise<CursorFinding[]>;
+/** Throws, listing every target whose cursor breaks the rule, unless there are none. */
+export declare function expectCursorsMatch(page: HoverPage, options?: CursorOptions): Promise<void>;
+export interface PageOverflow {
+    /** The element that reaches past the page's right edge, described as `tag#id.class "name"`. */
+    element: string;
+    /**
+     * `scrolls`: the page scrolls sideways because of it. `clipped`: an `overflow: hidden` or `clip` box that
+     * runs to the edge of the page cuts it off, so part of it can't be seen or scrolled to.
+     */
+    reason: 'scrolls' | 'clipped';
+    /** How far past the right edge it reaches, in CSS px. */
+    by: number;
+}
+export interface PageOverflowOptions {
+    /** Elements to leave out. */
+    ignore?: string;
+}
+/**
+ * Everything that reaches past the right edge of the page at the width it is laid out at: set the viewport
+ * to 320px to check WCAG 1.4.10's reflow width. Content inside its own scroll container (a `ScrollRegion`,
+ * a code block, a data table) is left alone as long as the scroller itself fits, since it scrolls on its own
+ * and the page doesn't; so is content an ancestor clips inside the page, which is that component's business.
+ * `clipped` is only reported for something with words or media in it, so a decorative glow bleeding off the
+ * edge isn't. Fixed-position elements are left out. Only the outermost culprit is reported. Returns [] when
+ * the page fits.
+ */
+export declare function findPageOverflow(options?: PageOverflowOptions, root?: ParentNode): PageOverflow[];
+/** Throws, listing every finding, unless the page fits its width. Set the viewport first: 320px for reflow. */
+export declare function expectPageReflows(page: Evaluates, options?: PageOverflowOptions): Promise<void>;
+export interface ClippedText {
+    /** The box the text no longer fits, described as `tag#id.class "name"`. */
+    element: string;
+    /**
+     * `clipped`: the box is `overflow: hidden` or `clip` (or truncates with an ellipsis), so the text is cut
+     * off. `overflows`: the box has a set size and shows its overflow, so the text spills over what follows.
+     */
+    reason: 'clipped' | 'overflows';
+    /** How much further the content runs past the box than it did before the spacing was applied, in CSS px. */
+    x: number;
+    y: number;
+}
+export interface TextSpacingOptions {
+    /** Elements to leave out. */
+    ignore?: string;
+}
+/**
+ * Applies WCAG 1.4.12's four text-spacing metrics to the whole page — line height 1.5, paragraph spacing
+ * 2em, letter spacing 0.12em, word spacing 0.16em, the way a user's stylesheet or bookmarklet would — and
+ * reports every box whose content now runs out of it further than it did before. Measuring the difference
+ * leaves alone anything that was already clipped on purpose (visually hidden text, a decorative bleed).
+ * Scroll containers are left out too, since their content can still be scrolled to, and so is text that
+ * spills from a box inside a scroller that scrolls that way (code in a code block). Only the innermost box
+ * is reported. Takes the spacing off again before returning. Returns [] when everything still fits.
+ */
+export declare function findClippedText(options?: TextSpacingOptions, root?: ParentNode): ClippedText[];
+/** Throws, listing every finding, unless all the text still fits with WCAG 1.4.12's spacing applied. */
+export declare function expectTextUnclipped(page: Evaluates, options?: TextSpacingOptions): Promise<void>;
+export interface EndlessAnimation {
+    /** What moves, described as `tag#id.class "name"`, with a pseudo-element when it is one. */
+    element: string;
+    /** The CSS animation's name, `transition: <property>`, `script` for a Web Animation, or `video`. */
+    animation: string;
+    /** How long it runs, in ms: `Infinity` for one that repeats forever. */
+    duration: number;
+}
+export interface AnimationOptions {
+    /** The longest anything may move without a pause control, in ms. Default 5000, WCAG 2.2.2's five seconds. */
+    max?: number;
+    /** Elements to leave out, such as a loading indicator. */
+    ignore?: string;
+}
+/**
+ * Everything moving on the page that runs longer than `max` (or forever) with no visible control to pause
+ * it. It reads `document.getAnimations()` — CSS animations, CSS transitions and Web Animations that are
+ * running now — and every `<video>` that is playing without its own `controls`. Something counts as paused
+ * by a control when it sits inside an element whose `id` a visible button on the page names in
+ * `data-pauses`; `aria-controls` doesn't count, since a menu button names its panel that way. It can't see
+ * motion drawn by `requestAnimationFrame`, SVG (SMIL)
+ * animation, animated images or canvas, and it only sees what is running when it is called, so call it once
+ * the page has settled and again in each state that starts something. Returns [] when nothing qualifies.
+ */
+export declare function findEndlessAnimations(options?: AnimationOptions, root?: ParentNode): EndlessAnimation[];
+/** Throws, listing every finding, unless everything that moves for longer than `max` can be paused. */
+export declare function expectAnimationsPausable(page: Evaluates, options?: AnimationOptions): Promise<void>;
+//# sourceMappingURL=index.d.ts.map

package/dist/testing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/testing/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,MAAM,WAAW,kBAAkB;IACjC,6EAA6E;IAC7E,OAAO,EAAE,MAAM,CAAC;IAChB,mGAAmG;IACnG,IAAI,EAAE,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IACzD,oCAAoC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,+FAA+F;IAC/F,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,IAAI,GAAE,UAAqB,GAAG,kBAAkB,EAAE,CAmE5F;AAED,MAAM,WAAW,oBAAoB;IACnC,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,GAAE,UAAqB,GAAG,oBAAoB,EAAE,CAkG7F;AAED,kDAAkD;AAClD,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,kBAAkB,EAAE,CAAC;IAClC,qBAAqB,EAAE,oBAAoB,EAAE,CAAC;CAC/C;AAED,mCAAmC;AACnC,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAUlF;AAED;;;;;;;;GAQG;AACH,wBAAsB,0BAA0B,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,CAgB/E;AAMD,MAAM,WAAW,aAAa;IAC5B,sDAAsD;IACtD,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,0FAA0F;IAC1F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,kBAAuB,EAChC,IAAI,GAAE,UAAqB,GAC1B,aAAa,EAAE,CA4DjB;AAED,MAAM,WAAW,cAAc;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,GAAE,UAAqB,GAAG,cAAc,EAAE,CA+EpF;AAED,uGAAuG;AACvG,wBAAsB,kBAAkB,CACtC,IAAI,EAAE,SAAS,EACf,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAcf;AAID,sFAAsF;AACtF,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,QAAQ,EAAE;QAAE,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;KAAE,CAAC;IAChD,UAAU,CAAC,OAAO,EAAE;QAClB,IAAI,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QAC9D,UAAU,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;QAClC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;KAC5B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,MAAM,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,CAAC;CAC/C;AAED,MAAM,WAAW,mBAAmB;IAClC,6FAA6F;IAC7F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAWD;;;;;;;GAOG;AACH,wBAAsB,kBAAkB,CACtC,IAAI,EAAE,cAAc,EACpB,OAAO,GAAE,mBAAwB,GAChC,OAAO,CAAC,cAAc,EAAE,CAAC,CAqK3B;AAED,mHAAmH;AACnH,wBAAsB,kBAAkB,CACtC,IAAI,EAAE,cAAc,EACpB,OAAO,GAAE,mBAAwB,GAChC,OAAO,CAAC,IAAI,CAAC,CAaf;AAID,MAAM,WAAW,WAAW;IAC1B,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,wFAAwF;IACxF,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,MAAM,EAAE,aAAa,GAAG,cAAc,CAAC;CACxC;AAED,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,GAAE,WAAgB,EACzB,IAAI,GAAE,UAAqB,GAC1B,WAAW,EAAE,CAuGf;AAED,yGAAyG;AACzG,wBAAsB,wBAAwB,CAC5C,IAAI,EAAE,SAAS,EACf,OAAO,GAAE,WAAgB,GACxB,OAAO,CAAC,IAAI,CAAC,CAaf;AAID,wFAAwF;AACxF,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,KAAK,EAAE;QAAE,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;KAAE,CAAC;CACtD;AAED;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,MAAM,GACN,MAAM,GACN,UAAU,GACV,SAAS,GACT,UAAU,GACV,SAAS,CAAC;AAEd,MAAM,WAAW,aAAa;IAC5B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;IACvD,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,mGAAmG;IACnG,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CACrD;AAQD;;;;;;;;GAQG;AACH,wBAAsB,oBAAoB,CACxC,IAAI,EAAE,SAAS,EACf,OAAO,GAAE,aAAkB,GAC1B,OAAO,CAAC,aAAa,EAAE,CAAC,CAoJ1B;AAED,wFAAwF;AACxF,wBAAsB,kBAAkB,CACtC,IAAI,EAAE,SAAS,EACf,OAAO,GAAE,aAAkB,GAC1B,OAAO,CAAC,IAAI,CAAC,CAYf;AAID,MAAM,WAAW,YAAY;IAC3B,+FAA+F;IAC/F,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,EAAE,SAAS,GAAG,SAAS,CAAC;IAC9B,yDAAyD;IACzD,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,mBAAwB,EACjC,IAAI,GAAE,UAAqB,GAC1B,YAAY,EAAE,CA8EhB;AAED,+GAA+G;AAC/G,wBAAsB,iBAAiB,CACrC,IAAI,EAAE,SAAS,EACf,OAAO,GAAE,mBAAwB,GAChC,OAAO,CAAC,IAAI,CAAC,CAaf;AAID,MAAM,WAAW,WAAW;IAC1B,2EAA2E;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,4GAA4G;IAC5G,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,kBAAkB;IACjC,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,OAAO,GAAE,kBAAuB,EAChC,IAAI,GAAE,UAAqB,GAC1B,WAAW,EAAE,CAyEf;AAED,wGAAwG;AACxG,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,SAAS,EACf,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAYf;AAID,MAAM,WAAW,gBAAgB;IAC/B,4FAA4F;IAC5F,OAAO,EAAE,MAAM,CAAC;IAChB,oGAAoG;IACpG,SAAS,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,6GAA6G;IAC7G,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,GAAE,gBAAqB,EAC9B,IAAI,GAAE,UAAqB,GAC1B,gBAAgB,EAAE,CAgEpB;AAED,uGAAuG;AACvG,wBAAsB,wBAAwB,CAC5C,IAAI,EAAE,SAAS,EACf,OAAO,GAAE,gBAAqB,GAC7B,OAAO,CAAC,IAAI,CAAC,CAYf"}