@markuplint/rules 5.5.0 → 5.6.0

package/lib/no-stray-head-or-body-tag/index.js

@@ -53,13 +53,13 @@ export default createRule({
             if (STRAY_HEAD_END_TAG.test(text.raw)) {
                 report({
                     scope: text,
-                    message: t('{0} detected', t('a stray "{0}" end tag', 'head')),
+                    message: t('{0} detected', t('a stray "{0*}" end tag', 'head')),
                 });
             }
             if (DUPLICATE_BODY_START_TAG.test(text.raw)) {
                 report({
                     scope: text,
-                    message: t('{0} detected', t('a duplicate "{0}" start tag', 'body')),
+                    message: t('{0} detected', t('a duplicate "{0*}" start tag', 'body')),
                 });
             }
         });

package/lib/no-table-cell-overlap/index.js

@@ -1,5 +1,6 @@
 import { createRule } from '@markuplint/ml-core';
 import { Grid } from '../table-row-column-alignment/grid.js';
+import { noTranslate } from '../no-translate.js';
 import meta from './meta.js';
 /**
  * HTML LS [§4.9.12.1 *Forming a table*](https://html.spec.whatwg.org/multipage/tables.html#forming-a-table)
@@ -22,7 +23,7 @@ export default createRule({
                     scope: table,
                     message: t(
                     //
-                    '{0} are causing {1}', t(['rowspan', 'colspan'], true), 'cell overlap'),
+                    '{0} are causing {1}', t(['rowspan', 'colspan'].map(noTranslate), true), 'cell overlap'),
                 });
             }
         }

package/lib/no-translate.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Marks a value so that the translator of `@markuplint/i18n` shows it as written.
+ *
+ * The translator looks a placeholder's value up as a keyword (`list` is `リスト` with `locale: 'ja'`),
+ * and so it does each item of a list, `t(['row', 'list'])`. A placeholder written `{n*}` is not
+ * translated, but a list has no such mark: an item that is data (a role name, an attribute value, a
+ * token the author wrote) is wrapped in `%…%`, the translator's own form of "not a keyword".
+ *
+ * The translator reads `%…%` around a whole value as that mark and `%%` at an end as one `%`, so a
+ * value that has a `%` at an end is written with it doubled: `%list%` is shown as `%list%`, not
+ * `list`. A `%` inside a value needs nothing, as no keyword has one. An empty value is returned as
+ * it is: wrapped, `%%` would be read back as a stray `%`.
+ *
+ * @param value - The text to show as written
+ * @returns The text for an item of a list, or for a placeholder, given to `t()`
+ */
+export declare function noTranslate(value: string): string;

package/lib/no-translate.js

@@ -0,0 +1,29 @@
+/**
+ * Marks a value so that the translator of `@markuplint/i18n` shows it as written.
+ *
+ * The translator looks a placeholder's value up as a keyword (`list` is `リスト` with `locale: 'ja'`),
+ * and so it does each item of a list, `t(['row', 'list'])`. A placeholder written `{n*}` is not
+ * translated, but a list has no such mark: an item that is data (a role name, an attribute value, a
+ * token the author wrote) is wrapped in `%…%`, the translator's own form of "not a keyword".
+ *
+ * The translator reads `%…%` around a whole value as that mark and `%%` at an end as one `%`, so a
+ * value that has a `%` at an end is written with it doubled: `%list%` is shown as `%list%`, not
+ * `list`. A `%` inside a value needs nothing, as no keyword has one. An empty value is returned as
+ * it is: wrapped, `%%` would be read back as a stray `%`.
+ *
+ * @param value - The text to show as written
+ * @returns The text for an item of a list, or for a placeholder, given to `t()`
+ */
+export function noTranslate(value) {
+    if (value === '') {
+        return value;
+    }
+    if (!value.includes('%')) {
+        return `%${value}%`;
+    }
+    // `%%` is the escaped form of one `%` at an end, so a lone `%` is a single escaped one
+    if (value === '%') {
+        return '%%';
+    }
+    return value.replace(/^%/, '%%').replace(/%$/, '%%');
+}

