@ng-native/fabric 0.6.0 → 0.8.0

package/dist/background-layers.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A `background` a token holds as text, where it is no single colour: the gradients a library
+ * works out as the app runs and sets as a custom property, a colour slider's track or a colour
+ * area's two fades over a colour. A stylesheet's gradient is compiled when the app is built; one
+ * set on an element is read here, into what a view's `experimental_backgroundImage` takes.
+ *
+ * ponytail: `linear-gradient()` with a side or an angle and colour stops at percentages, which
+ * is what such a library writes. A corner, a length or two positions on a stop, `radial-` and
+ * `repeating-` are not read, and the whole background is then nothing, as an invalid one is.
+ * Native has no conic gradient at all.
+ */
+export interface BackgroundLayers {
+    readonly images: readonly object[];
+    /** The colour under the images: the last layer, where it is one. */
+    readonly color?: string;
+}
+/** The layers a background's text holds, or nothing where any of it is not read. */
+export declare function backgroundLayers(text: string): BackgroundLayers | undefined;

package/dist/background-layers.js

@@ -0,0 +1,70 @@
+import { parseColor } from "./transition.js";
+const SIDES = {
+    'to top': 0,
+    'to right': 90,
+    'to bottom': 180,
+    'to left': 270,
+};
+/** Split at the commas that are not inside brackets. */
+function split(text) {
+    const parts = [];
+    let depth = 0;
+    let from = 0;
+    for (let at = 0; at < text.length; at++) {
+        const char = text[at];
+        if (char === '(')
+            depth++;
+        else if (char === ')')
+            depth--;
+        else if (char === ',' && depth === 0) {
+            parts.push(text.slice(from, at).trim());
+            from = at + 1;
+        }
+    }
+    parts.push(text.slice(from).trim());
+    return parts;
+}
+const rgba = (text) => {
+    const parsed = parseColor(text);
+    return parsed ? `rgba(${parsed[0]}, ${parsed[1]}, ${parsed[2]}, ${parsed[3]})` : undefined;
+};
+/** A direction in degrees, or nothing for a first argument that is a colour stop. */
+function direction(first) {
+    const side = SIDES[first.toLowerCase()];
+    if (side !== undefined)
+        return side;
+    const angle = /^(-?[\d.]+)deg$/i.exec(first);
+    return angle ? Number(angle[1]) : undefined;
+}
+/** `rgba(…) 40%` as a stop, or nothing for one this does not read. */
+function stop(text) {
+    const placed = /^(.*\S)\s+(-?[\d.]+%)$/.exec(text);
+    const color = rgba(placed ? placed[1] : text);
+    return color === undefined ? undefined : { color, position: placed ? placed[2] : null };
+}
+function linear(layer) {
+    const inside = /^linear-gradient\((.*)\)$/is.exec(layer)?.[1];
+    if (inside === undefined)
+        return undefined;
+    const parts = split(inside);
+    const angle = direction(parts[0]);
+    const stops = (angle === undefined ? parts : parts.slice(1)).map(stop);
+    if (stops.length < 2 || stops.some((each) => each === undefined))
+        return undefined;
+    return {
+        type: 'linear-gradient',
+        direction: { type: 'angle', value: angle ?? 180 },
+        colorStops: stops,
+    };
+}
+/** The layers a background's text holds, or nothing where any of it is not read. */
+export function backgroundLayers(text) {
+    const layers = split(text.trim());
+    const last = layers.at(-1);
+    const color = parseColor(last) ? last : undefined;
+    const images = (color === undefined ? layers : layers.slice(0, -1)).map(linear);
+    if (!images.length || images.some((each) => each === undefined))
+        return undefined;
+    return { images: images, color };
+}
+//# sourceMappingURL=background-layers.js.map

