A compatibility tag using the same native surface contract as cem-dialog, including explicit modal mode and native forms.
Full examples and variation matrix ยท Automated stories
Blank inputs omit optional attributes. Use #ID or @local-name for browser reference controls; typed CEM references are authored in source. Changing mode applies on the next opening. Clear the local trigger before setting trigger-for. default-open initializes only a new instance; use its launcher for repeated opening. Hover, press, focus and dismissal remain native interactions.
{slice @name=trigger-for | }
{slice @name=show-delay | 500}
{slice @name=hide-delay | 100}
{slice @name=placement | center}
{slice @name=anchor | }
{slice @name=boundary | }
{slice @name=fallback | }
{slice @name=overflow | flip shift resize}
{slice @name=anchor-lost | freeze}
{slice @name=surface-id | }
{slice @name=hidden | }
{slice @name=class | }
{slice @name=dir | ltr}
{slice @name=label | Task}
{slice @name=trigger | Open task}
{slice @name=trigger-aria-label | }
{slice @name=trigger-disabled | }
{slice @name=close-label | Done}
{slice @name=mode | nonmodal}
{slice @name=popover | }
{slice @name=closedby | }
{slice @name=default-open | }
{slice @name=materialize | retain}
{slice @name=focus-target | auto}
{slice @name=return-focus | auto}
{slice @name=context-change | reject}
{slice @name=aria-label | }
{slice @name=aria-labelledby | }
{slice @name=aria-describedby | }
{cem-field @label="trigger-for" @value="{$datadom.slices.trigger-for}" @slice=trigger-for @slice-event=input @slice-value="$target.value"}
{cem-field @label="show-delay" @value="{$datadom.slices.show-delay}" @slice=show-delay @slice-event=input @slice-value="$target.value"}
{cem-field @label="hide-delay" @value="{$datadom.slices.hide-delay}" @slice=hide-delay @slice-event=input @slice-value="$target.value"}
{cem-field @label="placement" @value="{$datadom.slices.placement}" @slice=placement @slice-event=input @slice-value="$target.value"}
{cem-field @label="anchor" @value="{$datadom.slices.anchor}" @slice=anchor @slice-event=input @slice-value="$target.value"}
{cem-field @label="boundary" @value="{$datadom.slices.boundary}" @slice=boundary @slice-event=input @slice-value="$target.value"}
{cem-field @label="fallback" @value="{$datadom.slices.fallback}" @slice=fallback @slice-event=input @slice-value="$target.value"}
{cem-field @label="overflow" @value="{$datadom.slices.overflow}" @slice=overflow @slice-event=input @slice-value="$target.value"}
{fieldset @slice=anchor-lost @slice-event=change @slice-value="$target.value" | {legend | anchor-lost}{cem-radio @name="surface-anchor-lost" @value="freeze" @checked=true | freeze}{cem-radio @name="surface-anchor-lost" @value="close" | close}}
{cem-field @label="surface-id" @value="{$datadom.slices.surface-id}" @slice=surface-id @slice-event=input @slice-value="$target.value"}
{fieldset @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="surface-hidden" @value="" @checked=true | absent}{cem-radio @name="surface-hidden" @value="present" | present}}
{cem-field @label="class" @value="{$datadom.slices.class}" @slice=class @slice-event=input @slice-value="$target.value"}
{fieldset @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="surface-dir" @value="ltr" @checked=true | ltr}{cem-radio @name="surface-dir" @value="rtl" | rtl}}
{cem-field @label="label" @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}
{cem-field @label="trigger" @value="{$datadom.slices.trigger}" @slice=trigger @slice-event=input @slice-value="$target.value"}
{cem-field @label="trigger-aria-label" @value="{$datadom.slices.trigger-aria-label}" @slice=trigger-aria-label @slice-event=input @slice-value="$target.value"}
{fieldset @slice=trigger-disabled @slice-event=change @slice-value="$target.value" | {legend | trigger-disabled}{cem-radio @name="surface-trigger-disabled" @value="" @checked=true | absent}{cem-radio @name="surface-trigger-disabled" @value="present" | present}}
{cem-field @label="close-label" @value="{$datadom.slices.close-label}" @slice=close-label @slice-event=input @slice-value="$target.value"}
{fieldset @slice=mode @slice-event=change @slice-value="$target.value" | {legend | mode}{cem-radio @name="surface-mode" @value="nonmodal" @checked=true | nonmodal}{cem-radio @name="surface-mode" @value="modal" | modal}}
{fieldset @slice=popover @slice-event=change @slice-value="$target.value" | {legend | popover}{cem-radio @name="surface-popover" @value="" @checked=true | absent}{cem-radio @name="surface-popover" @value="manual" | manual}{cem-radio @name="surface-popover" @value="auto" | auto}}
{cem-field @label="closedby" @value="{$datadom.slices.closedby}" @slice=closedby @slice-event=input @slice-value="$target.value"}
{fieldset @slice=default-open @slice-event=change @slice-value="$target.value" | {legend | default-open}{cem-radio @name="surface-default-open" @value="" @checked=true | absent}{cem-radio @name="surface-default-open" @value="present" | present}}
{fieldset @slice=materialize @slice-event=change @slice-value="$target.value" | {legend | materialize}{cem-radio @name="surface-materialize" @value="retain" @checked=true | retain}{cem-radio @name="surface-materialize" @value="eager" | eager}{cem-radio @name="surface-materialize" @value="dispose" | dispose}}
{cem-field @label="focus-target" @value="{$datadom.slices.focus-target}" @slice=focus-target @slice-event=input @slice-value="$target.value"}
{cem-field @label="return-focus" @value="{$datadom.slices.return-focus}" @slice=return-focus @slice-event=input @slice-value="$target.value"}
{fieldset @slice=context-change @slice-event=change @slice-value="$target.value" | {legend | context-change}{cem-radio @name="surface-context-change" @value="reject" @checked=true | reject}{cem-radio @name="surface-context-change" @value="replace" | replace}{cem-radio @name="surface-context-change" @value="request" | request}}
{cem-field @label="aria-label" @value="{$datadom.slices.aria-label}" @slice=aria-label @slice-event=input @slice-value="$target.value"}
{cem-field @label="aria-labelledby" @value="{$datadom.slices.aria-labelledby}" @slice=aria-labelledby @slice-event=input @slice-value="$target.value"}
{cem-field @label="aria-describedby" @value="{$datadom.slices.aria-describedby}" @slice=aria-describedby @slice-event=input @slice-value="$target.value"}
{cem-dialog-shell @trigger-for={if datadom.slices.trigger-for != "" { datadom.slices.trigger-for } else { null }} @show-delay={if datadom.slices.show-delay != "" { datadom.slices.show-delay } else { null }} @hide-delay={if datadom.slices.hide-delay != "" { datadom.slices.hide-delay } else { null }} @placement={if datadom.slices.placement != "" { datadom.slices.placement } else { null }} @anchor={if datadom.slices.anchor != "" { datadom.slices.anchor } else { null }} @boundary={if datadom.slices.boundary != "" { datadom.slices.boundary } else { null }} @fallback={if datadom.slices.fallback != "" { datadom.slices.fallback } else { null }} @overflow={if datadom.slices.overflow != "" { datadom.slices.overflow } else { null }} @anchor-lost={if datadom.slices.anchor-lost != "" { datadom.slices.anchor-lost } else { null }} @surface-id={if datadom.slices.surface-id != "" { datadom.slices.surface-id } else { null }} @hidden={if datadom.slices.hidden == "present" { true } else { null }} @class={if datadom.slices.class != "" { datadom.slices.class } else { null }} @dir={if datadom.slices.dir != "" { datadom.slices.dir } else { null }} @label={if datadom.slices.label != "" { datadom.slices.label } else { null }} @trigger={if datadom.slices.trigger != "" { datadom.slices.trigger } else { null }} @trigger-aria-label={if datadom.slices.trigger-aria-label != "" { datadom.slices.trigger-aria-label } else { null }} @trigger-disabled={if datadom.slices.trigger-disabled == "present" { true } else { null }} @close-label={if datadom.slices.close-label != "" { datadom.slices.close-label } else { null }} @mode={if datadom.slices.mode != "" { datadom.slices.mode } else { null }} @popover={if datadom.slices.popover != "" { datadom.slices.popover } else { null }} @closedby={if datadom.slices.closedby != "" { datadom.slices.closedby } else { null }} @default-open={if datadom.slices.default-open == "present" { true } else { null }} @materialize={if datadom.slices.materialize != "" { datadom.slices.materialize } else { null }} @focus-target={if datadom.slices.focus-target != "" { datadom.slices.focus-target } else { null }} @return-focus={if datadom.slices.return-focus != "" { datadom.slices.return-focus } else { null }} @context-change={if datadom.slices.context-change != "" { datadom.slices.context-change } 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 }} | {template | {template @slot=body | {cem-field @label=Draft @value="Editable draft"}}}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-dialog-shell/cem-dialog-shell.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}}