@getodk/xforms-engine 0.14.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getodk/xforms-engine",
-  "version": "0.14.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.0",
-    "@getodk/xpath": "0.8.1",
-    "@playwright/test": "^1.53.2",
-    "@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.3",
+    "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

@@ -0,0 +1,59 @@
+import type { Root } from '../instance/Root.ts';
+import type { AttributeDefinition } from '../parse/model/AttributeDefinition.ts';
+import type { OpaqueReactiveObjectFactory } from './OpaqueReactiveObjectFactory.ts';
+import type { InstanceState } from './serialization/InstanceState.ts';
+
+export interface AttributeNodeState {
+	get value(): string;
+	get relevant(): boolean;
+}
+
+/**
+ * Base interface for common/shared aspects of attributes.
+ */
+export interface AttributeNode {
+	/**
+	 * Specifies the node's general type. This can be useful for narrowing types,
+	 * e.g. those of children.
+	 */
+	readonly nodeType: 'attribute';
+
+	/**
+	 * Each node has a definition which specifies aspects of the node defined in
+	 * the form. These aspects include (but are not limited to) the node's data
+	 * type, its body presentation constraints (if any), its bound nodeset, and
+	 * so on...
+	 */
+	readonly definition: AttributeDefinition;
+
+	/**
+	 * Each node links back to the node representing the root of the form.
+	 */
+	readonly root: Root;
+
+	readonly owner: unknown;
+
+	/**
+	 * Each node provides a discrete object representing the stateful aspects of
+	 * that node which will change over time. This includes state which is either
+	 * client-/user-mutable, or state which is computed based on the core XForms
+	 * computation model. Each node also exposes {@link validationState}, which
+	 * reflects the validity of the node, or its descendants.
+	 *
+	 * When a client provides a {@link OpaqueReactiveObjectFactory}, the engine
+	 * will update the properties of this object as their respective states
+	 * change, so a client can implement reactive updates that respond to changes
+	 * as they occur.
+	 */
+	readonly currentState: AttributeNodeState;
+
+	/**
+	 * Represents the current instance state of the node.
+	 *
+	 * @see {@link InstanceState.instanceXML} for additional detail.
+	 */
+	readonly instanceState: InstanceState;
+
+	readonly appearances: null;
+	readonly nodeOptions: null;
+}

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/index.ts

@@ -1,5 +1,6 @@
 export type * from './attachments/InstanceAttachmentMeta.ts';
 export type * from './attachments/InstanceAttachmentsConfig.ts';
+export type * from './AttributeNode.ts';
 export type * from './constants.ts';
 export * as constants from './constants.ts';
 export type * from './form/CreateFormInstance.ts';

package/src/client/node-types.ts

@@ -13,6 +13,7 @@ export type LeafNodeType =
 	| 'trigger'
 	| 'range'
 	| 'rank'
+	| 'attribute'
 	| 'upload';
 
 // prettier-ignore

package/src/client/validation.ts

@@ -193,7 +193,15 @@ export interface AncestorNodeValidationState {
 	get violations(): readonly DescendantNodeViolationReference[];
 }
 
+/**
+ * Convenience interface for nodes that cannot be invalid.
+ */
+export interface NullValidationState {
+	get violations(): readonly [];
+}
+
 // prettier-ignore
 export type NodeValidationState =
 	| AncestorNodeValidationState
-	| LeafNodeValidationState;
+	| LeafNodeValidationState
+	| 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

