WarningLight.qml

import QtQuick

// Single warning telltale — circular icon that lights up when active
Item {
    id: root

    // ── Public API ──
    property string label: ""
    property bool active: false
    property color activeColor: "#ff5252"   // red = critical, amber = warning, green = info

    implicitWidth: 44
    implicitHeight: 44

    Rectangle {
        anchors.centerIn: parent
        width: 28
        height: 28
        radius: 14
        color: "transparent"
        border.color: root.active ? root.activeColor : "#3a4254"
        border.width: 1.5

        Behavior on border.color { ColorAnimation { duration: 200 } }
    }

    Text {
        anchors.centerIn: parent
        text: root.label
        color: root.active ? root.activeColor : "#3a4254"
        font.family: "Bahnschrift"
        font.pixelSize: 9
        font.weight: Font.Medium

        Behavior on color { ColorAnimation { duration: 200 } }
    }
}