Advisory recovery metadata with an accessible disclosure. Use cem-alert for application feedback and cem-progress for measured work. This component never reads credentials or starts recovery.
Full examples and variation matrix · Property playground · Automated stories
These are simulated host observations. Counts must be nonnegative integers. State and reason are independent so refusal combinations can be inspected. Unknown states/reasons have a safe unavailable fallback. Hidden is a presence boolean. Open the disclosure by keyboard or pointer; status updates retain its state.
{slice @name=state | unconfigured}
{fieldset @role=group @aria-label="state" @slice=state @slice-event=change @slice-value="$target.value" | {legend | state}{cem-radio @name="property-state" @value="unconfigured" @label="unconfigured" @checked={if datadom.slices.state == "unconfigured" {true} else {null}}}{cem-radio @name="property-state" @value="observing" @label="observing" @checked={if datadom.slices.state == "observing" {true} else {null}}}{cem-radio @name="property-state" @value="busy" @label="busy" @checked={if datadom.slices.state == "busy" {true} else {null}}}{cem-radio @name="property-state" @value="blocked" @label="blocked" @checked={if datadom.slices.state == "blocked" {true} else {null}}}{cem-radio @name="property-state" @value="unavailable" @label="unavailable" @checked={if datadom.slices.state == "unavailable" {true} else {null}}}}
{slice @name=reason | not-configured}
{fieldset @role=group @aria-label="reason" @slice=reason @slice-event=change @slice-value="$target.value" | {legend | reason}{cem-radio @name="property-reason" @value="not-configured" @label="not-configured" @checked={if datadom.slices.reason == "not-configured" {true} else {null}}}{cem-radio @name="property-reason" @value="observed" @label="observed" @checked={if datadom.slices.reason == "observed" {true} else {null}}}{cem-radio @name="property-reason" @value="preparing" @label="preparing" @checked={if datadom.slices.reason == "preparing" {true} else {null}}}{cem-radio @name="property-reason" @value="admissions" @label="admissions" @checked={if datadom.slices.reason == "admissions" {true} else {null}}}{cem-radio @name="property-reason" @value="unknown-operations" @label="unknown-operations" @checked={if datadom.slices.reason == "unknown-operations" {true} else {null}}}{cem-radio @name="property-reason" @value="owner-adapters" @label="owner-adapters" @checked={if datadom.slices.reason == "owner-adapters" {true} else {null}}}{cem-radio @name="property-reason" @value="owner-publications" @label="owner-publications" @checked={if datadom.slices.reason == "owner-publications" {true} else {null}}}{cem-radio @name="property-reason" @value="publication-unavailable" @label="publication-unavailable" @checked={if datadom.slices.reason == "publication-unavailable" {true} else {null}}}{cem-radio @name="property-reason" @value="scope-unavailable" @label="scope-unavailable" @checked={if datadom.slices.reason == "scope-unavailable" {true} else {null}}}{cem-radio @name="property-reason" @value="coverage-limit" @label="coverage-limit" @checked={if datadom.slices.reason == "coverage-limit" {true} else {null}}}{cem-radio @name="property-reason" @value="inspection-failed" @label="inspection-failed" @checked={if datadom.slices.reason == "inspection-failed" {true} else {null}}}}
{slice @name=class | }{cem-text-field @label=class @value={datadom.slices.class} @slice=class @slice-event=input @slice-value="$target.value"}
{slice @name=label | Recovery}{cem-text-field @label="label" @value={datadom.slices.label} @slice=label @slice-event=input @slice-value="$target.value"}
{slice @name=aria-label | }{cem-text-field @label="aria-label" @value={datadom.slices.aria-label} @slice=aria-label @slice-event=input @slice-value="$target.value"}
{slice @name=runtime-count | 0}{cem-text-field @label="runtime-count" @value={datadom.slices.runtime-count} @slice=runtime-count @slice-event=input @slice-value="$target.value"}
{slice @name=owner-count | 0}{cem-text-field @label="owner-count" @value={datadom.slices.owner-count} @slice=owner-count @slice-event=input @slice-value="$target.value"}
{slice @name=acknowledged-count | 0}{cem-text-field @label="acknowledged-count" @value={datadom.slices.acknowledged-count} @slice=acknowledged-count @slice-event=input @slice-value="$target.value"}
{slice @name=admission-count | 0}{cem-text-field @label="admission-count" @value={datadom.slices.admission-count} @slice=admission-count @slice-event=input @slice-value="$target.value"}
{slice @name=unknown-operation-count | 0}{cem-text-field @label="unknown-operation-count" @value={datadom.slices.unknown-operation-count} @slice=unknown-operation-count @slice-event=input @slice-value="$target.value"}
{slice @name=unsupported-owner-count | 0}{cem-text-field @label="unsupported-owner-count" @value={datadom.slices.unsupported-owner-count} @slice=unsupported-owner-count @slice-event=input @slice-value="$target.value"}
{slice @name=dir | ltr}
{fieldset @role=group @aria-label="dir" @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="property-dir" @value="ltr" @label="ltr" @checked={if datadom.slices.dir == "ltr" {true} else {null}}}{cem-radio @name="property-dir" @value="rtl" @label="rtl" @checked={if datadom.slices.dir == "rtl" {true} else {null}}}}
{slice @name=hidden | absent}
{fieldset @role=group @aria-label="hidden" @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="property-hidden" @value="absent" @label="absent" @checked={if datadom.slices.hidden == "absent" {true} else {null}}}{cem-radio @name="property-hidden" @value="present" @label="present" @checked={if datadom.slices.hidden == "present" {true} else {null}}}}
{slice @name=content | fallback}
{fieldset @role=group @aria-label="content" @slice=content @slice-event=change @slice-value="$target.value" | {legend | content}{cem-radio @name="property-content" @value="fallback" @label="fallback" @checked={if datadom.slices.content == "fallback" {true} else {null}}}{cem-radio @name="property-content" @value="projected" @label="projected" @checked={if datadom.slices.content == "projected" {true} else {null}}}}
{cem-recovery-status @class={datadom.slices.class} @state={datadom.slices.state} @reason={datadom.slices.reason} @label={datadom.slices.label} @aria-label={datadom.slices.aria-label} @dir={datadom.slices.dir} @runtime-count={datadom.slices.runtime-count} @owner-count={datadom.slices.owner-count} @acknowledged-count={datadom.slices.acknowledged-count} @admission-count={datadom.slices.admission-count} @unknown-operation-count={datadom.slices.unknown-operation-count} @unsupported-owner-count={datadom.slices.unsupported-owner-count} @hidden={if datadom.slices.hidden == "present" {true} else {null}} | {cem:if @test='datadom.slices.content == "projected"' | {strong | Session}}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-recovery-status/cem-recovery-status.xhtml"}{cem:if @test="datadom.slices.sourceUrl" | {p | {a @href={datadom.slices.sourceUrl} | Open canonical XHTML}}{cem-demo-element @legend="Canonical source" @src={datadom.slices.sourceUrl} @type=xml @demo=false}}