@react-x11/components 0.11.0 → 0.13.0

package/src/html/css/cascade.ts

@@ -48,7 +48,9 @@ import type { FontFamilies } from '../fonts.js';
 import { parseDeclarations } from './parse.js';
 import { CounterStyles, counterStyleRule } from './counter-styles.js';
 import type { CounterStyleRule } from './counter-styles.js';
+import { PALETTE_CHROME } from './ua.js';
 import type { UnitContext } from './values.js';
+import { viewportUnit } from './values.js';
 import { customProperties, substituteIn } from './vars.js';
 import type { CustomProps } from './vars.js';
 
@@ -92,6 +94,41 @@ export interface SharedStyle {
   key: number;
 }
 
+/**
+ * The styles of the build before, for a build that only some elements'
+ * styles can differ in (`Cascade.beginSharing`): what each element's came
+ * to, and the elements to style again — `restyle`, each with everything in
+ * it, since a style is its parent's and the rules', and a rule reads an
+ * element's ancestors.
+ */
+export interface KeptStyles {
+  styles: ReadonlyMap<Element, { style: ComputedStyle; inFlex: boolean }>;
+  restyle: ReadonlySet<Element>;
+}
+
+/** What the pointer entering or leaving an element can change
+ *  (`Cascade.hoverTouches`): nothing, the element and what is in it, or
+ *  those and the siblings after it. */
+export type HoverTouch = 0 | 1 | 2;
+export const HOVER_UNTOUCHED = 0;
+export const HOVER_TOUCHED = 1;
+export const HOVER_FOLLOWED = 2;
+
+/** Which pseudo-elements' rules test the pointer (`Cascade.hoverPseudo`). */
+export const HOVER_PSEUDO_NONE = 0;
+export const HOVER_PSEUDO_GENERATED = 1;
+export const HOVER_PSEUDO_OTHER = 2;
+
+/** The pseudo-elements a pointer move can restyle: `::selection`'s style
+ *  is worked out as a selection is painted. */
+const POINTER_PSEUDO_ELEMENTS = [
+  'before',
+  'after',
+  'first-letter',
+  'first-line',
+  'marker',
+] as const;
+
 /** A compiled matcher, kept beside the rule it came from. */
 interface IndexedRule {
   rule: StyleRule;
@@ -131,6 +168,11 @@ class RuleIndex {
   /** Whether any rule in here is pointer-sensitive, so the renderer knows
    *  whether a pointer move can change the cascade at all. */
   hoverSensitive = false;
+  /** The rules that test `:hover`, in buckets of their own: the ones whose
+   *  answers a pointer move can change, which is all that is asked to know
+   *  whether an element's did (`Cascade.pointerChanged`). Null until there
+   *  is one. */
+  pointer: RuleIndex | null = null;
   /** The buckets holding a rule an element cannot share its style under
    *  (`UNSHAREABLE`): the ids, classes and tags whose elements compute
    *  their own, and whether the universal bucket makes every element do so. */
@@ -184,26 +226,44 @@ class RuleIndex {
       else if (key.kind === 'tag') this.ownStyleTags.add(key.name);
       else this.ownStyleEverywhere = true;
     }
-    const bucket =
-      key.kind === 'id'
-        ? mapBucket(this.byId, key.name)
-        : key.kind === 'class'
-          ? mapBucket(this.byClass, key.name)
-          : key.kind === 'tag'
-            ? mapBucket(this.byTag, key.name)
-            : this.universal;
-    bucket.push(indexed);
+    this._bucket(key).push(indexed);
+    if (HOVER.test(rule.selector)) {
+      this.pointer ??= new RuleIndex();
+      this.pointer.size += 1;
+      this.pointer._bucket(key).push(indexed);
+    }
+  }
+
+  private _bucket(key: ReturnType<typeof rightmostKey>): IndexedRule[] {
+    return key.kind === 'id'
+      ? mapBucket(this.byId, key.name)
+      : key.kind === 'class'
+        ? mapBucket(this.byClass, key.name)
+        : key.kind === 'tag'
+          ? mapBucket(this.byTag, key.name)
+          : this.universal;
   }
 }
 
 /** The pseudo-elements a rule can style here. */
 type PseudoElement =
