@ng-native/fabric 0.8.0 → 0.10.0

package/dist/css.js

@@ -222,10 +222,11 @@ const attributeText = (actual, test) => test.insensitive ? String(actual).toLowe
  *
  * A prop set to `false` or `null` counts as absent, matching the web, where an attribute is either
  * present or not and a `disabled` binding that evaluates false removes it. Everything else is
- * compared as a string, so `[tabIndex="0"]` works against a numeric prop.
+ * compared as a string, so `[tabIndex="0"]` works against a numeric prop. `class` is no prop: it
+ * is the element's class list, as the attribute would spell it.
  */
 function matchesAttribute(node, test) {
-    const actual = node.props[test.name];
+    const actual = test.name === 'class' ? classAttribute(node) : node.props[test.name];
     if (actual === undefined || actual === null || actual === false)
         return false;
     if (test.operator === undefined)
@@ -235,6 +236,8 @@ function matchesAttribute(node, test) {
         return false;
     return matchesValue(attributeText(actual, test), test.operator, test.value);
 }
+/** The classes of a node in the order they were set, one space between each; none is absent. */
+const classAttribute = (node) => node.classes?.size ? [...node.classes].join(' ') : undefined;
 /** The operators an empty value can still match by: `=` and `|=`. */
 const EMPTY_MATCHES = new Set(['equal', 'dash-match']);
 /** Whether an attribute's value, as `attributeText` gives it, passes an operator's test. */
@@ -256,6 +259,16 @@ function matchesValue(value, operator, expected) {
             return value === expected || value.startsWith(`${expected}-`);
     }
 }
