grailwind 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -6,6 +6,73 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [0.6.0] - 2026-11-06
+
+### Added
+
+- Crosses and the shakefork as charges: `cross-couped`, `cross-potent`,
+  `cross-pattee`, `maltese-cross`, `cross-crosslet`, `cross-moline`,
+  `cross-fleury` and `shakefork`.
+- `semy`: a semé, one built-in charge strewn across the field, e.g. bezanty or
+  crusilly.
+- Voided ordinaries, e.g. `cross-voided-argent`: the field shows through.
+  `cross-voided-counterchanged` and the like counterchange the outline.
+- Reversed ordinaries: `pile-reversed-*`, `chevron-reversed-*` and
+  `pall-reversed-*`, upside down.
+
+### Changed
+
+- `@grailwind/eslint-plugin` 0.1.0-beta.2 needs `grailwind` 0.6.x, for voided
+  ordinaries.
+
+### Fixed
+
+- Charges, a canton or an inescutcheon in a quarter (or a half of `per-pale` or
+  `per-fess`) are placed and counterchanged within it, under the shield's own
+  ordinary, rather than against the whole shield.
+
+## [0.5.0] - 2026-11-04
+
+### Added
+
+- `in-chief` and `in-base`: one to three charges along the chief or base. On a
+  chief, they sit on it. The ESLint plugin reports an arrangement put on a
+  charge rather than its container.
+- `-of-the-first`: the field's first tincture, as in a blazon, e.g.
+  `pale-of-the-first`. The ESLint plugin checks it.
+- Striped fields: `barry-*` and `paly-*` (of six), `barry-of-eight-*`,
+  `barry-of-ten-*` and `paly-of-eight-*`. The first tincture is in chief or
+  on the dexter. They take furs and counterchanged, like the other divisions.
+- `per-saltire-*`: a field divided on both diagonals, the first tincture in
+  chief and base.
+- Bars, named by count: `bar-*`, `two-bars-*` and `three-bars-*`. They take
+  lines, furs, fimbriation and counterchanged, like the fess.
+- `pile-*`: a wedge from the chief to a point. It takes lines, furs,
+  fimbriation and counterchanged, one or three charges `on` it, and two
+  `between`.
+- `canton`: a ninth of the shield in dexter chief, over every ordinary and
+  charge, with its own field, divisions, ordinaries and charges, like the
+  inescutcheon.
+- Six charges `between` a fess, bend, bend sinister, chevron or pale.
+- `inescutcheon`: a small shield at the centre of the arms, over everything
+  else, with its own field, ordinaries and charges. A bordure on it is a third
+  as wide.
+- The ESLint plugin checks a plain canton or inescutcheon against the field it
+  lies on. One with anything on it counts as arms of its own.
+
+### Changed
+
+- The `in-chief` and `in-base` points are now `in-chief-point` and
+  `in-base-point`, like the honour, fess and nombril points.
+- The canton and the chief surmount a bordure, as in heraldry. The canton is
+  still a third of the whole shield, and the chief's lower edge doesn't move.
+- `@grailwind/eslint-plugin` 0.1.0-beta.1 needs `grailwind` 0.5.x, for the
+  renamed points.
+
+### Fixed
+
+- Two charges `between` a fess, saltire or pall are placed one each side.
+
 ## [0.4.0] - 2026-11-03
 
 ### Added
@@ -71,7 +138,9 @@ 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.4.0...HEAD
+[Unreleased]: https://github.com/pafirmin/grailwind/compare/v0.6.0...HEAD
+[0.6.0]: https://github.com/pafirmin/grailwind/compare/v0.5.0...v0.6.0
+[0.5.0]: https://github.com/pafirmin/grailwind/compare/v0.4.0...v0.5.0
 [0.4.0]: https://github.com/pafirmin/grailwind/compare/v0.3.0...v0.4.0
 [0.3.0]: https://github.com/pafirmin/grailwind/compare/v0.2.0...v0.3.0
 [0.2.0]: https://github.com/pafirmin/grailwind/compare/v0.1.0...v0.2.0

package/README.md

@@ -1,5 +1,10 @@
 # Grailwind CSS
 
