grailwind 0.8.0 → 0.9.0

package/ordinaries.js

@@ -5,6 +5,9 @@ import plugin from "tailwindcss/plugin";
 import {
   BETWEEN,
   BETWEEN_LINED,
+  BORDURE_LINES,
+  CHARGES,
+  FRAMES,
   FURS,
   LINES as LINE_NAMES,
   lineOrdinaries,
@@ -15,7 +18,7 @@ import {
   TINCTURES,
   VOIDABLE,
 } from "./data.js";
-import { furBackground } from "./furs.js";
+import { furBackground, ringBackground } from "./furs.js";
 import { PATHS } from "./paths.js";
 
 // prettier-ignore
@@ -61,17 +64,25 @@ const polygon = (vertices) => `polygon(${vertices.map(point).join(", ")})`;
 
 const PSEUDO = { chief: "&::after" };
 
+// A split field's parts: its children that aren't over all of it. Written out in grailwind.css.
+const PART = ":not(.charges, .inescutcheon, .canton)";
+
 // The chief surmounts a bordure.
 const INSET = "var(--bordure-inset)";
+// Each side's step-out. A bordure on a per-pale part sets its palar side's to 0.
+const DEXTER = `var(--bordure-inset-dexter, ${INSET})`;
+const SINISTER = `var(--bordure-inset-sinister, ${INSET})`;
 const OVER_BORDURE = {
   "--bordure-inset": "inherit",
-  inset: `calc(-1 * ${INSET}) calc(-1 * ${INSET}) 0`,
-  padding: `${INSET} ${INSET} 0`,
+  "--bordure-inset-dexter": "inherit",
+  "--bordure-inset-sinister": "inherit",
+  inset: `calc(-1 * ${INSET}) calc(-1 * ${SINISTER}) 0 calc(-1 * ${DEXTER})`,
+  padding: `${INSET} ${SINISTER} 0 ${DEXTER}`,
   "background-origin": "content-box",
 };
 // A vertex on the shield's top or side edges, moved out to the bordure's outer edge.
 const outer = ([x, y]) => {
-  const ox = x === 0 ? `calc(-1 * ${INSET})` : x === 100 ? `calc(100% + ${INSET})` : pct(x);
+  const ox = x === 0 ? `calc(-1 * ${DEXTER})` : x === 100 ? `calc(100% + ${SINISTER})` : pct(x);
   return `${ox} ${y === 0 ? `calc(-1 * ${INSET})` : pct(y)}`;
 };
 
@@ -603,6 +614,303 @@ const pathShape = (segments) => {
   return `shape(from ${at([startX, startY])}, ${commands.join(", ")}, close)`;
 };
 
+// Polygon points per curve or arc, where shape() isn't supported.
+const SAMPLES = 16;
+
+/**
+ * A fraction of the frame across or down, in a box inset by `inset` on every side.
+ * @param {number} fraction 0 at the frame's top or left edge, 1 at its bottom or right.
+ * @param {string|null} inset A CSS length, or null for the frame's own edge.
+ * @returns {string} A CSS length-percentage.
+ */
+const insetCoordinate = (fraction, inset) => {
+  if (!inset) {
+    return pct(fraction * 100);
+  }
+  if (num(fraction) === 0) {
+    return inset;
+  }
+  if (num(fraction) === 1) {
+    return `calc(100% - ${inset})`;
+  }
+  return `calc(${inset} + ${num(fraction)} * (100% - 2 * ${inset}))`;
+};
+
+/**
+ * A drawing's point, in real units, in the frame inset by `inset`.
+ * @param {number[]} point [x, y] in real units (W × H).
+ * @param {string|null} inset A CSS length, or null for the frame's own edge.
+ * @returns {string} A CSS position.
+ */
+const insetPoint = ([x, y], inset) =>
+  `${insetCoordinate(x / W, inset)} ${insetCoordinate(y / H, inset)}`;
+
+/**
+ * An arc's radius, scaled with the inset box as its points are.
+ * @param {number} radius In real units.
+ * @param {number} across W for a horizontal radius, H for a vertical one.
+ * @param {string|null} inset A CSS length, or null for the frame's own edge.
+ * @returns {string} A CSS length-percentage.
+ */
+const insetRadius = (radius, across, inset) =>
+  inset ? `calc(${num(radius / across)} * (100% - 2 * ${inset}))` : pct((radius * 100) / across);
+
+/**
+ * A drawn outline's shape() commands after its start, in the frame inset by `inset`.
+ * @param {Array[]} segments The drawing's segments, as in paths.js, ending in ["Z"].
+ * @param {string|null} inset A CSS length, or null for the frame's own edge.
+ * @returns {string[]} The commands, ending in "close".
+ */
+const insetCommands = (segments, inset) =>
+  segments.slice(1).map(([command, ...n]) => {
+    switch (command) {
+      case "L":
+        return `line to ${insetPoint([n[0], n[1]], inset)}`;
+      case "C":
+        return `curve to ${insetPoint([n[4], n[5]], inset)} with ${insetPoint([n[0], n[1]], inset)} / ${insetPoint([n[2], n[3]], inset)}`;
+      case "A": {
+        const [rx, ry, rotation, large, sweep, x, y] = n;
+        return [
+          `arc to ${insetPoint([x, y], inset)} of ${insetRadius(rx, W, inset)} ${insetRadius(ry, H, inset)}`,
+          sweep ? "cw" : "ccw",
+          large ? "large" : "",
+          rotation ? `rotate ${rotation}deg` : "",
+        ]
+          .filter(Boolean)
+          .join(" ");
+      }
+      case "Z":
+        return "close";
+      default:
+        throw new Error(`a frame's outline can't use ${command}`);
+    }
+  });
+
+/**
+ * Points along an SVG arc, after its start, from its endpoint form (SVG 1.1, F.6.5).
+ * @param {number[]} from The arc's start, in real units.
+ * @param {number[]} arc [rx, ry, rotation, large, sweep, x, y], as in paths.js.
+ * @returns {number[][]} SAMPLES points, the last at the arc's end.
+ */
+const arcPoints = (from, [rx, ry, rotation, large, sweep, x, y]) => {
+  const angle = (rotation * Math.PI) / 180;
+  const [cos, sin] = [Math.cos(angle), Math.sin(angle)];
+  const [dx, dy] = [(from[0] - x) / 2, (from[1] - y) / 2];
+  const [x1, y1] = [cos * dx + sin * dy, -sin * dx + cos * dy];
+  // Radii too small to reach are scaled up, as SVG does.
+  const scale = Math.max(1, Math.sqrt((x1 * x1) / (rx * rx) + (y1 * y1) / (ry * ry)));
+  const [radiusX, radiusY] = [rx * scale, ry * scale];
+  const numerator = Math.max(
+    0,
+    radiusX ** 2 * radiusY ** 2 - radiusX ** 2 * y1 ** 2 - radiusY ** 2 * x1 ** 2,
+  );
+  const sign = large === sweep ? -1 : 1;
+  const factor =
+    sign * Math.sqrt(numerator / (radiusX ** 2 * y1 ** 2 + radiusY ** 2 * x1 ** 2) || 0);
+  const [cx1, cy1] = [(factor * radiusX * y1) / radiusY, (-factor * radiusY * x1) / radiusX];
+  const centre = [
+    cos * cx1 - sin * cy1 + (from[0] + x) / 2,
+    sin * cx1 + cos * cy1 + (from[1] + y) / 2,
+  ];
+  const start = Math.atan2((y1 - cy1) / radiusY, (x1 - cx1) / radiusX);
+  let sweepAngle = Math.atan2((-y1 - cy1) / radiusY, (-x1 - cx1) / radiusX) - start;
+  if (sweep && sweepAngle < 0) {
+    sweepAngle += 2 * Math.PI;
+  } else if (!sweep && sweepAngle > 0) {
+    sweepAngle -= 2 * Math.PI;
+  }
+  return Array.from({ length: SAMPLES }, (_, i) => {
+    const theta = start + (sweepAngle * (i + 1)) / SAMPLES;
+    const [ex, ey] = [radiusX * Math.cos(theta), radiusY * Math.sin(theta)];
+    return [centre[0] + cos * ex - sin * ey, centre[1] + sin * ex + cos * ey];
+  });
+};
+
+/**
+ * A drawn outline as polygon points, its curves and arcs sampled.
+ * @param {Array[]} segments The drawing's segments, as in paths.js.
+ * @param {number} [samples] Points per curve.
+ * @returns {number[][]} Points in real units, starting at the move.
+ */
+const outlinePoints = (segments, samples = SAMPLES) => {
+  const points = [[segments[0][1], segments[0][2]]];
+  for (const [command, ...n] of segments.slice(1)) {
+    const from = points.at(-1);
+    if (command === "L") {
+      points.push([n[0], n[1]]);
+    } else if (command === "C") {
+      for (let i = 1; i <= samples; i++) {
+        const t = i / samples;
+        const [a, b, c, d] = [(1 - t) ** 3, 3 * (1 - t) ** 2 * t, 3 * (1 - t) * t ** 2, t ** 3];
+        points.push([
+          a * from[0] + b * n[0] + c * n[2] + d * n[4],
+          a * from[1] + b * n[1] + c * n[3] + d * n[5],
+        ]);
+      }
+    } else if (command === "A") {
+      points.push(...arcPoints(from, n));
+    }
+  }
+  return points;
+};
+
+// A bordure's width, as a fraction of its frame's. grailwind.css has it as `calc(100cqw / 8)` on a
+// frame and a third of that on a canton, which test/modes.mjs checks. A lined bordure is drawn for
+// this width.
+const BORDURE_WIDTH = 1 / 8;
+// How deep a lined bordure's scallops are, as a fraction of its frame's width.
+const SCALLOP_DEPTH = 0.037;
+// The same as a fraction of the bordure's width: an engrailed field's border narrows by it.
+const BORDURE_DEPTH = SCALLOP_DEPTH / BORDURE_WIDTH;
+// A lined bordure's scallop length in real units, as SCALLOP is an ordinary's: a run between
+// corners gets one scallop per this much of its length inside the bordure.
+const BORDURE_SCALLOP = 12;
+// An engrailed bordure's top corners are round lobes, their radius this many times the scallops'
+// depth (at least 1), centred inside the corner so they reach the depth past each edge, as the
+// bites do. Every other corner is a cusp.
+const CORNER_LOBE = 1.8;
+// Points per curve when a run is cut into scallops by arc length.
+const RUN_SAMPLES = 256;
+
+/**
+ * @param {number[]} vector A vector.
+ * @returns {number[]} The unit vector the same way.
+ */
+const unit = ([x, y]) => [x / Math.hypot(x, y), y / Math.hypot(x, y)];
+
+/**
+ * Points evenly spaced along a polyline, one scallop apart.
+ * @param {number[][]} polyline Points of a drawing, in real units.
+ * @param {number} start How far along it to start.
+ * @param {number} [end] How far along it to end, by default its end.
+ * @returns {number[][]} The chords' ends, from `start` to `end`.
+ */
+const chordEnds = (polyline, start, end) => {
+  const lengths = [0];
+  for (let i = 1; i < polyline.length; i++) {
+    const [from, to] = [polyline[i - 1], polyline[i]];
+    lengths.push(lengths[i - 1] + Math.hypot(to[0] - from[0], to[1] - from[1]));
+  }
+  const last = end ?? lengths.at(-1);
+  const count = Math.max(
+    1,
+    Math.round(((last - start) * (1 - 2 * BORDURE_WIDTH)) / BORDURE_SCALLOP),
+  );
+  return Array.from({ length: count + 1 }, (_, part) => {
+    const distance = start + ((last - start) * part) / count;
+    const i = Math.max(
+      1,
+      lengths.findIndex((length) => length >= distance),
+    );
+    const fraction = (distance - lengths[i - 1]) / (lengths[i] - lengths[i - 1]);
+    return polyline[i - 1].map((v, axis) => v + (polyline[i][axis] - v) * fraction);
+  });
+};
+
+/**
+ * A lined bordure's inner edge, clockwise, in real units. Its frame's outline, inside the bordure,
+ * is cut at the top corners and the base point into runs, and each run into equal chords by its
+ * length in the drawing. Each chord is a scallop, a cubic whose controls are its ends moved 4/3 of
+ * the depth along the chord's normal, so it peaks at the depth and leaves its cusps square to the
+ * chord. The left side is the right's mirror.
+ * @param {Array[]} segments A heater's drawing, as in paths.js: two lines, then two curves.
+ * @param {number} sweep 1 for engrailed, bulging toward the frame's edge; -1 for invected.
+ * @returns {{ from: number[], c1: number[], c2: number[], to: number[], kind: string }[]} Its
+ *   cubics from the top edge's first cusp, each from where the last ends, and the last back to the
+ *   first. `kind` is "scallop" or "lobe".
+ */
+const bordurePath = (segments, sweep) => {
+  const inset = BORDURE_WIDTH * W;
+  const depth = SCALLOP_DEPTH * W;
+  const scale = [(W - 2 * inset) / W, (H - 2 * inset) / H];
+  const inside = (point) => point.map((v, axis) => inset + v * scale[axis]);
+  const scallops = (ends) =>
+    ends.slice(1).map((end, i) => {
+      const start = ends[i];
+      const normal = unit([end[1] - start[1], start[0] - end[0]]);
+      const push = (point) => point.map((v, axis) => v + (normal[axis] * sweep * 4 * depth) / 3);
+      const [from, to] = [inside(start), inside(end)];
+      return { from, c1: push(from), c2: push(to), to, kind: "scallop" };
+    });
+  // The top-right lobe: its circle's centre is `centre` inside the corner each way, and its cusps
+  // are `reach` from the corner along each edge. It runs clockwise from the top cusp through the
+  // apex to the side cusp. Without a lobe, the corner is the cusp.
+  const radius = CORNER_LOBE * depth;
+  const centre = radius - depth;
+  const reach = sweep > 0 ? centre + Math.sqrt(radius ** 2 - centre ** 2) : 0;
+  const corner = inside([W, 0]);
+  const middle = [corner[0] - centre, corner[1] + centre];
+  const onCircle = (angle) => [
+    middle[0] + radius * Math.cos(angle),
+    middle[1] + radius * Math.sin(angle),
+  ];
+  const [first, last] = [Math.atan2(-centre, centre - reach), Math.atan2(reach - centre, centre)];
+  const apex = (first + last) / 2;
+  const handle = (4 / 3) * Math.tan((last - first) / 8) * radius;
+  const toward = (angle, along) =>
+    onCircle(angle).map(
+      (v, axis) => v + [-Math.sin(angle), Math.cos(angle)][axis] * handle * along,
+    );
+  const lobe = [
+    { from: onCircle(first), c1: toward(first, 1), c2: toward(apex, -1), to: onCircle(apex) },
+    { from: onCircle(apex), c1: toward(apex, 1), c2: toward(last, -1), to: onCircle(last) },
+  ].map((piece) => ({ ...piece, kind: "lobe" }));
+  const outline = outlinePoints(segments, RUN_SAMPLES);
+  const top = chordEnds(outline.slice(0, 2), reach / scale[0], W - reach / scale[0]);
+  const side = outline.slice(1, 3 + RUN_SAMPLES);
+  const right = [...(sweep > 0 ? lobe : []), ...scallops(chordEnds(side, reach / scale[1]))];
+  const flip = ([x, y]) => [W - x, y];
+  const left = right
+    .map(({ from, c1, c2, to, kind }) => ({
+      from: flip(to),
+      c1: flip(c2),
+      c2: flip(c1),
+      to: flip(from),
+      kind,
+    }))
+    .reverse();
+  return [...scallops(top), ...right, ...left];
+};
+
+/**
+ * A frame's clip-paths from its drawing: the outline, and rings just inside it. Each is a polygon
+ * fallback, then the shape().
+ * @param {Array[]} segments The drawing's segments, as in paths.js.
+ * @returns {{ outer: string[], ring: (inset: string) => string[], lined: (inset: string, sweep: number) => string[] }}
+ *   The outline, and a ring `inset` wide: the outline minus the outline mapped into a box inset by
+ *   `inset`. A lined ring has its inner edge scalloped as bordurePath() draws it, bulging outward
+ *   for a `sweep` of 1 and inward for -1. Its shape() is drawn for an `inset` of BORDURE_WIDTH,
+ *   and its polygon is the plain ring. The outline must be a heater's.
+ */
+const frameOutline = (segments) => {
+  const points = outlinePoints(segments);
+  const start = [segments[0][1], segments[0][2]];
+  const loop = (inset) => [...points, points[0]].map((p) => insetPoint(p, inset)).join(", ");
+  const ring = (inset) => [
+    `polygon(evenodd, ${loop(null)}, ${loop(inset)})`,
+    `shape(evenodd from ${insetPoint(start, null)}, ${insetCommands(segments, null).join(", ")}, move to ${insetPoint(start, inset)}, ${insetCommands(segments, inset).join(", ")})`,
+  ];
+  return {
+    outer: [
+      `polygon(${points.map((p) => insetPoint(p, null)).join(", ")})`,
+      `shape(from ${insetPoint(start, null)}, ${insetCommands(segments, null).join(", ")})`,
+    ],
+    ring,
+    lined: (inset, sweep) => {
+      // The inner subpath runs counter-clockwise, against the outer, so a nonzero fill leaves the
+      // field unpainted and still paints where invected scallops overlap.
+      const pieces = bordurePath(segments, sweep);
+      const inner = pieces
+        .toReversed()
+        .map(({ from, c1, c2 }) => `curve to ${at(from)} with ${at(c2)} / ${at(c1)}`);
+      return [
+        ring(inset)[0],
+        `shape(nonzero from ${insetPoint(start, null)}, ${insetCommands(segments, null).join(", ")}, move to ${at(pieces[0].from)}, ${inner.join(", ")}, close)`,
+      ];
+    },
+  };
+};
+
 // The same shape upside down, for an ordinary's reversed form.
 const flipPath = (segments) =>
   segments.map(([command, ...n]) => {
@@ -621,9 +929,14 @@ const flipPath = (segments) =>
 
 // Drawn shapes by `ordinary-line`, each reversible one also upside down as `ordinary-reversed-line`
 // unless it was drawn too. Upper-only battlements would flip onto the lower edges, so those aren't.
-const DRAWN = { ...PATHS };
+// Shield outlines, such as the heater, have no line and aren't ordinaries.
+const DRAWN = {};
 for (const key of Object.keys(PATHS)) {
   const name = LINE_NAMES.find((line) => key.endsWith(`-${line}`));
+  if (!name) {
+    continue;
+  }
+  DRAWN[key] = PATHS[key];
   const ordinary = key.slice(0, -name.length - 1);
   const reversedKey = `${ordinary}-reversed-${name}`;
   const upperOnly = name === "embattled" && UPPER_ONLY.includes(ordinary);
@@ -659,8 +972,11 @@ const mergeLined = (ordinary, line) => {
 
 const onVars = ({ size, counts }, scale = 1) => {
   const vars = { "--on-size": `${+(size * scale).toFixed(2)}%` };
-  for (const [count, points] of Object.entries(counts)) {
-    points.forEach(([left, top], i) => {
+  for (const [count, override] of Object.entries(counts)) {
+    if (override.size !== undefined) {
+      vars[`--on-${count}-size`] = `${+(override.size * scale).toFixed(2)}%`;
+    }
+    override.points.forEach(([left, top], i) => {
       vars[`--on-${count}-${i + 1}-x`] = `${left}%`;
       vars[`--on-${count}-${i + 1}-y`] = `${top}%`;
     });
@@ -700,18 +1016,133 @@ const PAINTS = [
   [OF_THE_FIRST, "var(--the-first, transparent)"],
 ];
 
-export { draftOutline, DRAWN, flipPath, generatedShape, ORDINARIES, pathShape, svgPath };
+// Any frame, e.g. the heater, and a frame's field as `${FRAME} > *`.
+const FRAME = `:is(${FRAMES.map((frame) => `.${frame}`).join(", ")})`;
+
+// The outline's width, just inside the frame's edge.
+const OUTLINE_WIDTH = "2px";
+
+export {
+  BORDURE_DEPTH,
+  BORDURE_WIDTH,
+  bordurePath,
+  CORNER_LOBE,
+  outlinePoints,
+  SCALLOP_DEPTH,
+  draftOutline,
+  DRAWN,
+  flipPath,
+  frameOutline,
+  generatedShape,
+  ORDINARIES,
+  pathShape,
+  svgPath,
+};
 
 export default plugin(({ addBase, addUtilities, theme }) => {
   // Unset on an inescutcheon, a canton or a part of a divided shield, so it can't inherit its
   // shield's layout. In the base layer, so an ordinary on it still sets its own.
   addBase({
-    ".inescutcheon, .canton, :is(.escutcheon, .escutcheon *):is(.quarterly, .per-pale, .per-fess) > *":
+    [`.inescutcheon, .inescutcheon > *, .canton, :is(.heater, .heater *):is(.quarterly, .per-pale, .per-fess) > ${PART}`]:
       Object.fromEntries(layoutVars().map((name) => [name, "initial"])),
   });
 
   const utilities = {};
 
+  // The frame's shape. Inside it, from the bottom: the field's ordinaries (1), its charges, the
+  // bordure's ring (2, set by bordure-*), the chief (3) and its charges (4), a canton or
+  // inescutcheon (5), and the outline (6). Every frame is drawn as a heater.
+  const heater = frameOutline(PATHS.heater);
+  for (const frame of FRAMES) {
+    utilities[`.${frame}`] = {
+      "clip-path": heater.outer,
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        inset: "0",
+        "z-index": "6",
+        "background-color": "var(--color-sable)",
+        "clip-path": heater.ring(OUTLINE_WIDTH),
+      },
+      "&::after": {
+        position: "absolute",
+        inset: "0",
+        "z-index": "2",
+        "clip-path": heater.ring("var(--bordure-width)"),
+        // A bordure on a per-pale part sets --ring-dexter or --ring-sinister: the ring on that half.
+        "background-image":
+          "linear-gradient(to right, var(--ring-dexter, transparent) 50%, var(--ring-sinister, transparent) 50%)",
+      },
+    };
+  }
+
+  // On a frame's field the border is transparent and the ring paints the bordure. An engrailed
+  // ring bites into the field, so the field's border is narrower by the scallops' depth and the
+  // field grows into the bites. Anywhere else the border is the bordure, plain.
+  //
+  // A bordure on a per-pale part is the ring on that half (see the frame's ::after), and the part
+  // has no border on the palar side, so the bordure stops at the line as the rule says. Limits:
+  // a part's bordure is always plain, a fur's ground only, and of-the-first takes the shield's
+  // first. A bordure on both the field and a part isn't handled. A chief on a bordured part goes
+  // under the ring, as the part is a stacking context; it steps out only by the sides that have
+  // a bordure (--bordure-inset-dexter and -sinister).
+  const BORDER = "var(--bordure-width, 0.75rem)";
+  const narrowed = `calc(var(--bordure-width) * ${num(1 - BORDURE_DEPTH)})`;
+  // Each part, and the side it has no bordure on: its half of the ring, its palar border and the
+  // step-out that's 0 there.
+  const PARTS = {
+    [`nth-child(1 of ${PART})`]: ["dexter", "border-right-width", "--bordure-inset-sinister"],
+    [`nth-last-child(1 of ${PART})`]: ["sinister", "border-left-width", "--bordure-inset-dexter"],
+  };
+  const furPaints = Object.keys(FURS).map((fur) => ({
+    name: fur,
+    colour: `var(--color-${FURS[fur][0]})`,
+    ring: ringBackground(fur, theme),
+  }));
+  const tinctures = PAINTS.map(([tincture, colour]) => ({
+    name: tincture,
+    colour,
+    ring: {
+      "background-color": tincture === OF_THE_FIRST ? "var(--frame-first, transparent)" : colour,
+    },
+  }));
+  for (const line of ["", ...BORDURE_LINES]) {
+    const sweep = line === "engrailed" ? 1 : -1;
+    const clip = line && heater.lined("var(--bordure-width)", sweep);
+    // Plain tinctures are in grailwind.css.
+    for (const { name, colour, ring } of line ? [...tinctures, ...furPaints] : furPaints) {
+      const ringColour = ring["background-color"];
+      const part = {};
+      for (const [child, [side, open, inset]] of Object.entries(PARTS)) {
+        part[`${FRAME} > .per-pale > &:${child}`] = {
+          "border-color": "transparent",
+          [open]: "0",
+          [inset]: "0px",
+        };
+        part[`${FRAME}:has(> .per-pale > &:${child})::after`] = {
+          content: '""',
+          [`--ring-${side}`]: ringColour,
+        };
+      }
+      utilities[line ? `.bordure-${line}-${name}` : `.bordure-${name}`] = {
+        "border-style": "solid",
+        "border-width": BORDER,
+        "border-color": colour,
+        "--bordure-inset": BORDER,
+        ":is(.heater, .inescutcheon) > &": {
+          "border-color": "transparent",
+          ...(sweep === 1 && { "border-width": narrowed, "--bordure-inset": narrowed }),
+        },
+        ":is(.heater, .inescutcheon):has(> &)::after": {
+          content: '""',
+          ...ring,
+          ...(clip && { "clip-path": clip }),
+        },
+        ...part,
+      };
+    }
+  }
+
   for (const [tincture, colour] of PAINTS) {
     utilities[`.fimbriated-${tincture}`] = {
       "--fimbriated": "1",
@@ -719,11 +1150,10 @@ export default plugin(({ addBase, addUtilities, theme }) => {
     };
   }
 
-  // Isolated, so an ordinary in a quarter paints under the shield's own ordinary.
-  // The chief's ::after stays unraised, so charges on it stay on top.
+  // Isolated, so an ordinary in a quarter paints under the shield's own ordinary. A frame's field
+  // isn't, so the frame's bordure ring can go between its ordinaries and its chief.
   const ordinaryRules = (ordinary, pseudo, line) => ({
     position: "relative",
-    isolation: "isolate",
     ...(BETWEEN[ordinary] && betweenVars(mergeLined(ordinary, line))),
     ...(ON[ordinary] && onVars(ON[ordinary], ON_SCALE[line] ?? 1)),
     // With a chief, everything else is drawn in the field below it.
@@ -736,9 +1166,11 @@ export default plugin(({ addBase, addUtilities, theme }) => {
     [PSEUDO[ordinary] ?? "&::before"]: {
       content: '""',
       position: "absolute",
-      ...(!PSEUDO[ordinary] && { "z-index": "1" }),
+      // The chief goes over a frame's bordure ring, and its charges over it.
+      "z-index": PSEUDO[ordinary] ? "3" : "1",
       ...pseudo,
     },
+    [`&:not(${FRAME} > *)`]: { isolation: "isolate" },
   });
 
   for (const [ordinary, vertices] of Object.entries(ORDINARIES)) {
@@ -780,10 +1212,20 @@ export default plugin(({ addBase, addUtilities, theme }) => {
       // The swapped field's tiles would wrap into the bordure's strips, so the bordure shows there.
       ...(chief && { "background-clip": "content-box" }),
     };
-    utilities[`.${ordinary}-counterchanged`] = ordinaryRules(ordinary, {
-      ...counterchanged,
-      "clip-path": chief ? plain : `polygon(${vertices.map(pointBelowChief).join(", ")})`,
-    });
+    // Charges on it are counterchanged against it, so they get the field's own tinctures.
+    utilities[`.${ordinary}-counterchanged`] = {
+      ...ordinaryRules(ordinary, {
+        ...counterchanged,
+        "clip-path": chief ? plain : `polygon(${vertices.map(pointBelowChief).join(", ")})`,
+      }),
+      "--on-counterchange-color": "transparent",
+      ...Object.fromEntries(
+        ["image", "size", "position", "repeat"].map((n) => [
+          `--on-counterchange-${n}`,
+          `var(--field-${n})`,
+        ]),
+      ),
+    };
 
     for (const [tincture, colour] of PAINTS) {
       utilities[`.${ordinary}-${tincture}`] = ordinaryRules(ordinary, {
@@ -821,10 +1263,13 @@ export default plugin(({ addBase, addUtilities, theme }) => {
     // A plain polygon, without the fimbriation vars, so fimbriated-* can't reach a fur ordinary.
     for (const fur of Object.keys(FURS)) {
       const pseudo = { ...placed, ...furBackground(fur, theme) };
-      utilities[`.${ordinary}-${fur}`] = ordinaryRules(ordinary, {
-        ...pseudo,
-        "clip-path": plain,
-      });
+      // `cross-potent` is the charge, not a cross of the fur potent.
+      if (!CHARGES.includes(`${ordinary}-${fur}`)) {
+        utilities[`.${ordinary}-${fur}`] = ordinaryRules(ordinary, {
+          ...pseudo,
+          "clip-path": plain,
+        });
+      }
       for (const [name, line] of Object.entries(LINES)) {
         if (!lineOrdinaries(name).includes(ordinary)) {
           continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grailwind",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "scripts": {
     "build": "tailwindcss -i docs/app.css -o docs/site.css",
     "dev": "tailwindcss -i docs/app.css -o docs/site.css --watch",
@@ -28,7 +28,7 @@
   "license": "MIT",
   "description": "Heraldic blazon for Tailwind CSS: tinctures, divisions, ordinaries and charges",
   "devDependencies": {
-    "@grailwind/eslint-plugin": "^0.1.0-beta.4",
+    "@grailwind/eslint-plugin": "^0.1.0-beta.5",
     "@html-eslint/parser": "^0.67.0",
     "@tailwindcss/cli": "^4.3.3",
     "eslint": "^10.14.0",

package/paths.js

@@ -312,6 +312,14 @@ export const PATHS = {
     ["L",65.4,120],
     ["Z"],
   ],
+  "heater": [
+    ["M",0,0],
+    ["L",100,0],
+    ["L",100,66],
+    ["C",100,96,75,114,50,120],
+    ["C",25,114,0,96,0,66],
+    ["Z"],
+  ],
   "pall-embattled": [
     ["M",50,36.22],
     ["L",42.5,29.01],