{module @version="1.0.0" |
{import @as=docs @src="./cem-token-docs.cemt"}
{body |
{call @from=docs @template=width-token-table
@with:rows={datadom.slices.geometry} @with:id=cem-controls-geometry
@with:href="../tokens/cem-controls.xhtml#3-1-baseline-balanced-mode"
@with:link_label=cem-controls-geometry
@with:caption=" — visual control geometry (balanced baseline)"}
{hr | }
{call @from=docs @template=width-token-table
@with:rows={datadom.slices.progress} @with:id=cem-progress-geometry
@with:href="../tokens/cem-controls.xhtml#cem-progress-geometry"
@with:link_label=cem-progress-geometry
@with:caption=" — non-interactive progress graphic geometry"}
{hr | }
{call @from=docs @template=width-token-table
@with:rows={datadom.slices.slider} @with:id=cem-slider-geometry
@with:href="../tokens/cem-controls.xhtml#cem-slider-geometry"
@with:link_label=cem-slider-geometry
@with:caption=" — slider visual geometry"}
{hr | }
{table @id=cem-controls-geometry-overrides |
{caption | {a @href="../tokens/cem-controls.xhtml#3-4-coupling-mode-overrides-visual-geometry-only" | cem-controls-geometry-overrides} — coupling mode overrides (visual geometry only)}
{thead | {tr | {th | Token}{th | forgiving}{th | compact}}}
{tbody | {cem:for-each @select="$datadom.slices.overrides" @as="row" |
{tr |
{th | {code | {$row.token}}}
{td | {code | {$row.forgiving}}}
{td | {code | {$row.compact}}}
}}}
}
{hr | }
{pre @class=language-css | {code @class=language-css @data-generated-css |```:root {
/* region control geometry — balanced (default) baseline */```{call @from=docs @template=css-properties @with:rows={datadom.slices.geometry} @with:indent=" "}```
/* endregion control geometry */
/* region progress graphic geometry */```{call @from=docs @template=css-properties @with:rows={datadom.slices.progress} @with:indent=" "}```
/* endregion progress graphic geometry */
/* region slider visual geometry */```{call @from=docs @template=css-properties @with:rows={datadom.slices.slider} @with:indent=" "}```
/* endregion slider visual geometry */
}
/* region coupling mode: forgiving — larger visual geometry */
:root[data-cem-coupling="forgiving"] {```{cem:for-each @select="$datadom.slices.overrides" @as="row" |```
```{$row.token}: {$row.forgiving};}```
}
/* endregion coupling mode: forgiving */
/* region coupling mode: compact — smaller visual geometry */
:root[data-cem-coupling="compact"] {```{cem:for-each @select="$datadom.slices.overrides" @as="row" |```
```{$row.token}: {$row.compact};}```
}
/* endregion coupling mode: compact */
/* Optional inherited size profiles; explicit geometry wins over coupling height. */
```{cem:for-each @select="$datadom.slices.sizes" @as="row" |```
:root[data-cem-size="```{$row.size}```"], :where([data-cem-size="```{$row.size}```"]) {
--cem-control-height: ```{$row.height}```;
}
```} }}
}
}