@ng-native/fabric 0.3.0 → 0.4.0

package/dist/aria-props.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The web's `aria-*` attributes as the props native reads, mapped as React Native's `View.js`
+ * maps them before a view's props reach native.
+ *
+ * An attribute is text, on any element that commits a view: the host of an app's own component
+ * has no input to take one, and a label that is dropped fails silently for exactly the people who
+ * cannot see that it is missing. A prop the element already has is its own answer and is left:
+ * the primitives of `@ng-native/components` take these as inputs and write the props themselves.
+ */
+type Props = Record<string, unknown>;
+/**
+ * Writes into `props` what the `aria-*` attributes among `attributes` say, wherever `props` does
+ * not say it already.
+ */
+export declare function applyAria(attributes: Props, props: Props): void;
+export {};

package/dist/aria-props.js

@@ -0,0 +1,78 @@
+/**
+ * The web's `aria-*` attributes as the props native reads, mapped as React Native's `View.js`
+ * maps them before a view's props reach native.
+ *
+ * An attribute is text, on any element that commits a view: the host of an app's own component
+ * has no input to take one, and a label that is dropped fails silently for exactly the people who
+ * cannot see that it is missing. A prop the element already has is its own answer and is left:
+ * the primitives of `@ng-native/components` take these as inputs and write the props themselves.
+ */
+/** `'true'` and `'false'` as the booleans they say; anything else, `mixed` included, as written. */
+const flag = (value) => value === 'true' || value === '' ? true : value === 'false' ? false : value;
+/** Text as the number it says, and nothing where it says none: `NaN` is no value to send. */
+const number = (value) => {
+    if (typeof value !== 'string')
+        return value;
+    const said = value.trim() === '' ? NaN : Number(value);
+    return Number.isFinite(said) ? said : undefined;
+};
+/** The attributes that are one prop each, with how the value is read. */
+const ONE_TO_ONE = {
+    'aria-label': ['accessibilityLabel', (value) => value],
+    'aria-labelledby': [
+        'accessibilityLabelledBy',
+        (value) => (typeof value === 'string' ? value.split(/\s*,\s*/) : value),
+    ],
+    'aria-live': ['accessibilityLiveRegion', (value) => (value === 'off' ? 'none' : value)],
+    'aria-hidden': ['accessibilityElementsHidden', flag],
+    'aria-modal': ['accessibilityViewIsModal', flag],
+};
+/** The attributes gathered into `accessibilityState`, by the key each is there. */
+const STATE = {
+    'aria-busy': 'busy',
+    'aria-checked': 'checked',
+    'aria-disabled': 'disabled',
+    'aria-expanded': 'expanded',
+    'aria-selected': 'selected',
+};
+/** The attributes gathered into `accessibilityValue`. */
+const VALUE = {
+    'aria-valuemax': 'max',
+    'aria-valuemin': 'min',
+    'aria-valuenow': 'now',
+    'aria-valuetext': 'text',
+};
+/** `attributes` gathered into one object by `keys`, or undefined when it has none of them. */
+function gathered(attributes, keys, read) {
+    let out;
+    for (const attribute of Object.keys(keys)) {
+        const value = attributes[attribute];
+        const said = value === undefined || value === null ? undefined : read(keys[attribute], value);
+        if (said !== undefined)
+            (out ??= {})[keys[attribute]] = said;
+    }
+    return out;
+}
+/**
+ * Writes into `props` what the `aria-*` attributes among `attributes` say, wherever `props` does
+ * not say it already.
+ */
+export function applyAria(attributes, props) {
+    for (const attribute of Object.keys(ONE_TO_ONE)) {
+        const value = attributes[attribute];
+        const [prop, read] = ONE_TO_ONE[attribute];
+        if (value !== undefined && value !== null && props[prop] === undefined)
+            props[prop] = read(value);
+    }
+    // As `View.js`: a hidden element takes what is inside it out of the accessibility tree on
+    // Android too, which has no prop of its own for that.
+    if (flag(attributes['aria-hidden']) === true)
+        props['importantForAccessibility'] ??= 'no-hide-descendants';
+    const state = gathered(attributes, STATE, (_, value) => flag(value));
+    if (state)
+        props['accessibilityState'] ??= state;
+    const value = gathered(attributes, VALUE, (key, part) => (key === 'text' ? part : number(part)));
+    if (value)
+        props['accessibilityValue'] ??= value;
+}
+//# sourceMappingURL=aria-props.js.map

