@react-x11/components 0.14.0 → 0.16.0

package/src/html/css/parse.ts

@@ -951,11 +951,13 @@ const PSEUDO_CLASSES = new Set([
 /**
  * Specificity, packed. Counted from the selector text rather than from a
  * parse: `#a` is an id, `.a`/`[a]`/`:a` is a class, a bare name is a type,
- * and a pseudo-*element* (`::before`) counts as a type. Functional
- * pseudo-classes are counted as one class each, which is right for
- * `:hover`/`:nth-child()` and approximate for `:is()`/`:not()` — whose
- * specificity is their argument's. The approximation costs an author who
- * writes `:is(#id)` and expects it to beat a class; nothing else.
+ * and a pseudo-*element* (`::before`) counts as a type. A pseudo-class
+ * that takes selectors counts as Selectors 4 (17) has it: `:is()`,
+ * `:not()` and `:has()` as the most specific selector in their list,
+ * `:where()` as nothing, and `:nth-child(An+B of S)` as a class and the
+ * most specific in S. Counted as a class each, `:where()` was not the
+ * zero a library writes it to be: a typography plugin's
+ * `.prose :where(p)` beat a page's own `.intro p`.
  */
 const LEGACY_PSEUDO_ELEMENTS = /^(?:before|after|first-line|first-letter)$/i;
 
@@ -966,6 +968,8 @@ export function specificityOf(selector: string): number {
   let ids = 0;
   let classes = 0;
   let types = 0;
+  /** What the selectors inside pseudo-classes come to, packed. */
+  let inner = 0;
   let i = 0;
   const n = selector.length;
   while (i < n) {
@@ -985,14 +989,29 @@ export function specificityOf(selector: string): number {
         i = identEnd(selector, i + 2);
       } else {
         const name = readIdent(selector, i + 1);
+        const lower = name.value.toLowerCase();
+        i = name.end;
+        let argument: string | null = null;
+        if (selector[i] === '(') {
+          const end = componentEnd(selector, i);
+          argument = selector.slice(i + 1, end - 1);
+          i = end;
+        }
         // CSS 2 spelled the four pseudo-elements it had with one colon
         if (LEGACY_PSEUDO_ELEMENTS.test(name.value)) {
           types += 1;
+        } else if (argument !== null && SELECTOR_LIST_PSEUDOS.has(lower)) {
+          inner += mostSpecific(argument);
+        } else if (argument !== null && lower === 'where') {
+          // nothing
         } else {
           classes += 1;
+          if (argument !== null && NTH_OF_PSEUDOS.has(lower)) {
+            const of = /\sof\s/i.exec(argument);
+            if (of)
+              inner += mostSpecific(argument.slice(of.index + of[0].length));
+          }
         }
-        i = name.end;
-        if (selector[i] === '(') i = componentEnd(selector, i);
       }
     } else if (c === '*' || c === '|') {
       // the universal selector, and a namespace's bar, count nothing
@@ -1004,7 +1023,40 @@ export function specificityOf(selector: string): number {
       i += 1;
     }
   }
-  return ids * 1_000_000 + classes * 1_000 + types;
+  return ids * 1_000_000 + classes * 1_000 + types + inner;
+}
+
+/** The pseudo-classes whose specificity is their argument's most specific
+ *  selector, the old names of `:is()` among them. */
+const SELECTOR_LIST_PSEUDOS = new Set([
+  'is',
+  'not',
+  'has',
+  'matches',
+  '-webkit-any',
+  '-moz-any',
+]);
+
+/** The pseudo-classes an `of S` may follow. */
+const NTH_OF_PSEUDOS = new Set(['nth-child', 'nth-last-child']);
+
+/** The specificity of the most specific selector in a list, packed. */
+function mostSpecific(list: string): number {
+  let most = 0;
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i <= list.length; i += 1) {
+    const c = list[i];
+    if (c === '(' || c === '[') depth += 1;
+    else if (c === ')' || c === ']') depth -= 1;
+    else if (c === '"' || c === "'" || c === '\\') {
+      i = componentEnd(list, i) - 1;
+    } else if ((c === ',' && depth === 0) || i === list.length) {
+      most = Math.max(most, specificityOf(list.slice(start, i)));
+      start = i + 1;
+    }
+  }
+  return most;
 }
 
 // --- the little scanner -----------------------------------------------------

package/src/html/css/shapes.ts

@@ -0,0 +1,273 @@
+// What a style sheet says of the shapes in a drawing.
+//
+// An inline `<svg>` is a replaced box: the box builder stops at it, and no
+// computed style is made for what is inside. `fill`, `stroke` and their kin
+// are properties all the same (SVG 2, 6.2 and 13.2), which a rule of the
+// document's sets on a `<path>` as it would on a paragraph — a logo's
+// `.dark .logo path { fill: #fff }` — and a drawing exported with a style
+// sheet of its own, `.st0 { fill: #fff }` on `<path class="st0">`, has all
+// its colours in one. So the cascade is run for them narrowly
+// (`Cascade.shapeStyles`): over the rules that declare one of the
+// properties here, and down to values `SvgView` reads from a `style`
+// attribute, which is where the drawing's copy of an element carries them
+// (`svg.ts`). A `ComputedStyle` per `<path>` would be a few hundred
+// properties for the dozen a shape has, on a page of hundreds of icons.
+import type { Element } from 'domhandler';
+import { LIGHT_DARK, SYSTEM_COLOR, lightDark, systemColors } from './color.js';
+import { inkColor, parseAlpha, parseColor, parseLength } from './values.js';
+import type { UnitContext } from './values.js';
+
+/** What the rules give one element of a drawing: each property they set,
+ *  as `SvgView` reads it — `inherit` for one they put back to what the
+ *  element inherits, over its own attribute. */
+export type ShapeStyle = Readonly<Record<string, string>>;
+
+/** What the rules give the elements of one drawing, and all of it as a
+ *  string: what a drawing's tree was last made with (`SvgDrawing`). */
+export interface ShapeStyles {
+  /** Each element's, where it stands. */
+  readonly of: ReadonlyMap<Element, ShapeStyle>;
+  /**
+   * What they give the copy a `<use>` draws, by the `<use>`, then by each
+   * element of the copy's original; null where they give none. A copy is
+   * styled in a tree of its own, which its original is the top of (SVG 2,
+   * 5.5.3, as Chrome has it): a rule finds no ancestor of that element's
+   * and none of the `<use>`'s, and no sibling of it, and what the top
+   * inherits is the `<use>`'s. So `symbol .line` reaches a sprite's line
+   * where `.sprite .line` does not, and an element a `<use>` draws may be
+   * styled otherwise than where it stands.
+   */
+  readonly used: ReadonlyMap<Element, ReadonlyMap<Element, ShapeStyle>> | null;
+  readonly key: string;
+}
+
+/** The id a `<use>` names the element it draws by: a fragment of its
+ *  `href`. One in another document is none here, where nothing is fetched
+ *  for a drawing. */
+export function useHref(el: Element): string | null {
+  const href = el.attribs.href ?? el.attribs['xlink:href'] ?? '';
+  return href.length > 1 && href.startsWith('#') ? href.slice(1) : null;
+}
+
+/** Whether an element is a `<use>`, with a prefix or not. */
+export function isUse(el: Element): boolean {
+  const name = el.name;
+  if (name === 'use') return true;
+  const i = name.indexOf(':');
+  return i >= 0 && name.slice(i + 1).toLowerCase() === 'use';
+}
+
+/** Each property read, and whether it is inherited. */
+const PROPS: Record<string, boolean> = {
+  fill: true,
+  stroke: true,
+  'stroke-width': true,
+  'stroke-linecap': true,
+  'stroke-linejoin': true,
+  'stroke-miterlimit': true,
+  'fill-rule': true,
+  'fill-opacity': true,
+  'stroke-opacity': true,
+  color: true,
+  visibility: true,
+  opacity: false,
+  display: false,
+  'stop-color': false,
+  'stop-opacity': false,
+};
+
+/** Whether a rule with this declaration is one to keep for drawings. */
+export function isShapeProp(prop: string): boolean {
+  return PROPS[prop] !== undefined;
+}
+
+/** The properties the drawing's box has from its computed style already:
+ *  its paint, which `paintSvg` hands the drawing, and what makes it a box,
+ *  shown and see-through as one. */
+export const ROOT_BOX_PROPS: ReadonlySet<string> = new Set([
+  'fill',
+  'stroke',
+  'color',
+  'display',
+  'visibility',
+  'opacity',
+]);
+
+/** Each at its initial value (SVG 2, 13; CSS Color 4; CSS Display 3). */
+const INITIAL: Record<string, string> = {
+  fill: '#000000',
+  stroke: 'none',
+  'stroke-width': '1',
+  'stroke-linecap': 'butt',
+  'stroke-linejoin': 'miter',
+  'stroke-miterlimit': '4',
+  'fill-rule': 'nonzero',
+  'fill-opacity': '1',
+  'stroke-opacity': '1',
+  visibility: 'visible',
+  opacity: '1',
+  display: 'inline',
+  'stop-color': '#000000',
+  'stop-opacity': '1',
+};
+
+/** The elements a rule's subject can be, where it names one by its type,
+ *  for the rule to reach into a drawing: the ones `SvgView` draws, or
+ *  reads a paint from. `a` is both languages'. */
+export const SHAPE_TAGS: ReadonlySet<string> = new Set([
+  'svg',
+  'g',
+  'a',
+  'path',
+  'rect',
+  'circle',
+  'ellipse',
+  'line',
+  'polyline',
+  'polygon',
+  'text',
+  'tspan',
+  'use',
+  'symbol',
+  'switch',
+  'image',
+  'stop',
+]);
+
+/** What a shape's values are read against: the drawing's own `color` and
+ *  colour scheme, and its font size for a length in `em`. */
+export interface ShapeContext {
+  color: string;
+  scheme: 'light' | 'dark';
+  units: UnitContext;
+}
+
+/**
+ * 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.
+ */
+export function svgPaint(value: string): string | null {
+  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 NUMBER = /^[+-]?(?:\d*\.\d+|\d+)(?:e[+-]?\d+)?$/i;
+
+/** A word of a `display` that makes a box (CSS Display 3, 2). */
+const DISPLAY =
+  /^(?:block|inline|run-in|flow|flow-root|table|flex|grid|ruby|list-item|contents|inline-[a-z]+|table-[a-z-]+|ruby-[a-z-]+|-webkit-[a-z-]+)$/;
+
+const LINE_JOINS: Record<string, string> = {
+  miter: 'miter',
+  round: 'round',
+  bevel: 'bevel',
+  // the two a canvas has no join for end in a miter, clipped or not
+  'miter-clip': 'miter',
+  arcs: 'miter',
+};
+
+/** The properties of a shape that a colour is written in. */
+const SHAPE_COLORS = new Set(['fill', 'stroke', 'color', 'stop-color']);
+
+/**
+ * One declaration's value as a drawing reads it, or null for a value the
+ * property does not take, which leaves the declaration out of the cascade
+ * as any invalid one is left. `inherit` for a CSS-wide keyword that puts an
+ * inherited property back to what the element inherits.
+ */
+export function shapeValue(
+  prop: string,
+  raw: string,
+  ctx: ShapeContext,
+): string | null {
+  let value = raw.trim();
+  const wide = value.toLowerCase();
+  if (wide === 'inherit') return PROPS[prop] ? 'inherit' : null;
+  if (wide === 'initial') {
+    return prop === 'color'
+      ? (ctx.units.initial?.color ?? '#000000')
+      : INITIAL[prop];
+  }
+  if (wide === 'unset' || wide === 'revert' || wide === 'revert-layer') {
+    return PROPS[prop] ? 'inherit' : INITIAL[prop];
+  }
+  if (SHAPE_COLORS.has(prop) && SYSTEM_COLOR.test(value)) {
+    value = systemColors(value, ctx.units.systemColors);
+  }
+  if (LIGHT_DARK.test(value)) {
+    const picked = lightDark(value, ctx.scheme);
+    if (picked === null) return null;
+    value = picked;
+  }
+  switch (prop) {
+    case 'fill':
+    case 'stroke': {
+      const paint = svgPaint(value);
+      // `currentColor` is the shape's own `color`, which the drawing knows
+      return paint === null || paint === 'currentColor'
+        ? paint
+        : inkColor(paint, ctx.color);
+    }
+    case 'color':
+    case 'stop-color': {
+      const color = parseColor(value);
+      return color === null ? null : inkColor(color, ctx.color);
+    }
+    case 'stroke-width': {
+      // a number is user units, as a length in pixels is; a percentage is
+      // of the viewport's diagonal, which only the drawing has
+      const px = NUMBER.test(value)
+        ? Number(value)
+        : lengthIn(value, ctx.units);
+      return px !== null && px >= 0 ? String(px) : null;
+    }
+    case 'stroke-miterlimit': {
+      const n = NUMBER.test(value) ? Number(value) : NaN;
+      return n >= 1 ? String(n) : null;
+    }
+    case 'fill-opacity':
+    case 'stroke-opacity':
+    case 'stop-opacity':
+    case 'opacity': {
+      const a = parseAlpha(value);
+      return a === null ? null : String(a);
+    }
+    case 'stroke-linecap': {
+      const v = value.toLowerCase();
+      return v === 'butt' || v === 'round' || v === 'square' ? v : null;
+    }
+    case 'stroke-linejoin':
+      return LINE_JOINS[value.toLowerCase()] ?? null;
+    case 'fill-rule': {
+      const v = value.toLowerCase();
+      return v === 'nonzero' || v === 'evenodd' ? v : null;
+    }
+    case 'visibility': {
+      const v = value.toLowerCase();
+      if (v === 'visible') return v;
+      return v === 'hidden' || v === 'collapse' ? 'hidden' : null;
+    }
+    case 'display': {
+      // `none`, or some box: which one is nothing to a shape
+      const v = value.toLowerCase();
+      if (v === 'none') return v;
+      return v.split(/\s+/).every((word) => DISPLAY.test(word))
+        ? 'inline'
+        : null;
+    }
+    default:
+      return null;
+  }
+}
+
+/** A length in user units, which are CSS pixels; null for none, and for a
+ *  percentage. */
+function lengthIn(value: string, units: UnitContext): number | null {
+  const length = parseLength(value, units);
+  return typeof length === 'number' ? length / units.scale : null;
+}

package/src/html/css/style.ts

@@ -32,7 +32,6 @@ import {
 import type { Len, Pct, UnitContext } from './values.js';
 import { parseUrl, readIdent, startsIdent } from './parse.js';
 import {
-  DEFAULT_QUOTES,
   parseContent,
   parseCounterList,
   parseListStyleType,
@@ -42,7 +41,14 @@ import type { ContentItem, CounterChange } from './content.js';
 import type { CustomProps } from './vars.js';
 import { parseRotate, parseScale, parseTransform } from './transform.js';
 import type { TransformFunction } from './transform.js';
-import { LIGHT_DARK, lightDark, usedColorScheme } from './color.js';
+import {
+  LIGHT_DARK,
+  SYSTEM_COLOR,
+  lightDark,
+  systemColors,
+  usedColorScheme,
+} from './color.js';
+import { svgPaint } from './shapes.js';
 
 export type Display =
   | 'none'
@@ -456,7 +462,7 @@ export interface ComputedStyle {
    *  `text-align` on a `<table>` to behave. */
   tableTextAlignSet: boolean;
   /** The marks `open-quote` and `close-quote` write, pairs outermost first. */
-  quotes: readonly string[] | 'none';
+  quotes: readonly string[] | 'none' | 'auto';
   /** Custom properties, `--name`, with their `var()`s replaced (`vars.ts`);
    *  null where none is set. Inherited as the same map. */
   custom: CustomProps | null;
@@ -655,7 +661,8 @@ export interface ComputedStyle {
   /** Its shadows front to back, the ones that can be seen; null for none. */
   boxShadow: BoxShadow[] | null;
   /** Its outline (CSS 2.1 18.4, CSS UI 4): drawn around the border box,
-   *  grown by `outlineOffset`, taking no room; `auto` is drawn solid. */
+   *  grown by `outlineOffset`, taking no room; `auto` is the palette's
+   *  focus ring (`settleOutline`), drawn solid. */
   outlineStyle: BorderStyle | 'auto';
   outlineWidth: number;
   outlineColor: string;
@@ -760,16 +767,31 @@ export interface ComputedStyle {
     | 'space-between'
     | 'space-around'
     | 'space-evenly';
-  alignItems: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+  /** `normal` is `stretch` in a flex box, and is kept apart from it only
+   *  in a grid, where it does not stretch an item with a natural size or a
+   *  ratio (`settleAlign`). */
+  alignItems:
+    'normal' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
   alignSelf:
-    'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    | 'auto'
+    | 'normal'
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'stretch'
+    | 'baseline';
+  /** `start` and `end` are kept: a flex box that wraps in reverse puts
+   *  them at the other ends of its lines from `flex-start` and `flex-end`. */
   alignContent:
     | 'flex-start'
     | 'flex-end'
+    | 'start'
+    | 'end'
     | 'center'
     | 'stretch'
     | 'space-between'
-    | 'space-around';
+    | 'space-around'
+    | 'space-evenly';
   flexGrow: number;
   flexShrink: number;
   flexBasis: Len | 'auto' | 'content';
@@ -912,6 +934,51 @@ export interface RootLook {
    * is in Chrome. Without it, `fontFamily`.
    */
   controlFontFamily?: string;
+  /**
+   * The ring the palette's widgets draw round the one that has the focus —
+   * `theme.focusRing`, `focusRingWidth` and `focusRingOffset` — which is
+   * what an `outline-style: auto` is, the platform's own (CSS UI 4, 5.3),
+   * and what `-webkit-focus-ring-color` names. Without them, core's own
+   * defaults.
+   */
+  focusRing?: string;
+  focusRingWidth?: number;
+  focusRingOffset?: number;
+}
+
+/** Core's focus ring, where a look names none (`DEFAULT_FOCUS_RING`). */
+const FOCUS_RING = { color: '#2980b9', width: 2, offset: 1 };
+
+/**
+ * An `outline-style: auto` as the platform's focus ring: the palette's
+ * width and, where the outline's colour is the text's or the keyword's,
+ * its colour, the palette's gap outside `outline-offset` — so a field the
+ * document draws is ringed as the window's own fields are. A browser
+ * draws `auto` in a style of its own the same way, whatever width it was
+ * given. `look` is the device one, as every length here is, and `scale`
+ * what makes core's defaults device lengths too.
+ */
+export function settleOutline(
+  style: ComputedStyle,
+  look: RootLook,
+  scale: number,
+): void {
+  if (style.outlineStyle !== 'auto') return;
+  style.outlineWidth = look.focusRingWidth ?? FOCUS_RING.width * scale;
+  style.outlineOffset += look.focusRingOffset ?? FOCUS_RING.offset * scale;
+  if (style.outlineColor === 'currentColor') {
+    style.outlineColor = look.focusRing ?? FOCUS_RING.color;
+  }
+}
+
+/** `-webkit-focus-ring-color`, a colour of an outline's. */
+function outlineColorOf(v: string, ctx: UnitContext): string | null {
+  const lower = v.trim().toLowerCase();
+  if (lower === 'invert') return 'currentColor';
+  if (lower === '-webkit-focus-ring-color') {
+    return ctx.focusRing ?? FOCUS_RING.color;
+  }
+  return parseColor(v);
 }
 
 export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
@@ -967,7 +1034,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     captionSide: 'top',
     emptyCells: 'show',
     tableTextAlignSet: false,
-    quotes: DEFAULT_QUOTES,
+    quotes: 'auto',
     custom: null,
 
     display: 'inline',
@@ -1113,7 +1180,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     flexDirection: 'row',
     flexWrap: 'nowrap',
     justifyContent: 'normal',
-    alignItems: 'stretch',
+    alignItems: 'normal',
     alignSelf: 'auto',
     alignContent: 'stretch',
     flexGrow: 0,
@@ -1313,6 +1380,11 @@ export function firstLineParent(
 // --- applying a declaration -------------------------------------------------
 
 /** Longhands that take a colour and nothing else, by property name. */
+/** The properties a colour is written in, alone or in a shorthand, a
+ *  shadow, a gradient or an image's mask. */
+const TAKES_COLOR =
+  /^(?:color|background|border|outline|box-shadow|text-shadow|text-decoration|text-emphasis|column-rule|fill|stroke|stop-color|flood-color|lighting-color|caret-color|accent-color|scrollbar-color|filter|mask|list-style|-webkit-text-(?:fill|stroke))/;
+
 const COLOR_PROPS: Record<string, keyof ComputedStyle> = {
   color: 'color',
   'background-color': 'backgroundColor',
@@ -1437,6 +1509,11 @@ export function applyDeclaration(
   if (/!\s*important$/i.test(value)) {
     value = value.replace(/!\s*important$/i, '').trim();
   }
+  // a system colour is a `light-dark()` of its own, in a property that
+  // takes a colour: `Menu` is a font in `font`, and `Mark` a family's name
+  if (TAKES_COLOR.test(name) && SYSTEM_COLOR.test(value)) {
+    value = systemColors(value, ctx.systemColors);
+  }
   // 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
@@ -2088,7 +2165,7 @@ export function applyDeclaration(
           width = w;
           continue;
         }
-        const c = v === 'invert' ? 'currentColor' : parseColor(part);
+        const c = outlineColorOf(part, ctx);
         if (c === null) return;
         color = c;
       }
@@ -2109,8 +2186,7 @@ export function applyDeclaration(
     }
     case 'outline-color': {
       // `invert` is the text's colour where a browser cannot invert
-      const v = value.trim().toLowerCase();
-      const c = v === 'invert' ? 'currentColor' : parseColor(value);
+      const c = outlineColorOf(value, ctx);
       if (c !== null) style.outlineColor = c;
       return;
     }
@@ -2905,13 +2981,17 @@ export function applyDeclaration(
       return;
     }
     case 'align-items': {
-      const v = alignKeyword(value);
+      const v =
+        value.trim().toLowerCase() === 'normal'
+          ? 'normal'
+          : alignKeyword(value);
       if (v) style.alignItems = v as ComputedStyle['alignItems'];
       return;
     }
     case 'align-self': {
-      if (value.toLowerCase() === 'auto') {
-        style.alignSelf = AUTO;
+      const keyword = value.trim().toLowerCase();
+      if (keyword === 'auto' || keyword === 'normal') {
+        style.alignSelf = keyword;
         return;
       }
       const v = alignKeyword(value);
@@ -2920,11 +3000,15 @@ export function applyDeclaration(
     }
     case 'align-content': {
       // `normal` is `stretch` in a flex and a grid container, the only
-      // boxes it moves anything in (CSS Box Alignment 3, 5.1)
+      // boxes it moves anything in (CSS Box Alignment 3, 5.1); `start` and
+      // `end` are the box's own edges, and stay those
+      const plain = overflowAligned(value);
       const v =
         value.trim().toLowerCase() === 'normal'
           ? 'stretch'
-          : alignKeyword(value);
+          : plain === 'start' || plain === 'end'
+            ? plain
+            : alignKeyword(value);
       if (v) style.alignContent = v as ComputedStyle['alignContent'];
       return;
     }
@@ -3372,6 +3456,28 @@ export function settleContentVisibility(style: ComputedStyle): void {
   }
 }
 
+/**
+ * `align-items: normal` and `align-self: normal`, settled once the cascade
+ * knows what the box and its parent are. In a grid `normal` stretches an
+ * item only where it has neither a natural size nor a ratio, and `stretch`
+ * stretches every item (CSS Grid 1, 6.2; CSS Box Alignment 3, 6.1), so the
+ * grid keeps the two apart; everywhere else `normal` is `stretch`, and a
+ * flex box reads nothing new. Unread, `normal` was dropped, and a grid could
+ * not tell an unset `align-items` from `stretch`: an image under an explicit
+ * `stretch` kept the height its ratio gave it.
+ */
+export function settleAlign(
+  style: ComputedStyle,
+  parent: ComputedStyle | null,
+): void {
+  if (style.alignItems === 'normal' && !style.grid) {
+    style.alignItems = 'stretch';
+  }
+  if (style.alignSelf === 'normal' && !parent?.grid) {
+    style.alignSelf = 'stretch';
+  }
+}
+
 export function settleOverflow(style: ComputedStyle): void {
   const x = style.overflowX;
   const y = style.overflowY;
@@ -5154,19 +5260,6 @@ const POINTER_EVENTS = new Set([
   '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: string): string | null {
-  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']);
 

package/src/html/css/ua.ts

@@ -247,6 +247,17 @@ input, select, button, textarea {
   text-indent: initial;
   text-shadow: initial;
 }
+/* Chrome's ring round a control that shows it has the focus, and \`auto\` is
+   the platform's own: the palette's ring here (\`settleOutline\`), round
+   the element's border box, which the document draws — the field's widget
+   draws none, so a page's \`outline: none\`, or a ring of its own, is what
+   shows. Only a text field's widget tells the document it has the focus:
+   the other controls are core's components, which draw their own ring and
+   keep their focus to themselves. */
+input:focus-visible, textarea:focus-visible {
+  outline: auto 1px -webkit-focus-ring-color;
+  outline-offset: 0;
+}
 input[type=checkbox] { margin: 3px 4px 3px 4px; }
 input[type=radio] { margin: 3px 4px 3px 5px; }
 input[type=hidden] { display: none; }
@@ -292,6 +303,9 @@ details[open] > summary:first-of-type { list-style-type: disclosure-open; }
  * 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.
+ *
+ * A field's frame is its widget's, but its corners are the element's too:
+ * the focus ring the document draws round it is rounded as the frame is.
  */
 function chromeText(look: RootLook): string {
   return `
@@ -300,5 +314,6 @@ button {
   border: ${look.controlBorder}px solid ${look.borderColor};
   border-radius: ${look.controlRadius}px;
 }
+input, textarea { border-radius: ${look.controlRadius}px; }
 `;
 }