@react-x11/components 0.12.0 → 0.13.0

package/dist/html/css/cascade.js

@@ -24,6 +24,7 @@ import { asciiLower, escapeEnd, mediaMatches, readIdent, startsIdent, } from './
 import { applyDeclaration, blockify, settleContentVisibility, settleOverflow, settleClamp, copyStyle, decorate, inherit, initialOne, initialStyle, isInherited, } from './style.js';
 import { parseDeclarations } from './parse.js';
 import { CounterStyles, counterStyleRule } from './counter-styles.js';
+import { PALETTE_CHROME } from './ua.js';
 import { viewportUnit } from './values.js';
 import { customProperties, substituteIn } from './vars.js';
 /** Where a declaration came from. Higher wins before specificity is asked. */
@@ -36,6 +37,22 @@ var Origin;
     Origin[Origin["AuthorImportant"] = 4] = "AuthorImportant";
     Origin[Origin["InlineImportant"] = 5] = "InlineImportant";
 })(Origin || (Origin = {}));
+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',
+];
 /**
  * What makes a selector's match depend on more than the element's own tag and
  * attributes and its ancestors' — its siblings, where it sits among them,
@@ -62,6 +79,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 = 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. */
@@ -120,20 +142,27 @@ class RuleIndex {
             else
                 this.ownStyleEverywhere = true;
         }
-        const bucket = key.kind === 'id'
+        this._bucket(key).push(indexed);
+        if (HOVER.test(rule.selector)) {
+            this.pointer ??= new RuleIndex();
+            this.pointer.size += 1;
+            this.pointer._bucket(key).push(indexed);
+        }
+    }
+    _bucket(key) {
+        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;
-        bucket.push(indexed);
     }
 }
 /** 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;
 /**
  * A rule for a pseudo-element, as the pseudo-element it styles and a rule
  * for the element it hangs off, which is what gets matched. The specificity
@@ -153,22 +182,35 @@ function splitPseudoElement(rule) {
             ? `${trimmed} *`
             : trimmed;
     return {
-        which: (m[1] ?? 'marker').toLowerCase(),
+        which: (m[1] ?? m[2]).toLowerCase(),
         rule: { ...rule, selector },
     };
 }
 /**
  * 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` 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` 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 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
@@ -181,8 +223,17 @@ export function pointerCompounds(selector) {
         siblings: false,
         nested: false,
         has: [],
+        followed: [],
     };
-    // the compounds at the top level, each with the combinator after it
+    scanComplex(selector, out);
+    return out;
+}
+/** 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) {
     const parts = [];
     let start = 0;
     let depth = 0;
@@ -215,94 +266,203 @@ export function pointerCompounds(selector) {
         }
     }
     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 = [];
-        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) {
+    const entries = [];
+    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, open) {
+    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, out) {
+    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, out) {
+    let bare = '';
+    let pointer = false;
+    let below = false;
+    const args = [];
+    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;
+            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;
                 }
-                depth += 1;
-            }
-            else if (c === ')' || c === ']') {
-                depth = Math.max(0, depth - 1);
-                if (depth === 0 && hasAt >= 0 && c === ')') {
+                const name = fn[1].toLowerCase();
+                if (name === 'has') {
                     // 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;
-                    continue;
+                    // 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 (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)
+                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 = [];
+                    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;
-                        i += m[0].length - 1;
-                        continue;
+                        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;
 /** `:hover` or `:active` anywhere in a selector. */
@@ -456,23 +616,22 @@ export class Cascade {
         'first-letter': new RuleIndex(),
         'first-line': new RuleIndex(),
         marker: new RuleIndex(),
+        selection: new RuleIndex(),
     };
     _adapter;
     /** 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`). */
-    _hoverCompounds = new Set();
+    _hoverCompounds = new Map();
     _hoverMatchers = 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`). */
+    /** 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`). */
     _hoverAnchors = new Map();
     _anchorMatchers = null;
     _pointer = NO_POINTER;
@@ -512,6 +671,12 @@ export class Cascade {
     /** The families the document loads itself (`fonts.ts`), or null for a
      *  document with no `@font-face`. */
     _families;
+    /** 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. */
+    _root = null;
     _mapFamilies;
     /** Whether any declaration has a length in `lh` or `rlh`: only then is
      *  the line height settled ahead of the declarations that read it. */
@@ -553,6 +718,11 @@ export class Cascade {
             }
             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);
