A persistent named region for nearby tasks and filters. Applications can control its visibility without moving focus. Use cem-dialog when the task needs native dialog presentation and focus management, and cem-field for editable content.
Full examples and variation matrix ยท Automated stories
Persistent sheets stay visible regardless of expanded. With transient present, expanded controls visibility; even the text false counts as present. Visibility never moves focus. Tab into the draft to exercise native focus and typing; Escape does not close the region. Blank optional fields omit the attribute. The projected-label example below shows authored markup; label remains the default region name, with aria-label or aria-labelledby available separately.
Referenced filters
Use sheet-playground-name and sheet-playground-help to try ARIA references.
{slice @name=label | Filters}
{cem-field @label="label" @value="{$datadom.slices.label}" @slice=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=aria-labelledby | }
{cem-field @label="aria-labelledby" @value="{$datadom.slices.aria-labelledby}" @slice=aria-labelledby @slice-event=input @slice-value="$target.value"}
{slice @name=aria-describedby | }
{cem-field @label="aria-describedby" @value="{$datadom.slices.aria-describedby}" @slice=aria-describedby @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=transient | }
{fieldset @slice=transient @slice-event=change @slice-value="$target.value" | {legend | transient}{cem-radio @name="sheet-transient" @value="" @checked=true | absent}{cem-radio @name="sheet-transient" @value="present" | present}}
{slice @name=expanded | }
{fieldset @slice=expanded @slice-event=change @slice-value="$target.value" | {legend | expanded}{cem-radio @name="sheet-expanded" @value="" @checked=true | absent}{cem-radio @name="sheet-expanded" @value="present" | present}}
{slice @name=hidden | }
{fieldset @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="sheet-hidden" @value="" @checked=true | absent}{cem-radio @name="sheet-hidden" @value="present" | present}}
{slice @name=dir | ltr}
{fieldset @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="sheet-dir" @value="ltr" @checked=true | ltr}{cem-radio @name="sheet-dir" @value="rtl" | rtl}}
{cem-sheet @label={if datadom.slices.label != "" { datadom.slices.label } else { null }} @aria-label={if datadom.slices.aria-label != "" { datadom.slices.aria-label } else { null }} @aria-labelledby={if datadom.slices.aria-labelledby != "" { datadom.slices.aria-labelledby } else { null }} @aria-describedby={if datadom.slices.aria-describedby != "" { datadom.slices.aria-describedby } else { null }} @class={if datadom.slices.class != "" { datadom.slices.class } else { null }} @transient={if datadom.slices.transient == "present" { true } else { null }} @expanded={if datadom.slices.expanded == "present" { true } else { null }} @hidden={if datadom.slices.hidden == "present" { true } else { null }} @dir="{$datadom.slices.dir}" | {template | {form | {cem-field @label=Draft @name=draft @value="Editable draft"}{cem-action @type=reset @label=Reset}}}}Projected titleRetained body content.A separate accessible name.{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-sheet/cem-sheet.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}}