How to scale text size in a widget contained within a layout?

[hja3]

Please see the example below. I would like to scale the text in the square in proportion to the square's dimensions, but the code introduces a binding loop that I have been unable to resolve.

component Square inherits Rectangle {
    preferred-width: self.height; // maintain 1:1 aspect

    background: lightgrey;
    border-width: 1px;
    border-color: black;

    label := Text {
        text: "X";
        font-size: self.height / 2;
    }
}

export component Main inherits Window {
    preferred-width: 320px;
    preferred-height: 240px;

    content := VerticalLayout {
        padding: 4px;
        HorizontalLayout {
            alignment: center;
            Square {}
        }
    }
}

[hja3]

One way to break the loop is to invert the relationship between square size and text size:

component Square inherits Rectangle {
    preferred-width: self.height; // maintain 1:1 aspect
    min-height: 32px;
    min-width: self.min-height;

    background: lightgrey;
    border-width: 1px;
    border-color: black;

    in property <length> font-size <=> label.font-size;

    label := Text {
        text: "X";
    }
}

export component Main inherits Window {
    preferred-width: 320px;
    preferred-height: 240px;

    content := VerticalLayout {
        padding: 4px;
        HorizontalLayout {
            alignment: center;
            Square {
                font-size: content.height;
            }
        }
    }
}

It works, in the sense that the text size scales together with the square, but it is an awkward way to express it, because I want the text sized according to the square, not the square sized according to the text. Is there a better way to do this?