package/lib/no-unclosed-element-at-eof/index.js

@@ -89,7 +89,7 @@ export default createRule({
                 return;
             report({
                 scope: el,
-                message: t('{0} is not closed at the end of the file', t('the "{0}" {1}', el.localName, 'element')),
+                message: t('{0} is not closed at the end of the file', t('the "{0*}" {1}', el.localName, 'element')),
             });
         });
     },

package/lib/no-unsupported-browser-features/index.d.ts

@@ -1,3 +1,5 @@
+import type { UnsupportedResult } from './compat-data.js';
+import { createRule } from '@markuplint/ml-core';
 /**
  * Options for the `no-unsupported-browser-features` rule.
  */
@@ -17,3 +19,10 @@ type Options = {
 };
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<boolean, Options>>;
 export default _default;
+/**
+ * Format an unsupported feature message listing affected browsers.
+ *
+ * The double-underscore prefix marks this as exposed only for testing: the browsers a feature
+ * was removed from are not reachable through the data of the dependencies.
+ */
+export declare function __formatUnsupportedMessage(t: Parameters<Parameters<typeof createRule>[0]['verify']>[0]['t'], featureName: string, featureType: string, unsupported: readonly UnsupportedResult[]): string;

package/lib/no-unsupported-browser-features/index.js

@@ -34,7 +34,7 @@ export default createRule({
                 if (unsupported.length > 0) {
                     report({
                         scope: el,
-                        message: formatUnsupportedMessage(t, elName, 'element', unsupported),
+                        message: __formatUnsupportedMessage(t, elName, 'element', unsupported),
                     });
                 }
             }
@@ -53,7 +53,7 @@ export default createRule({
                         line: attr.nameNode?.startLine,
                         col: attr.nameNode?.startCol,
                         raw: attr.nameNode?.raw,
-                        message: formatUnsupportedMessage(t, attrName, 'attribute', unsupported),
+                        message: __formatUnsupportedMessage(t, attrName, 'attribute', unsupported),
                     });
                 }
             }
@@ -63,18 +63,21 @@ export default createRule({
 });
 /**
  * Format an unsupported feature message listing affected browsers.
+ *
+ * The double-underscore prefix marks this as exposed only for testing: the browsers a feature
+ * was removed from are not reachable through the data of the dependencies.
  */
