NCombox + NTextInput proper label/description support

+ Associated changes in window settings

Widgets/NComboBox.qml

@@ -59,7 +59,7 @@ ColumnLayout {
       implicitWidth: 120 * scaling
       implicitHeight: preferredHeight
       color: Colors.surfaceVariant
-      border.color: root.activeFocus ? Colors.hover : Colors.outline
+      border.color: combo.activeFocus ? Colors.hover : Colors.outline
       border.width: Math.max(1, Style.borderThin * scaling)
       radius: Style.radiusMedium * scaling
     }
@@ -69,7 +69,6 @@ ColumnLayout {
       leftPadding: Style.marginLarge * scaling
       rightPadding: combo.indicator.width + Style.marginLarge * scaling
       font.pointSize: Style.fontSizeMedium * scaling
-      font.weight: Style.fontWeightBold
       verticalAlignment: Text.AlignVCenter
       elide: Text.ElideRight
       text: {
@@ -79,16 +78,16 @@ ColumnLayout {
 
     // Drop down indicator
     indicator: NText {
-      x: root.width - width - Style.marginMedium * scaling
-      y: root.topPadding + (root.availableHeight - height) / 2
+      x: combo.width - width - Style.marginMedium * scaling
+      y: combo.topPadding + (combo.availableHeight - height) / 2
       text: "arrow_drop_down"
       font.family: "Material Symbols Outlined"
       font.pointSize: Style.fontSizeXL * scaling
     }
 
     popup: Popup {
-      y: root.height
-      width: root.width
+      y: combo.height
+      width: combo.width
       implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginMedium * scaling * 2)
       padding: Style.marginMedium * scaling
 
@@ -109,8 +108,8 @@ ColumnLayout {
     }
 
     delegate: ItemDelegate {
-      width: root.width
-      highlighted: root.highlightedIndex === index
+      width: combo.width
+      highlighted: combo.highlightedIndex === index
 
       contentItem: NText {
         text: {
@@ -123,7 +122,7 @@ ColumnLayout {
       }
 
       background: Rectangle {
-        width: root.width - Style.marginMedium * scaling * 3
+        width: combo.width - Style.marginMedium * scaling * 3
         color: highlighted ? Colors.hover : "transparent"
         radius: Style.radiusSmall * scaling
       }

Widgets/NTextInput.qml

@@ -7,58 +7,81 @@ Item {
   id: root
 
   readonly property real scaling: Scaling.scale(screen)
-
-  // API
-  property alias text: input.text
-  property alias placeholderText: input.placeholderText
+  property string label: ""
+  property string description: ""
   property bool readOnly: false
   property bool enabled: true
 
+  property alias text: input.text
+  property alias placeholderText: input.placeholderText
+
   signal editingFinished
 
   // Sizing
   implicitWidth: 320 * scaling
-  implicitHeight: Style.baseWidgetSize * 1.25 * scaling
+  implicitHeight: Style.baseWidgetSize * 2.75 * scaling
 
-  // Container
-  Rectangle {
-    id: frame
-    anchors.fill: parent
-    radius: Style.radiusMedium * scaling
-    color: Colors.surfaceVariant
-    border.color: Colors.outline
-    border.width: Math.max(1, Style.borderThin * scaling)
+  ColumnLayout {
+    spacing: Style.marginTiniest * scaling
+    Layout.fillWidth: true
 
-    // Focus ring
-    Rectangle {
-      anchors.fill: parent
-      radius: frame.radius
-      color: "transparent"
-      border.color: input.activeFocus ? Colors.hover : "transparent"
-      border.width: input.activeFocus ? Math.max(1, Style.borderThin * scaling) : 0
+    NText {
+      text: label
+      font.pointSize: Style.fontSizeMedium * scaling
+      font.weight: Style.fontWeightBold
+      color: Colors.textPrimary
     }
 
-    RowLayout {
-      anchors.fill: parent
-      anchors.leftMargin: Style.marginMedium * scaling
-      anchors.rightMargin: Style.marginMedium * scaling
-      spacing: Style.marginSmall * scaling
+    NText {
+      text: description
+      font.pointSize: Style.fontSizeSmall * scaling
+      color: Colors.textSecondary
+      wrapMode: Text.WordWrap
+      Layout.fillWidth: true
+    }
 
-      // Optional leading icon slot in the future
-      // Item { Layout.preferredWidth: 0 }
-      TextField {
-        id: input
-        Layout.fillWidth: true
-        echoMode: TextInput.Normal
-        readOnly: root.readOnly
-        enabled: root.enabled
-        color: Colors.textPrimary
-        placeholderTextColor: Colors.textSecondary
-        background: null
-        font.pointSize: Style.fontSizeSmall * scaling
-        onEditingFinished: root.editingFinished()
-        // Text changes are observable via the aliased 'text' property (root.text) and its 'textChanged' signal.
-        // No additional callback is invoked here to avoid conflicts with QML's onTextChanged handler semantics.
+    // Container
+    Rectangle {
+      id: frame
+      Layout.topMargin: Style.marginTiny * scaling
+      implicitWidth: root.width
+      implicitHeight: Style.baseWidgetSize * 1.35 * scaling
+      radius: Style.radiusMedium * scaling
+      color: Colors.surfaceVariant
+      border.color: Colors.outline
+      border.width: Math.max(1, Style.borderThin * scaling)
+
+      // Focus ring
+      Rectangle {
+        anchors.fill: parent
+        radius: frame.radius
+        color: "transparent"
+        border.color: input.activeFocus ? Colors.hover : "transparent"
+        border.width: input.activeFocus ? Math.max(1, Style.borderThin * scaling) : 0
+      }
+
+      RowLayout {
+        anchors.fill: parent
+        anchors.leftMargin: Style.marginMedium * scaling
+        anchors.rightMargin: Style.marginMedium * scaling
+        spacing: Style.marginSmall * scaling
+
+        // Optional leading icon slot in the future
+        // Item { Layout.preferredWidth: 0 }
+        TextField {
+          id: input
+          Layout.fillWidth: true
+          echoMode: TextInput.Normal
+          readOnly: root.readOnly
+          enabled: root.enabled
+          color: Colors.textPrimary
+          placeholderTextColor: Colors.textSecondary
+          background: null
+          font.pointSize: Style.fontSizeSmall * scaling
+          onEditingFinished: root.editingFinished()
+          // Text changes are observable via the aliased 'text' property (root.text) and its 'textChanged' signal.
+          // No additional callback is invoked here to avoid conflicts with QML's onTextChanged handler semantics.
+        }
       }
     }
   }