@react-x11/components 0.14.0 → 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 { svgSizeHint } from '../svg.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, 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
@@ -104,6 +108,10 @@ class RuleIndex {
     reaches(el) {
         if (this.universal.length || this.byTag.has(tagOf(el)))
             return true;
+        return this.names(el);
+    }
+    /** Whether a bucket here is for `el`'s id, or for a class of its. */
+    names(el) {
         if (this.byId.size) {
             const id = attr(el, 'id');
             if (id && this.byId.has(id))
@@ -120,18 +128,24 @@ class RuleIndex {
         }
         return false;
     }
-    add(rule) {
+    add(rule, key = rightmostKey(rule.selector)) {
         this.size += 1;
         const indexed = {
             rule,
             match: null,
             compiled: false,
             id: this._nextId++,
+            needs: null,
+            root: null,
+            inCopy: null,
+            inCopyCompiled: false,
         };
         if (rule.selector.includes(':hover') || rule.selector.includes(':active')) {
             this.hoverSensitive = true;
         }
-        const key = rightmostKey(rule.selector);
+        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);
@@ -143,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);
@@ -216,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,
@@ -225,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. */
@@ -321,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({
@@ -355,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;
@@ -385,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;
@@ -399,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;
                 }
@@ -421,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)
@@ -462,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) {
+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: PSEUDOS,
-        cacheResults: !POINTER_PSEUDO.test(selector),
+        pseudos,
+        cacheResults: cache && !STATE_PSEUDO.test(selector),
     });
 }
 function mapBucket(map, key) {
@@ -534,7 +575,10 @@ function rightmostKey(selector) {
             start = i + 1;
         }
     }