@@ -0,0 +1,164 @@
+import { XPathNodeKindKey } from '@getodk/xpath';
+import type { Accessor } from 'solid-js';
+import type { AttributeNode } from '../client/AttributeNode.ts';
+import type { ActiveLanguage, InstanceState, NullValidationState } from '../client/index.ts';
+import type { XFormsXPathAttribute } from '../integration/xpath/adapter/XFormsXPathNode.ts';
+import type { EngineXPathEvaluator } from '../integration/xpath/EngineXPathEvaluator.ts';
+import type { StaticAttribute } from '../integration/xpath/static-dom/StaticAttribute.ts';
+import { createAttributeNodeInstanceState } from '../lib/client-reactivity/instance-state/createAttributeNodeInstanceState.ts';
+import {
+	getSharedValueCodec,
+	type RuntimeInputValue,
+	type RuntimeValue,
+} from '../lib/codecs/getSharedValueCodec.ts';
+import type { RuntimeValueSetter, RuntimeValueState } from '../lib/codecs/ValueCodec.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 { 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 {
+	readonly value: SimpleAtomicState<string>;
+	readonly instanceValue: Accessor<string>;
+	readonly relevant: Accessor<boolean>;
+}
+
+export class Attribute
+	implements
+		AttributeNode,
+		ClientReactiveSerializableAttributeNode,
+		AttributeContext,
+		XFormsXPathAttribute
+{
+	readonly [XPathNodeKindKey] = 'attribute';
+
+	protected readonly state: SharedNodeState<AttributeStateSpec>;
+	protected readonly engineState: EngineState<AttributeStateSpec>;
+	readonly validationState: NullValidationState;
+
+	readonly nodeType = 'attribute';
+	readonly currentState: CurrentState<AttributeStateSpec>;
+	readonly instanceState: InstanceState;
+
+	readonly appearances = null;
+	readonly nodeOptions = null;
+
+	readonly valueType: string;
+	readonly decodeInstanceValue: DecodeInstanceValue;
+
+	protected readonly getInstanceValue: Accessor<string>;
+	protected readonly valueState: RuntimeValueState<RuntimeValue<'string'>>;
+	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;
+
+	readonly root: Root;
+
+	readonly isRelevant: Accessor<boolean> = () => {
+		return this.owner.isRelevant();
+	};
+
+	readonly isAttached: Accessor<boolean> = () => {
+		return this.owner.isAttached();
+	};
+
+	readonly isReadonly: Accessor<boolean> = () => {
+		return true;
+	};
+
+	readonly hasReadonlyAncestor: Accessor<boolean> = () => {
+		const { owner } = this;
+		return owner.hasReadonlyAncestor() || owner.isReadonly();
+	};
+
+	readonly hasNonRelevantAncestor: Accessor<boolean> = () => {
+		const { owner } = this;
+		return owner.hasNonRelevantAncestor() || !owner.isRelevant();
+	};
+
+	readonly contextReference = (): string => {
+		return this.owner.contextReference() + '/@' + this.definition.qualifiedName.getPrefixedName();
+	};
+
+	constructor(
+		readonly owner: AnyNode,
+		readonly definition: AttributeDefinition,
+		readonly instanceNode: StaticAttribute
+	) {
+		const codec = getSharedValueCodec('string');
+
+		this.contextNode = owner;
+		this.scope = owner.scope;
+		this.rootDocument = owner.rootDocument;
+
+		this.root = owner.root;
+		this.instanceConfig = owner.instanceConfig;
+
+		this.getActiveLanguage = owner.getActiveLanguage;
+		this.validationState = { violations: [] };
+
+		this.valueType = 'string';
+		this.evaluator = owner.evaluator;
+		this.decodeInstanceValue = codec.decodeInstanceValue;
+
+		const instanceValueState = createInstanceValueState(this);
+		const valueState = codec.createRuntimeValueState(instanceValueState);
+
+		const [getInstanceValue] = instanceValueState;
+		const [, setValueState] = valueState;
+
+		this.getInstanceValue = getInstanceValue;
+		this.setValueState = setValueState;
+		this.valueState = valueState;
+
+		const state = createSharedNodeState(
+			owner.scope,
+			{
+				value: this.valueState,
+				instanceValue: this.getInstanceValue,
+				relevant: this.owner.isRelevant,
+			},
+			this.instanceConfig
+		);
+
+		this.state = state;
+		this.engineState = state.engineState;
+		this.currentState = state.currentState;
+		this.instanceState = createAttributeNodeInstanceState(this);
+	}
+
+	setValue(value: string): Root {
+		this.setValueState(value);
+
+		return this.root;
+	}
+
+	getChildren(): readonly [] {
+		return [];
+	}
+
+	getXPathChildNodes(): readonly AnyChildNode[] {
+		return [];
+	}
+
+	getXPathValue(): string {
+		return '';
+	}
+}

package/src/instance/Group.ts

@@ -8,6 +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 } 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';
@@ -20,6 +21,8 @@ import { createNodeLabel } from '../lib/reactivity/text/createNodeLabel.ts';
 import { createAggregatedViolations } from '../lib/reactivity/validation/createAggregatedViolations.ts';
 import type { DescendantNodeSharedStateSpec } from './abstract/DescendantNode.ts';
 import { DescendantNode } from './abstract/DescendantNode.ts';
+import { buildAttributes } from './attachments/buildAttributes.ts';
+import { Attribute } from './Attribute.ts';
 import { buildChildren } from './children/buildChildren.ts';
 import type { GeneralChildNode, GeneralParentNode } from './hierarchy.ts';
 import type { EvaluationContext } from './internal-api/EvaluationContext.ts';
