grailwind 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -6,6 +6,42 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [0.8.1] - 2026-11-13
+
+### Fixed
+
+- Counterchanged charges `on` a counterchanged ordinary showed the ordinary's
+  swapped field and vanished. They now show the field's own tinctures.
+- `chevronny-*` in a part of a split shield (a `per-pale` half, a `per-fess`
+  chief) broke at the centre line. It now follows the part, as `per-chevron`
+  does, and the arms meet.
+
+## [0.8.0] - 2026-11-12
+
+### Added
+
+- Wavy ordinaries, e.g. `fess-wavy-or` and `three-bars-wavy-argent`.
+- Indented and embattled ordinaries, e.g. `chief-indented-azure` and
+  `cross-embattled-gules`. A fess, bar, bend or chevron embattled has
+  battlements on its upper edge only. The chevron, cross, saltire, pall and
+  pile take them with hand-drawn corners, as do the wavy chevron and pall.
+
+### Changed
+
+- Ordinary proportions move towards Fox-Davies: the chevron is wider (a fifth
+  of the shield), the cross's limbs are equal, the saltire is wider and crosses
+  at the fess point (as does `per-saltire-*`), and the pile is wider. The
+  pall's arms and foot are equal, and its arms meet above the fess point.
+- The engrailed cross and pile are hand-drawn, with clean corners and tips.
+- `@grailwind/eslint-plugin` 0.1.0-beta.4 needs `grailwind` 0.8.x.
+
+### Fixed
+
+- `gyronny-*` crosses at the fess point, as `per-saltire-*` does, so a
+  counterchanged saltire lines up with it.
+- Charges `on` an engrailed or indented ordinary are smaller, and charges
+  `between` a lined bend, pall, or embattled chevron move clear of its edge.
+
 ## [0.7.0] - 2026-11-09
 
 ### Added
@@ -157,7 +193,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.7.0...HEAD
+[Unreleased]: https://github.com/pafirmin/grailwind/compare/v0.8.1...HEAD
+[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
 [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

package/README.md

@@ -61,7 +61,7 @@ tinctures replace Tailwind's colours entirely.
   `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,
+  `fess-engrailed-or` and the like for an engrailed, invected, wavy, indented or embattled 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

package/charges.js

@@ -149,17 +149,28 @@ const inheritCounterchange = Object.fromEntries(
   COUNTERCHANGE.map((n) => [`--counterchange-${n}`, "inherit"]),
 );
 
+// What a charge on a counterchanged ordinary is counterchanged against: the field's own
+// tinctures, handed down by the ordinary to `on` containers only.
+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.
 const counterchanged = {
   ...inheritCounterchange,
+  ...inheritOnCounterchange,
   "&::before": {
     content: '""',
     position: "fixed",
     inset: "0",
     ...inheritCounterchange,
+    ...inheritOnCounterchange,
     ...Object.fromEntries(
-      COUNTERCHANGE.map((n) => [`background-${n}`, `var(--counterchange-${n})`]),
+      COUNTERCHANGE.map((n) => [
+        `background-${n}`,
+        `var(--on-counterchange-${n}, var(--counterchange-${n}))`,
+      ]),
     ),
   },
 };
@@ -279,7 +290,8 @@ export default plugin(({ addUtilities, matchUtilities }) => {
       };
     }
   }
-  utilities[".on"] = on;
+  // Nested, so Tailwind keeps these apart from the per-count rules above.
+  utilities[".on"] = { "&": inheritOnCounterchange, ...on };
 
   for (const name of Object.keys(POINTS)) {
     utilities[`.in-${name}`] = { ".charges > &": atPoint(name) };

package/data.js

@@ -80,7 +80,10 @@ export const ROUNDELS = {
 };
 
 // Lines of partition for an ordinary's edge, e.g. `fess-engrailed-or`.
-export const LINES = ["engrailed", "invected"];
+export const LINES = ["engrailed", "invected", "wavy", "indented", "embattled"];
+
+// The ordinaries that take a line: every one, the cornered ones drawn by hand (064).
+export const lineOrdinaries = () => ORDINARIES;
 
 // Ordinaries that can be voided, e.g. `cross-voided-argent`.
 export const VOIDABLE = [
@@ -143,15 +146,18 @@ export const BETWEEN = {
   "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]] } } },
+    6: { size: 12, points: [[18, 14], [50, 11], [82, 14], [40, 72], [60, 72], [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]], counts: {
-    2: { points: [[14, 50], [86, 50]] } } },
+  saltire: { size: 16, points: [[50, 13], [14, 45], [86, 45], [50, 84]], counts: {
+    2: { points: [[14, 45], [86, 45]] } } },
   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]] },
 };
 
+// `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.
 // prettier-ignore
 export const ON = {
@@ -159,10 +165,10 @@ export const ON = {
   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: 12, counts: { 1: [[50, 36]], 3: [[20, 65], [50, 36], [80, 65]] } },
+  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: 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]] } },
+  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]] } },
 };
 
