--- url: https://lit-ui-router.dev/api/reference/controllers/SrefStatusController.md --- [lit-ui-router](../index.md) / SrefStatusController # Class: SrefStatusController Defined in: [packages/lit-ui-router/src/sref-status-controller.ts:142](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-status-controller.ts#L142) A Lit [ReactiveController](https://lit.dev/docs/composition/controllers/) that exposes a state's [SrefStatus](../types/SrefStatus.md) — `active`, `exact`, `entering`, `exiting` — to its host, so the host's own template decides what to do with it. This is the composition path [srefActiveClass](../directives/srefActiveClass.md) cannot offer: a `class` attribute holds one toggling directive, so `srefActiveClass` and [classMap](https://lit.dev/docs/templates/directives/#classmap) cannot share it. Read the flags here instead and pass them to `classMap`, to `aria-current`, to a `?disabled`, to anything. The controller registers its hooks when the host connects and deregisters them on `hostDisconnected`, so nothing leaks when hosts come and go. It calls `host.requestUpdate()` only when one of the four flags or the watched targets actually changed, so transitions that leave the link alone cost no render. ## Examples **Composing with classMap and aria-current** ```ts import { html, LitElement } from 'lit'; import { classMap } from 'lit/directives/class-map.js'; import { srefHref, SrefStatusController } from 'lit-ui-router'; class NavLink extends LitElement { private users = new SrefStatusController(this, { state: 'users' }); render() { return html`Users`; } } ``` **With an explicit router instance** ```ts // status is computed in the constructor, before the host ever connects const status = new SrefStatusController(host, { state: 'users', router }); ``` **Re-target from a property setter** ```ts class NavLink extends LitElement { private status = new SrefStatusController(this); @property() set state(state: string) { this.status.retarget({ state }); } } ``` **Container mode: watch the links in the host's template** ```ts class NavSection extends LitElement { // no `state`: every srefHref link below feeds this controller private section = new SrefStatusController(this); render() { return html`
  • Users New
    • `; } } ``` ## See * [srefActiveClass](../directives/srefActiveClass.md) * [srefAriaCurrent](../directives/srefAriaCurrent.md) * [SrefStatus](../types/SrefStatus.md) ## Implements * [`ReactiveController`](https://lit.dev/docs/api/controllers/#ReactiveController) ## Constructors ### Constructor ```ts new SrefStatusController(host, options?): SrefStatusController; ``` Defined in: [packages/lit-ui-router/src/sref-status-controller.ts:162](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-status-controller.ts#L162) #### Parameters | Parameter | Type | | ------ | ------ | | `host` | [`ReactiveControllerHost`](https://lit.dev/docs/api/controllers/#ReactiveControllerHost) & `Element` | | `options?` | [`SrefStatusControllerOptions`](SrefStatusControllerOptions.md) | #### Returns `SrefStatusController` ## Accessors ### active #### Get Signature ```ts get active(): boolean; ``` Defined in: [packages/lit-ui-router/src/sref-status-controller.ts:199](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-status-controller.ts#L199) The target state, or a child of it, is active. ##### Returns `boolean` *** ### entering #### Get Signature ```ts get entering(): boolean; ``` Defined in: [packages/lit-ui-router/src/sref-status-controller.ts:209](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-status-controller.ts#L209) A transition in flight is entering the target state. ##### Returns `boolean` *** ### exact #### Get Signature ```ts get exact(): boolean; ``` Defined in: [packages/lit-ui-router/src/sref-status-controller.ts:204](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-status-controller.ts#L204) The target state is itself the active state. ##### Returns `boolean` *** ### exiting #### Get Signature ```ts get exiting(): boolean; ``` Defined in: [packages/lit-ui-router/src/sref-status-controller.ts:214](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-status-controller.ts#L214) A transition in flight is exiting the target state. ##### Returns `boolean` *** ### router #### Get Signature ```ts get router(): | UIRouter | undefined; ``` Defined in: [packages/lit-ui-router/src/sref-status-controller.ts:186](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-status-controller.ts#L186) The observed [UIRouter](https://ui-router.github.io/core/docs/latest/classes/_router_.uirouter.html) instance. `undefined` until provided via [SrefStatusControllerOptions.router](SrefStatusControllerOptions.md#router) or discovered from an ancestor \ on connect. ##### Returns | [`UIRouter`](https://ui-router.github.io/core/docs/latest/classes/_router_.uirouter.html) | `undefined` *** ### status #### Get Signature ```ts get status(): SrefStatus | undefined; ``` Defined in: [packages/lit-ui-router/src/sref-status-controller.ts:194](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-status-controller.ts#L194) The merged [SrefStatus](../types/SrefStatus.md) of every watched target, or `undefined` while there is no router or no target. ##### Returns [`SrefStatus`](../types/SrefStatus.md) | `undefined` *** ### targetStates #### Get Signature ```ts get targetStates(): TargetState[]; ``` Defined in: [packages/lit-ui-router/src/sref-status-controller.ts:219](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-status-controller.ts#L219) The states being watched: the named one, or the enclosed links'. ##### Returns [`TargetState`](https://ui-router.github.io/core/docs/latest/classes/_state_targetstate_.targetstate.html)\[] ## Methods ### ariaCurrent() ```ts ariaCurrent(value?): typeof nothing | AriaCurrentValue; ``` Defined in: [packages/lit-ui-router/src/sref-status-controller.ts:243](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-status-controller.ts#L243) The `aria-current` token for the current status, or `nothing` to leave the attribute off — [srefAriaCurrent](../directives/srefAriaCurrent.md)'s rules, as a value to bind: `'page'` while the exact state is active, nothing otherwise. #### Parameters | Parameter | Type | Description | | ------ | ------ | ------ | | `value?` | | [`AriaCurrentValue`](../types/AriaCurrentValue.md) | [`AriaCurrentValues`](../types/AriaCurrentValues.md) | another token, or `{ exact, active }` to mark an active ancestor too. See [AriaCurrentValues](../types/AriaCurrentValues.md). | #### Returns *typeof* `nothing` | [`AriaCurrentValue`](../types/AriaCurrentValue.md) *** ### retarget() ```ts retarget(params): void; ``` Defined in: [packages/lit-ui-router/src/sref-status-controller.ts:228](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-status-controller.ts#L228) Points the controller at another state — for a host that takes the state as a property. Replaces `state`, `params` and `options` wholesale, keeps the router, and refreshes. #### Parameters | Parameter | Type | | ------ | ------ | | `params` | [`SrefTargetParams`](../types/SrefTargetParams.md) | #### Returns `void`