// Célula de estado das tabelas: o ponto colorido "●" + o rótulo, ambos na
// mesma cor.
component {
props {
prop(name = kind)
prop(name = label)
}
resources {
style """
.state_cell {
spacing: 7;
align-y: center;
}
.state_lbl {
size: 12;
}
/* Paleta de estado — a 2ª classe (state_{kind}) pinta ponto + rótulo. */
.state_ok {
color: var(--ok);
}
.state_bad {
color: var(--error);
}
.state_info {
color: var(--accent);
}
.state_warn {
color: var(--warn);
}
.state_muted {
color: var(--muted);
}
"""
}
row(class = "state_cell col_state") {
text(class = "state_dot state_@kind", content = "●")
text(class = "state_lbl state_@kind", content = "@label")
}
}