package/dist/aria-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-props.js","sourceRoot":"","sources":["../src/aria-props.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The web's `aria-*` attributes as the props native reads, mapped as React Native's `View.js`\n * maps them before a view's props reach native.\n *\n * An attribute is text, on any element that commits a view: the host of an app's own component\n * has no input to take one, and a label that is dropped fails silently for exactly the people who\n * cannot see that it is missing. A prop the element already has is its own answer and is left:\n * the primitives of `@ng-native/components` take these as inputs and write the props themselves.\n */\n\ntype Props = Record<string, unknown>;\n\n/** `'true'` and `'false'` as the booleans they say; anything else, `mixed` included, as written. */\nconst flag = (value: unknown): unknown =>\n  value === 'true' || value === '' ? true : value === 'false' ? false : value;\n\n/** Text as the number it says, and nothing where it says none: `NaN` is no value to send. */\nconst number = (value: unknown): unknown => {\n  if (typeof value !== 'string') return value;\n  const said = value.trim() === '' ? NaN : Number(value);\n  return Number.isFinite(said) ? said : undefined;\n};\n\n/** The attributes that are one prop each, with how the value is read. */\nconst ONE_TO_ONE: Readonly<\n  Record<string, readonly [prop: string, read: (value: unknown) => unknown]>\n> = {\n  'aria-label': ['accessibilityLabel', (value) => value],\n  'aria-labelledby': [\n    'accessibilityLabelledBy',\n    (value) => (typeof value === 'string' ? value.split(/\\s*,\\s*/) : value),\n  ],\n  'aria-live': ['accessibilityLiveRegion', (value) => (value === 'off' ? 'none' : value)],\n  'aria-hidden': ['accessibilityElementsHidden', flag],\n  'aria-modal': ['accessibilityViewIsModal', flag],\n};\n\n/** The attributes gathered into `accessibilityState`, by the key each is there. */\nconst STATE: Readonly<Record<string, string>> = {\n  'aria-busy': 'busy',\n  'aria-checked': 'checked',\n  'aria-disabled': 'disabled',\n  'aria-expanded': 'expanded',\n  'aria-selected': 'selected',\n};\n\n/** The attributes gathered into `accessibilityValue`. */\nconst VALUE: Readonly<Record<string, string>> = {\n  'aria-valuemax': 'max',\n  'aria-valuemin': 'min',\n  'aria-valuenow': 'now',\n  'aria-valuetext': 'text',\n};\n\n/** `attributes` gathered into one object by `keys`, or undefined when it has none of them. */\nfunction gathered(\n  attributes: Props,\n  keys: Readonly<Record<string, string>>,\n  read: (key: string, value: unknown) => unknown,\n): Props | undefined {\n  let out: Props | undefined;\n  for (const attribute of Object.keys(keys)) {\n    const value = attributes[attribute];\n    const said = value === undefined || value === null ? undefined : read(keys[attribute]!, value);\n    if (said !== undefined) (out ??= {})[keys[attribute]!] = said;\n  }\n  return out;\n}\n\n/**\n * Writes into `props` what the `aria-*` attributes among `attributes` say, wherever `props` does\n * not say it already.\n */\nexport function applyAria(attributes: Props, props: Props): void {\n  for (const attribute of Object.keys(ONE_TO_ONE)) {\n    const value = attributes[attribute];\n    const [prop, read] = ONE_TO_ONE[attribute]!;\n    if (value !== undefined && value !== null && props[prop] === undefined)\n      props[prop] = read(value);\n  }\n  // As `View.js`: a hidden element takes what is inside it out of the accessibility tree on\n  // Android too, which has no prop of its own for that.\n  if (flag(attributes['aria-hidden']) === true)\n    props['importantForAccessibility'] ??= 'no-hide-descendants';\n  const state = gathered(attributes, STATE, (_, value) => flag(value));\n  if (state) props['accessibilityState'] ??= state;\n  const value = gathered(attributes, VALUE, (key, part) => (key === 'text' ? part : number(part)));\n  if (value) props['accessibilityValue'] ??= value;\n}\n"]}

package/dist/css.d.ts

@@ -59,11 +59,18 @@ export interface StyleRule {
     /** Between compounds; length is `compounds.length - 1`. */
     readonly combinators: readonly Combinator[];
     readonly specificity: number;
+    /**
+     * The cascade layer the rule is in, as its place in its sheet's `layers`, or nothing for a rule
+     * in no layer, which beats every layered one whatever their specificity.
+     */
+    readonly layer?: number;
     readonly order: number;
     readonly declarations: Readonly<Record<string, unknown>>;
     readonly important?: Readonly<Record<string, unknown>>;
     /** Custom properties this rule defines, pre-converted into every form a use site might want. */
     readonly tokens?: Readonly<Record<string, TokenValue>>;
+    /** The names among `tokens` declared `!important`, which beat every plain one. */
+    readonly importantTokens?: readonly string[];
     /** Declarations whose value is a `var()`, resolved once the token map is known. */
     readonly deferred?: readonly DeferredDeclaration[];
     /** The media query guarding this rule, if any. */
@@ -186,6 +193,8 @@ export interface DeferredDeclaration {
      * unambiguous given a single-valued token, so `padding: var(--gap)` writes all four.
      */
     readonly props: readonly string[];
+    /** The element a bound declaration is on, by name, for a message about it to say. */
+    readonly on?: string;
     /** A `var()` reference. Exactly one of this and `compute` is present. */
     readonly kind?: TokenKind;
     readonly reference?: string;
@@ -284,6 +293,8 @@ export interface LineTemplate {
     readonly roles: readonly ('width' | 'style' | 'color')[];
     readonly widths: readonly string[];
     readonly colors: readonly string[];
+    /** `color-mix(in srgb, var(--tint) 35%, transparent)`: the colour, written as a function. */
+    readonly colour?: unknown;
     readonly style?: string;
 }
 /**
@@ -363,6 +374,12 @@ export interface GradientTemplate {
 }
 export interface StyleSheet {
     readonly rules: readonly StyleRule[];
+    /**
+     * The sheet's cascade layers, each by its name from the outermost layer in, in the order they
+     * were first named. A name that starts with a null is a block with no name, which is a layer
+     * no other block can name.
+     */
+    readonly layers?: readonly (readonly string[])[];
     /**
      * `@keyframes` by name. Global within a sheet, as they are within a document; the engine keeps
      * one registry across every sheet it sees, so a name defined in a global stylesheet is usable
@@ -386,6 +403,8 @@ export interface StyleSheet {
         readonly family: string;
         readonly source: unknown;
         readonly weight?: number;
+        /** The weights a variable font covers, `font-weight: 100 900`, in place of one `weight`. */
+        readonly weightRange?: readonly [number, number];
         readonly style?: string;
     }[];
 }
@@ -432,6 +451,20 @@ export interface StyleTarget {
     readonly kind?: string;
     readonly classes: ReadonlySet<string> | null;
     readonly props: Readonly<Record<string, unknown>>;
+    /**
+     * Whether `props.style` sets a property children inherit, kept by whoever sets the style so the
+     * resolver reads the style only where it can matter. Absent is false.
+     */
+    readonly inlineInherits?: boolean;
+    /**
+     * The bound declarations that are a `var()`, `[style.color]="'var(--brand)'"`, as the deferred
+     * declarations a rule's would be: settled with the node's tokens, last of its normal ones.
+     */
+    readonly boundStyle?: readonly DeferredDeclaration[] | null;
+    /** A node the engine made, such as the paragraph around loose text: it only inherits. */
+    readonly anonymous?: true;
+    /** One of HTML's text elements the engine has styles of its own for, such as `strong`. */
+    readonly styled?: true;
     /**
      * The sheet this node's own rules come from, which is the sheet of the component whose renderer
      * created it. Read from the node rather than passed in, because a node's ancestors usually
@@ -521,6 +554,14 @@ export declare function indexRules(entries: readonly RuleEntry[]): RuleIndex;
  * lists are short by construction, which is the entire point of the index.
  */
 export declare function candidateRules(node: StyleTarget, index: RuleIndex): RuleEntry[];
+/** Whether an inline style sets a property children inherit. Allocates nothing: it runs per set. */
+export declare function setsInherited(style: unknown): boolean;
+/**
+ * The inherited properties a node's inline style sets, or null for none. Inline style is the
+ * strongest normal declaration on its element, so what it sets is inherited, and read by
+ * `color: inherit` and `currentColor`, as a rule's would be.
+ */
+export declare function inlineInherited(style: unknown): Record<string, unknown> | null;
 /**
  * The runtime half of CSS for one engine: the global sheet, the conditions media queries are
  * evaluated against, and the memo that makes resolution cost nodes x rules rather than
@@ -558,6 +599,21 @@ export declare class StyleResolver {
      * single index.
      */
     private merged;
+    /**
+     * 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.
+     * It stays set once a layered sheet has gone, which costs a look at each cascade and no more.
+     */
+    private layered;
+    /**
+     * Every layer the sheets seen so far have named, in the order each name was first seen, which
+     * is the one order a document has for them. A name keeps its place when its sheet is replaced.
+     */
+    private readonly layerNames;
+    /** Each layered rule's place among them, set when its sheet is first merged. */
+    private readonly layerPlaces;
+    private readonly layeredSheets;
+    private unnamedLayers;
     /**
      * The application-level sheet, if any: the one set of rules allowed to match a node whatever
      * component created it, which is what resets, utility classes and `:root` tokens all need.
@@ -584,7 +640,7 @@ export declare class StyleResolver {
      * Told of a `var()` that names a custom property nothing in scope defines and has no fallback,
      * which is dropped. Set only in development, where it is how the engine says so.
      */
-    onUndefinedToken: ((name: string, props: readonly string[]) => void) | null;
+    onUndefinedToken: ((name: string, props: readonly string[], on?: string) => void) | null;
     /**
      * Told of a `display: var()` whose token holds no display native has, `grid` or `table`, which
      * leaves display unset. Set only in development, where it is how the engine says so: the
@@ -658,6 +714,12 @@ export declare class StyleResolver {
      * it, so it loses to their extra attribute and wins a tie with them.
      */
     private merge;
+    /**
+     * Gives each of a sheet's layers its place among every sheet's, the first time the sheet is
+     * merged, and each of its layered rules that place. Sheets are merged in the order a document
+     * holds them: the app's global sheet, then each component's as it first renders.
+     */
+    private placeLayers;
     /**
      * A node's style from the rules it matched, shared with every other node that matched the same
      * rules under the same inherited values and tokens: a list's rows, and what is inside each.
@@ -722,6 +784,16 @@ export declare class StyleResolver {
     /** A length relative to the viewport or to the font size in scope. */
     private computed;
 }
+/**
+ * A bound declaration whose value is one `var()`, `var(--brand, red)`, as the deferred declaration
+ * the compiler writes for the same value in a rule. `token` is the value as a token, which is an
+ * alias when it is a `var()`; null for any other.
+ *
+ * ponytail: the whole value has to be the `var()`. One inside a longer value, `calc()` included,
+ * is what the compiler parses at build time and nothing here does; write the sum in a custom
+ * property, `[style.--gap]`, and read that in the stylesheet.
+ */
+export declare function boundDeclaration(prop: string, token: TokenValue | undefined, on?: string): DeferredDeclaration | null;
 /** `hsl()` reads a channels token as hue, saturation and lightness; `rgb()` as sRGB. */
 type ChannelSpace = 'rgb' | 'hsl';
 /**