Merge remote-tracking branch 'origin/qds/dev' into 12.0

Conflicts:
	share/qtcreator/qmldesigner/connectionseditor/SuggestionPopup.qml
	share/qtcreator/themes/dark.creatortheme
	share/qtcreator/themes/default.creatortheme
	share/qtcreator/themes/flat-dark.creatortheme
	share/qtcreator/themes/flat-light.creatortheme
	share/qtcreator/themes/flat.creatortheme
	src/libs/utils/CMakeLists.txt
	src/plugins/CMakeLists.txt
	src/plugins/qmlprojectmanager/qmlproject.cpp
	src/plugins/qmlprojectmanager/qmlprojectrunconfiguration.cpp

Change-Id: Idd87c281e1aa7b7fd2702473ad55e18563cbfb21

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc

@@ -239,15 +239,22 @@
 
     \section2 Configuring Snapping
 
-    To edit snapping settings, select \inlineimage icons/snapping-3d-conf.png
+    To edit the snapping settings, select \inlineimage icons/snapping-3d-conf.png
-    in the \uicontrol 3D view toolbar.
+    in the \uicontrol 3D view toolbar to open the configure dialog.
 
     In the configure dialog, you can do the following:
     \list
-      \li Turn on and off snapping separately for the different transformations
+      \li Turn snapping on and off separately for the different transformations
       (move, rotate, scale).
-      \li Set snap intervals.
+      \li Set snap intervals for the transformations.
-      \li Toggle if the position snaps to absolute or relative values.
+      \note Changing the snap interval for the position also changes the grid line intervals.
+      \note All the grid lines might not be visible depending on the zoom level in the 3D view.
+      \li Select \uicontrol {Absolute Position} to snap to absolute values. Clear the checkbox
+       to use relative values.The absolute snapping aligns the object with the grid, while the
+       relative snapping moves the object in fixed intervals without changing its alignment.
+       For example, if you have an object that is slightly off the grid and you want to snap it
+       to the grid, use the absolute snapping. If you want to move the object by a certain
+       distance without affecting its orientation, use the relative snapping.
     \endlist
 
     \section1 Aligning Views and Cameras

doc/qtdesignstudio/src/views/qtquick-connection-editor-bindings.qdoc

@@ -25,30 +25,45 @@
 
     You can create bindings between components in \uicontrol Bindings.
 
-    \image qmldesigner-bindings.png
+    \image qmldesigner-bindings.webp
+
+    \section1 Creating Bindings Between Component Properties
 
     To bind a property of a component to the property of another component:
 
     \list 1
-        \li Go to the \uicontrol Binding tab in the \l Connections view.
+
+        \li Place two components in the \uicontrol {2D} view.
+
+        \image qmldesigner-components-before-binding.webp
+
+        \li Name the first component as \e {viewBox}.
+        \li Name the second component as \e {connectBox}.
+        \li Apply a thick \e black \uicontrol Border and a \e blue \uicontrol{Color} to the \e {viewBox} component.
+        \li Select the \e {connectBox} component.
+        \li Select \uicontrol Bindings from the \uicontrol Connections view.
         \li Select the \inlineimage icons/plus.png
-            (\uicontrol Add) button to add a binding for the currently selected
+             (\uicontrol Add) button to add a binding to the currently selected
-            component. The component ID is displayed in the \uicontrol Item
+            component.
-            column.
+
-          \li Double-click the value in the \uicontrol Property column to select
+        \image qmldesigner-updated-bindings-editor.webp
-            the property to bind to a source property.
+
-        \li Double-click the value in the \uicontrol {Source Item} column to
+        \li From the pop-up \uicontrol {Bindings editor}, in the \uicontrol From section,
-            select the component whose property you want to use to determine the
+            select \e {viewBox} as the parent component, then select its \uicontrol {border.color}
-            behavior of the target component.
+            property.
-        \li Double-click the value in the \uicontrol {Source Property} column
+        \li In the \uicontrol To section you find the \e {connectBox} component already selected
-            to select the property to bind the target property to.
+            as the target component. Select \uicontrol {color} from the \uicontrol {drop-down}
+            below to set its affected property.
+        \li You see the \uicontrol {border.color} of the \e {viewBox} component
+            instantly getting applied to the \uicontrol {color} of the \e {connectBox}
+            component.
+
+        \image qmldesigner-components-after-binding.webp
+
     \endlist
 
-    Right-click a binding and select \uicontrol {Open Binding Editor} in
+    All the \uicontrol Bindings connections have automated JavaScript expression in the
-    the context menu to specify the binding as a JavaScript expression in
+    \uicontrol {Code view}. For more information, see \l{Setting Bindings}.
-    \uicontrol {Binding Editor}. For more information, see \l{Setting Bindings}.
-
-    \image qmldesigner-binding-editor.png "Binding Editor"
 
     For examples of creating property bindings, see:
 
@@ -57,10 +72,6 @@
         \li \l{Exporting Properties}
     \endlist
 
-    For more information, watch the following video:
-
-    \youtube UfvA04CIXv0
-
     \include creator-logical-operators.qdocinc logical operators
 
 */

doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc

@@ -60,6 +60,32 @@
 
     For more information, see \l{Setting Bindings}.
 
+    \section1 Adding a Custom Property to a Component from the Connections View
+
+    You can add a custom property to a component from the \uicontrol {Connections} view.
+    Follow the process:
+
+    \list 1
+        \li Select the component you want to add a Custom property to in the
+            \uicontrol {2D} view or in the \uicontrol {Navigator} view.
+        \li Select \uicontrol {Properties} from the \uicontrol {Connections} view.
+
+            \image add-updated-local-custom-property.webp
+
+        \li Select the \inlineimage icons/plus.png
+             (\uicontrol Add) button to add a Custom property.
+        \li From the pop-up \uicontrol {Custom property editor}, select the \uicontrol {Type}
+            of the property you want to include.
+
+            \image add-updated-local-custom-property-editor.webp
+
+        \li Next, set the \uicontrol{Name} of the property.
+        \li Set a value to the Custom property in the \uicontrol {Value} field.
+    \endlist
+
+    \note Select the \inlineimage icons/minus.png
+          (\uicontrol Remove) to delete a Custom Property.
+
     \section1 Supported Property Types
 
     The following table describes the supported property types:

doc/qtdesignstudio/src/views/qtquick-connection-editor-signals.qdoc

@@ -38,88 +38,125 @@
     For more information about signals and signal handlers, see
     \l{Signal and Handler Event System}.
 
+    \section1 Connecting Components to Signals in the Connection View
+
     You can connect components to signals that are available to them in
-    \uicontrol Connections.
+    \uicontrol Connections. Then define \uicontrol Action for them. You can
+    put \b {logical conditions} on this \uicontrol Actions to control them
+    according to your needs.
 
-    \image qmldesigner-connections.png
+    \image qmldesigner-connections-advanced.webp
 
-    To connect components to signals:
+    Initiate a new connection for a component:
 
     \list 1
-        \li Go to the \uicontrol Connections tab in the \l Connections view.
+        \li Select the component you want to connect in the \uicontrol Navigator or \uicontrol 2D
+        view.
+        \li Go to the \uicontrol Connections tab in the \uicontrol Connections view.
         \li Select the \inlineimage icons/plus.png
             (\uicontrol Add) button to add a connection.
-        \li Double-click the value in the \uicontrol Target column to add the
-            component to connect to a signal.
-        \li Double-click the value in the \uicontrol {Signal Handler} column to
-            select the signal that the connection will listen to from a list of
-            all signals available for the component.
-        \li Double-click the value in the \uicontrol Actions column to specify
-            the action to perform when the signal is emitted. You use JavaScript
-            to specify the actions.
     \endlist
 
-    Right-click a connection and select \uicontrol {Open Connection Editor}
+    \image qmldesigner-connections-editor.webp
-    in the context menu to specify the connection in
-    \uicontrol {Connection Editor}.
 
-    For examples of using the \uicontrol {Connections} view, see:
+    Connect component \uicontrol Signal to \uicontrol Action:
-
-    \list
-        \li \l{Connecting Buttons to States} in \l{Log In UI - States}
-        \li \l{Connecting Buttons to State Changes} in \l{Washing Machine UI}
-    \endlist
-
-    \section1 Adding Signal Handlers
-
-    If a signal handler that you need is not listed in the
-    \uicontrol {Signal Handler} column, you can add it:
 
     \list 1
-        \li Right-click a component in the \l Navigator or \l {2D} view
+        \li Select the interaction \uicontrol Signal for the \uicontrol Target component with
-            and select \uicontrol {Add New Signal Handler} in the context menu.
+            which you want to connect an \uicontrol Action.
-        \li In the \uicontrol Signal field, select the signal to handle.
+        \li Select an \uicontrol Action that you want to implement when the selected
-            \image qmldesigner-implement-signal-handler.png "Implement Signal Handler dialog"
+            \uicontrol Signal for the \uicontrol Target component is initiated.
-        \li Select the radio buttons to filter the list to only display
+        \li You get different properties or sub-sections associated with the selected
-            frequently used signals or property changes.
+            \uicontrol Action. Select \uicontrol {Item/Method/State/Property/Value} from related
-        \li Select \uicontrol OK.
+            sub-sections. This way you can formulate changes in the design by manipulating
+            components.
+        \li Select \uicontrol {Add Condition} to include a logic to the selected \uicontrol Action.
+            To do this, you can first select the component you want to put logic on, and then
+            select the conditional statements \e {(i.e. AND, OR, EQUAL, NOT EQUAL, GREATER, LESS,
+            GREATER OR EQUAL, LESS OR EQUAL)} and then select another component to compare
+            between them.
+        \li Optional. You can include an \uicontrol {Else Statement} by selecting the
+            \uicontrol {Else Statement} control and adding components and conditional
+            statements in a similar way to the previous step.
+        \li Optional. To use complex conditional statements, select the \uicontrol {Manual Edit}
+            control. After you have entered your JavaScript statements, close the window to apply
+            them.
     \endlist
 
-    The added signal handler is automatically \l{Adding Property Aliases}
+    \note Select a connection to re-open the \uicontrol {Connection Editor} for any
-    {exported as a property}.
+        previously created \uicontrol Connection.
+    \note Select \inlineimage icons/minus.png
+          (\uicontrol Remove) to delete a connection.
 
-    \section1 Adding Actions and Assignments
+
+    \section1 Actions and Conditions
 
     You use the \uicontrol {Connection Editor} to create the JavaScript
-    expressions for \e actions and \e assignments. An \e action connects
+    expressions for \e actions with \e conditions. An \e action connects
-    an component to a signal, whereas an \e assignment fetches property values
+    a component to a signal, whereas \e conditions fetch property values
-    from another component.
+    from other components and compare them to each other. Based on that, you can later change
+    the components with JavaScript expressions.
 
     For more information about the logical operators that you can use to
     construct conditional expressions, see \l {Summary of Logical Operators}.
 
-    To create JavaScript expressions for actions:
+    \section2 Creating JavaScript Expressions
 
-    \list 1
+    There are two ways to create JavaScript expressions for actions:
-        \li Select \uicontrol {Open Connection Editor} in the context menu
+
-            in \uicontrol {Connections}.
+    \list
-            \image qtquick-connection-editor-action.png
+      \li Follow the steps described above in Connect component \uicontrol Signal to
-        \li Select \uicontrol Action as the type of the connections component.
+          \uicontrol Action. For a list of \uicontrol Actions and their properties, see
-        \li Select the component to connect to a signal.
+          \l {Action Properties}.
-        \li Select the action to perform when the signal is emitted.
+          \image qmldesigner-connections-ConditionalAction-Autometic.webp
+      \li Open the \uicontrol {Manual Code Edit} window from the
+          \uicontrol {Connections} view and write JavaScript expressions with components
+          and logical expressions manually.
     \endlist
 
