Stack independent cem-expansion sections in a bounded panel. Open bodies share the available height and scroll separately; collapse retains their content.
Full examples and variation matrix · Automated stories
{slice @name=label | Navigation}{slice @name=ariaLabel | }{slice @name=class | }{slice @name=fit | fill}{slice @name=hidden | false}{slice @name=dir | ltr}
{cem-field @label=label @value={datadom.slices.label} @slice=label @slice-event=input @slice-value="$target.value"}
{fieldset @role=group @aria-label=fit @slice=fit @slice-event=change @slice-value="$target.value" | {legend | fit}{cem-radio @name=fit @label=content @value=content @checked={if datadom.slices.fit == "content" {true} else {null}}}{cem-radio @name=fit @label=fill @value=fill @checked={if datadom.slices.fit == "fill" {true} else {null}}}}
{fieldset @role=group @aria-label=dir @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name=dir @label=ltr @value=ltr @checked={if datadom.slices.dir == "ltr" {true} else {null}}}{cem-radio @name=dir @label=rtl @value=rtl @checked={if datadom.slices.dir == "rtl" {true} else {null}}}}
{cem-field @label=aria-label @value={datadom.slices.ariaLabel} @slice=ariaLabel @slice-event=input @slice-value="$target.value"}
{cem-field @label=class @value={datadom.slices.class} @slice=class @slice-event=input @slice-value="$target.value"}
{cem-checkbox @label=hidden @checked={if datadom.slices.hidden { true } else { null }} @slice=hidden @slice-event=change @slice-value="$target.checked"}
{div @style="block-size:50vb" | {cem-accordion @aria-label={if datadom.slices.ariaLabel {datadom.slices.ariaLabel} else {null}} @class={datadom.slices.class} @label={datadom.slices.label} @fit={datadom.slices.fit} @dir={datadom.slices.dir} @hidden={if datadom.slices.hidden { true } else { null }} |
{cem-expansion @layout=panel @indicator=start @label="◇ Projects" @expanded=true | {p | Examples and saved projects.}}
{cem-expansion @layout=panel @indicator=start @label="▱ Structure" @expanded=true | {p | Project directories and resources.}}
{cem-expansion @layout=panel @indicator=start @label="⇥ Output files" | {p | Successful build artifacts.}}
}}
Click a header or use Enter/Space to toggle it. Several sections can remain open. A definite parent height is required for fit=fill.
{cem-module-url @slice=source @src="@epa-wg/cem-components/components/cem-accordion/cem-accordion.xhtml"}{cem:if @test=datadom.slices.source | {p | {a @href={datadom.slices.source} | Open canonical XHTML}}{cem-demo-element @legend="Canonical source" @src={datadom.slices.source} @type=xml @demo=false}}