Ordered workflow navigation controlled by application completion and validation facts. Use cem-tabs for interchangeable views.
Full examples and variation matrix · Property playground · Automated stories
Arrow keys on the orientation axis and Home/End browse enabled headers. Enter/Space activates eligible steps. Linear mode uses completed, optional and invalid facts; completed earlier steps require editable to revisit.
{slice @name=label | Publish workflow}
{cem-field @label="label" @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}
{slice @name=selected-index | 0}
{cem-field @label="selected-index" @value="{$datadom.slices.selected-index}" @slice=selected-index @slice-event=input @slice-value="$target.value"}
{slice @name=second-label | Review}
{cem-field @label="second-label" @value="{$datadom.slices.second-label}" @slice=second-label @slice-event=input @slice-value="$target.value"}
{slice @name=aria-label | }
{cem-field @label="aria-label" @value="{$datadom.slices.aria-label}" @slice=aria-label @slice-event=input @slice-value="$target.value"}
{slice @name=class | }
{cem-field @label="class" @value="{$datadom.slices.class}" @slice=class @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=linear | absent}
{fieldset @role=group @aria-label="linear" @slice=linear @slice-event=change @slice-value="$target.value" | {legend | linear}{cem-radio @name="property-linear" @value="absent" @label="absent" @checked={if datadom.slices.linear == "absent" {true} else {null}}}{cem-radio @name="property-linear" @value="present" @label="present" @checked={if datadom.slices.linear == "present" {true} else {null}}}}
{slice @name=disabled | absent}
{fieldset @role=group @aria-label="disabled" @slice=disabled @slice-event=change @slice-value="$target.value" | {legend | disabled}{cem-radio @name="property-disabled" @value="absent" @label="absent" @checked={if datadom.slices.disabled == "absent" {true} else {null}}}{cem-radio @name="property-disabled" @value="present" @label="present" @checked={if datadom.slices.disabled == "present" {true} else {null}}}}
{slice @name=completed | present}
{fieldset @role=group @aria-label="completed" @slice=completed @slice-event=change @slice-value="$target.value" | {legend | completed}{cem-radio @name="property-completed" @value="absent" @label="absent" @checked={if datadom.slices.completed == "absent" {true} else {null}}}{cem-radio @name="property-completed" @value="present" @label="present" @checked={if datadom.slices.completed == "present" {true} else {null}}}}
{slice @name=editable | present}
{fieldset @role=group @aria-label="editable" @slice=editable @slice-event=change @slice-value="$target.value" | {legend | editable}{cem-radio @name="property-editable" @value="absent" @label="absent" @checked={if datadom.slices.editable == "absent" {true} else {null}}}{cem-radio @name="property-editable" @value="present" @label="present" @checked={if datadom.slices.editable == "present" {true} else {null}}}}
{slice @name=optional | absent}
{fieldset @role=group @aria-label="optional" @slice=optional @slice-event=change @slice-value="$target.value" | {legend | optional}{cem-radio @name="property-optional" @value="absent" @label="absent" @checked={if datadom.slices.optional == "absent" {true} else {null}}}{cem-radio @name="property-optional" @value="present" @label="present" @checked={if datadom.slices.optional == "present" {true} else {null}}}}
{slice @name=invalid | absent}
{fieldset @role=group @aria-label="invalid" @slice=invalid @slice-event=change @slice-value="$target.value" | {legend | invalid}{cem-radio @name="property-invalid" @value="absent" @label="absent" @checked={if datadom.slices.invalid == "absent" {true} else {null}}}{cem-radio @name="property-invalid" @value="present" @label="present" @checked={if datadom.slices.invalid == "present" {true} else {null}}}}
{slice @name=step-disabled | absent}
{fieldset @role=group @aria-label="step-disabled" @slice=step-disabled @slice-event=change @slice-value="$target.value" | {legend | step-disabled}{cem-radio @name="property-step-disabled" @value="absent" @label="absent" @checked={if datadom.slices.step-disabled == "absent" {true} else {null}}}{cem-radio @name="property-step-disabled" @value="present" @label="present" @checked={if datadom.slices.step-disabled == "present" {true} else {null}}}}
{slice @name=orientation | horizontal}
{fieldset @role=group @aria-label="orientation" @slice=orientation @slice-event=change @slice-value="$target.value" | {legend | orientation}{cem-radio @name="property-orientation" @value="horizontal" @label="horizontal" @checked={if datadom.slices.orientation == "horizontal" {true} else {null}}}{cem-radio @name="property-orientation" @value="vertical" @label="vertical" @checked={if datadom.slices.orientation == "vertical" {true} else {null}}}}
{cem-stepper @label="{$datadom.slices.label}" @selected-index="{$datadom.slices.selected-index}" @orientation="{$datadom.slices.orientation}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @aria-label={if datadom.slices.aria-label {datadom.slices.aria-label} else {null}} @linear={if datadom.slices.linear == "present" {true} else {null}} @disabled={if datadom.slices.disabled == "present" {true} else {null}} @hidden={if datadom.slices.hidden == "present" {true} else {null}} | {cem-step @value=draft @label=Draft @completed={if datadom.slices.completed == "present" {true} else {null}} @editable={if datadom.slices.editable == "present" {true} else {null}} | {label | Draft title {input @value=Plan}}}{cem-step @value=review @label="{$datadom.slices.second-label}" @optional={if datadom.slices.optional == "present" {true} else {null}} @invalid={if datadom.slices.invalid == "present" {true} else {null}} @disabled={if datadom.slices.step-disabled == "present" {true} else {null}} | {p | Review panel}}{cem-step @value=publish @label=Publish | {p | Publish panel}}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-stepper/cem-stepper.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}}