@@ -604,42 +774,78 @@ export class Cascade {
     setPointer(pointer) {
         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() {
+        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) {
-        this._hoverMatchers ??= [...this._hoverCompounds].flatMap((c) => {
-            const match = this._compile(c);
-            return match ? [match] : [];
+        // 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 of this._hoverMatchers)
+        for (const { match, followed } of this._hoverMatchers) {
             if (match(el))
-                return true;
-        return false;
+                return followed ? HOVER_FOLLOWED : HOVER_TOUCHED;
+        }
+        return HOVER_UNTOUCHED;
     }
     /**
      * The elements whose `:has()` may have changed its answer as `el` was
      * 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, into) {
         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, followed) => {
+            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 = 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;
                     }
                 }
@@ -648,9 +854,9 @@ export class Cascade {
                 for (let s = at.prev; s; s = s.prev) {
                     if (!isTag(s))
                         continue;
-                    for (const { match, siblings: apart } of this._anchorMatchers) {
-                        if (apart && match(s)) {
-                            into.push(s);
+                    for (const m of this._anchorMatchers) {
+                        if (m.siblings && m.match(s)) {
+                            note(s, m.followed);
                             break;
                         }
                     }
@@ -666,12 +872,16 @@ export class Cascade {
         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);
+        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) {
-            this._hoverAnchors.set(anchor, siblings || (this._hoverAnchors.get(anchor) ?? false));
+            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
@@ -708,12 +918,34 @@ export class Cascade {
     _customs = new Map();
     _ids = new WeakMap();
     _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() {
+    /** The styles kept from the build before, while a build that keeps them
+     *  runs, and what each kept element shares under in this one. */
+    _kept = null;
+    _keptShared = new Map();
+    /**
+     * 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 = null) {
         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() {
+        this._kept = null;
+        this._keptShared.clear();
     }
     /**
      * An element's custom properties: its parent's, or its own over them —
@@ -795,6 +1027,23 @@ export class Cascade {
      * does after the cascade, and `rootStyle` does not go through here.
      */
     sharedStyleFor(el, parentStyle, parentKey, inFlexContainer) {
+        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}`;
@@ -939,6 +1188,53 @@ export class Cascade {
             out.unicodeBidi = 'isolate';
         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() {
+        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, style, parent) {
+        const index = this._pseudo.selection;
+        if (!index.size || !index.reaches(el))
+            return parent;
+        const candidates = [];
+        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).
@@ -1019,9 +1315,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 = {
             em: parentStyle.fontSize,
-            rem: this.initial.fontSize,
+            rem: rootStyle.fontSize,
             initial: this.initial,
             vw: this.viewportWidth,
             vh: this.viewportHeight,
@@ -1030,7 +1328,7 @@ 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
@@ -1086,9 +1384,13 @@ export class Cascade {
             fontStyle: style.fontStyle,
         };
         let line = null;
+        // the root's other declarations measure a `rem` from its own size
+        if (root)
+            this._root = style;
         const ctx = {
             ...ctxParent,
             em: style.fontSize,
+            rem: root ? style.fontSize : ctxParent.rem,
             ex: () => this._exOf(face),
             ch: () => this._chOf(face),
             lh: () => this._lineHeightOf(line ?? style),
@@ -1211,18 +1513,55 @@ export class Cascade {
         // the root is still the initial containing block.
         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, was) {
+        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. */
+    _pointerAnswers(el) {
+        let answers = '';
+        const ask = (index, name) => {
+            const pointer = index.pointer;
+            if (!pointer || !pointer.reaches(el))
+                return;
+            const matched = [];
+            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. */
     _matchInto(index, el, out, matched) {
         // 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) => {
             if (!bucket)
                 return;
             for (const indexed of bucket) {
                 const rule = indexed.rule;
-                if (!mediaMatches(rule.media, width, this.look.colorScheme))
+                if (!mediaMatches(rule.media, width, this.look.colorScheme, height, this.scale)) {
                     continue;
+                }
                 if (!indexed.compiled) {
                     indexed.compiled = true;
                     try {
@@ -1238,6 +1577,8 @@ 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);
             }
@@ -1304,9 +1645,57 @@ 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) {
+    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) {
+    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) {
@@ -1638,7 +2027,10 @@ function presentationHints(el) {
     // `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));
@@ -1878,4 +2270,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) {
+    return !el.parent || el.parent.type === 'root';
+}
 //# sourceMappingURL=cascade.js.map