+/**
+ * Whether a node is one a compound written before `::ng-deep` may be: an element of the view of
+ * the component the sheet is of. Its host is one only where the compound says `:host`, which is
+ * asked of it already: a class a parent gives the host is no anchor.
+ */
+function ownedBy(node, compound, sheet) {
+    if (compound.host !== undefined || compound.hostContext !== undefined)
+        return true;
+    return node.sheet === sheet;
+}
 /*
  * Exempt from the complexity limit deliberately. This is a flat conjunction of independent
  * guards, not nested logic: cyclomatic complexity scores the two the same, and they are not the
@@ -277,6 +290,8 @@ function matchesCompound(node, compound, sheet) {
     }
     if (compound.type !== undefined && compound.type !== node.name)
         return false;
+    if (compound.own !== undefined && !ownedBy(node, compound, sheet))
+        return false;
     if (compound.id !== undefined && node.props['nativeID'] !== compound.id)
         return false;
     for (const className of compound.classes) {
@@ -336,13 +351,15 @@ function matchesCompound(node, compound, sheet) {
         }
     }
     if (compound.hostContext) {
-        // The host itself counts, as it does on the web.
-        let found = false;
-        for (let n = node; n && !found; n = n.parent) {
-            found = compound.hostContext.some((option) => matchesCompound(n, option, sheet));
+        for (const context of compound.hostContext) {
+            // The host itself counts, as it does on the web.
+            let found = false;
+            for (let n = node; n && !found; n = n.parent) {
+                found = matchesCompound(n, context, sheet);
+            }
+            if (!found)
+                return false;
         }
-        if (!found)
-            return false;
     }
     return true;
 }
@@ -428,6 +445,82 @@ function matchAny(first, next, rule, index, compound, sheet) {
     }
     return false;
 }
+const BIT_OF = new Map();
+/** Past this many names the bits are worked out again: ids made per row would be kept for ever. */
+const BITS_KEPT = 4096;
+/** The bit a class, a name or an id has among the sixty-four. */
+function bitOf(kind, name) {
+    const key = kind + name;
+    let bit = BIT_OF.get(key);
+    if (bit === undefined) {
+        let hash = 0;
+        for (let at = 0; at < key.length; at++)
+            hash = (Math.imul(hash, 31) + key.charCodeAt(at)) | 0;
+        bit = (hash ^ (hash >>> 16)) & 63;
+        // A bit is its name's hash, so one forgotten is the same when it is asked for again.
+        if (BIT_OF.size >= BITS_KEPT)
+            BIT_OF.clear();
+        BIT_OF.set(key, bit);
+    }
+    return bit;
+}
+const NAMED_ABOVE = new WeakMap();
+/**
+ * The classes, names and ids a rule names of the node's ancestors: of each part joined to what
+ * is on its right by a descendant or a child combinator. One joined by a sibling combinator is
+ * no ancestor of the node, though the parts to its left that are ancestors of it are ancestors
+ * of the node as well. Null where it names none, a rule of one part among them.
+ */
+function namedAbove(rule) {
+    let named = NAMED_ABOVE.get(rule);
+    if (named !== undefined)
+        return named;
+    let [low, high] = [0, 0];
+    const add = (bit) => {
+        if (bit < 32)
+            low |= 1 << bit;
+        else
+            high |= 1 << (bit - 32);
+    };
+    for (let at = 0; at < rule.compounds.length - 1; at++) {
+        const joined = rule.combinators[at];
+        if (joined === 'next-sibling' || joined === 'later-sibling')
+            continue;
+        const compound = rule.compounds[at];
+        for (const className of compound.classes)
+            add(bitOf('.', className));
+        if (compound.type !== undefined)
+            add(bitOf('<', compound.type));
+        if (compound.id !== undefined)
+            add(bitOf('#', compound.id));
+    }
+    named = low === 0 && high === 0 ? null : [low, high];
+    NAMED_ABOVE.set(rule, named);
+    return named;
+}
+/** The classes, names and ids of a node's ancestors, as bits. */
+function bitsAbove(node) {
+    let [low, high] = [0, 0];
+    const add = (bit) => {
+        if (bit < 32)
+            low |= 1 << bit;
+        else
+            high |= 1 << (bit - 32);
+    };
+    for (let up = node.parent; up; up = up.parent) {
+        if (up.classes)
+            for (const className of up.classes)
+                add(bitOf('.', className));
+        if (up.name !== undefined)
+            add(bitOf('<', up.name));
+        const id = up.props?.['nativeID'];
+        if (typeof id === 'string')
+            add(bitOf('#', id));
+    }
+    return [low, high];
+}
+/** Whether what is above a node lacks something a rule names there. */
+const lacks = (above, named) => (named[0] & ~above[0]) !== 0 || (named[1] & ~above[1]) !== 0;
 const TAKES_PARENTS = new WeakMap();
 /** Whether a rule has an `inherit` in it, which is settled from the parent's own style. */
 function takesParents(rule) {
@@ -491,8 +584,9 @@ function stepsAlong(combinators) {
  * matched again by other means, and which way it reaches is not worked out.
  */
 function countSiblings(compound, reach, withinHas) {
-    // Which is first and which is last is the ends, and no count.
-    const counts = (compound.nth ?? []).filter((test) => test.a !== 0 || test.b !== 1);
+    // Which is first and which is last is the ends, and no count. Not of one name: the first of
+    // its name is wherever the others of it are not.
+    const counts = (compound.nth ?? []).filter((test) => test.a !== 0 || test.b !== 1 || test.ofType);
     if (counts.some((test) => withinHas || !test.fromEnd))
         reach.after = Infinity;
     if (counts.some((test) => withinHas || test.fromEnd))
@@ -532,10 +626,13 @@ export function placeReadElsewhere(sheet) {
                 if (joined === 'next-sibling' || joined === 'later-sibling')
                     return;
                 const run = rule.compounds.slice(start, at + 1);
+                // What the run is in: the compound before it, which every element of it is under.
+                const list = rule.compounds[start - 1];
+                const child = rule.combinators[start - 1] === 'child';
                 start = at + 1;
                 const above = at < rule.compounds.length - 1;
                 if (above && (run.length > 1 || run.some(readsPlace)))
-                    elsewhere.push(compound);
+                    elsewhere.push({ compound, above: list?.classes, child });
             });
         }
         known = elsewhere;
@@ -562,7 +659,7 @@ function placeReadAbove(compound, elsewhere) {
     ];
     for (const inner of above)
         if (readsPlace(inner))
-            elsewhere.push(inner);
+            elsewhere.push({ compound: inner });
     for (const inner of nestedCompounds(compound))
         placeReadAbove(inner, elsewhere);
 }
@@ -596,10 +693,10 @@ function matchesNth(node, test) {
     const siblings = node.parent?.children;
     if (!siblings)
         return false;
-    if (test.a === 0 && test.b === 1) {
+    if (test.a === 0 && test.b === 1 && !test.ofType) {
         return (test.fromEnd ? lastElement(siblings) : firstElement(siblings)) === node;
     }
-    const from = countPosition(node, siblings, test.fromEnd === true);
+    const from = countPosition(node, siblings, test.fromEnd === true, test.ofType === true);
     if (from === 0)
         return false;
     // `an + b` for some whole number of steps, which is what CSS counts from.
@@ -817,11 +914,11 @@ function byImportance(matched, places) {
     }));
     return [...plain, ...important];
 }