@@ -187,6 +193,45 @@ for (const ordinary of REVERSIBLE) {
 // 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]] } },
+  points: [[26, 76], [74, 76], [50, 30]],
+  counts: { 6: { size: 12, points: [[26, 78], [50, 89], [74, 78], [40, 28], [60, 28], [50, 16]] } },
+};
+
+// `between` overrides where a line's edge hits a charge, by ordinary and line; the rest falls
+// back to the plain ordinary's. The sinister bend and the reversed pall are mirrored from these.
+// prettier-ignore
+export const BETWEEN_LINED = {
+  bend: {
+    engrailed: { points: [[70, 26], [24, 72]] },
+    invected: { points: [[70, 26], [24, 72]] },
+    wavy: { points: [[70, 26], [24, 72]] },
+    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]] } } },
+  },
+  "chevron-reversed": {
+    embattled: { points: [[26, 76], [74, 76], [50, 24]] },
+  },
+  pall: {
+    invected: { points: [[50, 8], [18, 56], [82, 56]] },
+    wavy: { points: [[50, 8], [18, 56], [82, 56]] },
+    indented: { points: [[50, 8], [18, 56], [82, 56]] },
+    embattled: { points: [[50, 8], [18, 56], [82, 56]] },
+  },
 };
+
+const mirrorX = (points) => points.map(([x, y]) => [100 - x, y]);
+const mirrorLined = (entry, flip) => ({
+  ...entry,
+  ...(entry.points && { points: flip(entry.points) }),
+  ...(entry.counts && {
+    counts: mapValues(entry.counts, (count) => ({ ...count, points: flip(count.points) })),
+  }),
+});
+BETWEEN_LINED["bend-sinister"] = mapValues(BETWEEN_LINED.bend, (entry) =>
+  mirrorLined(entry, mirrorX),
+);
+BETWEEN_LINED["pall-reversed"] = mapValues(BETWEEN_LINED.pall, (entry) =>
+  mirrorLined(entry, mirror),
+);

package/divisions.js

@@ -5,8 +5,12 @@ import plugin from "tailwindcss/plugin";
 import { FURS, TINCTURES } from "./data.js";
 import { furLayers } from "./furs.js";
 
-// Horizontal lines of partition pass through the fess point, as the cross and fess do.
-const FESS_POINT = "45%";
+// The fess point, in % down the shield: horizontal lines of partition pass through it, as the
+// cross and fess do.
+const FESS_POINT = 45;
+
+// The background-position that puts a tile FESS_POINT% high just below the fess point.
+const BASE_TILES = ((100 * FESS_POINT) / (100 - FESS_POINT)).toFixed(2);
 
 // Each division maps (first, second) tincture colours to background rules.
 const layer = (image) => ({ "background-image": image });