package/dist/background-layers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-layers.js","sourceRoot":"","sources":["../src/background-layers.ts"],"names":[],"mappings":"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","sourcesContent":["import { parseColor } from './transition.ts';\n\n/**\n * A `background` a token holds as text, where it is no single colour: the gradients a library\n * works out as the app runs and sets as a custom property, a colour slider's track or a colour\n * area's two fades over a colour. A stylesheet's gradient is compiled when the app is built; one\n * set on an element is read here, into what a view's `experimental_backgroundImage` takes.\n *\n * ponytail: `linear-gradient()` with a side or an angle and colour stops at percentages, which\n * is what such a library writes. A corner, a length or two positions on a stop, `radial-` and\n * `repeating-` are not read, and the whole background is then nothing, as an invalid one is.\n * Native has no conic gradient at all.\n */\nexport interface BackgroundLayers {\n  readonly images: readonly object[];\n  /** The colour under the images: the last layer, where it is one. */\n  readonly color?: string;\n}\n\nconst SIDES: Readonly<Record<string, number>> = {\n  'to top': 0,\n  'to right': 90,\n  'to bottom': 180,\n  'to left': 270,\n};\n\n/** Split at the commas that are not inside brackets. */\nfunction split(text: string): string[] {\n  const parts: string[] = [];\n  let depth = 0;\n  let from = 0;\n  for (let at = 0; at < text.length; at++) {\n    const char = text[at];\n    if (char === '(') depth++;\n    else if (char === ')') depth--;\n    else if (char === ',' && depth === 0) {\n      parts.push(text.slice(from, at).trim());\n      from = at + 1;\n    }\n  }\n  parts.push(text.slice(from).trim());\n  return parts;\n}\n\nconst rgba = (text: string): string | undefined => {\n  const parsed = parseColor(text);\n  return parsed ? `rgba(${parsed[0]}, ${parsed[1]}, ${parsed[2]}, ${parsed[3]})` : undefined;\n};\n\n/** A direction in degrees, or nothing for a first argument that is a colour stop. */\nfunction direction(first: string): number | undefined {\n  const side = SIDES[first.toLowerCase()];\n  if (side !== undefined) return side;\n  const angle = /^(-?[\\d.]+)deg$/i.exec(first);\n  return angle ? Number(angle[1]) : undefined;\n}\n\n/** `rgba(…) 40%` as a stop, or nothing for one this does not read. */\nfunction stop(text: string): { color: string; position: string | null } | undefined {\n  const placed = /^(.*\\S)\\s+(-?[\\d.]+%)$/.exec(text);\n  const color = rgba(placed ? placed[1]! : text);\n  return color === undefined ? undefined : { color, position: placed ? placed[2]! : null };\n}\n\nfunction linear(layer: string): object | undefined {\n  const inside = /^linear-gradient\\((.*)\\)$/is.exec(layer)?.[1];\n  if (inside === undefined) return undefined;\n  const parts = split(inside);\n  const angle = direction(parts[0]!);\n  const stops = (angle === undefined ? parts : parts.slice(1)).map(stop);\n  if (stops.length < 2 || stops.some((each) => each === undefined)) return undefined;\n  return {\n    type: 'linear-gradient',\n    direction: { type: 'angle', value: angle ?? 180 },\n    colorStops: stops,\n  };\n}\n\n/** The layers a background's text holds, or nothing where any of it is not read. */\nexport function backgroundLayers(text: string): BackgroundLayers | undefined {\n  const layers = split(text.trim());\n  const last = layers.at(-1)!;\n  const color = parseColor(last) ? last : undefined;\n  const images = (color === undefined ? layers : layers.slice(0, -1)).map(linear);\n  if (!images.length || images.some((each) => each === undefined)) return undefined;\n  return { images: images as object[], color };\n}\n"]}

package/dist/css.d.ts

@@ -222,6 +222,11 @@ export interface DeferredDeclaration {
      * unambiguous given a single-valued token, so `padding: var(--gap)` writes all four.
      */
     readonly props: readonly string[];
+    /**
+     * `background: var()`: the token may hold gradients over a colour, so `props` names the image
+     * beside the colour and each is written from its own part of the token. See `layersOf`.
+     */
+    readonly layers?: true;
     /**
      * `inherit`, written for these props: each is the parent's value for it, or nothing where the
      * parent has none.
@@ -299,6 +304,11 @@ export interface DeferredDeclaration {
         readonly unit: 'em' | 'vw' | 'vh' | 'vmin' | 'vmax';
         readonly factor: number;
         readonly offset?: number;
+        /**
+         * A unitless line-height: the node renders `factor` em, and what it hands down is the number,
+         * which each text under it multiplies its own font size by. See `LineHeightMultiple`.
+         */
+        readonly multiple?: true;
     };
     /**
      * A structured value - a transform list, a shadow, a filter - with lengths like `compute`'s
@@ -693,6 +703,10 @@ interface IndexedEntry {
 export interface RuleIndex {
     readonly buckets: Map<string, IndexedEntry[]>;
     readonly universal: IndexedEntry[];
+    /** Whether any rule is filed under an attribute, which a node's props are then looked up for. */
+    attributes?: boolean;
+    /** Whether any is filed under the class of an element its own is inside. */
+    under?: boolean;
 }
 /**
  * File rules by key selector, each at `from` and on: its place among every rule there is, which
@@ -843,6 +857,13 @@ export declare class StyleResolver {
     private readonly noted;
     /** Read the classes a sheet names, once, as soon as any node is given it. */
     noteSheet(sheet: StyleSheet | null | undefined): void;
