formkit
diff --git a/‎6.api-reference/1.context.md‎
Lines changed: 165 additions & 116 deletions b/‎6.api-reference/1.context.md‎
Lines changed: 165 additions & 116 deletions
@@ -13,73 +13,115 @@ The context object, in general, can be thought of as a general purpose data stor
 
 The context object always (unless noted) has the following properties:
 
-<div data-tight class="docs-content-child">
-
-## `_value`
+## Properties
 
+::api-entry{name="_value" type="property"}
 FormKit inputs have two values — the committed value (`node.value`) and the uncommitted value (`node._value`). At rest, these two values are equivalent, but the uncommitted value is the undebounced raw value of the input.
 
-## `attrs`
+#### Signature
+
+```typescript
+_value: any
+```
+::
 
+::api-entry{name="attrs" type="property"}
 An object containing any attributes that will be passed to the internal input element.
 
-## `fns`
+#### Signature
 
+```typescript
+attrs: Record<string, any>
+```
+::
+
+::api-entry{name="fns" type="property"}
 A small object of utility functions that are useful when writing schemas.
 
-```js
-{
+#### Signature
+
+```typescript
+fns: {
   // Returns the length of a given object
-  length: (obj: Record<PropertyKey, any>) => Number,
+  length: (obj: Record<PropertyKey, any>) => number
   // Casts a value to a number
-  number: (value: any) => Number,
+  number: (value: any) => number
   // Casts a value to a string
-  string: (value: any) => String,
+  string: (value: any) => string
   // Returns the JSON representation of a value
-  json: (value: any) => String | false,
+  json: (value: any) => string | false
 }
 ```
+::
 
-## `handlers`
-
+::api-entry{name="handlers" type="property"}
 A small object of common input handlers for use in the schema. Keep in mind that input "features" can replace or add to handlers on an input by input basis.
 
-```js
-{
+#### Signature
+
+```typescript
+handlers: {
   // sets the state.blurred value to true
-  blur: () => void,
+  blur: () => void
   // sets the state.touched value to true
-  touch: () => void,
+  touch: () => void
   // Sets the value of the input
   DOMInput: (e: Event) => void
 }
 ```
+::
 
-## `help`
-
+::api-entry{name="help" type="property"}
 The help text of the input provided by the `help` prop.
 
-## `id`
+#### Signature
 
+```typescript
+help: string | undefined
+```
+::
+
+::api-entry{name="id" type="property"}
 The unique identifier of the input. This value is auto-generated unless the `id` prop is set.
 
-## `label`
+#### Signature
 
+```typescript
+id: string
+```
+::
+
+::api-entry{name="label" type="property"}
 The label of the input provided by the `label` prop.
 
-## `messages`
+#### Signature
+
+```typescript
+label: string | undefined
+```
+::
+
+::api-entry{name="messages" type="property"}
+An object of _visible_ messages (where the type is not `ui`). The key of this object is the message name, and the value is a core message object.
+
+#### Signature
+
+```typescript
+messages: Record<string, FormKitMessage>
+```
 
-An object of _visible_ messages (where the type is not `ui` — `ui`). The key of this object is the message name, and the value is a core message object. For example, for an input displaying a single failing validation message, this object would look like:
+#### Example
 
-```js
+For an input displaying a single failing validation message, this object would look like:
+
+```typescript
 {
   rule_required: {
     // Determines if the message prevents form submission
     blocking: true,
     // The unique key of this message
     key: 'rule_required',
-    // Additional details about the message, you can put anything in here.
-    // Below are the meta details for validation messages:
+    // Additional details about the message
     meta: {
       // The name of the validation message (used in message lookups)
       messageKey: 'required',
@@ -94,28 +136,49 @@ An object of _visible_ messages (where the type is not `ui` — `ui`). The key
     type: 'validation',
     // The value of the message
     value: 'Email is required',
-    // If this message is intended to be displayed to end users — this does not
-    // mean the message is actively visible — that is determined by the
-    // {type}-visibility rules, but if this is false, it is never displayed to
-    // users.
+    // If this message is intended to be displayed to end users
     visible: true
   }
 }
 ```
+::
 
-## `node`
-
+::api-entry{name="node" type="property"}
 The underlying [core node](/essentials/architecture) of the current input. This object is not reactive (within the context of Vue).
 
-## `options`
+#### Signature
+
+```typescript
+node: FormKitNode
+```
+::
 
+::api-entry{name="options" type="property"}
 For inputs that accept an options prop, this is a normalized array of option objects.
 
-## `option`
+#### Signature
+
+```typescript
+options: Array<{ label: string; value: any; attrs?: Record<string, any> }> | undefined
+```
+::
+
+::api-entry{name="option" type="property"}
+For inputs that accept an options prop, this object is available to [section keys](/essentials/inputs#sections) that are inside the iteration (i.e., the `label` section key on a `checkbox` input with multiple checkboxes).
+
+#### Signature
 
-For inputs that accept an options prop, this object is available to [section keys](/essentials/inputs#sections) that are inside the iteration (i.e., the `label` section key on a `checkbox` input with multiple checkboxes). The object contains a `label`, `value`, and sometimes `attrs`:
+```typescript
+option: {
+  value: any
+  label: string
+  attrs?: Record<string, any>
+}
+```
 
-```js
+#### Example
+
+```typescript
 {
   value: 'foo',
   label: 'Foo',
@@ -124,109 +187,95 @@ For inputs that accept an options prop, this object is available to [section key
   }
 }
 ```
+::
 
-## `state`
+::api-entry{name="state" type="property"}
+Current state of the input.
 
-Current state of the input:
+#### Signature
 
-```js
-{
-  /**
-   * If the input has been blurred.
-   */
+```typescript
+state: {
+  // If the input has been blurred
   blurred: boolean
-  /**
-   * True when these conditions are met:
-   *
-   * Either:
-   * - The input has validation rules
-   * - The validation rules are all passing
-   * - There are no errors on the input
-   * Or:
-   * - The input has no validation rules
-   * - The input has no errors
-   * - The input is dirty and has a value
-   *
-   * This is not intended to be used on forms/groups/lists, but instead on
-   * individual inputs. Imagine placing a green checkbox next to each input
-   * when the user filled it out correctly — that's what these are for.
-   */
+
+  // True when the input is "complete" - either:
+  // - Has validation rules, all passing, no errors
+  // - Or: no validation rules, no errors, is dirty and has a value
   complete: boolean
-  /**
-   * A flag that indicates if the "owning" component of this node has mounted
-   * to the dom or not. Listen to the `mounted` event to be notified when this
-   * flag is changed.
-   */
+
+  // If the owning component has mounted to the DOM
   didMount: boolean
-  /**
-   * The dirty-behavior prop controls how this state is set. By default it is
-   * considered dirty if any mutation was made to the input, but once a mutation
-   * has been made and dirty is `true` it stops checking.
-   * 
-   * Alternatively the dirty-behavior prop can be set to `compare` which will
-   * diff the changes between the current value and the initial value after
-   * every mutation — this means if the input returns back to its initial value * dirty will become `false` again.
-   */
+
+  // Controlled by dirty-behavior prop. By default true after any mutation.
+  // With dirty-behavior="compare", compares current vs initial value.
   dirty: boolean
-  /**
-   * If the input has explicit errors placed on it, or in the case of a group,
-   * list, or form, this is true if any children have errors on them.
-   */
+
+  // If the input has explicit errors, or any children have errors
   errors: boolean
-  /**
-   * The loading state of the input or form. This property is only added while
-   * the input is loading and is removed when loading is complete.
-   */
+
+  // Loading state - only present while loading, removed when complete
   loading: true | undefined
-  /**
-   * Indicates if the input is has the "required" validation rule.
-   */
+
+  // If the input has the "required" validation rule
   required: boolean
-  /**
-   * True when the input has validation rules. Has nothing to do with the
-   * state of those validation rules.
-   */
+
+  // True when the input has validation rules (regardless of state)
   rules: boolean
-  /**
-   * True when the input has completed its internal debounce cycle and the
-   * value was committed to the form.
-   */
+
+  // True when debounce cycle is complete and value was committed
   settled: boolean
-  /**
-   * If the form has been submitted.
-   */
+
+  // If the form has been submitted
   submitted: boolean
-  /**
-   * If the input (or group/form/list) is passing all validation rules. In
-   * the case of groups, forms, and lists this includes the validation state
-   * of all its children.
-   */
+
+  // If passing all validation rules (includes children for groups/forms/lists)
   valid: boolean
-  /**
-   * == Added by @formkit/validation plugin — included in defaultConfig ==
-   * If the input (or group/form/list) is currently validating rules — including
-   * async validation rules. In the case of groups, forms, and lists this includes
-   * the validation state of all its children.
-   */
+
+  // If currently validating (including async rules) - from @formkit/validation
   validating?: boolean
-  /**
-   * If validation-visibility has been satisfied and any validation
-   * messages should be displayed.
-   */
+
+  // If validation-visibility is satisfied and messages should display
   validationVisible: boolean
 }
 ```
+::
 
-## `type`
+::api-entry{name="type" type="property"}
+The type of the input provided by the `type` prop. This is the value that should be referenced when looking up definitions in a library of inputs.
+
+#### Signature
+
+```typescript
+type: string
+```
 
-The type of the input provided by the `type` prop. This is the value that should be referenced when looking up definitions in a library of inputs. Examples of this value: `text`, `select`, or `autocomplete`.
+#### Examples
 
-## `ui`
+`text`, `select`, `autocomplete`
+::
 
+::api-entry{name="ui" type="property"}
 An object of visible messages (keyed by the `key`) of type `ui` that can be used in the interface. This allows for localized text for use on interface elements.
 
-## `classes`
+#### Signature
+
+```typescript
+ui: Record<string, FormKitMessage>
+```
+::
+
+::api-entry{name="classes" type="property"}
+A Proxy object for requesting classes. This object allows schema authors to request any [section](/essentials/inputs#sections) and get a generative class name.
+
+#### Signature
+
+```typescript
+classes: Proxy<Record<string, string>>
+```
 
-A Proxy object for requesting classes. This object allows schema authors to request any [section](/essentials/inputs#sections) and get a generative class name. For example `$classes.input` would (by default without additional configuration) return `formkit-input` while `$classes.foobar` would return `formkit-foobar`.
+#### Examples
 
-</div>
+- `$classes.input` returns `formkit-input` (by default)
+- `$classes.foobar` returns `formkit-foobar`
+::