@@ -30,6 +33,7 @@ interface GroupStateSpec extends DescendantNodeSharedStateSpec {
 	readonly label: Accessor<TextRange<'label'> | null>;
 	readonly hint: null;
 	readonly children: Accessor<readonly FormNodeID[]>;
+	readonly attributes: Accessor<readonly Attribute[]>;
 	readonly valueOptions: null;
 	readonly value: null;
 }
@@ -68,6 +72,7 @@ export class Group
 		this.appearances = definition.bodyElement?.appearances ?? null;
 
 		const childrenState = createChildrenState<Group, GeneralChildNode>(this);
+		const attributeState = createAttributeState(this.scope);
 
 		this.childrenState = childrenState;
 
@@ -82,6 +87,7 @@ export class Group
 				label: createNodeLabel(this, definition),
 				hint: null,
 				children: childrenState.childIds,
+				attributes: attributeState.getAttributes,
 				valueOptions: null,
 				value: null,
 			},
@@ -97,6 +103,7 @@ export class Group
 		);
 
 		childrenState.setChildren(buildChildren(this));
+		attributeState.setAttributes(buildAttributes(this));
 		this.validationState = createAggregatedViolations(this, this.instanceConfig);
 		this.instanceState = createParentNodeInstanceState(this);
 	}

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,6 +135,7 @@ export class InputControl<V extends ValueType = ValueType>
 				label: createNodeLabel(this, definition),
 				hint: createFieldHint(this, definition),
 				children: null,
+				attributes: attributeState.getAttributes,
 				valueOptions: null,
 				value: this.valueState,
 				instanceValue: this.getInstanceValue,
@@ -137,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,6 +80,7 @@ export class ModelValue<V extends ValueType = ValueType>
 				label: null,
 				hint: null,
 				children: null,
+				attributes: attributeState.getAttributes,
 				valueOptions: null,
 				value: this.valueState,
 				instanceValue: this.getInstanceValue,
@@ -83,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,6 +108,7 @@ export class Note<V extends ValueType = ValueType>
 				noteText,
 
 				children: null,
+				attributes: attributeState.getAttributes,
 				valueOptions: null,
 				value: this.valueState,
 				instanceValue: this.getInstanceValue,
@@ -112,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,6 +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 } 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';
@@ -32,7 +33,9 @@ import type { ModelDefinition } from '../parse/model/ModelDefinition.ts';
 import type { RootDefinition } from '../parse/model/RootDefinition.ts';
 import type { SecondaryInstancesDefinition } from '../parse/model/SecondaryInstance/SecondaryInstancesDefinition.ts';
 import { InstanceNode } from './abstract/InstanceNode.ts';
+import { buildAttributes } from './attachments/buildAttributes.ts';
 import { InstanceAttachmentsState } from './attachments/InstanceAttachmentsState.ts';
+import type { Attribute } from './Attribute.ts';
 import type { InitialInstanceState } from './input/InitialInstanceState.ts';
 import type { EvaluationContext } from './internal-api/EvaluationContext.ts';
 import type { InstanceConfig } from './internal-api/InstanceConfig.ts';
@@ -71,6 +74,7 @@ interface PrimaryInstanceStateSpec {
 	readonly label: null;
 	readonly hint: null;
 	readonly children: Accessor<readonly FormNodeID[]>;
+	readonly attributes: Accessor<readonly Attribute[]>;
 	readonly valueOptions: null;
 	readonly value: null;
 
@@ -193,6 +197,7 @@ export class PrimaryInstance<
 		this.classes = definition.classes;
 
 		const childrenState = createChildrenState<this, Root>(this);
+		const attributeState = createAttributeState(this.scope);
 
 		this.getChildren = childrenState.getChildren;
 
@@ -207,6 +212,7 @@ export class PrimaryInstance<
 			valueOptions: null,
 			value: null,
 			children: childrenState.childIds,
+			attributes: attributeState.getAttributes,
 		};
 
 		const state = createSharedNodeState(scope, stateSpec, config);
@@ -227,6 +233,7 @@ export class PrimaryInstance<
 		this.instanceState = createPrimaryInstanceState(this);
 
 		childrenState.setChildren([root]);
+		attributeState.setAttributes(buildAttributes(this));
 		setIsAttached(true);
 	}
 

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,6 +97,7 @@ export class RangeControl<V extends RangeValueType = RangeValueType>
 				label: createNodeLabel(this, definition),
 				hint: createFieldHint(this, definition),
 				children: null,
+				attributes: attributeState.getAttributes,
 				valueOptions: null,
 				value: this.valueState,
 				instanceValue: this.getInstanceValue,
@@ -101,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;