+[![Test](https://github.com/pafirmin/grailwind/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/pafirmin/grailwind/actions/workflows/test.yml)
+[![npm](https://img.shields.io/npm/v/grailwind)](https://www.npmjs.com/package/grailwind)
+[![ESLint plugin](https://img.shields.io/npm/v/@grailwind/eslint-plugin/beta?label=eslint-plugin)](https://www.npmjs.com/package/@grailwind/eslint-plugin)
+[![License: MIT](https://img.shields.io/npm/l/grailwind)](https://github.com/pafirmin/grailwind/blob/main/LICENSE)
+
 ![Eight coats of arms drawn with Grailwind: chevrons, quarters, fleurs-de-lis, a saltire, gyronny, a chief, a bend and a bordure](https://grailwind.dev/preview.png)
 
 Heraldic blazon for [Tailwind CSS](https://tailwindcss.com). Draw coats of
@@ -49,18 +54,23 @@ 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-*`.
+- **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.
 - **Divided fields:** `per-pale-or-gules`, `quarterly-azure-argent`,
-  `gyronny-or-sable` and more, or `per-pale`, `per-fess` and `quarterly` for
+  `gyronny-or-sable`, `barry-argent-azure` and more, or `per-pale`, `per-fess` and `quarterly` for
   layout.
-- **Ordinaries:** `fess-or`, `chevron-gules`, `cross-argent`, `chief-azure`
-  and more, with `fimbriated-*` for a narrow border, `fess-engrailed-or` and
-  the like for an engrailed or invected edge, `chief-ermine` and the like in a
-  fur, or `chevron-counterchanged` and the like on a divided field.
-- **Charges:** `mullet`, `fleur-de-lis`, `bezant` and more, arranged by
+- **Ordinaries:** `fess-or`, `chevron-gules`, `cross-argent`, `chief-azure`,
+  `two-bars-or` and more, with `fimbriated-*` for a narrow border,
+  `fess-engrailed-or` and the like for an engrailed or invected edge,
+  `cross-voided-argent` and the like to show the field through it,
+  `pile-reversed-or` (also the chevron and pall) to turn one upside down,
+  `chief-ermine` and the like in a fur, or `chevron-counterchanged` and the like
+  on a divided field.
+- **Charges:** `mullet`, `fleur-de-lis`, `bezant`, crosses and more, arranged by
   number, `in-pale`, `in-fess`, `in-bend`, `in-bend-sinister`, `on` or `between`
-  the ordinary, or placed at a named point such as `in-dexter-chief`, sized
-  with `charge-size-*`, and `counterchanged` on a divided field.
+  the ordinary, or placed at a named point such as `in-dexter-chief`, strewn
+  `semy` across the field, sized with `charge-size-*`, and `counterchanged` on
+  a divided field.
 - **Your own charges:** any SVG, via `charge-[url(…)]`.
 
 ## Linting

package/charges.js

@@ -3,6 +3,7 @@
  */
 import plugin from "tailwindcss/plugin";
 import { POINTS, ROUNDELS } from "./data.js";
+import { AT } from "./furs.js";
 
 const star = (cx, cy, r, points = 5) => {
   const coords = [];
@@ -14,6 +15,20 @@ const star = (cx, cy, r, points = 5) => {
   return `<polygon points="${coords.join(" ")}"/>`;
 };
 
+// One arm drawn upward from the centre, repeated x times evenly about (50, 50).
+const rotateX = (d, x) => {
+  const path = (d, deg) => `<path d="${d}" transform="rotate(${deg} 50 50)" />`;
+
+  const paths = [];
+  const rotation = 360 / x;
+  let curr = 0;
+  for (let i = 0; i < x; i++) {
+    paths.push(path(d, curr));
+    curr += rotation;
+  }
+  return paths.join("");
+};
+
 const SHAPES = {
   roundel: `<circle cx="50" cy="50" r="46"/>`,
   annulet: `<circle cx="50" cy="50" r="39" fill="none" stroke="#000" stroke-width="14"/>`,
@@ -29,6 +44,20 @@ const SHAPES = {
     <path d="M45 65H55C55 74 53 82 50 90C47 82 45 74 45 65Z"/>
     <path d="M58 65C62 74 72 80 84 78C80 88 64 90 56 74Z"/>
     <path d="M42 65C38 74 28 80 16 78C20 88 36 90 44 74Z"/>`,
+  "cross-couped": rotateX("M39 50V2H61V50Z", 4),
+  "cross-potent": rotateX("M43 50V16H31V2H69V16H57V50Z", 4),
+  "cross-pattee": rotateX("M40 50V40Q36 20 22 2H78Q64 20 60 40V50Z", 4),
+  "maltese-cross": rotateX("M50 50L30 2L50 18L70 2Z", 4),
+  "cross-crosslet": rotateX("M43 50V25H32V13H43V2H57V13H68V25H57V50Z", 4),
+  "cross-moline": rotateX(
+    "M43 50V18C42 12 38 11 33 16C31 6 40 -1 50 7C60 -1 69 6 67 16C62 11 58 12 57 18V50Z",
+    4,
+  ),
+  "cross-fleury": rotateX(
+    "M43 50V21C41 17 37 16 33 20C30 12 37 8 45 13C45 8 47 5 50 2C53 5 55 8 55 13C63 8 70 12 67 20C63 16 59 17 57 21V50Z",
+    4,
+  ),
+  shakefork: `<polygon points="50,96 39,85 39,43 12.6,20.9 11.3,5.4 26.8,4 50,23.5 73.2,4 88.7,5.4 87.4,20.9 61,43 61,85"/>`,
 };
 
 // Points as [left%, top%] of the shield, plus a charge size as % of its width.
@@ -46,7 +75,22 @@ const DEFAULTS = {
 const POINT_SIZE = 22;
 
 // With a chief on the shield, these points sit on it (see ordinaries.js).
-const CHIEF_POINTS = new Set(["dexter-chief", "chief", "sinister-chief"]);
+const CHIEF_POINTS = new Set(["dexter-chief", "chief-point", "sinister-chief"]);
+
+// Arrangements along the chief or base, by the points each count of charges takes.
+// prettier-ignore
+const ALONG = {
+  "in-chief": {
+    1: ["chief-point"],
+    2: ["dexter-chief", "sinister-chief"],
+    3: ["dexter-chief", "chief-point", "sinister-chief"],
+  },
+  "in-base": {
+    1: ["base-point"],
+    2: ["dexter-base", "sinister-base"],
+    3: ["dexter-base", "base-point", "sinister-base"],
+  },
+};
 
 // prettier-ignore
 const ARRANGEMENTS = {
@@ -73,6 +117,19 @@ const svgUrl = (shape) =>
     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">${shape}</svg>`,
   )}")`;
 
+// Semé: whole charges across the field, staggered on the furs' tile (see furs.js), cut at the
+// edges. The shape is defined once and reused, so a shape with its own ids stays valid.
+const SEMY_ACROSS = 4;
+const SEMY_SCALE = 0.25;
+const SEMY_SHIFT = `${-100 / (4 * (SEMY_ACROSS - 1))}%`;
+const semyTile = (shape) => {
+  const at = (x, y) => `translate(${x - 50 * SEMY_SCALE} ${y - 50 * SEMY_SCALE})`;
+  const uses = AT.map(([x, y]) => `<use href="#s" transform="${at(x, y)} scale(${SEMY_SCALE})"/>`);
+  return `url("data:image/svg+xml,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 60"><defs><g id="s">${shape}</g></defs>${uses.join("")}</svg>`,
+  )}")`;
+};
+
 const maskRules = (image) => ({
   "mask-image": image,
   "mask-size": "contain",
@@ -107,6 +164,18 @@ const counterchanged = {
   },
 };
 
+// A charge at one of the shield's points. The chief's points sit on a chief when there is one.
+const atPoint = (name) => {
+  const [left, top] = POINTS[name];
+  return CHIEF_POINTS.has(name)
+    ? {
+        left: `${left}%`,
+        top: `var(--chief-points-y, ${top}%)`,
+        "--charge-width": `var(--charge-size, var(--chief-points-size, ${POINT_SIZE}%))`,
+      }
+    : place([left, top], POINT_SIZE);
+};
+
 const hasCount = (n) => `:has(> :nth-child(${n}):last-child)`;
 
 export default plugin(({ addUtilities, matchUtilities }) => {
@@ -116,12 +185,13 @@ export default plugin(({ addUtilities, matchUtilities }) => {
   const utilities = {};
 
   for (const [name, shape] of Object.entries(SHAPES)) {
-    utilities[`.${name}`] = maskRules(svgUrl(shape));
+    utilities[`.${name}`] = { ...maskRules(svgUrl(shape)), "--semy-image": semyTile(shape) };
   }
 
   for (const [name, tincture] of Object.entries(ROUNDELS)) {
     utilities[`.${name}`] = {
       ...maskRules(svgUrl(SHAPES.roundel)),
+      "--semy-image": semyTile(SHAPES.roundel),
       "background-color": `var(--color-${tincture})`,
     };
   }
@@ -160,6 +230,16 @@ export default plugin(({ addUtilities, matchUtilities }) => {
     utilities[`.${name}`] = arrangement;
   }
 
+  for (const [name, counts] of Object.entries(ALONG)) {
+    const arrangement = {};
+    for (const [count, points] of Object.entries(counts)) {
+      points.forEach((point, i) => {
+        arrangement[`&${hasCount(count)} > :nth-child(${i + 1})`] = atPoint(point);
+      });
+    }
+    utilities[`.${name}`] = arrangement;
+  }
+
   // Positions come from the ordinary on the shield (see ordinaries.js).
   const between = {};
   for (let i = 1; i <= 4; i++) {
@@ -169,6 +249,16 @@ 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]) {
+    for (let i = 1; i <= count; i++) {
+      between[`&${hasCount(count)} > :nth-child(${i})`] = {
+        left: `var(--between-${count}-${i}-x, var(--between-${i}-x))`,
+        top: `var(--between-${count}-${i}-y, var(--between-${i}-y))`,
+        "--charge-width": `var(--charge-size, var(--between-${count}-size, var(--between-size)))`,
+      };
+    }
+  }
   utilities[".between"] = between;
 
   // Falls back to the plain-field default when the ordinary has no points for this count.
@@ -191,18 +281,26 @@ export default plugin(({ addUtilities, matchUtilities }) => {
   }
   utilities[".on"] = on;
 
-  for (const [name, [left, top]] of Object.entries(POINTS)) {
-    utilities[`.in-${name}`] = {
-      ".charges > &": CHIEF_POINTS.has(name)
-        ? {
-            left: `${left}%`,
-            top: `var(--chief-points-y, ${top}%)`,
-            "--charge-width": `var(--charge-size, var(--chief-points-size, ${POINT_SIZE}%))`,
-          }
-        : place([left, top], POINT_SIZE),
-    };
+  for (const name of Object.keys(POINTS)) {
+    utilities[`.in-${name}`] = { ".charges > &": atPoint(name) };
   }
 
+  // The whole field, under the ordinaries and the chief. A custom charge has no tile, so it
+  // draws nothing: `none` would mean no mask, and flood the field.
+  utilities[".semy"] = {
+    "&.charges": { inset: "0", "z-index": "0" },
+    "&.charges > *": {
+      inset: "0",
+      width: "auto",
+      margin: "0",
+      "aspect-ratio": "auto",
+      "mask-image": "var(--semy-image, linear-gradient(transparent, transparent))",
+      "mask-size": `calc(100% / ${SEMY_ACROSS}) auto`,
+      "mask-repeat": "repeat",
+      "mask-position": `${SEMY_SHIFT} ${SEMY_SHIFT}`,
+    },
+  };
+
   // On a charge, or on `charges` for all of them.
   utilities[".counterchanged"] = {
     ".charges > &": counterchanged,

package/data.js

@@ -5,19 +5,34 @@
 export const METALS = ["or", "argent"];
 export const COLOURS = ["gules", "azure", "vert", "purpure", "sable"];
 export const TINCTURES = [...METALS, ...COLOURS];
+// Paints in the field's first tincture, as "of the first" in a blazon.
+export const OF_THE_FIRST = "of-the-first";
 
 export const DIVISIONS = [
   "per-pale",
   "per-fess",
   "per-bend",
   "per-bend-sinister",
+  "per-saltire",
   "quarterly",
   "gyronny",
+  "barry",
+  "barry-of-eight",
+  "barry-of-ten",
+  "paly",
+  "paly-of-eight",
 ];
 
+// 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`;
+
 export const ORDINARIES = [
   "pale",
   "fess",
+  "bar",
+  "two-bars",
+  "three-bars",
   "bend",
   "bend-sinister",
   "chevron",
@@ -25,6 +40,8 @@ export const ORDINARIES = [
   "saltire",
   "pall",
   "chief",
+  "pile",
+  ...REVERSIBLE.map(reversed),
 ];
 
 export const CHARGES = [
@@ -35,6 +52,14 @@ export const CHARGES = [
   "billet",
   "crescent",
   "fleur-de-lis",
+  "cross-couped",
+  "cross-potent",
+  "cross-pattee",
+  "maltese-cross",
+  "cross-crosslet",
+  "cross-moline",
+  "cross-fleury",
+  "shakefork",
 ];
 
 // Roundels have their own names by tincture.
@@ -49,6 +74,21 @@ export const ROUNDELS = {
 // Lines of partition for an ordinary's edge, e.g. `fess-engrailed-or`.
 export const LINES = ["engrailed", "invected"];
 
+// Ordinaries that can be voided, e.g. `cross-voided-argent`.
+export const VOIDABLE = [
+  "pale",
+  "fess",
+  "bar",
+  "bend",
+  "bend-sinister",
+  "chevron",
+  "cross",
+  "saltire",
+  "pall",
+  "pile",
+  ...REVERSIBLE.map(reversed),
+];
+
 // Each fur's [ground, spot] tinctures.
 export const FURS = {
   ermine: ["argent", "sable"],
@@ -60,30 +100,48 @@ export const FURS = {
 // The points of the shield, as [left%, top%], for placing a single charge, e.g. `in-dexter-chief`.
 export const POINTS = {
   "dexter-chief": [25, 17],
-  chief: [50, 15],
+  "chief-point": [50, 15],
   "sinister-chief": [75, 17],
   "honour-point": [50, 30],
   "fess-point": [50, 45],
   "nombril-point": [50, 60],
   "dexter-base": [30, 72],
-  base: [50, 84],
+  "base-point": [50, 84],
   "sinister-base": [70, 72],
 };
 
 // Plain-field arrangements of a `charges` container, besides `between` and `on`.
-export const ARRANGEMENTS = ["in-pale", "in-fess", "in-bend", "in-bend-sinister"];
+export const ARRANGEMENTS = [
+  "in-pale",
+  "in-fess",
+  "in-bend",
+  "in-bend-sinister",
+  "in-chief",
+  "in-base",
+  "semy",
+];
 
 // Where charges go for "between", as [left%, top%], plus their size as % of width.
+// `counts` overrides the points (and optionally the size) for one number of charges.
 // prettier-ignore
 export const BETWEEN = {
-  pale: { size: 18, points: [[18, 42], [82, 42]] },
-  fess: { size: 20, points: [[30, 15], [70, 15], [50, 78]] },
-  bend: { size: 24, points: [[70, 26], [30, 68]] },
-  "bend-sinister": { size: 24, points: [[30, 26], [70, 68]] },
-  chevron: { size: 22, points: [[24, 22], [76, 22], [50, 70]] },
+  pale: { size: 18, points: [[18, 42], [82, 42]], counts: {
+    6: { size: 14, points: [[18, 18], [18, 45], [18, 70], [82, 18], [82, 45], [82, 70]] } } },
+  fess: { size: 20, points: [[30, 15], [70, 15], [50, 78]], counts: {
+    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: {
+    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: {
+    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], [38, 66], [62, 66], [50, 84]] } } },
   cross: { size: 18, points: [[20, 17], [80, 17], [24, 72], [76, 72]] },
-  saltire: { size: 16, points: [[50, 13], [14, 50], [86, 50], [50, 84]] },
-  pall: { size: 18, points: [[50, 11], [18, 56], [82, 56]] },
+  saltire: { size: 16, points: [[50, 13], [14, 50], [86, 50], [50, 84]], counts: {
+    2: { points: [[14, 50], [86, 50]] } } },
+  pall: { size: 18, points: [[50, 11], [18, 56], [82, 56]], counts: {
+    2: { points: [[18, 56], [82, 56]] } } },
+  pile: { size: 20, points: [[18, 55], [82, 55]] },
 };
 
 // Where charges go for "on", along the ordinary's centre line, by number of charges.
@@ -97,4 +155,30 @@ export const ON = {
   cross: { size: 15, counts: { 1: [[50, 45]], 5: [[50, 15], [18, 45], [50, 45], [82, 45], [50, 80]] } },
   saltire: { size: 14, counts: { 1: [[50, 50]], 5: [[22, 22], [78, 22], [50, 50], [22, 78], [78, 78]] } },
   pall: { size: 14, counts: { 1: [[50, 50]], 3: [[22, 22], [78, 22], [50, 75]] } },
+  pile: { size: 14, counts: { 1: [[50, 25]], 3: [[50, 14], [50, 34], [50, 54]] } },
+};
+
+const mirror = (points) => points.map(([x, y]) => [x, 100 - y]);
+const mapValues = (object, fn) =>
+  Object.fromEntries(Object.entries(object).map(([key, value]) => [key, fn(value)]));
+
+for (const ordinary of REVERSIBLE) {
+  const { size, points, counts = {} } = BETWEEN[ordinary];
+  BETWEEN[reversed(ordinary)] = {
+    size,
+    points: mirror(points),
+    counts: mapValues(counts, (count) => ({ ...count, points: mirror(count.points) })),
+  };
+  ON[reversed(ordinary)] = {
+    size: ON[ordinary].size,
+    counts: mapValues(ON[ordinary].counts, mirror),
+  };
+}
+
+// Mirrored, the lower charges would clip on the heater's curved flanks.
+// prettier-ignore
+BETWEEN["chevron-reversed"] = {
+  ...BETWEEN["chevron-reversed"],
+  points: [[28, 74], [72, 74], [50, 30]],
+  counts: { 6: { size: 12, points: [[26, 78], [50, 89], [74, 78], [38, 34], [62, 34], [50, 16]] } },
 };

package/divisions.js

@@ -11,6 +11,17 @@ const FESS_POINT = "45%";
 // Each division maps (first, second) tincture colours to background rules.
 const layer = (image) => ({ "background-image": image });
 
+// Equal stripes, the first tincture at the top (barry) or on the dexter (paly): one pair, tiled.
+// The repeat must be explicit, as toLayers defaults to no-repeat for the fur variants.
+const stripes = (to, pieces) => (a, b) => {
+  const pair = `calc(200% / ${pieces})`;
+  return {
+    "background-image": `linear-gradient(to ${to}, ${a} 50%, ${b} 50%)`,
+    "background-size": to === "bottom" ? `100% ${pair}` : `${pair} 100%`,
+    "background-repeat": to === "bottom" ? "repeat-y" : "repeat-x",
+  };
+};
+
 const DIVISIONS = {
   // Vertical split: first on the dexter (viewer's left).
   "per-pale": (a, b) => layer(`linear-gradient(to right, ${a} 50%, ${b} 50%)`),
@@ -25,6 +36,21 @@ const DIVISIONS = {
   // Line from sinister chief to dexter base: first in the upper half.
   "per-bend-sinister": (a, b) => layer(`linear-gradient(to bottom right, ${a} 50%, ${b} 50%)`),
 
+  // Both diagonals, crossing at the centre like the saltire: first in chief and base.
+  // Gyronny's four tiles, with the top-right and bottom-left swapped.
+  "per-saltire": (a, b) => ({
+    "background-color": b,
+    "background-image": [
+      `linear-gradient(to bottom left, ${a} 50%, ${b} 50%)`,
+      `linear-gradient(to bottom right, ${a} 50%, ${b} 50%)`,
+      `linear-gradient(to bottom left, ${b} 50%, ${a} 50%)`,
+      `linear-gradient(to bottom right, ${b} 50%, ${a} 50%)`,
+    ].join(", "),
+    "background-size": "50% 50%",
+    "background-position": "left top, right top, right bottom, left bottom",
+    "background-repeat": "no-repeat",
+  }),
+
   // Quarters 1 and 4 (dexter chief, sinister base) are the first tincture.
   // Linear gradients rather than conic, which render jagged edges in some browsers.
   // With a fur, the bands can't overlap, or the fur's transparent half shows the band below.
@@ -50,6 +76,13 @@ const DIVISIONS = {
     "background-position": "left top, right top, right bottom, left bottom",
     "background-repeat": "no-repeat",
   }),
+
+  // Across the whole height, not through the fess point, so the shield's point clips the last bar.
+  barry: stripes("bottom", 6),
+  "barry-of-eight": stripes("bottom", 8),
+  "barry-of-ten": stripes("bottom", 10),
+  paly: stripes("right", 6),
+  "paly-of-eight": stripes("right", 8),
 };
 
 // A division's background rules as one { image, size, position, repeat } per layer.
@@ -108,6 +141,7 @@ export default plugin(({ addUtilities, theme }) => {
         utilities[`.${division}-${first}-${second}`] = {
           ...background(a, b),
           ...counterchange(background(b, a)),
+          "--field-first": a,
         };
       }
     }
@@ -121,9 +155,11 @@ export default plugin(({ addUtilities, theme }) => {
           [fur, tincture],
           [tincture, fur],
         ]) {
+          // Only a tincture can be "of the first"; a fur first leaves it unset.
           utilities[`.${division}-${first}-${second}`] = {
             ...withFur(division, first, second, theme),
             ...counterchange(withFur(division, second, first, theme)),
+            ...(!FURS[first] && { "--field-first": `var(--color-${first})` }),
           };
         }
       }

package/furs.js

@@ -11,7 +11,7 @@ const SPOT = [
 
 // A 5:6 tile, the shield's own shape, so whole tiles fill it: a spot at its centre, and quarters of one at each
 // corner that join up with the neighbouring tiles.
-const AT = [
+export const AT = [
   [25, 30],
   [0, 0],
   [50, 0],

package/grailwind.css

@@ -42,6 +42,19 @@
   syntax: "*";
   inherits: false;
 }
+/* A field's first tincture. The escutcheon copies it to --the-first, which inherits,
+ * so a canton's own field can't change it. */
+@property --field-first {
+  syntax: "*";
+  inherits: false;
+}
+/* A field's own bordure width, 0 without one. The shield copies it to --outer-inset, which
+ * inherits, so a canton can step out over the shield's bordure and not its own. */
+@property --bordure-inset {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
 
 /* ---------------------------------------------------------------------------
  * Tinctures
@@ -67,24 +80,35 @@
  * ------------------------------------------------------------------------- */
 @utility or {
   background-color: var(--color-or);
+  --field-first: var(--color-or);
 }
 @utility argent {
   background-color: var(--color-argent);
+  --field-first: var(--color-argent);
 }
 @utility gules {
   background-color: var(--color-gules);
+  --field-first: var(--color-gules);
 }
 @utility azure {
   background-color: var(--color-azure);
+  --field-first: var(--color-azure);
 }
 @utility vert {
   background-color: var(--color-vert);
+  --field-first: var(--color-vert);
 }
 @utility purpure {
   background-color: var(--color-purpure);
+  --field-first: var(--color-purpure);
 }
 @utility sable {
   background-color: var(--color-sable);
+  --field-first: var(--color-sable);
+}
+/* The field's first tincture, for charges and for a canton or inescutcheon field. */
+@utility of-the-first {
+  background-color: var(--the-first, transparent);
 }
 
 /* ---------------------------------------------------------------------------
@@ -96,6 +120,13 @@
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
+
+  /* On a shield, each part is a coat of its own: what's in it is placed, stacked and
+   * counterchanged within it. */
+  &:is(.escutcheon, .escutcheon *) > * {
+    position: relative;
+    contain: layout;
+  }
 }
 
 /* Per fess: split horizontally into chief / base. */
@@ -103,6 +134,12 @@
   display: grid;
   grid-auto-flow: row;
   grid-auto-rows: 1fr;
+
+  /* See per-pale. */
+  &:is(.escutcheon, .escutcheon *) > * {
+    position: relative;
+    contain: layout;
+  }
 }
 
 /* Quarterly: four quarters, numbered 1–4 across then down.
@@ -111,6 +148,18 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
+
+  /* Each quarter is a coat of its own, so it starts its own count. */
+  & > * {
+    --the-first: var(--field-first);
+    --outer-inset: 0px;
+  }
+
+  /* See per-pale. */
+  &:is(.escutcheon, .escutcheon *) > * {
+    position: relative;
+    contain: layout;
+  }
 }
 
 /* ---------------------------------------------------------------------------
@@ -120,8 +169,51 @@
 /* Bordure: a border in a given tincture, e.g. `bordure-or`. */
 @utility bordure-* {
   border-style: solid;
-  border-width: 0.75rem;
+  border-width: var(--bordure-width, 0.75rem);
   border-color: --value(--color-*);
+  --bordure-inset: var(--bordure-width, 0.75rem);
+}
+@utility bordure-of-the-first {
+  border-style: solid;
+  border-width: var(--bordure-width, 0.75rem);
+  border-color: var(--the-first, transparent);
+  --bordure-inset: var(--bordure-width, 0.75rem);
+}
+
+/* Inescutcheon: a shield a third as wide, centred on the fess point (50%, 45%),
+ * over everything else on the shield. As both are 5:6, it's a third as tall too. */
+@utility inescutcheon {
+  position: absolute;
+  z-index: 2;
+  width: 33%;
+  left: 33.5%;
+  top: 28.5%;
+  aspect-ratio: 5 / 6;
+  overflow: clip;
+  overflow-clip-margin: border-box;
+  border-radius: 0 0 50% 50% / 0 0 45% 45%;
+  box-shadow: 0 0 0 2px var(--color-sable);
+  contain: layout;
+  /* In proportion with the shield's own bordure. */
+  --bordure-width: 0.25rem;
+  --outer-inset: var(--bordure-inset);
+}
+
+/* Canton: a third of the shield each way in dexter chief, so a ninth of it, and
+ * 5:6 like the shield, so everything on it places as on a shield. Over every
+ * ordinary and charge, as a later addition to the arms, and over the bordure. */
+@utility canton {
+  position: absolute;
+  z-index: 2;
+  width: calc((100% + 2 * var(--outer-inset, 0px)) / 3);
+  left: calc(-1 * var(--outer-inset, 0px));
+  top: calc(-1 * var(--outer-inset, 0px));
+  aspect-ratio: 5 / 6;
+  /* Like the shield, so a chief on it surmounts its own bordure. */
+  overflow: clip;
+  overflow-clip-margin: border-box;
+  contain: layout;
+  --bordure-width: 0.25rem;
 }
 
 /* ---------------------------------------------------------------------------
@@ -132,11 +224,15 @@
 @utility escutcheon {
   position: relative;
   aspect-ratio: 5 / 6;
-  overflow: hidden;
+  /* At the border's edge, so a canton or chief can surmount the bordure. */
+  overflow: clip;
+  overflow-clip-margin: border-box;
   border-radius: 0 0 50% 50% / 0 0 45% 45%;
   box-shadow: 0 0 0 2px var(--color-sable);
   /* The containing block for counterchanged charges' fixed layers. */
   contain: layout;
+  --the-first: var(--field-first);
+  --outer-inset: var(--bordure-inset);
 }
 
 /* ---------------------------------------------------------------------------

package/ordinaries.js

@@ -2,13 +2,20 @@
  * Grailwind CSS: ordinaries, e.g. `fess-or`.
  */
 import plugin from "tailwindcss/plugin";
-import { BETWEEN, FURS, ON, TINCTURES } from "./data.js";
+import { BETWEEN, FURS, OF_THE_FIRST, ON, REVERSIBLE, TINCTURES, VOIDABLE } from "./data.js";
 import { furBackground } from "./furs.js";
 
 // prettier-ignore
 const ORDINARIES = {
   pale: [[35, 0], [65, 0], [65, 100], [35, 100]],
   fess: [[0, 30], [100, 30], [100, 60], [0, 60]],
+  // Bars that don't touch are one polygon, joined along the shield's dexter edge.
+  bar: [[0, 38], [100, 38], [100, 52], [0, 52]],
+  "two-bars": [[0, 27], [100, 27], [100, 39], [0, 39], [0, 51], [100, 51], [100, 63], [0, 63]],
+  "three-bars": [
+    [0, 20], [100, 20], [100, 30], [0, 30], [0, 40], [100, 40],
+    [100, 50], [0, 50], [0, 60], [100, 60], [100, 70], [0, 70],
+  ],
   bend: [[0, 0], [20, 0], [100, 80], [100, 100], [80, 100], [0, 20]],
   "bend-sinister": [[100, 0], [80, 0], [0, 80], [0, 100], [20, 100], [100, 20]],
   chevron: [[50, 25], [100, 75], [100, 95], [50, 45], [0, 95], [0, 75]],
@@ -25,7 +32,12 @@ const ORDINARIES = {
     [60, 55], [60, 100], [40, 100], [40, 55], [0, 15],
   ],
   chief: [[0, 0], [100, 0], [100, 30], [0, 30]],
+  pile: [[20, 0], [80, 0], [50, 85]],
 };
+// signedArea() follows the flip's winding, so the order stays.
+for (const ordinary of REVERSIBLE) {
+  ORDINARIES[`${ordinary}-reversed`] = ORDINARIES[ordinary].map(([x, y]) => [x, 100 - y]);
+}
 
 const num = (v) => +v.toFixed(3);
 const pct = (v) => (num(v) === 0 ? "0" : `${num(v)}%`);
@@ -34,9 +46,24 @@ const polygon = (vertices) => `polygon(${vertices.map(point).join(", ")})`;
 
 const PSEUDO = { chief: "&::after" };
 
+// The chief surmounts a bordure.
+const INSET = "var(--bordure-inset)";
+const OVER_BORDURE = {
+  "--bordure-inset": "inherit",
+  inset: `calc(-1 * ${INSET}) calc(-1 * ${INSET}) 0`,
+  padding: `${INSET} ${INSET} 0`,
+  "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);
+  return `${ox} ${y === 0 ? `calc(-1 * ${INSET})` : pct(y)}`;
+};
+
 // A y in % of the field, as % of the whole shield when a chief takes the top of it.
 const belowChief = (y) =>
   y === 100 ? "100%" : `calc(${num(y)}% + var(--field-top, 0%) * ${num(1 - y / 100)})`;
+const pointBelowChief = ([x, y]) => `${pct(x)} ${belowChief(y)}`;
 
 // Fimbriation: the ordinary's clip is widened and filled with the fimbriation
 // tincture, and the ordinary's own tincture is painted over it as gradient
@@ -64,15 +91,15 @@ const offsetLine = (a, b, outward, distance) => {
   return { n, c: n[0] * ax + n[1] * ay + distance };
 };
 
-// How far each vertex moves, in %, when fimbriated. Sides on the shield's edge
-// don't move, so their vertices slide along it.
-const widen = (vertices) => {
+// How far each vertex moves, in %, when the sides move out by `distance` (in by a negative one).
+// Sides on the shield's edge don't move, so their vertices slide along it.
+const widen = (vertices, distance = FIMBRIATION) => {
   const outward = Math.sign(signedArea(vertices));
   const count = vertices.length;
   const line = (i) => {
     const a = vertices[i];
     const b = vertices[(i + 1) % count];
-    return offsetLine(a, b, outward, onShieldEdge(a, b) ? 0 : FIMBRIATION);
+    return offsetLine(a, b, outward, onShieldEdge(a, b) ? 0 : distance);
   };
   return vertices.map((v, i) => {
     const p = line((i - 1 + count) % count);
@@ -84,6 +111,23 @@ const widen = (vertices) => {
   });
 };
 
+const rotate = (list, start) => [...list.slice(start), ...list.slice(0, start)];
+
+// The ordinary with a hole the shape of it shrunk by `distance`, cut with evenodd.
+const voidedPolygon = (vertices, distance, format = point) => {
+  const offsets = widen(vertices, -distance);
+  const inner = vertices.map(([x, y], i) => [x + offsets[i][0], y + offsets[i][1]]);
+  // Start and end at the shield's edge so we don't draw through it.
+  const edge = vertices.findIndex((v, i) => onShieldEdge(v, vertices[(i + 1) % vertices.length]));
+  if (edge === -1) {
+    throw new Error("a voided ordinary needs a side on the shield's edge");
+  }
+  const outerStr = [...rotate(vertices, edge), vertices[edge]].map(format).join(", ");
+  const innerStr = [...rotate(inner, edge), inner[edge]].map(format).join(", ");
+
+  return `polygon(evenodd, ${outerStr}, ${innerStr})`;
+};
+
 const shift = (v, d) =>
   num(d) === 0
     ? pct(v)
@@ -104,10 +148,19 @@ const widenedPolygon = (vertices) => {
 const S = 12;
 const band = (kind, from, to, tile) => ({ kind, from, to, tile });
 const stripe = (kind, from, to, tile) => ({ kind, from, to, tile, stripe: true });
+// Half a tile, split on its diagonal, as gradient stops: 0–50% or 50–100%. The one diagonal band
+// a tile that isn't square can take, as its diagonal isn't a line of constant x ± y.
+const half = (kind, end, tile) => ({ kind, tile, stops: end === "start" ? [0, 50] : [50, 100] });
+// A 2px strip down the centre, from the top to `bottom`, where two tiles meet mid-pixel and
+// would let the fimbriation show between them. Unsoftened, as it lies on its own tincture.
+const seam = (bottom) => ({ kind: "x", tile: [0, 0, 100, bottom], seam: true });
 // prettier-ignore
 const BANDS = {
   pale: [band("x", 35, 65)],
   fess: [band("y", 30, 60)],
+  bar: [band("y", 38, 52)],
+  "two-bars": [band("y", 27, 39), band("y", 51, 63)],
+  "three-bars": [band("y", 20, 30), band("y", 40, 50), band("y", 60, 70)],
   bend: [band("u-v", -20, 20)],
   "bend-sinister": [band("u+v", 80, 120)],
   chevron: [
@@ -127,7 +180,31 @@ const BANDS = {
     band("u+v", 85, 115),
     band("x", 40, 60, [0, 55, 100, 100]),
   ],
+  // Each slanted side is its tile's diagonal.
+  pile: [half("u-v", "end", [20, 0, 50, 85]), half("u+v", "start", [50, 0, 80, 85]), seam(83)],
+};
+
+// The bands upside down. A diagonal swaps kind, as x − y becomes x + (100 − y) − 100. A half's
+// stops stay: its 50% line is the flipped tile's other diagonal, which is the flipped side.
+const reverseBand = ({ kind, from, to, tile, ...rest }) => {
+  const layer = { ...rest, tile: tile && [tile[0], 100 - tile[3], tile[2], 100 - tile[1]] };
+  if (from === undefined) {
+    return { ...layer, kind: { "u-v": "u+v", "u+v": "u-v" }[kind] ?? kind };
+  }
+  switch (kind) {
+    case "x":
+      return { ...layer, kind, from, to };
+    case "y":
+      return { ...layer, kind, from: 100 - to, to: 100 - from };
+    case "u-v":
+      return { ...layer, kind: "u+v", from: from + 100, to: to + 100 };
+    case "u+v":
+      return { ...layer, kind: "u-v", from: from - 100, to: to - 100 };
+  }
 };
+for (const ordinary of REVERSIBLE) {
+  BANDS[`${ordinary}-reversed`] = BANDS[ordinary].map(reverseBand);
+}
 
 const DIRECTION = {
   x: "to right",
@@ -155,23 +232,24 @@ const stop = ({ kind, tile: [x0, y0, x1, y1] = [0, 0, 100, 100] }, value) => {
   }
 };
 
-// Soften each edge by a pixel, as hard gradient stops aren't antialiased.
+// Soften each edge by a pixel, as hard gradient stops aren't antialiased. A stop at 0 or 100% is
+// the tile's own edge, so it isn't softened.
 const gradient = (layer, colour) => {
-  const a = num(stop(layer, layer.from));
-  const b = num(stop(layer, layer.to));
-  return (
-    `linear-gradient(${DIRECTION[layer.kind]}, transparent calc(${a}% - 0.5px), ` +
-    `${colour} calc(${a}% + 0.5px) calc(${b}% - 0.5px), transparent calc(${b}% + 0.5px))`
-  );
+  if (layer.seam) {
+    return `linear-gradient(to right, transparent calc(50% - 1px), ${colour} 0 calc(50% + 1px), transparent 0)`;
+  }
+  const [a, b] = (layer.stops ?? [stop(layer, layer.from), stop(layer, layer.to)]).map(num);
+  const from =
+    a === 0 ? `${colour} 0` : `transparent calc(${a}% - 0.5px), ${colour} calc(${a}% + 0.5px)`;
+  const to = b === 100 ? "100%" : `calc(${b}% - 0.5px), transparent calc(${b}% + 0.5px)`;
+  return `linear-gradient(${DIRECTION[layer.kind]}, ${from} ${to})`;
 };
 
 const tilePosition = (start, size) => (size === 100 ? "0" : pct((start * 100) / (100 - size)));
 
-const bands = (layers, tincture) => ({
+const bands = (layers, colour) => ({
   "background-image": layers
-    .map((l) =>
-      gradient(l, l.stripe ? "var(--fimbriation, transparent)" : `var(--color-${tincture})`),
-    )
+    .map((l) => gradient(l, l.stripe ? "var(--fimbriation, transparent)" : colour))
     .join(", "),
   "background-size": layers
     .map(({ tile: [x0, y0, x1, y1] = [0, 0, 100, 100] }) => `${pct(x1 - x0)} ${pct(y1 - y0)}`)
@@ -189,6 +267,19 @@ const bands = (layers, tincture) => ({
 // box is shorter, so they are slightly squashed.
 const SCALLOP = 14;
 const SCALLOPS = { chevron: 10 };
+
+// A quarter of the ordinary's width, in real units. The pile tapers, so its is set by eye.
+// prettier-ignore
+const VOIDS = {
+  pale: 7.5, fess: 9, bar: 4.2, bend: 7.7, "bend-sinister": 7.7,
+  chevron: 3.8, cross: 5, saltire: 5.8, pall: 5, pile: 8,
+};
+for (const ordinary of REVERSIBLE) {
+  if (SCALLOPS[ordinary]) {
+    SCALLOPS[`${ordinary}-reversed`] = SCALLOPS[ordinary];
+  }
+  VOIDS[`${ordinary}-reversed`] = VOIDS[ordinary];
+}
 const DEPTH = 0.35;
 
 const at = ([x, y]) => point([(x * 100) / W, (y * 100) / H]);
@@ -236,14 +327,14 @@ const crossing = (a, v, b, first, second) => {
     : null;
 };
 
-const shape = (vertices, line, scallop) => {
+// `extend` moves the sides on the shield's edge out, as `outer` does; the lined sides stay put.
+const shape = (vertices, line, scallop, extend) => {
   const inward = signedArea(vertices) > 0 ? "ccw" : "cw";
   const pts = vertices.map(real);
+  const straight = vertices.map((v, i) => onShieldEdge(v, vertices[(i + 1) % vertices.length]));
   const edges = pts.map((a, i) => {
     const j = (i + 1) % pts.length;
-    return onShieldEdge(vertices[i], vertices[j])
-      ? [{ to: pts[j] }]
-      : line(a, pts[j], scallop, inward);
+    return straight[i] ? [{ to: pts[j] }] : line(a, pts[j], scallop, inward);
   });
 
   // Where arcs cross at a corner, e.g. a chevron engrailed's peak, end both at the
@@ -266,22 +357,41 @@ const shape = (vertices, line, scallop) => {
     }
   });
 
-  const commands = edges
-    .flat()
-    .map(({ to, r, sweep }) =>
+  const commands = edges.flatMap((edge, i) => {
+    const segments = edge.map(({ to, r, sweep }) =>
       r
         ? `arc to ${at(to)} of ${pct((r / W) * 100)} ${pct((r / H) * 100)} ${sweep}`
         : `line to ${at(to)}`,
     );
-  return `shape(from ${at(start)}, ${commands.join(", ")}, close)`;
+    if (!extend) {
+      return segments;
+    }
+    const outside = straight.at(i - 1);
+    if (straight[i]) {
+      const out = `line to ${extend(vertices[(i + 1) % vertices.length])}`;
+      return outside ? [out] : [`line to ${extend(vertices[i])}`, out];
+    }
+    return outside ? [`line to ${at(pts[i])}`, ...segments] : segments;
+  });
+  const from = extend ? extend(vertices[0]) : at(start);
+  return `shape(from ${from}, ${commands.join(", ")}, close)`;
 };
 
-const betweenVars = ({ size, points }) => {
+const betweenVars = ({ size, points, counts = {} }) => {
   const vars = { "--between-size": `${size}%` };
   points.forEach(([left, top], i) => {
     vars[`--between-${i + 1}-x`] = `${left}%`;
     vars[`--between-${i + 1}-y`] = `${top}%`;
   });
+  for (const [count, override] of Object.entries(counts)) {
+    if (override.size !== undefined) {
+      vars[`--between-${count}-size`] = `${override.size}%`;
+    }
+    override.points.forEach(([left, top], i) => {
+      vars[`--between-${count}-${i + 1}-x`] = `${left}%`;
+      vars[`--between-${count}-${i + 1}-y`] = `${top}%`;
+    });
+  }
   return vars;
 };
 
@@ -296,13 +406,46 @@ const onVars = ({ size, counts }) => {
   return vars;
 };
 
-export default plugin(({ addUtilities, theme }) => {
+// Every layout var an ordinary sets on its shield, for an inescutcheon or canton to reset.
+const layoutVars = () => {
+  const allVars = [];
+
+  for (const division of Object.values(BETWEEN)) {
+    const vars = betweenVars(division);
+    allVars.push(...Object.keys(vars));
+  }
+
+  for (const division of Object.values(ON)) {
+    const vars = onVars(division);
+    allVars.push(...Object.keys(vars));
+  }
+
+  const chiefVars = ["--field-top", "--chief-points-y", "--chief-points-size"];
+  allVars.push(...chiefVars);
+
+  return [...new Set(allVars)];
+};
+
+// Each tincture's class suffix and colour, and "of the first" (see --the-first in grailwind.css).
+const PAINTS = [
+  ...TINCTURES.map((tincture) => [tincture, `var(--color-${tincture})`]),
+  [OF_THE_FIRST, "var(--the-first, transparent)"],
+];
+
+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) > *":
+      Object.fromEntries(layoutVars().map((name) => [name, "initial"])),
+  });
+
   const utilities = {};
 
-  for (const tincture of TINCTURES) {
+  for (const [tincture, colour] of PAINTS) {
     utilities[`.fimbriated-${tincture}`] = {
       "--fimbriated": "1",
-      "--fimbriation": `var(--color-${tincture})`,
+      "--fimbriation": colour,
     };
   }
 
@@ -329,10 +472,23 @@ export default plugin(({ addUtilities, theme }) => {
   });
 
   for (const [ordinary, vertices] of Object.entries(ORDINARIES)) {
+    const chief = ordinary === "chief";
+    const placed = chief ? OVER_BORDURE : { inset: "var(--field-top, 0%) 0 0" };
+    const plain = chief
+      ? `polygon(${vertices.map(outer).join(", ")}) content-box`
+      : polygon(vertices);
+    // Browsers without shape() keep the straight polygon.
+    const lined = (line) => [
+      plain,
+      chief
+        ? `${shape(vertices, line, SCALLOP, outer)} content-box`
+        : shape(vertices, line, SCALLOPS[ordinary] ?? SCALLOP),
+    ];
+
     // Covers the whole shield, so the swapped field lines up with the real one,
     // and the clip moves the ordinary below any chief instead.
-    utilities[`.${ordinary}-counterchanged`] = ordinaryRules(ordinary, {
-      inset: "0",
+    const counterchanged = {
+      ...(chief ? OVER_BORDURE : { inset: "0" }),
       // Registered not to inherit, so a shield inside another can't pick up its swap.
       ...Object.fromEntries(
         ["color", "image", "size", "position", "repeat"].map((n) => [
@@ -345,55 +501,77 @@ export default plugin(({ addUtilities, theme }) => {
       "background-size": "var(--counterchange-size, auto)",
       "background-position": "var(--counterchange-position, 0 0)",
       "background-repeat": "var(--counterchange-repeat, repeat)",
-      "clip-path":
-        ordinary === "chief"
-          ? polygon(vertices)
-          : `polygon(${vertices.map(([x, y]) => `${pct(x)} ${belowChief(y)}`).join(", ")})`,
+      // 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(", ")})`,
     });
 
-    for (const tincture of TINCTURES) {
+    for (const [tincture, colour] of PAINTS) {
       utilities[`.${ordinary}-${tincture}`] = ordinaryRules(ordinary, {
-        inset: ordinary === "chief" ? "0" : "var(--field-top, 0%) 0 0",
+        ...placed,
         ...(BANDS[ordinary]
           ? {
               "--fimbriated": "inherit",
               "--fimbriation": "inherit",
-              "background-color": `var(--fimbriation, var(--color-${tincture}))`,
-              ...bands(BANDS[ordinary], tincture),
+              "background-color": `var(--fimbriation, ${colour})`,
+              ...bands(BANDS[ordinary], colour),
               "clip-path": widenedPolygon(vertices),
             }
           : {
-              "background-color": `var(--color-${tincture})`,
-              "clip-path": polygon(vertices),
+              "background-color": colour,
+              "clip-path": plain,
             }),
       });
-      // Not fimbriated. Browsers without shape() keep the straight polygon.
+      // Not fimbriated.
       for (const [name, line] of Object.entries(LINES)) {
         utilities[`.${ordinary}-${name}-${tincture}`] = ordinaryRules(ordinary, {
-          inset: ordinary === "chief" ? "0" : "var(--field-top, 0%) 0 0",
-          "background-color": `var(--color-${tincture})`,
-          "clip-path": [polygon(vertices), shape(vertices, line, SCALLOPS[ordinary] ?? SCALLOP)],
+          ...placed,
+          "background-color": colour,
+          "clip-path": lined(line),
         });
       }
     }
 
     // A plain polygon, without the fimbriation vars, so fimbriated-* can't reach a fur ordinary.
     for (const fur of Object.keys(FURS)) {
-      const pseudo = {
-        inset: ordinary === "chief" ? "0" : "var(--field-top, 0%) 0 0",
-        ...furBackground(fur, theme),
-      };
+      const pseudo = { ...placed, ...furBackground(fur, theme) };
       utilities[`.${ordinary}-${fur}`] = ordinaryRules(ordinary, {
         ...pseudo,
-        "clip-path": polygon(vertices),
+        "clip-path": plain,
       });
       for (const [name, line] of Object.entries(LINES)) {
         utilities[`.${ordinary}-${name}-${fur}`] = ordinaryRules(ordinary, {
           ...pseudo,
-          "clip-path": [polygon(vertices), shape(vertices, line, SCALLOPS[ordinary] ?? SCALLOP)],
+          "clip-path": lined(line),
         });
       }
     }
+
+    // Not fimbriated.
+    if (VOIDABLE.includes(ordinary)) {
+      const clip = voidedPolygon(vertices, VOIDS[ordinary]);
+      for (const [tincture, colour] of PAINTS) {
+        utilities[`.${ordinary}-voided-${tincture}`] = ordinaryRules(ordinary, {
+          ...placed,
+          "background-color": colour,
+          "clip-path": clip,
+        });
+      }
+      for (const fur of Object.keys(FURS)) {
+        utilities[`.${ordinary}-voided-${fur}`] = ordinaryRules(ordinary, {
+          ...placed,
+          ...furBackground(fur, theme),
+          "clip-path": clip,
+        });
+      }
+      utilities[`.${ordinary}-voided-counterchanged`] = ordinaryRules(ordinary, {
+        ...counterchanged,
+        "clip-path": voidedPolygon(vertices, VOIDS[ordinary], pointBelowChief),
+      });
+    }
   }
 
   addUtilities(utilities);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grailwind",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "scripts": {
     "build": "tailwindcss -i docs/app.css -o docs/site.css",
     "dev": "tailwindcss -i docs/app.css -o docs/site.css --watch",
@@ -16,13 +16,17 @@
     "tailwind",
     "heraldry",
     "blazon",
-    "css"
+    "css",
+    "coat-of-arms",
+    "coats-of-arms",
+    "tailwindcss-plugin",
+    "eslint"
   ],
   "author": "Paul Firmin",
   "license": "MIT",
   "description": "Heraldic blazon for Tailwind CSS: tinctures, divisions, ordinaries and charges",
   "devDependencies": {
-    "@grailwind/eslint-plugin": "^0.1.0-beta.0",
+    "@grailwind/eslint-plugin": "^0.1.0-beta.2",
     "@html-eslint/parser": "^0.67.0",
     "@tailwindcss/cli": "^4.3.3",
     "eslint": "^10.14.0",