grailwind 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -6,6 +6,50 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [0.9.0] - 2026-11-15
+
+### Added
+
+- Engrailed and invected bordures, e.g. `bordure-engrailed-or`. On a frame the field grows into the
+  bites of an engrailed one; off a frame they are plain.
+- Bordures in a fur, e.g. `bordure-ermine` and `bordure-engrailed-vair`. Off a shield's field they
+  show the fur's ground.
+- A bordure on a per-pale part follows the shield's outline and stops at the line of
+  impalement. A chief on that part goes under the bordure.
+- Vair and potent, e.g. `vair`, `counter-vair`, `potent` and `vairy-or-gules`.
+- `fur-<n>` sets how many tiles of a fur go across, e.g. `fur-3` for beffroi.
+- More charge counts: 7, 9 and 10 on a plain field; 4 on a cross or saltire, 2 and 5 on a chevron
+  and 4 and 5 on a pale, fess or bend with `on`; 3 round a bend and 4, 9 and 10 round a chevron
+  with `between`.
+
+### Changed
+
+- The bordure is an eighth of the shield's width, so the field inside it is smaller.
+- **Breaking:** the shield is a frame round its field. `escutcheon` is now
+  `heater`, with the blazon on its one child:
+
+  ```html
+  <!-- before -->
+  <div class="escutcheon azure fess-or"></div>
+  <!-- after -->
+  <div class="heater"><div class="azure fess-or"></div></div>
+  ```
+
+  The heater is pointed, after Fox-Davies, and its outline is drawn just
+  inside its edge. An inescutcheon is a frame too, round its own field, and
+  pointed. A bordure on a shield's field follows its outline and scales with
+  it; on a part of a divided field or a canton, it's still a border.
+
+- `@grailwind/eslint-plugin` 0.1.0-beta.5 needs `grailwind` 0.9.x. The vair
+  family isn't checked by the rule of tincture unless the `furs` option names
+  it. The new `field-in-shield` rule flags a blazon on the frame, and
+  `escutcheon`.
+
+### Fixed
+
+- A canton, inescutcheon or `charges` over all of a divided field with parts no longer takes a
+  part's place.
+
 ## [0.8.1] - 2026-11-13
 
 ### Fixed
@@ -193,7 +237,8 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 Initial release: tinctures, divisions, ordinaries, charges, strict mode and
 custom SVG charges.
 
-[Unreleased]: https://github.com/pafirmin/grailwind/compare/v0.8.1...HEAD
+[Unreleased]: https://github.com/pafirmin/grailwind/compare/v0.9.0...HEAD
+[0.9.0]: https://github.com/pafirmin/grailwind/compare/v0.8.1...v0.9.0
 [0.8.1]: https://github.com/pafirmin/grailwind/compare/v0.8.0...v0.8.1
 [0.8.0]: https://github.com/pafirmin/grailwind/compare/v0.7.0...v0.8.0
 [0.7.0]: https://github.com/pafirmin/grailwind/compare/v0.6.0...v0.7.0

package/README.md

