Docs: Document data-ax-ref Directive and $refs Instance Property for Direct DOM Access

[nathanschmid08]

Summary

Document the data-ax-ref="elementName" template directive and the corresponding this.$refs.elementName instance property on AvenxComponent.

Context & Current State

The framework supports the data-ax-ref="elementName" directive within component templates (implemented in AvenxComponent.js), which automatically captures and binds direct DOM element references or nested child component instances to this.$refs.elementName. However, neither directives.md nor component.md documents how to use data-ax-ref or access this.$refs.

Proposed Documentation Changes

1. Directives Reference (docs/src/content/docs/core-concepts/directives.md):
   • Add a section explaining data-ax-ref for binding element references in templates.
   • Include code examples demonstrating form input focus, canvas context retrieval, and child component inspection via $refs.
2. Component API Reference (docs/src/content/docs/api-reference/component.md):
   • Document the this.$refs instance property, its type (Record<string, Element | AvenxComponent>), and its availability in lifecycle hooks (onMount, onUpdate).
   • Detail the internal reference caching mechanism and automatic cleanup during component unmounting.

Labels

• documentation
• enhancement
• good first issue