@react-x11/components 0.11.0 → 0.12.0

package/src/html/controls.ts

@@ -24,7 +24,7 @@ import type { Element } from 'domhandler';
 import { attr, tagOf } from './dom.js';
 import type { ComputedStyle } from './css/style.js';
 import { isTransparent } from './css/values.js';
-import type { BoxTree, ReplacedKind } from './layout/boxes.js';
+import type { Box, BoxTree, ReplacedKind } from './layout/boxes.js';
 import type { FontsLike } from './layout/inline.js';
 
 /** The palette numbers a control's box has to reserve room for. */
@@ -48,15 +48,24 @@ export interface ControlRect {
   width: number;
   height: number;
   /**
-   * Set on a text field whose own box the author styled — gave it a border
-   * or a background (`styledField`). The document draws that box, and the
-   * widget goes bare inside its content box, here, with no frame or fill
-   * of its own and its text in the element's colour and font.
+   * Set on a text field or a `<select>` whose own box the author styled —
+   * gave it a border or a background (`styledField`). The document draws
+   * that box, and the widget goes bare inside its content box, here, with
+   * no frame or fill of its own and its text in the element's colour and
+   * font.
    */
   bare?: BareField;
+  /**
+   * How opaque the widget is drawn, where it is less than 1: the element's
+   * own `opacity` times every ancestor's, since each fades what is in it as
+   * a group. At 0 the widget is not seen and still takes a press, as the
+   * element does in a browser — the checkbox a CSS-only dropdown lays,
+   * invisible, over its label.
+   */
+  opacity?: number;
 }
 