@@ -11,11 +11,13 @@ Heraldic blazon for [Tailwind CSS](https://tailwindcss.com). Draw coats of
 arms, or style anything else, in the language heralds have used for 800 years:
 
 ```html
-<div class="escutcheon azure chevron-or">
-  <div class="charges between">
-    <i class="mullet argent"></i>
-    <i class="mullet argent"></i>
-    <i class="mullet argent"></i>
+<div class="heater">
+  <div class="azure chevron-or">
+    <div class="charges between">
+      <i class="mullet argent"></i>
+      <i class="mullet argent"></i>
+      <i class="mullet argent"></i>
+    </div>
   </div>
 </div>
 ```
@@ -53,9 +55,12 @@ tinctures replace Tailwind's colours entirely.
 
 - **Tinctures:** a tincture on its own sets the background (`azure`), and
   Tailwind's prefixes work as usual (`text-or`). There are also the furs `ermine`,
-  `ermines`, `erminois` and `pean`, which work in divisions too.
-- **The shield:** `escutcheon`, plus `bordure-*`, `inescutcheon` (a small shield at the centre)
-  and `canton` (a ninth of the shield in dexter chief), each with its own field and charges.
+  `ermines`, `erminois`, `pean`, `vair` and `potent` (with `vairy-or-gules` and the like), which
+  work in divisions too, and `fur-<n>` sets their density.
+- **The shield:** `heater`, a pointed shield round its one child, the field, plus `bordure-*` (a
+  eighth of the shield wide, also `bordure-engrailed-*` and `bordure-invected-*`), `inescutcheon` (a
+  small shield at the centre) and `canton` (a ninth of the shield in dexter chief), each with its
+  own field and charges.
 - **Divided fields:** `per-pale-or-gules`, `quarterly-azure-argent`,
   `gyronny-or-sable`, `barry-argent-azure`, `bendy-argent-gules`, `chequy-or-azure` and more, or
   `per-pale`, `per-fess` and `quarterly` for layout.

package/charges.js

@@ -2,7 +2,7 @@
  * Grailwind CSS: charges and their arrangement.
  */
 import plugin from "tailwindcss/plugin";
-import { POINTS, ROUNDELS } from "./data.js";
+import { BETWEEN, BETWEEN_LINED, ON, POINTS, ROUNDELS } from "./data.js";
 import { AT } from "./furs.js";
 
 const star = (cx, cy, r, points = 5) => {
@@ -67,9 +67,12 @@ const DEFAULTS = {
   1: { size: 50, points: [[50, 45]] },
   2: { size: 30, points: [[50, 24], [50, 66]] },
   3: { size: 28, points: [[28, 25], [72, 25], [50, 64]] },
-  4: { size: 24, points: [[30, 24], [70, 24], [32, 60], [68, 60]] },
-  5: { size: 22, points: [[27, 20], [73, 20], [50, 42], [32, 64], [68, 64]] },
+  4: { size: 24, points: [[30, 24], [70, 24], [30, 60], [70, 60]] },
+  5: { size: 22, points: [[27, 20], [73, 20], [50, 42], [27, 64], [73, 64]] },
   6: { size: 20, points: [[20, 18], [50, 18], [80, 18], [35, 42], [65, 42], [50, 66]] },
+  7: { size: 20, points: [[24, 18], [50, 18], [76, 18], [24, 42], [50, 42], [76, 42], [50, 66]] },
+  9: { size: 17, points: [[22, 16], [50, 16], [78, 16], [24, 38], [50, 38], [76, 38], [32, 60], [50, 60], [68, 60]] },
+  10: { size: 15, points: [[17, 15], [39, 15], [61, 15], [83, 15], [28, 35], [50, 35], [72, 35], [39, 55], [61, 55], [50, 75]] },
 };
 
 const POINT_SIZE = 22;
@@ -155,15 +158,16 @@ const inheritOnCounterchange = Object.fromEntries(
   COUNTERCHANGE.map((n) => [`--on-counterchange-${n}`, "inherit"]),
 );
 
-// A layer the size of the shield, as the escutcheon is the containing block
-// for fixed positioning. The charge's mask cuts it to shape.
+// A layer the size of the field, as the heater (or a part of a divided shield, or a canton) is
+// the containing block for fixed positioning, and the field lies inside its bordure by
+// --layer-inset. The charge's mask cuts it to shape.
 const counterchanged = {
   ...inheritCounterchange,
   ...inheritOnCounterchange,
   "&::before": {
     content: '""',
     position: "fixed",
-    inset: "0",
+    inset: "var(--layer-inset, 0px)",
     ...inheritCounterchange,
     ...inheritOnCounterchange,
     ...Object.fromEntries(
@@ -187,6 +191,15 @@ const atPoint = (name) => {
     : place([left, top], POINT_SIZE);
 };
 
+/**
+ * @param {object[]} layouts Entries of `ON`, `BETWEEN` or `BETWEEN_LINED`, with optional `counts`.
+ * @returns {number[]} Every number of charges some layout places, ascending.
+ */
+const countKeys = (layouts) =>
+  [...new Set(layouts.flatMap((layout) => Object.keys(layout.counts ?? {}).map(Number)))].sort(
+    (a, b) => a - b,
+  );
+
 const hasCount = (n) => `:has(> :nth-child(${n}):last-child)`;
 
 export default plugin(({ addUtilities, matchUtilities }) => {
@@ -211,7 +224,7 @@ export default plugin(({ addUtilities, matchUtilities }) => {
   const charges = {
     position: "absolute",
     inset: "var(--field-top, 0%) 0 0",
-    // Above the chief, which is painted last, so charges can sit on it.
+    // Above the field's ordinaries. Charges on the chief go higher, with it (see below).
     "z-index": "1",
     ...inheritCounterchange,
     "& > *": {
@@ -241,8 +254,11 @@ export default plugin(({ addUtilities, matchUtilities }) => {
     utilities[`.${name}`] = arrangement;
   }
 
+  // Charges on the chief go over it (z 3), which goes over a frame's bordure ring (z 2).
+  const onChief = { "z-index": "4" };
+
   for (const [name, counts] of Object.entries(ALONG)) {
-    const arrangement = {};
+    const arrangement = name === "in-chief" ? { "&.charges": onChief } : {};
     for (const [count, points] of Object.entries(counts)) {
       points.forEach((point, i) => {
         arrangement[`&${hasCount(count)} > :nth-child(${i + 1})`] = atPoint(point);
@@ -260,8 +276,12 @@ export default plugin(({ addUtilities, matchUtilities }) => {
       "--charge-width": "var(--charge-size, var(--between-size))",
     };
   }
-  // The counts some ordinary overrides in BETWEEN's `counts` (see data.js).
-  for (const count of [2, 6]) {
+  // The counts some ordinary overrides in `counts` (see data.js).
+  const betweenCounts = countKeys([
+    ...Object.values(BETWEEN),
+    ...Object.values(BETWEEN_LINED).flatMap((lines) => Object.values(lines)),
+  ]);
+  for (const count of betweenCounts) {
     for (let i = 1; i <= count; i++) {
       between[`&${hasCount(count)} > :nth-child(${i})`] = {
         left: `var(--between-${count}-${i}-x, var(--between-${i}-x))`,
@@ -275,7 +295,7 @@ export default plugin(({ addUtilities, matchUtilities }) => {
   // Falls back to the plain-field default when the ordinary has no points for this count.
   // An undefined var() would otherwise unset `left`/`top` instead of  deferring to the :where() default.
   const on = {};
-  for (const count of [1, 2, 3, 5]) {
+  for (const count of countKeys(Object.values(ON))) {
     const fallback = DEFAULTS[count];
     for (let i = 1; i <= count; i++) {
       const [left, top] = fallback?.points[i - 1] ?? [];
@@ -286,7 +306,7 @@ export default plugin(({ addUtilities, matchUtilities }) => {
       on[`&${hasCount(count)} > :nth-child(${i})`] = {
         left: at("x", left),
         top: at("y", top),
-        "--charge-width": `var(--charge-size, var(--on-size, ${fallback?.size ?? 16}%))`,
+        "--charge-width": `var(--charge-size, var(--on-${count}-size, var(--on-size, ${fallback?.size ?? 16}%)))`,
       };
     }
   }
@@ -294,7 +314,10 @@ export default plugin(({ addUtilities, matchUtilities }) => {
   utilities[".on"] = { "&": inheritOnCounterchange, ...on };
 
   for (const name of Object.keys(POINTS)) {
-    utilities[`.in-${name}`] = { ".charges > &": atPoint(name) };
+    utilities[`.in-${name}`] = {
+      ".charges > &": atPoint(name),
+      ...(CHIEF_POINTS.has(name) && { ".charges:has(> &)": onChief }),
+    };
   }
 
   // The whole field, under the ordinaries and the chief. A custom charge has no tile, so it

package/data.js

@@ -31,6 +31,12 @@ export const DIVISIONS = [
   "chequy",
 ];
 
+// The classes that frame a field: a shape round one child, which carries the blazon.
+export const FRAMES = ["heater", "inescutcheon"];
+
+// The lines a bordure can have besides plain, e.g. `bordure-engrailed-or`.
+export const BORDURE_LINES = ["engrailed", "invected"];
+
 // Ordinaries that can be reversed, e.g. `pile-reversed-or`: the same shape upside down.
 export const REVERSIBLE = ["chevron", "pall", "pile"];
 const reversed = (ordinary) => `${ordinary}-reversed`;
@@ -100,12 +106,47 @@ export const VOIDABLE = [
   ...REVERSIBLE.map(reversed),
 ];
 
-// Each fur's [ground, spot] tinctures.
+// The vair family: plain vair and potent are argent and azure, and the -y forms take a metal and a
+// colour, metal first as blazon writes them.
+const VAIRS = ["vair", "counter-vair", "potent", "counter-potent"];
+const VAIRY = {
+  vair: "vairy",
+  "counter-vair": "counter-vairy",
+  potent: "potenty",
+  "counter-potent": "counter-potenty",
+};
+
+// Each fur's pattern: ermine's spots, or the vair family's panes.
+export const FUR_PATTERNS = {
+  ermine: "ermine",
+  ermines: "ermine",
+  erminois: "ermine",
+  pean: "ermine",
+  ...Object.fromEntries(VAIRS.map((pattern) => [pattern, pattern])),
+  ...Object.fromEntries(
+    VAIRS.flatMap((pattern) =>
+      METALS.flatMap((metal) =>
+        COLOURS.map((colour) => [`${VAIRY[pattern]}-${metal}-${colour}`, pattern]),
+      ),
+    ),
+  ),
+};
+
+// Each fur's [ground, drawn] tinctures: ermine's spots, or the vair family's panes that point up in
+// the top row, which is the first tincture blazoned.
 export const FURS = {
   ermine: ["argent", "sable"],
   ermines: ["sable", "argent"],
   erminois: ["or", "sable"],
   pean: ["sable", "or"],
+  ...Object.fromEntries(VAIRS.map((pattern) => [pattern, ["azure", "argent"]])),
+  ...Object.fromEntries(
+    VAIRS.flatMap((pattern) =>
+      METALS.flatMap((metal) =>
+        COLOURS.map((colour) => [`${VAIRY[pattern]}-${metal}-${colour}`, [colour, metal]]),
+      ),
+    ),
+  ),
 };
 
 // The points of the shield, as [left%, top%], for placing a single charge, e.g. `in-dexter-chief`.
@@ -142,11 +183,16 @@ export const BETWEEN = {
     2: { points: [[50, 15], [50, 78]] },
     6: { size: 14, points: [[20, 14], [50, 14], [80, 14], [32, 70], [68, 70], [50, 86]] } } },
   bend: { size: 24, points: [[70, 26], [30, 68]], counts: {
+    3: { size: 18, points: [[60, 13], [86, 36], [30, 68]] },
     6: { size: 14, points: [[48, 9], [76, 12], [84, 38], [9, 48], [18, 72], [38, 84]] } } },
   "bend-sinister": { size: 24, points: [[30, 26], [70, 68]], counts: {
+    3: { size: 18, points: [[40, 13], [14, 36], [70, 68]] },
     6: { size: 14, points: [[52, 9], [24, 12], [16, 38], [91, 48], [82, 72], [62, 84]] } } },
   chevron: { size: 22, points: [[24, 22], [76, 22], [50, 70]], counts: {
-    6: { size: 12, points: [[18, 14], [50, 11], [82, 14], [40, 72], [60, 72], [50, 84]] } } },
+    4: { size: 15, points: [[20, 16], [50, 9], [80, 16], [50, 74]] },
+    6: { size: 12, points: [[18, 14], [50, 11], [82, 14], [40, 77], [60, 77], [50, 89]] },
+    9: { size: 11, points: [[14, 12], [30, 12], [22, 26], [70, 12], [86, 12], [78, 26], [43, 73], [57, 73], [50, 86]] },
+    10: { size: 11, points: [[14, 12], [30, 12], [22, 26], [70, 12], [86, 12], [78, 26], [43, 71], [57, 71], [43, 85], [57, 85]] } } },
   cross: { size: 18, points: [[20, 17], [80, 17], [24, 72], [76, 72]] },
   saltire: { size: 16, points: [[50, 13], [14, 45], [86, 45], [50, 84]], counts: {
     2: { points: [[14, 45], [86, 45]] } } },
@@ -158,18 +204,53 @@ export const BETWEEN = {
 // `on` charges shrink on lines that cut deep into the ordinary, by line.
 export const ON_SCALE = { engrailed: 0.8, indented: 0.9 };
 
-// Where charges go for "on", along the ordinary's centre line, by number of charges.
+// Where charges go for "on", along the ordinary's centre line, by number of charges. A count
+// can set its own size, else the ordinary's applies.
 // prettier-ignore
 export const ON = {
-  pale: { size: 20, counts: { 1: [[50, 45]], 2: [[50, 28], [50, 62]], 3: [[50, 18], [50, 45], [50, 72]] } },
-  fess: { size: 22, counts: { 1: [[50, 45]], 2: [[30, 45], [70, 45]], 3: [[20, 45], [50, 45], [80, 45]] } },
-  bend: { size: 18, counts: { 1: [[50, 50]], 2: [[33, 33], [67, 67]], 3: [[24, 24], [50, 50], [76, 76]] } },
-  "bend-sinister": { size: 18, counts: { 1: [[50, 50]], 2: [[67, 33], [33, 67]], 3: [[76, 24], [50, 50], [24, 76]] } },
-  chevron: { size: 15, counts: { 1: [[50, 36]], 3: [[20, 65], [50, 36], [80, 65]] } },
-  cross: { size: 15, counts: { 1: [[50, 45]], 5: [[50, 15], [18, 45], [50, 45], [82, 45], [50, 80]] } },
-  saltire: { size: 16, counts: { 1: [[50, 45]], 5: [[22, 19.8], [78, 19.8], [50, 45], [22, 70.2], [78, 70.2]] } },
-  pall: { size: 16, counts: { 1: [[50, 40]], 3: [[26, 20.8], [74, 20.8], [50, 75]] } },
-  pile: { size: 14, counts: { 1: [[50, 25]], 3: [[50, 14], [50, 34], [50, 54]] } },
+  pale: { size: 20, counts: {
+    1: { points: [[50, 45]] },
+    2: { points: [[50, 28], [50, 62]] },
+    3: { points: [[50, 18], [50, 45], [50, 72]] },
+    4: { size: 18, points: [[50, 13], [50, 35], [50, 57], [50, 79]] },
+    5: { size: 15, points: [[50, 12], [50, 29], [50, 46], [50, 63], [50, 80]] } } },
+  fess: { size: 22, counts: {
+    1: { points: [[50, 45]] },
+    2: { points: [[30, 45], [70, 45]] },
+    3: { points: [[20, 45], [50, 45], [80, 45]] },
+    4: { size: 18, points: [[17, 45], [39, 45], [61, 45], [83, 45]] },
+    5: { size: 15, points: [[14, 45], [32, 45], [50, 45], [68, 45], [86, 45]] } } },
+  bend: { size: 18, counts: {
+    1: { points: [[50, 50]] },
+    2: { points: [[33, 33], [67, 67]] },
+    3: { points: [[24, 24], [50, 50], [76, 76]] },
+    4: { size: 16, points: [[22, 22], [40.7, 40.7], [59.3, 59.3], [78, 78]] },
+    5: { size: 12, points: [[17, 17], [32, 32], [47, 47], [62, 62], [77, 77]] } } },
+  "bend-sinister": { size: 18, counts: {
+    1: { points: [[50, 50]] },
+    2: { points: [[67, 33], [33, 67]] },
+    3: { points: [[76, 24], [50, 50], [24, 76]] },
+    4: { size: 16, points: [[78, 22], [59.3, 40.7], [40.7, 59.3], [22, 78]] },
+    5: { size: 12, points: [[83, 17], [68, 32], [53, 47], [38, 62], [23, 77]] } } },
+  chevron: { size: 15, counts: {
+    1: { points: [[50, 36]] },
+    2: { points: [[28, 57], [72, 57]] },
+    3: { points: [[20, 65], [50, 36], [80, 65]] },
+    5: { size: 13, points: [[50, 36], [35, 51], [65, 51], [20, 66], [80, 66]] } } },
+  cross: { size: 15, counts: {
+    1: { points: [[50, 45]] },
+    4: { points: [[50, 15], [18, 45], [82, 45], [50, 80]] },
+    5: { points: [[50, 15], [18, 45], [50, 45], [82, 45], [50, 80]] } } },
+  saltire: { size: 16, counts: {
+    1: { points: [[50, 45]] },
+    4: { points: [[22, 19.8], [78, 19.8], [22, 70.2], [78, 70.2]] },
+    5: { points: [[22, 19.8], [78, 19.8], [50, 45], [22, 70.2], [78, 70.2]] } } },
+  pall: { size: 16, counts: {
+    1: { points: [[50, 40]] },
+    3: { points: [[26, 20.8], [74, 20.8], [50, 75]] } } },
+  pile: { size: 14, counts: {
+    1: { points: [[50, 25]] },
+    3: { points: [[50, 14], [50, 34], [50, 54]] } } },
 };
 
 const mirror = (points) => points.map(([x, y]) => [x, 100 - y]);
@@ -185,7 +266,7 @@ for (const ordinary of REVERSIBLE) {
   };
   ON[reversed(ordinary)] = {
     size: ON[ordinary].size,
-    counts: mapValues(ON[ordinary].counts, mirror),
+    counts: mapValues(ON[ordinary].counts, (count) => ({ ...count, points: mirror(count.points) })),
   };
 }
 
@@ -208,7 +289,7 @@ export const BETWEEN_LINED = {
     indented: { points: [[70, 26], [24, 72]] },
   },
   chevron: {
-    embattled: { counts: { 6: { size: 10, points: [[16, 13], [50, 8], [84, 13], [40, 72], [60, 72], [50, 84]] } } },
+    embattled: { counts: { 6: { size: 10, points: [[16, 13], [50, 8], [84, 13], [40, 77], [60, 77], [50, 89]] } } },
   },
   "chevron-reversed": {
     embattled: { points: [[26, 76], [74, 76], [50, 24]] },

package/divisions.js

@@ -4,6 +4,7 @@
 import plugin from "tailwindcss/plugin";
 import { FURS, TINCTURES } from "./data.js";
 import { furLayers } from "./furs.js";
+import { PATHS } from "./paths.js";
 
 // The fess point, in % down the shield: horizontal lines of partition pass through it, as the
 // cross and fess do.
@@ -26,16 +27,40 @@ const stripes = (to, pieces) => (a, b) => {
   };
 };
 
-// How much of the corner-to-corner extent the shield covers: the base corner is cut away by the
-// border-radius of 0 0 50% 50% / 0 0 45% 45% and the 5:6 aspect ratio in grailwind.css. It runs
-// from the chief corner the bands start in to the tangent on the base curve.
-const BENDY_VISIBLE = (() => {
-  const [width, height] = [5, 6];
-  const [radiusX, radiusY] = [width / 2, 0.45 * height];
-  const [centreX, centreY] = [width / 2, height - radiusY];
-  const tangent = Math.sqrt((height * radiusX) ** 2 + (width * radiusY) ** 2);
-  return (width * height - height * centreX + width * centreY + tangent) / (2 * width * height);
-})();
+/**
+ * Points along a drawn outline's curves and lines, densely, in fractions of its box.
+ * @param {Array[]} segments The drawing's segments, as in paths.js, in real units (100 × 120).
+ * @returns {number[][]} [x, y] points, each 0 to 1.
+ */
+const outlineFractions = (segments) => {
+  const points = [];
+  let from = [0, 0];
+  for (const [command, ...n] of segments) {
+    if (command === "M" || command === "L") {
+      from = [n[0], n[1]];
+      points.push(from);
+    } else if (command === "C") {
+      for (let i = 1; i <= 1000; i++) {
+        const t = i / 1000;
+        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],
+        ]);
+      }
+      from = [n[4], n[5]];
+    } else if (command !== "Z") {
+      throw new Error(`bendy can't read ${command} in the heater's outline`);
+    }
+  }
+  return points.map(([x, y]) => [x / 100, y / 120]);
+};
+
+// How much of the corner-to-corner extent the shield covers, as the heater's base cuts the far
+// corner away. On the 5:6 shield, a point's distance along the extent is (x + y) / 2 in fractions
+// of the width and height, so it runs from the chief corner the bands start in to where a band's
+// line is tangent to the base (drawings/heater.svg).
+const BENDY_VISIBLE = Math.max(...outlineFractions(PATHS.heater).map(([x, y]) => (x + y) / 2));
 
 // Diagonal bands parallel to per bend, `pieces` equal ones across the visible part of the shield,
 // the last running to the edge. Explicit stops, not a repeating gradient, so a canton's square
@@ -295,6 +320,17 @@ const field = (layers, color) =>
     "--field",
   );
 
+/**
+ * A field's first tincture, and the shield's, for a bordure ring of the first (see grailwind.css).
+ * Only the heater sets it, as an inescutcheon's "of the first" is the shield's.
+ * @param {string} colour The first tincture's CSS colour.
+ * @returns {Record<string, unknown>} The declarations, with the heater's as a nested rule.
+ */
+const firstTincture = (colour) => ({
+  "--field-first": colour,
+  ".heater:has(> &)": { "--frame-first": colour },
+});
+
 // The field with its tinctures swapped, for counterchanged ordinaries to paint.
 const counterchange = (rules) =>
   Object.fromEntries(
@@ -321,7 +357,7 @@ export default plugin(({ addUtilities, theme }) => {
           ...unswapped,
           ...field(toLayers(unswapped), unswapped["background-color"]),
           ...counterchange(background(b, a)),
-          "--field-first": a,
+          ...firstTincture(a),
         };
       }
     }
@@ -341,7 +377,7 @@ export default plugin(({ addUtilities, theme }) => {
             ...joinLayers(layers, "background"),
             ...field(layers),
             ...counterchange(withFur(division, second, first, theme)),
-            ...(!FURS[first] && { "--field-first": `var(--color-${first})` }),
+            ...(!FURS[first] && firstTincture(`var(--color-${first})`)),
           };
         }
       }