-function countPosition(node, siblings, fromEnd) {
+function countPosition(node, siblings, fromEnd, ofType) {
     let position = 0;
     let seen = 0;
     for (const sibling of siblings) {
-        if (!isElement(sibling))
+        if (!isElement(sibling) || (ofType && sibling.name !== node.name))
             continue;
         seen++;
         if (sibling === node)
@@ -1094,6 +1191,13 @@ const DEFAULT_FONT_SIZE = 16;
 const EMPTY = {};
 /** Stands in for the parent of a root node, so the comparison needs no null case. */
 const ROOT_CONTEXT = {};
+/** The `scope` over a node with no parent. */
+const ROOT_SCOPE = {};
+/**
+ * The `scope` of the one cache every node with nothing to style shares. It is no one node's, so
+ * nothing styled under it, or holding it, is taken to match what it did.
+ */
+const SHARED_SCOPE = {};
 /** Shared empty token map, for the overwhelmingly common case of a subtree defining none. */
 const NO_TOKENS = {};
 /**
@@ -1116,6 +1220,42 @@ function subjectsOf(sheet) {
     subjects.set(sheet, (found = all));
     return found;
 }
+const HAS_ABOVE = new WeakMap();
+/** Whether a compound, or one it asks of the same node, uses `:has()`. */
+const asksBeneath = (compound) => compound.has !== undefined ||
+    [...(compound.not ?? []), ...(compound.is ?? []).flat()].some(asksBeneath);
+/**
+ * The boxes above the styled node that a compound asks `:has()` of: the compound's own node,
+ * where that is not the styled one, and each box it is asked to be inside,
+ * `.body:is(.card:has(.x) *) .title`.
+ */
+function* boxesAsked(compound, styled) {
+    if (!styled && asksBeneath(compound))
+        yield compound;
+    for (const key of ['ancestors', 'parents', 'hostContext']) {
+        for (const outer of compound[key] ?? [])
+            yield* boxesAsked(outer, false);
+    }
+}
+/** Each box a sheet's rules ask `:has()` of above the node they style. */
+export function hasAbove(sheet) {
+    let known = HAS_ABOVE.get(sheet);
+    if (known === undefined) {
+        const found = [];
+        for (const rule of sheet.rules) {
+            const last = rule.compounds.length - 1;
+            for (const [at, compound] of rule.compounds.entries()) {
+                for (const box of boxesAsked(compound, at === last)) {
+                    const subjects = noSubjects();
+                    noteSubject(subjects, rule);
+                    found.push({ classes: box.classes, subjects });
+                }
+            }
+        }
+        HAS_ABOVE.set(sheet, (known = found));
+    }
+    return known;
+}
 /** Note in `into` what a rule is for. */
 function noteSubject(into, rule) {
     const subject = rule.compounds.at(-1);
@@ -1147,17 +1287,29 @@ function classReach(sheet) {
     for (const rule of sheet.rules) {
         const every = new Set();
         collectClasses(rule, every, reads, named);
-        const inside = classesInside(rule);
+        const { own, inside } = classPlaces(rule);
         for (const name of every) {
-            if (!inside.has(name))
+            if (!own.has(name) && !inside.has(name))
                 classes.set(name, true);
-            else
+            if (own.has(name))
+                noteOwn(classes, name);
+            if (inside.has(name))
                 noteInside(classes, name, rule);
         }
     }
     reaches.set(sheet, (found = { classes, reads, named }));
     return found;
 }
+/** Note a rule as one for the element that has a class. */
+function noteOwn(found, name) {
+    const subjects = found.get(name);
+    if (subjects === true)
+        return;
+    if (subjects)
+        subjects.own = true;
+    else
+        found.set(name, { ...noSubjects(), own: true });
+}
 /** Note a rule as one that names a class as what its element is inside. */
 function noteInside(found, name, rule) {
     let subjects = found.get(name);
@@ -1181,6 +1333,8 @@ const noSubjects = () => ({
     inside: new Set(),
     any: false,
 });
+/** The reach of classes that rules are for the element of, and for nothing under it. */
+const OWN_ALONE = { ...noSubjects(), own: true };
 /** Add to `into` what `from` is for. */
 function addSubjects(into, from) {
     for (const name of from.classes)
@@ -1190,30 +1344,67 @@ function addSubjects(into, from) {
     for (const name of from.inside)
         into.inside.add(name);
     into.any ||= from.any;
+    if (from.own)
+        into.own = true;
 }
 /**
- * The classes a rule names only as what its element is inside: on a compound before the last,
- * with nothing but `>` and a space between there and the element, and nowhere else in the rule.
+ * Where a rule names each class it names, for the classes it names in no other place than these:
+ *
+ * - `own`, on the element the rule is for: its own classes, and those in `:is()` and `:not()` of
+ *   it, which are asked of that element;
+ * - `inside`, as what that element is inside: the classes of a compound before the last, with
+ *   nothing but `>` and a space between there and the element, and those of what `:is(.box *)`
+ *   and `:is(.box > *)` put over it.
+ *
+ * A class named anywhere else in the rule is in neither, whatever else names it: beside the
+ * element, inside `:has()` or `:host-context()`, or in `:not()` of a box the element is in.
  */
-function classesInside(rule) {
+function classPlaces(rule) {
+    const own = new Set();
     const inside = new Set();
     const elsewhere = new Set();
     const last = rule.compounds.length - 1;
     let under = true;
     for (let index = last; index >= 0; index--) {
         const compound = rule.compounds[index];
-        if (index < last) {
-            const joined = rule.combinators[index];
-            under &&= joined === 'child' || joined === 'descendant';
+        if (index === last) {
+            placeClasses(compound, own, inside, elsewhere);
+            continue;
         }
-        const { classes, ...rest } = compound;
-        collectClasses(rest, elsewhere, []);
-        for (const name of classes)
-            (index < last && under ? inside : elsewhere).add(name);
-    }
-    for (const name of elsewhere)
+        const joined = rule.combinators[index];
+        under &&= joined === 'child' || joined === 'descendant';
+        // A box the element is under, by its classes and by those it is asked to have or not to,
+        // `.box:not(.busy) .row`: each is asked of that box, as its own are.
+        const over = under ? inside : elsewhere;
+        placeClasses(compound, over, over, elsewhere);
+    }
+    for (const name of elsewhere) {
+        own.delete(name);
         inside.delete(name);
-    return inside;
+    }
+    return { own, inside };
+}
+/**
+ * The classes of a compound asked of the element a rule is for, into `at`, and of the compounds
+ * it puts over that element, into `inside`. What any other part of it names goes `elsewhere`:
+ * a part read here by name is one this knows the reach of, and one added later is not.
+ */
+function placeClasses(compound, at, inside, elsewhere) {
+    const { classes, is, not, ancestors, parents, type: _t, id: _i, root: _r, pseudo: _p, ...rest } = compound;
+    for (const name of classes)
+        at.add(name);
+    for (const alternatives of is ?? []) {
+        for (const option of alternatives)
+            placeClasses(option, at, inside, elsewhere);
+    }
+    for (const excluded of not ?? [])
+        placeClasses(excluded, at, inside, elsewhere);
+    // What is over the element is over it whichever of these said so, and what is over that is too.
+    for (const above of [...(ancestors ?? []), ...(parents ?? [])]) {
+        placeClasses(above, inside, inside, elsewhere);
+    }
+    // `attributes` among them: a test of the `class` attribute is answered through `classTests`.
+    collectClasses(rest, elsewhere, []);
 }
 /** What a rule declares, which names no element. */
 const DECLARED = new Set(['declarations', 'important', 'tokens']);
@@ -1283,12 +1474,22 @@ function writtenFor(of, node) {
     }
     return false;
 }
+/**
+ * Whether a node has its answer for this commit already. Not one marked since it was given the
+ * one cache every box with nothing to style shares, see `unstyled`: another of them resolved in
+ * this commit has set that cache's epoch, and it is not this node's answer.
+ */
+function resolvedIn(epoch, cache, node) {
+    return (cache !== null && cache.epoch === epoch && (!node.styleDirty || cache.context !== ROOT_CONTEXT));
+}
 function emptyCacheFor(epoch, generation) {
     return {
         epoch,
         generation,
         context: ROOT_CONTEXT,
         parentContext: ROOT_CONTEXT,
+        scope: SHARED_SCOPE,
+        parentScope: SHARED_SCOPE,
         style: EMPTY,
         inherited: EMPTY,
         tokens: NO_TOKENS,
@@ -1554,11 +1755,19 @@ export class StyleResolver {
     /** The tests of the `class` attribute itself in those sheets, which any class may answer. */
     classTests = [];
     noted = new WeakSet();
+    /**
+     * The sheets with a rule written with `::ng-deep`, which is for what is under the component
+     * in the views of the components it holds. None in most apps, and nothing is asked then.
+     */
+    deepSheets = new Set();
+    deepIndexes = new WeakMap();
     /** Read the classes a sheet names, once, as soon as any node is given it. */
     noteSheet(sheet) {
         if (!sheet || this.noted.has(sheet))
             return;
         this.noted.add(sheet);
+        if (sheet.rules.some((rule) => rule.deep))
+            this.deepSheets.add(sheet);
         const { classes, reads, named } = classReach(sheet);
         for (const [name, how] of classes)
             this.noteReach(name, how);
@@ -1584,20 +1793,38 @@ export class StyleResolver {
         else
             addSubjects(had ?? this.reach.set(name, noSubjects()).get(name), how);
     }
+    /** Whether a class's reach names any element under the one that has it. */
+    reachesUnder(subjects) {
+        return (subjects.any ||
+            subjects.classes.size > 0 ||
+            subjects.types.size > 0 ||
+            subjects.inside.size > 0);
+    }
     /**
      * What classes coming to an element or going from it can restyle: `true` for it and all
-     * under it and after it, as any change to it does; the elements under it to restyle, by what
-     * rules are for; or null, where no rule names any of them and nothing is styled again.
+     * under it and after it, as any change to it does; the element itself, where `own`, and the
+     * elements under it to match again, by what rules are for; or null, where no rule names any
+     * of them and nothing is styled again.
      */
     reachOf(classes) {
         let under = null;
+        let own = false;
         for (const name of classes) {
             const how = this.reach.get(name);
             if (how === true || this.classTests.some((test) => answers(test, name)))
                 return true;
-            if (how)
+            if (!how)
+                continue;
+            own ||= how.own === true;
+            // Made only for a class that reaches under: most are a rule's own, and this is asked for
+            // every element as it is given its classes.
+            if (this.reachesUnder(how))
                 addSubjects((under ??= noSubjects()), how);
         }
+        if (!under)
+            return own ? OWN_ALONE : null;
+        if (own)
+            under.own = true;
         return under;
     }
     /** Whether one of the rules `subjects` stands for could be for a node. */
@@ -1658,7 +1885,7 @@ export class StyleResolver {
         const cached = node.styleCache;
         // Within one commit a node is asked for its inherited map once per descendant, so this is the
         // hot path and it must not walk anywhere.
-        if (cached !== null && cached.epoch === epoch)
+        if (resolvedIn(epoch, cached, node))
             return cached;
         const parent = node.parent ? this.resolve(node.parent, epoch) : null;
         const parentContext = parent ? parent.context : ROOT_CONTEXT;
@@ -1676,33 +1903,66 @@ export class StyleResolver {
         this.justMatched = null;
         if (kept)
             return kept;
+        return this.styledAgain(node, epoch, parent, found);
+    }
+    /** A node styled now, from the rules found for it or from those it kept: see `matchesStand`. */
+    styledAgain(node, epoch, parent, found) {
+        const cached = node.styleCache;
+        const parentContext = parent ? parent.context : ROOT_CONTEXT;
         const parentInherited = parent ? parent.inherited : EMPTY;
+        const parentScope = parent ? parent.scope : ROOT_SCOPE;
+        const stands = this.matchesStand(cached, node, parentScope);
+        // The scope it keeps, or none: it then has a new one, which its new `context` serves as.
+        const scope = stands ? cached.scope : null;
         // A box the engine made around loose text is in no template, so no rule matches it.
         if (node.anonymous || this.hasNoRules(node)) {
-            return this.unstyled(node, epoch, parent, parentContext, parentInherited);
+            return this.unstyled(node, epoch, parent, parentInherited, scope, parentScope);
         }
         styleStats.nodesResolved++;
-        const matched = found ?? this.matchedBy(node);
+        // Its own rules are found again for a change of its own, and not for one above it.
+        const rules = stands && !node.ownDirty ? cached.rules : undefined;
+        const matched = found ?? rules ?? this.matchedBy(node);
         const parentTokens = parent ? parent.tokens : this.tokensOnRoot;
         this.heir(node, parent, matched);
         const styled = this.styled(node, matched, parentTokens, parentInherited);
-        const cache = this.cached(epoch, parentContext, styled, matched);
+        const cache = this.cached(epoch, parentContext, styled, matched, scope, parentScope);
         node.styleCache = cache;
         node.styleDirty = false;
+        node.ownDirty = false;
         node.hasDirty = false;
         node.stateDirty = false;
         return cache;
     }
+    /**
+     * Whether what an element could match is as it was when it was last styled: nothing that can
+     * change it was marked on the element, its parent's `scope` is the one it was styled under,
+     * and no sheet that could match it has come since. It is being styled again all the same, for
+     * a change of its own that alters nothing under it, or for what it inherits.
+     */
+    matchesStand(cached, node, parentScope) {
+        return (cached !== null &&
+            !node.styleDirty &&
+            !node.hasDirty &&
+            !node.stateDirty &&
+            cached.scope !== SHARED_SCOPE &&
+            parentScope !== SHARED_SCOPE &&
+            cached.parentScope === parentScope &&
+            this.current(cached, node));
+    }
     /**
      * A cache of a node just styled, with a context of its own. It keeps the rules the node
      * matched, for the node to be compared with, once a sheet has a use for them: see `tracksHas`.
      */
-    cached(epoch, parentContext, styled, matched) {
+    cached(epoch, parentContext, styled, matched, scope, parentScope) {
+        const context = {};
         const cache = {
             epoch,
             generation: this.generation,
-            context: {},
+            context,
             parentContext,
+            scope: scope ?? context,
+            parentScope,
+            rules: matched,
             ...styled,
         };
         if (this.tracksHas)
@@ -1725,6 +1985,7 @@ export class StyleResolver {
         const stands = (node.hasDirty === true || node.stateDirty === true) &&
             cached?.matched !== undefined &&
             !node.styleDirty &&
+            !node.ownDirty &&
             cached.parentContext === parentContext &&
             this.current(cached, node);
         if (!stands)
@@ -1764,6 +2025,7 @@ export class StyleResolver {
         const stands = node.stateDirty === true &&
             cached !== null &&
             !node.styleDirty &&
+            !node.ownDirty &&
             !node.hasDirty &&
             cached.parentContext === parentContext &&
             this.current(cached, node) &&
@@ -1781,6 +2043,14 @@ export class StyleResolver {
     holds(node, parentContext) {
         return this.reusable(node.styleCache, node, parentContext);
     }
+    /**
+     * Whether a node was last styled under a box holding the one cache shared by every box with
+     * nothing to style. Such boxes hand the same `context` down, so the node cannot tell one from
+     * another by it: moved under another box, it has to be told.
+     */
+    styledUnderShared(node) {
+        return node.styleCache !== null && node.styleCache.parentContext === ROOT_CONTEXT;
+    }
     /**
      * Whether a previous result still stands: nothing about the node changed, nothing above it
      * moved, and the conditions have not.
@@ -1788,6 +2058,7 @@ export class StyleResolver {
     reusable(cached, node, parentContext) {
         return (cached !== null &&
             !node.styleDirty &&
+            !node.ownDirty &&
             !node.hasDirty &&
             !node.stateDirty &&
             cached.parentContext === parentContext &&
@@ -1800,6 +2071,7 @@ export class StyleResolver {
     hasNoRules(node) {
         return (node.sheet === null &&
             node.hostSheet === null &&
+            this.deepSheets.size === 0 &&
             this.globalSheet === null &&
             this.addedSheets.length === 0 &&
             !node.customProperties &&
@@ -1815,35 +2087,43 @@ export class StyleResolver {
      * carry: the shared object holds none, and the surface root answering with it dropped every
      * token the device had seeded.
      */
-    unstyled(node, epoch, parent, parentContext, parentInherited) {
+    unstyled(node, epoch, parent, parentInherited, scope, parentScope) {
         const tokens = parent ? parent.tokens : this.tokensOnRoot;
+        const parentContext = parent ? parent.context : ROOT_CONTEXT;
         // What inline style sets is inherited too, with no rule to read it against.
         const inline = node.inlineInherits ? inlineInherited(node.props['style']) : null;
-        if (!inline &&
+        const nothing = !inline &&
             parentInherited === EMPTY &&
             parentContext === ROOT_CONTEXT &&
-            tokens === NO_TOKENS &&
-            !node.styleDirty) {
-            if (this.emptyCache.epoch !== epoch || this.emptyCache.generation !== this.generation) {
-                this.emptyCache = emptyCacheFor(epoch, this.generation);
-            }
-            node.styleCache = this.emptyCache;
-            return this.emptyCache;
-        }
+            tokens === NO_TOKENS;
+        if (nothing && !node.styleDirty && !node.ownDirty)
+            return this.sharedEmpty(node, epoch);
+        const context = {};
         const passthrough = {
             epoch,
             generation: this.generation,
-            context: {},
+            context,
             parentContext,
+            scope: scope ?? context,
+            parentScope,
             style: unstyledStyle(parentInherited, inline),
             inherited: inline ? inheritFrom(parentInherited, inline) : parentInherited,
             tokens,
         };
         node.styleCache = passthrough;
         node.styleDirty = false;
+        node.ownDirty = false;
         node.stateDirty = false;
         return passthrough;
     }
+    /** The one cache of every node with nothing to style and nothing to hand down, given to one more. */
+    sharedEmpty(node, epoch) {
+        if (this.emptyCache.epoch !== epoch || this.emptyCache.generation !== this.generation) {
+            this.emptyCache = emptyCacheFor(epoch, this.generation);
+        }
+        node.styleCache = this.emptyCache;
+        return this.emptyCache;
+    }
     /**
      * The rules worth trying against a node, in cascade order.
      *
@@ -1872,9 +2152,33 @@ export class StyleResolver {
             indexes.push(this.ownIndex(node.hostSheet, HOSTS));
         if (node.sheet)
             indexes.push(this.ownIndex(node.sheet, CREATED));
+        if (this.deepSheets.size)
+            this.reachedFromAbove(node, indexes);
         indexes.push(this.sharedIndex());
         return candidateRules(node, indexes, this.cascadeOrder);
     }
+    /**
+     * Add the `::ng-deep` rules of each component a node is in whose sheet is not the node's own:
+     * a node is tried against its own component's rules already, those among them.
+     */
+    reachedFromAbove(node, indexes) {
+        for (let up = node.parent; up; up = up.parent) {
+            const sheet = up.hostSheet;
+            if (!sheet || sheet === node.sheet || sheet === node.hostSheet)
+                continue;
+            if (this.deepSheets.has(sheet))
+                indexes.push(this.deepIndex(sheet));
+        }
+    }
+    /** A sheet's `::ng-deep` rules alone, filed as a component's own are. */
+    deepIndex(sheet) {
+        let index = this.deepIndexes.get(sheet);
+        if (!index) {
+            const deep = this.entries(sheet, COMPONENT_SPECIFICITY_BUMP).filter(({ rule }) => rule.deep);
+            this.deepIndexes.set(sheet, (index = indexRules(deep, undefined, HOSTS * SHEET_ROOM)));
+        }
+        return index;
+    }
     /** Weakest first: by layer where any sheet has one, then by weight, then as they were filed. */
     cascadeOrder = (a, b) => {
         const layers = this.layered
@@ -2014,8 +2318,15 @@ export class StyleResolver {
     /** The rules that apply to a node, weakest first. */
     matched(node, entries) {
         const out = [];
+        // What the node's ancestors are, gathered for the first rule that names one.
+        let above;
         for (const { rule, sheet } of entries) {
-            if (this.conditionHolds(rule) && matches(node, rule, sheet))
+            if (!this.conditionHolds(rule))
+                continue;
+            const named = namedAbove(rule);
+            if (named && lacks((above ??= bitsAbove(node)), named))
+                continue;
+            if (matches(node, rule, sheet))
                 out.push(rule);
         }
         return out;
@@ -2065,13 +2376,17 @@ export class StyleResolver {
         for (const [at, key] of written.entries()) {
             if (!(key in TWIN.ltr))
                 continue;
-            twin ??= TWIN[(style['direction'] ?? this.conditions.direction) === 'rtl' ? 'rtl' : 'ltr'];
+            twin ??= TWIN[this.readsRightToLeft(style) ? 'rtl' : 'ltr'];
             const other = twin[key];
             // Where the inline style sets both, the one it set later stands.
             if (written.indexOf(other) < at)
                 delete style[other];
         }
     }
+    /** Whether a settled style is of an element read right to left: by its own, or the app's. */
+    readsRightToLeft(style) {
+        return (style['direction'] ?? this.conditions.direction) === 'rtl';
+    }
     /**
      * The direction an element is laid out in: the last `direction` its own rules give it, the one
      * it inherits, or the app's. A logical corner is a different physical one in each.
@@ -2150,6 +2465,17 @@ export class StyleResolver {
      * A declaration with no token and no usable fallback is dropped rather than written as
      * undefined, which is what a browser does with a value it cannot resolve.
      */
+    /**
+     * What declarations that wait for a node's tokens come to on it, where no rule of the node's
+     * carries them: a keyframe's, which is settled against the element that plays it.
+     */
+    settleFor(node, deferred, epoch) {
+        const { tokens } = this.resolve(node, epoch);
+        const above = node.parent ? this.resolve(node.parent, epoch).inherited : EMPTY;
+        const own = {};
+        this.applyDeferred(deferred, own, tokens, above, null);
+        return own;
+    }
     applyDeferred(deferred, own, tokens, parentInherited, important) {
         for (const declaration of settlingOrder(deferred)) {
             if (declaration.inherit) {
@@ -2528,6 +2854,9 @@ function substitutable(token, tokens) {
         return hslSubstitutable(token.hsl, tokens);
     if (token.deferredColour)
         return colourSubstitutable(token.deferredColour, tokens);
+    if (token.deferredLengths) {
+        return token.deferredLengths.every((part) => typeof part !== 'object' || substitutedIn(part, tokens) !== undefined);
+    }
     // Each marker is one reading of the same text, and a fallback one cannot read is dropped from it.
     return token.deferredCalc.some((marker) => calcSubstitutable(marker.expression, tokens));
 }
@@ -2606,7 +2935,7 @@ function inCycles(names, waitingOn) {
 }
 /** Whether a token is made of others, and so worked out where it is defined. */
 function isDerived(token) {
-    return Boolean(token?.hsl || token?.deferredColour || token?.deferredCalc);
+    return Boolean(token?.hsl || token?.deferredColour || token?.deferredCalc || token?.deferredLengths);
 }
 /** A token made of others, worked out from the tokens in scope. */
 function derived(token, tokens) {
@@ -2614,8 +2943,23 @@ function derived(token, tokens) {
         return colourToken(resolveHsl(token.hsl, tokens));
     if (token.deferredColour)
         return colourToken(resolveColour(token.deferredColour, tokens));
+    if (token.deferredLengths)
+        return lengthsToken(token, tokens);
     return calcToken(token.deferredCalc, tokens);
 }
+/**
+ * A token of several lengths with each part that is a `var()` followed. Where a part comes to
+ * no length the token is what else it reads as, a shadow whose colour is a token being several
+ * lengths and a `var()` too, or nothing where it reads as nothing else.
+ */
+function lengthsToken(token, tokens) {
+    const { deferredLengths, ...rest } = token;
+    const lengths = deferredLengths.map((part) => typeof part === 'object' ? substitutedIn(part, tokens)?.length : part);
+    if (lengths.every((length) => length !== undefined)) {
+        return { ...rest, lengths: lengths };
+    }
+    return Object.keys(rest).length ? rest : undefined;
+}
 /**
  * Each alias settled to what it names. `follow` writes back every one that resolves; one in a
  * cycle is removed only once all are followed, as removed any sooner, the next one round the
@@ -2789,7 +3133,7 @@ function referenced(declaration, tokens) {
     // property unset rather than trying the next, or the fallback.
     const names = [declaration.reference, ...(declaration.alternatives ?? [])];
     const token = firstSet(names, tokens);
-    let value = token ? tokenForm(token, declaration.kind) : fallbackOf(declaration, tokens);
+    let value = token ? formFor(token, declaration) : fallbackOf(declaration, tokens);
     // `calc(var(--n) * 1px)`: the arithmetic gives a unitless token its unit, which is the usual
     // way to turn a count into a length. So it reads the bare number, and a length is no such thing.
     if (token && declaration.adjust?.number && declaration.kind === 'length') {
@@ -2837,9 +3181,52 @@ function tokenForm(token, kind) {
     const value = formOf(token, kind);
     return value === undefined && kind === 'color' && isCurrentColour(token) ? CURRENT_COLOUR : value;
 }
+/** A corner's place among four as CSS writes them, before a side's: `borderTopLeftRadius`. */
+const PLACES = [
+    [/TopLeft|TopStart|StartStart/, 0],
+    [/TopRight|TopEnd|StartEnd/, 1],
+    [/BottomRight|BottomEnd|EndEnd/, 2],
+    [/BottomLeft|BottomStart|EndStart/, 3],
+    [/Top/, 0],
+    [/Right|End/, 1],
+    [/Bottom/, 2],
+    [/Left|Start/, 3],
+];
+/** Where a side or a corner comes in a shorthand of four, whatever order its props are kept in. */
+const placeOf = (prop) => PLACES.find(([named]) => named.test(prop))?.[1] ?? 0;
+/** The lengths of a token that holds several, for the props of a shorthand to take one each. */
+class EachSide {
+    lengths;
+    constructor(lengths) {
+        this.lengths = lengths;
+    }
+    /**
+     * The length for one of a shorthand's four props, as CSS gives them: two are a pair repeated,
+     * and of three the left takes the right's. Nothing for a property that is not such a
+     * shorthand: a token of several lengths is no value for it, and it is unset.
+     */
+    at(props, prop) {
+        if (props.length !== 4)
+            return undefined;
+        const index = placeOf(prop);
+        return this.lengths[index] ?? this.lengths[index - 2] ?? this.lengths[0];
+    }
+}
+/**
+ * A set token's value in the form a declaration wants, or its several lengths where it wants a
+ * length and the token has no one: for a shorthand that takes one a side, see `writeSettled`.
+ * Not with arithmetic on it, which is of one length.
+ */
+function formFor(token, declaration) {
+    const value = tokenForm(token, declaration.kind);
+    if (value !== undefined || !token.lengths || declaration.kind !== 'length')
+        return value;
+    return declaration.adjust ? undefined : new EachSide(token.lengths);
+}
 /** What a deferred declaration settled to, written to one of its props. */
 function writeSettled(own, prop, declaration, settled, layers) {
-    const value = settled ?? declaration.unset;
+    const one = settled instanceof EachSide ? settled.at(declaration.props, prop) : settled;
+    const value = one ?? declaration.unset;
     if (declaration.layers)
         writeLayer(own, prop, value, layers);
     else