{module @version="1.0.0" |
{import @as=docs @src="./cem-token-docs.cemt"}
{body |
{call @from=docs @template=preview-token-table
@with:rows={datadom.slices.basis} @with:id=cem-shape-basis
@with:href="../tokens/cem-shape.xhtml#4-minimal-bend-basis-complexity-compliant"
@with:link_label=cem-shape-basis @with:caption=" — bend basis tokens"
@with:preview_label=Sample @with:preview_kind=radius}
{hr | }
{call @from=docs @template=preview-token-table
@with:rows={datadom.slices.semantic} @with:id=cem-shape-semantic
@with:href="../tokens/cem-shape.xhtml#5-semantic-endpoints-product-facing-contract"
@with:link_label=cem-shape-semantic @with:caption=" — role-first semantic endpoints"
@with:preview_label=Sample @with:preview_kind=radius}
{hr | }
{call @from=docs @template=standard-token-table
@with:rows={datadom.slices.pattern} @with:id=cem-shape-pattern
@with:href="../tokens/cem-shape.xhtml#7-1-attachment-pattern-one-pattern-not-many-tokens"
@with:link_label=cem-shape-pattern @with:caption=" — asymmetric attachment patterns"}
{hr | }
{table @id=cem-shape-mode-sharp |
{caption | {a @href="../tokens/cem-shape.xhtml#6-2-mode-implementation-recommended" | cem-shape-mode-sharp} — `data-cem-shape="sharp"` overrides}
{thead | {tr | {th | Token}{th | Override value}}}
{tbody | {cem:for-each @select="$datadom.slices.sharp" @as="row" |
{tr | {th | {code | {$row.token}}}{td | {code | {$row.value}}}}}}
}
{hr | }
{table @id=cem-shape-mode-round |
{caption | {a @href="../tokens/cem-shape.xhtml#6-2-mode-implementation-recommended" | cem-shape-mode-round} — `data-cem-shape="round"` overrides}
{thead | {tr | {th | Token}{th | Override value}}}
{tbody | {cem:for-each @select="$datadom.slices.round" @as="row" |
{tr | {th | {code | {$row.token}}}{td | {code | {$row.value}}}}}}
}
{hr | }
{pre @class=language-css | {code @class=language-css @data-generated-css |```:root {
/* region bend basis — sharp / smooth / round / circle plus active alias */```{call @from=docs @template=css-properties @with:rows={datadom.slices.basis} @with:indent=" "}```
/* endregion bend basis */
/* region semantic endpoints — role-first product contract */```{call @from=docs @template=css-properties @with:rows={datadom.slices.semantic} @with:indent=" "}```
/* endregion semantic endpoints */
/* region pattern tokens — asymmetric attachment */```{call @from=docs @template=css-properties @with:rows={datadom.slices.pattern} @with:indent=" "}```
/* endregion pattern tokens */
/* region action component bindings — geometry owned by D3 */```{call @from=docs @template=css-properties @with:rows={datadom.slices.action} @with:indent=" "}```
/* endregion action component bindings */
}
/* Re-resolve height-dependent geometry at local profile boundaries. */
:where([data-cem-size], [size]) {```{cem:for-each @select="$datadom.slices.basis" @as="row" |{cem:if @test='row.token == "--cem-bend-round"' |```
```{$row.token}: {$row.value};}}```
}
/* region shape mode: sharp — technical, precise brand expression */
:root[data-cem-shape="sharp"] {```{call @from=docs @template=css-properties @with:rows={datadom.slices.sharp} @with:indent=" "}```
}
/* endregion shape mode: sharp */
/* region shape mode: round — consumer, welcoming brand expression */
:root[data-cem-shape="round"] {```{call @from=docs @template=css-properties @with:rows={datadom.slices.round} @with:indent=" "}```
}
/* endregion shape mode: round */
```}}
}
}