{module @version="1.0.0" |
{import @as=docs @src="./cem-token-docs.cemt"}
{body |
{call @from=docs @template=standard-token-table
@with:rows={datadom.slices.basis} @with:id=cem-bp-basis
@with:href="../tokens/cem-breakpoints.xhtml#5-1-basis-tokens-bounds"
@with:link_label=cem-bp-basis @with:caption=" — width + epsilon basis tokens"}
{hr | }
{call @from=docs @template=standard-token-table
@with:rows={datadom.slices.height} @with:id=cem-bp-height
@with:href="../tokens/cem-breakpoints.xhtml#cem-bp-height"
@with:link_label=cem-bp-height @with:caption=" — height basis tokens"}
{hr | }
{call @from=docs @template=standard-token-table
@with:rows={datadom.slices.cq} @with:id=cem-bp-cq
@with:href="../tokens/cem-breakpoints.xhtml#8-1-container-bounds-optional"
@with:link_label=cem-bp-cq @with:caption=" — container query reference values"}
{hr | }
{pre @class=language-css | {code @class=language-css @data-generated-css |```/* ── Block A — CSS custom property reference values ─────────────────────── */
:root {
/* region width basis: epsilon + cem-bp-width-[range]-[min|max] */```{call @from=docs @template=css-properties @with:rows={datadom.slices.basis} @with:indent=" "}```
/* endregion width basis */
/* region height basis: cem-bp-height-[range]-[min|max] */```{call @from=docs @template=css-properties @with:rows={datadom.slices.height} @with:indent=" "}```
/* endregion height basis */
/* region container query reference values: cem-cq-width-[range]-[min|max] */
/* Consumer must provide container-type: inline-size (see R-D1x-WRAP) */```{call @from=docs @template=css-properties @with:rows={datadom.slices.cq} @with:indent=" "}```
/* endregion container query reference values */
}
/* ── Block B — @media active-width helpers ───────────────────────────────── */
/* Sets --cem-bp-active-width; read via JS: getComputedStyle(root).getPropertyValue('--cem-bp-active-width').trim() */```{cem:for-each @select="$datadom.slices.mediaRanges" @as="row" |{cem:choose |{cem:when @test='row.min_width == "0px"' |```
@media (max-width: ```{$row.max_width}```) {
:root { --cem-bp-active-width: ```{$row.range}```; }
}```}{cem:when @test='row.max_width == "—"' |```
@media (min-width: ```{$row.min_width}```) {
:root { --cem-bp-active-width: ```{$row.range}```; }
}```}{cem:otherwise |```
@media (min-width: ```{$row.min_width}```) and (max-width: ```{$row.max_width}```) {
:root { --cem-bp-active-width: ```{$row.range}```; }
}```}}}```
/* Height helpers (informative — most apps adapt on width only) */```{cem:for-each @select="$datadom.slices.heightRanges" @as="row" |{cem:choose |{cem:when @test='row.min_height == "0px"' |```
@media (max-height: ```{$row.max_height}```) {
:root { --cem-bp-active-height: ```{$row.range}```; }
}```}{cem:when @test='row.max_height == "—"' |```
@media (min-height: ```{$row.min_height}```) {
:root { --cem-bp-active-height: ```{$row.range}```; }
}```}{cem:otherwise |```
@media (min-height: ```{$row.min_height}```) and (max-height: ```{$row.max_height}```) {
:root { --cem-bp-active-height: ```{$row.range}```; }
}```}}}```
/* ── Block C — @container helpers ────────────────────────────────────────── */
/* Deferred: CEM does not emit @container selectors (R-D1x-WRAP). */
/* Use --cem-cq-width-* reference values in your own @container rules. */
```}}
}
}