grailwind 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -6,6 +6,50 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [0.7.0] - 2026-11-09
+
+### Added
+
+- `per-chevron-*`: a field divided along a chevron's centre line, the first
+  tincture in chief.
+- `bendy-*`, `bendy-sinister-*`, `chevronny-*` (each with `-of-eight-*`) and
+  `chequy-*`: six or eight pieces, or five squares by six.
+
+### Changed
+
+- `@grailwind/eslint-plugin` 0.1.0-beta.3 needs `grailwind` 0.7.x.
+
+### Fixed
+
+- On a shield, `quarterly` and two-part `per-fess` split at the fess point, as
+  the divisions do, not halfway down.
+- No seam down the centre of `per-saltire-*` at odd widths.
+
+## [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
@@ -113,7 +157,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.5.0...HEAD
+[Unreleased]: https://github.com/pafirmin/grailwind/compare/v0.7.0...HEAD
+[0.7.0]: https://github.com/pafirmin/grailwind/compare/v0.6.0...v0.7.0
+[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

package/README.md

@@ -57,17 +57,20 @@ tinctures replace Tailwind's colours entirely.
 - **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`, `barry-argent-azure` and more, or `per-pale`, `per-fess` and `quarterly` for
-  layout.
+  `gyronny-or-sable`, `barry-argent-azure`, `bendy-argent-gules`, `chequy-or-azure` and more, or
+  `per-pale`, `per-fess` and `quarterly` for layout.
 - **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` and more, arranged by
+- **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.
@@ -88,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",
@@ -143,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})`,
     };
   }
@@ -242,6 +285,22 @@ export default plugin(({ addUtilities, matchUtilities }) => {
     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

@@ -13,6 +13,7 @@ export const DIVISIONS = [
   "per-fess",
   "per-bend",
   "per-bend-sinister",
+  "per-chevron",
   "per-saltire",
   "quarterly",
   "gyronny",
@@ -21,8 +22,19 @@ export const DIVISIONS = [
   "barry-of-ten",
   "paly",
   "paly-of-eight",
+  "bendy",
+  "bendy-of-eight",
+  "bendy-sinister",
+  "bendy-sinister-of-eight",
+  "chevronny",
+  "chevronny-of-eight",
+  "chequy",
 ];
 
+// 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",
@@ -37,6 +49,7 @@ export const ORDINARIES = [
   "pall",
   "chief",
   "pile",
+  ...REVERSIBLE.map(reversed),
 ];
 
 export const CHARGES = [
@@ -47,6 +60,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.
@@ -61,6 +82,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"],
@@ -90,6 +126,7 @@ export const ARRANGEMENTS = [
   "in-bend-sinister",
   "in-chief",
   "in-base",
+  "semy",
 ];
 
 // Where charges go for "between", as [left%, top%], plus their size as % of width.
@@ -128,3 +165,28 @@ export const ON = {
   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

@@ -22,6 +22,57 @@ 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);
+})();
+
+// 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
+// corners don't show the first tincture again.
+const bendy = (to, pieces) => (a, b) => {
+  const stops = [];
+  for (let i = 0; i < pieces; i++) {
+    const start = i === 0 ? 0 : ((i * BENDY_VISIBLE * 100) / pieces).toFixed(2);
+    const end = i === pieces - 1 ? 100 : (((i + 1) * BENDY_VISIBLE * 100) / pieces).toFixed(2);
+    stops.push(`${i % 2 === 0 ? a : b} ${start}% ${end}%`);
+  }
+  return layer(`linear-gradient(to ${to}, ${stops.join(", ")})`);
+};
+
+// The direction of `to bottom right` on the shield (aspect-ratio 5 / 6 in grailwind.css), so
+// chevronny's lines run parallel to per chevron's, the field's diagonals.
+const CHEVRON_ANGLE = 180 - (Math.atan(6 / 5) * 180) / Math.PI;
+
+// A half box is 75% as long as the whole along this angle (45/sqrt(61) over 60/sqrt(61)).
+// Plain, the sinister half sits over a full-width dexter layer, which hides the centre seam.
+// With a fur the layers can't overlap, as the transparent stripes would show the layer below.
+const chevronny = (pieces) => (a, b, fur) => {
+  const stripe = (angle, length) =>
+    `repeating-linear-gradient(${angle}deg, ${a} 0 calc(${length}% / ${pieces}), ${b} 0 calc(${2 * length}% / ${pieces}))`;
+  const sinister = stripe(-CHEVRON_ANGLE, 100);
+
+  return fur
+    ? {
+        "background-image": [stripe(CHEVRON_ANGLE, 100), sinister].join(", "),
+        "background-size": "50% 100%",
+        "background-position": "left, right",
+        "background-repeat": "no-repeat",
+      }
+    : {
+        "background-image": [sinister, stripe(CHEVRON_ANGLE, 75)].join(", "),
+        "background-size": "50% 100%, 100% 100%",
+        "background-position": "right, left",
+        "background-repeat": "no-repeat",
+      };
+};
+
 const DIVISIONS = {
   // Vertical split: first on the dexter (viewer's left).
   "per-pale": (a, b) => layer(`linear-gradient(to right, ${a} 50%, ${b} 50%)`),
@@ -36,18 +87,39 @@ 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%)`),
 
