A named application banner with title and global actions. Compose cem-action controls; the banner adds no focus or action behavior.
Full examples and variation matrix · Property playground · Automated stories
slot=title replaces label fallback. Default slot holds global actions. Attribute presence enables boolean options, including the text “false”. Inert payload options take effect in the consuming component shown in the gallery. Native descendants retain keyboard behavior.
{slice @name=appearance | surface}{fieldset @role=group @aria-label=appearance @slice=appearance @slice-event=change @slice-value="$target.value" | {legend | appearance}{cem-radio @name=property-appearance @value=surface @label=surface @checked={if datadom.slices.appearance == "surface" {true} else {null}}}{cem-radio @name=property-appearance @value=compact @label=compact @checked={if datadom.slices.appearance == "compact" {true} else {null}}}}
{slice @name=label | Workspace}{cem-field @label="label" @value="{$datadom.slices.label}" @slice=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=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-app-bar @appearance={datadom.slices.appearance} @label="{$datadom.slices.label}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @hidden={if datadom.slices.hidden == "present" {true} else {null}} | {cem:if @test='datadom.slices.content == "projected"' | {strong @slot=title | Projected title}{cem-action @label=Account}}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-app-bar/cem-app-bar.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}}