@getodk/xforms-engine 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getodk/xforms-engine",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "license": "Apache-2.0",
   "description": "XForms engine for ODK Web Forms",
   "type": "module",
@@ -29,20 +29,20 @@
     "README.md"
   ],
   "engines": {
-    "node": "^20.19.3 || ^22.12.0 || ^24.3.0",
-    "yarn": "1.22.22"
+    "node": "^20.19.3 || ^22.12.0 || ^24.11.0",
+    "yarn": "4.11.0"
   },
   "scripts": {
-    "build": "npm-run-all -nl build:*",
+    "build": "npm-run-all -nl 'build:*'",
     "build:clean": "rimraf dist/",
     "build:js": "vite build",
-    "build:solid": "export VITE_BUILD_TARGET=solid && vite build",
+    "build:solid": "VITE_BUILD_TARGET=solid vite build",
     "dev": "vite",
-    "docs": "npm-run-all -nl docs:*",
+    "docs": "npm-run-all -nl 'docs:*'",
     "docs:clean": "rimraf api-docs/",
     "docs:api": "typedoc --readme none --out api-docs --entryPoints \"src/**/*\"",
     "docs:serve": "http-server api-docs -o modules/client",
-    "test": "npm-run-all --print-name --print-label test-node:* test-browser:*",
+    "test": "npm-run-all -nl 'test-node:*' 'test-browser:*'",
     "test-node:jsdom": "vitest run",
     "test-browser:chromium": "BROWSER_NAME=chromium vitest run",
     "test-browser:firefox": "BROWSER_NAME=firefox vitest run",
@@ -57,24 +57,28 @@
     "bin-packer": "1.7.0",
     "mdast-util-from-markdown": "^2.0.2",
     "papaparse": "^5.5.3",
-    "solid-js": "^1.9.7",
+    "solid-js": "^1.9.10",
     "temporal-polyfill": "^0.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@getodk/tree-sitter-xpath": "0.2.1",
-    "@getodk/xpath": "0.9.0",
-    "@playwright/test": "^1.55.1",
-    "@types/papaparse": "^5.3.16",
+    "@babel/core": "^7.28.5",
+    "@getodk/tree-sitter-xpath": "0.2.2",
+    "@getodk/xpath": "0.9.1",
+    "@playwright/test": "^1.57.0",
+    "@types/papaparse": "^5.5.0",
     "@vitest/browser": "^3.2.4",
     "babel-plugin-transform-jsbi-to-bigint": "^1.4.2",
     "http-server": "^14.1.1",
-    "jsdom": "^26.1.0",
-    "typedoc": "^0.28.7",
-    "vite": "^7.0.8",
+    "jsdom": "^27.2.0",
+    "npm-run-all2": "^8.0.4",
+    "rimraf": "^6.0.1",
+    "typedoc": "^0.28.14",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-no-bundle": "^4.0.0",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "web-tree-sitter": "0.24.5"
   },
   "peerDependencies": {
     "solid-js": "^1.9.7"

package/src/client/AttributeNode.ts

@@ -5,6 +5,7 @@ import type { InstanceState } from './serialization/InstanceState.ts';
 
 export interface AttributeNodeState {
 	get value(): string;
+	get relevant(): boolean;
 }
 
 /**
@@ -30,11 +31,7 @@ export interface AttributeNode {
 	 */
 	readonly root: Root;
 
-	/**
-	 * Each node links back to its parent, if any. All nodes have a parent except
-	 * the form's {@link root}.
-	 */
-	readonly parent: unknown;
+	readonly owner: unknown;
 
 	/**
 	 * Each node provides a discrete object representing the stateful aspects of

package/src/client/BaseNode.ts

@@ -1,3 +1,4 @@
+import type { Attribute } from '../instance/Attribute.ts';
 import type { TokenListParser } from '../lib/TokenListParser.ts';
 import type { AnyNodeDefinition } from '../parse/model/NodeDefinition.ts';
 import type { NodeAppearances } from './NodeAppearances.ts';
@@ -129,6 +130,11 @@ export interface BaseNodeState {
 	 * is an internal engine consideration.
 	 */
 	get value(): unknown;
+
+	/**
+	 * Nodes can own attributes, which have a literal or reference value.
+	 */
+	get attributes(): readonly Attribute[];
 }
 
 /**

package/src/client/form/FormInstanceConfig.ts

@@ -1,6 +1,21 @@
 import type { InstanceAttachmentsConfig } from '../attachments/InstanceAttachmentsConfig.ts';
 import type { OpaqueReactiveObjectFactory } from '../OpaqueReactiveObjectFactory.ts';
 
+/**
+ * @see https://getodk.github.io/xforms-spec/#preload-attributes
+ */
+export interface PreloadProperties {
+	/**
+	 * The unique identifier for this device. If not provided, then an identifier will be
+	 * generated during the first page load and stored in localstorage and reused for
+	 * subsequent form loads.
+	 */
+	readonly deviceID?: string;
+	readonly email?: string;
+	readonly username?: string;
+	readonly phoneNumber?: string;
+}
+
 export interface FormInstanceConfig {
 	/**
 	 * A client may specify a generic function for constructing stateful objects.
@@ -18,4 +33,6 @@ export interface FormInstanceConfig {
 	readonly stateFactory?: OpaqueReactiveObjectFactory;
 
 	readonly instanceAttachments?: InstanceAttachmentsConfig;
+
+	readonly preloadProperties?: PreloadProperties;
 }

package/src/client/validation.ts

@@ -204,4 +204,4 @@ export interface NullValidationState {
 export type NodeValidationState =
 	| AncestorNodeValidationState
 	| LeafNodeValidationState
-	| NullValidationState;
+	| NullValidationState; // eslint-disable-line @typescript-eslint/no-redundant-type-constituents

package/src/entrypoints/FormInstance.ts

@@ -41,6 +41,7 @@ export class FormInstance<Mode extends FormInstanceInitializationMode>
 		const config: InstanceConfig = {
 			clientStateFactory: instanceConfig.stateFactory ?? identity,
 			computeAttachmentName: instanceConfig.instanceAttachments?.fileNameFactory ?? (() => null),
+			preloadProperties: instanceConfig.preloadProperties ?? {},
 		};
 		const primaryInstanceOptions: PrimaryInstanceOptions<Mode> = {
 			...options.instanceOptions,

package/src/instance/Attribute.ts

@@ -12,42 +12,38 @@ import {
 	type RuntimeValue,
 } from '../lib/codecs/getSharedValueCodec.ts';
 import type { RuntimeValueSetter, RuntimeValueState } from '../lib/codecs/ValueCodec.ts';
-import { createAttributeValueState } from '../lib/reactivity/createAttributeValueState.ts';
+import { createInstanceValueState } from '../lib/reactivity/createInstanceValueState.ts';
 import type { CurrentState } from '../lib/reactivity/node-state/createCurrentState.ts';
 import type { EngineState } from '../lib/reactivity/node-state/createEngineState.ts';
 import {
 	createSharedNodeState,
 	type SharedNodeState,
 } from '../lib/reactivity/node-state/createSharedNodeState.ts';
+import type { ReactiveScope } from '../lib/reactivity/scope.ts';
 import type { SimpleAtomicState } from '../lib/reactivity/types.ts';
 import type { AttributeDefinition } from '../parse/model/AttributeDefinition.ts';
-import type { DescendantNodeSharedStateSpec } from './abstract/DescendantNode.ts';
-import { InstanceNode } from './abstract/InstanceNode.ts';
-import type { AnyParentNode } from './hierarchy.ts';
+import type { AnyChildNode, AnyNode } from './hierarchy.ts';
 import type { AttributeContext } from './internal-api/AttributeContext.ts';
+import type { InstanceConfig } from './internal-api/InstanceConfig.ts';
 import type { DecodeInstanceValue } from './internal-api/InstanceValueContext.ts';
 import type { ClientReactiveSerializableAttributeNode } from './internal-api/serialization/ClientReactiveSerializableAttributeNode.ts';
+import type { PrimaryInstance } from './PrimaryInstance.ts';
 import type { Root } from './Root.ts';
 
-export interface AttributeStateSpec extends DescendantNodeSharedStateSpec {
-	readonly children: null;
-	readonly attributes: null;
+export interface AttributeStateSpec {
 	readonly value: SimpleAtomicState<string>;
 	readonly instanceValue: Accessor<string>;
-	readonly label: null;
-	readonly hint: null;
-	readonly valueOptions: null;
+	readonly relevant: Accessor<boolean>;
 }
 
 export class Attribute
-	extends InstanceNode<AttributeDefinition, AttributeStateSpec, AnyParentNode, null>
 	implements
 		AttributeNode,
 		ClientReactiveSerializableAttributeNode,
 		AttributeContext,
 		XFormsXPathAttribute
 {
-	override readonly [XPathNodeKindKey] = 'attribute';
+	readonly [XPathNodeKindKey] = 'attribute';
 
 	protected readonly state: SharedNodeState<AttributeStateSpec>;
 	protected readonly engineState: EngineState<AttributeStateSpec>;
@@ -55,7 +51,7 @@ export class Attribute
 
 	readonly nodeType = 'attribute';
 	readonly currentState: CurrentState<AttributeStateSpec>;
-	override readonly instanceState: InstanceState;
+	readonly instanceState: InstanceState;
 
 	readonly appearances = null;
 	readonly nodeOptions = null;
@@ -68,15 +64,19 @@ export class Attribute
 	protected readonly setValueState: RuntimeValueSetter<RuntimeInputValue<'string'>>;
 	readonly evaluator: EngineXPathEvaluator;
 	readonly getActiveLanguage: Accessor<ActiveLanguage>;
+	readonly contextNode: AnyNode;
+	readonly scope: ReactiveScope;
+	readonly rootDocument: PrimaryInstance;
+	readonly instanceConfig: InstanceConfig;
 
-	override readonly root: Root;
+	readonly root: Root;
 
 	readonly isRelevant: Accessor<boolean> = () => {
-		return this.parent.isRelevant();
+		return this.owner.isRelevant();
 	};
 
 	readonly isAttached: Accessor<boolean> = () => {
-		return this.parent.isAttached();
+		return this.owner.isAttached();
 	};
 
 	readonly isReadonly: Accessor<boolean> = () => {
@@ -84,37 +84,41 @@ export class Attribute
 	};
 
 	readonly hasReadonlyAncestor: Accessor<boolean> = () => {
-		const { parent } = this;
-		return parent.hasReadonlyAncestor() || parent.isReadonly();
+		const { owner } = this;
+		return owner.hasReadonlyAncestor() || owner.isReadonly();
 	};
 
 	readonly hasNonRelevantAncestor: Accessor<boolean> = () => {
-		const { parent } = this;
-		return parent.hasNonRelevantAncestor() || !parent.isRelevant();
+		const { owner } = this;
+		return owner.hasNonRelevantAncestor() || !owner.isRelevant();
+	};
+
+	readonly contextReference = (): string => {
+		return this.owner.contextReference() + '/@' + this.definition.qualifiedName.getPrefixedName();
 	};
 
 	constructor(
-		parent: AnyParentNode,
-		definition: AttributeDefinition,
-		override readonly instanceNode: StaticAttribute
+		readonly owner: AnyNode,
+		readonly definition: AttributeDefinition,
+		readonly instanceNode: StaticAttribute
 	) {
 		const codec = getSharedValueCodec('string');
 
-		super(parent.instanceConfig, parent, instanceNode, definition, {
-			scope: parent.scope,
-			computeReference: (): string => '@' + this.definition.qualifiedName.getPrefixedName(),
-		});
+		this.contextNode = owner;
+		this.scope = owner.scope;
+		this.rootDocument = owner.rootDocument;
 
-		this.root = parent.root;
+		this.root = owner.root;
+		this.instanceConfig = owner.instanceConfig;
 
-		this.getActiveLanguage = parent.getActiveLanguage;
+		this.getActiveLanguage = owner.getActiveLanguage;
 		this.validationState = { violations: [] };
 
 		this.valueType = 'string';
-		this.evaluator = parent.evaluator;
+		this.evaluator = owner.evaluator;
 		this.decodeInstanceValue = codec.decodeInstanceValue;
 
-		const instanceValueState = createAttributeValueState(this);
+		const instanceValueState = createInstanceValueState(this);
 		const valueState = codec.createRuntimeValueState(instanceValueState);
 
 		const [getInstanceValue] = instanceValueState;
@@ -122,26 +126,14 @@ export class Attribute
 
 		this.getInstanceValue = getInstanceValue;
 		this.setValueState = setValueState;
-		this.getXPathValue = () => {
-			return this.getInstanceValue();
-		};
 		this.valueState = valueState;
 
 		const state = createSharedNodeState(
-			this.scope,
+			owner.scope,
 			{
-				reference: this.contextReference,
-				readonly: this.isReadonly,
-				relevant: this.isRelevant,
-				required: () => false,
-
-				label: null,
-				hint: null,
-				children: null,
-				valueOptions: null,
 				value: this.valueState,
 				instanceValue: this.getInstanceValue,
-				attributes: null,
+				relevant: this.owner.isRelevant,
 			},
 			this.instanceConfig
 		);
@@ -161,4 +153,12 @@ export class Attribute
 	getChildren(): readonly [] {
 		return [];
 	}
+
+	getXPathChildNodes(): readonly AnyChildNode[] {
+		return [];
+	}
+
+	getXPathValue(): string {
+		return '';
+	}
 }

package/src/instance/Group.ts

@@ -8,10 +8,7 @@ import type { AncestorNodeValidationState } from '../client/validation.ts';
 import type { XFormsXPathElement } from '../integration/xpath/adapter/XFormsXPathNode.ts';
 import type { StaticElement } from '../integration/xpath/static-dom/StaticElement.ts';
 import { createParentNodeInstanceState } from '../lib/client-reactivity/instance-state/createParentNodeInstanceState.ts';
-import {
-	createAttributeState,
-	type AttributeState,
-} from '../lib/reactivity/createAttributeState.ts';
+import { createAttributeState } from '../lib/reactivity/createAttributeState.ts';
 import type { ChildrenState } from '../lib/reactivity/createChildrenState.ts';
 import { createChildrenState } from '../lib/reactivity/createChildrenState.ts';
 import type { MaterializedChildren } from '../lib/reactivity/materializeCurrentStateChildren.ts';
@@ -50,7 +47,6 @@ export class Group
 		ClientReactiveSerializableParentNode<GeneralChildNode>
 {
 	private readonly childrenState: ChildrenState<GeneralChildNode>;
-	private readonly attributeState: AttributeState;
 
 	override readonly [XPathNodeKindKey] = 'element';
 
@@ -79,7 +75,6 @@ export class Group
 		const attributeState = createAttributeState(this.scope);
 
 		this.childrenState = childrenState;
-		this.attributeState = attributeState;
 
 		const state = createSharedNodeState(
 			this.scope,
@@ -116,8 +111,4 @@ export class Group
 	getChildren(): readonly GeneralChildNode[] {
 		return this.childrenState.getChildren();
 	}
-
-	getAttributes(): readonly Attribute[] {
-		return this.attributeState.getAttributes();
-	}
 }

package/src/instance/InputControl.ts

@@ -13,6 +13,7 @@ import type { XFormsXPathElement } from '../integration/xpath/adapter/XFormsXPat
 import type { StaticLeafElement } from '../integration/xpath/static-dom/StaticElement.ts';
 import type { RuntimeInputValue, RuntimeValue } from '../lib/codecs/getSharedValueCodec.ts';
 import { getSharedValueCodec } from '../lib/codecs/getSharedValueCodec.ts';
+import { createAttributeState } from '../lib/reactivity/createAttributeState.ts';
 import type { CurrentState } from '../lib/reactivity/node-state/createCurrentState.ts';
 import type { EngineState } from '../lib/reactivity/node-state/createEngineState.ts';
 import type { SharedNodeState } from '../lib/reactivity/node-state/createSharedNodeState.ts';
@@ -21,6 +22,8 @@ import { createFieldHint } from '../lib/reactivity/text/createFieldHint.ts';
 import { createNodeLabel } from '../lib/reactivity/text/createNodeLabel.ts';
 import type { InputControlDefinition } from '../parse/body/control/InputControlDefinition.ts';
 import { ValueNode, type ValueNodeStateSpec } from './abstract/ValueNode.ts';
+import { buildAttributes } from './attachments/buildAttributes.ts';
+import type { Attribute } from './Attribute.ts';
 import type { GeneralParentNode } from './hierarchy.ts';
 import type { EvaluationContext } from './internal-api/EvaluationContext.ts';
 import type { ClientReactiveSerializableValueNode } from './internal-api/serialization/ClientReactiveSerializableValueNode.ts';
@@ -69,6 +72,7 @@ const nodeOptionsFactoryByType: NodeOptionsFactoryByType = {
 interface InputControlStateSpec<V extends ValueType> extends ValueNodeStateSpec<RuntimeValue<V>> {
 	readonly label: Accessor<TextRange<'label'> | null>;
 	readonly hint: Accessor<TextRange<'hint'> | null>;
+	readonly attributes: Accessor<readonly Attribute[]>;
 	readonly valueOptions: null;
 }
 
@@ -118,6 +122,7 @@ export class InputControl<V extends ValueType = ValueType>
 
 		this.appearances = definition.bodyElement.appearances;
 		this.nodeOptions = nodeOptionsFactoryByType[definition.valueType](definition.bodyElement);
+		const attributeState = createAttributeState(this.scope);
 
 		const state = createSharedNodeState(
 			this.scope,
@@ -130,7 +135,7 @@ export class InputControl<V extends ValueType = ValueType>
 				label: createNodeLabel(this, definition),
 				hint: createFieldHint(this, definition),
 				children: null,
-				attributes: null,
+				attributes: attributeState.getAttributes,
 				valueOptions: null,
 				value: this.valueState,
 				instanceValue: this.getInstanceValue,
@@ -138,6 +143,8 @@ export class InputControl<V extends ValueType = ValueType>
 			this.instanceConfig
 		);
 
+		attributeState.setAttributes(buildAttributes(this));
+
 		this.state = state;
 		this.engineState = state.engineState;
 		this.currentState = state.currentState;

package/src/instance/ModelValue.ts

@@ -5,11 +5,13 @@ import type { XFormsXPathElement } from '../integration/xpath/adapter/XFormsXPat
 import type { StaticLeafElement } from '../integration/xpath/static-dom/StaticElement.ts';
 import type { RuntimeInputValue, RuntimeValue } from '../lib/codecs/getSharedValueCodec.ts';
 import { getSharedValueCodec } from '../lib/codecs/getSharedValueCodec.ts';
+import { createAttributeState } from '../lib/reactivity/createAttributeState.ts';
 import type { CurrentState } from '../lib/reactivity/node-state/createCurrentState.ts';
 import type { EngineState } from '../lib/reactivity/node-state/createEngineState.ts';
 import type { SharedNodeState } from '../lib/reactivity/node-state/createSharedNodeState.ts';
 import { createSharedNodeState } from '../lib/reactivity/node-state/createSharedNodeState.ts';
 import { ValueNode, type ValueNodeStateSpec } from './abstract/ValueNode.ts';
+import { buildAttributes } from './attachments/buildAttributes.ts';
 import type { GeneralParentNode } from './hierarchy.ts';
 import type { EvaluationContext } from './internal-api/EvaluationContext.ts';
 import type { ValidationContext } from './internal-api/ValidationContext.ts';
@@ -65,6 +67,8 @@ export class ModelValue<V extends ValueType = ValueType>
 
 		super(parent, instanceNode, definition, codec);
 
+		const attributeState = createAttributeState(this.scope);
+
 		const state = createSharedNodeState(
 			this.scope,
 			{
@@ -76,7 +80,7 @@ export class ModelValue<V extends ValueType = ValueType>
 				label: null,
 				hint: null,
 				children: null,
-				attributes: null,
+				attributes: attributeState.getAttributes,
 				valueOptions: null,
 				value: this.valueState,
 				instanceValue: this.getInstanceValue,
@@ -84,6 +88,8 @@ export class ModelValue<V extends ValueType = ValueType>
 			this.instanceConfig
 		);
 
+		attributeState.setAttributes(buildAttributes(this));
+
 		this.state = state;
 		this.engineState = state.engineState;
 		this.currentState = state.currentState;

package/src/instance/Note.ts

@@ -8,6 +8,7 @@ import type { XFormsXPathElement } from '../integration/xpath/adapter/XFormsXPat
 import type { StaticLeafElement } from '../integration/xpath/static-dom/StaticElement.ts';
 import { getNoteCodec } from '../lib/codecs/getNoteCodec.ts';
 import type { NoteInputValue, NoteRuntimeValue } from '../lib/codecs/NoteCodec.ts';
+import { createAttributeState } from '../lib/reactivity/createAttributeState.ts';
 import { createNoteReadonlyThunk } from '../lib/reactivity/createNoteReadonlyThunk.ts';
 import type { CurrentState } from '../lib/reactivity/node-state/createCurrentState.ts';
 import type { EngineState } from '../lib/reactivity/node-state/createEngineState.ts';
@@ -18,6 +19,7 @@ import { createNodeLabel } from '../lib/reactivity/text/createNodeLabel.ts';
 import { createNoteText, type ComputedNoteText } from '../lib/reactivity/text/createNoteText.ts';
 import type { NoteNodeDefinition } from '../parse/model/NoteNodeDefinition.ts';
 import { ValueNode, type ValueNodeStateSpec } from './abstract/ValueNode.ts';
+import { buildAttributes } from './attachments/buildAttributes.ts';
 import type { GeneralParentNode } from './hierarchy.ts';
 import type { EvaluationContext } from './internal-api/EvaluationContext.ts';
 import type { ClientReactiveSerializableValueNode } from './internal-api/serialization/ClientReactiveSerializableValueNode.ts';
@@ -66,6 +68,7 @@ export class Note<V extends ValueType = ValueType>
 
 		const isReadonly = createNoteReadonlyThunk(this, definition);
 		const noteTextComputation = createNoteText(this, definition.noteTextDefinition);
+		const attributeState = createAttributeState(this.scope);
 
 		let noteText: ComputedNoteText;
 		let label: Accessor<TextRange<'label', 'form'> | null>;
@@ -105,7 +108,7 @@ export class Note<V extends ValueType = ValueType>
 				noteText,
 
 				children: null,
-				attributes: null,
+				attributes: attributeState.getAttributes,
 				valueOptions: null,
 				value: this.valueState,
 				instanceValue: this.getInstanceValue,
@@ -113,6 +116,8 @@ export class Note<V extends ValueType = ValueType>
 			this.instanceConfig
 		);
 
+		attributeState.setAttributes(buildAttributes(this));
+
 		this.state = state;
 		this.engineState = state.engineState;
 		this.currentState = state.currentState;

package/src/instance/PrimaryInstance.ts

@@ -17,10 +17,7 @@ import { EngineXPathEvaluator } from '../integration/xpath/EngineXPathEvaluator.
 import type { StaticDocument } from '../integration/xpath/static-dom/StaticDocument.ts';
 import { createPrimaryInstanceState } from '../lib/client-reactivity/instance-state/createPrimaryInstanceState.ts';
 import { prepareInstancePayload } from '../lib/client-reactivity/instance-state/prepareInstancePayload.ts';
-import {
-	createAttributeState,
-	type AttributeState,
-} from '../lib/reactivity/createAttributeState.ts';
+import { createAttributeState } from '../lib/reactivity/createAttributeState.ts';
 import { createChildrenState } from '../lib/reactivity/createChildrenState.ts';
 import { createTranslationState } from '../lib/reactivity/createTranslationState.ts';
 import type { MaterializedChildren } from '../lib/reactivity/materializeCurrentStateChildren.ts';
@@ -161,8 +158,6 @@ export class PrimaryInstance<
 	readonly evaluator: EngineXPathEvaluator;
 	override readonly contextNode = this;
 
-	private readonly attributeState: AttributeState;
-
 	constructor(options: PrimaryInstanceOptions<Mode>) {
 		const { mode, initialState, scope, model, secondaryInstances, config } = options;
 		const { instance: modelInstance } = model;
@@ -205,7 +200,6 @@ export class PrimaryInstance<
 		const attributeState = createAttributeState(this.scope);
 
 		this.getChildren = childrenState.getChildren;
-		this.attributeState = attributeState;
 
 		const stateSpec: PrimaryInstanceStateSpec = {
 			activeLanguage: getActiveLanguage,
@@ -292,8 +286,4 @@ export class PrimaryInstance<
 
 		return Promise.resolve(result);
 	}
-
-	getAttributes(): readonly Attribute[] {
-		return this.attributeState.getAttributes();
-	}
 }

package/src/instance/RangeControl.ts

@@ -11,6 +11,7 @@ import type { XFormsXPathElement } from '../integration/xpath/adapter/XFormsXPat
 import type { StaticLeafElement } from '../integration/xpath/static-dom/StaticElement.ts';
 import { RangeCodec } from '../lib/codecs/RangeCodec.ts';
 import { getSharedValueCodec } from '../lib/codecs/getSharedValueCodec.ts';
+import { createAttributeState } from '../lib/reactivity/createAttributeState.ts';
 import type { CurrentState } from '../lib/reactivity/node-state/createCurrentState.ts';
 import type { EngineState } from '../lib/reactivity/node-state/createEngineState.ts';
 import type { SharedNodeState } from '../lib/reactivity/node-state/createSharedNodeState.ts';
@@ -24,6 +25,7 @@ import type {
 } from '../parse/model/RangeNodeDefinition.ts';
 import type { Root } from './Root.ts';
 import { ValueNode, type ValueNodeStateSpec } from './abstract/ValueNode.ts';
+import { buildAttributes } from './attachments/buildAttributes.ts';
 import type { GeneralParentNode } from './hierarchy.ts';
 import type { EvaluationContext } from './internal-api/EvaluationContext.ts';
 import type { ValidationContext } from './internal-api/ValidationContext.ts';
@@ -82,6 +84,7 @@ export class RangeControl<V extends RangeValueType = RangeValueType>
 		super(parent, instanceNode, definition, codec);
 
 		this.appearances = definition.bodyElement.appearances;
+		const attributeState = createAttributeState(this.scope);
 
 		const state = createSharedNodeState(
 			this.scope,
@@ -94,7 +97,7 @@ export class RangeControl<V extends RangeValueType = RangeValueType>
 				label: createNodeLabel(this, definition),
 				hint: createFieldHint(this, definition),
 				children: null,
-				attributes: null,
+				attributes: attributeState.getAttributes,
 				valueOptions: null,
 				value: this.valueState,
 				instanceValue: this.getInstanceValue,
@@ -102,6 +105,8 @@ export class RangeControl<V extends RangeValueType = RangeValueType>
 			this.instanceConfig
 		);
 
+		attributeState.setAttributes(buildAttributes(this));
+
 		this.state = state;
 		this.engineState = state.engineState;
 		this.currentState = state.currentState;

package/src/instance/RankControl.ts

@@ -10,6 +10,7 @@ import type { XFormsXPathElement } from '../integration/xpath/adapter/XFormsXPat
 import type { StaticLeafElement } from '../integration/xpath/static-dom/StaticElement.ts';
 import { sharedValueCodecs } from '../lib/codecs/getSharedValueCodec.ts';
 import { MultipleValueItemCodec } from '../lib/codecs/items/MultipleValueItemCodec.ts';
+import { createAttributeState } from '../lib/reactivity/createAttributeState.ts';
 import { createItemCollection } from '../lib/reactivity/createItemCollection.ts';
 import type { CurrentState } from '../lib/reactivity/node-state/createCurrentState.ts';
 import type { EngineState } from '../lib/reactivity/node-state/createEngineState.ts';
@@ -22,6 +23,7 @@ import type { UnknownAppearanceDefinition } from '../parse/body/appearance/unkno
 import type { Root } from './Root.ts';
 import type { ValueNodeStateSpec } from './abstract/ValueNode.ts';
 import { ValueNode } from './abstract/ValueNode.ts';
+import { buildAttributes } from './attachments/buildAttributes.ts';
 import type { GeneralParentNode } from './hierarchy.ts';
 import type { EvaluationContext } from './internal-api/EvaluationContext.ts';
 import type { ValidationContext } from './internal-api/ValidationContext.ts';
@@ -123,6 +125,8 @@ export class RankControl
 		const baseValueState = this.valueState;
 		const [baseGetValue, setValue] = baseValueState;
 
+		const attributeState = createAttributeState(this.scope);
+
 		/**
 		 * @ToDo As new value options become available, they're not yet in the
 		 * `currentValues` state. This appends them. We intend to change this
@@ -174,7 +178,7 @@ export class RankControl
 				label: createNodeLabel(this, definition),
 				hint: createFieldHint(this, definition),
 				children: null,
-				attributes: null,
+				attributes: attributeState.getAttributes,
 				valueOptions,
 				value: valueState,
 				instanceValue: this.getInstanceValue,
@@ -182,6 +186,8 @@ export class RankControl
 			this.instanceConfig
 		);
 
+		attributeState.setAttributes(buildAttributes(this));
+
 		this.state = state;
 		this.engineState = state.engineState;
 		this.currentState = state.currentState;