+  "per-chevron": (a, b) =>
+    a === "transparent"
+      ? {
+          "background-image": [
+            `linear-gradient(to bottom right, ${a} 50%, ${b} 50%)`,
+            `linear-gradient(to bottom left, ${a} 50%, ${b} 50%)`,
+            `linear-gradient(${b}, ${b})`,
+          ].join(", "),
+          "background-size": "50% 50%, 50% 50%, 100% 15%",
+          "background-position": "left 70%, right 70%, bottom",
+          "background-repeat": "no-repeat",
+        }
+      : {
+          "background-image": [
+            `linear-gradient(to bottom right, ${a} 42.5%, transparent 42.5%)`,
+            `linear-gradient(to bottom left, ${a} 42.5%, ${b} 42.5%)`,
+          ].join(", "),
+        },
+
   // 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.
+  // Gyronny's four tiles, with the top-right and bottom-left swapped. Two strips under them fill
+  // the sub-pixel seam where the tiles meet: the first tincture down, the second across.
   "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%)`,
+      `linear-gradient(${a}, ${a})`,
+      `linear-gradient(${b}, ${b})`,
     ].join(", "),
-    "background-size": "50% 50%",
-    "background-position": "left top, right top, right bottom, left bottom",
+    "background-size": "50% 50%, 50% 50%, 50% 50%, 50% 50%, 2px 100%, 100% 2px",
+    "background-position": "left top, right top, right bottom, left bottom, center, center",
     "background-repeat": "no-repeat",
   }),
 
@@ -83,22 +155,42 @@ const DIVISIONS = {
   "barry-of-ten": stripes("bottom", 10),
   paly: stripes("right", 6),
   "paly-of-eight": stripes("right", 8),
+
+  // Bendy has the first tincture in the sinister chief corner, bendy sinister in the dexter.
+  bendy: bendy("bottom left", 6),
+  "bendy-of-eight": bendy("bottom left", 8),
+  "bendy-sinister": bendy("bottom right", 6),
+  "bendy-sinister-of-eight": bendy("bottom right", 8),
+
+  // The first tincture in the chief corners.
+  chevronny: chevronny(6),
+  "chevronny-of-eight": chevronny(8),
+
+  // 5 across and 6 down, the first tincture in the dexter chief square. Conic starts at the top.
+  // The repeat must be explicit, as with stripes.
+  chequy: (a, b) => ({
+    "background-image": `conic-gradient(${b} 0 25%, ${a} 0 50%, ${b} 0 75%, ${a} 0)`,
+    "background-size": "40% calc(100% / 3)",
+    "background-repeat": "repeat",
+  }),
 };
 
 // A division's background rules as one { image, size, position, repeat } per layer.
 const toLayers = (rules) => {
-  return rules["background-image"].split(/, (?=linear-gradient)/).map((gradient, i) => {
-    const size = (rules["background-size"] ?? "100% 100%").split(", ");
-    const position = (rules["background-position"] ?? "0 0").split(", ");
-    const repeat = (rules["background-repeat"] ?? "no-repeat").split(", ");
-
-    return {
-      image: gradient,
-      size: size[i % size.length],
-      position: position[i % position.length],
-      repeat: repeat[i % repeat.length],
-    };
-  });
+  return rules["background-image"]
+    .split(/, (?=(?:repeating-)?(?:linear|conic)-gradient)/)
+    .map((gradient, i) => {
+      const size = (rules["background-size"] ?? "100% 100%").split(", ");
+      const position = (rules["background-position"] ?? "0 0").split(", ");
+      const repeat = (rules["background-repeat"] ?? "no-repeat").split(", ");
+
+      return {
+        image: gradient,
+        size: size[i % size.length],
+        position: position[i % position.length],
+        repeat: repeat[i % repeat.length],
+      };
+    });
 };
 
 // A division with one fur: the fur's part is left transparent, over the fur's own layers.

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

@@ -120,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. */
@@ -127,6 +134,20 @@
   display: grid;
   grid-auto-flow: row;
   grid-auto-rows: 1fr;