+    /** The props a selector of some sheet asks about: an id, and each attribute by its name. */
+    private readonly named;
+    /**
+     * Whether a prop changing can change what any element matches: only where a selector of a
+     * sheet that was ever loaded names it. A sheet loaded later has every element matched again.
+     */
+    reads(prop: string): boolean;
     private noteReach;
     /**
      * What classes coming to an element or going from it can restyle: `true` for it and all

package/dist/css.js

@@ -6,6 +6,7 @@
  * framework-agnostic and knows nothing about Angular.
  */
 import { mixChannels, mixColours, } from "./color-mix.js";
+import { backgroundLayers } from "./background-layers.js";
 import { ELEMENT_STYLES } from "./element-styles.js";
 import { relativeColour } from "./relative-colour.js";
 /** A run of CSS whitespace: spaces, tabs, newlines, carriage returns and form feeds, and no other. */
@@ -229,22 +230,30 @@ function matchesAttribute(node, test) {
         return false;
     if (test.operator === undefined)
         return true;
-    const value = attributeText(actual, test);
-    switch (test.operator) {
+    // `^=`, `$=`, `*=` and `~=` with an empty value match nothing, as Selectors 4 says.
+    if (test.value === '' && !EMPTY_MATCHES.has(test.operator))
+        return false;
+    return matchesValue(attributeText(actual, test), test.operator, test.value);
+}
+/** 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. */
+function matchesValue(value, operator, expected) {
+    switch (operator) {
         case 'equal':
-            return value === test.value;
+            return value === expected;
         case 'prefix':
-            return value.startsWith(test.value);
+            return value.startsWith(expected);
         case 'suffix':
-            return value.endsWith(test.value);
+            return value.endsWith(expected);
         case 'substring':
-            return value.includes(test.value);
+            return value.includes(expected);
         case 'includes':
             // `~=` matches one whole word of a space-separated list.
-            return value.split(/\s+/).includes(test.value);
+            return value.split(/\s+/).includes(expected);
         case 'dash-match':
             // `|=` matches the value itself or the value followed by a hyphen, as `lang` uses.
-            return value === test.value || value.startsWith(`${test.value}-`);
+            return value === expected || value.startsWith(`${expected}-`);
     }
 }
 /*
@@ -905,7 +914,34 @@ export function ruleKeys(rule) {
     const held = parentClass(rule, key);
     if (held !== undefined)
         return [`in:${held}`];
-    return alternativeKeys(key) ?? EVERY_NODE;
+    return alternativeKeys(key) ?? attributeKey(key) ?? ancestorKeys(rule, key) ?? EVERY_NODE;
+}
+/**
+ * The buckets of a rule for anything inside an element with a class, `.item:focus *`: under the
+ * class, or each class the element may have instead. Offered to what has such an element
+ * somewhere over it, where the universal bucket has every element walk to the root to find none.
+ */
+function ancestorKeys(rule, key) {
+    const joined = rule.combinators[rule.combinators.length - 1];
+    const above = key.ancestors?.[0] ??
+        (joined === 'descendant' ? rule.compounds[rule.compounds.length - 2] : undefined);
+    if (!above)
+        return undefined;
+    if (above.classes.length)
+        return [`under:${above.classes[0]}`];
+    const any = above.is?.[0];
+    if (!any?.length || any.some((one) => !one.classes.length))
+        return undefined;
+    return any.map((one) => `under:${one.classes[0]}`);
+}
+/**
+ * The bucket of a rule that names its element by an attribute and nothing else, `[ngpButton]`:
+ * a prop the element has to have, which is how a headless library names every element it
+ * styles. Not `class`, which is no prop of the element's to find the bucket by.
+ */
+function attributeKey(key) {
+    const named = key.attributes?.find((test) => test.name !== 'class');
+    return named ? [`attr:${named.name}`] : undefined;
 }
 /** A class the node's parent has to have for the rule to match, where its selector says one. */
 function parentClass(rule, key) {
@@ -958,6 +994,10 @@ export function indexRules(entries, into = { buckets: new Map(), universal: [] }
                 into.universal.push(indexed);
                 continue;
             }
+            if (key.startsWith('attr:'))
+                into.attributes = true;
+            else if (key.startsWith('under:'))
+                into.under = true;
             const bucket = into.buckets.get(key);
             if (bucket)
                 bucket.push(indexed);
@@ -990,6 +1030,27 @@ function reach(node, index, found) {
     if (around)
         for (const name of around)
             take(`in:${name}`);
+    if (index.attributes)
+        reachByAttribute(node, take);
+    if (index.under)
+        reachUnder(node, take);
+}
+/** The buckets of the classes of every element over a node. */
+function reachUnder(node, take) {
+    for (let above = node.parent; above; above = above.parent) {
+        if (above.classes)
+            for (const name of above.classes)
+                take(`under:${name}`);
+    }
+}
+/** The buckets of the attributes a node has: a prop of its own that is set. */
+function reachByAttribute(node, take) {
+    for (const name in node.props) {
+        const value = node.props[name];
+        // As `matchesAttribute` has it: a prop that is false is an attribute that is not there.
+        if (value !== undefined && value !== null && value !== false)
+            take(`attr:${name}`);
+    }
 }
 /**
  * The rules worth trying against a node, in cascade order: `order` says which of two comes
@@ -1082,9 +1143,10 @@ function classReach(sheet) {
         return found;
     const classes = new Map();
     const reads = [];
+    const named = new Set();
     for (const rule of sheet.rules) {
         const every = new Set();
-        collectClasses(rule, every, reads);
+        collectClasses(rule, every, reads, named);
         const inside = classesInside(rule);
         for (const name of every) {
             if (!inside.has(name))
@@ -1093,7 +1155,7 @@ function classReach(sheet) {
                 noteInside(classes, name, rule);
         }
     }
-    reaches.set(sheet, (found = { classes, reads }));
+    reaches.set(sheet, (found = { classes, reads, named }));
     return found;
 }
 /** Note a rule as one that names a class as what its element is inside. */
@@ -1155,24 +1217,30 @@ function classesInside(rule) {
 }
 /** 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) {
+/**
+ * Add each class under `value` to `into`, each test of the `class` attribute to `reads`, and the
+ * name of every attribute asked about to `named`.
+ */
+function collectClasses(value, into, reads, named) {
     if (value === null || typeof value !== 'object')
         return;
-    if (Array.isArray(value))
-        return value.forEach((inner) => collectClasses(inner, into, reads));
+    if (Array.isArray(value)) {
+        return value.forEach((inner) => collectClasses(inner, into, reads, named));
+    }
     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)
+        for (const test of part.attributes) {
+            named?.add(test.name);
             if (test.name === 'class')
                 reads.push(test);
+        }
     }
     for (const [key, inner] of Object.entries(value)) {
         if (!DECLARED.has(key))
-            collectClasses(inner, into, reads);
+            collectClasses(inner, into, reads, named);
     }
 }
 /**
@@ -1226,6 +1294,40 @@ function emptyCacheFor(epoch, generation) {
         tokens: NO_TOKENS,
     };
 }
+function isMultiple(value) {
+    return typeof value === 'object' && value !== null && 'multiple' in value;
+}
+/** A line-height as points, for a node of font size `size`: what an em of it comes to. */
+function lineHeightPoints(line, size) {
+    const points = line.multiple * (typeof size === 'number' ? size : DEFAULT_FONT_SIZE);
+    return Math.round(points * 1000) / 1000;
+}
+/** A node's style with a unitless line-height it set or inherited worked out against its font size. */
+function settleLineHeight(style) {
+    const line = style['lineHeight'];
+    if (isMultiple(line))
+        style['lineHeight'] = lineHeightPoints(line, style['fontSize']);
+}
+/** The styles of nodes with no rules, by the map they inherit, for one that hands down a multiple. */
+const unstyledStyles = new WeakMap();
+/**
+ * The style of a node no rule matches: what it inherits, with a unitless line-height worked out
+ * against its font size, which an inline style can set. The same object where there is none.
+ */
+function unstyledStyle(inherited, inline) {
+    const line = inherited['lineHeight'];
+    if (!isMultiple(line))
+        return inherited;
+    const size = inline?.['fontSize'];
+    if (typeof size === 'number')
+        return { ...inherited, lineHeight: lineHeightPoints(line, size) };
+    let style = unstyledStyles.get(inherited);
+    if (!style) {
+        style = { ...inherited, lineHeight: lineHeightPoints(line, inherited['fontSize']) };
+        unstyledStyles.set(inherited, style);
+    }
+    return style;
+}
 /**
  * What this node's children inherit: the parent's map, overlaid with any inheritable value the
  * node set itself. Copied on first write only, so a node that sets none hands the same object on
@@ -1457,10 +1559,21 @@ export class StyleResolver {
         if (!sheet || this.noted.has(sheet))
             return;
         this.noted.add(sheet);
-        const { classes, reads } = classReach(sheet);
+        const { classes, reads, named } = classReach(sheet);
         for (const [name, how] of classes)
             this.noteReach(name, how);
         this.classTests.push(...reads);
+        for (const name of named)
+            this.named.add(name);
+    }
+    /** The props a selector of some sheet asks about: an id, and each attribute by its name. */
+    named = new Set(['nativeID']);
+    /**
+     * Whether a prop changing can change what any element matches: only where a selector of a
+     * sheet that was ever loaded names it. A sheet loaded later has every element matched again.
+     */
+    reads(prop) {
+        return this.named.has(prop);
     }
     noteReach(name, how) {
         const had = this.reach.get(name);
@@ -1722,7 +1835,7 @@ export class StyleResolver {
             generation: this.generation,
             context: {},
             parentContext,
-            style: parentInherited,
+            style: unstyledStyle(parentInherited, inline),
             inherited: inline ? inheritFrom(parentInherited, inline) : parentInherited,
             tokens,
         };
@@ -1892,6 +2005,7 @@ export class StyleResolver {
         if (own['pointerEvents'] === 'inherit')
             delete own['pointerEvents'];
         const style = { ...parentInherited, ...own };
+        settleLineHeight(style);
         const inherited = decorate(style, inheritFrom(parentInherited, own), own);
         const rtl = (style['direction'] ?? this.conditions.direction) === 'rtl';
         const important = importantNames(result, () => TWIN[rtl ? 'rtl' : 'ltr']);
@@ -2052,11 +2166,10 @@ export class StyleResolver {
             if (unread && this.onUnreadDisplay && !outranked('display')) {
                 this.reportDisplay(declaration, tokens);
             }
-            const value = settled ?? declaration.unset;
+            const layers = settled === undefined ? layersOf(declaration, tokens) : undefined;
             for (const prop of declaration.props) {
-                if (outranked(prop))
-                    continue;
-                write(own, prop, value, declaration.line !== undefined);
+                if (!outranked(prop))
+                    writeSettled(own, prop, declaration, settled, layers);
             }
         }
     }
@@ -2233,9 +2346,11 @@ export class StyleResolver {
     }
     /** A length relative to the viewport or to the font size in scope. */
     computed(declaration, own, parentInherited) {
-        const { unit, factor, offset = 0 } = declaration.compute;
+        const { unit, factor, offset = 0, multiple } = declaration.compute;
         if (unit !== 'em')
             return this.viewportLength(unit, factor) + offset;
+        if (multiple && !offset)
+            return { multiple: factor };
         // The font size in scope. On `font-size` itself that is the inherited size rather than the
         // one being computed, which is what makes a nested `1.5em` compound as on the web.
         const base = declaration.props.includes('fontSize')
@@ -2722,6 +2837,41 @@ function tokenForm(token, kind) {
     const value = formOf(token, kind);
     return value === undefined && kind === 'color' && isCurrentColour(token) ? CURRENT_COLOUR : value;
 }
+/** What a deferred declaration settled to, written to one of its props. */
+function writeSettled(own, prop, declaration, settled, layers) {
+    const value = settled ?? declaration.unset;
+    if (declaration.layers)
+        writeLayer(own, prop, value, layers);
+    else
+        write(own, prop, value, declaration.line !== undefined);
+}
+/**
+ * One prop of a `background: var()`, whose token may hold the images as well as the colour. The
+ * image is written only where the token holds one: a token that is a colour leaves an image
+ * another rule declared as it is. Each prop is ranked in the cascade by itself, so an image a
+ * later rule declares, or an important one, is not written over by the token's.
+ */
+function writeLayer(own, prop, value, layers) {
+    if (prop !== BACKGROUND_IMAGE)
+        write(own, prop, layers?.color ?? value, false);
+    else if (layers)
+        own[prop] = layers.images;
+}
+const BACKGROUND_IMAGE = 'experimental_backgroundImage';
+/**
+ * The gradients a `background: var()` reads where its token is no colour: see `backgroundLayers`.
+ * Only the shorthand, which the compiler marks: `background-color: var()` is a colour or nothing.
+ * And only where the token is set as text on an element, which is where a library sets one as the
+ * app runs; a stylesheet's is refused where it is written. The token is the one the declaration
+ * settles on, the first that is set.
+ */
+function layersOf(declaration, tokens) {
+    if (!declaration.layers)
+        return undefined;
+    const names = [declaration.reference, ...(declaration.alternatives ?? [])];
+    const text = firstSet(names, tokens)?.keyword;
+    return text && /gradient\(/i.test(text) ? backgroundLayers(text) : undefined;
+}
 const BOUND_NUMBERS = new Set([
     'opacity',
     'flex',