-/** Where a styled text field's widget goes, and how its text looks. */
+/** Where a styled field's widget goes, and how its text looks. */
 export interface BareField {
   x: number;
   y: number;
@@ -65,6 +74,12 @@ export interface BareField {
   color: string;
   fontFamily: string;
   fontSize: number;
+  /**
+   * A `<select>`'s: whether it draws its arrow. It does unless the page set
+   * `appearance: none`, which is how a page that draws its own arrow — as a
+   * background image, most often — says so.
+   */
+  chevron?: boolean;
 }
 
 /** The rectangles every control in a laid-out document landed on. */
@@ -73,6 +88,8 @@ export function controlRectsOf(tree: BoxTree): ControlRect[] {
   for (const box of tree.controls) {
     if (!box.el) continue;
     if (box.width <= 0 || box.height <= 0) continue;
+    // a hidden element draws nothing and takes no press (CSS 2.1 11.2)
+    if (box.style.visibility !== 'visible') continue;
     const rect: ControlRect = {
       element: box.el,
       kind: box.replaced,
@@ -81,6 +98,11 @@ export function controlRectsOf(tree: BoxTree): ControlRect[] {
       width: box.width,
       height: box.height,
     };
+    let opacity = 1;
+    for (let at: Box | null = box; at; at = at.parent) {
+      opacity *= at.style.opacity;
+    }
+    if (opacity < 1) rect.opacity = Math.max(0, opacity);
     if (styledField(box.replaced, box.style)) {
       rect.bare = {
         x: box.contentX,
@@ -90,6 +112,9 @@ export function controlRectsOf(tree: BoxTree): ControlRect[] {
         color: box.style.color,
         fontFamily: box.style.fontFamily,
         fontSize: box.style.fontSize,
+        ...(box.replaced === 'select' && {
+          chevron: box.style.appearance !== 'none',
+        }),
       };
     }
     out.push(rect);
@@ -98,17 +123,23 @@ export function controlRectsOf(tree: BoxTree): ControlRect[] {
 }
 
 /**
- * Whether a text field's box is the author's to draw: one given a border or
- * a background of its own, which the UA sheet gives no control, or set to
+ * Whether a field's box is the author's to draw: one given a border or a
+ * background of its own, which the UA sheet gives no control, or set to
  * `appearance: none`, which says so outright. A browser drops a field's
  * native look for the author's then (CSS UI 4 7.1, `appearance`), and so
  * does this: the widget's frame and fill would hide the author's, and what
  * they would draw is the theme's rather than the page's. `appearance: none`
  * is how a design system writes every field it has — meetup.com's search
  * pill holds two with no background, only one of them with a border.
+ *
+ * A `<select>` is one too. A browser keeps its arrow when the page gave it a
+ * border or a background (Blink's `menulist-button`), and leaves that out
+ * as well at `appearance: none` — `BareField.chevron`.
  */
 export function styledField(kind: ReplacedKind, style: ComputedStyle): boolean {
-  if (kind !== 'input' && kind !== 'textarea') return false;
+  if (kind !== 'input' && kind !== 'textarea' && kind !== 'select') {
+    return false;
+  }
   return (
     style.appearance === 'none' ||
     !isTransparent(style.backgroundColor) ||
@@ -168,6 +199,16 @@ export function measureControl(
     }
     case 'select': {
       const widest = optionWidths(el);
+      // a select the page styled is its widest option and its arrow, and
+      // the room around them is the page's
+      if (styledField(kind, style)) {
+        return {
+          width: Math.round(
+            ch * widest + (style.appearance === 'none' ? 0 : em),
+          ),
+          height: lineHeight,
+        };
+      }
       // The room for the chevron is the widget's, not the document's, but
       // the document has to reserve it or the last letter of the widest
       // option sits under it.

package/src/html/css/cascade.ts

@@ -49,6 +49,7 @@ import { parseDeclarations } from './parse.js';
 import { CounterStyles, counterStyleRule } from './counter-styles.js';
 import type { CounterStyleRule } from './counter-styles.js';
 import type { UnitContext } from './values.js';
+import { viewportUnit } from './values.js';
 import { customProperties, substituteIn } from './vars.js';
 import type { CustomProps } from './vars.js';
 
@@ -703,7 +704,7 @@ export class Cascade {
     for (const d of declarations) {
       if (!VIEWPORT_UNIT.test(d.value)) continue;
       for (const m of d.value.matchAll(VIEWPORT_UNITS)) {
-        const unit = m[1].toLowerCase();
+        const unit = viewportUnit(m[1]);
         if (unit !== 'vh') this.readsViewportWidth = true;
         if (unit !== 'vw') this.readsViewportHeight = true;
       }
@@ -1196,7 +1197,8 @@ export class Cascade {
     // pick the face an `ex`, a `ch` or an `lh` in any declaration is
     // measured in, however the declarations are ordered. A `width: 10ex`
     // in a sheet under an inline `font-weight: 900` was measured in the
-    // family's regular face.
+    // family's regular face. The colour scheme goes ahead of the rest for
+    // the same reason: every `light-dark()` among them is read by it.
     let sized = false;
     let keyword = false;
     for (const c of candidates) {
@@ -1204,7 +1206,8 @@ export class Cascade {
         if (
           d.prop === 'font-family' ||
           d.prop === 'font-weight' ||
-          d.prop === 'font-style'
+          d.prop === 'font-style' ||
+          d.prop === 'color-scheme'
         ) {
           this._apply(style, parentStyle, d, ctxParent);
         } else if (d.prop === 'font-size' || d.prop === 'font') {
@@ -1490,10 +1493,20 @@ function asRoot(style: ComputedStyle): ComputedStyle {
 
 /** `:root` is the `<html>` element: the one a browser implies around a
  *  fragment, whose style the root box takes (`rootStyle`), and never a
- *  fragment's top-level elements, which css-select would take for it. */
+ *  fragment's top-level elements, which css-select would take for it.
+ *
+ *  `:focus` and its two kin match nothing: no element of the document takes
+ *  the focus — a control's widget does, beside it. css-select has none of
+ *  the three and throws on them, which dropped every rule that named one,
+ *  `:not(:focus)` among them: Wikipedia's skip link hides with
+ *  `.mw-jump-link:not(:focus)`, and without it stood in the flow at the top
+ *  of every page. */
 const PSEUDOS = {
   root: (el: Element) =>
     el.name === 'html' && !(el.parent && isTag(el.parent as Element)),
+  focus: () => false,
+  'focus-visible': () => false,
+  'focus-within': () => false,
   // css-select's, but its ranges and tags lower-cased as ASCII has it, and
   // no other script (CSS 2.1 4.1.3): Unicode's took `:lang(\u212Al)`, a
   // Kelvin sign for the K, for `:lang(kl)`
@@ -1527,8 +1540,8 @@ const PSEUDOS = {
 
 /** A length in a unit of the viewport: a number, then the unit, and no
  *  more of a name after it. */
-const VIEWPORT_UNIT = /\d(?:vw|vh|vmin|vmax)(?![\w-])/i;
-const VIEWPORT_UNITS = /\d(vw|vh|vmin|vmax)(?![\w-])/gi;
+const VIEWPORT_UNIT = /\d[sld]?v(?:w|h|i|b|min|max)(?![\w-])/i;
+const VIEWPORT_UNITS = /\d([sld]?v(?:w|h|i|b|min|max))(?![\w-])/gi;
 
 /**
  * A selector with its `[attr~=""]` made one that matches nothing: an empty

package/src/html/css/color.ts

@@ -1,4 +1,5 @@
 import * as ntk from 'react-x11/ntk';
+import { closingParen, topLevelComma } from './vars.js';
 
 // CSS Color 4's functional colours: read here, and written back in the one
 // form every drawing context reads — `#rrggbb`, or `rgba(r, g, b, a)` with
@@ -753,3 +754,89 @@ const REC2020_TO_XYZ: readonly Triple[] = [
   [26158966 / 99577255, 472592308 / 697040785, 8267143 / 139408157],
   [0, 19567812 / 697040785, 295819943 / 278816314],
 ];
+
+// --- colour schemes ---------------------------------------------------------
+
+/** Whether a value has a `light-dark()` in it. */
+export const LIGHT_DARK = /(?:^|[^\w-])light-dark\(/i;
+const LIGHT_DARK_AT = /(?:^|[^\w-])(light-dark\()/gi;
+
+/**
+ * A value with each `light-dark()` in it replaced by the branch `scheme`
+ * picks (CSS Color 5, 7): the first where the element's used colour
+ * scheme is light, the second where it is dark. Replaced in the text, as a
+ * `var()` is, so a branch can be any colour — or another `light-dark()` —
+ * in any value a colour stands in. Null where one is not two arguments,
+ * which makes the declaration invalid.
+ */
+export function lightDark(
+  value: string,
+  scheme: 'light' | 'dark',
+): string | null {
+  let out = value;
+  // a branch can hold another, which the next round replaces
+  for (let round = 0; round < 32; round += 1) {
+    LIGHT_DARK_AT.lastIndex = 0;
+    const m = LIGHT_DARK_AT.exec(out);
+    if (!m) return out;
+    const open = m.index + m[0].length;
+    const start = open - m[1].length;
+    const close = closingParen(out, open);
+    if (close < 0) return null;
+    const inner = out.slice(open, close);
+    const comma = topLevelComma(inner);
+    if (comma < 0) return null;
+    const light = inner.slice(0, comma).trim();
+    const dark = inner.slice(comma + 1).trim();
+    if (!light || !dark || topLevelComma(dark) >= 0) return null;
+    out =
+      out.slice(0, start) +
+      (scheme === 'dark' ? dark : light) +
+      out.slice(close + 1);
+  }
+  return null;
+}
+
+/**
+ * The scheme an element with this `color-scheme` is drawn in (CSS Color
+ * Adjust 1, 2.2), given the one `preferred` — the palette's, which stands
+ * for the reader's preference: that one where the element supports it,
+ * else the first it names that is one, else the one `normal` gives, which
+ * is the palette's own too. Null for a value that is not a `color-scheme`.
+ */
+export function usedColorScheme(
+  value: string,
+  preferred: 'light' | 'dark' = 'light',
+): 'light' | 'dark' | null {
+  const words = value.trim().toLowerCase().split(/\s+/);
+  if (words.length === 1 && words[0] === 'normal') return preferred;
+  // `[ light | dark | <custom-ident> ]+ && only?`: `only` once, first or
+  // last, and never on its own
+  const only = words.indexOf('only');
+  if (only >= 0) {
+    if (only !== 0 && only !== words.length - 1) return null;
+    words.splice(only, 1);
+    if (!words.length) return null;
+  }
+  let first: 'light' | 'dark' | null = null;
+  for (const word of words) {
+    if (!SCHEME_IDENT.test(word) || NOT_SCHEMES.has(word)) return null;
+    if (word === preferred) return preferred;
+    if (!first && (word === 'light' || word === 'dark')) first = word;
+  }
+  return first ?? preferred;
+}
+
+const SCHEME_IDENT = /^-?(?:[a-z_]|--)[\w-]*$/;
+/** What a scheme's name cannot be: the keywords the grammar has, and the
+ *  CSS-wide ones, which reach here only in a list. */
+const NOT_SCHEMES = new Set([
+  'normal',
+  'only',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'revert-layer',
+  'default',
+]);

package/src/html/css/parse.ts

@@ -242,8 +242,11 @@ export function parseStylesheet(
         } else if (name === 'supports' && at.block !== null) {
           // Everything in a `@supports` block is markup this renderer either
           // understands or ignores per-declaration, so entering it is closer
-          // to right than skipping it.
-          walk(at.block, media, layer, path);
+          // to right than skipping it — but for a condition it can answer
+          // false (`supportsCondition`)
+          if (supportsCondition(at.prelude) !== false) {
+            walk(at.block, media, layer, path);
+          }
         } else if (name === 'layer') {
           // `@layer a, b;` names layers, and so fixes their order, and
           // `@layer a { … }` puts rules in one; one with no name is a layer
@@ -342,7 +345,9 @@ export function parseStylesheet(
           depth + 1,
         );
       } else if (name === 'supports') {
-        styleRule(selectors, item.block, media, layer, path, depth + 1);
+        if (supportsCondition(item.prelude) !== false) {
+          styleRule(selectors, item.block, media, layer, path, depth + 1);
+        }
       } else if (name === 'layer' && LAYER_NAME.test(item.prelude.trim())) {
         const [ranks, full] = enter(item.prelude.trim(), layer, path);
         styleRule(selectors, item.block, media, ranks, full, depth + 1);
@@ -1775,7 +1780,7 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
         sawWidth = true;
         continue;
       }
-      const feature = /^\(\s*([a-z-]+)\s*:\s*([^)]+?)\s*\)$/i.exec(term);
+      const feature = mediaFeature(term);
       if (feature) {
         const key = feature[1].toLowerCase();
         const len = parseLength(feature[2], ZERO_UNITS);
@@ -1845,6 +1850,104 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
   return out.length ? out : [{ staticPass: true }];
 }
 
+/**
+ * The properties whose support a `@supports` condition is answered for:
+ * the mask's, which pages test before they draw an icon as a masked colour
+ * and keep a background image under `not` for an engine without them.
+ * Drawn here, and the fallback drawn too, an icon was its image in black
+ * under the mask, over the colour it was meant to be.
+ */
+const ANSWERED = new Set(
+  [
+    'mask',
+    'mask-image',
+    'mask-repeat',
+    'mask-position',
+    'mask-size',
+    'mask-origin',
+    'mask-clip',
+  ].flatMap((name) => [name, `-webkit-${name}`]),
+);
+
+/**
+ * Whether a `@supports` condition holds (CSS Conditional 3, 6): true or
+ * false where it turns on declarations of the properties this answers for
+ * (`ANSWERED`), combined by `not`, `and` and `or`; null where it turns on
+ * anything else, or is none, and the block is entered as every one was.
+ * Answering more is not safe without a list of what this draws: Tailwind 4
+ * keeps its variables' starting values under a test for engines without
+ * `@property`, which this is, and false there would drop every shadow and
+ * gradient it writes.
+ */
+export function supportsCondition(prelude: string): boolean | null {
+  const text = prelude.trim();
+  if (/^not\b/i.test(text)) {
+    const inner = supportsCondition(text.slice(3));
+    return inner === null ? null : !inner;
+  }
+  // the terms at the top level, and the one operator between them
+  const terms: string[] = [];
+  let op = '';
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    const c = text[i];
+    if (c === '(') depth += 1;
+    else if (c === ')') depth -= 1;
+    else if (depth === 0 && /\s/.test(c)) {
+      const word = /^\s+(and|or)\s+/i.exec(text.slice(i));
+      if (!word) continue;
+      const next = word[1].toLowerCase();
+      // `and` and `or` mixed without parentheses is no condition
+      if (op && op !== next) return null;
+      op = next;
+      terms.push(text.slice(start, i));
+      i += word[0].length - 1;
+      start = i + 1;
+    }
+    if (depth < 0) return null;
+  }
+  if (terms.length) {
+    terms.push(text.slice(start));
+    const values = terms.map(supportsCondition);
+    if (op === 'and') {
+      if (values.includes(false)) return false;
+      return values.includes(null) ? null : true;
+    }
+    if (values.includes(true)) return true;
+    return values.includes(null) ? null : false;
+  }
+  // one term: a condition in parentheses, or a declaration in them
+  if (!(text.startsWith('(') && text.endsWith(')'))) return null;
+  const inner = text.slice(1, -1).trim();
+  if (inner.startsWith('(') || /^not\b/i.test(inner)) {
+    return supportsCondition(inner);
+  }
+  const declaration = /^([a-z-]+)\s*:\s*(\S[\s\S]*)$/i.exec(inner);
+  if (!declaration || !ANSWERED.has(declaration[1].toLowerCase())) return null;
+  return true;
+}
+
+/**
+ * A `(name: value)` media feature: the whole term, its name, and its value
+ * read to the parenthesis that closes the feature, or null where the term is
+ * no such thing. A value may hold parentheses of its own: MediaWiki's
+ * breakpoints are `(max-width: calc(640px - 1px))`, and a value read to the
+ * first `)` found no feature there — the term was passed over as though it
+ * said nothing, and every narrow-screen rule held at every width.
+ */
+function mediaFeature(term: string): [string, string, string] | null {
+  const m = /^\(\s*([a-z-]+)\s*:([\s\S]*)\)$/i.exec(term);
+  if (!m) return null;
+  let depth = 0;
+  for (const c of m[2]) {
+    if (c === '(') depth += 1;
+    else if (c === ')' && --depth < 0) return null;
+  }
+  const value = m[2].trim();
+  return depth === 0 && value ? [term, m[1], value] : null;
+}
+
 /** A `@media` width is compared with the viewport in CSS pixels — the
  *  cascade divides the device width by the scale before asking — so the
  *  thresholds parse at scale 1 whatever panel the document lands on. */