@react-x11/components 0.14.1 → 0.16.0

package/dist/html/css/cascade.js

@@ -6,7 +6,8 @@
 // compiles a selector to a closure once and the closure is what runs per
 // element, and it has the combinator, `:nth-child(an+b)` and attribute-
 // operator cases right — so it is imported, through an adapter that answers
-// `:hover` from this renderer's own pointer state.
+// `:hover` from this renderer's own pointer state, and pseudo-classes that
+// answer `:focus` and its kin from which element's widget holds the focus.
 //
 // What is *not* delegated is the choice of which selectors to try. Testing
 // every rule against every element is O(rules × elements) and is what makes
@@ -19,14 +20,15 @@ import { compile } from 'css-select';
 import * as DomUtils from 'domutils';
 import { Element as DomElement, isTag } from 'domhandler';
 import { attr, tagOf } from '../dom.js';
+import { systemColorTable, usedColorScheme } from './color.js';
 import { asciiLower, escapeEnd, mediaMatches, readIdent, startsIdent, } from './parse.js';
-import { applyDeclaration, blockify, settleButton, settleContentVisibility, settleOverflow, settleClamp, copyStyle, decorate, inherit, initialOne, initialStyle, isInherited, } from './style.js';
+import { applyDeclaration, blockify, settleAlign, settleButton, settleContentVisibility, settleOverflow, settleOutline, 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';
-import { ROOT_BOX_PROPS, SHAPE_TAGS, isShapeProp, shapeValue, } from './shapes.js';
+import { ROOT_BOX_PROPS, SHAPE_TAGS, isShapeProp, isUse, shapeValue, useHref, } from './shapes.js';
 /** Where a declaration came from. Higher wins before specificity is asked. */
 var Origin;
 (function (Origin) {
@@ -79,10 +81,12 @@ 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. */
+    /** …and focus-sensitive, for a widget taking the focus or giving it up. */
+    focusSensitive = false;
+    /** The rules that test `:hover` or the focus, in buckets of their own:
+     *  the ones whose answers a pointer move or a focus change 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
@@ -133,10 +137,15 @@ class RuleIndex {
             id: this._nextId++,
             needs: null,
             root: null,
+            inCopy: null,
+            inCopyCompiled: false,
         };
         if (rule.selector.includes(':hover') || rule.selector.includes(':active')) {
             this.hoverSensitive = true;
         }
+        const focus = FOCUS.test(rule.selector);
+        if (focus)
+            this.focusSensitive = true;
         if (UNSHAREABLE.test(rule.selector)) {
             if (key.kind === 'id')
                 this.ownStyleIds.add(key.name);
@@ -148,7 +157,7 @@ class RuleIndex {
                 this.ownStyleEverywhere = true;
         }
         this._bucket(key).push(indexed);
-        if (HOVER.test(rule.selector)) {
+        if (focus || HOVER.test(rule.selector)) {
             this.pointer ??= new RuleIndex();
             this.pointer.size += 1;
             this.pointer._bucket(key).push(indexed);
@@ -221,8 +230,15 @@ function splitPseudoElement(rule) {
  * 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.
+ *
+ * The focus is the other state a change of reaches only some elements, and
+ * `kind` says which is asked for: `FOCUS_STATE` finds the compounds that
+ * test `:focus`, `:focus-visible` or `:focus-within` the same way. Either
+ * kind leaves the other's pseudo-classes out of a compound as well as its
+ * own, so what is left matches wherever the compound could, in any state —
+ * `a:focus:hover` is a compound of `a`'s, for both.
  */
-export function pointerCompounds(selector) {
+export function pointerCompounds(selector, kind = HOVER_STATE) {
     const out = {
         compounds: [],
         siblings: false,
@@ -230,9 +246,21 @@ export function pointerCompounds(selector) {
         has: [],
         followed: [],
     };
-    scanComplex(selector, out);
+    scanComplex(selector, out, kind);
     return out;
 }
+/** The pointer's: `:hover`, and `:active`, which nothing sets. */
+export const HOVER_STATE = {
+    mentions: /:(?:hover|active)/i,
+    any: /:hover(?![\w-])/i,
+    own: /^:hover$/i,
+};
+/** The focus's: `:focus`, `:focus-visible` and `:focus-within`. */
+export const FOCUS_STATE = {
+    mentions: /:focus/i,
+    any: /:focus(?:-visible|-within)?(?![\w-])/i,
+    own: /^:focus/i,
+};
 /** 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. */
@@ -326,11 +354,11 @@ function closeOf(text, open) {
     return text.length;
 }
 /** `pointerCompounds` for one complex selector, into `out`. */
-function scanComplex(selector, out) {
+function scanComplex(selector, out, kind) {
     for (const { text, next } of compoundsOf(selector)) {
         const compoundsFrom = out.compounds.length;
         const hasFrom = out.has.length;
-        const found = scanCompound(text, out);
+        const found = scanCompound(text, out, kind);
         const sibling = next === '+' || next === '~';
         if (found.args.length) {
             out.has.push({
@@ -360,9 +388,10 @@ function scanComplex(selector, out) {
  * 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`.
+ * whose compounds went into `out`. Of the focus, likewise, for
+ * `FOCUS_STATE`.
  */
-function scanCompound(text, out) {
+function scanCompound(text, out, kind) {
     let bare = '';
     let pointer = false;
     let below = false;
@@ -390,9 +419,9 @@ function scanCompound(text, out) {
         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));
+            const m = STATE_PSEUDO_AT.exec(text.slice(i));
             if (m) {
-                if (m[0].length === 6)
+                if (kind.own.test(m[0]))
                     pointer = true;
                 i += m[0].length - 1;
                 continue;
@@ -404,7 +433,7 @@ function scanCompound(text, out) {
                 const arg = text.slice(open + 1, close);
                 const whole = text.slice(i, close + 1);
                 i = close;
-                if (!HOVER.test(arg)) {
+                if (!kind.any.test(arg)) {
                     bare += whole;
                     continue;
                 }
@@ -426,16 +455,16 @@ function scanCompound(text, out) {
                     const own = [];
                     let any = false;
                     for (const entry of selectorsOf(arg)) {
-                        if (!HOVER.test(entry))
+                        if (!kind.any.test(entry))
                             continue;
                         const parts = compoundsOf(entry);
                         if (parts.length !== 1) {
-                            scanComplex(entry, out);
+                            scanComplex(entry, out, kind);
                             below = true;
                             continue;
                         }
                         // of this element itself
-                        const one = scanCompound(parts[0].text, out);
+                        const one = scanCompound(parts[0].text, out, kind);
                         if (one.below)
                             below = true;
                         if (!one.pointer && !one.args.length)
@@ -467,26 +496,33 @@ function scanCompound(text, out) {
  *  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. */
-const POINTER_PSEUDO = /:(?:hover|active)(?![\w-])/i;
+const HOVER = HOVER_STATE.any;
+/** `:focus`, `:focus-visible` or `:focus-within` anywhere in a selector. */
+const FOCUS = FOCUS_STATE.any;
+/** A pseudo-class of a state this renderer keeps — `:hover`, `:active`,
+ *  `:focus` and its two kin — at the start of a string, and nothing
+ *  longer. */
+const STATE_PSEUDO_AT = /^:(?:hover|active|focus(?:-visible|-within)?)(?![\w-])/i;
+/** Any of them anywhere in a selector. */
+const STATE_PSEUDO = /:(?:hover|active|focus(?:-visible|-within)?)(?![\w-])/i;
 /**
  * A selector compiled to a matcher over this adapter. css-select keeps the
  * answers of a `:has()` above the subject, or of the ancestors a
  * descendant combinator tried under one, for as long as the matcher lives
  * (`cacheResults`) — which is the cascade's life, and a pointer move is no
- * new cascade. So a selector that tests the pointer keeps none: with them,
- * `#box:has(a:hover) .m` answered what it did before the first move, for
- * good.
+ * new cascade. So a selector that tests the pointer or the focus keeps
+ * none: with them, `#box:has(a:hover) .m` answered what it did before the
+ * first move, for good.
  */
-function compileSelector(selector, adapter, pseudos = PSEUDOS) {
+function compileSelector(selector, adapter, pseudos = PSEUDOS, 
+/** Whether what it answers may be kept: not where the adapter's tree
+ *  moves under it, as a `<use>`'s copy's does (`Cascade.shapeStyles`). */
+cache = true) {
     return compile(noEmptyWords(selector), {
         adapter,
         xmlMode: false,
         pseudos,
-        cacheResults: !POINTER_PSEUDO.test(selector),
+        cacheResults: cache && !STATE_PSEUDO.test(selector),
     });
 }
 function mapBucket(map, key) {
@@ -608,6 +644,30 @@ function ancestorKeys(selector) {
     }
     return keys;
 }
+/** A drawing none of whose own elements a rule reaches. */
+const NO_SHAPES = new Map();
+/**
+ * What `Cascade.shapeStyles` keeps for the drawings of one build of the
+ * boxes (`BoxTree.shapeCopies`): the document's elements by their ids, and
+ * what the rules matched in the copy of each element a `<use>` names —
+ * the same whichever `<use>` makes it, so a page of hundreds of icons from
+ * one sprite matches each symbol once — and what that comes to for a
+ * drawing of each style. A build is made again whenever the document, its
+ * style sheets or a viewport a value reads change, and a pointer move
+ * changes nothing a copy is matched by: nothing in one is under the
+ * pointer, and a drawing whose style it changes has another style.
+ */
+export class ShapeCopies {
+    byId;
+    /** @internal */
+    matched = new Map();
+    /** @internal What each copy comes to for a drawing of a style, and the
+     *  key that names it. */
+    resolved = new WeakMap();
+    constructor(byId) {
+        this.byId = byId;
+    }
+}
 function balancedEnd(text, from, open, close) {
     let depth = 0;
     for (let i = from; i < text.length; i += 1) {
@@ -622,6 +682,112 @@ function balancedEnd(text, from, open, close) {
     return text.length;
 }
 const NO_POINTER = { hovered: new Set(), active: new Set() };
+export const NO_FOCUS = {
+    element: null,
+    visible: false,
+    within: new Set(),
+};
+/**
+ * What the selectors that test one state — the pointer, or the focus — say
+ * of the elements a change of it can restyle: the compounds that test it,
+ * each without it and with whether a sibling combinator follows it, and
+ * the anchors of the `:has()`s that test it (`pointerCompounds`).
+ */
+class StateRules {
+    _kind;
+    /** The compounds, each without the state, and their matchers, compiled
+     *  when a change first asks (`touches`). */
+    _compounds = new Map();
+    _matchers = null;
+    /** Whether a change can be restyled where it happened
+     *  (`HtmlViewNode._hoverInPlace`): false where a selector tests the
+     *  state inside a functional pseudo-class, which reaches elements no
+     *  compound names. */
+    local = true;
+    /** The compounds whose `:has()` tests the state, each without it,
+     *  whether its argument starts at a sibling, and whether a sibling
+     *  combinator follows it (`anchors`). */
+    _anchors = new Map();
+    _anchorMatchers = null;
+    constructor(_kind) {
+        this._kind = _kind;
+    }
+    note(selector) {
+        if (!this._kind.mentions.test(selector))
+            return;
+        const found = pointerCompounds(selector, this._kind);
+        if (found.nested)
+            this.local = false;
+        const followed = new Set(found.followed);
+        for (const c of found.compounds) {
+            this._compounds.set(c, followed.has(c) || (this._compounds.get(c) ?? false));
+        }
+        for (const { anchor, siblings } of found.has) {
+            const was = this._anchors.get(anchor);
+            this._anchors.set(anchor, {
+                siblings: siblings || (was?.siblings ?? false),
+                followed: followed.has(anchor) || (was?.followed ?? false),
+            });
+        }
+    }
+    /** `Cascade.hoverTouches`, for this state. */
+    touches(el, compile) {
+        // the followed ones first, so the first that matches is the answer
+        this._matchers ??= [...this._compounds]
+            .sort(([, a], [, b]) => Number(b) - Number(a))
+            .flatMap(([compound, followed]) => {
+            const match = compile(compound);
+            return match ? [{ match, followed }] : [];
+        });
+        for (const { match, followed } of this._matchers) {
+            if (match(el))
+                return followed ? HOVER_FOLLOWED : HOVER_TOUCHED;
+        }
+        return HOVER_UNTOUCHED;
+    }
+    /** `Cascade.hoverAnchors`, for this state. */
+    anchors(el, into, compile) {
+        if (!this._anchors.size)
+            return;
+        this._anchorMatchers ??= [...this._anchors]
+            .sort(([, a], [, b]) => Number(b.followed) - Number(a.followed))
+            .flatMap(([anchor, { siblings, followed }]) => {
+            const match = compile(anchor);
+            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, followed } of this._anchorMatchers) {
+                    if (match(at)) {
+                        note(at, followed);
+                        break;
+                    }
+                }
+            }
+            if (siblings) {
+                for (let s = at.prev; s; s = s.prev) {
+                    if (!isTag(s))
+                        continue;
+                    for (const m of this._anchorMatchers) {
+                        if (m.siblings && m.match(s)) {
+                            note(s, m.followed);
+                            break;
+                        }
+                    }
+                }
+            }
+            const parent = at.parent;
+            at = parent && isTag(parent) ? parent : null;
+        }
+    }
+}
 function faceOf(style) {
     return {
         family: style.fontFamily,
@@ -657,22 +823,23 @@ export class Cascade {
     _shapes = new RuleIndex();
     _shapeNeeds = null;
     _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 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;
-    /** 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;
+    /**
+     * The tree a `<use>`'s copy is in, for `_copyAdapter`: the element it is
+     * a copy of, which is its top (`ShapeStyles.used`). A copy is its own
+     * tree, a shadow tree of the `<use>`'s (SVG 2, 5.5.1), so a selector is
+     * matched against its original with nothing above that element and
+     * nothing beside it — the top of a copy is its tree's first child and
+     * its last, whichever of its parent's it is. And nothing in it is under
+     * the pointer, as nothing in a drawing is: it has no box to be.
+     */
+    _copyTop = null;
+    _copyAdapter;
+    /** What the selectors that test the pointer, and the ones that test the
+     *  focus, say of the elements a change of it reaches. */
+    _hoverRules = new StateRules(HOVER_STATE);
+    _focusRules = new StateRules(FOCUS_STATE);
     _pointer = NO_POINTER;
+    _focus = NO_FOCUS;
     initial;
     look;
     /** Viewport width the media queries were evaluated at, in device pixels
@@ -719,15 +886,37 @@ export class Cascade {
     /** Whether any declaration has a length in `lh` or `rlh`: only then is
      *  the line height settled ahead of the declarations that read it. */
     _lh = false;
-    /** The pseudo-classes css-select is handed, `:root` this cascade's. */
+    /** The pseudo-classes css-select is handed: `:root` this cascade's, and
+     *  the focus's three answered from `_focus`. */
     _pseudos;
+    /** The colour schemes the page says it supports with a `<meta
+     *  name="color-scheme">` (HTML 4.2.5.4), which its root element takes
+     *  as it takes a presentational attribute: under any rule that sets its
+     *  `color-scheme`. Set by the box builder from the document. */
+    pageColorScheme = null;
+    /** Each system colour as the `light-dark()` it is: the palette's where
+     *  the element's scheme is the palette's, and Chrome's in an SVG image,
+     *  which has none. */
+    _systemColors;
     constructor(sheets, look, viewportWidth, viewportHeight, scale = 1, xHeight = null, zeroWidth = null, normalLine = null, families = null, 
     /** The document's element where it is not an `<html>`: an SVG image's
      *  `<svg>`, which is `:root` there (Selectors 4, 14.1). */
-    documentElement = null) {
-        this._pseudos = documentElement
-            ? { ...PSEUDOS, root: (el) => el === documentElement }
-            : PSEUDOS;
+    documentElement = null, 
+    /** The element the document's URL names by its fragment, which is
+     *  `:target` (Selectors 4, 9.1): an SVG image's, `image.svg#icon`. */
+    target = null) {
+        // css-select has none of the focus's three, and a pseudo-class is
+        // handed only the element, so they are this cascade's own closures
+        this._pseudos = {
+            ...PSEUDOS,
+            ...(documentElement && {
+                root: (el) => el === documentElement,
+            }),
+            ...(target && { target: (el) => el === target }),
+            focus: (el) => this._focus.element === el,
+            'focus-visible': (el) => this._focus.visible && this._focus.element === el,
+            'focus-within': (el) => this._focus.within.has(el),
+        };
         this._xHeightOf = xHeight;
         this._zeroWidthOf = zeroWidth;
         this._normalLineOf = normalLine;
@@ -736,6 +925,7 @@ export class Cascade {
             ? (list) => families.map(list)
             : undefined;
         this.look = look;
+        this._systemColors = systemColorTable(documentElement ? null : look);
         this.initial = initialStyle(look, scale);
         this.viewportWidth = viewportWidth;
         this.viewportHeight = viewportHeight;
@@ -767,7 +957,9 @@ export class Cascade {
                         this._shapes.add(rule, key);
                     }
                 }
-                this._noteHover((pseudo?.rule ?? rule).selector);
+                const selector = (pseudo?.rule ?? rule).selector;
+                this._hoverRules.note(selector);
+                this._focusRules.note(selector);
             }
             for (const bp of sheet.breakpoints)
                 breakpoints.add(bp);
@@ -797,6 +989,14 @@ export class Cascade {
             isActive: (el) => this._pointer.active.has(el),
             isVisited: () => false,
         };
+        this._copyAdapter = {
+            ...this._adapter,
+            getParent: (el) => (el === this._copyTop ? null : DomUtils.getParent(el)),
+            getSiblings: (el) => el === this._copyTop ? [el] : DomUtils.getSiblings(el),
+            prevElementSibling: (el) => el === this._copyTop ? null : DomUtils.prevElementSibling(el),
+            isHovered: () => false,
+            isActive: () => false,
+        };
     }
     /** Whether declarations read the viewport's width or height (`vw`,
      *  `vh`, `vmin`, `vmax`), noted on the cascade. */
@@ -827,6 +1027,30 @@ export class Cascade {
     setPointer(pointer) {
         this._pointer = pointer;
     }
+    /** Whether a widget taking the focus or giving it up can change what this
+     *  cascade produces. */
+    get focusSensitive() {
+        return (this._index.focusSensitive ||
+            this._pseudo.before.focusSensitive ||
+            this._pseudo.after.focusSensitive ||
+            this._pseudo['first-letter'].focusSensitive ||
+            this._pseudo['first-line'].focusSensitive ||
+            this._pseudo.marker.focusSensitive);
+    }
+    setFocus(focus) {
+        this._focus = focus;
+    }
+    /** 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. */
+    get hoverLocal() {
+        return this._hoverRules.local;
+    }
+    /** …and a focus change. */
+    get focusLocal() {
+        return this._focusRules.local;
+    }
     /**
      * Which pseudo-elements' rules test the pointer: none's
      * (`HOVER_PSEUDO_NONE`); a `::before`'s or an `::after`'s only
@@ -836,13 +1060,19 @@ export class Cascade {
      * move cannot.
      */
     get hoverPseudo() {
-        if (this._pseudo['first-letter'].hoverSensitive ||
-            this._pseudo['first-line'].hoverSensitive ||
-            this._pseudo.marker.hoverSensitive) {
+        return this._pseudoRules('hoverSensitive');
+    }
+    /** …and which test the focus. */
+    get focusPseudo() {
+        return this._pseudoRules('focusSensitive');
+    }
+    _pseudoRules(state) {
+        if (this._pseudo['first-letter'][state] ||
+            this._pseudo['first-line'][state] ||
+            this._pseudo.marker[state]) {
             return HOVER_PSEUDO_OTHER;
         }
-        return this._pseudo.before.hoverSensitive ||
-            this._pseudo.after.hoverSensitive
+        return this._pseudo.before[state] || this._pseudo.after[state]
             ? HOVER_PSEUDO_GENERATED
             : HOVER_PSEUDO_NONE;
     }
@@ -857,18 +1087,12 @@ export class Cascade {
      * table restyle the rows after it.
      */
     hoverTouches(el) {
-        // 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;
+        return this._hoverRules.touches(el, (selector) => this._compile(selector));
+    }
+    /** `hoverTouches` for the focus: whether `el` taking the focus or giving
+     *  it up, or its `:focus-within` changing, can change a style. */
+    focusTouches(el) {
+        return this._focusRules.touches(el, (selector) => this._compile(selector));
     }
     /**
      * The elements whose `:has()` may have changed its answer as `el` was
@@ -879,63 +1103,11 @@ export class Cascade {
      * siblings can change with it (`hoverTouches`).
      */
     hoverAnchors(el, into) {
-        if (!this._hoverAnchors.size)
-            return;
-        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, 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, followed } of this._anchorMatchers) {
-                    if (match(at)) {
-                        note(at, followed);
-                        break;
-                    }
-                }
-            }
-            if (siblings) {
-                for (let s = at.prev; s; s = s.prev) {
-                    if (!isTag(s))
-                        continue;
-                    for (const m of this._anchorMatchers) {
-                        if (m.siblings && m.match(s)) {
-                            note(s, m.followed);
-                            break;
-                        }
-                    }
-                }
-            }
-            const parent = at.parent;
-            at = parent && isTag(parent) ? parent : null;
-        }
+        this._hoverRules.anchors(el, into, (selector) => this._compile(selector));
     }
-    _noteHover(selector) {
-        if (!/:(?:hover|active)/i.test(selector))
-            return;
-        const found = pointerCompounds(selector);
-        if (found.nested)
-            this.hoverLocal = 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),
-            });
-        }
+    /** `hoverAnchors` for the focus: `form:has(input:focus)`'s form. */
+    focusAnchors(el, into) {
+        this._focusRules.anchors(el, into, (selector) => this._compile(selector));
     }
     /** A selector compiled as a rule's is, or null where css-select refuses
      *  it, as a rule it refuses drops out of the cascade. */
@@ -1106,6 +1278,11 @@ export class Cascade {
             if (this._pointer.active.has(el))
                 key += '\u0001:active';
         }
+        // `:focus-within` is not shared under (`UNSHAREABLE`), and the focus
+        // is on one element
+        if (this._focus.element === el && this._index.focusSensitive) {
+            key += this._focus.visible ? '\u0001:focus-visible' : '\u0001:focus';
+        }
         const attribs = el.attribs;
         for (const name in attribs) {
             const value = attribs[name];
@@ -1389,6 +1566,8 @@ export class Cascade {
             families: this._mapFamilies,
             lh: () => this._lineHeightOf(parentStyle),
             rlh: () => this._lineHeightOf(rootStyle),
+            focusRing: this.look.focusRing,
+            systemColors: this._systemColors,
         };
         // 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
@@ -1503,7 +1682,9 @@ export class Cascade {
             style.alignBlocks = null;
         }
         settleClamp(style, parentStyle);
+        settleAlign(style, parentStyle);
         settleOverflow(style);
+        settleOutline(style, this.look, this.scale);
         settleContentVisibility(style);
         blockify(style, inFlexContainer);
         // a button is laid out as one, whatever `display` it was given
@@ -1604,12 +1785,20 @@ export class Cascade {
      * itself. The root's box has its paint, its opacity and whether it is
      * shown from its computed style, so those are left out for it.
      *
+     * What a `<use>` draws is a copy, styled in a tree of its own
+     * (`ShapeStyles.used`): the element it names is looked for as `copyTree`
+     * looks — the drawing's own first, then the document's — and what is in
+     * it asked of where it stands in that tree, once a build for all the
+     * `<use>`s that name it (`ShapeCopies`). An icon sprite's `<symbol>`,
+     * outside the drawing in a hidden `<svg>` of them, is styled that way,
+     * and so is one of the drawing's own.
+     *
      * Asked as a drawing is first painted (`BoxTree.shapeStyler`), of the
      * rules in `_shapes` alone: a page of hundreds of icons pays for the ones
      * it shows, a look in the buckets for each of their elements where no
      * rule reaches them, and a document with no such rule nothing.
      */
-    shapeStyles(root, style) {
+    shapeStyles(root, style, copies = null) {
         const index = this._shapes;
         if (!index.size)
             return null;
@@ -1620,9 +1809,9 @@ export class Cascade {
         // id it asks of an ancestor, which is looked for once for the drawing,
         // around it and in it, where matching the rule would look for it from
         // each of its elements. On a page with none of them around a drawing,
-        // nothing is matched at all.
+        // nothing is matched at all. A copy's tree has nothing around it.
         const needs = (this._shapeNeeds ??= this._needsOfShapes());
-        const found = new Set();
+        let found = new Set();
         const asks = needs.classes.size > 0 || needs.ids.size > 0;
         const note = (el) => {
             if (needs.ids.size) {
@@ -1660,42 +1849,46 @@ export class Cascade {
         // nothing else to say of it.
         const liveForRoot = (indexed) => (indexed.root ??= declaresRootShape(indexed.rule.declarations)) &&
             live(indexed);
-        let of = null;
-        let key = '';
-        let ctx = null;
-        // in document order, the root first: an element's place in it is what
-        // the key names it by, and its ancestors in the drawing are noted
-        // before it is asked of
-        const stack = [root];
-        let place = -1;
-        while (stack.length) {
-            const el = stack.pop();
-            place += 1;
-            // what is in a `<foreignObject>` is not the drawing's to draw
-            if (el.name !== 'foreignobject' && el.name !== 'foreignObject') {
-                const children = el.children;
-                for (let i = children.length - 1; i >= 0; i -= 1) {
-                    const child = children[i];
-                    if (child.type === 'tag')
-                        stack.push(child);
+        /** The elements under `top` and it, in document order, the top first:
+         *  its ancestors are noted before an element is asked of. Each with
+         *  the rules it matched, in cascade order, where it matched any. */
+        const walk = (top, inCopy, each) => {
+            const stack = [top];
+            while (stack.length) {
+                const el = stack.pop();
+                // what is in a `<foreignObject>` is not the drawing's to draw
+                if (el.name !== 'foreignobject' && el.name !== 'foreignObject') {
+                    const children = el.children;
+                    for (let i = children.length - 1; i >= 0; i -= 1) {
+                        const child = children[i];
+                        if (child.type === 'tag')
+                            stack.push(child);
+                    }
                 }
+                if (asks)
+                    note(el);
+                const tag = tagOf(el);
+                const asked = found.size
+                    ? index.universal.length > 0 || index.byTag.has(tag)
+                    : needs.universal || needs.tags.has(tag);
+                if (!asked && !index.names(el)) {
+                    each(el, null);
+                    continue;
+                }
+                const candidates = [];
+                this._matchInto(index, el, candidates, undefined, el === root && !inCopy ? liveForRoot : live, inCopy);
+                if (candidates.length) {
+                    const inline = attr(el, 'style');
+                    if (inline)
+                        pushInlineShapes(candidates, inline);
+                    candidates.sort(byCascade);
+                }
+                each(el, candidates.length ? candidates : null);
             }
-            if (asks)
-                note(el);
-            const tag = tagOf(el);
-            const asked = found.size
-                ? index.universal.length > 0 || index.byTag.has(tag)
-                : needs.universal || needs.tags.has(tag);
-            if (!asked && !index.names(el))
-                continue;
-            const candidates = [];
-            this._matchInto(index, el, candidates, undefined, el === root ? liveForRoot : live);
-            if (!candidates.length)
-                continue;
-            const inline = attr(el, 'style');
-            if (inline)
-                pushInlineShapes(candidates, inline);
-            candidates.sort(byCascade);
+        };
+        let ctx = null;
+        /** What an element's rules come to, against the drawing's style. */
+        const resolve = (candidates, isRoot) => {
             ctx ??= {
                 color: style.color,
                 scheme: style.colorScheme,
@@ -1706,6 +1899,7 @@ export class Cascade {
                     vh: this.viewportHeight,
                     scale: this.scale,
                     initial: this.initial,
+                    systemColors: this._systemColors,
                 },
             };
             let own = null;
@@ -1713,7 +1907,7 @@ export class Cascade {
                 for (const d of pick(c)) {
                     if (!isShapeProp(d.prop))
                         continue;
-                    if (el === root && ROOT_BOX_PROPS.has(d.prop))
+                    if (isRoot && ROOT_BOX_PROPS.has(d.prop))
                         continue;
                     // a `var()` with nothing to stand for it is invalid at
                     // computed-value time, and the property as though `unset`
@@ -1722,15 +1916,119 @@ export class Cascade {
                         (own ??= {})[d.prop] = value;
                 }
             }
+            return own;
+        };
+        // an element's place in the walks is what the key names it by
+        let key = '';
+        let place = -1;
+        const named = (own, at) => {
+            let part = `${at}{`;
+            for (const prop in own)
+                part += `${prop}:${own[prop]};`;
+            return `${part}}`;
+        };
+        // (made as they are first needed: most drawings need none of them)
+        let of = null;
+        // the `<use>`s met, and the drawing's own elements by their ids, which
+        // one looks in first
+        let uses = null;
+        let ids = null;
+        walk(root, false, (el, candidates) => {
+            place += 1;
+            if (isUse(el))
+                (uses ??= []).push(el);
+            if (el !== root) {
+                const id = el.attribs.id;
+                if (id && !ids?.has(id))
+                    (ids ??= new Map()).set(id, el);
+            }
+            const own = candidates && resolve(candidates, el === root);
             if (!own)
-                continue;
+                return;
             (of ??= new Map()).set(el, own);
-            key += `${place}{`;
-            for (const prop in own)
-                key += `${prop}:${own[prop]};`;
-            key += '}';
+            key += named(own, place);
+        });
+        if (!uses)
+            return of ? { of, used: null, key } : null;
+        // Each element a `<use>` names, in the tree of its copy: once however
+        // many name it, and one a copy's `<use>` names in turn, however deep —
+        // `copyTree` stops at a depth, and a `<use>` that names what it is in
+        // finds it being walked. What is matched there is the same for every
+        // drawing, and kept for the build (`ShapeCopies`); what it comes to is
+        // the drawing's, since every property the copy inherits is the
+        // `<use>`'s, and its custom properties and its colour are the
+        // drawing's, as they are for the rest of it — kept too, for each
+        // style a drawing has, which the icons of a page mostly share.
+        const byId = copies?.byId ?? ((id) => elementById(root, id));
+        const matched = copies?.matched ?? new Map();
+        let styled = copies?.resolved.get(style);
+        if (!styled) {
+            styled = new Map();
+            copies?.resolved.set(style, styled);
+        }
+        const match = (target) => {
+            let copy = matched.get(target);
+            if (copy)
+                return copy;
+            const rules = [];
+            const inner = [];
+            let size = 0;
+            found = new Set();
+            this._copyTop = target;
+            try {
+                walk(target, true, (el, candidates) => {
+                    if (isUse(el))
+                        inner.push(el);
+                    if (candidates)
+                        rules.push({ el, at: size, candidates });
+                    size += 1;
+                });
+            }
+            finally {
+                this._copyTop = null;
+            }
+            copy = { rules, size, uses: inner };
+            matched.set(target, copy);
+            return copy;
+        };
+        let used = null;
+        let made = null;
+        for (let i = 0; i < uses.length; i += 1) {
+            const use = uses[i];
+            const id = useHref(use);
+            if (id === null)
+                continue;
+            const target = ids?.get(id) ?? byId(id);
+            if (!target)
+                continue;
+            const copy = match(target);
+            let done = styled.get(target);
+            if (!done) {
+                let into = null;
+                let part = '';
+                for (const { el, at, candidates } of copy.rules) {
+                    const own = resolve(candidates, false);
+                    if (!own)
+                        continue;
+                    (into ??= new Map()).set(el, own);
+                    part += named(own, at);
+                }
+                done = { into, key: part };
+                styled.set(target, done);
+            }
+            if (!made?.has(target)) {
+                (made ??= new Set()).add(target);
+                for (const next of copy.uses)
+                    uses.push(next);
+                // its place in the key is after what came before it
+                if (done.key)
+                    key += `@${place + 1}:${done.key}`;
+                place += copy.size;
+            }
+            if (done.into)
+                (used ??= new Map()).set(use, done.into);
         }
-        return of ? { of, key } : null;
+        return of || used ? { of: of ?? NO_SHAPES, used, key } : null;
     }
     /** `ShapeNeeds`, and each such rule's own (`IndexedRule.needs`). */
     _needsOfShapes() {
@@ -1768,18 +2066,22 @@ export class Cascade {
      * 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.
+     * hovered table body, what is in a hovered card. The focus's move from
+     * `wasFocus` likewise, the rules that test it asked under both.
      */
-    pointerChanged(el, was) {
+    pointerChanged(el, was, wasFocus = this._focus) {
         const now = this._pointer;
+        const nowFocus = this._focus;
         const after = this._pointerAnswers(el);
         this._pointer = was;
+        this._focus = wasFocus;
         const before = this._pointerAnswers(el);
         this._pointer = now;
+        this._focus = nowFocus;
         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. */
+    /** The ids of the rules testing the pointer or the focus that match
+     *  `el` as things stand, the element's and each pseudo-element's. */
     _pointerAnswers(el) {
         let answers = '';
         const ask = (index, name) => {
@@ -1800,7 +2102,10 @@ export class Cascade {
      *  and their ids onto `matched` in the order they were tried. */
     _matchInto(index, el, out, matched, 
     /** The rules to try, where some are known not to match without it. */
-    live) {
+    live, 
+    /** Whether `el` is matched where a `<use>` draws a copy of it
+     *  (`_copyTop`). */
+    inCopy = false) {
         // 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;
@@ -1814,19 +2119,37 @@ export class Cascade {
                 if (!mediaMatches(rule.media, width, this.look.colorScheme, height, this.scale)) {
                     continue;
                 }
-                if (!indexed.compiled) {
-                    indexed.compiled = true;
-                    try {
-                        indexed.match = compileSelector(rule.selector, this._adapter, this._pseudos);
+                let match;
+                if (inCopy) {
+                    if (!indexed.inCopyCompiled) {
+                        indexed.inCopyCompiled = true;
+                        try {
+                            // what it finds above an element depends on which copy it is
+                            // in, so none of it is kept
+                            indexed.inCopy = compileSelector(rule.selector, this._copyAdapter, this._pseudos, false);
+                        }
+                        catch {
+                            indexed.inCopy = null;
+                        }
                     }
-                    catch {
-                        // A selector this matcher does not know (`::-moz-…`, a CSS4 form
-                        // it has not learnt) drops out of the cascade rather than out of
-                        // the render.
-                        indexed.match = null;
+                    match = indexed.inCopy;
+                }
+                else {
+                    if (!indexed.compiled) {
+                        indexed.compiled = true;
+                        try {
+                            indexed.match = compileSelector(rule.selector, this._adapter, this._pseudos);
+                        }
+                        catch {
+                            // A selector this matcher does not know (`::-moz-…`, a CSS4
+                            // form it has not learnt) drops out of the cascade rather than
+                            // out of the render.
+                            indexed.match = null;
+                        }
                     }
+                    match = indexed.match;
                 }
-                if (!indexed.match || !indexed.match(el))
+                if (!match || !match(el))
                     continue;
                 matched?.push(indexed.id);
                 if (out === null)
@@ -1855,6 +2178,16 @@ export class Cascade {
         const out = [];
         this._matchInto(this._index, el, out, matched);
         const hints = presentationHints(el);
+        // the page's colour schemes are its root's where no rule sets them
+        if (this.pageColorScheme &&
+            el.name === 'html' &&
+            !(el.parent && isTag(el.parent))) {
+            hints.push({
+                prop: 'color-scheme',
+                value: this.pageColorScheme,
+                important: false,
+            });
+        }
         if (hints.length) {
             out.push({
                 origin: Origin.Presentation,
@@ -1920,9 +2253,22 @@ function dropPaletteChrome(out) {
     if (!chrome)
         return;
     let styled = false;
+    // `appearance` by the value that wins: `appearance: none; appearance:
+    // auto` keeps the control's look, as a reset a page takes back does
+    let appearance = '';
     for (let j = i; j < out.length && !styled; j += 1) {
-        styled = pick(out[j]).some(stylesChrome);
+        for (const d of pick(out[j])) {
+            if (d.prop === 'appearance' || d.prop === '-webkit-appearance') {
+                const v = d.value.trim().toLowerCase();
+                if (/^[a-z-]+$/.test(v))
+                    appearance = v;
+            }
+            else if (stylesChrome(d))
+                styled = true;
+        }
     }
+    if (appearance === 'none')
+        styled = true;
     if (!styled)
         return;
     let kept = 0;
@@ -1935,8 +2281,9 @@ function dropPaletteChrome(out) {
     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`. */
+ *  `is_background` and `is_border` properties and their shorthands. An
+ *  `appearance` of `none` does too, where it is the one that wins
+ *  (`dropPaletteChrome`). */
 function stylesChrome(d) {
     const prop = d.prop;
     if (prop.startsWith('background')) {
@@ -1945,8 +2292,7 @@ function stylesChrome(d) {
     if (prop.startsWith('border')) {
         return prop !== 'border-collapse' && prop !== 'border-spacing';
     }
-    return ((prop === 'appearance' || prop === '-webkit-appearance') &&
-        d.value.trim().toLowerCase() === 'none');
+    return false;
 }
 /** 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. */
@@ -1960,17 +2306,21 @@ function asRoot(style) {
  *  fragment, whose style the root box takes (`rootStyle`), and never a
  *  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. */
+ *  `:focus` and its two kin are here as matching nothing, and each cascade
+ *  answers them from where the focus is (`Cascade.setFocus`): no element
+ *  of the document takes it itself — 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) => el.name === 'html' && !(el.parent && isTag(el.parent)),
-    focus: () => false,
-    'focus-visible': () => false,
-    'focus-within': () => false,
+    focus: (_el) => false,
+    'focus-visible': (_el) => false,
+    'focus-within': (_el) => false,
+    // css-select has none, and threw on one, so `:not(:target)` matched
+    // nothing: a document is drawn at no fragment, an SVG image at its own
+    target: (_el) => 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)`
@@ -1980,29 +2330,32 @@ const PSEUDOS = {
             .map((range) => range.trim().replace(/^['"]|['"]$/g, ''))
             .filter((range) => range.length > 0)
             .map((range) => asciiLower(range).split('-'));
-        let root = el;
-        for (let node = el; node;) {
-            const value = node.attribs['xml:lang'] ?? node.attribs.lang;
-            if (value != null) {
-                if (!value)
-                    return ranges.some((range) => range[0] === '');
-                const tag = asciiLower(value).split('-');
-                return ranges.some((range) => langRangeMatches(tag, range));
-            }
-            root = node;
-            const parent = node.parent;
-            node = parent && isTag(parent) ? parent : null;
-        }
-        // with no element saying, the document's, as its `<meta>` sets it —
-        // searched from the document, where a fragment's `<meta>` is a
-        // sibling of what it covers
-        const pragma = pragmaLanguage(root.parent ?? root);
-        if (!pragma)
+        const value = languageOf(el);
+        if (!value)
             return ranges.some((range) => range[0] === '');
-        const tag = asciiLower(pragma).split('-');
+        const tag = asciiLower(value).split('-');
         return ranges.some((range) => langRangeMatches(tag, range));
     },
 };
+/**
+ * An element's language: the `lang` or `xml:lang` of the nearest element
+ * from it up that says one, or with none saying, the document's, as its
+ * `<meta http-equiv="content-language">` sets it — searched from the
+ * document, where a fragment's `<meta>` is a sibling of what it covers.
+ * '' where none does, or the nearest says ''.
+ */
+export function languageOf(el) {
+    let root = el;
+    for (let node = el; node;) {
+        const value = node.attribs['xml:lang'] ?? node.attribs.lang;
+        if (value != null)
+            return value;
+        root = node;
+        const parent = node.parent;
+        node = parent && isTag(parent) ? parent : null;
+    }
+    return pragmaLanguage(root.parent ?? root);
+}
 /** 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[sld]?v(?:w|h|i|b|min|max)(?![\w-])/i;
@@ -2053,6 +2406,34 @@ function pragmaLanguage(root) {
     return lang;
 }
 const PRAGMA_LANGUAGE = new WeakMap();
+/**
+ * The page's supported colour schemes: the content of the first `<meta
+ * name="color-scheme">` that is a `color-scheme` value (HTML 4.2.5.4), or
+ * null. Looked for where a `<meta>` is, at the top of a fragment and in
+ * the `<html>` and its `<head>`, and not through the body.
+ */
+export function metaColorScheme(root) {
+    const stack = [root];
+    while (stack.length) {
+        const node = stack.pop();
+        for (const child of node.children) {
+            if (!isTag(child))
+                continue;
+            const el = child;
+            if (el.name === 'meta') {
+                const name = el.attribs.name?.trim().toLowerCase();
+                const content = el.attribs.content?.trim();
+                if (name === 'color-scheme' && content && usedColorScheme(content)) {
+                    return content;
+                }
+            }
+            else if (el.name === 'html' || el.name === 'head') {
+                stack.push(el);
+            }
+        }
+    }
+    return null;
+}
 /** RFC 4647's extended filtering, of a tag's subtags by a range's, as
  *  css-select does it. */
 function langRangeMatches(tag, range) {
@@ -2096,6 +2477,25 @@ function setsContent(c) {
 }
 /** Whether a rule's declarations set a custom property, by the array. */
 const CUSTOM_IN = new WeakMap();
+/** The document's first element with an id, looked for from one of its
+ *  elements: `shapeStyles`' answer where no index of them is handed in. */
+function elementById(from, id) {
+    let top = from;
+    while (top.parent)
+        top = top.parent;
+    const stack = [...top.children].reverse();
+    for (let node = stack.pop(); node; node = stack.pop()) {
+        if (node.type !== 'tag')
+            continue;
+        const el = node;
+        if (el.attribs.id === id)
+            return el;
+        for (let i = el.children.length - 1; i >= 0; i -= 1) {
+            stack.push(el.children[i]);
+        }
+    }
+    return null;
+}
 /** Whether declarations set a property a shape in a drawing has. */
 function declaresShape(declarations) {
     for (const d of declarations)