html-validate 10.5.0 → 10.7.0

package/dist/cjs/core.js

@@ -1216,7 +1216,9 @@ class MetaTable {
         );
       }
       for (const [key, value] of Object.entries(obj)) {
-        if (key === "$schema") continue;
+        if (key === "$schema") {
+          continue;
+        }
         this.addEntry(key, migrateElement(value));
       }
     } catch (err) {
@@ -1316,7 +1318,9 @@ class MetaTable {
    * global, e.g. to assign global attributes.
    */
   resolveGlobal() {
-    if (!this.elements["*"]) return;
+    if (!this.elements["*"]) {
+      return;
+    }
     const global = this.elements["*"];
     delete this.elements["*"];
     delete global.tagName;
@@ -1490,7 +1494,9 @@ function sliceSize(size, begin, end) {
   return Math.min(size, end - begin);
 }
 function sliceLocation(location, begin, end, wrap) {
-  if (!location) return null;
+  if (!location) {
+    return null;
+  }
   const size = sliceSize(location.size, begin, end);
   const sliced = {
     filename: location.filename,
@@ -2369,7 +2375,7 @@ class Selector {
 
 const TEXT_NODE_NAME = "#text";
 function isTextNode(node) {
-  return Boolean(node && node.nodeType === NodeType.TEXT_NODE);
+  return node?.nodeType === NodeType.TEXT_NODE;
 }
 class TextNode extends DOMNode {
   text;
@@ -2413,7 +2419,7 @@ var NodeClosed = /* @__PURE__ */ ((NodeClosed2) => {
   return NodeClosed2;
 })(NodeClosed || {});
 function isElementNode(node) {
-  return Boolean(node && node.nodeType === NodeType.ELEMENT_NODE);
+  return node?.nodeType === NodeType.ELEMENT_NODE;
 }
 function isInvalidTagName(tagName) {
   return tagName === "" || tagName === "*";
@@ -3709,6 +3715,7 @@ function interpolate(text, data) {
 
 const ajv$1 = new Ajv__default.default({ strict: true, strictTuples: true, strictTypes: true });
 ajv$1.addMetaSchema(ajvSchemaDraft);
+ajv$1.addKeyword(ajvRegexpKeyword);
 function getSchemaValidator(ruleId, properties) {
   const $id = `rule/${ruleId}`;
   const cached = ajv$1.getSchema($id);
@@ -3965,6 +3972,7 @@ class Rule {
    *
    * @internal
    */
+  /* eslint-disable-next-line @typescript-eslint/max-params -- technical debt */
   static validateOptions(cls, ruleId, jsonPath, options, filename, config) {
     if (!cls) {
       return;
@@ -4000,7 +4008,7 @@ class Rule {
   }
 }
 
-const defaults$y = {
+const defaults$z = {
   allowExternal: true,
   allowRelative: true,
   allowAbsolute: true,
@@ -4044,7 +4052,7 @@ class AllowedLinks extends Rule {
   allowRelative;
   allowAbsolute;
   constructor(options) {
-    super({ ...defaults$y, ...options });
+    super({ ...defaults$z, ...options });
     this.allowExternal = parseAllow(this.options.allowExternal);
     this.allowRelative = parseAllow(this.options.allowRelative);
     this.allowAbsolute = parseAllow(this.options.allowAbsolute);
@@ -4212,7 +4220,7 @@ class AllowedLinks extends Rule {
   }
 }
 
-const defaults$x = {
+const defaults$y = {
   accessible: true
 };
 function findByTarget(target, siblings) {
@@ -4242,7 +4250,7 @@ function getDescription$1(context) {
 }
 class AreaAlt extends Rule {
   constructor(options) {
-    super({ ...defaults$x, ...options });
+    super({ ...defaults$y, ...options });
   }
   static schema() {
     return {
@@ -4321,8 +4329,12 @@ class AriaHiddenBody extends Rule {
   }
 }
 
-const defaults$w = {
-  allowAnyNamable: false
+const defaults$x = {
+  allowAnyNamable: false,
+  elements: {
+    include: null,
+    exclude: null
+  }
 };
 const allowlist = /* @__PURE__ */ new Set([
   "main",
@@ -4365,7 +4377,26 @@ function isValidUsage(target, meta) {
 }
 class AriaLabelMisuse extends Rule {
   constructor(options) {
-    super({ ...defaults$w, ...options });
+    super({ ...defaults$x, ...options });
+  }
+  static schema() {
+    return {
+      allowAnyNamable: {
+        type: "boolean"
+      },
+      elements: {
+        type: "object",
+        properties: {
+          include: {
+            anyOf: [{ type: "array", items: { type: "string" } }, { type: "null" }]
+          },
+          exclude: {
+            anyOf: [{ type: "array", items: { type: "string" } }, { type: "null" }]
+          }
+        },
+        additionalProperties: false
+      }
+    };
   }
   documentation(context) {
     const valid = [
@@ -4423,6 +4454,9 @@ class AriaLabelMisuse extends Rule {
     if (!meta) {
       return;
     }
+    if (this.shouldIgnoreElement(target)) {
+      return;
+    }
     if (isValidUsage(target, meta)) {
       return;
     }
@@ -4447,6 +4481,9 @@ class AriaLabelMisuse extends Rule {
       });
     }
   }
+  shouldIgnoreElement(target) {
+    return isKeywordIgnored(this.options.elements, target.tagName, keywordPatternMatcher);
+  }
 }
 
 class ConfigError extends UserError {
@@ -4509,14 +4546,14 @@ class CaseStyle {
   }
 }
 
-const defaults$v = {
+const defaults$w = {
   style: "lowercase",
   ignoreForeign: true
 };
 class AttrCase extends Rule {
   style;
   constructor(options) {
-    super({ ...defaults$v, ...options });
+    super({ ...defaults$w, ...options });
     this.style = new CaseStyle(this.options.style, "attr-case");
   }
   static schema() {
@@ -4623,7 +4660,7 @@ const MATCH_TEXTAREA_DATA = /^[^]*?(?=<\/textarea)/;
 const MATCH_TEXTAREA_END = /^<(\/)(textarea)/;
 const MATCH_TITLE_DATA = /^[^]*?(?=<\/title)/;
 const MATCH_TITLE_END = /^<(\/)(title)/;
-const MATCH_DIRECTIVE = /^(<!--\s*\[html-validate-)([a-z0-9-]+)(\s*)(.*?)(]?\s*-->)/;
+const MATCH_DIRECTIVE = /^(<!--\s*\[?)(html-validate-)([a-z0-9-]+)(\s*)(.*?)(]?\s*-->)/;
 const MATCH_COMMENT = /^<!--([^]*?)-->/;
 const MATCH_CONDITIONAL = /^<!\[([^\]]*?)\]>/;
 class InvalidTokenError extends Error {
@@ -4921,7 +4958,7 @@ class AttrDelimiter extends Rule {
 }
 
 const DEFAULT_PATTERN = "[a-z0-9-:]+";
-const defaults$u = {
+const defaults$v = {
   pattern: DEFAULT_PATTERN,
   ignoreForeign: true
 };
@@ -4954,7 +4991,7 @@ function generateDescription(name, pattern) {
 class AttrPattern extends Rule {
   pattern;
   constructor(options) {
-    super({ ...defaults$u, ...options });
+    super({ ...defaults$v, ...options });
     this.pattern = generateRegexp(this.options.pattern);
   }
   static schema() {
@@ -5001,7 +5038,7 @@ class AttrPattern extends Rule {
   }
 }
 
-const defaults$t = {
+const defaults$u = {
   style: "auto",
   unquoted: false
 };
@@ -5067,7 +5104,7 @@ class AttrQuotes extends Rule {
     };
   }
   constructor(options) {
-    super({ ...defaults$t, ...options });
+    super({ ...defaults$u, ...options });
     this.style = parseStyle$3(this.options.style);
   }
   setup() {
@@ -5189,7 +5226,9 @@ class AttributeAllowedValues extends Rule {
       const doc = event.document;
       walk.depthFirst(doc, (node) => {
         const meta = node.meta;
-        if (!meta?.attributes) return;
+        if (!meta?.attributes) {
+          return;
+        }
         for (const attr of node.attributes) {
           if (Validator.validateAttribute(attr, meta.attributes)) {
             continue;
@@ -5221,13 +5260,13 @@ class AttributeAllowedValues extends Rule {
   }
 }
 
-const defaults$s = {
+const defaults$t = {
   style: "omit"
 };
 class AttributeBooleanStyle extends Rule {
   hasInvalidStyle;
   constructor(options) {
-    super({ ...defaults$s, ...options });
+    super({ ...defaults$t, ...options });
     this.hasInvalidStyle = parseStyle$2(this.options.style);
   }
   static schema() {
@@ -5249,9 +5288,13 @@ class AttributeBooleanStyle extends Rule {
       const doc = event.document;
       walk.depthFirst(doc, (node) => {
         const meta = node.meta;
-        if (!meta?.attributes) return;
+        if (!meta?.attributes) {
+          return;
+        }
         for (const attr of node.attributes) {
-          if (!this.isBoolean(attr, meta.attributes)) continue;
+          if (!this.isBoolean(attr, meta.attributes)) {
+            continue;
+          }
           if (attr.originalAttribute) {
             continue;
           }
@@ -5293,13 +5336,13 @@ function reportMessage$1(attr, style) {
   return "";
 }
 
-const defaults$r = {
+const defaults$s = {
   style: "omit"
 };
 class AttributeEmptyStyle extends Rule {
   hasInvalidStyle;
   constructor(options) {
-    super({ ...defaults$r, ...options });
+    super({ ...defaults$s, ...options });
     this.hasInvalidStyle = parseStyle$1(this.options.style);
   }
   static schema() {
@@ -5321,7 +5364,9 @@ class AttributeEmptyStyle extends Rule {
       const doc = event.document;
       walk.depthFirst(doc, (node) => {
         const meta = node.meta;
-        if (!meta?.attributes) return;
+        if (!meta?.attributes) {
+          return;
+        }
         for (const attr of node.attributes) {
           if (!allowsEmpty(attr, meta.attributes)) {
             continue;
@@ -5414,7 +5459,22 @@ class AttributeMisuse extends Rule {
   }
 }
 
+const patternNamesValues = [
+  "kebabcase",
+  "camelcase",
+  "underscore",
+  "snakecase",
+  "bem",
+  "tailwind"
+];
+const patternNames = new Set(patternNamesValues);
+function isNamedPattern(value) {
+  return typeof value === "string" && patternNames.has(value);
+}
 function parsePattern(pattern) {
+  if (pattern instanceof RegExp) {
+    return { regexp: pattern, description: pattern.toString() };
+  }
   switch (pattern) {
     case "kebabcase":
       return { regexp: /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/, description: pattern };
@@ -5432,7 +5492,21 @@ function parsePattern(pattern) {
         description: pattern
       };
     }
+    case "tailwind": {
+      return {
+        regexp: /^!?(?:[-a-z[]|\d+xl:)[\w\-:./\\[\]()#'&>,!=%]*$/,
+        description: "tailwind"
+      };
+    }
     default: {
+      if (pattern.startsWith("/") && pattern.endsWith("/")) {
+        const regexpSource = pattern.slice(1, -1);
+        const regexp2 = new RegExp(regexpSource);
+        return { regexp: regexp2, description: regexp2.toString() };
+      }
+      console.warn(
+        `Custom pattern "${pattern}" should be wrapped in forward slashes, e.g., "/${pattern}/". Support for unwrapped patterns is deprecated and will be removed in a future version.`
+      );
       const regexp = new RegExp(pattern);
       return { regexp, description: regexp.toString() };
     }
@@ -5440,27 +5514,49 @@ function parsePattern(pattern) {
 }
 
 function toArray$2(value) {
-  return Array.isArray(value) ? value : [value];
+  if (Array.isArray(value)) {
+    return value;
+  } else {
+    return [value];
+  }
+}
+function validateAllowedPatterns(patterns, allowedPatterns, ruleId) {
+  const extraneous = patterns.filter(isNamedPattern).filter((p) => !allowedPatterns.has(p));
+  if (extraneous.length > 0) {
+    const quote = (it) => `"${it}"`;
+    const disallowed = utils_naturalJoin.naturalJoin(extraneous.map(quote), "and");
+    const allowed = utils_naturalJoin.naturalJoin(Array.from(allowedPatterns, quote), "and");
+    throw new Error(
+      `Pattern ${disallowed} cannot be used with "${ruleId}". Allowed patterns: ${allowed}`
+    );
+  }
 }
 class BasePatternRule extends Rule {
   /** Attribute being tested */
   attr;
   /** Parsed configured patterns */
   patterns;
-  /**
-   * @param attr - Attribute holding the value.
-   * @param options - Rule options with defaults expanded.
-   */
-  constructor(attr, options) {
+  constructor({
+    ruleId,
+    attr,
+    options,
+    allowedPatterns
+  }) {
     super(options);
     const { pattern } = this.options;
     this.attr = attr;
-    this.patterns = toArray$2(pattern).map((it) => parsePattern(it));
+    const patterns = toArray$2(pattern);
+    validateAllowedPatterns(patterns, allowedPatterns, ruleId);
+    this.patterns = patterns.map((it) => parsePattern(it));
   }
   static schema() {
     return {
       pattern: {
-        oneOf: [{ type: "array", items: { type: "string" }, minItems: 1 }, { type: "string" }]
+        anyOf: [
+          { type: "array", items: { anyOf: [{ type: "string" }, { regexp: true }] }, minItems: 1 },
+          { type: "string" },
+          { regexp: true }
+        ]
       }
     };
   }
@@ -5494,12 +5590,18 @@ class BasePatternRule extends Rule {
   }
 }
 
-const defaults$q = {
+const defaults$r = {
   pattern: "kebabcase"
 };
 class ClassPattern extends BasePatternRule {
   constructor(options) {
-    super("class", { ...defaults$q, ...options });
+    super({
+      ruleId: "class-pattern",
+      attr: "class",
+      options: { ...defaults$r, ...options },
+      allowedPatterns: patternNames
+      // allow all patterns
+    });
   }
   static schema() {
     return BasePatternRule.schema();
@@ -5646,13 +5748,13 @@ class CloseOrder extends Rule {
   }
 }
 
-const defaults$p = {
+const defaults$q = {
   include: null,
   exclude: null
 };
 class Deprecated extends Rule {
   constructor(options) {
-    super({ ...defaults$p, ...options });
+    super({ ...defaults$q, ...options });
   }
   static schema() {
     return {
@@ -5806,12 +5908,12 @@ let NoStyleTag$1 = class NoStyleTag extends Rule {
   }
 };
 
-const defaults$o = {
+const defaults$p = {
   style: "uppercase"
 };
 class DoctypeStyle extends Rule {
   constructor(options) {
-    super({ ...defaults$o, ...options });
+    super({ ...defaults$p, ...options });
   }
   static schema() {
     return {
@@ -5839,13 +5941,13 @@ class DoctypeStyle extends Rule {
   }
 }
 
-const defaults$n = {
+const defaults$o = {
   style: "lowercase"
 };
 class ElementCase extends Rule {
   style;
   constructor(options) {
-    super({ ...defaults$n, ...options });
+    super({ ...defaults$o, ...options });
     this.style = new CaseStyle(this.options.style, "element-case");
   }
   static schema() {
@@ -5905,7 +6007,7 @@ class ElementCase extends Rule {
   }
 }
 
-const defaults$m = {
+const defaults$n = {
   pattern: "^[a-z][a-z0-9\\-._]*-[a-z0-9\\-._]*$",
   whitelist: [],
   blacklist: []
@@ -5913,7 +6015,7 @@ const defaults$m = {
 class ElementName extends Rule {
   pattern;
   constructor(options) {
-    super({ ...defaults$m, ...options });
+    super({ ...defaults$n, ...options });
     this.pattern = new RegExp(this.options.pattern);
   }
   static schema() {
@@ -5950,7 +6052,7 @@ class ElementName extends Rule {
         ...context.blacklist.map((cur) => `- ${cur}`)
       ];
     }
-    if (context.pattern !== defaults$m.pattern) {
+    if (context.pattern !== defaults$n.pattern) {
       return [
         `<${context.tagName}> is not a valid element name. This project is configured to only allow names matching the following regular expression:`,
         "",
@@ -6449,7 +6551,9 @@ class EmptyTitle extends Rule {
   setup() {
     this.on("tag:end", (event) => {
       const node = event.previous;
-      if (node.tagName !== "title") return;
+      if (node.tagName !== "title") {
+        return;
+      }
       switch (classifyNodeText(node)) {
         case TextClassification.DYNAMIC_TEXT:
         case TextClassification.STATIC_TEXT:
@@ -6465,7 +6569,7 @@ class EmptyTitle extends Rule {
   }
 }
 
-const defaults$l = {
+const defaults$m = {
   allowArrayBrackets: true,
   allowCheckboxDefault: true,
   shared: ["radio", "button", "reset", "submit"]
@@ -6525,7 +6629,7 @@ function getDocumentation(context) {
 }
 class FormDupName extends Rule {
   constructor(options) {
-    super({ ...defaults$l, ...options });
+    super({ ...defaults$m, ...options });
   }
   static schema() {
     return {
@@ -6684,7 +6788,7 @@ class FormDupName extends Rule {
   }
 }
 
-const defaults$k = {
+const defaults$l = {
   allowMultipleH1: false,
   minInitialRank: "h1",
   sectioningRoots: ["dialog", '[role="dialog"]', '[role="alertdialog"]']
@@ -6716,7 +6820,7 @@ class HeadingLevel extends Rule {
   sectionRoots;
   stack = [];
   constructor(options) {
-    super({ ...defaults$k, ...options });
+    super({ ...defaults$l, ...options });
     this.minInitialRank = parseMaxInitial(this.options.minInitialRank);
     this.sectionRoots = this.options.sectioningRoots.map((it) => new Compound(it));
     this.stack.push({
@@ -6770,7 +6874,9 @@ class HeadingLevel extends Rule {
   }
   onTagStart(event) {
     const level = extractLevel(event.target);
-    if (!level) return;
+    if (!level) {
+      return;
+    }
     const root = this.getCurrentRoot();
     if (!this.options.allowMultipleH1 && level === 1) {
       if (root.h1Count >= 1) {
@@ -6953,12 +7059,25 @@ class HiddenFocusable extends Rule {
   }
 }
 
-const defaults$j = {
+const defaults$k = {
   pattern: "kebabcase"
 };
+function exclude$1(set, ...values) {
+  const result = new Set(set);
+  for (const value of values) {
+    result.delete(value);
+  }
+  return result;
+}
 class IdPattern extends BasePatternRule {
   constructor(options) {
-    super("id", { ...defaults$j, ...options });
+    const allowedPatterns = exclude$1(patternNames, "tailwind");
+    super({
+      ruleId: "id-pattern",
+      attr: "id",
+      options: { ...defaults$k, ...options },
+      allowedPatterns
+    });
   }
   static schema() {
     return BasePatternRule.schema();
@@ -7262,7 +7381,9 @@ class InputMissingLabel extends Rule {
   }
 }
 function findLabelById(root, id) {
-  if (!id) return [];
+  if (!id) {
+    return [];
+  }
   return root.querySelectorAll(`label[for="${id}"]`);
 }
 function findLabelByParent(el) {
@@ -7276,13 +7397,13 @@ function findLabelByParent(el) {
   return [];
 }
 
-const defaults$i = {
+const defaults$j = {
   maxlength: 70
 };
 class LongTitle extends Rule {
   maxlength;
   constructor(options) {
-    super({ ...defaults$i, ...options });
+    super({ ...defaults$j, ...options });
     this.maxlength = this.options.maxlength;
   }
   static schema() {
@@ -7301,7 +7422,9 @@ class LongTitle extends Rule {
   setup() {
     this.on("tag:end", (event) => {
       const node = event.previous;
-      if (node.tagName !== "title") return;
+      if (node.tagName !== "title") {
+        return;
+      }
       const text = node.textContent;
       if (text.length > this.maxlength) {
         this.report(node, `title text cannot be longer than ${String(this.maxlength)} characters`);
@@ -7384,12 +7507,12 @@ class MapIdName extends Rule {
   }
 }
 
-const defaults$h = {
+const defaults$i = {
   allowLongDelay: false
 };
 class MetaRefresh extends Rule {
   constructor(options) {
-    super({ ...defaults$h, ...options });
+    super({ ...defaults$i, ...options });
   }
   documentation() {
     return {
@@ -7500,12 +7623,25 @@ class MultipleLabeledControls extends Rule {
   }
 }
 
-const defaults$g = {
+const defaults$h = {
   pattern: "camelcase"
 };
+function exclude(set, ...values) {
+  const result = new Set(set);
+  for (const value of values) {
+    result.delete(value);
+  }
+  return result;
+}
 class NamePattern extends BasePatternRule {
   constructor(options) {
-    super("name", { ...defaults$g, ...options });
+    const allowedPatterns = exclude(patternNames, "tailwind");
+    super({
+      ruleId: "name-pattern",
+      attr: "name",
+      options: { ...defaults$h, ...options },
+      allowedPatterns
+    });
   }
   static schema() {
     return BasePatternRule.schema();
@@ -7594,13 +7730,13 @@ class NoAbstractRole extends Rule {
   }
 }
 
-const defaults$f = {
+const defaults$g = {
   include: null,
   exclude: null
 };
 class NoAutoplay extends Rule {
   constructor(options) {
-    super({ ...defaults$f, ...options });
+    super({ ...defaults$g, ...options });
   }
   documentation(context) {
     return {
@@ -7866,7 +8002,7 @@ Omitted end tags can be ambigious for humans to read and many editors have troub
         return;
       }
       const parent = closed.parent;
-      const closedByParent = parent && parent.tagName === by.tagName;
+      const closedByParent = parent?.tagName === by.tagName;
       const closedByDocument = closedByParent && parent.isRootElement();
       const sameTag = closed.tagName === by.tagName;
       if (closedByDocument) {
@@ -7922,14 +8058,14 @@ class NoImplicitInputType extends Rule {
   }
 }
 
-const defaults$e = {
+const defaults$f = {
   include: null,
   exclude: null,
   allowedProperties: ["display"]
 };
 class NoInlineStyle extends Rule {
   constructor(options) {
-    super({ ...defaults$e, ...options });
+    super({ ...defaults$f, ...options });
   }
   static schema() {
     return {
@@ -8115,7 +8251,7 @@ class NoMultipleMain extends Rule {
   }
 }
 
-const defaults$d = {
+const defaults$e = {
   relaxed: false
 };
 const textRegexp = /([<>]|&(?![a-zA-Z0-9#]+;))/g;
@@ -8133,7 +8269,7 @@ const replacementTable = {
 class NoRawCharacters extends Rule {
   relaxed;
   constructor(options) {
-    super({ ...defaults$d, ...options });
+    super({ ...defaults$e, ...options });
     this.relaxed = this.options.relaxed;
   }
   static schema() {
@@ -8228,7 +8364,7 @@ class NoRedundantAriaLabel extends Rule {
           continue;
         }
         const label = document.querySelector(`label[for="${id}"]`);
-        if (!ariaLabel || !label || label.textContent.trim() !== ariaLabel.value) {
+        if (!ariaLabel || label?.textContent.trim() !== ariaLabel.value) {
           continue;
         }
         const message = "aria-label is redundant when label containing same text exists";
@@ -8313,13 +8449,13 @@ class NoRedundantRole extends Rule {
 }
 
 const xmlns = /^(.+):.+$/;
-const defaults$c = {
+const defaults$d = {
   ignoreForeign: true,
   ignoreXML: true
 };
 class NoSelfClosing extends Rule {
   constructor(options) {
-    super({ ...defaults$c, ...options });
+    super({ ...defaults$d, ...options });
   }
   static schema() {
     return {
@@ -8369,7 +8505,20 @@ function isRelevant(node, options) {
   return true;
 }
 
+const defaults$c = {
+  allowTemplate: true
+};
 class NoStyleTag extends Rule {
+  constructor(options) {
+    super({ ...defaults$c, ...options });
+  }
+  static schema() {
+    return {
+      allowTemplate: {
+        type: "boolean"
+      }
+    };
+  }
   documentation() {
     return {
       description: "Prefer to use external stylesheets with the `<link>` tag instead of inlining the styling.",
@@ -8377,9 +8526,13 @@ class NoStyleTag extends Rule {
     };
   }
   setup() {
+    const { allowTemplate } = this.options;
     this.on("tag:start", (event) => {
       const node = event.target;
       if (node.tagName === "style") {
+        if (allowTemplate && node.parent?.is("template")) {
+          return;
+        }
         this.report(node, "Use external stylesheet with <link> instead of <style> tag");
       }
     });
@@ -9286,7 +9439,7 @@ function getTextFromReference(document, id) {
   if (!id || id instanceof DynamicValue) {
     return id;
   }
-  const selector = `#${id}`;
+  const selector = generateIdSelector(id);
   const ref = document.querySelector(selector);
   if (ref) {
     return ref.textContent;
@@ -10047,6 +10200,46 @@ class ValidAutocomplete extends Rule {
   }
 }
 
+function isLabelable(target) {
+  const { meta } = target;
+  if (!meta) {
+    return true;
+  }
+  return Boolean(meta.labelable);
+}
+class ValidFor extends Rule {
+  documentation() {
+    return {
+      description: `The \`<label>\` \`for\` attribute must reference a labelable form control.`,
+      url: "https://html-validate.org/rules/valid-for.html"
+    };
+  }
+  setup() {
+    this.on("dom:ready", (event) => {
+      const { document } = event;
+      for (const node of document.querySelectorAll("label[for]")) {
+        const attr = node.getAttribute("for");
+        if (!isStaticAttribute(attr) || !attr.value) {
+          continue;
+        }
+        const selector = generateIdSelector(attr.value);
+        const target = document.querySelector(selector);
+        if (!target) {
+          continue;
+        }
+        if (isLabelable(target)) {
+          continue;
+        }
+        this.report({
+          node,
+          message: '<label> "for" attribute must reference a labelable form control',
+          location: attr.valueLocation
+        });
+      }
+    });
+  }
+}
+
 const defaults$4 = {
   relaxed: false
 };
@@ -10345,7 +10538,9 @@ class H36 extends Rule {
   setup() {
     this.on("tag:end", (event) => {
       const node = event.previous;
-      if (node.tagName !== "input") return;
+      if (node.tagName !== "input") {
+        return;
+      }
       if (node.getAttributeValue("type") !== "image") {
         return;
       }
@@ -10671,6 +10866,7 @@ const bundledRules = {
   "unique-landmark": UniqueLandmark,
   "unrecognized-char-ref": UnknownCharReference,
   "valid-autocomplete": ValidAutocomplete,
+  "valid-for": ValidFor,
   "valid-id": ValidID,
   "void-content": VoidContent,
   "void-style": VoidStyle,
@@ -11024,6 +11220,7 @@ const config$1 = {
     "unique-landmark": "error",
     "unrecognized-char-ref": "error",
     "valid-autocomplete": "error",
+    "valid-for": "error",
     "valid-id": ["error", { relaxed: false }],
     void: "off",
     "void-content": "error",
@@ -11071,6 +11268,7 @@ const config = {
     "script-element": "error",
     "unrecognized-char-ref": "error",
     "valid-autocomplete": "error",
+    "valid-for": "error",
     "valid-id": ["error", { relaxed: true }],
     "void-content": "error"
   }
@@ -11677,7 +11875,9 @@ class Config {
     }
     for (const plugin of plugins) {
       for (const [name, config] of Object.entries(plugin.configs ?? {})) {
-        if (!config) continue;
+        if (!config) {
+          continue;
+        }
         Config.validate(config, name);
         configs.set(`${plugin.name}:${name}`, config);
         if (plugin.name !== plugin.originalName) {
@@ -11978,7 +12178,7 @@ class EventHandler {
 }
 
 const name = "html-validate";
-const version = "10.5.0";
+const version = "10.7.0";
 const bugs = "https://gitlab.com/html-validate/html-validate/issues/new";
 
 function freeze(src) {
@@ -12029,6 +12229,7 @@ class Reporter {
       warningCount: sumWarnings(results)
     };
   }
+  /* eslint-disable-next-line @typescript-eslint/max-params -- technical debt */
   add(rule, message, severity, node, location, context) {
     if (!(location.filename in this.result)) {
       this.result[location.filename] = [];
@@ -12148,7 +12349,7 @@ class ParserError extends Error {
 }
 
 function isAttrValueToken(token) {
-  return Boolean(token && token.type === TokenType.ATTR_VALUE);
+  return token?.type === TokenType.ATTR_VALUE;
 }
 function svgShouldRetainTag(foreignTagName, tagName) {
   return foreignTagName === "svg" && ["title", "desc"].includes(tagName);
@@ -12494,7 +12695,7 @@ class Parser {
    *      ^^^          ^^^         ^^^    (null)   (null)
    */
   getAttributeValueLocation(token) {
-    if (!token || token.type !== TokenType.ATTR_VALUE || token.data[2] === "") {
+    if (token?.type !== TokenType.ATTR_VALUE || token.data[2] === "") {
       return null;
     }
     const quote = token.data[3];
@@ -12510,7 +12711,7 @@ class Parser {
    */
   getAttributeLocation(key, value) {
     const begin = key.location;
-    const end = value && value.type === TokenType.ATTR_VALUE ? value.location : void 0;
+    const end = value?.type === TokenType.ATTR_VALUE ? value.location : void 0;
     return {
       filename: begin.filename,
       line: begin.line,
@@ -12523,27 +12724,34 @@ class Parser {
    * @internal
    */
   consumeDirective(token) {
-    const [text, preamble, action, separator1, directive, postamble] = token.data;
-    if (!postamble.startsWith("]")) {
-      throw new ParserError(token.location, `Missing end bracket "]" on directive "${text}"`);
+    const [text, preamble, prefix, action, separator1, directive, postamble] = token.data;
+    const hasStartBracket = preamble.includes("[");
+    const hasEndBracket = postamble.startsWith("]");
+    if (hasStartBracket && !hasEndBracket) {
+      this.trigger("parse:error", {
+        location: sliceLocation(token.location, preamble.length - 1, -postamble.length),
+        message: `Missing end bracket "]" on directive "${text}"`
+      });
+      return;
     }
     const match = /^(.*?)(?:(\s*(?:--|:)\s*)(.*))?$/.exec(directive);
     if (!match) {
       throw new Error(`Failed to parse directive "${text}"`);
     }
     if (!isValidDirective(action)) {
-      throw new ParserError(token.location, `Unknown directive "${action}"`);
+      const begin = preamble.length;
+      const end = preamble.length + prefix.length + action.length;
+      this.trigger("parse:error", {
+        location: sliceLocation(token.location, begin, -text.length + end),
+        message: `Unknown directive "${action}"`
+      });
+      return;
     }
     const [, data, separator2, comment] = match;
-    const prefix = "html-validate-";
-    const actionOffset = preamble.length;
+    const actionOffset = preamble.length + prefix.length;
     const optionsOffset = actionOffset + action.length + separator1.length;
     const commentOffset = optionsOffset + data.length + (separator2 || "").length;
-    const location = sliceLocation(
-      token.location,
-      preamble.length - prefix.length - 1,
-      -postamble.length + 1
-    );
+    const location = sliceLocation(token.location, preamble.length - 1, -postamble.length + 1);
     const actionLocation = sliceLocation(
       token.location,
       actionOffset,
@@ -12625,7 +12833,9 @@ class Parser {
     while (!it.done) {
       const token = it.value;
       yield token;
-      if (token.type === search) return;
+      if (token.type === search) {
+        return;
+      }
       it = this.next(tokenStream);
     }
     throw new ParserError(
@@ -12788,6 +12998,9 @@ class Engine {
       parser.on("directive", (_2, event) => {
         this.processDirective(event, parser, directiveContext);
       });
+      parser.on("parse:error", (_2, event) => {
+        this.reportError("parser-error", event.message, event.location);
+      });
       try {
         parser.parseHtml(source);
       } catch (e) {
@@ -12985,7 +13198,9 @@ class Engine {
     const availableRules = {};
     for (const plugin of config.getPlugins()) {
       for (const [name, rule] of Object.entries(plugin.rules ?? {})) {
-        if (!rule) continue;
+        if (!rule) {
+          continue;
+        }
         availableRules[name] = rule;
       }
     }
@@ -13018,6 +13233,7 @@ class Engine {
   /**
    * Load and setup a rule using current config.
    */
+  /* eslint-disable-next-line @typescript-eslint/max-params -- technical debt */
   loadRule(ruleId, config, severity, options, parser, report) {
     const meta = config.getMetaTable();
     const rule = this.instantiateRule(ruleId, options);