@ng-native/fabric 0.4.0 → 0.6.0

package/dist/css.js

@@ -29,6 +29,15 @@ function formOf(token, kind) {
     const stand = STAND_IN[kind];
     return token[kind] ?? (stand ? token[stand] : undefined);
 }
+/**
+ * Whether a child is one `:empty` sees. An anchor is a comment on the web, which it does not;
+ * nor text of no length, which a binding to nothing leaves behind.
+ */
+export function fills(child) {
+    if (child.kind === 'anchor')
+        return false;
+    return child.kind !== 'text' || child.text !== '';
+}
 /**
  * Properties CSS inherits that mean something on native.
  *
@@ -79,6 +88,32 @@ function drawNoBorder(own) {
             own[key] = 0;
     own['borderWidth'] = 0;
 }
+/** Each side's own style, as the compiler keeps it, and the width it is the style of. */
+const SIDE_STYLES = ['Top', 'Right', 'Bottom', 'Left', 'Start', 'End'].map((side) => [`border${side}Style`, `border${side}Width`]);
+/**
+ * Settle a border side by side, once the cascade has picked each side's style: a side styled
+ * `none` has no width, whichever rule set one, and the one style native has is that of a side
+ * that is drawn. With no side drawn and no style at all, there is no border. A side's own style
+ * is not sent on: native has none.
+ */
+function settleBorders(own) {
+    let drawn;
+    for (const [style, width] of SIDE_STYLES) {
+        if (!(style in own))
+            continue;
+        if (own[style] === 'none')
+            own[width] = 0;
+        else
+            drawn ??= own[style];
+        delete own[style];
+    }
+    if (own['borderStyle'] !== 'none')
+        return;
+    if (drawn === undefined)
+        drawNoBorder(own);
+    else
+        own['borderStyle'] = drawn;
+}
 /**
  * Deterministic work counters for the matcher.
  *
@@ -89,6 +124,80 @@ function drawNoBorder(own) {
  * The cost is one integer increment per comparison, against a Set lookup and several property
  * reads, so it does not distort what it measures.
  */
+/**
+ * What a sheet asks about a pressed element. `own` is whether a rule styles one, `.button:active`,
+ * which matching the pressed elements again answers. `elsewhere` is each compound that asks about
+ * a pressed element from another one: `.card:active .title`, `.a:active + .b`, or `:active`
+ * inside `:not()`, `:is()` or `:has()`. An element such a compound could be is restyled with
+ * everything under it when it is pressed, as what it changes is not itself alone.
+ */
+export function usesActive(sheet) {
+    const known = ACTIVE_USE.get(sheet);
+    if (known)
+        return known;
+    let own = false;
+    const elsewhere = [];
+    for (const rule of sheet.rules) {
+        rule.compounds.forEach((compound, at) => {
+            const subject = at === rule.compounds.length - 1;
+            // Asked of the element itself, on the compound or in its `:is()` and `:not()`: the
+            // subject's is its own, and any other compound's is of the element that compound is.
+            if (activeItself(compound, elsewhere)) {
+                if (subject)
+                    own = true;
+                else
+                    elsewhere.push(compound);
+            }
+            activeAround(compound, elsewhere);
+        });
+    }
+    const use = { own, elsewhere };
+    ACTIVE_USE.set(sheet, use);
+    return use;
+}
+const isActive = (compound) => compound.pseudo?.includes('active') === true;
+/**
+ * Whether a compound asks about the pressed state of the element it matches: on itself, in a
+ * `:not()`, or as the last compound of an `:is()` argument. The compounds before the last in
+ * such an argument are other elements, and are collected as they are.
+ */
+function activeItself(compound, elsewhere) {
+    let itself = isActive(compound);
+    for (const inner of compound.not ?? []) {
+        if (activeItself(inner, elsewhere))
+            itself = true;
+        activeAround(inner, elsewhere);
+    }
+    for (const chain of compound.is ?? []) {
+        chain.forEach((inner, at) => {
+            const asked = activeItself(inner, elsewhere);
+            if (asked && at === chain.length - 1)
+                itself = true;
+            else if (asked)
+                elsewhere.push(inner);
+            activeAround(inner, elsewhere);
+        });
+    }
+    return itself;
+}
+/** Each compound that asks about a pressed element around the one a compound matches. */
+function activeAround(compound, elsewhere) {
+    const collect = (value) => {
+        if (!value || typeof value !== 'object')
+            return;
+        if (Array.isArray(value))
+            return value.forEach(collect);
+        if (isActive(value))
+            elsewhere.push(value);
+        for (const inside of Object.values(value))
+            collect(inside);
+    };
+    for (const [key, inside] of Object.entries(compound)) {
+        if (key !== 'is' && key !== 'not' && key !== 'pseudo')
+            collect(inside);
+    }
+}
+const ACTIVE_USE = new WeakMap();
 export const styleStats = {
     /** Calls to `matchesCompound`, the innermost unit of matching work. */
     compoundTests: 0,
@@ -96,11 +205,14 @@ export const styleStats = {
     ruleTests: 0,
     /** Nodes cascaded, as opposed to handed back from the memo. */
     nodesResolved: 0,
+    /** Rules filed by key selector: each sheet's once, however many sheets come after it. */
+    rulesFiled: 0,
 };
 export function resetStyleStats() {
     styleStats.compoundTests = 0;
     styleStats.ruleTests = 0;
     styleStats.nodesResolved = 0;
+    styleStats.rulesFiled = 0;
 }
 /** A prop's value as an attribute test compares it: in lower case, under the i flag. */
 const attributeText = (actual, test) => test.insensitive ? String(actual).toLowerCase() : String(actual);
@@ -168,10 +280,8 @@ function matchesCompound(node, compound, sheet) {
                 return false;
         }
     }
