@markuplint/rules 5.2.0 → 5.4.0

package/CHANGELOG.md

@@ -3,6 +3,54 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.4.0](https://github.com/markuplint/markuplint/compare/v5.3.0...v5.4.0) (2026-10-29)
+
+### Bug Fixes
+
+* **rules:** do not report descendant attributes that take part in a text alternative ([46002a7](https://github.com/markuplint/markuplint/commit/46002a75e06f877938d134ce0958a625e5d989d3)), closes [#4408](https://github.com/markuplint/markuplint/issues/4408)
+
+
+# [5.3.0](https://github.com/markuplint/markuplint/compare/v5.2.0...v5.3.0) (2026-10-21)
+
+### Bug Fixes
+
+* **github:** retry unreachable spec pages before failing the check ([02c7d35](https://github.com/markuplint/markuplint/commit/02c7d353037f9cf0c04bb11aa3c5827c129a7231))
+* make published packages loadable from require() and put types first ([723106f](https://github.com/markuplint/markuplint/commit/723106f51aac4e60dc02db2c1a894617368b0253)), closes [#4198](https://github.com/markuplint/markuplint/issues/4198)
+* **rules:** accept a pretender that stands for a component in permitted-contents ([0efc2c9](https://github.com/markuplint/markuplint/commit/0efc2c9b2ef423a9b9e72128f3d6e2eb4ba4dd22))
+* **rules:** apply a tag rule of permitted-contents to every spelling of a Vue component ([f3f96dc](https://github.com/markuplint/markuplint/commit/f3f96dcff5cbd514b3aeb55fc387297fa7af6f5a))
+* **rules:** apply the conditional contents of a tag rule to the component of a pretender ([df96f58](https://github.com/markuplint/markuplint/commit/df96f58af9be0ee20ca04f3cc22d17a681ba674e)), closes [#4352](https://github.com/markuplint/markuplint/issues/4352)
+* **rules:** check upper-case ARIA attributes as the DOM names them ([29eaf3b](https://github.com/markuplint/markuplint/commit/29eaf3bfbfd40dc74977f0940a83e6f90eb7ddc6))
+* **rules:** compare attribute names as the DOM does in the rules that list attributes ([51faee6](https://github.com/markuplint/markuplint/commit/51faee6f13a8f09f136438873991f0581071012a))
+* **rules:** do not count a self-referencing aria-labelledby as a naming source ([84efeb1](https://github.com/markuplint/markuplint/commit/84efeb136260bcf0dd7161b38d69a9fadccb7834)), closes [#4217](https://github.com/markuplint/markuplint/issues/4217)
+* **rules:** do not report a placeholder option whose value is not known ([edfc526](https://github.com/markuplint/markuplint/commit/edfc5262a9e784ed80ec0d1a5000f7ed55b94583)), closes [#32](https://github.com/markuplint/markuplint/issues/32)
+* **rules:** do not translate the suggested property name in no-unknown-attr ([bb22ae2](https://github.com/markuplint/markuplint/commit/bb22ae2e4a1ac5ef9b36e922892e8f608e363940))
+* **rules:** find a compat key by the name the DOM gives it, in any spelling ([a5b286b](https://github.com/markuplint/markuplint/commit/a5b286b57afba6ef7a33073e650b983df1d8cc46))
+* **rules:** fix case-sensitive attribute lookup, duplicate landmarks and raw text scan ([a98b850](https://github.com/markuplint/markuplint/commit/a98b850cd64f4a277e4fd65ff5b7bb20c170d38b)), closes [#4180](https://github.com/markuplint/markuplint/issues/4180)
+* **rules:** follow the spec's definition of the placeholder label option ([4797eec](https://github.com/markuplint/markuplint/commit/4797eec2f2b7a45d3ffdb251f2401f977327725a))
+* **rules:** judge loading and sizes of the img the same way in both directions ([9cdab16](https://github.com/markuplint/markuplint/commit/9cdab1618e923f6271dea95998c42fbe260848b5))
+* **rules:** keep ranking the other sources of a self-referencing aria-labelledby element ([33563fb](https://github.com/markuplint/markuplint/commit/33563fbc76e46d26562e230bec9d378a8d564e1b)), closes [#4251](https://github.com/markuplint/markuplint/issues/4251) [#4251](https://github.com/markuplint/markuplint/issues/4251) [#4250](https://github.com/markuplint/markuplint/issues/4250) [#4217](https://github.com/markuplint/markuplint/issues/4217)
+* **rules:** look attributes up in the spec as the DOM names them ([149d3fd](https://github.com/markuplint/markuplint/commit/149d3fd63b762ff334307977ec3059dc839ccbc3))
+* **rules:** name the spelling in the case-sensitive-attr-name report on foreign elements ([b63ebf4](https://github.com/markuplint/markuplint/commit/b63ebf4c0de648428dbf72220dda321e594b8728))
+* **rules:** order attributes and match ignoreFeatures keys as the DOM names them ([f955369](https://github.com/markuplint/markuplint/commit/f955369505bb3a7fc739c99cf8b32827a4e10e46))
+* **rules:** recognize sizes="auto" the way the spec defines it ([91cfae3](https://github.com/markuplint/markuplint/commit/91cfae3ef8fccc7d7139a3c523d9f7f1bc99c386))
+* **rules:** require the img after a source to allow auto-sizes, not only to load lazily ([9774217](https://github.com/markuplint/markuplint/commit/977421797466a13028f59228c8b40a521f3a6e82))
+* **rules:** skip case-sensitive-attr-name for case-sensitive languages ([238f011](https://github.com/markuplint/markuplint/commit/238f011b8393644057a6258cc5444101f3d18deb)), closes [#4229](https://github.com/markuplint/markuplint/issues/4229)
+* **rules:** skip class-naming when no pattern is configured ([7387c16](https://github.com/markuplint/markuplint/commit/7387c167dbb0a22e480924b556e1fae62635ffc4)), closes [#4202](https://github.com/markuplint/markuplint/issues/4202)
+* **rules:** skip no-redundant-accessible-name for a self-referencing aria-labelledby with aria-label ([a46715f](https://github.com/markuplint/markuplint/commit/a46715f0c46283709274cbf16d5484089236dec1)), closes [#4217](https://github.com/markuplint/markuplint/issues/4217) [#4250](https://github.com/markuplint/markuplint/issues/4250) [#4217](https://github.com/markuplint/markuplint/issues/4217)
+* **rules:** sort the props of a component in attr-order by the name as written ([a2d3b48](https://github.com/markuplint/markuplint/commit/a2d3b48c810b5800dbf718975d4758461656b588))
+* **rules:** tell the namespace of a component's prop by the name as written ([157f434](https://github.com/markuplint/markuplint/commit/157f434b9dc4bb0f51c3fb77b219f38ef4035dd8))
+* **selector:** match a prefixed attribute by its local name as well ([a9beb11](https://github.com/markuplint/markuplint/commit/a9beb112b87bf9ade372ede0fe0d7958d05027fc))
+* supersede no-input-file-value with no-disallowed-attr ([2450fa1](https://github.com/markuplint/markuplint/commit/2450fa11c6cd0c32271ccfaed237fbd3b4b31953))
+
+### Features
+
+* **github:** watch the spec passages that rules cite ([c0203d1](https://github.com/markuplint/markuplint/commit/c0203d14d9db3168d9720375c08edaeed2691aa0))
+
+### Performance Improvements
+
+* **rules:** guard debug logging in permitted-contents and attribute checks ([db3281e](https://github.com/markuplint/markuplint/commit/db3281e048cdecfae6a51cb50b3bfb2f19a73e5c))
+
+
 # [5.2.0](https://github.com/markuplint/markuplint/compare/v5.1.1...v5.2.0) (2026-10-13)
 
 ### Bug Fixes

package/CLAUDE.md

@@ -21,34 +21,25 @@ Repo-wide meta specs directly under `src/` (e.g. `mirrors-parse-error-codes.spec
 
 ### Categories
 
-| Category     | When to use                                               |
-| ------------ | --------------------------------------------------------- |
-| `valid`      | Test expects 0 violations                                 |
-| `invalid`    | Test expects 1+ violations                                |
-| `fix`        | Test checks `fixedCode` or auto-fix behavior              |
-| `parser`     | Test uses a non-default parser (Vue, React, Pug, etc.)    |
-| `issue-NNNN` | Regression test for a GitHub issue (use the issue number) |
+| Category     | When to use                                                       |
+| ------------ | ----------------------------------------------------------------- |
+| `valid`      | Test expects 0 violations                                         |
+| `invalid`    | Test expects 1+ violations                                        |
+| `fix`        | Test checks `fixedCode` or auto-fix behavior                      |
+| `parser`     | Test uses a non-default parser (Vue, React, Pug, etc.)            |
+| `debug`      | Test checks only debug-logging behavior (not `valid` / `invalid`) |
+| `issue-NNNN` | Regression test for a GitHub issue (use the issue number)         |
 
 ### Rules
 
 - IDs go on `test()` blocks only (not `describe()`)
 - Numbers are sequential per category per file, starting at `001`
 - Multiple tests for the same issue: `[rule-name-issue-NNNN-001]`, `[rule-name-issue-NNNN-002]`
+- The number is that of the issue whose behavior the test guards. A test added later for that behavior — by an issue that only asks for tests, or with a fix found while writing them — continues its numbers, next to its earlier tests
 - When adding a new test, assign the next available number in the appropriate category
+- An existing test whose assertion was flipped keeps its ID, category included (`.claude/rules/spec-files.md`)
 - Run `/list-rule-test` (or `node .claude/skills/list-rule-test/scripts/list-rule-test.mjs --no-id`) to check for missing IDs — the only expected hits are the exempt meta specs noted above
 
-## Sample identifiers in specs
-
-<!-- cspell:ignore myform mymap -->
-
-Sample `id` / `name` values in test markup must be kebab-case (`my-form`), suffixed with a digit
-(`form1`), or a plain dictionary word (`target`). Never a camelCase coinage (`myform`, `mymap`,
-`targetEl`): CSpell decomposes compound words only when every part is at least three characters,
-so a two-letter prefix glued to a word is looked up whole, misses the dictionary, and fails the
-lint — on the `dev` line the same one-line fix has been made in four separate PRs (#3826, #3831,
-#3833, #3932). The v6 line has no CSpell, so a coinage introduced there surfaces only once the
-branch merges somewhere that does.
-
 ## Writing a rule's README and `schema.json` description
 
 Both files feed the website build (`website/scripts/prebuild/rule-content.mts` injects the
@@ -72,6 +63,15 @@ turning the incorrect example into a copy of the correct one. Apply it to `READM
 The CI website check only runs when a PR already touches `website/`, so a new rule can land with a
 broken description and detonate in someone else's PR. Run `yarn site:build` before pushing.
 
+## Citing a specification
+
+A README, a source comment, `meta.ts` and `schema.json` cite the passage that justifies a rule. `yarn spec-citations` checks every citation against the live specification (what it checks and why: the module comment of `scripts/spec-citations/cli.ts`), and `scripts/spec-citations/citations-policy.spec.ts` holds the conventions below offline. After editing a citation, run `yarn spec-citations` (read-only) and fix what it reports. Its lock file is refreshed by the scheduled workflow's PR, never by hand.
+
+- Quote a spec sentence verbatim, as a blockquote in a README or as `>` lines in a source comment, and name its source: in a README the `Cite: [..](url)` line after the quote (`[..](url)より引用` in Japanese), in a comment an `@see` URL in the same comment. Never quote inline in double quotes: the monitor cannot check it. `[…]` marks what the quote leaves out.
+- Cite a section by its fragment. A `§4.10.7` beside the link is compared with the section the fragment is in; the number of an ancestor section is accepted.
+- `README.ja.md` cites the HTML Living Standard through its translation (`https://momdo.github.io/html/…`, the same page and anchor as the English README) and quotes the translation's own text. That text stays English where the translation is behind the original, and the monitor reports it once the translation catches up. For WCAG, the translation is waic.jp's.
+- Cite W3C specs at an edition-less URL (`https://w3c.github.io/accname/`, `https://w3c.github.io/aria/`, `https://www.w3.org/TR/WCAG/`, `https://www.w3.org/TR/html-aria/`). WCAG's Techniques and Understanding pages have no edition-less URL; cite the latest edition (`https://www.w3.org/WAI/WCAG22/…`). Not `w3c.github.io/html-aria/`: that is unrendered ReSpec source whose anchors exist only after a browser builds them.
+
 ## Assertion Convention
 
 When asserting reported violations in rule specs, use `toStrictEqual` with the exact violation object `{ severity, line, col, message, raw }`. Never loose or partial matchers for violation objects. (Assertions on other values — counts, fixed code strings, registry invariants — use whatever matcher fits.)

package/lib/aria-prop-requires-role/index.js

@@ -2,6 +2,7 @@ import { createRule, getComputedRole, ariaSpecs, getSpec } from '@markuplint/ml-
 import { ARIA_RECOMMENDED_VERSION } from '@markuplint/ml-spec';
 import { checkingNoGlobalProp } from '../wai-aria/checkings/no-global-prop.js';
 import { defaultOptions } from '../wai-aria/default-options.js';
+import { isAriaAttr } from '../helpers.js';
 import meta from './meta.js';
 export default createRule({
     meta,
@@ -13,7 +14,7 @@ export default createRule({
                 return;
             if (!elSpec.globalAttrs['#ARIAAttrs'])
                 return;
-            const propAttrs = el.attributes.filter(attr => /^aria-/i.test(attr.name));
+            const propAttrs = el.attributes.filter(attr => isAriaAttr(attr));
             if (propAttrs.length === 0)
                 return;
             const ariaVersion = el.rule.options?.version ?? document.ruleCommonSettings?.ariaVersion ?? ARIA_RECOMMENDED_VERSION;

package/lib/attr-check.js

@@ -22,7 +22,9 @@ export function attrCheck(t, name, value, isCustomRule, spec, allAttrNames) {
     }
     // Existence
     if (!spec) {
-        log('The "%s" attribute DOES\'NT EXIST in the spec', name);
+        if (log.enabled) {
+            log('The "%s" attribute DOES\'NT EXIST in the spec', name);
+        }
         const baseMessage = t('{0} is {1:c}', t('the "{0*}" {1}', name, 'attribute'), 'disallowed');
         const candidate = allAttrNames ? getCandidate(name, allAttrNames) : undefined;
         if (candidate) {
@@ -36,16 +38,6 @@ export function attrCheck(t, name, value, isCustomRule, spec, allAttrNames) {
             message: baseMessage,
         };
     }
-    const nameCaseSensitive = /[A-Z]/.test(spec.name);
-    if (nameCaseSensitive && name !== spec.name) {
-        log('The "%s" attribute name is unmatched in case-sensitive', name);
-        return {
-            invalidType: 'non-existent',
-            message: t('{0} is {1:c}', t('the "{0*}" {1}', name, 'attribute'), 'disallowed') +
-                t('. ') +
-                t('Did you mean "{0*}"?', spec.name),
-        };
-    }
     if (spec.noUse) {
         return {
             invalidType: 'disallowed-attr',
@@ -55,7 +47,9 @@ export function attrCheck(t, name, value, isCustomRule, spec, allAttrNames) {
     // Safety net: In normal flow, `isValidAttr()` resolves ConditionalAttributeType[]
     // before calling this function (#3598). This guard handles direct calls.
     if (isConditionalAttributeTypeArray(spec.type)) {
-        log('The "%s" attribute uses ConditionalAttributeType[] — unresolved, treating as valid', name);
+        if (log.enabled) {
+            log('The "%s" attribute uses ConditionalAttributeType[] — unresolved, treating as valid', name);
+        }
         return false;
     }
     const types = toNonNullableArrayFromItemOrArray(spec.type);

package/lib/attr-eligibility.d.ts

@@ -1,11 +1,11 @@
 import type { Translator } from '@markuplint/i18n';
 import type { PlainData } from '@markuplint/ml-config';
-import type { Element, RuleConfigValue } from '@markuplint/ml-core';
+import type { Attr, Element, RuleConfigValue } from '@markuplint/ml-core';
 import type { Attribute } from '@markuplint/ml-spec';
 /**
  * Result of resolving whether an attribute name is known to the spec and,
  * if so, whether it currently applies. Shared by `no-unknown-attr` (acts on
- * `unknown`/`case-mismatch`), `no-disallowed-attr` (acts on `no-use`/
+ * `unknown`), `no-disallowed-attr` (acts on `no-use`/
  * `condition-not-met`), and `no-invalid-attr-value` (acts on `ok`, using the
  * resolved `spec.type` for value-checking). Splitting this into one function
  * keeps the three rules' notion of "what the spec says about this name" in
@@ -16,9 +16,6 @@ export type AttrEligibility = {
 } | {
     readonly status: 'unknown';
     readonly candidate: string | undefined;
-} | {
-    readonly status: 'case-mismatch';
-    readonly expectedName: string;
 } | {
     readonly status: 'no-use';
 } | {
@@ -30,10 +27,20 @@ export type AttrEligibility = {
 /**
  * Resolves an attribute name against the element's `attrSpecs`, following
  * the same order the pre-split `invalid-attr` rule used: existence, then
- * case-sensitivity, then `noUse`, then `condition` (with
- * `ConditionalAttributeType[]` resolved to a concrete type first, per #3598).
+ * `noUse`, then `condition` (with `ConditionalAttributeType[]` resolved to a
+ * concrete type first).
+ *
+ * Whether a spelling is the name of a spec is up to the attribute, and the DOM decides it
+ * (`MLAttr#isNamedBy`): `viewbox` is `viewBox` where the HTML parser reads it, and is not where
+ * code sets the name. Ask with the attribute (`attr`); without it, `name` is a name of the spec
+ * and is looked up as written, which is what a rule does for the native attribute of an ARIA one.
+ *
+ * @param name - The attribute name (a name of the spec when `attr` is not given)
+ * @param node - The element
+ * @param attrSpecs - The specs of the attributes of the element
+ * @param attr - The attribute that is being resolved
  */
-export declare function resolveAttrEligibility<T extends RuleConfigValue, O extends PlainData>(name: string, node: Element<T, O>, attrSpecs: readonly Attribute[]): AttrEligibility;
+export declare function resolveAttrEligibility<T extends RuleConfigValue, O extends PlainData>(name: string, node: Element<T, O>, attrSpecs: readonly Attribute[], attr?: Attr<T, O>): AttrEligibility;
 /**
  * Formats the "did you mean" suffix shared by `no-unknown-attr`'s two typo
  * paths (spec-driven candidate, case-sensitivity mismatch).

package/lib/attr-eligibility.js

@@ -1,6 +1,6 @@
 import { isConditionalAttributeTypeArray } from '@markuplint/ml-spec';
 import { getCandidate } from '@markuplint/types';
-import { attrMatches, conditionDependsOnDynamicAttr } from './helpers.js';
+import { attrMatches, conditionDependsOnDynamicAttr, findAttrSpec, namespaceKeyOf } from './helpers.js';
 /**
  * Attribute namespaces that are exempt from spec-based name/eligibility
  * checking regardless of what `attrSpecs` says: `data-*` and `adapt-*` are
@@ -11,24 +11,33 @@ const EXEMPT_NAME_PATTERN = /^(?:data-.+|adapt-.+|aria-.+|role)$/;
 /**
  * Resolves an attribute name against the element's `attrSpecs`, following
  * the same order the pre-split `invalid-attr` rule used: existence, then
- * case-sensitivity, then `noUse`, then `condition` (with
- * `ConditionalAttributeType[]` resolved to a concrete type first, per #3598).
+ * `noUse`, then `condition` (with `ConditionalAttributeType[]` resolved to a
+ * concrete type first).
+ *
+ * Whether a spelling is the name of a spec is up to the attribute, and the DOM decides it
+ * (`MLAttr#isNamedBy`): `viewbox` is `viewBox` where the HTML parser reads it, and is not where
+ * code sets the name. Ask with the attribute (`attr`); without it, `name` is a name of the spec
+ * and is looked up as written, which is what a rule does for the native attribute of an ARIA one.
+ *
+ * @param name - The attribute name (a name of the spec when `attr` is not given)
+ * @param node - The element
+ * @param attrSpecs - The specs of the attributes of the element
+ * @param attr - The attribute that is being resolved
  */
 export function resolveAttrEligibility(name, 
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-node, attrSpecs) {
-    if (EXEMPT_NAME_PATTERN.test(name)) {
+node, attrSpecs, 
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+attr) {
+    // The name that the DOM gives the attribute is what a pattern of a namespace is tested against
+    if (EXEMPT_NAME_PATTERN.test(attr ? namespaceKeyOf(attr) : name)) {
         return { status: 'exempt' };
     }
-    let spec = attrSpecs.find(s => s.name.toLowerCase() === name.toLowerCase());
+    let spec = attr ? findAttrSpec(attrSpecs, attr) : attrSpecs.find(s => s.name === name);
     if (!spec) {
         const candidate = getCandidate(name, attrSpecs.map(s => s.name));
         return { status: 'unknown', candidate };
     }
-    const nameCaseSensitive = /[A-Z]/.test(spec.name);
-    if (nameCaseSensitive && name !== spec.name) {
-        return { status: 'case-mismatch', expectedName: spec.name };
-    }
     if (spec.noUse) {
         return { status: 'no-use' };
     }

package/lib/attr-order/index.js

@@ -1,4 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
+import { namespaceKeyOf } from '../helpers.js';
 import meta from './meta.js';
 function compareStrings(a, b) {
     if (a < b) {
@@ -57,15 +58,16 @@ eventAttrs) {
             return {
                 entryIndex,
                 order: 'alphabetical',
-                match: (name) => name === entry,
+                match: (attr) => attr.isNamedBy(entry),
             };
         }
         const order = entry.order ?? 'alphabetical';
         if (entry.name != null) {
+            const entryName = entry.name;
             return {
                 entryIndex,
                 order,
-                match: (name) => name === entry.name,
+                match: (attr) => attr.isNamedBy(entryName),
             };
         }
         if (entry.pattern != null) {
@@ -84,7 +86,8 @@ eventAttrs) {
             return {
                 entryIndex,
                 order,
-                match: (name) => re.test(name),
+                // The name as written: a pattern takes no flags, so it is not folded
+                match: (attr) => re.test(attr.name),
             };
         }
         if (entry.group != null) {
@@ -95,42 +98,42 @@ eventAttrs) {
                     return {
                         entryIndex,
                         order: groupOrder,
-                        match: (name) => globalAttrs.has(name),
+                        match: (attr) => globalAttrs.has(namespaceKeyOf(attr)),
                     };
                 }
                 case 'event': {
                     return {
                         entryIndex,
                         order: groupOrder,
-                        match: (name) => eventAttrs.has(name),
+                        match: (attr) => eventAttrs.has(namespaceKeyOf(attr)),
                     };
                 }
                 case 'aria': {
                     return {
                         entryIndex,
                         order: groupOrder,
-                        match: (name) => /^aria-.+$/.test(name),
+                        match: (attr) => /^aria-.+$/.test(namespaceKeyOf(attr)),
                     };
                 }
                 case 'role': {
                     return {
                         entryIndex,
                         order: groupOrder,
-                        match: (name) => name === 'role',
+                        match: (attr) => namespaceKeyOf(attr) === 'role',
                     };
                 }
                 case 'data': {
                     return {
                         entryIndex,
                         order: groupOrder,
-                        match: (name) => /^data-.+$/.test(name),
+                        match: (attr) => /^data-.+$/.test(namespaceKeyOf(attr)),
                     };
                 }
                 case 'spread': {
                     return {
                         entryIndex,
                         order: groupOrder,
-                        match: (_name, isSpread) => isSpread,
+                        match: (_attr, isSpread) => isSpread,
                     };
                 }
             }
@@ -144,9 +147,9 @@ eventAttrs) {
 }
 function matchEntry(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-compiledEntries, name, isSpread, fallbackIndex) {
+compiledEntries, attr, isSpread, fallbackIndex) {
     for (const entry of compiledEntries) {
-        if (entry.match(name, isSpread)) {
+        if (entry.match(attr, isSpread)) {
             return { entryIndex: entry.entryIndex, order: entry.order };
         }
     }
@@ -155,21 +158,21 @@ compiledEntries, name, isSpread, fallbackIndex) {
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 function compareWithinGroup(a, b, order) {
     if (order === 'alphabetical') {
-        return compareStrings(a.name, b.name);
+        return compareStrings(namespaceKeyOf(a.attr), namespaceKeyOf(b.attr));
     }
     if (order === 'source-order') {
         return a.index - b.index;
     }
     if (Array.isArray(order)) {
-        const ai = order.indexOf(a.name);
-        const bi = order.indexOf(b.name);
+        const ai = order.findIndex(name => a.attr.isNamedBy(name));
+        const bi = order.findIndex(name => b.attr.isNamedBy(name));
         const aIdx = ai === -1 ? order.length : ai;
         const bIdx = bi === -1 ? order.length : bi;
         if (aIdx !== bIdx) {
             return aIdx - bIdx;
         }
         if (ai === -1 && bi === -1) {
-            return compareStrings(a.name, b.name);
+            return compareStrings(namespaceKeyOf(a.attr), namespaceKeyOf(b.attr));
         }
         return 0;
     }
@@ -180,7 +183,7 @@ function sortAttrs(attrInfos,
 compiledEntries, alphabetical) {
     const fallbackIndex = compiledEntries.length;
     const tagged = attrInfos.map(info => {
-        const { entryIndex, order } = matchEntry(compiledEntries, info.name, info.isSpread, fallbackIndex);
+        const { entryIndex, order } = matchEntry(compiledEntries, info.attr, info.isSpread, fallbackIndex);
         return { info, entryIndex, order };
     });
     return tagged
@@ -190,7 +193,9 @@ compiledEntries, alphabetical) {
         }
         const isFallback = a.entryIndex === fallbackIndex;
         if (isFallback) {
-            return alphabetical ? compareStrings(a.info.name, b.info.name) : a.info.index - b.info.index;
+            return alphabetical
+                ? compareStrings(namespaceKeyOf(a.info.attr), namespaceKeyOf(b.info.attr))
+                : a.info.index - b.info.index;
         }
         return compareWithinGroup(a.info, b.info, a.order);
     })
@@ -246,6 +251,7 @@ export default createRule({
             const attrInfos = attrs.map((attr, i) => {
                 const nameNode = attr.nameNode;
                 return {
+                    attr,
                     name: attr.name,
                     index: i,
                     isSpread: nameNode == null,
@@ -257,7 +263,7 @@ export default createRule({
             });
             const sorted = isAlphabeticalOnly
                 ? alphabetical
-                    ? [...attrInfos].toSorted((a, b) => compareStrings(a.name, b.name))
+                    ? [...attrInfos].toSorted((a, b) => compareStrings(namespaceKeyOf(a.attr), namespaceKeyOf(b.attr)))
                     : attrInfos
                 : sortAttrs(attrInfos, compiledEntries, alphabetical);
             // Find first violation

package/lib/case-sensitive-attr-name/index.js

@@ -1,13 +1,19 @@
 import { createRule, getAttrSpecs } from '@markuplint/ml-core';
+import { findAttrSpec } from '../helpers.js';
 import meta from './meta.js';
 export default createRule({
     meta: meta,
     defaultSeverity: 'warning',
     defaultValue: 'lower',
     async verify({ document, report, t }) {
+        // JSX props (`onClick`, `suppressHydrationWarning`) are JavaScript identifiers,
+        // not case-insensitive HTML attribute names; lowercasing them breaks the app.
+        if (document.attrNameCaseSensitive) {
+            return;
+        }
         await document.walkOn('Attr', attr => {
             const el = attr.ownerElement;
-            if (el.isForeignElement || el.elementType !== 'html') {
+            if (el.elementType !== 'html') {
                 return;
             }
             const value = attr.rule.value;
@@ -24,11 +30,24 @@ export default createRule({
                 return;
             }
             const name = attr.name;
-            if (attrSpecs) {
-                const spec = attrSpecs.find(spec => spec.name === name);
-                if (spec && spec.caseSensitive) {
-                    return;
+            const spec = attrSpecs ? findAttrSpec(attrSpecs, attr) : undefined;
+            if (el.isForeignElement) {
+                // What the browser has for the name is the spelling of the spec, whatever the option says.
+                if (spec && spec.name !== name) {
+                    const nameNode = attr.nameNode;
+                    report({
+                        scope: attr,
+                        line: nameNode?.startLine,
+                        col: nameNode?.startCol,
+                        raw: nameNode?.raw,
+                        message: t(`{0} ${ms} be {1}`, t('the "{0*}" {1}', name, 'attribute'), `"${spec.name}"`),
+                        fix: nameNode ? fixer => fixer.replaceText(nameNode, spec.name) : undefined, // eslint-disable-line @typescript-eslint/strict-boolean-expressions
+                    });
                 }
+                return;
+            }
+            if (spec?.caseSensitive) {
+                return;
             }
             if (deny.test(name)) {
                 const nameNode = attr.nameNode;

package/lib/class-naming/index.js

@@ -9,6 +9,12 @@ export default createRule({
     async verify({ document, report, t }) {
         await document.walkOn('Element', el => {
             const classPatterns = toNoEmptyStringArrayFromStringOrArray(el.rule.value).filter(className => !!className && typeof className === 'string');
+            // No pattern means the rule is disabled for this element (`null` is
+            // documented as "disable"); without this every class name would be
+            // reported against an empty pattern list. See #4202.
+            if (classPatterns.length === 0) {
+                return;
+            }
             const attrs = el.getAttributeToken('class');
             for (const attr of attrs) {
                 if (attr.isDynamicValue) {

package/lib/debug.d.ts

@@ -1,4 +1,11 @@
 import debug from 'debug';
 export type Log = debug.Debugger;
-/** Enable by setting `DEBUG` to include `ml-rules` (e.g. `DEBUG=ml-rules`). */
+/**
+ * Enable by setting `DEBUG` to include `ml-rules` (e.g. `DEBUG=ml-rules`).
+ *
+ * Read `.enabled` at call time; never cache it at module load. `debug.enable()` (including via `verbosely()` /
+ * `enableDebug()`) can switch a namespace on after import. The `permitted-contents` functions read it once on entry to
+ * decide whether to build log arguments. Enabling debug while one runs is not seen until the next call; disabling
+ * takes effect at once because the logger itself re-checks.
+ */
 export declare const log: debug.Debugger;

package/lib/debug.js

@@ -1,3 +1,10 @@
 import debug from 'debug';
-/** Enable by setting `DEBUG` to include `ml-rules` (e.g. `DEBUG=ml-rules`). */
+/**
+ * Enable by setting `DEBUG` to include `ml-rules` (e.g. `DEBUG=ml-rules`).
+ *
+ * Read `.enabled` at call time; never cache it at module load. `debug.enable()` (including via `verbosely()` /
+ * `enableDebug()`) can switch a namespace on after import. The `permitted-contents` functions read it once on entry to
+ * decide whether to build log arguments. Enabling debug while one runs is not seen until the next call; disabling
+ * takes effect at once because the logger itself re-checks.
+ */
 export const log = debug('ml-rules');

package/lib/element-supports-aria-prop/index.js

@@ -2,6 +2,7 @@ import { createRule, getComputedRole, ariaSpecs, getSpec } from '@markuplint/ml-
 import { ARIA_RECOMMENDED_VERSION } from '@markuplint/ml-spec';
 import { checkingElementSupportsAriaProp } from '../wai-aria/checkings/element-supports-aria-prop.js';
 import { defaultOptions } from '../wai-aria/default-options.js';
+import { isAriaAttr } from '../helpers.js';
 import meta from './meta.js';
 /**
  * Split from the former `wai-aria-disallowed-props` rule (#3989): the ARIA in
@@ -24,7 +25,7 @@ export default createRule({
                 return;
             if (!elSpec.globalAttrs['#ARIAAttrs'])
                 return;
-            const propAttrs = el.attributes.filter(attr => /^aria-/i.test(attr.name));
+            const propAttrs = el.attributes.filter(attr => isAriaAttr(attr));
             if (propAttrs.length === 0)
                 return;
             const ariaVersion = el.rule.options?.version ?? document.ruleCommonSettings?.ariaVersion ?? ARIA_RECOMMENDED_VERSION;

package/lib/form-attr-references-form/index.d.ts

@@ -1,8 +1,11 @@
 /**
  * Require the `form` attribute on a form-associated element to reference
- * an actual `<form>` element by ID. Per HTML LS §4.10.18.6: "If
- * specified, the value must be the ID of a form element in the
- * element's tree." Existence of the ID itself is the responsibility of
+ * an actual `<form>` element by ID. Per HTML LS §4.10.18.3:
+ *
+ * > If a listed form-associated element has a form attribute specified, then that attribute's value must be the ID of a
+ * > form element in the element's tree.
+ *
+ * Existence of the ID itself is the responsibility of
  * `no-refer-to-non-existent-id`; this rule only checks the element type
  * when the ID resolves.
  *

package/lib/form-attr-references-form/index.js

@@ -21,9 +21,12 @@ const FORM_ASSOCIATED_SELECTOR = [
 ].join(',');
 /**
  * Require the `form` attribute on a form-associated element to reference
- * an actual `<form>` element by ID. Per HTML LS §4.10.18.6: "If
- * specified, the value must be the ID of a form element in the
- * element's tree." Existence of the ID itself is the responsibility of
+ * an actual `<form>` element by ID. Per HTML LS §4.10.18.3:
+ *
+ * > If a listed form-associated element has a form attribute specified, then that attribute's value must be the ID of a
+ * > form element in the element's tree.
+ *
+ * Existence of the ID itself is the responsibility of
  * `no-refer-to-non-existent-id`; this rule only checks the element type
  * when the ID resolves.
  *