-  'before' | 'after' | 'first-letter' | 'first-line' | 'marker';
+  'before' | 'after' | 'first-letter' | 'first-line' | 'marker' | 'selection';
 
 /** A selector's trailing `::before`, `::after`, `::first-letter`,
- *  `::first-line` or `::marker`, or CSS 2's single-colon spelling of any of
- *  its four. */
-const PSEUDO_ELEMENT = /::?(before|after|first-letter|first-line)$|::marker$/i;
+ *  `::first-line`, `::marker` or `::selection`, or CSS 2's single-colon
+ *  spelling of any of its four. */
+const PSEUDO_ELEMENT =
+  /::?(before|after|first-letter|first-line)$|::(marker|selection)$/i;
+
+/**
+ * What a `::selection` makes of the text it covers (CSS Pseudo 4, 3.2): the
+ * colour the text is drawn in, null for its own, and the band under it,
+ * null for none.
+ */
+export interface SelectionStyle {
+  color: string | null;
+  background: string | null;
+}
 
 /**
  * A rule for a pseudo-element, as the pseudo-element it styles and a rule
@@ -225,7 +285,7 @@ function splitPseudoElement(
       ? `${trimmed} *`
       : trimmed;
   return {
-    which: (m[1] ?? 'marker').toLowerCase() as PseudoElement,
+    which: (m[1] ?? m[2]).toLowerCase() as PseudoElement,
     rule: { ...rule, selector },
   };
 }
@@ -233,34 +293,63 @@ function splitPseudoElement(
 /**
  * The compounds of a selector that test `:hover`, each without it (and
  * without an `:active` beside it), and whether one is followed by a sibling
- * combinator, which reaches the element's later siblings. `nested` where a
- * `:hover` sits inside a functional pseudo-class — `:not(:hover)`,
- * `:is(:hover)` — and reaches elements no compound names.
+ * combinator, which reaches the element's later siblings.
+ *
+ * A `:hover` inside `:is()`, `:where()` or `:not()` is found where it is:
+ * each takes a selector list and matches the element it is written on, so
+ * a list entry of one compound tests that element — `a:not(:hover)` is a
+ * compound of `a`'s that tests the pointer — and an entry with combinators
+ * in it names an ancestor or an earlier sibling, as it would outside.
+ * Tailwind 4 writes every `group-hover:` that way, `:is(:where(.group):hover
+ * *)`, and a page of them built its document again on every move. Whatever
+ * the nesting, the element whose hover changed is one a compound found here
+ * matches, and what changes with it is itself, what is in it, and what
+ * follows it where a sibling combinator is in play: a selector reads an
+ * element, its ancestors and the siblings before each of them, and nothing
+ * else. `nested` is left for a function this cannot read a selector list
+ * in — `:nth-child(… of :hover)`, `:host()` — which reaches elements no
+ * compound names.
  *
- * A `:hover` in a compound's `:has()` is the one exception, since what it
- * reaches is known: the compound, without its `:has()`, is an ancestor of
+ * A `:hover` in a compound's `:has()` is the other way about, since what
+ * it tests is below: the compound, without its `:has()`, is an ancestor of
  * the element the pointer is over — or an earlier sibling of it or of an
  * ancestor, where the argument starts at a sibling (Selectors 4, 4.5). So
- * it is given as an anchor (`has`) rather than making the rule `nested`.
+ * it is given as an anchor (`has`).
  *
  * `:active` is not the pointer's here: nothing sets it (`setPointer` is
  * handed none), so a selector that tests only it never changes as the
  * pointer moves — Wikipedia's buttons' `:focus:not(:active)` among them.
  * A press that sets it would have to be counted here too.
  */