-    // An anchor is a comment on the web, and :empty does not see comments.
-    if (compound.empty !== undefined && node.children?.some((child) => child.kind !== 'anchor')) {
+    if (compound.empty !== undefined && node.children?.some(fills))
         return false;
-    }
     if (compound.nth !== undefined) {
         for (const test of compound.nth) {
             if (!matchesNth(node, test))
@@ -190,6 +300,21 @@ function matchesCompound(node, compound, sheet) {
                 return false;
         }
     }
+    if (compound.has) {
+        for (const test of compound.has) {
+            if (!hasBeneath(node, test, sheet))
+                return false;
+        }
+    }
+    if (compound.parents) {
+        const parent = node.parent;
+        if (!parent)
+            return false;
+        for (const above of compound.parents) {
+            if (!matchesCompound(parent, above, sheet))
+                return false;
+        }
+    }
     if (compound.ancestors) {
         for (const ancestor of compound.ancestors) {
             let found = false;
@@ -212,6 +337,18 @@ function matchesCompound(node, compound, sheet) {
     }
     return true;
 }
+/** Whether some element beneath `node`, or some child of it for `:has(> x)`, matches the test. */
+function hasBeneath(node, test, sheet) {
+    for (const child of node.children ?? []) {
+        if (child.kind !== undefined && child.kind !== 'element')
+            continue;
+        if (test.any.some((option) => matchesCompound(child, option, sheet)))
+            return true;
+        if (!test.child && hasBeneath(child, test, sheet))
+            return true;
+    }
+    return false;
+}
 /**
  * Right-to-left matching, as every CSS engine does it: the rightmost compound is the cheapest
  * filter and rejects almost everything immediately.
@@ -282,8 +419,152 @@ function matchAny(first, next, rule, index, compound, sheet) {
     }
     return false;
 }
+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) {
+    let takes = TAKES_PARENTS.get(rule);
+    if (takes === undefined) {
+        takes = rule.deferred?.some((declaration) => declaration.inherit) === true;
+        TAKES_PARENTS.set(rule, takes);
+    }
+    return takes;
+}
 /** Whether a node is one of the children CSS counts. Text and anchors are children, not elements. */
 const isElement = (node) => node.kind === undefined || node.kind === 'element';
+/** A node's first `count` elements, or its last, skipping everything that is not one. */
+export function elementsAtEnd(siblings, count, fromEnd) {
+    const found = [];
+    for (let step = 0; step < siblings.length && found.length < count; step++) {
+        const sibling = siblings[fromEnd ? siblings.length - 1 - step : step];
+        if (isElement(sibling))
+            found.push(sibling);
+    }
+    return found;
+}
+const REACH = new WeakMap();
+/**
+ * How far a sheet asks about a child list beyond which element is first and which is last.
+ * Where no sheet reaches either way, only the elements at the two ends can match differently.
+ */
+export function siblingReach(sheet) {
+    let known = REACH.get(sheet);
+    if (known === undefined) {
+        const reach = { after: 0, before: false };
+        for (const rule of sheet.rules) {
+            reach.after = Math.max(reach.after, stepsAlong(rule.combinators));
+            for (const compound of rule.compounds)
+                countSiblings(compound, reach, false);
+        }
+        known = reach;
+        REACH.set(sheet, known);
+    }
+    return known;
+}
+/**
+ * How many elements on from one a rule's combinators read: every later one for a `~`, and
+ * otherwise its longest run of `+`. A run ends at a descendant or child combinator, which steps
+ * out of the list.
+ */
+function stepsAlong(combinators) {
+    let longest = 0;
+    let run = 0;
+    for (const one of combinators) {
+        if (one === 'later-sibling')
+            return Infinity;
+        run = one === 'next-sibling' ? run + 1 : 0;
+        longest = Math.max(longest, run);
+    }
+    return longest;
+}
+/**
+ * Note in `reach` which end a compound, or one nested in it, counts its siblings from, further
+ * than the first or last. A count inside a `:has()` is read as both: what it is asked of is
+ * 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);
+    if (counts.some((test) => withinHas || !test.fromEnd))
+        reach.after = Infinity;
+    if (counts.some((test) => withinHas || test.fromEnd))
+        reach.before = true;
+    for (const inner of nestedCompounds(compound))
+        countSiblings(inner, reach, withinHas);
+    for (const test of compound.has ?? []) {
+        for (const inner of test.any)
+            countSiblings(inner, reach, true);
+    }
+}
+const PLACE_ELSEWHERE = new WeakMap();
+/**
+ * Each compound in a sheet whose element's place among its siblings is read from another
+ * element: one with something under it in the rule, `.row:nth-child(odd) .label` and
+ * `.a + .b .c`, or one an `:is()` or `:host-context()` looks for above the element styled.
+ *
+ * An element whose place changed is matched again, and where it matches the rules it did, it
+ * and everything under it are left as they were: its own rules are all that its place can
+ * change. Not an element one of these could be. What is under that one can match differently
+ * though it matches the same, so it is styled again with everything under it.
+ *
+ * A place read by the element a rule styles, or by the elements before it that the rule steps
+ * from (`.a:first-child + .b`), is that element's own: the rules it matches say.
+ */
+export function placeReadElsewhere(sheet) {
+    let known = PLACE_ELSEWHERE.get(sheet);
+    if (known === undefined) {
+        const elsewhere = [];
+        for (const rule of sheet.rules) {
+            // A run of compounds joined by `+` and `~` is one child list. Every run but the last is
+            // above the element styled, and its last compound is the element the rest hangs under.
+            let start = 0;
+            rule.compounds.forEach((compound, at) => {
+                placeReadAbove(compound, elsewhere);
+                const joined = rule.combinators[at];
+                if (joined === 'next-sibling' || joined === 'later-sibling')
+                    return;
+                const run = rule.compounds.slice(start, at + 1);
+                start = at + 1;
+                const above = at < rule.compounds.length - 1;
+                if (above && (run.length > 1 || run.some(readsPlace)))
+                    elsewhere.push(compound);
+            });
+        }
+        known = elsewhere;
+        PLACE_ELSEWHERE.set(sheet, known);
+    }
+    return known;
+}
+/** Whether a compound, or one nested in it at any depth, asks about a place in a child list. */
+function readsPlace(compound) {
+    if (compound.nth?.length)
+        return true;
+    const within = (compound.has ?? []).flatMap((test) => test.any);
+    return [...nestedCompounds(compound), ...within].some(readsPlace);
+}
+/**
+ * Collect the compounds nested in one that are matched against an element above the one it is
+ * matched against, and ask about that element's place: `:is(.group:first-child *)`.
+ */
+function placeReadAbove(compound, elsewhere) {
+    const above = [
+        ...(compound.ancestors ?? []),
+        ...(compound.parents ?? []),
+        ...(compound.hostContext ?? []),
+    ];
+    for (const inner of above)
+        if (readsPlace(inner))
+            elsewhere.push(inner);
+    for (const inner of nestedCompounds(compound))
+        placeReadAbove(inner, elsewhere);
+}
+/** The compounds nested in one, a `:has()`'s apart. */
+const nestedCompounds = (compound) => [
+    ...(compound.not ?? []),
+    ...(compound.is ?? []).flat(),
+    ...(compound.ancestors ?? []),
+    ...(compound.parents ?? []),
+    ...(compound.hostContext ?? []),
+];
 /** The element before this one, skipping everything that is not one. */
 function previousElement(node) {
     const siblings = node.parent?.children;
@@ -341,6 +622,133 @@ function overriddenBy(deferred, declarations, important) {
     }
     return kept.length ? kept : null;
 }
+/**
+ * The logical property and the physical one for the same corner or edge, left to right. CSS
+ * settles the two as one property, the later declaration winning. A native view has a prop for
+ * each and takes one whatever their order: React Native the physical corner, Yoga the logical
+ * edge. So a declaration of either takes the other out of the cascade.
+ */
+const SIDES_LTR = [
+    ['borderStartStartRadius', 'borderTopLeftRadius'],
+    ['borderStartEndRadius', 'borderTopRightRadius'],
+    ['borderEndStartRadius', 'borderBottomLeftRadius'],
+    ['borderEndEndRadius', 'borderBottomRightRadius'],
+    ...['margin', 'padding'].flatMap((box) => [
+        [`${box}Start`, `${box}Left`],
+        [`${box}End`, `${box}Right`],
+    ]),
+    ...['Width', 'Color'].flatMap((part) => [
+        [`borderStart${part}`, `borderLeft${part}`],
+        [`borderEnd${part}`, `borderRight${part}`],
+    ]),
+    ['start', 'left'],
+    ['end', 'right'],
+];
+const mirrored = (physical) => physical.includes('Left') || physical === 'left'
+    ? physical.replace('Left', 'Right').replace('left', 'right')
+    : physical.replace('Right', 'Left').replace('right', 'left');
+/** Each property's other form, both ways, in a layout of each direction. */
+const twins = (pairs) => Object.fromEntries(pairs.flatMap(([logical, physical]) => [
+    [logical, physical],
+    [physical, logical],
+]));
+const TWIN = {
+    ltr: twins(SIDES_LTR),
+    rtl: twins(SIDES_LTR.map(([logical, physical]) => [logical, mirrored(physical)])),
+};
+const sidedOf = new WeakMap();
+function sided(rule) {
+    let found = sidedOf.get(rule);
+    if (found !== undefined)
+        return found;
+    const twin = TWIN.ltr;
+    const plain = Object.keys(rule.declarations).filter((key) => key in twin);
+    const important = rule.important ? Object.keys(rule.important).filter((key) => key in twin) : [];
+    for (const declaration of rule.deferred ?? []) {
+        for (const prop of declaration.props) {
+            if (prop in twin)
+                (declaration.important ? important : plain).push(prop);
+        }
+    }
+    found = plain.length || important.length ? { plain, important } : null;
+    sidedOf.set(rule, found);
+    return found;
+}
+/** Of `keys`, in the order a rule wrote them, each whose other form comes after it. */
+function writtenEarlier(keys, twin) {
+    return keys.filter((key, at) => keys.indexOf(twin[key]) > at);
+}
+/** The other form of each of `keys`, as the record `overriddenBy` reads. */
+function twinsOf(keys, twin) {
+    const out = {};
+    for (const key of keys)
+        out[twin[key]] = true;
+    return out;
+}
+/**
+ * One cascade's settling of the corners and edges set in both forms: each rule's are taken out of
+ * what the rules before it left, in the form the rule does not use.
+ */
+class OtherForms {
+    /** Worked out for the first rule that sets a corner or an edge, which most elements have none of. */
+    twin = null;
+    overImportant = null;
+    direction;
+    constructor(direction) {
+        this.direction = direction;
+    }
+    /** Before `rule` is applied: the other form of what it sets goes, as the same property would. */
+    before(rule, normal, important, deferred) {
+        const sides = sided(rule);
+        if (!sides)
+            return deferred;
+        const twin = (this.twin ??= TWIN[this.direction()]);
+        const plain = twinsOf(sides.plain, twin);
+        for (const key in plain)
+            delete normal[key];
+        let kept = deferred && overriddenBy(deferred, plain, false);
+        if (!sides.important.length)
+            return kept;
+        const gone = twinsOf(sides.important, twin);
+        for (const key in gone)
+            delete important[key];
+        kept &&= overriddenBy(kept, gone, true);
+        Object.assign((this.overImportant ??= {}), gone);
+        return kept;
+    }
+    /**
+     * Once `rule` is applied, its deferred values among `deferred`: where it wrote both forms, the
+     * one it wrote later stands, among its plain declarations and among its important ones. The
+     * order is the rule's own, sent with it, since a value settled on device is in another list.
+     */
+    within(rule, normal, important, deferred) {
+        if (!rule.sides && !rule.importantSides)
+            return deferred;
+        const twin = (this.twin ??= TWIN[this.direction()]);
+        let kept = deferred;
+        const settle = (order, into, tier) => {
+            const lost = {};
+            for (const key of writtenEarlier(order, twin)) {
+                delete into[key];
+                lost[key] = true;
+            }
+            kept &&= overriddenBy(kept, lost, tier);
+        };
+        if (rule.sides)
+            settle(rule.sides, normal, false);
+        if (rule.importantSides)
+            settle(rule.importantSides, important, true);
+        return kept;
+    }
+    /** An important one stands over the other form wherever that was set, as over its own. */
+    after(normal, deferred) {
+        if (!this.overImportant)
+            return deferred;
+        for (const key in this.overImportant)
+            delete normal[key];
+        return deferred && overriddenBy(deferred, this.overImportant, false);
+    }
+}
 /**
  * The deferred values still standing once `rule` has been applied, plus its own.
  *
@@ -474,69 +882,150 @@ const ELEMENT_ENTRIES = ELEMENT_STYLES.rules.map((rule) => ({
  * is offered to everything, because the alternative is a rule that silently stops applying.
  */
 export function ruleKey(rule) {
+    return ruleKeys(rule)[0];
+}
+/**
+ * Every bucket a rule is filed under. One, but for a rule whose rightmost compound is only an
+ * `:is()` of compounds that each have a key: it is filed under each of theirs, since a node it
+ * matches has one of them.
+ *
+ * A rule that says nothing of the node's own name can still say whose child it is, `.row > *`.
+ * It is filed under the parent's class, and offered to the children of an element that has it.
+ */
+export function ruleKeys(rule) {
     const key = rule.compounds[rule.compounds.length - 1];
     if (!key)
-        return UNIVERSAL;
+        return EVERY_NODE;
     if (key.classes.length)
-        return `class:${key.classes[0]}`;
+        return [`class:${key.classes[0]}`];
     if (key.id !== undefined)
-        return `id:${key.id}`;
+        return [`id:${key.id}`];
     if (key.type !== undefined)
-        return `type:${key.type}`;
-    return UNIVERSAL;
+        return [`type:${key.type}`];
+    const held = parentClass(rule, key);
+    if (held !== undefined)
+        return [`in:${held}`];
+    return alternativeKeys(key) ?? EVERY_NODE;
+}
+/** A class the node's parent has to have for the rule to match, where its selector says one. */
+function parentClass(rule, key) {
+    const written = key.parents?.find((compound) => compound.classes.length > 0);
+    if (written)
+        return written.classes[0];
+    if (rule.combinators[rule.combinators.length - 1] !== 'child')
+        return undefined;
+    return rule.compounds[rule.compounds.length - 2]?.classes[0];
+}
+/** The keys of each compound a bare `:is()` takes, or nothing where one of them has none. */
+function alternativeKeys(key) {
+    const any = key.is?.[0];
+    if (!any?.length)
+        return undefined;
+    const keys = [];
+    for (const one of any) {
+        if (one.classes.length)
+            keys.push(`class:${one.classes[0]}`);
+        else if (one.id !== undefined)
+            keys.push(`id:${one.id}`);
+        else if (one.type !== undefined)
+            keys.push(`type:${one.type}`);
+        else
+            return undefined;
+    }
+    return keys;
 }
 const UNIVERSAL = '*';
-/** File a merged, sorted rule list by key selector. Done once per sheet pair, not per node. */
-export function indexRules(entries) {
-    const buckets = new Map();
-    const universal = [];
-    entries.forEach((entry, at) => {
-        const key = ruleKey(entry.rule);
-        if (key === UNIVERSAL) {
-            universal.push({ entry, at });
-            return;
+const EVERY_NODE = [UNIVERSAL];
+/**
+ * Where each kind of sheet is filed, as a multiple of the room one sheet's rules are given: the
+ * global sheet first, then a host's own, its creator's, and each added sheet after those.
+ */
+const SHEET_ROOM = 1_000_000;
+const HOSTS = 1;
+const CREATED = 2;
+const ADDED = 3;
+/**
+ * File rules by key selector, each at `from` and on: its place among every rule there is, which
+ * settles the order of two of the same weight. Into an index there already where one is given,
+ * so a sheet that arrives later is added to what is filed and nothing is filed again.
+ */
+export function indexRules(entries, into = { buckets: new Map(), universal: [] }, from = 0) {
+    styleStats.rulesFiled += entries.length;
+    entries.forEach((entry, n) => {
+        const indexed = { entry, at: from + n };
+        for (const key of ruleKeys(entry.rule)) {
+            if (key === UNIVERSAL) {
+                into.universal.push(indexed);
+                continue;
+            }
+            const bucket = into.buckets.get(key);
+            if (bucket)
+                bucket.push(indexed);
+            else
+                into.buckets.set(key, [indexed]);
         }
-        let bucket = buckets.get(key);
-        if (!bucket)
-            buckets.set(key, (bucket = []));
-        bucket.push({ entry, at });
     });
-    return { buckets, universal };
+    return into;
+}
+/** Rules in the order they were filed in, which is the order of a list sorted before it was. */
+const byPlace = (a, b) => a.at - b.at;
+/** Add to `found` what one index holds in the buckets a node's name, id and classes reach. */
+function reach(node, index, found) {
+    const take = (key) => {
+        const bucket = index.buckets.get(key);
+        if (bucket)
+            found.push(...bucket);
+    };
+    if (index.universal.length)
+        found.push(...index.universal);
+    take(`type:${node.name}`);
+    const id = node.props['nativeID'];
+    if (typeof id === 'string')
+        take(`id:${id}`);
+    if (node.classes)
+        for (const name of node.classes)
+            take(`class:${name}`);
+    // What is written for any child of an element with one of the parent's classes.
+    const around = node.parent?.classes;
+    if (around)
+        for (const name of around)
+            take(`in:${name}`);
 }
 /**
- * The rules worth trying against a node, in the order they were merged in.
+ * The rules worth trying against a node, in cascade order: `order` says which of two comes
+ * first, and with none it is the order they were filed in.
  *
- * Each bucket is already in order, so the collected list only needs sorting when more than one
- * contributed - which for a node with one class and a name is the common case, and cheap: the
- * lists are short by construction, which is the entire point of the index.
+ * From each index, only the buckets the node's name, id and classes reach, which is the entire
+ * point of the index: the lists are short by construction, so sorting them is cheap.
  */
-export function candidateRules(node, index) {
+export function candidateRules(node, indexes, order = byPlace) {
     const found = [];
-    if (index.universal.length)
-        found.push(index.universal);
-    const byName = index.buckets.get(`type:${node.name}`);
-    if (byName)
-        found.push(byName);
-    const id = node.props['nativeID'];
-    if (typeof id === 'string') {
-        const byId = index.buckets.get(`id:${id}`);
-        if (byId)
-            found.push(byId);
-    }
-    if (node.classes) {
-        for (const name of node.classes) {
-            const byClass = index.buckets.get(`class:${name}`);
-            if (byClass)
-                found.push(byClass);
-        }
-    }
-    if (!found.length)
-        return [];
-    if (found.length === 1)
-        return found[0].map((indexed) => indexed.entry);
-    const merged = found.flat();
-    merged.sort((a, b) => a.at - b.at);
-    return merged.map((indexed) => indexed.entry);
+    const all = Array.isArray(indexes) ? indexes : [indexes];
+    for (const index of all)
+        reach(node, index, found);
+    if (found.length < 2)
+        return found.map((indexed) => indexed.entry);
+    found.sort(order);
+    // A rule filed under two keys the node has is offered once.
+    const offered = [];
+    for (let i = 0; i < found.length; i++) {
+        if (found[i] !== found[i - 1])
+            offered.push(found[i].entry);
+    }
+    return offered;
+}
+/**
+ * The properties the rules matching a node declared `!important`, or nothing where none did:
+ * each by its own name and by the other form of it, so `margin-left` stands over an inline
+ * `marginStart` as it does over an inline `marginLeft`.
+ */
+function importantNames(result, twin) {
+    const deferred = result.deferred?.filter((one) => one.important) ?? [];
+    if (!result.important && !deferred.length)
+        return undefined;
+    const names = [...Object.keys(result.important ?? {}), ...deferred.flatMap((one) => one.props)];
+    const sided = names.filter((name) => name in TWIN.ltr);
+    return new Set(sided.length ? [...names, ...sided.map((name) => twin()[name])] : names);
 }
 /** What `em` falls back to when nothing in scope has set a font size. The web's default. */
 const DEFAULT_FONT_SIZE = 16;
@@ -546,14 +1035,186 @@ const EMPTY = {};
 const ROOT_CONTEXT = {};
 /** Shared empty token map, for the overwhelmingly common case of a subtree defining none. */
 const NO_TOKENS = {};
-/** Stands in for "created by a component with no sheet" as a cache key. */
-const NO_SHEET = { rules: [] };
 /**
  * Conditions generations are unique across every resolver in the process, not merely
  * increasing within one, because the memo they stamp lives on the compiled rule and a sheet is
  * shared by every engine that mounts the component.
  */
 let generations = 0;
+const subjects = new WeakMap();
+function subjectsOf(sheet) {
+    let found = subjects.get(sheet);
+    if (found)
+        return found;
+    const classes = new Set();
+    const types = new Set();
+    const inside = new Set();
+    const all = { classes, types, inside, any: false };
+    for (const rule of sheet.rules)
+        noteSubject(all, rule);
+    subjects.set(sheet, (found = all));
+    return found;
+}
+/** Note in `into` what a rule is for. */
+function noteSubject(into, rule) {
+    const subject = rule.compounds.at(-1);
+    // One class of several is enough to ask: a node without it matches none of them.
+    if (subject?.classes.length)
+        into.classes.add(subject.classes[0]);
+    else if (boxAround(rule) !== undefined)
+        into.inside.add(boxAround(rule));
+    else if (subject?.type && subject.type !== '*')
+        into.types.add(subject.type);
+    else
+        into.any = true;
+}
+const reaches = new WeakMap();
+/**
+ * How far each class a sheet's selectors name reaches, and the tests of the `class` attribute
+ * itself that are in them.
+ *
+ * The rules are walked whole for the classes in them, whatever a selector is made of: a part of
+ * one added later counts as a class that reaches everything, without being named here.
+ */
+function classReach(sheet) {
+    let found = reaches.get(sheet);
+    if (found)
+        return found;
+    const classes = new Map();
+    const reads = [];
+    for (const rule of sheet.rules) {
+        const every = new Set();
+        collectClasses(rule, every, reads);
+        const inside = classesInside(rule);
+        for (const name of every) {
+            if (!inside.has(name))
+                classes.set(name, true);
+            else
+                noteInside(classes, name, rule);
+        }
+    }
+    reaches.set(sheet, (found = { classes, reads }));
+    return found;
+}
+/** 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);
+    if (subjects === true)
+        return;
+    if (!subjects)
+        found.set(name, (subjects = noSubjects()));
+    const subject = rule.compounds.at(-1);
+    if (subject?.classes.length)
+        subjects.classes.add(subject.classes[0]);
+    else if (subject?.type && subject.type !== '*')
+        subjects.types.add(subject.type);
+    // A rule for anything in the box, `.busy > *`: anything under the node the class changed
+    // on. Asking which box has the class finds none once the class has gone from it.
+    else
+        subjects.any = true;
+}
+const noSubjects = () => ({
+    classes: new Set(),
+    types: new Set(),
+    inside: new Set(),
+    any: false,
+});
+/** Add to `into` what `from` is for. */
+function addSubjects(into, from) {
+    for (const name of from.classes)
+        into.classes.add(name);
+    for (const name of from.types)
+        into.types.add(name);
+    for (const name of from.inside)
+        into.inside.add(name);
+    into.any ||= from.any;
+}
+/**
+ * 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.
+ */
+function classesInside(rule) {
+    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';
+        }
+        const { classes, ...rest } = compound;
+        collectClasses(rest, elsewhere, []);
+        for (const name of classes)
+            (index < last && under ? inside : elsewhere).add(name);
+    }
+    for (const name of elsewhere)
+        inside.delete(name);
+    return inside;
+}
+/** What a rule declares, which names no element. */
+const DECLARED = new Set(['declarations', 'important', 'tokens']);
+/** Add each class under `value` to `into`, and each test of the `class` attribute to `reads`. */
+function collectClasses(value, into, reads) {
+    if (value === null || typeof value !== 'object')
+        return;
+    if (Array.isArray(value))
+        return value.forEach((inner) => collectClasses(inner, into, reads));
+    const part = value;
+    if (Array.isArray(part.classes))
+        for (const name of part.classes)
+            into.add(String(name));
+    if (Array.isArray(part.attributes)) {
+        for (const test of part.attributes)
+            if (test.name === 'class')
+                reads.push(test);
+    }
+    for (const [key, inner] of Object.entries(value)) {
+        if (!DECLARED.has(key))
+            collectClasses(inner, into, reads);
+    }
+}
+/**
+ * Whether a class coming or going could change what a test of the `class` attribute answers.
+ * One class of the list where the test is for a whole class or for part of one; any class
+ * where it is for how the list starts or ends, or for a part with a space in it.
+ */
+function answers(test, name) {
+    const value = test.value ?? '';
+    const folded = test.insensitive ? name.toLowerCase() : name;
+    if (test.operator === 'includes')
+        return folded === value;
+    if (test.operator === 'substring' && !/\s/.test(value))
+        return folded.includes(value);
+    return true;
+}
+/**
+ * A class of the nearest box a rule's subject has to be in: the compound before it, where that
+ * is joined as what holds it and names a class. Nothing where it is a sibling, or has no class.
+ */
+function boxAround(rule) {
+    const joined = rule.combinators.at(-1);
+    if (joined !== 'child' && joined !== 'descendant')
+        return undefined;
+    return rule.compounds.at(-2)?.classes[0];
+}
+/** Whether a rule among these could be for a node: never no where one is. */
+function writtenFor(of, node) {
+    if (of.any || of.types.has(node.name))
+        return true;
+    for (const name of node.classes ?? [])
+        if (of.classes.has(name))
+            return true;
+    if (!of.inside.size)
+        return false;
+    for (let over = node.parent; over; over = over.parent) {
+        for (const name of over.classes ?? [])
+            if (of.inside.has(name))
+                return true;
+    }
+    return false;
+}
 function emptyCacheFor(epoch, generation) {
     return {
         epoch,
@@ -687,7 +1348,12 @@ export class StyleResolver {
      * selector. Keyed by the creating sheet and then the hosted one, so a component's nodes share a
      * single index.
      */
-    merged = new WeakMap();
+    /** The global sheet and every sheet added to it, filed by key selector. See `rulesFor`. */
+    filed = null;
+    /** How many of the added sheets `filed` holds: one added since is filed at the next read. */
+    filedAdded = 0;
+    /** A component's own sheet, indexed once for each place it can take: a host's, or its creator's. */
+    ownIndexes = new WeakMap();
     /**
      * Whether any sheet merged so far has a rule in a cascade layer. Until one does, rules are
      * ordered by weight alone and the cascade does not look for layers, which is nearly every app.
@@ -758,8 +1424,94 @@ export class StyleResolver {
             this.addedSheets.push(sheet);
         else
             this.addedSheets[at] = sheet;
-        this.merged = new WeakMap();
+        // One added at the end is filed after what is there. One in another's place files them all again.
+        if (at !== -1)
+            this.filed = null;
+        const before = this.generation;
         this.generation = ++generations;
+        // One that takes another's place can change what any node comes to. One that names layers
+        // cannot: a layer has its place from the first sheet to name it, and a new name comes last.
+        if (at !== -1)
+            this.additions.length = 0;
+        else
+            this.additions.push({ before, after: this.generation, subjects: subjectsOf(sheet) });
+        return true;
+    }
+    /**
+     * The sheets added one after another with nothing else changed between them, each with the
+     * generation it began and ended: a cache made before them still stands for a node none of
+     * them could match. Emptied by anything else that moves the generation on.
+     */
+    additions = [];
+    /** Whether a sheet could match a node: one of its rules is written for it. */
+    couldMatch(sheet, node) {
+        return writtenFor(subjectsOf(sheet), node);
+    }
+    /** How far each class named by the sheets met so far reaches: see `classReach`. */
+    reach = new Map();
+    /** The tests of the `class` attribute itself in those sheets, which any class may answer. */
+    classTests = [];
+    noted = new WeakSet();
+    /** 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);
+        const { classes, reads } = classReach(sheet);
+        for (const [name, how] of classes)
+            this.noteReach(name, how);
+        this.classTests.push(...reads);
+    }
+    noteReach(name, how) {
+        const had = this.reach.get(name);
+        if (had === true)
+            return;
+        if (how === true)
+            this.reach.set(name, true);
+        else
+            addSubjects(had ?? this.reach.set(name, noSubjects()).get(name), how);
+    }
+    /**
+     * 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.
+     */
+    reachOf(classes) {
+        let under = null;
+        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)
+                addSubjects((under ??= noSubjects()), how);
+        }
+        return under;
+    }
+    /** Whether one of the rules `subjects` stands for could be for a node. */
+    isFor(subjects, node) {
+        return writtenFor(subjects, node);
+    }
+    /**
+     * Whether a cache is of this generation, or of one before sheets that could not match the
+     * node were added, which leaves it as it was: it is then brought up to this one.
+     */
+    current(cached, node) {
+        if (cached.generation === this.generation)
+            return true;
+        // The one cache shared by every node with nothing to style is not one node's to move on.
+        if (cached.context === ROOT_CONTEXT)
+            return false;
+        let at = cached.generation;
+        for (const added of this.additions) {
+            if (added.before !== at)
+                continue;
+            if (writtenFor(added.subjects, node))
+                return false;
+            at = added.after;
+        }
+        if (at !== this.generation)
+            return false;
+        cached.generation = at;
         return true;
     }
     /** Stop matching a sheet `addGlobalSheet` added; false when it is not one. */
@@ -768,16 +1520,19 @@ export class StyleResolver {
         if (at === -1)
             return false;
         this.addedSheets.splice(at, 1);
-        this.merged = new WeakMap();
+        this.filed = null;
+        this.additions.length = 0;
         this.generation = ++generations;
         return true;
     }
     setConditions(next) {
         this.conditions = next;
+        this.additions.length = 0;
         this.generation = ++generations;
     }
     setRootTokens(next) {
         this.tokensOnRoot = next;
+        this.additions.length = 0;
         this.generation = ++generations;
     }
     /**
@@ -801,16 +1556,35 @@ export class StyleResolver {
             cached.epoch = epoch;
             return cached;
         }
+        const kept = this.kept(node, parentContext, epoch);
+        // The rules it was just found to match, where they are not the ones it did. Taken here
+        // whether or not they are used, so that none is left for the next node resolved.
+        const found = this.justMatched;
+        this.justMatched = null;
+        if (kept)
+            return kept;
         const parentInherited = parent ? parent.inherited : EMPTY;
         // 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);
         }
         styleStats.nodesResolved++;
-        const candidates = this.rulesFor(node);
-        const matched = this.matched(node, node.styled ? ELEMENT_ENTRIES.concat(candidates) : candidates);
+        const matched = found ?? 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);
+        node.styleCache = cache;
+        node.styleDirty = false;
+        node.hasDirty = false;
+        node.stateDirty = false;
+        return cache;
+    }
+    /**
+     * 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) {
         const cache = {
             epoch,
             generation: this.generation,
@@ -818,10 +1592,75 @@ export class StyleResolver {
             parentContext,
             ...styled,
         };
-        node.styleCache = cache;
-        node.styleDirty = false;
+        if (this.tracksHas)
+            cache.matched = matched;
         return cache;
     }
+    /**
+     * Set by the engine once a sheet uses `:has()`, styles a pressed element or asks about a place
+     * in a child list. Until then no cache keeps the rules it matched, so an app that never asks
+     * pays nothing for it.
+     */
+    tracksHas = false;
+    /**
+     * The cache of a node whose subtree changed, and nothing else, when it matches the rules it
+     * did: keeping the object is what leaves everything under it alone. Nothing when it has to be
+     * resolved, as it does with no record of what it matched, made before any sheet asked.
+     */
+    keptBeneath(node, parentContext, epoch) {
+        const cached = node.styleCache;
+        const stands = (node.hasDirty === true || node.stateDirty === true) &&
+            cached?.matched !== undefined &&
+            !node.styleDirty &&
+            cached.parentContext === parentContext &&
+            this.current(cached, node);
+        if (!stands)
+            return null;
+        const now = this.matchedBy(node);
+        const before = cached.matched;
+        if (now.length !== before.length || now.some((rule, i) => rule !== before[i])) {
+            // It is styled again next, from the rules just found rather than from finding them twice.
+            this.justMatched = now;
+            return null;
+        }
+        node.hasDirty = false;
+        node.stateDirty = false;
+        cached.epoch = epoch;
+        return cached;
+    }
+    /** The rules a node matches now, weakest first. */
+    matchedBy(node) {
+        const candidates = this.rulesFor(node);
+        return this.matched(node, node.styled ? ELEMENT_ENTRIES.concat(candidates) : candidates);
+    }
+    /**
+     * The rules `keptBeneath` found the node being resolved to match, where they are other than
+     * it matched before: it is styled from them next, rather than matched a second time.
+     */
+    justMatched = null;
+    /** A cache that still stands for a node marked for its subtree or its state alone. */
+    kept(node, parentContext, epoch) {
+        return (this.keptBeneath(node, parentContext, epoch) ?? this.keptUnmatched(node, parentContext, epoch));
+    }
+    /**
+     * The cache of a node whose pressed state changed and nothing else, where no rule can match
+     * it at all: it has no style of its own to change, so it and all under it stay as they are.
+     */
+    keptUnmatched(node, parentContext, epoch) {
+        const cached = node.styleCache;
+        const stands = node.stateDirty === true &&
+            cached !== null &&
+            !node.styleDirty &&
+            !node.hasDirty &&
+            cached.parentContext === parentContext &&
+            this.current(cached, node) &&
+            (node.anonymous === true || this.hasNoRules(node));
+        if (!stands)
+            return null;
+        node.stateDirty = false;
+        cached.epoch = epoch;
+        return cached;
+    }
     /**
      * Whether a node's last answer still stands under a parent that resolved to `parentContext`,
      * without resolving it. What lets a commit step over a clean child in one comparison.
@@ -836,8 +1675,10 @@ export class StyleResolver {
     reusable(cached, node, parentContext) {
         return (cached !== null &&
             !node.styleDirty &&
+            !node.hasDirty &&
+            !node.stateDirty &&
             cached.parentContext === parentContext &&
-            cached.generation === this.generation);
+            this.current(cached, node));
     }
     /**
      * Nothing anywhere can match this node, and it sets no custom property of its own, so its style
@@ -887,59 +1728,74 @@ export class StyleResolver {
         };
         node.styleCache = passthrough;
         node.styleDirty = false;
+        node.stateDirty = false;
         return passthrough;
     }
     /**
-     * The rules worth trying against a node.
+     * The rules worth trying against a node, in cascade order.
      *
-     * The merged list is built once per (creating sheet, hosted sheet) pair and indexed by key
-     * selector; what comes back here is only the buckets this node can reach. For a component's own
-     * sheet that changes little, but a global utility sheet is hundreds of rules and a screen is a
-     * thousand nodes, and the difference is between a million match attempts and a few thousand.
-     */
-    rulesFor(node) {
-        const creator = node.sheet ?? NO_SHEET;
-        let byHost = this.merged.get(creator);
-        if (!byHost)
-            this.merged.set(creator, (byHost = new Map()));
-        let index = byHost.get(node.hostSheet);
-        if (!index) {
-            byHost.set(node.hostSheet, (index = indexRules(this.merge(node.sheet, node.hostSheet))));
-        }
-        return candidateRules(node, index);
-    }
-    /**
-     * Weakest first. A host node is matched against two component sheets: the one belonging to the
-     * component it hosts, whose `:host` rules exist to reach exactly this node, and the one that
-     * created it. Both carry the bump; the creator comes later and so wins a tie, as the outer
-     * document does over `:host` on the web. The sort is stable, so within one sheet source order
-     * survives and a later sheet wins equal weight.
+     * Every sheet is filed once, by key selector: the app's global sheet and each sheet added to it
+     * in one index, and a component's own in one of its own. What comes back is only the buckets
+     * this node can reach. A global utility sheet is hundreds of rules and a screen is a thousand
+     * nodes, and the difference is between a million match attempts and a few thousand. A library
+     * adds a sheet for each of its components as the component first renders, dozens on one
+     * screen, so one more is added to what is filed and nothing is filed again.
+     *
+     * Sheets are filed in the order a document holds them, which is the order of two rules of the
+     * same weight, and where a layer gets its place: the app's global sheet, the host's own, the
+     * creating component's, then each added sheet as it came. The component layers get a small
+     * specificity bump, so the encapsulation attribute Angular adds on the web does not have to
+     * be written.
      *
      * A sheet added with `addGlobalSheet` comes last, with no bump: a browser adds a None
      * component's CSS when the component first renders, after the styles of the components around
      * it, so it loses to their extra attribute and wins a tie with them.
      */
-    merge(sheet, hostSheet) {
-        const entries = [];
-        const add = (from, bump) => {
-            if (!from)
-                return;
-            this.placeLayers(from);
-            for (const rule of from.rules) {
-                entries.push({ rule, sheet: from, weight: rule.specificity + bump });
-            }
-        };
-        add(this.globalSheet, 0);
-        add(hostSheet, COMPONENT_SPECIFICITY_BUMP);
-        add(sheet, COMPONENT_SPECIFICITY_BUMP);
-        for (const added of this.addedSheets)
-            add(added, 0);
-        if (!entries.some((entry) => entry.rule.layer !== undefined)) {
-            return entries.sort((a, b) => a.weight - b.weight);
+    rulesFor(node) {
+        if (this.globalSheet)
+            this.placeLayers(this.globalSheet);
+        const indexes = [];
+        if (node.hostSheet)
+            indexes.push(this.ownIndex(node.hostSheet, HOSTS));
+        if (node.sheet)
+            indexes.push(this.ownIndex(node.sheet, CREATED));
+        indexes.push(this.sharedIndex());
+        return candidateRules(node, indexes, this.cascadeOrder);
+    }
+    /** Weakest first: by layer where any sheet has one, then by weight, then as they were filed. */
+    cascadeOrder = (a, b) => {
+        const layers = this.layered
+            ? layerOrder(this.layerPlaces.get(a.entry.rule), this.layerPlaces.get(b.entry.rule))
+            : 0;
+        return layers || a.entry.weight - b.entry.weight || a.at - b.at;
+    };
+    /** A component's sheet as the rules of a host or of a creator, which differ only in their place. */
+    ownIndex(sheet, role) {
+        let roles = this.ownIndexes.get(sheet);
+        if (!roles)
+            this.ownIndexes.set(sheet, (roles = []));
+        return (roles[role] ??= indexRules(this.entries(sheet, COMPONENT_SPECIFICITY_BUMP), undefined, role * SHEET_ROOM));
+    }
+    /** The app's global sheet and every sheet added to it, with any added since the last read. */
+    sharedIndex() {
+        if (!this.filed) {
+            this.filed = { buckets: new Map(), universal: [] };
+            this.filedAdded = 0;
+            if (this.globalSheet)
+                indexRules(this.entries(this.globalSheet, 0), this.filed, 0);
         }
-        this.layered = true;
-        const places = this.layerPlaces;
-        return entries.sort((a, b) => layerOrder(places.get(a.rule), places.get(b.rule)) || a.weight - b.weight);
+        for (; this.filedAdded < this.addedSheets.length; this.filedAdded++) {
+            const from = (ADDED + this.filedAdded) * SHEET_ROOM;
+            indexRules(this.entries(this.addedSheets[this.filedAdded], 0), this.filed, from);
+        }
+        return this.filed;
+    }
+    /** A sheet's rules at their weight here, with its layers given their places. */
+    entries(sheet, bump) {
+        this.placeLayers(sheet);
+        if (sheet.rules.some((rule) => rule.layer !== undefined))
+            this.layered = true;
+        return sheet.rules.map((rule) => ({ rule, sheet, weight: rule.specificity + bump }));
     }
     /**
      * Gives each of a sheet's layers its place among every sheet's, the first time the sheet is
@@ -982,7 +1838,8 @@ export class StyleResolver {
     styled(node, matched, parentTokens, parentInherited) {
         // Shared between nodes that match alike, unless the node sets something of its own.
         const inline = node.inlineInherits ? inlineInherited(node.props['style']) : null;
-        if (node.customProperties || inline || node.boundStyle) {
+        // Nor one that takes a value from its parent's own style, which two parents differ in.
+        if (node.customProperties || inline || node.boundStyle || matched.some(takesParents)) {
             return this.style(node, matched, parentTokens, parentInherited, inline);
         }
         if (this.sharedGeneration !== this.generation) {
@@ -1022,21 +1879,23 @@ export class StyleResolver {
                 ...matched,
                 { declarations: inline ?? EMPTY, ...(bound && { deferred: bound }) },
             ]
-            : matched);
+            : matched, parentInherited);
         // Tokens are in scope for this node's own declarations as well as its descendants', so they
         // are merged before any `var()` here is resolved.
-        const tokens = tokensInScope(parentTokens, result.tokens, node.customProperties);
+        const tokens = tokensInScope(parentTokens, result.tokens, node.customProperties, result.importantTokens);
         const own = result.declarations;
         if (result.deferred) {
             this.applyDeferred(result.deferred, own, tokens, parentInherited, result.important);
         }
-        if (own['borderStyle'] === 'none')
-            drawNoBorder(own);
+        settleBorders(own);
         // `pointer-events: inherit` won the cascade: what the parent hands down stands.
         if (own['pointerEvents'] === 'inherit')
             delete own['pointerEvents'];
         const style = { ...parentInherited, ...own };
-        return { style, inherited: decorate(style, inheritFrom(parentInherited, own), own), tokens };
+        const inherited = decorate(style, inheritFrom(parentInherited, own), own);
+        const rtl = (style['direction'] ?? this.conditions.direction) === 'rtl';
+        const important = importantNames(result, () => TWIN[rtl ? 'rtl' : 'ltr']);
+        return important ? { style, inherited, tokens, important } : { style, inherited, tokens };
     }
     /** The rules that apply to a node, weakest first. */
     matched(node, entries) {
@@ -1048,14 +1907,16 @@ export class StyleResolver {
         return out;
     }
     /** The declarations of the rules a node matched. The list is sorted, so later simply wins. */
-    cascade(matched) {
+    cascade(matched, parentInherited) {
         const normal = {};
         const important = {};
         let hasImportant = false;
         let tokens = null;
         let importantTokens = null;
         let deferred = null;
+        const forms = new OtherForms(() => this.directionOf(matched, parentInherited));
         for (const rule of this.layered ? byImportance(matched, this.layerPlaces) : matched) {
+            deferred = forms.before(rule, normal, important, deferred);
             Object.assign(normal, rule.declarations);
             if (rule.important) {
                 Object.assign(important, rule.important);
@@ -1067,17 +1928,50 @@ export class StyleResolver {
             if (rule.importantTokens) {
                 Object.assign((importantTokens ??= {}), pick(rule.tokens, rule.importantTokens));
             }
-            deferred = carryDeferred(deferred, rule);
+            deferred = forms.within(rule, normal, important, carryDeferred(deferred, rule));
         }
         if (importantTokens)
             Object.assign(tokens, importantTokens);
+        deferred = forms.after(normal, deferred);
         return {
             declarations: hasImportant ? { ...normal, ...important } : normal,
             important: hasImportant ? important : null,
             tokens,
+            importantTokens,
             deferred,
         };
     }
+    /**
+     * An inline style over the style the cascade settled, both already in `style`: a corner or an
+     * edge the inline style sets takes the other form of it out, as a later rule would.
+     */
+    overOtherForms(inline, style) {
+        let twin = null;
+        const written = Object.keys(inline);
+        for (const [at, key] of written.entries()) {
+            if (!(key in TWIN.ltr))
+                continue;
+            twin ??= TWIN[(style['direction'] ?? this.conditions.direction) === 'rtl' ? '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];
+        }
+    }
+    /**
+     * 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.
+     */
+    directionOf(matched, parentInherited) {
+        let plain;
+        let important;
+        for (const rule of matched) {
+            plain = rule.declarations['direction'] ?? plain;
+            important = rule.important?.['direction'] ?? important;
+        }
+        const direction = important ?? plain ?? parentInherited['direction'] ?? this.conditions.direction;
+        return direction === 'rtl' ? 'rtl' : 'ltr';
+    }
     /**
      * Whether a rule's media query holds, memoised per rule.
      *
@@ -1115,7 +2009,9 @@ export class StyleResolver {
     }
     /** What the device answers for a feature that is a keyword rather than a measurement. */
     preference(feature) {
-        const { width, height, colorScheme, reducedMotion } = this.conditions;
+        const { width, height, colorScheme, reducedMotion, direction } = this.conditions;
+        if (feature === 'direction')
+            return direction ?? 'ltr';
         if (feature === 'orientation')
             return width > height ? 'landscape' : 'portrait';
         if (feature === 'prefers-color-scheme')
@@ -1142,6 +2038,10 @@ export class StyleResolver {
      */
     applyDeferred(deferred, own, tokens, parentInherited, important) {
         for (const declaration of settlingOrder(deferred)) {
+            if (declaration.inherit) {
+                this.inherit(declaration, own, parentInherited, important);
+                continue;
+            }
             const settled = this.settled(declaration, own, parentInherited, tokens);
             if (settled === undefined && this.onUndefinedToken) {
                 this.reportUndefined(declaration, tokens);
@@ -1160,6 +2060,42 @@ export class StyleResolver {
             }
         }
     }
+    /** Note what the node being resolved takes an `inherit` from, and that its parent has an heir. */
+    heir(node, parent, matched) {
+        this.parentOf = parent;
+        this.parentInline = node.parent?.props['style'];
+        if (parent && matched.some(takesParents))
+            parent.heirs = true;
+    }
+    /** What the parent of the node being resolved came to: an `inherit` takes its values from it. */
+    parentOf = null;
+    /** That parent's inline style, which is over what its rules gave it. */
+    parentInline;
+    /** What the parent's inline style sets, under what its rules marked important, as on the parent. */
+    parentSet() {
+        if (!this.parentInline)
+            return EMPTY;
+        const inline = flattenInline(this.parentInline, {});
+        for (const prop of this.parentOf?.important ?? [])
+            delete inline[prop];
+        return inline;
+    }
+    /**
+     * `inherit`: each prop as the parent has it, handed down or its own, and gone where the parent
+     * has none, which is what a weaker rule's value for it gives way to.
+     */
+    inherit(declaration, own, parentInherited, important) {
+        const inline = this.parentSet();
+        for (const prop of declaration.props) {
+            if (!declaration.important && important !== null && prop in important)
+                continue;
+            const value = inline[prop] ?? parentInherited[prop] ?? this.parentOf?.style[prop];
+            if (value === undefined)
+                delete own[prop];
+            else
+                own[prop] = value;
+        }
+    }
     /** One deferred declaration's value, from the tokens in scope and the node's own style. */
     settled(declaration, own, parentInherited, tokens) {
         if (declaration.within !== undefined) {
@@ -1342,9 +2278,34 @@ function settlingOrder(deferred) {
  * The tokens in scope at a node: its parent's, overlaid with what its rules define, overlaid with
  * what it sets itself, which wins as inline style does.
  */
-function tokensInScope(parentTokens, ruleTokens, custom) {
-    const own = custom ? { ...ruleTokens, ...custom } : ruleTokens;
-    return own ? resolveAliases(own, { ...parentTokens, ...own }, parentTokens) : parentTokens;
+function tokensInScope(parentTokens, ruleTokens, custom, important = null) {
+    // What the element sets is over its rules' definitions, but for the ones marked important.
+    const own = custom ? { ...ruleTokens, ...custom, ...important } : ruleTokens;
+    if (!own || changesNothing(own, parentTokens))
+        return parentTokens;
+    return resolveAliases(own, { ...parentTokens, ...own }, parentTokens);
+}
+/**
+ * Whether a node's own definitions leave every token as its parent has it: each is the value the
+ * parent has already, from the same rule, or a CSS-wide keyword that comes to what is in scope.
+ * Tailwind writes `--tw-translate-x: 0`, `--tw-blur: initial` and forty more like them on every
+ * element, so on nearly every node this is all there is, and the parent's map is handed on as it
+ * is where a copy of it, a few hundred tokens, would be made.
+ */
+function changesNothing(own, parentTokens) {
+    for (const name in own) {
+        const value = own[name];
+        // The very value its parent has: the one rule gave it to both, as `*` gives every element.
+        if (parentTokens[name] === value)
+            continue;
+        const word = value.keyword;
+        if (word === undefined || !CSS_WIDE.has(word))
+            return false;
+        // `inherit` and `unset` are the parent's value whatever it is; the rest are no value at all.
+        if (word !== 'inherit' && word !== 'unset' && parentTokens[name] !== undefined)
+            return false;
+    }
+    return true;
 }
 function resolveAliases(own, merged, parentTokens) {
     const names = Object.keys(own);
@@ -1903,7 +2864,8 @@ const LINE_INITIAL = {
     color: 'currentcolor',
 };
 function fillRole(line, values, role, value) {
-    const props = { width: line.widths, color: line.colors, style: [line.style] }[role];
+    const styles = [line.style, ...(line.marks ?? [])];
+    const props = { width: line.widths, color: line.colors, style: styles }[role];
     for (const prop of props)
         values[prop] = value;
 }
@@ -2081,17 +3043,26 @@ function mixSides(mix, tokens, current) {
     const colour = (side) => 'mix' in side ? unroundedMix(side.mix, tokens, current) : innerColour(side, tokens, current);
     const first = colour(mix.a);
     const second = colour(mix.b);
-    if (first === undefined || second === undefined)
+    const shares = [mix.aPercentage, mix.bPercentage].map((share) => shareOf(share, tokens));
+    // A share that is a token nothing sets: no mix, as CSS has no colour for one.
+    if (first === undefined || second === undefined || shares.includes(null))
         return undefined;
     return [
-        { colour: first, percentage: mix.aPercentage },
-        { colour: second, percentage: mix.bPercentage },
+        { colour: first, percentage: shares[0] ?? undefined },
+        { colour: second, percentage: shares[1] ?? undefined },
     ];
 }
 function unroundedMix(mix, tokens, current) {
     const sides = mixSides(mix, tokens, current);
     return sides && mixChannels(mix.space, ...sides, mix.hue);
 }
+/** A share as the percentage it comes to: undefined for none written, null for a token unset. */
+function shareOf(share, tokens) {
+    if (share === undefined || typeof share === 'number')
+        return share;
+    const factor = tokens[share.reference]?.number ?? share.fallback;
+    return factor === undefined ? null : factor * share.scale;
+}
 /** A calc marker worked out, as its slot takes it; undefined when a token in it is not set. */
 function resolveCalc(marker, tokens) {
     const percentage = wholePercentage(marker, tokens);
@@ -2366,7 +3337,7 @@ const RGB = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)
  * mix. A value that is not one of ours is returned untouched: it may be a platform colour, and a
  * colour nobody can parse is better painted as it stands than dropped.
  */
-function faded(value, fraction) {
+export function faded(value, fraction) {
     if (typeof value !== 'string')
         return value;
     const parts = RGB.exec(value);