@react-x11/components 0.11.0 → 0.13.0

package/src/html/css/style.ts

@@ -40,6 +40,7 @@ import {
 } from './content.js';
 import type { ContentItem, CounterChange } from './content.js';
 import type { CustomProps } from './vars.js';
+import { LIGHT_DARK, lightDark, usedColorScheme } from './color.js';
 
 export type Display =
   | 'none'
@@ -202,6 +203,14 @@ export type ContentSize =
 export interface ComputedStyle {
   // --- inherited ------------------------------------------------------------
   color: string;
+  /**
+   * The colour scheme the element is drawn in (CSS Color Adjust 1, 2.2):
+   * its `color-scheme` resolved against the scheme the palette is, which
+   * stands for the reader's preference, as it does for `@media
+   * (prefers-color-scheme)`. What a `light-dark()` picks by. `normal` is
+   * the palette's own, since the palette is this renderer's default look.
+   */
+  colorScheme: 'light' | 'dark';
   fontFamily: string;
   fontSize: number;
   fontWeight: number;
@@ -320,6 +329,11 @@ export interface ComputedStyle {
   float: 'none' | 'left' | 'right';
   clear: 'none' | 'left' | 'right' | 'both';
   boxSizing: 'content-box' | 'border-box';
+  /** `box-decoration-break` (CSS Fragmentation 3, 5.4): how an inline box
+   *  that goes on to another line places its background images and
+   *  gradients — `slice`, from its fragments laid end to end as one box,
+   *  or `clone`, from each fragment's own. */
+  boxDecorationBreak: 'slice' | 'clone';
   /** Whether a block is a line-clamp container, and how many lines of its
    *  formatting context it shows (CSS Overflow 4, 5.3.1): its `max-lines`,
    *  or Infinity for `line-clamp: auto`, which shows as many as its height
@@ -505,6 +519,10 @@ export interface ComputedStyle {
    *  replaced whole when any of them changes, and `NO_BORDER_IMAGE` where
    *  nothing sets them. */
   borderImage: BorderImage;
+  /** `mask-image` and the longhands that place its layers (CSS Masking 1,
+   *  7): one object, replaced whole when any of them changes, and
+   *  `NO_MASK` where nothing sets them. */
+  mask: MaskLayers;
   /** `-webkit-text-fill-color`: what the glyphs are filled with where it
    *  is not the text's `color` — Tailwind's `text-transparent` over a
    *  `bg-clip-text` gradient; null for `color`, as `currentColor` is. */
@@ -608,6 +626,7 @@ export interface ComputedStyle {
  *  same list. */
 export const INHERITED = [
   'color',
+  'colorScheme',
   'textFillColor',
   'fontFamily',
   'fontSize',
@@ -681,6 +700,20 @@ export interface RootLook {
   controlPadY: number;
   controlBorder: number;
   controlRadius: number;
+  /**
+   * The size the palette's widgets set their text at, `theme.fontSize` — and
+   * so the size of a control's text, whatever the text around it is: a
+   * browser's controls take a system font rather than their parent's, and
+   * this is the system's. Without it, `fontSize`.
+   */
+  controlFontSize?: number;
+  /**
+   * The family they set it in, `theme.fontFamily`, for the same reason: a
+   * browser's system font is its own, Arial in Chrome whatever the page is
+   * set in. A `<textarea>` is `monoFamily`, a browser's `monospace`, as it
+   * is in Chrome. Without it, `fontFamily`.
+   */
+  controlFontFamily?: string;
 }
 
 export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
@@ -689,6 +722,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
   // a copy of the literal, not the literal: see `copyStyle`
   return copyStyle({
     color: look.color,
+    colorScheme: look.colorScheme,
     fontFamily: look.fontFamily,
     fontSize: look.fontSize,
     fontWeight: 400,
@@ -747,6 +781,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     float: 'none',
     clear: 'none',
     boxSizing: 'content-box',
+    boxDecorationBreak: 'slice',
     lineClamp: null,
     maxLines: null,
     clampContinue: 'auto',
@@ -846,6 +881,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     backgroundClips: null,
     backgroundOrigins: null,
     borderImage: NO_BORDER_IMAGE,
+    mask: NO_MASK,
     textFillColor: null,
 
     textDecorationLine: 'none',
@@ -941,6 +977,7 @@ export function inherit(
   // quarters of the cost of every element's style, a store through a
   // computed name costing thirty times one through a written one
   out.color = parent.color;
+  out.colorScheme = parent.colorScheme;
   out.textFillColor = parent.textFillColor;
   out.fontFamily = parent.fontFamily;
   out.fontSize = parent.fontSize;
@@ -1162,6 +1199,15 @@ export function applyDeclaration(
   if (/!\s*important$/i.test(value)) {
     value = value.replace(/!\s*important$/i, '').trim();
   }
+  // the branch of each `light-dark()` this element's scheme picks, before
+  // anything reads the value: it stands wherever a colour can, in a
+  // shorthand, a shadow, a gradient or a mix, and most often arrives
+  // through a `var()` from a theme on `:root`
+  if (LIGHT_DARK.test(value)) {
+    const picked = lightDark(value, style.colorScheme);
+    if (picked === null) return;
+    value = picked;
+  }
 
   const color = COLOR_PROPS[name];
   if (color) {
@@ -1178,6 +1224,12 @@ export function applyDeclaration(
   }
 
   switch (name) {
+    case 'color-scheme': {
+      const scheme = usedColorScheme(value, ctx.initial?.colorScheme);
+      if (scheme) style.colorScheme = scheme;
+      return;
+    }
+
     // --- box ----------------------------------------------------------------
     case 'display': {
       const v = value.toLowerCase();
@@ -1366,6 +1418,12 @@ export function applyDeclaration(
       if (v === 'border-box' || v === 'content-box') style.boxSizing = v;
       return;
     }
+    case 'box-decoration-break':
+    case '-webkit-box-decoration-break': {
+      const v = value.trim().toLowerCase();
+      if (v === 'slice' || v === 'clone') style.boxDecorationBreak = v;
+      return;
+    }
     case 'aspect-ratio': {
       const parsed = parseAspectRatio(value);
       if (parsed !== undefined) style.aspectRatio = parsed;
@@ -1906,6 +1964,67 @@ export function applyDeclaration(
       return;
     }
 
+    // --- masking --------------------------------------------------------------
+    // Each `-webkit-` name is the same property's (Compatibility, 5): every
+    // engine takes both, and a page writes both — Wikipedia's icons do.
+    case 'mask':
+    case '-webkit-mask': {
+      const mask = readMask(value, ctx);
+      if (mask) style.mask = mask;
+      return;
+    }
+    case 'mask-image':
+    case '-webkit-mask-image': {
+      // `none` a layer as much as an image is; a bad url drops it all
+      const images: BackgroundImage[] = [];
+      for (const part of splitCommas(value)) {
+        const image = maskImageOf(part, ctx);
+        if (image === undefined) return;
+        images.push(image);
+      }
+      if (images.length) style.mask = { ...style.mask, images };
+      return;
+    }
+    case 'mask-repeat':
+    case '-webkit-mask-repeat': {
+      const repeats = layerValues(value, (part) => {
+        const words = splitValue(part.toLowerCase());
+        return words.length <= 2 ? readRepeat(words) : null;
+      });
+      if (repeats) style.mask = { ...style.mask, repeats };
+      return;
+    }
+    case 'mask-size':
+    case '-webkit-mask-size': {
+      const sizes = layerValues(value, (part) =>
+        backgroundSizeOf(splitValue(part), ctx),
+      );
+      if (sizes) style.mask = { ...style.mask, sizes };
+      return;
+    }
+    case 'mask-position':
+    case '-webkit-mask-position': {
+      const positions = layerValues(value, (part) =>
+        positionPair(splitValue(part), ctx),
+      );
+      if (positions) style.mask = { ...style.mask, positions };
+      return;
+    }
+    case 'mask-origin':
+    case '-webkit-mask-origin': {
+      const origins = layerValues(value, (part) => maskBox(part));
+      if (origins) style.mask = { ...style.mask, origins };
+      return;
+    }
+    case 'mask-clip':
+    case '-webkit-mask-clip': {
+      const clips = layerValues(value, (part) =>
+        part.toLowerCase() === 'no-clip' ? 'border-box' : maskBox(part),
+      );
+      if (clips) style.mask = { ...style.mask, clips };
+      return;
+    }
+
     // --- generated content --------------------------------------------------
     case 'content': {
       const parsed = parseContent(value);
@@ -1962,7 +2081,11 @@ export function applyDeclaration(
       // handed a face at a size of millions shapes and caches glyphs that
       // size, and a nest of `larger`s gets there on its own
       const most = MAX_FONT_SIZE * ctx.scale;
-      const kw = keywordFontSize(value, parent.fontSize, ctx.rem);
+      const kw = keywordFontSize(
+        value,
+        parent.fontSize,
+        ctx.initial?.fontSize ?? ctx.rem,
+      );
       if (kw !== null) {
         style.fontSize = Math.min(kw, most);
         return;
@@ -2013,7 +2136,13 @@ export function applyDeclaration(
         style.lineHeight = len;
         style.lineHeightIsLength = true;
       } else if (len && typeof len === 'object') {
-        const px = resolve(len, style.fontSize);
+        // a percentage of the element's own font size, the one it is
+        // computed with (CSS 2.1 10.8.1), which `em` already is: not the
+        // size in `style` as this declaration comes up, which a `font`
+        // earlier in the same rule has just set to its own — `p { font:
+        // 12px …; line-height: 100% }` under a `.lead { font-size: 16px }`
+        // set sixteen-pixel text on twelve-pixel lines
+        const px = resolve(len, ctx.em);
         if (px < 0) return;
         style.lineHeight = px;
         style.lineHeightIsLength = true;
@@ -2462,7 +2591,12 @@ export function applyDeclaration(
       return;
     }
     case 'align-content': {
-      const v = alignKeyword(value);
+      // `normal` is `stretch` in a flex and a grid container, the only
+      // boxes it moves anything in (CSS Box Alignment 3, 5.1)
+      const v =
+        value.trim().toLowerCase() === 'normal'
+          ? 'stretch'
+          : alignKeyword(value);
       if (v) style.alignContent = v as ComputedStyle['alignContent'];
       return;
     }
@@ -2697,6 +2831,30 @@ export function applyDeclaration(
       }
       return;
     }
+    case 'place-content': {
+      // `<'align-content'> <'justify-content'>?` (CSS Box Alignment 3,
+      // 5.3), either half one keyword or two — `first baseline`, `safe
+      // center` — and the second the first again where it is left out,
+      // but for a baseline, which is no `justify-content`: `start`
+      const words = value.trim().toLowerCase().split(/\s+/);
+      const span = (at: number) =>
+        /^(?:safe|unsafe|first|last)$/.test(words[at] ?? '') ? 2 : 1;
+      const cut = span(0);
+      const align = words.slice(0, cut).join(' ');
+      const rest = words.slice(cut);
+      if (rest.length && rest.length !== span(cut)) return;
+      const justify = rest.length
+        ? rest.join(' ')
+        : /baseline$/.test(align)
+          ? 'start'
+          : align;
+      // a shorthand is one declaration: either half unread drops both
+      if (align !== 'normal' && !alignKeyword(align)) return;
+      if (!justifyKeyword(justify)) return;
+      applyDeclaration(style, parent, 'align-content', align, ctx);
+      applyDeclaration(style, parent, 'justify-content', justify, ctx);
+      return;
+    }
     case 'place-items':
     case 'place-self': {
       const parts = splitValue(value);
@@ -3144,6 +3302,157 @@ export const NO_BORDER_IMAGE: BorderImage = {
   repeat: ['stretch', 'stretch'],
 };
 
+/**
+ * An element's mask layers (CSS Masking 1, 7), top first, a list a
+ * property as a background's are: each layer takes the images' place in
+ * the others, and they repeat where they are fewer. A layer's image is a
+ * url, a gradient, or null for `none` — which is the one layer of an
+ * element that is not masked.
+ */
+export interface MaskLayers {
+  images: readonly BackgroundImage[];
+  repeats: readonly BackgroundRepeat[];
+  sizes: readonly ComputedStyle['backgroundSize'][];
+  positions: readonly (readonly [Len, Len])[];
+  /** The box a layer is placed in, and the one it is painted in: the
+   *  border box unless a layer says (7.5, 7.6). */
+  origins: readonly VisualBox[];
+  clips: readonly VisualBox[];
+}
+
+/** Whether a style masks its element: a layer of its mask has an image. */
+export function masked(style: ComputedStyle): boolean {
+  const mask = style.mask;
+  if (mask === NO_MASK) return false;
+  for (const image of mask.images) if (image !== null) return true;
+  return false;
+}
+
+/**
+ * One layer's `mask-image`: a url, a gradient — or none, for an image
+ * function this does not draw, or a `url(#id)`, which names an SVG
+ * `<mask>` element in the document rather than an image to fetch (7.2):
+ * drawn with no mask rather than as the transparent layer a mask that
+ * cannot be had is, since this draws no `<mask>`. Undefined where it is no
+ * image at all.
+ */
+function maskImageOf(
+  text: string,
+  ctx: UnitContext,
+): BackgroundImage | undefined {
+  const image = backgroundImageOf(text, ctx);
+  return typeof image === 'string' && image[0] === '#' ? null : image;
+}
+
+/** A `<geometry-box>` as an HTML element has it (CSS Masking 1, 7.5): the
+ *  SVG boxes are its content box and its border box. */
+function maskBox(text: string): VisualBox | null {
+  const v = text.trim().toLowerCase();
+  if (isVisualBox(v)) return v;
+  if (v === 'fill-box') return 'content-box';
+  if (v === 'stroke-box' || v === 'view-box') return 'border-box';
+  return null;
+}
+
+/**
+ * The `mask` shorthand (CSS Masking 1, 7.10): a layer a comma group, each
+ * an image, a position with a size after a `/`, a repeat, one box for the
+ * origin and the clip or two, `no-clip`, a compositing operator and a
+ * mode, each at most once, in any order. The operator and the mode are
+ * read and not honoured: layers are added, and an image masks by its
+ * alpha, which is what `match-source` makes of one. Null where a layer is
+ * not one, which drops the declaration.
+ */
+function readMask(value: string, ctx: UnitContext): MaskLayers | null {
+  const out = {
+    images: [] as BackgroundImage[],
+    repeats: [] as BackgroundRepeat[],
+    sizes: [] as ComputedStyle['backgroundSize'][],
+    positions: [] as [Len, Len][],
+    origins: [] as VisualBox[],
+    clips: [] as VisualBox[],
+  };
+  for (const text of splitCommas(value)) {
+    const parts = splitValue(text).flatMap(splitSlash);
+    let image: BackgroundImage = null;
+    let repeat = NO_MASK.repeats[0];
+    let size: ComputedStyle['backgroundSize'] = 'auto';
+    let position: [Len, Len] = [0, 0];
+    const boxes: VisualBox[] = [];
+    let seen = 0;
+    const once = (bit: number): boolean => {
+      if (seen & bit) return false;
+      seen |= bit;
+      return true;
+    };
+    for (let i = 0; i < parts.length;) {
+      const part = parts[i];
+      const v = part.toLowerCase();
+      if (v === 'none' || v.startsWith('url(') || IMAGE_FUNCTION.test(v)) {
+        if (!once(1)) return null;
+        const read = maskImageOf(part, ctx);
+        if (read === undefined) return null;
+        image = read;
+        i += 1;
+      } else if (v === 'repeat-x' || v === 'repeat-y' || REPEATS.has(v)) {
+        if (!once(2)) return null;
+        const pair = REPEATS.has(v) && REPEATS.has(parts[i + 1]?.toLowerCase());
+        const read = readRepeat(pair ? [v, parts[i + 1].toLowerCase()] : [v]);
+        if (!read) return null;
+        repeat = read;
+        i += pair ? 2 : 1;
+      } else if (maskBox(v) || v === 'no-clip') {
+        if (boxes.length === 2 || (v === 'no-clip' && !once(4))) return null;
+        boxes.push(maskBox(v) ?? 'border-box');
+        i += 1;
+      } else if (/^(?:add|subtract|intersect|exclude)$/.test(v)) {
+        if (!once(8)) return null;
+        i += 1;
+      } else if (/^(?:alpha|luminance|match-source)$/.test(v)) {
+        if (!once(16)) return null;
+        i += 1;
+      } else if (isPositionPart(v, ctx)) {
+        if (!once(32)) return null;
+        let end = i;
+        while (
+          end < parts.length &&
+          isPositionPart(parts[end].toLowerCase(), ctx)
+        ) {
+          end += 1;
+        }
+        const read = positionPair(parts.slice(i, end), ctx);
+        if (!read) return null;
+        position = read;
+        i = end;
+        if (parts[i] !== '/') continue;
+        const first = parts[i + 1]?.toLowerCase();
+        if (first === 'cover' || first === 'contain') {
+          size = first;
+          i += 2;
+        } else if (first !== undefined && isSizePart(first, ctx)) {
+          const two =
+            i + 2 < parts.length && isSizePart(parts[i + 2].toLowerCase(), ctx);
+          size =
+            backgroundSizeOf(parts.slice(i + 1, i + (two ? 3 : 2)), ctx) ??
+            'auto';
+          i += two ? 3 : 2;
+        } else {
+          return null;
+        }
+      } else {
+        return null;
+      }
+    }
+    out.images.push(image);
+    out.repeats.push(repeat);
+    out.sizes.push(size);
+    out.positions.push(position);
+    out.origins.push(boxes[0] ?? 'border-box');
+    out.clips.push(boxes[1] ?? boxes[0] ?? 'border-box');
+  }
+  return out.images.length ? out : null;
+}
+
 /** One to four values, one a side as `margin` takes them; null where one
  *  is not a value. */
 function sidesOf<T>(
@@ -3338,6 +3647,15 @@ function repeatPair(x: RepeatMode, y: RepeatMode): BackgroundRepeat {
 
 const REPEAT = repeatPair('repeat', 'repeat');
 
+export const NO_MASK: MaskLayers = {
+  images: [null],
+  repeats: [REPEAT],
+  sizes: ['auto'],
+  positions: [[0, 0]],
+  origins: ['border-box'],
+  clips: ['border-box'],
+};
+
 function applyBorderShorthand(
   style: ComputedStyle,
   name: string,
@@ -4007,8 +4325,11 @@ function applyFontShorthand(
   // dropped whole, as CSS drops any value it cannot read — a line height
   // below nought included: `font: 4em/-2em serif` set the text at 4em.
   const size =
-    keywordFontSize(sizeText ?? '', parent.fontSize, ctx.rem) ??
-    parseLength(sizeText ?? '', { ...ctx, em: parent.fontSize });
+    keywordFontSize(
+      sizeText ?? '',
+      parent.fontSize,
+      ctx.initial?.fontSize ?? ctx.rem,
+    ) ?? parseLength(sizeText ?? '', { ...ctx, em: parent.fontSize });
   if (!family || size === null || size === AUTO) return;
   if (lineText && negativeLength(lineText, ctx)) return;
   // What the shorthand does not name goes back to its initial value rather
@@ -4026,12 +4347,10 @@ function applyFontShorthand(
   style.lineHeight = 'normal';
   style.lineHeightIsLength = false;
   applyDeclaration(style, parent, 'font-size', sizeText, ctx);
-  if (lineText) {
-    applyDeclaration(style, parent, 'line-height', lineText, {
-      ...ctx,
-      em: style.fontSize,
-    });
-  }
+  // against the element's own size, which `ctx.em` is once the cascade has
+  // settled it: a later rule's `font-size` outranks this one's, and
+  // `font: 12px/150%` under a `font-size: 16px` is on 24px lines
+  if (lineText) applyDeclaration(style, parent, 'line-height', lineText, ctx);
   applyDeclaration(style, parent, 'font-family', family, ctx);
 }
 
@@ -4751,6 +5070,7 @@ function camel(name: string): string {
 
 const INHERITED_NAMES = new Set<string>([
   'color',
+  'color-scheme',
   '-webkit-text-fill-color',
   'font',
   'font-family',
@@ -4801,6 +5121,11 @@ export function initialOne(
   initial: ComputedStyle,
   name: string,
 ): void {
+  const list = MASK_LISTS[name];
+  if (list) {
+    style.mask = { ...style.mask, [list]: initial.mask[list] };
+    return;
+  }
   const keys = INHERIT_TARGETS[name];
   if (!keys) return;
   for (const key of keys) {
@@ -4813,6 +5138,11 @@ function inheritOne(
   parent: ComputedStyle,
   name: string,
 ): void {
+  const list = MASK_LISTS[name];
+  if (list) {
+    style.mask = { ...style.mask, [list]: parent.mask[list] };
+    return;
+  }
   const keys = INHERIT_TARGETS[name];
   if (!keys) return;
   // A border colour left to `currentColor` inherits as the keyword and
@@ -4828,8 +5158,30 @@ const sides = (
   make: (side: (typeof SIDES)[number]) => keyof ComputedStyle,
 ): (keyof ComputedStyle)[] => SIDES.map(make);
 
+/**
+ * The list of the mask's layers each longhand is, which `initial`,
+ * `inherit` and a `var()` that fails reset alone: one field holds them all,
+ * and reset whole, a `mask-size: calc(var(--x) - 4px)` put back the
+ * `mask-repeat: no-repeat` before it, and Wikipedia's chevron repeated.
+ */
+const MASK_LISTS: Record<string, keyof MaskLayers> = {
+  'mask-image': 'images',
+  '-webkit-mask-image': 'images',
+  'mask-repeat': 'repeats',
+  '-webkit-mask-repeat': 'repeats',
+  'mask-size': 'sizes',
+  '-webkit-mask-size': 'sizes',
+  'mask-position': 'positions',
+  '-webkit-mask-position': 'positions',
+  'mask-origin': 'origins',
+  '-webkit-mask-origin': 'origins',
+  'mask-clip': 'clips',
+  '-webkit-mask-clip': 'clips',
+};
+
 const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   color: ['color'],
+  'color-scheme': ['colorScheme'],
   '-webkit-text-fill-color': ['textFillColor'],
   'background-clip': [
     'backgroundClipText',
@@ -4843,6 +5195,8 @@ const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   ],
   'background-origin': ['backgroundOrigin', 'backgroundOrigins'],
   'border-image': ['borderImage'],
+  mask: ['mask'],
+  '-webkit-mask': ['mask'],
   'border-image-source': ['borderImage'],
   'border-image-slice': ['borderImage'],
   'border-image-width': ['borderImage'],
@@ -4923,6 +5277,8 @@ const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   'min-height': ['minHeight', 'minHeightKeyword'],
   'max-height': ['maxHeight', 'maxHeightKeyword'],
   'box-sizing': ['boxSizing'],
+  'box-decoration-break': ['boxDecorationBreak'],
+  '-webkit-box-decoration-break': ['boxDecorationBreak'],
   margin: sides((s) => `margin${s}`),
   'margin-top': ['marginTop'],
   'margin-right': ['marginRight'],

package/src/html/css/ua.ts

@@ -9,9 +9,20 @@
 // author stylesheet still overrides all of it — that is what makes it a UA
 // sheet and not a skin.
 import { parseStylesheet } from './parse.js';
-import type { Stylesheet } from './parse.js';
+import type { Declaration, Stylesheet } from './parse.js';
 import type { RootLook } from './style.js';
 
+/**
+ * The declaration blocks that draw a control as the palette's widget rather
+ * than as the web's UA sheet has it. The cascade drops them from an element
+ * whose page styles its background or border (`Cascade`'s
+ * `dropPaletteChrome`), as Blink drops a control's native appearance
+ * (`LayoutTheme::IsControlStyled`), since a page that styles a control
+ * builds on the UA values a browser gives it. Keyed by the array, which is
+ * what a cascade candidate carries.
+ */
+export const PALETTE_CHROME = new WeakSet<Declaration[]>();
+
 /** Cache key → parsed sheet. The text depends only on the look, so two
  *  documents in one themed window parse this once between them. */
 const CACHE = new Map<string, Stylesheet>();
@@ -30,6 +41,8 @@ export function lookKey(look: RootLook): string {
     look.controlPadY,
     look.controlBorder,
     look.controlRadius,
+    look.controlFontSize,
+    look.controlFontFamily,
   ].join('|');
 }
 
@@ -38,6 +51,13 @@ export function uaStylesheet(look: RootLook): Stylesheet {
   const hit = CACHE.get(key);
   if (hit) return hit;
   const sheet = parseStylesheet(uaText(look), -1_000_000);
+  // after the rest, so its values win over theirs while it applies
+  const last = sheet.rules[sheet.rules.length - 1];
+  const chrome = parseStylesheet(chromeText(look), last.order + 1);
+  for (const rule of chrome.rules) {
+    PALETTE_CHROME.add(rule.declarations);
+    sheet.rules.push(rule);
+  }
   if (CACHE.size > 8) CACHE.clear();
   CACHE.set(key, sheet);
   return sheet;
@@ -181,26 +201,55 @@ col { display: table-column; }
    makes a label and its input share a line. */
 input, button, select, textarea, meter, progress {
   display: inline-block;
-  font-family: ${look.fontFamily};
-  font-size: 1em;
   vertical-align: middle;
   margin: 3px 2px;
 }
+/* A control's text is a system font's, not its parent's: Chrome gives these
+   four \`font: -webkit-small-control\`, Arial at the default size less 2pt
+   (13.33px) whatever the text around it is set in, and Gecko \`-moz-field\`
+   the same. The system here is the palette, and its family and size are the
+   ones core's widgets are set in — so a document's form is its window's,
+   and the box a control is measured into is the size the widget mounted in
+   it draws. A <textarea> is then \`monospace\` in Chrome, the sheet's code
+   face here; a <meter> and a <progress> keep their parent's font, as they
+   do in Chrome. */
+input, button, select, textarea {
+  font-family: ${look.controlFontFamily ?? look.fontFamily};
+  font-size: ${look.controlFontSize ?? look.fontSize}px;
+}
+textarea { font-family: ${mono}; }
 /* Chrome's own UA margins for the checkables, near enough: they are the
    controls that sit hard against their label text otherwise. */
+/* HTML's rendering section (15.3.10): a control's text keeps none of the
+   spacing, the line height, the case or the indent of the text around it.
+   A button in a paragraph of 'line-height: 1.5' is its own font's line
+   tall, as it is in a browser. */
+input, button, textarea {
+  letter-spacing: initial;
+  word-spacing: initial;
+  line-height: initial;
+}
+input, select, button, textarea {
+  text-transform: initial;
+  text-indent: initial;
+  text-shadow: initial;
+}
 input[type=checkbox] { margin: 3px 4px 3px 4px; }
 input[type=radio] { margin: 3px 4px 3px 5px; }
 input[type=hidden] { display: none; }
 /* A <button> is drawn rather than mounted: its content is the document's —
    an icon, a label in spans, a pill of the page's own design, which is what
    most buttons on the web are — and the page restyles it as it restyles
-   anything. What the sheet gives one the page left alone is the palette's
-   control, the chrome a mounted widget around it has. */
+   anything. The edges here are Chrome's, which a page that styles its
+   buttons builds on: Codex gives Wikipedia's search button its side padding
+   and a 32px min-height, and leaves the 1px above and below the label, and
+   the border box the minimum holds, to the browser. One the page left alone
+   is the palette's control instead, below the rest of this sheet. */
 button {
   vertical-align: baseline;
-  padding: ${look.controlPadY}px 0.75em;
-  border: ${look.controlBorder}px solid ${look.borderColor};
-  border-radius: ${look.controlRadius}px;
+  box-sizing: border-box;
+  padding: 1px 6px;
+  border: 2px outset ${look.borderColor};
   background-color: ${look.surface};
   color: ${look.color};
   text-align: center;
@@ -221,3 +270,22 @@ details[open] > summary:first-of-type { list-style-type: disclosure-open; }
 [hidden] { display: none; }
 `;
 }
+
+/**
+ * The palette's control, for a `<button>` whose page left its background and
+ * border alone: the chrome a mounted widget has, so a form in a document is
+ * the size of the window's own. The rules land in `PALETTE_CHROME`, and a
+ * page that styles either loses all of them — Blink counts every background
+ * and border longhand, radius included — along with the native look it
+ * would lose in a browser. Nothing stays half the palette's and half the
+ * page's.
+ */
+function chromeText(look: RootLook): string {
+  return `
+button {
+  padding: ${look.controlPadY}px 0.75em;
+  border: ${look.controlBorder}px solid ${look.borderColor};
+  border-radius: ${look.controlRadius}px;
+}
+`;
+}