-export function pointerCompounds(selector: string): {
+export function pointerCompounds(selector: string): PointerCompounds {
+  const out: PointerCompounds = {
+    compounds: [],
+    siblings: false,
+    nested: false,
+    has: [],
+    followed: [],
+  };
+  scanComplex(selector, out);
+  return out;
+}
+
+export interface PointerCompounds {
   compounds: string[];
   siblings: boolean;
   nested: boolean;
   has: { anchor: string; siblings: boolean }[];
-} {
-  const out = {
-    compounds: [] as string[],
-    siblings: false,
-    nested: false,
-    has: [] as { anchor: string; siblings: boolean }[],
-  };
-  // the compounds at the top level, each with the combinator after it
+  /** The compounds and anchors a sibling combinator follows: the ones
+   *  whose elements' later siblings change with them. */
+  followed: string[];
+}
+
+/** The functions that take a selector list and match the element they are
+ *  written on (Selectors 4, 4.2 to 4.4), under the names css-select and
+ *  older sheets know them by. */
+const MATCHES_ANY = /^(?:is|where|not|matches|any|-webkit-any|-moz-any)$/i;
+
+/** The compounds of a complex selector, each with the combinator after it. */
+function compoundsOf(selector: string): { text: string; next: string }[] {
   const parts: { text: string; next: string }[] = [];
   let start = 0;
   let depth = 0;
@@ -286,85 +375,188 @@ export function pointerCompounds(selector: string): {
     }
   }
   split(selector.length, '');
-  for (const { text, next } of parts) {
-    let bare = '';
-    let pointer = false;
-    depth = 0;
-    quote = '';
-    /** Where a top-level `:has(` starts in `bare`, and its argument in
-     *  `text`, while one is open. */
-    let hasAt = -1;
-    let argAt = -1;
-    let hasPointer = false;
-    let anchored = false;
-    const args: string[] = [];
-    for (let i = 0; i < text.length; i += 1) {
-      const c = text[i];
-      if (quote) {
-        if (c === quote && text[i - 1] !== '\\') quote = '';
-        bare += c;
-        continue;
+  return parts;
+}
+
+/** A selector list's entries: split at its top-level commas. */
+function selectorsOf(list: string): string[] {
+  const entries: string[] = [];
+  let start = 0;
+  let depth = 0;
+  let quote = '';
+  for (let i = 0; i < list.length; i += 1) {
+    const c = list[i];
+    if (quote) {
+      if (c === quote && list[i - 1] !== '\\') quote = '';
+    } else if (c === '\\') i = escapeEnd(list, i) - 1;
+    else if (c === '"' || c === "'") quote = c;
+    else if (c === '(' || c === '[') depth += 1;
+    else if (c === ')' || c === ']') depth = Math.max(0, depth - 1);
+    else if (c === ',' && depth === 0) {
+      entries.push(list.slice(start, i));
+      start = i + 1;
+    }
+  }
+  entries.push(list.slice(start));
+  return entries;
+}
+
+/** Where the parenthesis opened at `open` closes, or the text's end. */
+function closeOf(text: string, open: number): number {
+  let depth = 0;
+  let quote = '';
+  for (let i = open; i < text.length; i += 1) {
+    const c = text[i];
+    if (quote) {
+      if (c === quote && text[i - 1] !== '\\') quote = '';
+    } else if (c === '\\') i = escapeEnd(text, i) - 1;
+    else if (c === '"' || c === "'") quote = c;
+    else if (c === '(' || c === '[') depth += 1;
+    else if (c === ')' || c === ']') {
+      depth -= 1;
+      if (depth === 0) return i;
+    }
+  }
+  return text.length;
+}
+
+/** `pointerCompounds` for one complex selector, into `out`. */
+function scanComplex(selector: string, out: PointerCompounds): void {
+  for (const { text, next } of compoundsOf(selector)) {
+    const compoundsFrom = out.compounds.length;
+    const hasFrom = out.has.length;
+    const found = scanCompound(text, out);
+    const sibling = next === '+' || next === '~';
+    if (found.args.length) {
+      out.has.push({
+        anchor: found.bare.trim() || '*',
+        siblings: found.args.some((arg) =>
+          selectorsOf(arg).some((one) => /^\s*[+~]/.test(one)),
+        ),
+      });
+    }
+    if (found.pointer) out.compounds.push(found.bare.trim() || '*');
+    // what follows the element this compound matches follows one whose
+    // hover, or whose answer to a `:has()`, changed
+    // — the one this compound matches, or one a selector nested in it
+    // named, which is more than it reaches and never less
+    if (sibling && (found.pointer || found.below || found.args.length)) {
+      out.siblings = true;
+      for (let i = compoundsFrom; i < out.compounds.length; i += 1) {
+        out.followed.push(out.compounds[i]);
       }
-      if (c === '\\') {
-        const end = escapeEnd(text, i);
-        bare += text.slice(i, end);
-        i = end - 1;
+      for (let i = hasFrom; i < out.has.length; i += 1) {
+        out.followed.push(out.has[i].anchor);
+      }
+    }
+  }
+}
+
+/**
+ * What one compound says of the pointer: the compound without what tests
+ * it (`bare`), whether it tests the element's own hover (`pointer`), the
+ * arguments of each `:has()` of the element's that tests it below (`args`),
+ * and whether a selector nested in it named another element's (`below`),
+ * whose compounds went into `out`.
+ */
+function scanCompound(
+  text: string,
+  out: PointerCompounds,
+): { bare: string; pointer: boolean; below: boolean; args: string[] } {
+  let bare = '';
+  let pointer = false;
+  let below = false;
+  const args: string[] = [];
+  let bracket = 0;
+  let quote = '';
+  for (let i = 0; i < text.length; i += 1) {
+    const c = text[i];
+    if (quote) {
+      if (c === quote && text[i - 1] !== '\\') quote = '';
+      bare += c;
+      continue;
+    }
+    if (c === '\\') {
+      const end = escapeEnd(text, i);
+      bare += text.slice(i, end);
+      i = end - 1;
+      continue;
+    }
+    if (c === '"' || c === "'") quote = c;
+    else if (c === '[') bracket += 1;
+    else if (c === ']') bracket = Math.max(0, bracket - 1);
+    else if (c === ':' && bracket === 0 && text[i + 1] !== ':') {
+      const m = POINTER_PSEUDO_AT.exec(text.slice(i));
+      if (m) {
+        if (m[0].length === 6) pointer = true;
+        i += m[0].length - 1;
         continue;
       }
-      if (c === '"' || c === "'") quote = c;
-      else if (c === '(' || c === '[') {
-        if (depth === 0 && c === '(' && /:has$/i.test(bare)) {
-          hasAt = bare.length - 4;
-          argAt = i + 1;
-          hasPointer = false;
-        }
-        depth += 1;
-      } else if (c === ')' || c === ']') {
-        depth = Math.max(0, depth - 1);
-        if (depth === 0 && hasAt >= 0 && c === ')') {
-          // the compound is kept without it: its argument is what the
-          // pointer changes
-          if (hasPointer) {
-            anchored = true;
-            args.push(text.slice(argAt, i));
-            bare = bare.slice(0, hasAt);
-          } else bare += c;
-          hasAt = -1;
+      const fn = FUNCTION_AT.exec(text.slice(i));
+      if (fn) {
+        const open = i + fn[0].length - 1;
+        const close = closeOf(text, open);
+        const arg = text.slice(open + 1, close);
+        const whole = text.slice(i, close + 1);
+        i = close;
+        if (!HOVER.test(arg)) {
+          bare += whole;
           continue;
         }
-      } else if (c === ':' && text[i + 1] !== ':') {
-        const m = POINTER_PSEUDO_AT.exec(text.slice(i));
-        if (m) {
-          const hover = m[0].length === 6;
-          if (depth > 0) {
-            // whatever holds it in the argument, the element it tests is
-            // in the anchor's subtree or a later sibling's
-            if (hover && hasAt >= 0) hasPointer = true;
-            else if (hover) out.nested = true;
-          } else {
-            if (hover) pointer = true;
-            i += m[0].length - 1;
-            continue;
+        const name = fn[1].toLowerCase();
+        if (name === 'has') {
+          // the compound is kept without it: its argument is what the
+          // pointer changes, and whatever holds the `:hover` in there, the
+          // element it tests is in the anchor's subtree or a later
+          // sibling's
+          args.push(arg);
+        } else if (MATCHES_ANY.test(name)) {
+          // Kept as what the entries that test this element's hover ask
+          // of it besides — `:where(a:hover)` is a compound of `a`'s, and
+          // so is `:not(a:hover)`, which only an `a` can change its answer
+          // to. Tailwind's typography writes its links `.prose
+          // :where(a:hover):not(:where(.not-prose, .not-prose *))`, and
+          // without the `a` that was a compound every element matched.
+          const own: string[] = [];
+          let any = false;
+          for (const entry of selectorsOf(arg)) {
+            if (!HOVER.test(entry)) continue;
+            const parts = compoundsOf(entry);
+            if (parts.length !== 1) {
+              scanComplex(entry, out);
+              below = true;
+              continue;
+            }
+            // of this element itself
+            const one = scanCompound(parts[0].text, out);
+            if (one.below) below = true;
+            if (!one.pointer && !one.args.length) continue;
+            if (one.pointer) pointer = true;
+            args.push(...one.args);
+            const rest = one.bare.trim();
+            if (rest && rest !== '*') own.push(rest);
+            else any = true;
           }
+          if (own.length && !any) bare += `:is(${own.join(',')})`;
+        } else {
+          out.nested = true;
+          bare += whole;
         }
+        continue;
       }
-      bare += c;
     }
-    if (anchored) {
-      out.has.push({
-        anchor: bare.trim() || '*',
-        siblings: args.some((arg) =>
-          arg.split(',').some((one) => /^\s*[+~]/.test(one)),
-        ),
-      });
-    }
-    if (!pointer) continue;
-    out.compounds.push(bare.trim() || '*');
-    if (next === '+' || next === '~') out.siblings = true;
+    bare += c;
   }
-  return out;
+  return { bare, pointer, below, args };
 }
 
+/** A functional pseudo-class's name and its opening parenthesis, at the
+ *  start of a string. */
+const FUNCTION_AT = /^:([\w-]+)\(/;
+
+/** `:hover` anywhere in a selector. */
+const HOVER = /:hover(?![\w-])/i;
+
 /** `:hover` or `:active` at the start of a string, and nothing longer. */
 const POINTER_PSEUDO_AT = /^:(?:hover|active)(?![\w-])/i;
 
@@ -568,26 +760,34 @@ export class Cascade {
     'first-letter': new RuleIndex(),
     'first-line': new RuleIndex(),
     marker: new RuleIndex(),
+    selection: new RuleIndex(),
   };
   private _adapter: CssSelectAdapter;
   /** The compounds of the selectors that test the pointer, each without
    *  its `:hover` or `:active` (`pointerCompounds`), and their matchers,
    *  compiled when a pointer move first asks (`hoverTouches`). */
-  private _hoverCompounds = new Set<string>();
-  private _hoverMatchers: ((el: Element) => boolean)[] | null = null;
+  private _hoverCompounds = new Map<string, boolean>();
+  private _hoverMatchers:
+    { match: (el: Element) => boolean; followed: boolean }[] | null = null;
   /** Whether a pointer move can be restyled where it happened
    *  (`HtmlViewNode._hoverInPlace`): false where a selector tests the
    *  pointer inside a functional pseudo-class, which reaches elements no
    *  compound names. */
   hoverLocal = true;
-  /** Whether a compound that tests the pointer is followed by a sibling
-   *  combinator, so an element's later siblings restyle with it. */
-  hoverSiblings = false;
-  /** The compounds whose `:has()` tests the pointer, each without it, and
-   *  whether its argument starts at a sibling (`hoverAnchors`). */
-  private _hoverAnchors = new Map<string, boolean>();
+  /** The compounds whose `:has()` tests the pointer, each without it,
+   *  whether its argument starts at a sibling, and whether a sibling
+   *  combinator follows it (`hoverAnchors`). */
+  private _hoverAnchors = new Map<
+    string,
+    { siblings: boolean; followed: boolean }
+  >();
   private _anchorMatchers:
-    { match: (el: Element) => boolean; siblings: boolean }[] | null = null;
+    | {
+        match: (el: Element) => boolean;
+        siblings: boolean;
+        followed: boolean;
+      }[]
+    | null = null;
   private _pointer: PointerState = NO_POINTER;
   readonly initial: ComputedStyle;
   readonly look: RootLook;
@@ -626,6 +826,12 @@ export class Cascade {
   /** The families the document loads itself (`fonts.ts`), or null for a
    *  document with no `@font-face`. */
   private _families: FontFamilies | null;
+  /** The root element's computed style: its `font-size` is what a `rem`
+   *  is and its line height what an `rlh` is (CSS Values 4, 6.1.1), in
+   *  every element but the root, whose own declarations measure them from
+   *  the initial values. Set as the root's style is computed, which a build
+   *  does ahead of every element under it. */
+  private _root: ComputedStyle | null = null;
   private _mapFamilies: ((list: string) => string) | undefined;
   /** Whether any declaration has a length in `lh` or `rlh`: only then is
    *  the line height settled ahead of the declarations that read it. */
@@ -672,6 +878,9 @@ export class Cascade {
         this._noteHover((pseudo?.rule ?? rule).selector);
       }
       for (const bp of sheet.breakpoints) breakpoints.add(bp);
+      // a query on the viewport's height reads it as a `vh` does
+      if (sheet.readsHeight) this.readsViewportHeight = true;
+      if (sheet.readsWidth) this.readsViewportWidth = true;
     }
     this.breakpoints = [...breakpoints].sort((a, b) => a - b);
     this.counterStyles = new CounterStyles(counterStyles);
@@ -703,7 +912,7 @@ export class Cascade {
     for (const d of declarations) {
       if (!VIEWPORT_UNIT.test(d.value)) continue;
       for (const m of d.value.matchAll(VIEWPORT_UNITS)) {
-        const unit = m[1].toLowerCase();
+        const unit = viewportUnit(m[1]);
         if (unit !== 'vh') this.readsViewportWidth = true;
         if (unit !== 'vw') this.readsViewportHeight = true;
       }
@@ -726,19 +935,50 @@ export class Cascade {
     this._pointer = pointer;
   }
 
+  /**
+   * Which pseudo-elements' rules test the pointer: none's
+   * (`HOVER_PSEUDO_NONE`); a `::before`'s or an `::after`'s only
+   * (`HOVER_PSEUDO_GENERATED`), whose boxes a move restyles where they are
+   * as it does an element's; or a `::first-line`'s, a `::first-letter`'s
+   * or a `::marker`'s (`HOVER_PSEUDO_OTHER`), which layout styles and a
+   * move cannot.
+   */
+  get hoverPseudo(): 0 | 1 | 2 {
+    if (
+      this._pseudo['first-letter'].hoverSensitive ||
+      this._pseudo['first-line'].hoverSensitive ||
+      this._pseudo.marker.hoverSensitive
+    ) {
+      return HOVER_PSEUDO_OTHER;
+    }
+    return this._pseudo.before.hoverSensitive ||
+      this._pseudo.after.hoverSensitive
+      ? HOVER_PSEUDO_GENERATED
+      : HOVER_PSEUDO_NONE;
+  }
+
   /**
    * Whether the pointer entering or leaving `el` can change a style: one of
    * the compounds a selector tests the pointer in matches it, the pointer
    * aside. A move between two paragraphs of a page whose only such rule is
-   * `a:hover` touches nothing, and restyles nothing.
+   * `a:hover` touches nothing, and restyles nothing. `HOVER_FOLLOWED`
+   * where a sibling combinator follows one that matches, so the element's
+   * later siblings can change with it — those rules' elements alone: a
+   * sheet with one `.peer:hover ~ *` in it does not make every row of a
+   * table restyle the rows after it.
    */
-  hoverTouches(el: Element): boolean {
-    this._hoverMatchers ??= [...this._hoverCompounds].flatMap((c) => {
-      const match = this._compile(c);
-      return match ? [match] : [];
-    });
-    for (const match of this._hoverMatchers) if (match(el)) return true;
-    return false;
+  hoverTouches(el: Element): HoverTouch {
+    // the followed ones first, so the first that matches is the answer
+    this._hoverMatchers ??= [...this._hoverCompounds]
+      .sort(([, a], [, b]) => Number(b) - Number(a))
+      .flatMap(([compound, followed]) => {
+        const match = this._compile(compound);
+        return match ? [{ match, followed }] : [];
+      });
+    for (const { match, followed } of this._hoverMatchers) {
+      if (match(el)) return followed ? HOVER_FOLLOWED : HOVER_TOUCHED;
+    }
+    return HOVER_UNTOUCHED;
   }
 
   /**
@@ -746,22 +986,27 @@ export class Cascade {
    * hovered or left: the ancestors of it a compound whose `:has()` tests
    * the pointer names, and their earlier siblings and its own where the
    * argument starts at a sibling — a superset, which is restyled and found
-   * the same where it did not. Into `into`.
+   * the same where it did not. Into `into`, each with whether its later
+   * siblings can change with it (`hoverTouches`).
    */
-  hoverAnchors(el: Element, into: Element[]): void {
+  hoverAnchors(el: Element, into: Map<Element, HoverTouch>): void {
     if (!this._hoverAnchors.size) return;
-    this._anchorMatchers ??= [...this._hoverAnchors].flatMap(
-      ([anchor, siblings]) => {
+    this._anchorMatchers ??= [...this._hoverAnchors]
+      .sort(([, a], [, b]) => Number(b.followed) - Number(a.followed))
+      .flatMap(([anchor, { siblings, followed }]) => {
         const match = this._compile(anchor);
-        return match ? [{ match, siblings }] : [];
-      },
-    );
+        return match ? [{ match, siblings, followed }] : [];
+      });
+    const note = (at: Element, followed: boolean): void => {
+      if (followed) into.set(at, HOVER_FOLLOWED);
+      else if (!into.has(at)) into.set(at, HOVER_TOUCHED);
+    };
     const siblings = this._anchorMatchers.some((m) => m.siblings);
     for (let at: Element | null = el; at;) {
       if (at !== el) {
-        for (const { match } of this._anchorMatchers) {
+        for (const { match, followed } of this._anchorMatchers) {
           if (match(at)) {
-            into.push(at);
+            note(at, followed);
             break;
           }
         }
@@ -769,9 +1014,9 @@ export class Cascade {
       if (siblings) {
         for (let s = at.prev; s; s = s.prev) {
           if (!isTag(s as Element)) continue;
-          for (const { match, siblings: apart } of this._anchorMatchers) {
-            if (apart && match(s as Element)) {
-              into.push(s as Element);
+          for (const m of this._anchorMatchers) {
+            if (m.siblings && m.match(s as Element)) {
+              note(s as Element, m.followed);
               break;
             }
           }
@@ -786,14 +1031,20 @@ export class Cascade {
     if (!/:(?:hover|active)/i.test(selector)) return;
     const found = pointerCompounds(selector);
     if (found.nested) this.hoverLocal = false;
-    if (found.siblings) this.hoverSiblings = true;
-    for (const c of found.compounds) this._hoverCompounds.add(c);
-    for (const { anchor, siblings } of found.has) {
-      this._hoverAnchors.set(
-        anchor,
-        siblings || (this._hoverAnchors.get(anchor) ?? false),
+    const followed = new Set(found.followed);
+    for (const c of found.compounds) {
+      this._hoverCompounds.set(
+        c,
+        followed.has(c) || (this._hoverCompounds.get(c) ?? false),
       );
     }
+    for (const { anchor, siblings } of found.has) {
+      const was = this._hoverAnchors.get(anchor);
+      this._hoverAnchors.set(anchor, {
+        siblings: siblings || (was?.siblings ?? false),
+        followed: followed.has(anchor) || (was?.followed ?? false),
+      });
+    }
   }
 
   /** A selector compiled as a rule's is, or null where css-select refuses
@@ -830,12 +1081,35 @@ export class Cascade {
   private _ids = new WeakMap<object, number>();
   private _nextId = 1;
 
-  /** A box tree is about to be built: the styles shared in the last build
-   *  were computed against a pointer and a viewport that may have moved. */
-  beginSharing(): void {
+  /** The styles kept from the build before, while a build that keeps them
+   *  runs, and what each kept element shares under in this one. */
+  private _kept: KeptStyles | null = null;
+  private _keptShared = new Map<Element, SharedStyle>();
+
+  /**
+   * A box tree is about to be built: the styles shared in the last build
+   * were computed against a pointer and a viewport that may have moved.
+   *
+   * With `kept`, only its `restyle` elements are matched: a build the
+   * pointer asked for — a hover that moved something — changes the styles
+   * of the elements the move reached, and every other element's is what it
+   * was. Matching them all again was most of such a build: a frame of 550 ms
+   * on a page with a Tailwind sheet, and 150 without it.
+   */
+  beginSharing(kept: KeptStyles | null = null): void {
     this._shared.clear();
     this._sharedByMatch.clear();
-    this._customs.clear();
+    // the kept styles' custom properties are the sets in here, which the
+    // elements styled under them find again
+    if (!kept) this._customs.clear();
+    this._kept = kept;
+    this._keptShared.clear();
+  }
+
+  /** The build is over: nothing later is answered from what it kept. */
+  endSharing(): void {
+    this._kept = null;
+    this._keptShared.clear();
   }
 
   /**
@@ -923,6 +1197,22 @@ export class Cascade {
     parentKey: number,
     inFlexContainer: boolean,
   ): SharedStyle {
+    const kept = this._kept;
+    if (kept !== null && !kept.restyle.has(el)) {
+      // An element the change did not reach keeps its style, under a key
+      // of its own: a key stands for an element's ancestors, which the
+      // elements styled again under it have in common, and two kept
+      // elements with one style need not — a hover restyled in place
+      // leaves a hovered card's children the styles its neighbours' have.
+      let shared = this._keptShared.get(el);
+      if (shared !== undefined) return shared;
+      const was = kept.styles.get(el);
+      if (was !== undefined && was.inFlex === inFlexContainer) {
+        shared = { style: was.style, key: this._nextShareKey++ };
+        this._keptShared.set(el, shared);
+        return shared;
+      }
+    }
     let key = `${parentKey}\u0001${inFlexContainer ? 1 : 0}`;
     const tag = tagOf(el);
     key += `\u0001${tag.length}:${tag}`;
@@ -1086,6 +1376,56 @@ export class Cascade {
     return out;
   }
 
+  /** Whether any rule styles a `::selection`: a document with none draws
+   *  a selection in the palette's colour, and asks nothing. */
+  get hasSelection(): boolean {
+    return this._pseudo.selection.size > 0;
+  }
+
+  /**
+   * An element's `::selection`, over its parent's (`parent`, null for the
+   * palette's own): the colour and the background the rules that reach it
+   * set, and its parent's for either they leave alone. Both inherit along
+   * the chain of highlights rather than the elements' (CSS Pseudo 4, 3.5,
+   * "highlight inheritance"), which is what Chrome draws: a `<span>` in a
+   * `div::selection { background: red }` is selected in red, and a `<p>`
+   * whose own rule sets only a colour keeps the red under it.
+   *
+   * The palette's highlight is taken only where no rule has set either
+   * (3.6, "paired defaults"): one that sets a colour and no background is
+   * selected over none, as Chrome has it. A rule that sets neither — a
+   * `text-shadow` only — leaves the element where its parent was.
+   */
+  selectionStyle(
+    el: Element,
+    style: ComputedStyle,
+    parent: SelectionStyle | null,
+  ): SelectionStyle | null {
+    const index = this._pseudo.selection;
+    if (!index.size || !index.reaches(el)) return parent;
+    const candidates: Candidate[] = [];
+    this._matchInto(index, el, candidates);
+    let color = false;
+    let background = false;
+    for (const candidate of candidates) {
+      for (const d of candidate.declarations) {
+        if (d.prop === 'color') color = true;
+        else if (d.prop === 'background' || d.prop === 'background-color') {
+          background = true;
+        }
+      }
+    }
+    if (!color && !background) return parent;
+    candidates.sort(byCascade);
+    const own = this._computeStyle(el, style, false, candidates);
+    return {
+      color: color ? own.color : (parent?.color ?? null),
+      background: background
+        ? own.backgroundColor
+        : (parent?.background ?? null),
+    };
+  }
+
   /**
    * An element's `::first-line` style, inheriting from its own, or null
    * when no rule reaches it (CSS 2.1 5.12.1).
@@ -1179,9 +1519,11 @@ export class Cascade {
     // size, so a `font-size: 1.2em` in the cascade resolves against the
     // right em, and again after the font size is settled so every *other*
     // em-relative length in the same rule resolves against this element's.
+    const root = isRootElement(el);
+    const rootStyle = root ? this.initial : (this._root ?? this.initial);
     const ctxParent: UnitContext = {
       em: parentStyle.fontSize,
-      rem: this.initial.fontSize,
+      rem: rootStyle.fontSize,
       initial: this.initial,
       vw: this.viewportWidth,
       vh: this.viewportHeight,
@@ -1190,13 +1532,14 @@ export class Cascade {
       ch: () => this._chOf(parentStyle),
       families: this._mapFamilies,
       lh: () => this._lineHeightOf(parentStyle),
-      rlh: () => this._lineHeightOf(this.initial),
+      rlh: () => this._lineHeightOf(rootStyle),
     };
     // The family, the weight and the slant go with the size: together they
     // pick the face an `ex`, a `ch` or an `lh` in any declaration is
     // measured in, however the declarations are ordered. A `width: 10ex`
     // in a sheet under an inline `font-weight: 900` was measured in the
-    // family's regular face.
+    // family's regular face. The colour scheme goes ahead of the rest for
+    // the same reason: every `light-dark()` among them is read by it.
     let sized = false;
     let keyword = false;
     for (const c of candidates) {
@@ -1204,7 +1547,8 @@ export class Cascade {
         if (
           d.prop === 'font-family' ||
           d.prop === 'font-weight' ||
-          d.prop === 'font-style'
+          d.prop === 'font-style' ||
+          d.prop === 'color-scheme'
         ) {
           this._apply(style, parentStyle, d, ctxParent);
         } else if (d.prop === 'font-size' || d.prop === 'font') {
@@ -1246,9 +1590,12 @@ export class Cascade {
       fontStyle: style.fontStyle,
     };
     let line: LineSource | null = null;
+    // the root's other declarations measure a `rem` from its own size
+    if (root) this._root = style;
     const ctx: UnitContext = {
       ...ctxParent,
       em: style.fontSize,
+      rem: root ? style.fontSize : ctxParent.rem,
       ex: () => this._exOf(face),
       ch: () => this._chOf(face),
       lh: () => this._lineHeightOf(line ?? style),
@@ -1379,22 +1726,68 @@ export class Cascade {
     return { style: asRoot(this.styleFor(synthetic, parent, false)), html };
   }
 
+  /**
+   * Whether the pointer's move from `was` to where it is changed which
+   * rules match `el`, or its `::before`, `::after` or another of its
+   * pseudo-elements: the rules that test `:hover` asked under both, and
+   * nothing else, since no other rule's answer is the pointer's. An element
+   * they answer the same for, under a parent whose style is what it was, has
+   * the style it had — which is most of what a move reaches: the rows of a
+   * hovered table body, what is in a hovered card.
+   */
+  pointerChanged(el: Element, was: PointerState): boolean {
+    const now = this._pointer;
+    const after = this._pointerAnswers(el);
+    this._pointer = was;
+    const before = this._pointerAnswers(el);
+    this._pointer = now;
+    return before !== after;
+  }
+
+  /** The ids of the rules testing the pointer that match `el` as things
+   *  stand, the element's and each pseudo-element's. */
+  private _pointerAnswers(el: Element): string {
+    let answers = '';
+    const ask = (index: RuleIndex, name: string): void => {
+      const pointer = index.pointer;
+      if (!pointer || !pointer.reaches(el)) return;
+      const matched: number[] = [];
+      this._matchInto(pointer, el, null, matched);
+      if (matched.length) answers += `${name}${matched.join(',')};`;
+    };
+    ask(this._index, '');
+    for (const which of POINTER_PSEUDO_ELEMENTS)
+      ask(this._pseudo[which], which);
+    return answers;
+  }
+
   /** The rules of `index` that match `el`, pushed onto `out` as candidates,
    *  and their ids onto `matched` in the order they were tried. */
   private _matchInto(
     index: RuleIndex,
     el: Element,
-    out: Candidate[],
+    out: Candidate[] | null,
     matched?: number[],
   ): void {
     // A media query's width is CSS pixels; the viewport is kept in device.
     const width = this.viewportWidth / this.scale;
+    const height = this.viewportHeight / this.scale;
 
     const consider = (bucket: IndexedRule[] | undefined): void => {
       if (!bucket) return;
       for (const indexed of bucket) {
         const rule = indexed.rule;
-        if (!mediaMatches(rule.media, width, this.look.colorScheme)) continue;
+        if (
+          !mediaMatches(
+            rule.media,
+            width,
+            this.look.colorScheme,
+            height,
+            this.scale,
+          )
+        ) {
+          continue;
+        }
         if (!indexed.compiled) {
           indexed.compiled = true;
           try {
@@ -1408,6 +1801,7 @@ export class Cascade {
         }
         if (!indexed.match || !indexed.match(el)) continue;
         matched?.push(indexed.id);
+        if (out === null) continue;
         const origin = rule.order < 0 ? Origin.UserAgent : Origin.Author;
         pushRule(out, rule, origin);
       }
@@ -1475,10 +1869,59 @@ export class Cascade {
     }
 
     out.sort(byCascade);
+    dropPaletteChrome(out);
     return out;
   }
 }
 
+/**
+ * Takes the palette's control chrome (`PALETTE_CHROME`) out of an element's
+ * candidates where the page styles its background or border, so what shows
+ * through is the web's UA values the page was written against. The rule is
+ * Blink's (`LayoutTheme::IsControlStyled`): a background or border longhand
+ * set by the page, radius included, drops the control's native appearance;
+ * so does `appearance: none`. `out` is in cascade order, so the UA's
+ * candidates are the ones before the first of any other origin.
+ */
+function dropPaletteChrome(out: Candidate[]): void {
+  let chrome = false;
+  let i = 0;
+  for (; i < out.length && out[i].origin === Origin.UserAgent; i += 1) {
+    if (PALETTE_CHROME.has(out[i].declarations)) chrome = true;
+  }
+  if (!chrome) return;
+  let styled = false;
+  for (let j = i; j < out.length && !styled; j += 1) {
+    styled = pick(out[j]).some(stylesChrome);
+  }
+  if (!styled) return;
+  let kept = 0;
+  for (const c of out) {
+    if (c.origin === Origin.UserAgent && PALETTE_CHROME.has(c.declarations)) {
+      continue;
+    }
+    out[kept++] = c;
+  }
+  out.length = kept;
+}
+
+/** Whether a declaration styles what a control's native look draws: Blink's
+ *  `is_background` and `is_border` properties and their shorthands, and an
+ *  `appearance` of `none`. */
+function stylesChrome(d: Declaration): boolean {
+  const prop = d.prop;
+  if (prop.startsWith('background')) {
+    return prop !== 'background-repeat' && prop !== 'background-blend-mode';
+  }
+  if (prop.startsWith('border')) {
+    return prop !== 'border-collapse' && prop !== 'border-spacing';
+  }
+  return (
+    (prop === 'appearance' || prop === '-webkit-appearance') &&
+    d.value.trim().toLowerCase() === 'none'
+  );
+}
+
 /** An implied element's style as the root box's: its look, not its role —
  *  the root is still a block, in flow, and the initial containing block. */
 function asRoot(style: ComputedStyle): ComputedStyle {
@@ -1490,10 +1933,20 @@ function asRoot(style: ComputedStyle): ComputedStyle {
 
 /** `:root` is the `<html>` element: the one a browser implies around a
  *  fragment, whose style the root box takes (`rootStyle`), and never a
- *  fragment's top-level elements, which css-select would take for it. */
+ *  fragment's top-level elements, which css-select would take for it.
+ *
+ *  `:focus` and its two kin match nothing: no element of the document takes
+ *  the focus — a control's widget does, beside it. css-select has none of
+ *  the three and throws on them, which dropped every rule that named one,
+ *  `:not(:focus)` among them: Wikipedia's skip link hides with
+ *  `.mw-jump-link:not(:focus)`, and without it stood in the flow at the top
+ *  of every page. */
 const PSEUDOS = {
   root: (el: Element) =>
     el.name === 'html' && !(el.parent && isTag(el.parent as Element)),
+  focus: () => false,
+  'focus-visible': () => false,
+  'focus-within': () => false,
   // css-select's, but its ranges and tags lower-cased as ASCII has it, and
   // no other script (CSS 2.1 4.1.3): Unicode's took `:lang(\u212Al)`, a
   // Kelvin sign for the K, for `:lang(kl)`
@@ -1527,8 +1980,8 @@ const PSEUDOS = {
 
 /** A length in a unit of the viewport: a number, then the unit, and no
  *  more of a name after it. */
-const VIEWPORT_UNIT = /\d(?:vw|vh|vmin|vmax)(?![\w-])/i;
-const VIEWPORT_UNITS = /\d(vw|vh|vmin|vmax)(?![\w-])/gi;
+const VIEWPORT_UNIT = /\d[sld]?v(?:w|h|i|b|min|max)(?![\w-])/i;
+const VIEWPORT_UNITS = /\d([sld]?v(?:w|h|i|b|min|max))(?![\w-])/gi;
 
 /**
  * A selector with its `[attr~=""]` made one that matches nothing: an empty
@@ -1794,7 +2247,12 @@ function presentationHints(el: Element): Declaration[] {
   // `width`/`height` are lengths on the replaced and table elements and mean
   // nothing anywhere else, which is what stops a `<input width>` from
   // becoming a CSS width the widget then disagrees with.
-  if (SIZED.has(tag)) {
+  if (
+    SIZED.has(tag) ||
+    // an image button's are its image's, as an `<img>`'s are (HTML 15.4.3)
+    (tag === 'input' &&
+      (attr(el, 'type') ?? '').trim().toLowerCase() === 'image')
+  ) {
     const width = attr(el, 'width');
     if (width) push('width', lengthAttr(width));
     const height = attr(el, 'height');
@@ -2034,3 +2492,9 @@ const ABSOLUTE_SIZES = new Set([
   'xxx-large',
   'initial',
 ]);
+
+/** Whether an element is the document's root: its parent the document, or
+ *  none, as the `<html>` the cascade supplies where the markup has none. */
+function isRootElement(el: Element): boolean {
+  return !el.parent || el.parent.type === 'root';
+}