@siteimprove/alfa-dom 0.112.0 → 0.113.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @siteimprove/alfa-dom
 
+## 0.113.0
+
+### Minor Changes
+
+- **Added:** Style rule subclasses now export their factory functions and type guards directly from the `Rule` namespace, e.g. use `Rule.media` (resp. `Rule.isMediaRule`) as an alias for `Rule.Media.of` (resp. `Rule.Media.isMediaRule`). ([#2040](https://github.com/Siteimprove/alfa/pull/2040))
+
+- **Breaking:** The abstract class `Rule` has been renamed `BaseRule`; a new type `Rule`, being the union of actual concrete rules is now available. This should have no impact unless trying to extend the abstract class. ([#2040](https://github.com/Siteimprove/alfa/pull/2040))
+
+- **Breaking:** The various subclasses of style rules are now exported as `Rule.Media`, … instead of `MediaRule`, … ([#2040](https://github.com/Siteimprove/alfa/pull/2040))
+
+- **Breaking:** The `Slot` interface is now just a type alias for `Element<"slot">`. The `Slot.foo` functions are now `Slot#foo` methods; The `Slot.findSlottable` function/method has been removed as it is just an alias for `Slot#assignedNodes`. ([#2040](https://github.com/Siteimprove/alfa/pull/2040))
+
+- **Breaking:** The `Node.clone` function has been deleted, as it wasn't used. ([#2040](https://github.com/Siteimprove/alfa/pull/2040))
+
+- **Breaking:** `Rule.from` now requires a style sheet factory function as second argument; simply use `Sheet.of`. ([#2040](https://github.com/Siteimprove/alfa/pull/2040))
+
+- **Breaking:** The `Slotable` interface is now an intermediate abstract class between `Node` and `Element`/`Text`. The `Slotable.foo` functions are now `Slotable#foo` methods; The `Slotable.findSlot` function/method has been removed as it is just an alias for `Slotable#assignedSlot`. ([#2040](https://github.com/Siteimprove/alfa/pull/2040))
+
+- **Breaking:** A new required property `node` has been added to the `TextGroup` interface. ([#2047](https://github.com/Siteimprove/alfa/pull/2047))
+
+### Patch Changes
+
+- **Added:** `Native.fromNode()` now accepts an `injectDataAlfaId` option. If set, every element in the page will be updated by adding a `data-alfa-id` attribute whose value matches the `internalId` of the corresponding Alfa `Element`. This allows for easier matching of test targets with the original DOM element. ([#2010](https://github.com/Siteimprove/alfa/pull/2010))
+
 ## 0.112.0
 
 ## 0.111.0

package/dist/h.d.ts

@@ -1,7 +1,8 @@
 import { Device } from "@siteimprove/alfa-device";
 import type { Rectangle } from "@siteimprove/alfa-rectangle";
-import type { Node, Rule } from "./index.js";
-import { Attribute, Block, Declaration, Document, Element, FontFaceRule, Fragment, ImportRule, KeyframeRule, KeyframesRule, Layer, MediaRule, Namespace, NamespaceRule, PageRule, Shadow, Sheet, StyleRule, SupportsRule, Text, Type } from "./index.js";
+import { Namespace } from "./namespace.js";
+import { Attribute, Document, Element, Fragment, type Node, Shadow, Text, Type } from "./node/index.js";
+import { Block, Declaration, Rule, Sheet } from "./style/index.js";
 /**
  * @public
  */
@@ -21,17 +22,17 @@ export declare namespace h {
     function block(declarations: Array<Declaration> | Record<string, string>): Block;
     function declaration(name: string, value: string, important?: boolean): Declaration;
     namespace rule {
-        function fontFace(declarations: Array<Declaration> | Record<string, string>): FontFaceRule;
-        function importRule(url: string, sheet: Sheet, mediaCondition?: string, supportCondition?: string, layer?: string): ImportRule;
-        function keyframe(key: string, declarations: Array<Declaration> | Record<string, string>): KeyframeRule;
-        function keyframes(name: string, rules: Array<Rule>): KeyframesRule;
-        function layerBlock(rules: Array<Rule>, layer?: string): Layer.BlockRule;
-        function layerStatement(layers: Array<string>): Layer.StatementRule;
-        function media(condition: string, rules: Array<Rule>): MediaRule;
-        function namespace(namespace: string, prefix?: string): NamespaceRule;
-        function page(selector: string, declarations: Array<Declaration> | Record<string, string>): PageRule;
-        function style(selector: string, declarations: Array<Declaration> | Record<string, string>, hint?: boolean): StyleRule;
-        function supports(condition: string, rules: Array<Rule>): SupportsRule;
+        function fontFace(declarations: Array<Declaration> | Record<string, string>): Rule.FontFace;
+        function importRule(url: string, sheet: Sheet, mediaCondition?: string, supportCondition?: string, layer?: string): Rule.Import;
+        function keyframe(key: string, declarations: Array<Declaration> | Record<string, string>): Rule.Keyframe;
+        function keyframes(name: string, rules: Array<Rule>): Rule.Keyframes;
+        function layerBlock(rules: Array<Rule>, layer?: string): Rule.Layer.Block;
+        function layerStatement(layers: Array<string>): Rule.Layer.Statement;
+        function media(condition: string, rules: Array<Rule>): Rule.Media;
+        function namespace(namespace: string, prefix?: string): Rule.Namespace;
+        function page(selector: string, declarations: Array<Declaration> | Record<string, string>): Rule.Page;
+        function style(selector: string, declarations: Array<Declaration> | Record<string, string>, hint?: boolean): Rule.Style;
+        function supports(condition: string, rules: Array<Rule>): Rule.Supports;
     }
 }
 //# sourceMappingURL=h.d.ts.map

package/dist/h.js

@@ -1,7 +1,9 @@
+import { Device } from "@siteimprove/alfa-device";
 import { None, Option } from "@siteimprove/alfa-option";
 import { Predicate } from "@siteimprove/alfa-predicate";
-import { Device } from "@siteimprove/alfa-device";
-import { Attribute, Block, Declaration, Document, Element, FontFaceRule, Fragment, ImportRule, KeyframeRule, KeyframesRule, Layer, MediaRule, Namespace, NamespaceRule, PageRule, Shadow, Sheet, StyleRule, SupportsRule, Text, Type, } from "./index.js";
+import { Namespace } from "./namespace.js";
+import { Attribute, Document, Element, Fragment, Shadow, Text, Type, } from "./node/index.js";
+import { Block, Declaration, Rule, Sheet } from "./style/index.js";
 const { entries } = Object;
 const { nor } = Predicate;
 /**
@@ -103,49 +105,49 @@ export function h(name, attributes, children, style, box, device = Device.standa
     let rule;
     (function (rule) {
         function fontFace(declarations) {
-            return FontFaceRule.of(block(declarations));
+            return Rule.fontFace(block(declarations));
         }
         rule.fontFace = fontFace;
         function importRule(url, sheet, mediaCondition, supportCondition, 
         // Use "" for anonymous layer.
         layer) {
-            return ImportRule.of(url, sheet, Option.from(mediaCondition), Option.from(supportCondition), Option.from(layer));
+            return Rule.importRule(url, sheet, Option.from(mediaCondition), Option.from(supportCondition), Option.from(layer));
         }
         rule.importRule = importRule;
         function keyframe(key, declarations) {
-            return KeyframeRule.of(key, block(declarations));
+            return Rule.keyframe(key, block(declarations));
         }
         rule.keyframe = keyframe;
         function keyframes(name, rules) {
-            return KeyframesRule.of(name, rules);
+            return Rule.keyframes(name, rules);
         }
         rule.keyframes = keyframes;
         function layerBlock(rules, layer) {
-            return Layer.BlockRule.of(rules, layer);
+            return Rule.layerBlock(rules, layer);
         }
         rule.layerBlock = layerBlock;
         function layerStatement(layers) {
-            return Layer.StatementRule.of(layers);
+            return Rule.layerStatement(layers);
         }
         rule.layerStatement = layerStatement;
         function media(condition, rules) {
-            return MediaRule.of(condition, rules);
+            return Rule.media(condition, rules);
         }
         rule.media = media;
         function namespace(namespace, prefix) {
-            return NamespaceRule.of(namespace, Option.from(prefix));
+            return Rule.namespace(namespace, Option.from(prefix));
         }
         rule.namespace = namespace;
         function page(selector, declarations) {
-            return PageRule.of(selector, block(declarations));
+            return Rule.page(selector, block(declarations));
         }
         rule.page = page;
         function style(selector, declarations, hint) {
-            return StyleRule.of(selector, block(declarations), hint);
+            return Rule.style(selector, block(declarations), hint);
         }
         rule.style = style;
         function supports(condition, rules) {
-            return SupportsRule.of(condition, rules);
+            return Rule.supports(condition, rules);
         }
         rule.supports = supports;
     })(rule = h.rule || (h.rule = {}));

package/dist/index.d.ts

@@ -1,32 +1,6 @@
 export * from "./namespace.js";
-export * from "./style/block.js";
-export * from "./style/declaration.js";
-export * from "./style/rule.js";
-export * from "./style/rule/grouping.js";
-export * from "./style/rule/condition.js";
-export * from "./style/rule/font-face.js";
-export * from "./style/rule/import.js";
-export * from "./style/rule/keyframe.js";
-export * from "./style/rule/keyframes.js";
-export * from "./style/rule/layer.js";
-export * from "./style/rule/media.js";
-export * from "./style/rule/namespace.js";
-export * from "./style/rule/page.js";
-export * from "./style/rule/style.js";
-export * from "./style/rule/supports.js";
-export * from "./style/sheet.js";
-export * from "./node.js";
-export * from "./node/slot.js";
-export * from "./node/slotable.js";
-export * from "./node/attribute.js";
-export * from "./node/comment.js";
-export * from "./node/document.js";
-export * from "./node/element.js";
-import "./node/element/augment.js";
-export * from "./node/fragment.js";
-export * from "./node/shadow.js";
-export * from "./node/text.js";
-export * from "./node/type.js";
+export * from "./style/index.js";
+export * from "./node/index.js";
 export * from "./node/query/index.js";
 export { h } from "./h.js";
 export * from "./jsx.js";

package/dist/index.js

@@ -1,32 +1,6 @@
 export * from "./namespace.js";
-export * from "./style/block.js";
-export * from "./style/declaration.js";
-export * from "./style/rule.js";
-export * from "./style/rule/grouping.js";
-export * from "./style/rule/condition.js";
-export * from "./style/rule/font-face.js";
-export * from "./style/rule/import.js";
-export * from "./style/rule/keyframe.js";
-export * from "./style/rule/keyframes.js";
-export * from "./style/rule/layer.js";
-export * from "./style/rule/media.js";
-export * from "./style/rule/namespace.js";
-export * from "./style/rule/page.js";
-export * from "./style/rule/style.js";
-export * from "./style/rule/supports.js";
-export * from "./style/sheet.js";
-export * from "./node.js";
-export * from "./node/slot.js";
-export * from "./node/slotable.js";
-export * from "./node/attribute.js";
-export * from "./node/comment.js";
-export * from "./node/document.js";
-export * from "./node/element.js";
-import "./node/element/augment.js";
-export * from "./node/fragment.js";
-export * from "./node/shadow.js";
-export * from "./node/text.js";
-export * from "./node/type.js";
+export * from "./style/index.js";
+export * from "./node/index.js";
 export * from "./node/query/index.js";
 export { h } from "./h.js";
 export * from "./jsx.js";

package/dist/jsx.d.ts

@@ -1,14 +1,13 @@
-import type { Element, Node } from "./index.js";
 import type * as dom from "./index.js";
 /**
  * @public
  */
-export declare function jsx<N extends string = string>(name: N, properties?: jsx.Properties | null, ...children: jsx.Children): Element<N>;
+export declare function jsx<N extends string = string>(name: N, properties?: jsx.Properties | null, ...children: jsx.Children): dom.Element<N>;
 /**
  * @public
  */
 export declare namespace jsx {
-    type Child = Node | string;
+    type Child = dom.Node | string;
     /**
      * @remarks
      * This type is declared using the short array syntax (`[]`) to avoid issues

package/dist/native.d.ts

@@ -29,15 +29,23 @@ export declare namespace Native {
     function fromNode(node: globalThis.Node, options?: Options): Promise<Node.JSON & Logs>;
     interface Options {
         /**
-         * Deprecated, use enforceAnonymousCrossOrigin instead
+         * Deprecated, use enforceAnonymousCrossOrigin instead.
          *
          * @deprecated
          */
         withCrossOrigin?: boolean;
         /**
-         * Whether to enforce anonymous crossorigin attribute on <link> missing one
+         * Whether to enforce anonymous crossorigin attribute on <link> missing one.
+         *
+         * @defaultValue false
          */
         enforceAnonymousCrossOrigin?: boolean;
+        /**
+         * Whether to inject data-alfa-id attributes on elements of the page.
+         *
+         * @defaultValue false
+         */
+        injectDataAlfaId?: boolean;
     }
 }
 export {};

package/dist/native.js

@@ -6,7 +6,7 @@ export var Native;
 (function (Native) {
     async function fromNode(node = globalThis.window.document, options) {
         const logs = [];
-        const { withCrossOrigin = false, enforceAnonymousCrossOrigin = withCrossOrigin, } = options ?? {};
+        const { withCrossOrigin = false, enforceAnonymousCrossOrigin = withCrossOrigin, injectDataAlfaId = false, } = options ?? {};
         const range = globalThis.document.createRange(); // Used by toText - the same instance can be reused for each text node.
         return { ...(await toNode(node)), logs };
         async function toNode(node) {
@@ -27,7 +27,7 @@ export var Native;
             throw new Error(`Unsupported node of type: ${node.nodeType}`);
         }
         async function toElement(element) {
-            return {
+            const result = {
                 type: "element",
                 namespace: element.namespaceURI,
                 prefix: element.prefix,
@@ -43,6 +43,22 @@ export var Native;
                     : null,
                 box: toRectangle(element.getBoundingClientRect()),
             };
+            if (injectDataAlfaId) {
+                const internalId = globalThis.crypto.randomUUID();
+                // Add the internal ID to the result.
+                result.internalId = internalId;
+                // Add the data-alfa-id attribute to the result.
+                result.attributes.push({
+                    type: "attribute",
+                    namespace: null,
+                    prefix: null,
+                    name: "data-alfa-id",
+                    value: internalId,
+                });
+                // Add the data-alfa-id attribute to the element in the page.
+                element.setAttribute("data-alfa-id", internalId);
+            }
+            return result;
         }
         function toAttribute(attribute) {
             return {

package/dist/node/attribute/predicate/has-name.d.ts

@@ -1,5 +1,5 @@
 import type { Refinement } from "@siteimprove/alfa-refinement";
-import { Attribute } from "../../attribute.js";
+import type { Attribute } from "../../attribute.js";
 /**
  * @public
  */

package/dist/node/attribute/predicate/has-name.js

@@ -1,4 +1,3 @@
-import { Attribute } from "../../attribute.js";
 export function hasName(nameOrPredicate, ...names) {
     let predicate;
     if (typeof nameOrPredicate === "function") {
@@ -6,8 +5,8 @@ export function hasName(nameOrPredicate, ...names) {
     }
     else {
         names.unshift(nameOrPredicate);
-        predicate = (name, attribute) => names.some((candidate) => Attribute.foldCase(candidate, attribute.owner) === name);
+        predicate = (name) => names.some((candidate) => candidate === name);
     }
-    return (attribute) => predicate(attribute.name, attribute);
+    return (attribute) => predicate(attribute.name);
 }
 //# sourceMappingURL=has-name.js.map

package/dist/node/attribute.d.ts

@@ -3,14 +3,14 @@ import { Sequence } from "@siteimprove/alfa-sequence";
 import { Trampoline } from "@siteimprove/alfa-trampoline";
 import * as json from "@siteimprove/alfa-json";
 import { Namespace } from "../namespace.js";
-import { Node } from "../node.js";
-import type { Element } from "./element.js";
+import { BaseNode } from "./node.js";
+import type { Element } from "./slotable/element.js";
 import * as predicate from "./attribute/predicate.js";
 import * as autocomplete from "./attribute/autocomplete.js";
 /**
  * @public
  */
-export declare class Attribute<N extends string = string> extends Node<"attribute"> {
+export declare class Attribute<N extends string = string> extends BaseNode<"attribute"> {
     static of<N extends string = string>(namespace: Option<Namespace>, prefix: Option<string>, name: N, value: string, externalId?: string, internalId?: string, extraData?: any): Attribute<N>;
     private readonly _namespace;
     private readonly _prefix;
@@ -31,7 +31,7 @@ export declare class Attribute<N extends string = string> extends Node<"attribut
     /**
      * @internal
      **/
-    protected _internalPath(options?: Node.Traversal): string;
+    protected _internalPath(options?: BaseNode.Traversal): string;
     /**
      * {@link https://html.spec.whatwg.org/#space-separated-tokens}
      */
@@ -44,10 +44,10 @@ export declare class Attribute<N extends string = string> extends Node<"attribut
      * {@link https://html.spec.whatwg.org/#enumerated-attribute}
      */
     enumerate<T extends string>(valid: T, ...rest: Array<T>): Option<T>;
-    toJSON(options: Node.SerializationOptions & {
+    toJSON(options: BaseNode.SerializationOptions & {
         verbosity: json.Serializable.Verbosity.Minimal | json.Serializable.Verbosity.Low;
     }): Attribute.MinimalJSON;
-    toJSON(options?: Node.SerializationOptions): Attribute.JSON<N>;
+    toJSON(options?: BaseNode.SerializationOptions): Attribute.JSON<N>;
     toString(): string;
     /**
      * @internal
@@ -62,9 +62,9 @@ export declare class Attribute<N extends string = string> extends Node<"attribut
  * @public
  */
 export declare namespace Attribute {
-    interface MinimalJSON extends Node.JSON<"attribute"> {
+    interface MinimalJSON extends BaseNode.JSON<"attribute"> {
     }
-    interface JSON<N extends string = string> extends Node.JSON<"attribute"> {
+    interface JSON<N extends string = string> extends BaseNode.JSON<"attribute"> {
         namespace: string | null;
         prefix: string | null;
         name: N;
@@ -75,13 +75,9 @@ export declare namespace Attribute {
      * @internal
      */
     function fromAttribute<N extends string = string>(attribute: JSON<N>): Trampoline<Attribute<N>>;
-    /**
-     * @internal
-     */
-    function cloneAttribute<N extends string = string>(attribute: Attribute<N>): Trampoline<Attribute<N | Lowercase<N>>>;
     /**
      * Conditionally fold the case of an attribute name based on its owner; HTML
-     * attributes are case insensitive while attributes in other namespaces aren't.
+     * attributes are case-insensitive while attributes in other namespaces aren't.
      *
      * @internal
      */

package/dist/node/attribute.js

@@ -5,7 +5,7 @@ import { Sequence } from "@siteimprove/alfa-sequence";
 import { Trampoline } from "@siteimprove/alfa-trampoline";
 import * as json from "@siteimprove/alfa-json";
 import { Namespace } from "../namespace.js";
-import { Node } from "../node.js";
+import { BaseNode } from "./node.js";
 import * as predicate from "./attribute/predicate.js";
 import * as autocomplete from "./attribute/autocomplete.js";
 const { isEmpty } = Iterable;
@@ -13,7 +13,7 @@ const { equals, not } = Predicate;
 /**
  * @public
  */
-export class Attribute extends Node {
+export class Attribute extends BaseNode {
     static of(namespace, prefix, name, value, externalId, internalId, extraData) {
         return new Attribute(namespace, prefix, name, value, externalId, internalId, extraData);
     }
@@ -141,16 +141,9 @@ export class Attribute extends Node {
         return Trampoline.done(Attribute.of(Option.from(attribute.namespace), Option.from(attribute.prefix), attribute.name, attribute.value, attribute.externalId, attribute.internalId));
     }
     Attribute.fromAttribute = fromAttribute;
-    /**
-     * @internal
-     */
-    function cloneAttribute(attribute) {
-        return Trampoline.done(Attribute.of(attribute.namespace, attribute.prefix, attribute.name, attribute.value, attribute.externalId, attribute.internalId, attribute.extraData));
-    }
-    Attribute.cloneAttribute = cloneAttribute;
     /**
      * Conditionally fold the case of an attribute name based on its owner; HTML
-     * attributes are case insensitive while attributes in other namespaces aren't.
+     * attributes are case-insensitive while attributes in other namespaces aren't.
      *
      * @internal
      */

package/dist/node/comment.d.ts

@@ -1,10 +1,10 @@
 import { Trampoline } from "@siteimprove/alfa-trampoline";
 import * as json from "@siteimprove/alfa-json";
-import { Node } from "../node.js";
+import { BaseNode } from "./node.js";
 /**
  * @public
  */
-export declare class Comment extends Node<"comment"> {
+export declare class Comment extends BaseNode<"comment"> {
     static of(data: string, externalId?: string, internalId?: string, extraData?: any): Comment;
     static empty(): Comment;
     private readonly _data;
@@ -13,20 +13,20 @@ export declare class Comment extends Node<"comment"> {
     /**
      * @internal
      **/
-    protected _internalPath(options?: Node.Traversal): string;
-    toJSON(options: Node.SerializationOptions & {
+    protected _internalPath(options?: BaseNode.Traversal): string;
+    toJSON(options: BaseNode.SerializationOptions & {
         verbosity: json.Serializable.Verbosity.Minimal | json.Serializable.Verbosity.Low;
     }): Comment.MinimalJSON;
-    toJSON(options?: Node.SerializationOptions): Comment.JSON;
+    toJSON(options?: BaseNode.SerializationOptions): Comment.JSON;
     toString(): string;
 }
 /**
  * @public
  */
 export declare namespace Comment {
-    interface MinimalJSON extends Node.JSON<"comment"> {
+    interface MinimalJSON extends BaseNode.JSON<"comment"> {
     }
-    interface JSON extends Node.JSON<"comment"> {
+    interface JSON extends BaseNode.JSON<"comment"> {
         data: string;
     }
     function isComment(value: unknown): value is Comment;
@@ -34,9 +34,5 @@ export declare namespace Comment {
      * @internal
      */
     function fromComment(json: JSON): Trampoline<Comment>;
-    /**
-     * @internal
-     */
-    function cloneComment(comment: Comment): Trampoline<Comment>;
 }
 //# sourceMappingURL=comment.d.ts.map

package/dist/node/comment.js

@@ -1,10 +1,10 @@
 import { Trampoline } from "@siteimprove/alfa-trampoline";
 import * as json from "@siteimprove/alfa-json";
-import { Node } from "../node.js";
+import { BaseNode } from "./node.js";
 /**
  * @public
  */
-export class Comment extends Node {
+export class Comment extends BaseNode {
     static of(data, externalId, internalId, extraData) {
         return new Comment(data, externalId, internalId, extraData);
     }
@@ -63,12 +63,5 @@ export class Comment extends Node {
         return Trampoline.done(Comment.of(json.data, json.externalId, json.internalId));
     }
     Comment.fromComment = fromComment;
-    /**
-     * @internal
-     */
-    function cloneComment(comment) {
-        return Trampoline.done(Comment.of(comment.data, comment.externalId, comment.internalId, comment.extraData));
-    }
-    Comment.cloneComment = cloneComment;
 })(Comment || (Comment = {}));
 //# sourceMappingURL=comment.js.map

package/dist/node/document.d.ts

@@ -4,13 +4,14 @@ import { Iterable } from "@siteimprove/alfa-iterable";
 import { Option } from "@siteimprove/alfa-option";
 import { Trampoline } from "@siteimprove/alfa-trampoline";
 import * as json from "@siteimprove/alfa-json";
-import { Node } from "../node.js";
+import { BaseNode } from "./node.js";
 import { Sheet } from "../style/sheet.js";
-import { Element } from "./element.js";
+import type { Element } from "./slotable/index.js";
+import type { Node } from "./index.js";
 /**
  * @public
  */
-export declare class Document extends Node<"document"> {
+export declare class Document extends BaseNode<"document"> {
     static of(children: Iterable<Node>, style?: Iterable<Sheet>, externalId?: string, internalId?: string, extraData?: any): Document;
     static empty(): Document;
     private readonly _style;
@@ -18,15 +19,15 @@ export declare class Document extends Node<"document"> {
     protected constructor(children: Array<Node>, style: Iterable<Sheet>, externalId?: string, internalId?: string, extraData?: any);
     get style(): Iterable<Sheet>;
     get frame(): Option<Element>;
-    parent(options?: Node.Traversal): Option<Node>;
+    parent(options?: BaseNode.Traversal): Option<Node>;
     /**
      * @internal
      **/
-    protected _internalPath(options?: Node.Traversal): string;
-    toJSON(options: Node.SerializationOptions & {
+    protected _internalPath(options?: BaseNode.Traversal): string;
+    toJSON(options: BaseNode.SerializationOptions & {
         verbosity: json.Serializable.Verbosity.Minimal | json.Serializable.Verbosity.Low;
     }): Document.MinimalJSON;
-    toJSON(options?: Node.SerializationOptions): Document.JSON;
+    toJSON(options?: BaseNode.SerializationOptions): Document.JSON;
     toString(): string;
     /**
      * @internal
@@ -41,19 +42,15 @@ export declare class Document extends Node<"document"> {
  * @public
  */
 export declare namespace Document {
-    interface MinimalJSON extends Node.JSON<"document"> {
+    interface MinimalJSON extends BaseNode.JSON<"document"> {
     }
-    interface JSON extends Node.JSON<"document"> {
+    interface JSON extends BaseNode.JSON<"document"> {
         style: Array<Sheet.JSON>;
     }
     function isDocument(value: unknown): value is Document;
     /**
      * @internal
      */
-    function fromDocument(json: JSON, device?: Device): Trampoline<Document>;
-    /**
-     * @internal
-     */
-    function cloneDocument(options: Node.ElementReplacementOptions, device?: Device): (document: Document) => Trampoline<Document>;
+    function fromDocument(json: JSON, fromNode: (json: Node.JSON, device?: Device) => Trampoline<Node>, device?: Device): Trampoline<Document>;
 }
 //# sourceMappingURL=document.d.ts.map

package/dist/node/document.js

@@ -4,13 +4,12 @@ import { None, Option } from "@siteimprove/alfa-option";
 import { String } from "@siteimprove/alfa-string";
 import { Trampoline } from "@siteimprove/alfa-trampoline";
 import * as json from "@siteimprove/alfa-json";
-import { Node } from "../node.js";
+import { BaseNode } from "./node.js";
 import { Sheet } from "../style/sheet.js";
-import { Element } from "./element.js";
 /**
  * @public
  */
-export class Document extends Node {
+export class Document extends BaseNode {
     static of(children, style = [], externalId, internalId, extraData) {
         return new Document(Array.from(children), style, externalId, internalId, extraData);
     }
@@ -29,16 +28,16 @@ export class Document extends Node {
     get frame() {
         return this._frame;
     }
-    parent(options = Node.Traversal.empty) {
-        return options.isSet(Node.Traversal.nested)
+    parent(options = BaseNode.Traversal.empty) {
+        return options.isSet(BaseNode.Traversal.nested)
             ? this.frame
             : super.parent(options);
     }
     /**
      * @internal
      **/
-    _internalPath(options = Node.Traversal.empty) {
-        if (options.isSet(Node.Traversal.nested)) {
+    _internalPath(options = BaseNode.Traversal.empty) {
+        if (options.isSet(BaseNode.Traversal.nested)) {
             return this._frame
                 .map((frame) => frame.path(options) + "/document-node()")
                 .getOr("/");
@@ -91,23 +90,9 @@ export class Document extends Node {
     /**
      * @internal
      */
-    function fromDocument(json, device) {
-        return Trampoline.traverse(json.children ?? [], (child) => Node.fromNode(child, device)).map((children) => Document.of(children, json.style.map(Sheet.from), json.externalId, json.internalId));
+    function fromDocument(json, fromNode, device) {
+        return Trampoline.traverse(json.children ?? [], (child) => fromNode(child, device)).map((children) => Document.of(children, json.style.map(Sheet.from), json.externalId, json.internalId));
     }
     Document.fromDocument = fromDocument;
-    /**
-     * @internal
-     */
-    function cloneDocument(options, device) {
-        return (document) => Trampoline.traverse(document.children(), (child) => {
-            if (Element.isElement(child) && options.predicate(child)) {
-                return Trampoline.done(Array.from(options.newElements));
-            }
-            return Node.cloneNode(child, options, device).map((node) => [node]);
-        }).map((children) => {
-            return Document.of(Iterable.flatten(children), document.style, document.externalId, document.internalId, document.extraData);
-        });
-    }
-    Document.cloneDocument = cloneDocument;
 })(Document || (Document = {}));
 //# sourceMappingURL=document.js.map

package/dist/node/element/augment.d.ts

@@ -1,6 +1,6 @@
 import { Sequence } from "@siteimprove/alfa-sequence";
 import type { InputType } from "./input-type.js";
-declare module "../element.js" {
+declare module "../slotable/element.js" {
     interface Element<N extends string> {
         /**
          * {@link https://html.spec.whatwg.org/#attr-input-type}

package/dist/node/element/augment.js

@@ -8,7 +8,7 @@
 import { None, Some } from "@siteimprove/alfa-option";
 import { Refinement } from "@siteimprove/alfa-refinement";
 import { Sequence } from "@siteimprove/alfa-sequence";
-import { Element } from "../element.js";
+import { Element } from "../slotable/element.js";
 const { isElement } = Element;
 const { and } = Refinement;
 Element.prototype.inputType = function () {