@react-x11/components 0.13.0 → 0.14.0

package/dist/html/css/style.js

@@ -15,6 +15,7 @@
 import { AUTO, alphaOf, fourSides, inkColor, isTransparent, keywordFontSize, parseAlpha, parseColor, isPct, parseLength, parseNumber, parseWeight, resolve, splitCommas, splitValue, } from './values.js';
 import { parseUrl, readIdent, startsIdent } from './parse.js';
 import { DEFAULT_QUOTES, parseContent, parseCounterList, parseListStyleType, parseQuotes, } from './content.js';
+import { parseRotate, parseScale, parseTransform } from './transform.js';
 import { LIGHT_DARK, lightDark, usedColorScheme } from './color.js';
 /** Whether a length is one `padding` takes: not `auto`, not negative. A
  *  `calc()` with a percentage in it has no sign until layout, which clamps
@@ -58,6 +59,93 @@ function parseClip(value, ctx) {
     }
     return { top: edges[0], right: edges[1], bottom: edges[2], left: edges[3] };
 }
+/** The boxes `clip-path` names; an SVG one is the CSS box that stands for
+ *  it on an element with a CSS layout box (5.1). */
+const CLIP_BOXES = {
+    'margin-box': 'margin-box',
+    'border-box': 'border-box',
+    'padding-box': 'padding-box',
+    'content-box': 'content-box',
+    'fill-box': 'content-box',
+    'stroke-box': 'border-box',
+    'view-box': 'border-box',
+};
+/** The shapes that are no rectangle, and a reference to a `<clipPath>`
+ *  element: a value, which sets the property, and none this draws. */
+const UNDRAWN_CLIPS = /^(circle|ellipse|polygon|path|shape|url)\(/i;
+const NO_LENGTHS = [0, 0, 0, 0];
+/**
+ * `none`; a rectangle's function, a box, or the two in either order; or a
+ * shape that is no rectangle, which is a value and clips nothing here.
+ * Undefined for anything else, which leaves the value as it was.
+ */
+function parseClipPath(value, ctx) {
+    const v = value.trim();
+    if (/^none$/i.test(v))
+        return null;
+    let box = null;
+    let shape;
+    for (const part of splitValue(v)) {
+        const named = CLIP_BOXES[part.toLowerCase()];
+        if (named) {
+            if (box)
+                return undefined;
+            box = named;
+            continue;
+        }
+        if (shape !== undefined)
+            return undefined;
+        if (UNDRAWN_CLIPS.test(part) && part.endsWith(')'))
+            shape = null;
+        else
+            shape = rectShape(part, ctx);
+        if (shape === undefined)
+            return undefined;
+    }
+    if (shape === null)
+        return null;
+    if (shape)
+        return { box: box ?? 'border-box', ...shape };
+    if (!box)
+        return undefined;
+    return { box, shape: null, lengths: NO_LENGTHS, radii: null, radiiY: null };
+}
+/** `inset()`, `rect()` or `xywh()`, with the corners it rounds; undefined
+ *  for anything else. */
+function rectShape(text, ctx) {
+    const m = /^(inset|rect|xywh)\((.*)\)$/is.exec(text);
+    if (!m)
+        return undefined;
+    const shape = m[1].toLowerCase();
+    const parts = splitValue(m[2].trim());
+    const round = parts.findIndex((p) => p.toLowerCase() === 'round');
+    const sides = round < 0 ? parts : parts.slice(0, round);
+    let radii = null;
+    let radiiY = null;
+    if (round >= 0) {
+        const corners = parseRadii(parts.slice(round + 1).join(' '), ctx);
+        if (!corners)
+            return undefined;
+        [radii, radiiY] = corners;
+    }
+    // one to four insets, as a margin's sides are written; the other two
+    // take all four
+    if (shape === 'inset' ? !sides.length || sides.length > 4 : sides.length !== 4)
+        return undefined;
+    const lengths = [];
+    for (let i = 0; i < sides.length; i += 1) {
+        const len = parseLength(sides[i], ctx);
+        if (len === null)
+            return undefined;
+        // only `rect()` has an edge that is `auto`, and a width is not negative
+        if (len === AUTO && shape !== 'rect')
+            return undefined;
+        if (shape === 'xywh' && i > 1 && !notNegative(len))
+            return undefined;
+        lengths.push(len);
+    }
+    return { shape, lengths: fourSides(lengths), radii, radiiY };
+}
 /** The properties that inherit. Named once, so `inherit()` and the `inherit`
  *  keyword cannot disagree about the list. */
 /** The fields a style takes from its parent's (CSS 2.1's "Inherited:
@@ -92,6 +180,8 @@ export const INHERITED = [
     'fontFeatureSettings',
     'tabSize',
     'tabSizeIsLength',
+    'orphans',
+    'widows',
     'whiteSpace',
     'overflowWrap',
     'wordBreak',
@@ -103,6 +193,9 @@ export const INHERITED = [
     'listStylePosition',
     'listStyleImage',
     'cursor',
+    'pointerEvents',
+    'fill',
+    'stroke',
     'borderCollapse',
     'borderSpacing',
     'borderSpacingY',
@@ -154,6 +247,9 @@ export function initialStyle(look, scale = 1) {
         listStylePosition: 'outside',
         listStyleImage: null,
         cursor: null,
+        pointerEvents: 'auto',
+        fill: null,
+        stroke: null,
         borderCollapse: 'separate',
         // CSS's initial value; a `<table>` gets its 2px from the UA sheet, and
         // an anonymous table, which no sheet names, has none
@@ -188,6 +284,14 @@ export function initialStyle(look, scale = 1) {
         webkitBoxAlign: null,
         webkitBoxFlex: 0,
         columns: 0,
+        columnCount: null,
+        columnWidth: null,
+        columnGapNormal: true,
+        orphans: 2,
+        widows: 2,
+        breakInside: 'auto',
+        columnFill: 'balance',
+        columnSpan: false,
         textOverflow: 'clip',
         aspectRatio: null,
         objectFit: 'fill',
@@ -197,9 +301,13 @@ export function initialStyle(look, scale = 1) {
         overflowX: 'visible',
         overflowY: 'visible',
         clip: null,
+        clipPath: null,
         opacity: 1,
         translate: null,
-        transformTranslate: null,
+        rotate: null,
+        scale: null,
+        transform: null,
+        transformOrigin: [{ pct: 50 }, { pct: 50 }],
         zIndex: AUTO,
         verticalAlign: 'baseline',
         width: AUTO,
@@ -283,6 +391,8 @@ export function initialStyle(look, scale = 1) {
         underlineThickness: null,
         underlineOffset: null,
         lineThrough: null,
+        lineThroughStyle: 'solid',
+        lineThroughThickness: null,
         flexDirection: 'row',
         flexWrap: 'nowrap',
         justifyContent: 'normal',
@@ -381,6 +491,8 @@ export function inherit(parent, initial) {
     out.fontFeatureSettings = parent.fontFeatureSettings;
     out.tabSize = parent.tabSize;
     out.tabSizeIsLength = parent.tabSizeIsLength;
+    out.orphans = parent.orphans;
+    out.widows = parent.widows;
     out.whiteSpace = parent.whiteSpace;
     out.overflowWrap = parent.overflowWrap;
     out.wordBreak = parent.wordBreak;
@@ -392,6 +504,9 @@ export function inherit(parent, initial) {
     out.listStylePosition = parent.listStylePosition;
     out.listStyleImage = parent.listStyleImage;
     out.cursor = parent.cursor;
+    out.pointerEvents = parent.pointerEvents;
+    out.fill = parent.fill;
+    out.stroke = parent.stroke;
     out.borderCollapse = parent.borderCollapse;
     out.borderSpacing = parent.borderSpacing;
     out.borderSpacingY = parent.borderSpacingY;
@@ -411,6 +526,8 @@ export function inherit(parent, initial) {
     out.underlineThickness = parent.underlineThickness;
     out.underlineOffset = parent.underlineOffset;
     out.lineThrough = parent.lineThrough;
+    out.lineThroughStyle = parent.lineThroughStyle;
+    out.lineThroughThickness = parent.lineThroughThickness;
     return out;
 }
 /**
@@ -444,6 +561,8 @@ export const FIRST_LINE_INHERITED = [
     'underlineThickness',
     'underlineOffset',
     'lineThrough',
+    'lineThroughStyle',
+    'lineThroughThickness',
 ];
 /**
  * What a box on its block's first line inherits from: its parent's style,
@@ -501,6 +620,14 @@ const BORDER_WIDTH_KEYWORDS = {
     medium: 3,
     thick: 5,
 };
+/** `-webkit-` names that are the multicol properties' own. */
+const MULTICOL_ALIASES = {
+    '-webkit-columns': 'columns',
+    '-webkit-column-count': 'column-count',
+    '-webkit-column-width': 'column-width',
+    '-webkit-column-gap': 'column-gap',
+    '-webkit-column-break-inside': 'break-inside',
+};
 /**
  * Apply one declaration to a style, in place.
  *
@@ -510,7 +637,12 @@ const BORDER_WIDTH_KEYWORDS = {
  * correct response to every one of them is to render the rest.
  */
 export function applyDeclaration(style, parent, prop, rawValue, ctx) {
-    const name = prop.toLowerCase();
+    const written = prop.toLowerCase();
+    // the multicol properties under the names WebKit had them by, which
+    // Blink still reads, each an alias of the property (`-webkit-column-
+    // count` in its `css_properties.json5`): a page written for it alone
+    // names no other
+    const name = MULTICOL_ALIASES[written] ?? written;
     let value = rawValue.trim();
     if (!value)
         return;
@@ -645,21 +777,75 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
         case 'column-count':
         case 'column-width':
         case 'columns': {
-            // `auto`, or a count, a width or both of them
+            // `auto`, or a count, a width or both of them, in either order; what
+            // the shorthand leaves out is `auto`
             const bit = name === 'column-count' ? 1 : name === 'column-width' ? 2 : 3;
-            let set = 0;
+            let count = null;
+            let width = null;
             for (const part of splitValue(value)) {
                 const v = part.toLowerCase();
                 if (v === 'auto')
                     continue;
-                if (/^\d+$/.test(v) && Number(v) >= 1)
-                    set |= 1;
-                else if (parseLength(part, ctx) !== null)
-                    set |= 2;
-                else
+                if (/^\d+$/.test(v) && Number(v) >= 1) {
+                    if (count !== null || !(bit & 1))
+                        return;
+                    count = Number(v);
+                    continue;
+                }
+                const len = parseLength(part, ctx);
+                if (typeof len !== 'number' || !(len > 0))
+                    return;
+                if (width !== null || !(bit & 2))
+                    return;
+                width = len;
+            }
+            if (bit & 1)
+                style.columnCount = count;
+            if (bit & 2)
+                style.columnWidth = width;
+            style.columns =
+                (style.columnCount !== null ? 1 : 0) |
+                    (style.columnWidth !== null ? 2 : 0);
+            return;
+        }
+        case 'orphans':
+        case 'widows': {
+            // a whole number of lines, one or more
+            const v = value.trim();
+            if (!/^\+?\d+$/.test(v) || Number(v) < 1)
+                return;
+            style[name] = Number(v);
+            return;
+        }
+        case '-webkit-column-span':
+        case 'column-span': {
+            const v = value.trim().toLowerCase();
+            if (v === 'all')
+                style.columnSpan = true;
+            else if (v === 'none')
+                style.columnSpan = false;
+            return;
+        }
+        case 'column-fill': {
+            const v = value.trim().toLowerCase();
+            if (v === 'auto')
+                style.columnFill = 'auto';
+            else if (v === 'balance' || v === 'balance-all') {
+                style.columnFill = 'balance';
+            }
+            return;
+        }
+        case 'break-inside':
+        case 'page-break-inside': {
+            const v = value.trim().toLowerCase();
+            if (v === 'auto')
+                style.breakInside = 'auto';
+            else if (/^avoid(?:-page|-column|-region)?$/.test(v)) {
+                // the legacy property knows `avoid` alone
+                if (name === 'page-break-inside' && v !== 'avoid')
                     return;
+                style.breakInside = 'avoid';
             }
-            style.columns = (style.columns & ~bit) | (set & bit);
             return;
         }
         case '-webkit-box-flex': {
@@ -927,6 +1113,13 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
                 style.clip = clip;
             return;
         }
+        case 'clip-path':
+        case '-webkit-clip-path': {
+            const path = parseClipPath(value, ctx);
+            if (path !== undefined)
+                style.clipPath = path;
+            return;
+        }
         case 'opacity': {
             const a = parseAlpha(value);
             if (a !== null)
@@ -950,10 +1143,38 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
             style.translate = [x, y ?? 0];
             return;
         }
-        case 'transform': {
-            const moved = transformTranslation(value, ctx);
-            if (moved !== undefined)
-                style.transformTranslate = moved;
+        case 'rotate': {
+            const turn = parseRotate(value);
+            if (turn !== undefined)
+                style.rotate = turn;
+            return;
+        }
+        case 'scale': {
+            const factors = parseScale(value);
+            if (factors !== undefined)
+                style.scale = factors;
+            return;
+        }
+        case 'transform':
+        case '-webkit-transform': {
+            const list = parseTransform(value, ctx);
+            if (list !== undefined)
+                style.transform = list;
+            return;
+        }
+        case 'transform-origin':
+        case '-webkit-transform-origin': {
+            // across and down, as a position is, and a depth nothing here has
+            const parts = splitValue(value);
+            if (parts.length === 3) {
+                if (typeof parseLength(parts.pop(), ctx) !== 'number')
+                    return;
+            }
+            else if (parts.length > 2)
+                return;
+            const origin = positionPair(parts, ctx);
+            if (origin)
+                style.transformOrigin = origin;
             return;
         }
         case 'visibility': {
@@ -1242,19 +1463,9 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
             return;
         }
         case 'border-radius': {
-            // one to four radii, and after a `/` one to four more for the
-            // vertical radii where they differ: elliptical corners
-            const halves = value.split('/');
-            if (halves.length > 2)
-                return;
-            const [horizontal, vertical] = halves.map((half) => splitValue(half).map((p) => radiusOf(p, ctx)));
-            for (const parts of vertical ? [horizontal, vertical] : [horizontal]) {
-                if (!parts.length || parts.length > 4 || parts.includes(null))
-                    return;
-            }
-            style.borderRadius = fourSides(horizontal);
-            const y = vertical ? fourSides(vertical) : null;
-            style.borderRadiusY = y && !sameRadii(style.borderRadius, y) ? y : null;
+            const radii = parseRadii(value, ctx);
+            if (radii)
+                [style.borderRadius, style.borderRadiusY] = radii;
             return;
         }
         // --- background ---------------------------------------------------------
@@ -1509,7 +1720,19 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
                 : f.trim().replace(/[ \t\n\r\f]+/g, ' '))
                 .filter(Boolean)
                 .join(', ');
-            style.fontFamily = ctx.families ? ctx.families(list) : list;
+            // A list that ends in no generic family ends in the document's own
+            // font: where no face in the list matches, the text is set in the
+            // user agent's default (CSS Fonts 4, 5.1), which for a browser is its
+            // standard font and here is the one the document is set in. The text
+            // engine's own answer for a name nothing has is its platform's pick,
+            // Verdana under fontconfig: the Zen Garden's 216 sets its summary in
+            // Montserrat alone, which no machine here has, and Chrome sets it in
+            // Times where ours was Verdana, a fifth wider
+            const last = names[names.length - 1].trim();
+            const generic = !/^['"]/.test(last) && GENERIC_FAMILY.has(last.toLowerCase());
+            const fallback = generic ? null : (ctx.fallbackFamily?.() ?? null);
+            const full = fallback ? `${list}, ${fallback}` : list;
+            style.fontFamily = ctx.families ? ctx.families(full) : full;
             return;
         }
         case 'font-size': {
@@ -1933,6 +2156,23 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
             style.cursor = splitCommas(value)[0]?.trim().toLowerCase() || null;
             return;
         }
+        case 'pointer-events': {
+            // `none`, or one of the values SVG gives it, which are `auto` on
+            // anything that is not SVG's to draw
+            const v = value.trim().toLowerCase();
+            if (v === 'none')
+                style.pointerEvents = 'none';
+            else if (POINTER_EVENTS.has(v))
+                style.pointerEvents = 'auto';
+            return;
+        }
+        case 'fill':
+        case 'stroke': {
+            const paint = svgPaint(value);
+            if (paint !== null)
+                style[name] = paint;
+            return;
+        }
         // --- lists --------------------------------------------------------------
         case 'list-style': {
             // a type, a position and an image, each at most once and in any
@@ -2132,8 +2372,11 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
                 return;
             if (which !== 'column-gap')
                 style.rowGap = row;
-            if (which !== 'row-gap')
+            if (which !== 'row-gap') {
                 style.columnGap = col;
+                const word = parts[parts.length - 1].toLowerCase();
+                style.columnGapNormal = word === 'normal';
+            }
             return;
         }
         case 'grid-template-columns':
@@ -2605,6 +2848,12 @@ function alignKeyword(value) {
             return 'flex-end';
         case 'first baseline':
             return 'baseline';
+        // By last baselines, which nothing here aligns: set where that falls
+        // back to, the end (CSS Box Alignment 3, 4.2). Dropped, a row that asks
+        // for it stretched its items, and a flex box among them was as tall as
+        // the row, its lines spread down it.
+        case 'last baseline':
+            return 'flex-end';
         case 'center':
             return 'center';
         case 'stretch':
@@ -3226,7 +3475,7 @@ function applyBackgroundShorthand(style, value, ctx) {
 function backgroundImageOf(text, ctx) {
     const v = text.trim();
     if (IMAGE_FUNCTION.test(v.toLowerCase()))
-        return parseLinearGradient(v, ctx);
+        return parseGradient(v, ctx);
     return parseUrl(v);
 }
 /** A background property's values, one a comma-separated layer, each read
@@ -3248,7 +3497,7 @@ function layerValues(value, read) {
  * is dropped rather than resetting the background it meant to replace
  * (CSS 2.1 4.2). What CSS3 adds is read too, so that a declaration a
  * browser keeps is kept: `/ cover` after the position, `space` and `round`,
- * a gradient — drawn as nothing, over the layer's colour.
+ * and a gradient, over the layer's colour.
  */
 function readBackgroundLayer(text, ctx, last) {
     const parts = splitValue(text).flatMap(splitSlash);
@@ -3284,7 +3533,7 @@ function readBackgroundLayer(text, ctx, last) {
                 layer.image = url;
             }
             else if (v !== 'none')
-                layer.gradient = parseLinearGradient(part, ctx);
+                layer.gradient = parseGradient(part, ctx);
             i += 1;
         }
         else if (v === 'repeat-x' || v === 'repeat-y' || REPEATS.has(v)) {
@@ -3363,21 +3612,21 @@ function readBackgroundLayer(text, ctx, last) {
 }
 /**
  * A `linear-gradient()`, or null for any other image function and for one
- * that is no gradient: a direction by angle, by side or by corner, with a
- * colour interpolation method (`in oklab`, which Tailwind 4 writes) read and
- * not honoured, and at least two stops, each with no position, one, or two;
- * a bare percentage between stops, a hint, is passed over.
+ * that is no gradient: a direction by angle, by side or by corner, and its
+ * colour stops.
  */
 function parseLinearGradient(text, ctx) {
     const m = /^linear-gradient\((.*)\)$/is.exec(text.trim());
     if (!m)
         return null;
     const args = splitCommas(m[1]).map((a) => a.trim());
-    const out = { angle: Math.PI, corner: null, stops: [] };
-    const first = (args[0] ?? '')
-        .toLowerCase()
-        .replace(/\bin\s+[a-z-]+(?:\s+(?:shorter|longer|increasing|decreasing)\s+hue)?/, '')
-        .trim();
+    const out = {
+        kind: 'linear',
+        angle: Math.PI,
+        corner: null,
+        stops: [],
+    };
+    const first = withoutInterpolation(args[0] ?? '');
     let from = 0;
     if (!first || first.startsWith('to ')) {
         from = 1;
@@ -3419,7 +3668,124 @@ function parseLinearGradient(text, ctx) {
             from = 1;
         }
     }
-    for (const arg of args.slice(from)) {
+    const stops = parseStops(args.slice(from), ctx);
+    if (!stops)
+        return null;
+    out.stops = stops;
+    return out;
+}
+/**
+ * A `radial-gradient()` (CSS Images 3, 3.2.1), or null for anything else:
+ * an ending shape, `circle` or `ellipse`, and its size, in either order —
+ * a keyword for the side or corner of the box it reaches, one length for a
+ * circle's radius, or two lengths or percentages for an ellipse's — then
+ * `at` and its centre, a position as `background-position` writes one;
+ * each of the three may be left out, for an ellipse through the farthest
+ * corner from the middle of the box. A colour interpolation method is read
+ * and not honoured, and the stops are a linear gradient's, spaced along
+ * the ray from the centre to the shape's edge.
+ */
+function parseRadialGradient(text, ctx) {
+    const m = /^radial-gradient\((.*)\)$/is.exec(text.trim());
+    if (!m)
+        return null;
+    const args = splitCommas(m[1]).map((a) => a.trim());
+    const out = {
+        kind: 'radial',
+        circle: false,
+        extent: null,
+        radii: null,
+        at: [{ pct: 50 }, { pct: 50 }],
+        stops: [],
+    };
+    const first = withoutInterpolation(args[0] ?? '');
+    let from = 0;
+    if (!first)
+        from = 1;
+    else if (parseColor(splitValue(first)[0]) === null) {
+        from = 1;
+        const words = splitValue(first);
+        const at = words.indexOf('at');
+        if (at >= 0) {
+            const position = positionPair(words.slice(at + 1), ctx);
+            if (!position)
+                return null;
+            out.at = position;
+        }
+        let shape = null;
+        const sizes = [];
+        // the size is one run of words, the shape's keyword before or after it
+        let sized = false;
+        for (const word of at >= 0 ? words.slice(0, at) : words) {
+            if (word === 'circle' || word === 'ellipse') {
+                if (shape)
+                    return null;
+                shape = word;
+                if (sizes.length || out.extent)
+                    sized = true;
+                continue;
+            }
+            if (sized || out.extent)
+                return null;
+            if (RADIAL_EXTENTS.has(word)) {
+                if (sizes.length)
+                    return null;
+                out.extent = word;
+                continue;
+            }
+            const len = parseLength(word, ctx);
+            if (len === null || len === AUTO || !notNegative(len))
+                return null;
+            sizes.push(len);
+        }
+        if (sizes.length === 1) {
+            // a circle's radius is a length: a percentage of what, the spec asks
+            const [r] = sizes;
+            if (shape === 'ellipse' || typeof r !== 'number') {
+                return null;
+            }
+            out.circle = true;
+            out.radii = [r, r];
+        }
+        else if (sizes.length === 2) {
+            if (shape === 'circle')
+                return null;
+            out.radii = [sizes[0], sizes[1]];
+        }
+        else if (sizes.length)
+            return null;
+        else {
+            out.circle = shape === 'circle';
+            out.extent ??= 'farthest-corner';
+        }
+    }
+    const stops = parseStops(args.slice(from), ctx);
+    if (!stops)
+        return null;
+    out.stops = stops;
+    return out;
+}
+const RADIAL_EXTENTS = new Set([
+    'closest-side',
+    'closest-corner',
+    'farthest-side',
+    'farthest-corner',
+]);
+/** A gradient's first argument, lower-cased, without the colour
+ *  interpolation method CSS Images 4 adds to it (`in oklab`, which
+ *  Tailwind 4 writes): read, and not honoured. */
+function withoutInterpolation(arg) {
+    return arg
+        .toLowerCase()
+        .replace(/\bin\s+[a-z-]+(?:\s+(?:shorter|longer|increasing|decreasing)\s+hue)?/, '')
+        .trim();
+}
+/** A gradient's colour stops, at least two, each with no position, one or
+ *  two; a bare length between two stops, a hint, is passed over. Null
+ *  where an argument is none of those. */
+function parseStops(args, ctx) {
+    const stops = [];
+    for (const arg of args) {
         const parts = splitValue(arg);
         const color = parseColor(parts[0] ?? '');
         if (color === null) {
@@ -3434,14 +3800,18 @@ function parseLinearGradient(text, ctx) {
         if (at.some((p) => p === null || p === AUTO))
             return null;
         if (!at.length)
-            out.stops.push({ color, at: null });
+            stops.push({ color, at: null });
         for (const p of at)
-            out.stops.push({ color, at: p });
+            stops.push({ color, at: p });
     }
-    return out.stops.length >= 2 ? out : null;
+    return stops.length >= 2 ? stops : null;
+}
+/** A gradient function's image, where it is one this draws. */
+function parseGradient(text, ctx) {
+    return parseLinearGradient(text, ctx) ?? parseRadialGradient(text, ctx);
 }
 /** The images CSS3 has beyond `url()`, which a layer may name: a linear
- *  gradient is drawn, and the rest draw as nothing. */
+ *  and a radial gradient are drawn, and the rest draw as nothing. */
 const IMAGE_FUNCTION = /^(?:-(?:webkit|moz|o|ms)-)?(?:(?:repeating-)?(?:linear|radial|conic)-gradient|gradient|image-set|cross-fade|element|paint)\(/;
 function isPositionPart(word, ctx) {
     return (word in HORIZONTAL || word in VERTICAL || positionLength(word, ctx) !== null);
@@ -3474,95 +3844,6 @@ function whiteSpaceOf(collapse, wrap) {
         return wrap ? 'pre-wrap' : 'pre';
     return 'pre-line';
 }
-/**
- * The translation a `transform` makes: the sum of its translate functions'
- * and its matrices' — `translate(-50%, -50%)`, Tailwind 3's `translate(
- * var(--tw-translate-x), var(--tw-translate-y)) rotate(…) skewX(…) …` —
- * with the functions that rotate, scale, skew or add perspective read and
- * not drawn. Null for `none`, and undefined for what is no transform list,
- * which drops the declaration.
- */
-function transformTranslation(value, ctx) {
-    if (value.trim().toLowerCase() === 'none')
-        return null;
-    let x = 0;
-    let y = 0;
-    const parts = splitValue(value);
-    if (!parts.length)
-        return undefined;
-    for (const part of parts) {
-        const m = /^([a-z0-9]+)\((.*)\)$/is.exec(part.trim());
-        if (!m)
-            return undefined;
-        const name = m[1].toLowerCase();
-        const args = splitCommas(m[2]).map((a) => a.trim());
-        let dx = 0;
-        let dy = 0;
-        if (name === 'translate' || name === 'translate3d') {
-            dx = parseLength(args[0] ?? '', ctx);
-            dy = args[1] === undefined ? 0 : parseLength(args[1], ctx);
-        }
-        else if (name === 'translatex')
-            dx = parseLength(args[0] ?? '', ctx);
-        else if (name === 'translatey')
-            dy = parseLength(args[0] ?? '', ctx);
-        else if (name === 'matrix' || name === 'matrix3d') {
-            // the translation is the last column's
-            const n = args.map(Number);
-            if (n.length !== (name === 'matrix' ? 6 : 16) || n.some(isNaN)) {
-                return undefined;
-            }
-            [dx, dy] = name === 'matrix' ? [n[4], n[5]] : [n[12], n[13]];
-        }
-        else if (!TRANSFORMS.has(name))
-            return undefined;
-        if (dx === null || dx === AUTO || dy === null || dy === AUTO) {
-            return undefined;
-        }
-        const sx = addLen(x, dx);
-        const sy = addLen(y, dy);
-        if (sx === null || sy === null)
-            return undefined;
-        x = sx;
-        y = sy;
-    }
-    return [x, y];
-}
-/** The transform functions read and not drawn. */
-const TRANSFORMS = new Set([
-    'translatez',
-    'rotate',
-    'rotatex',
-    'rotatey',
-    'rotatez',
-    'rotate3d',
-    'scale',
-    'scalex',
-    'scaley',
-    'scalez',
-    'scale3d',
-    'skew',
-    'skewx',
-    'skewy',
-    'perspective',
-]);
-/** Two lengths added, a percentage and a length kept apart; null where
- *  one is a `min()` or a `max()`, which a sum cannot be kept of. */
-function addLen(a, b) {
-    if (a === AUTO || b === AUTO)
-        return null;
-    if (typeof a === 'number' && typeof b === 'number')
-        return a + b;
-    if (a === 0)
-        return b;
-    if (b === 0)
-        return a;
-    const pa = typeof a === 'number' ? { pct: 0, px: a } : a;
-    const pb = typeof b === 'number' ? { pct: 0, px: b } : b;
-    if (pa.of || pb.of)
-        return null;
-    return { pct: pa.pct + pb.pct, px: (pa.px ?? 0) + (pb.px ?? 0) };
-}
 /** An intrinsic size keyword, with the prefixes browsers still read, or
  *  `fit-content()` of a length or a percentage (CSS Sizing 3, 3.1) — a
  *  width's, where a height's is its content height as the keyword is;
@@ -4195,6 +4476,34 @@ function splitTopLevelSlash(value) {
     return out;
 }
 // --- logical properties ----------------------------------------------------
+/** `pointer-events`' values besides `none` (CSS UI 4, SVG 2 15.6). */
+const POINTER_EVENTS = new Set([
+    'auto',
+    'bounding-box',
+    'visiblepainted',
+    'visiblefill',
+    'visiblestroke',
+    'visible',
+    'painted',
+    'fill',
+    'stroke',
+    'all',
+]);
+/**
+ * A `fill` or a `stroke` (SVG 2, 13.2): `none`, a colour, or a `url()`
+ * naming a gradient in the drawing, with what follows it, its fallback,
+ * left off. Null for anything else, `context-fill` and `context-stroke`
+ * among it, which only a marker or a `<use>` has a context for.
+ */
+function svgPaint(value) {
+    const v = value.trim();
+    if (v.toLowerCase() === 'none')
+        return 'none';
+    const url = /^url\(\s*(['"]?)(#[^'")\s]+)\1\s*\)/i.exec(v);
+    if (url)
+        return `url(${url[2]})`;
+    return parseColor(v);
+}
 const OBJECT_FITS = new Set(['fill', 'contain', 'cover', 'none', 'scale-down']);
 /**
  * `aspect-ratio` (CSS Sizing 4, 5.1): `auto`, a ratio — one number, or
@@ -4285,6 +4594,25 @@ function radiusOf(text, ctx) {
         return len < 0 ? null : len;
     return len.pct < 0 && !len.px && !len.of ? null : len;
 }
+/**
+ * `border-radius`'s value: one to four radii, and after a `/` one to four
+ * more for the vertical radii where they differ, elliptical corners — the
+ * radii across, and the ones down, null where they are the same values.
+ * Null for anything else.
+ */
+function parseRadii(value, ctx) {
+    const halves = value.split('/');
+    if (halves.length > 2)
+        return null;
+    const [horizontal, vertical] = halves.map((half) => splitValue(half).map((p) => radiusOf(p, ctx)));
+    for (const parts of vertical ? [horizontal, vertical] : [horizontal]) {
+        if (!parts.length || parts.length > 4 || parts.includes(null))
+            return null;
+    }
+    const across = fourSides(horizontal);
+    const down = vertical ? fourSides(vertical) : null;
+    return [across, down && !sameRadii(across, down) ? down : null];
+}
 /** Whether two corners' radii are the same values. */
 function sameRadii(a, b) {
     for (let i = 0; i < 4; i += 1) {
@@ -4485,10 +4813,15 @@ const INHERITED_NAMES = new Set([
     'list-style-position',
     'list-style-image',
     'cursor',
+    'pointer-events',
+    'fill',
+    'stroke',
     'border-collapse',
     'border-spacing',
     'empty-cells',
     'quotes',
+    'orphans',
+    'widows',
 ]);
 export function isInherited(name) {
     return INHERITED_NAMES.has(name);
@@ -4629,6 +4962,9 @@ const INHERIT_TARGETS = {
     'list-style-position': ['listStylePosition'],
     'list-style-image': ['listStyleImage'],
     cursor: ['cursor'],
+    'pointer-events': ['pointerEvents'],
+    fill: ['fill'],
+    stroke: ['stroke'],
     'border-collapse': ['borderCollapse'],
     'caption-side': ['captionSide'],
     'empty-cells': ['emptyCells'],
@@ -4695,9 +5031,16 @@ const INHERIT_TARGETS = {
     '-webkit-box-pack': ['webkitBoxPack'],
     '-webkit-box-align': ['webkitBoxAlign'],
     '-webkit-box-flex': ['webkitBoxFlex'],
-    columns: ['columns'],
-    'column-count': ['columns'],
-    'column-width': ['columns'],
+    columns: ['columns', 'columnCount', 'columnWidth'],
+    'column-count': ['columns', 'columnCount'],
+    'column-width': ['columns', 'columnWidth'],
+    orphans: ['orphans'],
+    widows: ['widows'],
+    'break-inside': ['breakInside'],
+    'column-fill': ['columnFill'],
+    'column-span': ['columnSpan'],
+    '-webkit-column-span': ['columnSpan'],
+    'page-break-inside': ['breakInside'],
     'text-overflow': ['textOverflow'],
     // a flex box's and its items', and a grid's
     'flex-direction': ['flexDirection'],
@@ -4712,12 +5055,12 @@ const INHERIT_TARGETS = {
     'flex-shrink': ['flexShrink'],
     'flex-basis': ['flexBasis'],
     order: ['order'],
-    gap: ['rowGap', 'columnGap'],
+    gap: ['rowGap', 'columnGap', 'columnGapNormal'],
     'row-gap': ['rowGap'],
-    'column-gap': ['columnGap'],
-    'grid-gap': ['rowGap', 'columnGap'],
+    'column-gap': ['columnGap', 'columnGapNormal'],
+    'grid-gap': ['rowGap', 'columnGap', 'columnGapNormal'],
     'grid-row-gap': ['rowGap'],
-    'grid-column-gap': ['columnGap'],
+    'grid-column-gap': ['columnGap', 'columnGapNormal'],
     'grid-template-columns': ['gridColumns'],
     'grid-template-rows': ['gridRows'],
     'grid-auto-rows': ['gridAutoRows'],
@@ -4812,11 +5155,18 @@ const INHERIT_TARGETS = {
     clear: ['clear'],
     overflow: ['overflowX', 'overflowY'],
     clip: ['clip'],
+    'clip-path': ['clipPath'],
+    '-webkit-clip-path': ['clipPath'],
     'overflow-x': ['overflowX'],
     'overflow-y': ['overflowY'],
     opacity: ['opacity'],
     translate: ['translate'],
-    transform: ['transformTranslate'],
+    rotate: ['rotate'],
+    scale: ['scale'],
+    transform: ['transform'],
+    '-webkit-transform': ['transform'],
+    'transform-origin': ['transformOrigin'],
+    '-webkit-transform-origin': ['transformOrigin'],
     'z-index': ['zIndex'],
     'vertical-align': ['verticalAlign'],
     'text-decoration': [
@@ -4871,13 +5221,30 @@ export function decorate(style) {
     if (lines.includes('underline')) {
         style.underline = inkColor(style.textDecorationColor ?? 'currentColor', style.color);
         style.underlineStyle = style.textDecorationStyle;
-        style.underlineThickness = style.textDecorationThickness;
+        style.underlineThickness = usedThickness(style);
         style.underlineOffset = style.textUnderlineOffset;
     }
     if (lines.includes('line-through')) {
         style.lineThrough = inkColor(style.textDecorationColor ?? 'currentColor', style.color);
+        style.lineThroughStyle = style.textDecorationStyle;
+        style.lineThroughThickness = usedThickness(style);
     }
 }
+/**
+ * How thick the lines a box decorates its text with are. `auto` leaves it
+ * to the user agent, which is to take it from the font where the font says
+ * (CSS Text Decoration 4, 2.4.1); neither text engine here reports a face's
+ * underline, so it is a part of the font size, Blink's tenth — of the size
+ * of the box that set the decoration, which draws one line of one thickness
+ * through everything inside it (2.9). A pixel for every size drew the dots
+ * under the `<abbr>` of a 140px title as a hairline. `from-font` is `auto`
+ * for the same want of a metric, a length is itself on whole pixels, and
+ * no line is thinner than one.
+ */
+function usedThickness(style) {
+    const length = style.textDecorationThickness;
+    return Math.max(1, length === null ? style.fontSize / 10 : Math.round(length));
+}
 /**
  * The absolutely positioned styles that were inline-level before they were
  * made blocks: where such a box would have been in flow is on its line,
@@ -4984,4 +5351,54 @@ export function blockify(style, inFlexContainer) {
             return;
     }
 }
+/**
+ * The `display` a `<button>` is laid out with, which is not always the one
+ * it was given (HTML's rendering section, button layout, 15.5.3): a flex
+ * box or a grid is that, and of the rest, "a value such that the outer
+ * display type is 'inline'" behaves as `inline-block` and anything else as
+ * `flow-root`. Blink computes them so — `inline-block` for `inline` and
+ * `inline-table`, `block` for `table` and `list-item` — and makes the one
+ * block flow of each; the formatting context is the layout's to give every
+ * button that is a block (`establishesBFC`).
+ *
+ * Left an inline box, a button around a block was broken in two around it,
+ * as any inline box is: as wide as the line, its `height` applied to
+ * nothing, and its border and padding drawn above and below the line it
+ * opened. A table's part is left what it is, where the two disagree: a
+ * block to the text, an inline-block in Blink. After `blockify`, since a
+ * float, an absolute box and a flex item are blocks first.
+ */
+export function settleButton(style) {
+    switch (style.display) {
+        case 'inline':
+        case 'inline-table':
+            style.display = 'inline-block';
+            return;
+        case 'list-item':
+        case 'table':
+            style.display = 'block';
+            return;
+        default:
+            return;
+    }
+}
+/** The generic font families, which a list ending in one falls back
+ *  through already, in the text engine (CSS Fonts 4, 4.2). */
+const GENERIC_FAMILY = new Set([
+    'serif',
+    'sans-serif',
+    'monospace',
+    'cursive',
+    'fantasy',
+    'system-ui',
+    'ui-serif',
+    'ui-sans-serif',
+    'ui-monospace',
+    'ui-rounded',
+    'math',
+    'emoji',
+    'fangsong',
+    '-apple-system',
+    'blinkmacsystemfont',
+]);
 //# sourceMappingURL=style.js.map