{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 */
/* Restore canonical density endpoints, including glyphs on every input modality. */
:root[data-cem-density="normal"], :where([data-cem-density="normal"]) {```{cem:for-each @select="$datadom.slices.density" @as="override" |{cem:for-each @select="$datadom.slices.geometry" @as="row" |{cem:if @test='row.token == override.token' |```
```{$row.token}: {$row.value};}}}```
}
/* Compact glyphs follow text even while its target geometry stays input-gated. */
:where([data-cem-density="compact"]) {```{cem:for-each @select="$datadom.slices.density" @as="row" |{cem:if @test='row.token != "--cem-icon-button-size"' |{cem:if @test='str:starts_with(row.token, "--cem-icon-") || row.token == "--cem-data-icon-size"' |```
```{$row.token}: {$row.compact};}}}```
}
/* Compact chrome retains its precise-input policy. */
@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
:root[data-cem-density="compact"], :where([data-cem-density="compact"]) {```{cem:for-each @select="$datadom.slices.density" @as="row" |```
```{$row.token}: {$row.compact};}```
}
}
/* Explicit super-compact controls fit content on every input modality. */
:root[data-cem-density="super-compact"], :where([data-cem-density="super-compact"]) {```{cem:for-each @select="$datadom.slices.density" @as="row" |```
```{$row.token}: {$row.super_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}```;
}
```} }}
}
}