-    const compound = selector.slice(start);
+    return compoundKey(selector.slice(start));
+}
+/** A compound selector's most selective key (`rightmostKey`). */
+function compoundKey(compound) {
     let id = null;
     let cls = null;
     let tag = null;
@@ -577,6 +621,53 @@ function rightmostKey(selector) {
         return { kind: 'tag', name: tag };
     return { kind: 'any', name: '' };
 }
+/**
+ * The ids and classes a selector asks of its subject's ancestors: for each
+ * compound a descendant or a child combinator follows, its id, or else its
+ * first class, as `#name` or `.name`. Such a compound is an ancestor of
+ * the subject — one a sibling combinator follows is a sibling of one — so
+ * an element with no ancestor of some such name is not the rule's, which
+ * is known without matching it. A compound with neither asks nothing.
+ */
+function ancestorKeys(selector) {
+    const keys = [];
+    const compounds = compoundsOf(selector);
+    for (let i = 0; i < compounds.length - 1; i += 1) {
+        const { text, next } = compounds[i];
+        if (next !== ' ' && next !== '>')
+            continue;
+        const key = compoundKey(text);
+        if (key.kind === 'id')
+            keys.push(`#${key.name}`);
+        else if (key.kind === 'class')
+            keys.push(`.${key.name}`);
+    }
+    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) {
@@ -591,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,
@@ -618,23 +815,31 @@ export class Cascade {
         marker: new RuleIndex(),
         selection: new RuleIndex(),
     };
+    /** The author's rules that could style a shape in a drawing: the ones
+     *  that declare a property a shape has (`shapes.ts`) and whose subject
+     *  is no element of HTML's alone. They are in `_index` too, for the
+     *  elements that have boxes; these are asked of the ones in an inline
+     *  `<svg>`, which have none (`shapeStyles`). */
+    _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
@@ -681,7 +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;
-    constructor(sheets, look, viewportWidth, viewportHeight, scale = 1, xHeight = null, zeroWidth = null, normalLine = null, families = null) {
+    /** 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, 
+    /** 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;
@@ -690,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;
@@ -712,9 +948,18 @@ export class Cascade {
                 const pseudo = splitPseudoElement(rule);
                 if (pseudo)
                     this._pseudo[pseudo.which].add(pseudo.rule);
-                else
-                    this._index.add(rule);
-                this._noteHover((pseudo?.rule ?? rule).selector);
+                else {
+                    const key = rightmostKey(rule.selector);
+                    this._index.add(rule, key);
+                    if (rule.order >= 0 &&
+                        (key.kind !== 'tag' || SHAPE_TAGS.has(key.name)) &&
+                        declaresShape(rule.declarations)) {
+                        this._shapes.add(rule, key);
+                    }
+                }
+                const selector = (pseudo?.rule ?? rule).selector;
+                this._hoverRules.note(selector);
+                this._focusRules.note(selector);
             }
             for (const bp of sheet.breakpoints)
                 breakpoints.add(bp);
@@ -744,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. */
@@ -774,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
@@ -783,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;
     }
@@ -804,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
@@ -826,69 +1103,17 @@ 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. */
     _compile(selector) {
         try {
-            return compileSelector(selector, this._adapter);
+            return compileSelector(selector, this._adapter, this._pseudos);
         }
         catch {
             return null;
@@ -1053,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];
@@ -1336,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
@@ -1450,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
@@ -1527,6 +1761,304 @@ export class Cascade {
         // the root is still the initial containing block.
         return { style: asRoot(this.styleFor(synthetic, parent, false)), html };
     }
+    /** Whether any rule could style a shape in a drawing: a document with
+     *  none asks nothing of its drawings (`shapeStyles`). */
+    get stylesShapes() {
+        return this._shapes.size > 0;
+    }
+    /** Whether a pointer move can change what a rule gives a shape in a
+     *  drawing. */
+    get shapesFollowPointer() {
+        return this._shapes.hoverSensitive;
+    }
+    /**
+     * What the rules give the elements of an inline drawing, `root` and what
+     * is in it, or null where none reaches one: the narrow cascade of
+     * `shapes.ts`. `style` is the root's computed style — its `color`, its
+     * custom properties and its font size are what a value in the drawing is
+     * read against, as though every element in it had inherited them, which
+     * all but one a rule gives its own has.
+     *
+     * An element's rules and its `style` attribute are put in cascade order,
+     * and each property is the last valid declaration's. The presentation
+     * attributes are below them all (SVG 2, 6.2), and `SvgView` reads those
+     * 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, copies = null) {
+        const index = this._shapes;
+        if (!index.size)
+            return null;
+        // The rules kept by a class or an id are asked of the elements with
+        // that name. The rest — `.dark .logo path`, `.menu [aria-hidden]` — are
+        // asked of every `<path>`, or of every element, and nearly all of them
+        // are for some other part of the page: each says so by the class or the
+        // 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. A copy's tree has nothing around it.
+        const needs = (this._shapeNeeds ??= this._needsOfShapes());
+        let found = new Set();
+        const asks = needs.classes.size > 0 || needs.ids.size > 0;
+        const note = (el) => {
+            if (needs.ids.size) {
+                const id = attr(el, 'id');
+                if (id && needs.ids.has(id))
+                    found.add(`#${id}`);
+            }
+            if (needs.classes.size) {
+                const className = attr(el, 'class');
+                if (className) {
+                    for (const name of className.split(/\s+/)) {
+                        if (needs.classes.has(name))
+                            found.add(`.${name}`);
+                    }
+                }
+            }
+        };
+        if (asks) {
+            let at = root.parent;
+            while (at && at.type === 'tag') {
+                note(at);
+                at = at.parent;
+            }
+        }
+        const live = (indexed) => {
+            const keys = indexed.needs;
+            if (keys)
+                for (const key of keys)
+                    if (!found.has(key))
+                        return false;
+            return true;
+        };
+        // The root's box has its paint from its computed style, so most of the
+        // rules that name a drawing by its class — an icon set's — have
+        // nothing else to say of it.
+        const liveForRoot = (indexed) => (indexed.root ??= declaresRootShape(indexed.rule.declarations)) &&
+            live(indexed);
+        /** 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);
+            }
+        };
+        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,
+                units: {
+                    em: style.fontSize,
+                    rem: (this._root ?? this.initial).fontSize,
+                    vw: this.viewportWidth,
+                    vh: this.viewportHeight,
+                    scale: this.scale,
+                    initial: this.initial,
+                    systemColors: this._systemColors,
+                },
+            };
+            let own = null;
+            for (const c of candidates) {
+                for (const d of pick(c)) {
+                    if (!isShapeProp(d.prop))
+                        continue;
+                    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`
+                    const value = shapeValue(d.prop, d.vars ? (substituteIn(d.value, style.custom) ?? 'unset') : d.value, ctx);
+                    if (value !== null)
+                        (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)
+                return;
+            (of ??= new Map()).set(el, own);
+            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 || used ? { of: of ?? NO_SHAPES, used, key } : null;
+    }
+    /** `ShapeNeeds`, and each such rule's own (`IndexedRule.needs`). */
+    _needsOfShapes() {
+        const index = this._shapes;
+        const needs = {
+            classes: new Set(),
+            ids: new Set(),
+            universal: false,
+            tags: new Set(),
+        };
+        const read = (bucket) => {
+            let free = false;
+            for (const indexed of bucket) {
+                const keys = ancestorKeys(indexed.rule.selector);
+                indexed.needs = keys;
+                if (!keys.length)
+                    free = true;
+                for (const key of keys) {
+                    (key[0] === '#' ? needs.ids : needs.classes).add(key.slice(1));
+                }
+            }
+            return free;
+        };
+        needs.universal = read(index.universal);
+        for (const [tag, bucket] of index.byTag) {
+            if (read(bucket))
+                needs.tags.add(tag);
+        }
+        return needs;
+    }
     /**
      * Whether the pointer's move from `was` to where it is changed which
      * rules match `el`, or its `::before`, `::after` or another of its
@@ -1534,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) => {
@@ -1564,7 +2100,12 @@ export class Cascade {
     }
     /** 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) {
+    _matchInto(index, el, out, matched, 
+    /** The rules to try, where some are known not to match without it. */
+    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;
@@ -1572,23 +2113,43 @@ export class Cascade {
             if (!bucket)
                 return;
             for (const indexed of bucket) {
+                if (live !== undefined && !live(indexed))
+                    continue;
                 const rule = indexed.rule;
                 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);
+                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)
@@ -1617,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,
@@ -1682,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;
@@ -1697,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')) {
@@ -1707,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. */
@@ -1722,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)`
@@ -1742,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;
@@ -1815,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) {
@@ -1858,6 +2477,68 @@ 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)
+        if (isShapeProp(d.prop))
+            return true;
+    return false;
+}
+/** Whether declarations set one a drawing's root does not have from its
+ *  box's style (`ROOT_BOX_PROPS`). */
+function declaresRootShape(declarations) {
+    for (const d of declarations) {
+        if (isShapeProp(d.prop) && !ROOT_BOX_PROPS.has(d.prop))
+            return true;
+    }
+    return false;
+}
+/** A `style` attribute's declarations of a shape's properties, as
+ *  candidates: over every rule, and its `!important` ones over theirs. */
+function pushInlineShapes(out, inline) {
+    const declarations = parseDeclarations(inline).filter((d) => isShapeProp(d.prop));
+    const normal = declarations.filter((d) => !d.important);
+    const important = declarations.filter((d) => d.important);
+    if (normal.length) {
+        out.push({
+            origin: Origin.Inline,
+            layer: null,
+            specificity: 0,
+            order: 0,
+            declarations: normal,
+            only: -1,
+        });
+    }
+    if (important.length) {
+        out.push({
+            origin: Origin.InlineImportant,
+            layer: null,
+            specificity: 0,
+            order: 0,
+            declarations: important,
+            only: -1,
+        });
+    }
+}
 function pick(c) {
     return c.only < 0 ? c.declarations : [c.declarations[c.only]];
 }
@@ -2252,6 +2933,23 @@ function lengthAttr(value) {
     const n = parseFloat(v);
     return Number.isFinite(n) ? `${n}px` : v;
 }
+/** A number and a unit, as an SVG's `width` and `height` are written. */
+const SVG_LENGTH = /^\s*([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)\s*([a-z]*)\s*$/i;
+/**
+ * The `width`/`height` of an inline `<svg>` as CSS: they are presentation
+ * attributes for the properties of the same names (SVG 2, 5.1.1), so
+ * `height="50%"` is a percentage of the containing block like a style's.
+ * A bare number is pixels; null for what CSS would not parse.
+ */
+function svgSizeHint(value) {
+    const v = value.trim();
+    if (/^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?%$/i.test(v))
+        return v;
+    const m = SVG_LENGTH.exec(v);
+    if (!m)
+        return null;
+    return m[2] ? v : `${parseFloat(m[1])}px`;
+}
 function closestTable(el) {
     let node = el.parent;
     while (node) {