Fix @ccprop typo hiding four CSS properties from the docs

manifests/manifest.json

@@ -46,6 +46,22 @@
         {
           "name": "--thumb-border-size",
           "description": "The width of the range slider handle border."
+        },
+        {
+          "name": "--focus-width",
+          "description": "The width of the range slider handle's focus outline."
+        },
+        {
+          "name": "--focus-color",
+          "description": "The color of the range slider handle's focus outline."
+        },
+        {
+          "name": "--divider-width",
+          "description": "The width of the divider shown between the two images."
+        },
+        {
+          "name": "--divider-color",
+          "description": "The color of the divider shown between the two images."
         }
       ]
     }

manifests/manifest.md

@@ -19,6 +19,10 @@ Our ImageCompare web component class
 
 | Property                   | Description                                      |
 |----------------------------|--------------------------------------------------|
+| `--divider-color`          | The color of the divider shown between the two images. |
+| `--divider-width`          | The width of the divider shown between the two images. |
+| `--focus-color`            | The color of the range slider handle's focus outline. |
+| `--focus-width`            | The width of the range slider handle's focus outline. |
 | `--thumb-background-color` | The background color of the range slider handle. |
 | `--thumb-background-image` | The background image of the range slider handle. |
 | `--thumb-border-color`     | The color of the range slider handle border.     |

src/index.js

@@ -154,11 +154,11 @@ template.innerHTML = /*html*/`
  * @cssprop --thumb-border-color - The color of the range slider handle border.
  * @cssprop --thumb-border-size - The width of the range slider handle border.
  * 
- * @ccprop --focus-width - The width of the range slider handle's focus outline.
- * @ccprop --focus-color - The color of the range slider handle's focus outline.
+ * @cssprop --focus-width - The width of the range slider handle's focus outline.
+ * @cssprop --focus-color - The color of the range slider handle's focus outline.
  *
- * @ccprop --divider-width - The width of the divider shown between the two images.
- * @ccprop --divider-color - The color of the divider shown between the two images.
+ * @cssprop --divider-width - The width of the divider shown between the two images.
+ * @cssprop --divider-color - The color of the divider shown between the two images.
  */
 class ImageCompare extends HTMLElement {
   constructor() {

test/build/manifests.test.js

@@ -44,14 +44,25 @@ describe("npm run document", () => {
   // they can theme it. If the analyzer stops picking those tags up, the promise
   // silently disappears from the editor autocomplete that reads this manifest.
   it("documents every CSS custom property tagged in the source", () => {
-    const tagged = [...source.matchAll(/@cssprop\s+(--[\w-]+)/g)].map(
+    const tagged = [...source.matchAll(/@cssprop(?:erty)?\s+(--[\w-]+)/gi)].map(
       ([, name]) => name,
     );
     const documented = tag.cssProperties.map(({ name }) => name);
 
     expect(tagged.filter((name) => !documented.includes(name))).toEqual([]);
   });
 
+  // The test above can only check tags the analyzer would recognize, so a
+  // misspelled one is invisible to it — the property just quietly vanishes from
+  // the docs. `@cssprop` and `@cssproperty` are the two spellings that work.
+  it("spells every CSS property tag the way the analyzer expects", () => {
+    const misspelled = [...source.matchAll(/@(\w*prop\w*)/g)]
+      .map(([, name]) => name)
+      .filter((name) => !["cssprop", "cssproperty"].includes(name.toLowerCase()));
+
+    expect([...new Set(misspelled)]).toEqual([]);
+  });
+
   it("gives every documented item a description", () => {
     const undescribed = [...tag.attributes, ...tag.slots, ...tag.cssProperties]
       .filter(({ description }) => !description)