Rectangle {

        active-marker := Rectangle {

            border-radius: 5px;

            background: blue;

            background: Palette.accent-background;
        }
        label-backdrop := Rectangle {
            label := Text {
                text: "\{name}";
            }

    }

        Text {
            text: "\{name}";

    in-out property <bool> is-selected: false;
    touch := TouchArea {
        clicked => {
            is-selected = true;

    states [
        selected when is-selected: {
            label-backdrop.background: Palette.selection-background;
            label.color: Palette.selection-foreground;
        }
        lowlighted when !is-selected && touch.has-hover: {
            label-backdrop.background: Palette.alternate-background;
            label.color: Palette.alternate-foreground;
        }
        off when !is-selected && !touch.has-hover: {
            label-backdrop.background: Palette.background;
            label.color: Palette.foreground;
        }
    ]