@@ -46,31 +50,36 @@ const bendy = (to, pieces) => (a, b) => {
   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.
+// Four tiles, each half the box, so the lines follow the box's own proportions: a part of the
+// shield is the whole one squeezed to fit, as per chevron's are. A tile's lines run parallel to its
+// diagonal, dexter tiles `to bottom right` and sinister ones `to bottom left`.
+// The period is 300/n of a tile's gradient line, which keeps a stripe's width on the whole shield.
+// A lower tile starts half a gradient line further on, so its lines continue the upper tile's.
+// Plain, the dexter and lower tiles overlap the others by 1px, hiding the seams. With a fur the
+// transparent stripes would show the tile beneath, so they butt.
 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 period = 300 / pieces;
+  const lowerStart = (period - (50 % period)) % period;
+  const stripe = (to, start) =>
+    `repeating-linear-gradient(to bottom ${to}, ${a} ${start}% ${start + period / 2}%, ${b} 0 ${start + period}%)`;
+  const overlap = fur ? "50%" : "calc(50% + 1px)";
+
+  return {
+    "background-image": [
+      stripe("left", 0),
+      stripe("left", lowerStart),
+      stripe("right", 0),
+      stripe("right", lowerStart),
+    ].join(", "),
+    "background-size": [
+      `50% 50%`,
+      `50% ${overlap}`,
+      `${overlap} 50%`,
+      `${overlap} ${overlap}`,
+    ].join(", "),
+    "background-position": "right top, right bottom, left top, left bottom",
+    "background-repeat": "no-repeat",
+  };
 };
 
 const DIVISIONS = {
@@ -78,7 +87,8 @@ const DIVISIONS = {
   "per-pale": (a, b) => layer(`linear-gradient(to right, ${a} 50%, ${b} 50%)`),
 
   // Horizontal split through the fess point: first in chief.
-  "per-fess": (a, b) => layer(`linear-gradient(to bottom, ${a} ${FESS_POINT}, ${b} ${FESS_POINT})`),
+  "per-fess": (a, b) =>
+    layer(`linear-gradient(to bottom, ${a} ${FESS_POINT}%, ${b} ${FESS_POINT}%)`),
 
   // Line from dexter chief to sinister base: first in the upper half.
   // With a corner-to-corner gradient, the 50% line joins the other two corners.
@@ -106,9 +116,11 @@ const DIVISIONS = {
           ].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. Two strips under them fill
-  // the sub-pixel seam where the tiles meet: the first tincture down, the second across.
+  // Both lines of the saltire, from the top corners through the fess point to the flanks at 90%:
+  // first in chief and base. Four tiles, each half the width and 45% high, with each half-line
+  // as a tile's diagonal, and the base below them in the first tincture, 2px taller so Chromium
+  // leaves no seam where it meets them. Two strips under the tiles fill the sub-pixel seam where
+  // they meet: the first tincture down, the second across.
   "per-saltire": (a, b) => ({
     "background-image": [
       `linear-gradient(to bottom left, ${a} 50%, ${b} 50%)`,
@@ -116,10 +128,24 @@ const DIVISIONS = {
       `linear-gradient(to bottom left, ${b} 50%, ${a} 50%)`,
       `linear-gradient(to bottom right, ${b} 50%, ${a} 50%)`,
       `linear-gradient(${a}, ${a})`,
+      `linear-gradient(${a}, ${a})`,
       `linear-gradient(${b}, ${b})`,
     ].join(", "),
-    "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-size": [
+      ...Array(4).fill(`50% ${FESS_POINT}%`),
+      `100% calc(${100 - 2 * FESS_POINT}% + 2px)`,
+      "2px 100%",
+      "100% 2px",
+    ].join(", "),
+    "background-position": [
+      "left top",
+      "right top",
+      `right ${BASE_TILES}%`,
+      `left ${BASE_TILES}%`,
+      "bottom",
+      "center",
+      `center ${FESS_POINT}%`,
+    ].join(", "),
     "background-repeat": "no-repeat",
   }),
 
@@ -128,14 +154,15 @@ const DIVISIONS = {
   // With a fur, the bands can't overlap, or the fur's transparent half shows the band below.
   quarterly: (a, b, fur) => ({
     "background-image": `linear-gradient(to right, ${a} 50%, ${b} 50%), linear-gradient(to right, ${b} 50%, ${a} 50%)`,
-    "background-size": `100% ${FESS_POINT}, 100% ${fur ? `calc(100% - ${FESS_POINT})` : "100%"}`,
+    "background-size": `100% ${FESS_POINT}%, 100% ${fur ? `calc(100% - ${FESS_POINT}%)` : "100%"}`,
     "background-position": fur ? "top, bottom" : "top, top",
     "background-repeat": "no-repeat",
   }),
 
-  // Gyronny of eight: each quarter split corner to corner. The first tincture
-  // is in the gyron just dexter of the top line. The background colour fills
-  // any sub-pixel seam between quarters.
+  // Gyronny of eight: quarterly and per saltire, all through the fess point. The first tincture
+  // is in the gyron just dexter of the top line. Per saltire's four tiles, then the base below
+  // them split per pale, 2px taller so no seam shows. The background colour fills any sub-pixel
+  // seam between tiles.
   gyronny: (a, b) => ({
     "background-color": b,
     "background-image": [
@@ -143,9 +170,19 @@ const DIVISIONS = {
       `linear-gradient(to bottom right, ${b} 50%, ${a} 50%)`,
       `linear-gradient(to bottom left, ${b} 50%, ${a} 50%)`,
       `linear-gradient(to bottom right, ${a} 50%, ${b} 50%)`,
+      `linear-gradient(to right, ${b} 50%, ${a} 50%)`,
+    ].join(", "),
+    "background-size": [
+      ...Array(4).fill(`50% ${FESS_POINT}%`),
+      `100% calc(${100 - 2 * FESS_POINT}% + 2px)`,
+    ].join(", "),
+    "background-position": [
+      "left top",
+      "right top",
+      `right ${BASE_TILES}%`,
+      `left ${BASE_TILES}%`,
+      "bottom",
     ].join(", "),
-    "background-size": "50% 50%",
-    "background-position": "left top, right top, right bottom, left bottom",
     "background-repeat": "no-repeat",
   }),
 
@@ -193,21 +230,70 @@ const toLayers = (rules) => {
     });
 };
 
-// A division with one fur: the fur's part is left transparent, over the fur's own layers.
-const withFur = (division, first, second, theme) => {
+/**
+ * A division with one fur: the fur's part is left transparent, over the fur's own layers.
+ * @param {string} division The division's name.
+ * @param {string} first The first tincture or fur.
+ * @param {string} second The second tincture or fur; one of the two is a fur.
+ * @param {Function} theme Tailwind's theme function, for the spots' colour.
+ * @returns {{image: string, size: string, position: string, repeat: string}[]} The layers, top first.
+ */
+const furredLayers = (division, first, second, theme) => {
   const fur = FURS[first] ? first : second;
   const paint = (t) => (t === fur ? "transparent" : `var(--color-${t})`);
-  const all = [
+  return [
     ...toLayers(DIVISIONS[division](paint(first), paint(second), true)),
     ...furLayers(fur, theme),
   ];
-  return Object.fromEntries(
+};
+
+/**
+ * Layers joined into one comma-separated value per property.
+ * @param {{image: string, size: string, position: string, repeat: string}[]} layers
+ * @param {string} prefix The property prefix, such as "background" or "--field".
+ * @returns {Object<string, string>} `<prefix>-image`, `-size`, `-position` and `-repeat`.
+ */
+const joinLayers = (layers, prefix) =>
+  Object.fromEntries(
     ["image", "size", "position", "repeat"].map((p) => [
-      `background-${p}`,
-      all.map((layer) => layer[p]).join(", "),
+      `${prefix}-${p}`,
+      layers.map((layer) => layer[p]).join(", "),
     ]),
   );
-};
+
+/**
+ * A division with one fur, as background rules.
+ * @param {string} division The division's name.
+ * @param {string} first The first tincture or fur.
+ * @param {string} second The second tincture or fur; one of the two is a fur.
+ * @param {Function} theme Tailwind's theme function, for the spots' colour.
+ * @returns {Object<string, string>} The four background-* properties.
+ */
+const withFur = (division, first, second, theme) =>
+  joinLayers(furredLayers(division, first, second, theme), "background");
+
+/**
+ * The field's own layers as --field-* variables, for charges on a counterchanged ordinary.
+ * A background colour becomes a last opaque layer, as the variables carry no colour.
+ * @param {{image: string, size: string, position: string, repeat: string}[]} layers
+ * @param {string} [color] The division's background-color, if it has one.
+ * @returns {Object<string, string>} The four --field-* variables.
+ */
+const field = (layers, color) =>
+  joinLayers(
+    color
+      ? [
+          ...layers,
+          {
+            image: `linear-gradient(${color}, ${color})`,
+            size: "100% 100%",
+            position: "0 0",
+            repeat: "no-repeat",
+          },
+        ]
+      : layers,
+    "--field",
+  );
 
 // The field with its tinctures swapped, for counterchanged ordinaries to paint.
 const counterchange = (rules) =>
@@ -230,8 +316,10 @@ export default plugin(({ addUtilities, theme }) => {
 
         const a = `var(--color-${first})`;
         const b = `var(--color-${second})`;
+        const unswapped = background(a, b);
         utilities[`.${division}-${first}-${second}`] = {
-          ...background(a, b),
+          ...unswapped,
+          ...field(toLayers(unswapped), unswapped["background-color"]),
           ...counterchange(background(b, a)),
           "--field-first": a,
         };
@@ -247,9 +335,11 @@ export default plugin(({ addUtilities, theme }) => {
           [fur, tincture],
           [tincture, fur],
         ]) {
+          const layers = furredLayers(division, first, second, theme);
           // Only a tincture can be "of the first"; a fur first leaves it unset.
           utilities[`.${division}-${first}-${second}`] = {
-            ...withFur(division, first, second, theme),
+            ...joinLayers(layers, "background"),
+            ...field(layers),
             ...counterchange(withFur(division, second, first, theme)),
             ...(!FURS[first] && { "--field-first": `var(--color-${first})` }),
           };

package/grailwind.css

@@ -42,6 +42,42 @@
   syntax: "*";
   inherits: false;
 }
+@property --field-image {
+  syntax: "*";
+  inherits: false;
+}
+@property --field-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --field-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --field-repeat {
+  syntax: "*";
+  inherits: false;
+}
+@property --on-counterchange-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --on-counterchange-image {
+  syntax: "*";
+  inherits: false;
+}
+@property --on-counterchange-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --on-counterchange-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --on-counterchange-repeat {
+  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 {