+
+  /* On a shield, two parts split at the fess point, FESS_POINT in divisions.js.
+   * More parts stay equal. */
+  &:is(.escutcheon, .escutcheon *) {
+    &:has(> :last-child:nth-child(2)) {
+      grid-template-rows: 45fr 55fr;
+    }
+
+    /* See per-pale. */
+    & > * {
+      position: relative;
+      contain: layout;
+    }
+  }
 }
 
 /* Quarterly: four quarters, numbered 1–4 across then down.
@@ -141,6 +162,17 @@
     --the-first: var(--field-first);
     --outer-inset: 0px;
   }
+
+  /* On a shield, split at the fess point, as per-fess. */
+  &:is(.escutcheon, .escutcheon *) {
+    grid-template-rows: 45fr 55fr;
+
+    /* See per-pale. */
+    & > * {
+      position: relative;
+      contain: layout;
+    }
+  }
 }
 
 /* ---------------------------------------------------------------------------

package/ordinaries.js

@@ -2,7 +2,7 @@
  * Grailwind CSS: ordinaries, e.g. `fess-or`.
  */
 import plugin from "tailwindcss/plugin";
-import { BETWEEN, FURS, OF_THE_FIRST, 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
@@ -34,6 +34,10 @@ const ORDINARIES = {
   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)}%`);
@@ -59,6 +63,7 @@ const outer = ([x, 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
@@ -86,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);
@@ -106,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)
@@ -162,6 +184,28 @@ const BANDS = {
   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",
   y: "to bottom",
@@ -223,6 +267,19 @@ const bands = (layers, colour) => ({
 // 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]);
@@ -376,10 +433,11 @@ const PAINTS = [
 ];
 
 export default plugin(({ addBase, addUtilities, theme }) => {
-  // Unset on an inescutcheon or canton, so it can't inherit its shield's layout. In the base
-  // layer, so an ordinary on it still sets its own.
+  // 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": Object.fromEntries(layoutVars().map((name) => [name, "initial"])),
+    ".inescutcheon, .canton, :is(.escutcheon, .escutcheon *):is(.quarterly, .per-pale, .per-fess) > *":
+      Object.fromEntries(layoutVars().map((name) => [name, "initial"])),
   });
 
   const utilities = {};
@@ -429,7 +487,7 @@ export default plugin(({ addBase, addUtilities, theme }) => {
 
     // 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, {
+    const counterchanged = {
       ...(chief ? OVER_BORDURE : { inset: "0" }),
       // Registered not to inherit, so a shield inside another can't pick up its swap.
       ...Object.fromEntries(
@@ -445,9 +503,10 @@ export default plugin(({ addBase, addUtilities, theme }) => {
       "background-repeat": "var(--counterchange-repeat, repeat)",
       // The swapped field's tiles would wrap into the bordure's strips, so the bordure shows there.
       ...(chief && { "background-clip": "content-box" }),
-      "clip-path": chief
-        ? plain
-        : `polygon(${vertices.map(([x, y]) => `${pct(x)} ${belowChief(y)}`).join(", ")})`,
+    };
+    utilities[`.${ordinary}-counterchanged`] = ordinaryRules(ordinary, {
+      ...counterchanged,
+      "clip-path": chief ? plain : `polygon(${vertices.map(pointBelowChief).join(", ")})`,
     });
 
     for (const [tincture, colour] of PAINTS) {
@@ -490,6 +549,29 @@ export default plugin(({ addBase, addUtilities, theme }) => {
         });
       }
     }
+
+    // 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.5.0",
+  "version": "0.7.0",
   "scripts": {
     "build": "tailwindcss -i docs/app.css -o docs/site.css",
     "dev": "tailwindcss -i docs/app.css -o docs/site.css --watch",
@@ -9,7 +9,8 @@
     "dev:watch": "tailwindcss -i docs/app.css -o docs/site.css --watch=always & python3 -m http.server ${PORT:-8000} -d docs",
     "lint": "eslint .",
     "format": "prettier --write .",
-    "format:check": "prettier --check ."
+    "format:check": "prettier --check .",
+    "prepare": "husky"
   },
   "keywords": [
     "tailwindcss",
@@ -26,10 +27,12 @@
   "license": "MIT",
   "description": "Heraldic blazon for Tailwind CSS: tinctures, divisions, ordinaries and charges",
   "devDependencies": {
-    "@grailwind/eslint-plugin": "^0.1.0-beta.1",
+    "@grailwind/eslint-plugin": "^0.1.0-beta.3",
     "@html-eslint/parser": "^0.67.0",
     "@tailwindcss/cli": "^4.3.3",
     "eslint": "^10.14.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.6.0",
     "playwright": "~1.64.1",
     "prettier": "^3.9.10",
     "tailwindcss": "^4.3.3"
@@ -71,5 +74,8 @@
   },
   "bugs": {
     "url": "https://github.com/pafirmin/grailwind/issues"
+  },
+  "lint-staged": {
+    "*": "prettier --write --ignore-unknown"
   }
 }