-function formatUnsupportedMessage(t, featureName, featureType, unsupported) {
+export function __formatUnsupportedMessage(t, featureName, featureType, unsupported) {
     const browserDetails = unsupported
         .map(u => {
         if (u.addedVersion === false) {
             if (u.removedVersion) {
-                return `${u.displayName} (removed in ${u.removedVersion})`;
+                return t('{0*} (removed in {1*})', u.displayName, u.removedVersion);
             }
-            return `${u.displayName} (not supported)`;
+            return t('{0*} (not supported)', u.displayName);
         }
-        return `${u.displayName} (added in ${u.addedVersion}, target: ${u.targetVersion})`;
+        return t('{0*} (added in {1*}, target: {2*})', u.displayName, u.addedVersion, u.targetVersion);
     })
         .join(', ');
-    return t('{0} is not supported in {1}', t('the "{0*}" {1}', featureName, featureType), browserDetails);
+    return t('{0} is not supported in {1*}', t('the "{0*}" {1}', featureName, featureType), browserDetails);
 }

package/lib/permitted-contents/content-model.d.ts

@@ -40,6 +40,20 @@ export declare function resolveContentModel(el: Element, rules: readonly TagRule
  * @returns Whether the rule is written for the element
  */
 export declare function hasTagRule(el: Element, rule: TagRule): boolean;
+/**
+ * Whether the user's tag rules include one written for the element whose content model governs
+ * the children of `el` (see {@link getContentOwner}).
+ *
+ * Such a rule lists the components that the element takes by the name that they are written with,
+ * and the components are evaluated by it. Without one, a component that no pretender resolved renders
+ * something that is not known, and what holds whatever it renders is the only thing to report.
+ *
+ * @param el - The element whose children are validated
+ * @param rules - The user's tag rules
+ * @param mode - Which identity to resolve against
+ * @returns Whether a tag rule is written for the element
+ */
+export declare function hasUserTagRule(el: Element, rules: readonly TagRule[], mode: Mode): boolean;
 /**
  * Returns a Specs object that merges the base ML spec with user-defined
  * tag rules. Results are cached by the specs of the document and the serialized rules to avoid redundant

package/lib/permitted-contents/content-model.js

@@ -41,7 +41,8 @@ el, rules, options, mode) {
             },
         ];
     }
-    const result = start(model, el, rules, specs, options, mode);
+    const ignoreUnresolvedComponents = options.ignoreHasMutableChildren && !hasUserTagRule(el, rules, mode);
+    const result = start(model, el, rules, specs, options, mode, ignoreUnresolvedComponents);
     return result;
 }
 /**
@@ -124,6 +125,25 @@ export function hasTagRule(
 el, rule) {
     return rule.tag === el.rawName || el.matchesTagNameVariant(rule.tag);
 }
+/**
+ * Whether the user's tag rules include one written for the element whose content model governs
+ * the children of `el` (see {@link getContentOwner}).
+ *
+ * Such a rule lists the components that the element takes by the name that they are written with,
+ * and the components are evaluated by it. Without one, a component that no pretender resolved renders
+ * something that is not known, and what holds whatever it renders is the only thing to report.
+ *
+ * @param el - The element whose children are validated
+ * @param rules - The user's tag rules
+ * @param mode - Which identity to resolve against
+ * @returns Whether a tag rule is written for the element
+ */
+export function hasUserTagRule(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+el, rules, mode) {
+    const owner = getContentOwner(el, mode);
+    return rules.some(rule => hasTagRule(owner, rule));
+}
 /**
  * Cache for merged specs: for each base spec of a document, keyed by the JSON-serialized tag rules.
  * Avoids re-merging the same set of user-defined tag rules on every element check.

package/lib/permitted-contents/index.js

@@ -2,7 +2,7 @@ import { createRule } from '@markuplint/ml-core';
 import { contentModel, hasTagRule } from './content-model.js';
 import meta from './meta.js';
 import { transparentMode } from './represent-transparent-nodes.js';
-import { getContentOwner, getReportScope, isContentMutable } from './slot-content.js';
+import { getContentOwner, getReportScope, hasMutableChildNodes, isContentMutable } from './slot-content.js';
 export default createRule({
     meta: meta,
     defaultValue: [],
@@ -39,7 +39,7 @@ export default createRule({
                         case 'MISSING_NODE_ONE_OR_MORE': {
                             if (scope.rule.options.ignoreHasMutableChildren &&
                                 (!scope.is(scope.ELEMENT_NODE) ||
-                                    scope.hasMutableChildren() ||
+                                    hasMutableChildNodes(scope, mode) ||
                                     isContentMutable(el, mode))) {
                                 break;
                             }
@@ -59,7 +59,7 @@ export default createRule({
                         case 'MISSING_NODE_REQUIRED': {
                             if (scope.rule.options.ignoreHasMutableChildren &&
                                 (!scope.is(scope.ELEMENT_NODE) ||
-                                    scope.hasMutableChildren() ||
+                                    hasMutableChildNodes(scope, mode) ||
                                     isContentMutable(el, mode))) {
                                 break;
                             }
@@ -139,7 +139,7 @@ function name(
 scope, t, mode) {
     if (scope.is(scope.ELEMENT_NODE)) {
         const displayName = mode === 'origin' ? scope.rawName : scope.localName;
-        return t('the "{0}" {1}', displayName, 'element');
+        return t('the "{0*}" {1}', displayName, 'element');
     }
     if (scope.is(scope.TEXT_NODE)) {
         return t('the {0}', 'text node');

package/lib/permitted-contents/matches-selector.js

@@ -211,6 +211,10 @@ childNode, specs, depth, mode) {
  *
  * The `'pretended'` criterion is the one `MLElement.isCustomElement` gives a
  * `:model()` selector; change them together.
+ *
+ * What a component renders is not known only when no pretender resolved it, and
+ * a web component renders as itself: `MLElement#isUnresolvedComponent` is the narrower
+ * criterion, which `start` uses to leave the components out of the evaluation.
  */
 function isTreatedAsCustom(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types

package/lib/permitted-contents/slot-content.d.ts

@@ -34,6 +34,22 @@ export declare function expandChildren<T extends RuleConfigValue, O extends Plai
  * a fragment pretender among its children (which stands in the parent).
  */
 export declare function isContentMutable<T extends RuleConfigValue, O extends PlainData>(el: Element<T, O>, mode: Mode): boolean;
+/**
+ * Whether a child of `el` that the content model reads is a block of a preprocessor or a `slot`
+ * (`mayRenderUnknownChildren`): a required child that is missing may be what it renders.
+ * Only the children are looked at (the children of a fragment pretender included, as the content
+ * model reads them): what a descendant renders is not a child of `el`.
+ *
+ * A component that no pretender resolved is not looked at here: `start` leaves it out of each
+ * conditional branch that has one, and drops the missing children of that branch only.
+ *
+ * @template T - The rule configuration value type
+ * @template O - The rule options type
+ * @param el - The element whose children are looked at
+ * @param mode - Which identity of `el` the content model is read for
+ * @returns True if a child may stand for children that are not known
+ */
+export declare function hasMutableChildNodes<T extends RuleConfigValue, O extends PlainData>(el: Element<T, O>, mode: Mode): boolean;
 /**
  * A violation on an element that only the pretender renders (`contents`) is reported
  * on the component that renders it: the element does not exist in the source.

package/lib/permitted-contents/slot-content.js

@@ -1,3 +1,4 @@
+import { mayRenderUnknownChildren } from '../helpers.js';
 /**
  * Returns the slot-content description of a pretended component, which exists
  * only in `'pretended'` mode: the `'origin'` mode evaluates user tag rules keyed
@@ -86,6 +87,26 @@ el, mode) {
     }
     return [...el.childNodes].some(child => isFragmentPretender(child, mode) && isContentMutable(child, mode));
 }
+/**
+ * Whether a child of `el` that the content model reads is a block of a preprocessor or a `slot`
+ * (`mayRenderUnknownChildren`): a required child that is missing may be what it renders.
+ * Only the children are looked at (the children of a fragment pretender included, as the content
+ * model reads them): what a descendant renders is not a child of `el`.
+ *
+ * A component that no pretender resolved is not looked at here: `start` leaves it out of each
+ * conditional branch that has one, and drops the missing children of that branch only.
+ *
+ * @template T - The rule configuration value type
+ * @template O - The rule options type
+ * @param el - The element whose children are looked at
+ * @param mode - Which identity of `el` the content model is read for
+ * @returns True if a child may stand for children that are not known
+ */
+export function hasMutableChildNodes(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+el, mode) {
+    return expandChildren(el, [...el.getPureChildNodes()], mode).some(child => mayRenderUnknownChildren(child, false));
+}
 function isFragmentPretender(
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 node, mode) {

package/lib/permitted-contents/start.d.ts

@@ -10,10 +10,17 @@ import type { ReadonlyDeep } from 'type-fest';
  * When `options.evaluateConditionalChildNodes` is enabled, all conditional branches
  * (e.g., from template directives) are evaluated independently.
  *
+ * A component that no pretender resolved (`MLElement#isUnresolvedComponent`) renders something that is
+ * not known: it may be the element that the content model asks for, or stand for several. With
+ * `ignoreUnresolvedComponents` the children are evaluated without such components, and only what holds
+ * whatever they render is kept ({@link holdsWhateverIsRendered}). Without it they are evaluated as
+ * written, by the name of the component (`isTreatedAsCustom` of `matches-selector.ts`).
+ *
  * @param contents - The content model definition: `false` for empty, `true` for any, or an array of patterns.
  * @param el - The parent element whose children are being validated.
  * @param specs - The resolved spec data for content model lookups.
  * @param options - Validation behavior options.
+ * @param ignoreUnresolvedComponents - Whether to evaluate the children without the components that no pretender resolved.
  * @returns An array of content model results describing any violations found.
  */
-export declare function start(contents: ReadonlyDeep<ContentModel['contents']>, el: Element, rules: readonly TagRule[], specs: Specs, options: Options, mode: Mode): ContentModelResult[];
+export declare function start(contents: ReadonlyDeep<ContentModel['contents']>, el: Element, rules: readonly TagRule[], specs: Specs, options: Options, mode: Mode, ignoreUnresolvedComponents?: boolean): ContentModelResult[];

package/lib/permitted-contents/start.js

@@ -12,25 +12,42 @@ import { isComment } from './utils.js';
  * When `options.evaluateConditionalChildNodes` is enabled, all conditional branches
  * (e.g., from template directives) are evaluated independently.
  *
+ * A component that no pretender resolved (`MLElement#isUnresolvedComponent`) renders something that is
+ * not known: it may be the element that the content model asks for, or stand for several. With
+ * `ignoreUnresolvedComponents` the children are evaluated without such components, and only what holds
+ * whatever they render is kept ({@link holdsWhateverIsRendered}). Without it they are evaluated as
+ * written, by the name of the component (`isTreatedAsCustom` of `matches-selector.ts`).
+ *
  * @param contents - The content model definition: `false` for empty, `true` for any, or an array of patterns.
  * @param el - The parent element whose children are being validated.
  * @param specs - The resolved spec data for content model lookups.
  * @param options - Validation behavior options.
+ * @param ignoreUnresolvedComponents - Whether to evaluate the children without the components that no pretender resolved.
  * @returns An array of content model results describing any violations found.
  */
 export function start(contents, 
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-el, rules, specs, options, mode) {
+el, rules, specs, options, mode, ignoreUnresolvedComponents = false) {
     const givenPatterns = options.evaluateConditionalChildNodes
         ? el.conditionalChildNodes().map(childNodes => [...childNodes])
         : [[...el.childNodes]];
-    const childNodesPatterns = givenPatterns.map(given => {
-        const children = expandChildren(el, given, mode).filter(child => !isComment(child));
+    // A model that is `false` does not allow a component either: what it renders may be anything
+    const ignoresComponents = ignoreUnresolvedComponents && contents !== false && contents !== true;
+    const isIgnoredComponent = (child) => ignoresComponents && child.is(child.ELEMENT_NODE) && child.isUnresolvedComponent();
+    const expandedPatterns = givenPatterns.map(given => expandChildren(el, given, mode));
+    // Per pattern: a conditional branch without a component is evaluated as it is written
+    const hasIgnoredComponents = expandedPatterns.map(expanded => expanded.some(child => isIgnoredComponent(child)));
+    const childNodesPatterns = expandedPatterns.map(expanded => {
+        const children = expanded.filter(child => !isComment(child) && !isIgnoredComponent(child));
         return options.evaluateConditionalChildNodes
             ? [...children]
             : children.filter(child => !(child.is(child.TEXT_NODE) && isInterElementWhitespace(child.raw)));
     });
-    return childNodesPatterns.flatMap(childNodes => {
+    return childNodesPatterns.flatMap((childNodes, index) => {
+        const results = evaluate(childNodes);
+        return hasIgnoredComponents[index] ? results.filter(result => holdsWhateverIsRendered(result)) : results;
+    });
+    function evaluate(childNodes) {
         if (contents === false) {
             if (childNodes.length > 0) {
                 return [
@@ -82,5 +99,19 @@ el, rules, specs, options, mode) {
                 })),
             ];
         });
-    });
+    }
+}
+/**
+ * Whether a violation found without the components that no pretender resolved holds whatever
+ * they render.
+ *
+ * A component may render the child that is missing, so a missing child is not one. An element
+ * that the content model does not take is (`<div>` in `<ul><Item /><div></div></ul>`, the second
+ * `<title>` in `<head><Meta /><title /><title /></head>`): `order` reports it only after it has
+ * consumed every entry that it can, and a component adds nodes without moving or removing the ones
+ * that are written. The order is not reported either: when the elements are out of order the
+ * entry that comes first is missing, which a component may render (`<dl><Term /><dd></dd></dl>`).
+ */
+function holdsWhateverIsRendered(result) {
+    return result.type !== 'MISSING_NODE_REQUIRED' && result.type !== 'MISSING_NODE_ONE_OR_MORE';
 }

package/lib/progress-value-bounds/index.js

@@ -45,8 +45,8 @@ export default createRule({
             if (valueNum <= maxValue)
                 return;
             const message = maxAttr
-                ? t('The value of the "{0}" attribute must be less than or equal to {1}', 'value', t('the value of the "{0}" attribute', 'max'))
-                : t('The value of the "{0}" attribute must be less than or equal to {1}', 'value', t('{0} when the "{1}" attribute is absent', 'one', 'max'));
+                ? t('The value of the "{0*}" attribute must be less than or equal to {1}', 'value', t('the value of the "{0*}" attribute', 'max'))
+                : t('The value of the "{0*}" attribute must be less than or equal to {1}', 'value', t('{0} when the "{1*}" attribute is absent', 'one', 'max'));
             report({
                 scope: valueAttr,
                 line: valueAttr.valueNode?.startLine,

package/lib/require-ancestor/index.d.ts

@@ -1,3 +1,4 @@
+import type { RuleConfigValue } from '@markuplint/ml-core';
 /**
  * Looks for the ancestor that the content model asks for (`descendantOf`) in the tree of the
  * element, as the DOM does: the climb stops at the top of the content of a `template` element, and
@@ -15,8 +16,23 @@
  * or the `template` of a framework whose spec puts the children in the element itself) is not an HTML
  * `template` element, and the climb goes through it as through any other element.
  *
+ * A component whose output is not known (`MLElement#isUnresolvedComponent`: no pretender stands for
+ * it) may render the ancestor, so an element with such a component above it, up to the top of its
+ * tree, is not reported: the rule does not decide what the file does not tell. A pretender that
+ * says what the component renders is read as that element, and a web component is the element
+ * that it is written as. What renders its children in place is not one even where the parser sees it
+ * as a component: a fragment (Vue's `slot` is one to its parser) and a `template` with a directive
+ * ({@link isUnknownOutput}).
+ *
+ * When the content model says the ancestor is required only of an element with a parent node
+ * (`descendantOfWithParentNode`, as the `area` element's is), an element that has no parent node in
+ * the file ({@link hasParentNode}) is not reported:
+ *
+ * > An area element with a parent node must have a map element ancestor.
+ *
  * @see https://dom.spec.whatwg.org/#parent-element
  * @see https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
+ * @see https://html.spec.whatwg.org/multipage/image-maps.html#the-area-element
  */
-declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<import("@markuplint/ml-core").RuleConfigValue, undefined>>;
+declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<RuleConfigValue, undefined>>;
 export default _default;

package/lib/require-ancestor/index.js

@@ -1,5 +1,6 @@
 import { createRule } from '@markuplint/ml-core';
-import { isShadowRoot } from '@markuplint/ml-spec';
+import { getSpecByTagName, isShadowRoot } from '@markuplint/ml-spec';
+import { isRenderedAway, isUnknownOutput } from '../helpers.js';
 import meta from './meta.js';
 /**
  * Looks for the ancestor that the content model asks for (`descendantOf`) in the tree of the
@@ -18,15 +19,30 @@ import meta from './meta.js';
  * or the `template` of a framework whose spec puts the children in the element itself) is not an HTML
  * `template` element, and the climb goes through it as through any other element.
  *
+ * A component whose output is not known (`MLElement#isUnresolvedComponent`: no pretender stands for
+ * it) may render the ancestor, so an element with such a component above it, up to the top of its
+ * tree, is not reported: the rule does not decide what the file does not tell. A pretender that
+ * says what the component renders is read as that element, and a web component is the element
+ * that it is written as. What renders its children in place is not one even where the parser sees it
+ * as a component: a fragment (Vue's `slot` is one to its parser) and a `template` with a directive
+ * ({@link isUnknownOutput}).
+ *
+ * When the content model says the ancestor is required only of an element with a parent node
+ * (`descendantOfWithParentNode`, as the `area` element's is), an element that has no parent node in
+ * the file ({@link hasParentNode}) is not reported:
+ *
+ * > An area element with a parent node must have a map element ancestor.
+ *
  * @see https://dom.spec.whatwg.org/#parent-element
  * @see https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
+ * @see https://html.spec.whatwg.org/multipage/image-maps.html#the-area-element
  */
 export default createRule({
     meta: meta,
     async verify({ document, report, t }) {
         await document.walkOn('Element', el => {
-            const elSpec = document.specs.specs.find(s => s.name === el.localName);
-            const descendantOf = elSpec?.contentModel?.descendantOf;
+            const contentModel = getSpecByTagName(document.specs.specs, el.localName, el.namespaceURI)?.contentModel;
+            const descendantOf = contentModel?.descendantOf;
             if (!descendantOf) {
                 return;
             }
@@ -37,9 +53,15 @@ export default createRule({
                     found = true;
                     break;
                 }
+                // What the component renders is not known, so the ancestor may be among it. The climb does not
+                // leave the tree of the element (`treeParentElement`), so a component outside a declarative shadow
+                // root is not reached
+                if (isUnknownOutput(ancestor)) {
+                    return;
+                }
                 ancestor = ancestor.treeParentElement;
             }
-            if (found) {
+            if (found || (contentModel.descendantOfWithParentNode && !hasParentNode(el))) {
                 return;
             }
             const root = el.getRootNode();
@@ -48,8 +70,33 @@ export default createRule({
             }
             report({
                 scope: el,
-                message: t('{0} must appear as a descendant of {1}', t('the "{0}" {1}', el.localName, 'element'), t('the "{0}" {1}', descendantOf, 'element')),
+                message: t('{0} must appear as a descendant of {1}', t('the "{0*}" {1}', el.localName, 'element'), t('the "{0*}" {1}', descendantOf, 'element')),
             });
         });
     },
 });
+/**
+ * Whether the element has a parent node, as far as the file tells. In a whole document every element
+ * has one. An element at the top of a file that is a fragment of a document (a partial, a component)
+ * has none: where it is inserted is not known from the markup. What is rendered away between the
+ * element and the top of the file is not a parent node: a block of a template language, which
+ * `parentNode` (and so `parentElement`) walks through, and a fragment of JSX or a `template` with
+ * a directive ({@link isRenderedAway}).
+ *
+ * @template T - The rule configuration value type
+ * @template O - The rule options type
+ * @param el - An element
+ * @returns `false` if the element is at the top of a fragment document
+ */
+function hasParentNode(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+el) {
+    if (!el.isInFragmentDocument()) {
+        return true;
+    }
+    let parent = el.parentElement;
+    while (parent && isRenderedAway(parent)) {
+        parent = parent.parentElement;
+    }
+    return parent !== null;
+}

package/lib/require-ancestor/meta.d.ts

@@ -1,4 +1,9 @@
 declare const _default: {
     readonly category: "structure";
+    readonly specConformance: {
+        readonly sources: readonly ["html"];
+        readonly level: "must";
+        readonly cites: readonly ["https://html.spec.whatwg.org/multipage/image-maps.html#the-area-element"];
+    };
 };
 export default _default;

package/lib/require-ancestor/meta.js

@@ -1,3 +1,8 @@
 export default {
     category: 'structure',
+    specConformance: {
+        sources: ['html'],
+        level: 'must',
+        cites: ['https://html.spec.whatwg.org/multipage/image-maps.html#the-area-element'],
+    },
 };

package/lib/require-attr/index.js

@@ -1,5 +1,6 @@
 import { createRule, getAttrSpecs } from '@markuplint/ml-core';
 import { attrMatches, match } from '../helpers.js';
+import { noTranslate } from '../no-translate.js';
 import meta from './meta.js';
 export default createRule({
     meta: meta,
@@ -107,7 +108,9 @@ export default createRule({
                 if (spec.values.length > 0 && value) {
                     const matched = spec.values.some(pattern => match(value, pattern));
                     if (!matched) {
-                        const expects = spec.values.length === 1 ? t(spec.values) : t('either {0}', t(spec.values));
+                        const expects = spec.values.length === 1
+                            ? t(spec.values.map(noTranslate))
+                            : t('either {0}', t(spec.values.map(noTranslate)));
                         const message = t('{0} expects {1}', t('the "{0*}" {1}', spec.name, 'attribute'), expects);
                         const attrToken = el.getAttributeToken(spec.name);
                         const valueToken = attrToken[0]?.valueNode;

package/lib/require-datetime/index.js

@@ -9,7 +9,8 @@ export default createRule({
     },
     verify({ document, report, t }) {
         for (const time of document.deepQuerySelectorAll('time:not([datetime])')) {
-            if (time.hasMutableChildren()) {
+            // The text of the element is the text of its descendants, which a component may render
+            if (time.hasMutableChildren() || [...time.querySelectorAll('*')].some(el => el.isUnresolvedComponent())) {
                 continue;
             }
             const content = time.textContent.trim();

package/lib/require-element/index.js

@@ -1,4 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
+import { mayRenderUnknownChildren } from '../helpers.js';
 import meta from './meta.js';
 export default createRule({
     meta: meta,
@@ -8,7 +9,10 @@ export default createRule({
         ignoreOmittedElements: true,
     },
     async verify({ document, report, t }) {
-        const hasMutableContent = document.nodeList.some(n => n.is(n.ELEMENT_NODE) && n.hasMutableChildren());
+        // The element that a global rule asks for may be anywhere, so what any component, block or
+        // descendant renders may be it
+        const hasMutableContent = document.rule.options.ignoreHasMutableContents &&
+            document.nodeList.some(n => n.is(n.ELEMENT_NODE) && (n.hasMutableChildren() || n.isUnresolvedComponent()));
         if (!hasMutableContent) {
             for (const query of document.rule.value) {
                 const matched = document.querySelectorAll(query);
@@ -30,7 +34,9 @@ export default createRule({
             if (el.rule.value === document.rule.value) {
                 return;
             }
-            if (el.rule.options.ignoreHasMutableContents && el.hasMutableChildren()) {
+            // What a descendant renders is not a child of the element that has to have the required one
+            if (el.rule.options.ignoreHasMutableContents &&
+                [...el.getPureChildNodes()].some(child => mayRenderUnknownChildren(child))) {
                 return;
             }
             for (const query of el.rule.value) {

package/lib/usemap-references-map/index.js

@@ -47,7 +47,7 @@ export default createRule({
                     line: usemapAttr.valueNode?.startLine,
                     col: usemapAttr.valueNode?.startCol,
                     raw: usemapAttr.valueNode?.raw,
-                    message: t('The "{0}" attribute of the "{1}" element must be a valid hash-name reference to a "{2}" element', 'usemap', 'img', 'map'),
+                    message: t('The "{0*}" attribute of the "{1*}" element must be a valid hash-name reference to a "{2*}" element', 'usemap', 'img', 'map'),
                 });
             }
         });