-    To create JavaScript expressions for assignments:
+    \section2 Action Properties
+
+    \table
+        \header
+            \li Action
+            \li 1st Property
+            \li 2nd Property
+        \row
+            \li \uicontrol {Call Function}
+            \li \uicontrol {Item}: [Sets the component that is affected by the action of the
+                \b Target component's \b Signal.]
+            \li \uicontrol {Method}: [Sets the item component's method that is affected by the
+                \b Target component's \b Signal.]
+        \row
+            \li \uicontrol {Assign}
+            \li \uicontrol {From}: [Sets the component and its property from which the value
+                is copied when the \b Target component initiates the \b Signal.]
+            \li \uicontrol {To}: [Sets the component and its property to which the copied value
+                is assigned when the \b Target component initiates the \b Signal.]
+        \row
+            \li \uicontrol {Change State}
+            \li \uicontrol {State Group}: [Sets a \b {State Group} that is accessed when the
+                \b Target component initiates the \b Signal.]
+            \li \uicontrol {State}: [Sets a \b State within the assigned \b {State Group}
+                that is accessed when the \b Target component initiates the \b Signal.]
+        \row
+            \li \uicontrol {Set Property}
+            \li \uicontrol {Item}: [Sets the component that is affected by the action
+                of the \b Target component's \b Signal.]
+            \li \uicontrol {Property}: [Sets the property of the component that is
+                affected by the action of the \b Target component's \b Signal.]
+        \row
+            \li \uicontrol {Print Message}
+            \li \uicontrol {Message}: [Sets a text that is printed when the \b Signal
+                of the \b Target component initiates.]
+            \li N/A
+    \endtable
+
+    \note If you create a conditional expression by selecting options from drop-down menus in
+            the \uicontrol {Connection} view, you can only create a single
+            level {if-else} expression. For nested level \e {if-elseif-else} expressions,
+            you have to use the \uicontrol {Manual Code Edit}.
+
+    \image qmldesigner-connections-ConditionalAction-Manual.webp
 
-    \list 1
-        \li Select \uicontrol {Open Connection Editor} in the context menu
-            in \uicontrol {Connections}.
-            \image qtquick-connection-editor-assignment.png
-        \li Select \uicontrol Assignment as the type of the connections
-            component.
-        \li Select the target component for the property assignment.
-        \li Select the property of the target component to assign a value to.
-        \li Select the source component for the property assignment.
-        \li Select the property of the source component to fetch the value from.
-    \endlist
 */

doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc

@@ -12,7 +12,7 @@
     to create connections between components and the application, to bind
     component properties together, and to add custom properties for components.
 
-    \image qmldesigner-connections.png "The Connections view"
+    \image qmldesigner-connections.webp "The Connections view"
 
     The \l{glossary-component}{components} of the application UI and the
     application logic need to communicate with each other. For example, a

share/qtcreator/qmldesigner/assetsLibraryQmlSources/AssetDelegate.qml

@@ -327,7 +327,7 @@ TreeViewDelegate {
         sourceSize.width: 48
         sourceSize.height: 48
         asynchronous: true
-        fillMode: Image.PreserveAspectFit
+        fillMode: Image.Pad
         source: thumbnailImage.__computeSource()
 
         function __computeSource() {

share/qtcreator/qmldesigner/assetsLibraryQmlSources/AssetsView.qml

@@ -5,6 +5,7 @@ import QtQuick
 import QtQuick.Controls
 import HelperWidgets as HelperWidgets
 import StudioControls as StudioControls
+import StudioTheme as StudioTheme
 import AssetsLibraryBackend
 
 TreeView {
@@ -53,8 +54,9 @@ TreeView {
 
     HoverHandler { id: hoverHandler }
 
-    ScrollBar.vertical: HelperWidgets.ScrollBar {
+    ScrollBar.vertical: StudioControls.TransientScrollBar {
         id: verticalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: root
         x: root.width - verticalScrollBar.width
         y: 0

share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionItem.qml

@@ -84,8 +84,9 @@ Item {
         Text {
             id: threeDots
 
-            text: "..."
+            text: StudioTheme.Constants.more_medium
-            font.pixelSize: StudioTheme.Values.baseFontSize
+            font.family: StudioTheme.Constants.iconFont.family
+            font.pixelSize: StudioTheme.Values.baseIconFontSize
             color: textColor
             anchors.right: boundingRect.right
             anchors.verticalCenter: parent.verticalCenter

share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml

@@ -82,14 +82,14 @@ Item {
                     spacing: 2
 
                     HelperWidgets.IconButton {
-                        icon: StudioTheme.Constants.translationImport
+                        icon: StudioTheme.Constants.downloadjson_large
                         tooltip: qsTr("Import Json")
 
                         onClicked: jsonImporter.open()
                     }
 
                     HelperWidgets.IconButton {
-                        icon: StudioTheme.Constants.translationImport
+                        icon: StudioTheme.Constants.downloadcsv_large
                         tooltip: qsTr("Import CSV")
 
                         onClicked: csvImporter.open()
@@ -112,13 +112,13 @@ Item {
                 }
 
                 ListView {
-                    id: collectionListView
+                    id: sourceListView
 
                     width: parent.width
                     height: contentHeight
                     model: root.model
 
-                    delegate: CollectionItem {
+                    delegate: ModelSourceItem {
                         onDeleteItem: root.model.removeRow(index)
                     }
 

share/qtcreator/qmldesigner/collectionEditorQmlSource/ModelSourceItem.qml

@@ -0,0 +1,331 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
+
+import QtQuick
+import QtQuick.Controls
+import HelperWidgets 2.0 as HelperWidgets
+import StudioControls 1.0 as StudioControls
+import StudioTheme as StudioTheme
+
+Item {
+    id: root
+
+    implicitWidth: 300
+    implicitHeight: wholeColumn.height + 6
+
+    property color textColor
+    property var collectionModel
+
+    property bool expanded: false
+
+    signal selectItem(int itemIndex)
+    signal deleteItem()
+
+    Column {
+        id: wholeColumn
+
+        Item {
+            id: boundingRect
+
+            anchors.centerIn: root
+            width: root.width - 24
+            height: nameHolder.height
+            clip: true
+
+            MouseArea {
+                id: itemMouse
+
+                anchors.fill: parent
+                acceptedButtons: Qt.LeftButton
+                propagateComposedEvents: true
+                hoverEnabled: true
+
+                onClicked: (event) => {
+                    if (!sourceIsSelected) {
+                        sourceIsSelected = true
+                        event.accepted = true
+                    }
+                }
+
+                onDoubleClicked: (event) => {
+                    if (collectionListView.count > 0)
+                       root.expanded = !root.expanded;
+                }
+            }
+
+            Rectangle {
+                id: innerRect
+                anchors.fill: parent
+            }
+
+            Row {
+                width: parent.width - threeDots.width
+                leftPadding: 20
+
+                Text {
+                    id: expandButton
+
+                    property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle
+
+                    width: expandButton.style.squareControlSize.width
+                    height: nameHolder.height
+
+                    text: StudioTheme.Constants.startNode
+                    font.family: StudioTheme.Constants.iconFont.family
+                    font.pixelSize: expandButton.style.baseIconFontSize
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    color: textColor
+
+                    rotation: root.expanded ? 90 : 0
+
+                    Behavior on rotation {
+                        SpringAnimation { spring: 2; damping: 0.2 }
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        acceptedButtons: Qt.RightButton + Qt.LeftButton
+                        onClicked: (event) => {
+                            root.expanded = !root.expanded
+                            event.accepted = true
+                        }
+                    }
+                    visible: collectionListView.count > 0
+                }
+
+                Text {
+                    id: nameHolder
+
+                    text: sourceName
+                    font.pixelSize: StudioTheme.Values.baseFontSize
+                    color: textColor
+                    leftPadding: 5
+                    topPadding: 8
+                    rightPadding: 8
+                    bottomPadding: 8
+                    elide: Text.ElideMiddle
+                    verticalAlignment: Text.AlignVCenter
+                }
+            }
+
+            Text {
+                id: threeDots
+
+                text: StudioTheme.Constants.more_medium
+                font.family: StudioTheme.Constants.iconFont.family
+                font.pixelSize: StudioTheme.Values.baseIconFontSize
+                color: textColor
+                anchors.right: boundingRect.right
+                anchors.verticalCenter: parent.verticalCenter
+                rightPadding: 12
+                topPadding: nameHolder.topPadding
+                bottomPadding: nameHolder.bottomPadding
+                verticalAlignment: Text.AlignVCenter
+
+                MouseArea {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.RightButton + Qt.LeftButton
+                    onClicked: (event) => {
+                        collectionMenu.popup()
+                        event.accepted = true
+                    }
+                }
+            }
+        }
+
+        ListView {
+            id: collectionListView
+
+            width: parent.width
+            height: root.expanded ? contentHeight : 0
+            model: collections
+            clip: true
+
+            Behavior on height {
+                NumberAnimation {duration: 500}
+            }
+
+            delegate: CollectionItem {
+                width: parent.width
+                onDeleteItem: root.model.removeRow(index)
+            }
+        }
+    }
+
+    StudioControls.Menu {
+        id: collectionMenu
+
+        StudioControls.MenuItem {
+            text: qsTr("Delete")
+            shortcut: StandardKey.Delete
+            onTriggered: deleteDialog.open()
+        }
+
+        StudioControls.MenuItem {
+            text: qsTr("Rename")
+            shortcut: StandardKey.Replace
+            onTriggered: renameDialog.open()
+        }
+    }
+
+    StudioControls.Dialog {
+        id: deleteDialog
+
+        title: qsTr("Deleting source")
+
+        contentItem: Column {
+            spacing: 2
+
+            Text {
+                text: qsTr("Are you sure that you want to delete source \"" + sourceName + "\"?")
+                color: StudioTheme.Values.themeTextColor
+            }
+
+            Item { // spacer
+                width: 1
+                height: 20
+            }
+
+            Row {
+                anchors.right: parent.right
+                spacing: 10
+
+                HelperWidgets.Button {
+                    id: btnDelete
+
+                    text: qsTr("Delete")
+                    onClicked: root.deleteItem(index)
+                }
+
+                HelperWidgets.Button {
+                    text: qsTr("Cancel")
+                    onClicked: deleteDialog.reject()
+                }
+            }
+        }
+    }
+
+    StudioControls.Dialog {
+        id: renameDialog
+
+        title: qsTr("Rename source")
+
+        onAccepted: {
+            if (newNameField.text !== "")
+                sourceName = newNameField.text
+        }
+
+        onOpened: {
+            newNameField.text = sourceName
+        }
+
+        contentItem: Column {
+            spacing: 2
+
+            Text {
+                text: qsTr("Previous name: " + sourceName)
+                color: StudioTheme.Values.themeTextColor
+            }
+
+            Row {
+                spacing: 10
+                Text {
+                    text: qsTr("New name:")
+                    color: StudioTheme.Values.themeTextColor
+                }
+
+                StudioControls.TextField {
+                    id: newNameField
+
+                    actionIndicator.visible: false
+                    translationIndicator.visible: false
+                    validator: newNameValidator
+
+                    Keys.onEnterPressed: renameDialog.accept()
+                    Keys.onReturnPressed: renameDialog.accept()
+                    Keys.onEscapePressed: renameDialog.reject()
+
+                    onTextChanged: {
+                        btnRename.enabled = newNameField.text !== ""
+                    }
+                }
+            }
+
+            Item { // spacer
+                width: 1
+                height: 20
+            }
+
+            Row {
+                anchors.right: parent.right
+                spacing: 10
+
+                HelperWidgets.Button {
+                    id: btnRename
+
+                    text: qsTr("Rename")
+                    onClicked: renameDialog.accept()
+                }
+
+                HelperWidgets.Button {
+                    text: qsTr("Cancel")
+                    onClicked: renameDialog.reject()
+                }
+            }
+        }
+    }
+
+    HelperWidgets.RegExpValidator {
+        id: newNameValidator
+        regExp: /^\w+$/
+    }
+
+    states: [
+        State {
+            name: "default"
+            when: !sourceIsSelected && !itemMouse.containsMouse
+
+            PropertyChanges {
+                target: innerRect
+                opacity: 0.4
+                color: StudioTheme.Values.themeControlBackground
+            }
+
+            PropertyChanges {
+                target: root
+                textColor: StudioTheme.Values.themeTextColor
+            }
+        },
+        State {
+            name: "hovered"
+            when: !sourceIsSelected && itemMouse.containsMouse
+
+            PropertyChanges {
+                target: innerRect
+                opacity: 0.5
+                color: StudioTheme.Values.themeControlBackgroundHover
+            }
+
+            PropertyChanges {
+                target: root
+                textColor: StudioTheme.Values.themeTextColor
+            }
+        },
+        State {
+            name: "selected"
+            when: sourceIsSelected
+
+            PropertyChanges {
+                target: innerRect
+                opacity: 0.6
+                color: StudioTheme.Values.themeControlBackgroundInteraction
+            }
+
+            PropertyChanges {
+                target: root
+                textColor: StudioTheme.Values.themeIconColorSelected
+            }
+        }
+    ]
+}

share/qtcreator/qmldesigner/connectionseditor/BindingsDialogForm.qml

@@ -22,8 +22,17 @@ Column {
     Row {
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("From") ; tooltip: qsTr("The Property to assign from.")}
+        PopupLabel {
-        PopupLabel { text: qsTr("To"); tooltip: qsTr("The Property to assign to.") }
+            width: root.columnWidth
+            text: qsTr("From")
+            tooltip: qsTr("Sets the component and its property from which the value is copied.")
+        }
+
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("To")
+            tooltip: qsTr("Sets the property of the selected component to which the copied value is assigned.")
+        }
     }
 
     Row {

share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml

@@ -3,8 +3,8 @@
 
 import QtQuick
 import QtQuick.Controls
-import HelperWidgets 2.0 as HelperWidgets
+import HelperWidgets as HelperWidgets
-import StudioControls 1.0 as StudioControls
+import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 import ConnectionsEditorEditorBackend
 
@@ -15,6 +15,12 @@ ListView {
 
     property bool adsFocus: false
 
+    // Temporarily remove due to dockwidget focus issue
+    //onAdsFocusChanged: {
+    //    if (!root.adsFocus)
+    //        dialog.close()
+    //}
+
     clip: true
     interactive: true
     highlightMoveDuration: 0
@@ -24,8 +30,9 @@ ListView {
 
     HoverHandler { id: hoverHandler }
 
-    ScrollBar.vertical: HelperWidgets.ScrollBar {
+    ScrollBar.vertical: StudioControls.TransientScrollBar {
         id: verticalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: root
         x: root.width - verticalScrollBar.width
         y: 0
@@ -62,11 +69,26 @@ ListView {
     property int rowWidth: root.rowSpace / root.numColumns
     property int rowRest: root.rowSpace % root.numColumns
 
+    function addBinding() {
+        ConnectionsEditorEditorBackend.bindingModel.add()
+        if (root.currentItem)
+            dialog.popup(root.currentItem.delegateMouseArea)
+    }
+
+    function resetIndex() {
+        root.model.currentIndex = -1
+        root.currentIndex = -1
+    }
+
     data: [
         BindingsDialog {
             id: dialog
             visible: false
             backend: root.model.delegate
+
+            onClosing: function(event) {
+                root.resetIndex()
+            }
         }
     ]
 
@@ -80,6 +102,8 @@ ListView {
         required property string source
         required property string sourceProperty
 
+        property alias delegateMouseArea: mouseArea
+
         width: ListView.view.width
         height: root.style.squareControlSize.height
         color: mouseArea.containsMouse ?
@@ -175,9 +199,13 @@ ListView {
 
                 HelperWidgets.ToolTipArea {
                     id: toolTipArea
-                    tooltip: qsTr("This is a test.")
+                    tooltip: qsTr("Removes the binding.")
                     anchors.fill: parent
-                    onClicked: root.model.remove(itemDelegate.index)
+                    onClicked: {
+                        if (itemDelegate.ListView.isCurrentItem)
+                            dialog.close()
+                        root.model.remove(itemDelegate.index)
+                    }
                 }
             }
         }
@@ -185,6 +213,5 @@ ListView {
 
     highlight: Rectangle {
         color: root.style.interaction
-        width: 600
     }
 }

share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialog.qml

@@ -7,7 +7,7 @@ import StudioTheme 1.0 as StudioTheme
 import HelperWidgets 2.0 as HelperWidgets
 
 PopupDialog {
-
+    id: root
     property alias backend: form.backend
 
     titleBar: Row {
@@ -21,7 +21,7 @@ PopupDialog {
             anchors.verticalCenter: parent.verticalCenter
             HelperWidgets.ToolTipArea {
                 anchors.fill: parent
-                tooltip: qsTr("Choose the target for the signal.")
+                tooltip: qsTr("Sets the Component that is connected to a <b>Signal</b>.")
             }
         }
 
@@ -36,10 +36,16 @@ PopupDialog {
             property int currentTypeIndex: backend.signal.id.currentIndex ?? 0
             onCurrentTypeIndexChanged: target.currentIndex = target.currentTypeIndex
         }
-
     }
 
     ConnectionsDialogForm {
         id: form
+
+        Connections {
+            target: root.backend
+            function onPopupShouldClose() {
+                root.close()
+            }
+        }
     }
 }

share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml

@@ -11,7 +11,7 @@ Column {
     id: root
 
     readonly property real horizontalSpacing: 10
-    readonly property real verticalSpacing: 16
+    readonly property real verticalSpacing: 12
     readonly property real columnWidth: (root.width - root.horizontalSpacing) / 2
 
     property var backend
@@ -27,8 +27,17 @@ Column {
     Row {
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("Signal"); tooltip: qsTr("The name of the signal.") }
+        PopupLabel {
-        PopupLabel { text: qsTr("Action"); tooltip: qsTr("The type of the action.") }
+            width: root.columnWidth
+            text: qsTr("Signal")
+            tooltip: qsTr("Sets an interaction method that connects to the <b>Target</b> component.")
+        }
+
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("Action")
+            tooltip: qsTr("Sets an action that is associated with the selected <b>Target</b> component's <b>Signal</b>.")
+        }
     }
 
     Row {
@@ -57,22 +66,48 @@ Column {
             onIndexFromBackendChanged: action.currentIndex = action.indexFromBackend
             onActivated: backend.changeActionType(action.currentValue)
 
-            model: [
+            model: ListModel {
-                { value: ConnectionModelStatementDelegate.CallFunction, text: qsTr("Call Function") },
+                ListElement {
-                { value: ConnectionModelStatementDelegate.Assign, text: qsTr("Assign") },
+                    value: ConnectionModelStatementDelegate.CallFunction
-                { value: ConnectionModelStatementDelegate.ChangeState, text: qsTr("Change State") },
+                    text: qsTr("Call Function")
-                { value: ConnectionModelStatementDelegate.SetProperty, text: qsTr("Set Property") },
+                    enabled: true
-                { value: ConnectionModelStatementDelegate.PrintMessage, text: qsTr("Print Message") },
+                }
-                { value: ConnectionModelStatementDelegate.Custom, text: qsTr("Unknown") }
+                ListElement {
-            ]
+                    value: ConnectionModelStatementDelegate.Assign
+                    text: qsTr("Assign")
+                    enabled: true
+                }
+                ListElement {
+                    value: ConnectionModelStatementDelegate.ChangeState
+                    text: qsTr("Change State")
+                    enabled: true
+                }
+                ListElement {
+                    value: ConnectionModelStatementDelegate.SetProperty
+                    text: qsTr("Set Property")
+                    enabled: true
+                }
+                ListElement {
+                    value: ConnectionModelStatementDelegate.PrintMessage
+                    text: qsTr("Print Message")
+                    enabled: true
+                }
+                ListElement {
+                    value: ConnectionModelStatementDelegate.Custom
+                    text: qsTr("Custom")
+                    enabled: false
+                }
+            }
         }
     }
 
     StatementEditor {
+        width: root.width
         actionType: action.currentValue ?? ConnectionModelStatementDelegate.Custom
         horizontalSpacing: root.horizontalSpacing
         columnWidth: root.columnWidth
         statement: backend.okStatement
+        backend: root.backend
         spacing: root.verticalSpacing
     }
 
@@ -80,6 +115,7 @@ Column {
         style: StudioTheme.Values.connectionPopupButtonStyle
         width: 160
         buttonIcon: qsTr("Add Condition")
+        tooltip: qsTr("Sets a logical condition for the selected <b>Signal</b>. It works with the properties of the <b>Target</b> component.")
         iconSize: StudioTheme.Values.baseFontSize
         iconFont: StudioTheme.Constants.font
         anchors.horizontalCenter: parent.horizontalCenter
@@ -92,6 +128,7 @@ Column {
         style: StudioTheme.Values.connectionPopupButtonStyle
         width: 160
         buttonIcon: qsTr("Remove Condition")
+        tooltip: qsTr("Removes the logical condition for the <b>Target</b> component.")
         iconSize: StudioTheme.Values.baseFontSize
         iconFont: StudioTheme.Constants.font
         anchors.horizontalCenter: parent.horizontalCenter
@@ -142,6 +179,7 @@ Column {
         style: StudioTheme.Values.connectionPopupButtonStyle
         width: 160
         buttonIcon: qsTr("Add Else Statement")
+        tooltip: qsTr("Sets an alternate condition for the previously defined logical condition.")
         iconSize: StudioTheme.Values.baseFontSize
         iconFont: StudioTheme.Constants.font
         anchors.horizontalCenter: parent.horizontalCenter
@@ -155,6 +193,7 @@ Column {
         style: StudioTheme.Values.connectionPopupButtonStyle
         width: 160
         buttonIcon: qsTr("Remove Else Statement")
+        tooltip: qsTr("Removes the alternate logical condition for the previously defined logical condition.")
         iconSize: StudioTheme.Values.baseFontSize
         iconFont: StudioTheme.Constants.font
         anchors.horizontalCenter: parent.horizontalCenter
@@ -166,42 +205,82 @@ Column {
 
     //Else Statement
     StatementEditor {
+        width: root.width
         actionType: action.currentValue ?? ConnectionModelStatementDelegate.Custom
         horizontalSpacing: root.horizontalSpacing
         columnWidth: root.columnWidth
         statement: backend.koStatement
+        backend: root.backend
         spacing: root.verticalSpacing
         visible: action.currentValue !== ConnectionModelStatementDelegate.Custom
                  && backend.hasCondition && backend.hasElse
     }
 
+    HelperWidgets.AbstractButton {
+        id: editorButton
+        buttonIcon: StudioTheme.Constants.codeEditor_medium
+        tooltip: qsTr("Write the conditions for the components and the signals manually.")
+        onClicked: expressionDialogLoader.show()
+    }
+
     // Editor
     Rectangle {
         id: editor
         width: parent.width
         height: 150
-        color: StudioTheme.Values.themeToolbarBackground
+        color: StudioTheme.Values.themeConnectionCodeEditor
 
         Text {
-            width: parent.width - 8 // twice the editor button margins
+            id: code
-            anchors.centerIn: parent
+            anchors.fill: parent
-            text: backend.source
+            anchors.margins: 4
+            text: backend.indentedSource
             color: StudioTheme.Values.themeTextColor
             font.pixelSize: StudioTheme.Values.myFontSize
-            wrapMode: Text.WordWrap
+            wrapMode: Text.Wrap
+            horizontalAlignment: code.lineCount === 1 ? Text.AlignHCenter : Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+
         }
 
-        HelperWidgets.AbstractButton {
+        Loader {
-            id: editorButton
+            id: expressionDialogLoader
+            parent: editor
+            anchors.fill: parent
+            visible: false
+            active: visible
 
-            anchors.top: parent.top
+            function show() {
-            anchors.right: parent.right
+                expressionDialogLoader.visible = true
-            anchors.margins: 4
+            }
 
-            style: StudioTheme.Values.viewBarButtonStyle
+            sourceComponent: Item {
-            buttonIcon: StudioTheme.Constants.edit_medium
+                id: bindingEditorParent
-            tooltip: qsTr("Add something.")
+
-            onClicked: console.log("OPEN EDITOR")
+                Component.onCompleted: {
+                    bindingEditor.showWidget()
+                    bindingEditor.text = backend.source
+                    bindingEditor.showControls(false)
+                    bindingEditor.setMultilne(true)
+                    bindingEditor.updateWindowName()
+                }
+
+                ActionEditor {
+                    id: bindingEditor
+
+                    onRejected: {
+                        hideWidget()
+                        expressionDialogLoader.visible = false
+                    }
+
+                    onAccepted: {
+                        backend.setNewSource(bindingEditor.text)
+                        hideWidget()
+                        expressionDialogLoader.visible = false
+                    }
+                }
+            }
         }
     }
 }

share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml

@@ -3,8 +3,8 @@
 
 import QtQuick
 import QtQuick.Controls
-import HelperWidgets 2.0 as HelperWidgets
+import HelperWidgets as HelperWidgets
-import StudioControls 1.0 as StudioControls
+import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 import ConnectionsEditorEditorBackend
 
@@ -15,6 +15,12 @@ ListView {
 
     property bool adsFocus: false
 
+    // Temporarily remove due to dockwidget focus issue
+    //onAdsFocusChanged: {
+    //    if (!root.adsFocus)
+    //        dialog.close()
+    //}
+
     clip: true
     interactive: true
     highlightMoveDuration: 0
@@ -24,8 +30,9 @@ ListView {
 
     HoverHandler { id: hoverHandler }
 
-    ScrollBar.vertical: HelperWidgets.ScrollBar {
+    ScrollBar.vertical: StudioControls.TransientScrollBar {
         id: verticalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: root
         x: root.width - verticalScrollBar.width
         y: 0
@@ -63,11 +70,27 @@ ListView {
     property int rowWidth: root.rowSpace / root.numColumns
     property int rowRest: root.rowSpace % root.numColumns
 
+    function addConnection() {
+        ConnectionsEditorEditorBackend.connectionModel.add()
+        if (root.currentItem)
+            dialog.popup(root.currentItem.delegateMouseArea)
+    }
+
+    function resetIndex() {
+        root.model.currentIndex = -1
+        root.currentIndex = -1
+        dialog.backend.currentRow = -1
+    }
+
     data: [
         ConnectionsDialog {
             id: dialog
             visible: false
             backend: root.model.delegate
+
+            onClosing: function(event) {
+                root.resetIndex()
+            }
         }
     ]
 
@@ -80,9 +103,13 @@ ListView {
         required property string target
         required property string action
 
+        property alias delegateMouseArea: mouseArea
+
+        property bool hovered: mouseArea.containsMouse || toolTipArea.containsMouse
+
         width: ListView.view.width
         height: root.style.squareControlSize.height
-        color: mouseArea.containsMouse ?
+        color: itemDelegate.hovered ?
                    itemDelegate.ListView.isCurrentItem ? root.style.interactionHover
                                                        : root.style.background.hover
                                        : "transparent"
@@ -146,10 +173,12 @@ ListView {
                 height: root.style.squareControlSize.height
 
                 color: toolTipArea.containsMouse ?
-                           itemDelegate.ListView.isCurrentItem ? root.style.interactionHover
+                           itemDelegate.ListView.isCurrentItem ? root.style.interactionGlobalHover
-                                                               : root.style.background.hover
+                                                               : root.style.background.globalHover
                                                : "transparent"
 
+                visible: itemDelegate.hovered || itemDelegate.ListView.isCurrentItem
+
                 Text {
                     anchors.fill: parent
 
@@ -166,9 +195,13 @@ ListView {
 
                 HelperWidgets.ToolTipArea {
                     id: toolTipArea
-                    tooltip: qsTr("This is a test.")
+                    tooltip: qsTr("Removes the connection.")
                     anchors.fill: parent
-                    onClicked: root.model.remove(itemDelegate.index)
+                    onClicked: {
+                        if (itemDelegate.ListView.isCurrentItem)
+                            dialog.close()
+                        root.model.remove(itemDelegate.index)
+                    }
                 }
             }
         }

share/qtcreator/qmldesigner/connectionseditor/ExpressionBuilder.qml

@@ -306,6 +306,7 @@ Rectangle {
                     id: pill
 
                     operatorModel: __operatorModel
+                    maxTextWidth: root.width - 2 * StudioTheme.Values.flowMargin
 
                     onRemove: function() {
                         // If pill has focus due to selection or keyboard navigation

share/qtcreator/qmldesigner/connectionseditor/Main.qml

@@ -27,7 +27,7 @@ Rectangle {
         Rectangle {
             id: toolbar
             width: parent.width
-            height: StudioTheme.Values.doubleToolbarHeight
+            height: StudioTheme.Values.toolbarHeight
             color: StudioTheme.Values.themeToolbarBackground
 
             Column {
@@ -38,13 +38,14 @@ Rectangle {
                 anchors.rightMargin: StudioTheme.Values.toolbarHorizontalMargin
                 spacing: StudioTheme.Values.toolbarColumnSpacing
 
-                StudioControls.SearchBox {
+                // Temporarily remove search until functionality is provided by backend
-                    id: searchBox
+                //StudioControls.SearchBox {
-                    width: parent.width
+                //    id: searchBox
-                    style: StudioTheme.Values.searchControlStyle
+                //    width: parent.width
+                //    style: StudioTheme.Values.searchControlStyle
 
-                    onSearchChanged: function(searchText) {}
+                //    onSearchChanged: function(searchText) {}
-                }
+                //}
 
                 Row {
                     id: row
@@ -56,7 +57,7 @@ Rectangle {
                         id: connections
                         buttonIcon: StudioTheme.Constants.connections_medium
                         text: qsTr("Connections")
-                        tooltip: qsTr("This is a tooltip.")
+                        tooltip: qsTr("Sets logical connection between the components and the signals.")
                         checked: true
                         autoExclusive: true
                         checkable: true
@@ -66,7 +67,7 @@ Rectangle {
                         id: bindings
                         buttonIcon: StudioTheme.Constants.binding_medium
                         text: qsTr("Bindings")
-                        tooltip: qsTr("This is a tooltip.")
+                        tooltip: qsTr("Sets the relation between the properties of two components to bind them together.")
                         autoExclusive: true
                         checkable: true
                     }
@@ -75,7 +76,7 @@ Rectangle {
                         id: properties
                         buttonIcon: StudioTheme.Constants.properties_medium
                         text: qsTr("Properties")
-                        tooltip: qsTr("This is a tooltip.")
+                        tooltip: qsTr("Sets an additional property for the component.")
                         autoExclusive: true
                         checkable: true
                     }
@@ -91,14 +92,14 @@ Rectangle {
                         id: addButton
                         style: StudioTheme.Values.viewBarButtonStyle
                         buttonIcon: StudioTheme.Constants.add_medium
-                        tooltip: qsTr("Add something.")
+                        tooltip: qsTr("Adds a Connection, Binding, or Custom Property to the components.")
                         onClicked: {
                             if (connections.checked)
-                                ConnectionsEditorEditorBackend.connectionModel.add()
+                                connectionsListView.addConnection()
                             else if (bindings.checked)
-                                ConnectionsEditorEditorBackend.bindingModel.add()
+                                bindingsListView.addBinding()
                             else if (properties.checked)
-                                ConnectionsEditorEditorBackend.dynamicPropertiesModel.add()
+                                propertiesListView.addProperty()
                         }
                     }
                 }
@@ -106,6 +107,7 @@ Rectangle {
         }
 
         ConnectionsListView {
+            id: connectionsListView
             visible: connections.checked
             width: parent.width
             height: parent.height - toolbar.height - column.spacing
@@ -114,6 +116,7 @@ Rectangle {
         }
 
         BindingsListView {
+            id: bindingsListView
             visible: bindings.checked
             width: parent.width
             height: parent.height - toolbar.height - column.spacing
@@ -122,6 +125,7 @@ Rectangle {
         }
 
         PropertiesListView {
+            id: propertiesListView
             visible: properties.checked
             width: parent.width
             height: parent.height - toolbar.height - column.spacing

share/qtcreator/qmldesigner/connectionseditor/MyListViewDelegate.qml

@@ -3,27 +3,52 @@
 
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
+import StudioTheme as StudioTheme
 
 ItemDelegate {
     id: control
-    hoverEnabled: true
 
-    contentItem: Text {
+    property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
+
+    hoverEnabled: true
+    verticalPadding: 0
+    rightPadding: 10 // ScrollBar thickness
+
+    contentItem: RowLayout {
+        Text {
+            Layout.fillWidth: true
             leftPadding: 8
             rightPadding: 8
             text: control.text
             font: control.font
             opacity: enabled ? 1.0 : 0.3
-        color: control.hovered ? "#111111" : "white"
+            color: control.hovered ? control.style.text.selectedText : control.style.text.idle
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
             elide: Text.ElideRight
         }
 
+        Item {
+            visible: control.childCount
+            width: 30
+            height: 30
+
+            Text {
+                id: chevronLeft
+                font.family: StudioTheme.Constants.iconFont.family
+                font.pixelSize: control.style.baseIconFontSize
+                color: control.hovered ? control.style.text.selectedText : control.style.text.idle
+                text: StudioTheme.Constants.forward_medium
+                anchors.centerIn: parent
+            }
+        }
+    }
+
     background: Rectangle {
         implicitWidth: 200
         implicitHeight: 30
         opacity: enabled ? 1 : 0.3
-        color: control.hovered ? "#4DBFFF" : "transparent"
+        color: control.hovered ? control.style.interaction : "transparent"
     }
 }

share/qtcreator/qmldesigner/connectionseditor/MyTreeViewDelegate.qml

@@ -8,6 +8,9 @@ import StudioTheme as StudioTheme
 
 T.TreeViewDelegate {
     id: control
+
+    property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
+
     hoverEnabled: true
     implicitWidth: 200
     implicitHeight: 30
@@ -28,8 +31,8 @@ T.TreeViewDelegate {
         Text {
             id: icon
             font.family: StudioTheme.Constants.iconFont.family
-            font.pixelSize: StudioTheme.Values.smallIconFontSize
+            font.pixelSize: control.style.smallIconFontSize
-            color: control.hovered ? "#111111" : "white" // TODO colors
+            color: control.hovered ? control.style.text.selectedText : control.style.text.idle
             text: StudioTheme.Constants.sectionToggle
             rotation: control.expanded ? 0 : -90
             anchors.centerIn: parent
@@ -39,14 +42,14 @@ T.TreeViewDelegate {
     background: Rectangle {
         implicitWidth: 200
         implicitHeight: 30
-        color: control.hovered ? "#4DBFFF" : "transparent"
+        color: control.hovered ? control.style.interaction : "transparent"
     }
 
     contentItem: Text {
         text: control.text
         font: control.font
         opacity: enabled ? 1.0 : 0.3
-        color: control.hovered ? "#111111" : "white"
+        color: control.hovered ? control.style.text.selectedText : control.style.text.idle
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight

share/qtcreator/qmldesigner/connectionseditor/Pill.qml

@@ -4,6 +4,7 @@
 import QtQuick
 import StudioControls as StudioControls
 import StudioTheme as StudioTheme
+import HelperWidgets as HelperWidgets
 
 FocusScope {
     id: root
@@ -33,15 +34,12 @@ FocusScope {
     readonly property int margin: StudioTheme.Values.flowPillMargin
     property var operatorModel
 
-    width: {
+    property bool hovered: rootMouseArea.containsMouse
-        if (root.isEditable()) {
+    property bool selected: root.focus
-            if (root.isInvalid())
+
-                return textInput.width + 1 + 2 * root.margin
+    property int maxTextWidth: 600
-            else
+
-                return textInput.width + 1
+    width: row.width
-        }
-        return textItem.contentWidth + icon.width + root.margin
-    }
     height: StudioTheme.Values.flowPillHeight
 
     onActiveFocusChanged: {
@@ -57,26 +55,59 @@ FocusScope {
             root.remove()
     }
 
-    MouseArea {
+    HelperWidgets.ToolTipArea {
         id: rootMouseArea
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: root.isEditable() ? Qt.IBeamCursor : Qt.ArrowCursor
         onClicked: root.forceActiveFocus()
+        tooltip: {
+            if (textItem.visible) {
+                if (textItem.truncated)
+                    return textItem.text
+                else
+                    return ""
+            }
+
+            if (textMetrics.width > textInput.width)
+                return textInput.text
+
+            return ""
+        }
     }
 
     Rectangle {
         id: pill
         anchors.fill: parent
         color: {
-            if (root.isShadow())
+            if (root.isIntermediate())
-                return StudioTheme.Values.themeInteraction
-            if (root.isEditable())
                 return "transparent"
 
-            return StudioTheme.Values.themePillBackground
+            if (root.isShadow())
+                return StudioTheme.Values.themePillShadowBackground
+
+            if (root.isInvalid() && root.selected)
+                return StudioTheme.Values.themeWarning
+
+            if (root.hovered) {
+                if (root.isOperator())
+                    return StudioTheme.Values.themePillOperatorBackgroundHover
+                if (root.isLiteral())
+                    return StudioTheme.Values.themePillLiteralBackgroundHover
+
+                return StudioTheme.Values.themePillDefaultBackgroundHover
             }
-        border.color: root.isInvalid() ? StudioTheme.Values.themeWarning : "white" // TODO colors
+
+            if (root.isLiteral())
+                return StudioTheme.Values.themePillLiteralBackgroundIdle
+
+            if (root.isOperator())
+                return StudioTheme.Values.themePillOperatorBackgroundIdle
+
+            return StudioTheme.Values.themePillDefaultBackgroundIdle
+        }
+        border.color: root.isInvalid() ? StudioTheme.Values.themeWarning
+                                       : StudioTheme.Values.themePillOutline
         border.width: {
             if (root.isShadow())
                 return 0
@@ -84,7 +115,7 @@ FocusScope {
                  return 1
             if (root.isEditable())
                 return 0
-            if (rootMouseArea.containsMouse || root.focus)
+            if (root.selected)
                 return 1
 
             return 0
@@ -93,31 +124,83 @@ FocusScope {
 
         Row {
             id: row
-            anchors.left: parent.left
+            leftPadding: root.margin
-            anchors.leftMargin: root.margin
+            rightPadding: icon.visible ? 0 : root.margin
-            anchors.verticalCenter: parent.verticalCenter
+
-            visible: root.isOperator() || root.isProperty() || root.isShadow()
+            property int textWidth: Math.min(textMetrics.advanceWidth + 2,
+                                             root.maxTextWidth - row.leftPadding
+                                             - (icon.visible ? icon.width : root.margin))
+
+            TextMetrics {
+                id: textMetrics
+                text: textItem.visible ? textItem.text : textInput.text
+                font: textItem.font
+            }
 
             Text {
                 id: textItem
+                width: row.textWidth
+                height: StudioTheme.Values.flowPillHeight
+                verticalAlignment: Text.AlignVCenter
+                textFormat: Text.PlainText
+                elide: Text.ElideMiddle
                 font.pixelSize: StudioTheme.Values.baseFontSize
-                color: root.isShadow() ? StudioTheme.Values.themeTextSelectedTextColor
+                color: root.isShadow() ? StudioTheme.Values.themePillTextSelected
-                                       : StudioTheme.Values.themeTextColor
+                                       : StudioTheme.Values.themePillText
                 text: root.isOperator() ? root.operatorModel.convertValueToName(root.value)
                                         : root.value
-                anchors.verticalCenter: parent.verticalCenter
+                visible: root.isOperator() || root.isProperty() || root.isShadow()
+            }
+
+            TextInput {
+                id: textInput
+                x: root.isInvalid() ? root.margin : 0
+                width: row.textWidth
+                height: StudioTheme.Values.flowPillHeight
+                topPadding: 1
+                clip: true
+                font.pixelSize: StudioTheme.Values.baseFontSize
+                color: {
+                    if (root.isIntermediate())
+                        return StudioTheme.Values.themePillTextEdit
+                    if (root.isInvalid() && root.selected)
+                        return StudioTheme.Values.themePillTextSelected
+                    return StudioTheme.Values.themePillText
+                }
+
+                selectedTextColor:StudioTheme.Values.themePillTextSelected
+                selectionColor: StudioTheme.Values.themeInteraction
+
+                text: root.value
+                visible: !textItem.visible
+                enabled: root.isEditable()
+
+                onEditingFinished: {
+                    root.update(textInput.text) // emit
+                    root.submit(textInput.cursorPosition) // emit
+                }
+
+                Keys.onReleased: function (event) {
+                    if (event.key === Qt.Key_Backspace) {
+                        if (textInput.text !== "")
+                            return
+
+                        root.remove() // emit
+                    }
+                }
             }
 
             Item {
                 id: icon
-                width: root.isShadow() ? root.margin : StudioTheme.Values.flowPillHeight
+                width: StudioTheme.Values.flowPillHeight
                 height: StudioTheme.Values.flowPillHeight
-                visible: !root.isShadow()
+                visible: !root.isShadow() && !root.isIntermediate()
 
                 Text {
                     font.family: StudioTheme.Constants.iconFont.family
                     font.pixelSize: StudioTheme.Values.smallIconFontSize
-                    color: StudioTheme.Values.themeIconColor
+                    color: root.isInvalid() && root.selected ? StudioTheme.Values.themePillTextSelected
+                                                             : StudioTheme.Values.themePillText
                     text: StudioTheme.Constants.close_small
                     anchors.centerIn: parent
                 }
@@ -129,35 +212,5 @@ FocusScope {
                 }
             }
         }
-
-        TextInput {
-            id: textInput
-
-            x: root.isInvalid() ? root.margin : 0
-            height: StudioTheme.Values.flowPillHeight
-            topPadding: 1
-            font.pixelSize: StudioTheme.Values.baseFontSize
-            color: (rootMouseArea.containsMouse || textInput.activeFocus) ? StudioTheme.Values.themeIconColor
-                                                                          : StudioTheme.Values.themeTextColor
-            text: root.value
-            visible: root.isEditable()
-            enabled: root.isEditable()
-
-            //validator: RegularExpressionValidator { regularExpression: /^\S+/ }
-
-            onEditingFinished: {
-                root.update(textInput.text) // emit
-                root.submit(textInput.cursorPosition) // emit
-            }
-
-            Keys.onPressed: function (event) {
-                if (event.key === Qt.Key_Backspace) {
-                    if (textInput.text !== "")
-                        return
-
-                    root.remove() // emit
-                }
-            }
-        }
     }
 }

share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml

@@ -14,11 +14,16 @@ Window {
     default property alias content: mainContent.children
     property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
 
-    width: 320
+    width: 300
     height: column.implicitHeight
     visible: true
     flags: Qt.FramelessWindowHint | Qt.Dialog
+
+        Rectangle {
+            anchors.fill: parent
             color: StudioTheme.Values.themePopoutBackground
+            border.color: "#636363"//StudioTheme.Values.themeTextColor
+        }
 
     function ensureVerticalPosition() {
         if ((window.y + window.height) > (Screen.height - window.style.dialogScreenMargin)) {

share/qtcreator/qmldesigner/connectionseditor/PopupLabel.qml

@@ -8,10 +8,10 @@ import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 
 Text {
-    width: root.columnWidth
     color: StudioTheme.Values.themeTextColor
     font.pixelSize: StudioTheme.Values.myFontSize
     property alias tooltip: area.tooltip
+
     HelperWidgets.ToolTipArea {
         id: area
         anchors.fill: parent

share/qtcreator/qmldesigner/connectionseditor/PropertiesDialogForm.qml

@@ -21,7 +21,7 @@ Column {
 
     PopupLabel {
         text: qsTr("Type")
-        tooltip: qsTr("The type of the property")
+        tooltip: qsTr("Sets the category of the <b>Local Custom Property</b>.")
     }
     StudioControls.TopLevelComboBox {
         id: type
@@ -38,8 +38,17 @@ Column {
     Row {
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("Name") ; tooltip: qsTr("The name of the property.")}
+        PopupLabel {
-        PopupLabel { text: qsTr("Value"); tooltip: qsTr("The value of the property.") }
+            width: root.columnWidth
+            text: qsTr("Name")
+            tooltip: qsTr("Sets a name for the <b>Local Custom Property</b>.")
+        }
+
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("Value")
+            tooltip: qsTr("Sets a valid <b>Local Custom Property</b> value.")
+        }
     }
 
     Row {

share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml

@@ -3,8 +3,8 @@
 
 import QtQuick
 import QtQuick.Controls
-import HelperWidgets 2.0 as HelperWidgets
+import HelperWidgets as HelperWidgets
-import StudioControls 1.0 as StudioControls
+import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 import ConnectionsEditorEditorBackend
 
@@ -15,6 +15,12 @@ ListView {
 
     property bool adsFocus: false
 
+    // Temporarily remove due to dockwidget focus issue
+    //onAdsFocusChanged: {
+    //    if (!root.adsFocus)
+    //        dialog.close()
+    //}
+
     clip: true
     interactive: true
     highlightMoveDuration: 0
@@ -24,8 +30,9 @@ ListView {
 
     HoverHandler { id: hoverHandler }
 
-    ScrollBar.vertical: HelperWidgets.ScrollBar {
+    ScrollBar.vertical: StudioControls.TransientScrollBar {
         id: verticalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: root
         x: root.width - verticalScrollBar.width
         y: 0
@@ -62,11 +69,26 @@ ListView {
     property int rowWidth: root.rowSpace / root.numColumns
     property int rowRest: root.rowSpace % root.numColumns
 
+    function addProperty() {
+        ConnectionsEditorEditorBackend.dynamicPropertiesModel.add()
+        if (root.currentItem)
+            dialog.popup(root.currentItem.delegateMouseArea)
+    }
+
+    function resetIndex() {
+        root.model.currentIndex = -1
+        root.currentIndex = -1
+    }
+
     data: [
         PropertiesDialog {
             id: dialog
             visible: false
             backend: root.model.delegate
+
+            onClosing: function(event) {
+                root.resetIndex()
+            }
         }
     ]
 
@@ -80,6 +102,8 @@ ListView {
         required property string type
         required property string value
 
+        property alias delegateMouseArea: mouseArea
+
         width: ListView.view.width
         height: root.style.squareControlSize.height
         color: mouseArea.containsMouse ?
@@ -89,7 +113,9 @@ ListView {
 
         MouseArea {
             id: mouseArea
+
             anchors.fill: parent
+            hoverEnabled: true
 
             property int currentIndex: root.currentIndex
 
@@ -177,9 +203,13 @@ ListView {
 
                 HelperWidgets.ToolTipArea {
                     id: toolTipArea
-                    tooltip: qsTr("This is a test.")
+                    tooltip: qsTr("Removes the property.")
                     anchors.fill: parent
-                    onClicked: root.model.remove(itemDelegate.index)
+                    onClicked: {
+                        if (itemDelegate.ListView.isCurrentItem)
+                            dialog.close()
+                        root.model.remove(itemDelegate.index)
+                    }
                 }
             }
 
@@ -188,6 +218,5 @@ ListView {
 
     highlight: Rectangle {
         color: root.style.interaction
-        width: 600
     }
 }

share/qtcreator/qmldesigner/connectionseditor/StatementEditor.qml

@@ -18,16 +18,24 @@ Column {
 
     property var statement
 
-    //implicitWidth: Math.max(16, container.childrenRect.width + container.childrenRect.x)
+    property var backend
-    //implicitHeight: Math.max(16, container.childrenRect.height + container.childrenRect.y)
 
     // Call Function
     Row {
         visible: root.actionType === ConnectionModelStatementDelegate.CallFunction
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("Item") ; tooltip: qsTr("The target item of the function.")}
+        PopupLabel {
-        PopupLabel { text: qsTr("Method") ; tooltip: qsTr("The name of the function.")}
+            width: root.columnWidth
+            text: qsTr("Item")
+            tooltip: qsTr("Sets the component that is affected by the action of the <b>Target</b> component's <b>Signal</b>.")
+        }
+
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("Method")
+            tooltip: qsTr("Sets the item component's method that is affected by the <b>Target</b> component's <b>Signal</b>.")
+        }
     }
 
     Row {
@@ -63,8 +71,16 @@ Column {
         visible: root.actionType === ConnectionModelStatementDelegate.Assign
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("From") ; tooltip: qsTr("The Property to assign from.")}
+        PopupLabel {
-        PopupLabel { text: qsTr("To"); tooltip: qsTr("The Property to assign to.") }
+            width: root.columnWidth
+            text: qsTr("From")
+            tooltip: qsTr("Sets the component and its property from which the value is copied when the <b>Target</b> component initiates the <b>Signal</b>.")
+        }
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("To")
+            tooltip: qsTr("Sets the component and its property to which the copied value is assigned when the <b>Target</b> component initiates the <b>Signal</b>.")
+        }
     }
 
     Row {
@@ -132,8 +148,17 @@ Column {
         visible: root.actionType === ConnectionModelStatementDelegate.ChangeState
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("State Group"); tooltip: qsTr("The State Group.") }
+        PopupLabel {
-        PopupLabel { text: qsTr("State"); tooltip: qsTr("The State .") }
+            width: root.columnWidth
+            text: qsTr("State Group")
+            tooltip: qsTr("Sets a <b>State Group</b> that is accessed when the <b>Target</b> component initiates the <b>Signal</b>.")
+        }
+
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("State")
+            tooltip: qsTr("Sets a <b>State</b> within the assigned <b>State Group</b> that is accessed when the <b>Target</b> component initiates the <b>Signal</b>.")
+        }
     }
 
     Row {
@@ -169,8 +194,17 @@ Column {
         visible: root.actionType === ConnectionModelStatementDelegate.SetProperty
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("Item"); tooltip: qsTr("The Item.")}
+        PopupLabel {
-        PopupLabel { text: qsTr("Property"); tooltip: qsTr("The property of the item.")}
+            width: root.columnWidth
+            text: qsTr("Item")
+            tooltip: qsTr("Sets the component that is affected by the action of the <b>Target</b> component's <b>Signal</b>.")
+        }
+
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("Property")
+            tooltip: qsTr("Sets the property of the component that is affected by the action of the <b>Target</b> component's <b>Signal</b>.")
+        }
     }
 
     Row {
@@ -203,8 +237,10 @@ Column {
     }
 
     PopupLabel {
+        width: root.columnWidth
         visible: root.actionType === ConnectionModelStatementDelegate.SetProperty
         text: qsTr("Value")
+        tooltip: qsTr("Sets the value of the property of the component that is affected by the action of the <b>Target</b> component's <b>Signal</b>.")
     }
 
     StudioControls.TextField {
@@ -222,9 +258,10 @@ Column {
 
     // Print Message
     PopupLabel {
+        width: root.columnWidth
         visible: root.actionType === ConnectionModelStatementDelegate.PrintMessage
         text: qsTr("Message")
-        tooltip: qsTr("The message that is printed.")
+        tooltip: qsTr("Sets a text that is printed when the <b>Signal</b> of the <b>Target</b> component initiates.")
     }
 
     StudioControls.TextField {
@@ -243,9 +280,7 @@ Column {
     PopupLabel {
         visible: root.actionType === ConnectionModelStatementDelegate.Custom
         text: qsTr("Custom Connections can only be edited with the binding editor")
-        anchors.left: parent.left
+        width: root.width
-        anchors.right: parent.right
-        anchors.margins: 30
         horizontalAlignment: Text.AlignHCenter
         wrapMode: Text.WordWrap
     }

share/qtcreator/qmldesigner/connectionseditor/SuggestionPopup.qml

@@ -71,7 +71,7 @@ Controls.Popup {
                     width: stack.width
                     height: 30
                     visible: root.listModel.parentName !== ""
-                    color: backMouseArea.containsMouse ? "#4DBFFF" : "transparent"
+                    color: backMouseArea.containsMouse ? StudioTheme.Values.themeInteraction : "transparent"
 
                     MouseArea {
                         id: backMouseArea
@@ -80,7 +80,7 @@ Controls.Popup {
 
                         onClicked: {
                             stack.pop(Controls.StackView.Immediate)
-                            root.listModel.goUp() //treeModel.pop()
+                            root.listModel.goUp()
                         }
                     }
 
@@ -95,7 +95,8 @@ Controls.Popup {
                                 id: chevronLeft
                                 font.family: StudioTheme.Constants.iconFont.family
                                 font.pixelSize: root.style.baseIconFontSize
-                                color: backMouseArea.containsMouse ? "#111111" : "white" // TODO colors
+                                color: backMouseArea.containsMouse ? StudioTheme.Values.themeTextSelectedTextColor
+                                                                   : StudioTheme.Values.themeTextColor
                                 text: StudioTheme.Constants.back_medium
                                 anchors.centerIn: parent
                             }
@@ -104,7 +105,8 @@ Controls.Popup {
                         Text {
                             anchors.verticalCenter: parent.verticalCenter
                             text: root.listModel.parentName
-                            color: backMouseArea.containsMouse ? "#111111" : "white" // TODO colors
+                            color: backMouseArea.containsMouse ? StudioTheme.Values.themeTextSelectedTextColor
+                                                               : StudioTheme.Values.themeTextColor
                             horizontalAlignment: Text.AlignLeft
                             verticalAlignment: Text.AlignVCenter
                             elide: Text.ElideRight
@@ -133,7 +135,7 @@ Controls.Popup {
                     boundsMovement: Flickable.StopAtBounds
                     boundsBehavior: Flickable.StopAtBounds
 
-                    Controls.ScrollBar.vertical: HelperWidgets.ScrollBar {
+                    Controls.ScrollBar.vertical: StudioControls.TransientScrollBar {
                         id: listScrollBar
                         parent: listView
                         x: listView.width - listScrollBar.width
@@ -193,7 +195,7 @@ Controls.Popup {
                     boundsMovement: Flickable.StopAtBounds
                     boundsBehavior: Flickable.StopAtBounds
 
-                    Controls.ScrollBar.vertical: HelperWidgets.ScrollBar {
+                    Controls.ScrollBar.vertical: StudioControls.TransientScrollBar {
                         id: treeScrollBar
                         parent: treeView
                         x: treeView.width - treeScrollBar.width
@@ -272,12 +274,9 @@ Controls.Popup {
 
                         width: textItem.contentWidth + 2 * StudioTheme.Values.flowPillMargin
                         height: StudioTheme.Values.flowPillHeight
-                        color: "#161616"
+                        color: mouseArea.containsMouse ? StudioTheme.Values.themePillOperatorBackgroundHover
+                                                       : StudioTheme.Values.themePillOperatorBackgroundIdle
                         radius: StudioTheme.Values.flowPillRadius
-                        border {
-                            color: "white"
-                            width: mouseArea.containsMouse ? 1 : 0
-                        }
 
                         HelperWidgets.ToolTipArea {
                             id: mouseArea
@@ -291,7 +290,7 @@ Controls.Popup {
                         Text {
                             id: textItem
                             font.pixelSize: StudioTheme.Values.baseFontSize
-                            color: StudioTheme.Values.themeTextColor
+                            color: StudioTheme.Values.themePillText
                             text: delegate.name
                             anchors.centerIn: parent
                         }

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibrary.qml

@@ -13,6 +13,11 @@ import ContentLibraryBackend
 Item {
     id: root
 
+    property bool adsFocus: false
+    // objectName is used by the dock widget to find this particular ScrollView
+    // and set the ads focus on it.
+    objectName: "__mainSrollView"
+
     // Called also from C++ to close context menu on focus out
     function closeContextMenu()
     {
@@ -96,6 +101,7 @@ Item {
             ContentLibraryMaterialsView {
                 id: materialsView
 
+                adsFocus: root.adsFocus
                 width: root.width
 
                 searchBox: searchBox
@@ -110,6 +116,7 @@ Item {
             ContentLibraryTexturesView {
                 id: texturesView
 
+                adsFocus: root.adsFocus
                 width: root.width
                 model: ContentLibraryBackend.texturesModel
                 sectionCategory: "ContentLib_Tex"
@@ -120,6 +127,7 @@ Item {
             ContentLibraryTexturesView {
                 id: environmentsView
 
+                adsFocus: root.adsFocus
                 width: root.width
                 model: ContentLibraryBackend.environmentsModel
                 sectionCategory: "ContentLib_Env"
@@ -130,6 +138,7 @@ Item {
             ContentLibraryEffectsView {
                 id: effectsView
 
+                adsFocus: root.adsFocus
                 width: root.width
 
                 searchBox: searchBox

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryEffectsView.qml

@@ -91,6 +91,8 @@ HelperWidgets.ScrollView {
             text: {
                 if (!ContentLibraryBackend.effectsModel.bundleExists)
                     qsTr("No effects available.")
+                else if (!ContentLibraryBackend.rootView.isQt6Project)
+                    qsTr("<b>Content Library</b> effects are not supported in Qt5 projects.")
                 else if (!ContentLibraryBackend.rootView.hasQuick3DImport)
                     qsTr("To use <b>Content Library</b>, first add the QtQuick3D module in the <b>Components</b> view.")
                 else if (!ContentLibraryBackend.effectsModel.hasRequiredQuick3DImport)

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterialsView.qml

@@ -99,6 +99,8 @@ HelperWidgets.ScrollView {
             text: {
                 if (!materialsModel.matBundleExists)
                     qsTr("No materials available. Make sure you have internet connection.")
+                else if (!ContentLibraryBackend.rootView.isQt6Project)
+                    qsTr("<b>Content Library</b> materials are not supported in Qt5 projects.")
                 else if (!ContentLibraryBackend.rootView.hasQuick3DImport)
                     qsTr("To use <b>Content Library</b>, first add the QtQuick3D module in the <b>Components</b> view.")
                 else if (!materialsModel.hasRequiredQuick3DImport)

share/qtcreator/qmldesigner/edit3dQmlSource/SnapConfigurationDialog.qml

@@ -20,13 +20,24 @@ Rectangle {
     border.color: StudioTheme.Values.themeControlOutline
     border.width: StudioTheme.Values.border
 
-    Connections {
+    function handlePosIntChanged() {
-        target: rootView
+        posIntSpin.value = posInt
+    }
 
-        // Spinboxes lose the initial binding if the value changes so we need these connections
+    function handleRotIntChanged() {
-        onPosIntChanged: posIntSpin.realValue = rootView.posInt
+        rotIntSpin.value = rotInt
-        onRotIntChanged: rotIntSpin.realValue = rootView.rotInt
+    }
-        onScaleIntChanged: scaleIntSpin.realValue = rootView.scaleInt
+
+    function handleScaleIntChanged() {
+        scaleIntSpin.value = scaleInt
+    }
+
+    // Connect context object signals to our handler functions
+    // Spinboxes lose the initial binding if the value changes so we need these handlers
+    Component.onCompleted: {
+        onPosIntChanged.connect(handlePosIntChanged);
+        onRotIntChanged.connect(handleRotIntChanged);
+        onScaleIntChanged.connect(handleScaleIntChanged);
     }
 
     ColumnLayout {
@@ -94,7 +105,7 @@ Rectangle {
                 Layout.column: 0
                 Layout.row: 1
                 Layout.minimumWidth: 100
-                checked: rootView.posEnabled
+                checked: posEnabled
                 actionIndicatorVisible: false
 
                 hoverEnabled: true
@@ -102,27 +113,26 @@ Rectangle {
                 ToolTip.text: qsTr("Snap position.")
                 ToolTip.delay: root.toolTipDelay
 
-                onToggled: rootView.posEnabled = checked
+                onToggled: posEnabled = checked
             }
 
-            StudioControls.RealSpinBox {
+            HelperWidgets.DoubleSpinBox {
                 id: posIntSpin
                 Layout.fillWidth: true
                 Layout.column: 1
                 Layout.row: 1
                 Layout.leftMargin: 10
-                realFrom: 1
+                minimumValue: 1
-                realTo: 10000
+                maximumValue: 10000
-                realValue: rootView.posInt
+                value: posInt
-                realStepSize: 1
+                stepSize: 1
-                actionIndicatorVisible: false
+                decimals: 0
 
-                hoverEnabled: true
+                ToolTip.visible: hover
-                ToolTip.visible: hovered
                 ToolTip.text: qsTr("Snap interval for move gizmo.")
                 ToolTip.delay: root.toolTipDelay
 
-                onRealValueChanged: rootView.posInt = realValue
+                onValueChanged: posInt = value
             }
 
             StudioControls.CheckBox {
@@ -130,7 +140,7 @@ Rectangle {
                 Layout.column: 0
                 Layout.row: 2
                 Layout.minimumWidth: 100
-                checked: rootView.rotEnabled
+                checked: rotEnabled
                 actionIndicatorVisible: false
 
                 hoverEnabled: true
@@ -138,27 +148,26 @@ Rectangle {
                 ToolTip.text: qsTr("Snap rotation.")
                 ToolTip.delay: root.toolTipDelay
 
-                onToggled: rootView.rotEnabled = checked
+                onToggled: rotEnabled = checked
             }
 
-            StudioControls.RealSpinBox {
+            HelperWidgets.DoubleSpinBox {
                 id: rotIntSpin
                 Layout.fillWidth: true
                 Layout.column: 1
                 Layout.row: 2
                 Layout.leftMargin: 10
-                realFrom: 1
+                minimumValue: 1
-                realTo: 90
+                maximumValue: 90
-                realValue: rootView.rotInt
+                value: rotInt
-                realStepSize: 1
+                stepSize: 1
-                actionIndicatorVisible: false
+                decimals: 0
 
-                hoverEnabled: true
+                ToolTip.visible: hover
-                ToolTip.visible: hovered
                 ToolTip.text: qsTr("Snap interval in degrees for rotation gizmo.")
                 ToolTip.delay: root.toolTipDelay
 
-                onRealValueChanged: rootView.rotInt = realValue
+                onValueChanged: rotInt = value
             }
 
             StudioControls.CheckBox {
@@ -166,7 +175,7 @@ Rectangle {
                 Layout.column: 0
                 Layout.row: 3
                 Layout.minimumWidth: 100
-                checked: rootView.scaleEnabled
+                checked: scaleEnabled
                 actionIndicatorVisible: false
 
                 hoverEnabled: true
@@ -174,27 +183,26 @@ Rectangle {
                 ToolTip.text: qsTr("Snap scale.")
                 ToolTip.delay: root.toolTipDelay
 
-                onToggled: rootView.scaleEnabled = checked
+                onToggled: scaleEnabled = checked
             }
 
-            StudioControls.RealSpinBox {
+            HelperWidgets.DoubleSpinBox {
                 id: scaleIntSpin
                 Layout.fillWidth: true
                 Layout.column: 1
                 Layout.row: 3
                 Layout.leftMargin: 10
-                realFrom: 1
+                minimumValue: 1
-                realTo: 100
+                maximumValue: 100
-                realValue: rootView.scaleInt
+                value: scaleInt
-                realStepSize: 1
+                stepSize: 1
-                actionIndicatorVisible: false
+                decimals: 0
 
-                hoverEnabled: true
+                ToolTip.visible: hover
-                ToolTip.visible: hovered
                 ToolTip.text: qsTr("Snap interval for scale gizmo in percentage of original scale.")
                 ToolTip.delay: root.toolTipDelay
 
-                onRealValueChanged: rootView.scaleInt = realValue
+                onValueChanged: scaleInt = value
             }
 
             StudioControls.CheckBox {
@@ -204,7 +212,7 @@ Rectangle {
                 Layout.column: 0
                 Layout.row: 4
                 Layout.columnSpan: 3
-                checked: rootView.absolute
+                checked: absolute
                 actionIndicatorVisible: false
 
                 hoverEnabled: true
@@ -212,7 +220,7 @@ Rectangle {
                 ToolTip.text: qsTr("Toggles if the position snaps to absolute values or relative to object position.")
                 ToolTip.delay: root.toolTipDelay
 
-                onToggled: rootView.absolute = checked
+                onToggled: absolute = checked
             }
 
             Text {
@@ -236,7 +244,7 @@ Rectangle {
             text: qsTr("Reset All")
             Layout.bottomMargin: 8
             Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            onClicked: rootView.resetDefaults()
+            onClicked: resetDefaults()
         }
     }
 }

share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml

@@ -25,7 +25,7 @@ Item {
         }
 
         EffectMakerPreview {
-
+            mainRoot: root
         }
 
         Rectangle {

share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerPreview.qml

@@ -14,6 +14,12 @@ Column {
 
     width: parent.width
 
+    required property Item mainRoot
+    property var effectMakerModel: EffectMakerBackend.effectMakerModel
+    property alias source: source
+    // The delay in ms to wait until updating the effect
+    readonly property int updateDelay: 200
+
     Rectangle { // toolbar
         width: parent.width
         height: StudioTheme.Values.toolbarHeight
@@ -25,40 +31,46 @@ Column {
             anchors.rightMargin: 5
             anchors.leftMargin: 5
 
+            PreviewImagesComboBox {
+                id: imagesComboBox
+
+                mainRoot: root.mainRoot
+            }
+
             Item {
                 Layout.fillWidth: true
             }
 
             HelperWidgets.AbstractButton {
-                enabled: previewImage.scale > .4
+                enabled: sourceImage.scale > .4
                 style: StudioTheme.Values.viewBarButtonStyle
                 buttonIcon: StudioTheme.Constants.zoomOut_medium
                 tooltip: qsTr("Zoom out")
 
                 onClicked: {
-                    previewImage.scale -= .2
+                    sourceImage.scale -= .2
                 }
             }
 
             HelperWidgets.AbstractButton {
-                enabled: previewImage.scale < 2
+                enabled: sourceImage.scale < 2
                 style: StudioTheme.Values.viewBarButtonStyle
                 buttonIcon: StudioTheme.Constants.zoomIn_medium
                 tooltip: qsTr("Zoom In")
 
                 onClicked: {
-                    previewImage.scale += .2
+                    sourceImage.scale += .2
                 }
             }
 
             HelperWidgets.AbstractButton {
-                enabled: previewImage.scale !== 1
+                enabled: sourceImage.scale !== 1
                 style: StudioTheme.Values.viewBarButtonStyle
                 buttonIcon: StudioTheme.Constants.fitAll_medium
                 tooltip: qsTr("Zoom Fit")
 
                 onClicked: {
-                    previewImage.scale = 1
+                    sourceImage.scale = 1
                 }
             }
 
@@ -99,23 +111,28 @@ Column {
     }
 
     Rectangle { // preview image
-        id: previewImageBg
+        id: preview
 
         color: "#dddddd"
         width: parent.width
         height: 200
         clip: true
 
-        Image {
+        Item { // Source item as a canvas (render target) for effect
-            id: previewImage
+            id: source
+            anchors.fill: parent
+            layer.enabled: true
+            layer.mipmap: true
+            layer.smooth: true
 
+            Image {
+                id: sourceImage
                 anchors.margins: 5
                 anchors.fill: parent
                 fillMode: Image.PreserveAspectFit
+                source: imagesComboBox.selectedImage
                 smooth: true
 
-            source: "images/qt_logo.png" // TODO: update image
-
                 Behavior on scale {
                     NumberAnimation {
                         duration: 200
@@ -124,4 +141,60 @@ Column {
                 }
             }
         }
+
+        Item {
+            id: componentParent
+            width: source.width
+            height: source.height
+                anchors.centerIn: parent
+            scale: 1 //TODO should come from toolbar
+            // Cache the layer. This way heavy shaders rendering doesn't
+            // slow down code editing & rest of the UI.
+            layer.enabled: true
+            layer.smooth: true
+        }
+
+        // Create a dummy parent to host the effect qml object
+        function createNewComponent() {
+            var oldComponent = componentParent.children[0];
+            if (oldComponent)
+                oldComponent.destroy();
+
+            try {
+                const newObject = Qt.createQmlObject(
+                    effectMakerModel.qmlComponentString,
+                    componentParent,
+                    ""
+                );
+                effectMakerModel.resetEffectError(0);
+            } catch (error) {
+                let errorString = "QML: ERROR: ";
+                let errorLine = -1;
+                if (error.qmlErrors.length > 0) {
+                    // Show the first QML error
+                    let e = error.qmlErrors[0];
+                    errorString += e.lineNumber + ": " + e.message;
+                    errorLine = e.lineNumber;
+                }
+                effectMakerModel.setEffectError(errorString, 0, errorLine);
+            }
+        }
+
+        Connections {
+            target: effectMakerModel
+            function onShadersBaked() {
+                console.log("Shaders Baked!")
+                //updateTimer.restart(); // Disable for now
+            }
+        }
+
+        Timer {
+            id: updateTimer
+            interval: updateDelay;
+            onTriggered: {
+                effectMakerModel.updateQmlComponent();
+                createNewComponent();
+            }
+        }
+    }
 }

share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNodesComboBox.qml

@@ -30,27 +30,27 @@ StudioControls.ComboBox {
             var a = mainRoot.mapToGlobal(0, 0)
             var b = root.mapToItem(mainRoot, 0, 0)
 
-            effectNodesWindow.x = a.x + b.x + root.width - effectNodesWindow.width
+            window.x = a.x + b.x + root.width - window.width
-            effectNodesWindow.y = a.y + b.y + root.height - 1
+            window.y = a.y + b.y + root.height - 1
 
-            effectNodesWindow.show()
+            window.show()
-            effectNodesWindow.requestActivate()
+            window.requestActivate()
         }
 
         function onAboutToHide() {
-            effectNodesWindow.hide()
+            window.hide()
         }
     }
 
     Window {
-        id: effectNodesWindow
+        id: window
 
         width: row.width + 2 // 2: scrollView left and right 1px margins
         height: Math.min(800, Math.min(row.height + 2, Screen.height - y - 40)) // 40: some bottom margin to cover OS bottom toolbar
-        flags:  Qt.Popup | Qt.FramelessWindowHint
+        flags: Qt.Dialog | Qt.FramelessWindowHint
 
-        onActiveChanged: {
+        onActiveFocusItemChanged: {
-            if (!active && !root.hover)
+            if (!window.activeFocusItem && !root.indicator.hover && root.popup.opened)
                 root.popup.close()
         }
 
@@ -74,7 +74,7 @@ StudioControls.ComboBox {
                         var a = mainRoot.mapToGlobal(0, 0)
                         var b = root.mapToItem(mainRoot, 0, 0)
 
-                        effectNodesWindow.x = a.x + b.x + root.width - row.width
+                        window.x = a.x + b.x + root.width - row.width
                     }
 
                     padding: 10

share/qtcreator/qmldesigner/effectMakerQmlSources/PreviewImagesComboBox.qml

@@ -0,0 +1,140 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
+
+import QtQuick
+import QtQuickDesignerTheme
+import HelperWidgets as HelperWidgets
+import StudioControls as StudioControls
+import StudioTheme 1.0 as StudioTheme
+import EffectMakerBackend
+
+StudioControls.ComboBox {
+    id: root
+
+    actionIndicatorVisible: false
+    x: 5
+    width: 60
+
+    model: [selectedImage]
+
+    // hide default popup
+    popup.width: 0
+    popup.height: 0
+
+    required property Item mainRoot
+
+    property var images: ["images/preview0.png",
+                          "images/preview1.png",
+                          "images/preview2.png",
+                          "images/preview3.png",
+                          "images/preview4.png"]
+    property string selectedImage: images[0]
+
+    Connections {
+        target: root.popup
+
+        function onAboutToShow() {
+            var a = mainRoot.mapToGlobal(0, 0)
+            var b = root.mapToItem(mainRoot, 0, 0)
+
+            window.x = a.x + b.x + root.width - window.width
+            window.y = a.y + b.y + root.height - 1
+
+            window.show()
+            window.requestActivate()
+        }
+
+        function onAboutToHide() {
+            window.hide()
+        }
+    }
+
+    contentItem: Item {
+        width: 30
+        height: 30
+
+        Image {
+            source: root.selectedImage
+            fillMode: Image.PreserveAspectFit
+            smooth: true
+            anchors.fill: parent
+            anchors.margins: 1
+        }
+    }
+
+    Window {
+        id: window
+
+        width: col.width + 2 // 2: scrollView left and right 1px margins
+        height: Math.min(800, Math.min(col.height + 2, Screen.height - y - 40)) // 40: some bottom margin to cover OS bottom toolbar
+        flags: Qt.Dialog | Qt.FramelessWindowHint
+
+        onActiveFocusItemChanged: {
+            if (!window.activeFocusItem && !root.indicator.hover && root.popup.opened)
+                root.popup.close()
+        }
+
+        Rectangle {
+            anchors.fill: parent
+            color: StudioTheme.Values.themePanelBackground
+            border.color: StudioTheme.Values.themeInteraction
+            border.width: 1
+
+            HelperWidgets.ScrollView {
+                anchors.fill: parent
+                anchors.margins: 1
+                clip: true
+
+                Column {
+                    id: col
+
+                    onWidthChanged: {
+                        // Needed to update on first window showing, as row.width only gets
+                        // correct value after the window is shown, so first showing is off
+
+                        var a = mainRoot.mapToGlobal(0, 0)
+                        var b = root.mapToItem(mainRoot, 0, 0)
+
+                        window.x = a.x + b.x + root.width - col.width
+                    }
+
+                    padding: 10
+                    spacing: 10
+
+                    Repeater {
+                        model: root.images
+
+                        Rectangle {
+                            required property int index
+                            required property var modelData
+
+                            color: "transparent"
+                            border.color: root.selectedImage === modelData ? StudioTheme.Values.themeInteraction
+                                                                           : "transparent"
+
+                            width: 200
+                            height: 200
+
+                            Image {
+                                source: modelData
+                                anchors.fill: parent
+                                fillMode: Image.PreserveAspectFit
+                                smooth: true
+                                anchors.margins: 1
+                            }
+
+                            MouseArea {
+                                anchors.fill: parent
+
+                                onClicked: {
+                                    root.selectedImage = root.images[index]
+                                    root.popup.close()
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

share/qtcreator/qmldesigner/itemLibraryQmlSources/AddModuleView.qml

@@ -11,6 +11,8 @@ import ItemLibraryBackend
 Column {
     id: root
 
+    property alias adsFocus: listView.adsFocus
+
     spacing: 5
 
     signal back()

share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml

@@ -46,6 +46,12 @@ itemLibraryModel [
 */
 Item {
     id: itemsView
+
+    property bool adsFocus: false
+    // objectName is used by the dock widget to find this particular ScrollView
+    // and set the ads focus on it.
+    objectName: "__mainSrollView"
+
     property string importToRemove
     property string importToAdd
     property string componentSource
@@ -217,6 +223,7 @@ Item {
         id: verticalView
         HelperWidgets.ScrollView {
             id: verticalScrollView
+            adsFocus: itemsView.adsFocus
             anchors.fill: parent
             clip: true
             interactive: !itemContextMenu.opened && !moduleContextMenu.opened && !ItemLibraryBackend.rootView.isDragging
@@ -327,6 +334,7 @@ Item {
             leftPadding: 5
             HelperWidgets.ScrollView {
                 id: horizontalScrollView
+                adsFocus: itemsView.adsFocus
                 width: 270
                 height: parent.height
                 clip: true
@@ -427,6 +435,7 @@ Item {
             }
             HelperWidgets.ScrollView {
                 id: itemScrollView
+                adsFocus: itemsView.adsFocus
                 width: itemsView.width - 275
                 height: itemsView.height
                 interactive: !itemContextMenu.opened && !moduleContextMenu.opened && !ItemLibraryBackend.rootView.isDragging
@@ -468,6 +477,7 @@ Item {
     Component {
         id: addModuleView
         AddModuleView {
+            adsFocus: itemsView.adsFocus
             onBack: isAddModuleView = false
         }
     }

share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml

@@ -592,7 +592,9 @@ Item {
                 anchors.centerIn: parent
 
                 text: {
-                    if (!materialBrowserModel.hasQuick3DImport)
+                    if (!materialBrowserModel.isQt6Project)
+                        qsTr("<b>Material Browser</b> is not supported in Qt5 projects.")
+                    else if (!materialBrowserModel.hasQuick3DImport)
                         qsTr("To use <b>Material Browser</b>, first add the QtQuick3D module in the <b>Components</b> view.")
                     else if (!materialBrowserModel.hasMaterialLibrary)
                         qsTr("<b>Material Browser</b> is disabled inside a non-visual component.")

share/qtcreator/qmldesigner/materialEditorQmlSources/EmptyMaterialEditorPane.qml

@@ -35,7 +35,9 @@ PropertyEditorPane {
 
             Text {
                 text: {
-                    if (!hasQuick3DImport)
+                    if (!isQt6Project)
+                        qsTr("<b>Material Editor</b> is not supported in Qt5 projects.")
+                    else if (!hasQuick3DImport)
                         qsTr("To use <b>Material Editor</b>, first add the QtQuick3D module in the <b>Components</b> view.")
                     else if (!hasMaterialLibrary)
                         qsTr("<b>Material Editor</b> is disabled inside a non-visual component.")

share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml

@@ -6,7 +6,7 @@ import QtQuick.Controls
 
 import QtQuick
 import QtQuick.Layouts
-import StudioControls as SC
+import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 
 import BackendApi
@@ -22,8 +22,8 @@ Item {
         anchors.fill: parent
 
         Item {
-            x: DialogValues.detailsPanePadding                               // left padding
+            x: DialogValues.detailsPanePadding * 2 // left padding
-            width: parent.width - DialogValues.detailsPanePadding * 2        // right padding
+            width: parent.width - DialogValues.detailsPanePadding * 3 // right padding
             height: parent.height
 
             Column {
@@ -44,6 +44,7 @@ Item {
                 }
 
                 Flickable {
+                    id: flickable
                     width: parent.width
                     height: parent.height - detailsHeading.height - DialogValues.defaultPadding
                             - savePresetButton.height
@@ -52,14 +53,27 @@ Item {
                     boundsBehavior: Flickable.StopAtBounds
                     clip: true
 
-                    ScrollBar.vertical: SC.VerticalScrollBar {}
+                    HoverHandler { id: hoverHandler }
+
+                    ScrollBar.vertical: StudioControls.TransientScrollBar {
+                        id: verticalScrollBar
+                        style: StudioTheme.Values.viewStyle
+                        parent: flickable
+                        x: flickable.width - verticalScrollBar.width
+                        y: 0
+                        height: flickable.availableHeight
+                        orientation: Qt.Vertical
+
+                        show: (hoverHandler.hovered || flickable.focus || verticalScrollBar.inUse)
+                              && verticalScrollBar.isNeeded
+                    }
 
                     Column {
                         id: scrollContent
                         width: parent.width - DialogValues.detailsPanePadding
                         spacing: DialogValues.defaultPadding
 
-                        SC.TextField {
+                        StudioControls.TextField {
                             id: projectNameTextField
                             actionIndicatorVisible: false
                             translationIndicatorVisible: false
@@ -85,7 +99,7 @@ Item {
                         RowLayout { // Project location
                             width: parent.width
 
-                            SC.TextField {
+                            StudioControls.TextField {
                                 Layout.fillWidth: true
                                 id: projectLocationTextField
                                 actionIndicatorVisible: false
@@ -102,7 +116,7 @@ Item {
                                 value: projectLocationTextField.text
                             }
 
-                            SC.AbstractButton {
+                            StudioControls.AbstractButton {
                                 implicitWidth: 30
                                 iconSize: 20
                                 visible: true
@@ -114,7 +128,7 @@ Item {
                                     if (newLocation)
                                         projectLocationTextField.text = newLocation
                                 }
-                            } // SC.AbstractButton
+                            }
                         } // Project location RowLayout
 
                         Item { width: parent.width; height: DialogValues.narrowSpacing(7) }
@@ -171,7 +185,7 @@ Item {
                             } // Text
                         } // RowLayout
 
-                        SC.CheckBox {
+                        StudioControls.CheckBox {
                             id: defaultLocationCheckbox
                             actionIndicatorVisible: false
                             text: qsTr("Use as default project location")
@@ -187,7 +201,7 @@ Item {
 
                         Rectangle { width: parent.width; height: 1; color: DialogValues.dividerlineColor }
 
-                        SC.ComboBox {   // Screen Size ComboBox
+                        StudioControls.ComboBox {   // Screen Size ComboBox
                             id: screenSizeComboBox
                             actionIndicatorVisible: false
                             currentIndex: -1
@@ -253,7 +267,7 @@ Item {
                             }
 
                             // content items
-                            SC.RealSpinBox {
+                            StudioControls.RealSpinBox {
                                 id: widthField
                                 actionIndicatorVisible: false
                                 implicitWidth: 70
@@ -274,7 +288,7 @@ Item {
                                 value: widthField.realValue
                             }
 
-                            SC.RealSpinBox {
+                            StudioControls.RealSpinBox {
                                 id: heightField
                                 actionIndicatorVisible: false
                                 implicitWidth: 70
@@ -368,7 +382,7 @@ Item {
                             color: DialogValues.dividerlineColor
                         }
 
-                        SC.CheckBox {
+                        StudioControls.CheckBox {
                             id: useQtVirtualKeyboard
                             actionIndicatorVisible: false
                             text: qsTr("Use Qt Virtual Keyboard")
@@ -389,7 +403,7 @@ Item {
                                 color: DialogValues.textColor
                             }
 
-                            SC.ComboBox {   // Target Qt Version ComboBox
+                            StudioControls.ComboBox {   // Target Qt Version ComboBox
                                 id: qtVersionComboBox
                                 actionIndicatorVisible: false
                                 implicitWidth: 82
@@ -421,7 +435,7 @@ Item {
                 } // ScrollView
             } // Column
 
-            SC.AbstractButton {
+            StudioControls.AbstractButton {
                 id: savePresetButton
                 width: StudioTheme.Values.singleControlColumnWidth
                 buttonIcon: qsTr("Save Custom Preset")
@@ -459,7 +473,7 @@ Item {
                         color: DialogValues.textColor
                     }
 
-                    SC.TextField {
+                    StudioControls.TextField {
                         id: presetNameTextField
                         actionIndicatorVisible: false
                         translationIndicatorVisible: false

share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/PresetView.qml

@@ -6,7 +6,7 @@ import QtQuick.Controls
 
 import QtQuick
 import QtQuick.Layouts
-import StudioControls as SC
+import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 
 import BackendApi
@@ -23,12 +23,17 @@ ScrollView {
     property bool selectLast: false
 
     ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-    ScrollBar.vertical: SC.VerticalScrollBar {
+    ScrollBar.vertical: StudioControls.TransientScrollBar {
+        id: verticalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: scrollView
-        x: scrollView.width + (DialogValues.gridMargins
+        x: scrollView.width + (DialogValues.gridMargins - verticalScrollBar.width) * 0.5
-                               - StudioTheme.Values.scrollBarThickness) * 0.5
         y: scrollView.topPadding
         height: scrollView.availableHeight
+        orientation: Qt.Vertical
+
+        show: (scrollView.hovered || scrollView.focus || verticalScrollBar.inUse)
+              && verticalScrollBar.isNeeded
     }
 
     contentWidth: gridView.contentItem.childrenRect.width

share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml

@@ -6,7 +6,7 @@ import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Layouts
 
-import StudioControls as SC
+import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 
 import BackendApi
@@ -59,7 +59,7 @@ Item {
                 }
             }
 
-            SC.ComboBox { // Style Filter ComboBox
+            StudioControls.ComboBox { // Style Filter ComboBox
                 id: styleComboBox
                 actionIndicatorVisible: false
                 currentIndex: 0
@@ -93,10 +93,17 @@ Item {
                 width: parent.width
 
                 ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-                ScrollBar.vertical: SC.VerticalScrollBar {
+                ScrollBar.vertical: StudioControls.TransientScrollBar {
-                    id: styleScrollBar
+                    id: verticalScrollBar
-                    x: stylesList.width + (DialogValues.stylesPanePadding
+                    style: StudioTheme.Values.viewStyle
-                                           - StudioTheme.Values.scrollBarThickness) * 0.5
+                    parent: scrollView
+                    x: scrollView.width + (DialogValues.gridMargins - verticalScrollBar.width) * 0.5
+                    y: scrollView.topPadding
+                    height: scrollView.availableHeight
+                    orientation: Qt.Vertical
+
+                    show: (scrollView.hovered || scrollView.focus || verticalScrollBar.inUse)
+                          && verticalScrollBar.isNeeded
                 }
 
                 ListView {

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/TemplateTypes.qml

@@ -9,72 +9,93 @@ AutoTypes {
 
     Type {
        typeNames: ["int"]
+       module: "QML"
        sourceFile: "IntEditorTemplate.template"
     }
     Type {
         typeNames: ["real", "double", "qreal"]
+        module: "QML"
         sourceFile: "RealEditorTemplate.template"
     }
     Type {
         typeNames: ["string", "QString"]
+        module: "QML"
         sourceFile: "StringEditorTemplate.template"
     }
     Type {
-        typeNames: ["QUrl", "url"]
+        typeNames: ["url", "QUrl"]
+        module: "QML"
         sourceFile: "UrlEditorTemplate.template"
     }
     Type {
         typeNames: ["bool", "boolean"]
+        module: "QML"
         sourceFile: "BooleanEditorTemplate.template"
     }
 
     Type {
         typeNames: ["color", "QColor"]
+        module: "QtQuick"
         sourceFile: "ColorEditorTemplate.template"
     }
 
     Type {
         typeNames: ["Text"]
+        module: "QtQuick"
         sourceFile: "TextEditorTemplate.template"
         separateSection: true
     }
 
     Type {
         typeNames: ["font", "QFont"]
+        module: "QtQuick"
         sourceFile: "FontEditorTemplate.template"
         separateSection: true
     }
 
     Type {
         typeNames: ["Rectangle"]
+        module: "QtQuick"
         sourceFile: "RectangleEditorTemplate.template"
         separateSection: true
     }
 
     Type {
         typeNames: ["Image"]
+        module: "QtQuick"
         sourceFile: "ImageEditorTemplate.template"
         separateSection: true
     }
 
     Type {
-        typeNames: ["TextureInput", "Texture"]
+        typeNames: ["TextureInput"]
+        module: "QtQuick3D"
+        sourceFile: "3DItemFilterComboBoxEditorTemplate.template"
+        needsTypeArg: true
+    }
+
+    Type {
+        typeNames: ["Texture"]
+        module: "QtQuick3D"
         sourceFile: "3DItemFilterComboBoxEditorTemplate.template"
         needsTypeArg: true
     }
 
     Type {
         typeNames: ["vector2d"]
+        module: "QtQuick3D"
         sourceFile: "Vector2dEditorTemplate.template"
     }
 
     Type {
         typeNames: ["vector3d"]
+        module: "QtQuick3D"
         sourceFile: "Vector3dEditorTemplate.template"
     }
 
     Type {
         typeNames: ["vector4d"]
+        module: "QtQuick3D"
         sourceFile: "Vector4dEditorTemplate.template"
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AdvancedSection.qml

@@ -33,7 +33,7 @@ Section {
 
         PropertyLabel {
             text: qsTr("Smooth")
-            tooltip: qsTr("Uses smooth filtering when the image is scaled or transformed.")
+            tooltip: qsTr("Toggles if the smoothing is performed using linear interpolation method. Keeping it unchecked would follow non-smooth method using nearest neighbor. It is mostly applicable on image based items. ")
             blockedByTemplate: !backendValues.smooth.isAvailable
         }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/BorderImageSpecifics.qml

@@ -216,24 +216,6 @@ Column {
                 ExpandingSpacer {}
             }
 
-            PropertyLabel {
-                text: qsTr("Smooth")
-                tooltip: qsTr("Toggles if the image should be filtered smoothly when transformed.")
-                blockedByTemplate: !backendValues.smooth.isAvailable
-            }
-
-            SecondColumnLayout {
-                CheckBox {
-                    text: backendValues.smooth.valueToString
-                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                                   + StudioTheme.Values.actionIndicatorWidth
-                    backendValue: backendValues.smooth
-                    enabled: backendValue.isAvailable
-                }
-
-                ExpandingSpacer {}
-            }
-
             PropertyLabel {
                 text: qsTr("Cache")
                 tooltip: qsTr("Toggles if the image is saved to the cache memory.")

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/FrameSpecifics.qml

@@ -20,7 +20,7 @@ Column {
     InsetSection {}
 
     FontSection {
-        caption: qsTr("Font Inheritance")
+        caption: qsTr("Font")
         expanded: false
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/PaneSpecifics.qml

@@ -18,7 +18,7 @@ Column {
     InsetSection {}
 
     FontSection {
-        caption: qsTr("Font Inheritance")
+        caption: qsTr("Font")
         expanded: false
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ScrollViewSpecifics.qml

@@ -72,7 +72,7 @@ Column {
     InsetSection {}
 
     FontSection {
-        caption: qsTr("Font Inheritance")
+        caption: qsTr("Font")
         expanded: false
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/StackViewSpecifics.qml

@@ -16,7 +16,7 @@ Column {
     InsetSection {}
 
     FontSection {
-        caption: qsTr("Font Inheritance")
+        caption: qsTr("Font")
         expanded: false
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwipeViewSpecifics.qml

@@ -59,7 +59,7 @@ Column {
     InsetSection {}
 
     FontSection {
-        caption: qsTr("Font Inheritance")
+        caption: qsTr("Font")
         expanded: false
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ToolBarSpecifics.qml

@@ -43,7 +43,7 @@ Column {
     InsetSection {}
 
     FontSection {
-        caption: qsTr("Font Inheritance")
+        caption: qsTr("Font")
         expanded: false
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/NumberAnimationSpecifics.qml

@@ -27,7 +27,7 @@ Column {
                     implicitWidth: StudioTheme.Values.twoControlColumnWidth
                                    + StudioTheme.Values.actionIndicatorWidth
                     maximumValue: 9999999
-                    minimumValue: -1
+                    minimumValue: -9999999
                     backendValue: backendValues.from
                 }
 
@@ -44,7 +44,7 @@ Column {
                     implicitWidth: StudioTheme.Values.twoControlColumnWidth
                                    + StudioTheme.Values.actionIndicatorWidth
                     maximumValue: 9999999
-                    minimumValue: -1
+                    minimumValue: -9999999
                     backendValue: backendValues.to
                 }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/emptyPane.qml

@@ -19,7 +19,7 @@ Rectangle {
         anchors.fill: parent
 
         Controls.Label {
-            text: qsTr("Select a component in the 2D, Navigator, or Code view to see its properties.")
+            text: qsTr("Select a component to see its properties.")
             font.pixelSize: StudioTheme.Values.myFontSize * 1.5
             color: StudioTheme.Values.themeTextColor
             wrapMode: Text.WordWrap

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExpressionTextField.qml

@@ -201,21 +201,22 @@ StudioControls.TextField {
         listView.model = list
     }
 
-    Keys.onSpacePressed: function(event) {
+    // Currently deactivated as it is causing a crash when calling autoComplete()
-        if (event.modifiers & Qt.ControlModifier) {
+    //Keys.onSpacePressed: function(event) {
-            var list = autoComplete(textField.text, textField.cursorPosition, true, textField.completeOnlyTypes)
+    //    if (event.modifiers & Qt.ControlModifier) {
-            textField.prefix = textField.text.substring(0, textField.cursorPosition)
+    //        var list = autoComplete(textField.text, textField.cursorPosition, true, textField.completeOnlyTypes)
-            if (list.length && list[list.length - 1] === textField.prefix)
+    //        textField.prefix = textField.text.substring(0, textField.cursorPosition)
-                list.pop()
+    //        if (list.length && list[list.length - 1] === textField.prefix)
+    //            list.pop()
 
-            listView.model = list
+    //        listView.model = list
-            textField.dotCompletion = false
+    //        textField.dotCompletion = false
 
-            event.accepted = true;
+    //        event.accepted = true
-        } else {
+    //    } else {
-            event.accepted = false
+    //        event.accepted = false
-        }
+    //    }
-    }
+    //}
 
     Keys.onReturnPressed: function(event) {
         event.accepted = false

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ImageSection.qml

@@ -224,23 +224,5 @@ Section {
 
             ExpandingSpacer {}
         }
-
-        PropertyLabel {
-            text: qsTr("Smooth")
-            tooltip: qsTr("Uses smooth filtering when the image is scaled or transformed.")
-            blockedByTemplate: !backendValues.smooth.isAvailable
-        }
-
-        SecondColumnLayout {
-            CheckBox {
-                text: backendValues.smooth.valueToString
-                implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                               + StudioTheme.Values.actionIndicatorWidth
-                backendValue: backendValues.smooth
-                enabled: backendValue.isAvailable
-            }
-
-            ExpandingSpacer {}
-        }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ScrollView.qml

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
 import QtQuick
-//import QtQuick.Controls as C
+import QtQuick.Controls
+import StudioControls as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
 Flickable {
@@ -26,8 +27,9 @@ Flickable {
 
     HoverHandler { id: hoverHandler }
 
-    ScrollBar.horizontal: ScrollBar {
+    ScrollBar.horizontal: StudioControls.TransientScrollBar {
         id: horizontalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: flickable
         x: 0
         y: flickable.height - horizontalScrollBar.height
@@ -40,8 +42,9 @@ Flickable {
         otherInUse: verticalScrollBar.inUse
     }
 
-    ScrollBar.vertical: ScrollBar {
+    ScrollBar.vertical: StudioControls.TransientScrollBar {
         id: verticalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: flickable
         x: flickable.width - verticalScrollBar.width
         y: 0

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml

@@ -162,8 +162,6 @@ Row {
 
             id: delegateRoot
             width: comboBox.popup.width - comboBox.popup.leftPadding - comboBox.popup.rightPadding
-                   - (comboBox.popupScrollBar.visible ? comboBox.popupScrollBar.contentItem.implicitWidth + 2
-                                                      : 0) // TODO Magic number
             height: StudioTheme.Values.height - 2 * StudioTheme.Values.border
             padding: 0
             hoverEnabled: true
@@ -176,32 +174,18 @@ Row {
 
             onClicked: comboBox.selectItem(delegateRoot.DelegateModel.itemsIndex)
 
-            indicator: Item {
-                id: itemDelegateIconArea
-                width: delegateRoot.height
-                height: delegateRoot.height
-
-                Label {
-                    id: itemDelegateIcon
-                    text: StudioTheme.Constants.tickIcon
-                    color: delegateRoot.highlighted ? StudioTheme.Values.themeTextSelectedTextColor
-                                                    : StudioTheme.Values.themeTextColor
-                    font.family: StudioTheme.Constants.iconFont.family
-                    font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti
-                    visible: comboBox.currentIndex === delegateRoot.DelegateModel.itemsIndex ? true
-                                                                                             : false
-                    anchors.fill: parent
-                    renderType: Text.NativeRendering
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                }
-            }
-
             contentItem: Text {
-                leftPadding: itemDelegateIconArea.width
+                leftPadding: 8
                 text: name
-                color: delegateRoot.highlighted ? StudioTheme.Values.themeTextSelectedTextColor
+                color: {
-                                                : StudioTheme.Values.themeTextColor
+                    if (!delegateRoot.enabled)
+                        return comboBox.style.text.disabled
+
+                    if (comboBox.currentIndex === delegateRoot.DelegateModel.itemsIndex)
+                        return comboBox.style.text.selectedText
+
+                    return comboBox.style.text.idle
+                }
                 font: comboBox.font
                 elide: Text.ElideRight
                 verticalAlignment: Text.AlignVCenter
@@ -212,8 +196,21 @@ Row {
                 y: 0
                 width: delegateRoot.width
                 height: delegateRoot.height
-                color: delegateRoot.highlighted ? StudioTheme.Values.themeInteraction
+                color: {
-                                                : "transparent"
+                    if (!delegateRoot.enabled)
+                        return "transparent"
+
+                    if (delegateRoot.hovered && comboBox.currentIndex === delegateRoot.DelegateModel.itemsIndex)
+                        return comboBox.style.interactionHover
+
+                    if (comboBox.currentIndex === delegateRoot.DelegateModel.itemsIndex)
+                        return comboBox.style.interaction
+
+                    if (delegateRoot.hovered)
+                        return comboBox.style.background.hover
+
+                    return "transparent"
+                }
             }
 
             ToolTip {

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir

@@ -59,7 +59,6 @@ PropertyEditorPane 2.0 PropertyEditorPane.qml
 PropertyLabel 2.0 PropertyLabel.qml
 PaddingSection 2.0 PaddingSection.qml
 RoundedPanel 2.0 RoundedPanel.qml
-ScrollBar 2.0 ScrollBar.qml
 ScrollView 2.0 ScrollView.qml
 SecondColumnLayout 2.0 SecondColumnLayout.qml
 Section 2.0 Section.qml

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml

@@ -130,14 +130,13 @@ T.ComboBox {
         id: itemDelegate
 
         width: comboBoxPopup.width - comboBoxPopup.leftPadding - comboBoxPopup.rightPadding
-               - (comboBoxPopupScrollBar.visible ? comboBoxPopupScrollBar.contentItem.implicitWidth
-                                                   + 2 : 0) // TODO Magic number
         height: control.style.controlSize.height - 2 * control.style.borderWidth
         padding: 0
         enabled: model.enabled === undefined ? true : model.enabled
 
         contentItem: Text {
-            leftPadding: itemDelegateIconArea.width
+            leftPadding: 8
+            rightPadding: verticalScrollBar.style.scrollBarThicknessHover
             text: control.textRole ? (Array.isArray(control.model)
                                       ? modelData[control.textRole]
                                       : model[control.textRole])
@@ -146,34 +145,16 @@ T.ComboBox {
                 if (!itemDelegate.enabled)
                     return control.style.text.disabled
 
-                return itemDelegate.highlighted ? control.style.text.selectedText
+                if (control.currentIndex === index)
-                                                : control.style.text.idle
+                    return control.style.text.selectedText
+
+                return control.style.text.idle
             }
             font: control.font
             elide: Text.ElideRight
             verticalAlignment: Text.AlignVCenter
         }
 
-        Item {
-            id: itemDelegateIconArea
-            width: itemDelegate.height
-            height: itemDelegate.height
-
-            T.Label {
-                id: itemDelegateIcon
-                text: StudioTheme.Constants.tickIcon
-                color: itemDelegate.highlighted ? control.style.text.selectedText
-                                                : control.style.text.idle
-                font.family: StudioTheme.Constants.iconFont.family
-                font.pixelSize: control.style.smallIconFontSize
-                visible: control.currentIndex === index
-                anchors.fill: parent
-                renderType: Text.NativeRendering
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-            }
-        }
-
         highlighted: control.highlightedIndex === index
 
         background: Rectangle {
@@ -182,7 +163,21 @@ T.ComboBox {
             y: 0
             width: itemDelegate.width
             height: itemDelegate.height
-            color: itemDelegate.highlighted ? control.style.interaction : "transparent"
+            color: {
+                if (!itemDelegate.enabled)
+                    return "transparent"
+
+                if (itemDelegate.hovered && control.currentIndex === index)
+                    return control.style.interactionHover
+
+                if (control.currentIndex === index)
+                    return control.style.interaction
+
+                if (itemDelegate.hovered)
+                    return control.style.background.hover
+
+                return "transparent"
+            }
         }
     }
 
@@ -211,9 +206,19 @@ T.ComboBox {
             model: control.popup.visible ? control.delegateModel : null
             currentIndex: control.highlightedIndex
             boundsBehavior: Flickable.StopAtBounds
-            ScrollBar.vertical: ScrollBar {
+
-                id: comboBoxPopupScrollBar
+            HoverHandler { id: hoverHandler }
-                visible: listView.height < listView.contentHeight
+
+            ScrollBar.vertical: TransientScrollBar {
+                id: verticalScrollBar
+                parent: listView
+                x: listView.width - verticalScrollBar.width
+                y: 0
+                height: listView.availableHeight
+                orientation: Qt.Vertical
+
+                show: (hoverHandler.hovered || verticalScrollBar.inUse)
+                      && verticalScrollBar.isNeeded
             }
         }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/FilterComboBox.qml

@@ -277,31 +277,11 @@ Item {
 
             onClicked: control.selectItem(delegateRoot.DelegateModel.itemsIndex)
 
-            indicator: Item {
-                id: itemDelegateIconArea
-                width: delegateRoot.height
-                height: delegateRoot.height
-
-                T.Label {
-                    id: itemDelegateIcon
-                    text: StudioTheme.Constants.tickIcon
-                    color: delegateRoot.highlighted ? control.style.text.selectedText
-                                                    : control.style.text.idle
-                    font.family: StudioTheme.Constants.iconFont.family
-                    font.pixelSize: control.style.smallIconFontSize
-                    visible: control.currentIndex === delegateRoot.DelegateModel.itemsIndex ? true
-                                                                                            : false
-                    anchors.fill: parent
-                    renderType: Text.NativeRendering
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                }
-            }
-
             contentItem: Text {
-                leftPadding: itemDelegateIconArea.width
+                leftPadding: 8
                 text: name
-                color: delegateRoot.highlighted ? control.style.text.selectedText
+                color: control.currentIndex === delegateRoot.DelegateModel.itemsIndex
+                       ? control.style.text.selectedText
                        : control.style.text.idle
                 font: textInput.font
                 elide: Text.ElideRight
@@ -313,7 +293,22 @@ Item {
                 y: 0
                 width: delegateRoot.width
                 height: delegateRoot.height
-                color: delegateRoot.highlighted ? control.style.interaction : "transparent"
+                color: {
+                    if (!itemDelegate.enabled)
+                        return "transparent"
+
+                    if (itemDelegate.hovered
+                            && control.currentIndex === delegateRoot.DelegateModel.itemsIndex)
+                        return control.style.interactionHover
+
+                    if (control.currentIndex === delegateRoot.DelegateModel.itemsIndexx)
+                        return control.style.interaction
+
+                    if (itemDelegate.hovered)
+                        return control.style.background.hover
+
+                    return "transparent"
+                }
             }
         }
 
@@ -669,9 +664,9 @@ Item {
 
     T.Popup {
         id: popup
-        x: textInput.x + control.style.borderWidth
+        x: textInput.x
         y: textInput.height
-        width: textInput.width - (control.style.borderWidth * 2)
+        width: textInput.width
         height: Math.min(popup.contentItem.implicitHeight + popup.topPadding + popup.bottomPadding,
                          control.Window.height - popup.topMargin - popup.bottomMargin,
                          control.style.maxComboBoxPopupHeight)
@@ -694,9 +689,18 @@ Item {
                 return null
             }
 
-            ScrollBar.vertical: ScrollBar {
+            HoverHandler { id: hoverHandler }
+
+            ScrollBar.vertical: TransientScrollBar {
                 id: popupScrollBar
-                visible: listView.height < listView.contentHeight
+                parent: listView
+                x: listView.width - verticalScrollBar.width
+                y: 0
+                height: listView.availableHeight
+                orientation: Qt.Vertical
+
+                show: (hoverHandler.hovered || popupScrollBar.inUse)
+                      && popupScrollBar.isNeeded
             }
         }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TopLevelComboBox.qml

@@ -138,9 +138,19 @@ T.ComboBox {
         currentIndex: control.highlightedIndex
         boundsBehavior: Flickable.StopAtBounds
 
-        ScrollBar.vertical: ScrollBar {
+        HoverHandler { id: hoverHandler }
-            id: comboBoxPopupScrollBar
+
-            visible: listView.height < listView.contentHeight
+        ScrollBar.vertical: TransientScrollBar {
+            id: verticalScrollBar
+            style: control.style
+            parent: listView
+            x: listView.width - verticalScrollBar.width
+            y: 0
+            height: listView.availableHeight
+            orientation: Qt.Vertical
+
+            show: (hoverHandler.hovered || verticalScrollBar.inUse)
+                  && verticalScrollBar.isNeeded
         }
 
         delegate: ItemDelegate {
@@ -155,9 +165,11 @@ T.ComboBox {
             width: control.width
             height: control.style.controlSize.height
             padding: 0
+            enabled: model.enabled === undefined ? true : model.enabled
 
             contentItem: Text {
-                leftPadding: itemDelegateIconArea.width
+                leftPadding: 8
+                rightPadding: verticalScrollBar.style.scrollBarThicknessHover
                 text: control.textRole ? (Array.isArray(control.model)
                                           ? modelData[control.textRole]
                                           : model[control.textRole])
@@ -166,41 +178,37 @@ T.ComboBox {
                     if (!itemDelegate.enabled)
                         return control.style.text.disabled
 
-                    return itemDelegate.hovered ? control.style.text.selectedText
+                    if (control.currentIndex === index)
-                                                : control.style.text.idle
+                        return control.style.text.selectedText
+
+                    return control.style.text.idle
                 }
                 font: control.font
                 elide: Text.ElideRight
                 verticalAlignment: Text.AlignVCenter
             }
 
-            Item {
-                id: itemDelegateIconArea
-                width: itemDelegate.height
-                height: itemDelegate.height
-
-                T.Label {
-                    id: itemDelegateIcon
-                    text: StudioTheme.Constants.tickIcon
-                    color: itemDelegate.hovered ? control.style.text.selectedText
-                                                : control.style.text.idle
-                    font.family: StudioTheme.Constants.iconFont.family
-                    font.pixelSize: control.style.smallIconFontSize
-                    visible: control.currentIndex === index
-                    anchors.fill: parent
-                    renderType: Text.NativeRendering
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                }
-            }
-
             background: Rectangle {
                 id: itemDelegateBackground
                 x: control.style.borderWidth
                 y: 0
                 width: itemDelegate.width - 2 * control.style.borderWidth
                 height: itemDelegate.height
-                color: itemDelegate.hovered ? control.style.interaction : "transparent"
+                color: {
+                    if (!itemDelegate.enabled)
+                        return "transparent"
+
+                    if (itemDelegate.hovered && control.currentIndex === index)
+                        return control.style.interactionHover
+
+                    if (control.currentIndex === index)
+                        return control.style.interaction
+
+                    if (itemDelegate.hovered)
+                        return control.style.background.hover
+
+                    return "transparent"
+                }
             }
         }
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TransientScrollBar.qml

@@ -14,7 +14,8 @@ T.ScrollBar {
     property bool otherInUse: false
     property bool isNeeded: control.size < 1.0
     property bool inUse: control.hovered || control.pressed
-    property int thickness: control.inUse || control.otherInUse ? 10 : 8
+    property int thickness: control.inUse || control.otherInUse ? control.style.scrollBarThicknessHover
+                                                                : control.style.scrollBarThickness
 
     property bool scrollBarVisible: parent.childrenRect.height > parent.height
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/VerticalScrollBar.qml

@@ -1,38 +0,0 @@
-// Copyright (C) 2023 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
-
-import QtQuick
-//import QtQuick.Controls
-import StudioTheme 1.0 as StudioTheme
-
-ScrollBar {
-    id: control
-
-    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-                            implicitContentWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
-                             implicitContentHeight + topPadding + bottomPadding)
-
-    property bool scrollBarVisible: parent.contentHeight > control.height
-
-    minimumSize: control.width / control.height
-    orientation: Qt.Vertical
-    policy: control.scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
-
-    height: parent.availableHeight
-            - (parent.bothVisible ? parent.horizontalThickness : 0)
-    padding: control.active ? control.style.scrollBarActivePadding
-                            : control.style.scrollBarInactivePadding
-
-    background: Rectangle {
-        implicitWidth: control.style.scrollBarThickness
-        implicitHeight: control.style.scrollBarThickness
-        color: control.style.scrollBar.track
-    }
-
-    contentItem: Rectangle {
-        implicitWidth: control.style.scrollBarThickness - 2 * control.padding
-        implicitHeight: control.style.scrollBarThickness - 2 * control.padding
-        color: control.style.scrollBar.handle
-    }
-}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir

@@ -47,6 +47,6 @@ TabButton 1.0 TabButton.qml
 TextArea 1.0 TextArea.qml
 TextField 1.0 TextField.qml
 ToolTip 1.0 ToolTip.qml
+TransientScrollBar 1.0 TransientScrollBar.qml
 TranslationIndicator 1.0 TranslationIndicator.qml
-VerticalScrollBar 1.0 VerticalScrollBar.qml
 TopLevelComboBox 1.0 TopLevelComboBox.qml

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ConnectionPopupControlStyle.qml

@@ -4,13 +4,15 @@
 import QtQuick
 
 ControlStyle {
-
     radius: Values.smallRadius
 
     baseIconFontSize: Values.baseFont
     controlSize: Qt.size(Values.viewBarComboWidth, Values.viewBarComboHeight)
     smallIconFontSize: Values.baseFont
 
+    scrollBarThickness: 4
+    scrollBarThicknessHover: 6
+
     background: ControlStyle.BackgroundColors {
         idle: Values.themePopoutControlBackground_idle
         hover: Values.themePopoutControlBackground_hover
@@ -36,4 +38,10 @@ ControlStyle {
         interaction: Values.themeInteraction
         disabled: Values.themePopoutControlBorder_disabled
     }
+
+    scrollBar: ControlStyle.ScrollBarColors {
+        track: Values.themeScrollBarTrack
+        handle: Values.themeScrollBarHandle_idle
+        handleHover: Values.themeScrollBarHandle
+    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ControlStyle.qml

@@ -67,7 +67,8 @@ QtObject {
     property real sectionHeadHeight: Values.sectionHeadHeight
     property real sectionHeadSpacerHeight: Values.sectionHeadSpacerHeight
 
-    property real scrollBarThickness: Values.scrollBarThickness
+    property real scrollBarThickness: 4//Values.scrollBarThickness
+    property real scrollBarThicknessHover: 6//Values.scrollBarThicknessHover
     property real scrollBarActivePadding: Values.scrollBarActivePadding
     property real scrollBarInactivePadding: Values.scrollBarInactivePadding
 
@@ -76,6 +77,7 @@ QtObject {
     // Special colors
     property color interaction: Values.themeInteraction
     property color interactionHover: Values.themeInteractionHover
+    property color interactionGlobalHover: "#ffB0E1FC"
     // TODO needs to removed in the future
     property color thumbnailLabelBackground: Values.themeThumbnailLabelBackground
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml

@@ -23,330 +23,348 @@ QtObject {
     readonly property string addTable: "\u0028"
     readonly property string add_medium: "\u0029"
     readonly property string add_small: "\u002A"
-    readonly property string adsClose: "\u002B"
+    readonly property string addcolumnleft_medium: "\u002B"
-    readonly property string adsDetach: "\u002C"
+    readonly property string addcolumnright_medium: "\u002C"
-    readonly property string adsDropDown: "\u002D"
+    readonly property string addrowabove_medium: "\u002D"
-    readonly property string alias: "\u002E"
+    readonly property string addrowbelow_medium: "\u002E"
-    readonly property string aliasAnimated: "\u002F"
+    readonly property string adsClose: "\u002F"
-    readonly property string alignBottom: "\u0030"
+    readonly property string adsDetach: "\u0030"
-    readonly property string alignCenterHorizontal: "\u0031"
+    readonly property string adsDropDown: "\u0031"
-    readonly property string alignCenterVertical: "\u0032"
+    readonly property string alias: "\u0032"
-    readonly property string alignLeft: "\u0033"
+    readonly property string aliasAnimated: "\u0033"
-    readonly property string alignRight: "\u0034"
+    readonly property string alignBottom: "\u0034"
-    readonly property string alignTo: "\u0035"
+    readonly property string alignCenterHorizontal: "\u0035"
-    readonly property string alignToCam_medium: "\u0036"
+    readonly property string alignCenterVertical: "\u0036"
-    readonly property string alignToCamera_small: "\u0037"
+    readonly property string alignLeft: "\u0037"
-    readonly property string alignToObject_small: "\u0038"
+    readonly property string alignRight: "\u0038"
-    readonly property string alignToView_medium: "\u0039"
+    readonly property string alignTo: "\u0039"
-    readonly property string alignTop: "\u003A"
+    readonly property string alignToCam_medium: "\u003A"
-    readonly property string anchorBaseline: "\u003B"
+    readonly property string alignToCamera_small: "\u003B"
-    readonly property string anchorBottom: "\u003C"
+    readonly property string alignToObject_small: "\u003C"
-    readonly property string anchorFill: "\u003D"
+    readonly property string alignToView_medium: "\u003D"
-    readonly property string anchorLeft: "\u003E"
+    readonly property string alignTop: "\u003E"
-    readonly property string anchorRight: "\u003F"
+    readonly property string anchorBaseline: "\u003F"
-    readonly property string anchorTop: "\u0040"
+    readonly property string anchorBottom: "\u0040"
-    readonly property string anchors_small: "\u0041"
+    readonly property string anchorFill: "\u0041"
-    readonly property string animatedProperty: "\u0042"
+    readonly property string anchorLeft: "\u0042"
-    readonly property string annotationBubble: "\u0043"
+    readonly property string anchorRight: "\u0043"
-    readonly property string annotationDecal: "\u0044"
+    readonly property string anchorTop: "\u0044"
-    readonly property string annotations_large: "\u0045"
+    readonly property string anchors_small: "\u0045"
-    readonly property string annotations_small: "\u0046"
+    readonly property string animatedProperty: "\u0046"
-    readonly property string applyMaterialToSelected: "\u0047"
+    readonly property string annotationBubble: "\u0047"
-    readonly property string apply_medium: "\u0048"
+    readonly property string annotationDecal: "\u0048"
-    readonly property string apply_small: "\u0049"
+    readonly property string annotations_large: "\u0049"
-    readonly property string arrange_small: "\u004A"
+    readonly property string annotations_small: "\u004A"
-    readonly property string arrow_small: "\u004B"
+    readonly property string applyMaterialToSelected: "\u004B"
-    readonly property string assign: "\u004C"
+    readonly property string apply_medium: "\u004C"
-    readonly property string attach_medium: "\u004D"
+    readonly property string apply_small: "\u004D"
-    readonly property string back_medium: "\u004E"
+    readonly property string arrange_small: "\u004E"
-    readonly property string backspace_small: "\u004F"
+    readonly property string arrow_small: "\u004F"
-    readonly property string bevelAll: "\u0050"
+    readonly property string assign: "\u0050"
-    readonly property string bevelCorner: "\u0051"
+    readonly property string attach_medium: "\u0051"
-    readonly property string bezier_medium: "\u0052"
+    readonly property string back_medium: "\u0052"
-    readonly property string binding_medium: "\u0053"
+    readonly property string backspace_small: "\u0053"
-    readonly property string bounds_small: "\u0054"
+    readonly property string bevelAll: "\u0054"
-    readonly property string branch_medium: "\u0055"
+    readonly property string bevelCorner: "\u0055"
-    readonly property string camera_small: "\u0056"
+    readonly property string bezier_medium: "\u0056"
-    readonly property string centerHorizontal: "\u0057"
+    readonly property string binding_medium: "\u0057"
-    readonly property string centerVertical: "\u0058"
+    readonly property string bounds_small: "\u0058"
-    readonly property string cleanLogs_medium: "\u0059"
+    readonly property string branch_medium: "\u0059"
-    readonly property string closeCross: "\u005A"
+    readonly property string camera_small: "\u005A"
-    readonly property string closeFile_large: "\u005B"
+    readonly property string centerHorizontal: "\u005B"
-    readonly property string closeLink: "\u005C"
+    readonly property string centerVertical: "\u005C"
-    readonly property string close_small: "\u005D"
+    readonly property string cleanLogs_medium: "\u005D"
-    readonly property string code: "\u005E"
+    readonly property string closeCross: "\u005E"
-    readonly property string colorPopupClose: "\u005F"
+    readonly property string closeFile_large: "\u005F"
-    readonly property string colorSelection_medium: "\u0060"
+    readonly property string closeLink: "\u0060"
-    readonly property string columnsAndRows: "\u0061"
+    readonly property string close_small: "\u0061"
-    readonly property string cone_medium: "\u0062"
+    readonly property string code: "\u0062"
-    readonly property string cone_small: "\u0063"
+    readonly property string codeEditor_medium: "\u0063"
-    readonly property string connection_small: "\u0064"
+    readonly property string codeview_medium: "\u0064"
-    readonly property string connections_medium: "\u0065"
+    readonly property string colorPopupClose: "\u0065"
-    readonly property string copyLink: "\u0066"
+    readonly property string colorSelection_medium: "\u0066"
-    readonly property string copyStyle: "\u0067"
+    readonly property string columnsAndRows: "\u0067"
-    readonly property string copy_small: "\u0068"
+    readonly property string cone_medium: "\u0068"
-    readonly property string cornerA: "\u0069"
+    readonly property string cone_small: "\u0069"
-    readonly property string cornerB: "\u006A"
+    readonly property string connection_small: "\u006A"
-    readonly property string cornersAll: "\u006B"
+    readonly property string connections_medium: "\u006B"
-    readonly property string createComponent_large: "\u006C"
+    readonly property string copyLink: "\u006C"
-    readonly property string createComponent_small: "\u006D"
+    readonly property string copyStyle: "\u006D"
-    readonly property string create_medium: "\u006E"
+    readonly property string copy_small: "\u006E"
-    readonly property string create_small: "\u006F"
+    readonly property string cornerA: "\u006F"
-    readonly property string cube_medium: "\u0070"
+    readonly property string cornerB: "\u0070"
-    readonly property string cube_small: "\u0071"
+    readonly property string cornersAll: "\u0071"
-    readonly property string curveDesigner: "\u0072"
+    readonly property string createComponent_large: "\u0072"
-    readonly property string curveDesigner_medium: "\u0073"
+    readonly property string createComponent_small: "\u0073"
-    readonly property string curveEditor: "\u0074"
+    readonly property string create_medium: "\u0074"
-    readonly property string customMaterialEditor: "\u0075"
+    readonly property string create_small: "\u0075"
-    readonly property string cylinder_medium: "\u0076"
+    readonly property string cube_medium: "\u0076"
-    readonly property string cylinder_small: "\u0077"
+    readonly property string cube_small: "\u0077"
-    readonly property string decisionNode: "\u0078"
+    readonly property string curveDesigner: "\u0078"
-    readonly property string deleteColumn: "\u0079"
+    readonly property string curveDesigner_medium: "\u0079"
-    readonly property string deleteMaterial: "\u007A"
+    readonly property string curveEditor: "\u007A"
-    readonly property string deleteRow: "\u007B"
+    readonly property string customMaterialEditor: "\u007B"
-    readonly property string deleteTable: "\u007C"
+    readonly property string cylinder_medium: "\u007C"
-    readonly property string delete_medium: "\u007D"
+    readonly property string cylinder_small: "\u007D"
-    readonly property string delete_small: "\u007E"
+    readonly property string decisionNode: "\u007E"
-    readonly property string designMode_large: "\u007F"
+    readonly property string deleteColumn: "\u007F"
-    readonly property string detach: "\u0080"
+    readonly property string deleteMaterial: "\u0080"
-    readonly property string directionalLight_small: "\u0081"
+    readonly property string deleteRow: "\u0081"
-    readonly property string distributeBottom: "\u0082"
+    readonly property string deleteTable: "\u0082"
-    readonly property string distributeCenterHorizontal: "\u0083"
+    readonly property string delete_medium: "\u0083"
-    readonly property string distributeCenterVertical: "\u0084"
+    readonly property string delete_small: "\u0084"
-    readonly property string distributeLeft: "\u0085"
+    readonly property string deletecolumn_medium: "\u0085"
-    readonly property string distributeOriginBottomRight: "\u0086"
+    readonly property string deleterow_medium: "\u0086"
-    readonly property string distributeOriginCenter: "\u0087"
+    readonly property string designMode_large: "\u0087"
-    readonly property string distributeOriginNone: "\u0088"
+    readonly property string detach: "\u0088"
-    readonly property string distributeOriginTopLeft: "\u0089"
+    readonly property string directionalLight_small: "\u0089"
-    readonly property string distributeRight: "\u008A"
+    readonly property string distributeBottom: "\u008A"
-    readonly property string distributeSpacingHorizontal: "\u008B"
+    readonly property string distributeCenterHorizontal: "\u008B"
-    readonly property string distributeSpacingVertical: "\u008C"
+    readonly property string distributeCenterVertical: "\u008C"
-    readonly property string distributeTop: "\u008D"
+    readonly property string distributeLeft: "\u008D"
-    readonly property string download: "\u008E"
+    readonly property string distributeOriginBottomRight: "\u008E"
-    readonly property string downloadUnavailable: "\u008F"
+    readonly property string distributeOriginCenter: "\u008F"
-    readonly property string downloadUpdate: "\u0090"
+    readonly property string distributeOriginNone: "\u0090"
-    readonly property string downloaded: "\u0091"
+    readonly property string distributeOriginTopLeft: "\u0091"
-    readonly property string dragmarks: "\u0092"
+    readonly property string distributeRight: "\u0092"
-    readonly property string duplicate_small: "\u0093"
+    readonly property string distributeSpacingHorizontal: "\u0093"
-    readonly property string edit: "\u0094"
+    readonly property string distributeSpacingVertical: "\u0094"
-    readonly property string editComponent_large: "\u0095"
+    readonly property string distributeTop: "\u0095"
-    readonly property string editComponent_small: "\u0096"
+    readonly property string download: "\u0096"
-    readonly property string editLightOff_medium: "\u0097"
+    readonly property string downloadUnavailable: "\u0097"
-    readonly property string editLightOn_medium: "\u0098"
+    readonly property string downloadUpdate: "\u0098"
-    readonly property string edit_medium: "\u0099"
+    readonly property string downloadcsv_large: "\u0099"
-    readonly property string edit_small: "\u009A"
+    readonly property string downloadcsv_medium: "\u009A"
-    readonly property string effects: "\u009B"
+    readonly property string downloaded: "\u009B"
-    readonly property string events_small: "\u009D"
+    readonly property string downloadjson_large: "\u009D"
-    readonly property string export_medium: "\u009E"
+    readonly property string downloadjson_medium: "\u009E"
-    readonly property string eyeDropper: "\u009F"
+    readonly property string dragmarks: "\u009F"
-    readonly property string favorite: "\u00A0"
+    readonly property string duplicate_small: "\u00A0"
-    readonly property string fitAll_medium: "\u00A1"
+    readonly property string edit: "\u00A1"
-    readonly property string fitSelected_small: "\u00A2"
+    readonly property string editComponent_large: "\u00A2"
-    readonly property string fitSelection_medium: "\u00A3"
+    readonly property string editComponent_small: "\u00A3"
-    readonly property string fitToView_medium: "\u00A4"
+    readonly property string editLightOff_medium: "\u00A4"
-    readonly property string flowAction: "\u00A5"
+    readonly property string editLightOn_medium: "\u00A5"
-    readonly property string flowTransition: "\u00A6"
+    readonly property string edit_medium: "\u00A6"
-    readonly property string fontStyleBold: "\u00A7"
+    readonly property string edit_small: "\u00A7"
-    readonly property string fontStyleItalic: "\u00A8"
+    readonly property string effects: "\u00A8"
-    readonly property string fontStyleStrikethrough: "\u00A9"
+    readonly property string events_small: "\u00A9"
-    readonly property string fontStyleUnderline: "\u00AA"
+    readonly property string export_medium: "\u00AA"
-    readonly property string forward_medium: "\u00AB"
+    readonly property string eyeDropper: "\u00AB"
-    readonly property string globalOrient_medium: "\u00AC"
+    readonly property string favorite: "\u00AC"
-    readonly property string gradient: "\u00AE"
+    readonly property string fitAll_medium: "\u00AE"
-    readonly property string gridView: "\u00AF"
+    readonly property string fitSelected_small: "\u00AF"
-    readonly property string grid_medium: "\u00B0"
+    readonly property string fitSelection_medium: "\u00B0"
-    readonly property string group_small: "\u00B1"
+    readonly property string fitToView_medium: "\u00B1"
-    readonly property string help: "\u00B2"
+    readonly property string flowAction: "\u00B2"
-    readonly property string home_large: "\u00B3"
+    readonly property string flowTransition: "\u00B3"
-    readonly property string idAliasOff: "\u00B4"
+    readonly property string fontStyleBold: "\u00B4"
-    readonly property string idAliasOn: "\u00B5"
+    readonly property string fontStyleItalic: "\u00B5"
-    readonly property string import_medium: "\u00B6"
+    readonly property string fontStyleStrikethrough: "\u00B6"
-    readonly property string imported: "\u00B7"
+    readonly property string fontStyleUnderline: "\u00B7"
-    readonly property string importedModels_small: "\u00B8"
+    readonly property string forward_medium: "\u00B8"
-    readonly property string infinity: "\u00B9"
+    readonly property string globalOrient_medium: "\u00B9"
-    readonly property string invisible_medium: "\u00BA"
+    readonly property string gradient: "\u00BA"
-    readonly property string invisible_small: "\u00BB"
+    readonly property string gridView: "\u00BB"
-    readonly property string keyframe: "\u00BC"
+    readonly property string grid_medium: "\u00BC"
-    readonly property string languageList_medium: "\u00BD"
+    readonly property string group_small: "\u00BD"
-    readonly property string layouts_small: "\u00BE"
+    readonly property string help: "\u00BE"
-    readonly property string lights_small: "\u00BF"
+    readonly property string home_large: "\u00BF"
-    readonly property string linear_medium: "\u00C0"
+    readonly property string idAliasOff: "\u00C0"
-    readonly property string linkTriangle: "\u00C1"
+    readonly property string idAliasOn: "\u00C1"
-    readonly property string linked: "\u00C2"
+    readonly property string import_medium: "\u00C2"
-    readonly property string listView: "\u00C3"
+    readonly property string imported: "\u00C3"
-    readonly property string list_medium: "\u00C4"
+    readonly property string importedModels_small: "\u00C4"
-    readonly property string localOrient_medium: "\u00C5"
+    readonly property string infinity: "\u00C5"
-    readonly property string lockOff: "\u00C6"
+    readonly property string invisible_medium: "\u00C6"
-    readonly property string lockOn: "\u00C7"
+    readonly property string invisible_small: "\u00C7"
-    readonly property string loopPlayback_medium: "\u00C8"
+    readonly property string keyframe: "\u00C8"
-    readonly property string materialBrowser_medium: "\u00C9"
+    readonly property string languageList_medium: "\u00C9"
-    readonly property string materialPreviewEnvironment: "\u00CA"
+    readonly property string layouts_small: "\u00CA"
-    readonly property string materialPreviewModel: "\u00CB"
+    readonly property string lights_small: "\u00CB"
-    readonly property string material_medium: "\u00CC"
+    readonly property string linear_medium: "\u00CC"
-    readonly property string maxBar_small: "\u00CD"
+    readonly property string linkTriangle: "\u00CD"
-    readonly property string mergeCells: "\u00CE"
+    readonly property string linked: "\u00CE"
-    readonly property string merge_small: "\u00CF"
+    readonly property string listView: "\u00CF"
-    readonly property string minus: "\u00D0"
+    readonly property string list_medium: "\u00D0"
-    readonly property string mirror: "\u00D1"
+    readonly property string localOrient_medium: "\u00D1"
-    readonly property string more_medium: "\u00D2"
+    readonly property string lockOff: "\u00D2"
-    readonly property string mouseArea_small: "\u00D3"
+    readonly property string lockOn: "\u00D3"
-    readonly property string moveDown_medium: "\u00D4"
+    readonly property string loopPlayback_medium: "\u00D4"
-    readonly property string moveInwards_medium: "\u00D5"
+    readonly property string materialBrowser_medium: "\u00D5"
-    readonly property string moveUp_medium: "\u00D6"
+    readonly property string materialPreviewEnvironment: "\u00D6"
-    readonly property string moveUpwards_medium: "\u00D7"
+    readonly property string materialPreviewModel: "\u00D7"
-    readonly property string move_medium: "\u00D8"
+    readonly property string material_medium: "\u00D8"
-    readonly property string newMaterial: "\u00D9"
+    readonly property string maxBar_small: "\u00D9"
-    readonly property string nextFile_large: "\u00DA"
+    readonly property string mergeCells: "\u00DA"
-    readonly property string normalBar_small: "\u00DB"
+    readonly property string merge_small: "\u00DB"
-    readonly property string openLink: "\u00DC"
+    readonly property string minus: "\u00DC"
-    readonly property string openMaterialBrowser: "\u00DD"
+    readonly property string mirror: "\u00DD"
-    readonly property string orientation: "\u00DE"
+    readonly property string more_medium: "\u00DE"
-    readonly property string orthCam_medium: "\u00DF"
+    readonly property string mouseArea_small: "\u00DF"
-    readonly property string orthCam_small: "\u00E0"
+    readonly property string moveDown_medium: "\u00E0"
-    readonly property string paddingEdge: "\u00E1"
+    readonly property string moveInwards_medium: "\u00E1"
-    readonly property string paddingFrame: "\u00E2"
+    readonly property string moveUp_medium: "\u00E2"
-    readonly property string particleAnimation_medium: "\u00E3"
+    readonly property string moveUpwards_medium: "\u00E3"
-    readonly property string pasteStyle: "\u00E4"
+    readonly property string move_medium: "\u00E4"
-    readonly property string paste_small: "\u00E5"
+    readonly property string newMaterial: "\u00E5"
-    readonly property string pause: "\u00E6"
+    readonly property string nextFile_large: "\u00E6"
-    readonly property string perspectiveCam_medium: "\u00E7"
+    readonly property string normalBar_small: "\u00E7"
-    readonly property string perspectiveCam_small: "\u00E8"
+    readonly property string openLink: "\u00E8"
-    readonly property string pin: "\u00E9"
+    readonly property string openMaterialBrowser: "\u00E9"
-    readonly property string plane_medium: "\u00EA"
+    readonly property string orientation: "\u00EA"
-    readonly property string plane_small: "\u00EB"
+    readonly property string orthCam_medium: "\u00EB"
-    readonly property string play: "\u00EC"
+    readonly property string orthCam_small: "\u00EC"
-    readonly property string playFill_medium: "\u00ED"
+    readonly property string paddingEdge: "\u00ED"
-    readonly property string playOutline_medium: "\u00EE"
+    readonly property string paddingFrame: "\u00EE"
-    readonly property string plus: "\u00EF"
+    readonly property string particleAnimation_medium: "\u00EF"
-    readonly property string pointLight_small: "\u00F0"
+    readonly property string pasteStyle: "\u00F0"
-    readonly property string positioners_small: "\u00F1"
+    readonly property string paste_small: "\u00F1"
-    readonly property string previewEnv_medium: "\u00F2"
+    readonly property string pause: "\u00F2"
-    readonly property string previousFile_large: "\u00F3"
+    readonly property string perspectiveCam_medium: "\u00F3"
-    readonly property string promote: "\u00F4"
+    readonly property string perspectiveCam_small: "\u00F4"
-    readonly property string properties_medium: "\u00F5"
+    readonly property string pin: "\u00F5"
-    readonly property string readOnly: "\u00F6"
+    readonly property string plane_medium: "\u00F6"
-    readonly property string recordFill_medium: "\u00F7"
+    readonly property string plane_small: "\u00F7"
-    readonly property string recordOutline_medium: "\u00F8"
+    readonly property string play: "\u00F8"
-    readonly property string redo: "\u00F9"
+    readonly property string playFill_medium: "\u00F9"
-    readonly property string reload_medium: "\u00FA"
+    readonly property string playOutline_medium: "\u00FA"
-    readonly property string remove_medium: "\u00FB"
+    readonly property string plus: "\u00FB"
-    readonly property string remove_small: "\u00FC"
+    readonly property string pointLight_small: "\u00FC"
-    readonly property string rename_small: "\u00FD"
+    readonly property string positioners_small: "\u00FD"
-    readonly property string replace_small: "\u00FE"
+    readonly property string previewEnv_medium: "\u00FE"
-    readonly property string resetView_small: "\u00FF"
+    readonly property string previousFile_large: "\u00FF"
-    readonly property string restartParticles_medium: "\u0100"
+    readonly property string promote: "\u0100"
-    readonly property string reverseOrder_medium: "\u0101"
+    readonly property string properties_medium: "\u0101"
-    readonly property string roatate_medium: "\u0102"
+    readonly property string readOnly: "\u0102"
-    readonly property string rotationFill: "\u0103"
+    readonly property string recordFill_medium: "\u0103"
-    readonly property string rotationOutline: "\u0104"
+    readonly property string recordOutline_medium: "\u0104"
-    readonly property string runProjFill_large: "\u0105"
+    readonly property string redo: "\u0105"
-    readonly property string runProjOutline_large: "\u0106"
+    readonly property string reload_medium: "\u0106"
-    readonly property string s_anchors: "\u0107"
+    readonly property string remove_medium: "\u0107"
-    readonly property string s_annotations: "\u0108"
+    readonly property string remove_small: "\u0108"
-    readonly property string s_arrange: "\u0109"
+    readonly property string rename_small: "\u0109"
-    readonly property string s_boundingBox: "\u010A"
+    readonly property string replace_small: "\u010A"
-    readonly property string s_component: "\u010B"
+    readonly property string resetView_small: "\u010B"
-    readonly property string s_connections: "\u010C"
+    readonly property string restartParticles_medium: "\u010C"
-    readonly property string s_edit: "\u010D"
+    readonly property string reverseOrder_medium: "\u010D"
-    readonly property string s_enterComponent: "\u010E"
+    readonly property string roatate_medium: "\u010E"
-    readonly property string s_eventList: "\u010F"
+    readonly property string rotationFill: "\u010F"
-    readonly property string s_group: "\u0110"
+    readonly property string rotationOutline: "\u0110"
-    readonly property string s_layouts: "\u0111"
+    readonly property string runProjFill_large: "\u0111"
-    readonly property string s_merging: "\u0112"
+    readonly property string runProjOutline_large: "\u0112"
-    readonly property string s_mouseArea: "\u0113"
+    readonly property string s_anchors: "\u0113"
-    readonly property string s_positioners: "\u0114"
+    readonly property string s_annotations: "\u0114"
-    readonly property string s_selection: "\u0115"
+    readonly property string s_arrange: "\u0115"
-    readonly property string s_snapping: "\u0116"
+    readonly property string s_boundingBox: "\u0116"
-    readonly property string s_timeline: "\u0117"
+    readonly property string s_component: "\u0117"
-    readonly property string s_visibility: "\u0118"
+    readonly property string s_connections: "\u0118"
-    readonly property string saveLogs_medium: "\u0119"
+    readonly property string s_edit: "\u0119"
-    readonly property string scale_medium: "\u011A"
+    readonly property string s_enterComponent: "\u011A"
-    readonly property string search: "\u011B"
+    readonly property string s_eventList: "\u011B"
-    readonly property string search_small: "\u011C"
+    readonly property string s_group: "\u011C"
-    readonly property string sectionToggle: "\u011D"
+    readonly property string s_layouts: "\u011D"
-    readonly property string selectFill_medium: "\u011E"
+    readonly property string s_merging: "\u011E"
-    readonly property string selectOutline_medium: "\u011F"
+    readonly property string s_mouseArea: "\u011F"
-    readonly property string selectParent_small: "\u0120"
+    readonly property string s_positioners: "\u0120"
-    readonly property string selection_small: "\u0121"
+    readonly property string s_selection: "\u0121"
-    readonly property string settings_medium: "\u0122"
+    readonly property string s_snapping: "\u0122"
-    readonly property string signal_small: "\u0123"
+    readonly property string s_timeline: "\u0123"
-    readonly property string snapping_conf_medium: "\u0124"
+    readonly property string s_visibility: "\u0124"
-    readonly property string snapping_medium: "\u0125"
+    readonly property string saveLogs_medium: "\u0125"
-    readonly property string snapping_small: "\u0126"
+    readonly property string scale_medium: "\u0126"
-    readonly property string sphere_medium: "\u0127"
+    readonly property string search: "\u0127"
-    readonly property string sphere_small: "\u0128"
+    readonly property string search_small: "\u0128"
-    readonly property string splitColumns: "\u0129"
+    readonly property string sectionToggle: "\u0129"
-    readonly property string splitRows: "\u012A"
+    readonly property string selectFill_medium: "\u012A"
-    readonly property string spotLight_small: "\u012B"
+    readonly property string selectOutline_medium: "\u012B"
-    readonly property string stackedContainer_small: "\u012C"
+    readonly property string selectParent_small: "\u012C"
-    readonly property string startNode: "\u012D"
+    readonly property string selection_small: "\u012D"
-    readonly property string step_medium: "\u012E"
+    readonly property string settings_medium: "\u012E"
-    readonly property string stop_medium: "\u012F"
+    readonly property string signal_small: "\u012F"
-    readonly property string testIcon: "\u0130"
+    readonly property string snapping_conf_medium: "\u0130"
-    readonly property string textAlignBottom: "\u0131"
+    readonly property string snapping_medium: "\u0131"
-    readonly property string textAlignCenter: "\u0132"
+    readonly property string snapping_small: "\u0132"
-    readonly property string textAlignJustified: "\u0133"
+    readonly property string sortascending_medium: "\u0133"
-    readonly property string textAlignLeft: "\u0134"
+    readonly property string sortdescending_medium: "\u0134"
-    readonly property string textAlignMiddle: "\u0135"
+    readonly property string sphere_medium: "\u0135"
-    readonly property string textAlignRight: "\u0136"
+    readonly property string sphere_small: "\u0136"
-    readonly property string textAlignTop: "\u0137"
+    readonly property string splitColumns: "\u0137"
-    readonly property string textBulletList: "\u0138"
+    readonly property string splitRows: "\u0138"
-    readonly property string textFullJustification: "\u0139"
+    readonly property string spotLight_small: "\u0139"
-    readonly property string textNumberedList: "\u013A"
+    readonly property string stackedContainer_small: "\u013A"
-    readonly property string textures_medium: "\u013B"
+    readonly property string startNode: "\u013B"
-    readonly property string tickIcon: "\u013C"
+    readonly property string step_medium: "\u013C"
-    readonly property string tickMark_small: "\u013D"
+    readonly property string stop_medium: "\u013D"
-    readonly property string timeline_small: "\u013E"
+    readonly property string testIcon: "\u013E"
-    readonly property string toEndFrame_medium: "\u013F"
+    readonly property string textAlignBottom: "\u013F"
-    readonly property string toNextFrame_medium: "\u0140"
+    readonly property string textAlignCenter: "\u0140"
-    readonly property string toPrevFrame_medium: "\u0141"
+    readonly property string textAlignJustified: "\u0141"
-    readonly property string toStartFrame_medium: "\u0142"
+    readonly property string textAlignLeft: "\u0142"
-    readonly property string topToolbar_annotations: "\u0143"
+    readonly property string textAlignMiddle: "\u0143"
-    readonly property string topToolbar_closeFile: "\u0144"
+    readonly property string textAlignRight: "\u0144"
-    readonly property string topToolbar_designMode: "\u0145"
+    readonly property string textAlignTop: "\u0145"
-    readonly property string topToolbar_enterComponent: "\u0146"
+    readonly property string textBulletList: "\u0146"
-    readonly property string topToolbar_home: "\u0147"
+    readonly property string textFullJustification: "\u0147"
-    readonly property string topToolbar_makeComponent: "\u0148"
+    readonly property string textNumberedList: "\u0148"
-    readonly property string topToolbar_navFile: "\u0149"
+    readonly property string textures_medium: "\u0149"
-    readonly property string topToolbar_runProject: "\u014A"
+    readonly property string tickIcon: "\u014A"
-    readonly property string translationCreateFiles: "\u014B"
+    readonly property string tickMark_small: "\u014B"
-    readonly property string translationCreateReport: "\u014C"
+    readonly property string timeline_small: "\u014C"
-    readonly property string translationExport: "\u014D"
+    readonly property string toEndFrame_medium: "\u014D"
-    readonly property string translationImport: "\u014E"
+    readonly property string toNextFrame_medium: "\u014E"
-    readonly property string translationSelectLanguages: "\u014F"
+    readonly property string toPrevFrame_medium: "\u014F"
-    readonly property string translationTest: "\u0150"
+    readonly property string toStartFrame_medium: "\u0150"
-    readonly property string transparent: "\u0151"
+    readonly property string topToolbar_annotations: "\u0151"
-    readonly property string triState: "\u0152"
+    readonly property string topToolbar_closeFile: "\u0152"
-    readonly property string triangleArcA: "\u0153"
+    readonly property string topToolbar_designMode: "\u0153"
-    readonly property string triangleArcB: "\u0154"
+    readonly property string topToolbar_enterComponent: "\u0154"
-    readonly property string triangleCornerA: "\u0155"
+    readonly property string topToolbar_home: "\u0155"
-    readonly property string triangleCornerB: "\u0156"
+    readonly property string topToolbar_makeComponent: "\u0156"
-    readonly property string unLinked: "\u0157"
+    readonly property string topToolbar_navFile: "\u0157"
-    readonly property string undo: "\u0158"
+    readonly property string topToolbar_runProject: "\u0158"
-    readonly property string unify_medium: "\u0159"
+    readonly property string translationCreateFiles: "\u0159"
-    readonly property string unpin: "\u015A"
+    readonly property string translationCreateReport: "\u015A"
-    readonly property string upDownIcon: "\u015B"
+    readonly property string translationExport: "\u015B"
-    readonly property string upDownSquare2: "\u015C"
+    readonly property string translationImport: "\u015C"
-    readonly property string updateAvailable_medium: "\u015D"
+    readonly property string translationSelectLanguages: "\u015D"
-    readonly property string updateContent_medium: "\u015E"
+    readonly property string translationTest: "\u015E"
-    readonly property string visibilityOff: "\u015F"
+    readonly property string transparent: "\u015F"
-    readonly property string visibilityOn: "\u0160"
+    readonly property string triState: "\u0160"
-    readonly property string visible_medium: "\u0161"
+    readonly property string triangleArcA: "\u0161"
-    readonly property string visible_small: "\u0162"
+    readonly property string triangleArcB: "\u0162"
-    readonly property string wildcard: "\u0163"
+    readonly property string triangleCornerA: "\u0163"
-    readonly property string wizardsAutomotive: "\u0164"
+    readonly property string triangleCornerB: "\u0164"
-    readonly property string wizardsDesktop: "\u0165"
+    readonly property string unLinked: "\u0165"
-    readonly property string wizardsGeneric: "\u0166"
+    readonly property string undo: "\u0166"
-    readonly property string wizardsMcuEmpty: "\u0167"
+    readonly property string unify_medium: "\u0167"
-    readonly property string wizardsMcuGraph: "\u0168"
+    readonly property string unpin: "\u0168"
-    readonly property string wizardsMobile: "\u0169"
+    readonly property string upDownIcon: "\u0169"
-    readonly property string wizardsUnknown: "\u016A"
+    readonly property string upDownSquare2: "\u016A"
-    readonly property string zoomAll: "\u016B"
+    readonly property string updateAvailable_medium: "\u016B"
-    readonly property string zoomIn: "\u016C"
+    readonly property string updateContent_medium: "\u016C"
-    readonly property string zoomIn_medium: "\u016D"
+    readonly property string uploadcsv_large: "\u016D"
-    readonly property string zoomOut: "\u016E"
+    readonly property string uploadcsv_medium: "\u016E"
-    readonly property string zoomOut_medium: "\u016F"
+    readonly property string uploadjson_large: "\u016F"
-    readonly property string zoomSelection: "\u0170"
+    readonly property string uploadjson_medium: "\u0170"
+    readonly property string visibilityOff: "\u0171"
+    readonly property string visibilityOn: "\u0172"
+    readonly property string visible_medium: "\u0173"
+    readonly property string visible_small: "\u0174"
+    readonly property string wildcard: "\u0175"
+    readonly property string wizardsAutomotive: "\u0176"
+    readonly property string wizardsDesktop: "\u0177"
+    readonly property string wizardsGeneric: "\u0178"
+    readonly property string wizardsMcuEmpty: "\u0179"
+    readonly property string wizardsMcuGraph: "\u017A"
+    readonly property string wizardsMobile: "\u017B"
+    readonly property string wizardsUnknown: "\u017C"
+    readonly property string zoomAll: "\u017D"
+    readonly property string zoomIn: "\u017E"
+    readonly property string zoomIn_medium: "\u017F"
+    readonly property string zoomOut: "\u0180"
+    readonly property string zoomOut_medium: "\u0181"
+    readonly property string zoomSelection: "\u0182"
 
     readonly property font iconFont: Qt.font({
                                                  "family": controlIcons.name,

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml

@@ -99,7 +99,8 @@ QtObject {
     property real inputHorizontalPadding: Math.round(6 * values.scaleFactor)
     property real typeLabelVerticalShift: Math.round(6 * values.scaleFactor)
 
-    property real scrollBarThickness: 10
+    property real scrollBarThickness: 8
+    property real scrollBarThicknessHover: 10
     property real scrollBarActivePadding: 1
     property real scrollBarInactivePadding: 2
 
@@ -221,7 +222,7 @@ QtObject {
     property real colorEditorPopupSpinBoxWidth: 54
 
     // Popup Window
-    property real titleBarHeight: values.height + 10
+    property real titleBarHeight: values.height + 20
     property real popupMargin: 10
 
     // Toolbar
@@ -339,6 +340,7 @@ QtObject {
     // Panels & Panes
     property color themeBackgroundColorNormal: Theme.color(Theme.DSBackgroundColorNormal)
     property color themeBackgroundColorAlternate: Theme.color(Theme.DSBackgroundColorAlternate)
+    property color themeConnectionCodeEditor: Theme.color(Theme.DSconnectionCodeEditor)
 
     // Text colors
     property color themeTextColor: Theme.color(Theme.DStextColor)
@@ -442,8 +444,20 @@ QtObject {
     property color themeDialogOutline: values.themeInteraction
 
     // Expression Builder
-    property color themePillBackground: Theme.color(Theme.DSdockWidgetSplitter)
+    property color themePillDefaultBackgroundIdle: Theme.color(Theme.DSpillDefaultBackgroundIdle)
+    property color themePillDefaultBackgroundHover: Theme.color(Theme.DSpillDefaultBackgroundHover)
+    property color themePillOperatorBackgroundIdle: Theme.color(Theme.DSpillOperatorBackgroundIdle)
+    property color themePillOperatorBackgroundHover: Theme.color(Theme.DSpillOperatorBackgroundHover)
+    property color themePillLiteralBackgroundIdle: Theme.color(Theme.DSpillLiteralBackgroundIdle)
+    property color themePillLiteralBackgroundHover: Theme.color(Theme.DSpillLiteralBackgroundHover)
 
+    property color themePillShadowBackground: values.themeInteraction
+
+    property color themePillOutline: "#ffffffff"
+
+    property color themePillText: Theme.color(Theme.DSpillText)
+    property color themePillTextSelected: Theme.color(Theme.DSpillTextSelected)
+    property color themePillTextEdit: Theme.color(Theme.DspillTextEdit)
 
     // Control Style Mapping
     property ControlStyle controlStyle: DefaultStyle {}
@@ -458,4 +472,5 @@ QtObject {
     property ControlStyle statusbarControlStyle: StatusBarControlStyle {}
     property ControlStyle statesControlStyle: StatesControlStyle {}
     property ControlStyle searchControlStyle: SearchControlStyle {}
+    property ControlStyle viewStyle: ViewStyle {}
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ViewStyle.qml

@@ -0,0 +1,9 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
+
+import QtQuick
+
+ControlStyle {
+    scrollBarThickness: Values.scrollBarThickness
+    scrollBarThicknessHover: Values.scrollBarThicknessHover
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir

@@ -14,3 +14,4 @@ StatusBarControlStyle 1.0 StatusBarControlStyle.qml
 TopToolbarButtonStyle 1.0 TopToolbarButtonStyle.qml
 ViewBarButtonStyle 1.0 ViewBarButtonStyle.qml
 ViewBarControlStyle 1.0 ViewBarControlStyle.qml
+ViewStyle 1.0 ViewStyle.qml

share/qtcreator/qmldesigner/qt4mcu/metadata.qml

@@ -5,7 +5,7 @@
 Metadata {
     id: metadataFile
 
-    defaultVersion: v24
+    defaultVersion: v25
 
     VersionData {
         id: v14
@@ -60,4 +60,16 @@ Metadata {
         name: "Qt for MCUs 2.4"
         path: "qul-24.qml"
     }
+
+    VersionData {
+        id: v25
+        name: "Qt for MCUs 2.5"
+        path: "qul-25.qml"
+    }
+
+    VersionData {
+        id: v26
+        name: "Qt for MCUs 2.6"
+        path: "qul-26.qml"
+    }
 }

share/qtcreator/qmldesigner/qt4mcu/qul-17.qml

@@ -1,6 +1,8 @@
 // Copyright (C) 2021 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
+// new MCU-specific imports: QtQuickUltralite.Extras, QtQuickUltralite.Layers
+
 VersionData {
     name: "Qt for MCUs 1.7"
 

share/qtcreator/qmldesigner/qt4mcu/qul-18.qml

@@ -1,6 +1,11 @@
 // Copyright (C) 2021 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
+// new import: QtQuick.Shapes
+// new import provides new types: QtQuick.Shapes.Shape, QtQuick.Shapes.ShapePath
+// new types: QtQuick.Path, PathArc, PathLine, PathMove, PathQuad, PathCubic, PathElement, PathSvg
+
+
 VersionData {
     name: "Qt for MCUs 1.8"
 

share/qtcreator/qmldesigner/qt4mcu/qul-21.qml

@@ -1,6 +1,8 @@
 // Copyright (C) 2021 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
+// new property: QtQuick.Text::elide
+
 VersionData {
     name: "Qt for MCUs 2.1"
 

share/qtcreator/qmldesigner/qt4mcu/qul-22.qml

@@ -1,6 +1,8 @@
 // Copyright (C) 2022 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
+// new properties: QtQuick.Text::wrapMode, QtQuick.Controls.AbstractButton::icon
+
 VersionData {
     name: "Qt for MCUs 2.2"
 

share/qtcreator/qmldesigner/qt4mcu/qul-23.qml

@@ -1,6 +1,9 @@
 // Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
+// new type: QtQuick.Loader
+// new properties: QtQuick.Flickable::boundsBehavior, ::flickableDirection
+
 VersionData {
     name: "Qt for MCUs 2.3"
 

share/qtcreator/qmldesigner/qt4mcu/qul-24.qml

@@ -1,6 +1,9 @@
 // Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
+// new type: QtQuick.AnimatedSprite
+// new property: QtQuick.Loader::sourceComponent
+
 VersionData {
     name: "Qt for MCUs 2.4"
 

share/qtcreator/qmldesigner/qt4mcu/qul-25.qml

@@ -0,0 +1,217 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
+
+VersionData {
+    name: "Qt for MCUs 2.5"
+
+    bannedItems: [
+        "QtQuick.AnimatedImage",
+        "QtQuick.Flow",
+        "QtQuick.FocusScope",
+        "QtQuick.Grid",
+        "QtQuick.GridView",
+        "QtQuick.PathView",
+        "QtQuick.TextEdit",
+        "QtQuick.TextInput",
+        "QtQuick.Controls",
+        "QtQuick.Controls.BusyIndicator",
+        "QtQuick.Controls.ButtonGroup",
+        "QtQuick.Controls.CheckDelegate",
+        "QtQuick.Controls.ComboBox",
+        "QtQuick.Controls.Container",
+        "QtQuick.Controls.DelayButton",
+        "QtQuick.Controls.Frame",
+        "QtQuick.Controls.GroupBox",
+        "QtQuick.Controls.ItemDelegate",
+        "QtQuick.Controls.Label",
+        "QtQuick.Controls.Page",
+        "QtQuick.Controls.PageIndicator",
+        "QtQuick.Controls.Pane",
+        "QtQuick.Controls.RadioDelegate",
+        "QtQuick.Controls.RangeSlider",
+        "QtQuick.Controls.RoundButton",
+        "QtQuick.Controls.ScrollView",
+        "QtQuick.Controls.SpinBox",
+        "QtQuick.Controls.StackView",
+        "QtQuick.Controls.SwipeDelegate",
+        "QtQuick.Controls.SwitchDelegate",
+        "QtQuick.Controls.TabBar",
+        "QtQuick.Controls.TabButton",
+        "QtQuick.Controls.TextArea",
+        "QtQuick.Controls.TextField",
+        "QtQuick.Controls.ToolBar",
+        "QtQuick.Controls.ToolButton",
+        "QtQuick.Controls.ToolSeparator",
+        "QtQuick.Controls.Tumbler",
+        "QtQuick.Shapes.ConicalGradient",
+        "QtQuick.Shapes.LinearGradient",
+        "QtQuick.Shapes.RadialGradient",
+        "QtQuick.Shapes.ShapeGradient"
+    ]
+
+    allowedImports: [
+        "QtQuick",
+        "QtQuick.Controls",
+        "QtQuick.Shapes",
+        "QtQuick.Timeline",
+        "QtQuickUltralite.Extras",
+        "QtQuickUltralite.Layers"
+    ]
+
+    bannedImports: [
+        "FlowView",
+        "SimulinkConnector"
+    ]
+
+    //ComplexProperty is not a type, it's just a way to handle bigger props
+    ComplexProperty {
+        prefix: "font"
+        bannedProperties: ["wordSpacing", "letterSpacing", "hintingPreference",
+            "kerning", "preferShaping",  "capitalization",
+            "strikeout", "underline", "styleName"]
+    }
+
+    QtQml.Timer {
+        bannedProperties: ["triggeredOnStart"]
+    }
+
+    QtQuick.Item {
+        bannedProperties: ["layer", "opacity", "smooth", "antialiasing",
+            "baselineOffset", "focus", "activeFocusOnTab",
+            "rotation", "scale", "transformOrigin"]
+    }
+
+    QtQuick.Rectangle {
+        bannedProperties: ["gradient", "border"]
+    }
+
+    QtQuick.Flickable {
+        bannedProperties: ["boundsMovement", "flickDeceleration",
+            "leftMargin", "rightMargin", "bottomMargin", "topMargin",
+            "originX", "originY", "pixelAligned", "pressDelay", "synchronousDrag"]
+    }
+
+    QtQuick.MouseArea {
+        bannedProperties: ["propagateComposedEvents", "preventStealing", "cursorShape",
+            "scrollGestureEnabled", "drag", "acceptedButtons", "hoverEnabled"]
+    }
+
+    QtQuick.Image {
+        allowChildren: false
+        allowedProperties: ["rotation", "scale", "transformOrigin"]
+        bannedProperties: ["mirror", "mipmap",  "cache", "autoTransform", "asynchronous",
+            "sourceSize", "smooth"]
+    }
+
+    QtQuick.BorderImage {
+        bannedProperties: ["asynchronous", "cache", "currentFrame", "frameCount",
+            "horizontalTileMode", "mirror", "progress", "smooth", "sourceSize",
+            "status", "verticalTileMode"]
+    }
+
+    QtQuick.Text {
+        allowChildren: false
+        allowedProperties: ["rotation", "scale", "transformOrigin"]
+        bannedProperties: ["lineHeight", "lineHeightMode", "style",
+            "styleColor", "minimumPointSize", "minimumPixelSize",
+            "fontSizeMode", "renderType", "renderTypeQuality", "textFormat", "maximumLineCount"]
+    }
+
+    QtQuick.Loader {
+        bannedProperties: ["asynchronous", "progress", "status"]
+    }
+
+    //Padding is not an actual item, but rather set of properties in Text
+    Padding {
+        bannedProperties: ["bottomPadding", "topPadding", "leftPadding", "rightPadding"]
+    }
+
+    QtQuick.Column {
+        bannedProperties: ["bottomPadding", "leftPadding", "rightPadding", "topPadding"]
+    }
+
+    QtQuick.Row {
+        bannedProperties: ["bottomPadding", "leftPadding", "rightPadding", "topPadding",
+        "effectiveLayoutDirection", "layoutDirection"]
+    }
+
+    QtQuick.ListView {
+        bannedProperties: ["cacheBuffer", "highlightRangeMode", "highlightMoveDuration",
+            "highlightResizeDuration", "preferredHighlightBegin", "layoutDirection",
+            "preferredHighlightEnd", "highlightFollowsCurrentItem", "keyNavigationWraps",
+            "snapMode", "highlightMoveVelocity", "highlightResizeVelocity"]
+    }
+
+    QtQuick.Animation {
+        bannedProperties: ["paused"]
+    }
+
+    //Quick Controls2 Items and properties:
+
+    QtQuick.Controls.Control {
+        bannedProperties: ["focusPolicy", "hoverEnabled", "wheelEnabled"]
+    }
+
+    QtQuick.Controls.AbstractButton {
+        bannedProperties: ["display", "autoExclusive", "icon"]
+    }
+
+    QtQuick.Controls.ProgressBar {
+        bannedProperties: ["indeterminate"]
+    }
+
+    QtQuick.Controls.Slider {
+        bannedProperties: ["live", "snapMode", "touchDragThreshold"]
+    }
+
+    //Path and Shapes related:
+
+    QtQuick.Path {
+        bannedProperties: ["scale", "pathElements"]
+    }
+
+    QtQuick.PathArc {
+        bannedProperties: ["relativeX", "relativeY"]
+    }
+
+    QtQuick.PathLine {
+        bannedProperties: ["relativeX", "relativeY"]
+    }
+
+    QtQuick.PathMove {
+        bannedProperties: ["relativeX", "relativeY"]
+    }
+
+    QtQuick.PathQuad {
+        bannedProperties: ["relativeX", "relativeY",
+            "relativeControlX", "relativeControlY"]
+    }
+
+    QtQuick.PathCubic {
+        bannedProperties: ["relativeX", "relativeY",
+            "relativeControl1X", "relativeControl1Y",
+            "relativeControl2X", "relativeControl2Y"]
+    }
+
+    QtQuick.PathElement {
+        //nothing
+    }
+
+    QtQuick.PathSvg {
+        //nothing
+    }
+
+    QtQuick.Shapes.Shape {
+        bannedProperties: ["asynchronous", "containsMode", "data",
+            "renderType", "status", "vendorExtensionsEnabled"]
+    }
+
+    QtQuick.Shapes.ShapePath {
+        bannedProperties: ["dashOffset", "dashPattern",
+            "fillGradient", "strokeStyle"]
+    }
+
+    QtQuickUltralite.Extras.ItemBuffer {
+        allowedProperties: ["rotation", "scale", "transformOrigin"]
+    }
+}

share/qtcreator/qmldesigner/qt4mcu/qul-26.qml

@@ -1,6 +1,8 @@
 // Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
+// new property: QtQuick.Text::textFormat
+
 VersionData {
     name: "Qt for MCUs 2.6"
 

share/qtcreator/qmldesigner/stateseditor/Main.qml

@@ -579,26 +579,30 @@ Rectangle {
                 anchors.topMargin: root.topMargin
                 anchors.leftMargin: root.leftMargin
 
-                ScrollBar.horizontal: HelperWidgets.ScrollBar {
+                ScrollBar.horizontal: StudioControls.TransientScrollBar {
                     id: horizontalBar
+                    style: StudioTheme.Values.viewStyle
                     parent: scrollView
                     x: scrollView.leftPadding
                     y: scrollView.height - height
                     width: scrollView.availableWidth
                     orientation: Qt.Horizontal
+                    visible: root.isLandscape
 
                     show: (scrollView.hovered || scrollView.focus || scrollView.adsFocus)
                           && horizontalBar.isNeeded
                     otherInUse: verticalBar.inUse
                 }
 
-                ScrollBar.vertical: HelperWidgets.ScrollBar {
+                ScrollBar.vertical: StudioControls.TransientScrollBar {
                     id: verticalBar
+                    style: StudioTheme.Values.viewStyle
                     parent: scrollView
                     x: scrollView.mirrored ? 0 : scrollView.width - width
                     y: scrollView.topPadding
                     height: scrollView.availableHeight
                     orientation: Qt.Vertical
+                    visible: !root.isLandscape
 
                     show: (scrollView.hovered || scrollView.focus || scrollView.adsFocus)
                           && verticalBar.isNeeded

share/qtcreator/qmldesigner/studio_templates/projects/application-mcu/app_mcu.qmlproject.tpl

@@ -55,7 +55,7 @@ Project {
     QDS.qtForMCUs: true
     QDS.qt6Project: true
 
-    QDS.qdsVersion: "4.2"
+    QDS.qdsVersion: "4.3"
     QDS.quickVersion: "6.5"
 
     /* List of plugin directories passed to QML runtime */

share/qtcreator/qmldesigner/studio_templates/projects/application-mcu/wizard.json

@@ -188,7 +188,7 @@
                 {
                     "isBinary": true,
                     "source": "MCUDefaultStyle/images",
-                    "target": "%{ProjectDirectory}/MCUDefaultStyle/images"
+                    "target": "%{ProjectDirectory}/imports/MCUDefaultStyle/images"
                 }
             ]
         }