A sibling separation track with semantic or decorative treatment. Spacing includes the stroke and guarded margins. It has no content slot or focus owner. Compose with cem-stack.
Full examples and variation matrix · Property playground · Automated stories
{slice @name=class | }{cem-field @label="class" @value="{$datadom.slices.class}" @slice=class @slice-event=input @slice-value="$target.value"}
{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}}}}
{slice @name=spacing | group}{fieldset @role=group @aria-label="spacing" @slice=spacing @slice-event=change @slice-value="$target.value" | {legend | spacing}{cem-radio @name="property-spacing" @value="group" @label="group" @checked={if datadom.slices.spacing == "group" {true} else {null}}}{cem-radio @name="property-spacing" @value="related" @label="related" @checked={if datadom.slices.spacing == "related" {true} else {null}}}{cem-radio @name="property-spacing" @value="block" @label="block" @checked={if datadom.slices.spacing == "block" {true} else {null}}}{cem-radio @name="property-spacing" @value="section" @label="section" @checked={if datadom.slices.spacing == "section" {true} else {null}}}}
{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=inset | absent}{fieldset @role=group @aria-label="inset" @slice=inset @slice-event=change @slice-value="$target.value" | {legend | inset}{cem-radio @name="property-inset" @value="absent" @label="absent" @checked={if datadom.slices.inset == "absent" {true} else {null}}}{cem-radio @name="property-inset" @value="present" @label="present" @checked={if datadom.slices.inset == "present" {true} else {null}}}}
{slice @name=decorative | absent}{fieldset @role=group @aria-label="decorative" @slice=decorative @slice-event=change @slice-value="$target.value" | {legend | decorative}{cem-radio @name="property-decorative" @value="absent" @label="absent" @checked={if datadom.slices.decorative == "absent" {true} else {null}}}{cem-radio @name="property-decorative" @value="present" @label="present" @checked={if datadom.slices.decorative == "present" {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}}}}
{div @class=divider-example | {span | Before}{cem-divider @orientation="{$datadom.slices.orientation}" @spacing="{$datadom.slices.spacing}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @inset={if datadom.slices.inset == "present" {true} else {null}} @decorative={if datadom.slices.decorative == "present" {true} else {null}} @hidden={if datadom.slices.hidden == "present" {true} else {null}} | }{span | After}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-divider/cem-divider.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}}