# State

Complete renderer-independent state for Composite.

## Signatures

```ts
export interface State {
    readonly activeId: string | null;
    readonly orientation: Orientation;
    readonly loop: boolean;
    readonly rtl: boolean;
    readonly virtualFocus: boolean;
}
```

## Why

Applications can inspect, update, and test Composite behavior without mounting or coupling the
state to a renderer.

## Ownership and lifetime

This declaration is data or schema metadata and acquires no resources.

## Example

Import with `import type { State } from "@typed/ui/Composite";` Extend the [Composite.makeState
runnable setup](https://tylors.github.io/typed-smol/reference/symbols/QHR5cGVkL3VpL0NvbXBvc2l0ZSNtYWtlU3RhdGU/). Inside the linked program,
`const snapshot: State = yield* state` exposes focus, orientation, looping, RTL, and
virtual-focus policy.

## Property: activeId

Id currently active for keyboard navigation; null means no active item.

## Property: loop

Whether movement wraps between the first and last enabled items.

## Property: orientation

Axis used to interpret Arrow-key movement.

## Property: rtl

Whether horizontal Arrow-key meaning is reversed for right-to-left layout.

## Property: virtualFocus

Whether DOM focus remains on the root and activeId is exposed via aria-activedescendant.