Remove "2" from Qt Quick Controls directories

Qt Quick Controls 2 was named that way because it was a follow-up to
Qt Quick Controls 1.x. Now that Qt Quick Controls 1 is no longer
supported, we don't need to have "2" in the name. Work on this was
already started for the documentation in
1abdfe5d5a052f2298b7bf657513dfa7e0c66a56.

By doing this renaming a few weeks before feature freeze, it won't
affect the release but still results in as little time possible spent
manually fixing conflicts in cherry-picks from non-LTS releases as a
result of the renaming.

This patch does the following:

- Renames directories.
- Adapts CMakeLists.txt and other files to account for the new paths.

A follow-up patch will handle documentation.

It does not touch library names or other user-facing stuff, as that
will have to be done in Qt 7.

Task-number: QTBUG-95413
Change-Id: I170d8db19033ee71e495ff0c5c1a517a41ed7634
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

2538 files changed, 43958 insertions, 0 deletions

diff --git a/src/quickcontrols/CMakeLists.txt b/src/quickcontrols/CMakeLists.txt
new file mode 100644
index 0000000000..24a2ca8ca2
--- /dev/null
+++ b/src/quickcontrols/CMakeLists.txt
@@ -0,0 +1,98 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## QuickControls2 Module:
+#####################################################################
+
+qt_internal_add_qml_module(QuickControls2
+    URI "QtQuick.Controls"
+    VERSION "${PROJECT_VERSION}"
+    PAST_MAJOR_VERSIONS 2
+    DESIGNER_SUPPORTED
+    CLASS_NAME QtQuickControls2Plugin
+    PLUGIN_TARGET qtquickcontrols2plugin
+    IMPORTS
+        QtQuick.Controls.impl/auto
+    OPTIONAL_IMPORTS
+        QtQuick.Controls.Fusion/auto
+        QtQuick.Controls.Material/auto
+        QtQuick.Controls.Imagine/auto
+        QtQuick.Controls.Universal/auto
+        QtQuick.Controls.Windows/auto
+        QtQuick.Controls.macOS/auto
+        QtQuick.Controls.iOS/auto
+    DEFAULT_IMPORTS
+        QtQuick.Controls.Basic/auto
+    NO_PLUGIN_OPTIONAL
+    NO_GENERATE_PLUGIN_SOURCE
+    SOURCES
+        qquickattachedpropertypropagator.cpp qquickattachedpropertypropagator.h
+        qquickstyle.cpp qquickstyle.h qquickstyle_p.h
+        qquickstyleplugin.cpp qquickstyleplugin_p.h
+        qtquickcontrols2global.h
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::GuiPrivate
+        Qt::QmlPrivate
+        Qt::QuickPrivate
+        Qt::QuickTemplates2
+        Qt::QuickTemplates2Private
+    PUBLIC_LIBRARIES
+        Qt::Core
+        Qt::Gui
+        Qt::Quick
+    GENERATE_CPP_EXPORTS
+)
+
+qt_internal_extend_target(qtquickcontrols2plugin
+    SOURCES
+        qtquickcontrols2plugin.cpp
+    LIBRARIES
+        Qt::QuickControls2ImplPrivate
+        Qt::QuickControls2Private
+        Qt::QuickTemplates2Private
+)
+
+if(QT_FEATURE_quick_designer)
+    add_subdirectory(designer)
+endif()
+
+add_subdirectory(basic)
+add_subdirectory(fusion)
+add_subdirectory(imagine)
+add_subdirectory(material)
+add_subdirectory(universal)
+
+if(MACOS)
+    add_subdirectory(macos)
+    ### Remove
+    add_subdirectory(ios)
+endif()
+
+if(IOS)
+    add_subdirectory(ios)
+endif()
+
+if(WIN32)
+    add_subdirectory(windows)
+endif()
+
+qt_internal_add_docs(QuickControls2
+    doc/qtquickcontrols.qdocconf
+)
+
+# Make the doc files available to Creator's locator.
+file(GLOB doc_files
+    "${CMAKE_CURRENT_SOURCE_DIR}/doc/snippets/*.qml"
+    "${CMAKE_CURRENT_SOURCE_DIR}/doc/src/*.qdoc"
+    "${CMAKE_CURRENT_SOURCE_DIR}/doc/src/templates/*.qdoc"
+)
+target_sources(QuickControls2
+    PRIVATE
+        ${doc_files}
+        doc/qtquickcontrols.qdocconf
+)
diff --git a/src/quickcontrols/basic/AbstractButton.qml b/src/quickcontrols/basic/AbstractButton.qml
new file mode 100644
index 0000000000..82105f3f81
--- /dev/null
+++ b/src/quickcontrols/basic/AbstractButton.qml
@@ -0,0 +1,14 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.AbstractButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+}
diff --git a/src/quickcontrols/basic/Action.qml b/src/quickcontrols/basic/Action.qml
new file mode 100644
index 0000000000..aa360f0aa7
--- /dev/null
+++ b/src/quickcontrols/basic/Action.qml
@@ -0,0 +1,7 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.Action { }
diff --git a/src/quickcontrols/basic/ActionGroup.qml b/src/quickcontrols/basic/ActionGroup.qml
new file mode 100644
index 0000000000..8ab1495d32
--- /dev/null
+++ b/src/quickcontrols/basic/ActionGroup.qml
@@ -0,0 +1,7 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.ActionGroup { }
diff --git a/src/quickcontrols/basic/ApplicationWindow.qml b/src/quickcontrols/basic/ApplicationWindow.qml
new file mode 100644
index 0000000000..d64a87c99d
--- /dev/null
+++ b/src/quickcontrols/basic/ApplicationWindow.qml
@@ -0,0 +1,12 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ApplicationWindow {
+    id: window
+
+    color: window.palette.window
+}
diff --git a/src/quickcontrols/basic/BusyIndicator.qml b/src/quickcontrols/basic/BusyIndicator.qml
new file mode 100644
index 0000000000..2276f5a002
--- /dev/null
+++ b/src/quickcontrols/basic/BusyIndicator.qml
@@ -0,0 +1,29 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.Basic.impl
+import QtQuick.Templates as T
+
+T.BusyIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+
+    contentItem: BusyIndicatorImpl {
+        implicitWidth: 48
+        implicitHeight: 48
+
+        pen: control.palette.dark
+        fill: control.palette.dark
+
+        running: control.running
+        opacity: control.running ? 1 : 0
+        Behavior on opacity { OpacityAnimator { duration: 250 } }
+    }
+}
diff --git a/src/quickcontrols/basic/Button.qml b/src/quickcontrols/basic/Button.qml
new file mode 100644
index 0000000000..cc02c2d7cd
--- /dev/null
+++ b/src/quickcontrols/basic/Button.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.Button {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    horizontalPadding: padding + 2
+    spacing: 6
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.checked || control.highlighted ? control.palette.brightText :
+                control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.checked || control.highlighted ? control.palette.brightText :
+               control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        visible: !control.flat || control.down || control.checked || control.highlighted
+        color: Color.blend(control.checked || control.highlighted ? control.palette.dark : control.palette.button,
+                                                                    control.palette.mid, control.down ? 0.5 : 0.0)
+        border.color: control.palette.highlight
+        border.width: control.visualFocus ? 2 : 0
+    }
+}
diff --git a/src/quickcontrols/basic/ButtonGroup.qml b/src/quickcontrols/basic/ButtonGroup.qml
new file mode 100644
index 0000000000..9c615a0286
--- /dev/null
+++ b/src/quickcontrols/basic/ButtonGroup.qml
@@ -0,0 +1,7 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.ButtonGroup { }
diff --git a/src/quickcontrols/basic/CMakeLists.txt b/src/quickcontrols/basic/CMakeLists.txt
new file mode 100644
index 0000000000..e45b6d09c0
--- /dev/null
+++ b/src/quickcontrols/basic/CMakeLists.txt
@@ -0,0 +1,213 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2basicstyleplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "AbstractButton.qml"
+    "Action.qml"
+    "ActionGroup.qml"
+    "ApplicationWindow.qml"
+    "BusyIndicator.qml"
+    "Button.qml"
+    "ButtonGroup.qml"
+    "CheckBox.qml"
+    "CheckDelegate.qml"
+    "ComboBox.qml"
+    "Container.qml"
+    "Control.qml"
+    "DelayButton.qml"
+    "Dial.qml"
+    "Dialog.qml"
+    "DialogButtonBox.qml"
+    "Drawer.qml"
+    "Frame.qml"
+    "GroupBox.qml"
+    "HorizontalHeaderView.qml"
+    "ItemDelegate.qml"
+    "Label.qml"
+    "Menu.qml"
+    "MenuBar.qml"
+    "MenuBarItem.qml"
+    "MenuItem.qml"
+    "MenuSeparator.qml"
+    "Page.qml"
+    "PageIndicator.qml"
+    "Pane.qml"
+    "Popup.qml"
+    "ProgressBar.qml"
+    "RadioButton.qml"
+    "RadioDelegate.qml"
+    "RangeSlider.qml"
+    "RoundButton.qml"
+    "ScrollBar.qml"
+    "ScrollIndicator.qml"
+    "ScrollView.qml"
+    "SelectionRectangle.qml"
+    "Slider.qml"
+    "SpinBox.qml"
+    "SplitView.qml"
+    "StackView.qml"
+    "SwipeDelegate.qml"
+    "Switch.qml"
+    "SwitchDelegate.qml"
+    "SwipeView.qml"
+    "TabBar.qml"
+    "TabButton.qml"
+    "TextArea.qml"
+    "TextField.qml"
+    "ToolBar.qml"
+    "ToolButton.qml"
+    "ToolSeparator.qml"
+    "ToolTip.qml"
+    "Tumbler.qml"
+    "VerticalHeaderView.qml"
+)
+if (QT_FEATURE_quicktemplates2_calendar)
+    list(APPEND qml_files
+        "Calendar.qml"
+        "CalendarModel.qml"
+        "DayOfWeekRow.qml"
+        "MonthGrid.qml"
+        "WeekNumberColumn.qml"
+    )
+endif()
+if (QT_FEATURE_quick_treeview)
+    list(APPEND qml_files
+        "TreeViewDelegate.qml"
+    )
+endif()
+
+set_source_files_properties(Action.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.3;6.0"
+)
+set_source_files_properties(ActionGroup.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.3;6.0"
+)
+if (QT_FEATURE_quicktemplates2_calendar)
+    set_source_files_properties(Calendar.qml PROPERTIES
+        QT_QML_SINGLETON_TYPE TRUE
+        QT_QML_SOURCE_VERSIONS "6.3"
+    )
+    set_source_files_properties(CalendarModel.qml PROPERTIES
+        QT_QML_SOURCE_VERSIONS "6.3"
+    )
+    set_source_files_properties(DayOfWeekRow.qml PROPERTIES
+        QT_QML_SOURCE_VERSIONS "6.3"
+    )
+endif()
+set_source_files_properties(DelayButton.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.2;6.0"
+)
+set_source_files_properties(Dialog.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(DialogButtonBox.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(HorizontalHeaderView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.15;6.0"
+)
+set_source_files_properties(MenuBar.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.3;6.0"
+)
+set_source_files_properties(MenuBarItem.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.3;6.0"
+)
+set_source_files_properties(MenuSeparator.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+if (QT_FEATURE_quicktemplates2_calendar)
+    set_source_files_properties(MonthGrid.qml PROPERTIES
+        QT_QML_SOURCE_VERSIONS "6.3"
+    )
+endif()
+set_source_files_properties(RoundButton.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(ScrollView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.2;6.0"
+)
+set_source_files_properties(SelectionRectangle.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "6.2"
+)
+set_source_files_properties(SplitView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.13;6.0"
+)
+set_source_files_properties(ToolSeparator.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(VerticalHeaderView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.15;6.0"
+)
+if (QT_FEATURE_quicktemplates2_calendar)
+    set_source_files_properties(WeekNumberColumn.qml PROPERTIES
+        QT_QML_SOURCE_VERSIONS "6.3"
+    )
+endif()
+
+qt_internal_add_qml_module(qtquickcontrols2basicstyleplugin
+    URI "QtQuick.Controls.Basic"
+    VERSION "${PROJECT_VERSION}"
+    PAST_MAJOR_VERSIONS 2
+    CLASS_NAME QtQuickControls2BasicStylePlugin
+    DEPENDENCIES
+        QtQuick/auto
+    PLUGIN_TARGET qtquickcontrols2basicstyleplugin
+    NO_PLUGIN_OPTIONAL
+    NO_GENERATE_PLUGIN_SOURCE
+    SOURCES
+        qquickbasicstyle.cpp qquickbasicstyle_p.h
+        qquickbasictheme.cpp qquickbasictheme_p.h
+        qtquickcontrols2basicstyleplugin.cpp
+    QML_FILES
+        ${qml_files}
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::GuiPrivate
+        Qt::QmlPrivate
+        Qt::QuickControls2Private
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+)
+
+# Resources:
+set(qtquickcontrols2basicstyleplugin_resource_files
+    "images/arrow-indicator.png"
+    "images/arrow-indicator@2x.png"
+    "images/arrow-indicator@3x.png"
+    "images/arrow-indicator@4x.png"
+    "images/check.png"
+    "images/check@2x.png"
+    "images/check@3x.png"
+    "images/check@4x.png"
+    "images/dial-indicator.png"
+    "images/dial-indicator@2x.png"
+    "images/dial-indicator@3x.png"
+    "images/dial-indicator@4x.png"
+    "images/double-arrow.png"
+    "images/double-arrow@2x.png"
+    "images/double-arrow@3x.png"
+    "images/double-arrow@4x.png"
+    "images/drop-indicator.png"
+    "images/drop-indicator@2x.png"
+    "images/drop-indicator@3x.png"
+    "images/drop-indicator@4x.png"
+)
+
+qt_internal_add_resource(qtquickcontrols2basicstyleplugin "qtquickcontrols2basicstyleplugin"
+    PREFIX
+        "/qt-project.org/imports/QtQuick/Controls/Basic"
+    FILES
+        ${qtquickcontrols2basicstyleplugin_resource_files}
+)
+
+add_subdirectory(impl)
+
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2basicstyleplugin
+                                              qtquickcontrols2basicstyleimplplugin)
diff --git a/src/quickcontrols/basic/Calendar.qml b/src/quickcontrols/basic/Calendar.qml
new file mode 100644
index 0000000000..66d03afc09
--- /dev/null
+++ b/src/quickcontrols/basic/Calendar.qml
@@ -0,0 +1,8 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+pragma Singleton
+
+import QtQuick.Templates as T
+
+T.Calendar {}
diff --git a/src/quickcontrols/basic/CalendarModel.qml b/src/quickcontrols/basic/CalendarModel.qml
new file mode 100644
index 0000000000..0f18f62aee
--- /dev/null
+++ b/src/quickcontrols/basic/CalendarModel.qml
@@ -0,0 +1,6 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick.Templates as T
+
+T.CalendarModel {}
diff --git a/src/quickcontrols/basic/CheckBox.qml b/src/quickcontrols/basic/CheckBox.qml
new file mode 100644
index 0000000000..3d71008b50
--- /dev/null
+++ b/src/quickcontrols/basic/CheckBox.qml
@@ -0,0 +1,59 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.CheckBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    // keep in sync with CheckDelegate.qml (shared CheckIndicator.qml was removed for performance reasons)
+    indicator: Rectangle {
+        implicitWidth: 28
+        implicitHeight: 28
+
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        color: control.down ? control.palette.light : control.palette.base
+        border.width: control.visualFocus ? 2 : 1
+        border.color: control.visualFocus ? control.palette.highlight : control.palette.mid
+
+        ColorImage {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            defaultColor: "#353637"
+            color: control.palette.text
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
+            visible: control.checkState === Qt.Checked
+        }
+
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 16
+            height: 3
+            color: control.palette.text
+            visible: control.checkState === Qt.PartiallyChecked
+        }
+    }
+
+    contentItem: CheckLabel {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+    }
+}
diff --git a/src/quickcontrols/basic/CheckDelegate.qml b/src/quickcontrols/basic/CheckDelegate.qml
new file mode 100644
index 0000000000..59e1543265
--- /dev/null
+++ b/src/quickcontrols/basic/CheckDelegate.qml
@@ -0,0 +1,76 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.CheckDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 12
+    spacing: 12
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.text
+
+    contentItem: IconLabel {
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.text
+    }
+
+    // keep in sync with CheckBox.qml (shared CheckIndicator.qml was removed for performance reasons)
+    indicator: Rectangle {
+        implicitWidth: 28
+        implicitHeight: 28
+
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        color: control.down ? control.palette.light : control.palette.base
+        border.width: control.visualFocus ? 2 : 1
+        border.color: control.visualFocus ? control.palette.highlight : control.palette.mid
+
+        ColorImage {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            defaultColor: "#353637"
+            color: control.palette.text
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
+            visible: control.checkState === Qt.Checked
+        }
+
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 16
+            height: 3
+            color: control.palette.text
+            visible: control.checkState === Qt.PartiallyChecked
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        visible: control.down || control.highlighted
+        color: control.down ? control.palette.midlight : control.palette.light
+    }
+}
diff --git a/src/quickcontrols/basic/ComboBox.qml b/src/quickcontrols/basic/ComboBox.qml
new file mode 100644
index 0000000000..8cd148e9fe
--- /dev/null
+++ b/src/quickcontrols/basic/ComboBox.qml
@@ -0,0 +1,106 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ComboBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+    rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+
+    delegate: ItemDelegate {
+        width: ListView.view.width
+        text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
+        palette.text: control.palette.text
+        palette.highlightedText: control.palette.highlightedText
+        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
+        highlighted: control.highlightedIndex === index
+        hoverEnabled: control.hoverEnabled
+    }
+
+    indicator: ColorImage {
+        x: control.mirrored ? control.padding : control.width - width - control.padding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        color: control.palette.dark
+        defaultColor: "#353637"
+        source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/double-arrow.png"
+        opacity: enabled ? 1 : 0.3
+    }
+
+    contentItem: T.TextField {
+        leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
+        rightPadding: control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
+        topPadding: 6 - control.padding
+        bottomPadding: 6 - control.padding
+
+        text: control.editable ? control.editText : control.displayText
+
+        enabled: control.editable
+        autoScroll: control.editable
+        readOnly: control.down
+        inputMethodHints: control.inputMethodHints
+        validator: control.validator
+        selectByMouse: control.selectTextByMouse
+
+        color: control.editable ? control.palette.text : control.palette.buttonText
+        selectionColor: control.palette.highlight
+        selectedTextColor: control.palette.highlightedText
+        verticalAlignment: Text.AlignVCenter
+
+        background: Rectangle {
+            visible: control.enabled && control.editable && !control.flat
+            border.width: parent && parent.activeFocus ? 2 : 1
+            border.color: parent && parent.activeFocus ? control.palette.highlight : control.palette.button
+            color: control.palette.base
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 140
+        implicitHeight: 40
+
+        color: control.down ? control.palette.mid : control.palette.button
+        border.color: control.palette.highlight
+        border.width: !control.editable && control.visualFocus ? 2 : 0
+        visible: !control.flat || control.down
+    }
+
+    popup: T.Popup {
+        y: control.height
+        width: control.width
+        height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
+        topMargin: 6
+        bottomMargin: 6
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
+            highlightMoveDuration: 0
+
+            Rectangle {
+                z: 10
+                width: parent.width
+                height: parent.height
+                color: "transparent"
+                border.color: control.palette.mid
+            }
+
+            T.ScrollIndicator.vertical: ScrollIndicator { }
+        }
+
+        background: Rectangle {
+            color: control.palette.window
+        }
+    }
+}
diff --git a/src/quickcontrols/basic/Container.qml b/src/quickcontrols/basic/Container.qml
new file mode 100644
index 0000000000..28e50279f0
--- /dev/null
+++ b/src/quickcontrols/basic/Container.qml
@@ -0,0 +1,14 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.Container {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+}
diff --git a/src/quickcontrols/basic/Control.qml b/src/quickcontrols/basic/Control.qml
new file mode 100644
index 0000000000..20b27136db
--- /dev/null
+++ b/src/quickcontrols/basic/Control.qml
@@ -0,0 +1,14 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.Control {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+}
diff --git a/src/quickcontrols/basic/DayOfWeekRow.qml b/src/quickcontrols/basic/DayOfWeekRow.qml
new file mode 100644
index 0000000000..0de64264ba
--- /dev/null
+++ b/src/quickcontrols/basic/DayOfWeekRow.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.AbstractDayOfWeekRow {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentItem.implicitHeight + topPadding + bottomPadding)
+
+    spacing: 6
+    topPadding: 6
+    bottomPadding: 6
+    font.bold: true
+
+    //! [delegate]
+    delegate: Text {
+        text: shortName
+        font: control.font
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        required property string shortName
+    }
+    //! [delegate]
+
+    //! [contentItem]
+    contentItem: Row {
+        spacing: control.spacing
+        Repeater {
+            model: control.source
+            delegate: control.delegate
+        }
+    }
+    //! [contentItem]
+}
diff --git a/src/quickcontrols/basic/DelayButton.qml b/src/quickcontrols/basic/DelayButton.qml
new file mode 100644
index 0000000000..1be4450c69
--- /dev/null
+++ b/src/quickcontrols/basic/DelayButton.qml
@@ -0,0 +1,71 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.DelayButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    horizontalPadding: padding + 2
+
+    transition: Transition {
+        NumberAnimation {
+            duration: control.delay * (control.pressed ? 1.0 - control.progress : 0.3 * control.progress)
+        }
+    }
+
+    contentItem: ItemGroup {
+        ClippedText {
+            clip: control.progress > 0
+            clipX: -control.leftPadding + control.progress * control.width
+            clipWidth: (1.0 - control.progress) * control.width
+            visible: control.progress < 1
+
+            text: control.text
+            font: control.font
+            opacity: enabled ? 1 : 0.3
+            color: control.palette.buttonText
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
+
+        ClippedText {
+            clip: control.progress > 0
+            clipX: -control.leftPadding
+            clipWidth: control.progress * control.width
+            visible: control.progress > 0
+
+            text: control.text
+            font: control.font
+            opacity: enabled ? 1 : 0.3
+            color: control.palette.brightText
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        color: Color.blend(control.palette.button, control.palette.mid, control.down ? 0.5 : 0.0)
+        border.color: control.palette.highlight
+        border.width: control.visualFocus ? 2 : 0
+
+        PaddedRectangle {
+            padding: control.visualFocus ? 2 : 0
+            width: control.progress * parent.width
+            height: parent.height
+            color: Color.blend(control.palette.dark, control.palette.mid, control.down ? 0.5 : 0.0)
+        }
+    }
+}
diff --git a/src/quickcontrols/basic/Dial.qml b/src/quickcontrols/basic/Dial.qml
new file mode 100644
index 0000000000..3692ae22de
--- /dev/null
+++ b/src/quickcontrols/basic/Dial.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Controls.Basic.impl
+import QtQuick.Templates as T
+
+T.Dial {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    background: DialImpl {
+        implicitWidth: 184
+        implicitHeight: 184
+        color: control.visualFocus ? control.palette.highlight : control.palette.dark
+        progress: control.position
+        opacity: control.enabled ? 1 : 0.3
+    }
+
+    handle: ColorImage {
+        x: control.background.x + control.background.width / 2 - width / 2
+        y: control.background.y + control.background.height / 2 - height / 2
+        width: 14
+        height: 10
+        defaultColor: "#353637"
+        color: control.visualFocus ? control.palette.highlight : control.palette.dark
+        source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/dial-indicator.png"
+        antialiasing: true
+        opacity: control.enabled ? 1 : 0.3
+        transform: [
+            Translate {
+                y: -Math.min(control.background.width, control.background.height) * 0.4 + control.handle.height / 2
+            },
+            Rotation {
+                angle: control.angle
+                origin.x: control.handle.width / 2
+                origin.y: control.handle.height / 2
+            }
+        ]
+    }
+}
diff --git a/src/quickcontrols/basic/Dialog.qml b/src/quickcontrols/basic/Dialog.qml
new file mode 100644
index 0000000000..c4c59b27fb
--- /dev/null
+++ b/src/quickcontrols/basic/Dialog.qml
@@ -0,0 +1,52 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.Dialog {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitHeaderWidth,
+                            implicitFooterWidth)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding
+                             + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+                             + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
+
+    padding: 12
+
+    background: Rectangle {
+        color: control.palette.window
+        border.color: control.palette.dark
+    }
+
+    header: Label {
+        text: control.title
+        visible: control.title
+        elide: Label.ElideRight
+        font.bold: true
+        padding: 12
+        background: Rectangle {
+            x: 1; y: 1
+            width: parent.width - 2
+            height: parent.height - 1
+            color: control.palette.window
+        }
+    }
+
+    footer: DialogButtonBox {
+        visible: count > 0
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: Color.transparent(control.palette.shadow, 0.5)
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Color.transparent(control.palette.shadow, 0.12)
+    }
+}
diff --git a/src/quickcontrols/basic/DialogButtonBox.qml b/src/quickcontrols/basic/DialogButtonBox.qml
new file mode 100644
index 0000000000..89fca1e41d
--- /dev/null
+++ b/src/quickcontrols/basic/DialogButtonBox.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.DialogButtonBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            (control.count === 1 ? implicitContentWidth * 2 : implicitContentWidth) + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+    contentWidth: contentItem.contentWidth
+
+    spacing: 1
+    padding: 12
+    alignment: count === 1 ? Qt.AlignRight : undefined
+
+    delegate: Button {
+        width: control.count === 1 ? control.availableWidth / 2 : undefined
+    }
+
+    contentItem: ListView {
+        implicitWidth: contentWidth
+        model: control.contentModel
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        snapMode: ListView.SnapToItem
+    }
+
+    background: Rectangle {
+        implicitHeight: 40
+        x: 1; y: 1
+        width: parent.width - 2
+        height: parent.height - 2
+        color: control.palette.window
+    }
+}
diff --git a/src/quickcontrols/basic/Drawer.qml b/src/quickcontrols/basic/Drawer.qml
new file mode 100644
index 0000000000..c69d319e92
--- /dev/null
+++ b/src/quickcontrols/basic/Drawer.qml
@@ -0,0 +1,45 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.Drawer {
+    id: control
+
+    parent: T.Overlay.overlay
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: control.edge === Qt.BottomEdge
+    leftPadding: control.edge === Qt.RightEdge
+    rightPadding: control.edge === Qt.LeftEdge
+    bottomPadding: control.edge === Qt.TopEdge
+
+    enter: Transition { SmoothedAnimation { velocity: 5 } }
+    exit: Transition { SmoothedAnimation { velocity: 5 } }
+
+    background: Rectangle {
+        color: control.palette.window
+        Rectangle {
+            readonly property bool horizontal: control.edge === Qt.LeftEdge || control.edge === Qt.RightEdge
+            width: horizontal ? 1 : parent.width
+            height: horizontal ? parent.height : 1
+            color: control.palette.dark
+            x: control.edge === Qt.LeftEdge ? parent.width - 1 : 0
+            y: control.edge === Qt.TopEdge ? parent.height - 1 : 0
+        }
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: Color.transparent(control.palette.shadow, 0.5)
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Color.transparent(control.palette.shadow, 0.12)
+    }
+}
diff --git a/src/quickcontrols/basic/Frame.qml b/src/quickcontrols/basic/Frame.qml
new file mode 100644
index 0000000000..d1ecc4b9df
--- /dev/null
+++ b/src/quickcontrols/basic/Frame.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.Frame {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 12
+
+    background: Rectangle {
+        color: "transparent"
+        border.color: control.palette.mid
+    }
+}
diff --git a/src/quickcontrols/basic/GroupBox.qml b/src/quickcontrols/basic/GroupBox.qml
new file mode 100644
index 0000000000..510acf1586
--- /dev/null
+++ b/src/quickcontrols/basic/GroupBox.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.GroupBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitLabelWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 6
+    padding: 12
+    topPadding: padding + (implicitLabelWidth > 0 ? implicitLabelHeight + spacing : 0)
+
+    label: Text {
+        x: control.leftPadding
+        width: control.availableWidth
+
+        text: control.title
+        font: control.font
+        color: control.palette.windowText
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: Rectangle {
+        y: control.topPadding - control.bottomPadding
+        width: parent.width
+        height: parent.height - control.topPadding + control.bottomPadding
+
+        color: "transparent"
+        border.color: control.palette.mid
+    }
+}
diff --git a/src/quickcontrols/basic/HorizontalHeaderView.qml b/src/quickcontrols/basic/HorizontalHeaderView.qml
new file mode 100644
index 0000000000..140c9f3ae8
--- /dev/null
+++ b/src/quickcontrols/basic/HorizontalHeaderView.qml
@@ -0,0 +1,34 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.HorizontalHeaderView {
+    id: control
+
+    implicitWidth: syncView ? syncView.width : 0
+    implicitHeight: contentHeight
+
+    delegate: Rectangle {
+        // Qt6: add cellPadding (and font etc) as public API in headerview
+        readonly property real cellPadding: 8
+
+        implicitWidth: text.implicitWidth + (cellPadding * 2)
+        implicitHeight: Math.max(control.height, text.implicitHeight + (cellPadding * 2))
+        color: "#f6f6f6"
+        border.color: "#e4e4e4"
+
+        Text {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            height: parent.height
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: "#ff26282a"
+        }
+    }
+}
diff --git a/src/quickcontrols/basic/ItemDelegate.qml b/src/quickcontrols/basic/ItemDelegate.qml
new file mode 100644
index 0000000000..7bef49d6d6
--- /dev/null
+++ b/src/quickcontrols/basic/ItemDelegate.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ItemDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 12
+    spacing: 8
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.text
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.highlighted ? control.palette.highlightedText : control.palette.text
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        visible: control.down || control.highlighted || control.visualFocus
+        color: Color.blend(control.down ? control.palette.midlight : control.palette.light,
+                                          control.palette.highlight, control.visualFocus ? 0.15 : 0.0)
+    }
+}
diff --git a/src/quickcontrols/basic/Label.qml b/src/quickcontrols/basic/Label.qml
new file mode 100644
index 0000000000..e3274142c2
--- /dev/null
+++ b/src/quickcontrols/basic/Label.qml
@@ -0,0 +1,13 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.Label {
+    id: control
+
+    color: control.palette.windowText
+    linkColor: control.palette.link
+}
diff --git a/src/quickcontrols/basic/Menu.qml b/src/quickcontrols/basic/Menu.qml
new file mode 100644
index 0000000000..fd21f5de5b
--- /dev/null
+++ b/src/quickcontrols/basic/Menu.qml
@@ -0,0 +1,47 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.Menu {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    margins: 0
+    overlap: 1
+
+    delegate: MenuItem { }
+
+    contentItem: ListView {
+        implicitHeight: contentHeight
+        model: control.contentModel
+        interactive: Window.window
+                        ? contentHeight + control.topPadding + control.bottomPadding > Window.window.height
+                        : false
+        clip: true
+        currentIndex: control.currentIndex
+
+        ScrollIndicator.vertical: ScrollIndicator {}
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 40
+        color: control.palette.window
+        border.color: control.palette.dark
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: Color.transparent(control.palette.shadow, 0.5)
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Color.transparent(control.palette.shadow, 0.12)
+    }
+}
diff --git a/src/quickcontrols/basic/MenuBar.qml b/src/quickcontrols/basic/MenuBar.qml
new file mode 100644
index 0000000000..c0d4bda60d
--- /dev/null
+++ b/src/quickcontrols/basic/MenuBar.qml
@@ -0,0 +1,29 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.MenuBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    delegate: MenuBarItem { }
+
+    contentItem: Row {
+        spacing: control.spacing
+        Repeater {
+            model: control.contentModel
+        }
+    }
+
+    background: Rectangle {
+        implicitHeight: 40
+        color: control.palette.button
+    }
+}
diff --git a/src/quickcontrols/basic/MenuBarItem.qml b/src/quickcontrols/basic/MenuBarItem.qml
new file mode 100644
index 0000000000..9362d26c15
--- /dev/null
+++ b/src/quickcontrols/basic/MenuBarItem.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.MenuBarItem {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 6
+    padding: 6
+    leftPadding: 12
+    rightPadding: 16
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.buttonText
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.buttonText
+    }
+
+    background: Rectangle {
+        implicitWidth: 40
+        implicitHeight: 40
+        color: control.down || control.highlighted ? control.palette.mid : "transparent"
+    }
+}
diff --git a/src/quickcontrols/basic/MenuItem.qml b/src/quickcontrols/basic/MenuItem.qml
new file mode 100644
index 0000000000..ad50eacad9
--- /dev/null
+++ b/src/quickcontrols/basic/MenuItem.qml
@@ -0,0 +1,71 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.MenuItem {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.windowText
+
+    contentItem: IconLabel {
+        readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
+        readonly property real indicatorPadding: control.checkable && control.indicator ? control.indicator.width + control.spacing : 0
+        leftPadding: !control.mirrored ? indicatorPadding : arrowPadding
+        rightPadding: control.mirrored ? indicatorPadding : arrowPadding
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+    }
+
+    indicator: ColorImage {
+        x: control.mirrored ? control.width - width - control.rightPadding : control.leftPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        visible: control.checked
+        source: control.checkable ? "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png" : ""
+        color: control.palette.windowText
+        defaultColor: "#353637"
+    }
+
+    arrow: ColorImage {
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        visible: control.subMenu
+        mirror: control.mirrored
+        source: control.subMenu ? "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png" : ""
+        color: control.palette.windowText
+        defaultColor: "#353637"
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 40
+        x: 1
+        y: 1
+        width: control.width - 2
+        height: control.height - 2
+        color: control.down ? control.palette.midlight : control.highlighted ? control.palette.light : "transparent"
+    }
+}
diff --git a/src/quickcontrols/basic/MenuSeparator.qml b/src/quickcontrols/basic/MenuSeparator.qml
new file mode 100644
index 0000000000..ff7e79e784
--- /dev/null
+++ b/src/quickcontrols/basic/MenuSeparator.qml
@@ -0,0 +1,24 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.MenuSeparator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 2
+    verticalPadding: padding + 4
+
+    contentItem: Rectangle {
+        implicitWidth: 188
+        implicitHeight: 1
+        color: control.palette.mid
+    }
+}
diff --git a/src/quickcontrols/basic/MonthGrid.qml b/src/quickcontrols/basic/MonthGrid.qml
new file mode 100644
index 0000000000..b8d2379bcf
--- /dev/null
+++ b/src/quickcontrols/basic/MonthGrid.qml
@@ -0,0 +1,42 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.AbstractMonthGrid {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentItem.implicitHeight + topPadding + bottomPadding)
+
+    spacing: 6
+
+    //! [delegate]
+    delegate: Text {
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        opacity: model.month === control.month ? 1 : 0
+        text: model.day
+        font: control.font
+
+        required property var model
+    }
+    //! [delegate]
+
+    //! [contentItem]
+    contentItem: Grid {
+        rows: 6
+        columns: 7
+        rowSpacing: control.spacing
+        columnSpacing: control.spacing
+
+        Repeater {
+            model: control.source
+            delegate: control.delegate
+        }
+    }
+    //! [contentItem]
+}
diff --git a/src/quickcontrols/basic/Page.qml b/src/quickcontrols/basic/Page.qml
new file mode 100644
index 0000000000..b6d503e65d
--- /dev/null
+++ b/src/quickcontrols/basic/Page.qml
@@ -0,0 +1,23 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.Page {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitHeaderWidth,
+                            implicitFooterWidth)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding
+                             + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+                             + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
+
+    background: Rectangle {
+        color: control.palette.window
+    }
+}
diff --git a/src/quickcontrols/basic/PageIndicator.qml b/src/quickcontrols/basic/PageIndicator.qml
new file mode 100644
index 0000000000..e858695d0c
--- /dev/null
+++ b/src/quickcontrols/basic/PageIndicator.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.PageIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    delegate: Rectangle {
+        implicitWidth: 8
+        implicitHeight: 8
+
+        radius: width / 2
+        color: control.palette.dark
+
+        opacity: index === control.currentIndex ? 0.95 : pressed ? 0.7 : 0.45
+
+        required property int index
+
+        Behavior on opacity { OpacityAnimator { duration: 100 } }
+    }
+
+    contentItem: Row {
+        spacing: control.spacing
+
+        Repeater {
+            model: control.count
+            delegate: control.delegate
+        }
+    }
+}
diff --git a/src/quickcontrols/basic/Pane.qml b/src/quickcontrols/basic/Pane.qml
new file mode 100644
index 0000000000..46e15e2966
--- /dev/null
+++ b/src/quickcontrols/basic/Pane.qml
@@ -0,0 +1,21 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.Pane {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 12
+
+    background: Rectangle {
+        color: control.palette.window
+    }
+}
diff --git a/src/quickcontrols/basic/Popup.qml b/src/quickcontrols/basic/Popup.qml
new file mode 100644
index 0000000000..f4b787c311
--- /dev/null
+++ b/src/quickcontrols/basic/Popup.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.Popup {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 12
+
+    background: Rectangle {
+        color: control.palette.window
+        border.color: control.palette.dark
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: Color.transparent(control.palette.shadow, 0.5)
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Color.transparent(control.palette.shadow, 0.12)
+    }
+}
diff --git a/src/quickcontrols/basic/ProgressBar.qml b/src/quickcontrols/basic/ProgressBar.qml
new file mode 100644
index 0000000000..09ab1fb2c1
--- /dev/null
+++ b/src/quickcontrols/basic/ProgressBar.qml
@@ -0,0 +1,33 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Basic.impl
+
+T.ProgressBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    contentItem: ProgressBarImpl {
+        implicitHeight: 6
+        implicitWidth: 116
+        scale: control.mirrored ? -1 : 1
+        progress: control.position
+        indeterminate: control.visible && control.indeterminate
+        color: control.palette.dark
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 6
+        y: (control.height - height) / 2
+        height: 6
+
+        color: control.palette.midlight
+    }
+}
diff --git a/src/quickcontrols/basic/RadioButton.qml b/src/quickcontrols/basic/RadioButton.qml
new file mode 100644
index 0000000000..7b3f4063e1
--- /dev/null
+++ b/src/quickcontrols/basic/RadioButton.qml
@@ -0,0 +1,52 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.RadioButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    // keep in sync with RadioDelegate.qml (shared RadioIndicator.qml was removed for performance reasons)
+    indicator: Rectangle {
+        implicitWidth: 28
+        implicitHeight: 28
+
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        radius: width / 2
+        color: control.down ? control.palette.light : control.palette.base
+        border.width: control.visualFocus ? 2 : 1
+        border.color: control.visualFocus ? control.palette.highlight : control.palette.mid
+
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 20
+            height: 20
+            radius: width / 2
+            color: control.palette.text
+            visible: control.checked
+        }
+    }
+
+    contentItem: CheckLabel {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+    }
+}
diff --git a/src/quickcontrols/basic/RadioDelegate.qml b/src/quickcontrols/basic/RadioDelegate.qml
new file mode 100644
index 0000000000..87e6e66b29
--- /dev/null
+++ b/src/quickcontrols/basic/RadioDelegate.qml
@@ -0,0 +1,69 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.RadioDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 12
+    spacing: 12
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.text
+
+    contentItem: IconLabel {
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.text
+    }
+
+    // keep in sync with RadioButton.qml (shared RadioIndicator.qml was removed for performance reasons)
+    indicator: Rectangle {
+        implicitWidth: 28
+        implicitHeight: 28
+
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        radius: width / 2
+        color: control.down ? control.palette.light : control.palette.base
+        border.width: control.visualFocus ? 2 : 1
+        border.color: control.visualFocus ? control.palette.highlight : control.palette.mid
+
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 20
+            height: 20
+            radius: width / 2
+            color: control.palette.text
+            visible: control.checked
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        visible: control.down || control.highlighted
+        color: control.down ? control.palette.midlight : control.palette.light
+    }
+}
diff --git a/src/quickcontrols/basic/RangeSlider.qml b/src/quickcontrols/basic/RangeSlider.qml
new file mode 100644
index 0000000000..155807da8d
--- /dev/null
+++ b/src/quickcontrols/basic/RangeSlider.qml
@@ -0,0 +1,62 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.RangeSlider {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            first.implicitHandleWidth + leftPadding + rightPadding,
+                            second.implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             first.implicitHandleHeight + topPadding + bottomPadding,
+                             second.implicitHandleHeight + topPadding + bottomPadding)
+
+    padding: 6
+
+    first.handle: Rectangle {
+        x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
+        implicitWidth: 28
+        implicitHeight: 28
+        radius: width / 2
+        border.width: activeFocus ? 2 : 1
+        border.color: activeFocus ? control.palette.highlight : control.enabled ? control.palette.mid : control.palette.midlight
+        color: control.first.pressed ? control.palette.light : control.palette.window
+    }
+
+    second.handle: Rectangle {
+        x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
+        implicitWidth: 28
+        implicitHeight: 28
+        radius: width / 2
+        border.width: activeFocus ? 2 : 1
+        border.color: activeFocus ? control.palette.highlight : control.enabled ? control.palette.mid : control.palette.midlight
+        color: control.second.pressed ? control.palette.light : control.palette.window
+    }
+
+    background: Rectangle {
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: control.horizontal ? 200 : 6
+        implicitHeight: control.horizontal ? 6 : 200
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
+        radius: 3
+        color: control.palette.midlight
+        scale: control.horizontal && control.mirrored ? -1 : 1
+
+        Rectangle {
+            x: control.horizontal ? control.first.position * parent.width + 3 : 0
+            y: control.horizontal ? 0 : control.second.visualPosition * parent.height + 3
+            width: control.horizontal ? control.second.position * parent.width - control.first.position * parent.width - 6 : 6
+            height: control.horizontal ? 6 : control.second.position * parent.height - control.first.position * parent.height - 6
+
+            color: control.palette.dark
+        }
+    }
+}
diff --git a/src/quickcontrols/basic/RoundButton.qml b/src/quickcontrols/basic/RoundButton.qml
new file mode 100644
index 0000000000..7e7bd039b0
--- /dev/null
+++ b/src/quickcontrols/basic/RoundButton.qml
@@ -0,0 +1,47 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.RoundButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.checked || control.highlighted ? control.palette.brightText :
+                control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.checked || control.highlighted ? control.palette.brightText :
+               control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText
+    }
+
+    background: Rectangle {
+        implicitWidth: 40
+        implicitHeight: 40
+        radius: control.radius
+        opacity: enabled ? 1 : 0.3
+        visible: !control.flat || control.down || control.checked || control.highlighted
+        color: Color.blend(control.checked || control.highlighted ? control.palette.dark : control.palette.button,
+                                                                    control.palette.mid, control.down ? 0.5 : 0.0)
+        border.color: control.palette.highlight
+        border.width: control.visualFocus ? 2 : 0
+    }
+}
diff --git a/src/quickcontrols/basic/ScrollBar.qml b/src/quickcontrols/basic/ScrollBar.qml
new file mode 100644
index 0000000000..8927a4f13f
--- /dev/null
+++ b/src/quickcontrols/basic/ScrollBar.qml
@@ -0,0 +1,42 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ScrollBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 2
+    visible: control.policy !== T.ScrollBar.AlwaysOff
+    minimumSize: orientation === Qt.Horizontal ? height / width : width / height
+
+    contentItem: Rectangle {
+        implicitWidth: control.interactive ? 6 : 2
+        implicitHeight: control.interactive ? 6 : 2
+
+        radius: width / 2
+        color: control.pressed ? control.palette.dark : control.palette.mid
+        opacity: 0.0
+
+        states: State {
+            name: "active"
+            when: control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0)
+            PropertyChanges { control.contentItem.opacity: 0.75 }
+        }
+
+        transitions: Transition {
+            from: "active"
+            SequentialAnimation {
+                PauseAnimation { duration: 450 }
+                NumberAnimation { target: control.contentItem; duration: 200; property: "opacity"; to: 0.0 }
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/basic/ScrollIndicator.qml b/src/quickcontrols/basic/ScrollIndicator.qml
new file mode 100644
index 0000000000..8b1ca93c26
--- /dev/null
+++ b/src/quickcontrols/basic/ScrollIndicator.qml
@@ -0,0 +1,42 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ScrollIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 2
+
+    contentItem: Rectangle {
+        implicitWidth: 2
+        implicitHeight: 2
+
+        color: control.palette.mid
+        visible: control.size < 1.0
+        opacity: 0.0
+
+        states: State {
+            name: "active"
+            when: control.active
+            PropertyChanges { control.contentItem.opacity: 0.75 }
+        }
+
+        transitions: [
+            Transition {
+                from: "active"
+                SequentialAnimation {
+                    PauseAnimation { duration: 450 }
+                    NumberAnimation { target: control.contentItem; duration: 200; property: "opacity"; to: 0.0 }
+                }
+            }
+        ]
+    }
+}
diff --git a/src/quickcontrols/basic/ScrollView.qml b/src/quickcontrols/basic/ScrollView.qml
new file mode 100644
index 0000000000..aab91a3bcc
--- /dev/null
+++ b/src/quickcontrols/basic/ScrollView.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ScrollView {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    ScrollBar.vertical: ScrollBar {
+        parent: control
+        x: control.mirrored ? 0 : control.width - width
+        y: control.topPadding
+        height: control.availableHeight
+        active: control.ScrollBar.horizontal.active
+    }
+
+    ScrollBar.horizontal: ScrollBar {
+        parent: control
+        x: control.leftPadding
+        y: control.height - height
+        width: control.availableWidth
+        active: control.ScrollBar.vertical.active
+    }
+}
diff --git a/src/quickcontrols/basic/SelectionRectangle.qml b/src/quickcontrols/basic/SelectionRectangle.qml
new file mode 100644
index 0000000000..8e16d10418
--- /dev/null
+++ b/src/quickcontrols/basic/SelectionRectangle.qml
@@ -0,0 +1,28 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Shapes
+import QtQuick.Templates as T
+
+T.SelectionRectangle {
+    id: control
+
+    topLeftHandle: Handle {}
+    bottomRightHandle: Handle {}
+
+    component Handle : Rectangle {
+        id: handle
+        width: 28
+        height: width
+        radius: width / 2
+        color: SelectionRectangle.dragging ? control.palette.light : control.palette.window
+        border.width: 1
+        border.color: control.enabled ? control.palette.mid : control.palette.midlight
+        visible: SelectionRectangle.control.active
+
+        property Item control: SelectionRectangle.control
+    }
+
+}
diff --git a/src/quickcontrols/basic/Slider.qml b/src/quickcontrols/basic/Slider.qml
new file mode 100644
index 0000000000..7ca8e02bf1
--- /dev/null
+++ b/src/quickcontrols/basic/Slider.qml
@@ -0,0 +1,49 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.Slider {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitHandleHeight + topPadding + bottomPadding)
+
+    padding: 6
+
+    handle: Rectangle {
+        x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
+        implicitWidth: 28
+        implicitHeight: 28
+        radius: width / 2
+        color: control.pressed ? control.palette.light : control.palette.window
+        border.width: control.visualFocus ? 2 : 1
+        border.color: control.visualFocus ? control.palette.highlight : control.enabled ? control.palette.mid : control.palette.midlight
+    }
+
+    background: Rectangle {
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: control.horizontal ? 200 : 6
+        implicitHeight: control.horizontal ? 6 : 200
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
+        radius: 3
+        color: control.palette.midlight
+        scale: control.horizontal && control.mirrored ? -1 : 1
+
+        Rectangle {
+            y: control.horizontal ? 0 : control.visualPosition * parent.height
+            width: control.horizontal ? control.position * parent.width : 6
+            height: control.horizontal ? 6 : control.position * parent.height
+
+            radius: 3
+            color: control.palette.dark
+        }
+    }
+}
diff --git a/src/quickcontrols/basic/SpinBox.qml b/src/quickcontrols/basic/SpinBox.qml
new file mode 100644
index 0000000000..758472c5cb
--- /dev/null
+++ b/src/quickcontrols/basic/SpinBox.qml
@@ -0,0 +1,101 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.SpinBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentItem.implicitWidth + 2 * padding +
+                            up.implicitIndicatorWidth +
+                            down.implicitIndicatorWidth)
+    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
+                             implicitBackgroundHeight,
+                             up.implicitIndicatorHeight,
+                             down.implicitIndicatorHeight)
+
+    padding: 6
+    leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
+    rightPadding: padding + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
+
+    validator: IntValidator {
+        locale: control.locale.name
+        bottom: Math.min(control.from, control.to)
+        top: Math.max(control.from, control.to)
+    }
+
+    contentItem: TextInput {
+        z: 2
+        text: control.displayText
+
+        font: control.font
+        color: control.palette.text
+        selectionColor: control.palette.highlight
+        selectedTextColor: control.palette.highlightedText
+        horizontalAlignment: Qt.AlignHCenter
+        verticalAlignment: Qt.AlignVCenter
+
+        readOnly: !control.editable
+        validator: control.validator
+        inputMethodHints: control.inputMethodHints
+
+        Rectangle {
+            x: -6 - (control.down.indicator ? 1 : 0)
+            y: -6
+            width: control.width - (control.up.indicator ? control.up.indicator.width - 1 : 0) - (control.down.indicator ? control.down.indicator.width - 1 : 0)
+            height: control.height
+            visible: control.activeFocus
+            color: "transparent"
+            border.color: control.palette.highlight
+            border.width: 2
+        }
+    }
+
+    up.indicator: Rectangle {
+        x: control.mirrored ? 0 : control.width - width
+        height: control.height
+        implicitWidth: 40
+        implicitHeight: 40
+        color: control.up.pressed ? control.palette.mid : control.palette.button
+
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: parent.width / 3
+            height: 2
+            color: enabled ? control.palette.buttonText : control.palette.mid
+        }
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 2
+            height: parent.width / 3
+            color: enabled ? control.palette.buttonText : control.palette.mid
+        }
+    }
+
+    down.indicator: Rectangle {
+        x: control.mirrored ? parent.width - width : 0
+        height: control.height
+        implicitWidth: 40
+        implicitHeight: 40
+        color: control.down.pressed ? control.palette.mid : control.palette.button
+
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: parent.width / 3
+            height: 2
+            color: enabled ? control.palette.buttonText : control.palette.mid
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 140
+        color: enabled ? control.palette.base : control.palette.button
+        border.color: control.palette.button
+    }
+}
diff --git a/src/quickcontrols/basic/SplitView.qml b/src/quickcontrols/basic/SplitView.qml
new file mode 100644
index 0000000000..6d673b55b7
--- /dev/null
+++ b/src/quickcontrols/basic/SplitView.qml
@@ -0,0 +1,21 @@
+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.SplitView {
+    id: control
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    handle: Rectangle {
+        implicitWidth: control.orientation === Qt.Horizontal ? 6 : control.width
+        implicitHeight: control.orientation === Qt.Horizontal ? control.height : 6
+        color: T.SplitHandle.pressed ? control.palette.mid
+            : (T.SplitHandle.hovered ? control.palette.midlight : control.palette.button)
+    }
+}
diff --git a/src/quickcontrols/basic/StackView.qml b/src/quickcontrols/basic/StackView.qml
new file mode 100644
index 0000000000..689d7ff9ca
--- /dev/null
+++ b/src/quickcontrols/basic/StackView.qml
@@ -0,0 +1,33 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.StackView {
+    id: control
+
+    popEnter: Transition {
+        XAnimator { from: (control.mirrored ? -1 : 1) * -control.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
+    }
+
+    popExit: Transition {
+        XAnimator { from: 0; to: (control.mirrored ? -1 : 1) * control.width; duration: 400; easing.type: Easing.OutCubic }
+    }
+
+    pushEnter: Transition {
+        XAnimator { from: (control.mirrored ? -1 : 1) * control.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
+    }
+
+    pushExit: Transition {
+        XAnimator { from: 0; to: (control.mirrored ? -1 : 1) * -control.width; duration: 400; easing.type: Easing.OutCubic }
+    }
+
+    replaceEnter: Transition {
+        XAnimator { from: (control.mirrored ? -1 : 1) * control.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
+    }
+
+    replaceExit: Transition {
+        XAnimator { from: 0; to: (control.mirrored ? -1 : 1) * -control.width; duration: 400; easing.type: Easing.OutCubic }
+    }
+}
diff --git a/src/quickcontrols/basic/SwipeDelegate.qml b/src/quickcontrols/basic/SwipeDelegate.qml
new file mode 100644
index 0000000000..552f34dc01
--- /dev/null
+++ b/src/quickcontrols/basic/SwipeDelegate.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.SwipeDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 12
+    spacing: 12
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.text
+
+    swipe.transition: Transition { SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic } }
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.text
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        color: Color.blend(control.down ? control.palette.midlight : control.palette.light,
+                                          control.palette.highlight, control.visualFocus ? 0.15 : 0.0)
+    }
+}
diff --git a/src/quickcontrols/basic/SwipeView.qml b/src/quickcontrols/basic/SwipeView.qml
new file mode 100644
index 0000000000..b0068fd301
--- /dev/null
+++ b/src/quickcontrols/basic/SwipeView.qml
@@ -0,0 +1,32 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.SwipeView {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    contentItem: ListView {
+        model: control.contentModel
+        interactive: control.interactive
+        currentIndex: control.currentIndex
+        focus: control.focus
+
+        spacing: control.spacing
+        orientation: control.orientation
+        snapMode: ListView.SnapOneItem
+        boundsBehavior: Flickable.StopAtBounds
+
+        highlightRangeMode: ListView.StrictlyEnforceRange
+        preferredHighlightBegin: 0
+        preferredHighlightEnd: 0
+        highlightMoveDuration: 250
+        maximumFlickVelocity: 4 * (control.orientation === Qt.Horizontal ? width : height)
+    }
+}
diff --git a/src/quickcontrols/basic/Switch.qml b/src/quickcontrols/basic/Switch.qml
new file mode 100644
index 0000000000..d299ea3748
--- /dev/null
+++ b/src/quickcontrols/basic/Switch.qml
@@ -0,0 +1,58 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.Switch {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    indicator: PaddedRectangle {
+        implicitWidth: 56
+        implicitHeight: 28
+
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        radius: 8
+        leftPadding: 0
+        rightPadding: 0
+        padding: (height - 16) / 2
+        color: control.checked ? control.palette.dark : control.palette.midlight
+
+        Rectangle {
+            x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2)))
+            y: (parent.height - height) / 2
+            width: 28
+            height: 28
+            radius: 16
+            color: control.down ? control.palette.light : control.palette.window
+            border.width: control.visualFocus ? 2 : 1
+            border.color: control.visualFocus ? control.palette.highlight : control.enabled ? control.palette.mid : control.palette.midlight
+
+            Behavior on x {
+                enabled: !control.down
+                SmoothedAnimation { velocity: 200 }
+            }
+        }
+    }
+
+    contentItem: CheckLabel {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+    }
+}
diff --git a/src/quickcontrols/basic/SwitchDelegate.qml b/src/quickcontrols/basic/SwitchDelegate.qml
new file mode 100644
index 0000000000..98392557ad
--- /dev/null
+++ b/src/quickcontrols/basic/SwitchDelegate.qml
@@ -0,0 +1,75 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.SwitchDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 12
+    spacing: 12
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.text
+
+    indicator: PaddedRectangle {
+        implicitWidth: 56
+        implicitHeight: 28
+
+        x: control.text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        radius: 8
+        leftPadding: 0
+        rightPadding: 0
+        padding: (height - 16) / 2
+        color: control.checked ? control.palette.dark : control.palette.midlight
+
+        Rectangle {
+            x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2)))
+            y: (parent.height - height) / 2
+            width: 28
+            height: 28
+            radius: 16
+            color: control.down ? control.palette.light : control.palette.window
+            border.width: control.visualFocus ? 2 : 1
+            border.color: control.visualFocus ? control.palette.highlight : control.enabled ? control.palette.mid : control.palette.midlight
+
+            Behavior on x {
+                enabled: !control.down
+                SmoothedAnimation { velocity: 200 }
+            }
+        }
+    }
+
+    contentItem: IconLabel {
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.text
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        visible: control.down || control.highlighted
+        color: control.down ? control.palette.midlight : control.palette.light
+    }
+}
diff --git a/src/quickcontrols/basic/TabBar.qml b/src/quickcontrols/basic/TabBar.qml
new file mode 100644
index 0000000000..f8bdb91460
--- /dev/null
+++ b/src/quickcontrols/basic/TabBar.qml
@@ -0,0 +1,36 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.TabBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 1
+
+    contentItem: ListView {
+        model: control.contentModel
+        currentIndex: control.currentIndex
+
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+        snapMode: ListView.SnapToItem
+
+        highlightMoveDuration: 0
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: 40
+        preferredHighlightEnd: width - 40
+    }
+
+    background: Rectangle {
+        color: control.palette.window
+    }
+}
diff --git a/src/quickcontrols/basic/TabButton.qml b/src/quickcontrols/basic/TabButton.qml
new file mode 100644
index 0000000000..071048dce5
--- /dev/null
+++ b/src/quickcontrols/basic/TabButton.qml
@@ -0,0 +1,39 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.TabButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: checked ? control.palette.windowText : control.palette.brightText
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.checked ? control.palette.windowText : control.palette.brightText
+    }
+
+    background: Rectangle {
+        implicitHeight: 40
+        color: Color.blend(control.checked ? control.palette.window : control.palette.dark,
+                                             control.palette.mid, control.down ? 0.5 : 0.0)
+    }
+}
diff --git a/src/quickcontrols/basic/TextArea.qml b/src/quickcontrols/basic/TextArea.qml
new file mode 100644
index 0000000000..0dc7c4558e
--- /dev/null
+++ b/src/quickcontrols/basic/TextArea.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.TextArea {
+    id: control
+
+    implicitWidth: Math.max(contentWidth + leftPadding + rightPadding,
+                            implicitBackgroundWidth + leftInset + rightInset,
+                            placeholder.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
+                             implicitBackgroundHeight + topInset + bottomInset,
+                             placeholder.implicitHeight + topPadding + bottomPadding)
+
+    padding: 6
+    leftPadding: padding + 4
+
+    color: control.palette.text
+    placeholderTextColor: control.palette.placeholderText
+    selectionColor: control.palette.highlight
+    selectedTextColor: control.palette.highlightedText
+
+    PlaceholderText {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
+}
diff --git a/src/quickcontrols/basic/TextField.qml b/src/quickcontrols/basic/TextField.qml
new file mode 100644
index 0000000000..cf542a6886
--- /dev/null
+++ b/src/quickcontrols/basic/TextField.qml
@@ -0,0 +1,49 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.TextField {
+    id: control
+
+    implicitWidth: implicitBackgroundWidth + leftInset + rightInset
+                   || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding,
+                             placeholder.implicitHeight + topPadding + bottomPadding)
+
+    padding: 6
+    leftPadding: padding + 4
+
+    color: control.palette.text
+    selectionColor: control.palette.highlight
+    selectedTextColor: control.palette.highlightedText
+    placeholderTextColor: control.palette.placeholderText
+    verticalAlignment: TextInput.AlignVCenter
+
+    PlaceholderText {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 40
+        border.width: control.activeFocus ? 2 : 1
+        color: control.palette.base
+        border.color: control.activeFocus ? control.palette.highlight : control.palette.mid
+    }
+}
diff --git a/src/quickcontrols/basic/ToolBar.qml b/src/quickcontrols/basic/ToolBar.qml
new file mode 100644
index 0000000000..6ef70bc99c
--- /dev/null
+++ b/src/quickcontrols/basic/ToolBar.qml
@@ -0,0 +1,20 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ToolBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    background: Rectangle {
+        implicitHeight: 40
+        color: control.palette.button
+    }
+}
diff --git a/src/quickcontrols/basic/ToolButton.qml b/src/quickcontrols/basic/ToolButton.qml
new file mode 100644
index 0000000000..e4bc90d665
--- /dev/null
+++ b/src/quickcontrols/basic/ToolButton.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ToolButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: visualFocus ? control.palette.highlight : control.palette.buttonText
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.visualFocus ? control.palette.highlight : control.palette.buttonText
+    }
+
+    background: Rectangle {
+        implicitWidth: 40
+        implicitHeight: 40
+
+        opacity: control.down ? 1.0 : 0.5
+        color: control.down || control.checked || control.highlighted ? control.palette.mid : control.palette.button
+    }
+}
diff --git a/src/quickcontrols/basic/ToolSeparator.qml b/src/quickcontrols/basic/ToolSeparator.qml
new file mode 100644
index 0000000000..2d2cefcdf4
--- /dev/null
+++ b/src/quickcontrols/basic/ToolSeparator.qml
@@ -0,0 +1,24 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ToolSeparator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: vertical ? 6 : 2
+    verticalPadding: vertical ? 2 : 6
+
+    contentItem: Rectangle {
+        implicitWidth: control.vertical ? 1 : 30
+        implicitHeight: control.vertical ? 30 : 1
+        color: control.palette.mid
+    }
+}
diff --git a/src/quickcontrols/basic/ToolTip.qml b/src/quickcontrols/basic/ToolTip.qml
new file mode 100644
index 0000000000..6d71f55db3
--- /dev/null
+++ b/src/quickcontrols/basic/ToolTip.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ToolTip {
+    id: control
+
+    x: parent ? (parent.width - implicitWidth) / 2 : 0
+    y: -implicitHeight - 3
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    margins: 6
+    padding: 6
+
+    closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        wrapMode: Text.Wrap
+        color: control.palette.toolTipText
+    }
+
+    background: Rectangle {
+        border.color: control.palette.dark
+        color: control.palette.toolTipBase
+    }
+}
diff --git a/src/quickcontrols/basic/TreeViewDelegate.qml b/src/quickcontrols/basic/TreeViewDelegate.qml
new file mode 100644
index 0000000000..fc9a072c43
--- /dev/null
+++ b/src/quickcontrols/basic/TreeViewDelegate.qml
@@ -0,0 +1,63 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.TreeViewDelegate {
+    id: control
+
+    implicitWidth: leftMargin + __contentIndent + implicitContentWidth + rightPadding + rightMargin
+    implicitHeight: Math.max(indicator ? indicator.height : 0, implicitContentHeight) * 1.25
+
+    indentation: indicator ? indicator.width : 12
+    leftMargin: 4
+    rightMargin: 4
+    spacing: 4
+
+    topPadding: contentItem ? (height - contentItem.implicitHeight) / 2 : 0
+    leftPadding: !mirrored ? leftMargin + __contentIndent : width - leftMargin - __contentIndent - implicitContentWidth
+
+    highlighted: control.selected || control.current
+               || ((control.treeView.selectionBehavior === TableView.SelectRows
+               || control.treeView.selectionBehavior === TableView.SelectionDisabled)
+               && control.row === control.treeView.currentRow)
+
+    required property int row
+    required property var model
+    readonly property real __contentIndent: !isTreeNode ? 0 : (depth * indentation) + (indicator ? indicator.width + spacing : 0)
+
+    indicator: Item {
+        // Create an area that is big enough for the user to
+        // click on, since the image is a bit small.
+        readonly property real __indicatorIndent: control.leftMargin + (control.depth * control.indentation)
+        x: !control.mirrored ? __indicatorIndent : control.width - __indicatorIndent - width
+        y: (control.height - height) / 2
+        implicitWidth: 20
+        implicitHeight: 40 // same as Button.qml
+        ColorImage {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            rotation:  control.expanded ? 90 : (control.mirrored ? 180 : 0)
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
+            color: control.palette.windowText
+            defaultColor: "#353637"
+        }
+    }
+
+    background: Rectangle {
+        implicitHeight: 40 // same as Button.qml
+        color: control.highlighted
+               ? control.palette.highlight
+               : (control.treeView.alternatingRows && control.row % 2 !== 0
+               ? control.palette.alternateBase : control.palette.base)
+    }
+
+    contentItem: Label {
+        clip: false
+        text: control.model.display
+        elide: Text.ElideRight
+        color: control.highlighted ? control.palette.highlightedText : control.palette.buttonText
+    }
+}
diff --git a/src/quickcontrols/basic/Tumbler.qml b/src/quickcontrols/basic/Tumbler.qml
new file mode 100644
index 0000000000..d3d1254fea
--- /dev/null
+++ b/src/quickcontrols/basic/Tumbler.qml
@@ -0,0 +1,47 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.Tumbler {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    delegate: Text {
+        text: modelData
+        color: control.visualFocus ? control.palette.highlight : control.palette.text
+        font: control.font
+        opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        // We use required property here to satisfy qmllint, but that means
+        // we also need to declare the index for the attached properties
+        // (see QQuickTumblerAttachedPrivate::init).
+        required property var modelData
+        required property int index
+    }
+
+    contentItem: TumblerView {
+        implicitWidth: 60
+        implicitHeight: 200
+        model: control.model
+        delegate: control.delegate
+        path: Path {
+            startX: control.contentItem.width / 2
+            startY: -control.contentItem.delegateHeight / 2
+            PathLine {
+                x: control.contentItem.width / 2
+                y: (control.visibleItemCount + 1) * control.contentItem.delegateHeight - control.contentItem.delegateHeight / 2
+            }
+        }
+
+        property real delegateHeight: control.availableHeight / control.visibleItemCount
+    }
+}
diff --git a/src/quickcontrols/basic/VerticalHeaderView.qml b/src/quickcontrols/basic/VerticalHeaderView.qml
new file mode 100644
index 0000000000..a59e228d20
--- /dev/null
+++ b/src/quickcontrols/basic/VerticalHeaderView.qml
@@ -0,0 +1,34 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.VerticalHeaderView {
+    id: control
+
+    implicitWidth: contentWidth
+    implicitHeight: syncView ? syncView.height : 0
+
+    delegate: Rectangle {
+        // Qt6: add cellPadding (and font etc) as public API in headerview
+        readonly property real cellPadding: 8
+
+        implicitWidth: Math.max(control.width, text.implicitWidth + (cellPadding * 2))
+        implicitHeight: text.implicitHeight + (cellPadding * 2)
+        color: "#f6f6f6"
+        border.color: "#e4e4e4"
+
+        Text {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            height: parent.height
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: "#ff26282a"
+        }
+    }
+}
diff --git a/src/quickcontrols/basic/WeekNumberColumn.qml b/src/quickcontrols/basic/WeekNumberColumn.qml
new file mode 100644
index 0000000000..e5ce90bf3c
--- /dev/null
+++ b/src/quickcontrols/basic/WeekNumberColumn.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.AbstractWeekNumberColumn {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentItem.implicitHeight + topPadding + bottomPadding)
+
+    spacing: 6
+    leftPadding: 6
+    rightPadding: 6
+    font.bold: true
+
+    //! [delegate]
+    delegate: Text {
+        text: weekNumber
+        font: control.font
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        required property int weekNumber
+    }
+    //! [delegate]
+
+    //! [contentItem]
+    contentItem: Column {
+        spacing: control.spacing
+        Repeater {
+            model: control.source
+            delegate: control.delegate
+        }
+    }
+    //! [contentItem]
+}
diff --git a/src/quickcontrols/basic/images/arrow-indicator.png b/src/quickcontrols/basic/images/arrow-indicator.png
new file mode 100644
index 0000000000..d833d52c40
--- /dev/null
+++ b/src/quickcontrols/basic/images/arrow-indicator.png
diff --git a/src/quickcontrols/basic/images/arrow-indicator@2x.png b/src/quickcontrols/basic/images/arrow-indicator@2x.png
new file mode 100644
index 0000000000..55c7940a51
--- /dev/null
+++ b/src/quickcontrols/basic/images/arrow-indicator@2x.png
diff --git a/src/quickcontrols/basic/images/arrow-indicator@3x.png b/src/quickcontrols/basic/images/arrow-indicator@3x.png
new file mode 100644
index 0000000000..c7067c5cd0
--- /dev/null
+++ b/src/quickcontrols/basic/images/arrow-indicator@3x.png
diff --git a/src/quickcontrols/basic/images/arrow-indicator@4x.png b/src/quickcontrols/basic/images/arrow-indicator@4x.png
new file mode 100644
index 0000000000..4c5cf3515a
--- /dev/null
+++ b/src/quickcontrols/basic/images/arrow-indicator@4x.png
diff --git a/src/quickcontrols/basic/images/check.png b/src/quickcontrols/basic/images/check.png
new file mode 100644
index 0000000000..479a84428d
--- /dev/null
+++ b/src/quickcontrols/basic/images/check.png
diff --git a/src/quickcontrols/basic/images/check@2x.png b/src/quickcontrols/basic/images/check@2x.png
new file mode 100644
index 0000000000..79663c0b03
--- /dev/null
+++ b/src/quickcontrols/basic/images/check@2x.png
diff --git a/src/quickcontrols/basic/images/check@3x.png b/src/quickcontrols/basic/images/check@3x.png
new file mode 100644
index 0000000000..fd0135abe2
--- /dev/null
+++ b/src/quickcontrols/basic/images/check@3x.png
diff --git a/src/quickcontrols/basic/images/check@4x.png b/src/quickcontrols/basic/images/check@4x.png
new file mode 100644
index 0000000000..e7e0b64044
--- /dev/null
+++ b/src/quickcontrols/basic/images/check@4x.png
diff --git a/src/quickcontrols/basic/images/dial-indicator.png b/src/quickcontrols/basic/images/dial-indicator.png
new file mode 100644
index 0000000000..92357c51d4
--- /dev/null
+++ b/src/quickcontrols/basic/images/dial-indicator.png
diff --git a/src/quickcontrols/basic/images/dial-indicator@2x.png b/src/quickcontrols/basic/images/dial-indicator@2x.png
new file mode 100644
index 0000000000..f436443b0a
--- /dev/null
+++ b/src/quickcontrols/basic/images/dial-indicator@2x.png
diff --git a/src/quickcontrols/basic/images/dial-indicator@3x.png b/src/quickcontrols/basic/images/dial-indicator@3x.png
new file mode 100644
index 0000000000..d883045bcb
--- /dev/null
+++ b/src/quickcontrols/basic/images/dial-indicator@3x.png
diff --git a/src/quickcontrols/basic/images/dial-indicator@4x.png b/src/quickcontrols/basic/images/dial-indicator@4x.png
new file mode 100644
index 0000000000..794777128b
--- /dev/null
+++ b/src/quickcontrols/basic/images/dial-indicator@4x.png
diff --git a/src/quickcontrols/basic/images/double-arrow.png b/src/quickcontrols/basic/images/double-arrow.png
new file mode 100644
index 0000000000..3ecd7f89f3
--- /dev/null
+++ b/src/quickcontrols/basic/images/double-arrow.png
diff --git a/src/quickcontrols/basic/images/double-arrow@2x.png b/src/quickcontrols/basic/images/double-arrow@2x.png
new file mode 100644
index 0000000000..eeb03e2847
--- /dev/null
+++ b/src/quickcontrols/basic/images/double-arrow@2x.png
diff --git a/src/quickcontrols/basic/images/double-arrow@3x.png b/src/quickcontrols/basic/images/double-arrow@3x.png
new file mode 100644
index 0000000000..f0662d2026
--- /dev/null
+++ b/src/quickcontrols/basic/images/double-arrow@3x.png
diff --git a/src/quickcontrols/basic/images/double-arrow@4x.png b/src/quickcontrols/basic/images/double-arrow@4x.png
new file mode 100644
index 0000000000..10891e9133
--- /dev/null
+++ b/src/quickcontrols/basic/images/double-arrow@4x.png
diff --git a/src/quickcontrols/basic/images/drop-indicator.png b/src/quickcontrols/basic/images/drop-indicator.png
new file mode 100644
index 0000000000..80c1d958e3
--- /dev/null
+++ b/src/quickcontrols/basic/images/drop-indicator.png
diff --git a/src/quickcontrols/basic/images/drop-indicator@2x.png b/src/quickcontrols/basic/images/drop-indicator@2x.png
new file mode 100644
index 0000000000..6e0f228c54
--- /dev/null
+++ b/src/quickcontrols/basic/images/drop-indicator@2x.png
diff --git a/src/quickcontrols/basic/images/drop-indicator@3x.png b/src/quickcontrols/basic/images/drop-indicator@3x.png
new file mode 100644
index 0000000000..199752fbf8
--- /dev/null
+++ b/src/quickcontrols/basic/images/drop-indicator@3x.png
diff --git a/src/quickcontrols/basic/images/drop-indicator@4x.png b/src/quickcontrols/basic/images/drop-indicator@4x.png
new file mode 100644
index 0000000000..58311fbe2a
--- /dev/null
+++ b/src/quickcontrols/basic/images/drop-indicator@4x.png
diff --git a/src/quickcontrols/basic/impl/CMakeLists.txt b/src/quickcontrols/basic/impl/CMakeLists.txt
new file mode 100644
index 0000000000..ec79fafdda
--- /dev/null
+++ b/src/quickcontrols/basic/impl/CMakeLists.txt
@@ -0,0 +1,28 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2basicstyleimplplugin Plugin:
+#####################################################################
+
+qt_internal_add_qml_module(qtquickcontrols2basicstyleimplplugin
+    URI "QtQuick.Controls.Basic.impl"
+    VERSION "${PROJECT_VERSION}"
+    CLASS_NAME QtQuickControls2BasicStyleImplPlugin
+    PLUGIN_TARGET qtquickcontrols2basicstyleimplplugin
+    NO_PLUGIN_OPTIONAL
+    SOURCES
+        qquickbasicbusyindicator.cpp qquickbasicbusyindicator_p.h
+        qquickbasicdial.cpp qquickbasicdial_p.h
+        qquickbasicprogressbar.cpp qquickbasicprogressbar_p.h
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::Gui
+        Qt::QmlPrivate
+        Qt::QuickControls2ImplPrivate
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+)
diff --git a/src/quickcontrols/basic/impl/qquickbasicbusyindicator.cpp b/src/quickcontrols/basic/impl/qquickbasicbusyindicator.cpp
new file mode 100644
index 0000000000..2acefa2bed
--- /dev/null
+++ b/src/quickcontrols/basic/impl/qquickbasicbusyindicator.cpp
@@ -0,0 +1,192 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickbasicbusyindicator_p.h"
+
+#include <QtQuick/private/qquickitem_p.h>
+#include <QtQuick/private/qsgadaptationlayer_p.h>
+#include <QtQuickControls2Impl/private/qquickanimatednode_p.h>
+
+QT_BEGIN_NAMESPACE
+
+static const int CircleCount = 10;
+static const int TotalDuration = 100 * CircleCount * 2;
+static const QRgb TransparentColor = 0x00000000;
+
+static QPointF moveCircle(const QPointF &pos, qreal rotation, qreal distance)
+{
+    return pos - QTransform().rotate(rotation).map(QPointF(0, distance));
+}
+
+class QQuickBasicBusyIndicatorNode : public QQuickAnimatedNode
+{
+public:
+    QQuickBasicBusyIndicatorNode(QQuickBasicBusyIndicator *item);
+
+    void updateCurrentTime(int time) override;
+    void sync(QQuickItem *item) override;
+
+private:
+    QColor m_pen;
+    QColor m_fill;
+};
+
+QQuickBasicBusyIndicatorNode::QQuickBasicBusyIndicatorNode(QQuickBasicBusyIndicator *item)
+    : QQuickAnimatedNode(item)
+{
+    setLoopCount(Infinite);
+    setDuration(TotalDuration);
+    setCurrentTime(item->elapsed());
+
+    for (int i = 0; i < CircleCount; ++i) {
+        QSGTransformNode *transformNode = new QSGTransformNode;
+        appendChildNode(transformNode);
+
+        QQuickItemPrivate *d = QQuickItemPrivate::get(item);
+        QSGInternalRectangleNode *rectNode = d->sceneGraphContext()->createInternalRectangleNode();
+        rectNode->setAntialiasing(true);
+        transformNode->appendChildNode(rectNode);
+    }
+}
+
+void QQuickBasicBusyIndicatorNode::updateCurrentTime(int time)
+{
+    const qreal percentageComplete = time / qreal(TotalDuration);
+    const qreal firstPhaseProgress = percentageComplete <= 0.5 ? percentageComplete * 2 : 0;
+    const qreal secondPhaseProgress = percentageComplete > 0.5 ? (percentageComplete - 0.5) * 2 : 0;
+
+    QSGTransformNode *transformNode = static_cast<QSGTransformNode*>(firstChild());
+    Q_ASSERT(transformNode->type() == QSGNode::TransformNodeType);
+    for (int i = 0; i < CircleCount; ++i) {
+        QSGInternalRectangleNode *rectNode = static_cast<QSGInternalRectangleNode*>(transformNode->firstChild());
+        Q_ASSERT(rectNode->type() == QSGNode::GeometryNodeType);
+
+        const bool fill = (firstPhaseProgress > qreal(i) / CircleCount) || (secondPhaseProgress > 0 && secondPhaseProgress < qreal(i) / CircleCount);
+        rectNode->setColor(fill ? m_fill : QColor::fromRgba(TransparentColor));
+        rectNode->setPenColor(m_pen);
+        rectNode->setPenWidth(1);
+        rectNode->update();
+
+        transformNode = static_cast<QSGTransformNode*>(transformNode->nextSibling());
+    }
+}
+
+void QQuickBasicBusyIndicatorNode::sync(QQuickItem *item)
+{
+    const qreal w = item->width();
+    const qreal h = item->height();
+    const qreal sz = qMin(w, h);
+    const qreal dx = (w - sz) / 2;
+    const qreal dy = (h - sz) / 2;
+    const int circleRadius = sz / 12;
+
+    m_pen = static_cast<QQuickBasicBusyIndicator *>(item)->pen();
+    m_fill = static_cast<QQuickBasicBusyIndicator *>(item)->fill();
+
+    QSGTransformNode *transformNode = static_cast<QSGTransformNode *>(firstChild());
+    for (int i = 0; i < CircleCount; ++i) {
+        Q_ASSERT(transformNode->type() == QSGNode::TransformNodeType);
+
+        QSGInternalRectangleNode *rectNode = static_cast<QSGInternalRectangleNode *>(transformNode->firstChild());
+        Q_ASSERT(rectNode->type() == QSGNode::GeometryNodeType);
+
+        QPointF pos = QPointF(sz / 2 - circleRadius, sz / 2 - circleRadius);
+        pos = moveCircle(pos, 360.0 / CircleCount * i, sz / 2 - circleRadius);
+
+        QMatrix4x4 m;
+        m.translate(dx + pos.x(), dy + pos.y());
+        transformNode->setMatrix(m);
+
+        rectNode->setRect(QRectF(QPointF(), QSizeF(circleRadius * 2, circleRadius * 2)));
+        rectNode->setRadius(circleRadius);
+
+        transformNode = static_cast<QSGTransformNode *>(transformNode->nextSibling());
+    }
+}
+
+QQuickBasicBusyIndicator::QQuickBasicBusyIndicator(QQuickItem *parent) :
+    QQuickItem(parent)
+{
+    setFlag(ItemHasContents);
+}
+
+QColor QQuickBasicBusyIndicator::pen() const
+{
+    return m_pen;
+}
+
+void QQuickBasicBusyIndicator::setPen(const QColor &pen)
+{
+    if (pen == m_pen)
+        return;
+
+    m_pen = pen;
+    update();
+}
+
+QColor QQuickBasicBusyIndicator::fill() const
+{
+    return m_fill;
+}
+
+void QQuickBasicBusyIndicator::setFill(const QColor &fill)
+{
+    if (fill == m_fill)
+        return;
+
+    m_fill = fill;
+    update();
+}
+
+bool QQuickBasicBusyIndicator::isRunning() const
+{
+    return isVisible();
+}
+
+void QQuickBasicBusyIndicator::setRunning(bool running)
+{
+    if (running)
+        setVisible(true);
+}
+
+int QQuickBasicBusyIndicator::elapsed() const
+{
+    return m_elapsed;
+}
+
+void QQuickBasicBusyIndicator::itemChange(QQuickItem::ItemChange change, const QQuickItem::ItemChangeData &data)
+{
+    QQuickItem::itemChange(change, data);
+    switch (change) {
+    case ItemOpacityHasChanged:
+        if (qFuzzyIsNull(data.realValue))
+            setVisible(false);
+        break;
+    case ItemVisibleHasChanged:
+        update();
+        break;
+    default:
+        break;
+    }
+}
+
+QSGNode *QQuickBasicBusyIndicator::updatePaintNode(QSGNode *oldNode, QQuickItem::UpdatePaintNodeData *)
+{
+    QQuickBasicBusyIndicatorNode *node = static_cast<QQuickBasicBusyIndicatorNode *>(oldNode);
+    if (isRunning() && width() > 0 && height() > 0) {
+        if (!node) {
+            node = new QQuickBasicBusyIndicatorNode(this);
+            node->start();
+        }
+        node->sync(this);
+    } else {
+        m_elapsed = node ? node->currentTime() : 0;
+        delete node;
+        node = nullptr;
+    }
+    return node;
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickbasicbusyindicator_p.cpp"
diff --git a/src/quickcontrols/basic/impl/qquickbasicbusyindicator_p.h b/src/quickcontrols/basic/impl/qquickbasicbusyindicator_p.h
new file mode 100644
index 0000000000..a39b61cde4
--- /dev/null
+++ b/src/quickcontrols/basic/impl/qquickbasicbusyindicator_p.h
@@ -0,0 +1,61 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKDEFAULTBUSYINDICATOR_P_H
+#define QQUICKDEFAULTBUSYINDICATOR_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtQuick/qquickitem.h>
+#include <QtGui/qcolor.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickBasicBusyIndicator : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor pen READ pen WRITE setPen FINAL)
+    Q_PROPERTY(QColor fill READ fill WRITE setFill FINAL)
+    Q_PROPERTY(bool running READ isRunning WRITE setRunning)
+    QML_NAMED_ELEMENT(BusyIndicatorImpl)
+    QML_ADDED_IN_VERSION(2, 0)
+
+public:
+    explicit QQuickBasicBusyIndicator(QQuickItem *parent = nullptr);
+
+    QColor pen() const;
+    void setPen(const QColor &pen);
+
+    QColor fill() const;
+    void setFill(const QColor &fill);
+
+    bool isRunning() const;
+    void setRunning(bool running);
+
+    int elapsed() const;
+
+protected:
+    void itemChange(ItemChange change, const ItemChangeData &data) override;
+    QSGNode *updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) override;
+
+private:
+    int m_elapsed = 0;
+    QColor m_pen;
+    QColor m_fill;
+};
+
+QT_END_NAMESPACE
+
+QML_DECLARE_TYPE(QQuickBasicBusyIndicator)
+
+#endif // QQUICKDEFAULTBUSYINDICATOR_P_H
diff --git a/src/quickcontrols/basic/impl/qquickbasicdial.cpp b/src/quickcontrols/basic/impl/qquickbasicdial.cpp
new file mode 100644
index 0000000000..8eb2b3840d
--- /dev/null
+++ b/src/quickcontrols/basic/impl/qquickbasicdial.cpp
@@ -0,0 +1,91 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickbasicdial_p.h"
+
+#include <QtCore/qmath.h>
+#include <QtGui/qpainter.h>
+#include <QtQuick/private/qquickitem_p.h>
+
+QT_BEGIN_NAMESPACE
+
+QQuickBasicDial::QQuickBasicDial(QQuickItem *parent) :
+    QQuickPaintedItem(parent)
+{
+}
+
+qreal QQuickBasicDial::progress() const
+{
+    return m_progress;
+}
+
+void QQuickBasicDial::setProgress(qreal progress)
+{
+    if (progress == m_progress)
+        return;
+
+    m_progress = progress;
+    update();
+}
+
+QColor QQuickBasicDial::color() const
+{
+    return m_color;
+}
+
+void QQuickBasicDial::setColor(const QColor &color)
+{
+    if (color == m_color)
+        return;
+
+    m_color = color;
+    update();
+}
+
+void QQuickBasicDial::paint(QPainter *painter)
+{
+    if (width() <= 0 || height() <= 0)
+        return;
+
+    QPen pen(m_color);
+    pen.setWidth(8);
+    pen.setCapStyle(Qt::FlatCap);
+    painter->setPen(pen);
+
+    const QRectF bounds = boundingRect();
+    const qreal smallest = qMin(bounds.width(), bounds.height());
+    QRectF rect = QRectF(pen.widthF() / 2.0 + 1, pen.widthF() / 2.0 + 1, smallest - pen.widthF() - 2, smallest - pen.widthF() - 2);
+    rect.moveCenter(bounds.center());
+
+    // Make sure the arc is aligned to whole pixels.
+    if (rect.x() - int(rect.x()) > 0)
+        rect.setX(qCeil(rect.x()));
+    if (rect.y() - int(rect.y()) > 0)
+        rect.setY(qCeil(rect.y()));
+    if (rect.width() - int(rect.width()) > 0)
+        rect.setWidth(qFloor(rect.width()));
+    if (rect.height() - int(rect.height()) > 0)
+        rect.setHeight(qFloor(rect.height()));
+
+    painter->setRenderHint(QPainter::Antialiasing);
+
+    const qreal startAngle = (140 + 90);
+    const qreal spanAngle = (m_progress * 280) * -1;
+    QPainterPath path;
+    path.arcMoveTo(rect, startAngle);
+    path.arcTo(rect, startAngle, spanAngle);
+    painter->drawPath(path);
+
+    rect.adjust(-pen.widthF() / 2.0, -pen.widthF() / 2.0, pen.widthF() / 2.0, pen.widthF() / 2.0);
+    pen.setWidth(1);
+    painter->setPen(pen);
+
+    path = QPainterPath();
+    path.arcMoveTo(rect, 0);
+    path.arcTo(rect, 0, 360);
+    painter->drawPath(path);
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickbasicdial_p.cpp"
diff --git a/src/quickcontrols/basic/impl/qquickbasicdial_p.h b/src/quickcontrols/basic/impl/qquickbasicdial_p.h
new file mode 100644
index 0000000000..1406bf6906
--- /dev/null
+++ b/src/quickcontrols/basic/impl/qquickbasicdial_p.h
@@ -0,0 +1,50 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKDEFAULTDIAL_P_H
+#define QQUICKDEFAULTDIAL_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtGui/qcolor.h>
+#include <QtQuick/qquickpainteditem.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickBasicDial : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY(qreal progress READ progress WRITE setProgress FINAL)
+    Q_PROPERTY(QColor color READ color WRITE setColor FINAL)
+    QML_NAMED_ELEMENT(DialImpl)
+    QML_ADDED_IN_VERSION(2, 0)
+
+public:
+    explicit QQuickBasicDial(QQuickItem *parent = nullptr);
+
+    qreal progress() const;
+    void setProgress(qreal progress);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    void paint(QPainter *painter) override;
+
+private:
+    qreal m_progress = 0;
+    QColor m_color = Qt::black;
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKDEFAULTDIAL_P_H
diff --git a/src/quickcontrols/basic/impl/qquickbasicprogressbar.cpp b/src/quickcontrols/basic/impl/qquickbasicprogressbar.cpp
new file mode 100644
index 0000000000..4dbe04e4b1
--- /dev/null
+++ b/src/quickcontrols/basic/impl/qquickbasicprogressbar.cpp
@@ -0,0 +1,249 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickbasicprogressbar_p.h"
+
+#include <QtCore/qeasingcurve.h>
+#include <QtQuick/private/qquickitem_p.h>
+#include <QtQuick/private/qsgadaptationlayer_p.h>
+#include <QtQuickControls2Impl/private/qquickanimatednode_p.h>
+
+QT_BEGIN_NAMESPACE
+
+static const int Blocks = 4;
+static const int BlockWidth = 16;
+static const int BlockRestingSpacing = 4;
+static const int BlockMovingSpacing = 48;
+static const int BlockSpan = Blocks * (BlockWidth + BlockRestingSpacing) - BlockRestingSpacing;
+static const int TotalDuration = 4000;
+static const int SecondPhaseStart = TotalDuration * 0.4;
+static const int ThirdPhaseStart = TotalDuration * 0.6;
+
+static inline qreal blockStartX(int blockIndex)
+{
+    return ((blockIndex + 1) * -BlockWidth) - (blockIndex * BlockMovingSpacing);
+}
+
+static inline qreal blockRestX(int blockIndex, qreal availableWidth)
+{
+    const qreal spanRightEdgePos = availableWidth / 2 + BlockSpan / 2.0;
+    return spanRightEdgePos - (blockIndex + 1) * BlockWidth - (blockIndex * BlockRestingSpacing);
+}
+
+static inline qreal blockEndX(int blockIndex, qreal availableWidth)
+{
+    return availableWidth - blockStartX(Blocks - 1 - blockIndex) - BlockWidth;
+}
+
+class QQuickBasicProgressBarNode : public QQuickAnimatedNode
+{
+public:
+    QQuickBasicProgressBarNode(QQuickBasicProgressBar *item);
+
+    void updateCurrentTime(int time) override;
+    void sync(QQuickItem *item) override;
+
+private:
+    bool m_indeterminate = false;
+    qreal m_pixelsPerSecond = 0;
+};
+
+QQuickBasicProgressBarNode::QQuickBasicProgressBarNode(QQuickBasicProgressBar *item)
+    : QQuickAnimatedNode(item),
+      m_pixelsPerSecond(item->width())
+{
+    setLoopCount(Infinite);
+    setDuration(TotalDuration);
+}
+
+void QQuickBasicProgressBarNode::updateCurrentTime(int time)
+{
+    QSGTransformNode *transformNode = static_cast<QSGTransformNode*>(firstChild());
+    for (int i = 0; i < Blocks; ++i) {
+        Q_ASSERT(transformNode->type() == QSGNode::TransformNodeType);
+
+        QMatrix4x4 m;
+        const qreal restX = blockRestX(i, m_pixelsPerSecond);
+        const qreal timeInSeconds = time / 1000.0;
+
+        if (time < SecondPhaseStart) {
+            // Move into the resting position for the first phase.
+            QEasingCurve easingCurve(QEasingCurve::InQuad);
+            const qreal easedCompletion = easingCurve.valueForProgress(time / qreal(SecondPhaseStart));
+            const qreal distance = m_pixelsPerSecond * (easedCompletion * (SecondPhaseStart / 1000.0));
+            const qreal position = blockStartX(i) + distance;
+            const qreal destination = restX;
+            m.translate(qMin(position, destination), 0);
+        } else if (time < ThirdPhaseStart) {
+            // Stay in the same position for the second phase.
+            m.translate(restX, 0);
+        } else {
+            // Move out of view for the third phase.
+            const int thirdPhaseSubKickoff = (BlockMovingSpacing / m_pixelsPerSecond) * 1000;
+            const int subphase = (time - ThirdPhaseStart) / thirdPhaseSubKickoff;
+            // If we're not at this subphase yet, don't try to animate movement,
+            // because it will be incorrect.
+            if (subphase < i)
+                return;
+
+            const qreal timeSinceSecondPhase = timeInSeconds - (ThirdPhaseStart / 1000.0);
+            // We only want to start keeping track of time once our subphase has started,
+            // otherwise we move too much because we account for time that has already elapsed.
+            // For example, if we were 60 milliseconds into the third subphase:
+            //
+            //      0 ..... 1 ..... 2 ...
+            //         100     100     60
+            //
+            // i == 0, timeSinceOurKickoff == 260
+            // i == 1, timeSinceOurKickoff == 160
+            // i == 2, timeSinceOurKickoff ==  60
+            const qreal timeSinceOurKickoff = timeSinceSecondPhase - (thirdPhaseSubKickoff / 1000.0 * i);
+            const qreal position = restX + (m_pixelsPerSecond * (timeSinceOurKickoff));
+            const qreal destination = blockEndX(i, m_pixelsPerSecond);
+            m.translate(qMin(position, destination), 0);
+        }
+
+        transformNode->setMatrix(m);
+
+        transformNode = static_cast<QSGTransformNode*>(transformNode->nextSibling());
+    }
+}
+
+void QQuickBasicProgressBarNode::sync(QQuickItem *item)
+{
+    QQuickBasicProgressBar *bar = static_cast<QQuickBasicProgressBar *>(item);
+    if (m_indeterminate != bar->isIndeterminate()) {
+        m_indeterminate = bar->isIndeterminate();
+        if (m_indeterminate)
+            start();
+        else
+            stop();
+    }
+    m_pixelsPerSecond = item->width();
+
+    QQuickItemPrivate *d = QQuickItemPrivate::get(item);
+
+    QMatrix4x4 m;
+    m.translate(0, (item->height() - item->implicitHeight()) / 2);
+    setMatrix(m);
+
+    if (m_indeterminate) {
+        if (childCount() != Blocks) {
+            // This was previously a regular progress bar; remove the old nodes.
+            removeAllChildNodes();
+        }
+
+        QSGTransformNode *transformNode = static_cast<QSGTransformNode*>(firstChild());
+        for (int i = 0; i < Blocks; ++i) {
+            if (!transformNode) {
+                transformNode = new QSGTransformNode;
+                appendChildNode(transformNode);
+            }
+
+            QSGInternalRectangleNode *rectNode = static_cast<QSGInternalRectangleNode*>(transformNode->firstChild());
+            if (!rectNode) {
+                rectNode = d->sceneGraphContext()->createInternalRectangleNode();
+                rectNode->setColor(bar->color());
+                transformNode->appendChildNode(rectNode);
+            }
+
+            QMatrix4x4 m;
+            m.translate(blockStartX(i), 0);
+            transformNode->setMatrix(m);
+
+            rectNode->setRect(QRectF(QPointF(0, 0), QSizeF(BlockWidth, item->implicitHeight())));
+            rectNode->update();
+
+            transformNode = static_cast<QSGTransformNode *>(transformNode->nextSibling());
+        }
+    } else {
+        if (childCount() > 1) {
+            // This was previously an indeterminate progress bar; remove the old nodes.
+            removeAllChildNodes();
+        }
+
+        QSGInternalRectangleNode *rectNode = static_cast<QSGInternalRectangleNode *>(firstChild());
+        if (!rectNode) {
+            rectNode = d->sceneGraphContext()->createInternalRectangleNode();
+            rectNode->setColor(bar->color());
+            appendChildNode(rectNode);
+        }
+
+        rectNode->setRect(QRectF(QPointF(0, 0), QSizeF(bar->progress() * item->width(), item->implicitHeight())));
+        rectNode->update();
+    }
+}
+
+QQuickBasicProgressBar::QQuickBasicProgressBar(QQuickItem *parent) :
+    QQuickItem(parent)
+{
+    setFlag(ItemHasContents);
+}
+
+qreal QQuickBasicProgressBar::progress() const
+{
+    return m_progress;
+}
+
+void QQuickBasicProgressBar::setProgress(qreal progress)
+{
+    if (progress == m_progress)
+        return;
+
+    m_progress = progress;
+    update();
+}
+
+bool QQuickBasicProgressBar::isIndeterminate() const
+{
+    return m_indeterminate;
+}
+
+void QQuickBasicProgressBar::setIndeterminate(bool indeterminate)
+{
+    if (indeterminate == m_indeterminate)
+        return;
+
+    m_indeterminate = indeterminate;
+    setClip(m_indeterminate);
+    update();
+}
+
+QColor QQuickBasicProgressBar::color() const
+{
+    return m_color;
+}
+
+void QQuickBasicProgressBar::setColor(const QColor &color)
+{
+    if (color == m_color)
+        return;
+
+    m_color = color;
+    update();
+}
+
+void QQuickBasicProgressBar::itemChange(QQuickItem::ItemChange change, const QQuickItem::ItemChangeData &data)
+{
+    QQuickItem::itemChange(change, data);
+    if (change == ItemVisibleHasChanged)
+        update();
+}
+
+QSGNode *QQuickBasicProgressBar::updatePaintNode(QSGNode *oldNode, QQuickItem::UpdatePaintNodeData *)
+{
+    QQuickBasicProgressBarNode *node = static_cast<QQuickBasicProgressBarNode *>(oldNode);
+    if (isVisible() && width() > 0 && height() > 0) {
+        if (!node)
+            node = new QQuickBasicProgressBarNode(this);
+        node->sync(this);
+    } else {
+        delete node;
+        node = nullptr;
+    }
+    return node;
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickbasicprogressbar_p.cpp"
diff --git a/src/quickcontrols/basic/impl/qquickbasicprogressbar_p.h b/src/quickcontrols/basic/impl/qquickbasicprogressbar_p.h
new file mode 100644
index 0000000000..72b5521263
--- /dev/null
+++ b/src/quickcontrols/basic/impl/qquickbasicprogressbar_p.h
@@ -0,0 +1,59 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKDEFAULTPROGRESSBAR_P_H
+#define QQUICKDEFAULTPROGRESSBAR_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtQuick/qquickitem.h>
+#include <QtGui/qcolor.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickBasicProgressBar : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(bool indeterminate READ isIndeterminate WRITE setIndeterminate FINAL)
+    Q_PROPERTY(qreal progress READ progress WRITE setProgress FINAL)
+    Q_PROPERTY(QColor color READ color WRITE setColor FINAL)
+    QML_NAMED_ELEMENT(ProgressBarImpl)
+    QML_ADDED_IN_VERSION(2, 0)
+
+public:
+    explicit QQuickBasicProgressBar(QQuickItem *parent = nullptr);
+
+    bool isIndeterminate() const;
+    void setIndeterminate(bool indeterminate);
+
+    qreal progress() const;
+    void setProgress(qreal progress);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+protected:
+    void itemChange(ItemChange change, const ItemChangeData &data) override;
+    QSGNode *updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) override;
+
+private:
+    qreal m_progress = 0;
+    bool m_indeterminate = false;
+    QColor m_color;
+};
+
+QT_END_NAMESPACE
+
+QML_DECLARE_TYPE(QQuickBasicProgressBar)
+
+#endif // QQUICKDEFAULTPROGRESSBAR_P_H
diff --git a/src/quickcontrols/basic/qquickbasicstyle.cpp b/src/quickcontrols/basic/qquickbasicstyle.cpp
new file mode 100644
index 0000000000..7602cc7340
--- /dev/null
+++ b/src/quickcontrols/basic/qquickbasicstyle.cpp
@@ -0,0 +1,215 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickbasicstyle_p.h"
+
+QT_BEGIN_NAMESPACE
+
+QQuickBasicStyle::QQuickBasicStyle(QObject *parent) :
+    QObject(parent)
+{
+}
+
+QColor QQuickBasicStyle::backgroundColor() const
+{
+    return QColor::fromRgba(0xFFFFFFFF);
+}
+
+QColor QQuickBasicStyle::overlayModalColor() const
+{
+    return QColor::fromRgba(0x7F28282A);
+}
+
+QColor QQuickBasicStyle::overlayDimColor() const
+{
+    return QColor::fromRgba(0x1F28282A);
+}
+
+QColor QQuickBasicStyle::textColor() const
+{
+    return QColor::fromRgba(0xFF353637);
+}
+
+QColor QQuickBasicStyle::textDarkColor() const
+{
+    return QColor::fromRgba(0xFF26282A);
+}
+
+QColor QQuickBasicStyle::textLightColor() const
+{
+    return QColor::fromRgba(0xFFFFFFFF);
+}
+
+QColor QQuickBasicStyle::textLinkColor() const
+{
+    return QColor::fromRgba(0xFF45A7D7);
+}
+
+QColor QQuickBasicStyle::textSelectionColor() const
+{
+    return QColor::fromRgba(0xFFFDDD5C);
+}
+
+QColor QQuickBasicStyle::textDisabledColor() const
+{
+    return QColor::fromRgba(0xFFBDBEBF);
+}
+
+QColor QQuickBasicStyle::textDisabledLightColor() const
+{
+    return QColor::fromRgba(0xFFC2C2C2);
+}
+
+QColor QQuickBasicStyle::textPlaceholderColor() const
+{
+    return QColor::fromRgba(0xFF777777);
+}
+
+QColor QQuickBasicStyle::focusColor() const
+{
+    return QColor::fromRgba(0xFF0066FF);
+}
+
+QColor QQuickBasicStyle::focusLightColor() const
+{
+    return QColor::fromRgba(0xFFF0F6FF);
+}
+
+QColor QQuickBasicStyle::focusPressedColor() const
+{
+    return QColor::fromRgba(0xFFCCE0FF);
+}
+
+QColor QQuickBasicStyle::buttonColor() const
+{
+    return QColor::fromRgba(0xFFE0E0E0);
+}
+
+QColor QQuickBasicStyle::buttonPressedColor() const
+{
+    return QColor::fromRgba(0xFFD0D0D0);
+}
+
+QColor QQuickBasicStyle::buttonCheckedColor() const
+{
+    return QColor::fromRgba(0xFF353637);
+}
+
+QColor QQuickBasicStyle::buttonCheckedPressedColor() const
+{
+    return QColor::fromRgba(0xFF585A5C);
+}
+
+QColor QQuickBasicStyle::buttonCheckedFocusColor() const
+{
+    return QColor::fromRgba(0xFF599BFF);
+}
+
+QColor QQuickBasicStyle::toolButtonColor() const
+{
+    return QColor::fromRgba(0x33333333);
+}
+
+QColor QQuickBasicStyle::tabButtonColor() const
+{
+    return QColor::fromRgba(0xFF353637);
+}
+
+QColor QQuickBasicStyle::tabButtonPressedColor() const
+{
+    return QColor::fromRgba(0xFF585A5C);
+}
+
+QColor QQuickBasicStyle::tabButtonCheckedPressedColor() const
+{
+    return QColor::fromRgba(0xFFE4E4E4);
+}
+
+QColor QQuickBasicStyle::delegateColor() const
+{
+    return QColor::fromRgba(0xFFEEEEEE);
+}
+
+QColor QQuickBasicStyle::delegatePressedColor() const
+{
+    return QColor::fromRgba(0xFFBDBEBF);
+}
+
+QColor QQuickBasicStyle::delegateFocusColor() const
+{
+    return QColor::fromRgba(0xFFE5EFFF);
+}
+
+QColor QQuickBasicStyle::indicatorPressedColor() const
+{
+    return QColor::fromRgba(0xFFF6F6F6);
+}
+
+QColor QQuickBasicStyle::indicatorDisabledColor() const
+{
+    return QColor::fromRgba(0xFFFDFDFD);
+}
+
+QColor QQuickBasicStyle::indicatorFrameColor() const
+{
+    return QColor::fromRgba(0xFF909090);
+}
+
+QColor QQuickBasicStyle::indicatorFramePressedColor() const
+{
+    return QColor::fromRgba(0xFF808080);
+}
+
+QColor QQuickBasicStyle::indicatorFrameDisabledColor() const
+{
+    return QColor::fromRgba(0xFFD6D6D6);
+}
+
+QColor QQuickBasicStyle::frameDarkColor() const
+{
+    return QColor::fromRgba(0xFF353637);
+}
+
+QColor QQuickBasicStyle::frameLightColor() const
+{
+    return QColor::fromRgba(0xFFBDBEBF);
+}
+
+QColor QQuickBasicStyle::scrollBarColor() const
+{
+    return QColor::fromRgba(0xFFBDBEBF);
+}
+
+QColor QQuickBasicStyle::scrollBarPressedColor() const
+{
+    return QColor::fromRgba(0xFF28282A);
+}
+
+QColor QQuickBasicStyle::progressBarColor() const
+{
+    return QColor::fromRgba(0xFFE4E4E4);
+}
+
+QColor QQuickBasicStyle::pageIndicatorColor() const
+{
+    return QColor::fromRgba(0xFF28282A);
+}
+
+QColor QQuickBasicStyle::separatorColor() const
+{
+    return QColor::fromRgba(0xFFCCCCCC);
+}
+
+QColor QQuickBasicStyle::disabledDarkColor() const
+{
+    return QColor::fromRgba(0xFF353637);
+}
+
+QColor QQuickBasicStyle::disabledLightColor() const
+{
+    return QColor::fromRgba(0xFFBDBEBF);
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickbasicstyle_p.cpp"
diff --git a/src/quickcontrols/basic/qquickbasicstyle_p.h b/src/quickcontrols/basic/qquickbasicstyle_p.h
new file mode 100644
index 0000000000..f543d27e47
--- /dev/null
+++ b/src/quickcontrols/basic/qquickbasicstyle_p.h
@@ -0,0 +1,119 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKBASICSTYLE_P_H
+#define QQUICKBASICSTYLE_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtCore/qobject.h>
+#include <QtGui/qcolor.h>
+#include <QtQml/qqml.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickBasicStyle : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor backgroundColor READ backgroundColor CONSTANT FINAL)
+    Q_PROPERTY(QColor overlayModalColor READ overlayModalColor CONSTANT FINAL)
+    Q_PROPERTY(QColor overlayDimColor READ overlayDimColor CONSTANT FINAL)
+    Q_PROPERTY(QColor textColor READ textColor CONSTANT FINAL)
+    Q_PROPERTY(QColor textDarkColor READ textDarkColor CONSTANT FINAL)
+    Q_PROPERTY(QColor textLightColor READ textLightColor CONSTANT FINAL)
+    Q_PROPERTY(QColor textLinkColor READ textLinkColor CONSTANT FINAL)
+    Q_PROPERTY(QColor textSelectionColor READ textSelectionColor CONSTANT FINAL)
+    Q_PROPERTY(QColor textDisabledColor READ textDisabledColor CONSTANT FINAL)
+    Q_PROPERTY(QColor textDisabledLightColor READ textDisabledLightColor CONSTANT FINAL)
+    Q_PROPERTY(QColor textPlaceholderColor READ textPlaceholderColor CONSTANT FINAL)
+    Q_PROPERTY(QColor focusColor READ focusColor CONSTANT FINAL)
+    Q_PROPERTY(QColor focusLightColor READ focusLightColor CONSTANT FINAL)
+    Q_PROPERTY(QColor focusPressedColor READ focusPressedColor CONSTANT FINAL)
+    Q_PROPERTY(QColor buttonColor READ buttonColor CONSTANT FINAL)
+    Q_PROPERTY(QColor buttonPressedColor READ buttonPressedColor CONSTANT FINAL)
+    Q_PROPERTY(QColor buttonCheckedColor READ buttonCheckedColor CONSTANT FINAL)
+    Q_PROPERTY(QColor buttonCheckedPressedColor READ buttonCheckedPressedColor CONSTANT FINAL)
+    Q_PROPERTY(QColor buttonCheckedFocusColor READ buttonCheckedFocusColor CONSTANT FINAL)
+    Q_PROPERTY(QColor toolButtonColor READ toolButtonColor CONSTANT FINAL)
+    Q_PROPERTY(QColor tabButtonColor READ tabButtonColor CONSTANT FINAL)
+    Q_PROPERTY(QColor tabButtonPressedColor READ tabButtonPressedColor CONSTANT FINAL)
+    Q_PROPERTY(QColor tabButtonCheckedPressedColor READ tabButtonCheckedPressedColor CONSTANT FINAL)
+    Q_PROPERTY(QColor delegateColor READ delegateColor CONSTANT FINAL)
+    Q_PROPERTY(QColor delegatePressedColor READ delegatePressedColor CONSTANT FINAL)
+    Q_PROPERTY(QColor delegateFocusColor READ delegateFocusColor CONSTANT FINAL)
+    Q_PROPERTY(QColor indicatorPressedColor READ indicatorPressedColor CONSTANT FINAL)
+    Q_PROPERTY(QColor indicatorDisabledColor READ indicatorDisabledColor CONSTANT FINAL)
+    Q_PROPERTY(QColor indicatorFrameColor READ indicatorFrameColor CONSTANT FINAL)
+    Q_PROPERTY(QColor indicatorFramePressedColor READ indicatorFramePressedColor CONSTANT FINAL)
+    Q_PROPERTY(QColor indicatorFrameDisabledColor READ indicatorFrameDisabledColor CONSTANT FINAL)
+    Q_PROPERTY(QColor frameDarkColor READ frameDarkColor CONSTANT FINAL)
+    Q_PROPERTY(QColor frameLightColor READ frameLightColor CONSTANT FINAL)
+    Q_PROPERTY(QColor scrollBarColor READ scrollBarColor CONSTANT FINAL)
+    Q_PROPERTY(QColor scrollBarPressedColor READ scrollBarPressedColor CONSTANT FINAL)
+    Q_PROPERTY(QColor progressBarColor READ progressBarColor CONSTANT FINAL)
+    Q_PROPERTY(QColor pageIndicatorColor READ pageIndicatorColor CONSTANT FINAL)
+    Q_PROPERTY(QColor separatorColor READ separatorColor CONSTANT FINAL)
+    Q_PROPERTY(QColor disabledDarkColor READ disabledDarkColor CONSTANT FINAL)
+    Q_PROPERTY(QColor disabledLightColor READ disabledLightColor CONSTANT FINAL)
+    QML_NAMED_ELEMENT(Basic)
+    QML_SINGLETON
+    QML_ADDED_IN_VERSION(2, 1)
+
+public:
+    explicit QQuickBasicStyle(QObject *parent = nullptr);
+
+    QColor backgroundColor() const;
+    QColor overlayModalColor() const;
+    QColor overlayDimColor() const;
+    QColor textColor() const;
+    QColor textDarkColor() const;
+    QColor textLightColor() const;
+    QColor textLinkColor() const;
+    QColor textSelectionColor() const;
+    QColor textDisabledColor() const;
+    QColor textDisabledLightColor() const;
+    QColor textPlaceholderColor() const;
+    QColor focusColor() const;
+    QColor focusLightColor() const;
+    QColor focusPressedColor() const;
+    QColor buttonColor() const;
+    QColor buttonPressedColor() const;
+    QColor buttonCheckedColor() const;
+    QColor buttonCheckedPressedColor() const;
+    QColor buttonCheckedFocusColor() const;
+    QColor toolButtonColor() const;
+    QColor tabButtonColor() const;
+    QColor tabButtonPressedColor() const;
+    QColor tabButtonCheckedPressedColor() const;
+    QColor delegateColor() const;
+    QColor delegatePressedColor() const;
+    QColor delegateFocusColor() const;
+    QColor indicatorPressedColor() const;
+    QColor indicatorDisabledColor() const;
+    QColor indicatorFrameColor() const;
+    QColor indicatorFramePressedColor() const;
+    QColor indicatorFrameDisabledColor() const;
+    QColor frameDarkColor() const;
+    QColor frameLightColor() const;
+    QColor scrollBarColor() const;
+    QColor scrollBarPressedColor() const;
+    QColor progressBarColor() const;
+    QColor pageIndicatorColor() const;
+    QColor separatorColor() const;
+    QColor disabledDarkColor() const;
+    QColor disabledLightColor() const;
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKBASICSTYLE_P_H
diff --git a/src/quickcontrols/basic/qquickbasictheme.cpp b/src/quickcontrols/basic/qquickbasictheme.cpp
new file mode 100644
index 0000000000..7884ad102e
--- /dev/null
+++ b/src/quickcontrols/basic/qquickbasictheme.cpp
@@ -0,0 +1,58 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickbasictheme_p.h"
+
+#include <QtQuickTemplates2/private/qquicktheme_p.h>
+
+QT_BEGIN_NAMESPACE
+
+void QQuickBasicTheme::initialize(QQuickTheme *theme)
+{
+    QPalette systemPalette;
+
+    systemPalette.setColor(QPalette::Base, QColor::fromRgba(0xFFFFFFFF));
+    systemPalette.setColor(QPalette::Disabled, QPalette::Base, QColor::fromRgba(0xFFD6D6D6));
+
+    systemPalette.setColor(QPalette::Button, QColor::fromRgba(0xFFE0E0E0));
+
+    systemPalette.setColor(QPalette::ButtonText, QColor::fromRgba(0xFF26282A));
+    systemPalette.setColor(QPalette::Disabled, QPalette::ButtonText, QColor::fromRgba(0x4D26282A));
+
+    systemPalette.setColor(QPalette::BrightText, QColor::fromRgba(0xFFFFFFFF));
+    systemPalette.setColor(QPalette::Disabled, QPalette::BrightText, QColor::fromRgba(0x4DFFFFFF));
+
+    systemPalette.setColor(QPalette::Dark, QColor::fromRgba(0xFF353637));
+
+    systemPalette.setColor(QPalette::Highlight, QColor::fromRgba(0xFF0066FF));
+    systemPalette.setColor(QPalette::Disabled, QPalette::Highlight, QColor::fromRgba(0xFFF0F6FF));
+
+    systemPalette.setColor(QPalette::HighlightedText, QColor::fromRgba(0xFF090909));
+
+    systemPalette.setColor(QPalette::Light, QColor::fromRgba(0xFFF6F6F6));
+
+    systemPalette.setColor(QPalette::Link, QColor::fromRgba(0xFF45A7D7));
+
+    systemPalette.setColor(QPalette::Mid, QColor::fromRgba(0xFFBDBDBD));
+
+    systemPalette.setColor(QPalette::Midlight, QColor::fromRgba(0xFFE4E4E4));
+
+    systemPalette.setColor(QPalette::Text, QColor::fromRgba(0xFF353637));
+    systemPalette.setColor(QPalette::Disabled, QPalette::Text, QColor::fromRgba(0x7F353637));
+
+    systemPalette.setColor(QPalette::Shadow, QColor::fromRgba(0xFF28282A));
+
+    systemPalette.setColor(QPalette::ToolTipBase, QColor::fromRgba(0xFFFFFFFF));
+    systemPalette.setColor(QPalette::ToolTipText, QColor::fromRgba(0xFF000000));
+
+    systemPalette.setColor(QPalette::Window, QColor::fromRgba(0xFFFFFFFF));
+
+    systemPalette.setColor(QPalette::WindowText, QColor::fromRgba(0xFF26282A));
+    systemPalette.setColor(QPalette::Disabled, QPalette::WindowText, QColor::fromRgba(0xFFBDBEBF));
+
+    systemPalette.setColor(QPalette::PlaceholderText, QColor::fromRgba(0x88353637));
+
+    theme->setPalette(QQuickTheme::System, systemPalette);
+}
+
+QT_END_NAMESPACE
diff --git a/src/quickcontrols/basic/qquickbasictheme_p.h b/src/quickcontrols/basic/qquickbasictheme_p.h
new file mode 100644
index 0000000000..710c57f074
--- /dev/null
+++ b/src/quickcontrols/basic/qquickbasictheme_p.h
@@ -0,0 +1,32 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKBASICTHEME_P_H
+#define QQUICKBASICTHEME_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickTheme;
+
+class QQuickBasicTheme
+{
+public:
+    static void initialize(QQuickTheme *theme);
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKBASICTHEME_P_H
diff --git a/src/quickcontrols/basic/qtquickcontrols2basicstyleplugin.cpp b/src/quickcontrols/basic/qtquickcontrols2basicstyleplugin.cpp
new file mode 100644
index 0000000000..57c52fff27
--- /dev/null
+++ b/src/quickcontrols/basic/qtquickcontrols2basicstyleplugin.cpp
@@ -0,0 +1,47 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickbasicstyle_p.h"
+#include "qquickbasictheme_p.h"
+
+#include <QtQuickControls2/private/qquickstyleplugin_p.h>
+#include <QtQuickTemplates2/private/qquicktheme_p.h>
+
+QT_BEGIN_NAMESPACE
+
+extern void qml_register_types_QtQuick_Controls_Basic();
+Q_GHS_KEEP_REFERENCE(qml_register_types_QtQuick_Controls_Basic);
+
+class QtQuickControls2BasicStylePlugin: public QQuickStylePlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtQuickControls2BasicStylePlugin(QObject *parent = nullptr);
+
+    QString name() const override;
+    void initializeTheme(QQuickTheme *theme) override;
+
+    QQuickBasicTheme theme;
+};
+
+QtQuickControls2BasicStylePlugin::QtQuickControls2BasicStylePlugin(QObject *parent) : QQuickStylePlugin(parent)
+{
+    volatile auto registration = &qml_register_types_QtQuick_Controls_Basic;
+    Q_UNUSED(registration);
+}
+
+QString QtQuickControls2BasicStylePlugin::name() const
+{
+    return QStringLiteral("Basic");
+}
+
+void QtQuickControls2BasicStylePlugin::initializeTheme(QQuickTheme *theme)
+{
+    this->theme.initialize(theme);
+}
+
+QT_END_NAMESPACE
+
+#include "qtquickcontrols2basicstyleplugin.moc"
diff --git a/src/quickcontrols/configure.cmake b/src/quickcontrols/configure.cmake
new file mode 100644
index 0000000000..e713e73f7c
--- /dev/null
+++ b/src/quickcontrols/configure.cmake
@@ -0,0 +1,71 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+
+
+#### Inputs
+
+
+
+#### Libraries
+
+
+
+#### Tests
+
+
+
+#### Features
+
+qt_feature("quickcontrols2-basic" PRIVATE
+    LABEL "Basic"
+)
+qt_feature("quickcontrols2-fusion" PRIVATE
+    SECTION "Quick Controls 2"
+    LABEL "Fusion"
+    PURPOSE "Provides the platform agnostic desktop-oriented Fusion style."
+    CONDITION QT_FEATURE_quickcontrols2_basic
+)
+qt_feature("quickcontrols2-imagine" PRIVATE
+    SECTION "Quick Controls 2"
+    LABEL "Imagine"
+    PURPOSE "Provides a style based on configurable image assets."
+    CONDITION QT_FEATURE_quickcontrols2_basic
+)
+qt_feature("quickcontrols2-material" PRIVATE
+    SECTION "Quick Controls 2"
+    LABEL "Material"
+    PURPOSE "Provides a style based on the Material Design guidelines."
+    CONDITION QT_FEATURE_quickcontrols2_basic
+)
+qt_feature("quickcontrols2-universal" PRIVATE
+    SECTION "Quick Controls 2"
+    LABEL "Universal"
+    PURPOSE "Provides a style based on the Universal Design guidelines."
+    CONDITION QT_FEATURE_quickcontrols2_basic
+)
+qt_feature("quickcontrols2-macos" PRIVATE
+    SECTION "Quick Controls 2"
+    LABEL "macOS"
+    PURPOSE "Provides a native macOS desktop style."
+    CONDITION QT_FEATURE_quickcontrols2_basic
+)
+qt_feature("quickcontrols2-ios" PRIVATE
+    SECTION "Quick Controls 2"
+    LABEL "iOS"
+    PURPOSE "Provides a native-looking iOS style."
+    CONDITION QT_FEATURE_quickcontrols2_basic
+)
+qt_feature("quickcontrols2-windows" PRIVATE
+    SECTION "Quick Controls 2"
+    LABEL "Windows"
+    PURPOSE "Provides a native Windows desktop style."
+    CONDITION QT_FEATURE_quickcontrols2_basic
+)
+qt_configure_add_summary_section(NAME "Qt Quick Controls 2")
+qt_configure_add_summary_entry(
+    TYPE "featureList"
+    ARGS "quickcontrols2-basic quickcontrols2-fusion quickcontrols2-imagine quickcontrols2-ios quickcontrols2-material quickcontrols2-universal quickcontrols2-macos quickcontrols2-windows"
+    MESSAGE "Styles"
+)
+qt_configure_end_summary_section() # end of "Qt Quick Controls 2" section
diff --git a/src/quickcontrols/designer/AbstractButtonSection.qml b/src/quickcontrols/designer/AbstractButtonSection.qml
new file mode 100644
index 0000000000..c7684c20d0
--- /dev/null
+++ b/src/quickcontrols/designer/AbstractButtonSection.qml
@@ -0,0 +1,89 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    caption: qsTr("AbstractButton")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Text")
+            tooltip: qsTr("The text displayed on the button.")
+        }
+        SecondColumnLayout {
+            LineEdit {
+                backendValue: backendValues.text
+                Layout.fillWidth: true
+            }
+        }
+
+         Label {
+            text: qsTr("Display")
+            tooltip: qsTr("Determines how the icon and text are displayed within the button.")
+            disabledState: !backendValues.display.isAvailable
+        }
+        SecondColumnLayout {
+            ComboBox {
+                backendValue: backendValues.display
+                model: [ "IconOnly", "TextOnly", "TextBesideIcon" ]
+                scope: "AbstractButton"
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+
+        Label {
+            visible: checkable
+            text: qsTr("Checkable")
+            tooltip: qsTr("Whether the button is checkable.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.checkable.valueToString
+                backendValue: backendValues.checkable
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Checked")
+            tooltip: qsTr("Whether the button is checked.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.checked.valueToString
+                backendValue: backendValues.checked
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Exclusive")
+            tooltip: qsTr("Whether the button is exclusive.")
+            disabledState: !backendValues.autoExclusive.isAvailable
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.autoExclusive.valueToString
+                backendValue: backendValues.autoExclusive
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+
+        Label {
+            text: qsTr("Auto-Repeat")
+            tooltip: qsTr("Whether the button repeats pressed(), released() and clicked() signals while the button is pressed and held down.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.autoRepeat.valueToString
+                backendValue: backendValues.autoRepeat
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/BusyIndicatorSpecifics.qml b/src/quickcontrols/designer/BusyIndicatorSpecifics.qml
new file mode 100644
index 0000000000..8e0021fc71
--- /dev/null
+++ b/src/quickcontrols/designer/BusyIndicatorSpecifics.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("BusyIndicator")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Running")
+                tooltip: qsTr("Whether the busy indicator is currently indicating activity.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.running.valueToString
+                    backendValue: backendValues.running
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ButtonSection.qml b/src/quickcontrols/designer/ButtonSection.qml
new file mode 100644
index 0000000000..d338bd2990
--- /dev/null
+++ b/src/quickcontrols/designer/ButtonSection.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    id: section
+    caption: qsTr("Button")
+
+    SectionLayout {
+
+        Label {
+            text: qsTr("Flat")
+            tooltip: qsTr("Whether the button is flat.")
+            disabledState: !backendValues.flat.isAvailable
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.flat.valueToString
+                backendValue: backendValues.flat
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+        Label {
+            text: qsTr("Highlighted")
+            tooltip: qsTr("Whether the button is highlighted.")
+            disabledState: !backendValues.highlighted.isAvailable
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.highlighted.valueToString
+                backendValue: backendValues.highlighted
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/ButtonSpecifics.qml b/src/quickcontrols/designer/ButtonSpecifics.qml
new file mode 100644
index 0000000000..1de3c0a3c2
--- /dev/null
+++ b/src/quickcontrols/designer/ButtonSpecifics.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ButtonSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/CMakeLists.txt b/src/quickcontrols/designer/CMakeLists.txt
new file mode 100644
index 0000000000..5576d42bd3
--- /dev/null
+++ b/src/quickcontrols/designer/CMakeLists.txt
@@ -0,0 +1,64 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+file(GLOB_RECURSE __aux_qml_glob_files
+    RELATIVE "${CMAKE_CURRENT_SOURCE_DIR}"
+    "images/*.png"
+)
+qt_path_join(images_destination ${QT_INSTALL_DIR} "${INSTALL_QMLDIR}/QtQuick/Controls/designer/images")
+qt_copy_or_install(
+    FILES
+        ${__aux_qml_glob_files}
+    DESTINATION "${images_destination}"
+)
+qt_path_join(destination ${QT_INSTALL_DIR} "${INSTALL_QMLDIR}/QtQuick/Controls/designer")
+qt_copy_or_install(
+    FILES
+        AbstractButtonSection.qml
+        BusyIndicatorSpecifics.qml
+        ButtonSection.qml
+        ButtonSpecifics.qml
+        CheckBoxSpecifics.qml
+        CheckDelegateSpecifics.qml
+        CheckSection.qml
+        ComboBoxSpecifics.qml
+        ContainerSection.qml
+        ControlSection.qml
+        ControlSpecifics.qml
+        DelayButtonSpecifics.qml
+        DialSpecifics.qml
+        FrameSpecifics.qml
+        GroupBoxSpecifics.qml
+        InsetSection.qml
+        ItemDelegateSection.qml
+        ItemDelegateSpecifics.qml
+        LabelSpecifics.qml
+        PaddingSection.qml
+        PageIndicatorSpecifics.qml
+        PageSpecifics.qml
+        PaneSection.qml
+        PaneSpecifics.qml
+        ProgressBarSpecifics.qml
+        RadioButtonSpecifics.qml
+        RadioDelegateSpecifics.qml
+        RangeSliderSpecifics.qml
+        RoundButtonSpecifics.qml
+        ScrollViewSpecifics.qml
+        SliderSpecifics.qml
+        SpinBoxSpecifics.qml
+        StackViewSpecifics.qml
+        SwipeDelegateSpecifics.qml
+        SwipeViewSpecifics.qml
+        SwitchDelegateSpecifics.qml
+        SwitchSpecifics.qml
+        TabBarSpecifics.qml
+        TabButtonSpecifics.qml
+        TextAreaSpecifics.qml
+        TextFieldSpecifics.qml
+        ToolBarSpecifics.qml
+        ToolButtonSpecifics.qml
+        ToolSeparatorSpecifics.qml
+        TumblerSpecifics.qml
+        qtquickcontrols2.metainfo
+    DESTINATION "${destination}"
+)
diff --git a/src/quickcontrols/designer/CheckBoxSpecifics.qml b/src/quickcontrols/designer/CheckBoxSpecifics.qml
new file mode 100644
index 0000000000..497a66858f
--- /dev/null
+++ b/src/quickcontrols/designer/CheckBoxSpecifics.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    CheckSection {
+        width: parent.width
+        caption: qsTr("CheckBox")
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/CheckDelegateSpecifics.qml b/src/quickcontrols/designer/CheckDelegateSpecifics.qml
new file mode 100644
index 0000000000..2f959b86f5
--- /dev/null
+++ b/src/quickcontrols/designer/CheckDelegateSpecifics.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    CheckSection {
+        width: parent.width
+        caption: qsTr("CheckDelegate")
+    }
+
+    ItemDelegateSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/CheckSection.qml b/src/quickcontrols/designer/CheckSection.qml
new file mode 100644
index 0000000000..b58d6a27ce
--- /dev/null
+++ b/src/quickcontrols/designer/CheckSection.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    SectionLayout {
+        Label {
+            text: qsTr("Check State")
+            tooltip: qsTr("The current check state.")
+        }
+        SecondColumnLayout {
+            ComboBox {
+                backendValue: backendValues.checkState
+                model: [ "Unchecked", "PartiallyChecked", "Checked" ]
+                scope: "Qt"
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Tri-state")
+            tooltip: qsTr("Whether the checkbox has three states.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.tristate.valueToString
+                backendValue: backendValues.tristate
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/ComboBoxSpecifics.qml b/src/quickcontrols/designer/ComboBoxSpecifics.qml
new file mode 100644
index 0000000000..9700bc5fd9
--- /dev/null
+++ b/src/quickcontrols/designer/ComboBoxSpecifics.qml
@@ -0,0 +1,86 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("ComboBox")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Text Role")
+                tooltip: qsTr("The model role used for displaying text.")
+            }
+            SecondColumnLayout {
+                LineEdit {
+                    backendValue: backendValues.textRole
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Current")
+                tooltip: qsTr("The index of the current item.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.currentIndex
+                    Layout.fillWidth: true
+                }
+            }
+        Label {
+            text: qsTr("Editable")
+            tooltip: qsTr("Whether the combo box is editable.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.editable.valueToString
+                backendValue: backendValues.editable
+                Layout.fillWidth: true
+            }
+        }
+        Label {
+            text: qsTr("Flat")
+            tooltip: qsTr("Whether the combo box button is flat.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.flat.valueToString
+                backendValue: backendValues.flat
+                Layout.fillWidth: true
+            }
+        }
+        Label {
+                text: qsTr("DisplayText")
+                tooltip: qsTr("Holds the text that is displayed on the combo box button.")
+            }
+            SecondColumnLayout {
+                LineEdit {
+                    backendValue: backendValues.displayText
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ContainerSection.qml b/src/quickcontrols/designer/ContainerSection.qml
new file mode 100644
index 0000000000..93618cb5bf
--- /dev/null
+++ b/src/quickcontrols/designer/ContainerSection.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    caption: qsTr("Container")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Current")
+            tooltip: qsTr("The index of the current item.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.currentIndex
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/ControlSection.qml b/src/quickcontrols/designer/ControlSection.qml
new file mode 100644
index 0000000000..c7f6283ea7
--- /dev/null
+++ b/src/quickcontrols/designer/ControlSection.qml
@@ -0,0 +1,81 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    caption: qsTr("Control")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Enabled")
+            tooltip: qsTr("Whether the control is enabled.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.enabled.valueToString
+                backendValue: backendValues.enabled
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Focus Policy")
+            tooltip: qsTr("Focus policy of the control.")
+            disabledState: !backendValues.focusPolicy.isAvailable
+        }
+        SecondColumnLayout {
+            ComboBox {
+                backendValue: backendValues.focusPolicy
+                model: [ "TabFocus", "ClickFocus", "StrongFocus", "WheelFocus", "NoFocus" ]
+                scope: "Qt"
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+
+        Label {
+            text: qsTr("Hover")
+            tooltip: qsTr("Whether control accepts hover events.")
+            disabledState: !backendValues.hoverEnabled.isAvailable
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.hoverEnabled.valueToString
+                backendValue: backendValues.hoverEnabled
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+
+        Label {
+            text: qsTr("Spacing")
+            tooltip: qsTr("Spacing between internal elements of the control.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.spacing
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Wheel")
+            tooltip: qsTr("Whether control accepts wheel events.")
+            disabledState: !backendValues.wheelEnabled.isAvailable
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.wheelEnabled.valueToString
+                backendValue: backendValues.wheelEnabled
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/ControlSpecifics.qml b/src/quickcontrols/designer/ControlSpecifics.qml
new file mode 100644
index 0000000000..c7c34a4ae1
--- /dev/null
+++ b/src/quickcontrols/designer/ControlSpecifics.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/DelayButtonSpecifics.qml b/src/quickcontrols/designer/DelayButtonSpecifics.qml
new file mode 100644
index 0000000000..309075d2b7
--- /dev/null
+++ b/src/quickcontrols/designer/DelayButtonSpecifics.qml
@@ -0,0 +1,48 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("DelayButton")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Delay")
+                tooltip: qsTr("The delay in milliseconds.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 9999999
+                    decimals: 0
+                    stepSize: 1
+                    backendValue: backendValues.delay
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/DialSpecifics.qml b/src/quickcontrols/designer/DialSpecifics.qml
new file mode 100644
index 0000000000..c0fd3df2ed
--- /dev/null
+++ b/src/quickcontrols/designer/DialSpecifics.qml
@@ -0,0 +1,139 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Dial")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Value")
+                tooltip: qsTr("The current value of the dial.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.value
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value of the dial range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.from
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value of the dial range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.to
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Step Size")
+                tooltip: qsTr("The step size of the dial.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.stepSize
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Snap Mode")
+                tooltip: qsTr("The snap mode of the dial.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.snapMode
+                    model: [ "NoSnap", "SnapOnRelease", "SnapAlways" ]
+                    scope: "Dial"
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Live")
+                tooltip: qsTr("Whether the dial provides live value updates.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.live.valueToString
+                    backendValue: backendValues.live
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Input Mode")
+                tooltip: qsTr("How the dial tracks movement.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.inputMode
+                    model: [ "Circular", "Horizontal", "Vertical" ]
+                    scope: "Dial"
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Wrap")
+                tooltip: qsTr("Whether the dial wraps when dragged.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.wrap.valueToString
+                    backendValue: backendValues.wrap
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/FrameSpecifics.qml b/src/quickcontrols/designer/FrameSpecifics.qml
new file mode 100644
index 0000000000..a7a0acaf4a
--- /dev/null
+++ b/src/quickcontrols/designer/FrameSpecifics.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    PaneSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/GroupBoxSpecifics.qml b/src/quickcontrols/designer/GroupBoxSpecifics.qml
new file mode 100644
index 0000000000..29f826efff
--- /dev/null
+++ b/src/quickcontrols/designer/GroupBoxSpecifics.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("GroupBox")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Title")
+                tooltip: qsTr("The title of the group box.")
+            }
+            SecondColumnLayout {
+                LineEdit {
+                    backendValue: backendValues.title
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    PaneSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/InsetSection.qml b/src/quickcontrols/designer/InsetSection.qml
new file mode 100644
index 0000000000..125cc011ef
--- /dev/null
+++ b/src/quickcontrols/designer/InsetSection.qml
@@ -0,0 +1,86 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    caption: qsTr("Inset")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Vertical")
+        }
+        SecondColumnLayout {
+            Label {
+                text: qsTr("Top")
+                tooltip: qsTr("Top inset for the background.")
+                width: 42
+            }
+            SpinBox {
+                maximumValue: 10000
+                minimumValue: -10000
+                realDragRange: 5000
+                decimals: 0
+                backendValue: backendValues.topInset
+                Layout.fillWidth: true
+            }
+            Item {
+                width: 4
+                height: 4
+            }
+
+            Label {
+                text: qsTr("Bottom")
+                tooltip: qsTr("Bottom inset for the background.")
+                width: 42
+            }
+            SpinBox {
+                maximumValue: 10000
+                minimumValue: -10000
+                realDragRange: 5000
+                decimals: 0
+                backendValue: backendValues.bottomInset
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Horizontal")
+        }
+        SecondColumnLayout {
+            Label {
+                text: qsTr("Left")
+                tooltip: qsTr("Left inset for the background.")
+                width: 42
+            }
+            SpinBox {
+                maximumValue: 10000
+                minimumValue: -10000
+                realDragRange: 5000
+                decimals: 0
+                backendValue: backendValues.leftInset
+                Layout.fillWidth: true
+            }
+            Item {
+                width: 4
+                height: 4
+            }
+
+            Label {
+                text: qsTr("Right")
+                tooltip: qsTr("Right inset for the background.")
+                width: 42
+            }
+            SpinBox {
+                maximumValue: 10000
+                minimumValue: -10000
+                realDragRange: 5000
+                decimals: 0
+                backendValue: backendValues.rightInset
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/ItemDelegateSection.qml b/src/quickcontrols/designer/ItemDelegateSection.qml
new file mode 100644
index 0000000000..1d6c45606a
--- /dev/null
+++ b/src/quickcontrols/designer/ItemDelegateSection.qml
@@ -0,0 +1,25 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    id: section
+    caption: qsTr("ItemDelegate")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Highlighted")
+            tooltip: qsTr("Whether the delegate is highlighted.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.highlighted.valueToString
+                backendValue: backendValues.highlighted
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/ItemDelegateSpecifics.qml b/src/quickcontrols/designer/ItemDelegateSpecifics.qml
new file mode 100644
index 0000000000..e80bc01528
--- /dev/null
+++ b/src/quickcontrols/designer/ItemDelegateSpecifics.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ItemDelegateSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/LabelSpecifics.qml b/src/quickcontrols/designer/LabelSpecifics.qml
new file mode 100644
index 0000000000..932922573a
--- /dev/null
+++ b/src/quickcontrols/designer/LabelSpecifics.qml
@@ -0,0 +1,53 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    StandardTextSection {
+        width: parent.width
+        showIsWrapping: true
+        showFormatProperty: true
+        showVerticalAlignment: true
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Text Color")
+
+        ColorEditor {
+            caption: qsTr("Text Color")
+            backendValue: backendValues.color
+            supportGradient: false
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Style Color")
+
+        ColorEditor {
+            caption: qsTr("Style Color")
+            backendValue: backendValues.styleColor
+            supportGradient: false
+        }
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+
+    InsetSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/PaddingSection.qml b/src/quickcontrols/designer/PaddingSection.qml
new file mode 100644
index 0000000000..d921d2878f
--- /dev/null
+++ b/src/quickcontrols/designer/PaddingSection.qml
@@ -0,0 +1,68 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    caption: qsTr("Padding")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Top")
+            tooltip: qsTr("Padding between the content and the top edge of the control.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.topPadding
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Left")
+            tooltip: qsTr("Padding between the content and the left edge of the control.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.leftPadding
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Right")
+            tooltip: qsTr("Padding between the content and the right edge of the control.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.rightPadding
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Bottom")
+            tooltip: qsTr("Padding between the content and the bottom edge of the control.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.bottomPadding
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/PageIndicatorSpecifics.qml b/src/quickcontrols/designer/PageIndicatorSpecifics.qml
new file mode 100644
index 0000000000..65d9031025
--- /dev/null
+++ b/src/quickcontrols/designer/PageIndicatorSpecifics.qml
@@ -0,0 +1,65 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("PageIndicator")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Count")
+                tooltip: qsTr("The number of pages.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.count
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Current")
+                tooltip: qsTr("The index of the current page.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.currentIndex
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Interactive")
+                tooltip: qsTr("Whether the control is interactive.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.interactive.valueToString
+                    backendValue: backendValues.interactive
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/PageSpecifics.qml b/src/quickcontrols/designer/PageSpecifics.qml
new file mode 100644
index 0000000000..c4b8027b69
--- /dev/null
+++ b/src/quickcontrols/designer/PageSpecifics.qml
@@ -0,0 +1,68 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Page")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Title")
+                tooltip: qsTr("Title of the page.")
+            }
+            SecondColumnLayout {
+                LineEdit {
+                    backendValue: backendValues.title
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Content Width")
+                tooltip: qsTr("Content height used for calculating the total implicit width.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentWidth
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Content Height")
+                tooltip: qsTr("Content height used for calculating the total implicit height.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentHeight
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/PaneSection.qml b/src/quickcontrols/designer/PaneSection.qml
new file mode 100644
index 0000000000..7710198f19
--- /dev/null
+++ b/src/quickcontrols/designer/PaneSection.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    caption: qsTr("Pane")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Content Width")
+            tooltip: qsTr("Content height used for calculating the total implicit width.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.contentWidth
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Content Height")
+            tooltip: qsTr("Content height used for calculating the total implicit height.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.contentHeight
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/PaneSpecifics.qml b/src/quickcontrols/designer/PaneSpecifics.qml
new file mode 100644
index 0000000000..a7a0acaf4a
--- /dev/null
+++ b/src/quickcontrols/designer/PaneSpecifics.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    PaneSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ProgressBarSpecifics.qml b/src/quickcontrols/designer/ProgressBarSpecifics.qml
new file mode 100644
index 0000000000..9a604d4037
--- /dev/null
+++ b/src/quickcontrols/designer/ProgressBarSpecifics.qml
@@ -0,0 +1,88 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("ProgressBar")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Indeterminate")
+                tooltip: qsTr("Whether the progress is indeterminate.")
+                disabledState: !backendValues.indeterminate.isAvailable
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.indeterminate.valueToString
+                    backendValue: backendValues.indeterminate
+                    Layout.fillWidth: true
+                    enabled: backendValue.isAvailable
+                }
+            }
+
+            Label {
+                text: qsTr("Value")
+                tooltip: qsTr("The current value of the progress.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.value
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value for the progress.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.from
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value for the progress.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.to
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/RadioButtonSpecifics.qml b/src/quickcontrols/designer/RadioButtonSpecifics.qml
new file mode 100644
index 0000000000..ecfd4cf406
--- /dev/null
+++ b/src/quickcontrols/designer/RadioButtonSpecifics.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/RadioDelegateSpecifics.qml b/src/quickcontrols/designer/RadioDelegateSpecifics.qml
new file mode 100644
index 0000000000..e80bc01528
--- /dev/null
+++ b/src/quickcontrols/designer/RadioDelegateSpecifics.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ItemDelegateSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/RangeSliderSpecifics.qml b/src/quickcontrols/designer/RangeSliderSpecifics.qml
new file mode 100644
index 0000000000..cb66eec393
--- /dev/null
+++ b/src/quickcontrols/designer/RangeSliderSpecifics.qml
@@ -0,0 +1,156 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("RangeSlider")
+
+        SectionLayout {
+            Label {
+                text: qsTr("First Value")
+                tooltip: qsTr("The value of the first range slider handle.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.first_value
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Second Value")
+                tooltip: qsTr("The value of the second range slider handle.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.second_value
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value of the range slider range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.from
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value of the range slider range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.to
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Step Size")
+                tooltip: qsTr("The step size of the range slider.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.stepSize
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Snap Mode")
+                tooltip: qsTr("The snap mode of the range slider.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.snapMode
+                    model: [ "NoSnap", "SnapOnRelease", "SnapAlways" ]
+                    scope: "RangeSlider"
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Orientation")
+                tooltip: qsTr("The orientation of the range slider.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.orientation
+                    model: [ "Horizontal", "Vertical" ]
+                    scope: "Qt"
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Live")
+                tooltip: qsTr("Whether the range slider provides live value updates.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.live.valueToString
+                    backendValue: backendValues.live
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Touch drag threshold")
+                tooltip: qsTr("The threshold (in logical pixels) at which a touch drag event will be initiated.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 10000
+                    decimals: 0
+                    backendValue: backendValues.touchDragThreshold
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/RoundButtonSpecifics.qml b/src/quickcontrols/designer/RoundButtonSpecifics.qml
new file mode 100644
index 0000000000..45c617bc94
--- /dev/null
+++ b/src/quickcontrols/designer/RoundButtonSpecifics.qml
@@ -0,0 +1,51 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("RoundButton")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Radius")
+                tooltip: qsTr("Radius of the button.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 10000
+                    decimals: 0
+                    backendValue: backendValues.radius
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ButtonSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ScrollViewSpecifics.qml b/src/quickcontrols/designer/ScrollViewSpecifics.qml
new file mode 100644
index 0000000000..c2623a0966
--- /dev/null
+++ b/src/quickcontrols/designer/ScrollViewSpecifics.qml
@@ -0,0 +1,57 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("ScrollView")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Content Width")
+                tooltip: qsTr("Content height used for calculating the total implicit width.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentWidth
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Content Height")
+                tooltip: qsTr("Content height used for calculating the total implicit height.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentHeight
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/SliderSpecifics.qml b/src/quickcontrols/designer/SliderSpecifics.qml
new file mode 100644
index 0000000000..a2fada6f52
--- /dev/null
+++ b/src/quickcontrols/designer/SliderSpecifics.qml
@@ -0,0 +1,147 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Slider")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Value")
+                tooltip: qsTr("The current value of the slider.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.value
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value of the slider range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.from
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value of the slider range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.to
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Step Size")
+                tooltip: qsTr("The step size of the slider.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.stepSize
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Snap Mode")
+                tooltip: qsTr("The snap mode of the slider.")
+                disabledState: !backendValues.snapMode.isAvailable
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.snapMode
+                    model: [ "NoSnap", "SnapOnRelease", "SnapAlways" ]
+                    scope: "Slider"
+                    Layout.fillWidth: true
+                    enabled: backendValue.isAvailable
+                }
+            }
+
+            Label {
+                text: qsTr("Orientation")
+                tooltip: qsTr("The orientation of the slider.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.orientation
+                    model: [ "Horizontal", "Vertical" ]
+                    scope: "Qt"
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Live")
+                tooltip: qsTr("Whether the slider provides live value updates.")
+                disabledState: !backendValues.live.isAvailable
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.live.valueToString
+                    backendValue: backendValues.live
+                    Layout.fillWidth: true
+                    enabled: backendValue.isAvailable
+                }
+            }
+
+            Label {
+                text: qsTr("Touch drag threshold")
+                tooltip: qsTr("The threshold (in logical pixels) at which a touch drag event will be initiated.")
+                disabledState: !backendValues.touchDragThreshold.isAvailable
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 10000
+                    decimals: 0
+                    backendValue: backendValues.touchDragThreshold
+                    Layout.fillWidth: true
+                    enabled: backendValue.isAvailable
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/SpinBoxSpecifics.qml b/src/quickcontrols/designer/SpinBoxSpecifics.qml
new file mode 100644
index 0000000000..6bd28bb880
--- /dev/null
+++ b/src/quickcontrols/designer/SpinBoxSpecifics.qml
@@ -0,0 +1,109 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("SpinBox")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Value")
+                tooltip: qsTr("The current value of the spinbox.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    backendValue: backendValues.value
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value of the spinbox range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    backendValue: backendValues.from
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value of the spinbox range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    backendValue: backendValues.to
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Step Size")
+                tooltip: qsTr("The step size of the spinbox.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    backendValue: backendValues.stepSize
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Editable")
+                tooltip: qsTr("Whether the spinbox is editable.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.editable.valueToString
+                    backendValue: backendValues.editable
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Wrap")
+                tooltip: qsTr("Whether the spinbox wraps.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.wrap.valueToString
+                    backendValue: backendValues.wrap
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/StackViewSpecifics.qml b/src/quickcontrols/designer/StackViewSpecifics.qml
new file mode 100644
index 0000000000..c7c34a4ae1
--- /dev/null
+++ b/src/quickcontrols/designer/StackViewSpecifics.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/SwipeDelegateSpecifics.qml b/src/quickcontrols/designer/SwipeDelegateSpecifics.qml
new file mode 100644
index 0000000000..e80bc01528
--- /dev/null
+++ b/src/quickcontrols/designer/SwipeDelegateSpecifics.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ItemDelegateSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/SwipeViewSpecifics.qml b/src/quickcontrols/designer/SwipeViewSpecifics.qml
new file mode 100644
index 0000000000..70882e2832
--- /dev/null
+++ b/src/quickcontrols/designer/SwipeViewSpecifics.qml
@@ -0,0 +1,58 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("SwipeView")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Interactive")
+                tooltip: qsTr("Whether the view is interactive.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.interactive.valueToString
+                    backendValue: backendValues.interactive
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Orientation")
+                tooltip: qsTr("Orientation of the view.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.orientation
+                    model: [ "Horizontal", "Vertical" ]
+                    scope: "Qt"
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ContainerSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/SwitchDelegateSpecifics.qml b/src/quickcontrols/designer/SwitchDelegateSpecifics.qml
new file mode 100644
index 0000000000..d3d600f462
--- /dev/null
+++ b/src/quickcontrols/designer/SwitchDelegateSpecifics.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ItemDelegateSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/SwitchSpecifics.qml b/src/quickcontrols/designer/SwitchSpecifics.qml
new file mode 100644
index 0000000000..ecfd4cf406
--- /dev/null
+++ b/src/quickcontrols/designer/SwitchSpecifics.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/TabBarSpecifics.qml b/src/quickcontrols/designer/TabBarSpecifics.qml
new file mode 100644
index 0000000000..1a5b08e528
--- /dev/null
+++ b/src/quickcontrols/designer/TabBarSpecifics.qml
@@ -0,0 +1,74 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("TabBar")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Position")
+                tooltip: qsTr("Position of the tabbar.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.position
+                    model: [ "Header", "Footer" ]
+                    scope: "TabBar"
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Content Width")
+                tooltip: qsTr("Content height used for calculating the total implicit width.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentWidth
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Content Height")
+                tooltip: qsTr("Content height used for calculating the total implicit height.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentHeight
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ContainerSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/TabButtonSpecifics.qml b/src/quickcontrols/designer/TabButtonSpecifics.qml
new file mode 100644
index 0000000000..ecfd4cf406
--- /dev/null
+++ b/src/quickcontrols/designer/TabButtonSpecifics.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/TextAreaSpecifics.qml b/src/quickcontrols/designer/TextAreaSpecifics.qml
new file mode 100644
index 0000000000..faec481eb8
--- /dev/null
+++ b/src/quickcontrols/designer/TextAreaSpecifics.qml
@@ -0,0 +1,71 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("TextArea")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Placeholder")
+                tooltip: qsTr("Placeholder text displayed when the editor is empty.")
+            }
+            SecondColumnLayout {
+                LineEdit {
+                    backendValue: backendValues.placeholderText
+                    Layout.fillWidth: true
+                }
+
+            }
+
+            Label {
+                text: qsTr("Hover")
+                tooltip: qsTr("Whether text area accepts hover events.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.hoverEnabled.valueToString
+                    backendValue: backendValues.hoverEnabled
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    Section {
+        width: parent.width
+        caption: qsTr("Placeholder Text Color")
+
+        ColorEditor {
+            caption: qsTr("Placeholder Text Color")
+            backendValue: backendValues.placeholderTextColor
+            supportGradient: false
+        }
+    }
+
+    StandardTextSection {
+        width: parent.width
+        showIsWrapping: true
+        showFormatProperty: true
+        showVerticalAlignment: true
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+
+    InsetSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/TextFieldSpecifics.qml b/src/quickcontrols/designer/TextFieldSpecifics.qml
new file mode 100644
index 0000000000..54dcefb3b1
--- /dev/null
+++ b/src/quickcontrols/designer/TextFieldSpecifics.qml
@@ -0,0 +1,68 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("TextField")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Placeholder")
+                tooltip: qsTr("Placeholder text displayed when the editor is empty.")
+            }
+            SecondColumnLayout {
+                LineEdit {
+                    backendValue: backendValues.placeholderText
+                    Layout.fillWidth: true
+                }
+
+            }
+
+            Label {
+                text: qsTr("Hover")
+                tooltip: qsTr("Whether text field accepts hover events.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.hoverEnabled.valueToString
+                    backendValue: backendValues.hoverEnabled
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    Section {
+        width: parent.width
+        caption: qsTr("Placeholder Text Color")
+
+        ColorEditor {
+            caption: qsTr("Placeholder Text Color")
+            backendValue: backendValues.placeholderTextColor
+            supportGradient: false
+        }
+    }
+
+    StandardTextSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+
+    InsetSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ToolBarSpecifics.qml b/src/quickcontrols/designer/ToolBarSpecifics.qml
new file mode 100644
index 0000000000..284443c2a0
--- /dev/null
+++ b/src/quickcontrols/designer/ToolBarSpecifics.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("ToolBar")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Position")
+                tooltip: qsTr("Position of the toolbar.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.position
+                    model: [ "Header", "Footer" ]
+                    scope: "ToolBar"
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    PaneSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ToolButtonSpecifics.qml b/src/quickcontrols/designer/ToolButtonSpecifics.qml
new file mode 100644
index 0000000000..1de3c0a3c2
--- /dev/null
+++ b/src/quickcontrols/designer/ToolButtonSpecifics.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ButtonSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ToolSeparatorSpecifics.qml b/src/quickcontrols/designer/ToolSeparatorSpecifics.qml
new file mode 100644
index 0000000000..a2dfe43d18
--- /dev/null
+++ b/src/quickcontrols/designer/ToolSeparatorSpecifics.qml
@@ -0,0 +1,38 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("ToolSeparator")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Orientation")
+                tooltip: qsTr("The orientation of the separator.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.orientation
+                    model: [ "Horizontal", "Vertical" ]
+                    scope: "Qt"
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/TumblerSpecifics.qml b/src/quickcontrols/designer/TumblerSpecifics.qml
new file mode 100644
index 0000000000..4026a63d12
--- /dev/null
+++ b/src/quickcontrols/designer/TumblerSpecifics.qml
@@ -0,0 +1,69 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Tumbler")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Visible Count")
+                tooltip: qsTr("The count of visible items.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.visibleItemCount
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Current")
+                tooltip: qsTr("The index of the current item.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.currentIndex
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Wrap")
+                tooltip: qsTr("Whether the tumbler wrap.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.wrap.valueToString
+                    backendValue: backendValues.wrap
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/images/busyindicator-icon.png b/src/quickcontrols/designer/images/busyindicator-icon.png
new file mode 100644
index 0000000000..666d1ed93f
--- /dev/null
+++ b/src/quickcontrols/designer/images/busyindicator-icon.png
diff --git a/src/quickcontrols/designer/images/busyindicator-icon16.png b/src/quickcontrols/designer/images/busyindicator-icon16.png
new file mode 100644
index 0000000000..5aa57d7f48
--- /dev/null
+++ b/src/quickcontrols/designer/images/busyindicator-icon16.png
diff --git a/src/quickcontrols/designer/images/busyindicator-icon@2x.png b/src/quickcontrols/designer/images/busyindicator-icon@2x.png
new file mode 100644
index 0000000000..bb2278ff89
--- /dev/null
+++ b/src/quickcontrols/designer/images/busyindicator-icon@2x.png
diff --git a/src/quickcontrols/designer/images/button-icon.png b/src/quickcontrols/designer/images/button-icon.png
new file mode 100644
index 0000000000..c44909f6dd
--- /dev/null
+++ b/src/quickcontrols/designer/images/button-icon.png
diff --git a/src/quickcontrols/designer/images/button-icon16.png b/src/quickcontrols/designer/images/button-icon16.png
new file mode 100644
index 0000000000..5c921deb13
--- /dev/null
+++ b/src/quickcontrols/designer/images/button-icon16.png
diff --git a/src/quickcontrols/designer/images/button-icon@2x.png b/src/quickcontrols/designer/images/button-icon@2x.png
new file mode 100644
index 0000000000..f90a1ba7dc
--- /dev/null
+++ b/src/quickcontrols/designer/images/button-icon@2x.png
diff --git a/src/quickcontrols/designer/images/checkbox-icon.png b/src/quickcontrols/designer/images/checkbox-icon.png
new file mode 100644
index 0000000000..ee669b3a88
--- /dev/null
+++ b/src/quickcontrols/designer/images/checkbox-icon.png
diff --git a/src/quickcontrols/designer/images/checkbox-icon16.png b/src/quickcontrols/designer/images/checkbox-icon16.png
new file mode 100644
index 0000000000..8d89eab841
--- /dev/null
+++ b/src/quickcontrols/designer/images/checkbox-icon16.png
diff --git a/src/quickcontrols/designer/images/checkbox-icon@2x.png b/src/quickcontrols/designer/images/checkbox-icon@2x.png
new file mode 100644
index 0000000000..51c5601de0
--- /dev/null
+++ b/src/quickcontrols/designer/images/checkbox-icon@2x.png
diff --git a/src/quickcontrols/designer/images/combobox-icon.png b/src/quickcontrols/designer/images/combobox-icon.png
new file mode 100644
index 0000000000..2d31b17c65
--- /dev/null
+++ b/src/quickcontrols/designer/images/combobox-icon.png
diff --git a/src/quickcontrols/designer/images/combobox-icon16.png b/src/quickcontrols/designer/images/combobox-icon16.png
new file mode 100644
index 0000000000..15fc3505ba
--- /dev/null
+++ b/src/quickcontrols/designer/images/combobox-icon16.png
diff --git a/src/quickcontrols/designer/images/combobox-icon@2x.png b/src/quickcontrols/designer/images/combobox-icon@2x.png
new file mode 100644
index 0000000000..5f82390596
--- /dev/null
+++ b/src/quickcontrols/designer/images/combobox-icon@2x.png
diff --git a/src/quickcontrols/designer/images/control-icon.png b/src/quickcontrols/designer/images/control-icon.png
new file mode 100644
index 0000000000..fd9e4e8ff3
--- /dev/null
+++ b/src/quickcontrols/designer/images/control-icon.png
diff --git a/src/quickcontrols/designer/images/control-icon16.png b/src/quickcontrols/designer/images/control-icon16.png
new file mode 100644
index 0000000000..31c765483e
--- /dev/null
+++ b/src/quickcontrols/designer/images/control-icon16.png
diff --git a/src/quickcontrols/designer/images/control-icon@2x.png b/src/quickcontrols/designer/images/control-icon@2x.png
new file mode 100644
index 0000000000..22604d2492
--- /dev/null
+++ b/src/quickcontrols/designer/images/control-icon@2x.png
diff --git a/src/quickcontrols/designer/images/delaybutton-icon.png b/src/quickcontrols/designer/images/delaybutton-icon.png
new file mode 100644
index 0000000000..5a55bd9f77
--- /dev/null
+++ b/src/quickcontrols/designer/images/delaybutton-icon.png
diff --git a/src/quickcontrols/designer/images/delaybutton-icon16.png b/src/quickcontrols/designer/images/delaybutton-icon16.png
new file mode 100644
index 0000000000..cd21394e46
--- /dev/null
+++ b/src/quickcontrols/designer/images/delaybutton-icon16.png
diff --git a/src/quickcontrols/designer/images/delaybutton-icon@2x.png b/src/quickcontrols/designer/images/delaybutton-icon@2x.png
new file mode 100644
index 0000000000..7beee2fab0
--- /dev/null
+++ b/src/quickcontrols/designer/images/delaybutton-icon@2x.png
diff --git a/src/quickcontrols/designer/images/dial-icon.png b/src/quickcontrols/designer/images/dial-icon.png
new file mode 100644
index 0000000000..b3b63e3523
--- /dev/null
+++ b/src/quickcontrols/designer/images/dial-icon.png
diff --git a/src/quickcontrols/designer/images/dial-icon16.png b/src/quickcontrols/designer/images/dial-icon16.png
new file mode 100644
index 0000000000..8d8c7c09b0
--- /dev/null
+++ b/src/quickcontrols/designer/images/dial-icon16.png
diff --git a/src/quickcontrols/designer/images/dial-icon@2x.png b/src/quickcontrols/designer/images/dial-icon@2x.png
new file mode 100644
index 0000000000..22547a16b8
--- /dev/null
+++ b/src/quickcontrols/designer/images/dial-icon@2x.png
diff --git a/src/quickcontrols/designer/images/frame-icon.png b/src/quickcontrols/designer/images/frame-icon.png
new file mode 100644
index 0000000000..32abc8bf1e
--- /dev/null
+++ b/src/quickcontrols/designer/images/frame-icon.png
diff --git a/src/quickcontrols/designer/images/frame-icon16.png b/src/quickcontrols/designer/images/frame-icon16.png
new file mode 100644
index 0000000000..e5b65ad53b
--- /dev/null
+++ b/src/quickcontrols/designer/images/frame-icon16.png
diff --git a/src/quickcontrols/designer/images/frame-icon@2x.png b/src/quickcontrols/designer/images/frame-icon@2x.png
new file mode 100644
index 0000000000..8b876f38ec
--- /dev/null
+++ b/src/quickcontrols/designer/images/frame-icon@2x.png
diff --git a/src/quickcontrols/designer/images/groupbox-icon.png b/src/quickcontrols/designer/images/groupbox-icon.png
new file mode 100644
index 0000000000..5542ecf8bf
--- /dev/null
+++ b/src/quickcontrols/designer/images/groupbox-icon.png
diff --git a/src/quickcontrols/designer/images/groupbox-icon16.png b/src/quickcontrols/designer/images/groupbox-icon16.png
new file mode 100644
index 0000000000..9cf4324819
--- /dev/null
+++ b/src/quickcontrols/designer/images/groupbox-icon16.png
diff --git a/src/quickcontrols/designer/images/groupbox-icon@2x.png b/src/quickcontrols/designer/images/groupbox-icon@2x.png
new file mode 100644
index 0000000000..80dab3c716
--- /dev/null
+++ b/src/quickcontrols/designer/images/groupbox-icon@2x.png
diff --git a/src/quickcontrols/designer/images/itemdelegate-icon.png b/src/quickcontrols/designer/images/itemdelegate-icon.png
new file mode 100644
index 0000000000..822cf3e7b8
--- /dev/null
+++ b/src/quickcontrols/designer/images/itemdelegate-icon.png
diff --git a/src/quickcontrols/designer/images/itemdelegate-icon16.png b/src/quickcontrols/designer/images/itemdelegate-icon16.png
new file mode 100644
index 0000000000..b3ed007a0e
--- /dev/null
+++ b/src/quickcontrols/designer/images/itemdelegate-icon16.png
diff --git a/src/quickcontrols/designer/images/itemdelegate-icon@2x.png b/src/quickcontrols/designer/images/itemdelegate-icon@2x.png
new file mode 100644
index 0000000000..cb81308ff8
--- /dev/null
+++ b/src/quickcontrols/designer/images/itemdelegate-icon@2x.png
diff --git a/src/quickcontrols/designer/images/label-icon.png b/src/quickcontrols/designer/images/label-icon.png
new file mode 100644
index 0000000000..788bef078c
--- /dev/null
+++ b/src/quickcontrols/designer/images/label-icon.png
diff --git a/src/quickcontrols/designer/images/label-icon16.png b/src/quickcontrols/designer/images/label-icon16.png
new file mode 100644
index 0000000000..b68d384568
--- /dev/null
+++ b/src/quickcontrols/designer/images/label-icon16.png
diff --git a/src/quickcontrols/designer/images/label-icon@2x.png b/src/quickcontrols/designer/images/label-icon@2x.png
new file mode 100644
index 0000000000..7001413d3b
--- /dev/null
+++ b/src/quickcontrols/designer/images/label-icon@2x.png
diff --git a/src/quickcontrols/designer/images/page-icon.png b/src/quickcontrols/designer/images/page-icon.png
new file mode 100644
index 0000000000..b5ac87e899
--- /dev/null
+++ b/src/quickcontrols/designer/images/page-icon.png
diff --git a/src/quickcontrols/designer/images/page-icon16.png b/src/quickcontrols/designer/images/page-icon16.png
new file mode 100644
index 0000000000..bc6810b605
--- /dev/null
+++ b/src/quickcontrols/designer/images/page-icon16.png
diff --git a/src/quickcontrols/designer/images/page-icon@2x.png b/src/quickcontrols/designer/images/page-icon@2x.png
new file mode 100644
index 0000000000..23db032f4a
--- /dev/null
+++ b/src/quickcontrols/designer/images/page-icon@2x.png
diff --git a/src/quickcontrols/designer/images/pageindicator-icon.png b/src/quickcontrols/designer/images/pageindicator-icon.png
new file mode 100644
index 0000000000..edb6b377bb
--- /dev/null
+++ b/src/quickcontrols/designer/images/pageindicator-icon.png
diff --git a/src/quickcontrols/designer/images/pageindicator-icon16.png b/src/quickcontrols/designer/images/pageindicator-icon16.png
new file mode 100644
index 0000000000..0fb8967564
--- /dev/null
+++ b/src/quickcontrols/designer/images/pageindicator-icon16.png
diff --git a/src/quickcontrols/designer/images/pageindicator-icon@2x.png b/src/quickcontrols/designer/images/pageindicator-icon@2x.png
new file mode 100644
index 0000000000..7be0ee813b
--- /dev/null
+++ b/src/quickcontrols/designer/images/pageindicator-icon@2x.png
diff --git a/src/quickcontrols/designer/images/pane-icon.png b/src/quickcontrols/designer/images/pane-icon.png
new file mode 100644
index 0000000000..62ebe487ff
--- /dev/null
+++ b/src/quickcontrols/designer/images/pane-icon.png
diff --git a/src/quickcontrols/designer/images/pane-icon16.png b/src/quickcontrols/designer/images/pane-icon16.png
new file mode 100644
index 0000000000..2b8048441c
--- /dev/null
+++ b/src/quickcontrols/designer/images/pane-icon16.png
diff --git a/src/quickcontrols/designer/images/pane-icon@2x.png b/src/quickcontrols/designer/images/pane-icon@2x.png
new file mode 100644
index 0000000000..55bb116a69
--- /dev/null
+++ b/src/quickcontrols/designer/images/pane-icon@2x.png
diff --git a/src/quickcontrols/designer/images/progressbar-icon.png b/src/quickcontrols/designer/images/progressbar-icon.png
new file mode 100644
index 0000000000..a023f73c30
--- /dev/null
+++ b/src/quickcontrols/designer/images/progressbar-icon.png
diff --git a/src/quickcontrols/designer/images/progressbar-icon16.png b/src/quickcontrols/designer/images/progressbar-icon16.png
new file mode 100644
index 0000000000..6fede21d8c
--- /dev/null
+++ b/src/quickcontrols/designer/images/progressbar-icon16.png
diff --git a/src/quickcontrols/designer/images/progressbar-icon@2x.png b/src/quickcontrols/designer/images/progressbar-icon@2x.png
new file mode 100644
index 0000000000..0069400335
--- /dev/null
+++ b/src/quickcontrols/designer/images/progressbar-icon@2x.png
diff --git a/src/quickcontrols/designer/images/radiobutton-icon.png b/src/quickcontrols/designer/images/radiobutton-icon.png
new file mode 100644
index 0000000000..d38170e22f
--- /dev/null
+++ b/src/quickcontrols/designer/images/radiobutton-icon.png
diff --git a/src/quickcontrols/designer/images/radiobutton-icon16.png b/src/quickcontrols/designer/images/radiobutton-icon16.png
new file mode 100644
index 0000000000..07b46a8ab0
--- /dev/null
+++ b/src/quickcontrols/designer/images/radiobutton-icon16.png
diff --git a/src/quickcontrols/designer/images/radiobutton-icon@2x.png b/src/quickcontrols/designer/images/radiobutton-icon@2x.png
new file mode 100644
index 0000000000..4bbddda4b2
--- /dev/null
+++ b/src/quickcontrols/designer/images/radiobutton-icon@2x.png
diff --git a/src/quickcontrols/designer/images/rangeslider-icon.png b/src/quickcontrols/designer/images/rangeslider-icon.png
new file mode 100644
index 0000000000..1c4c7b2948
--- /dev/null
+++ b/src/quickcontrols/designer/images/rangeslider-icon.png
diff --git a/src/quickcontrols/designer/images/rangeslider-icon16.png b/src/quickcontrols/designer/images/rangeslider-icon16.png
new file mode 100644
index 0000000000..3be4624ddd
--- /dev/null
+++ b/src/quickcontrols/designer/images/rangeslider-icon16.png
diff --git a/src/quickcontrols/designer/images/rangeslider-icon@2x.png b/src/quickcontrols/designer/images/rangeslider-icon@2x.png
new file mode 100644
index 0000000000..aee69b3302
--- /dev/null
+++ b/src/quickcontrols/designer/images/rangeslider-icon@2x.png
diff --git a/src/quickcontrols/designer/images/roundbutton-icon.png b/src/quickcontrols/designer/images/roundbutton-icon.png
new file mode 100644
index 0000000000..d4b470dc25
--- /dev/null
+++ b/src/quickcontrols/designer/images/roundbutton-icon.png
diff --git a/src/quickcontrols/designer/images/roundbutton-icon16.png b/src/quickcontrols/designer/images/roundbutton-icon16.png
new file mode 100644
index 0000000000..f6f3666639
--- /dev/null
+++ b/src/quickcontrols/designer/images/roundbutton-icon16.png
diff --git a/src/quickcontrols/designer/images/roundbutton-icon@2x.png b/src/quickcontrols/designer/images/roundbutton-icon@2x.png
new file mode 100644
index 0000000000..4553e165e7
--- /dev/null
+++ b/src/quickcontrols/designer/images/roundbutton-icon@2x.png
diff --git a/src/quickcontrols/designer/images/scrollview-icon.png b/src/quickcontrols/designer/images/scrollview-icon.png
new file mode 100644
index 0000000000..5ef73ff19f
--- /dev/null
+++ b/src/quickcontrols/designer/images/scrollview-icon.png
diff --git a/src/quickcontrols/designer/images/scrollview-icon16.png b/src/quickcontrols/designer/images/scrollview-icon16.png
new file mode 100644
index 0000000000..f8ca7a3685
--- /dev/null
+++ b/src/quickcontrols/designer/images/scrollview-icon16.png
diff --git a/src/quickcontrols/designer/images/scrollview-icon@2x.png b/src/quickcontrols/designer/images/scrollview-icon@2x.png
new file mode 100644
index 0000000000..0eb7f9665e
--- /dev/null
+++ b/src/quickcontrols/designer/images/scrollview-icon@2x.png
diff --git a/src/quickcontrols/designer/images/slider-icon.png b/src/quickcontrols/designer/images/slider-icon.png
new file mode 100644
index 0000000000..bd0a9729be
--- /dev/null
+++ b/src/quickcontrols/designer/images/slider-icon.png
diff --git a/src/quickcontrols/designer/images/slider-icon16.png b/src/quickcontrols/designer/images/slider-icon16.png
new file mode 100644
index 0000000000..a08622df89
--- /dev/null
+++ b/src/quickcontrols/designer/images/slider-icon16.png
diff --git a/src/quickcontrols/designer/images/slider-icon@2x.png b/src/quickcontrols/designer/images/slider-icon@2x.png
new file mode 100644
index 0000000000..93842e4cdd
--- /dev/null
+++ b/src/quickcontrols/designer/images/slider-icon@2x.png
diff --git a/src/quickcontrols/designer/images/spinbox-icon.png b/src/quickcontrols/designer/images/spinbox-icon.png
new file mode 100644
index 0000000000..37277c5e43
--- /dev/null
+++ b/src/quickcontrols/designer/images/spinbox-icon.png
diff --git a/src/quickcontrols/designer/images/spinbox-icon16.png b/src/quickcontrols/designer/images/spinbox-icon16.png
new file mode 100644
index 0000000000..f88711dd25
--- /dev/null
+++ b/src/quickcontrols/designer/images/spinbox-icon16.png
diff --git a/src/quickcontrols/designer/images/spinbox-icon@2x.png b/src/quickcontrols/designer/images/spinbox-icon@2x.png
new file mode 100644
index 0000000000..b62a3bad51
--- /dev/null
+++ b/src/quickcontrols/designer/images/spinbox-icon@2x.png
diff --git a/src/quickcontrols/designer/images/stackview-icon.png b/src/quickcontrols/designer/images/stackview-icon.png
new file mode 100644
index 0000000000..a6ced34925
--- /dev/null
+++ b/src/quickcontrols/designer/images/stackview-icon.png
diff --git a/src/quickcontrols/designer/images/stackview-icon16.png b/src/quickcontrols/designer/images/stackview-icon16.png
new file mode 100644
index 0000000000..0f19d0efa3
--- /dev/null
+++ b/src/quickcontrols/designer/images/stackview-icon16.png
diff --git a/src/quickcontrols/designer/images/stackview-icon@2x.png b/src/quickcontrols/designer/images/stackview-icon@2x.png
new file mode 100644
index 0000000000..9b5ef9517b
--- /dev/null
+++ b/src/quickcontrols/designer/images/stackview-icon@2x.png
diff --git a/src/quickcontrols/designer/images/swipeview-icon.png b/src/quickcontrols/designer/images/swipeview-icon.png
new file mode 100644
index 0000000000..031cb27c36
--- /dev/null
+++ b/src/quickcontrols/designer/images/swipeview-icon.png
diff --git a/src/quickcontrols/designer/images/swipeview-icon16.png b/src/quickcontrols/designer/images/swipeview-icon16.png
new file mode 100644
index 0000000000..446c469690
--- /dev/null
+++ b/src/quickcontrols/designer/images/swipeview-icon16.png
diff --git a/src/quickcontrols/designer/images/swipeview-icon@2x.png b/src/quickcontrols/designer/images/swipeview-icon@2x.png
new file mode 100644
index 0000000000..0ccb978c46
--- /dev/null
+++ b/src/quickcontrols/designer/images/swipeview-icon@2x.png
diff --git a/src/quickcontrols/designer/images/switch-icon.png b/src/quickcontrols/designer/images/switch-icon.png
new file mode 100644
index 0000000000..e018159286
--- /dev/null
+++ b/src/quickcontrols/designer/images/switch-icon.png
diff --git a/src/quickcontrols/designer/images/switch-icon16.png b/src/quickcontrols/designer/images/switch-icon16.png
new file mode 100644
index 0000000000..9abd275659
--- /dev/null
+++ b/src/quickcontrols/designer/images/switch-icon16.png
diff --git a/src/quickcontrols/designer/images/switch-icon@2x.png b/src/quickcontrols/designer/images/switch-icon@2x.png
new file mode 100644
index 0000000000..787f54ca41
--- /dev/null
+++ b/src/quickcontrols/designer/images/switch-icon@2x.png
diff --git a/src/quickcontrols/designer/images/textarea-icon.png b/src/quickcontrols/designer/images/textarea-icon.png
new file mode 100644
index 0000000000..f1b2dc0f84
--- /dev/null
+++ b/src/quickcontrols/designer/images/textarea-icon.png
diff --git a/src/quickcontrols/designer/images/textarea-icon16.png b/src/quickcontrols/designer/images/textarea-icon16.png
new file mode 100644
index 0000000000..4afc1fbab5
--- /dev/null
+++ b/src/quickcontrols/designer/images/textarea-icon16.png
diff --git a/src/quickcontrols/designer/images/textarea-icon@2x.png b/src/quickcontrols/designer/images/textarea-icon@2x.png
new file mode 100644
index 0000000000..c32ecc71a9
--- /dev/null
+++ b/src/quickcontrols/designer/images/textarea-icon@2x.png
diff --git a/src/quickcontrols/designer/images/textfield-icon.png b/src/quickcontrols/designer/images/textfield-icon.png
new file mode 100644
index 0000000000..ba5537acef
--- /dev/null
+++ b/src/quickcontrols/designer/images/textfield-icon.png
diff --git a/src/quickcontrols/designer/images/textfield-icon16.png b/src/quickcontrols/designer/images/textfield-icon16.png
new file mode 100644
index 0000000000..c4a62a6582
--- /dev/null
+++ b/src/quickcontrols/designer/images/textfield-icon16.png
diff --git a/src/quickcontrols/designer/images/textfield-icon@2x.png b/src/quickcontrols/designer/images/textfield-icon@2x.png
new file mode 100644
index 0000000000..e05fd41b9a
--- /dev/null
+++ b/src/quickcontrols/designer/images/textfield-icon@2x.png
diff --git a/src/quickcontrols/designer/images/toolbar-icon.png b/src/quickcontrols/designer/images/toolbar-icon.png
new file mode 100644
index 0000000000..5cb5b2e1af
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolbar-icon.png
diff --git a/src/quickcontrols/designer/images/toolbar-icon16.png b/src/quickcontrols/designer/images/toolbar-icon16.png
new file mode 100644
index 0000000000..569373afa1
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolbar-icon16.png
diff --git a/src/quickcontrols/designer/images/toolbar-icon@2x.png b/src/quickcontrols/designer/images/toolbar-icon@2x.png
new file mode 100644
index 0000000000..fd9e6ceebc
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolbar-icon@2x.png
diff --git a/src/quickcontrols/designer/images/toolbutton-icon.png b/src/quickcontrols/designer/images/toolbutton-icon.png
new file mode 100644
index 0000000000..3298f69519
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolbutton-icon.png
diff --git a/src/quickcontrols/designer/images/toolbutton-icon16.png b/src/quickcontrols/designer/images/toolbutton-icon16.png
new file mode 100644
index 0000000000..9ab7861c25
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolbutton-icon16.png
diff --git a/src/quickcontrols/designer/images/toolbutton-icon@2x.png b/src/quickcontrols/designer/images/toolbutton-icon@2x.png
new file mode 100644
index 0000000000..e5958cded3
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolbutton-icon@2x.png
diff --git a/src/quickcontrols/designer/images/toolseparator-icon.png b/src/quickcontrols/designer/images/toolseparator-icon.png
new file mode 100644
index 0000000000..5e99f06f2e
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolseparator-icon.png
diff --git a/src/quickcontrols/designer/images/toolseparator-icon16.png b/src/quickcontrols/designer/images/toolseparator-icon16.png
new file mode 100644
index 0000000000..68f22c5df1
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolseparator-icon16.png
diff --git a/src/quickcontrols/designer/images/toolseparator-icon@2x.png b/src/quickcontrols/designer/images/toolseparator-icon@2x.png
new file mode 100644
index 0000000000..549c11c67c
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolseparator-icon@2x.png
diff --git a/src/quickcontrols/designer/images/tumbler-icon.png b/src/quickcontrols/designer/images/tumbler-icon.png
new file mode 100644
index 0000000000..98eb8232a2
--- /dev/null
+++ b/src/quickcontrols/designer/images/tumbler-icon.png
diff --git a/src/quickcontrols/designer/images/tumbler-icon16.png b/src/quickcontrols/designer/images/tumbler-icon16.png
new file mode 100644
index 0000000000..ff5f95cf32
--- /dev/null
+++ b/src/quickcontrols/designer/images/tumbler-icon16.png
diff --git a/src/quickcontrols/designer/images/tumbler-icon@2x.png b/src/quickcontrols/designer/images/tumbler-icon@2x.png
new file mode 100644
index 0000000000..236abf0cfe
--- /dev/null
+++ b/src/quickcontrols/designer/images/tumbler-icon@2x.png
diff --git a/src/quickcontrols/designer/qtquickcontrols2.metainfo b/src/quickcontrols/designer/qtquickcontrols2.metainfo
new file mode 100644
index 0000000000..1075cec62e
--- /dev/null
+++ b/src/quickcontrols/designer/qtquickcontrols2.metainfo
@@ -0,0 +1,535 @@
+MetaInfo {
+    Type {
+        name: "QtQuick.Controls.BusyIndicator"
+        icon: "images/busyindicator-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Busy Indicator"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/busyindicator-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Button"
+        icon: "images/button-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Button"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/button-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Button\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.CheckBox"
+        icon: "images/checkbox-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Check Box"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/checkbox-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Check Box\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.CheckDelegate"
+        icon: "images/checkbox-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Check Delegate"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/checkbox-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Check Delegate\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ComboBox"
+        icon: "images/combobox-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Combo Box"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/combobox-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Control"
+        icon: "images/control-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Control"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/control-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.DelayButton"
+        icon: "images/button-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Delay Button"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/delaybutton-icon.png"
+            version: "2.2"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Delay Button\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Dial"
+        icon: "images/dial-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Dial"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/dial-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Frame"
+        icon: "images/frame-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Frame"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/frame-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.GroupBox"
+        icon: "images/groupbox-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Group Box"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/groupbox-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+            Property { name: "title"; type: "binding"; value: "qsTr(\"Group Box\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ItemDelegate"
+        icon: "images/itemdelegate-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Item Delegate"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/itemdelegate-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Item Delegate\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Label"
+        icon: "images/label-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Label"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/label-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Label\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Page"
+        icon: "images/page-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Page"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/page-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.PageIndicator"
+        icon: "images/pageindicator-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Page Indicator"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/pageindicator-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "count"; type: "int"; value: 3 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Pane"
+        icon: "images/pane-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Pane"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/pane-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ProgressBar"
+        icon: "images/progressbar-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Progress Bar"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/progressbar-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "value"; type: "real"; value: 0.5 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.RadioButton"
+        icon: "images/radiobutton-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Radio Button"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/radiobutton-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Radio Button\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.RadioDelegate"
+        icon: "images/radiobutton-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Radio Delegate"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/radiobutton-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Radio Delegate\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.RangeSlider"
+        icon: "images/rangeslider-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Range Slider"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/rangeslider-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "first.value"; type: "real"; value: 0.25 }
+            Property { name: "second.value"; type: "real"; value: 0.75 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.RoundButton"
+        icon: "images/roundbutton-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Round Button"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/roundbutton-icon.png"
+            version: "2.1"
+            requiredImport: "QtQuick.Controls"
+            Property { name: "text"; type: "string"; value: "+" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Slider"
+        icon: "images/slider-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Slider"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/slider-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "value"; type: "real"; value: 0.5 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.SpinBox"
+        icon: "images/spinbox-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Spin Box"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/spinbox-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ScrollView"
+        icon: "images/scrollview-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Scroll View"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/scrollview-icon.png"
+            version: "2.2"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.StackView"
+        icon: "images/stackview-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Stack View"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/stackview-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.SwipeDelegate"
+        icon: "images/itemdelegate-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Swipe Delegate"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/itemdelegate-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Swipe Delegate\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.SwipeView"
+        icon: "images/swipeview-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Swipe View"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/swipeview-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Switch"
+        icon: "images/switch-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Switch"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/switch-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Switch\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.SwitchDelegate"
+        icon: "images/switch-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Switch Delegate"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/switch-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Switch Delegate\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.TabBar"
+        icon: "images/toolbar-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Tab Bar"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/toolbar-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+            Property { name: "width"; type: "int"; value: 240 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.TabButton"
+        icon: "images/toolbutton-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Tab Button"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/toolbutton-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Tab Button\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.TextArea"
+        icon: "images/textarea-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Text Area"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/textarea-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "placeholderText"; type: "binding"; value: "qsTr(\"Text Area\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.TextField"
+        icon: "images/textfield-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Text Field"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/textfield-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "placeholderText"; type: "binding"; value: "qsTr(\"Text Field\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ToolBar"
+        icon: "images/toolbar-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Tool Bar"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/toolbar-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 360 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ToolButton"
+        icon: "images/toolbutton-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Tool Button"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/toolbutton-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Tool Button\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ToolSeparator"
+        icon: "images/toolseparator-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Tool Separator"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/toolseparator-icon.png"
+            version: "2.1"
+            requiredImport: "QtQuick.Controls"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Tumbler"
+        icon: "images/tumbler-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Tumbler"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/tumbler-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "model"; type: "int"; value: "10" }
+        }
+    }
+}
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-applicationwindow-wireframe.png b/src/quickcontrols/doc/images/qtquickcontrols2-applicationwindow-wireframe.png
new file mode 100644
index 0000000000..f31378004a
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-applicationwindow-wireframe.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-basic-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols2-basic-thumbnail.png
new file mode 100644
index 0000000000..e971a7aaec
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-basic-thumbnail.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-basic.png b/src/quickcontrols/doc/images/qtquickcontrols2-basic.png
new file mode 100644
index 0000000000..099db17038
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-basic.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-busyindicator-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-busyindicator-custom.png
new file mode 100644
index 0000000000..fefae223ef
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-busyindicator-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-busyindicator.gif b/src/quickcontrols/doc/images/qtquickcontrols2-busyindicator.gif
new file mode 100644
index 0000000000..653d200f3c
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-busyindicator.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-busyindicator.png b/src/quickcontrols/doc/images/qtquickcontrols2-busyindicator.png
new file mode 100644
index 0000000000..4be09579bb
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-busyindicator.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-button-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-button-custom.png
new file mode 100644
index 0000000000..46d3e3eb5e
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-button-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-button-flat.gif b/src/quickcontrols/doc/images/qtquickcontrols2-button-flat.gif
new file mode 100644
index 0000000000..e2bd8b6fcf
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-button-flat.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-button-highlighted.gif b/src/quickcontrols/doc/images/qtquickcontrols2-button-highlighted.gif
new file mode 100644
index 0000000000..7de076d3d0
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-button-highlighted.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-button-icononly.png b/src/quickcontrols/doc/images/qtquickcontrols2-button-icononly.png
new file mode 100644
index 0000000000..9c8dd0f43f
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-button-icononly.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-button-textbesideicon.png b/src/quickcontrols/doc/images/qtquickcontrols2-button-textbesideicon.png
new file mode 100644
index 0000000000..3dc64fb92b
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-button-textbesideicon.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-button-textonly.png b/src/quickcontrols/doc/images/qtquickcontrols2-button-textonly.png
new file mode 100644
index 0000000000..737beb165f
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-button-textonly.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-button-textundericon.png b/src/quickcontrols/doc/images/qtquickcontrols2-button-textundericon.png
new file mode 100644
index 0000000000..37c40c7c66
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-button-textundericon.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-button.gif b/src/quickcontrols/doc/images/qtquickcontrols2-button.gif
new file mode 100644
index 0000000000..10d626a331
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-button.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-calendarmodel.png b/src/quickcontrols/doc/images/qtquickcontrols2-calendarmodel.png
new file mode 100644
index 0000000000..a017682326
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-calendarmodel.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-checkbox-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-checkbox-custom.png
new file mode 100644
index 0000000000..c6c3d1bcbd
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-checkbox-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-checkbox-group.png b/src/quickcontrols/doc/images/qtquickcontrols2-checkbox-group.png
new file mode 100644
index 0000000000..d5a0d51be6
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-checkbox-group.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-checkbox-tristate.gif b/src/quickcontrols/doc/images/qtquickcontrols2-checkbox-tristate.gif
new file mode 100644
index 0000000000..56a1586795
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-checkbox-tristate.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-checkbox.gif b/src/quickcontrols/doc/images/qtquickcontrols2-checkbox.gif
new file mode 100644
index 0000000000..d70c0ee4b9
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-checkbox.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-checkdelegate-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-checkdelegate-custom.png
new file mode 100644
index 0000000000..c0dd06892c
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-checkdelegate-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-checkdelegate-tristate.gif b/src/quickcontrols/doc/images/qtquickcontrols2-checkdelegate-tristate.gif
new file mode 100644
index 0000000000..8d058d6c54
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-checkdelegate-tristate.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-checkdelegate.gif b/src/quickcontrols/doc/images/qtquickcontrols2-checkdelegate.gif
new file mode 100644
index 0000000000..da3fab98a4
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-checkdelegate.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-combobox-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-combobox-custom.png
new file mode 100644
index 0000000000..4f7206dc78
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-combobox-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-combobox-delegate.png b/src/quickcontrols/doc/images/qtquickcontrols2-combobox-delegate.png
new file mode 100644
index 0000000000..cf31064895
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-combobox-delegate.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-combobox-popup.png b/src/quickcontrols/doc/images/qtquickcontrols2-combobox-popup.png
new file mode 100644
index 0000000000..cf31064895
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-combobox-popup.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-combobox.gif b/src/quickcontrols/doc/images/qtquickcontrols2-combobox.gif
new file mode 100644
index 0000000000..966a2d4ae5
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-combobox.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-control.png b/src/quickcontrols/doc/images/qtquickcontrols2-control.png
new file mode 100644
index 0000000000..0f004a89dd
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-control.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-control.svg b/src/quickcontrols/doc/images/qtquickcontrols2-control.svg
new file mode 100644
index 0000000000..4b2057d197
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-control.svg
@@ -0,0 +1,936 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="760"
+   height="580"
+   viewBox="0 0 759.99997 579.99999"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="qtquickcontrols2-control.svg"
+   inkscape:export-filename="/home/jpnurmi/Projects/qt-dev/qtquickcontrols2/src/imports/controls/doc/images/qtquickcontrols2-control.png"
+   inkscape:export-xdpi="192"
+   inkscape:export-ydpi="192">
+  <defs
+     id="defs4">
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Mstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Mstart"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4191"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="matrix(0.4,0,0,0.4,4,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow2Mend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Mend"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4212"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         transform="scale(-0.6)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-3"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-9"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-0"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-5"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-2"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-2"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-9-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-2-2"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-1-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-2-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-8"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-96"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-4"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-9-6-4"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-2-2-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-1-1-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-2-7-8"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5-6-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2-6"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8-4"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9-8"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-1-7"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-8-9"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-96-7"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-4-4"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5-6-9-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2-6-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8-4-0"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9-8-6"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-1-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-8-3"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-96-3"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-4-46"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5-6-9-5"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2-6-6"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8-4-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9-8-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-1-9-7"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-8-3-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-96-3-2"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-4-46-3"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5-6-9-5-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2-6-6-1"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8-4-1-3"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9-8-7-6"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="138.75529"
+     inkscape:cy="425.28174"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="3840"
+     inkscape:window-height="2031"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(91.482322,-32.9581)">
+    <rect
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.05102265;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136"
+       width="518.94897"
+       height="298.94897"
+       x="29.043194"
+       y="193.48361" />
+    <rect
+       style="fill:#ffd5d5;fill-opacity:1;stroke:none;stroke-width:0.83021182;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-3"
+       width="440"
+       height="220"
+       x="68.517685"
+       y="232.9581" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(1.1690183,0,0,1.1690183,115.80023,-231.31953)"><flowRegion
+         id="flowRegion4140"
+         style="fill:#ff2a2a"><rect
+           id="rect4142"
+           width="129.78784"
+           height="31.668232"
+           x="-34.519978"
+           y="400.22751"
+           style="font-size:15.41801071px;fill:#ff2a2a" /></flowRegion><flowPara
+         id="flowPara4144"
+         style="font-size:20.55734825px;line-height:1.25;fill:#ff2a2a">Background</flowPara><flowPara
+         id="flowPara4146"
+         style="font-size:20.55734825px;line-height:1.25;fill:#ff2a2a"> </flowPara></flowRoot>    <rect
+       style="fill:#d7e3f4;fill-opacity:1;stroke:none;stroke-width:22.32431984;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58381503"
+       id="rect4148"
+       width="360"
+       height="140"
+       x="108.51768"
+       y="272.95813" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,184.57261,41.294224)"><flowRegion
+         id="flowRegion4140-6"
+         style="fill:#0055d4"><rect
+           id="rect4142-6"
+           width="334.36047"
+           height="80.812172"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:40px;fill:#0055d4" /></flowRegion><flowPara
+         id="flowPara4146-6"
+         style="font-size:40px;line-height:1.25;fill:#0055d4">Content item</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-1"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,247.75903,220.21488)"><flowRegion
+         id="flowRegion4140-6-9"><rect
+           id="rect4142-6-0"
+           width="270.72089"
+           height="68.690361"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:25px;fill:#000000" /></flowRegion><flowPara
+         id="flowPara4146-6-2"
+         style="font-size:17.5px;line-height:1.25">Width</flowPara></flowRoot>    <path
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.93053311;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-3);marker-end:url(#TriangleOutL-0)"
+       d="M 33.168982,505.52033 H 543.32948"
+       id="path4179-8"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9);marker-end:url(#TriangleOutL-1)"
+       d="M 16.517683,487.33858 V 198.57762"
+       id="path4179-9"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-1-7"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-50.003525,47.195824)"><flowRegion
+         id="flowRegion4140-6-9-7"><rect
+           id="rect4142-6-0-5"
+           width="270.72089"
+           height="68.690361"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
+         id="flowPara4146-6-2-9"
+         style="font-size:17.5px;line-height:1.25;fill:#000000">Height</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-3"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,206.65956,-144.78636)"><flowRegion
+         id="flowRegion4140-6-67"><rect
+           id="rect4142-6-5"
+           width="334.36047"
+           height="80.812172"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:60px;fill:#000000" /></flowRegion><flowPara
+         style="font-size:60px;line-height:1.25"
+         id="flowPara14323">Popup</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,41.217752,149.93493)"><flowRegion
+         id="flowRegion4140-6-6-4-6"
+         style="text-align:center;text-anchor:middle;fill:#0055d4"><rect
+           id="rect4142-6-1-4-2"
+           width="252.53812"
+           height="61.619293"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;text-align:center;text-anchor:middle;fill:#0055d4" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#0055d4"
+         id="flowPara10048-9">Bottom</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#0055d4"
+         id="flowPara5290">padding</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,384.82399,-69.046412)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2"
+         style="fill:#0055d4"><rect
+           id="rect4142-6-1-4-2-7"
+           width="71.826065"
+           height="43.785866"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#0055d4" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#0055d4"
+         id="flowPara10048-9-0">Top</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#0055d4"
+         id="flowPara4830">padding</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-9"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,458.14041,-0.80935844)"><flowRegion
+         id="flowRegion4140-6-6-4-6-3"
+         style="fill:#0055d4"><rect
+           id="rect4142-6-1-4-2-6"
+           width="81.109558"
+           height="93.762154"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#0055d4" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#0055d4"
+         id="flowPara4386">Right padding</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-9-2"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,19.173452,87.133114)"><flowRegion
+         id="flowRegion4140-6-6-4-6-3-5"
+         style="fill:#0055d4"><rect
+           id="rect4142-6-1-4-2-6-4"
+           width="81.109558"
+           height="93.762154"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#0055d4" /></flowRegion><flowPara
+         style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#0055d4"
+         id="flowPara4386-0">Left padding</flowPara></flowRoot>    <path
+       style="fill:#ff2a2a;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87824047;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9-6);marker-end:url(#TriangleOutL-1-1)"
+       d="M 72.916183,227.96278 V 198.98852"
+       id="path4179-9-8"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87323481;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5);marker-end:url(#TriangleOutL-9-4)"
+       d="M 34.529058,238.58445 H 63.562954"
+       id="path4179-7-8"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1-5"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,47.895402,-88.000508)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-9"
+         style="fill:#ff2a2a"><rect
+           id="rect4142-6-1-4-2-7-7"
+           width="66.476036"
+           height="55.080368"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#ff2a2a" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#ff2a2a"
+         id="flowPara11237">Top inset</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-9-2-3"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,0.4414194,-43.952242)"><flowRegion
+         id="flowRegion4140-6-6-4-6-3-5-8"
+         style="fill:#ff2a2a"><rect
+           id="rect4142-6-1-4-2-6-4-8"
+           width="75.759529"
+           height="93.167732"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#ff2a2a" /></flowRegion><flowPara
+         style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ff2a2a"
+         id="flowPara4386-0-3">Left inset</flowPara></flowRoot>    <path
+       style="fill:#0055d4;fill-rule:evenodd;stroke:#0055d4;stroke-width:0.97500122;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-1);marker-end:url(#TriangleOutL-96)"
+       d="M 462.28757,267.38769 V 199.50991"
+       id="path4179-3"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#ff2a2a;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87794411;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9-6-4);marker-end:url(#TriangleOutL-1-1-6)"
+       d="M 504.22784,486.94146 V 457.98675"
+       id="path4179-9-8-9"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1-5-0"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,424.36985,170.98794)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-9-6"
+         style="fill:#ff2a2a"><rect
+           id="rect4142-6-1-4-2-7-7-8"
+           width="91.442841"
+           height="44.974762"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#ff2a2a" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#ff2a2a"
+         id="flowPara11237-7">Bottom inset</flowPara></flowRoot>    <path
+       style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87314719;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6);marker-end:url(#TriangleOutL-9-4-8)"
+       d="M 513.47562,448.6218 H 542.5037"
+       id="path4179-7-8-6"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-9-2-3-0"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,479.24023,126.32002)"><flowRegion
+         id="flowRegion4140-6-6-4-6-3-5-8-7"
+         style="fill:#ff2a2a"><rect
+           id="rect4142-6-1-4-2-6-4-8-0"
+           width="75.759529"
+           height="93.167732"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#ff2a2a" /></flowRegion><flowPara
+         style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ff2a2a"
+         id="flowPara3807">Right inset</flowPara></flowRoot>    <path
+       style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.05938387;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6-9);marker-end:url(#TriangleOutL-9-4-8-4)"
+       d="m 474.52523,278.31524 h 66.93934"
+       id="path4179-7-8-6-0"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#0055d4;fill-rule:evenodd;stroke:#0055d4;stroke-width:0.97513783;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-1-7);marker-end:url(#TriangleOutL-96-7)"
+       d="M 114.58911,486.37854 V 418.48175"
+       id="path4179-3-9"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.05900466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6-9-1);marker-end:url(#TriangleOutL-9-4-8-4-0)"
+       d="M 35.582232,406.88667 H 102.47366"
+       id="path4179-7-8-6-0-0"
+       inkscape:connector-curvature="0" />
+    <rect
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.38;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-9"
+       width="638.62036"
+       height="418.6203"
+       x="-30.792475"
+       y="133.64795" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-3-8"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,192.12072,-213.92909)"><flowRegion
+         id="flowRegion4140-6-67-1"><rect
+           id="rect4142-6-5-6"
+           width="334.36047"
+           height="80.812172"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:60px;fill:#000000" /></flowRegion><flowPara
+         style="font-size:60px;line-height:1.25"
+         id="flowPara14323-3">Window</flowPara></flowRoot>    <path
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.83036995;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-1-9);marker-end:url(#TriangleOutL-96-3)"
+       d="M 16.507747,188.209 V 138.97553"
+       id="path4179-3-1"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.90094262;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6-9-5);marker-end:url(#TriangleOutL-9-4-8-4-1)"
+       d="m 553.67227,505.52244 h 48.41379"
+       id="path4179-7-8-6-0-2"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1-2"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-53.285062,-138.90295)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-92"
+         style="fill:#000000"><rect
+           id="rect4142-6-1-4-2-7-8"
+           width="71.826065"
+           height="43.785866"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara10048-9-0-1">Top</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara4830-2">margin</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1-2-4"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,530.78767,225.71855)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-92-7"
+         style="fill:#000000"><rect
+           id="rect4142-6-1-4-2-7-8-8"
+           width="71.826065"
+           height="43.785866"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara10048-9-0-1-6">Right</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara4830-2-3">margin</flowPara></flowRoot>    <path
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.83036995;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-1-9-7);marker-end:url(#TriangleOutL-96-3-2)"
+       d="M 16.459117,546.78218 V 497.54871"
+       id="path4179-3-1-7"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1-2-2"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-0.06072146,225.50386)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-92-5"
+         style="fill:#000000"><rect
+           id="rect4142-6-1-4-2-7-8-3"
+           width="71.826065"
+           height="43.785866"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara10048-9-0-1-7">Bottom</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara4830-2-6">margin</flowPara></flowRoot>    <path
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.89733517;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6-9-5-8);marker-end:url(#TriangleOutL-9-4-8-4-1-3)"
+       d="M -25.075855,505.54405 H 22.951007"
+       id="path4179-7-8-6-0-2-4"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1-2-2-0"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-55.529842,180.17847)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-92-5-3"
+         style="fill:#000000"><rect
+           id="rect4142-6-1-4-2-7-8-3-5"
+           width="71.826065"
+           height="43.785866"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara10048-9-0-1-7-8">Left</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara4830-2-6-5">margin</flowPara></flowRoot>  </g>
+</svg>
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-customize-buttons.png b/src/quickcontrols/doc/images/qtquickcontrols2-customize-buttons.png
new file mode 100644
index 0000000000..551e8a0cf7
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-customize-buttons.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-dayofweekrow-layout.png b/src/quickcontrols/doc/images/qtquickcontrols2-dayofweekrow-layout.png
new file mode 100644
index 0000000000..3a816e85a9
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-dayofweekrow-layout.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-dayofweekrow.png b/src/quickcontrols/doc/images/qtquickcontrols2-dayofweekrow.png
new file mode 100644
index 0000000000..7548e22147
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-dayofweekrow.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-delaybutton-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-delaybutton-custom.png
new file mode 100644
index 0000000000..a7bd7c19d8
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-delaybutton-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-delaybutton.gif b/src/quickcontrols/doc/images/qtquickcontrols2-delaybutton.gif
new file mode 100644
index 0000000000..16a198f9cb
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-delaybutton.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-dial-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-dial-custom.png
new file mode 100644
index 0000000000..6312c99933
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-dial-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-dial-handle.png b/src/quickcontrols/doc/images/qtquickcontrols2-dial-handle.png
new file mode 100644
index 0000000000..9e22b2e709
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-dial-handle.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-dial-inputMode.svgz b/src/quickcontrols/doc/images/qtquickcontrols2-dial-inputMode.svgz
new file mode 100644
index 0000000000..005ab7b331
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-dial-inputMode.svgz
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-dial-inputmode.png b/src/quickcontrols/doc/images/qtquickcontrols2-dial-inputmode.png
new file mode 100644
index 0000000000..5bbc41a49c
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-dial-inputmode.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-dial-no-wrap.gif b/src/quickcontrols/doc/images/qtquickcontrols2-dial-no-wrap.gif
new file mode 100644
index 0000000000..24f6790b6d
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-dial-no-wrap.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-dial-wrap.gif b/src/quickcontrols/doc/images/qtquickcontrols2-dial-wrap.gif
new file mode 100644
index 0000000000..cfb1fb5b10
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-dial-wrap.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-dial.png b/src/quickcontrols/doc/images/qtquickcontrols2-dial.png
new file mode 100644
index 0000000000..71c54113b7
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-dial.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-dialogbuttonbox-attached.png b/src/quickcontrols/doc/images/qtquickcontrols2-dialogbuttonbox-attached.png
new file mode 100644
index 0000000000..c17f38ac0c
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-dialogbuttonbox-attached.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-dialogbuttonbox.png b/src/quickcontrols/doc/images/qtquickcontrols2-dialogbuttonbox.png
new file mode 100644
index 0000000000..33b5f45f4f
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-dialogbuttonbox.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-drawer-expanded-wireframe.png b/src/quickcontrols/doc/images/qtquickcontrols2-drawer-expanded-wireframe.png
new file mode 100644
index 0000000000..0c92f86587
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-drawer-expanded-wireframe.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-drawer-wireframe.png b/src/quickcontrols/doc/images/qtquickcontrols2-drawer-wireframe.png
new file mode 100644
index 0000000000..74806f17b7
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-drawer-wireframe.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-drawer.gif b/src/quickcontrols/doc/images/qtquickcontrols2-drawer.gif
new file mode 100644
index 0000000000..736f34f66f
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-drawer.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-frame-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-frame-custom.png
new file mode 100644
index 0000000000..f628b20c20
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-frame-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-frame.png b/src/quickcontrols/doc/images/qtquickcontrols2-frame.png
new file mode 100644
index 0000000000..e3cb31dc71
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-frame.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-fusion-palettes.png b/src/quickcontrols/doc/images/qtquickcontrols2-fusion-palettes.png
new file mode 100644
index 0000000000..d806116167
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-fusion-palettes.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-fusion-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols2-fusion-thumbnail.png
new file mode 100644
index 0000000000..c270c6efba
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-fusion-thumbnail.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-fusion-violet.png b/src/quickcontrols/doc/images/qtquickcontrols2-fusion-violet.png
new file mode 100644
index 0000000000..99e5b59786
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-fusion-violet.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-fusion.png b/src/quickcontrols/doc/images/qtquickcontrols2-fusion.png
new file mode 100644
index 0000000000..7119ef225d
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-fusion.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-groupbox-checkable.png b/src/quickcontrols/doc/images/qtquickcontrols2-groupbox-checkable.png
new file mode 100644
index 0000000000..820ad79c80
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-groupbox-checkable.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-groupbox-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-groupbox-custom.png
new file mode 100644
index 0000000000..029679ced0
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-groupbox-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-groupbox-label.png b/src/quickcontrols/doc/images/qtquickcontrols2-groupbox-label.png
new file mode 100644
index 0000000000..c26795a7a7
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-groupbox-label.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-groupbox.png b/src/quickcontrols/doc/images/qtquickcontrols2-groupbox.png
new file mode 100644
index 0000000000..ea2f9ea5c5
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-groupbox.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-4x.png b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-4x.png
new file mode 100644
index 0000000000..bab99a5e55
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-4x.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-inset-boundaries.png b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-inset-boundaries.png
new file mode 100644
index 0000000000..c42df81edc
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-inset-boundaries.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-inset.png b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-inset.png
new file mode 100644
index 0000000000..0627d08590
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-inset.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-resized-padding.png b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-resized-padding.png
new file mode 100644
index 0000000000..0a606c9926
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-resized-padding.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-resized-stretchable.png b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-resized-stretchable.png
new file mode 100644
index 0000000000..9598b13a1c
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-resized-stretchable.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-size.png b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-size.png
new file mode 100644
index 0000000000..db6453758f
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch-size.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch.svgz b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch.svgz
new file mode 100644
index 0000000000..5a1a1094d1
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-9-patch.svgz
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-imagine-customization-dark.png b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-customization-dark.png
new file mode 100644
index 0000000000..144ac97c87
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-customization-dark.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-imagine-customization.svgz b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-customization.svgz
new file mode 100644
index 0000000000..fb8305638b
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-customization.svgz
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-imagine-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-thumbnail.png
new file mode 100644
index 0000000000..ecf2bb163d
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-imagine-thumbnail.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-imagine.png b/src/quickcontrols/doc/images/qtquickcontrols2-imagine.png
new file mode 100644
index 0000000000..ffe2c267b2
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-imagine.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-ios-dark.png b/src/quickcontrols/doc/images/qtquickcontrols2-ios-dark.png
new file mode 100644
index 0000000000..fd4609c729
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-ios-dark.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-ios-light.png b/src/quickcontrols/doc/images/qtquickcontrols2-ios-light.png
new file mode 100644
index 0000000000..f990078ddf
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-ios-light.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-itemdelegate-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-itemdelegate-custom.png
new file mode 100644
index 0000000000..35f8892f16
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-itemdelegate-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-itemdelegate.gif b/src/quickcontrols/doc/images/qtquickcontrols2-itemdelegate.gif
new file mode 100644
index 0000000000..dccb6efcdb
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-itemdelegate.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-itemdelegate.png b/src/quickcontrols/doc/images/qtquickcontrols2-itemdelegate.png
new file mode 100644
index 0000000000..7242f343a0
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-itemdelegate.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-label-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-label-custom.png
new file mode 100644
index 0000000000..5730ff23bf
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-label-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-label.png b/src/quickcontrols/doc/images/qtquickcontrols2-label.png
new file mode 100644
index 0000000000..0bafcf8602
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-label.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-macos-dark.png b/src/quickcontrols/doc/images/qtquickcontrols2-macos-dark.png
new file mode 100644
index 0000000000..97d8a5a4e7
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-macos-dark.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-macos-light.png b/src/quickcontrols/doc/images/qtquickcontrols2-macos-light.png
new file mode 100644
index 0000000000..4a598ad498
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-macos-light.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-macos-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols2-macos-thumbnail.png
new file mode 100644
index 0000000000..57fd98d63a
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-macos-thumbnail.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-material-accent.png b/src/quickcontrols/doc/images/qtquickcontrols2-material-accent.png
new file mode 100644
index 0000000000..a85afc68ed
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-material-accent.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-material-attributes.png b/src/quickcontrols/doc/images/qtquickcontrols2-material-attributes.png
new file mode 100644
index 0000000000..bb54071d79
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-material-attributes.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-material-background.png b/src/quickcontrols/doc/images/qtquickcontrols2-material-background.png
new file mode 100644
index 0000000000..62028f523c
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-material-background.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-material-dark.png b/src/quickcontrols/doc/images/qtquickcontrols2-material-dark.png
new file mode 100644
index 0000000000..f6e45b3b1c
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-material-dark.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-material-elevation.png b/src/quickcontrols/doc/images/qtquickcontrols2-material-elevation.png
new file mode 100644
index 0000000000..d152f14529
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-material-elevation.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-material-foreground.png b/src/quickcontrols/doc/images/qtquickcontrols2-material-foreground.png
new file mode 100644
index 0000000000..0d0e1b651a
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-material-foreground.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-material-light.png b/src/quickcontrols/doc/images/qtquickcontrols2-material-light.png
new file mode 100644
index 0000000000..c9abe2cb8b
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-material-light.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-material-purple.png b/src/quickcontrols/doc/images/qtquickcontrols2-material-purple.png
new file mode 100644
index 0000000000..b955736b0b
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-material-purple.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-material-theme.png b/src/quickcontrols/doc/images/qtquickcontrols2-material-theme.png
new file mode 100644
index 0000000000..1d09a82580
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-material-theme.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-material-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols2-material-thumbnail.png
new file mode 100644
index 0000000000..d758ff1803
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-material-thumbnail.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-material-variant-dense.png b/src/quickcontrols/doc/images/qtquickcontrols2-material-variant-dense.png
new file mode 100644
index 0000000000..02f39b7885
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-material-variant-dense.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-material-variant-normal.png b/src/quickcontrols/doc/images/qtquickcontrols2-material-variant-normal.png
new file mode 100644
index 0000000000..c1e366c531
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-material-variant-normal.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-menu-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-menu-custom.png
new file mode 100644
index 0000000000..922bf591b5
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-menu-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-menu.gif b/src/quickcontrols/doc/images/qtquickcontrols2-menu.gif
new file mode 100644
index 0000000000..93a873a33a
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-menu.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-menu.png b/src/quickcontrols/doc/images/qtquickcontrols2-menu.png
new file mode 100644
index 0000000000..926c33eed2
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-menu.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-menubar-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-menubar-custom.png
new file mode 100644
index 0000000000..b6007e466d
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-menubar-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-menubar.png b/src/quickcontrols/doc/images/qtquickcontrols2-menubar.png
new file mode 100644
index 0000000000..873b7a1960
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-menubar.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-menuseparator-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-menuseparator-custom.png
new file mode 100644
index 0000000000..78635b9c88
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-menuseparator-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-menuseparator.png b/src/quickcontrols/doc/images/qtquickcontrols2-menuseparator.png
new file mode 100644
index 0000000000..35307817f6
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-menuseparator.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-monthgrid-layout.png b/src/quickcontrols/doc/images/qtquickcontrols2-monthgrid-layout.png
new file mode 100644
index 0000000000..f67501a751
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-monthgrid-layout.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-monthgrid.png b/src/quickcontrols/doc/images/qtquickcontrols2-monthgrid.png
new file mode 100644
index 0000000000..a2f9a47f70
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-monthgrid.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-page-wireframe.png b/src/quickcontrols/doc/images/qtquickcontrols2-page-wireframe.png
new file mode 100644
index 0000000000..f612c243c4
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-page-wireframe.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-pageindicator-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-pageindicator-custom.png
new file mode 100644
index 0000000000..a767a51aa0
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-pageindicator-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-pageindicator-delegate.png b/src/quickcontrols/doc/images/qtquickcontrols2-pageindicator-delegate.png
new file mode 100644
index 0000000000..95acde70cf
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-pageindicator-delegate.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-pageindicator.png b/src/quickcontrols/doc/images/qtquickcontrols2-pageindicator.png
new file mode 100644
index 0000000000..e2a0a157f6
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-pageindicator.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-pane-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-pane-custom.png
new file mode 100644
index 0000000000..03a0369f56
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-pane-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-pane.png b/src/quickcontrols/doc/images/qtquickcontrols2-pane.png
new file mode 100644
index 0000000000..3801cc3efb
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-pane.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-popup-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-popup-custom.png
new file mode 100644
index 0000000000..cb7813d387
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-popup-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-popup-settings.png b/src/quickcontrols/doc/images/qtquickcontrols2-popup-settings.png
new file mode 100644
index 0000000000..5122158ef4
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-popup-settings.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-popup-transformorigin.png b/src/quickcontrols/doc/images/qtquickcontrols2-popup-transformorigin.png
new file mode 100644
index 0000000000..16d2617786
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-popup-transformorigin.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-popup.png b/src/quickcontrols/doc/images/qtquickcontrols2-popup.png
new file mode 100644
index 0000000000..8fc424a854
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-popup.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-popup.svg b/src/quickcontrols/doc/images/qtquickcontrols2-popup.svg
new file mode 100644
index 0000000000..e39f3dce21
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-popup.svg
@@ -0,0 +1,712 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="640"
+   height="420"
+   viewBox="0 0 639.99997 419.99999"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="qtquickcontrols2-control.svg"
+   inkscape:export-filename="/home/jpnurmi/Projects/qt-dev/qtquickcontrols2/src/imports/controls/doc/images/qtquickcontrols2-control.png"
+   inkscape:export-xdpi="192"
+   inkscape:export-ydpi="192">
+  <defs
+     id="defs4">
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Mstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Mstart"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4191"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="matrix(0.4,0,0,0.4,4,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow2Mend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Mend"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4212"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         transform="scale(-0.6)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-3"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-9"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-0"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-5"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-2"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-2"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-9-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-2-2"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-1-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-2-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-8"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-96"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-4"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-9-6-4"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-2-2-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-1-1-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-2-7-8"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5-6-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2-6"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8-4"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9-8"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-1-7"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-8-9"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-96-7"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-4-4"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5-6-9-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2-6-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8-4-0"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9-8-6"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="328.65009"
+     inkscape:cy="205.42326"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="3840"
+     inkscape:window-height="2031"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(91.482322,-192.9581)">
+    <rect
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.05102265;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136"
+       width="518.94897"
+       height="298.94897"
+       x="-30.956812"
+       y="253.48361" />
+    <rect
+       style="fill:#ffd5d5;fill-opacity:1;stroke:none;stroke-width:0.83021182;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-3"
+       width="440"
+       height="220"
+       x="8.5176783"
+       y="292.9581" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(1.1690183,0,0,1.1690183,55.80022,-171.31953)"><flowRegion
+         id="flowRegion4140"
+         style="fill:#ff2a2a"><rect
+           id="rect4142"
+           width="129.78784"
+           height="31.668232"
+           x="-34.519978"
+           y="400.22751"
+           style="font-size:15.41801071px;fill:#ff2a2a" /></flowRegion><flowPara
+         id="flowPara4144"
+         style="font-size:20.55734825px;line-height:1.25;fill:#ff2a2a">Background</flowPara><flowPara
+         id="flowPara4146"
+         style="font-size:20.55734825px;line-height:1.25;fill:#ff2a2a"> </flowPara></flowRoot>    <rect
+       style="fill:#d7e3f4;fill-opacity:1;stroke:none;stroke-width:22.32431984;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58381503"
+       id="rect4148"
+       width="360"
+       height="140"
+       x="48.517677"
+       y="332.95813" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,124.5726,101.29422)"><flowRegion
+         id="flowRegion4140-6"
+         style="fill:#0055d4"><rect
+           id="rect4142-6"
+           width="334.36047"
+           height="80.812172"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:40px;fill:#0055d4" /></flowRegion><flowPara
+         id="flowPara4146-6"
+         style="font-size:40px;line-height:1.25;fill:#0055d4">Content item</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-1"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,187.75902,280.21488)"><flowRegion
+         id="flowRegion4140-6-9"><rect
+           id="rect4142-6-0"
+           width="270.72089"
+           height="68.690361"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:25px;fill:#000000" /></flowRegion><flowPara
+         id="flowPara4146-6-2"
+         style="font-size:17.5px;line-height:1.25">Width</flowPara></flowRoot>    <path
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.93053311;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-3);marker-end:url(#TriangleOutL-0)"
+       d="M -26.831023,563.52033 H 483.32947"
+       id="path4179-8"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9);marker-end:url(#TriangleOutL-1)"
+       d="M -41.482322,547.33858 V 258.57762"
+       id="path4179-9"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-1-7"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-110.00353,107.19582)"><flowRegion
+         id="flowRegion4140-6-9-7"><rect
+           id="rect4142-6-0-5"
+           width="270.72089"
+           height="68.690361"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
+         id="flowPara4146-6-2-9"
+         style="font-size:17.5px;line-height:1.25;fill:#000000">Height</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-3"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,138.50125,-84.786365)"><flowRegion
+         id="flowRegion4140-6-67"><rect
+           id="rect4142-6-5"
+           width="334.36047"
+           height="80.812172"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:60px;fill:#000000" /></flowRegion><flowPara
+         id="flowPara4146-6-3"
+         style="font-size:60px;line-height:1.25">Control</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-18.782253,209.93493)"><flowRegion
+         id="flowRegion4140-6-6-4-6"
+         style="text-align:center;text-anchor:middle;fill:#0055d4"><rect
+           id="rect4142-6-1-4-2"
+           width="252.53812"
+           height="61.619293"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;text-align:center;text-anchor:middle;fill:#0055d4" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#0055d4"
+         id="flowPara10048-9">Bottom</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#0055d4"
+         id="flowPara5290">padding</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,324.82398,-9.0464154)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2"
+         style="fill:#0055d4"><rect
+           id="rect4142-6-1-4-2-7"
+           width="71.826065"
+           height="43.785866"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#0055d4" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#0055d4"
+         id="flowPara10048-9-0">Top</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#0055d4"
+         id="flowPara4830">padding</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-9"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,398.1404,59.190638)"><flowRegion
+         id="flowRegion4140-6-6-4-6-3"
+         style="fill:#0055d4"><rect
+           id="rect4142-6-1-4-2-6"
+           width="81.109558"
+           height="93.762154"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#0055d4" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#0055d4"
+         id="flowPara4386">Right padding</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-9-2"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-40.826553,147.13311)"><flowRegion
+         id="flowRegion4140-6-6-4-6-3-5"
+         style="fill:#0055d4"><rect
+           id="rect4142-6-1-4-2-6-4"
+           width="81.109558"
+           height="93.762154"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#0055d4" /></flowRegion><flowPara
+         style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#0055d4"
+         id="flowPara4386-0">Left padding</flowPara></flowRoot>    <path
+       style="fill:#ff2a2a;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87824047;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9-6);marker-end:url(#TriangleOutL-1-1)"
+       d="M 12.916178,287.96278 V 258.98852"
+       id="path4179-9-8"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87323481;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5);marker-end:url(#TriangleOutL-9-4)"
+       d="M -25.470947,298.58445 H 3.5629489"
+       id="path4179-7-8"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1-5"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-12.104603,-28.000512)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-9"
+         style="fill:#ff2a2a"><rect
+           id="rect4142-6-1-4-2-7-7"
+           width="66.476036"
+           height="55.080368"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#ff2a2a" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#ff2a2a"
+         id="flowPara11237">Top inset</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-9-2-3"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-59.558586,16.047754)"><flowRegion
+         id="flowRegion4140-6-6-4-6-3-5-8"
+         style="fill:#ff2a2a"><rect
+           id="rect4142-6-1-4-2-6-4-8"
+           width="75.759529"
+           height="93.167732"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#ff2a2a" /></flowRegion><flowPara
+         style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ff2a2a"
+         id="flowPara4386-0-3">Left inset</flowPara></flowRoot>    <path
+       style="fill:#0055d4;fill-rule:evenodd;stroke:#0055d4;stroke-width:0.97500122;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-1);marker-end:url(#TriangleOutL-96)"
+       d="M 402.28756,327.38769 V 259.50991"
+       id="path4179-3"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#ff2a2a;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87794411;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9-6-4);marker-end:url(#TriangleOutL-1-1-6)"
+       d="M 444.22783,546.94146 V 517.98675"
+       id="path4179-9-8-9"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1-5-0"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,364.36984,230.98794)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-9-6"
+         style="fill:#ff2a2a"><rect
+           id="rect4142-6-1-4-2-7-7-8"
+           width="91.442841"
+           height="44.974762"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#ff2a2a" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#ff2a2a"
+         id="flowPara11237-7">Bottom inset</flowPara></flowRoot>    <path
+       style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87314719;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6);marker-end:url(#TriangleOutL-9-4-8)"
+       d="m 453.47561,508.6218 h 29.02808"
+       id="path4179-7-8-6"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-9-2-3-0"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,419.24022,186.32002)"><flowRegion
+         id="flowRegion4140-6-6-4-6-3-5-8-7"
+         style="fill:#ff2a2a"><rect
+           id="rect4142-6-1-4-2-6-4-8-0"
+           width="75.759529"
+           height="93.167732"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#ff2a2a" /></flowRegion><flowPara
+         style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ff2a2a"
+         id="flowPara3807">Right inset</flowPara></flowRoot>    <path
+       style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.05938387;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6-9);marker-end:url(#TriangleOutL-9-4-8-4)"
+       d="m 414.52522,338.31524 h 66.93934"
+       id="path4179-7-8-6-0"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#0055d4;fill-rule:evenodd;stroke:#0055d4;stroke-width:0.97513783;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-1-7);marker-end:url(#TriangleOutL-96-7)"
+       d="M 54.589106,546.37854 V 478.48175"
+       id="path4179-3-9"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.05900466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6-9-1);marker-end:url(#TriangleOutL-9-4-8-4-0)"
+       d="M -24.417773,466.88667 H 42.473651"
+       id="path4179-7-8-6-0-0"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-progressbar-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-progressbar-custom.png
new file mode 100644
index 0000000000..9d73df2c25
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-progressbar-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-progressbar-indeterminate.gif b/src/quickcontrols/doc/images/qtquickcontrols2-progressbar-indeterminate.gif
new file mode 100644
index 0000000000..d6756d16fd
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-progressbar-indeterminate.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-progressbar.gif b/src/quickcontrols/doc/images/qtquickcontrols2-progressbar.gif
new file mode 100644
index 0000000000..49af5f45a1
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-progressbar.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-radiobutton-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-radiobutton-custom.png
new file mode 100644
index 0000000000..5c85179f70
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-radiobutton-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-radiobutton.gif b/src/quickcontrols/doc/images/qtquickcontrols2-radiobutton.gif
new file mode 100644
index 0000000000..4cbf3ed9d6
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-radiobutton.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-radiodelegate-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-radiodelegate-custom.png
new file mode 100644
index 0000000000..7d32699bf9
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-radiodelegate-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-radiodelegate.gif b/src/quickcontrols/doc/images/qtquickcontrols2-radiodelegate.gif
new file mode 100644
index 0000000000..b6afd6fe6a
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-radiodelegate.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-rangeslider-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-rangeslider-custom.png
new file mode 100644
index 0000000000..47379a300d
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-rangeslider-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-rangeslider.gif b/src/quickcontrols/doc/images/qtquickcontrols2-rangeslider.gif
new file mode 100644
index 0000000000..db565b0a93
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-rangeslider.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-roundbutton.png b/src/quickcontrols/doc/images/qtquickcontrols2-roundbutton.png
new file mode 100644
index 0000000000..4dce37f239
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-roundbutton.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-custom.png
new file mode 100644
index 0000000000..690bc8beef
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-non-attached.png b/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-non-attached.png
new file mode 100644
index 0000000000..eba363dda2
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-non-attached.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-nosnap.gif b/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-nosnap.gif
new file mode 100644
index 0000000000..f61ac5b46a
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-nosnap.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-snapalways.gif b/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-snapalways.gif
new file mode 100644
index 0000000000..438d4a3318
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-snapalways.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-snaponrelease.gif b/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-snaponrelease.gif
new file mode 100644
index 0000000000..c2fa67b027
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar-snaponrelease.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar.gif b/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar.gif
new file mode 100644
index 0000000000..ed3ab607d9
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-scrollbar.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-scrollindicator-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-scrollindicator-custom.png
new file mode 100644
index 0000000000..b1183bc52a
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-scrollindicator-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-scrollindicator-non-attached.png b/src/quickcontrols/doc/images/qtquickcontrols2-scrollindicator-non-attached.png
new file mode 100644
index 0000000000..a61e048743
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-scrollindicator-non-attached.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-scrollindicator.gif b/src/quickcontrols/doc/images/qtquickcontrols2-scrollindicator.gif
new file mode 100644
index 0000000000..73007820f8
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-scrollindicator.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-scrollview-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-scrollview-custom.png
new file mode 100644
index 0000000000..8f4bd92863
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-scrollview-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-scrollview-wireframe.png b/src/quickcontrols/doc/images/qtquickcontrols2-scrollview-wireframe.png
new file mode 100644
index 0000000000..8a39056aa9
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-scrollview-wireframe.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-scrollview.png b/src/quickcontrols/doc/images/qtquickcontrols2-scrollview.png
new file mode 100644
index 0000000000..1a4039e1fd
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-scrollview.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-selectionrectangle.png b/src/quickcontrols/doc/images/qtquickcontrols2-selectionrectangle.png
new file mode 100644
index 0000000000..69e47b2909
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-selectionrectangle.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-slider-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-slider-custom.png
new file mode 100644
index 0000000000..dbbacb343f
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-slider-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-slider-handle.png b/src/quickcontrols/doc/images/qtquickcontrols2-slider-handle.png
new file mode 100644
index 0000000000..5450d57480
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-slider-handle.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-slider-nosnap.gif b/src/quickcontrols/doc/images/qtquickcontrols2-slider-nosnap.gif
new file mode 100644
index 0000000000..ab233c5b93
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-slider-nosnap.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-slider-snapalways.gif b/src/quickcontrols/doc/images/qtquickcontrols2-slider-snapalways.gif
new file mode 100644
index 0000000000..8eb4011fb5
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-slider-snapalways.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-slider-snaponrelease.gif b/src/quickcontrols/doc/images/qtquickcontrols2-slider-snaponrelease.gif
new file mode 100644
index 0000000000..f3b1d5c7a9
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-slider-snaponrelease.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-slider.gif b/src/quickcontrols/doc/images/qtquickcontrols2-slider.gif
new file mode 100644
index 0000000000..2ee56334e0
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-slider.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-custom.png
new file mode 100644
index 0000000000..d1e883fc56
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-double.png b/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-double.png
new file mode 100644
index 0000000000..d3f5876c4a
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-double.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-down.png b/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-down.png
new file mode 100644
index 0000000000..1d5dcf7b44
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-down.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-textual.png b/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-textual.png
new file mode 100644
index 0000000000..5513d6e67d
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-textual.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-up.png b/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-up.png
new file mode 100644
index 0000000000..1ee1c4798e
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-spinbox-up.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-spinbox.png b/src/quickcontrols/doc/images/qtquickcontrols2-spinbox.png
new file mode 100644
index 0000000000..835bb1d67d
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-spinbox.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-splitview-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-splitview-custom.png
new file mode 100644
index 0000000000..da820ccafe
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-splitview-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-stackview-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-custom.png
new file mode 100644
index 0000000000..5ee6049e74
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-stackview-pop.gif b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-pop.gif
new file mode 100644
index 0000000000..1971c2e004
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-pop.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-stackview-push.gif b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-push.gif
new file mode 100644
index 0000000000..0218cc0f2f
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-push.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-stackview-replace.gif b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-replace.gif
new file mode 100644
index 0000000000..63a6b2b4b5
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-replace.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-stackview-unwind.gif b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-unwind.gif
new file mode 100644
index 0000000000..28c051d866
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-unwind.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-stackview-visible.png b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-visible.png
new file mode 100644
index 0000000000..d937b417e6
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-visible.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-stackview-wireframe.png b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-wireframe.png
new file mode 100644
index 0000000000..f28b5c67de
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-stackview-wireframe.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-styles.png b/src/quickcontrols/doc/images/qtquickcontrols2-styles.png
new file mode 100644
index 0000000000..992dd47eba
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-styles.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-swipedelegate-behind.gif b/src/quickcontrols/doc/images/qtquickcontrols2-swipedelegate-behind.gif
new file mode 100644
index 0000000000..97d6a59277
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-swipedelegate-behind.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-swipedelegate-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-swipedelegate-custom.png
new file mode 100644
index 0000000000..5813b73cf4
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-swipedelegate-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-swipedelegate-leading-trailing.gif b/src/quickcontrols/doc/images/qtquickcontrols2-swipedelegate-leading-trailing.gif
new file mode 100644
index 0000000000..0641bd1400
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-swipedelegate-leading-trailing.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-swipedelegate.gif b/src/quickcontrols/doc/images/qtquickcontrols2-swipedelegate.gif
new file mode 100644
index 0000000000..86c380b7b3
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-swipedelegate.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-swipeview-indicator.png b/src/quickcontrols/doc/images/qtquickcontrols2-swipeview-indicator.png
new file mode 100644
index 0000000000..998ec9f7c9
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-swipeview-indicator.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-swipeview-wireframe.png b/src/quickcontrols/doc/images/qtquickcontrols2-swipeview-wireframe.png
new file mode 100644
index 0000000000..3cc2b83c4b
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-swipeview-wireframe.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-swipeview.gif b/src/quickcontrols/doc/images/qtquickcontrols2-swipeview.gif
new file mode 100644
index 0000000000..4af26c1058
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-swipeview.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-switch-checked.png b/src/quickcontrols/doc/images/qtquickcontrols2-switch-checked.png
new file mode 100644
index 0000000000..7a0cde1bad
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-switch-checked.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-switch-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-switch-custom.png
new file mode 100644
index 0000000000..6d535ef96f
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-switch-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-switch.gif b/src/quickcontrols/doc/images/qtquickcontrols2-switch.gif
new file mode 100644
index 0000000000..5f956304a0
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-switch.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-switch.png b/src/quickcontrols/doc/images/qtquickcontrols2-switch.png
new file mode 100644
index 0000000000..7f613f3343
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-switch.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-switchdelegate-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-switchdelegate-custom.png
new file mode 100644
index 0000000000..f5337e2c83
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-switchdelegate-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-switchdelegate.gif b/src/quickcontrols/doc/images/qtquickcontrols2-switchdelegate.gif
new file mode 100644
index 0000000000..950b10731f
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-switchdelegate.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tabbar-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-tabbar-custom.png
new file mode 100644
index 0000000000..8c8e4accd8
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tabbar-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tabbar-explicit.png b/src/quickcontrols/doc/images/qtquickcontrols2-tabbar-explicit.png
new file mode 100644
index 0000000000..b1de5f715e
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tabbar-explicit.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tabbar-flickable.png b/src/quickcontrols/doc/images/qtquickcontrols2-tabbar-flickable.png
new file mode 100644
index 0000000000..0c253f82d5
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tabbar-flickable.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tabbar-wireframe.png b/src/quickcontrols/doc/images/qtquickcontrols2-tabbar-wireframe.png
new file mode 100644
index 0000000000..35a64ae285
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tabbar-wireframe.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tabbar.gif b/src/quickcontrols/doc/images/qtquickcontrols2-tabbar.gif
new file mode 100644
index 0000000000..31db1f9e7c
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tabbar.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tabbar.png b/src/quickcontrols/doc/images/qtquickcontrols2-tabbar.png
new file mode 100644
index 0000000000..9f113497db
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tabbar.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tabbutton.png b/src/quickcontrols/doc/images/qtquickcontrols2-tabbutton.png
new file mode 100644
index 0000000000..3df2f53147
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tabbutton.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-textarea-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-textarea-custom.png
new file mode 100644
index 0000000000..6220a13f39
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-textarea-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-textarea-scrollable.png b/src/quickcontrols/doc/images/qtquickcontrols2-textarea-scrollable.png
new file mode 100644
index 0000000000..ae868a27da
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-textarea-scrollable.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-textarea.png b/src/quickcontrols/doc/images/qtquickcontrols2-textarea.png
new file mode 100644
index 0000000000..fc221bd757
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-textarea.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-textfield-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-textfield-custom.png
new file mode 100644
index 0000000000..9102317065
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-textfield-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-textfield-disabled.png b/src/quickcontrols/doc/images/qtquickcontrols2-textfield-disabled.png
new file mode 100644
index 0000000000..b143d21053
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-textfield-disabled.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-textfield-focused.png b/src/quickcontrols/doc/images/qtquickcontrols2-textfield-focused.png
new file mode 100644
index 0000000000..de7f9599c9
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-textfield-focused.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-textfield-normal.png b/src/quickcontrols/doc/images/qtquickcontrols2-textfield-normal.png
new file mode 100644
index 0000000000..4229c706ad
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-textfield-normal.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-textfield.png b/src/quickcontrols/doc/images/qtquickcontrols2-textfield.png
new file mode 100644
index 0000000000..a008383a00
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-textfield.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-toolbar-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-toolbar-custom.png
new file mode 100644
index 0000000000..425e5f8c64
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-toolbar-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-toolbar.png b/src/quickcontrols/doc/images/qtquickcontrols2-toolbar.png
new file mode 100644
index 0000000000..e5a33eee9a
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-toolbar.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-toolbutton-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-toolbutton-custom.png
new file mode 100644
index 0000000000..b78269d087
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-toolbutton-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-toolbutton.png b/src/quickcontrols/doc/images/qtquickcontrols2-toolbutton.png
new file mode 100644
index 0000000000..610c1a7cb4
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-toolbutton.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-toolseparator-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-toolseparator-custom.png
new file mode 100644
index 0000000000..6703eeba53
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-toolseparator-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-toolseparator.png b/src/quickcontrols/doc/images/qtquickcontrols2-toolseparator.png
new file mode 100644
index 0000000000..88ced12361
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-toolseparator.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tooltip-delay.png b/src/quickcontrols/doc/images/qtquickcontrols2-tooltip-delay.png
new file mode 100644
index 0000000000..59813835b4
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tooltip-delay.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tooltip-hover.png b/src/quickcontrols/doc/images/qtquickcontrols2-tooltip-hover.png
new file mode 100644
index 0000000000..62a9cf844b
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tooltip-hover.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tooltip-pressandhold.png b/src/quickcontrols/doc/images/qtquickcontrols2-tooltip-pressandhold.png
new file mode 100644
index 0000000000..62a9cf844b
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tooltip-pressandhold.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tooltip-slider.png b/src/quickcontrols/doc/images/qtquickcontrols2-tooltip-slider.png
new file mode 100644
index 0000000000..a15e723a02
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tooltip-slider.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tooltip.png b/src/quickcontrols/doc/images/qtquickcontrols2-tooltip.png
new file mode 100644
index 0000000000..4238d52a77
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tooltip.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-treeviewdelegate.png b/src/quickcontrols/doc/images/qtquickcontrols2-treeviewdelegate.png
new file mode 100644
index 0000000000..4d1e74f5dd
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-treeviewdelegate.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tumbler-custom.png b/src/quickcontrols/doc/images/qtquickcontrols2-tumbler-custom.png
new file mode 100644
index 0000000000..bbfa9b0cef
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tumbler-custom.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tumbler-delegate.png b/src/quickcontrols/doc/images/qtquickcontrols2-tumbler-delegate.png
new file mode 100644
index 0000000000..a28da93e46
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tumbler-delegate.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tumbler-wrap.gif b/src/quickcontrols/doc/images/qtquickcontrols2-tumbler-wrap.gif
new file mode 100644
index 0000000000..8f59eedcc7
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tumbler-wrap.gif
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-tumbler.png b/src/quickcontrols/doc/images/qtquickcontrols2-tumbler.png
new file mode 100644
index 0000000000..38339dfa25
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-tumbler.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-universal-accent.png b/src/quickcontrols/doc/images/qtquickcontrols2-universal-accent.png
new file mode 100644
index 0000000000..e1d74f7a91
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-universal-accent.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-universal-attributes.png b/src/quickcontrols/doc/images/qtquickcontrols2-universal-attributes.png
new file mode 100644
index 0000000000..7a7ef347fc
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-universal-attributes.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-universal-background.png b/src/quickcontrols/doc/images/qtquickcontrols2-universal-background.png
new file mode 100644
index 0000000000..4f1bfbd284
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-universal-background.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-universal-button.png b/src/quickcontrols/doc/images/qtquickcontrols2-universal-button.png
new file mode 100644
index 0000000000..6c764ec97e
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-universal-button.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-universal-dark.png b/src/quickcontrols/doc/images/qtquickcontrols2-universal-dark.png
new file mode 100644
index 0000000000..952651dca0
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-universal-dark.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-universal-foreground.png b/src/quickcontrols/doc/images/qtquickcontrols2-universal-foreground.png
new file mode 100644
index 0000000000..b0ecf23a9e
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-universal-foreground.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-universal-light.png b/src/quickcontrols/doc/images/qtquickcontrols2-universal-light.png
new file mode 100644
index 0000000000..e65447a4c5
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-universal-light.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-universal-theme.png b/src/quickcontrols/doc/images/qtquickcontrols2-universal-theme.png
new file mode 100644
index 0000000000..d128134636
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-universal-theme.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-universal-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols2-universal-thumbnail.png
new file mode 100644
index 0000000000..db7fe5b076
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-universal-thumbnail.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-universal-violet.png b/src/quickcontrols/doc/images/qtquickcontrols2-universal-violet.png
new file mode 100644
index 0000000000..ec459457a8
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-universal-violet.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-weeknumbercolumn-layout.png b/src/quickcontrols/doc/images/qtquickcontrols2-weeknumbercolumn-layout.png
new file mode 100644
index 0000000000..19fbeefd49
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-weeknumbercolumn-layout.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-weeknumbercolumn.png b/src/quickcontrols/doc/images/qtquickcontrols2-weeknumbercolumn.png
new file mode 100644
index 0000000000..a73cccd544
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-weeknumbercolumn.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-windows-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols2-windows-thumbnail.png
new file mode 100644
index 0000000000..15408d3bba
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-windows-thumbnail.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols2-windows.png b/src/quickcontrols/doc/images/qtquickcontrols2-windows.png
new file mode 100644
index 0000000000..324a03412d
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols2-windows.png
diff --git a/src/quickcontrols/doc/manifest-meta.qdocconf b/src/quickcontrols/doc/manifest-meta.qdocconf
new file mode 100644
index 0000000000..5626aca067
--- /dev/null
+++ b/src/quickcontrols/doc/manifest-meta.qdocconf
@@ -0,0 +1,32 @@
+# Additional meta information (attributes for matched entries, as well as tags)
+# to be added to manifest.xml files.
+#
+# manifestmeta.filters = <filter1>,<filter2>,...
+#
+# manifestmeta.<filter>.names = <Module1>/<name1>,<Module2>/<name2>,..
+# manifestmeta.<filter>.attributes = <attribute1:value1>,<attribute2:value2>,..
+# manifestmeta.<filter>.tags = <tag1>,<tag2>,..
+#
+# <filter>.names specify all the module/name combinations to apply the
+# attributes/tags to. You can use simple wildcard matching by appending
+# '*' at the end of name.
+#
+# Note: You cannot use operators (+, =, -) in the names.
+#
+# Examples: add a 'isHighlighted' attribute for two 'Analog Clock' examples,
+# add a 'database' tag for QtSql examples, and a 'qt5' tag for all examples
+#
+# manifestmeta.filters                = highlighted sql global
+#
+# manifestmeta.highlighted.names      = "QtGui/Analog Clock Window Example" \
+#                                       "QtWidgets/Analog Clock Example"
+# manifestmeta.highlighted.attributes = isHighlighted:true
+#
+# manifestmeta.sql.names              = "QtSql/*"
+# manifestmeta.sql.tags               = database
+#
+# manifestmeta.global.names           = *
+# manifestmeta.global.tags            = qt5
+
+manifestmeta.highlighted.names      =  "QtQuickControls/Qt Quick Controls - Gallery" \
+                                       "QtQuickControls/Qt Quick Controls - Text Editor"
diff --git a/src/quickcontrols/doc/qtquickcontrols.qdocconf b/src/quickcontrols/doc/qtquickcontrols.qdocconf
new file mode 100644
index 0000000000..285141b14b
--- /dev/null
+++ b/src/quickcontrols/doc/qtquickcontrols.qdocconf
@@ -0,0 +1,104 @@
+include($QT_INSTALL_DOCS/global/qt-module-defaults.qdocconf)
+include($QT_INSTALL_DOCS/config/exampleurl-qtquickcontrols2.qdocconf)
+include(manifest-meta.qdocconf)
+
+moduleheader            = QtQuickControls2
+
+project                 = QtQuickControls
+description             = Qt Quick Controls Reference Documentation
+version                 = $QT_VERSION
+
+qhp.projects            = QtQuickControls
+
+qhp.QtQuickControls.file          = qtquickcontrols.qhp
+qhp.QtQuickControls.namespace     = org.qt-project.qtquickcontrols.$QT_VERSION_TAG
+qhp.QtQuickControls.virtualFolder = qtquickcontrols
+qhp.QtQuickControls.indexTitle    = Qt Quick Controls
+qhp.QtQuickControls.indexRoot     =
+
+qhp.QtQuickControls.subprojects = qmltypes classes examples
+qhp.QtQuickControls.subprojects.qmltypes.title = QML Types
+qhp.QtQuickControls.subprojects.qmltypes.indexTitle = Qt Quick Controls QML Types
+qhp.QtQuickControls.subprojects.qmltypes.selectors = qmlclass
+qhp.QtQuickControls.subprojects.qmltypes.sortPages = true
+qhp.QtQuickControls.subprojects.classes.title = C++ Classes
+qhp.QtQuickControls.subprojects.classes.indexTitle = Qt Quick Controls C++ Classes
+qhp.QtQuickControls.subprojects.classes.selectors = class fake:headerfile
+qhp.QtQuickControls.subprojects.classes.sortPages = true
+qhp.QtQuickControls.subprojects.examples.title = Examples
+qhp.QtQuickControls.subprojects.examples.indexTitle = Qt Quick Controls Examples
+qhp.QtQuickControls.subprojects.examples.selectors = fake:example
+
+depends = qtcore qtgui qtdoc qtqml qtqmlmodels qtquick qtsql qtwidgets qtlabsplatform qmake qtcmake
+
+# Specify the install path under QT_INSTALL_EXAMPLES
+# Note: paths passed to \example command must contain the parent directory, e.g.
+# \example controls/tabs
+exampledirs += ../../../examples/quickcontrols2 \
+               ../../quicktemplates2 \
+               ../ \
+               snippets
+
+examples.fileextensions += "*.conf"
+
+examplesinstallpath = quickcontrols2
+
+headerdirs += ../../quicktemplates2 \
+              ..
+
+sourcedirs += ../../quicktemplates2 \
+              .. \
+              ../../quicktemplates2/doc/src \
+              src
+
+# Exclude .qml files from the doc build to prevent conflicts with .qml files
+# in style-specific directories; all types are documented in .cpp/.qdoc files
+sources.fileextensions = "*.c++ *.cc *.cpp *.cxx *.mm *.qdoc"
+
+imagedirs += images \
+             ..
+
+navigation.landingpage  = "Qt Quick Controls"
+navigation.qmltypespage = "Qt Quick Controls QML Types"
+navigation.cppclassespage = "Qt Quick Controls C++ Classes"
+
+tagfile                 = qtquickcontrols.tags
+
+# \styleimport {QtQuick.Controls.Universal 2.0}
+macro.styleimport.HTML = "<table class=\"alignedsummary\"><tbody><tr><td class=\"memItemLeft rightAlign topAlign\"> Import Statement:</td><td class=\"memItemRight bottomAlign\"> import \1</td></tr><tr><td class=\"memItemLeft rightAlign topAlign\"> Since:</td><td class=\"memItemRight bottomAlign\"> \2</td></tr></tbody></table>"
+
+# \styleproperty {Universal.accent} {enumeration} {html-target-id}
+# \target html-target-id
+# This property holds ...
+# (empty line)
+# \endstyleproperty
+macro.styleproperty.HTML = "<div class=\"qmlproto\"><table class=\"qmlname\"><tbody><tr valign=\"top\" class=\"odd\" id=\"\3\"><td class=\"tblQmlPropNode\"><p><span class=\"name\">\1</span> : <span class=\"type\">\2</span></p></td></tr></tbody></table></div>"
+macro.endstyleproperty = "\\br"
+
+# \stylemethod {returntype} {methodname} {argtype} {argname} {html-target-id}
+# \target html-target-id
+# This property holds ...
+# (empty line)
+# \endstylemethod
+macro.stylemethod.HTML = "<div class=\"qmlproto\"><table class=\"qmlname\"><tbody><tr valign=\"top\" class=\"odd\" id=\"\5\"><td class=\"tblQmlFuncNode\"><p><span class=\"type\">\1</span> <span class=\"name\">\2</span>(<span class="type">\3</span> <i>\4</i>)</p></td></tr></tbody></table></div>"
+macro.endstylemethod = "\\br"
+
+# \stylemethod2 {returntype} {methodname} {arg1type} {arg1name} {arg2type} {arg2name} {html-target-id}
+# \target html-target-id
+# This method returns ...
+# (empty line)
+# \endstylemethod2
+macro.stylemethod2.HTML = "<div class=\"qmlproto\"><table class=\"qmlname\"><tbody><tr valign=\"top\" class=\"odd\" id=\"\7\"><td class=\"tblQmlFuncNode\"><p><span class=\"type\">\1</span> <span class=\"name\">\2</span>(<span class="type">\3</span> <i>\4</i>, <span class="type">\5</span> <i>\6</i>)</p></td></tr></tbody></table></div>"
+macro.endstylemethod2 = "\\br"
+
+# \stylecolor {#6A00FF} {(default)}
+macro.stylecolor.HTML = "<div style=\"padding:10px;color:#fff;background:\1;\">\1 \2</div>"
+
+macro.nbsp.HTML = "&nbsp;"
+
+#Add output suffix to the html filenames
+outputsuffixes = QML
+outputsuffixes.QML = 2
+
+# Fail the documentation build if there are more warnings than the limit
+warninglimit = 0
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-action.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-action.qml
new file mode 100644
index 0000000000..4f50ba46d7
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-action.qml
@@ -0,0 +1,32 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    //! [action]
+    Action {
+        id: copyAction
+        text: qsTr("&Copy")
+        icon.name: "edit-copy"
+        shortcut: StandardKey.Copy
+        onTriggered: window.activeFocusItem.copy()
+    }
+    //! [action]
+
+    //! [toolbutton]
+    ToolButton {
+        id: toolButton
+        action: copyAction
+    }
+    //! [toolbutton]
+
+    //! [menuitem]
+    MenuItem {
+        id: menuItem
+        action: copyAction
+        text: qsTr("&Copy selected Text")
+    }
+    //! [menuitem]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-busyindicator-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-busyindicator-custom.qml
new file mode 100644
index 0000000000..3eefb11110
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-busyindicator-custom.qml
@@ -0,0 +1,68 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+BusyIndicator {
+    id: control
+
+    contentItem: Item {
+        implicitWidth: 64
+        implicitHeight: 64
+
+        Item {
+            id: item
+            x: parent.width / 2 - 32
+            y: parent.height / 2 - 32
+            width: 64
+            height: 64
+            opacity: control.running ? 1 : 0
+
+            Behavior on opacity {
+                OpacityAnimator {
+                    duration: 250
+                }
+            }
+
+            RotationAnimator {
+                target: item
+                running: control.visible && control.running
+                from: 0
+                to: 360
+                loops: Animation.Infinite
+                duration: 1250
+            }
+
+            Repeater {
+                id: repeater
+                model: 6
+
+                Rectangle {
+                    id: delegate
+                    x: item.width / 2 - width / 2
+                    y: item.height / 2 - height / 2
+                    implicitWidth: 10
+                    implicitHeight: 10
+                    radius: 5
+                    color: "#21be2b"
+
+                    required property int index
+
+                    transform: [
+                        Translate {
+                            y: -Math.min(item.width, item.height) * 0.5 + 5
+                        },
+                        Rotation {
+                            angle: delegate.index / repeater.count * 360
+                            origin.x: 5
+                            origin.y: 5
+                        }
+                    ]
+                }
+            }
+        }
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-button-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-custom.qml
new file mode 100644
index 0000000000..cf197a18ae
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-custom.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+Button {
+    id: control
+    text: qsTr("Button")
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: control.down ? "#17a81a" : "#21be2b"
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        border.color: control.down ? "#17a81a" : "#21be2b"
+        border.width: 1
+        radius: 2
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-button-icononly.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-icononly.qml
new file mode 100644
index 0000000000..027ecb4ed8
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-icononly.qml
@@ -0,0 +1,10 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Button {
+    icon.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
+    display: Button.IconOnly
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-button-textbesideicon.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-textbesideicon.qml
new file mode 100644
index 0000000000..c2dce1d99a
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-textbesideicon.qml
@@ -0,0 +1,11 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Button {
+    text: "Button"
+    icon.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
+    display: Button.TextBesideIcon
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-button-textonly.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-textonly.qml
new file mode 100644
index 0000000000..4b12b8acc2
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-textonly.qml
@@ -0,0 +1,10 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Button {
+    text: "Button"
+    display: Button.TextOnly
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-calendarmodel.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-calendarmodel.qml
new file mode 100644
index 0000000000..af2777b123
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-calendarmodel.qml
@@ -0,0 +1,32 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+ListView {
+    id: listview
+
+    width: 200; height: 200
+    snapMode: ListView.SnapOneItem
+    orientation: ListView.Horizontal
+    highlightRangeMode: ListView.StrictlyEnforceRange
+
+    model: CalendarModel {
+        from: new Date(2015, 0, 1)
+        to: new Date(2015, 11, 31)
+    }
+
+    delegate: MonthGrid {
+        width: listview.width
+        height: listview.height
+
+        month: model.month
+        year: model.year
+        locale: Qt.locale("en_US")
+    }
+
+    ScrollIndicator.horizontal: ScrollIndicator { }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-checkbox-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-checkbox-custom.qml
new file mode 100644
index 0000000000..a7421af39c
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-checkbox-custom.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+CheckBox {
+    id: control
+    text: qsTr("CheckBox")
+    checked: true
+
+    indicator: Rectangle {
+        implicitWidth: 26
+        implicitHeight: 26
+        x: control.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 3
+        border.color: control.down ? "#17a81a" : "#21be2b"
+
+        Rectangle {
+            width: 14
+            height: 14
+            x: 6
+            y: 6
+            radius: 2
+            color: control.down ? "#17a81a" : "#21be2b"
+            visible: control.checked
+        }
+    }
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: control.down ? "#17a81a" : "#21be2b"
+        verticalAlignment: Text.AlignVCenter
+        leftPadding: control.indicator.width + control.spacing
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-checkbox-group.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-checkbox-group.qml
new file mode 100644
index 0000000000..0d676be397
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-checkbox-group.qml
@@ -0,0 +1,34 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+Column {
+    ButtonGroup {
+        id: childGroup
+        exclusive: false
+        checkState: parentBox.checkState
+    }
+
+    CheckBox {
+        id: parentBox
+        text: qsTr("Parent")
+        checkState: childGroup.checkState
+    }
+
+    CheckBox {
+        checked: true
+        text: qsTr("Child 1")
+        leftPadding: indicator.width
+        ButtonGroup.group: childGroup
+    }
+
+    CheckBox {
+        text: qsTr("Child 2")
+        leftPadding: indicator.width
+        ButtonGroup.group: childGroup
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-checkdelegate-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-checkdelegate-custom.qml
new file mode 100644
index 0000000000..a4f4b84d18
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-checkdelegate-custom.qml
@@ -0,0 +1,50 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+CheckDelegate {
+    id: control
+    text: qsTr("CheckDelegate")
+    checked: true
+
+    contentItem: Text {
+        rightPadding: control.indicator.width + control.spacing
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: control.down ? "#17a81a" : "#21be2b"
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    indicator: Rectangle {
+        implicitWidth: 26
+        implicitHeight: 26
+        x: control.width - width - control.rightPadding
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        radius: 3
+        color: "transparent"
+        border.color: control.down ? "#17a81a" : "#21be2b"
+
+        Rectangle {
+            width: 14
+            height: 14
+            x: 6
+            y: 6
+            radius: 2
+            color: control.down ? "#17a81a" : "#21be2b"
+            visible: control.checked
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        visible: control.down || control.highlighted
+        color: control.down ? "#bdbebf" : "#eeeeee"
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-accepted.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-accepted.qml
new file mode 100644
index 0000000000..6f5eff6b55
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-accepted.qml
@@ -0,0 +1,21 @@
+// Copyright (C) 2019 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [combobox]
+ComboBox {
+    editable: true
+    model: ListModel {
+        id: model
+        ListElement { text: "Banana" }
+        ListElement { text: "Apple" }
+        ListElement { text: "Coconut" }
+    }
+    onAccepted: {
+        if (find(editText) === -1)
+            model.append({text: editText})
+    }
+}
+//! [combobox]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-custom.qml
new file mode 100644
index 0000000000..2481f6dcf8
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-custom.qml
@@ -0,0 +1,90 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+ComboBox {
+    id: control
+    model: ["First", "Second", "Third"]
+
+    delegate: ItemDelegate {
+        width: control.width
+        contentItem: Text {
+            text: control.textRole
+                ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole])
+                : modelData
+            color: "#21be2b"
+            font: control.font
+            elide: Text.ElideRight
+            verticalAlignment: Text.AlignVCenter
+        }
+        highlighted: control.highlightedIndex === index
+    }
+
+    indicator: Canvas {
+        id: canvas
+        x: control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        width: 12
+        height: 8
+        contextType: "2d"
+
+        Connections {
+            target: control
+            function onPressedChanged() { canvas.requestPaint(); }
+        }
+
+        onPaint: {
+            context.reset();
+            context.moveTo(0, 0);
+            context.lineTo(width, 0);
+            context.lineTo(width / 2, height);
+            context.closePath();
+            context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
+            context.fill();
+        }
+    }
+
+    contentItem: Text {
+        leftPadding: 0
+        rightPadding: control.indicator.width + control.spacing
+
+        text: control.displayText
+        font: control.font
+        color: control.pressed ? "#17a81a" : "#21be2b"
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: 40
+        border.color: control.pressed ? "#17a81a" : "#21be2b"
+        border.width: control.visualFocus ? 2 : 1
+        radius: 2
+    }
+
+    popup: Popup {
+        y: control.height - 1
+        width: control.width
+        implicitHeight: contentItem.implicitHeight
+        padding: 1
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.popup.visible ? control.delegateModel : null
+            currentIndex: control.highlightedIndex
+
+            ScrollIndicator.vertical: ScrollIndicator { }
+        }
+
+        background: Rectangle {
+            border.color: "#21be2b"
+            radius: 2
+        }
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-find.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-find.qml
new file mode 100644
index 0000000000..2513002264
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-find.qml
@@ -0,0 +1,16 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [find]
+ComboBox {
+    model: ListModel {
+        ListElement { text: "Banana" }
+        ListElement { text: "Apple" }
+        ListElement { text: "Coconut" }
+    }
+    Component.onCompleted: currentIndex = find("Coconut")
+}
+//! [find]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-popup.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-popup.qml
new file mode 100644
index 0000000000..8c636a3d5c
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-popup.qml
@@ -0,0 +1,13 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick.Controls
+
+ComboBox {
+//! [closePolicy]
+    popup.closePolicy: Popup.CloseOnEscape
+//! [closePolicy]
+//! [modal]
+    popup.modal: true
+//! [modal]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-textat.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-textat.qml
new file mode 100644
index 0000000000..8910ba3237
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-textat.qml
@@ -0,0 +1,16 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [textat]
+ComboBox {
+    model: ListModel {
+        ListElement { text: "Banana" }
+        ListElement { text: "Apple" }
+        ListElement { text: "Coconut" }
+    }
+    onActivated: (index) => { print(textAt(index)) }
+}
+//! [textat]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-valuerole.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-valuerole.qml
new file mode 100644
index 0000000000..8d32201799
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-valuerole.qml
@@ -0,0 +1,34 @@
+// Copyright (C) 2019 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [file]
+ApplicationWindow {
+    width: 640
+    height: 480
+    visible: true
+
+    // Used as an example of a backend - this would usually be
+    // e.g. a C++ type exposed to QML.
+    QtObject {
+        id: backend
+        property int modifier
+    }
+
+    ComboBox {
+        textRole: "text"
+        valueRole: "value"
+        // When an item is selected, update the backend.
+        onActivated: backend.modifier = currentValue
+        // Set the initial currentIndex to the value stored in the backend.
+        Component.onCompleted: currentIndex = indexOfValue(backend.modifier)
+        model: [
+            { value: Qt.NoModifier, text: qsTr("No modifier") },
+            { value: Qt.ShiftModifier, text: qsTr("Shift") },
+            { value: Qt.ControlModifier, text: qsTr("Control") }
+        ]
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dayofweekrow-layout.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dayofweekrow-layout.qml
new file mode 100644
index 0000000000..2358f252e0
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dayofweekrow-layout.qml
@@ -0,0 +1,23 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+//! [1]
+ColumnLayout {
+    DayOfWeekRow {
+        locale: grid.locale
+        Layout.fillWidth: true
+    }
+
+    MonthGrid {
+        id: grid
+        month: Calendar.December
+        year: 2015
+        locale: Qt.locale("en_US")
+        Layout.fillWidth: true
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dayofweekrow.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dayofweekrow.qml
new file mode 100644
index 0000000000..2188b4ccf1
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dayofweekrow.qml
@@ -0,0 +1,11 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+DayOfWeekRow {
+    locale: Qt.locale("en_US")
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-delaybutton-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-delaybutton-custom.qml
new file mode 100644
index 0000000000..a8b17ab36a
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-delaybutton-custom.qml
@@ -0,0 +1,58 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+DelayButton {
+    id: control
+    checked: true
+    text: qsTr("Delay\nButton")
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: "white"
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 100
+        opacity: enabled ? 1 : 0.3
+        color: control.down ? "#17a81a" : "#21be2b"
+        radius: size / 2
+
+        readonly property real size: Math.min(control.width, control.height)
+        width: size
+        height: size
+        anchors.centerIn: parent
+
+        Canvas {
+            id: canvas
+            anchors.fill: parent
+
+            Connections {
+                target: control
+                function onProgressChanged() { canvas.requestPaint(); }
+            }
+
+            onPaint: {
+                var ctx = getContext("2d")
+                ctx.clearRect(0, 0, width, height)
+                ctx.strokeStyle = "white"
+                ctx.lineWidth = parent.size / 20
+                ctx.beginPath()
+                var startAngle = Math.PI / 5 * 3
+                var endAngle = startAngle + control.progress * Math.PI / 5 * 9
+                ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle)
+                ctx.stroke()
+            }
+        }
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dial-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dial-custom.qml
new file mode 100644
index 0000000000..f1efc22c4d
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dial-custom.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+Dial {
+    id: control
+    background: Rectangle {
+        x: control.width / 2 - width / 2
+        y: control.height / 2 - height / 2
+        width: Math.max(64, Math.min(control.width, control.height))
+        height: width
+        color: "transparent"
+        radius: width / 2
+        border.color: control.pressed ? "#17a81a" : "#21be2b"
+        opacity: control.enabled ? 1 : 0.3
+    }
+
+    handle: Rectangle {
+        id: handleItem
+        x: control.background.x + control.background.width / 2 - width / 2
+        y: control.background.y + control.background.height / 2 - height / 2
+        width: 16
+        height: 16
+        color: control.pressed ? "#17a81a" : "#21be2b"
+        radius: 8
+        antialiasing: true
+        opacity: control.enabled ? 1 : 0.3
+        transform: [
+            Translate {
+                y: -Math.min(control.background.width, control.background.height) * 0.4 + handleItem.height / 2
+            },
+            Rotation {
+                angle: control.angle
+                origin.x: handleItem.width / 2
+                origin.y: handleItem.height / 2
+            }
+        ]
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog-modal.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog-modal.qml
new file mode 100644
index 0000000000..ba1580a4df
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog-modal.qml
@@ -0,0 +1,17 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: dialog.implicitWidth
+    height: dialog.implicitHeight
+//! [1]
+Dialog {
+    id: dialog
+    modal: true
+    standardButtons: Dialog.Ok
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog-modeless.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog-modeless.qml
new file mode 100644
index 0000000000..d70c9921e2
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog-modeless.qml
@@ -0,0 +1,17 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: dialog.implicitWidth
+    height: dialog.implicitHeight
+//! [1]
+Dialog {
+    id: dialog
+    modal: false
+    standardButtons: Dialog.Ok
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog.qml
new file mode 100644
index 0000000000..4d774c4e10
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog.qml
@@ -0,0 +1,20 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: dialog.implicitWidth
+    height: dialog.implicitHeight
+//! [1]
+Dialog {
+    id: dialog
+    title: "Title"
+    standardButtons: Dialog.Ok | Dialog.Cancel
+
+    onAccepted: console.log("Ok clicked")
+    onRejected: console.log("Cancel clicked")
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dialogbuttonbox-attached.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialogbuttonbox-attached.qml
new file mode 100644
index 0000000000..ef85771bfd
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialogbuttonbox-attached.qml
@@ -0,0 +1,18 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+DialogButtonBox {
+    Button {
+        text: qsTr("Save")
+        DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole
+    }
+    Button {
+        text: qsTr("Close")
+        DialogButtonBox.buttonRole: DialogButtonBox.DestructiveRole
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dialogbuttonbox.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialogbuttonbox.qml
new file mode 100644
index 0000000000..13a927520f
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialogbuttonbox.qml
@@ -0,0 +1,14 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+DialogButtonBox {
+    standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel
+
+    onAccepted: console.log("Ok clicked")
+    onRejected: console.log("Cancel clicked")
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-frame-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-frame-custom.qml
new file mode 100644
index 0000000000..de3e1a2327
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-frame-custom.qml
@@ -0,0 +1,19 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+Frame {
+    background: Rectangle {
+        color: "transparent"
+        border.color: "#21be2b"
+        radius: 2
+    }
+
+    Label {
+        text: qsTr("Content goes here!")
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-frame.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-frame.qml
new file mode 100644
index 0000000000..fcb128db54
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-frame.qml
@@ -0,0 +1,17 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+//! [1]
+Frame {
+    ColumnLayout {
+        anchors.fill: parent
+        CheckBox { text: qsTr("E-mail") }
+        CheckBox { text: qsTr("Calendar") }
+        CheckBox { text: qsTr("Contacts") }
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox-checkable.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox-checkable.qml
new file mode 100644
index 0000000000..0ab0822aca
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox-checkable.qml
@@ -0,0 +1,24 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+//! [1]
+GroupBox {
+    label: CheckBox {
+        id: checkBox
+        checked: true
+        text: qsTr("Synchronize")
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+        enabled: checkBox.checked
+        CheckBox { text: qsTr("E-mail") }
+        CheckBox { text: qsTr("Calendar") }
+        CheckBox { text: qsTr("Contacts") }
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox-custom.qml
new file mode 100644
index 0000000000..34d9df8a63
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox-custom.qml
@@ -0,0 +1,33 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+GroupBox {
+    id: control
+    title: qsTr("GroupBox")
+
+    background: Rectangle {
+        y: control.topPadding - control.bottomPadding
+        width: parent.width
+        height: parent.height - control.topPadding + control.bottomPadding
+        color: "transparent"
+        border.color: "#21be2b"
+        radius: 2
+    }
+
+    label: Label {
+        x: control.leftPadding
+        width: control.availableWidth
+        text: control.title
+        color: "#21be2b"
+        elide: Text.ElideRight
+    }
+
+    Label {
+        text: qsTr("Content goes here!")
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox.qml
new file mode 100644
index 0000000000..98282ed348
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox.qml
@@ -0,0 +1,18 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+//! [1]
+GroupBox {
+    title: qsTr("Synchronize")
+    ColumnLayout {
+        anchors.fill: parent
+        CheckBox { text: qsTr("E-mail") }
+        CheckBox { text: qsTr("Calendar") }
+        CheckBox { text: qsTr("Contacts") }
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-headerview-simple.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-headerview-simple.qml
new file mode 100644
index 0000000000..6f2e5fac45
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-headerview-simple.qml
@@ -0,0 +1,72 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+//![file]
+import QtQuick
+import QtQuick.Controls
+import Qt.labs.qmlmodels
+
+ApplicationWindow {
+    visible: true
+    width: 640
+    height:  480
+
+    //! [horizontal]
+    HorizontalHeaderView {
+        id: horizontalHeader
+        syncView: tableView
+        anchors.left: tableView.left
+    }
+    //! [horizontal]
+
+    //! [vertical]
+    VerticalHeaderView {
+        id: verticalHeader
+        syncView: tableView
+        anchors.top: tableView.top
+    }
+    //! [vertical]
+
+    TableView {
+        id: tableView
+        anchors.fill: parent
+        anchors.topMargin: horizontalHeader.height
+        anchors.leftMargin: verticalHeader.width
+        columnSpacing: 1
+        rowSpacing: 1
+        clip: true
+
+        model: TableModel {
+            TableModelColumn { display: "name" }
+            TableModelColumn { display: "color" }
+
+            rows: [
+                {
+                    "name": "cat",
+                    "color": "black"
+                },
+                {
+                    "name": "dog",
+                    "color": "brown"
+                },
+                {
+                    "name": "bird",
+                    "color": "white"
+                }
+            ]
+        }
+
+        delegate: Rectangle {
+            implicitWidth: 100
+            implicitHeight: 50
+            border.width: 1
+
+            Text {
+                text: display
+                anchors.centerIn: parent
+            }
+        }
+    }
+}
+
+//![file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-itemdelegate-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-itemdelegate-custom.qml
new file mode 100644
index 0000000000..3212cbc762
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-itemdelegate-custom.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+ItemDelegate {
+    id: control
+    text: qsTr("ItemDelegate")
+
+    contentItem: Text {
+        rightPadding: control.spacing
+        text: control.text
+        font: control.font
+        color: control.enabled ? (control.down ? "#17a81a" : "#21be2b") : "#bdbebf"
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        color: control.down ? "#dddedf" : "#eeeeee"
+
+        Rectangle {
+            width: parent.width
+            height: 1
+            color: control.down ? "#17a81a" : "#21be2b"
+            anchors.bottom: parent.bottom
+        }
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-itemdelegate.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-itemdelegate.qml
new file mode 100644
index 0000000000..49c12b1dff
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-itemdelegate.qml
@@ -0,0 +1,24 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+ListView {
+    width: 160
+    height: 240
+
+    model: Qt.fontFamilies()
+
+    delegate: ItemDelegate {
+        text: modelData
+        width: parent.width
+        onClicked: console.log("clicked:", modelData)
+
+        required property string modelData
+    }
+
+    ScrollIndicator.vertical: ScrollIndicator { }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-label-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-label-custom.qml
new file mode 100644
index 0000000000..79bc9d3c13
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-label-custom.qml
@@ -0,0 +1,12 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+Label {
+    text: qsTr("Label")
+    color: "#21be2b"
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-label.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-label.qml
new file mode 100644
index 0000000000..7ca63d0251
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-label.qml
@@ -0,0 +1,11 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+Label {
+    text: "Label"
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-material-accent.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-accent.qml
new file mode 100644
index 0000000000..71a84fac82
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-accent.qml
@@ -0,0 +1,19 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Controls.Material
+
+Pane {
+    padding: 4
+
+//! [1]
+Button {
+    text: qsTr("Button")
+    highlighted: true
+    Material.accent: Material.Orange
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-material-background.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-background.qml
new file mode 100644
index 0000000000..f9f1dd0915
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-background.qml
@@ -0,0 +1,18 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Material
+
+Pane {
+    padding: 4
+
+//! [1]
+Button {
+    text: qsTr("Button")
+    highlighted: true
+    Material.background: Material.Teal
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-material-elevation.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-elevation.qml
new file mode 100644
index 0000000000..4f8b27e7ef
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-elevation.qml
@@ -0,0 +1,27 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Material
+
+Pane {
+    contentWidth: 120
+    contentHeight: 120
+    padding: 10
+    bottomPadding: 20
+
+//! [1]
+Pane {
+    width: 120
+    height: 120
+
+    Material.elevation: 6
+
+    Label {
+        text: qsTr("I'm a card!")
+        anchors.centerIn: parent
+    }
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-material-foreground.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-foreground.qml
new file mode 100644
index 0000000000..b4a7743c16
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-foreground.qml
@@ -0,0 +1,17 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Material
+
+Pane {
+    padding: 4
+
+//! [1]
+Button {
+    text: qsTr("Button")
+    Material.foreground: Material.Pink
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-material-theme.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-theme.qml
new file mode 100644
index 0000000000..4e5bf81cd9
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-theme.qml
@@ -0,0 +1,20 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Material
+
+Pane {
+    padding: 10
+
+//! [1]
+Pane {
+    Material.theme: Material.Dark
+
+    Button {
+        text: qsTr("Button")
+    }
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-material-variant.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-variant.qml
new file mode 100644
index 0000000000..ad824f1e34
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-variant.qml
@@ -0,0 +1,189 @@
+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Material
+import QtQuick.Layouts
+
+Pane {
+    id: root
+    implicitWidth: 400
+    implicitHeight: 600
+    padding: 10
+
+    readonly property color measurementColor: "darkorange"
+    readonly property int barLeftMargin: 10
+    readonly property int textTopMargin: 12
+
+    Component {
+        id: measurementComponent
+
+        Rectangle {
+            color: root.measurementColor
+            width:  1
+            height: parent.height
+
+            Rectangle {
+                width: 5
+                height: 1
+                color: root.measurementColor
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            Rectangle {
+                width: 5
+                height: 1
+                color: root.measurementColor
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.bottom: parent.bottom
+            }
+
+            Text {
+                x: 8
+                text: parent.height
+                height: parent.height
+                color: root.measurementColor
+                verticalAlignment: Text.AlignVCenter
+            }
+        }
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: 20
+
+        ColumnLayout {
+            spacing: root.textTopMargin
+
+            Button {
+                id: button
+                text: qsTr("Button")
+
+                Loader {
+                    sourceComponent: measurementComponent
+                    height: parent.height
+                    anchors.left: parent.right
+                    anchors.leftMargin: root.barLeftMargin
+                }
+
+            }
+            Text {
+                text: "Roboto " + button.font.pixelSize
+                color: root.measurementColor
+            }
+        }
+
+        ColumnLayout {
+            spacing: root.textTopMargin
+
+            ItemDelegate {
+                id: itemDelegate
+                text: qsTr("ItemDelegate")
+
+                Loader {
+                    sourceComponent: measurementComponent
+                    height: parent.height
+                    anchors.left: parent.right
+                    anchors.leftMargin: root.barLeftMargin
+                }
+
+            }
+            Text {
+                text: "Roboto " + itemDelegate.font.pixelSize
+                color: root.measurementColor
+            }
+        }
+
+        ColumnLayout {
+            spacing: root.textTopMargin
+
+            CheckDelegate {
+                id: checkDelegate
+                text: qsTr("CheckDelegate")
+
+                Loader {
+                    sourceComponent: measurementComponent
+                    height: parent.height
+                    anchors.left: parent.right
+                    anchors.leftMargin: root.barLeftMargin
+                }
+
+            }
+            Text {
+                text: "Roboto " + checkDelegate.font.pixelSize
+                color: root.measurementColor
+            }
+        }
+
+        ColumnLayout {
+            spacing: root.textTopMargin
+
+            RadioDelegate {
+                id: radioDelegate
+                text: qsTr("RadioDelegate")
+
+                Loader {
+                    sourceComponent: measurementComponent
+                    height: parent.height
+                    anchors.left: parent.right
+                    anchors.leftMargin: root.barLeftMargin
+                }
+
+            }
+            Text {
+                text: "Roboto " + radioDelegate.font.pixelSize
+                color: root.measurementColor
+            }
+        }
+
+        ColumnLayout {
+            spacing: root.textTopMargin
+
+            ComboBox {
+                id: comboBox
+                model: [ qsTr("ComboBox") ]
+
+                Loader {
+                    sourceComponent: measurementComponent
+                    height: parent.height
+                    anchors.left: parent.right
+                    anchors.leftMargin: root.barLeftMargin
+                }
+
+            }
+            Text {
+                text: "Roboto " + comboBox.font.pixelSize
+                color: root.measurementColor
+            }
+        }
+
+        ColumnLayout {
+            spacing: root.textTopMargin
+
+            Item {
+                implicitWidth: groupBox.implicitWidth
+                implicitHeight: groupBox.implicitHeight
+
+                GroupBox {
+                    id: groupBox
+                    title: qsTr("GroupBox")
+                }
+                Loader {
+                    sourceComponent: measurementComponent
+                    height: parent.height
+                    anchors.left: parent.right
+                    anchors.leftMargin: root.barLeftMargin
+                }
+            }
+            Text {
+                text: "Roboto " + groupBox.font.pixelSize
+                color: root.measurementColor
+            }
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+    }
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-menu-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-menu-custom.qml
new file mode 100644
index 0000000000..f38d5f370a
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-menu-custom.qml
@@ -0,0 +1,109 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+ApplicationWindow {
+    id: window
+    width: menu.width
+    height: menu.height
+    visible: true
+
+    Component.onCompleted: menu.popup(menu.itemAt(1))
+
+// Indent it like this so that the indenting in the generated doc is normal.
+Menu {
+    id: menu
+
+    Action { text: qsTr("Tool Bar"); checkable: true }
+    Action { text: qsTr("Side Bar"); checkable: true; checked: true }
+    Action { text: qsTr("Status Bar"); checkable: true; checked: true }
+
+    MenuSeparator {
+        contentItem: Rectangle {
+            implicitWidth: 200
+            implicitHeight: 1
+            color: "#21be2b"
+        }
+    }
+
+    Menu {
+        title: qsTr("Advanced")
+        // ...
+    }
+
+    topPadding: 2
+    bottomPadding: 2
+
+    delegate: MenuItem {
+        id: menuItem
+        implicitWidth: 200
+        implicitHeight: 40
+
+        arrow: Canvas {
+            x: parent.width - width
+            implicitWidth: 40
+            implicitHeight: 40
+            visible: menuItem.subMenu
+            onPaint: {
+                var ctx = getContext("2d")
+                ctx.fillStyle = menuItem.highlighted ? "#ffffff" : "#21be2b"
+                ctx.moveTo(15, 15)
+                ctx.lineTo(width - 15, height / 2)
+                ctx.lineTo(15, height - 15)
+                ctx.closePath()
+                ctx.fill()
+            }
+        }
+
+        indicator: Item {
+            implicitWidth: 40
+            implicitHeight: 40
+            Rectangle {
+                width: 26
+                height: 26
+                anchors.centerIn: parent
+                visible: menuItem.checkable
+                border.color: "#21be2b"
+                radius: 3
+                Rectangle {
+                    width: 14
+                    height: 14
+                    anchors.centerIn: parent
+                    visible: menuItem.checked
+                    color: "#21be2b"
+                    radius: 2
+                }
+            }
+        }
+
+        contentItem: Text {
+            leftPadding: menuItem.indicator.width
+            rightPadding: menuItem.arrow.width
+            text: menuItem.text
+            font: menuItem.font
+            opacity: enabled ? 1.0 : 0.3
+            color: menuItem.highlighted ? "#ffffff" : "#21be2b"
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
+
+        background: Rectangle {
+            implicitWidth: 200
+            implicitHeight: 40
+            opacity: enabled ? 1 : 0.3
+            color: menuItem.highlighted ? "#21be2b" : "transparent"
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 40
+        color: "#ffffff"
+        border.color: "#21be2b"
+        radius: 2
+    }
+}
+} //! [eof]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-menu-instantiator.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-menu-instantiator.qml
new file mode 100644
index 0000000000..cda91182df
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-menu-instantiator.qml
@@ -0,0 +1,45 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: settings
+
+    // This would come from a C++ type. We add a mock implementation here to make tst_snippets pass.
+    function displayableFilePath(path) {
+        return path
+    }
+
+//! [menu]
+Menu {
+    title: qsTr("File")
+
+    Menu {
+        id: recentFilesMenu
+        title: qsTr("Recent Files")
+        enabled: recentFilesInstantiator.count > 0
+
+        Instantiator {
+            id: recentFilesInstantiator
+            model: settings.recentFiles
+            delegate: MenuItem {
+                text: settings.displayableFilePath(modelData)
+                onTriggered: loadFile(modelData)
+            }
+
+            onObjectAdded: (index, object) => recentFilesMenu.insertItem(index, object)
+            onObjectRemoved: (index, object) => recentFilesMenu.removeItem(object)
+        }
+
+        MenuSeparator {}
+
+        MenuItem {
+            text: qsTr("Clear Recent Files")
+            onTriggered: settings.clearRecentFiles()
+        }
+    }
+}
+//! [menu]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-menubar-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-menubar-custom.qml
new file mode 100644
index 0000000000..2d2d15efdf
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-menubar-custom.qml
@@ -0,0 +1,60 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+ApplicationWindow {
+    id: window
+    visible: true
+    width: menuBar.implicitWidth
+    height: menuBar.height
+
+    Component.onCompleted: menuBar.itemAt(1).highlighted = true
+
+    header:
+
+// Indent it like this so that the indenting in the generated doc is normal.
+MenuBar {
+    id: menuBar
+
+    Menu { title: qsTr("File") }
+    Menu { title: qsTr("Edit") }
+    Menu { title: qsTr("View") }
+    Menu { title: qsTr("Help") }
+
+    delegate: MenuBarItem {
+        id: menuBarItem
+
+        contentItem: Text {
+            text: menuBarItem.text
+            font: menuBarItem.font
+            opacity: enabled ? 1.0 : 0.3
+            color: menuBarItem.highlighted ? "#ffffff" : "#21be2b"
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
+
+        background: Rectangle {
+            implicitWidth: 40
+            implicitHeight: 40
+            opacity: enabled ? 1 : 0.3
+            color: menuBarItem.highlighted ? "#21be2b" : "transparent"
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 40
+        implicitHeight: 40
+        color: "#ffffff"
+
+        Rectangle {
+            color: "#21be2b"
+            width: parent.width
+            height: 1
+            anchors.bottom: parent.bottom
+        }
+    }
+}
+} //! [eof]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-menubar.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-menubar.qml
new file mode 100644
index 0000000000..55064604b4
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-menubar.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [begin]
+ApplicationWindow {
+    id: window
+    width: 320
+    height: 260
+    visible: true
+
+    //! [skipfrom]
+    Component.onCompleted: {
+        menuBar.itemAt(0).triggered()
+        menuBar.itemAt(0).menu.itemAt(2).highlighted = true
+    }
+    //! [skipto]
+
+    menuBar: MenuBar {
+        Menu {
+            title: qsTr("&File")
+            Action { text: qsTr("&New...") }
+            Action { text: qsTr("&Open...") }
+            Action { text: qsTr("&Save") }
+            Action { text: qsTr("Save &As...") }
+            MenuSeparator { }
+            Action { text: qsTr("&Quit") }
+        }
+        Menu {
+            title: qsTr("&Edit")
+            Action { text: qsTr("Cu&t") }
+            Action { text: qsTr("&Copy") }
+            Action { text: qsTr("&Paste") }
+        }
+        Menu {
+            title: qsTr("&Help")
+            Action { text: qsTr("&About") }
+        }
+    }
+}
+//! [end]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-menuseparator-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-menuseparator-custom.qml
new file mode 100644
index 0000000000..2b66187e10
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-menuseparator-custom.qml
@@ -0,0 +1,45 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: window
+    width: menu.contentItem.width
+    height: menu.contentItem.height
+    visible: true
+
+// Indent it like this so that the indenting in the generated doc is normal.
+Menu {
+    id: menu
+    contentItem.parent: window
+
+    MenuItem {
+        text: qsTr("New...")
+    }
+    MenuItem {
+        text: qsTr("Open...")
+    }
+    MenuItem {
+        text: qsTr("Save")
+    }
+
+    MenuSeparator {
+        padding: 0
+        topPadding: 12
+        bottomPadding: 12
+        contentItem: Rectangle {
+            implicitWidth: 200
+            implicitHeight: 1
+            color: "#1E000000"
+        }
+    }
+
+    MenuItem {
+        text: qsTr("Exit")
+    }
+}
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-menuseparator.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-menuseparator.qml
new file mode 100644
index 0000000000..6be0de85bc
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-menuseparator.qml
@@ -0,0 +1,36 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: window
+    width: menu.contentItem.width
+    height: menu.contentItem.height
+    visible: true
+
+// Indent it like this so that the indenting in the generated doc is normal.
+Menu {
+    id: menu
+    contentItem.parent: window
+
+    MenuItem {
+        text: qsTr("New...")
+    }
+    MenuItem {
+        text: qsTr("Open...")
+    }
+    MenuItem {
+        text: qsTr("Save")
+    }
+
+    MenuSeparator {}
+
+    MenuItem {
+        text: qsTr("Exit")
+    }
+}
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid-layout.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid-layout.qml
new file mode 100644
index 0000000000..0620ee6d0b
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid-layout.qml
@@ -0,0 +1,37 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+//! [1]
+GridLayout {
+    columns: 2
+
+    DayOfWeekRow {
+        locale: grid.locale
+
+        Layout.column: 1
+        Layout.fillWidth: true
+    }
+
+    WeekNumberColumn {
+        month: grid.month
+        year: grid.year
+        locale: grid.locale
+
+        Layout.fillHeight: true
+    }
+
+    MonthGrid {
+        id: grid
+        month: Calendar.December
+        year: 2015
+        locale: Qt.locale("en_US")
+
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid-localization.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid-localization.qml
new file mode 100644
index 0000000000..56a801ab75
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid-localization.qml
@@ -0,0 +1,25 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+MonthGrid {
+    id: monthGrid
+    month: Calendar.December
+    year: 2015
+    locale: Qt.locale("ar")
+    delegate: Text {
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        opacity: model.month === monthGrid.month ? 1 : 0
+        text: monthGrid.locale.toString(model.date, "d")
+        font: monthGrid.font
+
+        required property var model
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid.qml
new file mode 100644
index 0000000000..c630edbe26
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid.qml
@@ -0,0 +1,13 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+MonthGrid {
+    month: Calendar.December
+    year: 2015
+    locale: Qt.locale("en_US")
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-overlay-modal.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-overlay-modal.qml
new file mode 100644
index 0000000000..d1537d73bf
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-overlay-modal.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Window
+
+Item {
+    id: root
+    width: 200
+    height: 200
+
+    Binding {
+        target: popup
+        property: "visible"
+        value: root.Window.active
+    }
+//! [1]
+Popup {
+    id: popup
+    width: 400
+    height: 400
+    modal: true
+    visible: true
+
+    Overlay.modal: Rectangle {
+        color: "#aacfdbe7"
+    }
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-overlay-modeless.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-overlay-modeless.qml
new file mode 100644
index 0000000000..06ebb16fb1
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-overlay-modeless.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Window
+
+Item {
+    id: root
+    width: 200
+    height: 200
+
+    Binding {
+        target: popup
+        property: "visible"
+        value: root.Window.active
+    }
+//! [1]
+Popup {
+    id: popup
+    width: 400
+    height: 400
+    dim: true
+    visible: true
+
+    Overlay.modeless: Rectangle {
+        color: "#aacfdbe7"
+    }
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-overview.cmake b/src/quickcontrols/doc/snippets/qtquickcontrols2-overview.cmake
new file mode 100644
index 0000000000..6aa63152db
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-overview.cmake
@@ -0,0 +1,7 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#! [0]
+find_package(Qt6 REQUIRED COMPONENTS QuickControls2)
+target_link_libraries(mytarget PRIVATE Qt6::QuickControls2)
+#! [0]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator-custom.qml
new file mode 100644
index 0000000000..5372c41f31
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator-custom.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+PageIndicator {
+    id: control
+    count: 5
+    currentIndex: 2
+
+    delegate: Rectangle {
+        implicitWidth: 8
+        implicitHeight: 8
+
+        radius: width / 2
+        color: "#21be2b"
+
+        opacity: index === control.currentIndex ? 0.95 : pressed ? 0.7 : 0.45
+
+        required property int index
+
+        Behavior on opacity {
+            OpacityAnimator {
+                duration: 100
+            }
+        }
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator-interactive.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator-interactive.qml
new file mode 100644
index 0000000000..e3e65beb22
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator-interactive.qml
@@ -0,0 +1,34 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick.Controls
+
+Pane {
+//! [1]
+SwipeView {
+    id: view
+    currentIndex: pageIndicator.currentIndex
+    anchors.fill: parent
+
+    Page {
+        title: qsTr("Home")
+    }
+    Page {
+        title: qsTr("Discover")
+    }
+    Page {
+        title: qsTr("Activity")
+    }
+}
+
+PageIndicator {
+    id: pageIndicator
+    interactive: true
+    count: view.count
+    currentIndex: view.currentIndex
+
+    anchors.bottom: parent.bottom
+    anchors.horizontalCenter: parent.horizontalCenter
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator.qml
new file mode 100644
index 0000000000..6929565825
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator.qml
@@ -0,0 +1,11 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+PageIndicator {
+    count: 5
+    currentIndex: 2
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-pane-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-pane-custom.qml
new file mode 100644
index 0000000000..96e3db1f37
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-pane-custom.qml
@@ -0,0 +1,17 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+Pane {
+    background: Rectangle {
+        color: "#eeeeee"
+    }
+
+    Label {
+        text: qsTr("Content goes here!")
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-pane.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-pane.qml
new file mode 100644
index 0000000000..ed1b80d4e8
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-pane.qml
@@ -0,0 +1,17 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+//! [1]
+Pane {
+    ColumnLayout {
+        anchors.fill: parent
+        CheckBox { text: qsTr("E-mail") }
+        CheckBox { text: qsTr("Calendar") }
+        CheckBox { text: qsTr("Contacts") }
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-popup-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-popup-custom.qml
new file mode 100644
index 0000000000..951dfa7d52
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-popup-custom.qml
@@ -0,0 +1,29 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Window
+
+Item {
+    id: root
+    width: 200
+    height: 200
+
+    Binding {
+        target: popup
+        property: "visible"
+        value: root.Window.active
+    }
+//! [1]
+Popup {
+    id: popup
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 200
+        border.color: "#444"
+    }
+    contentItem: Column {}
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-popup.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-popup.qml
new file mode 100644
index 0000000000..5b9ec29fb2
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-popup.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+//! [centerIn]
+ApplicationWindow {
+    id: window
+    // ...
+
+    Pane {
+        // ...
+
+        Popup {
+            anchors.centerIn: Overlay.overlay
+        }
+    }
+}
+//! [centerIn]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-progressbar-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-progressbar-custom.qml
new file mode 100644
index 0000000000..7158232081
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-progressbar-custom.qml
@@ -0,0 +1,32 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+ProgressBar {
+    id: control
+    value: 0.5
+    padding: 2
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 6
+        color: "#e6e6e6"
+        radius: 3
+    }
+
+    contentItem: Item {
+        implicitWidth: 200
+        implicitHeight: 4
+
+        Rectangle {
+            width: control.visualPosition * parent.width
+            height: parent.height
+            radius: 2
+            color: "#17a81a"
+        }
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-radiobutton-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-radiobutton-custom.qml
new file mode 100644
index 0000000000..929fe7e8e2
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-radiobutton-custom.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+RadioButton {
+    id: control
+    text: qsTr("RadioButton")
+    checked: true
+
+    indicator: Rectangle {
+        implicitWidth: 26
+        implicitHeight: 26
+        x: control.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 13
+        border.color: control.down ? "#17a81a" : "#21be2b"
+
+        Rectangle {
+            width: 14
+            height: 14
+            x: 6
+            y: 6
+            radius: 7
+            color: control.down ? "#17a81a" : "#21be2b"
+            visible: control.checked
+        }
+    }
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: control.down ? "#17a81a" : "#21be2b"
+        verticalAlignment: Text.AlignVCenter
+        leftPadding: control.indicator.width + control.spacing
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-radiodelegate-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-radiodelegate-custom.qml
new file mode 100644
index 0000000000..5eb856b8b5
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-radiodelegate-custom.qml
@@ -0,0 +1,50 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+RadioDelegate {
+    id: control
+    text: qsTr("RadioDelegate")
+    checked: true
+
+    contentItem: Text {
+        rightPadding: control.indicator.width + control.spacing
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: control.down ? "#17a81a" : "#21be2b"
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    indicator: Rectangle {
+        implicitWidth: 26
+        implicitHeight: 26
+        x: control.width - width - control.rightPadding
+        y: parent.height / 2 - height / 2
+        radius: 13
+        color: "transparent"
+        border.color: control.down ? "#17a81a" : "#21be2b"
+
+        Rectangle {
+            width: 14
+            height: 14
+            x: 6
+            y: 6
+            radius: 7
+            color: control.down ? "#17a81a" : "#21be2b"
+            visible: control.checked
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        visible: control.down || control.highlighted
+        color: control.down ? "#bdbebf" : "#eeeeee"
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-rangeslider-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-rangeslider-custom.qml
new file mode 100644
index 0000000000..81bcb0d668
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-rangeslider-custom.qml
@@ -0,0 +1,52 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+RangeSlider {
+    id: control
+    first.value: 0.25
+    second.value: 0.75
+
+    background: Rectangle {
+        x: control.leftPadding
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 200
+        implicitHeight: 4
+        width: control.availableWidth
+        height: implicitHeight
+        radius: 2
+        color: "#bdbebf"
+
+        Rectangle {
+            x: control.first.visualPosition * parent.width
+            width: control.second.visualPosition * parent.width - x
+            height: parent.height
+            color: "#21be2b"
+            radius: 2
+        }
+    }
+
+    first.handle: Rectangle {
+        x: control.leftPadding + control.first.visualPosition * (control.availableWidth - width)
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 26
+        implicitHeight: 26
+        radius: 13
+        color: control.first.pressed ? "#f0f0f0" : "#f6f6f6"
+        border.color: "#bdbebf"
+    }
+
+    second.handle: Rectangle {
+        x: control.leftPadding + control.second.visualPosition * (control.availableWidth - width)
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 26
+        implicitHeight: 26
+        radius: 13
+        color: control.second.pressed ? "#f0f0f0" : "#f6f6f6"
+        border.color: "#bdbebf"
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-roundbutton.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-roundbutton.qml
new file mode 100644
index 0000000000..d83e4abc32
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-roundbutton.qml
@@ -0,0 +1,12 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+RoundButton {
+    text: "\u2713" // Unicode Character 'CHECK MARK'
+    onClicked: textArea.readOnly = true
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-active.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-active.qml
new file mode 100644
index 0000000000..5292bc5499
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-active.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: 100
+    height: 100
+
+    //! [1]
+    Flickable {
+        anchors.fill: parent
+
+        contentWidth: parent.width * 2
+        contentHeight: parent.height * 2
+
+        ScrollBar.horizontal: ScrollBar { id: hbar; active: vbar.active }
+        ScrollBar.vertical: ScrollBar { id: vbar; active: hbar.active }
+    }
+    //! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-custom.qml
new file mode 100644
index 0000000000..2a4faede61
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-custom.qml
@@ -0,0 +1,29 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+ScrollBar {
+    id: control
+    size: 0.3
+    position: 0.2
+    active: true
+    orientation: Qt.Vertical
+
+    contentItem: Rectangle {
+        implicitWidth: 6
+        implicitHeight: 100
+        radius: width / 2
+        color: control.pressed ? "#81e889" : "#c2f4c6"
+        // Hide the ScrollBar when it's not needed.
+        opacity: control.policy === ScrollBar.AlwaysOn || (control.active && control.size < 1.0) ? 0.75 : 0
+
+        // Animate the changes in opacity (default duration is 250 ms).
+        Behavior on opacity {
+            NumberAnimation {}
+        }
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-non-attached.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-non-attached.qml
new file mode 100644
index 0000000000..6ba505b199
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-non-attached.qml
@@ -0,0 +1,56 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: 200
+    height: 200
+
+//! [1]
+Rectangle {
+    id: frame
+    clip: true
+    width: 160
+    height: 160
+    border.color: "black"
+    anchors.centerIn: parent
+
+    Text {
+        id: content
+        text: "ABC"
+        font.pixelSize: 160
+        x: -hbar.position * width
+        y: -vbar.position * height
+    }
+
+    ScrollBar {
+        id: vbar
+        hoverEnabled: true
+        active: hovered || pressed
+        orientation: Qt.Vertical
+        size: frame.height / content.height
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+    }
+
+    ScrollBar {
+        id: hbar
+        hoverEnabled: true
+        active: hovered || pressed
+        orientation: Qt.Horizontal
+        size: frame.width / content.width
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+    }
+}
+//! [1]
+
+Component.onCompleted: {
+    hbar.active = true
+    vbar.active = true
+}
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-policy.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-policy.qml
new file mode 100644
index 0000000000..7f08912e7e
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-policy.qml
@@ -0,0 +1,14 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+Flickable {
+    contentHeight: 2000
+    ScrollBar.vertical: ScrollBar {
+        policy: ScrollBar.AlwaysOn
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-active.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-active.qml
new file mode 100644
index 0000000000..0f6afdfc4d
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-active.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: 100
+    height: 100
+
+    //! [1]
+    Flickable {
+        anchors.fill: parent
+
+        contentWidth: parent.width * 2
+        contentHeight: parent.height * 2
+
+        ScrollIndicator.horizontal: ScrollIndicator { id: hbar; active: vbar.active }
+        ScrollIndicator.vertical: ScrollIndicator { id: vbar; active: hbar.active }
+    }
+    //! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-custom.qml
new file mode 100644
index 0000000000..f447fd4c94
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-custom.qml
@@ -0,0 +1,21 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+ScrollIndicator {
+    id: control
+    size: 0.3
+    position: 0.2
+    active: true
+    orientation: Qt.Vertical
+
+    contentItem: Rectangle {
+        implicitWidth: 2
+        implicitHeight: 100
+        color: "#c2f4c6"
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-non-attached.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-non-attached.qml
new file mode 100644
index 0000000000..063c771f1b
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-non-attached.qml
@@ -0,0 +1,60 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: 200
+    height: 200
+
+//! [1]
+Rectangle {
+    id: frame
+    clip: true
+    width: 160
+    height: 160
+    border.color: "black"
+    anchors.centerIn: parent
+
+    Text {
+        id: content
+        text: "ABC"
+        font.pixelSize: 169
+
+        MouseArea {
+            id: mouseArea
+            drag.target: content
+            drag.minimumX: frame.width - width
+            drag.minimumY: frame.height - height
+            drag.maximumX: 0
+            drag.maximumY: 0
+            anchors.fill: content
+        }
+    }
+
+    ScrollIndicator {
+        id: verticalIndicator
+        active: mouseArea.pressed
+        orientation: Qt.Vertical
+        size: frame.height / content.height
+        position: -content.y / content.height
+        anchors { top: parent.top; right: parent.right; bottom: parent.bottom }
+    }
+
+    ScrollIndicator {
+        id: horizontalIndicator
+        active: mouseArea.pressed
+        orientation: Qt.Horizontal
+        size: frame.width / content.width
+        position: -content.x / content.width
+        anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
+    }
+}
+//! [1]
+
+Component.onCompleted: {
+    horizontalIndicator.active = true;
+    verticalIndicator.active = true;
+}
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-custom.qml
new file mode 100644
index 0000000000..2f23b9fd58
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-custom.qml
@@ -0,0 +1,57 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: 200
+    height: 200
+
+    Binding {
+        target: control.ScrollBar.horizontal
+        property: "active"
+        value: true
+    }
+
+    Binding {
+        target: control.ScrollBar.vertical
+        property: "active"
+        value: true
+    }
+
+//! [file]
+ScrollView {
+    id: control
+
+    width: 200
+    height: 200
+    focus: true
+
+    Label {
+        text: "ABC"
+        font.pixelSize: 224
+    }
+
+    ScrollBar.vertical: ScrollBar {
+        parent: control
+        x: control.mirrored ? 0 : control.width - width
+        y: control.topPadding
+        height: control.availableHeight
+        active: control.ScrollBar.horizontal.active
+    }
+
+    ScrollBar.horizontal: ScrollBar {
+        parent: control
+        x: control.leftPadding
+        y: control.height - height
+        width: control.availableWidth
+        active: control.ScrollBar.vertical.active
+    }
+
+    background: Rectangle {
+        border.color: control.activeFocus ? "#21be2b" : "#bdbebf"
+    }
+}
+//! [file]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-interactive.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-interactive.qml
new file mode 100644
index 0000000000..3f7bc8eb6d
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-interactive.qml
@@ -0,0 +1,14 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [file]
+ScrollView {
+    // ...
+    ScrollBar.horizontal.interactive: true
+    ScrollBar.vertical.interactive: true
+}
+//! [file]
+
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-listview.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-listview.qml
new file mode 100644
index 0000000000..053e8e395a
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-listview.qml
@@ -0,0 +1,39 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: root
+    width: 200
+    height: 200
+
+    Binding {
+        target: root.children[0].ScrollBar.horizontal
+        property: "active"
+        value: true
+    }
+
+    Binding {
+        target: root.children[0].ScrollBar.vertical
+        property: "active"
+        value: true
+    }
+
+//! [file]
+ScrollView {
+    width: 200
+    height: 200
+
+    ListView {
+        model: 20
+        delegate: ItemDelegate {
+            text: "Item " + index
+
+            required property int index
+        }
+    }
+}
+//! [file]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-policy.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-policy.qml
new file mode 100644
index 0000000000..fa75cd14ed
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-policy.qml
@@ -0,0 +1,14 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [file]
+ScrollView {
+    // ...
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
+}
+//! [file]
+
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview.qml
new file mode 100644
index 0000000000..e7f1adf758
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview.qml
@@ -0,0 +1,36 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Rectangle {
+    id: root
+    width: 200
+    height: 200
+    border.color: "#ddd"
+
+    Binding {
+        target: root.children[0].ScrollBar.horizontal
+        property: "active"
+        value: true
+    }
+
+    Binding {
+        target: root.children[0].ScrollBar.vertical
+        property: "active"
+        value: true
+    }
+
+//! [file]
+ScrollView {
+    width: 200
+    height: 200
+
+    Label {
+        text: "ABC"
+        font.pixelSize: 224
+    }
+}
+//! [file]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-selectionrectangle.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-selectionrectangle.qml
new file mode 100644
index 0000000000..a53941e824
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-selectionrectangle.qml
@@ -0,0 +1,48 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQml.Models
+import Qt.labs.qmlmodels
+
+Window {
+    width: 480
+    height: 640
+    visible: true
+    visibility: Window.AutomaticVisibility
+
+//![0]
+    TableView {
+        id: tableView
+        anchors.fill: parent
+        clip: true
+
+        model: TableModel {
+            TableModelColumn { display: "name" }
+            rows: [ { "name": "Harry" }, { "name": "Hedwig" } ]
+        }
+
+        selectionModel: ItemSelectionModel {
+            model: tableView.model
+        }
+
+        delegate: Rectangle {
+            implicitWidth: 100
+            implicitHeight: 30
+            color: selected ? "blue" : "lightgray"
+
+            required property bool selected
+
+            Text { text: display }
+        }
+    }
+
+    SelectionRectangle {
+        target: tableView
+    }
+//![0]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-slider-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-slider-custom.qml
new file mode 100644
index 0000000000..66e0bd7990
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-slider-custom.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+Slider {
+    id: control
+    value: 0.5
+
+    background: Rectangle {
+        x: control.leftPadding
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 200
+        implicitHeight: 4
+        width: control.availableWidth
+        height: implicitHeight
+        radius: 2
+        color: "#bdbebf"
+
+        Rectangle {
+            width: control.visualPosition * parent.width
+            height: parent.height
+            color: "#21be2b"
+            radius: 2
+        }
+    }
+
+    handle: Rectangle {
+        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 26
+        implicitHeight: 26
+        radius: 13
+        color: control.pressed ? "#f0f0f0" : "#f6f6f6"
+        border.color: "#bdbebf"
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-custom.qml
new file mode 100644
index 0000000000..b32106a5bd
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-custom.qml
@@ -0,0 +1,72 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+SpinBox {
+    id: control
+    value: 50
+    editable: true
+
+    contentItem: TextInput {
+        z: 2
+        text: control.textFromValue(control.value, control.locale)
+
+        font: control.font
+        color: "#21be2b"
+        selectionColor: "#21be2b"
+        selectedTextColor: "#ffffff"
+        horizontalAlignment: Qt.AlignHCenter
+        verticalAlignment: Qt.AlignVCenter
+
+        readOnly: !control.editable
+        validator: control.validator
+        inputMethodHints: Qt.ImhFormattedNumbersOnly
+    }
+
+    up.indicator: Rectangle {
+        x: control.mirrored ? 0 : parent.width - width
+        height: parent.height
+        implicitWidth: 40
+        implicitHeight: 40
+        color: control.up.pressed ? "#e4e4e4" : "#f6f6f6"
+        border.color: enabled ? "#21be2b" : "#bdbebf"
+
+        Text {
+            text: "+"
+            font.pixelSize: control.font.pixelSize * 2
+            color: "#21be2b"
+            anchors.fill: parent
+            fontSizeMode: Text.Fit
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+
+    down.indicator: Rectangle {
+        x: control.mirrored ? parent.width - width : 0
+        height: parent.height
+        implicitWidth: 40
+        implicitHeight: 40
+        color: control.down.pressed ? "#e4e4e4" : "#f6f6f6"
+        border.color: enabled ? "#21be2b" : "#bdbebf"
+
+        Text {
+            text: "-"
+            font.pixelSize: control.font.pixelSize * 2
+            color: "#21be2b"
+            anchors.fill: parent
+            fontSizeMode: Text.Fit
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 140
+        border.color: "#bdbebf"
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-double.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-double.qml
new file mode 100644
index 0000000000..fe2dfbd722
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-double.qml
@@ -0,0 +1,32 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+SpinBox {
+    id: spinbox
+    from: 0
+    value: 110
+    to: 100 * 100
+    stepSize: 100
+    anchors.centerIn: parent
+
+    property int decimals: 2
+    property real realValue: value / 100
+
+    validator: DoubleValidator {
+        bottom: Math.min(spinbox.from, spinbox.to)
+        top:  Math.max(spinbox.from, spinbox.to)
+    }
+
+    textFromValue: function(value, locale) {
+        return Number(value / 100).toLocaleString(locale, 'f', spinbox.decimals)
+    }
+
+    valueFromText: function(text, locale) {
+        return Number.fromLocaleString(locale, text) * 100
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-textual.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-textual.qml
new file mode 100644
index 0000000000..271cad0f07
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-textual.qml
@@ -0,0 +1,32 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+SpinBox {
+    id: spinBox
+    from: 0
+    to: items.length - 1
+    value: 1 // "Medium"
+
+    property var items: ["Small", "Medium", "Large"]
+
+    validator: RegularExpressionValidator {
+        regularExpression: new RegExp("(Small|Medium|Large)", "i")
+    }
+
+    textFromValue: function(value) {
+        return items[value];
+    }
+
+    valueFromText: function(text) {
+        for (var i = 0; i < items.length; ++i) {
+            if (items[i].toLowerCase().indexOf(text.toLowerCase()) === 0)
+                return i
+        }
+        return spinBox.value
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox.qml
new file mode 100644
index 0000000000..24fac81ca6
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox.qml
@@ -0,0 +1,11 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+SpinBox {
+    value: 50
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-splitview-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-splitview-custom.qml
new file mode 100644
index 0000000000..0d5452c25d
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-splitview-custom.qml
@@ -0,0 +1,33 @@
+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: 200
+    height: 100
+
+    //! [1]
+    SplitView {
+        id: splitView
+        anchors.fill: parent
+
+        handle: Rectangle {
+            implicitWidth: 4
+            implicitHeight: 4
+            color: SplitHandle.pressed ? "#81e889"
+                : (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6")
+        }
+
+        Rectangle {
+            implicitWidth: 150
+            color: "#444"
+        }
+        Rectangle {
+            implicitWidth: 50
+            color: "#666"
+        }
+    }
+    //! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-splitview-handle-containmentmask.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-splitview-handle-containmentmask.qml
new file mode 100644
index 0000000000..f12bfe1da8
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-splitview-handle-containmentmask.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: 200
+    height: 100
+
+    //! [1]
+    SplitView {
+        id: splitView
+        anchors.fill: parent
+
+        handle: Rectangle {
+            id: handleDelegate
+            implicitWidth: 4
+            implicitHeight: 4
+            color: SplitHandle.pressed ? "#81e889"
+                : (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6")
+
+            containmentMask: Item {
+                x: (handleDelegate.width - width) / 2
+                width: 64
+                height: splitView.height
+            }
+        }
+
+        Rectangle {
+            implicitWidth: 150
+            color: "#444"
+        }
+        Rectangle {
+            implicitWidth: 50
+            color: "#666"
+        }
+    }
+    //! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-stackview-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-stackview-custom.qml
new file mode 100644
index 0000000000..381fbe6b95
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-stackview-custom.qml
@@ -0,0 +1,29 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+StackView {
+    id: control
+
+    popEnter: Transition {
+        XAnimator {
+            from: (control.mirrored ? -1 : 1) * -control.width
+            to: 0
+            duration: 400
+            easing.type: Easing.OutCubic
+        }
+    }
+
+    popExit: Transition {
+        XAnimator {
+            from: 0
+            to: (control.mirrored ? -1 : 1) * control.width
+            duration: 400
+            easing.type: Easing.OutCubic
+        }
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-stackview-visible.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-stackview-visible.qml
new file mode 100644
index 0000000000..d711a02e1a
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-stackview-visible.qml
@@ -0,0 +1,52 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+StackView {
+    id: stackView
+    property real offset: 10
+    width: 100; height: 100
+
+    initialItem: Component {
+        id: page
+        Rectangle {
+            property real pos: StackView.index * stackView.offset
+            property real hue: Math.random()
+            color: Qt.hsla(hue, 0.5, 0.8, 0.6)
+            border.color: Qt.hsla(hue, 0.5, 0.5, 0.9)
+            StackView.visible: true
+        }
+    }
+
+    pushEnter: Transition {
+        id: pushEnter
+        ParallelAnimation {
+            PropertyAction { property: "x"; value: pushEnter.ViewTransition.item.pos }
+            NumberAnimation { properties: "y"; from: pushEnter.ViewTransition.item.pos + stackView.offset; to: pushEnter.ViewTransition.item.pos; duration: 400; easing.type: Easing.OutCubic }
+            NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 400; easing.type: Easing.OutCubic }
+        }
+    }
+    popExit: Transition {
+        id: popExit
+        ParallelAnimation {
+            PropertyAction { property: "x"; value: popExit.ViewTransition.item.pos }
+            NumberAnimation { properties: "y"; from: popExit.ViewTransition.item.pos; to: popExit.ViewTransition.item.pos + stackView.offset; duration: 400; easing.type: Easing.OutCubic }
+            NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 400; easing.type: Easing.OutCubic }
+        }
+    }
+
+    pushExit: Transition {
+        id: pushExit
+        PropertyAction { property: "x"; value: pushExit.ViewTransition.item.pos }
+        PropertyAction { property: "y"; value: pushExit.ViewTransition.item.pos }
+    }
+    popEnter: Transition {
+        id: popEnter
+        PropertyAction { property: "x"; value: popEnter.ViewTransition.item.pos }
+        PropertyAction { property: "y"; value: popEnter.ViewTransition.item.pos }
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate-custom.qml
new file mode 100644
index 0000000000..973511c418
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate-custom.qml
@@ -0,0 +1,48 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+SwipeDelegate {
+    id: control
+    text: qsTr("SwipeDelegate")
+
+    Component {
+        id: component
+
+        Rectangle {
+            color: SwipeDelegate.pressed ? "#333" : "#444"
+            width: parent.width
+            height: parent.height
+            clip: true
+
+            Label {
+                text: qsTr("Press me!")
+                color: "#21be2b"
+                anchors.centerIn: parent
+            }
+        }
+    }
+
+    swipe.left: component
+    swipe.right: component
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        color: control.enabled ? (control.down ? "#17a81a" : "#21be2b") : "#bdbebf"
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+
+        Behavior on x {
+            enabled: !control.down
+            NumberAnimation {
+                easing.type: Easing.InOutCubic
+                duration: 400
+            }
+        }
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate-transition.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate-transition.qml
new file mode 100644
index 0000000000..4215ea9202
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate-transition.qml
@@ -0,0 +1,13 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+SwipeDelegate {
+    swipe.transition: Transition {
+        SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic }
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate.qml
new file mode 100644
index 0000000000..fb2df4f6d3
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate.qml
@@ -0,0 +1,63 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+ListView {
+    id: listView
+    anchors.fill: parent
+    model: ListModel {
+        ListElement { sender: "Bob Bobbleton"; title: "How are you going?" }
+        ListElement { sender: "Rug Emporium"; title: "SALE! All rugs MUST go!" }
+        ListElement { sender: "Electric Co."; title: "Electricity bill 15/07/2016 overdue" }
+        ListElement { sender: "Tips"; title: "Five ways this tip will save your life" }
+    }
+    delegate: SwipeDelegate {
+        id: swipeDelegate
+        text: sender + " - " + title
+        width: listView.width
+
+        required property string sender
+        required property string title
+
+        ListView.onRemove: SequentialAnimation {
+            PropertyAction {
+                target: swipeDelegate
+                property: "ListView.delayRemove"
+                value: true
+            }
+            NumberAnimation {
+                target: swipeDelegate
+                property: "height"
+                to: 0
+                easing.type: Easing.InOutQuad
+            }
+            PropertyAction {
+                target: swipeDelegate
+                property: "ListView.delayRemove"
+                value: false
+            }
+        }
+
+        swipe.right: Label {
+            id: deleteLabel
+            text: qsTr("Delete")
+            color: "white"
+            verticalAlignment: Label.AlignVCenter
+            padding: 12
+            height: parent.height
+            anchors.right: parent.right
+
+            SwipeDelegate.onClicked: listView.model.remove(index)
+
+            required property int index
+
+            background: Rectangle {
+                color: deleteLabel.SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"
+            }
+        }
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-swipeview-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipeview-custom.qml
new file mode 100644
index 0000000000..e77bc9a3e8
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipeview-custom.qml
@@ -0,0 +1,15 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+SwipeView {
+    id: control
+
+    background: Rectangle {
+        color: "#eeeeee"
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-swipeview-indicator.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipeview-indicator.qml
new file mode 100644
index 0000000000..1831d92b9f
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipeview-indicator.qml
@@ -0,0 +1,39 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: 200
+    height: 320
+
+    //! [1]
+    SwipeView {
+        id: view
+
+        currentIndex: 1
+        anchors.fill: parent
+
+        Item {
+            id: firstPage
+        }
+        Item {
+            id: secondPage
+        }
+        Item {
+            id: thirdPage
+        }
+    }
+
+    PageIndicator {
+        id: indicator
+
+        count: view.count
+        currentIndex: view.currentIndex
+
+        anchors.bottom: view.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+    //! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-switch-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-switch-custom.qml
new file mode 100644
index 0000000000..5ca4b96140
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-switch-custom.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+Switch {
+    id: control
+    text: qsTr("Switch")
+
+    indicator: Rectangle {
+        implicitWidth: 48
+        implicitHeight: 26
+        x: control.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 13
+        color: control.checked ? "#17a81a" : "#ffffff"
+        border.color: control.checked ? "#17a81a" : "#cccccc"
+
+        Rectangle {
+            x: control.checked ? parent.width - width : 0
+            width: 26
+            height: 26
+            radius: 13
+            color: control.down ? "#cccccc" : "#ffffff"
+            border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
+        }
+    }
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: control.down ? "#17a81a" : "#21be2b"
+        verticalAlignment: Text.AlignVCenter
+        leftPadding: control.indicator.width + control.spacing
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-switchdelegate-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-switchdelegate-custom.qml
new file mode 100644
index 0000000000..13cc7b4402
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-switchdelegate-custom.qml
@@ -0,0 +1,49 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+SwitchDelegate {
+    id: control
+    text: qsTr("SwitchDelegate")
+    checked: true
+
+    contentItem: Text {
+        rightPadding: control.indicator.width + control.spacing
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: control.down ? "#17a81a" : "#21be2b"
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    indicator: Rectangle {
+        implicitWidth: 48
+        implicitHeight: 26
+        x: control.width - width - control.rightPadding
+        y: parent.height / 2 - height / 2
+        radius: 13
+        color: control.checked ? "#17a81a" : "transparent"
+        border.color: control.checked ? "#17a81a" : "#cccccc"
+
+        Rectangle {
+            x: control.checked ? parent.width - width : 0
+            width: 26
+            height: 26
+            radius: 13
+            color: control.down ? "#cccccc" : "#ffffff"
+            border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        visible: control.down || control.highlighted
+        color: control.down ? "#bdbebf" : "#eeeeee"
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-custom.qml
new file mode 100644
index 0000000000..cdce972150
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-custom.qml
@@ -0,0 +1,25 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+TabBar {
+    id: control
+
+    background: Rectangle {
+        color: "#eeeeee"
+    }
+
+    TabButton {
+        text: qsTr("Home")
+    }
+    TabButton {
+        text: qsTr("Discover")
+    }
+    TabButton {
+        text: qsTr("Activity")
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-explicit.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-explicit.qml
new file mode 100644
index 0000000000..2293984e30
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-explicit.qml
@@ -0,0 +1,28 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: 360
+    height: childrenRect.height
+
+//! [1]
+TabBar {
+    width: parent.width
+    TabButton {
+        text: "First"
+        width: implicitWidth
+    }
+    TabButton {
+        text: "Second"
+        width: implicitWidth
+    }
+    TabButton {
+        text: "Third"
+        width: implicitWidth
+    }
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-flickable.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-flickable.qml
new file mode 100644
index 0000000000..3851b226bd
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-flickable.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: 360
+    height: bar.height
+
+//! [1]
+TabBar {
+    id: bar
+    width: parent.width
+
+    Repeater {
+        model: ["First", "Second", "Third", "Fourth", "Fifth"]
+
+        TabButton {
+            text: modelData
+            width: Math.max(100, bar.width / 5)
+        }
+    }
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar.qml
new file mode 100644
index 0000000000..3ce32c1c50
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+Column {
+    width: 300
+
+    //! [1]
+    TabBar {
+        id: bar
+        width: parent.width
+        TabButton {
+            text: qsTr("Home")
+        }
+        TabButton {
+            text: qsTr("Discover")
+        }
+        TabButton {
+            text: qsTr("Activity")
+        }
+    }
+
+    StackLayout {
+        width: parent.width
+        currentIndex: bar.currentIndex
+        Item {
+            id: homeTab
+        }
+        Item {
+            id: discoverTab
+        }
+        Item {
+            id: activityTab
+        }
+    }
+    //! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbutton.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbutton.qml
new file mode 100644
index 0000000000..c397092a8a
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbutton.qml
@@ -0,0 +1,19 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+TabBar {
+    TabButton {
+        text: qsTr("Home")
+    }
+    TabButton {
+        text: qsTr("Discover")
+    }
+    TabButton {
+        text: qsTr("Activity")
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-textarea-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-textarea-custom.qml
new file mode 100644
index 0000000000..39a94e13cc
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-textarea-custom.qml
@@ -0,0 +1,18 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+TextArea {
+    id: control
+    placeholderText: qsTr("Enter description")
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 40
+        border.color: control.enabled ? "#21be2b" : "transparent"
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-textarea-scrollable.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-textarea-scrollable.qml
new file mode 100644
index 0000000000..7f915815e3
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-textarea-scrollable.qml
@@ -0,0 +1,23 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    width: 100
+    height: 100
+
+    Binding { target: view.ScrollBar.vertical; property: "active"; value: true }
+
+    //! [1]
+    ScrollView {
+        id: view
+        anchors.fill: parent
+
+        TextArea {
+            text: "TextArea\n...\n...\n...\n...\n...\n...\n"
+        }
+    }
+    //! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-custom.qml
new file mode 100644
index 0000000000..c4d0c88c2a
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-custom.qml
@@ -0,0 +1,19 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+TextField {
+    id: control
+    placeholderText: qsTr("Enter description")
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 40
+        color: control.enabled ? "transparent" : "#353637"
+        border.color: control.enabled ? "#21be2b" : "transparent"
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-disabled.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-disabled.qml
new file mode 100644
index 0000000000..aa8639190c
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-disabled.qml
@@ -0,0 +1,11 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+TextField {
+    width: 80
+    text: "Disabled"
+    enabled: false
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-focused.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-focused.qml
new file mode 100644
index 0000000000..62299eeabc
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-focused.qml
@@ -0,0 +1,11 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+TextField {
+    width: 80
+    text: "Focused"
+    focus: true
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-normal.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-normal.qml
new file mode 100644
index 0000000000..72a5626142
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-normal.qml
@@ -0,0 +1,10 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+TextField {
+    width: 80
+    text: "Normal"
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbar-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbar-custom.qml
new file mode 100644
index 0000000000..2aabcbfbe3
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbar-custom.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+//! [file]
+ToolBar {
+    id: control
+
+    background: Rectangle {
+        implicitHeight: 40
+        color: "#eeeeee"
+
+        Rectangle {
+            width: parent.width
+            height: 1
+            anchors.bottom: parent.bottom
+            color: "transparent"
+            border.color: "#21be2b"
+        }
+    }
+
+    RowLayout {
+        anchors.fill: parent
+        ToolButton {
+            text: qsTr("Undo")
+        }
+        ToolButton {
+            text: qsTr("Redo")
+        }
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbar.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbar.qml
new file mode 100644
index 0000000000..cb07df80f6
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbar.qml
@@ -0,0 +1,39 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+Item {
+    id: root
+    width: children[0].implicitWidth * 2
+    height: children[0].implicitHeight
+    Binding {
+        target: root.children[0]
+        property: "width"
+        value: root.width
+    }
+//! [1]
+ToolBar {
+    RowLayout {
+        anchors.fill: parent
+        ToolButton {
+            text: qsTr("‹")
+            onClicked: stack.pop()
+        }
+        Label {
+            text: "Title"
+            elide: Label.ElideRight
+            horizontalAlignment: Qt.AlignHCenter
+            verticalAlignment: Qt.AlignVCenter
+            Layout.fillWidth: true
+        }
+        ToolButton {
+            text: qsTr("⋮")
+            onClicked: menu.open()
+        }
+    }
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbutton-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbutton-custom.qml
new file mode 100644
index 0000000000..6ec46b0adf
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbutton-custom.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+ToolButton {
+    id: control
+    text: qsTr("ToolButton")
+    width: 120
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: control.down ? "#17a81a" : "#21be2b"
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        implicitWidth: 40
+        implicitHeight: 40
+        color: Qt.darker("#33333333", control.enabled && (control.checked || control.highlighted) ? 1.5 : 1.0)
+        opacity: enabled ? 1 : 0.3
+        visible: control.down || (control.enabled && (control.checked || control.highlighted))
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-toolseparator-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolseparator-custom.qml
new file mode 100644
index 0000000000..201e04b0e8
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolseparator-custom.qml
@@ -0,0 +1,45 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+
+//! [file]
+ToolBar {
+    RowLayout {
+        anchors.fill: parent
+
+        ToolButton {
+            text: qsTr("Action 1")
+        }
+        ToolButton {
+            text: qsTr("Action 2")
+        }
+
+        ToolSeparator {
+            padding: vertical ? 10 : 2
+            topPadding: vertical ? 2 : 10
+            bottomPadding: vertical ? 2 : 10
+
+            contentItem: Rectangle {
+                implicitWidth: parent.vertical ? 1 : 24
+                implicitHeight: parent.vertical ? 24 : 1
+                color: "#c3c3c3"
+            }
+        }
+
+        ToolButton {
+            text: qsTr("Action 3")
+        }
+        ToolButton {
+            text: qsTr("Action 4")
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-toolseparator.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolseparator.qml
new file mode 100644
index 0000000000..eb3543402d
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolseparator.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+
+//! [1]
+ToolBar {
+    RowLayout {
+        anchors.fill: parent
+
+        ToolButton {
+            text: qsTr("Action 1")
+        }
+        ToolButton {
+            text: qsTr("Action 2")
+        }
+
+        ToolSeparator {}
+
+        ToolButton {
+            text: qsTr("Action 3")
+        }
+        ToolButton {
+            text: qsTr("Action 4")
+        }
+
+        ToolSeparator {}
+
+        ToolButton {
+            text: qsTr("Action 5")
+        }
+        ToolButton {
+            text: qsTr("Action 6")
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-custom.qml
new file mode 100644
index 0000000000..089e6d02b9
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-custom.qml
@@ -0,0 +1,24 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+Item {
+ToolTip {
+    id: control
+    text: qsTr("A descriptive tool tip of what the button does")
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        color: "#21be2b"
+    }
+
+    background: Rectangle {
+        border.color: "#21be2b"
+    }
+}
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-hover.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-hover.qml
new file mode 100644
index 0000000000..289334d20d
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-hover.qml
@@ -0,0 +1,17 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+Button {
+    text: qsTr("Button")
+    hoverEnabled: true
+
+    ToolTip.delay: 1000
+    ToolTip.timeout: 5000
+    ToolTip.visible: hovered
+    ToolTip.text: qsTr("This tool tip is shown after hovering the button for a second.")
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-pressandhold.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-pressandhold.qml
new file mode 100644
index 0000000000..e209ce9ce9
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-pressandhold.qml
@@ -0,0 +1,15 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+Button {
+    text: qsTr("Button")
+
+    ToolTip.visible: pressed
+    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
+    ToolTip.text: qsTr("This tool tip is shown after pressing and holding the button down.")
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-slider.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-slider.qml
new file mode 100644
index 0000000000..823e7f1842
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-slider.qml
@@ -0,0 +1,29 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+
+Item {
+    id: root
+    width: slider.width
+    height: slider.height * 2.0
+
+    Binding { target: slider.anchors; property: "centerIn"; value: root }
+    Binding { target: slider.anchors; property: "verticalCenterOffset"; value: slider.height / 2 }
+    Binding { target: slider; property: "pressed"; value: root.Window.active }
+
+    //! [1]
+    Slider {
+        id: slider
+        value: 0.5
+
+        ToolTip {
+            parent: slider.handle
+            visible: slider.pressed
+            text: slider.value.toFixed(1)
+        }
+    }
+    //! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip.qml
new file mode 100644
index 0000000000..d0cf142376
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip.qml
@@ -0,0 +1,27 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+
+Item {
+    id: root
+    width: 360
+    height: button.height * 2
+
+    property Button button: children[0]
+
+    Binding { target: root.button; property: "down"; value: root.Window.active }
+    Binding { target: root.button.anchors; property: "bottom"; value: root.bottom }
+    Binding { target: root.button.anchors; property: "horizontalCenter"; value: root.horizontalCenter }
+
+    //! [1]
+    Button {
+        text: qsTr("Save")
+
+        ToolTip.visible: down
+        ToolTip.text: qsTr("Save the active project")
+    }
+    //! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-custom.qml
new file mode 100644
index 0000000000..3487e7316d
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-custom.qml
@@ -0,0 +1,57 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [file]
+import QtQuick
+import QtQuick.Controls
+
+Tumbler {
+    id: control
+    model: 15
+
+    background: Item {
+        Rectangle {
+            opacity: control.enabled ? 0.2 : 0.1
+            border.color: "#000000"
+            width: parent.width
+            height: 1
+            anchors.top: parent.top
+        }
+
+        Rectangle {
+            opacity: control.enabled ? 0.2 : 0.1
+            border.color: "#000000"
+            width: parent.width
+            height: 1
+            anchors.bottom: parent.bottom
+        }
+    }
+
+    delegate: Text {
+        text: qsTr("Item %1").arg(modelData + 1)
+        font: control.font
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
+
+        required property var modelData
+        required property int index
+    }
+
+    Rectangle {
+        anchors.horizontalCenter: control.horizontalCenter
+        y: control.height * 0.4
+        width: 40
+        height: 1
+        color: "#21be2b"
+    }
+
+    Rectangle {
+        anchors.horizontalCenter: control.horizontalCenter
+        y: control.height * 0.6
+        width: 40
+        height: 1
+        color: "#21be2b"
+    }
+}
+//! [file]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-listView.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-listView.qml
new file mode 100644
index 0000000000..1b39c2aa16
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-listView.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [contentItem]
+Tumbler {
+    id: tumbler
+
+    contentItem: ListView {
+        model: tumbler.model
+        delegate: tumbler.delegate
+
+        snapMode: ListView.SnapToItem
+        highlightRangeMode: ListView.StrictlyEnforceRange
+        preferredHighlightBegin: height / 2 - (height / tumbler.visibleItemCount / 2)
+        preferredHighlightEnd: height / 2 + (height / tumbler.visibleItemCount / 2)
+        clip: true
+    }
+}
+//! [contentItem]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-pathView.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-pathView.qml
new file mode 100644
index 0000000000..30e90b2ba5
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-pathView.qml
@@ -0,0 +1,33 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [contentItem]
+Tumbler {
+    id: tumbler
+
+    contentItem: PathView {
+        id: pathView
+        model: tumbler.model
+        delegate: tumbler.delegate
+        clip: true
+        pathItemCount: tumbler.visibleItemCount + 1
+        preferredHighlightBegin: 0.5
+        preferredHighlightEnd: 0.5
+        dragMargin: width / 2
+
+        path: Path {
+            startX: pathView.width / 2
+            startY: -pathView.delegateHeight / 2
+            PathLine {
+                x: pathView.width / 2
+                y: pathView.pathItemCount * pathView.delegateHeight - pathView.delegateHeight / 2
+            }
+        }
+
+        property real delegateHeight: tumbler.availableHeight / tumbler.visibleItemCount
+    }
+}
+//! [contentItem]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-timePicker.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-timePicker.qml
new file mode 100644
index 0000000000..a5d4b3585a
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-timePicker.qml
@@ -0,0 +1,62 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+//! [tumbler]
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+
+Rectangle {
+    width: frame.implicitWidth + 10
+    height: frame.implicitHeight + 10
+
+    function formatText(count, modelData) {
+        var data = count === 12 ? modelData + 1 : modelData;
+        return data.toString().length < 2 ? "0" + data : data;
+    }
+
+    FontMetrics {
+        id: fontMetrics
+    }
+
+    Component {
+        id: delegateComponent
+
+        Label {
+            text: formatText(Tumbler.tumbler.count, modelData)
+            opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: fontMetrics.font.pixelSize * 1.25
+        }
+    }
+
+    Frame {
+        id: frame
+        padding: 0
+        anchors.centerIn: parent
+
+        Row {
+            id: row
+
+            Tumbler {
+                id: hoursTumbler
+                model: 12
+                delegate: delegateComponent
+            }
+
+            Tumbler {
+                id: minutesTumbler
+                model: 60
+                delegate: delegateComponent
+            }
+
+            Tumbler {
+                id: amPmTumbler
+                model: ["AM", "PM"]
+                delegate: delegateComponent
+            }
+        }
+    }
+}
+//! [tumbler]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-accent.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-accent.qml
new file mode 100644
index 0000000000..52aca6eea9
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-accent.qml
@@ -0,0 +1,19 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Controls.Universal
+
+Pane {
+    padding: 10
+
+//! [1]
+Button {
+    text: qsTr("Button")
+    highlighted: true
+    Universal.accent: Universal.Orange
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-background.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-background.qml
new file mode 100644
index 0000000000..106549f789
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-background.qml
@@ -0,0 +1,20 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Universal
+
+Pane {
+    padding: 10
+
+//! [1]
+Pane {
+    Universal.background: Universal.Steel
+
+    Button {
+        text: qsTr("Button")
+    }
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-foreground.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-foreground.qml
new file mode 100644
index 0000000000..491a4f94d4
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-foreground.qml
@@ -0,0 +1,17 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Universal
+
+Pane {
+    padding: 10
+
+//! [1]
+Button {
+    text: qsTr("Button")
+    Universal.foreground: Universal.Pink
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-theme.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-theme.qml
new file mode 100644
index 0000000000..5ade2c7c55
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-theme.qml
@@ -0,0 +1,20 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Universal
+
+Pane {
+    padding: 10
+
+//! [1]
+Pane {
+    Universal.theme: Universal.Dark
+
+    Button {
+        text: qsTr("Button")
+    }
+}
+//! [1]
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-weeknumbercolumn-layout.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-weeknumbercolumn-layout.qml
new file mode 100644
index 0000000000..6d1dd1ba79
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-weeknumbercolumn-layout.qml
@@ -0,0 +1,25 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+//! [1]
+RowLayout {
+    WeekNumberColumn {
+        month: grid.month
+        year: grid.year
+        locale: grid.locale
+        Layout.fillHeight: true
+    }
+
+    MonthGrid {
+        id: grid
+        month: Calendar.December
+        year: 2015
+        locale: Qt.locale("en_US")
+        Layout.fillHeight: true
+    }
+}
+//! [1]
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-weeknumbercolumn.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-weeknumbercolumn.qml
new file mode 100644
index 0000000000..e3c757a0b8
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-weeknumbercolumn.qml
@@ -0,0 +1,13 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls
+
+//! [1]
+WeekNumberColumn {
+    month: Calendar.December
+    year: 2015
+    locale: Qt.locale("en_US")
+}
+//! [1]
diff --git a/src/quickcontrols/doc/src/external-pages.qdoc b/src/quickcontrols/doc/src/external-pages.qdoc
new file mode 100644
index 0000000000..0b1c99a7c1
--- /dev/null
+++ b/src/quickcontrols/doc/src/external-pages.qdoc
@@ -0,0 +1,12 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \externalpage https://doc.qt.io/qt-5/qtquickcontrols2-differences.html
+    \title Qt 5.15: Qt Quick Controls vs Qt Quick Controls 1
+*/
+
+/*!
+    \externalpage https://doc.qt.io/qtcreator/creator-project-creating.html#selecting-project-type
+    \title Qt Creator: Project Types
+*/
diff --git a/src/quickcontrols/doc/src/includes/customize-button-background.qdocinc b/src/quickcontrols/doc/src/includes/customize-button-background.qdocinc
new file mode 100644
index 0000000000..0acad02d38
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/customize-button-background.qdocinc
@@ -0,0 +1,25 @@
+//! [file]
+\qml
+import QtQuick
+import QtQuick.Controls
+
+ApplicationWindow {
+    width: 400
+    height: 400
+    visible: true
+
+    Button {
+        id: button
+        text: "A Special Button"
+        background: Rectangle {
+            implicitWidth: 100
+            implicitHeight: 40
+            color: button.down ? "#d6d6d6" : "#f6f6f6"
+            border.color: "#26282a"
+            border.width: 1
+            radius: 4
+        }
+    }
+}
+\endqml
+//! [file]
diff --git a/src/quickcontrols/doc/src/includes/customizing-native-styles.qdocinc b/src/quickcontrols/doc/src/includes/customizing-native-styles.qdocinc
new file mode 100644
index 0000000000..e1feacaa49
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/customizing-native-styles.qdocinc
@@ -0,0 +1,14 @@
+It is instead recommended to always base a customized control on top of a single style
+that is available on all platforms, e.g \l {Basic Style}, \l {Fusion Style}, \l {Imagine Style},
+\l {Material Style}, \l {Universal Style}. By doing so, you are guaranteed that it will
+always look the same, regardless of which style the application is run with. For example:
+
+\code
+    import QtQuick.Controls.Basic as Basic
+
+    Basic.SpinBox {
+        background: Rectangle { /* ... */ }
+    }
+\endcode
+
+\b {See also} \l {Styling Qt Quick Controls}
diff --git a/src/quickcontrols/doc/src/includes/inputmethodhints.qdocinc b/src/quickcontrols/doc/src/includes/inputmethodhints.qdocinc
new file mode 100644
index 0000000000..73710e1e15
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/inputmethodhints.qdocinc
@@ -0,0 +1,38 @@
+//! [flags]
+The value is a bit-wise combination of flags or \c Qt.ImhNone if no hints are set.
+
+Flags that alter behavior are:
+
+\list
+\li Qt.ImhHiddenText - Characters should be hidden, as is typically used when entering passwords.
+\li Qt.ImhSensitiveData - Typed text should not be stored by the active input method
+        in any persistent storage like predictive user dictionary.
+\li Qt.ImhNoAutoUppercase - The input method should not try to automatically switch to upper case
+        when a sentence ends.
+\li Qt.ImhPreferNumbers - Numbers are preferred (but not required).
+\li Qt.ImhPreferUppercase - Upper case letters are preferred (but not required).
+\li Qt.ImhPreferLowercase - Lower case letters are preferred (but not required).
+\li Qt.ImhNoPredictiveText - Do not use predictive text (i.e. dictionary lookup) while typing.
+
+\li Qt.ImhDate - The text editor functions as a date field.
+\li Qt.ImhTime - The text editor functions as a time field.
+\endlist
+
+Flags that restrict input (exclusive flags) are:
+
+\list
+\li Qt.ImhDigitsOnly - Only digits are allowed.
+\li Qt.ImhFormattedNumbersOnly - Only number input is allowed. This includes decimal point and minus sign.
+\li Qt.ImhUppercaseOnly - Only upper case letter input is allowed.
+\li Qt.ImhLowercaseOnly - Only lower case letter input is allowed.
+\li Qt.ImhDialableCharactersOnly - Only characters suitable for phone dialing are allowed.
+\li Qt.ImhEmailCharactersOnly - Only characters suitable for email addresses are allowed.
+\li Qt.ImhUrlCharactersOnly - Only characters suitable for URLs are allowed.
+\endlist
+
+Masks:
+
+\list
+\li Qt.ImhExclusiveInputMask - This mask yields nonzero if any of the exclusive flags are used.
+\endlist
+//! [flags]
diff --git a/src/quickcontrols/doc/src/includes/qquickcombobox.qdocinc b/src/quickcontrols/doc/src/includes/qquickcombobox.qdocinc
new file mode 100644
index 0000000000..5e19f5f1f4
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickcombobox.qdocinc
@@ -0,0 +1,6 @@
+//! [functions-after-component-completion]
+
+\note This function can only be used after
+\l {Component::completed()}{Component.completed()} is emitted for the ComboBox.
+
+//! [functions-after-component-completion]
diff --git a/src/quickcontrols/doc/src/includes/qquickcontrol-background.qdocinc b/src/quickcontrols/doc/src/includes/qquickcontrol-background.qdocinc
new file mode 100644
index 0000000000..02d92de07c
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickcontrol-background.qdocinc
@@ -0,0 +1,13 @@
+//! [notes]
+
+\note If the background item has no explicit size specified, it automatically
+      follows the control's size. In most cases, there is no need to specify
+      width or height for a background item.
+
+\note Most controls use the implicit size of the background item to calculate
+the implicit size of the control itself. If you replace the background item
+with a custom one, you should also consider providing a sensible implicit
+size for it (unless it is an item like \l Image which has its own implicit
+size).
+
+//! [notes]
diff --git a/src/quickcontrols/doc/src/includes/qquickcontrol-focusreason.qdocinc b/src/quickcontrols/doc/src/includes/qquickcontrol-focusreason.qdocinc
new file mode 100644
index 0000000000..b69e9e60ec
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickcontrol-focusreason.qdocinc
@@ -0,0 +1,15 @@
+This property holds the reason of the last focus change.
+
+\note This property does not indicate whether the control has \l {Item::activeFocus}
+      {active focus}, but the reason why the control either gained or lost focus.
+
+\value Qt.MouseFocusReason         A mouse action occurred.
+\value Qt.TabFocusReason           The Tab key was pressed.
+\value Qt.BacktabFocusReason       A Backtab occurred. The input for this may include the Shift or Control keys; e.g. Shift+Tab.
+\value Qt.ActiveWindowFocusReason  The window system made this window either active or inactive.
+\value Qt.PopupFocusReason         The application opened/closed a pop-up that grabbed/released the keyboard focus.
+\value Qt.ShortcutFocusReason      The user typed a label's buddy shortcut
+\value Qt.MenuBarFocusReason       The menu bar took focus.
+\value Qt.OtherFocusReason         Another reason, usually application-specific.
+
+\sa Item::activeFocus
diff --git a/src/quickcontrols/doc/src/includes/qquickdial.qdocinc b/src/quickcontrols/doc/src/includes/qquickdial.qdocinc
new file mode 100644
index 0000000000..3370b3d8f3
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickdial.qdocinc
@@ -0,0 +1,13 @@
+//! [inputMode]
+Dial supports three \l {inputMode}{input modes}: \c Dial.Circular,
+\c Dial.Horizontal and \c Dial.Vertical. The circular input mode operates on an
+absolute input system, where the position of the cursor within the dial
+directly reflects its value. The horizontal and vertical input modes use a
+relative input system, where changes in the cursor's position are "added" to
+the value of the dial.
+
+The following image illustrates the directions in which the various input modes
+track movement:
+
+\image qtquickcontrols2-dial-inputmode.png
+//! [inputMode]
diff --git a/src/quickcontrols/doc/src/includes/qquickicon.qdocinc b/src/quickcontrols/doc/src/includes/qquickicon.qdocinc
new file mode 100644
index 0000000000..eadaea5983
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickicon.qdocinc
@@ -0,0 +1,52 @@
+//! [grouped-properties]
+\table
+\header
+    \li Name
+    \li Description
+\row
+    \li name
+    \li This property holds the name of the icon to use.
+
+    The icon will be loaded from the platform theme. If the icon is found
+    in the theme, it will always be used; even if \l icon.source is also set.
+    If the icon is not found, \l icon.source will be used instead.
+
+    For more information on theme icons, see \l {QIcon::fromTheme()}.
+\row
+    \li source
+    \li This property holds the name of the icon to use.
+
+    The icon will be loaded as a regular image.
+
+    If \l icon.name is set and refers to a valid theme icon, it will always
+    be used instead of this property.
+\row
+    \li width
+    \li This property holds the width of the icon.
+
+        The icon's width will never exceed this value, though it will
+        shrink when necessary.
+\row
+    \li height
+    \li This property holds the height of the icon.
+
+        The icon's height will never exceed this value, though it will
+        shrink when necessary.
+\row
+    \li color
+    \li This property holds the color of the icon.
+
+        The icon is tinted with the specified color, unless the color is
+        set to \c "transparent".
+
+\row
+    \li cache
+    \li This property specifies whether the icon should be cached.
+
+        The default value is true.
+
+        For more information, see \l {Image::}{cache}.
+
+        This property was introduced in QtQuick.Controls 2.13.
+\endtable
+//! [grouped-properties]
diff --git a/src/quickcontrols/doc/src/includes/qquickimaginestyle.qdocinc b/src/quickcontrols/doc/src/includes/qquickimaginestyle.qdocinc
new file mode 100644
index 0000000000..411c6c1088
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickimaginestyle.qdocinc
@@ -0,0 +1,60 @@
+//! [conf]
+\table
+    \header
+        \li Variable
+        \li Description
+    \row
+        \li \c Path
+        \li Specifies the \l {imagine-path-attached-prop}{path} to the directory that contains
+        the Imagine style assets. If not specified, the built-in assets are used.
+
+        For example, to specify a path to a directory stored in the
+        \l {The Qt Resource System}{resource system}:
+
+        \badcode
+        [Imagine]
+        Path=:/imagine-assets
+        \endcode
+
+        To specify a relative path to a local directory:
+
+        \badcode
+        [Imagine]
+        Path=imagine-assets
+        \endcode
+
+        \note Due to a technical limitation, the path should not be named
+              \e "imagine" if it is relative to the \c qtquickcontrols2.conf file.
+\endtable
+//! [conf]
+
+//! [env]
+\table
+    \header
+        \li Variable
+        \li Description
+    \row
+        \li \c QT_QUICK_CONTROLS_IMAGINE_PATH
+        \li Specifies the path to the directory that contains the Imagine style assets.
+            If not specified, the built-in assets are used.
+
+            For example, to specify a path to a directory stored in the
+            \l {The Qt Resource System}{resource system}:
+
+            \badcode
+            QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets
+            \endcode
+
+            To specify a relative path to a local directory:
+
+            \badcode
+            QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets
+            \endcode
+
+            \note Due to a technical limitation, the path should not be named
+                  \e "imagine" if it is relative to the \c qtquickcontrols2.conf file.
+        \li \c QT_QUICK_CONTROLS_IMAGINE_SMOOTH
+        \li Set to \c 1 to enable smooth scaling for 9-patch images.
+            This environment variable was added in Qt 6.5.
+\endtable
+//! [env]
diff --git a/src/quickcontrols/doc/src/includes/qquickmaterialstyle.qdocinc b/src/quickcontrols/doc/src/includes/qquickmaterialstyle.qdocinc
new file mode 100644
index 0000000000..803425a88b
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickmaterialstyle.qdocinc
@@ -0,0 +1,79 @@
+//! [conf]
+\table
+    \header
+        \li Variable
+        \li Description
+    \row
+        \li \c Theme
+        \li Specifies the default \l {material-theme-attached-prop}{Material theme}.
+            The value can be one of the available themes, for example \c "Dark".
+    \row
+        \li \c Variant
+        \li Specifies the Material variant. The Material Design has two
+            variants: a normal variant designed for touch devices, and a dense
+            variant for desktop. The dense variant uses smaller sizes for
+            controls and their fonts.
+
+            The value can be \c "Normal" or \c "Dense".
+    \row
+        \li \c Accent
+        \li Specifies the default \l {material-accent-attached-prop}{Material accent color}.
+            The value can be any \l {colorvaluetypedocs}{color}, but it is recommended to use
+            one of the \l {pre-defined Material colors}, for example \c "Teal".
+    \row
+        \li \c Primary
+        \li Specifies the default \l {material-primary-attached-prop}{Material primary color}.
+            The value can be any \l {colorvaluetypedocs}{color}, but it is recommended to use
+            one of the \l {pre-defined Material colors}, for example \c "BlueGrey".
+    \row
+        \li \c Foreground
+        \li Specifies the default \l {material-foreground-attached-prop}{Material foreground color}.
+            The value can be any \l {colorvaluetypedocs}{color}, or one of the \l {pre-defined Material colors},
+            for example \c "Brown".
+    \row
+        \li \c Background
+        \li Specifies the default \l {material-background-attached-prop}{Material background color}.
+            The value can be any \l {colorvaluetypedocs}{color}, or one of the \l {pre-defined Material colors},
+            for example \c "Grey".
+\endtable
+//! [conf]
+
+//! [env]
+\table
+    \header
+        \li Variable
+        \li Description
+    \row
+        \li \c QT_QUICK_CONTROLS_MATERIAL_THEME
+        \li Specifies the default \l {material-theme-attached-prop}{Material theme}.
+            The value can be one of the available themes, for example \c "Dark".
+    \row
+        \li \c QT_QUICK_CONTROLS_MATERIAL_VARIANT
+        \li Specifies the Material variant. The Material Design has two
+            variants: a normal variant designed for touch devices, and a dense
+            variant for desktop. The dense variant uses smaller sizes for
+            controls and their fonts.
+
+            The value can be \c "Normal" or \c "Dense".
+    \row
+        \li \c QT_QUICK_CONTROLS_MATERIAL_ACCENT
+        \li Specifies the default \l {material-accent-attached-prop}{Material accent color}.
+            The value can be any \l {colorvaluetypedocs}{color}, but it is recommended to use
+            one of the \l {pre-defined Material colors}, for example \c "Teal".
+    \row
+        \li \c QT_QUICK_CONTROLS_MATERIAL_PRIMARY
+        \li Specifies the default \l {material-primary-attached-prop}{Material primary color}.
+            The value can be any \l {colorvaluetypedocs}{color}, but it is recommended to use
+            one of the \l {pre-defined Material colors}, for example \c "BlueGrey".
+    \row
+        \li \c QT_QUICK_CONTROLS_MATERIAL_FOREGROUND
+        \li Specifies the default \l {material-foreground-attached-prop}{Material foreground color}.
+            The value can be any \l {colorvaluetypedocs}{color}, or one of the \l {pre-defined Material colors},
+            for example \c "Brown".
+    \row
+        \li \c QT_QUICK_CONTROLS_MATERIAL_BACKGROUND
+        \li Specifies the default \l {material-background-attached-prop}{Material background color}.
+            The value can be any \l {colorvaluetypedocs}{color}, or one of the \l {pre-defined Material colors},
+            for example \c "Grey".
+\endtable
+//! [env]
diff --git a/src/quickcontrols/doc/src/includes/qquickoverlay-popup-parent.qdocinc b/src/quickcontrols/doc/src/includes/qquickoverlay-popup-parent.qdocinc
new file mode 100644
index 0000000000..5562f6a039
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickoverlay-popup-parent.qdocinc
@@ -0,0 +1,20 @@
+The following example uses the attached \l {Overlay::overlay}{Overlay.overlay}
+property to position a popup in the center of the window, despite the position
+of the button that opens the popup:
+
+\code
+Button {
+    onClicked: popup.open()
+
+    Popup {
+        id: popup
+
+        parent: Overlay.overlay
+
+        x: Math.round((parent.width - width) / 2)
+        y: Math.round((parent.height - height) / 2)
+        width: 100
+        height: 100
+    }
+}
+\endcode
diff --git a/src/quickcontrols/doc/src/includes/qquickpopup-padding.qdocinc b/src/quickcontrols/doc/src/includes/qquickpopup-padding.qdocinc
new file mode 100644
index 0000000000..31f5d2db02
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickpopup-padding.qdocinc
@@ -0,0 +1,10 @@
+//! [padding]
+
+The padding properties are used to control the geometry of the
+\l {contentItem}{content item}.
+
+Popup uses the same approach to padding as \l {Control::padding}{Control}.
+For a visual explanation of the padding system, see the \l {Control Layout}
+section of the documentation.
+
+//! [padding]
diff --git a/src/quickcontrols/doc/src/includes/qquickstackview.qdocinc b/src/quickcontrols/doc/src/includes/qquickstackview.qdocinc
new file mode 100644
index 0000000000..20c9bdc369
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickstackview.qdocinc
@@ -0,0 +1,5 @@
+//! [pop-ownership]
+Only items that StackView created itself (from a \l Component or \l [QML]
+url) will be destroyed when popped. See \l {Item Ownership} for more
+information.
+//! [pop-ownership]
diff --git a/src/quickcontrols/doc/src/includes/qquickswipedelegate-interaction.qdocinc b/src/quickcontrols/doc/src/includes/qquickswipedelegate-interaction.qdocinc
new file mode 100644
index 0000000000..05aeadb654
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickswipedelegate-interaction.qdocinc
@@ -0,0 +1,5 @@
+Both interactive and non-interactive items can be used here. Normal
+event handling rules apply; if an interactive control like \l Button
+is used, interaction signals of SwipeDelegate such as
+\l {AbstractButton::}{clicked()} will not get emitted if the button
+is clicked.
diff --git a/src/quickcontrols/doc/src/includes/qquickswitch.qdocinc b/src/quickcontrols/doc/src/includes/qquickswitch.qdocinc
new file mode 100644
index 0000000000..985f85d979
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickswitch.qdocinc
@@ -0,0 +1,28 @@
+//! [position]
+
+This property holds the logical position of the thumb indicator.
+
+The position is expressed as a fraction of the indicator's size, in the range
+\c 0.0 - \c 1.0. The position can be used for example to determine whether
+the thumb has been dragged past the halfway point. For visualizing a thumb
+indicator, the right-to-left aware \l visualPosition should be used instead.
+
+\sa visualPosition
+
+//! [position]
+
+
+//! [visualPosition]
+
+This property holds the visual position of the thumb indicator.
+
+The position is expressed as a fraction of the indicator's size, in the range
+\c 0.0 - \c 1.0. When the control is \l {Control::mirrored}{mirrored}, the
+value is equal to \c {1.0 - position}. This makes the value suitable for
+visualizing the thumb indicator taking right-to-left support into account.
+In order to for example determine whether the thumb has been dragged past
+the halfway point, the logical \l position should be used instead.
+
+\sa position
+
+//! [visualPosition]
diff --git a/src/quickcontrols/doc/src/includes/qquicktooltip.qdocinc b/src/quickcontrols/doc/src/includes/qquicktooltip.qdocinc
new file mode 100644
index 0000000000..0046a2d8b0
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquicktooltip.qdocinc
@@ -0,0 +1,6 @@
+//! [customize-note]
+\note to customize the \l {Attached Tool Tips}{attached ToolTip}, it
+must be provided as part of
+\l {Creating a Custom Style}{your own style}. To do a one-off
+customization of a \c ToolTip, see \l {Custom Tool Tips}.
+//! [customize-note]
diff --git a/src/quickcontrols/doc/src/includes/qquickuniversalstyle.qdocinc b/src/quickcontrols/doc/src/includes/qquickuniversalstyle.qdocinc
new file mode 100644
index 0000000000..6c3b1289fa
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/qquickuniversalstyle.qdocinc
@@ -0,0 +1,53 @@
+//! [conf]
+\table
+    \header
+        \li Variable
+        \li Description
+    \row
+        \li \c Theme
+        \li Specifies the default \l {universal-theme-attached-prop}{Universal theme}.
+            The value can be one of the available themes, for example \c "Dark".
+    \row
+        \li \c Accent
+        \li Specifies the default \l {universal-accent-attached-prop}{Universal accent color}.
+            The value can be any \l {colorvaluetypedocs}{color}, but it is recommended to use
+            one of the \l {pre-defined Universal colors}, for example \c "Violet".
+    \row
+        \li \c Foreground
+        \li Specifies the default \l {universal-foreground-attached-prop}{Universal foreground color}.
+            The value can be any \l {colorvaluetypedocs}{color}, or one of the \l {pre-defined Universal colors},
+            for example \c "Brown".
+    \row
+        \li \c Background
+        \li Specifies the default \l {universal-background-attached-prop}{Universal background color}.
+            The value can be any \l {colorvaluetypedocs}{color}, or one of the \l {pre-defined Universal colors},
+            for example \c "Steel".
+\endtable
+//! [conf]
+
+//! [env]
+\table
+    \header
+        \li Variable
+        \li Description
+    \row
+        \li \c QT_QUICK_CONTROLS_UNIVERSAL_THEME
+        \li Specifies the default \l {universal-theme-attached-prop}{Universal theme}.
+            The value can be one of the available themes, for example \c "Dark".
+    \row
+        \li \c QT_QUICK_CONTROLS_UNIVERSAL_ACCENT
+        \li Specifies the default \l {universal-accent-attached-prop}{Universal accent color}.
+            The value can be any \l {colorvaluetypedocs}{color}, but it is recommended to use
+            one of the \l {pre-defined Universal colors}, for example \c "Violet".
+    \row
+        \li \c QT_QUICK_CONTROLS_UNIVERSAL_FOREGROUND
+        \li Specifies the default \l {universal-foreground-attached-prop}{Universal foreground color}.
+            The value can be any \l {colorvaluetypedocs}{color}, or one of the \l {pre-defined Universal colors},
+            for example \c "Brown".
+    \row
+        \li \c QT_QUICK_CONTROLS_UNIVERSAL_BACKGROUND
+        \li Specifies the default \l {universal-background-attached-prop}{Universal background color}.
+            The value can be any \l {colorvaluetypedocs}{color}, or one of the \l {pre-defined Universal colors},
+            for example \c "Steel".
+\endtable
+//! [env]
diff --git a/src/quickcontrols/doc/src/includes/zero-based-months.qdocinc b/src/quickcontrols/doc/src/includes/zero-based-months.qdocinc
new file mode 100644
index 0000000000..ca2d62264f
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/zero-based-months.qdocinc
@@ -0,0 +1,18 @@
+The Qt Quick Calendar module uses 0-based month numbers to be consistent
+with the JavaScript Date type, that is used by the QML language. This
+means that \c Date::getMonth() can be passed to the methods as is. When
+dealing with month numbers directly, it is highly recommended to use the
+following enumeration values to avoid confusion.
+
+\value Calendar.January January (0)
+\value Calendar.February February (1)
+\value Calendar.March March (2)
+\value Calendar.April April (3)
+\value Calendar.May May (4)
+\value Calendar.June June (5)
+\value Calendar.July July (6)
+\value Calendar.August August (7)
+\value Calendar.September September (8)
+\value Calendar.October October (9)
+\value Calendar.November November (10)
+\value Calendar.December December (11)
diff --git a/src/quickcontrols/doc/src/qt6-changes.qdoc b/src/quickcontrols/doc/src/qt6-changes.qdoc
new file mode 100644
index 0000000000..c0eb7755d6
--- /dev/null
+++ b/src/quickcontrols/doc/src/qt6-changes.qdoc
@@ -0,0 +1,281 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols-changes-qt6.html
+    \title Changes to Qt Quick Controls
+    \ingroup changes-qt-5-to-6
+    \brief Migrate Qt Quick Controls to Qt 6.
+
+    Qt 6 is a result of the conscious effort to make the framework more
+    efficient and easy to use.
+
+    We try to maintain compatibility for all the public APIs in each release.
+    Some changes were inevitable in an effort to make Qt a better framework.
+
+    In this topic we summarize those changes in Qt Quick Controls, and provide
+    guidance to handle them.
+
+    \section1 Migrating from Qt Quick Controls 1
+
+    Qt Quick Controls 1 was deprecated in Qt 5.11 and is removed from
+    Qt 6.0. Use Qt Quick Controls (previously known as Qt Quick Controls 2)
+    instead. For more information, refer to the
+    \l{Qt 5.15: Qt Quick Controls vs Qt Quick Controls 1} topic in the Qt 5
+    documentation.
+
+    \section1 Type registration changes
+
+    Qt Quick Controls has undergone some large, mostly internal changes in Qt
+    6. By making use of the improved type registration introduced in Qt 5.15,
+    we pave the way for compilation of the module's QML files to C++ and enable
+    tooling to become more effective. In particular, Qt Creator's QML code
+    model should have a more complete picture of types, making its completion
+    and error checking of Qt Quick Controls code more reliable. Static analysis
+    tools like qmllint and qmlformat also benefit by becoming aware of the
+    types that are now declared at compile time in C++.
+
+    As a result of these changes, some things are done a little differently.
+
+    \section2 Custom styles are now proper QML modules
+
+    To enable compile time type registration, each Qt Quick Controls style is
+    now a proper QML module. Previously, a single \c Button.qml was sufficient
+    to create your own style. While convenient, this required some non-standard
+    API, which in turn required adaptation in tooling like Qt Designer.
+
+    Now, all QML types that a style implements must be declared in that style's
+    qmldir file:
+
+    \code
+    module MyStyle
+    Button 1.0 Button.qml
+    \endcode
+
+    \omit
+    TODO: Once we have documentation for the CMake function qt6_add_qml_module,
+    this would be a good place to link to it, stating that you don't have to
+    manually write the qmldir files.
+    \endomit
+
+    By unifying this with the rest of the QML world, styles become more
+    familiar to developers and hopefully easier to understand for beginners. As
+    a consequence, the following API had to be removed:
+
+    \list
+        \li QQuickStyle::addStylePath()
+        \li QQuickStyle::availableStyles()
+        \li QQuickStyle::path()
+        \li QQuickStyle::stylePathList()
+        \li QT_QUICK_CONTROLS_STYLE_PATH
+    \endlist
+
+    Now that the styles are required to be found in the QML engine's import
+    path like any other QML module, it is no longer necessary or possible to
+    support this API.
+
+    \section3 Style names
+
+    In addition, there is now only one valid, case-sensitive form for style
+    names: "Material", "MyStyle", and so on. That is: the style name must
+    exactly match the name of the QML module. This also applies to file
+    selectors, where previously, all style names were lower case. For example,
+    where the following was a valid structure for a Qt 5 project:
+
+    \badcode
+    MyProject
+    ├── main.qml
+    ├── HomePage.qml
+    └── +material
+        └───HomePage.qml
+    \endcode
+
+    In Qt 6, \c +material becomes \c +Material:
+
+    \badcode
+    MyProject
+    ├── main.qml
+    ├── HomePage.qml
+    └── +Material
+        └───HomePage.qml
+    \endcode
+
+    All of the existing ways to \l {Using Styles in Qt Quick Controls}{run an
+    application with a specific style} are still supported.
+
+    \section2 Runtime and compile time style selection
+
+    Importing a style now has extra meaning due to the way that imports work
+    internally. Previously, importing \c QtQuick.Controls would register the
+    control types from the current style with the QML engine:
+
+    \qml
+    import QtQuick.Controls
+    \endqml
+
+    We refer to this as runtime style selection, as the style is selected at
+    runtime.
+
+    Explicitly importing \c QtQuick.Controls.Material would then simply expose
+    any extra API provided by that style (for example, the attached Material
+    type):
+
+    \qml
+    import QtQuick.Controls.Material
+    \endqml
+
+    Now, explicitly importing a style does both.
+
+    This effectively means that the control types (like Button) from the last
+    imported style will be used. We refer to this as compile time style
+    selection.
+
+    This has implications for existing code. Namely, if your application
+    supports more than one style, move these imports into their own QML files
+    that are file-selected.
+
+    For example, if you have the following \c main.qml:
+
+    \qml
+    import QtQuick.Controls
+    import QtQuick.Controls.Material
+    import QtQuick.Controls.Universal
+
+    ApplicationWindow {
+        width: 600
+        height: 400
+        visible: true
+
+        Material.theme: darkMode ? Material.Dark : Material.Light
+        Universal.theme: darkMode ? Universal.Dark : Universal.Light
+
+        // Child items, etc.
+    }
+    \endqml
+
+    You can move the common code into a "base" component:
+
+    \qml
+    // MainWindow.qml
+
+    import QtQuick.Controls
+
+    ApplicationWindow {}
+    \endqml
+
+    Then, add a \c +Material subdirectory, and in it, add the Material-specific code into \c MainWindow.qml:
+
+    \qml
+    // +Material/MainWindow.qml
+
+    import QtQuick.Controls.Material
+
+    ApplicationWindow {
+        Material.theme: darkMode ? Material.Dark : Material.Light
+    }
+    \endqml
+
+    Do the same for Universal:
+
+    \qml
+    // +Universal/MainWindow.qml
+
+    import QtQuick.Controls.Universal
+
+    ApplicationWindow {
+        Universal.theme: darkMode ? Universal.Dark : Universal.Light
+    }
+    \endqml
+
+    Then, in \c main.qml:
+
+    \qml
+    import QtQuick.Controls
+
+    MainWindow {
+        width: 600
+        height: 400
+        visible: true
+
+        // Child items, etc.
+    }
+    \endqml
+
+    See also: \l {Using File Selectors with Qt Quick Controls}.
+
+    \section1 Default Style
+
+    The Default style was renamed to "Basic", as it is no longer the default
+    style. Instead, the default style is now chosen based on the platform
+    that Qt was built for:
+
+    \list
+    \li Android: \l {Material Style}
+    \li Linux: \l {Fusion Style}
+    \li macOS: \l {macos Style}
+    \li Windows: \l {Windows Style}
+    \li All other platforms: \l {Basic Style}
+    \endlist
+
+    Therefore, applications that didn't specify a style in Qt 5 and have customized
+    controls should \l {Using Styles in Qt Quick Controls}{explicitly specify}
+    the Basic style in Qt 6 to ensure that those controls look and behave as
+    they did with Qt 5.
+
+    \section1 Palette
+
+    The palette API was moved to QQuickItem. The various APIs that use palettes
+    in Qt Quick Controls are unchanged.
+
+    \section1 Controls
+
+    \section2 Changes to ApplicationWindow
+
+    The deprecated overlay properties and attached API were removed. Use the
+    \l Overlay attached type instead.
+
+    \section2 Changes to ComboBox
+
+    The \l {ComboBox::}{pressed} property is now read-only. To modify the
+    visual pressed state of a ComboBox, use the \l {ComboBox::}{down} property
+    instead.
+
+    \section2 Changes to Container
+
+    The deprecated \c removeItem(var) function was removed.
+    \l {Container::}{removeItem(Item)} or \l {Container::}{takeItem(int)} can
+    be used instead.
+
+    \section2 Changes to Dialog
+
+    \l {Dialog}'s \l {Dialog::}{accepted()} and \l {Dialog::}{rejected()}
+    signals are now emitted before \l {Popup::}{closed()} when calling
+    \l {Dialog::}{done()}, \l {Dialog::}{accept()} and \l {Dialog::}{reject()}.
+
+    \section2 Changes to Menu
+
+    The deprecated \c removeItem(var) function was removed.
+    \l {Menu::}{removeItem(Item)} or \l {Menu::}{takeItem(int)} can be used
+    instead.
+
+    \section2 Changes to ToolTip
+
+    \l {ToolTip}'s timeout now begins only after \l {Popup::}{opened()} has
+    been emitted. This results in tooltips with enter transitions being visible
+    for the entire duration of the timeout property. This means that they are
+    visible slightly longer than they were before, so it may be worthwhile to
+    visually check tooltips in your application and adjust timeouts if
+    necessary.
+
+    \section2 Changes to StackView
+
+    The StackView.Transition enum value was deprecated. The operation argument
+    can be omitted in order to use the default transition for any given
+    operation.
+
+    \section2 Changes to Tumbler
+
+    \l {Item::}{implicitWidth} and \l {Item::}{implicitHeight} must now be
+    provided for \l {Tumbler}'s \l {Control::}{contentItem}, making it
+    consistent with all other controls.
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-basic.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-basic.qdoc
new file mode 100644
index 0000000000..b87fe8b7db
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-basic.qdoc
@@ -0,0 +1,31 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-basic.html
+    \title Basic Style
+
+    The Basic style is a basic all-round style.
+
+    The Basic style is a simple and light-weight style that offers the maximum
+    performance for Qt Quick Controls. It is built with a minimal amount of Qt
+    Quick primitives, and keeps animations and transitions to the minimum.
+
+    \image qtquickcontrols2-basic.png
+
+    The style is selected by default when running Qt Quick Controls applications.
+    It is built into the module's resources, so by default it is shipped with
+    any application that depends on the Qt Quick Controls module
+
+    \note The Basic style is used as a fallback for other styles. If a style
+    does not implement a certain control, the Basic style implementation of
+    that control is selected.
+
+    \b {See also} \l {Material Style}, \l {Universal Style}
+
+    \section1 Related Information
+
+    \list
+      \li \l{Styling Qt Quick Controls}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-buttons.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-buttons.qdoc
new file mode 100644
index 0000000000..b2256f0e60
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-buttons.qdoc
@@ -0,0 +1,167 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-buttons.html
+    \title Button Controls
+    \ingroup qtquickcontrols2-guidelines
+    \brief Guidelines for button controls
+
+    Qt Quick Controls offers a selection of button-like controls.
+
+    \annotatedlist qtquickcontrols2-buttons
+
+    Each type of button has its own specific use case. The following
+    sections offer guidelines for choosing the appropriate type of button,
+    depending on the use case.
+
+    \section1 Button Control
+
+    \l Button is a clickable control that starts an action, or opens or
+    closes a popup. A button usually has a text label but it can also
+    contain an icon.
+
+    Button is a very suitable control when a popup or dialog needs
+    to perform an action. The most common examples are Apply, Cancel,
+    Save, Close and Help.
+
+    \image qtquickcontrols2-button.gif
+
+    Recommendations:
+
+    \list
+    \li The button's text should be a verb describing the action, or a noun matching
+        the title of the popup that will be opened.
+    \li Don't use a button to set state. \l Switch is more suitable for that.
+    \li Use the default font unless you have UI guidelines specifying otherwise.
+    \li If the text is localized, consider the influence of a longer text on the layout.
+    \endlist
+
+    \b {See also} \l Button and \l AbstractButton
+
+    \section1 CheckBox Control
+
+    \image qtquickcontrols2-checkbox.gif
+
+    \l CheckBox is used to build multi-selection option lists. Any number of
+    options can be selected, including none, but the options should
+    not be mutually exclusive.
+
+    Use a single CheckBox for a yes/no choice, such as when you have
+    to accept the terms of service agreement in a form.
+
+    For a single yes/no choice, it is also possible to use a switch. If the choice
+    concerns an option, it is best to use a CheckBox. If it concerns action to
+    be taken, a switch is recommended.
+
+    When options can be grouped, you can use a partially checked CheckBox to
+    represent the whole group. Use the checkbox's
+    \l {CheckBox::checkState}{partially checked state} when a user selects
+    some, but not all, sub-items in the group.
+
+    The three availables check states are: checked, partially checked and
+    unchecked.
+
+    The checkable options are often listed vertically.
+
+    Recommendations:
+    \list
+    \li The checkbox label should be a statement that the check mark makes true,
+    and that the absence of a check mark makes false.
+    \li The checkbox label should not contain a negative statement.
+    \li Use the default font, unless you have UI guidelines specifying otherwise.
+    \li If the text is localized, consider the influence of a longer text on the layout.
+    \endlist
+
+    \b {See also} \l CheckBox
+
+    \section1 DelayButton Control
+
+    \l DelayButton is a button that incorporates a delay before triggering an action.
+    This delay prevents accidental presses.
+
+    \image qtquickcontrols2-delaybutton.gif
+
+    Recommendations:
+    \list
+    \li Use in touch user interfaces.
+    \li Use for actions that must be triggered with care.
+    \endlist
+
+    \b {See also} \l Button and \l AbstractButton
+
+    \section1 RadioButton Control
+
+    \image qtquickcontrols2-radiobutton.gif
+
+    \l RadioButton is used to select only one option from a set of options.
+    Selecting one option automatically deselects the one selected before.
+
+    If there are only two mutually exclusive options, combine them into a
+    single checkbox or a switch.
+
+    Recommendations:
+
+    \list
+    \li Limit the label text to one line.
+    \li Ensure that a sensible default option is checked.
+    \li List RadioButton options vertically.
+    \li If the text is localized, consider the influence of a longer text on the layout.
+    \li Use the default font, unless you have UI guidelines that specify otherwise.
+    \li Just like with CheckBox, do not make the list too large.
+    \li In order to avoid confusion, do not put two groups of radio buttons next to each
+        other.
+    \endlist
+
+    \b {See also} \l RadioButton
+
+    \section1 RoundButton Control
+
+    \l RoundButton is a clickable control that starts an action, or opens or
+    closes a popup. A round button with a square image icon or one-letter font
+    icon is circular. A circular RoundButton takes less space than a normal
+    \l Button, and can also be used as a floating action button.
+
+    \image qtquickcontrols2-roundbutton.png
+
+    Recommendations:
+
+    \list
+    \li Keep labels short and concise.
+    \li If the text is localized, consider the influence of a longer text on the layout.
+    \endlist
+
+    \b {See also} \l RoundButton
+
+    \section1 Switch Control
+
+    \image qtquickcontrols2-switch.png
+
+    \l Switch represents a physical switch that allows users to choose between an "on"
+    or "off" state.
+    Use a switch for binary operations that take effect immediately after it has been
+    switched on. For example, a switch to turn WIFI on or off.
+
+    Recommendations:
+
+    \list
+    \li Keep labels short and concise.
+    \li If the text is localized, consider the influence of a longer text on the layout.
+    \endlist
+
+    \b {See also} \l Switch
+
+    \section1 ToolButton Control
+
+    \image qtquickcontrols2-toolbutton.png
+
+    \l ToolButton is nearly identical to \l Button, but it has a graphical
+    appearance that makes it more suitable for insertion into a \l ToolBar.
+
+    \b {See also} \l ToolButton
+
+    \section1 Related Information
+    \list
+    \li \l {Qt Quick Controls Guidelines}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-configuration.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-configuration.qdoc
new file mode 100644
index 0000000000..02adbe5644
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-configuration.qdoc
@@ -0,0 +1,180 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-configuration.html
+    \keyword Qt Quick Controls Configuration File
+    \title Qt Quick Controls Configuration File
+    \keyword Qt Quick Controls 2 Configuration File
+
+    Qt Quick Controls support a special configuration file, \c qtquickcontrols2.conf,
+    which is built into an application's resources.
+
+    The configuration file can specify the preferred style and certain style-specific
+    attributes. The following example specifies that the preferred style is the \l {Material style}.
+    Furthermore, when the application is run with the Material style, its theme is light and the
+    accent and primary colors are teal and blue grey, respectively. However, if the application
+    is run with the \l {Universal style} instead, the accent color is red and the appropriate theme
+    is chosen based on the system theme colors.
+
+    \code
+    [Controls]
+    Style=Material
+
+    [Universal]
+    Theme=System
+    Accent=Red
+
+    [Material]
+    Theme=Light
+    Accent=Teal
+    Primary=BlueGrey
+    \endcode
+
+    It is possible to specify a custom location for the configuration file with
+    the \l {Supported Environment Variables in Qt Quick Controls}
+    {QT_QUICK_CONTROLS_CONF} environment variable.
+
+    \section1 Controls Section
+
+    The following values can be specified in a \c Controls section of the
+    configuration file:
+
+    \table
+        \header
+            \li Variable
+            \li Description
+        \row
+            \li \c Style
+            \li Specifies the style to run the application with.
+                The value can be the name of one of the \l {Available Styles}{built-in styles}
+                or a \l {Creating a Custom Style}{custom style}.
+        \row
+            \li \c FallbackStyle
+            \li Specifies the style to use for controls that are not implemented.
+                The style must be one of the \l {Available Styles}{built-in styles}.
+                By default, the \l {Basic Style}{Basic} style is used.
+    \endtable
+
+    \section1 Imagine Section
+
+    The following table lists values that can be used to configure the
+    \l {Imagine style} in an \c Imagine section of the configuration file:
+
+    \include qquickimaginestyle.qdocinc conf
+
+    \section1 Material Section
+
+    The following table lists values that can be used to configure the
+    \l {Material style} in a \c Material section of the configuration file:
+
+    \include qquickmaterialstyle.qdocinc conf
+
+    \section1 Universal Section
+
+    The following table lists values that can be used to configure the
+    \l {Universal style} in a \c Universal section of the configuration file:
+
+    \include qquickuniversalstyle.qdocinc conf
+
+    \section1 Font Configuration
+
+    The default \l {Control::font}{font} can be specified in a \c Font sub-group
+    in each style's section in the configuration file. The \c Font sub-group can
+    be defined in two alternative ways:
+
+    \code
+    [Basic]
+    Font\Family=Open Sans
+    Font\PixelSize=20
+
+    [Material\Font]
+    Family=Open Sans
+    PixelSize=20
+    \endcode
+
+    Supported font attributes:
+    \table
+        \header
+            \li Variable
+            \li Description
+        \row
+            \li \c Family
+            \li The \l {QFont::family}{font family}.
+        \row
+            \li \c PointSize
+            \li The \l {QFont::pointSizeF}{point size}.
+        \row
+            \li \c PixelSize
+            \li The \l {QFont::pixelSize}{pixel size}.
+        \row
+            \li \c StyleHint
+            \li The \l {QFont::styleHint}{style hint}.
+                Available values: \c SansSerif, \c Helvetica, \c Serif, \c Times, \c TypeWriter, \c Courier,
+                                  \c OldEnglish, \c Decorative, \c Monospace, \c Fantasy, \c Cursive.
+        \row
+            \li \c Weight
+            \li The \l {QFont::}{weight}. Qt uses a weighting scale from \c 1 to \c 1000 compatible with OpenType. A weight of \c 1 will be thin,
+                whilst \c 1000 will be extremely black.
+                Available pre-defined weights: \c Thin (100), \c ExtraLight (200), \c Light (300), \c Normal (400),
+                                               \c Medium (500), \c DemiBold (600), \c Bold (700), \c ExtraBold (800),
+                                               \c Black (900).
+        \row
+            \li \c Style
+            \li The \l {QFont::}{style}.
+                Available values: \c StyleNormal, \c StyleItalic, \c StyleOblique.
+    \endtable
+
+    \section1 Palette Configuration
+
+    The default \c palette can be configured for each style using the
+    \c Palette sub-group in the configuration file. The \c Palette sub-group can be
+    defined in two alternative ways:
+
+    \code
+    [Fusion]
+    Palette\Window=#dedede
+    Palette\WindowText=#212121
+    \endcode
+
+    or:
+    \code
+    [Fusion\Palette]
+    Window=#dedede
+    WindowText=#212121
+    \endcode
+
+    See \l [QtQuick]{Palette} QML type for more information.
+
+    \section1 Using the Configuration File in a Project
+
+    In order to make it possible for Qt Quick Controls to find the configuration file,
+    it must be built into application's resources using the \l {The Qt Resource System}.
+    Here's an example \c .qrc file:
+
+    \code
+    <!DOCTYPE RCC><RCC version="1.0">
+    <qresource prefix="/">
+        <file>qtquickcontrols2.conf</file>
+    </qresource>
+    </RCC>
+    \endcode
+
+    \note Qt Quick Controls uses a file selector to load the configuration file. It
+    is possible to provide a different configuration file for different platforms and
+    locales. See \l QFileSelector documentation for more details.
+
+    Finally, the \c .qrc file must be listed in the application's \c .pro file so that
+    the build system knows about it. For example:
+
+    \code
+    RESOURCES = application.qrc
+    \endcode
+
+    \section1 Related Information
+
+    \list
+      \li \l{Styling Qt Quick Controls}
+      \li \l{Supported Environment Variables in Qt Quick Controls}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-containers.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-containers.qdoc
new file mode 100644
index 0000000000..bd840ebec8
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-containers.qdoc
@@ -0,0 +1,89 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-containers.html
+    \title Container Controls
+    \ingroup qtquickcontrols2-guidelines
+    \brief Guidelines for container controls
+
+    Qt Quick Controls offers a selection of container-like controls.
+
+    \annotatedlist qtquickcontrols2-containers
+
+    Each type of container can be used to group a set of controls together.
+    The following sections offer guidelines for choosing the appropriate type
+    of container, depending on the use case.
+
+    \section1 ApplicationWindow Control
+
+    \image qtquickcontrols2-applicationwindow-wireframe.png
+
+    \l ApplicationWindow creates the root window of an application, and makes
+    it easy to add an optional header and footer to that window.
+
+    \section1 Frame Control
+
+    \image qtquickcontrols2-frame.png
+
+    \l Frame is used to layout a logical group of controls together, within
+    a visual frame.
+
+    \section1 GroupBox Control
+
+    \image qtquickcontrols2-groupbox.png
+
+    \l GroupBox is used to layout a logical group of controls together,
+    within a titled visual frame.
+
+    \section1 Page Control
+
+    \image qtquickcontrols2-page-wireframe.png
+
+    \l Page provides page-specific header and footer items.
+    It is perfectly possible to use ApplicationWindow for setting the header
+    and the footer, but if you have a header and footer which varies per
+    screen, then it is better to use \l Page.
+
+    \section1 Pane Control
+
+    \image qtquickcontrols2-pane.png
+
+    \l Pane provides a background color that matches with the application
+    style and theme. Pane does not provide a layout of its own, but requires
+    you to position its contents, for instance by using a \l RowLayout or
+    a \l ColumnLayout.
+
+    \section1 ScrollView Control
+
+    \image qtquickcontrols2-scrollview-wireframe.png
+
+    \l ScrollView provides scrolling for user-defined content.
+
+    \section1 StackView Control
+
+    \image qtquickcontrols2-stackview-wireframe.png
+
+    \l StackView organizes content pages into a stack using a last-in-first-out
+    principle: the last item to be "pushed" onto the stack is the first one to
+    be removed, and the top-most item is always the one that is visible.
+
+    \section1 SwipeView Control
+
+    \image qtquickcontrols2-swipeview-wireframe.png
+
+    \l SwipeView organizes content pages into a swipable strip.
+
+    \section1 TabBar Control
+
+    \image qtquickcontrols2-tabbar-wireframe.png
+
+    \l TabBar organizes content pages into tabs.
+
+    \section1 ToolBar Control
+
+    \image qtquickcontrols2-toolbar.png
+
+    \l ToolBar is a container of application-wide and context-sensitive
+    actions and controls.
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-cppclasses.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-cppclasses.qdoc
new file mode 100644
index 0000000000..10ae30a689
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-cppclasses.qdoc
@@ -0,0 +1,34 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \module QtQuickControls2
+    \keyword Qt Quick Controls C++ Classes
+    \title Qt Quick Controls C++ Classes
+    \keyword Qt Quick Controls 2 C++ Classes
+    \ingroup modules
+    \qtcmakepackage QuickControls2
+    \qtvariable quickcontrols2
+
+    \brief Provides classes for setting up the controls from C++.
+
+    The C++ types can be included into your application using the following
+    include statement:
+
+    \code
+    #include <QtQuickControls2>
+    \endcode
+
+    \note If you are using a few classes from this module, we recommend including
+    those specific classes only instead of the module.
+
+    To link against the corresponding C++ libraries, add the following to your
+    qmake project file:
+
+    \code
+    QT += quickcontrols2
+    \endcode
+
+    The \l{Qt Quick Controls} page contains information about how to use the
+    module.
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-customize.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-customize.qdoc
new file mode 100644
index 0000000000..e30d393771
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-customize.qdoc
@@ -0,0 +1,1033 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-customize.html
+    \keyword Customizing Qt Quick Controls 2
+    \title Customizing Qt Quick Controls
+    \brief A set of UI controls to create user interfaces in Qt Quick
+
+    Qt Quick Controls consist of a hierarchy (tree) of items. In order to
+    provide a custom look and feel, the default QML implementation of each
+    item can be replaced with a custom one.
+
+    \section1 Customizing a Control
+
+    Sometimes you'll want to create a "one-off" look for a specific part of
+    your UI, and use a complete style everywhere else. Perhaps you're happy
+    with the style you're using, but there's a certain button that has some
+    special significance.
+
+    The first way to create this button is to simply define it in-place,
+    wherever it is needed. For example, perhaps you're not satisfied with the
+    Basic style's Button having square corners. To make them rounded, you
+    can override the \l {Control::}{background} item and set the radius
+    property of Rectangle:
+
+    \include customize-button-background.qdocinc file
+
+    \note as the different items that make up a control in any given style are
+    designed to work together, it may be necessary to override other items to
+    get the look you're after. In addition, not all styles can be customized.
+    See the note in \l {Customization Reference} for more information.
+
+    The second way to create the button is good if you plan to use your rounded
+    button in several places. It involves moving the code into its own QML file
+    within your project.
+
+    For this approach, we'll copy the background code from the Basic style's
+    \c Button.qml. This file can be found in the following path in your Qt
+    installation:
+
+    \c {$QTDIR/qml/QtQuick/Controls/Basic/Button.qml}
+
+    After doing that, we'll simply add the following line:
+
+    \code
+    radius: 4
+    \endcode
+
+    To avoid confusion with the controls in the
+    module itself, we'll call the file \c MyButton.qml. To use the control in
+    your application, refer to it by its filename:
+
+    \qml
+    import QtQuick.Controls
+
+    ApplicationWindow {
+        MyButton {
+            text: qsTr("A Special Button")
+        }
+    }
+    \endqml
+
+    The third way to create the button is a bit more structured, both in terms
+    of where the file sits in the file system and how it is used in QML. First,
+    copy an existing file as you did above, but this time, put it into a
+    subfolder in your project named (for example) \c controls. To use the
+    control, first import the folder into a namespace:
+
+    \qml
+    import QtQuick.Controls
+    import "controls" as MyControls
+
+    ApplicationWindow {
+        MyControls.Button {
+            text: qsTr("A Special Button")
+        }
+    }
+    \endqml
+
+    As you now have the \c MyControls namespace, you can name the controls after
+    their actual counterparts in the Qt Quick Controls module. You can repeat
+    this process for any control that you wish to add.
+
+    An added benefit of these three methods is that it's not necessary to
+    implement the template from scratch.
+
+    \note the three approaches mentioned here do not work for customizing the
+    attached \l ToolTip, as that is a shared item created internally. To do
+    a one-off customization of a \c ToolTip, see \l {Custom Tool Tips}. To
+    customize the attached \c ToolTip, it must be provided as part of
+    \l {Creating a Custom Style}{your own style}.
+
+    \section1 Creating a Custom Style
+
+    There are several ways to go about creating your own styles. Below, we'll
+    explain the various approaches.
+
+    \section2 Definition of a Style
+
+    In Qt Quick Controls, a style is essentially a set of QML files within a
+    single directory. There are four requirements for a style to be
+    \l {Using Styles in Qt Quick Controls}{usable}:
+
+    \list
+    \li At least one QML file whose name matches a control (for example,
+        \c Button.qml) must exist.
+    \li Each QML file must contain the relevant type from the \l {Qt Quick Templates 2}
+        {QtQuick.Templates} import as the root item. For example,
+        Button.qml must contain a Button template as its root item.
+
+        If we instead used the corresponding type from the \l {Qt Quick Controls}
+        {QtQuick.Controls} import as we did in the previous section, it would not work:
+        the control we were defining would try to derive from itself.
+    \li A \l {Module Definition qmldir Files}{qmldir} file must exist alongside
+        the QML file(s). Below is an example of a simple \c qmldir file for a style that
+        provides a button:
+
+        \badcode
+        module MyStyle
+        Button 2.15 Button.qml
+        \endcode
+
+        If you're using \l {Compile-Time Style Selection}{compile-time style
+        selection}, the qmldir should also import the fallback style:
+
+        \badcode
+        # ...
+        import QtQuick.Controls.Basic auto
+        \endcode
+
+        This can also be done for \l {Run-Time Style Selection}{run-time style selection}
+        instead of using, for example, \l QQuickStyle::setFallbackStyle().
+
+        The directory structure for such a style looks like this:
+
+        \badcode
+        MyStyle
+        ├─── Button.qml
+        └─── qmldir
+        \endcode
+    \li The files must be in a directory that is findable via the \l[QtQml]{QML Import Path}.
+
+        For example, if the path to \e MyStyle directory mentioned above was
+        \c /home/user/MyApp/MyStyle, then \c /home/user/MyApp must be added to
+        the QML import path.
+
+        To \l {Using Styles in Qt Quick Controls}{use} \e MyStyle in \e MyApp,
+        refer to it by name:
+
+        \list
+        \li \c {./MyApp -style MyStyle}
+        \endlist
+
+        The style name must match the casing of the style directory; passing
+        \e mystyle or \e MYSTYLE is not supported.
+    \endlist
+
+    By default, the styling system uses the Basic style as a fallback for
+    controls that aren't implemented. To customize or extend any other built-in
+    style, it is possible to specify a different fallback style using
+    \l[QtQuickControls2]{QQuickStyle}.
+
+    What this means is that you can implement as many controls as you like for
+    your custom style, and place them almost anywhere. It also allows users to
+    create their own styles for your application.
+
+    \section3 Previewing Custom Styles in Qt Quick Designer
+
+    Using the approach above, it is possible to preview a custom style
+    in Qt Quick Designer. In order to do so,
+    ensure that the project has a
+    \l {Qt Quick Controls Configuration File}{qtquickcontrols2.conf} file,
+    and that the following entry exists:
+
+    \badcode
+    [Controls]
+    Style=MyStyle
+    \endcode
+
+    For more information, take a look at the
+    \l {Qt Quick Controls - Flat Style}{Flat Style example}.
+
+    \section2 Style-specific C++ Extensions
+
+    Sometimes you may need to use C++ to extend your custom style. There are two
+    ways to expose such types to QML:
+
+    \list
+    \li If the style that uses the type is the only style used by an application,
+        it's enough to register it with the QML engine via qmlRegisterType():
+
+        \code
+        qmlRegisterType<ACoolCppItem>("MyApp", 1, 0, "ACoolItem");
+        \endcode
+
+        See \l {Using C++ Data From QML} for more information about this.
+    \li If the style that uses the type is one of many styles used by an
+        application, it may be better to only register it when necessary. This
+        is the point at which it would make sense to implement your own
+        \l {Creating C++ Plugins for QML}{QML plugin}.
+
+        Using a plugin as part of your style is not that much different from
+        using a set of QML files. The only difference is that the plugin and
+        its \c qmldir file must be present in the same directory as the QML
+        files.
+    \endlist
+
+    \section3 Considerations for custom styles
+
+    When implementing your own style and customizing controls, there are some
+    points to keep in mind to ensure that your application is as performant as
+    possible.
+
+    \section4 Avoid assigning an id to styles' implementations of item delegates
+
+    As explained in \l {Definition of a Style}, when you implement your
+    own style for a control, you start off with the relevant template for
+    that control. For example, a style's \c Button.qml will be structured
+    similarly to this:
+
+    \qml
+    T.Button {
+        // ...
+
+        background: Rectangle {
+            // ...
+        }
+
+        contentItem: Text {
+            // ...
+        }
+
+        // ...
+    }
+    \endqml
+
+    When you use a Button in your application, the \c background and
+    \c contentItem items will be created and parented to the root \c Button
+    item:
+
+    \qml
+    // Creates the Button root item, the Rectangle background,
+    // and the Text contentItem.
+    Button {
+        text: qsTr("Confirm")
+    }
+    \endqml
+
+    Suppose you then needed to do a one-off customization of the Button (as
+    explained in \l {Customizing a Control}):
+
+    \include customize-button-background.qdocinc file
+
+    In QML, this would normally result in both the default \c background
+    implementation and the one-off, custom \c background items being created.
+    Qt Quick Controls uses a technique that avoids creating both items, and
+    instead only creates the custom \c background, greatly improving the
+    creation performance of controls.
+
+    This technique relies on the absence of an \l {The id Attribute}{id} in the
+    style's implementation of that item. If an id is assigned, the technique
+    cannot work, and both items will be created. For example, it can be
+    tempting to assign an id to the \c background or \c contentItem so that
+    other objects within the file can refer to those items:
+
+    \qml
+    T.Button {
+        // ...
+
+        background: Rectangle {
+            id: backgroundRect
+            // ...
+        }
+
+        contentItem: Text {
+            // Use backgroundRect in some way...
+        }
+
+        // ...
+    }
+    \endqml
+
+    With this code, every time a Button instance with a customized background
+    is created, both backgrounds will be created, resulting in sub-optimal
+    creation performance.
+
+    Prior to Qt 5.15, the old, unused background would be deleted to release
+    the resources associated with it. However, as the control does not own the
+    items, it should not delete them. As of Qt 5.15, old items are no longer
+    deleted, and so the \c backgroundRect item will live longer than it needs
+    to—typically until the application exits. Although the old item will be
+    hidden, visually unparented from the control, and removed from the
+    accessibility tree, it is important to keep the creation time and memory
+    usage of these unused items in mind when assigning an id in this context.
+
+    \section4 Avoid imperative assignments of custom items
+
+    The technique mentioned in the section above only works when an item is
+    \l {Prefer Declarative Bindings Over Imperative Assignments}{declaratively}
+    assigned for the first time, and so imperative assignments will result in
+    orphaned items. Always use declarative bindings to assign custom items
+    when possible.
+
+    \section4 Don't import QtQuick.Controls in QML implementations
+
+    When writing the QML for your style's implementation of a control,
+    it's important not to import \c {QtQuick.Controls}. Doing so will
+    prevent the QML from being compiled by the QML compiler.
+
+    \section4 Implement types used by other types
+
+    Suppose you were using ScrollViews in your application, and decided that
+    you want to customize their scroll bars. It is tempting to just implement a
+    custom ScrollBar.qml and have ScrollView pick up the customized ScrollBar
+    automatically. However, this will not work. You must implement both
+    ScrollBar.qml \e and ScrollView.qml.
+
+    \section3 Attached properties
+
+    It is common for a style to have certain properties or attributes that
+    apply to all controls. \l {Attached Properties and Attached Signal
+    Handlers}{Attached properties} are a great way of extending an item in QML
+    without having to modify any existing C++ belonging to that item. For
+    example, both the \l {Material Style}{Material} and \l {Universal
+    Style}{Universal} styles have an attached theme property that controls
+    whether an item and its children will be rendered in a light or dark theme.
+
+    As an example, let's add an attached property that controls elevation. Our
+    style will illustrate the elevation with a drop shadow; the higher the
+    elevation, the larger the shadow.
+
+    The first step is to \l {Qt Creator: Project Types}{create a new Qt Quick
+    Controls application} in Qt Creator. After that, we
+    \l {Qt Creator: Creating C++ Classes}{add a C++ type} that stores the elevation. Since
+    the type will be used for every control supported by our style, and because
+    we may wish to add other attached properties later on, we'll call it
+    MyStyle. Here is \c MyStyle.h:
+
+    \code
+    #ifndef MYSTYLE_H
+    #define MYSTYLE_H
+
+    #include <QObject>
+    #include <QtQml>
+
+    class MyStyle : public QObject
+    {
+        Q_OBJECT
+        Q_PROPERTY(int elevation READ elevation WRITE setElevation NOTIFY elevationChanged)
+
+    public:
+        explicit MyStyle(QObject *parent = nullptr);
+
+        static MyStyle *qmlAttachedProperties(QObject *object);
+
+        int elevation() const;
+        void setElevation(int elevation);
+
+    signals:
+        void elevationChanged();
+
+    private:
+        int m_elevation;
+    };
+
+    QML_DECLARE_TYPEINFO(MyStyle, QML_HAS_ATTACHED_PROPERTIES)
+
+    #endif // MYSTYLE_H
+    \endcode
+
+    \c MyStyle.cpp:
+
+    \code
+    #include "mystyle.h"
+
+    MyStyle::MyStyle(QObject *parent) :
+        QObject(parent),
+        m_elevation(0)
+    {
+    }
+
+    MyStyle *MyStyle::qmlAttachedProperties(QObject *object)
+    {
+        return new MyStyle(object);
+    }
+
+    int MyStyle::elevation() const
+    {
+        return m_elevation;
+    }
+
+    void MyStyle::setElevation(int elevation)
+    {
+        if (elevation == m_elevation)
+            return;
+
+        m_elevation = elevation;
+        emit elevationChanged();
+    }
+    \endcode
+
+    The \c MyStyle type is special in the sense that it shouldn't be
+    instantiated, but rather used for its attached properties. For that reason,
+    we register it in the following manner in \c main.cpp:
+
+    \code
+    #include <QGuiApplication>
+    #include <QQmlApplicationEngine>
+
+    #include "mystyle.h"
+
+    int main(int argc, char *argv[])
+    {
+        QGuiApplication app(argc, argv);
+
+        qmlRegisterUncreatableType<MyStyle>("MyStyle", 1, 0, "MyStyle", "MyStyle is an attached property");
+
+        QQmlApplicationEngine engine;
+        // Make the directory containing our style known to the QML engine.
+        engine.addImportPath(":/");
+        engine.load(QUrl(QLatin1String("qrc:/main.qml")));
+
+        return app.exec();
+    }
+    \endcode
+
+    We then copy \c Button.qml from the Basic style in
+    \c {$QTDIR/qml/QtQuick/Controls/Basic/} into a new \c myproject folder in our
+    project directory. Add the newly copied \c Button.qml to \c qml.qrc, which is
+    the resource file that contains our QML files.
+
+    Next, we add a drop shadow to the \l {Control::}{background} delegate of
+    the Button:
+
+    \code
+    // ...
+    import QtGraphicalEffects
+    import MyStyle
+    // ...
+
+    background: Rectangle {
+        // ...
+
+        layer.enabled: control.enabled && control.MyStyle.elevation > 0
+        layer.effect: DropShadow {
+            verticalOffset: 1
+            color: control.visualFocus ? "#330066ff" : "#aaaaaa"
+            samples: control.MyStyle.elevation
+            spread: 0.5
+        }
+    }
+    \endcode
+
+    Note that we:
+
+    \list
+    \li Don't bother using the drop shadow when the elevation is \c 0
+    \li Change the shadow's color depending on whether or not the button has
+        focus
+    \li Make the size of the shadow depend on the elevation
+    \endlist
+
+    To try out the attached property, we create a \l Row with two Buttons in
+    \c main.qml:
+
+    \qml
+    import QtQuick
+    import QtQuick.Controls
+
+    import MyStyle 1.0
+
+    ApplicationWindow {
+        id: window
+        width: 400
+        height: 400
+        visible: true
+
+        Row {
+            spacing: 20
+            anchors.centerIn: parent
+
+            Button {
+                text: "Button 1"
+            }
+            Button {
+                text: "Button 2"
+                MyStyle.elevation: 10
+            }
+        }
+    }
+    \endqml
+
+    One button has no elevation, and the other has an elevation of \c 10.
+
+    With that in place, we can run our example. To tell the application to
+    use our new style, we pass \c {-style MyStyle} as an application
+    argument, but there are \l {Using Styles in Qt Quick Controls}{many
+    ways} to specify the style to use.
+
+    The end result:
+
+    \image qtquickcontrols2-customize-buttons.png
+
+    Note that the \c {import MyStyle 1.0} statement is only necessary
+    because we are using the attached property belonging to \c MyStyle.
+    Both buttons will use our custom style, even if we were to remove the
+    import.
+
+    \section1 Customization Reference
+
+    The following snippets present examples where the Basic style's controls
+    have been customized using the same approach as the
+    \l {Customizing a Control} section. The code can be used as a starting
+    point to implement a custom look and feel.
+
+    \note The \l {macOS Style}{macOS} and \l {Windows Style}{Windows} styles
+    are not suitable for customizing.
+    \include customizing-native-styles.qdocinc
+
+    \section2 Customizing ApplicationWindow
+
+        ApplicationWindow consists of one visual item:
+        \l {ApplicationWindow::background}{background}.
+
+        \code
+        import QtQuick
+        import QtQuick.Controls
+
+        ApplicationWindow {
+            visible: true
+
+            background: Rectangle {
+                gradient: Gradient {
+                    GradientStop { position: 0; color: "#ffffff" }
+                    GradientStop { position: 1; color: "#c1bbf9" }
+                }
+            }
+        }
+        \endcode
+
+
+    \section2 Customizing BusyIndicator
+
+        BusyIndicator consists of two visual items: \l {Control::background}{background}
+        and \l {Control::contentItem}{contentItem}.
+
+        \image qtquickcontrols2-busyindicator-custom.png
+
+        \snippet qtquickcontrols2-busyindicator-custom.qml file
+
+
+    \section2 Customizing Button
+
+        Button consists of two visual items: \l {Control::background}{background}
+        and \l {Control::contentItem}{content item}.
+
+        \image qtquickcontrols2-button-custom.png
+
+        \snippet qtquickcontrols2-button-custom.qml file
+
+
+    \section2 Customizing CheckBox
+
+        CheckBox consists of three visual items: \l {Control::background}{background},
+        \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}.
+
+        \image qtquickcontrols2-checkbox-custom.png
+
+        \snippet qtquickcontrols2-checkbox-custom.qml file
+
+    \section2 Customizing CheckDelegate
+
+        CheckDelegate consists of three visual items: \l {Control::background}{background},
+        \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}.
+
+        \image qtquickcontrols2-checkdelegate-custom.png
+
+        \snippet qtquickcontrols2-checkdelegate-custom.qml file
+
+
+    \section2 Customizing ComboBox
+
+        ComboBox consists of \l {Control::background}{background},
+        \l {Control::contentItem}{content item}, \l {ComboBox::popup}{popup},
+        \l {ComboBox::indicator}{indicator}, and \l {ComboBox::delegate}{delegate}.
+
+        \image qtquickcontrols2-combobox-custom.png
+
+        \snippet qtquickcontrols2-combobox-custom.qml file
+
+        As explained in \l {ComboBox Model Roles}, ComboBox supports multiple
+        types of models. If you know that your ComboBox instances will only
+        ever use one particular type of model, then it is possible to simplify
+        the code above.
+
+        For example, if your models will only ever be derived from
+        \l QAbstractItemModel and have more than one role, the following
+        binding is sufficient:
+
+        \code
+        text: model[control.textRole]
+        \endcode
+
+        However, if you want to support all standard models, the more complex
+        binding is necessary, and is explained in detail below.
+
+        \quotefromfile qtquickcontrols2-combobox-custom.qml
+        \skipto control.textRole
+        \printto Array.isArray
+
+        The first line checks if the \l {ComboBox::}{textRole} property has
+        been set. It is only necessary to set this property if the model
+        has more than one role.
+
+        \printline Array.isArray
+
+        If \c textRole has been set, the next step is to check if the model
+        is an array.
+
+        If it is an array, the \c modelData context property will be available,
+        and so it must be used. Square bracket notation is used to access
+        the property of modelData since the property name is not known ahead
+        of time.
+
+        If it is not an array, the \c model context property must be used
+        instead.
+
+        \printline modelData
+
+        Finally, if \c textRole has not been set, then the model only has one
+        role, and so it is sufficient to use the value of \c modelData.
+
+    \section2 Customizing DelayButton
+
+        DelayButton consists of two visual items: \l {Control::background}{background}
+        and \l {Control::contentItem}{content item}.
+
+        \image qtquickcontrols2-delaybutton-custom.png
+
+        \snippet qtquickcontrols2-delaybutton-custom.qml file
+
+
+    \section2 Customizing Dial
+
+        Dial consists of two visual items: \l {Control::background}{background}
+        and \l {Dial::handle}{handle}.
+
+        \image qtquickcontrols2-dial-custom.png
+
+        \snippet qtquickcontrols2-dial-custom.qml file
+
+
+    \section2 Customizing Drawer
+
+        Drawer can have a visual \l {Control::background}{background}
+        item.
+
+        \code
+        background: Rectangle {
+            Rectangle {
+                x: parent.width - 1
+                width: 1
+                height: parent.height
+                color: "#21be2b"
+            }
+        }
+        \endcode
+
+
+    \section2 Customizing Frame
+
+        Frame consists of one visual item: \l {Control::background}{background}.
+
+        \image qtquickcontrols2-frame-custom.png
+
+        \snippet qtquickcontrols2-frame-custom.qml file
+
+
+    \section2 Customizing GroupBox
+
+        GroupBox consists of two visual items: \l {Control::background}{background}
+        and \l {GroupBox::label}{label}.
+
+        \image qtquickcontrols2-groupbox-custom.png
+
+        \snippet qtquickcontrols2-groupbox-custom.qml file
+
+
+    \section2 Customizing ItemDelegate
+
+        ItemDelegate consists of two visual items: \l {Control::background}{background}
+        and \l {Control::contentItem}{content item}.
+
+        \image qtquickcontrols2-itemdelegate-custom.png
+
+        \snippet qtquickcontrols2-itemdelegate-custom.qml file
+
+
+    \section2 Customizing Label
+
+        Label can have a visual \l {Label::background}{background} item.
+
+        \image qtquickcontrols2-label-custom.png
+
+        \snippet qtquickcontrols2-label-custom.qml file
+
+
+    \section2 Customizing Menu
+
+        \list
+            \li \l Menu consists of a visual \l {Popup::background}{background} item.
+            \li \l MenuItem consists of four visual items: \l {Control::background}{background},
+                \l {Control::contentItem}{content item}, \l {AbstractButton::}{indicator}, and
+                \l {MenuItem::}{arrow}.
+            \li \l MenuSeparator consists of a visual \l {Control::background}{background} and
+                \l {Control::contentItem}{content item}.
+        \endlist
+
+        \image qtquickcontrols2-menu-custom.png
+
+        \quotefromfile qtquickcontrols2-menu-custom.qml
+        \skipto import QtQuick
+        \printuntil import QtQuick.Controls
+        \skipto Menu
+        \printto eof
+
+
+    \section2 Customizing MenuBar
+
+        MenuBar can have a visual \l {Control::background}{background} item,
+        and MenuBarItem consists of two visual items: \l {Control::background}
+        {background} and \l {Control::contentItem}{content item}.
+
+        \image qtquickcontrols2-menubar-custom.png
+
+        \quotefromfile qtquickcontrols2-menubar-custom.qml
+        \skipto import QtQuick
+        \printuntil import QtQuick.Controls
+        \skipto MenuBar
+        \printto eof
+
+
+    \section2 Customizing PageIndicator
+
+        PageIndicator consists of a \l {Control::background}{background}, \l {Control::contentItem}{content item}, and \l {PageIndicator::delegate}{delegate}.
+
+        \image qtquickcontrols2-pageindicator-custom.png
+
+        \snippet qtquickcontrols2-pageindicator-custom.qml file
+
+
+    \section2 Customizing Pane
+
+        Pane consists of a \l {Control::background}{background}.
+
+        \image qtquickcontrols2-pane-custom.png
+
+        \snippet qtquickcontrols2-pane-custom.qml file
+
+
+    \section2 Customizing Popup
+
+        Popup consists of a \l {Popup::background}{background} and
+        \l {Popup::contentItem}{content item}.
+
+        \image qtquickcontrols2-popup-custom.png
+
+        \quotefromfile qtquickcontrols2-popup-custom.qml
+        \skipto import QtQuick
+        \printuntil import QtQuick.Controls
+        \codeline
+        \skipto Popup
+        \printuntil {
+        \printuntil }
+        \printuntil }
+        \printuntil }
+
+
+    \section2 Customizing ProgressBar
+
+        ProgressBar consists of two visual items: \l {Control::background}{background}
+        and \l {Control::contentItem}{content item}.
+
+        \image qtquickcontrols2-progressbar-custom.png
+
+        \snippet qtquickcontrols2-progressbar-custom.qml file
+
+
+    \section2 Customizing RadioButton
+
+        RadioButton consists of three visual items: \l {Control::background}{background},
+        \l {Control::contentItem}{content item} and \l {AbstractButton::indicator}{indicator}.
+
+        \image qtquickcontrols2-radiobutton-custom.png
+
+        \snippet qtquickcontrols2-radiobutton-custom.qml file
+
+
+    \section2 Customizing RadioDelegate
+
+        RadioDelegate consists of three visual items: \l {Control::background}{background},
+        \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}.
+
+        \image qtquickcontrols2-radiodelegate-custom.png
+
+        \snippet qtquickcontrols2-radiodelegate-custom.qml file
+
+
+    \section2 Customizing RangeSlider
+
+        RangeSlider consists of three visual items:
+        \l {Control::background}{background},
+        \l {RangeSlider::first}{first.handle} and
+        \l {RangeSlider::second.handle}{second.handle}.
+
+        \image qtquickcontrols2-rangeslider-custom.png
+
+        \snippet qtquickcontrols2-rangeslider-custom.qml file
+
+
+    \section2 Customizing RoundButton
+
+        RoundButton can be customized in the same manner as
+        \l {Customizing Button}{Button}.
+
+
+    \section2 Customizing ScrollBar
+
+        ScrollBar consists of two visual items: \l {Control::background}{background}
+        and \l {Control::contentItem}{content item}.
+
+        \image qtquickcontrols2-scrollbar-custom.png
+
+        \snippet qtquickcontrols2-scrollbar-custom.qml file
+
+
+    \section2 Customizing ScrollIndicator
+
+        ScrollIndicator consists of two visual items: \l {Control::background}{background}
+        and \l {Control::contentItem}{content item}.
+
+        \image qtquickcontrols2-scrollindicator-custom.png
+
+        \snippet qtquickcontrols2-scrollindicator-custom.qml file
+
+
+    \section2 Customizing ScrollView
+
+        ScrollView consists of a \l {Control::background}{background} item,
+        and horizontal and vertical scroll bars.
+
+        \image qtquickcontrols2-scrollview-custom.png
+
+        \snippet qtquickcontrols2-scrollview-custom.qml file
+
+
+    \section2 Customizing Slider
+
+        Slider consists of two visual items: \l {Control::background}{background},
+        and \l {Slider::handle}{handle}.
+
+        \image qtquickcontrols2-slider-custom.png
+
+        \snippet qtquickcontrols2-slider-custom.qml file
+
+
+    \section2 Customizing SpinBox
+
+        SpinBox consists of four visual items: \l {Control::background}{background},
+        \l {Control::contentItem}{contentItem}, \l {SpinBox::up.indicator}{up indicator},
+        and \l {SpinBox::down.indicator}{down indicator}.
+
+        \image qtquickcontrols2-spinbox-custom.png
+
+        \snippet qtquickcontrols2-spinbox-custom.qml file
+
+
+    \section2 Customizing SplitView
+
+        SplitView consists of a visual \l {SplitView::handle}{handle} delegate.
+
+        \image qtquickcontrols2-splitview-custom.png
+
+        \snippet qtquickcontrols2-splitview-custom.qml 1
+
+
+    \section2 Customizing StackView
+
+        StackView can have a visual \l {Control::background}{background}
+        item, and it allows customizing the transitions that are used for
+        push, pop, and replace operations.
+
+        \snippet qtquickcontrols2-stackview-custom.qml file
+
+
+    \section2 Customizing SwipeDelegate
+
+        SwipeDelegate consists of six visual items: \l {Control::background}{background},
+        \l {Control::contentItem}{content item}, \l {AbstractButton::indicator}{indicator},
+        \c swipe.left, \c swipe.right, and \c swipe.behind.
+
+        \image qtquickcontrols2-swipedelegate-custom.png
+
+        \snippet qtquickcontrols2-swipedelegate-custom.qml file
+
+
+    \section2 Customizing SwipeView
+
+        SwipeView can have a visual \l {Control::background}{background}
+        item. The navigation is implemented by the \l {Control::contentItem}
+        {content item}.
+
+        \snippet qtquickcontrols2-swipeview-custom.qml file
+
+
+    \section2 Customizing Switch
+
+        Switch consists of three visual items: \l {Control::background}{background},
+        \l {Control::contentItem}{content item} and \l {AbstractButton::indicator}{indicator}.
+
+        \image qtquickcontrols2-switch-custom.png
+
+        \snippet qtquickcontrols2-switch-custom.qml file
+
+    \section2 Customizing SwitchDelegate
+
+        SwitchDelegate consists of three visual items: \l {Control::background}{background},
+        \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}.
+
+        \image qtquickcontrols2-switchdelegate-custom.png
+
+        \snippet qtquickcontrols2-switchdelegate-custom.qml file
+
+
+    \section2 Customizing TabBar
+
+        TabBar consists of two visual items: \l {Control::background}{background},
+        and \l {Control::contentItem}{contentItem}.
+
+        \image qtquickcontrols2-tabbar-custom.png
+
+        \snippet qtquickcontrols2-tabbar-custom.qml file
+
+
+    \section2 Customizing TabButton
+
+        TabButton can be customized in the same manner as
+        \l {Customizing Button}{Button}.
+
+
+    \section2 Customizing TextArea
+
+        TextArea consists of a \l {TextArea::background}{background} item.
+
+        \image qtquickcontrols2-textarea-custom.png
+
+        \snippet qtquickcontrols2-textarea-custom.qml file
+
+
+    \section2 Customizing TextField
+
+        TextField consists of a \l {TextField::background}{background} item.
+
+        \image qtquickcontrols2-textfield-custom.png
+
+        \snippet qtquickcontrols2-textfield-custom.qml file
+
+
+    \section2 Customizing ToolBar
+
+        ToolBar consists of one visual item: \l {Control::background}{background}.
+
+        \image qtquickcontrols2-toolbar-custom.png
+
+        \snippet qtquickcontrols2-toolbar-custom.qml file
+
+
+    \section2 Customizing ToolButton
+
+        ToolButton consists of two visual items: \l {Control::background}{background}
+        and \l {Control::contentItem}{content item}.
+
+        \image qtquickcontrols2-toolbutton-custom.png
+
+        \snippet qtquickcontrols2-toolbutton-custom.qml file
+
+
+    \section2 Customizing ToolSeparator
+
+        ToolSeparator consists of two visual items: \l {Control::background}{background}
+        and \l {Control::contentItem}{content item}.
+
+        \image qtquickcontrols2-toolseparator-custom.png
+
+        \snippet qtquickcontrols2-toolseparator-custom.qml file
+
+
+    \section2 Customizing ToolTip
+
+        ToolTip consists of two visual items: \l {Popup::background}{background}
+        and \l {Popup::contentItem}{content item}.
+
+        \quotefromfile qtquickcontrols2-tooltip-custom.qml
+        \skipto import QtQuick
+        \printuntil import QtQuick.Controls
+        \skipto ToolTip
+        \printuntil }
+        \printuntil }
+        \printuntil }
+
+        \include qquicktooltip.qdocinc customize-note
+
+    \section2 Customizing Tumbler
+
+        Tumbler consists of three visual items:
+        \l {Control::background}{background},
+        \l {Control::contentItem}{contentItem}, and
+        \l {Tumbler::delegate}{delegate}.
+
+        \image qtquickcontrols2-tumbler-custom.png
+
+        \snippet qtquickcontrols2-tumbler-custom.qml file
+
+        If you want to define your own contentItem, use either a \l ListView or
+        \l PathView as the root item. For a wrapping Tumbler, use PathView:
+
+        \snippet qtquickcontrols2-tumbler-pathView.qml contentItem
+
+        For a non-wrapping Tumbler, use ListView:
+
+        \snippet qtquickcontrols2-tumbler-listView.qml contentItem
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-delegates.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-delegates.qdoc
new file mode 100644
index 0000000000..5d498ced1f
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-delegates.qdoc
@@ -0,0 +1,74 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-delegates.html
+    \title Delegate Controls
+    \ingroup qtquickcontrols2-guidelines
+    \brief Guidelines for delegate controls
+
+    Qt Quick Controls offers a selection of controls that are used as
+    delegates in views.
+
+    \annotatedlist qtquickcontrols2-delegates
+
+    Each type of delegate has its own specific target use case. The following
+    sections offer guidelines for choosing the appropriate type of delegate,
+    depending on the use case.
+
+    \section1 CheckDelegate Control
+
+    \image qtquickcontrols2-checkdelegate.gif
+
+    \l CheckDelegate presents a checkable control that can be toggled on
+    (checked) or off (unchecked). Check delegates are typically used to
+    select one or more options from a set of options.
+
+    \b {See also} \l {CheckBox Control}.
+
+    \section1 ItemDelegate Control
+
+    \image qtquickcontrols2-itemdelegate.gif
+
+    \l ItemDelegate presents a checkable control that can be pressed and
+    clicked by the user.
+
+    \section1 RadioDelegate Control
+
+    \image qtquickcontrols2-radiodelegate.gif
+
+    \l RadioDelegate presents a checkable control that can be toggled on
+    (checked) or off (unchecked). Radio delegates are typically used to select
+    one option from a set of options.
+
+    \b {See also} \l {RadioButton Control}.
+
+    \section1 SwipeDelegate Control
+
+    \image qtquickcontrols2-swipedelegate.gif
+
+    \l SwipeDelegate presents a view item that can be swiped left or right to
+    expose more options or information.
+
+    \section1 SwitchDelegate Control
+
+    \image qtquickcontrols2-switchdelegate.gif
+
+    \l SwitchDelegate presents a switchable delegate that can be toggled on or off.
+
+    \b {See also} \l {Switch Control}.
+
+    \section1 TreeViewDelegate Control
+
+    \image qtquickcontrols2-treeviewdelegate.png
+
+    A \l TreeViewDelegate is a delegate that can be assigned to the delegate property
+    of a TreeView.
+
+    \b {See also} \l {TreeView}.
+
+    \section1 Related Information
+    \list
+    \li \l {Qt Quick Controls Guidelines}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-deployment.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-deployment.qdoc
new file mode 100644
index 0000000000..daea9eccf0
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-deployment.qdoc
@@ -0,0 +1,73 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-deployment.html
+    \title Deploying Qt Quick Controls Applications
+
+    Deployment of Qt Quick Controls applications is very similar to
+    deployment of other types of Qt applications. However, there are a few
+    factors to consider.
+
+    \section1 Deploying an Application with Several Styles
+
+    Suppose you have an application that will be deployed to both Android and
+    Windows devices. To ensure that only the minimum set of files that are
+    necessary for the application to run are deployed to each device, you can
+    use file selectors. For example, your directory structure could look like
+    this:
+
+    \code
+    resources.qrc
+    main.qml
+    +windows/MyPage.qml
+    +windows/qtquickcontrols2.conf
+    +android/MyPage.qml
+    +android/qtquickcontrols2.conf
+    \endcode
+
+    In the project above, \c main.qml would import \c QtQuick.Controls, for
+    example, but shouldn't import, say, \c QtQuick.Controls.Material. Any code
+    that is style-specific is moved out into separate files; just as we've done
+    for \c MyPage.qml.
+
+    The \c +windows/qtquickcontrols2.conf file would contain configuration
+    options specific to the Universal style:
+
+    \code
+    [Controls]
+    Style=Universal
+
+    [Universal]
+    Theme=Dark
+    Accent=Red
+    \endcode
+
+    The \c +android/qtquickcontrols2.conf file would contain configuration
+    options specific to the Material style:
+
+    \code
+    [Controls]
+    Style=Material
+
+    [Material]
+    Theme=Light
+    Accent=Brown
+    \endcode
+
+    \section1 Static Builds
+
+    For dynamically built applications, it is not necessary to import a
+    specific style that should be usable by that application. For statically
+    built applications, Qt's build system must be involved to ensure that
+    QML plugins function as expected. Specifically, \c qmake uses
+    \c qmlimportscanner to scan the QML files in your application for import
+    statements. For this reason, any styles that should be usable by a
+    statically built application must explicitly import that style. Where the
+    import occurs is up to the developer, but it is recommended to follow the
+    approach mentioned in the \l {Deploying an Application with Several Styles}
+    section, so that only the minimum set of files that are necessary for a
+    particular device are deployed.
+
+    \sa {Deploying Qt Applications}, {Using Styles in Qt Quick Controls}
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-environment.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-environment.qdoc
new file mode 100644
index 0000000000..b939a6741a
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-environment.qdoc
@@ -0,0 +1,54 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-environment.html
+    \title Supported Environment Variables in Qt Quick Controls
+
+    This page contains a list of all environment variables that Qt Quick Controls
+    supports. The environment variables are primarily meant for testing purposes, but
+    they can also be used to set system-wide defaults.
+
+    \table
+        \header
+            \li Variable
+            \li Description
+        \row
+            \li \c QT_QUICK_CONTROLS_STYLE
+            \li Specifies the default \l {Styling Qt Quick Controls}{Qt Quick Controls style}.
+                The value can be either one of the built-in styles, for example \c "Material",
+                or a custom style such as \c "MyStyle".
+        \row
+            \li \c QT_QUICK_CONTROLS_FALLBACK_STYLE
+            \li Specifies a fallback style for \l {Creating a Custom Style}{custom styles}.
+                The value can be one of the built-in styles, for example \c "Material",
+        \row
+            \li \c QT_QUICK_CONTROLS_CONF
+            \li Specifies the location of the \l {Qt Quick Controls configuration file}.
+                By default, the configuration file is loaded from the application's
+                resources in \c ":/qtquickcontrols2.conf".
+        \row
+            \li \c QT_QUICK_CONTROLS_HOVER_ENABLED
+            \li Specifies whether Qt Quick Controls use \l {Control::hoverEnabled}{hover effects}.
+                The value can be set to \c 0 or \c 1 to disable or enable hover effects, respectively.
+     \endtable
+
+    \l {Imagine style} specific environment variables:
+
+    \include qquickimaginestyle.qdocinc env
+
+    \l {Material style} specific environment variables:
+
+    \include qquickmaterialstyle.qdocinc env
+
+    \l {Universal style} specific environment variables:
+
+    \include qquickuniversalstyle.qdocinc env
+
+    \section1 Related Information
+
+    \list
+      \li \l{Styling Qt Quick Controls}
+      \li \l{Qt Quick Controls Configuration File}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-examples.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-examples.qdoc
new file mode 100644
index 0000000000..505c6200f5
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-examples.qdoc
@@ -0,0 +1,13 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \group qtquickcontrols2-examples
+    \ingroup all-examples
+    \keyword Qt Quick Controls Examples
+    \title Qt Quick Controls Examples
+    \keyword Qt Quick Controls 2 Examples
+    \brief A collection of examples for \l {Qt Quick Controls}
+
+    These examples demonstrate creating user interfaces using \l {Qt Quick Controls}.
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-fileselectors.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-fileselectors.qdoc
new file mode 100644
index 0000000000..edd7b76d81
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-fileselectors.qdoc
@@ -0,0 +1,116 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-fileselectors.html
+    \title Using File Selectors with Qt Quick Controls
+
+    \l {QFileSelector}{File selectors} provide a convenient way of selecting
+    file variants. Qt offers the platform name and the locale as built-in
+    selectors. Qt Quick Controls extends the built-in selectors with the name
+    (lowercase) of the style that an application is running with.
+
+    By using file selectors, style-specific tweaks can be applied without
+    creating a hard dependency to a style. From the available file variants,
+    only the selected QML file is loaded by the QML engine. Each file variant
+    can assume the context, that is, a specific style. This typically leads
+    to some code duplication, but on the other hand, cuts the aforementioned
+    hard dependency to the style, and leads to simpler and more efficient
+    QML code.
+
+    The following example demonstrates a custom rounded button that has a
+    styled drop shadow in the \l {Material Style}{Material style}, and looks
+    flat in other styles. The files are organized so that the Material version
+    of \c CustomButton.qml is placed into a \c +Material sub-directory.
+
+    \code
+    :/main.qml
+    :/CustomButton.qml
+    :/+Material/CustomButton.qml
+    \endcode
+
+    By default, \c main.qml will use \c CustomButton.qml for the \c CustomButton
+    type. However, when the application is run with the Material style, the
+    \c Material selector will be present and the \c +Material/CustomButton.qml
+    version will be used instead.
+
+    \code
+    // main.qml
+    import QtQuick
+    import QtQuick.Controls
+
+    ApplicationWindow {
+        id: window
+        visible: true
+
+        CustomButton {
+            text: "Button"
+            anchors.centerIn: parent
+        }
+    }
+    \endcode
+
+    The base implementation of the custom button is a simple rounded
+    flat button.
+
+    \code
+    // CustomButton.qml
+    import QtQuick
+    import QtQuick.Controls
+
+    Button {
+        id: control
+
+        background: Rectangle {
+            radius: width / 2
+            implicitWidth: 36
+            implicitHeight: 36
+            color: control.pressed ? "#ccc" : "#eee"
+        }
+    }
+    \endcode
+
+    The Material style's implementation of the custom button imports the
+    Material style, requests a dark theme to get light text, and creates
+    a drop shadow for the background.
+
+    \code
+    // +Material/CustomButton.qml
+    import QtQuick
+    import QtGraphicalEffects
+    import QtQuick.Controls
+    import QtQuick.Controls.Material
+
+    Button {
+        id: control
+
+        Material.theme: Material.Dark
+
+        background: Rectangle {
+            implicitWidth: 48
+            implicitHeight: 48
+            color: Material.accentColor
+            radius: width / 2
+
+            layer.enabled: control.enabled
+            layer.effect: DropShadow {
+                verticalOffset: 1
+                color: Material.dropShadowColor
+                samples: control.pressed ? 20 : 10
+                spread: 0.5
+            }
+        }
+    }
+    \endcode
+
+    \note It is recommended to use \l QQmlApplicationEngine, which internally
+    creates a \l QQmlFileSelector instance. This is all that is needed to take
+    QML file selectors into use.
+
+    \section1 Related Information
+    \list
+      \li \l {QFileSelector}
+      \li \l {QQmlFileSelector}
+      \li \l {Styling Qt Quick Controls}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-focus.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-focus.qdoc
new file mode 100644
index 0000000000..ff73e560a0
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-focus.qdoc
@@ -0,0 +1,24 @@
+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-focus.html
+    \keyword Focus Management in Qt Quick Controls 2
+    \title Focus Management in Qt Quick Controls
+    \brief Overview of focus handling with Qt Quick Controls
+
+    Qt Quick Controls follows the standard
+    \l {Keyboard Focus in Qt Quick}{Qt Quick focus system}, while also
+    providing some added convenience. For example, the
+    \l {Control::}{focusPolicy} property can be used to control the ways in
+    which a control receives focus.
+
+    \section1 Focus Scope Controls
+
+    Qt Quick Controls offers a selection of controls that act as
+    \l {Acquiring Focus and Focus Scopes}{focus scopes}:
+
+    \annotatedlist qtquickcontrols2-focusscopes
+
+    \sa {Keyboard Focus in Qt Quick}
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-fusion.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-fusion.qdoc
new file mode 100644
index 0000000000..42fcd6e87c
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-fusion.qdoc
@@ -0,0 +1,69 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-fusion.html
+    \title Fusion Style
+
+    The Fusion style is a desktop-oriented style.
+
+    The Fusion style is a platform-agnostic style that offers a desktop-oriented
+    look and feel. It implements the same design language as the
+    \l {Qt Widget Gallery}{Fusion style for Qt Widgets}.
+
+    \image qtquickcontrols2-fusion.png
+
+    To run an application with the Fusion style, see
+    \l {Using Styles in Qt Quick Controls}.
+
+    \note The Fusion style is not a native desktop style. The style runs on any
+    platform, and looks similar everywhere. Minor differences may occur due to
+    differences in the standard system palettes, available fonts, and font
+    rendering engines.
+
+    \section2 Customization
+
+    The Fusion style uses the standard system \l[QtQuick]{Palette}
+    to provide colors that match the desktop environment.
+
+    \image qtquickcontrols2-fusion-palettes.png
+
+    Custom palettes can be specified for any control,
+    \l{Popup::palette}{popup}, or \l{Window::palette}{application window}.
+    Explicit palette attributes are automatically propagated from parent to children,
+    overriding any system defaults for that attribute. In the following example,
+    the window and all three switches appear with a violet highlight color:
+
+    \table
+        \row
+            \li
+                \qml
+                import QtQuick 2.12
+                import QtQuick.Controls 2.12
+
+                ApplicationWindow {
+                    visible: true
+
+                    palette.highlight: "violet"
+
+                    Column {
+                        anchors.centerIn: parent
+
+                        Switch { text: qsTr("First"); checked: true }
+                        Switch { text: qsTr("Second"); checked: true }
+                        Switch { text: qsTr("Third") }
+                    }
+                }
+                \endqml
+            \li
+                \image qtquickcontrols2-fusion-violet.png
+    \endtable
+
+    \b {See also} \l {Basic Style}, \l {Material Style}, \l {Universal Style}
+
+    \section1 Related Information
+
+    \list
+      \li \l{Styling Qt Quick Controls}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-gettingstarted.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-gettingstarted.qdoc
new file mode 100644
index 0000000000..f8667579b6
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-gettingstarted.qdoc
@@ -0,0 +1,62 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-gettingstarted.html
+    \keyword Getting Started with Qt Quick Controls 2
+    \title Getting Started with Qt Quick Controls
+
+    A basic example of a QML file that makes use of controls is shown here:
+
+    \qml
+    import QtQuick
+    import QtQuick.Controls
+
+    ApplicationWindow {
+        title: "My Application"
+        width: 640
+        height: 480
+        visible: true
+
+        Button {
+            text: "Push Me"
+            anchors.centerIn: parent
+        }
+    }
+    \endqml
+
+    \section1 Setting Up Controls from C++
+
+    Although QQuickView has traditionally been used to display QML files in a
+    C++ application, doing this means you can only set window properties from
+    C++.
+
+    With Qt Quick Controls, declare an ApplicationWindow as the root item of
+    your application and launch it by using QQmlApplicationEngine instead.
+    This ensures that you can control top level window properties from QML.
+
+    A basic example of a source file that makes use of controls is shown here:
+
+    \code
+    #include <QGuiApplication>
+    #include <QQmlApplicationEngine>
+
+    int main(int argc, char *argv[])
+    {
+        QGuiApplication app(argc, argv);
+        QQmlApplicationEngine engine;
+        engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+        return app.exec();
+    }
+    \endcode
+
+    \section2 Using C++ Data From QML
+
+    If you need to register a C++ class to use from QML, you can call
+    qmlRegisterType() before declaring your QQmlApplicationEngine.
+    See \l [QtQml] {Defining QML Types from C++} for more information.
+
+    If you need to expose data to QML components, you need to make them
+    available to the context of the current QML engine. See QQmlContext for
+    more information.
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-guidelines.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-guidelines.qdoc
new file mode 100644
index 0000000000..f9c8246be8
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-guidelines.qdoc
@@ -0,0 +1,22 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-guidelines.html
+    \keyword Qt Quick Controls Guidelines
+    \title Qt Quick Controls Guidelines
+    \keyword Qt Quick Controls 2 Guidelines
+
+    Qt Quick Controls offers a selection of controls that can be used to
+    build complete interfaces in Qt Quick.
+
+    Below you will find practical guidelines on how and when to use
+    the controls.
+
+    \annotatedlist qtquickcontrols2-guidelines
+
+    \section1 Related Information
+    \list
+      \li \l{Qt Quick Controls QML Types}{All Qt Quick Controls QML Types}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-icons.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-icons.qdoc
new file mode 100644
index 0000000000..4948461c1a
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-icons.qdoc
@@ -0,0 +1,145 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-icons.html
+    \keyword Icons in Qt Quick Controls 2
+    \title Icons in Qt Quick Controls
+
+    Qt Quick Controls comes with support for icons since Qt 5.10. This means,
+    Buttons, item delegates, and menu items are now capable of presenting an
+    icon in addition to a text label.
+
+    \section1 Using Icons
+
+    \l {AbstractButton::icon}{AbstractButton} and \l {Action::icon}{Action} provide
+    the following properties through which icons can be set:
+    \list
+        \li \c icon.name
+        \li \c icon.source
+        \li \c icon.width
+        \li \c icon.height
+        \li \c icon.color
+        \li \c icon.cache
+    \endlist
+
+    Theme icons are referenced by a name, and regular icons by a source URL. Both
+    \c icon.name and \c icon.source can be set to ensure that an icon will always
+    be found. If the icon is found in the theme, it will always be used; even if
+    \c icon.source is also set. If the icon is not found in the theme, \c icon.source
+    will be used instead.
+
+    \code
+    Button {
+        icon.name: "edit-cut"
+        icon.source: "images/cut.png"
+    }
+    \endcode
+
+    Each \l {Styling Qt Quick Controls}{Qt Quick Controls 2 style} requests a
+    default icon size and color according to their guidelines, but it is possible
+    to override these by setting the \c icon.width, \c icon.height, and \c icon.color
+    properties.
+
+    The image that is loaded by an icon whose \c width and \c height are not set
+    depends on the type of icon in use. For theme icons, the closest available size
+    will be chosen. For regular icons, the behavior is the same as the \l {Image::}
+    {sourceSize} property of \l Image.
+
+    The icon color is specified by default so that it matches the text color in
+    different states. In order to use an icon with the original colors, set the
+    color to \c "transparent".
+
+    \code
+    Button {
+        icon.color: "transparent"
+        icon.source: "images/logo.png"
+    }
+    \endcode
+
+    For buttons, the \l {AbstractButton::}{display} property can be used to control
+    how the icon and text are displayed within the button.
+
+    The \c icon.cache property controls whether or not the icon image is cached.
+    For more information, see \l {Image::}{cache}.
+
+    \section1 Icon Themes
+
+    Compliant icon themes must follow the freedesktop icon theme specification,
+    which can be obtained here: \l {http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html}.
+
+    Traditionally, only Linux and UNIX support icon themes on the platform level,
+    but it is possible to bundle a compliant icon theme in an application to use
+    themed icons on any platform.
+
+    The default \l {QIcon::themeSearchPaths()}{icon theme search paths} depend on
+    the platform. On Linux and UNIX, the search path will use the \c XDG_DATA_DIRS
+    environment variable if available. All platforms have the resource directory
+    \c :/icons as a fallback. Custom icon theme search paths can be set with
+    \l QIcon::setThemeSearchPaths().
+
+    The following example bundles an icon theme called \e mytheme into the application's
+    resources using \l {The Qt Resource System}{Qt's resource system}.
+
+    \badcode
+    <RCC>
+        <qresource prefix="/">
+            <file>icons/mytheme/index.theme</file>
+            <file>icons/mytheme/32x32/myicon.png</file>
+            <file>icons/mytheme/32x32@2/myicon.png</file>
+        </qresource>
+    </RCC>
+    \endcode
+
+    The \c index.theme file describes the general attributes of the icon theme, and
+    lists the available theme icon directories:
+
+    \badcode
+    [Icon Theme]
+    Name=mytheme
+    Comment=My Icon Theme
+
+    Directories=32x32,32x32@2
+
+    [32x32]
+    Size=32
+    Type=Fixed
+
+    [32x32@2]
+    Size=32
+    Scale=2
+    Type=Fixed
+    \endcode
+
+    In order to use the bundled icon theme, an application should call \l QIcon::setThemeName()
+    before loading the main QML file:
+
+    \code
+    #include <QGuiApplication>
+    #include <QQmlApplicationEngine>
+    #include <QIcon>
+
+    int main(int argc, char *argv[])
+    {
+        QGuiApplication app(argc, argv);
+
+        QIcon::setThemeName("mytheme"); // <--
+
+        QQmlApplicationEngine engine;
+        engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+        return app.exec();
+    }
+    \endcode
+
+    Now it is possible to use named icons from the bundled icon theme without having
+    to specify any fallback source:
+
+    \code
+    Button {
+        icon.name: "myicon"
+    }
+    \endcode
+
+    The \l {Qt Quick Controls - Gallery}{Gallery example} and \l {Qt Quick Controls 2 - Wearable Demo}
+    {Wearable Demo} provide complete runnable applications with a bundled icon theme.
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-imagine.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-imagine.qdoc
new file mode 100644
index 0000000000..98bb726d00
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-imagine.qdoc
@@ -0,0 +1,2511 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-imagine.html
+    \title Imagine Style
+
+    The Imagine Style is based on configurable image assets. \l{detailed-desc-imagine}{More...}
+
+    \styleimport {QtQuick.Controls.Imagine 2.12} {Qt 5.10}
+
+    \section1 Attached Properties
+
+    \list
+        \li \l {imagine-path-attached-prop}{\b path} : string
+    \endlist
+
+    \section1 Detailed Description
+    \target detailed-desc-imagine
+
+    The Imagine style is based on image assets. The style comes with a default
+    set of images, but the images can be easily changed by providing a directory
+    with images using a predefined naming convention.
+
+    \image qtquickcontrols2-imagine.png
+    \caption The Imagine style with the default images
+
+    To run an application with the Imagine style, see
+    \l {Using Styles in Qt Quick Controls}.
+
+    \section2 File Names
+
+    The image files are named using the following convention:
+
+    \c <control>-<element>-<states>
+
+    The \c <control> and \c <element> sections are mandatory, but the
+    \c <states> section is optional. For example, if a single file named
+    \c "button-background.9.png" is provided for \l {Button}, it will be used
+    for every state that \c Button supports. It is up to the developer to
+    decide the set of states that they will provide images for. However, it
+    is recommended to provide images for the most common control states where
+    possible, such as \c disabled, \c pressed, etc. This will ensure that
+    interactive controls visually behave as the end user would expect them to.
+
+    \section2 Element Reference
+
+    The following table lists which elements are supported for each control,
+    along with the possible states for that element, and the file extension
+    that it expects. An element is an image that represents a certain visual
+    part of the control. For example, \c {Button}'s \c "background" element
+    represents its \l {Control::}{background}.
+
+    \table
+        \header
+            \li Control
+            \li Element
+            \li States
+            \li Extension
+        \row
+            \li \l ApplicationWindow
+            \li background
+            \li active
+            \li .9.png (or .png)
+        \row
+            \li \l BusyIndicator
+            \li animation
+            \li disabled, running, mirrored, hovered
+            \li .webp
+        \row
+            \li
+            \li background
+            \li same as above
+            \li .webp
+        \row
+            \li \l Button
+            \li background
+            \li disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered
+            \li .9.png
+        \row
+            \li \l CheckBox
+            \li background
+            \li disabled, pressed, checked, partially-checked, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li indicator
+            \li same as above
+            \li .png
+        \row
+            \li \l CheckDelegate
+            \li background
+            \li disabled, pressed, checked, partially-checked, focused, highlighted, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li indicator
+            \li same as above
+            \li .png
+        \row
+            \li \l ComboBox
+            \li background
+            \li disabled, pressed, editable, open, focused, mirrored, hovered, flat
+            \li .9.png (or .png)
+        \row
+            \li
+            \li indicator
+            \li same as above
+            \li .png
+        \row
+            \li
+            \li popup
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li \l DelayButton
+            \li background
+            \li disabled, pressed, checked, checkable, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li progress
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li
+            \li mask
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li \l Dial
+            \li background
+            \li disabled, pressed, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li handle
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li \l Dialog
+            \li background
+            \li modal, dim
+            \li .9.png (or .png)
+        \row
+            \li
+            \li title
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li
+            \li overlay
+            \li modal
+            \li .9.png (or .png)
+        \row
+            \li \l DialogButtonBox
+            \li background
+            \li disabled, mirrored
+            \li .9.png (or .png)
+        \row
+            \li \l Drawer
+            \li background
+            \li modal, dim, top, left, right, bottom
+            \li .9.png (or .png)
+        \row
+            \li
+            \li overlay
+            \li modal
+            \li .9.png (or .png)
+        \row
+            \li \l Frame
+            \li background
+            \li disabled, mirrored
+            \li .9.png (or .png)
+        \row
+            \li \l GroupBox
+            \li background
+            \li disabled, mirrored
+            \li .9.png (or .png)
+        \row
+            \li
+            \li title
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li \l ItemDelegate
+            \li background
+            \li disabled, pressed, focused, highlighted, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li \l Label
+            \li background
+            \li disabled, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li \l Menu
+            \li background
+            \li modal, dim
+            \li .9.png (or .png)
+        \row
+            \li
+            \li overlay
+            \li modal
+            \li .9.png (or .png)
+        \row
+            \li \l MenuItem
+            \li arrow
+            \li disabled, pressed, checked, focused, highlighted, mirrored, hovered
+            \li .png
+        \row
+            \li
+            \li background
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li
+            \li indicator
+            \li same as above
+            \li .png
+        \row
+            \li \l MenuSeparator
+            \li background
+            \li disabled, mirrored
+            \li .9.png (or .png)
+        \row
+            \li
+            \li separator
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li \l Page
+            \li background
+            \li disabled, mirrored
+            \li .9.png (or .png)
+        \row
+            \li \l PageIndicator
+            \li background
+            \li disabled, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li delegate
+            \li disabled, pressed, current, mirrored, hovered
+            \li .png
+        \row
+            \li \l Pane
+            \li background
+            \li disabled, mirrored
+            \li .9.png (or .png)
+        \row
+            \li \l Popup
+            \li background
+            \li modal, dim
+            \li .9.png (or .png)
+        \row
+            \li
+            \li overlay
+            \li modal
+            \li .9.png (or .png)
+        \row
+            \li \l ProgressBar
+            \li animation
+            \li disabled, mirrored, hovered
+            \li .png
+        \row
+            \li
+            \li background
+            \li disabled, indeterminate, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li mask
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li
+            \li progress
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li \l RadioButton
+            \li background
+            \li disabled, pressed, checked, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li indicator
+            \li same as above
+            \li .png
+        \row
+            \li \l RadioDelegate
+            \li background
+            \li disabled, pressed, checked, focused, highlighted, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li indicator
+            \li same as above
+            \li .png
+        \row
+            \li \l RangeSlider
+            \li background
+            \li vertical, horizontal, disabled, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li \l RangeSlider
+            \li progress
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li
+            \li handle
+            \li first, second, vertical, horizontal, disabled, pressed, focused, mirrored, hovered
+            \li .png
+        \row
+            \li \l RoundButton
+            \li background
+            \li disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li \l ScrollBar
+            \li background
+            \li vertical, horizontal, disabled, interactive, pressed, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li handle
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li \l ScrollIndicator
+            \li background
+            \li vertical, horizontal, disabled, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li handle
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li \l ScrollView
+            \li background
+            \li disabled, mirrored
+            \li .9.png (or .png)
+        \row
+            \li \l Slider
+            \li background
+            \li vertical, horizontal, disabled, pressed, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li handle
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li
+            \li progress
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li \l SpinBox
+            \li background
+            \li disabled, editable, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li editor
+            \li disabled, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li indicator
+            \li up, down, disabled, editable, pressed, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li \l StackView
+            \li background
+            \li disabled, mirrored
+            \li .9.png (or .png)
+        \row
+            \li \l SwipeDelegate
+            \li background
+            \li disabled, pressed, focused, highlighted, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li \l SwipeView
+            \li background
+            \li vertical, horizontal, disabled, interactive, focused, mirrored
+            \li .9.png (or .png)
+        \row
+            \li \l Switch
+            \li background
+            \li disabled, pressed, checked, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li handle
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li
+            \li indicator
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li \l SwitchDelegate
+            \li background
+            \li disabled, pressed, checked, focused, highlighted, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li
+            \li handle
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li
+            \li indicator
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li \l TabBar
+            \li background
+            \li disabled, header, footer, mirrored
+            \li .9.png (or .png)
+        \row
+            \li \l TabButton
+            \li background
+            \li disabled, pressed, checked, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li \l TextArea
+            \li background
+            \li disabled, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li \l TextField
+            \li background
+            \li disabled, focused, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li \l ToolBar
+            \li background
+            \li disabled, header, footer, mirrored
+            \li .9.png (or .png)
+        \row
+            \li \l ToolButton
+            \li background
+            \li disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered
+            \li .9.png (or .png)
+        \row
+            \li \l ToolSeparator
+            \li background
+            \li vertical, horizontal, disabled, mirrored
+            \li .9.png (or .png)
+        \row
+            \li
+            \li separator
+            \li same as above
+            \li .9.png (or .png)
+        \row
+            \li \l ToolTip
+            \li background
+            \li
+            \li .9.png (or .png)
+        \row
+            \li \l Tumbler
+            \li background
+            \li disabled, focused, mirrored, hovered
+            \li .9.png (or .png)
+    \endtable
+
+    \section2 Asset Examples
+
+    The following table lists examples of assets (taken from the
+    \l {https://code.qt.io/cgit/qt/qtdeclarative.git/tree/src/quickcontrols/imagine/images}
+    {default Imagine style assets}) for all controls. The list is not
+    exhaustive, as not all elements need assets, but it can be used as a guide
+    when creating your own assets.
+
+    The template that these assets were \l {Exporting 9-Patch Images}
+    {exported from} is available as a
+    \l {https://code.qt.io/cgit/qt/qtdeclarative.git/plain/src/quickcontrols/imagine/design/imagine.sketch}
+    {Sketch project}.
+
+    \table
+        \header
+            \li Control
+            \li Element
+            \li States
+            \li Asset
+            \li Notes
+        \row
+            \li \l ApplicationWindow
+            \li background
+            \li
+            \li \image imagine/images/applicationwindow-background.png
+            \li \l {sup1}{See footnote} \sup 1
+        \row
+            \li
+            \li overlay
+            \li
+            \li \image imagine/images/applicationwindow-overlay.png
+            \li \l {sup1}{See footnote} \sup 1
+        \row
+            \li
+            \li overlay
+            \li modal
+            \li \image imagine/images/applicationwindow-overlay-modal.png
+            \li \l {sup1}{See footnote} \sup 1
+        \row
+            \li \l Button
+            \li background
+            \li
+            \li \image imagine/images/button-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/button-background-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/button-background-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li pressed
+            \li \image imagine/images/button-background-pressed.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked
+            \li \image imagine/images/button-background-checked.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked, disabled
+            \li \image imagine/images/button-background-checked-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked, focused
+            \li \image imagine/images/button-background-checked-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked, hovered
+            \li \image imagine/images/button-background-checked-hovered.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li highlighted
+            \li \image imagine/images/button-background-highlighted.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li highlighted, disabled
+            \li \image imagine/images/button-background-highlighted-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li highlighted, focused
+            \li \image imagine/images/button-background-highlighted-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li highlighted, hovered
+            \li \image imagine/images/button-background-highlighted-hovered.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li highlighted, pressed
+            \li \image imagine/images/button-background-highlighted-pressed.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li highlighted, checked
+            \li \image imagine/images/button-background-highlighted-checked.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li hovered
+            \li \image imagine/images/button-background-hovered.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li flat
+            \li \image imagine/images/button-background-flat.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li flat, disabled
+            \li \image imagine/images/button-background-flat-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li flat, hovered
+            \li \image imagine/images/button-background-flat-hovered.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li flat, pressed
+            \li \image imagine/images/button-background-flat-pressed.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li flat, checked
+            \li \image imagine/images/button-background-flat-checked.9.png
+            \li
+        \row
+            \li \l CheckBox
+            \li indicator
+            \li
+            \li \image imagine/images/checkbox-indicator.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li disabled
+            \li \image imagine/images/checkbox-indicator-disabled.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li pressed
+            \li \image imagine/images/checkbox-indicator-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked
+            \li \image imagine/images/checkbox-indicator-checked.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, pressed
+            \li \image imagine/images/checkbox-indicator-checked-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, hovered
+            \li \image imagine/images/checkbox-indicator-checked-hovered.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, focused
+            \li \image imagine/images/checkbox-indicator-checked-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li partially, checked
+            \li \image imagine/images/checkbox-indicator-partially-checked.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li partially, checked, pressed
+            \li \image imagine/images/checkbox-indicator-partially-checked-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li partially, checked, focused
+            \li \image imagine/images/checkbox-indicator-partially-checked-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li partially, checked, hovered
+            \li \image imagine/images/checkbox-indicator-partially-checked-hovered.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li focused
+            \li \image imagine/images/checkbox-indicator-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li hovered
+            \li \image imagine/images/checkbox-indicator-hovered.png
+            \li
+        \row
+            \li \l CheckDelegate
+            \li background
+            \li
+            \li \image imagine/images/checkdelegate-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/checkdelegate-background-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li pressed
+            \li \image imagine/images/checkdelegate-background-pressed.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/checkdelegate-background-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li hovered
+            \li \image imagine/images/checkdelegate-background-hovered.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li
+            \li \image imagine/images/checkdelegate-indicator.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li disabled
+            \li \image imagine/images/checkdelegate-indicator-disabled.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li pressed
+            \li \image imagine/images/checkdelegate-indicator-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked
+            \li \image imagine/images/checkdelegate-indicator-checked.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, pressed
+            \li \image imagine/images/checkdelegate-indicator-checked-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, focused
+            \li \image imagine/images/checkdelegate-indicator-checked-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, hovered
+            \li \image imagine/images/checkdelegate-indicator-checked-hovered.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li focused
+            \li \image imagine/images/checkdelegate-indicator-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li hovered
+            \li \image imagine/images/checkdelegate-indicator-hovered.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li partially, checked
+            \li \image imagine/images/checkdelegate-indicator-partially-checked.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li partially, checked, pressed
+            \li \image imagine/images/checkdelegate-indicator-partially-checked-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li partially, checked, focused
+            \li \image imagine/images/checkdelegate-indicator-partially-checked-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li partially, checked, hovered
+            \li \image imagine/images/checkdelegate-indicator-partially-checked-hovered.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li hovered
+            \li \image imagine/images/checkdelegate-indicator-hovered.png
+            \li
+        \row
+            \li \l ComboBox
+            \li background
+            \li
+            \li \image imagine/images/combobox-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/combobox-background-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/combobox-background-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li hovered
+            \li \image imagine/images/combobox-background-hovered.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li pressed
+            \li \image imagine/images/combobox-background-pressed.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li open
+            \li \image imagine/images/combobox-background-open.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li editable
+            \li \image imagine/images/combobox-background-editable.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li editable, focused
+            \li \image imagine/images/combobox-background-editable-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li editable, disabled
+            \li \image imagine/images/combobox-background-editable-disabled.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li
+            \li \image imagine/images/combobox-indicator.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li disabled
+            \li \image imagine/images/combobox-indicator-disabled.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li editable
+            \li \image imagine/images/combobox-indicator-editable.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li editable, disabled
+            \li \image imagine/images/combobox-indicator-editable-disabled.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li editable, mirrored
+            \li \image imagine/images/combobox-indicator-editable-mirrored.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li editable, mirrored, disabled
+            \li \image imagine/images/combobox-indicator-editable-mirrored-disabled.png
+            \li
+        \row
+            \li
+            \li popup
+            \li
+            \li \image imagine/images/combobox-popup.9.png
+            \li
+        \row
+            \li \l DelayButton
+            \li background
+            \li
+            \li \image imagine/images/delaybutton-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/delaybutton-background-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled, checked
+            \li \image imagine/images/delaybutton-background-disabled-checked.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/delaybutton-background-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li pressed
+            \li \image imagine/images/delaybutton-background-pressed.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked
+            \li \image imagine/images/delaybutton-background-checked.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked, focused
+            \li \image imagine/images/delaybutton-background-checked-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked, hovered
+            \li \image imagine/images/delaybutton-background-checked-hovered.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li hovered
+            \li \image imagine/images/delaybutton-background-hovered.9.png
+            \li
+        \row
+            \li
+            \li progress
+            \li
+            \li \image imagine/images/delaybutton-progress.9.png
+            \li
+        \row
+            \li
+            \li progress
+            \li disabled
+            \li \image imagine/images/delaybutton-progress-disabled.9.png
+            \li
+        \row
+            \li
+            \li mask
+            \li
+            \li \image imagine/images/delaybutton-mask.9.png
+            \li
+        \row
+            \li \l Dial
+            \li background
+            \li
+            \li \image imagine/images/dial-background.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/dial-background-disabled.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/dial-background-focused.png
+            \li
+        \row
+            \li
+            \li handle
+            \li
+            \li \image imagine/images/dial-handle.png
+            \li
+        \row
+            \li
+            \li handle
+            \li disabled
+            \li \image imagine/images/dial-handle-disabled.png
+            \li
+        \row
+            \li
+            \li handle
+            \li focused
+            \li \image imagine/images/dial-handle-focused.png
+            \li
+        \row
+            \li
+            \li handle
+            \li focused, pressed
+            \li \image imagine/images/dial-handle-focused-pressed.png
+            \li
+        \row
+            \li
+            \li handle
+            \li focused, hovered
+            \li \image imagine/images/dial-handle-focused-hovered.png
+            \li
+        \row
+            \li
+            \li handle
+            \li pressed
+            \li \image imagine/images/dial-handle-pressed.png
+            \li
+        \row
+            \li
+            \li handle
+            \li hovered
+            \li \image imagine/images/dial-handle-hovered.png
+            \li
+        \row
+            \li \l Dialog
+            \li background
+            \li
+            \li \image imagine/images/dialog-background.9.png
+            \li
+        \row
+            \li
+            \li overlay
+            \li
+            \li \image imagine/images/dialog-overlay.png
+            \li \l {sup1}{See footnote} \sup 1
+        \row
+            \li
+            \li overlay
+            \li modal
+            \li \image imagine/images/dialog-overlay-modal.png
+            \li \l {sup1}{See footnote} \sup 1
+        \row
+            \li \l DialogButtonBox
+            \li background
+            \li
+            \li \image imagine/images/dialogbuttonbox-background.9.png
+            \li
+        \row
+            \li \l Drawer
+            \li background
+            \li left
+            \li \image imagine/images/drawer-background-left.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li right
+            \li \image imagine/images/drawer-background-right.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li top
+            \li \image imagine/images/drawer-background-top.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li bottom
+            \li \image imagine/images/drawer-background-bottom.9.png
+            \li
+        \row
+            \li
+            \li overlay
+            \li
+            \li \image imagine/images/drawer-overlay.png
+            \li \l {sup1}{See footnote} \sup 1
+        \row
+            \li
+            \li overlay
+            \li modal
+            \li \image imagine/images/drawer-overlay-modal.png
+            \li \l {sup1}{See footnote} \sup 1
+        \row
+            \li \l Frame
+            \li background
+            \li
+            \li \image imagine/images/frame-background.9.png
+            \li
+        \row
+            \li \l GroupBox
+            \li background
+            \li
+            \li \image imagine/images/groupbox-background.9.png
+            \li
+        \row
+            \li
+            \li title
+            \li
+            \li \image imagine/images/groupbox-title.9.png
+            \li
+        \row
+            \li \l ItemDelegate
+            \li background
+            \li
+            \li \image imagine/images/itemdelegate-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/itemdelegate-background-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li pressed
+            \li \image imagine/images/itemdelegate-background-pressed.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/itemdelegate-background-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li hovered
+            \li \image imagine/images/itemdelegate-background-hovered.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li highlighted
+            \li \image imagine/images/itemdelegate-background-highlighted.9.png
+            \li
+        \row
+            \li \l Menu
+            \li background
+            \li
+            \li \image imagine/images/menu-background.9.png
+            \li
+        \row
+            \li \l MenuItem
+            \li background
+            \li
+            \li \image imagine/images/menuitem-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li highlighted
+            \li \image imagine/images/menuitem-background-highlighted.9.png
+            \li
+        \row
+            \li
+            \li arrow
+            \li
+            \li \image imagine/images/menuitem-arrow.png
+            \li
+        \row
+            \li
+            \li arrow
+            \li mirrored
+            \li \image imagine/images/menuitem-arrow-mirrored.png
+            \li
+        \row
+            \li
+            \li arrow
+            \li disabled
+            \li \image imagine/images/menuitem-arrow-disabled.png
+            \li
+        \row
+            \li
+            \li arrow
+            \li mirrored, disabled
+            \li \image imagine/images/menuitem-arrow-mirrored-disabled.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li
+            \li \image imagine/images/menuitem-indicator.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li disabled
+            \li \image imagine/images/menuitem-indicator-disabled.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li pressed
+            \li \image imagine/images/menuitem-indicator-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked
+            \li \image imagine/images/menuitem-indicator-checked.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, pressed
+            \li \image imagine/images/menuitem-indicator-checked-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, focused
+            \li \image imagine/images/menuitem-indicator-checked-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, hovered
+            \li \image imagine/images/menuitem-indicator-checked-hovered.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li focused
+            \li \image imagine/images/menuitem-indicator-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li hovered
+            \li \image imagine/images/menuitem-indicator-hovered.png
+            \li
+        \row
+            \li \l MenuSeparator
+            \li separator
+            \li
+            \li \image imagine/images/menuseparator-separator.9.png
+            \li
+        \row
+            \li \l Page
+            \li background
+            \li
+            \li \image imagine/images/page-background.png
+            \li \l {sup1}{See footnote} \sup 1
+        \row
+            \li \l PageIndicator
+            \li delegate
+            \li
+            \li \image imagine/images/pageindicator-delegate.png
+            \li
+        \row
+            \li
+            \li delegate
+            \li disabled
+            \li \image imagine/images/pageindicator-delegate-disabled.png
+            \li
+        \row
+            \li
+            \li delegate
+            \li disabled, current
+            \li \image imagine/images/pageindicator-delegate-disabled-current.png
+            \li
+        \row
+            \li
+            \li delegate
+            \li pressed
+            \li \image imagine/images/pageindicator-delegate-pressed.png
+            \li
+        \row
+            \li
+            \li delegate
+            \li current
+            \li \image imagine/images/pageindicator-delegate-current.png
+            \li
+        \row
+            \li \l Pane
+            \li background
+            \li
+            \li \image imagine/images/pane-background.9.png
+            \li
+        \row
+            \li \l Popup
+            \li background
+            \li
+            \li \image imagine/images/popup-background.9.png
+            \li \l {sup1}{See footnote} \sup 1
+        \row
+            \li
+            \li overlay
+            \li
+            \li \image imagine/images/popup-overlay.png
+            \li \l {sup1}{See footnote} \sup 1
+        \row
+            \li
+            \li overlay
+            \li modal
+            \li \image imagine/images/popup-overlay-modal.png
+            \li
+        \row
+            \li \l ProgressBar
+            \li background
+            \li
+            \li \image imagine/images/progressbar-background.9.png
+            \li
+        \row
+            \li
+            \li progress
+            \li
+            \li \image imagine/images/progressbar-progress.png
+            \li
+        \row
+            \li
+            \li mask
+            \li
+            \li \image imagine/images/progressbar-mask.9.png
+            \li
+        \row
+            \li \l RadioButton
+            \li indicator
+            \li
+            \li \image imagine/images/radiobutton-indicator.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li disabled
+            \li \image imagine/images/radiobutton-indicator-disabled.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li pressed
+            \li \image imagine/images/radiobutton-indicator-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked
+            \li \image imagine/images/radiobutton-indicator-checked.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, focused
+            \li \image imagine/images/radiobutton-indicator-checked-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, hovered
+            \li \image imagine/images/radiobutton-indicator-checked-hovered.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, pressed
+            \li \image imagine/images/radiobutton-indicator-checked-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li focused
+            \li \image imagine/images/radiobutton-indicator-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li hovered
+            \li \image imagine/images/radiobutton-indicator-hovered.png
+            \li
+        \row
+            \li \l RadioDelegate
+            \li background
+            \li
+            \li \image imagine/images/radiodelegate-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/radiodelegate-background-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li pressed
+            \li \image imagine/images/radiodelegate-background-pressed.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/radiodelegate-background-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li hovered
+            \li \image imagine/images/radiodelegate-background-hovered.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li
+            \li \image imagine/images/radiodelegate-indicator.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li disabled
+            \li \image imagine/images/radiodelegate-indicator-disabled.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li pressed
+            \li \image imagine/images/radiodelegate-indicator-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked
+            \li \image imagine/images/radiodelegate-indicator-checked.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, focused
+            \li \image imagine/images/radiodelegate-indicator-checked-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, hovered
+            \li \image imagine/images/radiodelegate-indicator-checked-hovered.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, pressed
+            \li \image imagine/images/radiodelegate-indicator-checked-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li focused
+            \li \image imagine/images/radiodelegate-indicator-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li hovered
+            \li \image imagine/images/radiodelegate-indicator-hovered.png
+            \li
+        \row
+            \li \l RangeSlider
+            \li background
+            \li vertical
+            \li \image imagine/images/rangeslider-background-vertical.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li horizontal
+            \li \image imagine/images/rangeslider-background-horizontal.9.png
+            \li
+        \row
+            \li
+            \li progress
+            \li vertical
+            \li \image imagine/images/rangeslider-progress-vertical.9.png
+            \li
+        \row
+            \li
+            \li progress
+            \li vertical, disabled
+            \li \image imagine/images/rangeslider-progress-vertical-disabled.9.png
+            \li
+        \row
+            \li
+            \li progress
+            \li horizontal
+            \li \image imagine/images/rangeslider-progress-horizontal.9.png
+            \li
+        \row
+            \li
+            \li progress
+            \li horizontal, disabled
+            \li \image imagine/images/rangeslider-progress-horizontal-disabled.9.png
+            \li
+        \row
+            \li
+            \li handle
+            \li
+            \li \image imagine/images/rangeslider-handle.png
+            \li
+        \row
+            \li
+            \li handle
+            \li disabled
+            \li \image imagine/images/rangeslider-handle-disabled.png
+            \li
+        \row
+            \li
+            \li handle
+            \li focused
+            \li \image imagine/images/rangeslider-handle-focused.png
+            \li
+        \row
+            \li
+            \li handle
+            \li focused, hovered
+            \li \image imagine/images/rangeslider-handle-focused-hovered.png
+            \li
+        \row
+            \li
+            \li handle
+            \li focused, pressed
+            \li \image imagine/images/rangeslider-handle-focused-pressed.png
+            \li
+        \row
+            \li
+            \li handle
+            \li hovered
+            \li \image imagine/images/rangeslider-handle-hovered.png
+            \li
+        \row
+            \li
+            \li handle
+            \li pressed
+            \li \image imagine/images/rangeslider-handle-pressed.png
+            \li
+        \row
+            \li \l RoundButton
+            \li background
+            \li
+            \li \image imagine/images/roundbutton-background.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/roundbutton-background-disabled.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled, checked
+            \li \image imagine/images/roundbutton-background-disabled-checked.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/roundbutton-background-focused.png
+            \li
+        \row
+            \li
+            \li background
+            \li pressed
+            \li \image imagine/images/roundbutton-background-pressed.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked
+            \li \image imagine/images/roundbutton-background-checked.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked, focused
+            \li \image imagine/images/roundbutton-background-checked-focused.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked, hovered
+            \li \image imagine/images/roundbutton-background-checked-hovered.png
+            \li
+        \row
+            \li
+            \li background
+            \li highlighted
+            \li \image imagine/images/roundbutton-background-highlighted.png
+            \li
+        \row
+            \li
+            \li background
+            \li highlighted, pressed
+            \li \image imagine/images/roundbutton-background-highlighted-pressed.png
+            \li
+        \row
+            \li
+            \li background
+            \li highlighted, focused
+            \li \image imagine/images/roundbutton-background-highlighted-focused.png
+            \li
+        \row
+            \li
+            \li background
+            \li highlighted, hovered
+            \li \image imagine/images/roundbutton-background-highlighted-hovered.png
+            \li
+        \row
+            \li
+            \li background
+            \li hovered
+            \li \image imagine/images/roundbutton-background-hovered.png
+            \li
+        \row
+            \li \l ScrollBar
+            \li handle
+            \li
+            \li \image imagine/images/scrollbar-handle.png
+            \li
+        \row
+            \li
+            \li handle
+            \li disabled
+            \li \image imagine/images/scrollbar-handle-disabled.png
+            \li
+        \row
+            \li
+            \li handle
+            \li interactive
+            \li \image imagine/images/scrollbar-handle-interactive.png
+            \li
+        \row
+            \li
+            \li handle
+            \li interactive, disabled
+            \li \image imagine/images/scrollbar-handle-interactive-disabled.png
+            \li
+        \row
+            \li
+            \li handle
+            \li interactive, pressed
+            \li \image imagine/images/scrollbar-handle-interactive-pressed.png
+            \li
+        \row
+            \li
+            \li handle
+            \li interactive, hovered
+            \li \image imagine/images/scrollbar-handle-interactive-hovered.png
+            \li
+        \row
+            \li \l ScrollIndicator
+            \li handle
+            \li
+            \li \image imagine/images/scrollindicator-handle.png
+            \li
+        \row
+            \li \l Slider
+            \li background
+            \li vertical
+            \li \image imagine/images/slider-background-vertical.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li horizontal
+            \li \image imagine/images/slider-background-horizontal.9.png
+            \li
+        \row
+            \li
+            \li progress
+            \li vertical
+            \li \image imagine/images/slider-progress-vertical.9.png
+            \li
+        \row
+            \li
+            \li progress
+            \li vertical, disabled
+            \li \image imagine/images/slider-progress-vertical-disabled.9.png
+            \li
+        \row
+            \li
+            \li progress
+            \li horizontal
+            \li \image imagine/images/slider-progress-horizontal.9.png
+            \li
+        \row
+            \li
+            \li progress
+            \li horizontal, disabled
+            \li \image imagine/images/slider-progress-horizontal-disabled.9.png
+            \li
+        \row
+            \li
+            \li handle
+            \li
+            \li \image imagine/images/slider-handle.png
+            \li
+        \row
+            \li
+            \li handle
+            \li disabled
+            \li \image imagine/images/slider-handle-disabled.png
+            \li
+        \row
+            \li
+            \li handle
+            \li focused
+            \li \image imagine/images/slider-handle-focused.png
+            \li
+        \row
+            \li
+            \li handle
+            \li focused, hovered
+            \li \image imagine/images/slider-handle-focused-hovered.png
+            \li
+        \row
+            \li
+            \li handle
+            \li focused, pressed
+            \li \image imagine/images/slider-handle-focused-pressed.png
+            \li
+        \row
+            \li
+            \li handle
+            \li hovered
+            \li \image imagine/images/slider-handle-hovered.png
+            \li
+        \row
+            \li
+            \li handle
+            \li pressed
+            \li \image imagine/images/slider-handle-pressed.png
+            \li
+        \row
+            \li \l SpinBox
+            \li background
+            \li
+            \li \image imagine/images/spinbox-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/spinbox-background-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/spinbox-background-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li editable
+            \li \image imagine/images/spinbox-background-editable.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li up
+            \li \image imagine/images/spinbox-indicator-up.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li up, disabled
+            \li \image imagine/images/spinbox-indicator-up-disabled.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li up, pressed
+            \li \image imagine/images/spinbox-indicator-up-pressed.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li up, focused
+            \li \image imagine/images/spinbox-indicator-up-focused.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li up, mirrored
+            \li \image imagine/images/spinbox-indicator-up-mirrored.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li up, hovered
+            \li \image imagine/images/spinbox-indicator-up-hovered.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li up, editable
+            \li \image imagine/images/spinbox-indicator-up-editable.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li up, editable, pressed
+            \li \image imagine/images/spinbox-indicator-up-editable-pressed.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li up, editable, focused
+            \li \image imagine/images/spinbox-indicator-up-editable-focused.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li up, editable, mirrored
+            \li \image imagine/images/spinbox-indicator-up-editable-mirrored.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li up, editable, hovered
+            \li \image imagine/images/spinbox-indicator-up-editable-hovered.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li down
+            \li \image imagine/images/spinbox-indicator-down.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li down, disabled
+            \li \image imagine/images/spinbox-indicator-down-disabled.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li down, pressed
+            \li \image imagine/images/spinbox-indicator-down-pressed.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li down, focused
+            \li \image imagine/images/spinbox-indicator-down-focused.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li down, mirrored
+            \li \image imagine/images/spinbox-indicator-down-mirrored.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li down, hovered
+            \li \image imagine/images/spinbox-indicator-down-hovered.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li down, editable
+            \li \image imagine/images/spinbox-indicator-down-editable.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li down, editable, pressed
+            \li \image imagine/images/spinbox-indicator-down-editable-pressed.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li down, editable, focused
+            \li \image imagine/images/spinbox-indicator-down-editable-focused.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li down, editable, mirrored
+            \li \image imagine/images/spinbox-indicator-down-editable-mirrored.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li down, editable, hovered
+            \li \image imagine/images/spinbox-indicator-down-editable-hovered.9.png
+            \li
+        \row
+            \li \l SwipeDelegate
+            \li background
+            \li
+            \li \image imagine/images/swipedelegate-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/swipedelegate-background-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li pressed
+            \li \image imagine/images/swipedelegate-background-pressed.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/swipedelegate-background-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li hovered
+            \li \image imagine/images/swipedelegate-background-hovered.9.png
+            \li
+        \row
+            \li \l Switch
+            \li indicator
+            \li
+            \li \image imagine/images/switch-indicator.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li disabled
+            \li \image imagine/images/switch-indicator-disabled.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li pressed
+            \li \image imagine/images/switch-indicator-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked
+            \li \image imagine/images/switch-indicator-checked.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, focused
+            \li \image imagine/images/switch-indicator-checked-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, hovered
+            \li \image imagine/images/switch-indicator-checked-hovered.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, pressed
+            \li \image imagine/images/switch-indicator-checked-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li focused
+            \li \image imagine/images/switch-indicator-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li hovered
+            \li \image imagine/images/switch-indicator-hovered.png
+            \li
+        \row
+            \li
+            \li handle
+            \li
+            \li \image imagine/images/switch-handle.png
+            \li
+        \row
+            \li
+            \li handle
+            \li disabled
+            \li \image imagine/images/switch-handle-disabled.png
+            \li
+        \row
+            \li
+            \li handle
+            \li pressed
+            \li \image imagine/images/switch-handle-pressed.png
+            \li
+        \row
+            \li \l SwitchDelegate
+            \li background
+            \li
+            \li \image imagine/images/switchdelegate-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/switchdelegate-background-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li pressed
+            \li \image imagine/images/switchdelegate-background-pressed.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/switchdelegate-background-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li hovered
+            \li \image imagine/images/switchdelegate-background-hovered.9.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li
+            \li \image imagine/images/switchdelegate-indicator.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li disabled
+            \li \image imagine/images/switchdelegate-indicator-disabled.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li pressed
+            \li \image imagine/images/switchdelegate-indicator-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked
+            \li \image imagine/images/switchdelegate-indicator-checked.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, focused
+            \li \image imagine/images/switchdelegate-indicator-checked-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, hovered
+            \li \image imagine/images/switchdelegate-indicator-checked-hovered.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li checked, pressed
+            \li \image imagine/images/switchdelegate-indicator-checked-pressed.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li focused
+            \li \image imagine/images/switchdelegate-indicator-focused.png
+            \li
+        \row
+            \li
+            \li indicator
+            \li hovered
+            \li \image imagine/images/switchdelegate-indicator-hovered.png
+            \li
+        \row
+            \li
+            \li handle
+            \li
+            \li \image imagine/images/switchdelegate-handle.png
+            \li
+        \row
+            \li
+            \li handle
+            \li disabled
+            \li \image imagine/images/switchdelegate-handle-disabled.png
+            \li
+        \row
+            \li \l TabBar
+            \li background
+            \li
+            \li \image imagine/images/tabbar-background.png
+            \li
+        \row
+            \li \l TabButton
+            \li background
+            \li
+            \li \image imagine/images/tabbutton-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/tabbutton-background-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li pressed
+            \li \image imagine/images/tabbutton-background-pressed.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked
+            \li \image imagine/images/tabbutton-background-checked.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li hovered
+            \li \image imagine/images/tabbutton-background-hovered.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled, checked
+            \li \image imagine/images/tabbutton-background-disabled-checked.9.png
+            \li
+        \row
+            \li \l TextArea
+            \li background
+            \li
+            \li \image imagine/images/textarea-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/textarea-background-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/textarea-background-focused.9.png
+            \li
+        \row
+            \li \l TextField
+            \li background
+            \li
+            \li \image imagine/images/textfield-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled
+            \li \image imagine/images/textfield-background-disabled.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/textfield-background-focused.9.png
+            \li
+        \row
+            \li \l ToolBar
+            \li background
+            \li
+            \li \image imagine/images/toolbar-background.png
+            \li
+        \row
+            \li \l ToolButton
+            \li background
+            \li
+            \li \image imagine/images/toolbutton-background.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li disabled, checked
+            \li \image imagine/images/toolbutton-background-disabled-checked.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li focused
+            \li \image imagine/images/toolbutton-background-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li pressed
+            \li \image imagine/images/toolbutton-background-pressed.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked
+            \li \image imagine/images/toolbutton-background-checked.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked, focused
+            \li \image imagine/images/toolbutton-background-checked-focused.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li checked, hovered
+            \li \image imagine/images/toolbutton-background-checked-hovered.9.png
+            \li
+        \row
+            \li
+            \li background
+            \li hovered
+            \li \image imagine/images/toolbutton-background-hovered.9.png
+            \li
+        \row
+            \li \l ToolSeparator
+            \li separator
+            \li horizontal
+            \li \image imagine/images/toolseparator-separator-horizontal.9.png
+            \li
+        \row
+            \li
+            \li separator
+            \li vertical
+            \li \image imagine/images/toolseparator-separator-vertical.9.png
+            \li
+        \row
+            \li \l ToolTip
+            \li background
+            \li
+            \li \image imagine/images/tooltip-background.9.png
+            \li
+    \endtable
+
+    \target sup1
+    \sup 1 A 1x1 image containing one color, stretched to fill the control.
+
+    \section2 9-Patch Images
+
+    The Imagine style uses \l
+    {https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch}{9-patch
+    images} in order to give designers control over how a particular element
+    responds to being resized. Here is an example of a 9-patch image that
+    represents a \l {Button}'s \l {Control::}{background}, alongside a
+    magnified version (to make it easier to see the 9-patch lines):
+
+    \image qtquickcontrols2-imagine-9-patch-4x.png
+
+    The content of the image is 44 pixels wide by 32 pixels high. Every 9-patch
+    image needs a one pixel thick line (collectively referred to as
+    "9-patch lines") around every side, so the actual size of the image becomes
+    46 pixels wide by 34 pixels high. Note that the 9-patch lines must be one
+    pixel thick regardless of the target DPI of the image. For example,
+    the 9-patch lines for button-background.9.png and button-background@2x.9.png
+    must both be one pixel thick.
+
+    The 9-patch lines must be black, and the remaining areas must be transparent
+    or white:
+
+    \image qtquickcontrols2-imagine-9-patch-size.png
+
+    \section3 Stretchable Areas
+
+    The 9-patch lines on the top and left edges determine which parts of the
+    image are stretched when it is resized.
+
+    Below are examples of the 9-patch image being resized to one and a half
+    times its original size in various dimensions:
+
+    \image qtquickcontrols2-imagine-9-patch-resized-stretchable.png
+
+    Notice how the the rounded corners keep their original size, as they are
+    outside the range of the lines.
+
+    \section3 Padding Areas
+
+    The 9-patch lines on the right and bottom edges determine how much space
+    is available for the control's \l {Control::}{contentItem}, which means it
+    can also be thought of as controlling the \l {Control::}{padding}. For a
+    diagram that illustrates padding, see \l {Control Layout}.
+
+    Below are more examples of the 9-patch image being resized, but this time
+    demonstrating how the padding 9-patch lines work.
+
+    \image qtquickcontrols2-imagine-9-patch-resized-padding.png
+
+    The \c contentItem can take up as much space as it needs within the shaded
+    areas. If the padding lines are left out, the \c contentItem will take as
+    much space as it needs without exceeding the stretchable areas.
+
+    \section3 Inset Areas
+
+    In some cases it is necessary for a control to have a drop shadow, for
+    example. However, if we were to add a drop shadow to the button above, it
+    would affect its size, which presents problems for both layouting and
+    mouse/touch input boundaries.
+
+    Inset areas accounts for this by telling the control that a certain area of
+    the 9-patch image should go outside of the control:
+
+    \image qtquickcontrols2-imagine-9-patch-inset.png
+
+    In the image below, the dashed line represents the button's clickable area,
+    as well as the space that it will take up in a layout. The shadow is marked
+    by the striped area behind it:
+
+    \image qtquickcontrols2-imagine-9-patch-inset-boundaries.png
+
+    \section3 Exporting 9-Patch Images
+
+    Various vector and bitmap editors can be used to create 9-patch images
+    suitable for use with the Imagine style. The following sections briefly
+    explain the export process for each editor, and the last section explains
+    how to ensure the exported images are 9-patch-conformant.
+
+    \section4 Affinity Designer
+
+    See Affinity's \l {https://affinity.help/publisher/en-US.lproj/pages/Publishing/exportSettings.html}
+    {Export Settings} documentation.
+
+    \section4 Adobe Illustrator
+
+    See Adobe's
+    \l {https://helpx.adobe.com/in/illustrator/using/collect-assets-export-for-screens.html#panel}
+    {Asset Export panel} documentation.
+
+    \section4 Adobe Photoshop
+
+    See Adobe's
+    \l {https://helpx.adobe.com/photoshop/using/generate-assets-layers.html}
+    {Generate image assets from layers} documentation.
+
+    \section4 Inkscape
+
+    The \l {https://github.com/mitchcurtis/inkscape-9-patch-export}
+    {Inkscape 9-Patch Export Extension} can be used to export assets with
+    Inkscape.
+
+    \section4 Sketch
+
+    See Sketch's \l {https://sketchapp.com/docs/exporting/}{Exporting} documentation.
+
+    Qt Quick Controls also provides a
+    \l {http://code.qt.io/cgit/qt/qtdeclarative.git/tree/src/quickcontrols/imagine/design}
+    {plugin} for Sketch that automatically fixes the thickness of the 9-patch lines
+    after the assets are exported. To install this file, double-click on it.
+    Once Sketch has confirmed that the 9-patch export plugin has been installed,
+    the plugin will automatically process images when they are exported.
+
+    \section4 Fixing 9-Patch Lines
+
+    When exporting 9-patch images in several DPI variants (\c {@2x}, \c {@3x},
+    etc.), the 9-patch lines will typically be scaled up along with the image.
+    There are several ways to fix this, but perhaps the simplest approach is
+    to use \l {https://www.imagemagick.org/script/mogrify.php}{ImageMagick's mogrify}
+    tool. The tool has a \c -shave feature that can be used to crop the image
+    to reduce the thickness of the 9-patch lines:
+
+    \badcode
+    mogrify -shave 1x1 -path path/to/images *@2x.9.png
+    mogrify -shave 2x2 -path path/to/images *@3x.9.png
+    mogrify -shave 3x3 -path path/to/images *@4x.9.png
+    \endcode
+
+    Regular DPI images (those without the \c @Nx prefix) are not affected, so it
+    is only necessary to run the command on images intended for high DPI displays.
+
+    \section2 Animated Images
+
+    The \l {https://developers.google.com/speed/webp/}{WebP} and GIF animated
+    image formats are supported by the Imagine style.
+
+    \section2 Customization
+
+    \section3 Path
+
+    The Imagine style allows customizing the \l {imagine-path-attached-prop}{path}
+    that is used to do the image asset selection. The path can be specified for any
+    window or item, and it automatically propagates to children in the same manner as
+    \l {Control::font}{fonts}. In the following example, the window and all three radio
+    buttons appear with dark image assets (files that are located in "qrc:/themes/dark").
+
+    \table
+        \row
+            \li
+                \qml
+                import QtQuick 2.12
+                import QtQuick.Controls 2.12
+                import QtQuick.Controls.Imagine 2.12
+
+                ApplicationWindow {
+                    visible: true
+
+                    Imagine.path: "qrc:/themes/dark"
+
+                    Column {
+                        anchors.centerIn: parent
+
+                        RadioButton { text: qsTr("Small") }
+                        RadioButton { text: qsTr("Medium"); checked: true }
+                        RadioButton { text: qsTr("Large") }
+                    }
+                }
+                \endqml
+            \li
+                \image qtquickcontrols2-imagine-customization-dark.png
+    \endtable
+
+    In addition to specifying the path in QML, it is also possible to specify
+    it via an \l {imagine-customization-environment-variable}{environment variable}
+    or in a \l {imagine-customization-configuration-file}{configuration file}.
+    Attributes specified in QML take precedence over all other methods.
+
+    \section4 Configuration File
+    \target imagine-customization-configuration-file
+
+    \include qquickimaginestyle.qdocinc conf
+
+    See \l {Qt Quick Controls Configuration File} for more details about the
+    configuration file.
+
+    \section4 Environment Variables
+    \target imagine-customization-environment-variable
+
+    \include qquickimaginestyle.qdocinc env
+
+    See \l {Supported Environment Variables in Qt Quick Controls} for the full
+    list of supported environment variables.
+
+    \section3 Palette
+
+    The Imagine style supports palette customization via the \l {Item::}{palette}
+    property and the \l {Palette Configuration}{qtquickcontrols2.conf} file.
+    As with other styles, the exact \l[QML]{Palette}{palette roles}
+    that the Imagine style uses are style-dependent. However, as most of the visual
+    appearance of controls (for example: backgrounds) are managed through image assets,
+    only the roles that are typically used for text will have an effect.
+
+    \section3 Font
+
+    Custom fonts can be set via the \l {Control::}{font} property and the
+    \l {Font Configuration}{configuration} file.
+
+    \section2 Dependency
+
+    The Imagine style must be separately imported to gain access to the
+    attributes that are specific to the Imagine style. It should be noted
+    that regardless of the references to the Imagine style, the same
+    application code runs with any other style. Imagine-specific attributes
+    only have an effect when the application is run with the Imagine style.
+
+    If the Imagine style is imported in a QML file that is always loaded, the
+    Imagine style must be deployed with the application in order to be able
+    to run the application regardless of which style the application is run with.
+    By using \l {Using File Selectors with Qt Quick Controls}{file selectors},
+    style-specific tweaks can be applied without creating a hard dependency to
+    a style.
+
+    \b {See also} \l {Styling Qt Quick Controls}
+
+    \section1 Attached Property Documentation
+
+    \styleproperty {Imagine.path} {string} {imagine-path-attached-prop}
+    \target imagine-path-attached-prop
+    This attached property holds the path to the image assets...
+
+    \code
+    Button {
+        Imagine.path: "qrc:/themes/dark"
+    }
+    \endcode
+
+    \endstyleproperty
+
+    \section1 Related Information
+
+    \list
+      \li \l{Styling Qt Quick Controls}
+      \li \l{Qt Quick Controls - Imagine Style Example: Automotive}{Automotive Example}
+      \li \l{Qt Quick Controls - Imagine Style Example: Music Player}{Music Player Example}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-index.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-index.qdoc
new file mode 100644
index 0000000000..ea148e8568
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-index.qdoc
@@ -0,0 +1,173 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols-index.html
+    \keyword Qt Quick Controls 2
+    \title Qt Quick Controls
+
+    \brief Provides a set of UI controls for Qt Quick.
+
+    Qt Quick Controls provides a set of controls that can be used
+    to build complete interfaces in Qt Quick. The module was introduced
+    in Qt 5.7.
+
+    \image qtquickcontrols2-styles.png
+
+    Qt Quick Controls comes with a selection of customizable styles.
+    See \l {Styling Qt Quick Controls} for more details.
+
+
+    \section1 Using the Module
+
+    \section2 QML API
+
+    \include {module-use.qdocinc} {using the qml api} {QtQuick.Controls}
+
+    \section2 C++ API
+
+    \include {module-use.qdocinc} {using the c++ api}
+
+    \section3 Building with CMake
+
+    \include {module-use.qdocinc} {building with cmake} {QuickControls2}
+
+    \section3 Building with qmake
+
+    \include {module-use.qdocinc} {building_with_qmake} {quickcontrols2}
+
+    \section2 Building From Source
+
+    The \b{Qt Image Formats} module is recommended, but not
+    required. It provides support for the \c {.webp} format used by the
+    \l {Animated Images}{Imagine style}.
+
+    \section1 Versions
+
+    Qt Quick Controls 2.0 was introduced in Qt 5.7. Subsequent minor Qt releases
+    increment the import version of the Qt Quick Controls modules by one,
+    until Qt 5.12, where the import versions match Qt's minor version.
+
+    In Qt 6, both the major and minor versions match, and version numbers may
+    be omitted from imports in QML. If the version is omitted, the latest
+    version will be used.
+
+    The experimental Qt Labs modules use import version 1.0.
+
+    \table
+      \header
+        \li \c Qt
+        \li \l {Qt Quick QML Types}{\c QtQuick}
+        \li \l {Qt Quick Controls QML Types}{\c QtQuick.Controls},\br
+            \l {Material Style}{\c QtQuick.Controls.Material},\br
+            \l {Universal Style}{\c QtQuick.Controls.Universal},\br
+            \l {Qt Quick Templates 2 QML Types}{\c QtQuick.Templates}
+        \li \l {Qt Labs Platform QML Types}{\c Qt.labs.platform}
+      \row
+        \li 5.7
+        \li 2.7
+        \li 2.0
+        \li 1.0
+      \row
+        \li 5.8
+        \li 2.8
+        \li 2.1
+        \li 1.0
+      \row
+        \li 5.9
+        \li 2.9
+        \li 2.2
+        \li 1.0
+      \row
+        \li 5.10
+        \li 2.10
+        \li 2.3
+        \li 1.0
+      \row
+        \li 5.11
+        \li 2.11
+        \li 2.4
+        \li 1.0
+      \row
+        \li 5.12
+        \li 2.12
+        \li 2.12
+        \li 1.0
+      \row
+        \li 6.0
+        \li 6.0
+        \li 6.0
+        \li 1.0
+      \row
+        \li ...
+        \li ...
+        \li ...
+        \li ...
+    \endtable
+
+    \section1 Module Evolution
+
+    Qt Quick Controls was originally written with touch interfaces as the
+    primary focus.
+    While it is already possible to develop desktop interfaces, work is ongoing
+    to provide a more native look and feel.
+
+    \l{Changes to Qt Quick Controls} lists important changes in the
+    module API and functionality that were done for the Qt 6 series of Qt.
+
+    \section1 Articles and Guides
+
+    \list
+      \li \l{Getting Started with Qt Quick Controls}{Getting Started}
+      \li \l{Qt Quick Controls Guidelines}{Guidelines}
+      \li \l{Styling Qt Quick Controls}{Styling}
+      \li \l{Icons in Qt Quick Controls}{Icons}
+      \li \l{Customizing Qt Quick Controls}{Customization}
+      \li \l{Using File Selectors with Qt Quick Controls}{Using File Selectors}
+      \li \l{Deploying Qt Quick Controls Applications}{Deployment}
+      \li \l{Qt Quick Controls Configuration File}{Configuration File}
+      \li \l{Supported Environment Variables in Qt Quick Controls}
+            {Environment Variables}
+    \endlist
+
+    \section1 Examples
+
+    \list
+      \li \l{Qt Quick Controls - Gallery}{Gallery}
+      \li \l{Qt Quick Controls - Chat Tutorial}{Chat Tutorial}
+      \li \l{Qt Quick Controls - Text Editor}{Text Editor}
+      \li \l{Qt Quick Controls - Wearable Demo}{Wearable Demo}
+      \li \l{Qt Quick Controls - Imagine Style Example: Automotive}{Automotive Example}
+      \li \l{Qt Quick Controls - Imagine Style Example: Music Player}{Music Player Example}
+      \li \l{Qt Quick Controls Examples}{All Examples}
+    \endlist
+
+    \section1 Reference
+
+    \list
+      \li \l{Qt Quick Controls QML Types}{QML Types}
+      \li \l{Qt Quick Controls C++ Classes}{C++ Classes}
+    \endlist
+
+    \section1 Related Modules
+
+    \list
+      \li \l{Qt Quick}
+      \li \l{Qt Quick Layouts}
+      \li \l{Qt Quick Templates 2}
+      \li \l{Qt Labs Platform}
+    \endlist
+
+    \section1 License and Attributions
+
+    Qt Quick Controls is available under commercial licenses from \l{The Qt Company}.
+    In addition, it is available under the
+    \l{GNU Lesser General Public License, version 3}, or
+    the \l{GNU General Public License, version 2}.
+    See \l{Qt Licensing} for further details.
+
+    Furthermore, Qt Quick Controls potentially contains third party
+    modules under the following permissive licenses:
+
+    \generatelist{groupsbymodule attributions-qtquickcontrols}
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-indicators.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-indicators.qdoc
new file mode 100644
index 0000000000..1526ec1b80
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-indicators.qdoc
@@ -0,0 +1,59 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-indicators.html
+    \title Indicator Controls
+    \ingroup qtquickcontrols2-guidelines
+    \brief Guidelines for indicator controls
+
+    Qt Quick Controls offers a selection of indicator-like controls.
+
+    \annotatedlist qtquickcontrols2-indicators
+
+    Each type of indicator has its own specific target use case. The following
+    sections offer guidelines for choosing the appropriate type of indicator,
+    depending on the use case.
+
+    \section1 BusyIndicator Control
+
+    \image qtquickcontrols2-busyindicator.png
+
+    BusyIndicator can be used to show that an operation is in progress,
+    and that the UI has to wait for the operation to complete.
+
+    \section1 PageIndicator Control
+
+    \image qtquickcontrols2-pageindicator.png
+
+    \l PageIndicator is used to indicate the currently active page in
+    a container of multiple pages.
+
+    \section1 ProgressBar Control
+
+    \image qtquickcontrols2-progressbar.gif
+
+    \l ProgressBar indicates the progress of an operation. The value should be
+    updated regularly.
+
+    \section1 ScrollBar Control
+
+    \image qtquickcontrols2-scrollbar.gif
+
+    \l ScrollBar is an interactive bar that indicates the current scroll
+    position, and can be used to scroll to a specific position in a
+    \l Flickable.
+
+    \section1 ScrollIndicator Control
+
+    \image qtquickcontrols2-scrollindicator.gif
+
+    \l ScrollIndicator is a non-interactive indicator that indicates the
+    current scroll position, and can be used to scroll to a specific position in a
+    \l {Flickable}.
+
+    \section1 Related Information
+    \list
+    \li \l {Qt Quick Controls Guidelines}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-input.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-input.qdoc
new file mode 100644
index 0000000000..580438e8ac
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-input.qdoc
@@ -0,0 +1,99 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-input.html
+    \title Input Controls
+    \ingroup qtquickcontrols2-guidelines
+    \brief Guidelines for input controls
+
+    Qt Quick Controls offers a variety of input controls for both numeric
+    and textual input.
+
+    \annotatedlist qtquickcontrols2-input
+
+    Each type of input control has its own specific target use case. The
+    following sections offer guidelines for choosing the appropriate type
+    of input control, depending on the use case.
+
+    \section1 ComboBox Control
+
+    \image qtquickcontrols2-combobox.gif
+
+    \l ComboBox is used to select a value from a static multiple-line drop-down list.
+    It is not possible to add new values, and only one option can be selected.
+
+    Recommendations:
+    \list
+    \li If the number of values is very large, consider applying a filter.
+    \li If the list is very limited, consider using RadioButton. This has the
+    advantage that the user can see all options at the same time.
+    \li Select a default value, the value that will be chosen most often.
+    \endlist
+
+    \b {See also} \l {CheckBox Control}, \l {Tumbler Control}.
+
+    \section1 Dial Control
+
+    \image qtquickcontrols2-dial.png
+
+    \l Dial is similar to a traditional dial knob that is found on devices such
+    as stereos or industrial equipment.
+
+    The dial is rotated by clicking and dragging, with the handle indicating the
+    value of the dial.
+
+    For applications where fast input is important, the circular
+    \l {Dial::inputMode}{input mode} is useful, as clicking on the dial will
+    move it directly to that position.
+
+    For applications where precise input is important, the horizontal and
+    vertical input modes are recommended, as these allow small adjustments to
+    be made relative to where the dial is clicked. These modes are also better
+    for dials where large jumps in values could be unsafe, such as a dial that
+    controls audio volume.
+
+    \b {See also} \l {Tumbler Control}.
+
+    \section1 TextArea Control
+
+    \image qtquickcontrols2-textarea.png
+
+    \l TextArea is a multi-line text editor.
+
+    \section1 TextField Control
+
+    \image qtquickcontrols2-textfield.png
+
+    \l TextField is a single line text editor.
+
+    \b {See also} \l {Tumbler Control}.
+
+    \section1 Slider Control
+
+    \image qtquickcontrols2-slider.gif
+
+    \l Slider is used to select a value by sliding a handle along a track.
+
+    \section1 RangeSlider Control
+
+    \image qtquickcontrols2-rangeslider.gif
+
+    \l RangeSlider is used to select a range specified by two values,
+    by sliding each handle along a track.
+
+    \b {See also} \l {Slider Control}.
+
+    \section1 Tumbler Control
+
+    \image qtquickcontrols2-tumbler.png
+
+    \l Tumbler is a spinnable wheel of items that can be selected.
+
+    \b {See also} \l {ComboBox Control}.
+
+    \section1 Related Information
+    \list
+    \li \l {Qt Quick Controls Guidelines}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-ios.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-ios.qdoc
new file mode 100644
index 0000000000..3ac7d51710
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-ios.qdoc
@@ -0,0 +1,62 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-ios.html
+    \title iOS Style
+
+    The iOS Style is a native-looking style for iOS based on image assets.
+    \l{detailed-desc-iOS}{More...}
+
+    \styleimport {QtQuick.Controls.iOS} {Qt 6.4}
+
+    \section1 Attached Properties
+
+    \list
+        \li \l {ios-theme-attached-prop}{\b theme} : enumeration
+    \endlist
+
+    \section1 Detailed Description
+    \target detailed-desc-iOS
+
+    The iOS style is designed to look and feel as similar as possible to the native controls in UIKit.
+    Most of the controls make use of \l
+    {https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch}{9-patch
+    images} to draw their components, in order to accommodate controls of varying sizes.
+    For controls that do not have a native counterpart in UIKit, the iOS style
+    provides a custom look based on colors and styles following \l
+    {https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/}
+    {iOS' Human Interface Guidelines }.
+    The iOS style is not a native iOS style, and as such, can run on platforms other than iOS.
+    However, for the time being, it is made available only for applications running on macOS
+    and iOS and should look the same on both platforms, besides minor differences that may occur
+    due to differences in available system fonts and font rendering engines.
+
+    \table
+        \row
+            \li \image qtquickcontrols2-ios-light.png
+                \caption The iOS style in light theme
+            \li \image qtquickcontrols2-ios-dark.png
+                \caption The iOS style in dark theme
+    \endtable
+
+    To run an application with the iOS style, see
+    \l {Using Styles in Qt Quick Controls}.
+
+    \section2 Current state
+
+    The iOS style is currently in Tech Preview and is under development. Some controls are not
+    yet supported. Those controls are: \l BusyIndicator, \l DelayButton, \l Dialog, \l DialogButtonBox,
+    \l SelectionRectangle and \l Tumbler. Those will fall back to use the \l {Basic Style}.
+
+    \section2 Customization
+
+    \section3 Palette
+
+    The iOS style supports palette customization via the \l {Item::}{palette}
+    property and the \l {Palette Configuration}{qtquickcontrols2.conf} file.
+    As with other styles, the exact \l[QML]{Palette}{palette roles}
+    that the iOS style uses are style-dependent. However, as most of the visual
+    appearance of controls (for example: backgrounds) is managed through image assets,
+    only the roles that are typically used for text will have an effect.
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-macos.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-macos.qdoc
new file mode 100644
index 0000000000..911baf6c20
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-macos.qdoc
@@ -0,0 +1,49 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-macos.html
+    \title macOS Style
+
+    The macOS style is a style that looks native on macOS.
+    \l {detailed-desc-macOS}{More...}
+
+    \styleimport {QtQuick.Controls.macOS} {Qt 6.0}
+
+    \target detailed-desc-macOS
+
+    The macOS style is a style that looks native on macOS. The controls are drawn run-time using
+    native frameworks, and is therefore only available for applications running on macOS.
+
+    \note Be aware that the apperance of this style can change from one minor Qt version to the
+    next, to better blend in with native applications on the platform.
+
+    \table
+        \row
+            \li \image qtquickcontrols2-macos-light.png
+                \caption The macOS style in light theme
+            \li \image qtquickcontrols2-macos-dark.png
+                \caption The macOS style in dark theme
+    \endtable
+
+    To run an application with the macOS style, see
+    \l {Using Styles in Qt Quick Controls}.
+
+    \section2 Current state
+
+    The macOS style is under development, and some controls are not yet supported. Those
+    controls are: \l BusyIndicator, \l DelayButton, \l PageIndicator, \l RangeSlider, \l Switch, \l TabBar and
+    \l Tumbler. Those will fall back to use the \l {Fusion Style}.
+
+    \section2 Customization
+
+    The goal of the macOS style is to for the controls look and feel as similar as possible to the
+    native controls in UIKit. The style will follow the theme and colors configured globally from
+    System Preferences, and does not come with a separate customization API on top of that.
+
+    \note The macOS style is not suitable for \l {Customizing Qt Quick Controls}{customizing}.
+    The main reason is that it sometimes draw both the contents and the background
+    onto a single background item, which will not look good together with a custom contentItem.
+    It also tends to use padding and inset values that are different from the other styles.
+    \include customizing-native-styles.qdocinc
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-material.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-material.qdoc
new file mode 100644
index 0000000000..8b9c74eabb
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-material.qdoc
@@ -0,0 +1,380 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-material.html
+    \title Material Style
+
+    The Material Style is based on the Google Material Design Guidelines.
+    \l{detailed-desc-material}{More...}
+
+    \styleimport {QtQuick.Controls.Material 2.12} {Qt 5.7}
+
+    \section1 Attached Properties
+
+    \list
+        \li \l {material-accent-attached-prop}{\b accent} : color
+        \li \l {material-background-attached-prop}{\b background} : color
+        \li \l {material-elevation-attached-prop}{\b elevation} : int
+        \li \l {material-foreground-attached-prop}{\b foreground} : color
+        \li \l {material-primary-attached-prop}{\b primary} : color
+        \li \l {material-theme-attached-prop}{\b theme} : enumeration
+    \endlist
+
+    \section1 Attached Methods
+
+    \list
+        \li color \l {material-color-attached-method}{\b color}(enumeration predefined, enumeration shade)
+    \endlist
+
+    \section1 Detailed Description
+    \target detailed-desc-material
+
+    The Material style is based on the \l {https://www.google.com/design/spec/material-design/introduction.html}
+    {Google Material Design Guidelines}. It allows for a unified experience
+    across platforms and device sizes.
+
+    \table
+        \row
+            \li \image qtquickcontrols2-material-light.png
+                \caption The Material style in light theme
+            \li \image qtquickcontrols2-material-dark.png
+                \caption The Material style in dark theme
+    \endtable
+
+    To run an application with the Material style, see
+    \l {Using Styles in Qt Quick Controls}.
+
+    \note The Material style is not a native Android style. The Material
+    style is a 100% cross-platform Qt Quick Controls style implementation that
+    follows the Google Material Design Guidelines. The style runs on any
+    platform, and looks more or less identical everywhere. Minor differences
+    may occur due to differences in available system fonts and font rendering
+    engines.
+
+    \section2 Customization
+
+    The Material style allows customizing five attributes, \l {material-theme-attached-prop}{theme},
+    \l {material-primary-attached-prop}{primary}, \l {material-accent-attached-prop}{accent},
+    \l {material-foreground-attached-prop}{foreground}, and \l {material-background-attached-prop}{background}.
+
+    \image qtquickcontrols2-material-attributes.png
+
+    All attributes can be specified for any window or item, and they automatically
+    propagate to children in the same manner as \l {Control::font}{fonts}. In the
+    following example, the window and all three radio buttons appear in the dark
+    theme using a purple accent color:
+
+    \table
+        \row
+            \li
+                \qml
+                import QtQuick 2.12
+                import QtQuick.Controls 2.12
+                import QtQuick.Controls.Material 2.12
+
+                ApplicationWindow {
+                    visible: true
+
+                    Material.theme: Material.Dark
+                    Material.accent: Material.Purple
+
+                    Column {
+                        anchors.centerIn: parent
+
+                        RadioButton { text: qsTr("Small") }
+                        RadioButton { text: qsTr("Medium");  checked: true }
+                        RadioButton { text: qsTr("Large") }
+                    }
+                }
+                \endqml
+            \li
+                \image qtquickcontrols2-material-purple.png
+    \endtable
+
+    In addition to specifying the attributes in QML, it is also possible to
+    specify them via environment variables or in a configuration file. Attributes
+    specified in QML take precedence over all other methods.
+
+    \section3 Configuration File
+
+    \include qquickmaterialstyle.qdocinc conf
+
+    See \l {Qt Quick Controls Configuration File} for more details about the
+    configuration file.
+
+    \section3 Environment Variables
+
+    \include qquickmaterialstyle.qdocinc env
+
+    See \l {Supported Environment Variables in Qt Quick Controls} for the full
+    list of supported environment variables.
+
+    \section2 Dependency
+
+    The Material style must be separately imported to gain access to the
+    attributes that are specific to the Material style. It should be noted
+    that regardless of the references to the Material style, the same
+    application code runs with any other style. Material-specific attributes
+    only have an effect when the application is run with the Material style.
+
+    If the Material style is imported in a QML file that is always loaded, the
+    Material style must be deployed with the application in order to be able
+    to run the application regardless of which style the application is run with.
+    By using \l {Using File Selectors with Qt Quick Controls}{file selectors},
+    style-specific tweaks can be applied without creating a hard dependency to
+    a style.
+
+    \section2 Pre-defined Material Colors
+
+    Even though primary and accent can be any \l {colorvaluetypedocs}{color}, it
+    is recommended to use one of the pre-defined colors that have been designed
+    to work well with the rest of the Material style palette:
+
+    Available pre-defined colors:
+    \value Material.Red \stylecolor {#F44336} {}
+    \value Material.Pink \stylecolor {#E91E63} {(default accent)}
+    \value Material.Purple \stylecolor {#9C27B0} {}
+    \value Material.DeepPurple \stylecolor {#673AB7} {}
+    \value Material.Indigo \stylecolor {#3F51B5} {(default primary)}
+    \value Material.Blue \stylecolor {#2196F3} {}
+    \value Material.LightBlue \stylecolor {#03A9F4} {}
+    \value Material.Cyan \stylecolor {#00BCD4} {}
+    \value Material.Teal \stylecolor {#009688} {}
+    \value Material.Green \stylecolor {#4CAF50} {}
+    \value Material.LightGreen \stylecolor {#8BC34A} {}
+    \value Material.Lime \stylecolor {#CDDC39} {}
+    \value Material.Yellow \stylecolor {#FFEB3B} {}
+    \value Material.Amber \stylecolor {#FFC107} {}
+    \value Material.Orange \stylecolor {#FF9800} {}
+    \value Material.DeepOrange \stylecolor {#FF5722} {}
+    \value Material.Brown \stylecolor {#795548} {}
+    \value Material.Grey \stylecolor {#9E9E9E} {}
+    \value Material.BlueGrey \stylecolor {#607D8B} {}
+
+    When the dark theme is in use, different \l {Pre-defined Shades}{shades} of
+    the pre-defined colors are used by default:
+
+    \value Material.Red \stylecolor {#EF9A9A} {}
+    \value Material.Pink \stylecolor {#F48FB1} {(default accent)}
+    \value Material.Purple \stylecolor {#CE93D8} {}
+    \value Material.DeepPurple \stylecolor {#B39DDB} {}
+    \value Material.Indigo \stylecolor {#9FA8DA} {(default primary)}
+    \value Material.Blue \stylecolor {#90CAF9} {}
+    \value Material.LightBlue \stylecolor {#81D4FA} {}
+    \value Material.Cyan \stylecolor {#80DEEA} {}
+    \value Material.Teal \stylecolor {#80CBC4} {}
+    \value Material.Green \stylecolor {#A5D6A7} {}
+    \value Material.LightGreen \stylecolor {#C5E1A5} {}
+    \value Material.Lime \stylecolor {#E6EE9C} {}
+    \value Material.Yellow \stylecolor {#FFF59D} {}
+    \value Material.Amber \stylecolor {#FFE082} {}
+    \value Material.Orange \stylecolor {#FFCC80} {}
+    \value Material.DeepOrange \stylecolor {#FFAB91} {}
+    \value Material.Brown \stylecolor {#BCAAA4} {}
+    \value Material.Grey \stylecolor {#EEEEEE} {}
+    \value Material.BlueGrey \stylecolor {#B0BEC5} {}
+
+    \section2 Pre-defined Shades
+
+    There are several different
+    \l {https://material.google.com/style/color.html#color-color-palette}{shades}
+    of each \l {Pre-defined Material Colors}{pre-defined color} that can be passed
+    to the \l {material-color-attached-method}{Material.color()} function:
+    \value Material.Shade50
+    \value Material.Shade100
+    \value Material.Shade200
+    \value Material.Shade300
+    \value Material.Shade400
+    \value Material.Shade500
+    \value Material.Shade600
+    \value Material.Shade700
+    \value Material.Shade800
+    \value Material.Shade900
+    \value Material.ShadeA100
+    \value Material.ShadeA200
+    \value Material.ShadeA400
+    \value Material.ShadeA700
+
+    \b {See also} \l {Basic Style}, \l {Universal Style}
+
+    \section2 Variants
+
+    The Material style also supports a dense variant, where controls like
+    buttons and delegates are smaller in height and use smaller font sizes.
+    It is recommended to use the dense variant on desktop platforms, where
+    a mouse and keyboard allow more precise and flexible user interaction.
+
+    To use the dense variant, either set the
+    \c QT_QUICK_CONTROLS_MATERIAL_VARIANT environment variable to \c Dense,
+    or specify \c Variant=Dense in the
+    \l {Qt Quick Controls Configuration File}{qtquickcontrols2.conf} file.
+    The default value in both cases is \c Normal.
+
+    The following images illustrate the differences between some of the
+    controls when using the normal and dense variants:
+
+    \table
+        \row
+            \li
+                \image qtquickcontrols2-material-variant-normal.png
+            \li
+                \image qtquickcontrols2-material-variant-dense.png
+    \endtable
+
+    Note that the heights shown above may vary based on differences in fonts
+    across platforms.
+
+    \section1 Attached Property Documentation
+
+    \styleproperty {Material.accent} {color} {material-accent-attached-prop}
+    \target material-accent-attached-prop
+    This attached property holds the accent color of the theme. The property
+    can be attached to any window or item. The value is propagated to children.
+
+    The default value is \c Material.Pink.
+
+    In the following example, the accent color of the highlighted button is
+    changed to \c Material.Orange:
+
+    \table
+        \row
+            \li
+                \snippet qtquickcontrols2-material-accent.qml 1
+            \li
+                \image qtquickcontrols2-material-accent.png
+    \endtable
+
+    \note Even though the accent can be any \l {colorvaluetypedocs}{color}, it is
+    recommended to use one of the \l {pre-defined Material colors} that have been
+    designed to work well with the rest of the Material style palette.
+
+    \endstyleproperty
+
+    \styleproperty {Material.background} {color} {material-background-attached-prop}
+    \target material-background-attached-prop
+    This attached property holds the background color of the theme. The property
+    can be attached to any window or item. The value is propagated to children.
+
+    The default value is theme-specific (light or dark).
+
+    In the following example, the background color of the button is changed to
+    \c Material.Teal:
+
+    \table
+        \row
+            \li
+                \snippet qtquickcontrols2-material-background.qml 1
+            \li
+                \image qtquickcontrols2-material-background.png
+    \endtable
+
+    \endstyleproperty
+
+    \styleproperty {Material.elevation} {int} {material-elevation-attached-prop}
+    \target material-elevation-attached-prop
+    This attached property holds the elevation of the control. The higher the
+    elevation, the deeper the shadow. The property can be attached to any control,
+    but not all controls visualize elevation.
+
+    The default value is control-specific.
+
+    In the following example, the elevation of the pane is set to \c 6
+    in order to achieve the look of an
+    \l {https://material.google.com/components/cards.html}{elevated card}:
+
+    \table
+        \row
+            \li
+                \snippet qtquickcontrols2-material-elevation.qml 1
+            \li
+                \image qtquickcontrols2-material-elevation.png
+    \endtable
+
+    \endstyleproperty
+
+    \styleproperty {Material.foreground} {color} {material-foreground-attached-prop}
+    \target material-foreground-attached-prop
+    This attached property holds the foreground color of the theme. The property
+    can be attached to any window or item. The value is propagated to children.
+
+    The default value is theme-specific (light or dark).
+
+    In the following example, the foreground color of the button is set to \c
+    Material.Pink:
+
+    \table
+        \row
+            \li
+                \snippet qtquickcontrols2-material-foreground.qml 1
+            \li
+                \image qtquickcontrols2-material-foreground.png
+    \endtable
+
+    \endstyleproperty
+
+    \styleproperty {Material.primary} {color} {material-primary-attached-prop}
+    \target material-primary-attached-prop
+    This attached property holds the primary color of the theme. The property
+    can be attached to any window or item. The value is propagated to children.
+
+    The primary color is used as the background color of ToolBar by default.
+
+    The default value is \c Material.Indigo.
+
+    \note Even though the primary can be any \l {colorvaluetypedocs}{color}, it is
+    recommended to use one of the \l {pre-defined Material colors} that have been
+    designed to work well with the rest of the Material style palette.
+
+    \endstyleproperty
+
+    \styleproperty {Material.theme} {enumeration} {material-theme-attached-prop}
+    \target material-theme-attached-prop
+    This attached property holds whether the theme is light or dark. The property
+    can be attached to any window or item. The value is propagated to children.
+
+    Available themes:
+    \value Material.Light Light theme (default)
+    \value Material.Dark Dark theme
+    \value Material.System System theme
+
+    Setting the theme to \c System chooses either the light or dark theme based
+    on the system theme colors. However, when reading the value of the theme
+    property, the value is never \c System, but the actual theme.
+
+    In the following example, the theme for both the pane and the button is set
+    to \c Material.Dark:
+
+    \table
+        \row
+            \li
+                \snippet qtquickcontrols2-material-theme.qml 1
+            \li
+                \image qtquickcontrols2-material-theme.png
+    \endtable
+
+    \endstyleproperty
+
+    \section1 Attached Method Documentation
+
+    \stylemethod2 {color} {color} {enumeration} {predefined} {enumeration} {shade} {material-color-attached-method}
+    \target material-color-attached-method
+    This attached method returns the effective color value of the specified
+    \l {pre-defined Material colors}{pre-defined Material color} combined with
+    the given \l {pre-defined shades}{shade}. If omitted, the shade argument
+    defaults to \c Material.Shade500.
+
+    \qml
+    Rectangle {
+        color: Material.color(Material.Red)
+    }
+    \endqml
+
+    \endstylemethod2
+
+    \section1 Related Information
+
+    \list
+      \li \l{Styling Qt Quick Controls}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-menus.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-menus.qdoc
new file mode 100644
index 0000000000..7d54b4f027
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-menus.qdoc
@@ -0,0 +1,44 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-menus.html
+    \title Menu Controls
+    \ingroup qtquickcontrols2-guidelines
+    \brief Guidelines for menu controls
+
+    \annotatedlist qtquickcontrols2-menus
+
+    Each type of menu control has its own specific target use case. The
+    following sections offer guidelines for choosing the appropriate type
+    of menu control, depending on the use case.
+
+    \section1 Menu Control
+
+    \image qtquickcontrols2-menu.png
+
+    \l Menu control can be used for context menus; for example, after
+    right-clicking. It can also be used for popup menus; for example, a
+    menu that is shown after clicking a button.
+
+    \l MenuItem is an item in the Menu control. Each item in a menu:
+    \list
+    \li displays text to the user
+    \li allows checking/unchecking
+    \li is highlighted (for example, on keyboard navigation)
+    \li performs some action on activation
+    \endlist
+
+    \section1 MenuBar Control
+
+    \image qtquickcontrols2-menubar.png
+
+    \l MenuBar control can be used for window menu bars.
+
+    \l MenuBarItem is an item in the MenuBar control. Each item in a menu bar:
+    \list
+    \li displays text to the user
+    \li is highlighted (for example, on keyboard navigation)
+    \li pops up the respective menu on activation
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-navigation.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-navigation.qdoc
new file mode 100644
index 0000000000..2013fc8dfd
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-navigation.qdoc
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-navigation.html
+    \title Navigation Controls
+    \ingroup qtquickcontrols2-guidelines
+    \brief Guidelines for navigation controls
+
+    Qt Quick Controls offers a selection of navigation models.
+
+    \annotatedlist qtquickcontrols2-navigation
+
+    The following sections offer guidelines for choosing the appropriate type
+    of navigation model, depending on the use case.
+
+    \section1 StackView Control
+
+    \image qtquickcontrols2-stackview-wireframe.png
+
+    \l StackView provides a stack-based navigation model which can be used
+    with a set of interlinked pages. StackView works according to a last-in
+    first-out principle: the page pushed last on the stack is the one visible.
+    Popping a page removes the last page and makes the previous one visible.
+
+    \section1 SwipeView Control
+
+    \image qtquickcontrols2-swipeview-wireframe.png
+
+    \l SwipeView provides a navigation model that simplifies horizontal paged
+    scrolling. The page indicator on the bottom shows which is the presently
+    active page.
+
+    \section1 TabBar Control
+
+    \image qtquickcontrols2-tabbar-wireframe.png
+
+    \l TabBar is a bar with icons or text that allows the user to switch
+    between different subtasks, views, or modes.
+
+    \section1 TabButton Control
+
+    \image qtquickcontrols2-tabbutton.png
+
+    \l TabButton is a button with a layout suitable for a TabBar control.
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-popups.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-popups.qdoc
new file mode 100644
index 0000000000..388443e24f
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-popups.qdoc
@@ -0,0 +1,75 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-popups.html
+    \title Popup Controls
+    \ingroup qtquickcontrols2-guidelines
+    \brief Guidelines for popup controls
+
+    \annotatedlist qtquickcontrols2-popups
+
+    Each type of popup control has its own specific target use case. The
+    following sections offer guidelines for choosing the appropriate type
+    of popup control, depending on the use case.
+
+    \section1 Drawer Control
+
+    \image qtquickcontrols2-drawer-expanded-wireframe.png
+
+    \l Drawer provides a swipe-based side panel, similar to those often used
+    in touch interfaces to provide a central location for navigation.
+
+    The drawer can be positioned at any of the four edges of the screen. It allows
+    the user to add navigation without taking up valuable screen space. The user can
+    show and hide the drawer at any time with a simple swipe movement.
+
+    \section1 Menu Control
+
+    \image qtquickcontrols2-menu.png
+
+    The \l Menu control displays a vertical list of items that can be selected. It can
+    be used for offering a list of actions that can be taken in a given context.
+
+    \b {See also} \l {Drawer Control}.
+
+    \section1 Popup Control
+
+    \image qtquickcontrols2-popup-settings.png
+
+    A \l Popup displays content over other application content.
+    It prompts the user to make a decision or enter information.
+
+    Popups can be modal or non-modal. A modal popup blocks users from interacting
+    with the application until they have made a choice and closed the popup.
+
+    A popup can be used for:
+
+    \list
+    \li communicating a message to the user that they must read and acknowledge.
+    \li displaying an error message.
+    \li prompting the user to make a choice and/or enter a value.
+    \endlist
+
+    \section1 ToolTip Control
+
+    \image qtquickcontrols2-tooltip.png
+
+    \l ToolTip shows a short piece of text that informs the user of a control's
+    function. It is typically placed above or below the parent control.
+
+    Recommendations:
+    \list
+    \li Use a tooltip if a control has little or no descriptive text, or needs
+    a short explanation.
+    \li Use a tooltip only if the information on a particular control is not
+     available elsewhere in the screen.
+    \li Keep the tooltip text short so that it does not cover other content
+    while being displayed.
+    \endlist
+
+    \section1 Related Information
+    \list
+    \li \l {Qt Quick Controls Guidelines}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-qmltypes.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-qmltypes.qdoc
new file mode 100644
index 0000000000..f1ff074b57
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-qmltypes.qdoc
@@ -0,0 +1,106 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \qmlmodule QtQuick.Controls
+    \keyword Qt Quick Controls QML Types
+    \title Qt Quick Controls QML Types
+    \keyword Qt Quick Controls 2 QML Types
+    \ingroup qmlmodules
+    \brief Provides QML types for user interfaces (Qt Quick Controls).
+
+    \l{Qt Quick Controls} provides QML types for creating user interfaces.
+    These QML types work in conjunction with \l{Qt Quick} and
+    \l{Qt Quick Layouts}.
+
+    Qt Quick Controls QML types can be imported into your application
+    using the following import statement in your .qml file:
+
+    \qml
+    import QtQuick.Controls
+    \endqml
+
+    \section1 QML Types
+    \generatelist {qmltypesbymodule QtQuick.Controls}
+    \noautolist
+
+    \section1 Using Qt Quick Controls types in property declarations
+
+    As mentioned in \l {Qt Quick Templates 2 QML Types}, each type in Qt Quick
+    Controls is backed by a C++ "template" type. These types are \l {Qt Quick
+    Templates 2}{non-visual implementations of controls' logic and behavior}.
+
+    For example, the \l Menu type's API and behavior is defined by the C++
+    type in Qt Quick Templates. Each \l {Definition of a Style}{style} that
+    wants to provide a Menu must have a Menu.qml available, and the root
+    item in that file must be the Menu from Qt Quick Templates. When you
+    import QtQuick.Controls and create a Menu in QML, the type you get is
+    actually the QML Menu defined by the style's Menu.qml.
+
+    In order to use a control as the type in a property declaration, you should
+    use the corresponding type from Qt Quick Templates. For example, suppose
+    you had a \c PopupOpener component, which was a Button that opened a
+    Popup:
+
+    \qml
+    // PopupButton.qml
+    import QtQuick.Controls
+
+    Button {
+        required property Popup popup
+
+        onClicked: popup.open()
+    }
+
+    // main.qml
+    PopupButton {
+        popup: saveChangesDialog
+    }
+
+    Dialog {
+        id: saveChangesDialog
+
+        // ...
+    }
+    \endqml
+
+    Running this code will result in an error:
+
+    \badcode
+    Unable to assign Dialog_QMLTYPE to Popup_QMLTYPE
+    \endcode
+
+    This is because of the inheritance hierarchy:
+
+    \badcode
+    Popup (C++ type in QtQuick.Templates)
+    │   └── Popup (QML type in QtQuick.Controls)
+    └── Dialog (C++ type in QtQuick.Templates)
+        └── Dialog (QML type in QtQuick.Controls)
+    \endcode
+
+    Dialog from \c QtQuick.Controls does not derive from the Popup from
+    \c QtQuick.Controls, but from \c QtQuick.Templates.
+
+    Instead, use the Popup from Qt Quick Templates as the property type:
+
+    \qml
+    // PopupButton.qml
+    import QtQuick.Controls
+    import QtQuick.Templates as T
+
+    Button {
+        required property T.Popup popup
+
+        onClicked: popup.open()
+    }
+    \endqml
+
+    For more information on the Qt Quick Controls module, see the
+    \l {Qt Quick Controls} module documentation.
+
+    \section1 Related Information
+    \list
+    \li \l {Qt Quick Controls Guidelines}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-separators.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-separators.qdoc
new file mode 100644
index 0000000000..1105a5bf5f
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-separators.qdoc
@@ -0,0 +1,39 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-separators.html
+    \title Separator Controls
+    \ingroup qtquickcontrols2-guidelines
+    \brief Guidelines for separator controls
+
+    Qt Quick Controls offers a selection of separators.
+
+    \annotatedlist qtquickcontrols2-separators
+
+    Each type of separator has its own specific use case. The following
+    sections offer guidelines for choosing the appropriate type of separator,
+    depending on the use case.
+
+    \section1 MenuSeparator Control
+
+    \image qtquickcontrols2-menuseparator.png
+
+    \l MenuSeparator should be used to separate items (typically MenuItem
+    controls) in a Menu. Grouping related menu items together makes it easier
+    for the user to interact with the menu. For example, a typical desktop
+    user interface might have \c Undo and \c Redo items in one group, and
+    \c Cut, \c Copy and \c Paste in another.
+
+    \section1 ToolSeparator Control
+
+    \image qtquickcontrols2-toolseparator.png
+
+    \l ToolSeparator should be used to separate items (typically ToolButton
+    controls) in a ToolBar. It can be used in horizontal or vertical toolbars.
+
+    \section1 Related Information
+    \list
+    \li \l {Qt Quick Controls Guidelines}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-styles.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-styles.qdoc
new file mode 100644
index 0000000000..df79e08e3f
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-styles.qdoc
@@ -0,0 +1,204 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-styles.html
+    \title Styling Qt Quick Controls
+
+    \section1 Available Styles
+
+    Qt Quick Controls comes with a selection of styles.
+
+    \section2 Basic Style
+
+    \image qtquickcontrols2-basic-thumbnail.png
+    The \l {Basic Style} is a simple and light-weight all-round style that offers
+    the maximum performance for Qt Quick Controls.
+
+    \section2 Fusion Style
+
+    \image qtquickcontrols2-fusion-thumbnail.png
+    The \l {Fusion Style} is a platform-agnostic style that offers a desktop-oriented
+    look and feel for Qt Quick Controls.
+
+    \section2 Imagine Style
+
+    \image qtquickcontrols2-imagine-thumbnail.png
+    The \l {Imagine Style} is based on image assets. The style comes with a default
+    set of images which can easily be changed by providing a directory
+    with images using a predefined naming convention.
+
+    \section2 macOS Style
+
+    \image qtquickcontrols2-macos-thumbnail.png
+    The \l {macOS Style} is a native-looking style for macOS.
+    \note this style is only available for applications running on macOS.
+
+
+    \section2 iOS Style
+
+    The \l {iOS Style} is a native-looking style for iOS based on image assets.
+    \note this style is only available for applications running on iOS.
+
+    \section2 Material Style
+
+    \image qtquickcontrols2-material-thumbnail.png
+    The \l {Material Style} offers an appealing design based on the
+    \l {https://www.google.com/design/spec/material-design/introduction.html}
+    {Google Material Design Guidelines}, but requires more system resources than
+    the Basic style.
+
+    \section2 Universal Style
+
+    \image qtquickcontrols2-universal-thumbnail.png
+    The \l {Universal Style} offers an appealing design based on the
+    \l {https://dev.windows.com/design}{Microsoft Universal Design Guidelines},
+    but requires more system resources than the Basic style.
+
+    \section2 Windows Style
+
+    \image qtquickcontrols2-windows-thumbnail.png
+    The \l {Windows Style} is a native-looking style for Windows.
+    \note this style is only available for applications running on Windows.
+
+    \section1 Using Styles in Qt Quick Controls
+
+    \section2 Default Styles
+
+    If no style is explicitly set, a default style will be used. The style that
+    is used depends on the operating system:
+
+    \list
+    \li Android: \l {Material Style}
+    \li iOS: \l {iOS Style}
+    \li Linux: \l {Fusion Style}
+    \li macOS: \l {macOS Style}
+    \li Windows: \l {Windows Style}
+    \endlist
+
+    For all other operating systems, the \l {Basic Style} is used.
+
+    \section2 Compile-Time Style Selection
+
+    Compile-time style selection is a way of specifying a style to use by
+    importing it in QML. For example, to import the Material style:
+
+    \qml
+    import QtQuick.Controls.Material
+
+    ApplicationWindow {
+        // ...
+    }
+    \endqml
+
+    Notice that QtQuick.Controls (which is responsible for run-time style
+    selection) is not imported. The fallback style is specified by the qmldir
+    of the style:
+
+    \badcode
+    module QtQuick.Controls.Material
+    # ...
+    import QtQuick.Controls.Basic auto
+    \endcode
+
+    The benefit of compile-time style selection is that the QtQuick.Controls plugin
+    is not used and therefore does not need to be deployed with the application.
+
+    Explicit imports are also necessary if your application is built
+    \l {Static Builds}{statically}.
+
+    \section2 Run-Time Style Selection
+
+    Run-time style selection is a way of specifying a style to use by importing
+    \c QtQuick.Controls:
+
+    \qml
+    import QtQuick.Controls
+    \endqml
+
+    The QtQuick.Controls plugin will import the style and fallback
+    style that were set at runtime via one of the following approaches:
+
+    \list
+    \li \l[CPP]{QQuickStyle::setStyle()}
+    \li The \c -style command line argument
+    \li The \c QT_QUICK_CONTROLS_STYLE environment variable
+    \li The \c qtquickcontrols2.conf configuration file
+    \endlist
+
+    The priority of these approaches follows the order they are listed,
+    from highest to lowest. That is, using \c QQuickStyle to set the style will
+    always take priority over using the command line argument, for example.
+
+    The benefit of run-time style selection is that a single application binary
+    can support multiple styles, meaning that the end user can choose which
+    style to run the application with.
+
+    \section3 Using QQuickStyle in C++
+
+    \l[CPP]{QQuickStyle} provides C++ API for configuring a specific
+    style. The following example runs a Qt Quick Controls application
+    with the Material style:
+
+    \code
+    QQuickStyle::setStyle("Material");
+    \endcode
+
+    See the detailed description of \l[CPP]{QQuickStyle} for more
+    details.
+
+    \section3 Command line argument
+
+    Passing a \c -style command line argument is the convenient way to test different
+    styles. It takes precedence over the other methods listed below. The following
+    example runs a Qt Quick Controls application with the Material style:
+
+    \code
+    ./app -style material
+    \endcode
+
+    \section3 Environment variable
+
+    Setting the \c QT_QUICK_CONTROLS_STYLE environment variable can be used to set
+    a system-wide style preference. It takes precedence over the configuration file
+    mentioned below. The following example runs a Qt Quick Controls application with
+    the Universal style:
+
+    \code
+    QT_QUICK_CONTROLS_STYLE=universal ./app
+    \endcode
+
+    See \l {Supported Environment Variables in Qt Quick Controls} for the full list
+    of supported environment variables.
+
+    \section3 Configuration file
+
+    Qt Quick Controls support a special configuration file, \c :/qtquickcontrols2.conf,
+    that is built into an application's resources.
+
+    The configuration file can specify the preferred style (may be overridden by either
+    of the methods described earlier) and certain style-specific attributes. The following
+    example specifies that the preferred style is the Material style.
+
+    \code
+    [Controls]
+    Style=Material
+    \endcode
+
+    See \l {Qt Quick Controls Configuration File} for more details about the
+    configuration file.
+
+    \section1 Related Information
+    \list
+    \li \l {Basic Style}
+    \li \l {Fusion Style}
+    \li \l {Imagine Style}
+    \li \l {Material Style}
+    \li \l {Universal Style}
+    \li \l {Customizing Qt Quick Controls}
+    \li \l {Using File Selectors with Qt Quick Controls}
+    \li \l {Deploying Qt Quick Controls Applications}
+    \li \l {Qt Quick Controls Configuration File}
+    \li \l {Supported Environment Variables in Qt Quick Controls}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-universal.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-universal.qdoc
new file mode 100644
index 0000000000..4dfdebb963
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-universal.qdoc
@@ -0,0 +1,264 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-universal.html
+    \title Universal Style
+
+    The Universal Style is based on the Microsoft Universal Design Guidelines.
+    \l {detailed-desc-universal}{More...}
+
+    \styleimport {QtQuick.Controls.Universal 2.12} {Qt 5.7}
+
+    \section1 Attached Properties
+
+    \list
+        \li \l {universal-accent-attached-prop}{\b accent} : color
+        \li \l {universal-background-attached-prop}{\b background} : color
+        \li \l {universal-foreground-attached-prop}{\b foreground} : color
+        \li \l {universal-theme-attached-prop}{\b theme} : enumeration
+    \endlist
+
+    \section1 Attached Methods
+
+    \list
+        \li color \l {color-attached-method}{\b color}(enumeration predefined)
+    \endlist
+
+    \section1 Detailed Description
+    \target detailed-desc-universal
+
+    The Universal style is a device-agnostic style based on the
+    \l {https://dev.windows.com/design}{Microsoft Universal Design Guidelines}.
+    The Universal style has been designed to look good on all devices, from
+    phones and tablets to PCs.
+
+    \table
+        \row
+            \li \image qtquickcontrols2-universal-light.png
+                \caption The Universal style in light theme
+            \li \image qtquickcontrols2-universal-dark.png
+                \caption The Universal style in dark theme
+    \endtable
+
+    To run an application with the Universal style, see
+    \l {Using Styles in Qt Quick Controls}.
+
+    \note The Universal style is not a native Windows 10 style. The Universal
+    style is a 100% cross-platform Qt Quick Controls style implementation that
+    follows the Microsoft Universal Design Guidelines. The style runs on any
+    platform, and looks more or less identical everywhere. Minor differences
+    may occur due to differences in available system fonts and font rendering
+    engines.
+
+    \section2 Customization
+
+    The Universal style allows customizing four attributes, \l {universal-theme-attached-prop}{theme},
+    \l {universal-accent-attached-prop}{accent}, \l {universal-foreground-attached-prop}{foreground}, and
+    \l {universal-background-attached-prop}{background}.
+
+    \image qtquickcontrols2-universal-attributes.png
+
+    Both attributes can be specified for any window or item, and they automatically
+    propagate to children in the same manner as \l {Control::font}{fonts}. In the
+    following example, the window and all three radio buttons appear in the dark
+    theme using a violet accent color:
+
+    \table
+        \row
+            \li
+                \qml
+                import QtQuick 2.12
+                import QtQuick.Controls 2.12
+                import QtQuick.Controls.Universal 2.12
+
+                ApplicationWindow {
+                    visible: true
+
+                    Universal.theme: Universal.Dark
+                    Universal.accent: Universal.Violet
+
+                    Column {
+                        anchors.centerIn: parent
+
+                        RadioButton { text: qsTr("Small") }
+                        RadioButton { text: qsTr("Medium");  checked: true }
+                        RadioButton { text: qsTr("Large") }
+                    }
+                }
+                \endqml
+            \li
+                \image qtquickcontrols2-universal-violet.png
+    \endtable
+
+    In addition to specifying the attributes in QML, it is also possible to
+    specify them via environment variables or in a configuration file. Attributes
+    specified in QML take precedence over all other methods.
+
+    \section3 Configuration File
+
+    \include qquickuniversalstyle.qdocinc conf
+
+    See \l {Qt Quick Controls Configuration File} for more details about the
+    configuration file.
+
+    \section3 Environment Variables
+
+    \include qquickuniversalstyle.qdocinc env
+
+    See \l {Supported Environment Variables in Qt Quick Controls} for the full
+    list of supported environment variables.
+
+    \section2 Dependency
+
+    The Universal style must be separately imported to gain access to the
+    attributes that are specific to the Universal style. It should be noted
+    that regardless of the references to the Universal style, the same
+    application code runs with any other style. Universal-specific attributes
+    only have an effect when the application is run with the Universal style.
+
+    If the Universal style is imported in a QML file that is always loaded, the
+    Universal style must be deployed with the application in order to be able
+    to run the application regardless of which style the application is run with.
+    By using \l {Using File Selectors with Qt Quick Controls}{file selectors},
+    style-specific tweaks can be applied without creating a hard dependency to
+    a style.
+
+    \section2 Pre-defined Universal Colors
+
+    Available pre-defined colors:
+    \value Universal.Lime \stylecolor {#A4C400} {}
+    \value Universal.Green \stylecolor {#60A917} {}
+    \value Universal.Emerald \stylecolor {#008A00} {}
+    \value Universal.Teal \stylecolor {#00ABA9} {}
+    \value Universal.Cyan \stylecolor {#1BA1E2} {}
+    \value Universal.Cobalt \stylecolor {#3E65FF} {(default accent)}
+    \value Universal.Indigo \stylecolor {#6A00FF} {}
+    \value Universal.Violet \stylecolor {#AA00FF} {}
+    \value Universal.Pink \stylecolor {#F472D0} {}
+    \value Universal.Magenta \stylecolor {#D80073} {}
+    \value Universal.Crimson \stylecolor {#A20025} {}
+    \value Universal.Red \stylecolor {#E51400} {}
+    \value Universal.Orange \stylecolor {#FA6800} {}
+    \value Universal.Amber \stylecolor {#F0A30A} {}
+    \value Universal.Yellow \stylecolor {#E3C800} {}
+    \value Universal.Brown \stylecolor {#825A2C} {}
+    \value Universal.Olive \stylecolor {#6D8764} {}
+    \value Universal.Steel \stylecolor {#647687} {}
+    \value Universal.Mauve \stylecolor {#76608A} {}
+    \value Universal.Taupe \stylecolor {#87794E} {}
+
+    \b {See also} \l {Basic Style}, \l {Material Style}
+
+    \section1 Attached Property Documentation
+
+    \styleproperty {Universal.accent} {color} {universal-accent-attached-prop}
+    \target universal-accent-attached-prop
+    This attached property holds the accent color of the theme. The property
+    can be attached to any window or item. The value is propagated to children.
+
+    The default value is \c Universal.Cobalt.
+
+    In the following example, the accent color of the highlighted button is
+    changed to \c Universal.Orange:
+
+    \table
+        \row
+            \li
+                \snippet qtquickcontrols2-universal-accent.qml 1
+            \li
+                \image qtquickcontrols2-universal-accent.png
+    \endtable
+
+    \note Even though the accent can be any \l {colorvaluetypedocs}{color}, it is
+    recommended to use one of the \l {pre-defined Universal colors} that have been
+    designed to work well with the rest of the Universal style palette.
+
+    \endstyleproperty
+
+    \styleproperty {Universal.background} {color} {universal-background-attached-prop}
+    \target universal-background-attached-prop
+    This attached property holds the background color of the theme. The property
+    can be attached to any window or item. The value is propagated to children.
+
+    The default value is theme-specific (light or dark).
+
+    In the following example, the background color of the pane is changed to
+    \c Universal.Steel:
+
+    \table
+        \row
+            \li
+                \snippet qtquickcontrols2-universal-background.qml 1
+            \li
+                \image qtquickcontrols2-universal-background.png
+    \endtable
+
+    \endstyleproperty
+
+    \styleproperty {Universal.foreground} {color} {universal-foreground-attached-prop}
+    \target universal-foreground-attached-prop
+    This attached property holds the foreground color of the theme. The property
+    can be attached to any window or item. The value is propagated to children.
+
+    The default value is theme-specific (light or dark).
+
+    In the following example, the foreground color of the button is set to \c
+    Universal.Pink:
+
+    \table
+        \row
+            \li
+                \snippet qtquickcontrols2-universal-foreground.qml 1
+            \li
+                \image qtquickcontrols2-universal-foreground.png
+    \endtable
+
+    \styleproperty {Universal.theme} {enumeration} {universal-theme-attached-prop}
+    \target universal-theme-attached-prop
+    This attached property holds whether the theme is light or dark. The property
+    can be attached to any window or item. The value is propagated to children.
+
+    Available themes:
+    \value Universal.Light Light theme (default)
+    \value Universal.Dark Dark theme
+    \value Universal.System System theme
+
+    Setting the theme to \c System chooses either the light or dark theme based
+    on the system theme colors. However, when reading the value of the theme
+    property, the value is never \c System, but the actual theme.
+
+    In the following example, the theme for both the pane and the button is set
+    to \c Universal.Dark:
+
+    \table
+        \row
+            \li
+                \snippet qtquickcontrols2-universal-theme.qml 1
+            \li
+                \image qtquickcontrols2-universal-theme.png
+    \endtable
+
+    \endstyleproperty
+
+    \section1 Attached Method Documentation
+
+    \stylemethod {color} {color} {enumeration} {predefined} {color-attached-method}
+    \target color-attached-method
+    This attached method returns the effective color value of the specified
+    \l {pre-defined Universal colors}{pre-defined Universal color}.
+
+    \qml
+    Rectangle {
+        color: Universal.color(Universal.Red)
+    }
+    \endqml
+
+    \endstylemethod
+
+    \section1 Related Information
+
+    \list
+      \li \l{Styling Qt Quick Controls}
+    \endlist
+*/
diff --git a/src/quickcontrols/doc/src/qtquickcontrols2-windows.qdoc b/src/quickcontrols/doc/src/qtquickcontrols2-windows.qdoc
new file mode 100644
index 0000000000..e068f3c86d
--- /dev/null
+++ b/src/quickcontrols/doc/src/qtquickcontrols2-windows.qdoc
@@ -0,0 +1,47 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquickcontrols2-windows.html
+    \title Windows Style
+
+    The Windows style is a style that looks native on Windows.
+    \l {detailed-desc-Windows}{More...}
+
+    \styleimport {QtQuick.Controls.Windows} {Qt 6.0}
+
+    \target detailed-desc-Windows
+
+    The Windows style is a style that looks native on Windows. The controls are drawn run-time using
+    native libraries, and is therefore only available for applications running on Windows.
+
+    \note Be aware that the apperance of this style can change from one minor Qt version to the
+    next, to better blend in with native applications on the platform.
+
+    \table
+        \row
+            \li \image qtquickcontrols2-windows.png
+                \caption The Windows style
+    \endtable
+
+    To run an application with the Windows style, see
+    \l {Using Styles in Qt Quick Controls}.
+
+    \section2 Current state
+
+    The Windows style is under development, and some controls are not yet supported. Those
+    controls are: \l BusyIndicator, \l DelayButton, \l PageIndicator, \l RangeSlider, \l Switch, \l TabBar and
+    \l Tumbler. Those will fall back to use the \l {Fusion Style}.
+
+    \section2 Customization
+
+    The goal of the Windows style is to for the controls look and feel as similar as possible to the
+    native controls on Windows. The style will follow the theme and colors configured globally from
+    Windows Settings, and does not come with a separate customization API on top of that.
+
+    \note The Windows style is not suitable for \l {Customizing Qt Quick Controls}{customizing}.
+    The main reason is that it sometimes draw both the contents and the background
+    onto a single background item, which will not look good together with a custom contentItem.
+    It also tends to use padding and inset values that are different from the other styles.
+    \include customizing-native-styles.qdocinc
+*/
diff --git a/src/quickcontrols/fusion/ApplicationWindow.qml b/src/quickcontrols/fusion/ApplicationWindow.qml
new file mode 100644
index 0000000000..fbd1cc2e76
--- /dev/null
+++ b/src/quickcontrols/fusion/ApplicationWindow.qml
@@ -0,0 +1,14 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Templates as T
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.ApplicationWindow {
+    id: window
+
+    color: window.palette.window
+}
diff --git a/src/quickcontrols/fusion/BusyIndicator.qml b/src/quickcontrols/fusion/BusyIndicator.qml
new file mode 100644
index 0000000000..dcd2f23f49
--- /dev/null
+++ b/src/quickcontrols/fusion/BusyIndicator.qml
@@ -0,0 +1,37 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.BusyIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+
+    contentItem: BusyIndicatorImpl {
+        implicitWidth: 28
+        implicitHeight: 28
+        color: control.palette.text
+
+        running: control.running
+        opacity: control.running ? 1 : 0
+        Behavior on opacity { OpacityAnimator { duration: 250 } }
+
+        RotationAnimator on rotation {
+            running: control.running || control.contentItem.visible
+            from: 0
+            to: 360
+            duration: 1000
+            loops: Animation.Infinite
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/Button.qml b/src/quickcontrols/fusion/Button.qml
new file mode 100644
index 0000000000..2ee8e12373
--- /dev/null
+++ b/src/quickcontrols/fusion/Button.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.Button {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 4
+    spacing: 6
+
+    icon.width: 16
+    icon.height: 16
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.buttonText
+    }
+
+    background: ButtonPanel {
+        implicitWidth: 80
+        implicitHeight: 24
+
+        control: control
+        visible: !control.flat || control.down || control.checked || control.highlighted || control.visualFocus
+            || (enabled && control.hovered)
+    }
+}
diff --git a/src/quickcontrols/fusion/CMakeLists.txt b/src/quickcontrols/fusion/CMakeLists.txt
new file mode 100644
index 0000000000..69f8f5f96d
--- /dev/null
+++ b/src/quickcontrols/fusion/CMakeLists.txt
@@ -0,0 +1,151 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2fusionstyleplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "ApplicationWindow.qml"
+    "BusyIndicator.qml"
+    "Button.qml"
+    "CheckBox.qml"
+    "CheckDelegate.qml"
+    "ComboBox.qml"
+    "DelayButton.qml"
+    "Dial.qml"
+    "Dialog.qml"
+    "DialogButtonBox.qml"
+    "Drawer.qml"
+    "Frame.qml"
+    "GroupBox.qml"
+    "HorizontalHeaderView.qml"
+    "ItemDelegate.qml"
+    "Label.qml"
+    "Menu.qml"
+    "MenuBar.qml"
+    "MenuBarItem.qml"
+    "MenuItem.qml"
+    "MenuSeparator.qml"
+    "Page.qml"
+    "PageIndicator.qml"
+    "Pane.qml"
+    "Popup.qml"
+    "ProgressBar.qml"
+    "RadioButton.qml"
+    "RadioDelegate.qml"
+    "RangeSlider.qml"
+    "RoundButton.qml"
+    "ScrollBar.qml"
+    "ScrollView.qml"
+    "ScrollIndicator.qml"
+    "SelectionRectangle.qml"
+    "Slider.qml"
+    "SpinBox.qml"
+    "SplitView.qml"
+    "SwipeDelegate.qml"
+    "SwitchDelegate.qml"
+    "Switch.qml"
+    "TabBar.qml"
+    "TabButton.qml"
+    "TextArea.qml"
+    "TextField.qml"
+    "ToolBar.qml"
+    "ToolButton.qml"
+    "ToolSeparator.qml"
+    "ToolTip.qml"
+    "TreeViewDelegate.qml"
+    "Tumbler.qml"
+    "VerticalHeaderView.qml"
+)
+set_source_files_properties(DelayButton.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.2;6.0"
+)
+set_source_files_properties(Dialog.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(DialogButtonBox.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(HorizontalHeaderView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.15;6.0"
+)
+set_source_files_properties(MenuBar.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.3;6.0"
+)
+set_source_files_properties(MenuBarItem.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.3;6.0"
+)
+set_source_files_properties(MenuSeparator.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(RoundButton.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(SplitView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.13;6.0"
+)
+set_source_files_properties(ToolSeparator.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(VerticalHeaderView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.15;6.0"
+)
+
+qt_internal_add_qml_module(qtquickcontrols2fusionstyleplugin
+    URI "QtQuick.Controls.Fusion"
+    VERSION "${PROJECT_VERSION}"
+    PAST_MAJOR_VERSIONS 2
+    CLASS_NAME QtQuickControls2FusionStylePlugin
+    DEPENDENCIES
+        QtQuick/auto
+    IMPORTS
+        QtQuick.Controls.Basic/auto
+    PLUGIN_TARGET qtquickcontrols2fusionstyleplugin
+    NO_PLUGIN_OPTIONAL
+    NO_GENERATE_PLUGIN_SOURCE
+    SOURCES
+        qquickfusionstyle.cpp qquickfusionstyle_p.h
+        qquickfusiontheme.cpp qquickfusiontheme_p.h
+        qtquickcontrols2fusionstyleplugin.cpp
+    QML_FILES
+        ${qml_files}
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::GuiPrivate
+        Qt::QmlPrivate
+        Qt::QuickControls2Private
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+)
+
+qt_internal_add_resource(qtquickcontrols2fusionstyleplugin "qtquickcontrols2fusionstyle"
+    PREFIX
+        "/qt-project.org/imports/QtQuick/Controls/Fusion"
+    FILES
+        "images/arrow.png"
+        "images/arrow@2x.png"
+        "images/arrow@3x.png"
+        "images/arrow@4x.png"
+        "images/checkmark.png"
+        "images/checkmark@2x.png"
+        "images/checkmark@3x.png"
+        "images/checkmark@4x.png"
+        "images/progressmask.png"
+        "images/progressmask@2x.png"
+        "images/progressmask@3x.png"
+        "images/progressmask@4x.png"
+)
+
+add_subdirectory(impl)
+
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2fusionstyleplugin quickwindow)
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2fusionstyleplugin
+                                              qtquickcontrols2fusionstyleimplplugin)
+
+# Basic style is the required fallback style.
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2fusionstyleplugin
+                                              qtquickcontrols2basicstyleplugin)
diff --git a/src/quickcontrols/fusion/CheckBox.qml b/src/quickcontrols/fusion/CheckBox.qml
new file mode 100644
index 0000000000..414414804d
--- /dev/null
+++ b/src/quickcontrols/fusion/CheckBox.qml
@@ -0,0 +1,38 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.CheckBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    indicator: CheckIndicator {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+}
diff --git a/src/quickcontrols/fusion/CheckDelegate.qml b/src/quickcontrols/fusion/CheckDelegate.qml
new file mode 100644
index 0000000000..f14deaa16a
--- /dev/null
+++ b/src/quickcontrols/fusion/CheckDelegate.qml
@@ -0,0 +1,53 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.CheckDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 16
+    icon.height: 16
+
+    contentItem: IconLabel {
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.highlighted ? Fusion.highlightedText(control.palette) : control.palette.text
+    }
+
+    indicator: CheckIndicator {
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        control: control
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 20
+        color: control.down ? Fusion.buttonColor(control.palette, false, true, true)
+                            : control.highlighted ? Fusion.highlight(control.palette) : control.palette.base
+    }
+}
diff --git a/src/quickcontrols/fusion/ComboBox.qml b/src/quickcontrols/fusion/ComboBox.qml
new file mode 100644
index 0000000000..6caa7d3f94
--- /dev/null
+++ b/src/quickcontrols/fusion/ComboBox.qml
@@ -0,0 +1,140 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.ComboBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+    rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+
+    delegate: MenuItem {
+        width: ListView.view.width
+        text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
+        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
+        highlighted: control.highlightedIndex === index
+        hoverEnabled: control.hoverEnabled
+    }
+
+    indicator: ColorImage {
+        x: control.mirrored ? control.padding : control.width - width - control.padding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        color: control.editable ? control.palette.text : control.palette.buttonText
+        source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/arrow.png"
+        width: 20
+        fillMode: Image.Pad
+    }
+
+    contentItem: T.TextField {
+        topPadding: 4
+        leftPadding: 4 - control.padding
+        rightPadding: 4 - control.padding
+        bottomPadding: 4
+
+        text: control.editable ? control.editText : control.displayText
+
+        enabled: control.editable
+        autoScroll: control.editable
+        readOnly: control.down
+        inputMethodHints: control.inputMethodHints
+        validator: control.validator
+        selectByMouse: control.selectTextByMouse
+
+        color: control.editable ? control.palette.text : control.palette.buttonText
+        selectionColor: control.palette.highlight
+        selectedTextColor: control.palette.highlightedText
+        verticalAlignment: Text.AlignVCenter
+
+        background: PaddedRectangle {
+            clip: true
+            radius: 2
+            padding: 1
+            leftPadding: control.mirrored ? -2 : padding
+            rightPadding: !control.mirrored ? -2 : padding
+            color: control.palette.base
+            visible: control.editable && !control.flat
+
+            Rectangle {
+                x: parent.width - width
+                y: 1
+                width: 1
+                height: parent.height - 2
+                color: Fusion.buttonOutline(control.palette, control.activeFocus, control.enabled)
+            }
+
+            Rectangle {
+                x: 1
+                y: 1
+                width: parent.width - 3
+                height: 1
+                color: Fusion.topShadow
+            }
+        }
+
+        Rectangle {
+            x: 1 - control.leftPadding
+            y: 1
+            width: control.width - 2
+            height: control.height - 2
+            color: "transparent"
+            border.color: Color.transparent(Fusion.highlightedOutline(control.palette), 40 / 255)
+            visible: control.activeFocus
+            radius: 1.7
+        }
+    }
+
+    background: ButtonPanel {
+        implicitWidth: 120
+        implicitHeight: 24
+
+        control: control
+        visible: !control.flat || control.down
+        // ### TODO: fix control.contentItem.activeFocus
+        highlighted: control.visualFocus || control.contentItem.activeFocus
+    }
+
+    popup: T.Popup {
+        width: control.width
+        height: Math.min(contentItem.implicitHeight + 2, control.Window.height - topMargin - bottomMargin)
+        topMargin: 6
+        bottomMargin: 6
+        padding: 1
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
+            highlightRangeMode: ListView.ApplyRange
+            highlightMoveDuration: 0
+
+            T.ScrollBar.vertical: ScrollBar { }
+        }
+
+        background: Rectangle {
+            color: control.popup.palette.window
+            border.color: Fusion.outline(control.palette)
+
+            Rectangle {
+                z: -1
+                x: 1; y: 1
+                width: parent.width
+                height: parent.height
+                color: control.palette.shadow
+                opacity: 0.2
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/DelayButton.qml b/src/quickcontrols/fusion/DelayButton.qml
new file mode 100644
index 0000000000..8dde74f468
--- /dev/null
+++ b/src/quickcontrols/fusion/DelayButton.qml
@@ -0,0 +1,82 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.DelayButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+
+    transition: Transition {
+        NumberAnimation {
+            duration: control.delay * (control.pressed ? 1.0 - control.progress : 0.3 * control.progress)
+        }
+    }
+
+    contentItem: ItemGroup {
+        ClippedText {
+            clip: control.progress > 0
+            clipX: -control.leftPadding + (control.mirrored ? 0 : control.progress * control.width)
+            clipWidth: control.width
+            visible: control.mirrored ? control.progress > 0 : control.progress < 1
+
+            text: control.text
+            font: control.font
+            color: control.mirrored ? control.palette.brightText : control.palette.buttonText
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
+
+        ClippedText {
+            clip: control.progress > 0
+            clipX: -control.leftPadding
+            clipWidth: (control.mirrored ? 1.0 - control.progress : control.progress) * control.width
+            visible: control.mirrored ? control.progress < 1 : control.progress > 0
+
+            text: control.text
+            font: control.font
+            color: control.mirrored ? control.palette.buttonText : control.palette.brightText
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
+    }
+
+    background: ButtonPanel {
+        implicitWidth: 80
+        implicitHeight: 24
+
+        control: control
+        highlighted: false
+        scale: control.mirrored ? -1 : 1
+
+        Rectangle {
+            width: control.progress * parent.width
+            height: parent.height
+
+            radius: 2
+            border.color: Qt.darker(Fusion.highlight(control.palette), 1.4)
+            gradient: Gradient {
+                GradientStop {
+                    position: 0
+                    color: Qt.lighter(Fusion.highlight(control.palette), 1.2)
+                }
+                GradientStop {
+                    position: 1
+                    color: Fusion.highlight(control.palette)
+                }
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/Dial.qml b/src/quickcontrols/fusion/Dial.qml
new file mode 100644
index 0000000000..7fa0af3379
--- /dev/null
+++ b/src/quickcontrols/fusion/Dial.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.Dial {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    background: DialImpl {
+        implicitWidth: 100
+        implicitHeight: 100
+        highlight: control.visualFocus
+    }
+
+    handle: KnobImpl {
+        x: control.background.x + control.background.width / 2 - width / 2
+        y: control.background.y + control.background.height / 2 - height / 2
+        width: control.width / 7
+        height: control.height / 7
+        transform: [
+            Translate {
+                y: -Math.min(control.background.width, control.background.height) * 0.42 + control.handle.height
+            },
+            Rotation {
+                angle: control.angle
+                origin.x: control.handle.width / 2
+                origin.y: control.handle.height / 2
+            }
+        ]
+    }
+}
diff --git a/src/quickcontrols/fusion/Dialog.qml b/src/quickcontrols/fusion/Dialog.qml
new file mode 100644
index 0000000000..f17321bcc0
--- /dev/null
+++ b/src/quickcontrols/fusion/Dialog.qml
@@ -0,0 +1,66 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.Dialog {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitHeaderWidth,
+                            implicitFooterWidth)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding
+                             + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+                             + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
+
+    padding: 6
+
+    background: Rectangle {
+        color: control.palette.window
+        border.color: control.palette.mid
+        radius: 2
+
+        Rectangle {
+            z: -1
+            x: 1; y: 1
+            width: parent.width
+            height: parent.height
+            color: control.palette.shadow
+            opacity: 0.2
+            radius: 2
+        }
+    }
+
+    header: Label {
+        text: control.title
+        visible: control.title
+        elide: Label.ElideRight
+        font.bold: true
+        padding: 6
+        background: Rectangle {
+            x: 1; y: 1
+            width: parent.width - 2
+            height: parent.height - 1
+            color: control.palette.window
+            radius: 2
+        }
+    }
+
+    footer: DialogButtonBox {
+        visible: count > 0
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: Fusion.topShadow
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Fusion.topShadow
+    }
+}
diff --git a/src/quickcontrols/fusion/DialogButtonBox.qml b/src/quickcontrols/fusion/DialogButtonBox.qml
new file mode 100644
index 0000000000..566058fa73
--- /dev/null
+++ b/src/quickcontrols/fusion/DialogButtonBox.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.DialogButtonBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 6
+    padding: 6
+    alignment: Qt.AlignRight
+
+    delegate: Button { }
+
+    contentItem: ListView {
+        implicitWidth: contentWidth
+        model: control.contentModel
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        snapMode: ListView.SnapToItem
+    }
+
+    background: Rectangle {
+        implicitHeight: 32
+        x: 1; y: 1
+        width: parent.width - 2
+        height: parent.height - 2
+        color: control.palette.window
+        radius: 2
+    }
+}
diff --git a/src/quickcontrols/fusion/Drawer.qml b/src/quickcontrols/fusion/Drawer.qml
new file mode 100644
index 0000000000..713ac0c076
--- /dev/null
+++ b/src/quickcontrols/fusion/Drawer.qml
@@ -0,0 +1,55 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.Drawer {
+    id: control
+
+    parent: T.Overlay.overlay
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: control.edge === Qt.BottomEdge
+    leftPadding: control.edge === Qt.RightEdge
+    rightPadding: control.edge === Qt.LeftEdge
+    bottomPadding: control.edge === Qt.TopEdge
+
+    enter: Transition { SmoothedAnimation { velocity: 5 } }
+    exit: Transition { SmoothedAnimation { velocity: 5 } }
+
+    background: Rectangle {
+        color: control.palette.window
+        readonly property bool horizontal: control.edge === Qt.LeftEdge || control.edge === Qt.RightEdge
+        Rectangle {
+            width: parent.horizontal ? 1 : parent.width
+            height: parent.horizontal ? parent.height : 1
+            color: control.palette.mid
+            x: control.edge === Qt.LeftEdge ? parent.width - 1 : 0
+            y: control.edge === Qt.TopEdge ? parent.height - 1 : 0
+        }
+        Rectangle {
+            width: parent.horizontal ? 1 : parent.width
+            height: parent.horizontal ? parent.height : 1
+            color: control.palette.shadow
+            opacity: 0.2
+            x: control.edge === Qt.LeftEdge ? parent.width : 0
+            y: control.edge === Qt.TopEdge ? parent.height : 0
+        }
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: Fusion.topShadow
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Fusion.topShadow
+    }
+}
diff --git a/src/quickcontrols/fusion/Frame.qml b/src/quickcontrols/fusion/Frame.qml
new file mode 100644
index 0000000000..0512639f4e
--- /dev/null
+++ b/src/quickcontrols/fusion/Frame.qml
@@ -0,0 +1,24 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.Frame {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 9
+
+    background: Rectangle {
+        color: "transparent"
+        border.color: Qt.lighter(Fusion.outline(control.palette), 1.08)
+    }
+}
diff --git a/src/quickcontrols/fusion/GroupBox.qml b/src/quickcontrols/fusion/GroupBox.qml
new file mode 100644
index 0000000000..5e949dc5cb
--- /dev/null
+++ b/src/quickcontrols/fusion/GroupBox.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.GroupBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitLabelWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 6
+    padding: 9
+    topPadding: padding + (implicitLabelWidth > 0 ? implicitLabelHeight + spacing : 0)
+
+    label: Text {
+        x: control.leftPadding
+        width: control.availableWidth
+
+        text: control.title
+        font: control.font
+        color: control.palette.windowText
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: Rectangle {
+        y: control.topPadding - control.bottomPadding
+        width: parent.width
+        height: parent.height - control.topPadding + control.bottomPadding
+
+        radius: 2
+        color: Color.transparent("black", 3 / 255)
+        border.color: Qt.lighter(Fusion.outline(control.palette), 1.08)
+    }
+}
diff --git a/src/quickcontrols/fusion/HorizontalHeaderView.qml b/src/quickcontrols/fusion/HorizontalHeaderView.qml
new file mode 100644
index 0000000000..aafe0fb2fd
--- /dev/null
+++ b/src/quickcontrols/fusion/HorizontalHeaderView.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.HorizontalHeaderView {
+    id: control
+
+    implicitWidth: syncView ? syncView.width : 0
+    implicitHeight: contentHeight
+
+    delegate: Rectangle {
+        // Qt6: add cellPadding (and font etc) as public API in headerview
+        readonly property real cellPadding: 8
+
+        implicitWidth: text.implicitWidth + (cellPadding * 2)
+        implicitHeight: Math.max(control.height, text.implicitHeight + (cellPadding * 2))
+        border.color: "#cacaca"
+
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: "#fbfbfb"
+            }
+            GradientStop {
+                position: 1
+                color: "#e0dfe0"
+            }
+        }
+
+        Text {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            height: parent.height
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: "#ff26282a"
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/ItemDelegate.qml b/src/quickcontrols/fusion/ItemDelegate.qml
new file mode 100644
index 0000000000..5a3e9c45ea
--- /dev/null
+++ b/src/quickcontrols/fusion/ItemDelegate.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.ItemDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 16
+    icon.height: 16
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.highlighted ? Fusion.highlightedText(control.palette) : control.palette.text
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 20
+        color: control.down ? Fusion.buttonColor(control.palette, false, true, true)
+                            : control.highlighted ? Fusion.highlight(control.palette) : control.palette.base
+    }
+}
diff --git a/src/quickcontrols/fusion/Label.qml b/src/quickcontrols/fusion/Label.qml
new file mode 100644
index 0000000000..9a715d9ed8
--- /dev/null
+++ b/src/quickcontrols/fusion/Label.qml
@@ -0,0 +1,15 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.Label {
+    id: control
+
+    color: control.palette.windowText
+    linkColor: control.palette.link
+}
diff --git a/src/quickcontrols/fusion/Menu.qml b/src/quickcontrols/fusion/Menu.qml
new file mode 100644
index 0000000000..e0f565a69b
--- /dev/null
+++ b/src/quickcontrols/fusion/Menu.qml
@@ -0,0 +1,61 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+import QtQuick.Window
+
+T.Menu {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    margins: 0
+    padding: 1
+    overlap: 2
+
+    delegate: MenuItem { }
+
+    contentItem: ListView {
+        implicitHeight: contentHeight
+        model: control.contentModel
+        interactive: Window.window
+                        ? contentHeight + control.topPadding + control.bottomPadding > Window.window.height
+                        : false
+        clip: true
+        currentIndex: control.currentIndex
+
+        ScrollIndicator.vertical: ScrollIndicator {}
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 20
+
+        color: control.palette.base
+        border.color: Fusion.outline(control.palette)
+
+        Rectangle {
+            z: -1
+            x: 1; y: 1
+            width: parent.width
+            height: parent.height
+            color: control.palette.shadow
+            opacity: 0.2
+        }
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: Fusion.topShadow
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Fusion.topShadow
+    }
+}
diff --git a/src/quickcontrols/fusion/MenuBar.qml b/src/quickcontrols/fusion/MenuBar.qml
new file mode 100644
index 0000000000..6e039d8a3e
--- /dev/null
+++ b/src/quickcontrols/fusion/MenuBar.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.MenuBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    delegate: MenuBarItem { }
+
+    contentItem: Row {
+        spacing: control.spacing
+        Repeater {
+            model: control.contentModel
+        }
+    }
+
+    background: Rectangle {
+        implicitHeight: 20
+
+        color: control.palette.window
+
+        Rectangle {
+            y: parent.height - height
+            width: parent.width
+            height: 1
+            color: Fusion.mergedColors(Qt.darker(control.palette.window, 1.2),
+                                       Qt.lighter(Fusion.outline(control.palette), 1.4), 60)
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/MenuBarItem.qml b/src/quickcontrols/fusion/MenuBarItem.qml
new file mode 100644
index 0000000000..299c34416b
--- /dev/null
+++ b/src/quickcontrols/fusion/MenuBarItem.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.MenuBarItem {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 16
+    icon.height: 16
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.down || control.highlighted ? Fusion.highlightedText(control.palette) : control.palette.text
+    }
+
+    background: Rectangle {
+        implicitWidth: 20
+        implicitHeight: 20
+
+        color: Fusion.highlight(control.palette)
+        visible: control.down || control.highlighted
+    }
+}
diff --git a/src/quickcontrols/fusion/MenuItem.qml b/src/quickcontrols/fusion/MenuItem.qml
new file mode 100644
index 0000000000..ce701b74f4
--- /dev/null
+++ b/src/quickcontrols/fusion/MenuItem.qml
@@ -0,0 +1,69 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.MenuItem {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 16
+    icon.height: 16
+
+    contentItem: IconLabel {
+        readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
+        readonly property real indicatorPadding: control.checkable && control.indicator ? control.indicator.width + control.spacing : 0
+        leftPadding: !control.mirrored ? indicatorPadding : arrowPadding
+        rightPadding: control.mirrored ? indicatorPadding : arrowPadding
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.down || control.highlighted ? Fusion.highlightedText(control.palette) : control.palette.text
+    }
+
+    arrow: ColorImage {
+        x: control.mirrored ? control.padding : control.width - width - control.padding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        width: 20
+
+        visible: control.subMenu
+        rotation: control.mirrored ? 90 : -90
+        color: control.down || control.hovered || control.highlighted ? Fusion.highlightedText(control.palette) : control.palette.text
+        source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/arrow.png"
+        fillMode: Image.Pad
+    }
+
+    indicator: CheckIndicator {
+        x: control.mirrored ? control.width - width - control.rightPadding : control.leftPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        control: control
+        visible: control.checkable
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 20
+
+        color: Fusion.highlight(control.palette)
+        visible: control.down || control.highlighted
+    }
+}
diff --git a/src/quickcontrols/fusion/MenuSeparator.qml b/src/quickcontrols/fusion/MenuSeparator.qml
new file mode 100644
index 0000000000..b27dcf4a59
--- /dev/null
+++ b/src/quickcontrols/fusion/MenuSeparator.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.MenuSeparator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 5
+    verticalPadding: 1
+
+    contentItem: Rectangle {
+        implicitWidth: 188
+        implicitHeight: 1
+        color: Qt.lighter(Fusion.darkShade, 1.06)
+    }
+}
diff --git a/src/quickcontrols/fusion/Page.qml b/src/quickcontrols/fusion/Page.qml
new file mode 100644
index 0000000000..65a752318d
--- /dev/null
+++ b/src/quickcontrols/fusion/Page.qml
@@ -0,0 +1,25 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.Page {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitHeaderWidth,
+                            implicitFooterWidth)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding
+                             + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+                             + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
+
+    background: Rectangle {
+        color: control.palette.window
+    }
+}
diff --git a/src/quickcontrols/fusion/PageIndicator.qml b/src/quickcontrols/fusion/PageIndicator.qml
new file mode 100644
index 0000000000..c6f235a9da
--- /dev/null
+++ b/src/quickcontrols/fusion/PageIndicator.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.PageIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 4
+    spacing: 4
+
+    delegate: Rectangle {
+        implicitWidth: 6
+        implicitHeight: 6
+
+        radius: width / 2
+        color: control.palette.shadow
+
+        opacity: index === currentIndex ? 0.95 : pressed ? 0.75 : 0.45
+
+        required property int index
+
+        Behavior on opacity { OpacityAnimator { duration: 100 } }
+    }
+
+    contentItem: Row {
+        spacing: control.spacing
+
+        Repeater {
+            model: control.count
+            delegate: control.delegate
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/Pane.qml b/src/quickcontrols/fusion/Pane.qml
new file mode 100644
index 0000000000..366c2fffe0
--- /dev/null
+++ b/src/quickcontrols/fusion/Pane.qml
@@ -0,0 +1,23 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.Pane {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 9
+
+    background: Rectangle {
+        color: control.palette.window
+    }
+}
diff --git a/src/quickcontrols/fusion/Popup.qml b/src/quickcontrols/fusion/Popup.qml
new file mode 100644
index 0000000000..d669b5e758
--- /dev/null
+++ b/src/quickcontrols/fusion/Popup.qml
@@ -0,0 +1,33 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.Popup {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 6
+
+    background: Rectangle {
+        color: control.palette.window
+        border.color: control.palette.mid
+        radius: 2
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: Fusion.topShadow
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Fusion.topShadow
+    }
+}
diff --git a/src/quickcontrols/fusion/ProgressBar.qml b/src/quickcontrols/fusion/ProgressBar.qml
new file mode 100644
index 0000000000..c05f1898db
--- /dev/null
+++ b/src/quickcontrols/fusion/ProgressBar.qml
@@ -0,0 +1,83 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.ProgressBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    contentItem: Item {
+        implicitWidth: 120
+        implicitHeight: 24
+        scale: control.mirrored ? -1 : 1
+
+        Rectangle {
+            height: parent.height
+            width: (control.indeterminate ? 1.0 : control.position) * parent.width
+
+            radius: 2
+            border.color: Qt.darker(Fusion.highlight(control.palette), 1.4)
+            gradient: Gradient {
+                GradientStop {
+                    position: 0
+                    color: Qt.lighter(Fusion.highlight(control.palette), 1.2)
+                }
+                GradientStop {
+                    position: 1
+                    color: Fusion.highlight(control.palette)
+                }
+            }
+        }
+
+        Item {
+            x: 1; y: 1
+            width: parent.width - 2
+            height: parent.height - 2
+            visible: control.indeterminate
+            clip: true
+
+            ColorImage {
+                width: Math.ceil(parent.width / implicitWidth + 1) * implicitWidth
+                height: parent.height
+
+                mirror: control.mirrored
+                fillMode: Image.TileHorizontally
+                source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/progressmask.png"
+                color: Color.transparent(Qt.lighter(Fusion.highlight(control.palette), 1.2), 160 / 255)
+
+                visible: control.indeterminate
+                NumberAnimation on x {
+                    running: control.indeterminate && control.visible
+                    from: -31 // progressmask.png width
+                    to: 0
+                    loops: Animation.Infinite
+                    duration: 750
+                }
+            }
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: 24
+
+        radius: 2
+        color: control.palette.base
+        border.color: Fusion.outline(control.palette)
+
+        Rectangle {
+            x: 1; y: 1; height: 1
+            width: parent.width - 2
+            color: Fusion.topShadow
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/RadioButton.qml b/src/quickcontrols/fusion/RadioButton.qml
new file mode 100644
index 0000000000..2553679bc4
--- /dev/null
+++ b/src/quickcontrols/fusion/RadioButton.qml
@@ -0,0 +1,38 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.RadioButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    indicator: RadioIndicator {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+}
diff --git a/src/quickcontrols/fusion/RadioDelegate.qml b/src/quickcontrols/fusion/RadioDelegate.qml
new file mode 100644
index 0000000000..f99cf81d21
--- /dev/null
+++ b/src/quickcontrols/fusion/RadioDelegate.qml
@@ -0,0 +1,53 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.RadioDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 16
+    icon.height: 16
+
+    contentItem: IconLabel {
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.highlighted ? Fusion.highlightedText(control.palette) : control.palette.text
+    }
+
+    indicator: RadioIndicator {
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        control: control
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 20
+        color: control.down ? Fusion.buttonColor(control.palette, false, true, true)
+                            : control.highlighted ? Fusion.highlight(control.palette) : control.palette.base
+    }
+}
diff --git a/src/quickcontrols/fusion/RangeSlider.qml b/src/quickcontrols/fusion/RangeSlider.qml
new file mode 100644
index 0000000000..b9052c04eb
--- /dev/null
+++ b/src/quickcontrols/fusion/RangeSlider.qml
@@ -0,0 +1,48 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.RangeSlider {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            Math.max(first.implicitHandleWidth,
+                                     second.implicitHandleWidth) + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             Math.max(first.implicitHandleHeight,
+                                      second.implicitHandleHeight) + topPadding + bottomPadding)
+
+    first.handle: SliderHandle {
+        x: control.leftPadding + Math.round(control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + Math.round(control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
+
+        palette: control.palette
+        pressed: control.first.pressed
+        hovered: control.first.hovered
+        vertical: control.vertical
+        visualFocus: activeFocus
+    }
+
+    second.handle: SliderHandle {
+        x: control.leftPadding + Math.round(control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + Math.round(control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
+
+        palette: control.palette
+        pressed: control.second.pressed
+        hovered: control.second.hovered
+        vertical: control.vertical
+        visualFocus: activeFocus
+    }
+
+    background: SliderGroove {
+        control: control
+        offset: control.first.position
+        progress: control.second.position
+        visualProgress: control.second.visualPosition
+    }
+}
diff --git a/src/quickcontrols/fusion/RoundButton.qml b/src/quickcontrols/fusion/RoundButton.qml
new file mode 100644
index 0000000000..1952e2ccac
--- /dev/null
+++ b/src/quickcontrols/fusion/RoundButton.qml
@@ -0,0 +1,67 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.RoundButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 16
+    icon.height: 16
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.buttonText
+    }
+
+    background: Rectangle {
+        implicitWidth: 32
+        implicitHeight: 32
+        visible: !control.flat || control.down || control.checked
+
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: control.down || control.checked
+                    ? Fusion.buttonColor(control.palette, control.highlighted, control.down || control.checked, control.enabled && control.hovered)
+                    : Fusion.gradientStart(Fusion.buttonColor(control.palette, control.highlighted, control.down, control.enabled && control.hovered))
+            }
+            GradientStop {
+                position: 1
+                color: control.down || control.checked
+                    ? Fusion.buttonColor(control.palette, control.highlighted, control.down || control.checked, control.enabled && control.hovered)
+                    : Fusion.gradientStop(Fusion.buttonColor(control.palette, control.highlighted, control.down, control.enabled && control.hovered))
+            }
+        }
+
+        radius: control.radius
+        border.color: Fusion.buttonOutline(control.palette, control.highlighted || control.visualFocus, control.enabled)
+
+        Rectangle {
+            x: 1; y: 1
+            width: parent.width - 2
+            height: parent.height - 2
+            border.color: Fusion.innerContrastLine
+            color: "transparent"
+            radius: control.radius
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/ScrollBar.qml b/src/quickcontrols/fusion/ScrollBar.qml
new file mode 100644
index 0000000000..616050df69
--- /dev/null
+++ b/src/quickcontrols/fusion/ScrollBar.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.ScrollBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 2
+    visible: control.policy !== T.ScrollBar.AlwaysOff
+    minimumSize: orientation === Qt.Horizontal ? height / width : width / height
+
+    contentItem: Rectangle {
+        implicitWidth: control.interactive ? 6 : 2
+        implicitHeight: control.interactive ? 6 : 2
+
+        radius: width / 2
+        color: control.pressed ? control.palette.dark : control.palette.mid
+        opacity: 0.0
+
+        states: State {
+            name: "active"
+            when: control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0)
+            PropertyChanges { control.contentItem.opacity: 0.75 }
+        }
+
+        transitions: Transition {
+            from: "active"
+            SequentialAnimation {
+                PauseAnimation { duration: 450 }
+                NumberAnimation { target: control.contentItem; duration: 200; property: "opacity"; to: 0.0 }
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/ScrollIndicator.qml b/src/quickcontrols/fusion/ScrollIndicator.qml
new file mode 100644
index 0000000000..a324c049e3
--- /dev/null
+++ b/src/quickcontrols/fusion/ScrollIndicator.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.ScrollIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 2
+
+    contentItem: Rectangle {
+        implicitWidth: 2
+        implicitHeight: 2
+
+        color: control.palette.mid
+        visible: control.size < 1.0
+        opacity: 0.0
+
+        states: State {
+            name: "active"
+            when: control.active
+            PropertyChanges { control.contentItem.opacity: 0.75 }
+        }
+
+        transitions: [
+            Transition {
+                from: "active"
+                SequentialAnimation {
+                    PauseAnimation { duration: 450 }
+                    NumberAnimation { target: control.contentItem; duration: 200; property: "opacity"; to: 0.0 }
+                }
+            }
+        ]
+    }
+}
diff --git a/src/quickcontrols/fusion/ScrollView.qml b/src/quickcontrols/fusion/ScrollView.qml
new file mode 100644
index 0000000000..60789313c9
--- /dev/null
+++ b/src/quickcontrols/fusion/ScrollView.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ScrollView {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    ScrollBar.vertical: ScrollBar {
+        parent: control
+        x: control.mirrored ? 0 : control.width - width
+        y: control.topPadding
+        height: control.availableHeight
+        active: control.ScrollBar.horizontal.active
+    }
+
+    ScrollBar.horizontal: ScrollBar {
+        parent: control
+        x: control.leftPadding
+        y: control.height - height
+        width: control.availableWidth
+        active: control.ScrollBar.vertical.active
+    }
+}
diff --git a/src/quickcontrols/fusion/SelectionRectangle.qml b/src/quickcontrols/fusion/SelectionRectangle.qml
new file mode 100644
index 0000000000..762fec30c8
--- /dev/null
+++ b/src/quickcontrols/fusion/SelectionRectangle.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.SelectionRectangle {
+    id: control
+
+    topLeftHandle: Item {
+        width: 20
+        height: 20
+        visible: SelectionRectangle.control.active
+        // This item is deliberately empty. Selection handles don't feel at home
+        // for this style. But we provide an invisible handle that the user can
+        // drag on.
+    }
+
+    bottomRightHandle: Item {
+        width: 20
+        height: 20
+        visible: SelectionRectangle.control.active
+        // This item is deliberately empty. Selection handles don't feel at home
+        // for this style. But we provide an invisible handle that the user can
+        // drag on.
+    }
+}
diff --git a/src/quickcontrols/fusion/Slider.qml b/src/quickcontrols/fusion/Slider.qml
new file mode 100644
index 0000000000..c78dbed468
--- /dev/null
+++ b/src/quickcontrols/fusion/Slider.qml
@@ -0,0 +1,34 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.Slider {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitHandleHeight + topPadding + bottomPadding)
+
+    handle: SliderHandle {
+        x: control.leftPadding + Math.round(control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + Math.round(control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
+
+        palette: control.palette
+        pressed: control.pressed
+        hovered: control.hovered
+        vertical: control.vertical
+        visualFocus: control.visualFocus
+    }
+
+    background: SliderGroove {
+        control: control
+        progress: control.position
+        visualProgress: control.visualPosition
+    }
+}
diff --git a/src/quickcontrols/fusion/SpinBox.qml b/src/quickcontrols/fusion/SpinBox.qml
new file mode 100644
index 0000000000..03fa470a32
--- /dev/null
+++ b/src/quickcontrols/fusion/SpinBox.qml
@@ -0,0 +1,148 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.SpinBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentItem.implicitWidth + 2 * padding +
+                            Math.max(up.implicitIndicatorWidth,
+                                     down.implicitIndicatorWidth))
+    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
+                             implicitBackgroundHeight,
+                             up.implicitIndicatorHeight +
+                             down.implicitIndicatorHeight)
+
+    padding: 4
+    leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
+    rightPadding: padding + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
+
+    validator: IntValidator {
+        locale: control.locale.name
+        bottom: Math.min(control.from, control.to)
+        top: Math.max(control.from, control.to)
+    }
+
+    contentItem: TextInput {
+        z: 2
+        text: control.displayText
+
+        font: control.font
+        color: control.palette.text
+        selectionColor: control.palette.highlight
+        selectedTextColor: control.palette.highlightedText
+        horizontalAlignment: Qt.AlignHCenter
+        verticalAlignment: Qt.AlignVCenter
+
+        readOnly: !control.editable
+        validator: control.validator
+        inputMethodHints: control.inputMethodHints
+    }
+
+    up.indicator: PaddedRectangle {
+        x: control.mirrored ? 1 : control.width - width - 1
+        y: 1
+        height: control.height / 2 - 1
+        implicitWidth: 16
+        implicitHeight: 10
+
+        radius: 1.7
+        clip: true
+        topPadding: -2
+        leftPadding: -2
+        color: control.up.pressed ? Fusion.buttonColor(control.palette, false, true, true) : "transparent"
+
+        ColorImage {
+            scale: -1
+            width: parent.width
+            height: parent.height
+            opacity: enabled ? 1.0 : 0.5
+            color: control.palette.buttonText
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/arrow.png"
+            fillMode: Image.Pad
+        }
+    }
+
+    down.indicator: PaddedRectangle {
+        x: control.mirrored ? 1 : control.width - width - 1
+        y: control.height - height - 1
+        height: control.height / 2 - 1
+        implicitWidth: 16
+        implicitHeight: 10
+
+        radius: 1.7
+        clip: true
+        topPadding: -2
+        leftPadding: -2
+        color: control.down.pressed ? Fusion.buttonColor(control.palette, false, true, true) : "transparent"
+
+        ColorImage {
+            width: parent.width
+            height: parent.height
+            opacity: enabled ? 1.0 : 0.5
+            color: control.palette.buttonText
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/arrow.png"
+            fillMode: Image.Pad
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: 24
+
+        radius: 2
+        color: control.palette.base
+        border.color: control.activeFocus ? Fusion.highlightedOutline(control.palette) : Fusion.outline(control.palette)
+
+        Rectangle {
+            x: 2
+            y: 1
+            width: parent.width - 4
+            height: 1
+            color: Fusion.topShadow
+        }
+
+        Rectangle {
+            x: control.mirrored ? 1 : parent.width - width - 1
+            y: 1
+            width: Math.max(control.up.indicator ? control.up.indicator.width : 0,
+                            control.down.indicator ? control.down.indicator.width : 0) + 1
+            height: parent.height - 2
+
+            radius: 2
+            gradient: Gradient {
+                GradientStop {
+                    position: 0
+                    color: Fusion.gradientStart(Fusion.buttonColor(control.palette, control.visualFocus, false, control.up.hovered || control.down.hovered))
+                }
+                GradientStop {
+                    position: 1
+                    color: Fusion.gradientStop(Fusion.buttonColor(control.palette, control.visualFocus, false, control.up.hovered || control.down.hovered))
+                }
+            }
+
+            Rectangle {
+                x: control.mirrored ? parent.width - 1 : 0
+                height: parent.height
+                width: 1
+                color: Fusion.outline(control.palette)
+            }
+        }
+
+        Rectangle {
+            x: 1; y: 1
+            width: parent.width - 2
+            height: parent.height - 2
+            color: "transparent"
+            border.color: Color.transparent(Fusion.highlightedOutline(control.palette), 40 / 255)
+            visible: control.activeFocus
+            radius: 1.7
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/SplitView.qml b/src/quickcontrols/fusion/SplitView.qml
new file mode 100644
index 0000000000..1046d800eb
--- /dev/null
+++ b/src/quickcontrols/fusion/SplitView.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+
+T.SplitView {
+    id: control
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    handle: Rectangle {
+        implicitWidth: control.orientation === Qt.Horizontal ? 2 : control.width
+        implicitHeight: control.orientation === Qt.Horizontal ? control.height : 2
+        color: T.SplitHandle.pressed ? control.palette.dark
+            : (enabled && T.SplitHandle.hovered ? control.palette.midlight : control.palette.mid)
+    }
+}
diff --git a/src/quickcontrols/fusion/SwipeDelegate.qml b/src/quickcontrols/fusion/SwipeDelegate.qml
new file mode 100644
index 0000000000..1c47433bba
--- /dev/null
+++ b/src/quickcontrols/fusion/SwipeDelegate.qml
@@ -0,0 +1,45 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.SwipeDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 16
+    icon.height: 16
+
+    swipe.transition: Transition { SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic } }
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.highlighted ? Fusion.highlightedText(control.palette) : control.palette.text
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 20
+        color: control.down ? Fusion.buttonColor(control.palette, false, true, true)
+                            : control.highlighted ? Fusion.highlight(control.palette) : control.palette.base
+    }
+}
diff --git a/src/quickcontrols/fusion/Switch.qml b/src/quickcontrols/fusion/Switch.qml
new file mode 100644
index 0000000000..3965b29c36
--- /dev/null
+++ b/src/quickcontrols/fusion/Switch.qml
@@ -0,0 +1,38 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.Switch {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    indicator: SwitchIndicator {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.text
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+}
diff --git a/src/quickcontrols/fusion/SwitchDelegate.qml b/src/quickcontrols/fusion/SwitchDelegate.qml
new file mode 100644
index 0000000000..b7c4278c71
--- /dev/null
+++ b/src/quickcontrols/fusion/SwitchDelegate.qml
@@ -0,0 +1,52 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.SwitchDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 16
+    icon.height: 16
+
+    indicator: SwitchIndicator {
+        x: control.text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: IconLabel {
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.highlighted ? Fusion.highlightedText(control.palette) : control.palette.text
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 20
+        color: control.down ? Fusion.buttonColor(control.palette, false, true, true)
+                            : control.highlighted ? Fusion.highlight(control.palette) : control.palette.base
+    }
+}
diff --git a/src/quickcontrols/fusion/TabBar.qml b/src/quickcontrols/fusion/TabBar.qml
new file mode 100644
index 0000000000..275bcf5a2a
--- /dev/null
+++ b/src/quickcontrols/fusion/TabBar.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.TabBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: -1
+
+    contentItem: ListView {
+        model: control.contentModel
+        currentIndex: control.currentIndex
+
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+        snapMode: ListView.SnapToItem
+
+        highlightMoveDuration: 0
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: 40
+        preferredHighlightEnd: width - 40
+    }
+
+    background: Item {
+        implicitHeight: 21
+
+        Rectangle {
+            width: parent.width
+            height: 1
+            y: control.position === T.TabBar.Header ? parent.height - 1 : 0
+            color: Fusion.outline(control.palette)
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/TabButton.qml b/src/quickcontrols/fusion/TabButton.qml
new file mode 100644
index 0000000000..add96a8fa3
--- /dev/null
+++ b/src/quickcontrols/fusion/TabButton.qml
@@ -0,0 +1,63 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.TabButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 2
+    horizontalPadding: 4
+    spacing: 6
+
+    icon.width: 16
+    icon.height: 16
+
+    z: checked
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.buttonText
+    }
+
+    background: Rectangle {
+        y: control.checked || control.TabBar.position !== T.TabBar.Header ? 0 : 2
+        implicitHeight: 21
+        height: control.height - (control.checked ? 0 : 2)
+
+        border.color: Qt.lighter(Fusion.outline(control.palette), 1.1)
+
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: control.checked ? Qt.lighter(Fusion.tabFrameColor(control.palette), 1.04)
+                                       : Qt.darker(Fusion.tabFrameColor(control.palette), 1.08)
+            }
+            GradientStop {
+                position: control.checked ? 0 : 0.85
+                color: control.checked ? Qt.lighter(Fusion.tabFrameColor(control.palette), 1.04)
+                                       : Qt.darker(Fusion.tabFrameColor(control.palette), 1.08)
+            }
+            GradientStop {
+                position: 1
+                color: control.checked ? Fusion.tabFrameColor(control.palette)
+                                       : Qt.darker(Fusion.tabFrameColor(control.palette), 1.16)
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/TextArea.qml b/src/quickcontrols/fusion/TextArea.qml
new file mode 100644
index 0000000000..5e1ecfa905
--- /dev/null
+++ b/src/quickcontrols/fusion/TextArea.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.TextArea {
+    id: control
+
+    implicitWidth: Math.max(contentWidth + leftPadding + rightPadding,
+                            implicitBackgroundWidth + leftInset + rightInset,
+                            placeholder.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
+                             implicitBackgroundHeight + topInset + bottomInset,
+                             placeholder.implicitHeight + topPadding + bottomPadding)
+
+    padding: 6
+    leftPadding: padding + 4
+
+    color: control.palette.text
+    selectionColor: control.palette.highlight
+    selectedTextColor: control.palette.highlightedText
+    placeholderTextColor: control.palette.placeholderText
+
+    PlaceholderText {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
+}
diff --git a/src/quickcontrols/fusion/TextField.qml b/src/quickcontrols/fusion/TextField.qml
new file mode 100644
index 0000000000..b358c668d8
--- /dev/null
+++ b/src/quickcontrols/fusion/TextField.qml
@@ -0,0 +1,69 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.TextField {
+    id: control
+
+    implicitWidth: implicitBackgroundWidth + leftInset + rightInset
+                   || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding,
+                             placeholder.implicitHeight + topPadding + bottomPadding)
+
+    padding: 4
+
+    color: control.palette.text
+    selectionColor: control.palette.highlight
+    selectedTextColor: control.palette.highlightedText
+    placeholderTextColor: control.palette.placeholderText
+    verticalAlignment: TextInput.AlignVCenter
+
+    PlaceholderText {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
+
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: 24
+
+        radius: 2
+        color: control.palette.base
+        border.color: control.activeFocus ? Fusion.highlightedOutline(control.palette) : Fusion.outline(control.palette)
+
+        Rectangle {
+            x: 1; y: 1
+            width: parent.width - 2
+            height: parent.height - 2
+            color: "transparent"
+            border.color: Color.transparent(Fusion.highlightedOutline(control.palette), 40 / 255)
+            visible: control.activeFocus
+            radius: 1.7
+        }
+
+        Rectangle {
+            x: 2
+            y: 1
+            width: parent.width - 4
+            height: 1
+            color: Fusion.topShadow
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/ToolBar.qml b/src/quickcontrols/fusion/ToolBar.qml
new file mode 100644
index 0000000000..13b269e9df
--- /dev/null
+++ b/src/quickcontrols/fusion/ToolBar.qml
@@ -0,0 +1,49 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.ToolBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    horizontalPadding: 6
+    topPadding: control.position === T.ToolBar.Footer ? 1 : 0
+    bottomPadding: control.position === T.ToolBar.Header ? 1 : 0
+
+    background: Rectangle {
+        implicitHeight: 26
+
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: Qt.lighter(control.palette.window, 1.04)
+            }
+            GradientStop {
+                position: 1
+                color: control.palette.window
+            }
+        }
+
+        Rectangle {
+            width: parent.width
+            height: 1
+            color: control.position === T.ToolBar.Header ? Fusion.lightShade : Fusion.darkShade
+        }
+
+        Rectangle {
+            y: parent.height - height
+            width: parent.width
+            height: 1
+            color: control.position === T.ToolBar.Header ? Fusion.darkShade : Fusion.lightShade
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/ToolButton.qml b/src/quickcontrols/fusion/ToolButton.qml
new file mode 100644
index 0000000000..dd9b628261
--- /dev/null
+++ b/src/quickcontrols/fusion/ToolButton.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.ToolButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 16
+    icon.height: 16
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.buttonText
+    }
+
+    background: ButtonPanel {
+        implicitWidth: 20
+        implicitHeight: 20
+
+        control: control
+        visible: control.down || control.checked || control.highlighted || control.visualFocus
+            || (enabled && control.hovered)
+    }
+}
diff --git a/src/quickcontrols/fusion/ToolSeparator.qml b/src/quickcontrols/fusion/ToolSeparator.qml
new file mode 100644
index 0000000000..569ee66ec5
--- /dev/null
+++ b/src/quickcontrols/fusion/ToolSeparator.qml
@@ -0,0 +1,33 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.ToolSeparator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: vertical ? 6 : 2
+    verticalPadding: vertical ? 2 : 6
+
+    contentItem: Rectangle {
+        implicitWidth: control.vertical ? 2 : 8
+        implicitHeight: control.vertical ? 8 : 2
+        color: Qt.darker(control.palette.window, 1.1)
+
+        Rectangle {
+            x: 1
+            width: 1
+            height: parent.height
+            color: Qt.lighter(control.palette.window, 1.1)
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/ToolTip.qml b/src/quickcontrols/fusion/ToolTip.qml
new file mode 100644
index 0000000000..5166d2b8b6
--- /dev/null
+++ b/src/quickcontrols/fusion/ToolTip.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.ToolTip {
+    id: control
+
+    x: parent ? (parent.width - implicitWidth) / 2 : 0
+    y: -implicitHeight - 3
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    margins: 6
+    padding: 6
+
+    closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        wrapMode: Text.Wrap
+        color: control.palette.toolTipText
+    }
+
+    background: Rectangle {
+        color: control.palette.toolTipBase
+        border.color: control.palette.toolTipText
+
+        Rectangle {
+            z: -1
+            x: 1; y: 1
+            width: parent.width
+            height: parent.height
+            color: control.palette.shadow
+            opacity: 0.5
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/TreeViewDelegate.qml b/src/quickcontrols/fusion/TreeViewDelegate.qml
new file mode 100644
index 0000000000..5223361872
--- /dev/null
+++ b/src/quickcontrols/fusion/TreeViewDelegate.qml
@@ -0,0 +1,62 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+
+T.TreeViewDelegate {
+    id: control
+
+    implicitWidth: leftMargin + __contentIndent + implicitContentWidth + rightPadding + rightMargin
+    implicitHeight: Math.max(implicitBackgroundHeight, implicitContentHeight, implicitIndicatorHeight)
+
+    indentation: indicator ? indicator.width : 12
+    leftMargin: 5
+    rightMargin: 5
+    spacing: 5
+
+    topPadding: contentItem ? (height - contentItem.implicitHeight) / 2 : 0
+    leftPadding: !mirrored ? leftMargin + __contentIndent : width - leftMargin - __contentIndent - implicitContentWidth
+
+    highlighted: control.selected || control.current
+               || ((control.treeView.selectionBehavior === TableView.SelectRows
+               || control.treeView.selectionBehavior === TableView.SelectionDisabled)
+               && control.row === control.treeView.currentRow)
+
+    required property int row
+    required property var model
+    readonly property real __contentIndent: !isTreeNode ? 0 : (depth * indentation) + (indicator ? indicator.width + spacing : 0)
+
+    indicator: Item {
+        readonly property real __indicatorIndent: control.leftMargin + (control.depth * control.indentation)
+        x: !control.mirrored ? __indicatorIndent : control.width - __indicatorIndent - width
+        y: (control.height - height) / 2
+        implicitWidth: Math.max(arrow.implicitWidth, 20)
+        implicitHeight: 24 // same as Button.qml
+
+        property ColorImage arrow : ColorImage {
+            parent: control.indicator
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            rotation:  control.expanded ? 0 : (control.mirrored ? 90 : -90)
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/arrow.png"
+            color: control.palette.windowText
+            defaultColor: "#353637"
+        }
+    }
+
+    background: Rectangle {
+        implicitHeight: 24 // same as Button.qml
+        color: control.highlighted
+               ? control.palette.highlight
+               : (control.treeView.alternatingRows && control.row % 2 !== 0
+               ? control.palette.alternateBase : control.palette.base)
+    }
+
+    contentItem: Label {
+        text: control.model.display
+        elide: Text.ElideRight
+    }
+}
diff --git a/src/quickcontrols/fusion/Tumbler.qml b/src/quickcontrols/fusion/Tumbler.qml
new file mode 100644
index 0000000000..447765dce7
--- /dev/null
+++ b/src/quickcontrols/fusion/Tumbler.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+T.Tumbler {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    delegate: Text {
+        text: modelData
+        color: control.palette.windowText
+        font: control.font
+        opacity: (1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)) * (control.enabled ? 1 : 0.6)
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        required property var modelData
+        required property int index
+    }
+
+    contentItem: TumblerView {
+        implicitWidth: 60
+        implicitHeight: 200
+        model: control.model
+        delegate: control.delegate
+        path: Path {
+            startX: control.contentItem.width / 2
+            startY: -control.contentItem.delegateHeight / 2
+            PathLine {
+                x: control.contentItem.width / 2
+                y: (control.visibleItemCount + 1) * control.contentItem.delegateHeight - control.contentItem.delegateHeight / 2
+            }
+        }
+
+        property real delegateHeight: control.availableHeight / control.visibleItemCount
+    }
+}
diff --git a/src/quickcontrols/fusion/VerticalHeaderView.qml b/src/quickcontrols/fusion/VerticalHeaderView.qml
new file mode 100644
index 0000000000..7ae2fcdd62
--- /dev/null
+++ b/src/quickcontrols/fusion/VerticalHeaderView.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.VerticalHeaderView {
+    id: control
+
+    implicitWidth: contentWidth
+    implicitHeight: syncView ? syncView.height : 0
+
+    delegate: Rectangle {
+        // Qt6: add cellPadding (and font etc) as public API in headerview
+        readonly property real cellPadding: 8
+
+        implicitWidth: Math.max(control.width, text.implicitWidth + (cellPadding * 2))
+        implicitHeight: text.implicitHeight + (cellPadding * 2)
+        border.color: "#cacaca"
+
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: "#fbfbfb"
+            }
+            GradientStop {
+                position: 1
+                color: "#e0dfe0"
+            }
+        }
+
+        Text {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            height: parent.height
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: "#ff26282a"
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/images/arrow.png b/src/quickcontrols/fusion/images/arrow.png
new file mode 100644
index 0000000000..97ef0238e5
--- /dev/null
+++ b/src/quickcontrols/fusion/images/arrow.png
diff --git a/src/quickcontrols/fusion/images/arrow.svg b/src/quickcontrols/fusion/images/arrow.svg
new file mode 100644
index 0000000000..4438392495
--- /dev/null
+++ b/src/quickcontrols/fusion/images/arrow.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10"
+   height="6"
+   viewBox="0 0 10 6"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   inkscape:export-filename="/Users/jpnurmi/Downloads/arrow@4x.png"
+   inkscape:export-xdpi="360"
+   inkscape:export-ydpi="360"
+   sodipodi:docname="arrow.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="31.678384"
+     inkscape:cx="7.9810383"
+     inkscape:cy="3.0344775"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-to-guides="true"
+     inkscape:snap-page="true"
+     inkscape:window-width="1440"
+     inkscape:window-height="851"
+     inkscape:window-x="0"
+     inkscape:window-y="1"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3336" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1046.3622)">
+    <path
+       transform="matrix(1.2371791,0,0,0.85714284,1.0769252,150.19463)"
+       style="fill:#000000;fill-opacity:0.7254902"
+       inkscape:transform-center-y="1.4999605"
+       d="m 3.1709837,1051.3622 -3.2331616,-4.6667 6.4663233,0 z"
+       id="path3365"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc" />
+  </g>
+</svg>
diff --git a/src/quickcontrols/fusion/images/arrow@2x.png b/src/quickcontrols/fusion/images/arrow@2x.png
new file mode 100644
index 0000000000..9bfc4e6eed
--- /dev/null
+++ b/src/quickcontrols/fusion/images/arrow@2x.png
diff --git a/src/quickcontrols/fusion/images/arrow@3x.png b/src/quickcontrols/fusion/images/arrow@3x.png
new file mode 100644
index 0000000000..6fd9c988dc
--- /dev/null
+++ b/src/quickcontrols/fusion/images/arrow@3x.png
diff --git a/src/quickcontrols/fusion/images/arrow@4x.png b/src/quickcontrols/fusion/images/arrow@4x.png
new file mode 100644
index 0000000000..f5e1e66a1d
--- /dev/null
+++ b/src/quickcontrols/fusion/images/arrow@4x.png
diff --git a/src/quickcontrols/fusion/images/checkmark.png b/src/quickcontrols/fusion/images/checkmark.png
new file mode 100644
index 0000000000..deb30419d0
--- /dev/null
+++ b/src/quickcontrols/fusion/images/checkmark.png
diff --git a/src/quickcontrols/fusion/images/checkmark.svg b/src/quickcontrols/fusion/images/checkmark.svg
new file mode 100644
index 0000000000..f1afdc4f9f
--- /dev/null
+++ b/src/quickcontrols/fusion/images/checkmark.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="14"
+   height="14"
+   viewBox="0 0 14 14"
+   id="svg3386"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   inkscape:export-filename="/Users/jpnurmi/Downloads/checkmark@4x.png"
+   inkscape:export-xdpi="360"
+   inkscape:export-ydpi="360"
+   sodipodi:docname="checkmark.svg">
+  <defs
+     id="defs3388" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="32"
+     inkscape:cx="1.9865044"
+     inkscape:cy="6.0706667"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-page="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-to-guides="true"
+     inkscape:window-width="1440"
+     inkscape:window-height="851"
+     inkscape:window-x="0"
+     inkscape:window-y="1"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3391">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1038.3622)">
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.79999995;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 5,1045.3622 2,4 2.5,-8"
+       id="path4198"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90" />
+  </g>
+</svg>
diff --git a/src/quickcontrols/fusion/images/checkmark@2x.png b/src/quickcontrols/fusion/images/checkmark@2x.png
new file mode 100644
index 0000000000..f80de0a425
--- /dev/null
+++ b/src/quickcontrols/fusion/images/checkmark@2x.png
diff --git a/src/quickcontrols/fusion/images/checkmark@3x.png b/src/quickcontrols/fusion/images/checkmark@3x.png
new file mode 100644
index 0000000000..c095eed18a
--- /dev/null
+++ b/src/quickcontrols/fusion/images/checkmark@3x.png
diff --git a/src/quickcontrols/fusion/images/checkmark@4x.png b/src/quickcontrols/fusion/images/checkmark@4x.png
new file mode 100644
index 0000000000..e58c7b4df4
--- /dev/null
+++ b/src/quickcontrols/fusion/images/checkmark@4x.png
diff --git a/src/quickcontrols/fusion/images/progressmask.png b/src/quickcontrols/fusion/images/progressmask.png
new file mode 100644
index 0000000000..a354377c4a
--- /dev/null
+++ b/src/quickcontrols/fusion/images/progressmask.png
diff --git a/src/quickcontrols/fusion/images/progressmask.svg b/src/quickcontrols/fusion/images/progressmask.svg
new file mode 100644
index 0000000000..a0dfc4269d
--- /dev/null
+++ b/src/quickcontrols/fusion/images/progressmask.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="31"
+   height="22"
+   viewBox="0 0 8.202083 5.8208335"
+   version="1.1"
+   id="svg8"
+   inkscape:export-filename="/home/jpnurmi/Projects/qt-dev/qtquickcontrols2/src/imports/controls/fusion/images/progressmask@4x.png"
+   inkscape:export-xdpi="384"
+   inkscape:export-ydpi="384"
+   inkscape:version="0.92.1 r"
+   sodipodi:docname="progressmask.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.839192"
+     inkscape:cx="61.144853"
+     inkscape:cy="14.574824"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="3840"
+     inkscape:window-height="2031"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-291.17915)">
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:4.5;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 0,296.99998 4.7625,-5.82083"
+       id="path4485"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:4.5;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 8.2020833,296.99998 4.7624997,-5.82083"
+       id="path4485-3"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/src/quickcontrols/fusion/images/progressmask@2x.png b/src/quickcontrols/fusion/images/progressmask@2x.png
new file mode 100644
index 0000000000..69476bf4a0
--- /dev/null
+++ b/src/quickcontrols/fusion/images/progressmask@2x.png
diff --git a/src/quickcontrols/fusion/images/progressmask@3x.png b/src/quickcontrols/fusion/images/progressmask@3x.png
new file mode 100644
index 0000000000..00a1c09d87
--- /dev/null
+++ b/src/quickcontrols/fusion/images/progressmask@3x.png
diff --git a/src/quickcontrols/fusion/images/progressmask@4x.png b/src/quickcontrols/fusion/images/progressmask@4x.png
new file mode 100644
index 0000000000..263110d5fe
--- /dev/null
+++ b/src/quickcontrols/fusion/images/progressmask@4x.png
diff --git a/src/quickcontrols/fusion/impl/ButtonPanel.qml b/src/quickcontrols/fusion/impl/ButtonPanel.qml
new file mode 100644
index 0000000000..b7fa6a7a8e
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/ButtonPanel.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+Rectangle {
+    id: panel
+
+    property Item control
+    property bool highlighted: control.highlighted
+
+    visible: !control.flat || control.down || control.checked
+
+    color: Fusion.buttonColor(control.palette, panel.highlighted, control.down || control.checked,
+        enabled && control.hovered)
+    gradient: control.down || control.checked ? null : buttonGradient
+
+    Gradient {
+        id: buttonGradient
+        GradientStop {
+            position: 0
+            color: Fusion.gradientStart(Fusion.buttonColor(panel.control.palette, panel.highlighted,
+                panel.control.down, panel.enabled && panel.control.hovered))
+        }
+        GradientStop {
+            position: 1
+            color: Fusion.gradientStop(Fusion.buttonColor(panel.control.palette, panel.highlighted,
+                panel.control.down, panel.enabled && panel.control.hovered))
+        }
+    }
+
+    radius: 2
+    border.color: Fusion.buttonOutline(control.palette, panel.highlighted || control.visualFocus, control.enabled)
+
+    Rectangle {
+        x: 1; y: 1
+        width: parent.width - 2
+        height: parent.height - 2
+        border.color: Fusion.innerContrastLine
+        color: "transparent"
+        radius: 2
+    }
+}
diff --git a/src/quickcontrols/fusion/impl/CMakeLists.txt b/src/quickcontrols/fusion/impl/CMakeLists.txt
new file mode 100644
index 0000000000..e52f1ecc06
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/CMakeLists.txt
@@ -0,0 +1,42 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2fusionstyleimplplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "ButtonPanel.qml"
+    "CheckIndicator.qml"
+    "RadioIndicator.qml"
+    "SliderGroove.qml"
+    "SliderHandle.qml"
+    "SwitchIndicator.qml"
+)
+
+qt_internal_add_qml_module(qtquickcontrols2fusionstyleimplplugin
+    URI "QtQuick.Controls.Fusion.impl"
+    VERSION "${PROJECT_VERSION}"
+    PAST_MAJOR_VERSIONS 2
+    CLASS_NAME QtQuickControls2FusionStyleImplPlugin
+    DEPENDENCIES
+        QtQuick/auto
+    PLUGIN_TARGET qtquickcontrols2fusionstyleimplplugin
+    NO_PLUGIN_OPTIONAL
+    SOURCES
+        qquickfusionbusyindicator.cpp qquickfusionbusyindicator_p.h
+        qquickfusiondial.cpp qquickfusiondial_p.h
+        qquickfusionknob.cpp qquickfusionknob_p.h
+    QML_FILES
+        ${qml_files}
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::Gui
+        Qt::QmlPrivate
+        Qt::QuickControls2ImplPrivate
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+)
diff --git a/src/quickcontrols/fusion/impl/CheckIndicator.qml b/src/quickcontrols/fusion/impl/CheckIndicator.qml
new file mode 100644
index 0000000000..58de99654a
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/CheckIndicator.qml
@@ -0,0 +1,58 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+Rectangle {
+    id: indicator
+
+    property Item control
+    readonly property color pressedColor: Fusion.mergedColors(control.palette.base, control.palette.windowText, 85)
+    readonly property color checkMarkColor: Qt.darker(control.palette.text, 1.2)
+
+    implicitWidth: 14
+    implicitHeight: 14
+
+    color: control.down ? indicator.pressedColor : control.palette.base
+    border.color: control.visualFocus ? Fusion.highlightedOutline(control.palette)
+                                      : Qt.lighter(Fusion.outline(control.palette), 1.1)
+
+    Rectangle {
+        x: 1; y: 1
+        width: parent.width - 2
+        height: 1
+        color: Fusion.topShadow
+        visible: indicator.control.enabled && !indicator.control.down
+    }
+
+    ColorImage {
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+        color: Color.transparent(indicator.checkMarkColor, 210 / 255)
+        source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/checkmark.png"
+        visible: indicator.control.checkState === Qt.Checked || (indicator.control.checked && indicator.control.checkState === undefined)
+    }
+
+    Rectangle {
+        x: 3; y: 3
+        width: parent.width - 6
+        height: parent.width - 6
+
+        visible: indicator.control.checkState === Qt.PartiallyChecked
+
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: Color.transparent(indicator.checkMarkColor, 80 / 255)
+            }
+            GradientStop {
+                position: 1
+                color: Color.transparent(indicator.checkMarkColor, 140 / 255)
+            }
+        }
+        border.color: Color.transparent(indicator.checkMarkColor, 180 / 255)
+    }
+}
diff --git a/src/quickcontrols/fusion/impl/RadioIndicator.qml b/src/quickcontrols/fusion/impl/RadioIndicator.qml
new file mode 100644
index 0000000000..0949b904a9
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/RadioIndicator.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+Rectangle {
+    id: indicator
+
+    property Item control
+    readonly property color pressedColor: Fusion.mergedColors(control.palette.base, control.palette.windowText, 85)
+    readonly property color checkMarkColor: Qt.darker(control.palette.text, 1.2)
+
+    implicitWidth: 14
+    implicitHeight: 14
+
+    radius: width / 2
+    color: control.down ? indicator.pressedColor : control.palette.base
+    border.color: control.visualFocus ? Fusion.highlightedOutline(control.palette)
+                                      : Qt.darker(control.palette.window, 1.5)
+
+    Rectangle {
+        y: 1
+        width: parent.width
+        height: parent.height - 1
+        radius: width / 2
+        color: "transparent"
+        border.color: Fusion.topShadow
+        visible: indicator.control.enabled && !indicator.control.down
+    }
+
+    Rectangle {
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+        width: parent.width / 2.32
+        height: parent.height / 2.32
+        radius: width / 2
+        color: Color.transparent(indicator.checkMarkColor, 180 / 255)
+        border.color: Color.transparent(indicator.checkMarkColor, 200 / 255)
+        visible: indicator.control.checked
+    }
+}
diff --git a/src/quickcontrols/fusion/impl/SliderGroove.qml b/src/quickcontrols/fusion/impl/SliderGroove.qml
new file mode 100644
index 0000000000..8cfdd836b3
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/SliderGroove.qml
@@ -0,0 +1,60 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+Rectangle {
+    id: groove
+
+    property Item control
+    property real offset
+    property real progress
+    property real visualProgress
+
+    x: control.horizontal ? 0 : (control.availableWidth - width) / 2
+    y: control.horizontal ? (control.availableHeight - height) / 2 : 0
+
+    implicitWidth: control.horizontal ? 160 : 5
+    implicitHeight: control.horizontal ? 5 : 160
+    width: control.horizontal ? control.availableWidth : implicitWidth
+    height: control.horizontal ? implicitHeight : control.availableHeight
+
+    radius: 2
+    border.color: Fusion.outline(control.palette)
+    scale: control.horizontal && control.mirrored ? -1 : 1
+
+    gradient: Gradient {
+        GradientStop {
+            position: 0
+            color: Qt.darker(Fusion.grooveColor(groove.control.palette), 1.1)
+        }
+        GradientStop {
+            position: 1
+            color: Qt.lighter(Fusion.grooveColor(groove.control.palette), 1.1)
+        }
+    }
+
+    Rectangle {
+        x: groove.control.horizontal ? groove.offset * parent.width : 0
+        y: groove.control.horizontal ? 0 : groove.visualProgress * parent.height
+        width: groove.control.horizontal ? groove.progress * parent.width - groove.offset * parent.width : 5
+        height: groove.control.horizontal ? 5 : groove.progress * parent.height - groove.offset * parent.height
+
+        radius: 2
+        border.color: Qt.darker(Fusion.highlightedOutline(groove.control.palette), 1.1)
+
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: Fusion.highlight(groove.control.palette)
+            }
+            GradientStop {
+                position: 1
+                color: Qt.lighter(Fusion.highlight(groove.control.palette), 1.2)
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/impl/SliderHandle.qml b/src/quickcontrols/fusion/impl/SliderHandle.qml
new file mode 100644
index 0000000000..e12d4c0bb7
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/SliderHandle.qml
@@ -0,0 +1,54 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+Rectangle {
+    id: handle
+
+    property var palette
+    property bool pressed
+    property bool hovered
+    property bool vertical
+    property bool visualFocus
+
+    implicitWidth: 13
+    implicitHeight: 13
+
+    gradient: Gradient {
+        GradientStop {
+            position: 0
+            color: Fusion.gradientStart(Fusion.buttonColor(handle.palette, handle.visualFocus,
+                handle.pressed, handle.enabled && handle.hovered))
+        }
+        GradientStop {
+            position: 1
+            color: Fusion.gradientStop(Fusion.buttonColor(handle.palette, handle.visualFocus,
+                handle.pressed, handle.enabled && handle.hovered))
+        }
+    }
+    rotation: handle.vertical ? -90 : 0
+    border.width: 1
+    border.color: "transparent"
+    radius: 2
+
+    Rectangle {
+        width: parent.width
+        height: parent.height
+        border.color: handle.visualFocus ? Fusion.highlightedOutline(handle.palette) : Fusion.outline(handle.palette)
+        color: "transparent"
+        radius: 2
+
+        Rectangle {
+            x: 1; y: 1
+            width: parent.width - 2
+            height: parent.height - 2
+            border.color: Fusion.innerContrastLine
+            color: "transparent"
+            radius: 2
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/impl/SwitchIndicator.qml b/src/quickcontrols/fusion/impl/SwitchIndicator.qml
new file mode 100644
index 0000000000..8bc9238228
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/SwitchIndicator.qml
@@ -0,0 +1,106 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+Rectangle {
+    id: indicator
+
+    property T.AbstractButton control
+    readonly property color pressedColor: Fusion.mergedColors(control.palette.base, control.palette.windowText, 85)
+    readonly property color checkMarkColor: Qt.darker(control.palette.text, 1.2)
+
+    implicitWidth: 40
+    implicitHeight: 16
+
+    radius: 2
+    border.color: Fusion.outline(control.palette)
+
+    gradient: Gradient {
+        GradientStop {
+            position: 0
+            color: Qt.darker(Fusion.grooveColor(indicator.control.palette), 1.1)
+        }
+        GradientStop {
+            position: 1
+            color: Qt.lighter(Fusion.grooveColor(indicator.control.palette), 1.1)
+        }
+    }
+
+    Rectangle {
+        x: indicator.control.mirrored ? handle.x : 0
+        width: indicator.control.mirrored ? parent.width - handle.x : handle.x + handle.width
+        height: parent.height
+
+        opacity: indicator.control.checked ? 1 : 0
+        Behavior on opacity {
+            enabled: !indicator.control.down
+            NumberAnimation { duration: 80 }
+        }
+
+        radius: 2
+        border.color: Qt.darker(Fusion.highlightedOutline(indicator.control.palette), 1.1)
+        border.width: indicator.control.enabled ? 1 : 0
+
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: Fusion.highlight(indicator.control.palette)
+            }
+            GradientStop {
+                position: 1
+                color: Qt.lighter(Fusion.highlight(indicator.control.palette), 1.2)
+            }
+        }
+    }
+
+    Rectangle {
+        id: handle
+        x: Math.max(0, Math.min(parent.width - width, indicator.control.visualPosition * parent.width - (width / 2)))
+        y: (parent.height - height) / 2
+        width: 20
+        height: 16
+        radius: 2
+
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: Fusion.gradientStart(Fusion.buttonColor(indicator.control.palette,
+                    indicator.control.visualFocus, indicator.control.pressed, indicator.enabled && indicator.control.hovered))
+            }
+            GradientStop {
+                position: 1
+                color: Fusion.gradientStop(Fusion.buttonColor(indicator.control.palette,
+                    indicator.control.visualFocus, indicator.control.pressed, indicator.enabled && indicator.control.hovered))
+            }
+        }
+        border.width: 1
+        border.color: "transparent"
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            border.color: indicator.control.visualFocus ? Fusion.highlightedOutline(indicator.control.palette) : Fusion.outline(indicator.control.palette)
+            color: "transparent"
+            radius: 2
+
+            Rectangle {
+                x: 1; y: 1
+                width: parent.width - 2
+                height: parent.height - 2
+                border.color: Fusion.innerContrastLine
+                color: "transparent"
+                radius: 2
+            }
+        }
+
+        Behavior on x {
+            enabled: !indicator.control.down
+            SmoothedAnimation { velocity: 200 }
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/impl/qquickfusionbusyindicator.cpp b/src/quickcontrols/fusion/impl/qquickfusionbusyindicator.cpp
new file mode 100644
index 0000000000..cce69b0e4b
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/qquickfusionbusyindicator.cpp
@@ -0,0 +1,80 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickfusionbusyindicator_p.h"
+
+#include <QtGui/qpainter.h>
+
+QT_BEGIN_NAMESPACE
+
+QQuickFusionBusyIndicator::QQuickFusionBusyIndicator(QQuickItem *parent)
+    : QQuickPaintedItem(parent)
+{
+}
+
+QColor QQuickFusionBusyIndicator::color() const
+{
+    return m_color;
+}
+
+void QQuickFusionBusyIndicator::setColor(const QColor &color)
+{
+    if (color == m_color)
+        return;
+
+    m_color = color;
+    update();
+}
+
+bool QQuickFusionBusyIndicator::isRunning() const
+{
+    return isVisible();
+}
+
+void QQuickFusionBusyIndicator::setRunning(bool running)
+{
+    if (running) {
+        setVisible(true);
+        update();
+    }
+}
+
+void QQuickFusionBusyIndicator::paint(QPainter *painter)
+{
+    const qreal w = width();
+    const qreal h = height();
+    if (w <= 0 || h <= 0 || !isRunning())
+        return;
+
+    const qreal sz = qMin(w, h);
+    const qreal dx = (w - sz) / 2;
+    const qreal dy = (h - sz) / 2;
+    const int hpw = qRound(qMax(qreal(1), sz / 14)) & -1;
+    const int pw = 2 * hpw;
+    const QRectF bounds(dx + hpw, dy + hpw, sz - pw - 1, sz - pw - 1);
+
+    QConicalGradient gradient;
+    gradient.setCenter(QPointF(dx + sz / 2, dy + sz / 2));
+    gradient.setColorAt(0, m_color);
+    gradient.setColorAt(0.1, m_color);
+    gradient.setColorAt(1, Qt::transparent);
+
+    painter->translate(0.5, 0.5);
+    painter->setRenderHint(QPainter::Antialiasing, true);
+    painter->setPen(QPen(gradient, pw, Qt::SolidLine));
+    painter->drawArc(bounds, 0, 360 * 16);
+    painter->setPen(QPen(m_color, pw, Qt::SolidLine, Qt::RoundCap));
+    painter->drawArc(bounds, 0, 20 * 16);
+}
+
+void QQuickFusionBusyIndicator::itemChange(ItemChange change, const ItemChangeData &data)
+{
+    QQuickPaintedItem::itemChange(change, data);
+
+    if (change == ItemOpacityHasChanged && qFuzzyIsNull(data.realValue))
+        setVisible(false);
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickfusionbusyindicator_p.cpp"
diff --git a/src/quickcontrols/fusion/impl/qquickfusionbusyindicator_p.h b/src/quickcontrols/fusion/impl/qquickfusionbusyindicator_p.h
new file mode 100644
index 0000000000..22ff2af788
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/qquickfusionbusyindicator_p.h
@@ -0,0 +1,52 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKFUSIONBUSYINDICATOR_P_H
+#define QQUICKFUSIONBUSYINDICATOR_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtGui/qcolor.h>
+#include <QtQuick/qquickpainteditem.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickFusionBusyIndicator : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor color READ color WRITE setColor FINAL)
+    Q_PROPERTY(bool running READ isRunning WRITE setRunning)
+    QML_NAMED_ELEMENT(BusyIndicatorImpl)
+    QML_ADDED_IN_VERSION(2, 3)
+
+public:
+    explicit QQuickFusionBusyIndicator(QQuickItem *parent = nullptr);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    bool isRunning() const;
+    void setRunning(bool running);
+
+    void paint(QPainter *painter) override;
+
+protected:
+    void itemChange(ItemChange change, const ItemChangeData &data) override;
+
+private:
+    QColor m_color;
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKFUSIONBUSYINDICATOR_P_H
diff --git a/src/quickcontrols/fusion/impl/qquickfusiondial.cpp b/src/quickcontrols/fusion/impl/qquickfusiondial.cpp
new file mode 100644
index 0000000000..99b022726c
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/qquickfusiondial.cpp
@@ -0,0 +1,108 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickfusiondial_p.h"
+
+#include <QtGui/qpainter.h>
+#include <QtGui/private/qmath_p.h>
+#include <QtQuick/private/qquickpalette_p.h>
+#include <QtQuick/private/qquickitem_p.h>
+
+QT_BEGIN_NAMESPACE
+
+QQuickFusionDial::QQuickFusionDial(QQuickItem *parent)
+    : QQuickPaintedItem(parent)
+{
+}
+
+bool QQuickFusionDial::highlight() const
+{
+    return m_highlight;
+}
+
+void QQuickFusionDial::setHighlight(bool highlight)
+{
+    if (m_highlight == highlight)
+        return;
+
+    m_highlight = highlight;
+    update();
+}
+
+// based on QStyleHelper::drawDial()
+void QQuickFusionDial::paint(QPainter *painter)
+{
+    const int width = QQuickItem::width();
+    const int height = QQuickItem::height();
+    if (width <= 0 || height <= 0 || !isVisible())
+        return;
+
+    const bool enabled = isEnabled();
+    qreal r = qMin(width, height) / 2.0;
+    r -= r/50;
+    const qreal penSize = r/20.0;
+
+    painter->setRenderHint(QPainter::Antialiasing);
+
+    const qreal d_ = r / 6;
+    const qreal dx = d_ + (width - 2 * r) / 2 + 1;
+    const qreal dy = d_ + (height - 2 * r) / 2 + 1;
+
+    QRectF br = QRectF(dx + 0.5, dy + 0.5,
+                       int(r * 2 - 2 * d_ - 2),
+                       int(r * 2 - 2 * d_ - 2));
+    QColor buttonColor = QQuickItemPrivate::get(this)->palette()->button().toHsv();
+    buttonColor.setHsv(buttonColor .hue(),
+                       qMin(140, buttonColor .saturation()),
+                       qMax(180, buttonColor.value()));
+
+    if (enabled) {
+        // Drop shadow
+        qreal shadowSize = qMax(1.0, penSize/2.0);
+        QRectF shadowRect= br.adjusted(-2*shadowSize, -2*shadowSize,
+                                       2*shadowSize, 2*shadowSize);
+        QRadialGradient shadowGradient(shadowRect.center().x(),
+                                       shadowRect.center().y(), shadowRect.width()/2.0,
+                                       shadowRect.center().x(), shadowRect.center().y());
+        shadowGradient.setColorAt(qreal(0.91), QColor(0, 0, 0, 40));
+        shadowGradient.setColorAt(qreal(1.0), Qt::transparent);
+        painter->setBrush(shadowGradient);
+        painter->setPen(Qt::NoPen);
+        painter->translate(shadowSize, shadowSize);
+        painter->drawEllipse(shadowRect);
+        painter->translate(-shadowSize, -shadowSize);
+
+        // Main gradient
+        QRadialGradient gradient(br.center().x() - br.width()/3, dy,
+                                 br.width()*1.3, br.center().x(),
+                                 br.center().y() - br.height()/2);
+        gradient.setColorAt(0, buttonColor.lighter(110));
+        gradient.setColorAt(qreal(0.5), buttonColor);
+        gradient.setColorAt(qreal(0.501), buttonColor.darker(102));
+        gradient.setColorAt(1, buttonColor.darker(115));
+        painter->setBrush(gradient);
+    } else {
+        painter->setBrush(Qt::NoBrush);
+    }
+
+    painter->setPen(QPen(buttonColor.darker(280)));
+    painter->drawEllipse(br);
+    painter->setBrush(Qt::NoBrush);
+    painter->setPen(buttonColor.lighter(110));
+    painter->drawEllipse(br.adjusted(1, 1, -1, -1));
+
+    if (m_highlight) {
+        QColor highlight = QQuickItemPrivate::get(this)->palette()->highlight().toHsv();
+        highlight.setHsv(highlight.hue(),
+                         qMin(160, highlight.saturation()),
+                         qMax(230, highlight.value()));
+        highlight.setAlpha(127);
+        painter->setPen(QPen(highlight, 2.0));
+        painter->setBrush(Qt::NoBrush);
+        painter->drawEllipse(br.adjusted(-1, -1, 1, 1));
+    }
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickfusiondial_p.cpp"
diff --git a/src/quickcontrols/fusion/impl/qquickfusiondial_p.h b/src/quickcontrols/fusion/impl/qquickfusiondial_p.h
new file mode 100644
index 0000000000..3167c81515
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/qquickfusiondial_p.h
@@ -0,0 +1,44 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKFUSIONDIAL_P_H
+#define QQUICKFUSIONDIAL_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtQuick/qquickpainteditem.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickFusionDial : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY(bool highlight READ highlight WRITE setHighlight FINAL)
+    QML_NAMED_ELEMENT(DialImpl)
+    QML_ADDED_IN_VERSION(2, 3)
+
+public:
+    explicit QQuickFusionDial(QQuickItem *parent = nullptr);
+
+    bool highlight() const;
+    void setHighlight(bool highlight);
+
+    void paint(QPainter *painter) override;
+
+private:
+    bool m_highlight = false;
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKFUSIONDIAL_P_H
diff --git a/src/quickcontrols/fusion/impl/qquickfusionknob.cpp b/src/quickcontrols/fusion/impl/qquickfusionknob.cpp
new file mode 100644
index 0000000000..00be4bd759
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/qquickfusionknob.cpp
@@ -0,0 +1,57 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickfusionknob_p.h"
+
+#include <QtCore/qmath.h>
+#include <QtGui/qpainter.h>
+#include <QtQuick/private/qquickpalette_p.h>
+#include <QtQuick/private/qquickitem_p.h>
+
+QT_BEGIN_NAMESPACE
+
+QQuickFusionKnob::QQuickFusionKnob(QQuickItem *parent)
+    : QQuickPaintedItem(parent)
+{
+    connect(this, &QQuickItem::paletteChanged, this, [this](){ update(); });
+}
+
+// extracted from QStyleHelper::drawDial()
+void QQuickFusionKnob::paint(QPainter *painter)
+{
+    const qreal w = width();
+    const qreal h = height();
+    if (w <= 0 || h <= 0)
+        return;
+
+    QColor color = QQuickItemPrivate::get(this)->palette()->button().toHsv();
+    color.setHsv(color.hue(),
+                 qMin(140, color .saturation()),
+                 qMax(180, color.value()));
+    color = color.lighter(104);
+    color.setAlphaF(0.8f);
+
+    const qreal sz = qMin(w, h);
+    QRectF rect(0, 0, sz, sz);
+    rect.moveCenter(QPointF(w / 2.0, h / 2.0));
+    const QPointF center = rect.center();
+
+    QRadialGradient gradient(center.x() + rect.width() / 2,
+                             center.y() + rect.width(),
+                             rect.width() * 2,
+                             center.x(), center.y());
+    gradient.setColorAt(1, color.darker(140));
+    gradient.setColorAt(qreal(0.4), color.darker(120));
+    gradient.setColorAt(0, color.darker(110));
+
+    painter->setRenderHint(QPainter::Antialiasing);
+    painter->setBrush(gradient);
+    painter->setPen(QColor(255, 255, 255, 150));
+    painter->drawEllipse(rect);
+    painter->setPen(QColor(0, 0, 0, 80));
+    painter->drawEllipse(rect.adjusted(1, 1, -1, -1));
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickfusionknob_p.cpp"
diff --git a/src/quickcontrols/fusion/impl/qquickfusionknob_p.h b/src/quickcontrols/fusion/impl/qquickfusionknob_p.h
new file mode 100644
index 0000000000..909aa4ffc6
--- /dev/null
+++ b/src/quickcontrols/fusion/impl/qquickfusionknob_p.h
@@ -0,0 +1,37 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKFUSIONKNOB_P_H
+#define QQUICKFUSIONKNOB_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtQuick/qquickpainteditem.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickFusionKnob : public QQuickPaintedItem
+{
+    Q_OBJECT
+    QML_NAMED_ELEMENT(KnobImpl)
+    QML_ADDED_IN_VERSION(2, 3)
+
+public:
+    explicit QQuickFusionKnob(QQuickItem *parent = nullptr);
+
+    void paint(QPainter *painter) override;
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKFUSIONKNOB_P_H
diff --git a/src/quickcontrols/fusion/qquickfusionstyle.cpp b/src/quickcontrols/fusion/qquickfusionstyle.cpp
new file mode 100644
index 0000000000..fec1a674bf
--- /dev/null
+++ b/src/quickcontrols/fusion/qquickfusionstyle.cpp
@@ -0,0 +1,122 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickfusionstyle_p.h"
+
+#include <QtGui/qcolor.h>
+#include <QtGui/qpalette.h>
+#include <QtGui/qpa/qplatformtheme.h>
+#include <QtGui/private/qguiapplication_p.h>
+
+#include <QtQuick/private/qquickpalette_p.h>
+
+QT_BEGIN_NAMESPACE
+
+QQuickFusionStyle::QQuickFusionStyle(QObject *parent)
+    : QObject(parent)
+{
+}
+
+QColor QQuickFusionStyle::lightShade()
+{
+    return QColor(255, 255, 255, 90);
+}
+
+QColor QQuickFusionStyle::darkShade()
+{
+    return QColor(0, 0, 0, 60);
+}
+
+QColor QQuickFusionStyle::topShadow()
+{
+    return QColor(0, 0, 0, 18);
+}
+
+QColor QQuickFusionStyle::innerContrastLine()
+{
+    return QColor(255, 255, 255, 30);
+}
+
+QColor QQuickFusionStyle::highlight(QQuickPalette *palette)
+{
+    return palette->highlight();
+}
+
+QColor QQuickFusionStyle::highlightedText(QQuickPalette *palette)
+{
+    return palette->highlightedText();
+}
+
+QColor QQuickFusionStyle::outline(QQuickPalette *palette)
+{
+    return palette->window().darker(140);
+}
+
+QColor QQuickFusionStyle::highlightedOutline(QQuickPalette *palette)
+{
+    QColor highlightedOutline = highlight(palette).darker(125).toHsv();
+    if (highlightedOutline.value() > 160)
+        highlightedOutline.setHsl(highlightedOutline.hue(), highlightedOutline.saturation(), 160);
+    return highlightedOutline;
+}
+
+QColor QQuickFusionStyle::tabFrameColor(QQuickPalette *palette)
+{
+    return buttonColor(palette).lighter(104);
+}
+
+QColor QQuickFusionStyle::buttonColor(QQuickPalette *palette, bool highlighted, bool down, bool hovered)
+{
+    QColor buttonColor = palette->button();
+    int val = qGray(buttonColor.rgb());
+    buttonColor = buttonColor.lighter(100 + qMax(1, (180 - val)/6));
+    buttonColor = buttonColor.toHsv();
+    buttonColor.setHsv(buttonColor.hue(), int(buttonColor.saturation() * 0.75), buttonColor.value());
+    if (highlighted)
+        buttonColor = mergedColors(buttonColor, highlightedOutline(palette).lighter(130), 90);
+    if (!hovered)
+        buttonColor = buttonColor.darker(104);
+    if (down)
+        buttonColor = buttonColor.darker(110);
+    return buttonColor;
+}
+
+QColor QQuickFusionStyle::buttonOutline(QQuickPalette *palette, bool highlighted, bool enabled)
+{
+    QColor darkOutline = enabled && highlighted ? highlightedOutline(palette) : outline(palette);
+    return !enabled ? darkOutline.lighter(115) : darkOutline;
+}
+
+QColor QQuickFusionStyle::gradientStart(const QColor &baseColor)
+{
+    return baseColor.lighter(124);
+}
+
+QColor QQuickFusionStyle::gradientStop(const QColor &baseColor)
+{
+    return baseColor.lighter(102);
+}
+
+QColor QQuickFusionStyle::mergedColors(const QColor &colorA, const QColor &colorB, int factor)
+{
+    const int maxFactor = 100;
+    const auto rgbColorB = colorB.toRgb();
+    QColor tmp = colorA.toRgb();
+    tmp.setRed((tmp.red() * factor) / maxFactor + (rgbColorB.red() * (maxFactor - factor)) / maxFactor);
+    tmp.setGreen((tmp.green() * factor) / maxFactor + (rgbColorB.green() * (maxFactor - factor)) / maxFactor);
+    tmp.setBlue((tmp.blue() * factor) / maxFactor + (rgbColorB.blue() * (maxFactor - factor)) / maxFactor);
+    return tmp;
+}
+
+QColor QQuickFusionStyle::grooveColor(QQuickPalette *palette)
+{
+    QColor color = buttonColor(palette).toHsv();
+    color.setHsv(color.hue(),
+                 qMin(255, color.saturation()),
+                 qMin<int>(255, color.value() * 0.9));
+    return color;
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickfusionstyle_p.cpp"
diff --git a/src/quickcontrols/fusion/qquickfusionstyle_p.h b/src/quickcontrols/fusion/qquickfusionstyle_p.h
new file mode 100644
index 0000000000..a264201211
--- /dev/null
+++ b/src/quickcontrols/fusion/qquickfusionstyle_p.h
@@ -0,0 +1,59 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKFUSIONSTYLE_P_H
+#define QQUICKFUSIONSTYLE_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtCore/qobject.h>
+#include <QtGui/qcolor.h>
+#include <QtQml/qqml.h>
+#include <QtQuick/private/qquickpalette_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickFusionStyle : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor lightShade READ lightShade CONSTANT)
+    Q_PROPERTY(QColor darkShade READ darkShade CONSTANT)
+    Q_PROPERTY(QColor topShadow READ topShadow CONSTANT)
+    Q_PROPERTY(QColor innerContrastLine READ innerContrastLine CONSTANT)
+    QML_NAMED_ELEMENT(Fusion)
+    QML_SINGLETON
+    QML_ADDED_IN_VERSION(2, 3)
+
+public:
+    explicit QQuickFusionStyle(QObject *parent = nullptr);
+
+    static QColor lightShade();
+    static QColor darkShade();
+    static QColor topShadow();
+    static QColor innerContrastLine();
+
+    Q_INVOKABLE static QColor highlight(QQuickPalette *palette);
+    Q_INVOKABLE static QColor highlightedText(QQuickPalette *palette);
+    Q_INVOKABLE static QColor outline(QQuickPalette *palette);
+    Q_INVOKABLE static QColor highlightedOutline(QQuickPalette *palette);
+    Q_INVOKABLE static QColor tabFrameColor(QQuickPalette *palette);
+    Q_INVOKABLE static QColor buttonColor(QQuickPalette *palette, bool highlighted = false, bool down = false, bool hovered = false);
+    Q_INVOKABLE static QColor buttonOutline(QQuickPalette *palette, bool highlighted = false, bool enabled = true);
+    Q_INVOKABLE static QColor gradientStart(const QColor &baseColor);
+    Q_INVOKABLE static QColor gradientStop(const QColor &baseColor);
+    Q_INVOKABLE static QColor mergedColors(const QColor &colorA, const QColor &colorB, int factor = 50);
+    Q_INVOKABLE static QColor grooveColor(QQuickPalette *palette);
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKFUSIONSTYLE_P_H
diff --git a/src/quickcontrols/fusion/qquickfusiontheme.cpp b/src/quickcontrols/fusion/qquickfusiontheme.cpp
new file mode 100644
index 0000000000..335d3be73f
--- /dev/null
+++ b/src/quickcontrols/fusion/qquickfusiontheme.cpp
@@ -0,0 +1,18 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickfusiontheme_p.h"
+
+#include <QtQuickTemplates2/private/qquicktheme_p.h>
+#include <QtQuickControls2/private/qquickstyle_p.h>
+
+QT_BEGIN_NAMESPACE
+
+extern QPalette qt_fusionPalette();
+
+void QQuickFusionTheme::initialize(QQuickTheme *theme)
+{
+    theme->setPalette(QQuickTheme::System, qt_fusionPalette());
+}
+
+QT_END_NAMESPACE
diff --git a/src/quickcontrols/fusion/qquickfusiontheme_p.h b/src/quickcontrols/fusion/qquickfusiontheme_p.h
new file mode 100644
index 0000000000..a41c9d7315
--- /dev/null
+++ b/src/quickcontrols/fusion/qquickfusiontheme_p.h
@@ -0,0 +1,32 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKFUSIONTHEME_P_H
+#define QQUICKFUSIONTHEME_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickTheme;
+
+class QQuickFusionTheme
+{
+public:
+    static void initialize(QQuickTheme *theme);
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKFUSIONTHEME_P_H
diff --git a/src/quickcontrols/fusion/qtquickcontrols2fusionstyleplugin.cpp b/src/quickcontrols/fusion/qtquickcontrols2fusionstyleplugin.cpp
new file mode 100644
index 0000000000..532d7597ce
--- /dev/null
+++ b/src/quickcontrols/fusion/qtquickcontrols2fusionstyleplugin.cpp
@@ -0,0 +1,48 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickfusionstyle_p.h"
+#include "qquickfusiontheme_p.h"
+
+#include <QtQml/qqml.h>
+#include <QtQuickControls2/private/qquickstyleplugin_p.h>
+#include <QtQuickTemplates2/private/qquicktheme_p.h>
+
+QT_BEGIN_NAMESPACE
+
+extern void qml_register_types_QtQuick_Controls_Fusion();
+Q_GHS_KEEP_REFERENCE(qml_register_types_QtQuick_Controls_Fusion);
+
+class QtQuickControls2FusionStylePlugin : public QQuickStylePlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtQuickControls2FusionStylePlugin(QObject *parent = nullptr);
+
+    QString name() const override;
+    void initializeTheme(QQuickTheme *theme) override;
+
+    QQuickFusionTheme theme;
+};
+
+QtQuickControls2FusionStylePlugin::QtQuickControls2FusionStylePlugin(QObject *parent) : QQuickStylePlugin(parent)
+{
+    volatile auto registration = &qml_register_types_QtQuick_Controls_Fusion;
+    Q_UNUSED(registration);
+}
+
+QString QtQuickControls2FusionStylePlugin::name() const
+{
+    return QStringLiteral("Fusion");
+}
+
+void QtQuickControls2FusionStylePlugin::initializeTheme(QQuickTheme *theme)
+{
+    this->theme.initialize(theme);
+}
+
+QT_END_NAMESPACE
+
+#include "qtquickcontrols2fusionstyleplugin.moc"
diff --git a/src/quickcontrols/imagine/ApplicationWindow.qml b/src/quickcontrols/imagine/ApplicationWindow.qml
new file mode 100644
index 0000000000..c0ea1037c1
--- /dev/null
+++ b/src/quickcontrols/imagine/ApplicationWindow.qml
@@ -0,0 +1,24 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.ApplicationWindow {
+    id: window
+
+    background: NinePatchImage {
+        width: window.width
+        height: window.height
+
+        source: Imagine.url + "applicationwindow-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"active": window.active}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/BusyIndicator.qml b/src/quickcontrols/imagine/BusyIndicator.qml
new file mode 100644
index 0000000000..6dc40dc4be
--- /dev/null
+++ b/src/quickcontrols/imagine/BusyIndicator.qml
@@ -0,0 +1,55 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.BusyIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    contentItem: AnimatedImage {
+        opacity: control.running ? 1 : 0
+        playing: control.running || opacity > 0
+        visible: control.running || opacity > 0
+        Behavior on opacity { OpacityAnimator { duration: 250 } }
+
+        source: Imagine.url + "busyindicator-animation"
+        AnimatedImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"running": control.running},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "busyindicator-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"running": control.running},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Button.qml b/src/quickcontrols/imagine/Button.qml
new file mode 100644
index 0000000000..6526909587
--- /dev/null
+++ b/src/quickcontrols/imagine/Button.qml
@@ -0,0 +1,65 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.Button {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    spacing: 6 // ###
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.enabled && control.flat && control.highlighted ? control.palette.highlight
+        : control.enabled && (control.down || control.checked || control.highlighted) && !control.flat
+        ? control.palette.brightText : control.flat ? control.palette.windowText : control.palette.buttonText
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled && control.flat && control.highlighted ? control.palette.highlight
+            : control.enabled && (control.down || control.checked || control.highlighted) && !control.flat
+            ? control.palette.brightText : control.flat ? control.palette.windowText : control.palette.buttonText
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "button-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"checkable": control.checkable},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"mirrored": control.mirrored},
+                {"flat": control.flat},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/CMakeLists.txt b/src/quickcontrols/imagine/CMakeLists.txt
new file mode 100644
index 0000000000..e4a164add2
--- /dev/null
+++ b/src/quickcontrols/imagine/CMakeLists.txt
@@ -0,0 +1,148 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2imaginestyleplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "ApplicationWindow.qml"
+    "BusyIndicator.qml"
+    "Button.qml"
+    "CheckBox.qml"
+    "CheckDelegate.qml"
+    "ComboBox.qml"
+    "DelayButton.qml"
+    "Dial.qml"
+    "Dialog.qml"
+    "DialogButtonBox.qml"
+    "Drawer.qml"
+    "Frame.qml"
+    "GroupBox.qml"
+    "HorizontalHeaderView.qml"
+    "ItemDelegate.qml"
+    "Label.qml"
+    "Menu.qml"
+    "MenuItem.qml"
+    "MenuSeparator.qml"
+    "PageIndicator.qml"
+    "Page.qml"
+    "Pane.qml"
+    "Popup.qml"
+    "ProgressBar.qml"
+    "RadioButton.qml"
+    "RadioDelegate.qml"
+    "RangeSlider.qml"
+    "RoundButton.qml"
+    "ScrollView.qml"
+    "ScrollBar.qml"
+    "ScrollIndicator.qml"
+    "SelectionRectangle.qml"
+    "Slider.qml"
+    "SpinBox.qml"
+    "SplitView.qml"
+    "StackView.qml"
+    "SwipeDelegate.qml"
+    "SwipeView.qml"
+    "Switch.qml"
+    "SwitchDelegate.qml"
+    "TextField.qml"
+    "TextArea.qml"
+    "TabBar.qml"
+    "TabButton.qml"
+    "ToolBar.qml"
+    "ToolButton.qml"
+    "ToolSeparator.qml"
+    "ToolTip.qml"
+    "Tumbler.qml"
+    "VerticalHeaderView.qml"
+)
+set_source_files_properties(DelayButton.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.2;6.0"
+)
+set_source_files_properties(Dialog.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(DialogButtonBox.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(HorizontalHeaderView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.15;6.0"
+)
+set_source_files_properties(MenuSeparator.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(RoundButton.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(SplitView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.13;6.0"
+)
+set_source_files_properties(ToolSeparator.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(VerticalHeaderView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.15;6.0"
+)
+
+qt_internal_add_qml_module(qtquickcontrols2imaginestyleplugin
+    URI "QtQuick.Controls.Imagine"
+    VERSION "${PROJECT_VERSION}"
+    PAST_MAJOR_VERSIONS 2
+    CLASS_NAME QtQuickControls2ImagineStylePlugin
+    IMPORTS
+        QtQuick.Controls.Basic/auto
+    PLUGIN_TARGET qtquickcontrols2imaginestyleplugin
+    NO_PLUGIN_OPTIONAL
+    NO_GENERATE_PLUGIN_SOURCE
+    SOURCES
+        qquickimaginestyle.cpp qquickimaginestyle_p.h
+        qquickimaginetheme.cpp qquickimaginetheme_p.h
+        qtquickcontrols2imaginestyleplugin.cpp
+    QML_FILES
+        ${qml_files}
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::GuiPrivate
+        Qt::QmlPrivate
+        Qt::QuickControls2ImplPrivate
+        Qt::QuickControls2Private
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+)
+
+file(GLOB resource_glob_0 RELATIVE "${CMAKE_CURRENT_SOURCE_DIR}" "images/*.png")
+foreach(file IN LISTS resource_glob_0)
+    set_source_files_properties("${CMAKE_CURRENT_SOURCE_DIR}/${file}" PROPERTIES QT_RESOURCE_ALIAS "${file}")
+endforeach()
+
+file(GLOB resource_glob_1 RELATIVE "${CMAKE_CURRENT_SOURCE_DIR}" "images/*.webp")
+foreach(file IN LISTS resource_glob_1)
+    set_source_files_properties("${CMAKE_CURRENT_SOURCE_DIR}/${file}" PROPERTIES QT_RESOURCE_ALIAS "${file}")
+endforeach()
+
+# Resources:
+set(qmake_qtquickcontrols2imaginestyleplugin_resource_files
+    ${resource_glob_0}
+    ${resource_glob_1}
+)
+
+qt_internal_add_resource(qtquickcontrols2imaginestyleplugin "qmake_qtquickcontrols2imaginestyleplugin"
+    PREFIX
+        "/qt-project.org/imports/QtQuick/Controls/Imagine"
+    FILES
+        ${qmake_qtquickcontrols2imaginestyleplugin_resource_files}
+)
+
+add_subdirectory(impl)
+
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2imaginestyleplugin quickwindow)
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2imaginestyleplugin
+                                              qtquickcontrols2imaginestyleimplplugin)
+
+# Basic style is the required fallback style.
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2imaginestyleplugin
+                                              qtquickcontrols2basicstyleplugin)
diff --git a/src/quickcontrols/imagine/CheckBox.qml b/src/quickcontrols/imagine/CheckBox.qml
new file mode 100644
index 0000000000..11a2048e6f
--- /dev/null
+++ b/src/quickcontrols/imagine/CheckBox.qml
@@ -0,0 +1,73 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.CheckBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 6 // ###
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    indicator: Image {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        source: Imagine.url + "checkbox-indicator"
+        ImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checkState === Qt.Checked},
+                {"partially-checked": control.checkState === Qt.PartiallyChecked},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "checkbox-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checkState === Qt.Checked},
+                {"partially-checked": control.checkState === Qt.PartiallyChecked},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/CheckDelegate.qml b/src/quickcontrols/imagine/CheckDelegate.qml
new file mode 100644
index 0000000000..ccae3c1b9f
--- /dev/null
+++ b/src/quickcontrols/imagine/CheckDelegate.qml
@@ -0,0 +1,84 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.CheckDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 12 // ###
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.text
+
+    indicator: Image {
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        source: Imagine.url + "checkdelegate-indicator"
+        ImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checkState === Qt.Checked},
+                {"partially-checked": control.checkState === Qt.PartiallyChecked},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+
+    contentItem: IconLabel {
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.text
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "checkdelegate-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checkState === Qt.Checked},
+                {"partially-checked": control.checkState === Qt.PartiallyChecked},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/ComboBox.qml b/src/quickcontrols/imagine/ComboBox.qml
new file mode 100644
index 0000000000..254313454c
--- /dev/null
+++ b/src/quickcontrols/imagine/ComboBox.qml
@@ -0,0 +1,139 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.ComboBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + (background ? background.leftPadding + background.rightPadding : 0))
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             Math.max(implicitContentHeight,
+                                      implicitIndicatorHeight) + (background ? background.topPadding + background.bottomPadding : 0))
+
+    leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+    rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    delegate: ItemDelegate {
+        width: ListView.view.width
+        text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
+        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
+        highlighted: control.highlightedIndex === index
+        hoverEnabled: control.hoverEnabled
+    }
+
+    indicator: Image {
+        x: control.mirrored ? control.padding : control.width - width - control.padding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        source: Imagine.url + "combobox-indicator"
+        ImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.pressed},
+                {"editable": control.editable},
+                {"open": control.down},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered},
+                {"flat": control.flat}
+            ]
+        }
+    }
+
+    contentItem: T.TextField {
+        topPadding: control.background ? control.background.topPadding : 0
+        leftPadding: control.background ? control.background.leftPadding : 0
+        rightPadding: control.background ? control.background.rightPadding : 0
+        bottomPadding: control.background ? control.background.bottomPadding : 0
+
+        text: control.editable ? control.editText : control.displayText
+
+        enabled: control.editable
+        autoScroll: control.editable
+        readOnly: control.down
+        inputMethodHints: control.inputMethodHints
+        validator: control.validator
+        selectByMouse: control.selectTextByMouse
+
+        color: control.flat ? control.palette.windowText : control.editable ? control.palette.text : control.palette.buttonText
+        selectionColor: control.palette.highlight
+        selectedTextColor: control.palette.highlightedText
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "combobox-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.pressed},
+                {"editable": control.editable},
+                {"open": control.down},
+                {"focused": control.visualFocus || (control.editable && control.activeFocus)},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered},
+                {"flat": control.flat}
+            ]
+        }
+    }
+
+    popup: T.Popup {
+        width: control.width
+        height: Math.min(contentItem.implicitHeight + topPadding + bottomPadding, control.Window.height - topMargin - bottomMargin)
+
+        topMargin: background.topInset
+        bottomMargin: background.bottomInset
+
+        topPadding: background.topPadding
+        leftPadding: background.leftPadding
+        rightPadding: background.rightPadding
+        bottomPadding: background.bottomPadding
+
+        topInset: background ? -background.topInset || 0 : 0
+        leftInset: background ? -background.leftInset || 0 : 0
+        rightInset: background ? -background.rightInset || 0 : 0
+        bottomInset: background ? -background.bottomInset || 0 : 0
+
+        palette.text: control.palette.text
+        palette.highlight: control.palette.highlight
+        palette.highlightedText: control.palette.highlightedText
+        palette.windowText: control.palette.windowText
+        palette.buttonText: control.palette.buttonText
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
+            highlightMoveDuration: 0
+
+            T.ScrollIndicator.vertical: ScrollIndicator { }
+        }
+
+        background: NinePatchImage {
+            source: Imagine.url + "combobox-popup"
+            NinePatchImageSelector on source {
+                states: [
+                    {"disabled": !control.enabled},
+                    {"pressed": control.pressed},
+                    {"editable": control.editable},
+                    {"focused": control.visualFocus || (control.editable && control.activeFocus)},
+                    {"mirrored": control.mirrored},
+                    {"hovered": control.enabled && control.hovered},
+                    {"flat": control.flat}
+                ]
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/DelayButton.qml b/src/quickcontrols/imagine/DelayButton.qml
new file mode 100644
index 0000000000..73854cdd33
--- /dev/null
+++ b/src/quickcontrols/imagine/DelayButton.qml
@@ -0,0 +1,104 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.DelayButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    transition: Transition {
+        NumberAnimation {
+            duration: control.delay * (control.pressed ? 1.0 - control.progress : 0.3 * control.progress)
+        }
+    }
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        color: control.palette.buttonText
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: NinePatchImage {
+        source: control.Imagine.url + "delaybutton-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+
+        readonly property NinePatchImage progress: NinePatchImage {
+            parent: control.background
+            width: control.progress * parent.width
+            height: parent.height
+            visible: false
+
+            source: control.Imagine.url + "delaybutton-progress"
+            NinePatchImageSelector on source {
+                states: [
+                    {"disabled": !control.enabled},
+                    {"pressed": control.down},
+                    {"checked": control.checked},
+                    {"focused": control.visualFocus},
+                    {"mirrored": control.mirrored},
+                    {"hovered": control.enabled && control.hovered}
+                ]
+            }
+        }
+
+        readonly property NinePatchImage mask: NinePatchImage {
+            width: control.background.width
+            height: control.background.height
+            visible: false
+
+            source: control.Imagine.url + "delaybutton-mask"
+            NinePatchImageSelector on source {
+                states: [
+                    {"disabled": !control.enabled},
+                    {"pressed": control.down},
+                    {"checked": control.checked},
+                    {"focused": control.visualFocus},
+                    {"mirrored": control.mirrored},
+                    {"hovered": control.enabled && control.hovered}
+                ]
+            }
+        }
+
+        readonly property OpacityMask effect: OpacityMask {
+            parent: control.background
+            width: source.width
+            height: source.height
+            source: control.background.progress
+
+            maskSource: ShaderEffectSource {
+                sourceItem: control.background.mask
+                sourceRect: Qt.rect(0, 0, control.background.effect.width, control.background.effect.height)
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Dial.qml b/src/quickcontrols/imagine/Dial.qml
new file mode 100644
index 0000000000..85eb0a8422
--- /dev/null
+++ b/src/quickcontrols/imagine/Dial.qml
@@ -0,0 +1,67 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.Dial {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                           (handle ? handle.implicitWidth : 0) + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                            (handle ? handle.implicitHeight : 0) + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    handle: Image {
+        x: control.background.x + control.background.width / 2 - width / 2
+        y: control.background.y + control.background.height / 2 - height / 2
+
+        source: Imagine.url + "dial-handle"
+        ImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.pressed},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+
+        transform: [
+            Translate {
+                y: -Math.min(control.background.width, control.background.height) * 0.4 + control.handle.height / 2
+            },
+            Rotation {
+                angle: control.angle
+                origin.x: control.handle.width / 2
+                origin.y: control.handle.height / 2
+            }
+        ]
+    }
+
+    background: NinePatchImage {
+        fillMode: Image.PreserveAspectFit
+        source: Imagine.url + "dial-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.pressed},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Dialog.qml b/src/quickcontrols/imagine/Dialog.qml
new file mode 100644
index 0000000000..4d3c29633e
--- /dev/null
+++ b/src/quickcontrols/imagine/Dialog.qml
@@ -0,0 +1,83 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.Dialog {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitHeaderWidth,
+                            implicitFooterWidth)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding
+                             + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+                             + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    background: NinePatchImage {
+        source: Imagine.url + "dialog-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"modal": control.modal},
+                {"dim": control.dim}
+            ]
+        }
+    }
+
+    header: Label {
+        text: control.title
+        visible: control.title
+        elide: Label.ElideRight
+        font.bold: true
+        padding: 12
+
+        background: NinePatchImage {
+            width: parent.width
+            height: parent.height
+
+            source: Imagine.url + "dialog-title"
+            NinePatchImageSelector on source {
+                states: [
+                    {"modal": control.modal},
+                    {"dim": control.dim}
+                ]
+            }
+        }
+    }
+
+    footer: DialogButtonBox {
+        visible: count > 0
+    }
+
+    T.Overlay.modal: NinePatchImage {
+        source: Imagine.url + "dialog-overlay"
+        NinePatchImageSelector on source {
+            states: [
+                {"modal": true}
+            ]
+        }
+    }
+
+    T.Overlay.modeless: NinePatchImage {
+        source: Imagine.url + "dialog-overlay"
+        NinePatchImageSelector on source {
+            states: [
+                {"modal": false}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/DialogButtonBox.qml b/src/quickcontrols/imagine/DialogButtonBox.qml
new file mode 100644
index 0000000000..81d87b65df
--- /dev/null
+++ b/src/quickcontrols/imagine/DialogButtonBox.qml
@@ -0,0 +1,52 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.DialogButtonBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            (control.count === 1 ? contentWidth * 2 : contentWidth) + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    spacing: 6
+
+    delegate: Button {
+        width: control.count === 1 ? control.availableWidth / 2 : undefined
+        flat: true
+    }
+
+    contentItem: ListView {
+        implicitWidth: contentWidth
+        model: control.contentModel
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        snapMode: ListView.SnapToItem
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "dialogbuttonbox-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Drawer.qml b/src/quickcontrols/imagine/Drawer.qml
new file mode 100644
index 0000000000..b6ecbb2b20
--- /dev/null
+++ b/src/quickcontrols/imagine/Drawer.qml
@@ -0,0 +1,63 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.Drawer {
+    id: control
+
+    parent: T.Overlay.overlay
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    enter: Transition { SmoothedAnimation { velocity: 5 } }
+    exit: Transition { SmoothedAnimation { velocity: 5 } }
+
+    background: NinePatchImage {
+        source: Imagine.url + "drawer-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"modal": control.modal},
+                {"dim": control.dim},
+                {"top": control.edge === Qt.TopEdge},
+                {"left": control.edge === Qt.LeftEdge},
+                {"right": control.edge === Qt.RightEdge},
+                {"bottom": control.edge === Qt.BottomEdge}
+            ]
+        }
+    }
+
+    T.Overlay.modal: NinePatchImage {
+        source: Imagine.url + "drawer-overlay"
+        NinePatchImageSelector on source {
+            states: [
+                {"modal": true}
+            ]
+        }
+    }
+
+    T.Overlay.modeless: NinePatchImage {
+        source: Imagine.url + "drawer-overlay"
+        NinePatchImageSelector on source {
+            states: [
+                {"modal": false}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Frame.qml b/src/quickcontrols/imagine/Frame.qml
new file mode 100644
index 0000000000..a3076171f5
--- /dev/null
+++ b/src/quickcontrols/imagine/Frame.qml
@@ -0,0 +1,36 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.Frame {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    background: NinePatchImage {
+        source: Imagine.url + "frame-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/GroupBox.qml b/src/quickcontrols/imagine/GroupBox.qml
new file mode 100644
index 0000000000..e833a92da1
--- /dev/null
+++ b/src/quickcontrols/imagine/GroupBox.qml
@@ -0,0 +1,65 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.GroupBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitLabelWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: ((background as NinePatchImage)?.topPadding ?? 0) + (implicitLabelWidth > 0 ? implicitLabelHeight + spacing : 0)
+    leftPadding: ((background as NinePatchImage)?.leftPadding ?? 0)
+    rightPadding: ((background as NinePatchImage)?.rightPadding ?? 0)
+    bottomPadding: ((background as NinePatchImage)?.bottomPadding ?? 0)
+
+    label: Label {
+        width: control.width
+
+        topPadding: background.topPadding
+        leftPadding: background.leftPadding
+        rightPadding: background.rightPadding
+        bottomPadding: background.bottomPadding
+
+        text: control.title
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+
+        color: control.palette.windowText
+
+        background: NinePatchImage {
+            width: parent.width
+            height: parent.height
+
+            source: Imagine.url + "groupbox-title"
+            NinePatchImageSelector on source {
+                states: [
+                    {"disabled": !control.enabled},
+                    {"mirrored": control.mirrored}
+                ]
+            }
+        }
+    }
+
+    background: NinePatchImage {
+        x: -leftInset
+        y: control.topPadding - control.bottomPadding - topInset
+        width: control.width + leftInset + rightInset
+        height: control.height + topInset + bottomInset - control.topPadding + control.bottomPadding
+
+        source: Imagine.url + "groupbox-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/HorizontalHeaderView.qml b/src/quickcontrols/imagine/HorizontalHeaderView.qml
new file mode 100644
index 0000000000..140c9f3ae8
--- /dev/null
+++ b/src/quickcontrols/imagine/HorizontalHeaderView.qml
@@ -0,0 +1,34 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.HorizontalHeaderView {
+    id: control
+
+    implicitWidth: syncView ? syncView.width : 0
+    implicitHeight: contentHeight
+
+    delegate: Rectangle {
+        // Qt6: add cellPadding (and font etc) as public API in headerview
+        readonly property real cellPadding: 8
+
+        implicitWidth: text.implicitWidth + (cellPadding * 2)
+        implicitHeight: Math.max(control.height, text.implicitHeight + (cellPadding * 2))
+        color: "#f6f6f6"
+        border.color: "#e4e4e4"
+
+        Text {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            height: parent.height
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: "#ff26282a"
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/ItemDelegate.qml b/src/quickcontrols/imagine/ItemDelegate.qml
new file mode 100644
index 0000000000..2a2b0bd796
--- /dev/null
+++ b/src/quickcontrols/imagine/ItemDelegate.qml
@@ -0,0 +1,60 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.ItemDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 12 // ###
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.text
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.text
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "itemdelegate-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Label.qml b/src/quickcontrols/imagine/Label.qml
new file mode 100644
index 0000000000..9a612bcd35
--- /dev/null
+++ b/src/quickcontrols/imagine/Label.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.Label {
+    id: control
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    color: control.palette.windowText
+    linkColor: control.palette.link
+
+    background: NinePatchImage {
+        source: Imagine.url + "label-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Menu.qml b/src/quickcontrols/imagine/Menu.qml
new file mode 100644
index 0000000000..6c58ea7290
--- /dev/null
+++ b/src/quickcontrols/imagine/Menu.qml
@@ -0,0 +1,74 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+import QtQuick.Window
+
+T.Menu {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topMargin: background ? background.topInset : 0
+    leftMargin: background ? background.leftInset : 0
+    rightMargin: background ? background.rightInset : 0
+    bottomMargin: background ? background.bottomInset : 0
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    delegate: MenuItem { }
+
+    contentItem: ListView {
+        implicitHeight: contentHeight
+        model: control.contentModel
+        interactive: Window.window
+                        ? contentHeight + control.topPadding + control.bottomPadding > Window.window.height
+                        : false
+        clip: true
+        currentIndex: control.currentIndex
+
+        T.ScrollIndicator.vertical: ScrollIndicator { }
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "menu-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"modal": control.modal},
+                {"dim": control.dim}
+            ]
+        }
+    }
+
+    T.Overlay.modal: NinePatchImage {
+        source: Imagine.url + "menu-overlay"
+        NinePatchImageSelector on source {
+            states: [
+                {"modal": true}
+            ]
+        }
+    }
+
+    T.Overlay.modeless: NinePatchImage {
+        source: Imagine.url + "menu-overlay"
+        NinePatchImageSelector on source {
+            states: [
+                {"modal": false}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/MenuItem.qml b/src/quickcontrols/imagine/MenuItem.qml
new file mode 100644
index 0000000000..5d8809d61a
--- /dev/null
+++ b/src/quickcontrols/imagine/MenuItem.qml
@@ -0,0 +1,104 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.MenuItem {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 6 // ###
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.windowText
+
+    contentItem: IconLabel {
+        readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
+        readonly property real indicatorPadding: control.checkable && control.indicator ? control.indicator.width + control.spacing : 0
+        leftPadding: !control.mirrored ? indicatorPadding : arrowPadding
+        rightPadding: control.mirrored ? indicatorPadding : arrowPadding
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+    }
+
+    arrow: Image {
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        visible: control.subMenu
+        source: Imagine.url + "menuitem-arrow"
+        ImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+
+    indicator: Image {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        visible: control.checkable
+        source: Imagine.url + "menuitem-indicator"
+        ImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "menuitem-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/MenuSeparator.qml b/src/quickcontrols/imagine/MenuSeparator.qml
new file mode 100644
index 0000000000..0ed3504dca
--- /dev/null
+++ b/src/quickcontrols/imagine/MenuSeparator.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.MenuSeparator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    contentItem: NinePatchImage {
+        source: Imagine.url + "menuseparator-separator"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "menuseparator-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Page.qml b/src/quickcontrols/imagine/Page.qml
new file mode 100644
index 0000000000..9e32db27b7
--- /dev/null
+++ b/src/quickcontrols/imagine/Page.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.Page {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitHeaderWidth,
+                            implicitFooterWidth)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding
+                             + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+                             + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    background: NinePatchImage {
+        source: Imagine.url + "page-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/PageIndicator.qml b/src/quickcontrols/imagine/PageIndicator.qml
new file mode 100644
index 0000000000..42afbda70a
--- /dev/null
+++ b/src/quickcontrols/imagine/PageIndicator.qml
@@ -0,0 +1,59 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.PageIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    delegate: Image {
+        source: Imagine.url + "pageindicator-delegate"
+        ImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": pressed},
+                {"current": index === control.currentIndex},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered} // ### TODO: context property
+            ]
+        }
+    }
+
+    contentItem: Row {
+        spacing: control.spacing
+
+        Repeater {
+            model: control.count
+            delegate: control.delegate
+        }
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "pageindicator-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Pane.qml b/src/quickcontrols/imagine/Pane.qml
new file mode 100644
index 0000000000..f74ea96d23
--- /dev/null
+++ b/src/quickcontrols/imagine/Pane.qml
@@ -0,0 +1,36 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.Pane {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    background: NinePatchImage {
+        source: Imagine.url + "pane-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Popup.qml b/src/quickcontrols/imagine/Popup.qml
new file mode 100644
index 0000000000..185f2fabaf
--- /dev/null
+++ b/src/quickcontrols/imagine/Popup.qml
@@ -0,0 +1,54 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.Popup {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : undefined
+    leftPadding: background ? background.leftPadding : undefined
+    rightPadding: background ? background.rightPadding : undefined
+    bottomPadding: background ? background.bottomPadding : undefined
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    background: NinePatchImage {
+        source: Imagine.url + "popup-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"modal": control.modal},
+                {"dim": control.dim}
+            ]
+        }
+    }
+
+    T.Overlay.modal: NinePatchImage {
+        source: Imagine.url + "popup-overlay"
+        NinePatchImageSelector on source {
+            states: [
+                {"modal": true}
+            ]
+        }
+    }
+
+    T.Overlay.modeless: NinePatchImage {
+        source: Imagine.url + "popup-overlay"
+        NinePatchImageSelector on source {
+            states: [
+                {"modal": false}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/ProgressBar.qml b/src/quickcontrols/imagine/ProgressBar.qml
new file mode 100644
index 0000000000..641320fab3
--- /dev/null
+++ b/src/quickcontrols/imagine/ProgressBar.qml
@@ -0,0 +1,108 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.ProgressBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    contentItem: Item {
+        implicitWidth: control.indeterminate ? animation.implicitWidth || progress.implicitWidth : progress.implicitWidth
+        implicitHeight: control.indeterminate ? animation.implicitHeight || progress.implicitHeight : progress.implicitHeight
+        scale: control.mirrored ? -1 : 1
+
+        readonly property bool hasMask: mask.status !== Image.Null
+
+        readonly property NinePatchImage progress: NinePatchImage {
+            parent: control.contentItem
+            width: control.position * parent.width
+            height: parent.height
+            visible: !control.indeterminate && !control.contentItem.hasMask
+
+            source: Imagine.url + "progressbar-progress"
+            NinePatchImageSelector on source {
+                states: [
+                    {"disabled": !control.enabled},
+                    {"indeterminate": control.indeterminate},
+                    {"mirrored": control.mirrored},
+                    {"hovered": control.enabled && control.hovered}
+                ]
+            }
+        }
+
+        readonly property AnimatedImage animation: AnimatedImage {
+            parent: control.contentItem
+            width: parent.width
+            height: parent.height
+            playing: control.indeterminate
+            visible: control.indeterminate && !control.contentItem.hasMask
+
+            source: Imagine.url + "progressbar-animation"
+            AnimatedImageSelector on source {
+                states: [
+                    {"disabled": !control.enabled},
+                    {"mirrored": control.mirrored},
+                    {"hovered": control.enabled && control.hovered}
+                ]
+            }
+        }
+
+        readonly property NinePatchImage mask: NinePatchImage {
+            width: control.availableWidth
+            height: control.availableHeight
+            visible: false
+
+            source: Imagine.url + "progressbar-mask"
+            NinePatchImageSelector on source {
+                states: [
+                    {"disabled": !control.enabled},
+                    {"indeterminate": control.indeterminate},
+                    {"mirrored": control.mirrored},
+                    {"hovered": control.enabled && control.hovered}
+                ]
+            }
+        }
+
+        readonly property OpacityMask effect: OpacityMask {
+            parent: control.contentItem
+            width: source.width
+            height: source.height
+            source: control.indeterminate ? control.contentItem.animation : control.contentItem.progress
+
+            maskSource: ShaderEffectSource {
+                sourceItem: control.contentItem.mask
+                sourceRect: Qt.rect(0, 0, control.contentItem.effect.width, control.contentItem.effect.height)
+            }
+        }
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "progressbar-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"indeterminate": control.indeterminate},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/RadioButton.qml b/src/quickcontrols/imagine/RadioButton.qml
new file mode 100644
index 0000000000..2f9335eb7c
--- /dev/null
+++ b/src/quickcontrols/imagine/RadioButton.qml
@@ -0,0 +1,71 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.RadioButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 6 // ###
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    indicator: Image {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        source: Imagine.url + "radiobutton-indicator"
+        ImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "radiobutton-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/RadioDelegate.qml b/src/quickcontrols/imagine/RadioDelegate.qml
new file mode 100644
index 0000000000..f872798864
--- /dev/null
+++ b/src/quickcontrols/imagine/RadioDelegate.qml
@@ -0,0 +1,82 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.RadioDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 12 // ###
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.text
+
+    indicator: Image {
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        source: Imagine.url + "radiodelegate-indicator"
+        ImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+
+    contentItem: IconLabel {
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.text
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "radiodelegate-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/RangeSlider.qml b/src/quickcontrols/imagine/RangeSlider.qml
new file mode 100644
index 0000000000..e0559e65b3
--- /dev/null
+++ b/src/quickcontrols/imagine/RangeSlider.qml
@@ -0,0 +1,101 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.RangeSlider {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            first.implicitHandleWidth + leftPadding + rightPadding,
+                            second.implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             first.implicitHandleHeight + topPadding + bottomPadding,
+                             second.implicitHandleHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    first.handle: Image {
+        x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
+
+        source: control.Imagine.url + "rangeslider-handle"
+        ImageSelector on source {
+            states: [
+                {"first": true},
+                {"vertical": control.vertical},
+                {"horizontal": control.horizontal},
+                {"disabled": !control.enabled},
+                {"pressed": control.first.pressed},
+                {"focused": control.first.handle.activeFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.first.hovered}
+            ]
+        }
+    }
+
+    second.handle: Image {
+        x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
+
+        source: control.Imagine.url + "rangeslider-handle"
+        ImageSelector on source {
+            states: [
+                {"second": true},
+                {"vertical": control.vertical},
+                {"horizontal": control.horizontal},
+                {"disabled": !control.enabled},
+                {"pressed": control.second.pressed},
+                {"focused": control.second.handle.activeFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.second.hovered}
+            ]
+        }
+    }
+
+    background: NinePatchImage {
+        scale: control.horizontal && control.mirrored ? -1 : 1
+
+        source: control.Imagine.url + "rangeslider-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"vertical": control.vertical},
+                {"horizontal": control.horizontal},
+                {"disabled": !control.enabled},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+
+        NinePatchImage {
+            x: control.horizontal ? control.first.handle.width / 2 + control.first.position * (parent.width - control.first.handle.width) : (parent.width - width) / 2
+            y: control.horizontal ? (parent.height - height) / 2 : control.first.handle.height / 2 + control.second.visualPosition * (parent.height - control.first.handle.height)
+            width: control.horizontal ? control.second.position * (parent.width - control.first.handle.width) - control.first.position * (parent.width - control.first.handle.width) : parent.width
+            height: control.vertical ? control.second.position * (parent.height - control.first.handle.height) - control.first.position * (parent.height - control.first.handle.height): parent.height
+
+            source: control.Imagine.url + "rangeslider-progress"
+            NinePatchImageSelector on source {
+                states: [
+                    {"vertical": control.vertical},
+                    {"horizontal": control.horizontal},
+                    {"disabled": !control.enabled},
+                    {"focused": control.visualFocus},
+                    {"mirrored": control.mirrored},
+                    {"hovered": control.enabled && control.hovered}
+                ]
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/RoundButton.qml b/src/quickcontrols/imagine/RoundButton.qml
new file mode 100644
index 0000000000..2000d92f85
--- /dev/null
+++ b/src/quickcontrols/imagine/RoundButton.qml
@@ -0,0 +1,64 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.RoundButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.enabled && control.flat && control.highlighted ? control.palette.highlight
+        : control.enabled && (control.down || control.checked || control.highlighted) && !control.flat
+        ? control.palette.brightText : control.flat ? control.palette.windowText : control.palette.buttonText
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled && control.flat && control.highlighted ? control.palette.highlight
+            : control.enabled && (control.down || control.checked || control.highlighted) && !control.flat
+            ? control.palette.brightText : control.flat ? control.palette.windowText : control.palette.buttonText
+    }
+
+    background: NinePatchImage {
+        // ### TODO: radius?
+        source: Imagine.url + "roundbutton-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"checkable": control.checkable},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"flat": control.flat},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/ScrollBar.qml b/src/quickcontrols/imagine/ScrollBar.qml
new file mode 100644
index 0000000000..09db8eea0b
--- /dev/null
+++ b/src/quickcontrols/imagine/ScrollBar.qml
@@ -0,0 +1,86 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.ScrollBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    visible: control.policy !== T.ScrollBar.AlwaysOff
+    minimumSize: orientation === Qt.Horizontal ? height / width : width / height
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    contentItem: NinePatchImage {
+        width: control.availableWidth
+        height: control.availableHeight
+
+        source: Imagine.url + "scrollbar-handle"
+        NinePatchImageSelector on source {
+            states: [
+                {"vertical": control.vertical},
+                {"horizontal": control.horizontal},
+                {"disabled": !control.enabled},
+                {"interactive": control.interactive},
+                {"pressed": control.pressed},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+        opacity: 0.0
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "scrollbar-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"vertical": control.vertical},
+                {"horizontal": control.horizontal},
+                {"disabled": !control.enabled},
+                {"interactive": control.interactive},
+                {"pressed": control.pressed},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+        opacity: 0.0
+    }
+
+    states: [
+        State {
+            name: "active"
+            when: control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0)
+        }
+    ]
+
+    transitions: [
+        Transition {
+            to: "active"
+            NumberAnimation { targets: [control.contentItem, control.background]; property: "opacity"; to: 1.0 }
+        },
+        Transition {
+            from: "active"
+            SequentialAnimation {
+                PropertyAction{ targets: [control.contentItem, control.background]; property: "opacity"; value: 1.0 }
+                PauseAnimation { duration: 3000 }
+                NumberAnimation { targets: [control.contentItem, control.background]; property: "opacity"; to: 0.0 }
+            }
+        }
+    ]
+}
diff --git a/src/quickcontrols/imagine/ScrollIndicator.qml b/src/quickcontrols/imagine/ScrollIndicator.qml
new file mode 100644
index 0000000000..285379a307
--- /dev/null
+++ b/src/quickcontrols/imagine/ScrollIndicator.qml
@@ -0,0 +1,78 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.ScrollIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    contentItem: NinePatchImage {
+        width: control.availableWidth
+        height: control.availableHeight
+
+        source: Imagine.url + "scrollindicator-handle"
+        NinePatchImageSelector on source {
+            states: [
+                {"vertical": control.vertical},
+                {"horizontal": control.horizontal},
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+        opacity: 0.0
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "scrollindicator-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"vertical": control.vertical},
+                {"horizontal": control.horizontal},
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+        opacity: 0.0
+    }
+
+    states: [
+        State {
+            name: "active"
+            when: (control.active && control.size < 1.0)
+        }
+    ]
+
+    transitions: [
+        Transition {
+            to: "active"
+            NumberAnimation { targets: [control.contentItem, control.background]; property: "opacity"; to: 1.0 }
+        },
+        Transition {
+            from: "active"
+            SequentialAnimation {
+                PauseAnimation { duration: 5000 }
+                NumberAnimation { targets: [control.contentItem, control.background]; property: "opacity"; to: 0.0 }
+            }
+        }
+    ]
+}
diff --git a/src/quickcontrols/imagine/ScrollView.qml b/src/quickcontrols/imagine/ScrollView.qml
new file mode 100644
index 0000000000..4e7d1a8afe
--- /dev/null
+++ b/src/quickcontrols/imagine/ScrollView.qml
@@ -0,0 +1,52 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.ScrollView {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    T.ScrollBar.vertical: ScrollBar {
+        parent: control
+        x: control.mirrored ? 0 : control.width - width
+        y: control.topPadding
+        height: control.availableHeight
+        active: control.T.ScrollBar.horizontal.active
+    }
+
+    T.ScrollBar.horizontal: ScrollBar {
+        parent: control
+        x: control.leftPadding
+        y: control.height - height
+        width: control.availableWidth
+        active: control.T.ScrollBar.vertical.active
+    }
+
+    background: NinePatchImage {
+        source: Imagine.path + "scrollview-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/SelectionRectangle.qml b/src/quickcontrols/imagine/SelectionRectangle.qml
new file mode 100644
index 0000000000..79940b6723
--- /dev/null
+++ b/src/quickcontrols/imagine/SelectionRectangle.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.SelectionRectangle {
+    id: control
+
+    topLeftHandle: handle
+    bottomRightHandle: handle
+
+    Component {
+        id: handle
+        Image {
+            id: image
+            source: Imagine.url + "slider-handle"
+            visible: SelectionRectangle.control.active
+            ImageSelector on source {
+                states: [
+                    {"vertical": false},
+                    {"horizontal": true},
+                    {"disabled": false},
+                    {"pressed": tapHandler.pressed || image.SelectionRectangle.dragging},
+                    {"focused": true},
+                    {"mirrored": false},
+                    {"hovered": hoverHandler.hovered}
+                ]
+            }
+
+            HoverHandler {
+                id: hoverHandler
+            }
+
+            TapHandler  {
+                id: tapHandler
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Slider.qml b/src/quickcontrols/imagine/Slider.qml
new file mode 100644
index 0000000000..01b5899fcb
--- /dev/null
+++ b/src/quickcontrols/imagine/Slider.qml
@@ -0,0 +1,87 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.Slider {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitHandleHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    handle: Image {
+        x: Math.round(control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2))
+        y: Math.round(control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height)))
+
+        source: control.Imagine.url + "slider-handle"
+        ImageSelector on source {
+            states: [
+                {"vertical": control.vertical},
+                {"horizontal": control.horizontal},
+                {"disabled": !control.enabled},
+                {"pressed": control.pressed},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+
+    background: NinePatchImage {
+        scale: control.horizontal && control.mirrored ? -1 : 1
+
+        source: control.Imagine.url + "slider-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"vertical": control.vertical},
+                {"horizontal": control.horizontal},
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+
+        NinePatchImage {
+            x: control.horizontal ? 0 : (parent.width - width) / 2
+            y: control.horizontal
+               ? (parent.height - height) / 2
+               : control.handle.height / 2 + control.visualPosition * (parent.height - control.handle.height)
+            width: control.horizontal
+                ? control.handle.width / 2 + control.position * (parent.width - control.handle.width)
+                : parent.width
+            height: control.vertical
+                ? control.handle.height / 2 + control.position * (parent.height - control.handle.height)
+                : parent.height
+
+            source: control.Imagine.url + "slider-progress"
+            NinePatchImageSelector on source {
+                states: [
+                    {"vertical": control.vertical},
+                    {"horizontal": control.horizontal},
+                    {"disabled": !control.enabled},
+                    {"pressed": control.down},
+                    {"focused": control.visualFocus},
+                    {"mirrored": control.mirrored},
+                    {"hovered": control.enabled && control.hovered}
+                ]
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/SpinBox.qml b/src/quickcontrols/imagine/SpinBox.qml
new file mode 100644
index 0000000000..973cc1d1d6
--- /dev/null
+++ b/src/quickcontrols/imagine/SpinBox.qml
@@ -0,0 +1,119 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.SpinBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentItem.implicitWidth + 2 * padding +
+                            up.implicitIndicatorWidth +
+                            down.implicitIndicatorWidth)
+    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
+                             implicitBackgroundHeight,
+                             up.implicitIndicatorHeight,
+                             down.implicitIndicatorHeight)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: (background ? background.leftPadding : 0) + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
+    rightPadding: (background ? background.rightPadding : 0) + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    validator: IntValidator {
+        locale: control.locale.name
+        bottom: Math.min(control.from, control.to)
+        top: Math.max(control.from, control.to)
+    }
+
+    contentItem: TextInput {
+        z: 2
+        text: control.displayText
+        opacity: control.enabled ? 1 : 0.3
+
+        font: control.font
+        color: control.palette.text
+        selectionColor: control.palette.highlight
+        selectedTextColor: control.palette.highlightedText
+        horizontalAlignment: Qt.AlignHCenter
+        verticalAlignment: Qt.AlignVCenter
+
+        readOnly: !control.editable
+        validator: control.validator
+        inputMethodHints: control.inputMethodHints
+
+        NinePatchImage {
+            z: -1
+            width: control.width
+            height: control.height
+            visible: control.editable
+
+            source: Imagine.url + "spinbox-editor"
+            NinePatchImageSelector on source {
+                states: [
+                    {"disabled": !control.enabled},
+                    {"focused": control.activeFocus},
+                    {"mirrored": control.mirrored},
+                    {"hovered": control.enabled && control.hovered}
+                ]
+            }
+        }
+    }
+
+    up.indicator: NinePatchImage {
+        x: control.mirrored ? 0 : control.width - width
+        height: control.height
+
+        source: Imagine.url + "spinbox-indicator"
+        NinePatchImageSelector on source {
+            states: [
+                {"up": true},
+                {"disabled": !control.up.indicator.enabled},
+                {"editable": control.editable},
+                {"pressed": control.up.pressed},
+                {"focused": control.activeFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.up.hovered}
+            ]
+        }
+    }
+
+    down.indicator: NinePatchImage {
+        x: control.mirrored ? control.width - width : 0
+        height: control.height
+
+        source: Imagine.url + "spinbox-indicator"
+        NinePatchImageSelector on source {
+            states: [
+                {"down": true},
+                {"disabled": !control.down.indicator.enabled},
+                {"editable": control.editable},
+                {"pressed": control.down.pressed},
+                {"focused": control.activeFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.down.hovered}
+            ]
+        }
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "spinbox-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"editable": control.editable},
+                {"focused": control.activeFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/SplitView.qml b/src/quickcontrols/imagine/SplitView.qml
new file mode 100644
index 0000000000..8c4c6f4ee5
--- /dev/null
+++ b/src/quickcontrols/imagine/SplitView.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.SplitView {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    handle: NinePatchImage {
+        source: Imagine.url + "splitview-handle"
+        NinePatchImageSelector on source {
+            states: [
+                {"vertical": control.orientation === Qt.Vertical},
+                {"horizontal":control.orientation === Qt.Horizontal},
+                {"disabled": !control.enabled},
+                {"pressed": T.SplitHandle.pressed},
+                {"mirrored": control.mirrored},
+                {"hovered": T.SplitHandle.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/StackView.qml b/src/quickcontrols/imagine/StackView.qml
new file mode 100644
index 0000000000..27b9d77b9a
--- /dev/null
+++ b/src/quickcontrols/imagine/StackView.qml
@@ -0,0 +1,58 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.StackView {
+    id: control
+
+    implicitWidth: implicitBackgroundWidth
+    implicitHeight: implicitBackgroundHeight
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    popEnter: Transition {
+        XAnimator { from: (control.mirrored ? -1 : 1) * -control.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
+    }
+
+    popExit: Transition {
+        XAnimator { from: 0; to: (control.mirrored ? -1 : 1) * control.width; duration: 400; easing.type: Easing.OutCubic }
+    }
+
+    pushEnter: Transition {
+        XAnimator { from: (control.mirrored ? -1 : 1) * control.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
+    }
+
+    pushExit: Transition {
+        XAnimator { from: 0; to: (control.mirrored ? -1 : 1) * -control.width; duration: 400; easing.type: Easing.OutCubic }
+    }
+
+    replaceEnter: Transition {
+        XAnimator { from: (control.mirrored ? -1 : 1) * control.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
+    }
+
+    replaceExit: Transition {
+        XAnimator { from: 0; to: (control.mirrored ? -1 : 1) * -control.width; duration: 400; easing.type: Easing.OutCubic }
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "stackview-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/SwipeDelegate.qml b/src/quickcontrols/imagine/SwipeDelegate.qml
new file mode 100644
index 0000000000..24f550ce23
--- /dev/null
+++ b/src/quickcontrols/imagine/SwipeDelegate.qml
@@ -0,0 +1,62 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.SwipeDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 12 // ###
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.text
+
+    swipe.transition: Transition { SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic } }
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.text
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "swipedelegate-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/SwipeView.qml b/src/quickcontrols/imagine/SwipeView.qml
new file mode 100644
index 0000000000..c0bafd1233
--- /dev/null
+++ b/src/quickcontrols/imagine/SwipeView.qml
@@ -0,0 +1,57 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.SwipeView {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    contentItem: ListView {
+        model: control.contentModel
+        interactive: control.interactive
+        currentIndex: control.currentIndex
+        focus: control.focus
+
+        spacing: control.spacing
+        orientation: control.orientation
+        snapMode: ListView.SnapOneItem
+        boundsBehavior: Flickable.StopAtBounds
+
+        highlightRangeMode: ListView.StrictlyEnforceRange
+        preferredHighlightBegin: 0
+        preferredHighlightEnd: 0
+        highlightMoveDuration: 250
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "swipeview-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"vertical": control.vertical},
+                {"horizontal": control.horizontal},
+                {"disabled": !control.enabled},
+                {"interactive": control.interactive},
+                {"focused": control.contentItem.activeFocus},
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Switch.qml b/src/quickcontrols/imagine/Switch.qml
new file mode 100644
index 0000000000..c2d3f70f2c
--- /dev/null
+++ b/src/quickcontrols/imagine/Switch.qml
@@ -0,0 +1,101 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.Switch {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 6 // ###
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    indicator: NinePatchImage {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        width: Math.max(implicitWidth, handle.leftPadding && handle.rightPadding ? handle.implicitWidth : 2 * handle.implicitWidth)
+        height: Math.max(implicitHeight, handle.implicitHeight)
+
+        source: control.Imagine.url + "switch-indicator"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+
+        property NinePatchImage handle: NinePatchImage {
+            readonly property real minPos: parent.leftPadding - leftPadding
+            readonly property real maxPos: parent.width - width + rightPadding - parent.rightPadding
+            readonly property real dragPos: control.visualPosition * parent.width - (width / 2)
+
+            parent: control.indicator
+
+            x: Math.max(minPos, Math.min(maxPos, control.visualPosition * parent.width - (width / 2)))
+            y: (parent.height - height) / 2
+
+            source: control.Imagine.url + "switch-handle"
+            NinePatchImageSelector on source {
+                states: [
+                    {"disabled": !control.enabled},
+                    {"pressed": control.down},
+                    {"checked": control.checked},
+                    {"focused": control.visualFocus},
+                    {"mirrored": control.mirrored},
+                    {"hovered": control.enabled && control.hovered}
+                ]
+            }
+
+            Behavior on x {
+                enabled: !control.down
+                SmoothedAnimation { velocity: 200 }
+            }
+        }
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: NinePatchImage {
+        source: control.Imagine.url + "switch-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/SwitchDelegate.qml b/src/quickcontrols/imagine/SwitchDelegate.qml
new file mode 100644
index 0000000000..ed8b93c2ba
--- /dev/null
+++ b/src/quickcontrols/imagine/SwitchDelegate.qml
@@ -0,0 +1,113 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.SwitchDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 12 // ###
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.text
+
+    indicator: NinePatchImage {
+        x: control.text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        width: Math.max(implicitWidth, handle.leftPadding && handle.rightPadding ? handle.implicitWidth : 2 * handle.implicitWidth)
+        height: Math.max(implicitHeight, handle.implicitHeight)
+
+        source: control.Imagine.url + "switchdelegate-indicator"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+
+        property NinePatchImage handle: NinePatchImage {
+            readonly property real minPos: parent.leftPadding - leftPadding
+            readonly property real maxPos: parent.width - width + rightPadding - parent.rightPadding
+            readonly property real dragPos: control.visualPosition * parent.width - (width / 2)
+
+            parent: control.indicator
+
+            x: Math.max(minPos, Math.min(maxPos, control.visualPosition * parent.width - (width / 2)))
+            y: (parent.height - height) / 2
+
+            source: control.Imagine.url + "switchdelegate-handle"
+            NinePatchImageSelector on source {
+                states: [
+                    {"disabled": !control.enabled},
+                    {"pressed": control.down},
+                    {"checked": control.checked},
+                    {"focused": control.visualFocus},
+                    {"highlighted": control.highlighted},
+                    {"mirrored": control.mirrored},
+                    {"hovered": control.enabled && control.hovered}
+                ]
+            }
+
+            Behavior on x {
+                enabled: !control.down
+                SmoothedAnimation { velocity: 200 }
+            }
+        }
+    }
+
+    contentItem: IconLabel {
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.text
+    }
+
+    background: NinePatchImage {
+        source: control.Imagine.url + "switchdelegate-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/TabBar.qml b/src/quickcontrols/imagine/TabBar.qml
new file mode 100644
index 0000000000..a0086cb76f
--- /dev/null
+++ b/src/quickcontrols/imagine/TabBar.qml
@@ -0,0 +1,54 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.TabBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    contentItem: ListView {
+        model: control.contentModel
+        currentIndex: control.currentIndex
+
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+        snapMode: ListView.SnapToItem
+
+        highlightMoveDuration: 0
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: 48
+        preferredHighlightEnd: width - 48
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "tabbar-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"header": control.position === T.TabBar.Header },
+                {"footer": control.position === T.TabBar.Footer },
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/TabButton.qml b/src/quickcontrols/imagine/TabButton.qml
new file mode 100644
index 0000000000..7b7a88c91b
--- /dev/null
+++ b/src/quickcontrols/imagine/TabButton.qml
@@ -0,0 +1,58 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.TabButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    spacing: 6 // ###
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.buttonText
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.buttonText
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "tabbutton-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/TextArea.qml b/src/quickcontrols/imagine/TextArea.qml
new file mode 100644
index 0000000000..d47ffffbd7
--- /dev/null
+++ b/src/quickcontrols/imagine/TextArea.qml
@@ -0,0 +1,63 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.TextArea {
+    id: control
+
+    implicitWidth: Math.max(contentWidth + leftPadding + rightPadding,
+                            implicitBackgroundWidth + leftInset + rightInset,
+                            placeholder.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
+                             implicitBackgroundHeight + topInset + bottomInset,
+                             placeholder.implicitHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    color: control.palette.text
+    selectionColor: control.palette.highlight
+    selectedTextColor: control.palette.highlightedText
+    verticalAlignment: Qt.AlignVCenter
+    placeholderTextColor: control.palette.placeholderText
+
+    PlaceholderText {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "textarea-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"focused": control.activeFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/TextField.qml b/src/quickcontrols/imagine/TextField.qml
new file mode 100644
index 0000000000..9c0ddd1f25
--- /dev/null
+++ b/src/quickcontrols/imagine/TextField.qml
@@ -0,0 +1,62 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.TextField {
+    id: control
+
+    implicitWidth: implicitBackgroundWidth + leftInset + rightInset
+                   || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding,
+                             placeholder.implicitHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    color: control.palette.text
+    selectionColor: control.palette.highlight
+    selectedTextColor: control.palette.highlightedText
+    placeholderTextColor: control.palette.placeholderText
+    verticalAlignment: Qt.AlignVCenter
+
+    PlaceholderText {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "textfield-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"focused": control.activeFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/ToolBar.qml b/src/quickcontrols/imagine/ToolBar.qml
new file mode 100644
index 0000000000..9e1467e90e
--- /dev/null
+++ b/src/quickcontrols/imagine/ToolBar.qml
@@ -0,0 +1,38 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.ToolBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    background: NinePatchImage {
+        source: Imagine.url + "toolbar-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"header": control.position === T.ToolBar.Header },
+                {"footer": control.position === T.ToolBar.Footer },
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/ToolButton.qml b/src/quickcontrols/imagine/ToolButton.qml
new file mode 100644
index 0000000000..13b4c9b111
--- /dev/null
+++ b/src/quickcontrols/imagine/ToolButton.qml
@@ -0,0 +1,61 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.ToolButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    spacing: 6 // ###
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.buttonText
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.buttonText
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "toolbutton-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"pressed": control.down},
+                {"checked": control.checked},
+                {"checkable": control.checkable},
+                {"focused": control.visualFocus},
+                {"highlighted": control.highlighted},
+                {"flat": control.flat},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/ToolSeparator.qml b/src/quickcontrols/imagine/ToolSeparator.qml
new file mode 100644
index 0000000000..4861e26086
--- /dev/null
+++ b/src/quickcontrols/imagine/ToolSeparator.qml
@@ -0,0 +1,50 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.ToolSeparator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    contentItem: NinePatchImage {
+        source: Imagine.url + "toolseparator-separator"
+        NinePatchImageSelector on source {
+            states: [
+                {"vertical": control.vertical},
+                {"horizontal": control.horizontal},
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "toolseparator-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"vertical": control.vertical},
+                {"horizontal": control.horizontal},
+                {"disabled": !control.enabled},
+                {"mirrored": control.mirrored}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/ToolTip.qml b/src/quickcontrols/imagine/ToolTip.qml
new file mode 100644
index 0000000000..841e5a3613
--- /dev/null
+++ b/src/quickcontrols/imagine/ToolTip.qml
@@ -0,0 +1,52 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.ToolTip {
+    id: control
+
+    x: parent ? (parent.width - implicitWidth) / 2 : 0 - (background ? background.leftInset : 0)
+    y: -implicitHeight - (background ? background.topInset : 0)
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topMargin: background ? background.topInset : 0
+    leftMargin: background ? background.leftInset : 0
+    rightMargin: background ? background.rightInset : 0
+    bottomMargin: background ? background.bottomInset : 0
+
+    topPadding: background ? background.topPadding : 0
+    leftPadding: background ? background.leftPadding : 0
+    rightPadding: background ? background.rightPadding : 0
+    bottomPadding: background ? background.bottomPadding : 0
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        wrapMode: Text.Wrap
+        color: control.palette.toolTipText
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "tooltip-background"
+        NinePatchImageSelector on source {
+            states: [
+                // ###
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/Tumbler.qml b/src/quickcontrols/imagine/Tumbler.qml
new file mode 100644
index 0000000000..7052c6654c
--- /dev/null
+++ b/src/quickcontrols/imagine/Tumbler.qml
@@ -0,0 +1,63 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Imagine
+import QtQuick.Controls.Imagine.impl
+
+T.Tumbler {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    topInset: background ? -background.topInset || 0 : 0
+    leftInset: background ? -background.leftInset || 0 : 0
+    rightInset: background ? -background.rightInset || 0 : 0
+    bottomInset: background ? -background.bottomInset || 0 : 0
+
+    delegate: Text {
+        text: modelData
+        font: control.font
+        color: control.palette.text
+        opacity: (1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)) * (control.enabled ? 1 : 0.6)
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        required property var modelData
+        required property int index
+    }
+
+    contentItem: TumblerView {
+        implicitWidth: 60
+        implicitHeight: 200
+        model: control.model
+        delegate: control.delegate
+        path: Path {
+            startX: control.contentItem.width / 2
+            startY: -control.contentItem.delegateHeight / 2
+            PathLine {
+                x: control.contentItem.width / 2
+                y: (control.visibleItemCount + 1) * control.contentItem.delegateHeight - control.contentItem.delegateHeight / 2
+            }
+        }
+
+        property real delegateHeight: control.availableHeight / control.visibleItemCount
+    }
+
+    background: NinePatchImage {
+        source: Imagine.url + "tumbler-background"
+        NinePatchImageSelector on source {
+            states: [
+                {"disabled": !control.enabled},
+                {"focused": control.visualFocus},
+                {"mirrored": control.mirrored},
+                {"hovered": control.enabled && control.hovered}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/VerticalHeaderView.qml b/src/quickcontrols/imagine/VerticalHeaderView.qml
new file mode 100644
index 0000000000..a59e228d20
--- /dev/null
+++ b/src/quickcontrols/imagine/VerticalHeaderView.qml
@@ -0,0 +1,34 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.VerticalHeaderView {
+    id: control
+
+    implicitWidth: contentWidth
+    implicitHeight: syncView ? syncView.height : 0
+
+    delegate: Rectangle {
+        // Qt6: add cellPadding (and font etc) as public API in headerview
+        readonly property real cellPadding: 8
+
+        implicitWidth: Math.max(control.width, text.implicitWidth + (cellPadding * 2))
+        implicitHeight: text.implicitHeight + (cellPadding * 2)
+        color: "#f6f6f6"
+        border.color: "#e4e4e4"
+
+        Text {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            height: parent.height
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: "#ff26282a"
+        }
+    }
+}
diff --git a/src/quickcontrols/imagine/design/9-patch-export.sketchplugin/Contents/Sketch/9-patch-export.js b/src/quickcontrols/imagine/design/9-patch-export.sketchplugin/Contents/Sketch/9-patch-export.js
new file mode 100644
index 0000000000..a7f9a4598d
--- /dev/null
+++ b/src/quickcontrols/imagine/design/9-patch-export.sketchplugin/Contents/Sketch/9-patch-export.js
@@ -0,0 +1,24 @@
+// 9-patch export
+//
+// This plugin crops upscaled 9-patch PNG assets when exported from Sketch,
+// to ensure that 9-patch borders remain 1px wide when upscaled.
+//
+function onExportSlices(context) {
+    var exports = context.actionContext.exports;
+    for (var i = 0; i < exports.count(); ++i) {
+        var name = exports[i].request.name();
+        var scale = exports[i].request.scale();
+        if (scale > 1 && name.endsWith(".9"))
+            cropAsset(exports[i].path, scale - 1);
+    }
+}
+
+function cropAsset(path, inset) {
+    var url = NSURL.fileURLWithPath(path);
+    var img = CIImage.imageWithContentsOfURL(url);
+    var rect = NSInsetRect(img.extent(), inset, inset);
+    var cropped = img.imageByCroppingToRect(rect);
+    var rep = NSBitmapImageRep.alloc().initWithCIImage(cropped);
+    var data = rep.PNGRepresentationWithInterlaced(false);
+    data.writeToFile(path);
+}
diff --git a/src/quickcontrols/imagine/design/9-patch-export.sketchplugin/Contents/Sketch/manifest.json b/src/quickcontrols/imagine/design/9-patch-export.sketchplugin/Contents/Sketch/manifest.json
new file mode 100644
index 0000000000..40807aa3d5
--- /dev/null
+++ b/src/quickcontrols/imagine/design/9-patch-export.sketchplugin/Contents/Sketch/manifest.json
@@ -0,0 +1,19 @@
+{
+    "name" : "9-patch export",
+    "description" : "Crops upscaled 9-patch PNG assets when exported from Sketch.",
+    "version" : "0.1",
+    "identifier" : "org.qt-project.sketch.9-patch-export",
+    "author" : "The Qt Project",
+    "commands" : [
+        {
+            "name" : "9-patch export",
+            "identifier" : "9-patch-export",
+            "script" : "9-patch-export.js",
+            "handlers" : {
+                "actions" : {
+                    "ExportSlices": "onExportSlices",
+                },
+            },
+        },
+    ],
+}
diff --git a/src/quickcontrols/imagine/design/imagine.sketch b/src/quickcontrols/imagine/design/imagine.sketch
new file mode 100644
index 0000000000..f3535b372b
--- /dev/null
+++ b/src/quickcontrols/imagine/design/imagine.sketch
diff --git a/src/quickcontrols/imagine/images/applicationwindow-background.png b/src/quickcontrols/imagine/images/applicationwindow-background.png
new file mode 100644
index 0000000000..2d8d70f288
--- /dev/null
+++ b/src/quickcontrols/imagine/images/applicationwindow-background.png
diff --git a/src/quickcontrols/imagine/images/applicationwindow-background@2x.png b/src/quickcontrols/imagine/images/applicationwindow-background@2x.png
new file mode 100644
index 0000000000..18fbaa4c63
--- /dev/null
+++ b/src/quickcontrols/imagine/images/applicationwindow-background@2x.png
diff --git a/src/quickcontrols/imagine/images/applicationwindow-background@3x.png b/src/quickcontrols/imagine/images/applicationwindow-background@3x.png
new file mode 100644
index 0000000000..241232b1e0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/applicationwindow-background@3x.png
diff --git a/src/quickcontrols/imagine/images/applicationwindow-background@4x.png b/src/quickcontrols/imagine/images/applicationwindow-background@4x.png
new file mode 100644
index 0000000000..8eb1b1ecc1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/applicationwindow-background@4x.png
diff --git a/src/quickcontrols/imagine/images/applicationwindow-overlay-modal.png b/src/quickcontrols/imagine/images/applicationwindow-overlay-modal.png
new file mode 100644
index 0000000000..d4a43d1c70
--- /dev/null
+++ b/src/quickcontrols/imagine/images/applicationwindow-overlay-modal.png
diff --git a/src/quickcontrols/imagine/images/applicationwindow-overlay-modal@2x.png b/src/quickcontrols/imagine/images/applicationwindow-overlay-modal@2x.png
new file mode 100644
index 0000000000..c9a8f4124b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/applicationwindow-overlay-modal@2x.png
diff --git a/src/quickcontrols/imagine/images/applicationwindow-overlay-modal@3x.png b/src/quickcontrols/imagine/images/applicationwindow-overlay-modal@3x.png
new file mode 100644
index 0000000000..4a1084a919
--- /dev/null
+++ b/src/quickcontrols/imagine/images/applicationwindow-overlay-modal@3x.png
diff --git a/src/quickcontrols/imagine/images/applicationwindow-overlay-modal@4x.png b/src/quickcontrols/imagine/images/applicationwindow-overlay-modal@4x.png
new file mode 100644
index 0000000000..b92e600dae
--- /dev/null
+++ b/src/quickcontrols/imagine/images/applicationwindow-overlay-modal@4x.png
diff --git a/src/quickcontrols/imagine/images/applicationwindow-overlay.png b/src/quickcontrols/imagine/images/applicationwindow-overlay.png
new file mode 100644
index 0000000000..b7da23c00f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/applicationwindow-overlay.png
diff --git a/src/quickcontrols/imagine/images/applicationwindow-overlay@2x.png b/src/quickcontrols/imagine/images/applicationwindow-overlay@2x.png
new file mode 100644
index 0000000000..23828d5a1c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/applicationwindow-overlay@2x.png
diff --git a/src/quickcontrols/imagine/images/applicationwindow-overlay@3x.png b/src/quickcontrols/imagine/images/applicationwindow-overlay@3x.png
new file mode 100644
index 0000000000..d9d5382867
--- /dev/null
+++ b/src/quickcontrols/imagine/images/applicationwindow-overlay@3x.png
diff --git a/src/quickcontrols/imagine/images/applicationwindow-overlay@4x.png b/src/quickcontrols/imagine/images/applicationwindow-overlay@4x.png
new file mode 100644
index 0000000000..a76c1a3a71
--- /dev/null
+++ b/src/quickcontrols/imagine/images/applicationwindow-overlay@4x.png
diff --git a/src/quickcontrols/imagine/images/busyindicator-animation.webp b/src/quickcontrols/imagine/images/busyindicator-animation.webp
new file mode 100644
index 0000000000..ebf04c4a0c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/busyindicator-animation.webp
diff --git a/src/quickcontrols/imagine/images/busyindicator-animation@2x.webp b/src/quickcontrols/imagine/images/busyindicator-animation@2x.webp
new file mode 100644
index 0000000000..43805a0bdc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/busyindicator-animation@2x.webp
diff --git a/src/quickcontrols/imagine/images/busyindicator-animation@3x.webp b/src/quickcontrols/imagine/images/busyindicator-animation@3x.webp
new file mode 100644
index 0000000000..b700b81f83
--- /dev/null
+++ b/src/quickcontrols/imagine/images/busyindicator-animation@3x.webp
diff --git a/src/quickcontrols/imagine/images/busyindicator-animation@4x.webp b/src/quickcontrols/imagine/images/busyindicator-animation@4x.webp
new file mode 100644
index 0000000000..bfaa8df921
--- /dev/null
+++ b/src/quickcontrols/imagine/images/busyindicator-animation@4x.webp
diff --git a/src/quickcontrols/imagine/images/button-background-checked-disabled.9.png b/src/quickcontrols/imagine/images/button-background-checked-disabled.9.png
new file mode 100644
index 0000000000..8196289cc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked-disabled@2x.9.png b/src/quickcontrols/imagine/images/button-background-checked-disabled@2x.9.png
new file mode 100644
index 0000000000..76cd44908b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked-disabled@3x.9.png b/src/quickcontrols/imagine/images/button-background-checked-disabled@3x.9.png
new file mode 100644
index 0000000000..8bd6259a47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked-disabled@4x.9.png b/src/quickcontrols/imagine/images/button-background-checked-disabled@4x.9.png
new file mode 100644
index 0000000000..3e08152013
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked-focused.9.png b/src/quickcontrols/imagine/images/button-background-checked-focused.9.png
new file mode 100644
index 0000000000..e3d14e9954
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked-focused.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked-focused@2x.9.png b/src/quickcontrols/imagine/images/button-background-checked-focused@2x.9.png
new file mode 100644
index 0000000000..ebc74b4a34
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked-focused@3x.9.png b/src/quickcontrols/imagine/images/button-background-checked-focused@3x.9.png
new file mode 100644
index 0000000000..7583472304
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked-focused@4x.9.png b/src/quickcontrols/imagine/images/button-background-checked-focused@4x.9.png
new file mode 100644
index 0000000000..9b570f4d15
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked-hovered.9.png b/src/quickcontrols/imagine/images/button-background-checked-hovered.9.png
new file mode 100644
index 0000000000..e3d14e9954
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked-hovered@2x.9.png b/src/quickcontrols/imagine/images/button-background-checked-hovered@2x.9.png
new file mode 100644
index 0000000000..ebc74b4a34
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked-hovered@3x.9.png b/src/quickcontrols/imagine/images/button-background-checked-hovered@3x.9.png
new file mode 100644
index 0000000000..7583472304
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked-hovered@4x.9.png b/src/quickcontrols/imagine/images/button-background-checked-hovered@4x.9.png
new file mode 100644
index 0000000000..9b570f4d15
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked.9.png b/src/quickcontrols/imagine/images/button-background-checked.9.png
new file mode 100644
index 0000000000..d0942509f7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked@2x.9.png b/src/quickcontrols/imagine/images/button-background-checked@2x.9.png
new file mode 100644
index 0000000000..c38bcd026f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked@3x.9.png b/src/quickcontrols/imagine/images/button-background-checked@3x.9.png
new file mode 100644
index 0000000000..80889bf801
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-checked@4x.9.png b/src/quickcontrols/imagine/images/button-background-checked@4x.9.png
new file mode 100644
index 0000000000..05de8377ef
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-checked@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-disabled.9.png b/src/quickcontrols/imagine/images/button-background-disabled.9.png
new file mode 100644
index 0000000000..8196289cc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-disabled@2x.9.png b/src/quickcontrols/imagine/images/button-background-disabled@2x.9.png
new file mode 100644
index 0000000000..76cd44908b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-disabled@3x.9.png b/src/quickcontrols/imagine/images/button-background-disabled@3x.9.png
new file mode 100644
index 0000000000..8bd6259a47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-disabled@4x.9.png b/src/quickcontrols/imagine/images/button-background-disabled@4x.9.png
new file mode 100644
index 0000000000..3e08152013
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-checked-pressed.9.png b/src/quickcontrols/imagine/images/button-background-flat-checked-pressed.9.png
new file mode 100644
index 0000000000..8196289cc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-checked-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-checked-pressed@2x.9.png b/src/quickcontrols/imagine/images/button-background-flat-checked-pressed@2x.9.png
new file mode 100644
index 0000000000..76cd44908b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-checked-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-checked-pressed@3x.9.png b/src/quickcontrols/imagine/images/button-background-flat-checked-pressed@3x.9.png
new file mode 100644
index 0000000000..8bd6259a47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-checked-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-checked-pressed@4x.9.png b/src/quickcontrols/imagine/images/button-background-flat-checked-pressed@4x.9.png
new file mode 100644
index 0000000000..3e08152013
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-checked-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-checked.9.png b/src/quickcontrols/imagine/images/button-background-flat-checked.9.png
new file mode 100644
index 0000000000..8196289cc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-checked.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-checked@2x.9.png b/src/quickcontrols/imagine/images/button-background-flat-checked@2x.9.png
new file mode 100644
index 0000000000..76cd44908b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-checked@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-checked@3x.9.png b/src/quickcontrols/imagine/images/button-background-flat-checked@3x.9.png
new file mode 100644
index 0000000000..8bd6259a47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-checked@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-checked@4x.9.png b/src/quickcontrols/imagine/images/button-background-flat-checked@4x.9.png
new file mode 100644
index 0000000000..3e08152013
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-checked@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-disabled.9.png b/src/quickcontrols/imagine/images/button-background-flat-disabled.9.png
new file mode 100644
index 0000000000..59907409c4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-disabled@2x.9.png b/src/quickcontrols/imagine/images/button-background-flat-disabled@2x.9.png
new file mode 100644
index 0000000000..d66acd9c48
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-disabled@3x.9.png b/src/quickcontrols/imagine/images/button-background-flat-disabled@3x.9.png
new file mode 100644
index 0000000000..89b8c35357
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-disabled@4x.9.png b/src/quickcontrols/imagine/images/button-background-flat-disabled@4x.9.png
new file mode 100644
index 0000000000..d3a675cfe7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-highlighted-checked.9.png b/src/quickcontrols/imagine/images/button-background-flat-highlighted-checked.9.png
new file mode 100644
index 0000000000..8196289cc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-highlighted-checked.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-highlighted-checked@2x.9.png b/src/quickcontrols/imagine/images/button-background-flat-highlighted-checked@2x.9.png
new file mode 100644
index 0000000000..76cd44908b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-highlighted-checked@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-highlighted-checked@3x.9.png b/src/quickcontrols/imagine/images/button-background-flat-highlighted-checked@3x.9.png
new file mode 100644
index 0000000000..8bd6259a47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-highlighted-checked@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-highlighted-checked@4x.9.png b/src/quickcontrols/imagine/images/button-background-flat-highlighted-checked@4x.9.png
new file mode 100644
index 0000000000..3e08152013
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-highlighted-checked@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-highlighted-pressed.9.png b/src/quickcontrols/imagine/images/button-background-flat-highlighted-pressed.9.png
new file mode 100644
index 0000000000..8196289cc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-highlighted-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-highlighted-pressed@2x.9.png b/src/quickcontrols/imagine/images/button-background-flat-highlighted-pressed@2x.9.png
new file mode 100644
index 0000000000..76cd44908b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-highlighted-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-highlighted-pressed@3x.9.png b/src/quickcontrols/imagine/images/button-background-flat-highlighted-pressed@3x.9.png
new file mode 100644
index 0000000000..8bd6259a47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-highlighted-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-highlighted-pressed@4x.9.png b/src/quickcontrols/imagine/images/button-background-flat-highlighted-pressed@4x.9.png
new file mode 100644
index 0000000000..3e08152013
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-highlighted-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-highlighted.9.png b/src/quickcontrols/imagine/images/button-background-flat-highlighted.9.png
new file mode 100644
index 0000000000..59907409c4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-highlighted.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-highlighted@2x.9.png b/src/quickcontrols/imagine/images/button-background-flat-highlighted@2x.9.png
new file mode 100644
index 0000000000..d66acd9c48
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-highlighted@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-highlighted@3x.9.png b/src/quickcontrols/imagine/images/button-background-flat-highlighted@3x.9.png
new file mode 100644
index 0000000000..89b8c35357
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-highlighted@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-highlighted@4x.9.png b/src/quickcontrols/imagine/images/button-background-flat-highlighted@4x.9.png
new file mode 100644
index 0000000000..d3a675cfe7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-highlighted@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-hovered.9.png b/src/quickcontrols/imagine/images/button-background-flat-hovered.9.png
new file mode 100644
index 0000000000..8196289cc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-hovered@2x.9.png b/src/quickcontrols/imagine/images/button-background-flat-hovered@2x.9.png
new file mode 100644
index 0000000000..76cd44908b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-hovered@3x.9.png b/src/quickcontrols/imagine/images/button-background-flat-hovered@3x.9.png
new file mode 100644
index 0000000000..8bd6259a47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-hovered@4x.9.png b/src/quickcontrols/imagine/images/button-background-flat-hovered@4x.9.png
new file mode 100644
index 0000000000..3e08152013
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-pressed.9.png b/src/quickcontrols/imagine/images/button-background-flat-pressed.9.png
new file mode 100644
index 0000000000..8196289cc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-pressed@2x.9.png b/src/quickcontrols/imagine/images/button-background-flat-pressed@2x.9.png
new file mode 100644
index 0000000000..76cd44908b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-pressed@3x.9.png b/src/quickcontrols/imagine/images/button-background-flat-pressed@3x.9.png
new file mode 100644
index 0000000000..8bd6259a47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat-pressed@4x.9.png b/src/quickcontrols/imagine/images/button-background-flat-pressed@4x.9.png
new file mode 100644
index 0000000000..3e08152013
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat.9.png b/src/quickcontrols/imagine/images/button-background-flat.9.png
new file mode 100644
index 0000000000..59907409c4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat@2x.9.png b/src/quickcontrols/imagine/images/button-background-flat@2x.9.png
new file mode 100644
index 0000000000..d66acd9c48
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat@3x.9.png b/src/quickcontrols/imagine/images/button-background-flat@3x.9.png
new file mode 100644
index 0000000000..89b8c35357
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-flat@4x.9.png b/src/quickcontrols/imagine/images/button-background-flat@4x.9.png
new file mode 100644
index 0000000000..d3a675cfe7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-flat@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-focused.9.png b/src/quickcontrols/imagine/images/button-background-focused.9.png
new file mode 100644
index 0000000000..42e40e6082
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-focused.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-focused@2x.9.png b/src/quickcontrols/imagine/images/button-background-focused@2x.9.png
new file mode 100644
index 0000000000..90dc70bfe0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-focused@3x.9.png b/src/quickcontrols/imagine/images/button-background-focused@3x.9.png
new file mode 100644
index 0000000000..2ed2340cb0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-focused@4x.9.png b/src/quickcontrols/imagine/images/button-background-focused@4x.9.png
new file mode 100644
index 0000000000..e1428e37eb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-checked.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-checked.9.png
new file mode 100644
index 0000000000..7a2a401106
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-checked.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-checked@2x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-checked@2x.9.png
new file mode 100644
index 0000000000..05b2f21423
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-checked@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-checked@3x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-checked@3x.9.png
new file mode 100644
index 0000000000..8c22e1f32a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-checked@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-checked@4x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-checked@4x.9.png
new file mode 100644
index 0000000000..c5617f0e0d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-checked@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-disabled.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-disabled.9.png
new file mode 100644
index 0000000000..8196289cc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-disabled@2x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-disabled@2x.9.png
new file mode 100644
index 0000000000..76cd44908b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-disabled@3x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-disabled@3x.9.png
new file mode 100644
index 0000000000..8bd6259a47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-disabled@4x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-disabled@4x.9.png
new file mode 100644
index 0000000000..3e08152013
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-focused.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-focused.9.png
new file mode 100644
index 0000000000..3ea580e01f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-focused.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-focused@2x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-focused@2x.9.png
new file mode 100644
index 0000000000..effcce1f42
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-focused@3x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-focused@3x.9.png
new file mode 100644
index 0000000000..502ac68999
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-focused@4x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-focused@4x.9.png
new file mode 100644
index 0000000000..3243231ef7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-hovered.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-hovered.9.png
new file mode 100644
index 0000000000..3ea580e01f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-hovered@2x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-hovered@2x.9.png
new file mode 100644
index 0000000000..effcce1f42
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-hovered@3x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-hovered@3x.9.png
new file mode 100644
index 0000000000..502ac68999
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-hovered@4x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-hovered@4x.9.png
new file mode 100644
index 0000000000..3243231ef7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-pressed.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-pressed.9.png
new file mode 100644
index 0000000000..7a2a401106
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-pressed@2x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-pressed@2x.9.png
new file mode 100644
index 0000000000..05b2f21423
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-pressed@3x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-pressed@3x.9.png
new file mode 100644
index 0000000000..8c22e1f32a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted-pressed@4x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted-pressed@4x.9.png
new file mode 100644
index 0000000000..c5617f0e0d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted.9.png b/src/quickcontrols/imagine/images/button-background-highlighted.9.png
new file mode 100644
index 0000000000..7761595fcd
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted@2x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted@2x.9.png
new file mode 100644
index 0000000000..8bb42c45af
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted@3x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted@3x.9.png
new file mode 100644
index 0000000000..8c23c021a5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-highlighted@4x.9.png b/src/quickcontrols/imagine/images/button-background-highlighted@4x.9.png
new file mode 100644
index 0000000000..365cd0489d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-highlighted@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-hovered.9.png b/src/quickcontrols/imagine/images/button-background-hovered.9.png
new file mode 100644
index 0000000000..42e40e6082
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-hovered@2x.9.png b/src/quickcontrols/imagine/images/button-background-hovered@2x.9.png
new file mode 100644
index 0000000000..90dc70bfe0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-hovered@3x.9.png b/src/quickcontrols/imagine/images/button-background-hovered@3x.9.png
new file mode 100644
index 0000000000..2ed2340cb0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-hovered@4x.9.png b/src/quickcontrols/imagine/images/button-background-hovered@4x.9.png
new file mode 100644
index 0000000000..e1428e37eb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-pressed.9.png b/src/quickcontrols/imagine/images/button-background-pressed.9.png
new file mode 100644
index 0000000000..d0942509f7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-pressed@2x.9.png b/src/quickcontrols/imagine/images/button-background-pressed@2x.9.png
new file mode 100644
index 0000000000..c38bcd026f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-pressed@3x.9.png b/src/quickcontrols/imagine/images/button-background-pressed@3x.9.png
new file mode 100644
index 0000000000..80889bf801
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background-pressed@4x.9.png b/src/quickcontrols/imagine/images/button-background-pressed@4x.9.png
new file mode 100644
index 0000000000..05de8377ef
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background.9.png b/src/quickcontrols/imagine/images/button-background.9.png
new file mode 100644
index 0000000000..6f1daed831
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background.9.png
diff --git a/src/quickcontrols/imagine/images/button-background@2x.9.png b/src/quickcontrols/imagine/images/button-background@2x.9.png
new file mode 100644
index 0000000000..4a2507f535
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background@3x.9.png b/src/quickcontrols/imagine/images/button-background@3x.9.png
new file mode 100644
index 0000000000..4f13b4ef55
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/button-background@4x.9.png b/src/quickcontrols/imagine/images/button-background@4x.9.png
new file mode 100644
index 0000000000..0e1ab4524e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/button-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked-focused.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked-focused.png
new file mode 100644
index 0000000000..d55a520426
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked-focused.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked-focused@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked-focused@2x.png
new file mode 100644
index 0000000000..7289f63949
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked-focused@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked-focused@3x.png
new file mode 100644
index 0000000000..02d6cdf205
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked-focused@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked-focused@4x.png
new file mode 100644
index 0000000000..3f074dbfa9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked-hovered.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked-hovered.png
new file mode 100644
index 0000000000..d55a520426
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked-hovered.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked-hovered@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked-hovered@2x.png
new file mode 100644
index 0000000000..7289f63949
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked-hovered@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked-hovered@3x.png
new file mode 100644
index 0000000000..02d6cdf205
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked-hovered@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked-hovered@4x.png
new file mode 100644
index 0000000000..3f074dbfa9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked-pressed.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked-pressed.png
new file mode 100644
index 0000000000..9c03d096e4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked-pressed.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked-pressed@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked-pressed@2x.png
new file mode 100644
index 0000000000..680ba3efca
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked-pressed@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked-pressed@3x.png
new file mode 100644
index 0000000000..974205de54
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked-pressed@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked-pressed@4x.png
new file mode 100644
index 0000000000..2c8b6aabf4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked.png
new file mode 100644
index 0000000000..598b163aaa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked@2x.png
new file mode 100644
index 0000000000..06382264f9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked@3x.png
new file mode 100644
index 0000000000..12a32dcd20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-checked@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator-checked@4x.png
new file mode 100644
index 0000000000..4bc6701d65
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-checked@4x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-disabled.png b/src/quickcontrols/imagine/images/checkbox-indicator-disabled.png
new file mode 100644
index 0000000000..0a499f8f2d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-disabled.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-disabled@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator-disabled@2x.png
new file mode 100644
index 0000000000..db652c5ac9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-disabled@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator-disabled@3x.png
new file mode 100644
index 0000000000..482f045d32
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-disabled@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator-disabled@4x.png
new file mode 100644
index 0000000000..a386e27251
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-focused.png b/src/quickcontrols/imagine/images/checkbox-indicator-focused.png
new file mode 100644
index 0000000000..c5eb85276d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-focused.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-focused@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator-focused@2x.png
new file mode 100644
index 0000000000..8496fb1a88
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-focused@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator-focused@3x.png
new file mode 100644
index 0000000000..30849fd0f0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-focused@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator-focused@4x.png
new file mode 100644
index 0000000000..55ce7c0c1b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-hovered.png b/src/quickcontrols/imagine/images/checkbox-indicator-hovered.png
new file mode 100644
index 0000000000..c5eb85276d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-hovered.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-hovered@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator-hovered@2x.png
new file mode 100644
index 0000000000..8496fb1a88
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-hovered@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator-hovered@3x.png
new file mode 100644
index 0000000000..30849fd0f0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-hovered@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator-hovered@4x.png
new file mode 100644
index 0000000000..55ce7c0c1b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-focused.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-focused.png
new file mode 100644
index 0000000000..cd07b1ccb3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-focused.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-focused@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-focused@2x.png
new file mode 100644
index 0000000000..acae6afffe
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-focused@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-focused@3x.png
new file mode 100644
index 0000000000..1e8d2c4575
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-focused@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-focused@4x.png
new file mode 100644
index 0000000000..577017c4c9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-hovered.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-hovered.png
new file mode 100644
index 0000000000..cd07b1ccb3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-hovered.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-hovered@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-hovered@2x.png
new file mode 100644
index 0000000000..acae6afffe
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-hovered@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-hovered@3x.png
new file mode 100644
index 0000000000..1e8d2c4575
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-hovered@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-hovered@4x.png
new file mode 100644
index 0000000000..577017c4c9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-pressed.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-pressed.png
new file mode 100644
index 0000000000..928706ab27
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-pressed.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-pressed@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-pressed@2x.png
new file mode 100644
index 0000000000..3645d78a21
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-pressed@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-pressed@3x.png
new file mode 100644
index 0000000000..ade63bd04b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-pressed@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-pressed@4x.png
new file mode 100644
index 0000000000..cd73617e3c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked.png
new file mode 100644
index 0000000000..e404a4e3c8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked@2x.png
new file mode 100644
index 0000000000..2d0f51767a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked@3x.png
new file mode 100644
index 0000000000..4b9777b7ea
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked@4x.png
new file mode 100644
index 0000000000..e0f67e9894
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-partially-checked@4x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-pressed.png b/src/quickcontrols/imagine/images/checkbox-indicator-pressed.png
new file mode 100644
index 0000000000..a1baaf903e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-pressed.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-pressed@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator-pressed@2x.png
new file mode 100644
index 0000000000..81a7c3647a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-pressed@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator-pressed@3x.png
new file mode 100644
index 0000000000..9325de38cb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator-pressed@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator-pressed@4x.png
new file mode 100644
index 0000000000..c93b8fb8a3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator.png b/src/quickcontrols/imagine/images/checkbox-indicator.png
new file mode 100644
index 0000000000..2b3e2323d7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator@2x.png b/src/quickcontrols/imagine/images/checkbox-indicator@2x.png
new file mode 100644
index 0000000000..ce8985dbb1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator@2x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator@3x.png b/src/quickcontrols/imagine/images/checkbox-indicator@3x.png
new file mode 100644
index 0000000000..2968731dd7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator@3x.png
diff --git a/src/quickcontrols/imagine/images/checkbox-indicator@4x.png b/src/quickcontrols/imagine/images/checkbox-indicator@4x.png
new file mode 100644
index 0000000000..ea8da28498
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkbox-indicator@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-disabled.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-disabled.9.png
new file mode 100644
index 0000000000..23570729d6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-disabled@2x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-disabled@2x.9.png
new file mode 100644
index 0000000000..c7abb65c3f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-disabled@3x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-disabled@3x.9.png
new file mode 100644
index 0000000000..46b84d7da4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-disabled@4x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-disabled@4x.9.png
new file mode 100644
index 0000000000..f4dfd338f9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-focused.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-focused.9.png
new file mode 100644
index 0000000000..6ae574d55a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-focused.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-focused@2x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-focused@2x.9.png
new file mode 100644
index 0000000000..6b61562c14
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-focused@3x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-focused@3x.9.png
new file mode 100644
index 0000000000..e46c0bf1d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-focused@4x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-focused@4x.9.png
new file mode 100644
index 0000000000..010444e8e1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-highlighted.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-highlighted.9.png
new file mode 100644
index 0000000000..e79d8e1d01
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-highlighted.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-highlighted@2x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-highlighted@2x.9.png
new file mode 100644
index 0000000000..ea68d35fc4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-highlighted@2x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-highlighted@3x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-highlighted@3x.9.png
new file mode 100644
index 0000000000..6d61041599
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-highlighted@3x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-highlighted@4x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-highlighted@4x.9.png
new file mode 100644
index 0000000000..590cca96a1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-highlighted@4x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-hovered.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-hovered.9.png
new file mode 100644
index 0000000000..b8749743d0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-hovered@2x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-hovered@2x.9.png
new file mode 100644
index 0000000000..5a136a0ca9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-hovered@3x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-hovered@3x.9.png
new file mode 100644
index 0000000000..f47a366b7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-hovered@4x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-hovered@4x.9.png
new file mode 100644
index 0000000000..9ecb680f20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-pressed.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-pressed.9.png
new file mode 100644
index 0000000000..6ae574d55a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-pressed@2x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-pressed@2x.9.png
new file mode 100644
index 0000000000..6b61562c14
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-pressed@3x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-pressed@3x.9.png
new file mode 100644
index 0000000000..e46c0bf1d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background-pressed@4x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background-pressed@4x.9.png
new file mode 100644
index 0000000000..010444e8e1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background.9.png b/src/quickcontrols/imagine/images/checkdelegate-background.9.png
new file mode 100644
index 0000000000..b8749743d0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background@2x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background@2x.9.png
new file mode 100644
index 0000000000..5a136a0ca9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background@3x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background@3x.9.png
new file mode 100644
index 0000000000..f47a366b7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-background@4x.9.png b/src/quickcontrols/imagine/images/checkdelegate-background@4x.9.png
new file mode 100644
index 0000000000..9ecb680f20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-focused.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-focused.png
new file mode 100644
index 0000000000..d55a520426
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-focused.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-focused@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-focused@2x.png
new file mode 100644
index 0000000000..7289f63949
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-focused@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-focused@3x.png
new file mode 100644
index 0000000000..02d6cdf205
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-focused@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-focused@4x.png
new file mode 100644
index 0000000000..3f074dbfa9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-hovered.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-hovered.png
new file mode 100644
index 0000000000..d55a520426
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-hovered.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-hovered@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-hovered@2x.png
new file mode 100644
index 0000000000..7289f63949
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-hovered@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-hovered@3x.png
new file mode 100644
index 0000000000..02d6cdf205
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-hovered@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-hovered@4x.png
new file mode 100644
index 0000000000..3f074dbfa9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-pressed.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-pressed.png
new file mode 100644
index 0000000000..9c03d096e4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-pressed.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-pressed@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-pressed@2x.png
new file mode 100644
index 0000000000..680ba3efca
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-pressed@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-pressed@3x.png
new file mode 100644
index 0000000000..974205de54
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-pressed@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-pressed@4x.png
new file mode 100644
index 0000000000..2c8b6aabf4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked.png
new file mode 100644
index 0000000000..598b163aaa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked@2x.png
new file mode 100644
index 0000000000..06382264f9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked@3x.png
new file mode 100644
index 0000000000..12a32dcd20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-checked@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked@4x.png
new file mode 100644
index 0000000000..4bc6701d65
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-checked@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-disabled.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-disabled.png
new file mode 100644
index 0000000000..0a499f8f2d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-disabled.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-disabled@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-disabled@2x.png
new file mode 100644
index 0000000000..db652c5ac9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-disabled@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-disabled@3x.png
new file mode 100644
index 0000000000..482f045d32
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-disabled@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-disabled@4x.png
new file mode 100644
index 0000000000..a386e27251
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-focused.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-focused.png
new file mode 100644
index 0000000000..c5eb85276d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-focused.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-focused@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-focused@2x.png
new file mode 100644
index 0000000000..8496fb1a88
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-focused@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-focused@3x.png
new file mode 100644
index 0000000000..30849fd0f0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-focused@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-focused@4x.png
new file mode 100644
index 0000000000..55ce7c0c1b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-hovered.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-hovered.png
new file mode 100644
index 0000000000..c5eb85276d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-hovered.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-hovered@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-hovered@2x.png
new file mode 100644
index 0000000000..8496fb1a88
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-hovered@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-hovered@3x.png
new file mode 100644
index 0000000000..30849fd0f0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-hovered@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-hovered@4x.png
new file mode 100644
index 0000000000..55ce7c0c1b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-focused.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-focused.png
new file mode 100644
index 0000000000..cd07b1ccb3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-focused.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-focused@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-focused@2x.png
new file mode 100644
index 0000000000..acae6afffe
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-focused@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-focused@3x.png
new file mode 100644
index 0000000000..1e8d2c4575
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-focused@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-focused@4x.png
new file mode 100644
index 0000000000..577017c4c9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-hovered.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-hovered.png
new file mode 100644
index 0000000000..cd07b1ccb3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-hovered.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-hovered@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-hovered@2x.png
new file mode 100644
index 0000000000..acae6afffe
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-hovered@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-hovered@3x.png
new file mode 100644
index 0000000000..1e8d2c4575
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-hovered@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-hovered@4x.png
new file mode 100644
index 0000000000..577017c4c9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-pressed.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-pressed.png
new file mode 100644
index 0000000000..928706ab27
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-pressed.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-pressed@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-pressed@2x.png
new file mode 100644
index 0000000000..3645d78a21
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-pressed@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-pressed@3x.png
new file mode 100644
index 0000000000..ade63bd04b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-pressed@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-pressed@4x.png
new file mode 100644
index 0000000000..cd73617e3c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked.png
new file mode 100644
index 0000000000..e404a4e3c8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked@2x.png
new file mode 100644
index 0000000000..2d0f51767a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked@3x.png
new file mode 100644
index 0000000000..4b9777b7ea
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked@4x.png
new file mode 100644
index 0000000000..e0f67e9894
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-partially-checked@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-pressed.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-pressed.png
new file mode 100644
index 0000000000..a1baaf903e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-pressed.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-pressed@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-pressed@2x.png
new file mode 100644
index 0000000000..81a7c3647a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-pressed@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-pressed@3x.png
new file mode 100644
index 0000000000..9325de38cb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator-pressed@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator-pressed@4x.png
new file mode 100644
index 0000000000..c93b8fb8a3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator.png b/src/quickcontrols/imagine/images/checkdelegate-indicator.png
new file mode 100644
index 0000000000..2b3e2323d7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator@2x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator@2x.png
new file mode 100644
index 0000000000..ce8985dbb1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator@2x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator@3x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator@3x.png
new file mode 100644
index 0000000000..2968731dd7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator@3x.png
diff --git a/src/quickcontrols/imagine/images/checkdelegate-indicator@4x.png b/src/quickcontrols/imagine/images/checkdelegate-indicator@4x.png
new file mode 100644
index 0000000000..ea8da28498
--- /dev/null
+++ b/src/quickcontrols/imagine/images/checkdelegate-indicator@4x.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-disabled.9.png b/src/quickcontrols/imagine/images/combobox-background-disabled.9.png
new file mode 100644
index 0000000000..a91b4b5519
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-disabled@2x.9.png b/src/quickcontrols/imagine/images/combobox-background-disabled@2x.9.png
new file mode 100644
index 0000000000..570b990c9b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-disabled@3x.9.png b/src/quickcontrols/imagine/images/combobox-background-disabled@3x.9.png
new file mode 100644
index 0000000000..b0f9b9c4ce
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-disabled@4x.9.png b/src/quickcontrols/imagine/images/combobox-background-disabled@4x.9.png
new file mode 100644
index 0000000000..6e810f7592
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-editable-disabled.9.png b/src/quickcontrols/imagine/images/combobox-background-editable-disabled.9.png
new file mode 100644
index 0000000000..e192afb8a1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-editable-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-editable-disabled@2x.9.png b/src/quickcontrols/imagine/images/combobox-background-editable-disabled@2x.9.png
new file mode 100644
index 0000000000..58a0f6e9a3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-editable-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-editable-disabled@3x.9.png b/src/quickcontrols/imagine/images/combobox-background-editable-disabled@3x.9.png
new file mode 100644
index 0000000000..cd6f226b33
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-editable-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-editable-disabled@4x.9.png b/src/quickcontrols/imagine/images/combobox-background-editable-disabled@4x.9.png
new file mode 100644
index 0000000000..ff9103b091
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-editable-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-editable-focused.9.png b/src/quickcontrols/imagine/images/combobox-background-editable-focused.9.png
new file mode 100644
index 0000000000..a0f079bc47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-editable-focused.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-editable-focused@2x.9.png b/src/quickcontrols/imagine/images/combobox-background-editable-focused@2x.9.png
new file mode 100644
index 0000000000..83cb503f89
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-editable-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-editable-focused@3x.9.png b/src/quickcontrols/imagine/images/combobox-background-editable-focused@3x.9.png
new file mode 100644
index 0000000000..4cf96edf90
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-editable-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-editable-focused@4x.9.png b/src/quickcontrols/imagine/images/combobox-background-editable-focused@4x.9.png
new file mode 100644
index 0000000000..5823de804f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-editable-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-editable.9.png b/src/quickcontrols/imagine/images/combobox-background-editable.9.png
new file mode 100644
index 0000000000..8edac13208
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-editable.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-editable@2x.9.png b/src/quickcontrols/imagine/images/combobox-background-editable@2x.9.png
new file mode 100644
index 0000000000..15e465f12a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-editable@2x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-editable@3x.9.png b/src/quickcontrols/imagine/images/combobox-background-editable@3x.9.png
new file mode 100644
index 0000000000..910b48d2c6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-editable@3x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-editable@4x.9.png b/src/quickcontrols/imagine/images/combobox-background-editable@4x.9.png
new file mode 100644
index 0000000000..ff0f64118e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-editable@4x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-focused.9.png b/src/quickcontrols/imagine/images/combobox-background-focused.9.png
new file mode 100644
index 0000000000..a3865fa698
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-focused.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-focused@2x.9.png b/src/quickcontrols/imagine/images/combobox-background-focused@2x.9.png
new file mode 100644
index 0000000000..fc49f4b824
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-focused@3x.9.png b/src/quickcontrols/imagine/images/combobox-background-focused@3x.9.png
new file mode 100644
index 0000000000..b432b4ec54
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-focused@4x.9.png b/src/quickcontrols/imagine/images/combobox-background-focused@4x.9.png
new file mode 100644
index 0000000000..1586205998
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-hovered.9.png b/src/quickcontrols/imagine/images/combobox-background-hovered.9.png
new file mode 100644
index 0000000000..a3865fa698
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-hovered@2x.9.png b/src/quickcontrols/imagine/images/combobox-background-hovered@2x.9.png
new file mode 100644
index 0000000000..fc49f4b824
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-hovered@3x.9.png b/src/quickcontrols/imagine/images/combobox-background-hovered@3x.9.png
new file mode 100644
index 0000000000..b432b4ec54
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-hovered@4x.9.png b/src/quickcontrols/imagine/images/combobox-background-hovered@4x.9.png
new file mode 100644
index 0000000000..1586205998
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-open.9.png b/src/quickcontrols/imagine/images/combobox-background-open.9.png
new file mode 100644
index 0000000000..1be8440336
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-open.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-open@2x.9.png b/src/quickcontrols/imagine/images/combobox-background-open@2x.9.png
new file mode 100644
index 0000000000..95f7cd6d8a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-open@2x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-open@3x.9.png b/src/quickcontrols/imagine/images/combobox-background-open@3x.9.png
new file mode 100644
index 0000000000..2f71271ce8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-open@3x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-open@4x.9.png b/src/quickcontrols/imagine/images/combobox-background-open@4x.9.png
new file mode 100644
index 0000000000..17f6f2ce11
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-open@4x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-pressed.9.png b/src/quickcontrols/imagine/images/combobox-background-pressed.9.png
new file mode 100644
index 0000000000..1be8440336
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-pressed@2x.9.png b/src/quickcontrols/imagine/images/combobox-background-pressed@2x.9.png
new file mode 100644
index 0000000000..95f7cd6d8a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-pressed@3x.9.png b/src/quickcontrols/imagine/images/combobox-background-pressed@3x.9.png
new file mode 100644
index 0000000000..2f71271ce8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background-pressed@4x.9.png b/src/quickcontrols/imagine/images/combobox-background-pressed@4x.9.png
new file mode 100644
index 0000000000..17f6f2ce11
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background.9.png b/src/quickcontrols/imagine/images/combobox-background.9.png
new file mode 100644
index 0000000000..4ed8ddc36f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background@2x.9.png b/src/quickcontrols/imagine/images/combobox-background@2x.9.png
new file mode 100644
index 0000000000..1d7a88943a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background@3x.9.png b/src/quickcontrols/imagine/images/combobox-background@3x.9.png
new file mode 100644
index 0000000000..313630f85c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-background@4x.9.png b/src/quickcontrols/imagine/images/combobox-background@4x.9.png
new file mode 100644
index 0000000000..be63d56ea0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-disabled.png b/src/quickcontrols/imagine/images/combobox-indicator-disabled.png
new file mode 100644
index 0000000000..761537f9c4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-disabled.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-disabled@2x.png b/src/quickcontrols/imagine/images/combobox-indicator-disabled@2x.png
new file mode 100644
index 0000000000..322b7b6837
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-disabled@3x.png b/src/quickcontrols/imagine/images/combobox-indicator-disabled@3x.png
new file mode 100644
index 0000000000..73feec349d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-disabled@4x.png b/src/quickcontrols/imagine/images/combobox-indicator-disabled@4x.png
new file mode 100644
index 0000000000..910c4d3d21
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable-disabled.png b/src/quickcontrols/imagine/images/combobox-indicator-editable-disabled.png
new file mode 100644
index 0000000000..4399b6aab5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable-disabled.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable-disabled@2x.png b/src/quickcontrols/imagine/images/combobox-indicator-editable-disabled@2x.png
new file mode 100644
index 0000000000..e45a2ad125
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable-disabled@3x.png b/src/quickcontrols/imagine/images/combobox-indicator-editable-disabled@3x.png
new file mode 100644
index 0000000000..23f74b10ea
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable-disabled@4x.png b/src/quickcontrols/imagine/images/combobox-indicator-editable-disabled@4x.png
new file mode 100644
index 0000000000..db495899a8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored-disabled.png b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored-disabled.png
new file mode 100644
index 0000000000..2e954ae99e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored-disabled.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored-disabled@2x.png b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored-disabled@2x.png
new file mode 100644
index 0000000000..252a5e37d5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored-disabled@3x.png b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored-disabled@3x.png
new file mode 100644
index 0000000000..6d939a93f6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored-disabled@4x.png b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored-disabled@4x.png
new file mode 100644
index 0000000000..00a21ebdfb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored.png b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored.png
new file mode 100644
index 0000000000..ad52991212
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored@2x.png b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored@2x.png
new file mode 100644
index 0000000000..70b995c135
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored@2x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored@3x.png b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored@3x.png
new file mode 100644
index 0000000000..9b86537727
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored@3x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored@4x.png b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored@4x.png
new file mode 100644
index 0000000000..b4f7ae25d3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable-mirrored@4x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable.png b/src/quickcontrols/imagine/images/combobox-indicator-editable.png
new file mode 100644
index 0000000000..e053109f10
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable@2x.png b/src/quickcontrols/imagine/images/combobox-indicator-editable@2x.png
new file mode 100644
index 0000000000..b8dfd6fe0e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable@2x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable@3x.png b/src/quickcontrols/imagine/images/combobox-indicator-editable@3x.png
new file mode 100644
index 0000000000..2cdee7a8f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable@3x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator-editable@4x.png b/src/quickcontrols/imagine/images/combobox-indicator-editable@4x.png
new file mode 100644
index 0000000000..2569b4aef0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator-editable@4x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator.png b/src/quickcontrols/imagine/images/combobox-indicator.png
new file mode 100644
index 0000000000..cc32f2a272
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator@2x.png b/src/quickcontrols/imagine/images/combobox-indicator@2x.png
new file mode 100644
index 0000000000..57ea3f3082
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator@2x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator@3x.png b/src/quickcontrols/imagine/images/combobox-indicator@3x.png
new file mode 100644
index 0000000000..384f8152db
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator@3x.png
diff --git a/src/quickcontrols/imagine/images/combobox-indicator@4x.png b/src/quickcontrols/imagine/images/combobox-indicator@4x.png
new file mode 100644
index 0000000000..f326c03b4b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-indicator@4x.png
diff --git a/src/quickcontrols/imagine/images/combobox-popup.9.png b/src/quickcontrols/imagine/images/combobox-popup.9.png
new file mode 100644
index 0000000000..7344cdf6db
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-popup.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-popup@2x.9.png b/src/quickcontrols/imagine/images/combobox-popup@2x.9.png
new file mode 100644
index 0000000000..00c88c7d59
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-popup@2x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-popup@3x.9.png b/src/quickcontrols/imagine/images/combobox-popup@3x.9.png
new file mode 100644
index 0000000000..82d911ed66
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-popup@3x.9.png
diff --git a/src/quickcontrols/imagine/images/combobox-popup@4x.9.png b/src/quickcontrols/imagine/images/combobox-popup@4x.9.png
new file mode 100644
index 0000000000..98db30af66
--- /dev/null
+++ b/src/quickcontrols/imagine/images/combobox-popup@4x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-checked-focused.9.png b/src/quickcontrols/imagine/images/delaybutton-background-checked-focused.9.png
new file mode 100644
index 0000000000..e3d14e9954
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-checked-focused.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-checked-focused@2x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-checked-focused@2x.9.png
new file mode 100644
index 0000000000..ebc74b4a34
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-checked-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-checked-focused@3x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-checked-focused@3x.9.png
new file mode 100644
index 0000000000..7583472304
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-checked-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-checked-focused@4x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-checked-focused@4x.9.png
new file mode 100644
index 0000000000..9b570f4d15
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-checked-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-checked-hovered.9.png b/src/quickcontrols/imagine/images/delaybutton-background-checked-hovered.9.png
new file mode 100644
index 0000000000..e3d14e9954
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-checked-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-checked-hovered@2x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-checked-hovered@2x.9.png
new file mode 100644
index 0000000000..ebc74b4a34
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-checked-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-checked-hovered@3x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-checked-hovered@3x.9.png
new file mode 100644
index 0000000000..7583472304
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-checked-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-checked-hovered@4x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-checked-hovered@4x.9.png
new file mode 100644
index 0000000000..9b570f4d15
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-checked-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-checked.9.png b/src/quickcontrols/imagine/images/delaybutton-background-checked.9.png
new file mode 100644
index 0000000000..d0942509f7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-checked.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-checked@2x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-checked@2x.9.png
new file mode 100644
index 0000000000..c38bcd026f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-checked@2x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-checked@3x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-checked@3x.9.png
new file mode 100644
index 0000000000..80889bf801
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-checked@3x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-checked@4x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-checked@4x.9.png
new file mode 100644
index 0000000000..05de8377ef
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-checked@4x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-disabled-checked.9.png b/src/quickcontrols/imagine/images/delaybutton-background-disabled-checked.9.png
new file mode 100644
index 0000000000..8196289cc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-disabled-checked.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-disabled-checked@2x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-disabled-checked@2x.9.png
new file mode 100644
index 0000000000..76cd44908b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-disabled-checked@2x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-disabled-checked@3x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-disabled-checked@3x.9.png
new file mode 100644
index 0000000000..8bd6259a47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-disabled-checked@3x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-disabled-checked@4x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-disabled-checked@4x.9.png
new file mode 100644
index 0000000000..3e08152013
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-disabled-checked@4x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-disabled.9.png b/src/quickcontrols/imagine/images/delaybutton-background-disabled.9.png
new file mode 100644
index 0000000000..8196289cc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-disabled@2x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-disabled@2x.9.png
new file mode 100644
index 0000000000..76cd44908b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-disabled@3x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-disabled@3x.9.png
new file mode 100644
index 0000000000..8bd6259a47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-disabled@4x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-disabled@4x.9.png
new file mode 100644
index 0000000000..3e08152013
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-focused.9.png b/src/quickcontrols/imagine/images/delaybutton-background-focused.9.png
new file mode 100644
index 0000000000..294ff8bda6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-focused.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-focused@2x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-focused@2x.9.png
new file mode 100644
index 0000000000..48e2bbcb56
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-focused@3x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-focused@3x.9.png
new file mode 100644
index 0000000000..0981eb2ac5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-focused@4x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-focused@4x.9.png
new file mode 100644
index 0000000000..4ae48bfa36
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-hovered.9.png b/src/quickcontrols/imagine/images/delaybutton-background-hovered.9.png
new file mode 100644
index 0000000000..42e40e6082
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-hovered@2x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-hovered@2x.9.png
new file mode 100644
index 0000000000..90dc70bfe0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-hovered@3x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-hovered@3x.9.png
new file mode 100644
index 0000000000..2ed2340cb0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-hovered@4x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-hovered@4x.9.png
new file mode 100644
index 0000000000..e1428e37eb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-pressed.9.png b/src/quickcontrols/imagine/images/delaybutton-background-pressed.9.png
new file mode 100644
index 0000000000..d0942509f7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-pressed@2x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-pressed@2x.9.png
new file mode 100644
index 0000000000..c38bcd026f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-pressed@3x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-pressed@3x.9.png
new file mode 100644
index 0000000000..80889bf801
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background-pressed@4x.9.png b/src/quickcontrols/imagine/images/delaybutton-background-pressed@4x.9.png
new file mode 100644
index 0000000000..05de8377ef
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background.9.png b/src/quickcontrols/imagine/images/delaybutton-background.9.png
new file mode 100644
index 0000000000..6f1daed831
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background@2x.9.png b/src/quickcontrols/imagine/images/delaybutton-background@2x.9.png
new file mode 100644
index 0000000000..4a2507f535
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background@3x.9.png b/src/quickcontrols/imagine/images/delaybutton-background@3x.9.png
new file mode 100644
index 0000000000..4f13b4ef55
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-background@4x.9.png b/src/quickcontrols/imagine/images/delaybutton-background@4x.9.png
new file mode 100644
index 0000000000..0e1ab4524e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-mask.9.png b/src/quickcontrols/imagine/images/delaybutton-mask.9.png
new file mode 100644
index 0000000000..76d3967d04
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-mask.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-mask@2x.9.png b/src/quickcontrols/imagine/images/delaybutton-mask@2x.9.png
new file mode 100644
index 0000000000..b8db224cc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-mask@2x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-mask@3x.9.png b/src/quickcontrols/imagine/images/delaybutton-mask@3x.9.png
new file mode 100644
index 0000000000..3bff2c15ae
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-mask@3x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-mask@4x.9.png b/src/quickcontrols/imagine/images/delaybutton-mask@4x.9.png
new file mode 100644
index 0000000000..045c7fac88
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-mask@4x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-progress-disabled.9.png b/src/quickcontrols/imagine/images/delaybutton-progress-disabled.9.png
new file mode 100644
index 0000000000..5c209c9c6b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-progress-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-progress-disabled@2x.9.png b/src/quickcontrols/imagine/images/delaybutton-progress-disabled@2x.9.png
new file mode 100644
index 0000000000..0ef11a8d3c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-progress-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-progress-disabled@3x.9.png b/src/quickcontrols/imagine/images/delaybutton-progress-disabled@3x.9.png
new file mode 100644
index 0000000000..f3f8e54796
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-progress-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-progress-disabled@4x.9.png b/src/quickcontrols/imagine/images/delaybutton-progress-disabled@4x.9.png
new file mode 100644
index 0000000000..b24f50e669
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-progress-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-progress.9.png b/src/quickcontrols/imagine/images/delaybutton-progress.9.png
new file mode 100644
index 0000000000..4dd3aec5fe
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-progress.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-progress@2x.9.png b/src/quickcontrols/imagine/images/delaybutton-progress@2x.9.png
new file mode 100644
index 0000000000..cd422076e3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-progress@2x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-progress@3x.9.png b/src/quickcontrols/imagine/images/delaybutton-progress@3x.9.png
new file mode 100644
index 0000000000..08610300be
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-progress@3x.9.png
diff --git a/src/quickcontrols/imagine/images/delaybutton-progress@4x.9.png b/src/quickcontrols/imagine/images/delaybutton-progress@4x.9.png
new file mode 100644
index 0000000000..24cc19ba0a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/delaybutton-progress@4x.9.png
diff --git a/src/quickcontrols/imagine/images/dial-background-disabled.png b/src/quickcontrols/imagine/images/dial-background-disabled.png
new file mode 100644
index 0000000000..d7c4f847ce
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-background-disabled.png
diff --git a/src/quickcontrols/imagine/images/dial-background-disabled@2x.png b/src/quickcontrols/imagine/images/dial-background-disabled@2x.png
new file mode 100644
index 0000000000..56b085df96
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-background-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/dial-background-disabled@3x.png b/src/quickcontrols/imagine/images/dial-background-disabled@3x.png
new file mode 100644
index 0000000000..4f1e17e7a9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-background-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/dial-background-disabled@4x.png b/src/quickcontrols/imagine/images/dial-background-disabled@4x.png
new file mode 100644
index 0000000000..4aacbf8222
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-background-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/dial-background-focused.png b/src/quickcontrols/imagine/images/dial-background-focused.png
new file mode 100644
index 0000000000..fc53d5c407
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-background-focused.png
diff --git a/src/quickcontrols/imagine/images/dial-background-focused@2x.png b/src/quickcontrols/imagine/images/dial-background-focused@2x.png
new file mode 100644
index 0000000000..6b547a172d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-background-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/dial-background-focused@3x.png b/src/quickcontrols/imagine/images/dial-background-focused@3x.png
new file mode 100644
index 0000000000..7b8a2582ad
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-background-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/dial-background-focused@4x.png b/src/quickcontrols/imagine/images/dial-background-focused@4x.png
new file mode 100644
index 0000000000..406f46b591
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-background-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/dial-background.png b/src/quickcontrols/imagine/images/dial-background.png
new file mode 100644
index 0000000000..58aa09edb2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-background.png
diff --git a/src/quickcontrols/imagine/images/dial-background@2x.png b/src/quickcontrols/imagine/images/dial-background@2x.png
new file mode 100644
index 0000000000..87cd9a0f6b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-background@2x.png
diff --git a/src/quickcontrols/imagine/images/dial-background@3x.png b/src/quickcontrols/imagine/images/dial-background@3x.png
new file mode 100644
index 0000000000..103fb46107
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-background@3x.png
diff --git a/src/quickcontrols/imagine/images/dial-background@4x.png b/src/quickcontrols/imagine/images/dial-background@4x.png
new file mode 100644
index 0000000000..c290f84a8f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-background@4x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-disabled.png b/src/quickcontrols/imagine/images/dial-handle-disabled.png
new file mode 100644
index 0000000000..a93fd0f2b6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-disabled.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-disabled@2x.png b/src/quickcontrols/imagine/images/dial-handle-disabled@2x.png
new file mode 100644
index 0000000000..2cd536be06
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-disabled@3x.png b/src/quickcontrols/imagine/images/dial-handle-disabled@3x.png
new file mode 100644
index 0000000000..56b9fe06db
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-disabled@4x.png b/src/quickcontrols/imagine/images/dial-handle-disabled@4x.png
new file mode 100644
index 0000000000..5098d6887c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-focused-hovered.png b/src/quickcontrols/imagine/images/dial-handle-focused-hovered.png
new file mode 100644
index 0000000000..2a143f2afb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-focused-hovered.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-focused-hovered@2x.png b/src/quickcontrols/imagine/images/dial-handle-focused-hovered@2x.png
new file mode 100644
index 0000000000..24dfee8284
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-focused-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-focused-hovered@3x.png b/src/quickcontrols/imagine/images/dial-handle-focused-hovered@3x.png
new file mode 100644
index 0000000000..16e128d5cc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-focused-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-focused-hovered@4x.png b/src/quickcontrols/imagine/images/dial-handle-focused-hovered@4x.png
new file mode 100644
index 0000000000..b4523acb70
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-focused-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-focused-pressed.png b/src/quickcontrols/imagine/images/dial-handle-focused-pressed.png
new file mode 100644
index 0000000000..d43971ff4d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-focused-pressed.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-focused-pressed@2x.png b/src/quickcontrols/imagine/images/dial-handle-focused-pressed@2x.png
new file mode 100644
index 0000000000..caa2376e9b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-focused-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-focused-pressed@3x.png b/src/quickcontrols/imagine/images/dial-handle-focused-pressed@3x.png
new file mode 100644
index 0000000000..c291388316
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-focused-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-focused-pressed@4x.png b/src/quickcontrols/imagine/images/dial-handle-focused-pressed@4x.png
new file mode 100644
index 0000000000..50ff1c8bf4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-focused-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-focused.png b/src/quickcontrols/imagine/images/dial-handle-focused.png
new file mode 100644
index 0000000000..d2733474b9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-focused.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-focused@2x.png b/src/quickcontrols/imagine/images/dial-handle-focused@2x.png
new file mode 100644
index 0000000000..c7bc8f743b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-focused@3x.png b/src/quickcontrols/imagine/images/dial-handle-focused@3x.png
new file mode 100644
index 0000000000..c0dcd94535
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-focused@4x.png b/src/quickcontrols/imagine/images/dial-handle-focused@4x.png
new file mode 100644
index 0000000000..b9d2234c3f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-hovered.png b/src/quickcontrols/imagine/images/dial-handle-hovered.png
new file mode 100644
index 0000000000..f5d0ac6f7f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-hovered.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-hovered@2x.png b/src/quickcontrols/imagine/images/dial-handle-hovered@2x.png
new file mode 100644
index 0000000000..da23baaa90
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-hovered@3x.png b/src/quickcontrols/imagine/images/dial-handle-hovered@3x.png
new file mode 100644
index 0000000000..7287a41923
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-hovered@4x.png b/src/quickcontrols/imagine/images/dial-handle-hovered@4x.png
new file mode 100644
index 0000000000..9f6982dd56
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-pressed.png b/src/quickcontrols/imagine/images/dial-handle-pressed.png
new file mode 100644
index 0000000000..3b98e1245c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-pressed.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-pressed@2x.png b/src/quickcontrols/imagine/images/dial-handle-pressed@2x.png
new file mode 100644
index 0000000000..454e73644d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-pressed@3x.png b/src/quickcontrols/imagine/images/dial-handle-pressed@3x.png
new file mode 100644
index 0000000000..794516da1e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle-pressed@4x.png b/src/quickcontrols/imagine/images/dial-handle-pressed@4x.png
new file mode 100644
index 0000000000..211b1135be
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle.png b/src/quickcontrols/imagine/images/dial-handle.png
new file mode 100644
index 0000000000..652b82d30e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle.png
diff --git a/src/quickcontrols/imagine/images/dial-handle@2x.png b/src/quickcontrols/imagine/images/dial-handle@2x.png
new file mode 100644
index 0000000000..3c86a59bff
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle@2x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle@3x.png b/src/quickcontrols/imagine/images/dial-handle@3x.png
new file mode 100644
index 0000000000..cbfcdbcdc6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle@3x.png
diff --git a/src/quickcontrols/imagine/images/dial-handle@4x.png b/src/quickcontrols/imagine/images/dial-handle@4x.png
new file mode 100644
index 0000000000..2872e006fa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dial-handle@4x.png
diff --git a/src/quickcontrols/imagine/images/dialog-background.9.png b/src/quickcontrols/imagine/images/dialog-background.9.png
new file mode 100644
index 0000000000..c842b5ff58
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialog-background.9.png
diff --git a/src/quickcontrols/imagine/images/dialog-background@2x.9.png b/src/quickcontrols/imagine/images/dialog-background@2x.9.png
new file mode 100644
index 0000000000..ca23df1f0d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialog-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/dialog-background@3x.9.png b/src/quickcontrols/imagine/images/dialog-background@3x.9.png
new file mode 100644
index 0000000000..46cd406536
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialog-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/dialog-background@4x.9.png b/src/quickcontrols/imagine/images/dialog-background@4x.9.png
new file mode 100644
index 0000000000..3da74119cc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialog-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/dialog-overlay-modal.png b/src/quickcontrols/imagine/images/dialog-overlay-modal.png
new file mode 100644
index 0000000000..d4a43d1c70
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialog-overlay-modal.png
diff --git a/src/quickcontrols/imagine/images/dialog-overlay-modal@2x.png b/src/quickcontrols/imagine/images/dialog-overlay-modal@2x.png
new file mode 100644
index 0000000000..c9a8f4124b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialog-overlay-modal@2x.png
diff --git a/src/quickcontrols/imagine/images/dialog-overlay-modal@3x.png b/src/quickcontrols/imagine/images/dialog-overlay-modal@3x.png
new file mode 100644
index 0000000000..4a1084a919
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialog-overlay-modal@3x.png
diff --git a/src/quickcontrols/imagine/images/dialog-overlay-modal@4x.png b/src/quickcontrols/imagine/images/dialog-overlay-modal@4x.png
new file mode 100644
index 0000000000..b92e600dae
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialog-overlay-modal@4x.png
diff --git a/src/quickcontrols/imagine/images/dialog-overlay.png b/src/quickcontrols/imagine/images/dialog-overlay.png
new file mode 100644
index 0000000000..b7da23c00f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialog-overlay.png
diff --git a/src/quickcontrols/imagine/images/dialog-overlay@2x.png b/src/quickcontrols/imagine/images/dialog-overlay@2x.png
new file mode 100644
index 0000000000..23828d5a1c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialog-overlay@2x.png
diff --git a/src/quickcontrols/imagine/images/dialog-overlay@3x.png b/src/quickcontrols/imagine/images/dialog-overlay@3x.png
new file mode 100644
index 0000000000..d9d5382867
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialog-overlay@3x.png
diff --git a/src/quickcontrols/imagine/images/dialog-overlay@4x.png b/src/quickcontrols/imagine/images/dialog-overlay@4x.png
new file mode 100644
index 0000000000..a76c1a3a71
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialog-overlay@4x.png
diff --git a/src/quickcontrols/imagine/images/dialogbuttonbox-background.9.png b/src/quickcontrols/imagine/images/dialogbuttonbox-background.9.png
new file mode 100644
index 0000000000..4b080c7f8b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialogbuttonbox-background.9.png
diff --git a/src/quickcontrols/imagine/images/dialogbuttonbox-background@2x.9.png b/src/quickcontrols/imagine/images/dialogbuttonbox-background@2x.9.png
new file mode 100644
index 0000000000..38306bea93
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialogbuttonbox-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/dialogbuttonbox-background@3x.9.png b/src/quickcontrols/imagine/images/dialogbuttonbox-background@3x.9.png
new file mode 100644
index 0000000000..66afaabe22
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialogbuttonbox-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/dialogbuttonbox-background@4x.9.png b/src/quickcontrols/imagine/images/dialogbuttonbox-background@4x.9.png
new file mode 100644
index 0000000000..7d0db539c1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/dialogbuttonbox-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-bottom.9.png b/src/quickcontrols/imagine/images/drawer-background-bottom.9.png
new file mode 100644
index 0000000000..023d8bf806
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-bottom.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-bottom@2x.9.png b/src/quickcontrols/imagine/images/drawer-background-bottom@2x.9.png
new file mode 100644
index 0000000000..6b229ce9e7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-bottom@2x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-bottom@3x.9.png b/src/quickcontrols/imagine/images/drawer-background-bottom@3x.9.png
new file mode 100644
index 0000000000..c61118b651
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-bottom@3x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-bottom@4x.9.png b/src/quickcontrols/imagine/images/drawer-background-bottom@4x.9.png
new file mode 100644
index 0000000000..08b2e25f30
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-bottom@4x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-left.9.png b/src/quickcontrols/imagine/images/drawer-background-left.9.png
new file mode 100644
index 0000000000..5145a3a3f9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-left.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-left@2x.9.png b/src/quickcontrols/imagine/images/drawer-background-left@2x.9.png
new file mode 100644
index 0000000000..95a80ab530
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-left@2x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-left@3x.9.png b/src/quickcontrols/imagine/images/drawer-background-left@3x.9.png
new file mode 100644
index 0000000000..bd330b7f8e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-left@3x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-left@4x.9.png b/src/quickcontrols/imagine/images/drawer-background-left@4x.9.png
new file mode 100644
index 0000000000..10f0702a11
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-left@4x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-right.9.png b/src/quickcontrols/imagine/images/drawer-background-right.9.png
new file mode 100644
index 0000000000..37afb73465
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-right.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-right@2x.9.png b/src/quickcontrols/imagine/images/drawer-background-right@2x.9.png
new file mode 100644
index 0000000000..cfbc8f35a2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-right@2x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-right@3x.9.png b/src/quickcontrols/imagine/images/drawer-background-right@3x.9.png
new file mode 100644
index 0000000000..9a49b6d530
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-right@3x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-right@4x.9.png b/src/quickcontrols/imagine/images/drawer-background-right@4x.9.png
new file mode 100644
index 0000000000..564057760a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-right@4x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-top.9.png b/src/quickcontrols/imagine/images/drawer-background-top.9.png
new file mode 100644
index 0000000000..56da059ff9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-top.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-top@2x.9.png b/src/quickcontrols/imagine/images/drawer-background-top@2x.9.png
new file mode 100644
index 0000000000..976671ce59
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-top@2x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-top@3x.9.png b/src/quickcontrols/imagine/images/drawer-background-top@3x.9.png
new file mode 100644
index 0000000000..7c07deba34
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-top@3x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-background-top@4x.9.png b/src/quickcontrols/imagine/images/drawer-background-top@4x.9.png
new file mode 100644
index 0000000000..e3b1edf7c2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-background-top@4x.9.png
diff --git a/src/quickcontrols/imagine/images/drawer-overlay-modal.png b/src/quickcontrols/imagine/images/drawer-overlay-modal.png
new file mode 100644
index 0000000000..d4a43d1c70
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-overlay-modal.png
diff --git a/src/quickcontrols/imagine/images/drawer-overlay-modal@2x.png b/src/quickcontrols/imagine/images/drawer-overlay-modal@2x.png
new file mode 100644
index 0000000000..c9a8f4124b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-overlay-modal@2x.png
diff --git a/src/quickcontrols/imagine/images/drawer-overlay-modal@3x.png b/src/quickcontrols/imagine/images/drawer-overlay-modal@3x.png
new file mode 100644
index 0000000000..4a1084a919
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-overlay-modal@3x.png
diff --git a/src/quickcontrols/imagine/images/drawer-overlay-modal@4x.png b/src/quickcontrols/imagine/images/drawer-overlay-modal@4x.png
new file mode 100644
index 0000000000..b92e600dae
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-overlay-modal@4x.png
diff --git a/src/quickcontrols/imagine/images/drawer-overlay.png b/src/quickcontrols/imagine/images/drawer-overlay.png
new file mode 100644
index 0000000000..b7da23c00f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-overlay.png
diff --git a/src/quickcontrols/imagine/images/drawer-overlay@2x.png b/src/quickcontrols/imagine/images/drawer-overlay@2x.png
new file mode 100644
index 0000000000..23828d5a1c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-overlay@2x.png
diff --git a/src/quickcontrols/imagine/images/drawer-overlay@3x.png b/src/quickcontrols/imagine/images/drawer-overlay@3x.png
new file mode 100644
index 0000000000..d9d5382867
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-overlay@3x.png
diff --git a/src/quickcontrols/imagine/images/drawer-overlay@4x.png b/src/quickcontrols/imagine/images/drawer-overlay@4x.png
new file mode 100644
index 0000000000..a76c1a3a71
--- /dev/null
+++ b/src/quickcontrols/imagine/images/drawer-overlay@4x.png
diff --git a/src/quickcontrols/imagine/images/frame-background.9.png b/src/quickcontrols/imagine/images/frame-background.9.png
new file mode 100644
index 0000000000..8674059de8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/frame-background.9.png
diff --git a/src/quickcontrols/imagine/images/frame-background@2x.9.png b/src/quickcontrols/imagine/images/frame-background@2x.9.png
new file mode 100644
index 0000000000..196614964a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/frame-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/frame-background@3x.9.png b/src/quickcontrols/imagine/images/frame-background@3x.9.png
new file mode 100644
index 0000000000..07d644be96
--- /dev/null
+++ b/src/quickcontrols/imagine/images/frame-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/frame-background@4x.9.png b/src/quickcontrols/imagine/images/frame-background@4x.9.png
new file mode 100644
index 0000000000..8bf47d2a88
--- /dev/null
+++ b/src/quickcontrols/imagine/images/frame-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/groupbox-background.9.png b/src/quickcontrols/imagine/images/groupbox-background.9.png
new file mode 100644
index 0000000000..8674059de8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/groupbox-background.9.png
diff --git a/src/quickcontrols/imagine/images/groupbox-background@2x.9.png b/src/quickcontrols/imagine/images/groupbox-background@2x.9.png
new file mode 100644
index 0000000000..196614964a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/groupbox-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/groupbox-background@3x.9.png b/src/quickcontrols/imagine/images/groupbox-background@3x.9.png
new file mode 100644
index 0000000000..07d644be96
--- /dev/null
+++ b/src/quickcontrols/imagine/images/groupbox-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/groupbox-background@4x.9.png b/src/quickcontrols/imagine/images/groupbox-background@4x.9.png
new file mode 100644
index 0000000000..8bf47d2a88
--- /dev/null
+++ b/src/quickcontrols/imagine/images/groupbox-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/groupbox-title.9.png b/src/quickcontrols/imagine/images/groupbox-title.9.png
new file mode 100644
index 0000000000..e85e0cb135
--- /dev/null
+++ b/src/quickcontrols/imagine/images/groupbox-title.9.png
diff --git a/src/quickcontrols/imagine/images/groupbox-title@2x.9.png b/src/quickcontrols/imagine/images/groupbox-title@2x.9.png
new file mode 100644
index 0000000000..d5359d857d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/groupbox-title@2x.9.png
diff --git a/src/quickcontrols/imagine/images/groupbox-title@3x.9.png b/src/quickcontrols/imagine/images/groupbox-title@3x.9.png
new file mode 100644
index 0000000000..0e4b5c9f9f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/groupbox-title@3x.9.png
diff --git a/src/quickcontrols/imagine/images/groupbox-title@4x.9.png b/src/quickcontrols/imagine/images/groupbox-title@4x.9.png
new file mode 100644
index 0000000000..908dfe6b90
--- /dev/null
+++ b/src/quickcontrols/imagine/images/groupbox-title@4x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-disabled.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-disabled.9.png
new file mode 100644
index 0000000000..23570729d6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-disabled@2x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-disabled@2x.9.png
new file mode 100644
index 0000000000..c7abb65c3f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-disabled@3x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-disabled@3x.9.png
new file mode 100644
index 0000000000..46b84d7da4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-disabled@4x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-disabled@4x.9.png
new file mode 100644
index 0000000000..f4dfd338f9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-focused.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-focused.9.png
new file mode 100644
index 0000000000..6ae574d55a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-focused.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-focused@2x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-focused@2x.9.png
new file mode 100644
index 0000000000..6b61562c14
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-focused@3x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-focused@3x.9.png
new file mode 100644
index 0000000000..e46c0bf1d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-focused@4x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-focused@4x.9.png
new file mode 100644
index 0000000000..010444e8e1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-highlighted.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-highlighted.9.png
new file mode 100644
index 0000000000..e79d8e1d01
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-highlighted.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-highlighted@2x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-highlighted@2x.9.png
new file mode 100644
index 0000000000..ea68d35fc4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-highlighted@2x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-highlighted@3x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-highlighted@3x.9.png
new file mode 100644
index 0000000000..6d61041599
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-highlighted@3x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-highlighted@4x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-highlighted@4x.9.png
new file mode 100644
index 0000000000..590cca96a1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-highlighted@4x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-hovered.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-hovered.9.png
new file mode 100644
index 0000000000..b8749743d0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-hovered@2x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-hovered@2x.9.png
new file mode 100644
index 0000000000..5a136a0ca9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-hovered@3x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-hovered@3x.9.png
new file mode 100644
index 0000000000..f47a366b7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-hovered@4x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-hovered@4x.9.png
new file mode 100644
index 0000000000..9ecb680f20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-pressed.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-pressed.9.png
new file mode 100644
index 0000000000..6ae574d55a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-pressed@2x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-pressed@2x.9.png
new file mode 100644
index 0000000000..6b61562c14
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-pressed@3x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-pressed@3x.9.png
new file mode 100644
index 0000000000..e46c0bf1d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background-pressed@4x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background-pressed@4x.9.png
new file mode 100644
index 0000000000..010444e8e1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background.9.png b/src/quickcontrols/imagine/images/itemdelegate-background.9.png
new file mode 100644
index 0000000000..b8749743d0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background@2x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background@2x.9.png
new file mode 100644
index 0000000000..5a136a0ca9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background@3x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background@3x.9.png
new file mode 100644
index 0000000000..f47a366b7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/itemdelegate-background@4x.9.png b/src/quickcontrols/imagine/images/itemdelegate-background@4x.9.png
new file mode 100644
index 0000000000..9ecb680f20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/itemdelegate-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/menu-background.9.png b/src/quickcontrols/imagine/images/menu-background.9.png
new file mode 100644
index 0000000000..3195fbc336
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menu-background.9.png
diff --git a/src/quickcontrols/imagine/images/menu-background@2x.9.png b/src/quickcontrols/imagine/images/menu-background@2x.9.png
new file mode 100644
index 0000000000..454c347ced
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menu-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/menu-background@3x.9.png b/src/quickcontrols/imagine/images/menu-background@3x.9.png
new file mode 100644
index 0000000000..32ed60860f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menu-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/menu-background@4x.9.png b/src/quickcontrols/imagine/images/menu-background@4x.9.png
new file mode 100644
index 0000000000..948cc3e95f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menu-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow-disabled.png b/src/quickcontrols/imagine/images/menuitem-arrow-disabled.png
new file mode 100644
index 0000000000..6cad53f6c8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow-disabled.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow-disabled@2x.png b/src/quickcontrols/imagine/images/menuitem-arrow-disabled@2x.png
new file mode 100644
index 0000000000..bad6fe8c0f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow-disabled@3x.png b/src/quickcontrols/imagine/images/menuitem-arrow-disabled@3x.png
new file mode 100644
index 0000000000..da420091a9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow-disabled@4x.png b/src/quickcontrols/imagine/images/menuitem-arrow-disabled@4x.png
new file mode 100644
index 0000000000..2d8e44e2f6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow-mirrored-disabled.png b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored-disabled.png
new file mode 100644
index 0000000000..44ac277145
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored-disabled.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow-mirrored-disabled@2x.png b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored-disabled@2x.png
new file mode 100644
index 0000000000..71a9b88a80
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow-mirrored-disabled@3x.png b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored-disabled@3x.png
new file mode 100644
index 0000000000..1e03f2156e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow-mirrored-disabled@4x.png b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored-disabled@4x.png
new file mode 100644
index 0000000000..0f85b409d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow-mirrored.png b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored.png
new file mode 100644
index 0000000000..4ac1160bf2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow-mirrored@2x.png b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored@2x.png
new file mode 100644
index 0000000000..79b089b654
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow-mirrored@3x.png b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored@3x.png
new file mode 100644
index 0000000000..aeb191fdd5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow-mirrored@4x.png b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored@4x.png
new file mode 100644
index 0000000000..139fab35e0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow-mirrored@4x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow.png b/src/quickcontrols/imagine/images/menuitem-arrow.png
new file mode 100644
index 0000000000..edf1f6bd1a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow@2x.png b/src/quickcontrols/imagine/images/menuitem-arrow@2x.png
new file mode 100644
index 0000000000..8e6292653e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow@3x.png b/src/quickcontrols/imagine/images/menuitem-arrow@3x.png
new file mode 100644
index 0000000000..0cef53acf5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-arrow@4x.png b/src/quickcontrols/imagine/images/menuitem-arrow@4x.png
new file mode 100644
index 0000000000..dbdc83bc16
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-arrow@4x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-background-highlighted.9.png b/src/quickcontrols/imagine/images/menuitem-background-highlighted.9.png
new file mode 100644
index 0000000000..7b8fa0f42f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-background-highlighted.9.png
diff --git a/src/quickcontrols/imagine/images/menuitem-background-highlighted@2x.9.png b/src/quickcontrols/imagine/images/menuitem-background-highlighted@2x.9.png
new file mode 100644
index 0000000000..9edc30793b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-background-highlighted@2x.9.png
diff --git a/src/quickcontrols/imagine/images/menuitem-background-highlighted@3x.9.png b/src/quickcontrols/imagine/images/menuitem-background-highlighted@3x.9.png
new file mode 100644
index 0000000000..183f6194ba
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-background-highlighted@3x.9.png
diff --git a/src/quickcontrols/imagine/images/menuitem-background-highlighted@4x.9.png b/src/quickcontrols/imagine/images/menuitem-background-highlighted@4x.9.png
new file mode 100644
index 0000000000..0a1ab8637d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-background-highlighted@4x.9.png
diff --git a/src/quickcontrols/imagine/images/menuitem-background.9.png b/src/quickcontrols/imagine/images/menuitem-background.9.png
new file mode 100644
index 0000000000..aab131eddf
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-background.9.png
diff --git a/src/quickcontrols/imagine/images/menuitem-background@2x.9.png b/src/quickcontrols/imagine/images/menuitem-background@2x.9.png
new file mode 100644
index 0000000000..c46938c4d8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/menuitem-background@3x.9.png b/src/quickcontrols/imagine/images/menuitem-background@3x.9.png
new file mode 100644
index 0000000000..bac1a83f7f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/menuitem-background@4x.9.png b/src/quickcontrols/imagine/images/menuitem-background@4x.9.png
new file mode 100644
index 0000000000..ba77504c27
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked-focused.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked-focused.png
new file mode 100644
index 0000000000..d55a520426
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked-focused.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked-focused@2x.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked-focused@2x.png
new file mode 100644
index 0000000000..7289f63949
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked-focused@3x.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked-focused@3x.png
new file mode 100644
index 0000000000..02d6cdf205
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked-focused@4x.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked-focused@4x.png
new file mode 100644
index 0000000000..3f074dbfa9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked-hovered.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked-hovered.png
new file mode 100644
index 0000000000..d55a520426
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked-hovered.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked-hovered@2x.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked-hovered@2x.png
new file mode 100644
index 0000000000..7289f63949
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked-hovered@3x.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked-hovered@3x.png
new file mode 100644
index 0000000000..02d6cdf205
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked-hovered@4x.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked-hovered@4x.png
new file mode 100644
index 0000000000..3f074dbfa9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked-pressed.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked-pressed.png
new file mode 100644
index 0000000000..9c03d096e4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked-pressed.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked-pressed@2x.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked-pressed@2x.png
new file mode 100644
index 0000000000..680ba3efca
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked-pressed@3x.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked-pressed@3x.png
new file mode 100644
index 0000000000..974205de54
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked-pressed@4x.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked-pressed@4x.png
new file mode 100644
index 0000000000..2c8b6aabf4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked.png
new file mode 100644
index 0000000000..598b163aaa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked@2x.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked@2x.png
new file mode 100644
index 0000000000..06382264f9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked@3x.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked@3x.png
new file mode 100644
index 0000000000..12a32dcd20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-checked@4x.png b/src/quickcontrols/imagine/images/menuitem-indicator-checked@4x.png
new file mode 100644
index 0000000000..4bc6701d65
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-checked@4x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-disabled.png b/src/quickcontrols/imagine/images/menuitem-indicator-disabled.png
new file mode 100644
index 0000000000..0a499f8f2d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-disabled.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-disabled@2x.png b/src/quickcontrols/imagine/images/menuitem-indicator-disabled@2x.png
new file mode 100644
index 0000000000..db652c5ac9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-disabled@3x.png b/src/quickcontrols/imagine/images/menuitem-indicator-disabled@3x.png
new file mode 100644
index 0000000000..482f045d32
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-disabled@4x.png b/src/quickcontrols/imagine/images/menuitem-indicator-disabled@4x.png
new file mode 100644
index 0000000000..a386e27251
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-focused.png b/src/quickcontrols/imagine/images/menuitem-indicator-focused.png
new file mode 100644
index 0000000000..c5eb85276d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-focused.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-focused@2x.png b/src/quickcontrols/imagine/images/menuitem-indicator-focused@2x.png
new file mode 100644
index 0000000000..8496fb1a88
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-focused@3x.png b/src/quickcontrols/imagine/images/menuitem-indicator-focused@3x.png
new file mode 100644
index 0000000000..30849fd0f0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-focused@4x.png b/src/quickcontrols/imagine/images/menuitem-indicator-focused@4x.png
new file mode 100644
index 0000000000..55ce7c0c1b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-hovered.png b/src/quickcontrols/imagine/images/menuitem-indicator-hovered.png
new file mode 100644
index 0000000000..c5eb85276d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-hovered.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-hovered@2x.png b/src/quickcontrols/imagine/images/menuitem-indicator-hovered@2x.png
new file mode 100644
index 0000000000..8496fb1a88
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-hovered@3x.png b/src/quickcontrols/imagine/images/menuitem-indicator-hovered@3x.png
new file mode 100644
index 0000000000..30849fd0f0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-hovered@4x.png b/src/quickcontrols/imagine/images/menuitem-indicator-hovered@4x.png
new file mode 100644
index 0000000000..55ce7c0c1b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-pressed.png b/src/quickcontrols/imagine/images/menuitem-indicator-pressed.png
new file mode 100644
index 0000000000..a1baaf903e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-pressed.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-pressed@2x.png b/src/quickcontrols/imagine/images/menuitem-indicator-pressed@2x.png
new file mode 100644
index 0000000000..81a7c3647a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-pressed@3x.png b/src/quickcontrols/imagine/images/menuitem-indicator-pressed@3x.png
new file mode 100644
index 0000000000..9325de38cb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator-pressed@4x.png b/src/quickcontrols/imagine/images/menuitem-indicator-pressed@4x.png
new file mode 100644
index 0000000000..c93b8fb8a3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator.png b/src/quickcontrols/imagine/images/menuitem-indicator.png
new file mode 100644
index 0000000000..2b3e2323d7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator@2x.png b/src/quickcontrols/imagine/images/menuitem-indicator@2x.png
new file mode 100644
index 0000000000..ce8985dbb1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator@2x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator@3x.png b/src/quickcontrols/imagine/images/menuitem-indicator@3x.png
new file mode 100644
index 0000000000..2968731dd7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator@3x.png
diff --git a/src/quickcontrols/imagine/images/menuitem-indicator@4x.png b/src/quickcontrols/imagine/images/menuitem-indicator@4x.png
new file mode 100644
index 0000000000..ea8da28498
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuitem-indicator@4x.png
diff --git a/src/quickcontrols/imagine/images/menuseparator-separator.9.png b/src/quickcontrols/imagine/images/menuseparator-separator.9.png
new file mode 100644
index 0000000000..b8825b99ca
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuseparator-separator.9.png
diff --git a/src/quickcontrols/imagine/images/menuseparator-separator@2x.9.png b/src/quickcontrols/imagine/images/menuseparator-separator@2x.9.png
new file mode 100644
index 0000000000..3e5a023d76
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuseparator-separator@2x.9.png
diff --git a/src/quickcontrols/imagine/images/menuseparator-separator@3x.9.png b/src/quickcontrols/imagine/images/menuseparator-separator@3x.9.png
new file mode 100644
index 0000000000..abe775c7a3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuseparator-separator@3x.9.png
diff --git a/src/quickcontrols/imagine/images/menuseparator-separator@4x.9.png b/src/quickcontrols/imagine/images/menuseparator-separator@4x.9.png
new file mode 100644
index 0000000000..164c8e3e22
--- /dev/null
+++ b/src/quickcontrols/imagine/images/menuseparator-separator@4x.9.png
diff --git a/src/quickcontrols/imagine/images/page-background.png b/src/quickcontrols/imagine/images/page-background.png
new file mode 100644
index 0000000000..2d8d70f288
--- /dev/null
+++ b/src/quickcontrols/imagine/images/page-background.png
diff --git a/src/quickcontrols/imagine/images/page-background@2x.png b/src/quickcontrols/imagine/images/page-background@2x.png
new file mode 100644
index 0000000000..18fbaa4c63
--- /dev/null
+++ b/src/quickcontrols/imagine/images/page-background@2x.png
diff --git a/src/quickcontrols/imagine/images/page-background@3x.png b/src/quickcontrols/imagine/images/page-background@3x.png
new file mode 100644
index 0000000000..241232b1e0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/page-background@3x.png
diff --git a/src/quickcontrols/imagine/images/page-background@4x.png b/src/quickcontrols/imagine/images/page-background@4x.png
new file mode 100644
index 0000000000..8eb1b1ecc1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/page-background@4x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-current.png b/src/quickcontrols/imagine/images/pageindicator-delegate-current.png
new file mode 100644
index 0000000000..dc96d72326
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-current.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-current@2x.png b/src/quickcontrols/imagine/images/pageindicator-delegate-current@2x.png
new file mode 100644
index 0000000000..3e0d794fd5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-current@2x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-current@3x.png b/src/quickcontrols/imagine/images/pageindicator-delegate-current@3x.png
new file mode 100644
index 0000000000..397501a7db
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-current@3x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-current@4x.png b/src/quickcontrols/imagine/images/pageindicator-delegate-current@4x.png
new file mode 100644
index 0000000000..f741a8963b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-current@4x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-disabled-current.png b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled-current.png
new file mode 100644
index 0000000000..848d4351a3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled-current.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-disabled-current@2x.png b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled-current@2x.png
new file mode 100644
index 0000000000..65b5a9d42f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled-current@2x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-disabled-current@3x.png b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled-current@3x.png
new file mode 100644
index 0000000000..99e3b644aa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled-current@3x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-disabled-current@4x.png b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled-current@4x.png
new file mode 100644
index 0000000000..f1801fffef
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled-current@4x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-disabled.png b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled.png
new file mode 100644
index 0000000000..848d4351a3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-disabled@2x.png b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled@2x.png
new file mode 100644
index 0000000000..65b5a9d42f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-disabled@3x.png b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled@3x.png
new file mode 100644
index 0000000000..99e3b644aa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-disabled@4x.png b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled@4x.png
new file mode 100644
index 0000000000..f1801fffef
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-pressed.png b/src/quickcontrols/imagine/images/pageindicator-delegate-pressed.png
new file mode 100644
index 0000000000..dc96d72326
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-pressed.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-pressed@2x.png b/src/quickcontrols/imagine/images/pageindicator-delegate-pressed@2x.png
new file mode 100644
index 0000000000..3e0d794fd5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-pressed@3x.png b/src/quickcontrols/imagine/images/pageindicator-delegate-pressed@3x.png
new file mode 100644
index 0000000000..397501a7db
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate-pressed@4x.png b/src/quickcontrols/imagine/images/pageindicator-delegate-pressed@4x.png
new file mode 100644
index 0000000000..f741a8963b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate.png b/src/quickcontrols/imagine/images/pageindicator-delegate.png
new file mode 100644
index 0000000000..84d23cd1ae
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate@2x.png b/src/quickcontrols/imagine/images/pageindicator-delegate@2x.png
new file mode 100644
index 0000000000..0e706372c2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate@2x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate@3x.png b/src/quickcontrols/imagine/images/pageindicator-delegate@3x.png
new file mode 100644
index 0000000000..85af5a4e4b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate@3x.png
diff --git a/src/quickcontrols/imagine/images/pageindicator-delegate@4x.png b/src/quickcontrols/imagine/images/pageindicator-delegate@4x.png
new file mode 100644
index 0000000000..0aacbab1a9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pageindicator-delegate@4x.png
diff --git a/src/quickcontrols/imagine/images/pane-background.9.png b/src/quickcontrols/imagine/images/pane-background.9.png
new file mode 100644
index 0000000000..658f4863ea
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pane-background.9.png
diff --git a/src/quickcontrols/imagine/images/pane-background@2x.9.png b/src/quickcontrols/imagine/images/pane-background@2x.9.png
new file mode 100644
index 0000000000..a84ac04a1f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pane-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/pane-background@3x.9.png b/src/quickcontrols/imagine/images/pane-background@3x.9.png
new file mode 100644
index 0000000000..2b1c4da9de
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pane-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/pane-background@4x.9.png b/src/quickcontrols/imagine/images/pane-background@4x.9.png
new file mode 100644
index 0000000000..90295db412
--- /dev/null
+++ b/src/quickcontrols/imagine/images/pane-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/popup-background.9.png b/src/quickcontrols/imagine/images/popup-background.9.png
new file mode 100644
index 0000000000..c842b5ff58
--- /dev/null
+++ b/src/quickcontrols/imagine/images/popup-background.9.png
diff --git a/src/quickcontrols/imagine/images/popup-background@2x.9.png b/src/quickcontrols/imagine/images/popup-background@2x.9.png
new file mode 100644
index 0000000000..ca23df1f0d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/popup-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/popup-background@3x.9.png b/src/quickcontrols/imagine/images/popup-background@3x.9.png
new file mode 100644
index 0000000000..46cd406536
--- /dev/null
+++ b/src/quickcontrols/imagine/images/popup-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/popup-background@4x.9.png b/src/quickcontrols/imagine/images/popup-background@4x.9.png
new file mode 100644
index 0000000000..3da74119cc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/popup-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/popup-overlay-modal.png b/src/quickcontrols/imagine/images/popup-overlay-modal.png
new file mode 100644
index 0000000000..d4a43d1c70
--- /dev/null
+++ b/src/quickcontrols/imagine/images/popup-overlay-modal.png
diff --git a/src/quickcontrols/imagine/images/popup-overlay-modal@2x.png b/src/quickcontrols/imagine/images/popup-overlay-modal@2x.png
new file mode 100644
index 0000000000..c9a8f4124b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/popup-overlay-modal@2x.png
diff --git a/src/quickcontrols/imagine/images/popup-overlay-modal@3x.png b/src/quickcontrols/imagine/images/popup-overlay-modal@3x.png
new file mode 100644
index 0000000000..4a1084a919
--- /dev/null
+++ b/src/quickcontrols/imagine/images/popup-overlay-modal@3x.png
diff --git a/src/quickcontrols/imagine/images/popup-overlay-modal@4x.png b/src/quickcontrols/imagine/images/popup-overlay-modal@4x.png
new file mode 100644
index 0000000000..b92e600dae
--- /dev/null
+++ b/src/quickcontrols/imagine/images/popup-overlay-modal@4x.png
diff --git a/src/quickcontrols/imagine/images/popup-overlay.png b/src/quickcontrols/imagine/images/popup-overlay.png
new file mode 100644
index 0000000000..b7da23c00f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/popup-overlay.png
diff --git a/src/quickcontrols/imagine/images/popup-overlay@2x.png b/src/quickcontrols/imagine/images/popup-overlay@2x.png
new file mode 100644
index 0000000000..23828d5a1c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/popup-overlay@2x.png
diff --git a/src/quickcontrols/imagine/images/popup-overlay@3x.png b/src/quickcontrols/imagine/images/popup-overlay@3x.png
new file mode 100644
index 0000000000..d9d5382867
--- /dev/null
+++ b/src/quickcontrols/imagine/images/popup-overlay@3x.png
diff --git a/src/quickcontrols/imagine/images/popup-overlay@4x.png b/src/quickcontrols/imagine/images/popup-overlay@4x.png
new file mode 100644
index 0000000000..a76c1a3a71
--- /dev/null
+++ b/src/quickcontrols/imagine/images/popup-overlay@4x.png
diff --git a/src/quickcontrols/imagine/images/progressbar-animation.webp b/src/quickcontrols/imagine/images/progressbar-animation.webp
new file mode 100644
index 0000000000..51c35c8823
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-animation.webp
diff --git a/src/quickcontrols/imagine/images/progressbar-animation@2x.webp b/src/quickcontrols/imagine/images/progressbar-animation@2x.webp
new file mode 100644
index 0000000000..ee1206302a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-animation@2x.webp
diff --git a/src/quickcontrols/imagine/images/progressbar-animation@3x.webp b/src/quickcontrols/imagine/images/progressbar-animation@3x.webp
new file mode 100644
index 0000000000..c2f94a74a1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-animation@3x.webp
diff --git a/src/quickcontrols/imagine/images/progressbar-animation@4x.webp b/src/quickcontrols/imagine/images/progressbar-animation@4x.webp
new file mode 100644
index 0000000000..d49657e934
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-animation@4x.webp
diff --git a/src/quickcontrols/imagine/images/progressbar-background.9.png b/src/quickcontrols/imagine/images/progressbar-background.9.png
new file mode 100644
index 0000000000..e1760070b3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-background.9.png
diff --git a/src/quickcontrols/imagine/images/progressbar-background@2x.9.png b/src/quickcontrols/imagine/images/progressbar-background@2x.9.png
new file mode 100644
index 0000000000..e69922d57e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/progressbar-background@3x.9.png b/src/quickcontrols/imagine/images/progressbar-background@3x.9.png
new file mode 100644
index 0000000000..b3c43205c3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/progressbar-background@4x.9.png b/src/quickcontrols/imagine/images/progressbar-background@4x.9.png
new file mode 100644
index 0000000000..905bdc328f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/progressbar-mask.9.png b/src/quickcontrols/imagine/images/progressbar-mask.9.png
new file mode 100644
index 0000000000..35a47dc807
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-mask.9.png
diff --git a/src/quickcontrols/imagine/images/progressbar-mask@2x.9.png b/src/quickcontrols/imagine/images/progressbar-mask@2x.9.png
new file mode 100644
index 0000000000..23ed1a8cf1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-mask@2x.9.png
diff --git a/src/quickcontrols/imagine/images/progressbar-mask@3x.9.png b/src/quickcontrols/imagine/images/progressbar-mask@3x.9.png
new file mode 100644
index 0000000000..25bc843e3a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-mask@3x.9.png
diff --git a/src/quickcontrols/imagine/images/progressbar-mask@4x.9.png b/src/quickcontrols/imagine/images/progressbar-mask@4x.9.png
new file mode 100644
index 0000000000..645ff20179
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-mask@4x.9.png
diff --git a/src/quickcontrols/imagine/images/progressbar-progress.png b/src/quickcontrols/imagine/images/progressbar-progress.png
new file mode 100644
index 0000000000..bb31dc9b14
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-progress.png
diff --git a/src/quickcontrols/imagine/images/progressbar-progress@2x.png b/src/quickcontrols/imagine/images/progressbar-progress@2x.png
new file mode 100644
index 0000000000..6bb464c90b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-progress@2x.png
diff --git a/src/quickcontrols/imagine/images/progressbar-progress@3x.png b/src/quickcontrols/imagine/images/progressbar-progress@3x.png
new file mode 100644
index 0000000000..d514c72772
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-progress@3x.png
diff --git a/src/quickcontrols/imagine/images/progressbar-progress@4x.png b/src/quickcontrols/imagine/images/progressbar-progress@4x.png
new file mode 100644
index 0000000000..abc8fa6753
--- /dev/null
+++ b/src/quickcontrols/imagine/images/progressbar-progress@4x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked-focused.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-focused.png
new file mode 100644
index 0000000000..2f9e5e18e9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-focused.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked-focused@2x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-focused@2x.png
new file mode 100644
index 0000000000..47ec553423
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked-focused@3x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-focused@3x.png
new file mode 100644
index 0000000000..26cdebf817
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked-focused@4x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-focused@4x.png
new file mode 100644
index 0000000000..708e286ea7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked-hovered.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-hovered.png
new file mode 100644
index 0000000000..2f9e5e18e9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-hovered.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked-hovered@2x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-hovered@2x.png
new file mode 100644
index 0000000000..47ec553423
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked-hovered@3x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-hovered@3x.png
new file mode 100644
index 0000000000..26cdebf817
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked-hovered@4x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-hovered@4x.png
new file mode 100644
index 0000000000..708e286ea7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked-pressed.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-pressed.png
new file mode 100644
index 0000000000..1e5ebca46a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-pressed.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked-pressed@2x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-pressed@2x.png
new file mode 100644
index 0000000000..6eaae9bf3e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked-pressed@3x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-pressed@3x.png
new file mode 100644
index 0000000000..e54a1624d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked-pressed@4x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-pressed@4x.png
new file mode 100644
index 0000000000..7a7850bada
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked.png
new file mode 100644
index 0000000000..83c8562379
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked@2x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked@2x.png
new file mode 100644
index 0000000000..4bdeb4566e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked@2x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked@3x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked@3x.png
new file mode 100644
index 0000000000..2230a8ce09
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked@3x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-checked@4x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-checked@4x.png
new file mode 100644
index 0000000000..e3dce04e56
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-checked@4x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-disabled.png b/src/quickcontrols/imagine/images/radiobutton-indicator-disabled.png
new file mode 100644
index 0000000000..05b8bfcadb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-disabled.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-disabled@2x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-disabled@2x.png
new file mode 100644
index 0000000000..e26fa5de81
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-disabled@3x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-disabled@3x.png
new file mode 100644
index 0000000000..c47e8c7d13
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-disabled@4x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-disabled@4x.png
new file mode 100644
index 0000000000..bc66dde78d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-focused.png b/src/quickcontrols/imagine/images/radiobutton-indicator-focused.png
new file mode 100644
index 0000000000..3001638d37
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-focused.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-focused@2x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-focused@2x.png
new file mode 100644
index 0000000000..b98907149e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-focused@3x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-focused@3x.png
new file mode 100644
index 0000000000..b6221277d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-focused@4x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-focused@4x.png
new file mode 100644
index 0000000000..49ae2206ba
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-hovered.png b/src/quickcontrols/imagine/images/radiobutton-indicator-hovered.png
new file mode 100644
index 0000000000..3001638d37
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-hovered.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-hovered@2x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-hovered@2x.png
new file mode 100644
index 0000000000..b98907149e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-hovered@3x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-hovered@3x.png
new file mode 100644
index 0000000000..b6221277d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-hovered@4x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-hovered@4x.png
new file mode 100644
index 0000000000..49ae2206ba
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-pressed.png b/src/quickcontrols/imagine/images/radiobutton-indicator-pressed.png
new file mode 100644
index 0000000000..76c7b4ed7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-pressed.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-pressed@2x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-pressed@2x.png
new file mode 100644
index 0000000000..d5d4cac6d1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-pressed@3x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-pressed@3x.png
new file mode 100644
index 0000000000..ca2a1ed169
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator-pressed@4x.png b/src/quickcontrols/imagine/images/radiobutton-indicator-pressed@4x.png
new file mode 100644
index 0000000000..1cb753d72f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator.png b/src/quickcontrols/imagine/images/radiobutton-indicator.png
new file mode 100644
index 0000000000..c05d4bfc05
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator@2x.png b/src/quickcontrols/imagine/images/radiobutton-indicator@2x.png
new file mode 100644
index 0000000000..62744d2726
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator@2x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator@3x.png b/src/quickcontrols/imagine/images/radiobutton-indicator@3x.png
new file mode 100644
index 0000000000..fa5d241e70
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator@3x.png
diff --git a/src/quickcontrols/imagine/images/radiobutton-indicator@4x.png b/src/quickcontrols/imagine/images/radiobutton-indicator@4x.png
new file mode 100644
index 0000000000..7db85e9432
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiobutton-indicator@4x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-disabled.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-disabled.9.png
new file mode 100644
index 0000000000..23570729d6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-disabled@2x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-disabled@2x.9.png
new file mode 100644
index 0000000000..c7abb65c3f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-disabled@3x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-disabled@3x.9.png
new file mode 100644
index 0000000000..46b84d7da4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-disabled@4x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-disabled@4x.9.png
new file mode 100644
index 0000000000..f4dfd338f9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-focused.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-focused.9.png
new file mode 100644
index 0000000000..6ae574d55a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-focused.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-focused@2x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-focused@2x.9.png
new file mode 100644
index 0000000000..6b61562c14
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-focused@3x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-focused@3x.9.png
new file mode 100644
index 0000000000..e46c0bf1d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-focused@4x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-focused@4x.9.png
new file mode 100644
index 0000000000..010444e8e1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-highlighted.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-highlighted.9.png
new file mode 100644
index 0000000000..e79d8e1d01
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-highlighted.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-highlighted@2x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-highlighted@2x.9.png
new file mode 100644
index 0000000000..ea68d35fc4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-highlighted@2x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-highlighted@3x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-highlighted@3x.9.png
new file mode 100644
index 0000000000..6d61041599
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-highlighted@3x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-highlighted@4x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-highlighted@4x.9.png
new file mode 100644
index 0000000000..590cca96a1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-highlighted@4x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-hovered.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-hovered.9.png
new file mode 100644
index 0000000000..b8749743d0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-hovered@2x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-hovered@2x.9.png
new file mode 100644
index 0000000000..5a136a0ca9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-hovered@3x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-hovered@3x.9.png
new file mode 100644
index 0000000000..f47a366b7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-hovered@4x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-hovered@4x.9.png
new file mode 100644
index 0000000000..9ecb680f20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-pressed.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-pressed.9.png
new file mode 100644
index 0000000000..6ae574d55a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-pressed@2x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-pressed@2x.9.png
new file mode 100644
index 0000000000..6b61562c14
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-pressed@3x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-pressed@3x.9.png
new file mode 100644
index 0000000000..e46c0bf1d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background-pressed@4x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background-pressed@4x.9.png
new file mode 100644
index 0000000000..010444e8e1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background.9.png b/src/quickcontrols/imagine/images/radiodelegate-background.9.png
new file mode 100644
index 0000000000..b8749743d0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background@2x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background@2x.9.png
new file mode 100644
index 0000000000..5a136a0ca9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background@3x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background@3x.9.png
new file mode 100644
index 0000000000..f47a366b7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-background@4x.9.png b/src/quickcontrols/imagine/images/radiodelegate-background@4x.9.png
new file mode 100644
index 0000000000..9ecb680f20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-focused.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-focused.png
new file mode 100644
index 0000000000..2f9e5e18e9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-focused.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-focused@2x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-focused@2x.png
new file mode 100644
index 0000000000..47ec553423
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-focused@3x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-focused@3x.png
new file mode 100644
index 0000000000..26cdebf817
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-focused@4x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-focused@4x.png
new file mode 100644
index 0000000000..708e286ea7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-hovered.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-hovered.png
new file mode 100644
index 0000000000..2f9e5e18e9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-hovered.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-hovered@2x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-hovered@2x.png
new file mode 100644
index 0000000000..47ec553423
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-hovered@3x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-hovered@3x.png
new file mode 100644
index 0000000000..26cdebf817
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-hovered@4x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-hovered@4x.png
new file mode 100644
index 0000000000..708e286ea7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-pressed.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-pressed.png
new file mode 100644
index 0000000000..1e5ebca46a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-pressed.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-pressed@2x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-pressed@2x.png
new file mode 100644
index 0000000000..6eaae9bf3e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-pressed@3x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-pressed@3x.png
new file mode 100644
index 0000000000..e54a1624d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-pressed@4x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-pressed@4x.png
new file mode 100644
index 0000000000..7a7850bada
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked.png
new file mode 100644
index 0000000000..83c8562379
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked@2x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked@2x.png
new file mode 100644
index 0000000000..4bdeb4566e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked@2x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked@3x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked@3x.png
new file mode 100644
index 0000000000..2230a8ce09
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked@3x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-checked@4x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked@4x.png
new file mode 100644
index 0000000000..e3dce04e56
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-checked@4x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-disabled.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-disabled.png
new file mode 100644
index 0000000000..05b8bfcadb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-disabled.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-disabled@2x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-disabled@2x.png
new file mode 100644
index 0000000000..e26fa5de81
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-disabled@3x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-disabled@3x.png
new file mode 100644
index 0000000000..c47e8c7d13
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-disabled@4x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-disabled@4x.png
new file mode 100644
index 0000000000..bc66dde78d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-focused.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-focused.png
new file mode 100644
index 0000000000..3001638d37
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-focused.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-focused@2x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-focused@2x.png
new file mode 100644
index 0000000000..b98907149e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-focused@3x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-focused@3x.png
new file mode 100644
index 0000000000..b6221277d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-focused@4x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-focused@4x.png
new file mode 100644
index 0000000000..49ae2206ba
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-hovered.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-hovered.png
new file mode 100644
index 0000000000..3001638d37
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-hovered.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-hovered@2x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-hovered@2x.png
new file mode 100644
index 0000000000..b98907149e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-hovered@3x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-hovered@3x.png
new file mode 100644
index 0000000000..b6221277d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-hovered@4x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-hovered@4x.png
new file mode 100644
index 0000000000..49ae2206ba
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-pressed.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-pressed.png
new file mode 100644
index 0000000000..76c7b4ed7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-pressed.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-pressed@2x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-pressed@2x.png
new file mode 100644
index 0000000000..d5d4cac6d1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-pressed@3x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-pressed@3x.png
new file mode 100644
index 0000000000..ca2a1ed169
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator-pressed@4x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator-pressed@4x.png
new file mode 100644
index 0000000000..1cb753d72f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator.png b/src/quickcontrols/imagine/images/radiodelegate-indicator.png
new file mode 100644
index 0000000000..c05d4bfc05
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator@2x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator@2x.png
new file mode 100644
index 0000000000..62744d2726
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator@2x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator@3x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator@3x.png
new file mode 100644
index 0000000000..fa5d241e70
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator@3x.png
diff --git a/src/quickcontrols/imagine/images/radiodelegate-indicator@4x.png b/src/quickcontrols/imagine/images/radiodelegate-indicator@4x.png
new file mode 100644
index 0000000000..7db85e9432
--- /dev/null
+++ b/src/quickcontrols/imagine/images/radiodelegate-indicator@4x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-background-horizontal.9.png b/src/quickcontrols/imagine/images/rangeslider-background-horizontal.9.png
new file mode 100644
index 0000000000..c4e957ad1b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-background-horizontal.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-background-horizontal@2x.9.png b/src/quickcontrols/imagine/images/rangeslider-background-horizontal@2x.9.png
new file mode 100644
index 0000000000..6d8391130b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-background-horizontal@2x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-background-horizontal@3x.9.png b/src/quickcontrols/imagine/images/rangeslider-background-horizontal@3x.9.png
new file mode 100644
index 0000000000..6b2e634c97
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-background-horizontal@3x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-background-horizontal@4x.9.png b/src/quickcontrols/imagine/images/rangeslider-background-horizontal@4x.9.png
new file mode 100644
index 0000000000..969c791a38
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-background-horizontal@4x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-background-vertical.9.png b/src/quickcontrols/imagine/images/rangeslider-background-vertical.9.png
new file mode 100644
index 0000000000..f76e0b21f2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-background-vertical.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-background-vertical@2x.9.png b/src/quickcontrols/imagine/images/rangeslider-background-vertical@2x.9.png
new file mode 100644
index 0000000000..fecd0ab2ba
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-background-vertical@2x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-background-vertical@3x.9.png b/src/quickcontrols/imagine/images/rangeslider-background-vertical@3x.9.png
new file mode 100644
index 0000000000..77a9c830a5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-background-vertical@3x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-background-vertical@4x.9.png b/src/quickcontrols/imagine/images/rangeslider-background-vertical@4x.9.png
new file mode 100644
index 0000000000..f1613684c0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-background-vertical@4x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-disabled.png b/src/quickcontrols/imagine/images/rangeslider-handle-disabled.png
new file mode 100644
index 0000000000..4934fb77c5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-disabled.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-disabled@2x.png b/src/quickcontrols/imagine/images/rangeslider-handle-disabled@2x.png
new file mode 100644
index 0000000000..451b719e60
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-disabled@3x.png b/src/quickcontrols/imagine/images/rangeslider-handle-disabled@3x.png
new file mode 100644
index 0000000000..1daffca729
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-disabled@4x.png b/src/quickcontrols/imagine/images/rangeslider-handle-disabled@4x.png
new file mode 100644
index 0000000000..6483070710
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-focused-hovered.png b/src/quickcontrols/imagine/images/rangeslider-handle-focused-hovered.png
new file mode 100644
index 0000000000..c2958f1b3d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-focused-hovered.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-focused-hovered@2x.png b/src/quickcontrols/imagine/images/rangeslider-handle-focused-hovered@2x.png
new file mode 100644
index 0000000000..12a4d1f83f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-focused-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-focused-hovered@3x.png b/src/quickcontrols/imagine/images/rangeslider-handle-focused-hovered@3x.png
new file mode 100644
index 0000000000..1696ac9507
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-focused-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-focused-hovered@4x.png b/src/quickcontrols/imagine/images/rangeslider-handle-focused-hovered@4x.png
new file mode 100644
index 0000000000..e1d1305623
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-focused-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-focused-pressed.png b/src/quickcontrols/imagine/images/rangeslider-handle-focused-pressed.png
new file mode 100644
index 0000000000..c2958f1b3d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-focused-pressed.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-focused-pressed@2x.png b/src/quickcontrols/imagine/images/rangeslider-handle-focused-pressed@2x.png
new file mode 100644
index 0000000000..12a4d1f83f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-focused-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-focused-pressed@3x.png b/src/quickcontrols/imagine/images/rangeslider-handle-focused-pressed@3x.png
new file mode 100644
index 0000000000..1696ac9507
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-focused-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-focused-pressed@4x.png b/src/quickcontrols/imagine/images/rangeslider-handle-focused-pressed@4x.png
new file mode 100644
index 0000000000..e1d1305623
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-focused-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-focused.png b/src/quickcontrols/imagine/images/rangeslider-handle-focused.png
new file mode 100644
index 0000000000..bdf8239a46
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-focused.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-focused@2x.png b/src/quickcontrols/imagine/images/rangeslider-handle-focused@2x.png
new file mode 100644
index 0000000000..9f887c5ea1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-focused@3x.png b/src/quickcontrols/imagine/images/rangeslider-handle-focused@3x.png
new file mode 100644
index 0000000000..8042d4c2a2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-focused@4x.png b/src/quickcontrols/imagine/images/rangeslider-handle-focused@4x.png
new file mode 100644
index 0000000000..e7e68c47e3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-hovered.png b/src/quickcontrols/imagine/images/rangeslider-handle-hovered.png
new file mode 100644
index 0000000000..4934fb77c5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-hovered.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-hovered@2x.png b/src/quickcontrols/imagine/images/rangeslider-handle-hovered@2x.png
new file mode 100644
index 0000000000..451b719e60
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-hovered@3x.png b/src/quickcontrols/imagine/images/rangeslider-handle-hovered@3x.png
new file mode 100644
index 0000000000..1daffca729
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-hovered@4x.png b/src/quickcontrols/imagine/images/rangeslider-handle-hovered@4x.png
new file mode 100644
index 0000000000..6483070710
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-pressed.png b/src/quickcontrols/imagine/images/rangeslider-handle-pressed.png
new file mode 100644
index 0000000000..4934fb77c5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-pressed.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-pressed@2x.png b/src/quickcontrols/imagine/images/rangeslider-handle-pressed@2x.png
new file mode 100644
index 0000000000..451b719e60
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-pressed@3x.png b/src/quickcontrols/imagine/images/rangeslider-handle-pressed@3x.png
new file mode 100644
index 0000000000..1daffca729
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle-pressed@4x.png b/src/quickcontrols/imagine/images/rangeslider-handle-pressed@4x.png
new file mode 100644
index 0000000000..6483070710
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle.png b/src/quickcontrols/imagine/images/rangeslider-handle.png
new file mode 100644
index 0000000000..fd72dedfb0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle@2x.png b/src/quickcontrols/imagine/images/rangeslider-handle@2x.png
new file mode 100644
index 0000000000..57eed9f8ae
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle@2x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle@3x.png b/src/quickcontrols/imagine/images/rangeslider-handle@3x.png
new file mode 100644
index 0000000000..e217a6444f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle@3x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-handle@4x.png b/src/quickcontrols/imagine/images/rangeslider-handle@4x.png
new file mode 100644
index 0000000000..c212b59f55
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-handle@4x.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-horizontal-disabled.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal-disabled.9.png
new file mode 100644
index 0000000000..7f7e6b935a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-horizontal-disabled@2x.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal-disabled@2x.9.png
new file mode 100644
index 0000000000..cbf6fb6352
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-horizontal-disabled@3x.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal-disabled@3x.9.png
new file mode 100644
index 0000000000..643776b8c9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-horizontal-disabled@4x.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal-disabled@4x.9.png
new file mode 100644
index 0000000000..d64acb904d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-horizontal.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal.9.png
new file mode 100644
index 0000000000..43192f5416
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-horizontal@2x.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal@2x.9.png
new file mode 100644
index 0000000000..ebbbbf82f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal@2x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-horizontal@3x.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal@3x.9.png
new file mode 100644
index 0000000000..0a029b53e4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal@3x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-horizontal@4x.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal@4x.9.png
new file mode 100644
index 0000000000..a13541691a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-horizontal@4x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-vertical-disabled.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-vertical-disabled.9.png
new file mode 100644
index 0000000000..a4edafc971
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-vertical-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-vertical-disabled@2x.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-vertical-disabled@2x.9.png
new file mode 100644
index 0000000000..8c38226e61
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-vertical-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-vertical-disabled@3x.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-vertical-disabled@3x.9.png
new file mode 100644
index 0000000000..a939bffde8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-vertical-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-vertical-disabled@4x.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-vertical-disabled@4x.9.png
new file mode 100644
index 0000000000..9f653770e2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-vertical-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-vertical.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-vertical.9.png
new file mode 100644
index 0000000000..d3e877fc34
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-vertical.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-vertical@2x.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-vertical@2x.9.png
new file mode 100644
index 0000000000..7790050e64
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-vertical@2x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-vertical@3x.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-vertical@3x.9.png
new file mode 100644
index 0000000000..039d198751
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-vertical@3x.9.png
diff --git a/src/quickcontrols/imagine/images/rangeslider-progress-vertical@4x.9.png b/src/quickcontrols/imagine/images/rangeslider-progress-vertical@4x.9.png
new file mode 100644
index 0000000000..b3051d1f46
--- /dev/null
+++ b/src/quickcontrols/imagine/images/rangeslider-progress-vertical@4x.9.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-checked-focused.png b/src/quickcontrols/imagine/images/roundbutton-background-checked-focused.png
new file mode 100644
index 0000000000..032a7caa65
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-checked-focused.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-checked-focused@2x.png b/src/quickcontrols/imagine/images/roundbutton-background-checked-focused@2x.png
new file mode 100644
index 0000000000..a2944b6ac8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-checked-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-checked-focused@3x.png b/src/quickcontrols/imagine/images/roundbutton-background-checked-focused@3x.png
new file mode 100644
index 0000000000..ffd4d210c4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-checked-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-checked-focused@4x.png b/src/quickcontrols/imagine/images/roundbutton-background-checked-focused@4x.png
new file mode 100644
index 0000000000..35a41fc502
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-checked-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-checked-hovered.png b/src/quickcontrols/imagine/images/roundbutton-background-checked-hovered.png
new file mode 100644
index 0000000000..032a7caa65
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-checked-hovered.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-checked-hovered@2x.png b/src/quickcontrols/imagine/images/roundbutton-background-checked-hovered@2x.png
new file mode 100644
index 0000000000..a2944b6ac8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-checked-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-checked-hovered@3x.png b/src/quickcontrols/imagine/images/roundbutton-background-checked-hovered@3x.png
new file mode 100644
index 0000000000..ffd4d210c4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-checked-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-checked-hovered@4x.png b/src/quickcontrols/imagine/images/roundbutton-background-checked-hovered@4x.png
new file mode 100644
index 0000000000..35a41fc502
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-checked-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-checked.png b/src/quickcontrols/imagine/images/roundbutton-background-checked.png
new file mode 100644
index 0000000000..d57d3894fa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-checked.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-checked@2x.png b/src/quickcontrols/imagine/images/roundbutton-background-checked@2x.png
new file mode 100644
index 0000000000..7c37452818
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-checked@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-checked@3x.png b/src/quickcontrols/imagine/images/roundbutton-background-checked@3x.png
new file mode 100644
index 0000000000..b0e0b9bebd
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-checked@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-checked@4x.png b/src/quickcontrols/imagine/images/roundbutton-background-checked@4x.png
new file mode 100644
index 0000000000..748864efb3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-checked@4x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-disabled-checked.png b/src/quickcontrols/imagine/images/roundbutton-background-disabled-checked.png
new file mode 100644
index 0000000000..e26fa5de81
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-disabled-checked.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-disabled-checked@2x.png b/src/quickcontrols/imagine/images/roundbutton-background-disabled-checked@2x.png
new file mode 100644
index 0000000000..bc66dde78d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-disabled-checked@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-disabled-checked@3x.png b/src/quickcontrols/imagine/images/roundbutton-background-disabled-checked@3x.png
new file mode 100644
index 0000000000..a0c5f9ad4f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-disabled-checked@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-disabled-checked@4x.png b/src/quickcontrols/imagine/images/roundbutton-background-disabled-checked@4x.png
new file mode 100644
index 0000000000..190210c8f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-disabled-checked@4x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-disabled.png b/src/quickcontrols/imagine/images/roundbutton-background-disabled.png
new file mode 100644
index 0000000000..e26fa5de81
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-disabled.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-disabled@2x.png b/src/quickcontrols/imagine/images/roundbutton-background-disabled@2x.png
new file mode 100644
index 0000000000..bc66dde78d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-disabled@3x.png b/src/quickcontrols/imagine/images/roundbutton-background-disabled@3x.png
new file mode 100644
index 0000000000..a0c5f9ad4f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-disabled@4x.png b/src/quickcontrols/imagine/images/roundbutton-background-disabled@4x.png
new file mode 100644
index 0000000000..190210c8f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-focused.png b/src/quickcontrols/imagine/images/roundbutton-background-focused.png
new file mode 100644
index 0000000000..832955c4e1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-focused.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-focused@2x.png b/src/quickcontrols/imagine/images/roundbutton-background-focused@2x.png
new file mode 100644
index 0000000000..bb1ed2ac4b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-focused@3x.png b/src/quickcontrols/imagine/images/roundbutton-background-focused@3x.png
new file mode 100644
index 0000000000..cbf0291321
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-focused@4x.png b/src/quickcontrols/imagine/images/roundbutton-background-focused@4x.png
new file mode 100644
index 0000000000..1c765dee15
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted-focused.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-focused.png
new file mode 100644
index 0000000000..269a9d52d5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-focused.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted-focused@2x.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-focused@2x.png
new file mode 100644
index 0000000000..bd79565126
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted-focused@3x.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-focused@3x.png
new file mode 100644
index 0000000000..5ed0f662b4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted-focused@4x.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-focused@4x.png
new file mode 100644
index 0000000000..5bbb8e7afb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted-hovered.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-hovered.png
new file mode 100644
index 0000000000..269a9d52d5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-hovered.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted-hovered@2x.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-hovered@2x.png
new file mode 100644
index 0000000000..bd79565126
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted-hovered@3x.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-hovered@3x.png
new file mode 100644
index 0000000000..5ed0f662b4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted-hovered@4x.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-hovered@4x.png
new file mode 100644
index 0000000000..5bbb8e7afb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted-pressed.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-pressed.png
new file mode 100644
index 0000000000..a0fa8df033
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-pressed.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted-pressed@2x.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-pressed@2x.png
new file mode 100644
index 0000000000..3082a1d9c6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted-pressed@3x.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-pressed@3x.png
new file mode 100644
index 0000000000..d32e8af040
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted-pressed@4x.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-pressed@4x.png
new file mode 100644
index 0000000000..f4916e0bca
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted.png
new file mode 100644
index 0000000000..f90e29f9cf
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted@2x.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted@2x.png
new file mode 100644
index 0000000000..7dce11b40d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted@3x.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted@3x.png
new file mode 100644
index 0000000000..436abbddce
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-highlighted@4x.png b/src/quickcontrols/imagine/images/roundbutton-background-highlighted@4x.png
new file mode 100644
index 0000000000..e728d6fa1c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-highlighted@4x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-hovered.png b/src/quickcontrols/imagine/images/roundbutton-background-hovered.png
new file mode 100644
index 0000000000..832955c4e1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-hovered.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-hovered@2x.png b/src/quickcontrols/imagine/images/roundbutton-background-hovered@2x.png
new file mode 100644
index 0000000000..bb1ed2ac4b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-hovered@3x.png b/src/quickcontrols/imagine/images/roundbutton-background-hovered@3x.png
new file mode 100644
index 0000000000..cbf0291321
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-hovered@4x.png b/src/quickcontrols/imagine/images/roundbutton-background-hovered@4x.png
new file mode 100644
index 0000000000..1c765dee15
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-pressed.png b/src/quickcontrols/imagine/images/roundbutton-background-pressed.png
new file mode 100644
index 0000000000..d57d3894fa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-pressed.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-pressed@2x.png b/src/quickcontrols/imagine/images/roundbutton-background-pressed@2x.png
new file mode 100644
index 0000000000..7c37452818
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-pressed@3x.png b/src/quickcontrols/imagine/images/roundbutton-background-pressed@3x.png
new file mode 100644
index 0000000000..b0e0b9bebd
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background-pressed@4x.png b/src/quickcontrols/imagine/images/roundbutton-background-pressed@4x.png
new file mode 100644
index 0000000000..748864efb3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background.png b/src/quickcontrols/imagine/images/roundbutton-background.png
new file mode 100644
index 0000000000..d5d4cac6d1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background@2x.png b/src/quickcontrols/imagine/images/roundbutton-background@2x.png
new file mode 100644
index 0000000000..1cb753d72f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background@2x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background@3x.png b/src/quickcontrols/imagine/images/roundbutton-background@3x.png
new file mode 100644
index 0000000000..6cc304bf42
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background@3x.png
diff --git a/src/quickcontrols/imagine/images/roundbutton-background@4x.png b/src/quickcontrols/imagine/images/roundbutton-background@4x.png
new file mode 100644
index 0000000000..56ea82f6de
--- /dev/null
+++ b/src/quickcontrols/imagine/images/roundbutton-background@4x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-disabled.png b/src/quickcontrols/imagine/images/scrollbar-handle-disabled.png
new file mode 100644
index 0000000000..b0b95bed99
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-disabled.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-disabled@2x.png b/src/quickcontrols/imagine/images/scrollbar-handle-disabled@2x.png
new file mode 100644
index 0000000000..8ab854b0a3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-disabled@3x.png b/src/quickcontrols/imagine/images/scrollbar-handle-disabled@3x.png
new file mode 100644
index 0000000000..f3c97231f5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-disabled@4x.png b/src/quickcontrols/imagine/images/scrollbar-handle-disabled@4x.png
new file mode 100644
index 0000000000..325469b8d8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive-disabled.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-disabled.png
new file mode 100644
index 0000000000..236002fff6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-disabled.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive-disabled@2x.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-disabled@2x.png
new file mode 100644
index 0000000000..abc3d2c05c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive-disabled@3x.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-disabled@3x.png
new file mode 100644
index 0000000000..e215cf5b7a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive-disabled@4x.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-disabled@4x.png
new file mode 100644
index 0000000000..c6ec0520bd
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive-hovered.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-hovered.png
new file mode 100644
index 0000000000..19b48f1d49
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-hovered.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive-hovered@2x.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-hovered@2x.png
new file mode 100644
index 0000000000..8f5abb8494
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive-hovered@3x.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-hovered@3x.png
new file mode 100644
index 0000000000..73963d754c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive-hovered@4x.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-hovered@4x.png
new file mode 100644
index 0000000000..04d6131ec9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive-pressed.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-pressed.png
new file mode 100644
index 0000000000..f48f514df2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-pressed.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive-pressed@2x.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-pressed@2x.png
new file mode 100644
index 0000000000..e31820add9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive-pressed@3x.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-pressed@3x.png
new file mode 100644
index 0000000000..278ba90007
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive-pressed@4x.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-pressed@4x.png
new file mode 100644
index 0000000000..01e4e5c85b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive.png
new file mode 100644
index 0000000000..fd7832a6aa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive@2x.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive@2x.png
new file mode 100644
index 0000000000..bd63a1b1e8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive@2x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive@3x.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive@3x.png
new file mode 100644
index 0000000000..3145295446
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive@3x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle-interactive@4x.png b/src/quickcontrols/imagine/images/scrollbar-handle-interactive@4x.png
new file mode 100644
index 0000000000..6db4d81da9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle-interactive@4x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle.png b/src/quickcontrols/imagine/images/scrollbar-handle.png
new file mode 100644
index 0000000000..255f6c4d60
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle@2x.png b/src/quickcontrols/imagine/images/scrollbar-handle@2x.png
new file mode 100644
index 0000000000..2b69cef6a3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle@2x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle@3x.png b/src/quickcontrols/imagine/images/scrollbar-handle@3x.png
new file mode 100644
index 0000000000..6fdfa487d0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle@3x.png
diff --git a/src/quickcontrols/imagine/images/scrollbar-handle@4x.png b/src/quickcontrols/imagine/images/scrollbar-handle@4x.png
new file mode 100644
index 0000000000..cc3205f125
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollbar-handle@4x.png
diff --git a/src/quickcontrols/imagine/images/scrollindicator-handle.png b/src/quickcontrols/imagine/images/scrollindicator-handle.png
new file mode 100644
index 0000000000..255f6c4d60
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollindicator-handle.png
diff --git a/src/quickcontrols/imagine/images/scrollindicator-handle@2x.png b/src/quickcontrols/imagine/images/scrollindicator-handle@2x.png
new file mode 100644
index 0000000000..2b69cef6a3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollindicator-handle@2x.png
diff --git a/src/quickcontrols/imagine/images/scrollindicator-handle@3x.png b/src/quickcontrols/imagine/images/scrollindicator-handle@3x.png
new file mode 100644
index 0000000000..6fdfa487d0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollindicator-handle@3x.png
diff --git a/src/quickcontrols/imagine/images/scrollindicator-handle@4x.png b/src/quickcontrols/imagine/images/scrollindicator-handle@4x.png
new file mode 100644
index 0000000000..cc3205f125
--- /dev/null
+++ b/src/quickcontrols/imagine/images/scrollindicator-handle@4x.png
diff --git a/src/quickcontrols/imagine/images/slider-background-horizontal.9.png b/src/quickcontrols/imagine/images/slider-background-horizontal.9.png
new file mode 100644
index 0000000000..c4e957ad1b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-background-horizontal.9.png
diff --git a/src/quickcontrols/imagine/images/slider-background-horizontal@2x.9.png b/src/quickcontrols/imagine/images/slider-background-horizontal@2x.9.png
new file mode 100644
index 0000000000..6d8391130b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-background-horizontal@2x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-background-horizontal@3x.9.png b/src/quickcontrols/imagine/images/slider-background-horizontal@3x.9.png
new file mode 100644
index 0000000000..6b2e634c97
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-background-horizontal@3x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-background-horizontal@4x.9.png b/src/quickcontrols/imagine/images/slider-background-horizontal@4x.9.png
new file mode 100644
index 0000000000..969c791a38
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-background-horizontal@4x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-background-vertical.9.png b/src/quickcontrols/imagine/images/slider-background-vertical.9.png
new file mode 100644
index 0000000000..f76e0b21f2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-background-vertical.9.png
diff --git a/src/quickcontrols/imagine/images/slider-background-vertical@2x.9.png b/src/quickcontrols/imagine/images/slider-background-vertical@2x.9.png
new file mode 100644
index 0000000000..fecd0ab2ba
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-background-vertical@2x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-background-vertical@3x.9.png b/src/quickcontrols/imagine/images/slider-background-vertical@3x.9.png
new file mode 100644
index 0000000000..77a9c830a5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-background-vertical@3x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-background-vertical@4x.9.png b/src/quickcontrols/imagine/images/slider-background-vertical@4x.9.png
new file mode 100644
index 0000000000..f1613684c0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-background-vertical@4x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-disabled.png b/src/quickcontrols/imagine/images/slider-handle-disabled.png
new file mode 100644
index 0000000000..4934fb77c5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-disabled.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-disabled@2x.png b/src/quickcontrols/imagine/images/slider-handle-disabled@2x.png
new file mode 100644
index 0000000000..451b719e60
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-disabled@3x.png b/src/quickcontrols/imagine/images/slider-handle-disabled@3x.png
new file mode 100644
index 0000000000..1daffca729
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-disabled@4x.png b/src/quickcontrols/imagine/images/slider-handle-disabled@4x.png
new file mode 100644
index 0000000000..6483070710
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-focused-hovered.png b/src/quickcontrols/imagine/images/slider-handle-focused-hovered.png
new file mode 100644
index 0000000000..c2958f1b3d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-focused-hovered.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-focused-hovered@2x.png b/src/quickcontrols/imagine/images/slider-handle-focused-hovered@2x.png
new file mode 100644
index 0000000000..12a4d1f83f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-focused-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-focused-hovered@3x.png b/src/quickcontrols/imagine/images/slider-handle-focused-hovered@3x.png
new file mode 100644
index 0000000000..1696ac9507
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-focused-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-focused-hovered@4x.png b/src/quickcontrols/imagine/images/slider-handle-focused-hovered@4x.png
new file mode 100644
index 0000000000..e1d1305623
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-focused-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-focused-pressed.png b/src/quickcontrols/imagine/images/slider-handle-focused-pressed.png
new file mode 100644
index 0000000000..c2958f1b3d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-focused-pressed.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-focused-pressed@2x.png b/src/quickcontrols/imagine/images/slider-handle-focused-pressed@2x.png
new file mode 100644
index 0000000000..12a4d1f83f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-focused-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-focused-pressed@3x.png b/src/quickcontrols/imagine/images/slider-handle-focused-pressed@3x.png
new file mode 100644
index 0000000000..1696ac9507
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-focused-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-focused-pressed@4x.png b/src/quickcontrols/imagine/images/slider-handle-focused-pressed@4x.png
new file mode 100644
index 0000000000..e1d1305623
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-focused-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-focused.png b/src/quickcontrols/imagine/images/slider-handle-focused.png
new file mode 100644
index 0000000000..bdf8239a46
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-focused.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-focused@2x.png b/src/quickcontrols/imagine/images/slider-handle-focused@2x.png
new file mode 100644
index 0000000000..9f887c5ea1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-focused@3x.png b/src/quickcontrols/imagine/images/slider-handle-focused@3x.png
new file mode 100644
index 0000000000..8042d4c2a2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-focused@4x.png b/src/quickcontrols/imagine/images/slider-handle-focused@4x.png
new file mode 100644
index 0000000000..e7e68c47e3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-hovered.png b/src/quickcontrols/imagine/images/slider-handle-hovered.png
new file mode 100644
index 0000000000..4934fb77c5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-hovered.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-hovered@2x.png b/src/quickcontrols/imagine/images/slider-handle-hovered@2x.png
new file mode 100644
index 0000000000..451b719e60
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-hovered@3x.png b/src/quickcontrols/imagine/images/slider-handle-hovered@3x.png
new file mode 100644
index 0000000000..1daffca729
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-hovered@4x.png b/src/quickcontrols/imagine/images/slider-handle-hovered@4x.png
new file mode 100644
index 0000000000..6483070710
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-pressed.png b/src/quickcontrols/imagine/images/slider-handle-pressed.png
new file mode 100644
index 0000000000..4934fb77c5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-pressed.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-pressed@2x.png b/src/quickcontrols/imagine/images/slider-handle-pressed@2x.png
new file mode 100644
index 0000000000..451b719e60
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-pressed@3x.png b/src/quickcontrols/imagine/images/slider-handle-pressed@3x.png
new file mode 100644
index 0000000000..1daffca729
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle-pressed@4x.png b/src/quickcontrols/imagine/images/slider-handle-pressed@4x.png
new file mode 100644
index 0000000000..6483070710
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle.png b/src/quickcontrols/imagine/images/slider-handle.png
new file mode 100644
index 0000000000..fd72dedfb0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle.png
diff --git a/src/quickcontrols/imagine/images/slider-handle@2x.png b/src/quickcontrols/imagine/images/slider-handle@2x.png
new file mode 100644
index 0000000000..57eed9f8ae
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle@2x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle@3x.png b/src/quickcontrols/imagine/images/slider-handle@3x.png
new file mode 100644
index 0000000000..e217a6444f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle@3x.png
diff --git a/src/quickcontrols/imagine/images/slider-handle@4x.png b/src/quickcontrols/imagine/images/slider-handle@4x.png
new file mode 100644
index 0000000000..c212b59f55
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-handle@4x.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-horizontal-disabled.9.png b/src/quickcontrols/imagine/images/slider-progress-horizontal-disabled.9.png
new file mode 100644
index 0000000000..7f7e6b935a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-horizontal-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-horizontal-disabled@2x.9.png b/src/quickcontrols/imagine/images/slider-progress-horizontal-disabled@2x.9.png
new file mode 100644
index 0000000000..cbf6fb6352
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-horizontal-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-horizontal-disabled@3x.9.png b/src/quickcontrols/imagine/images/slider-progress-horizontal-disabled@3x.9.png
new file mode 100644
index 0000000000..643776b8c9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-horizontal-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-horizontal-disabled@4x.9.png b/src/quickcontrols/imagine/images/slider-progress-horizontal-disabled@4x.9.png
new file mode 100644
index 0000000000..d64acb904d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-horizontal-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-horizontal.9.png b/src/quickcontrols/imagine/images/slider-progress-horizontal.9.png
new file mode 100644
index 0000000000..43192f5416
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-horizontal.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-horizontal@2x.9.png b/src/quickcontrols/imagine/images/slider-progress-horizontal@2x.9.png
new file mode 100644
index 0000000000..ebbbbf82f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-horizontal@2x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-horizontal@3x.9.png b/src/quickcontrols/imagine/images/slider-progress-horizontal@3x.9.png
new file mode 100644
index 0000000000..0a029b53e4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-horizontal@3x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-horizontal@4x.9.png b/src/quickcontrols/imagine/images/slider-progress-horizontal@4x.9.png
new file mode 100644
index 0000000000..a13541691a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-horizontal@4x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-vertical-disabled.9.png b/src/quickcontrols/imagine/images/slider-progress-vertical-disabled.9.png
new file mode 100644
index 0000000000..a4edafc971
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-vertical-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-vertical-disabled@2x.9.png b/src/quickcontrols/imagine/images/slider-progress-vertical-disabled@2x.9.png
new file mode 100644
index 0000000000..8c38226e61
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-vertical-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-vertical-disabled@3x.9.png b/src/quickcontrols/imagine/images/slider-progress-vertical-disabled@3x.9.png
new file mode 100644
index 0000000000..a939bffde8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-vertical-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-vertical-disabled@4x.9.png b/src/quickcontrols/imagine/images/slider-progress-vertical-disabled@4x.9.png
new file mode 100644
index 0000000000..9f653770e2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-vertical-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-vertical.9.png b/src/quickcontrols/imagine/images/slider-progress-vertical.9.png
new file mode 100644
index 0000000000..d3e877fc34
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-vertical.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-vertical@2x.9.png b/src/quickcontrols/imagine/images/slider-progress-vertical@2x.9.png
new file mode 100644
index 0000000000..7790050e64
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-vertical@2x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-vertical@3x.9.png b/src/quickcontrols/imagine/images/slider-progress-vertical@3x.9.png
new file mode 100644
index 0000000000..039d198751
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-vertical@3x.9.png
diff --git a/src/quickcontrols/imagine/images/slider-progress-vertical@4x.9.png b/src/quickcontrols/imagine/images/slider-progress-vertical@4x.9.png
new file mode 100644
index 0000000000..b3051d1f46
--- /dev/null
+++ b/src/quickcontrols/imagine/images/slider-progress-vertical@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background-disabled.9.png b/src/quickcontrols/imagine/images/spinbox-background-disabled.9.png
new file mode 100644
index 0000000000..7baaeec525
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background-disabled@2x.9.png b/src/quickcontrols/imagine/images/spinbox-background-disabled@2x.9.png
new file mode 100644
index 0000000000..e0d5907034
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background-disabled@3x.9.png b/src/quickcontrols/imagine/images/spinbox-background-disabled@3x.9.png
new file mode 100644
index 0000000000..24b3054ded
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background-disabled@4x.9.png b/src/quickcontrols/imagine/images/spinbox-background-disabled@4x.9.png
new file mode 100644
index 0000000000..8ac4740a7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background-editable.9.png b/src/quickcontrols/imagine/images/spinbox-background-editable.9.png
new file mode 100644
index 0000000000..995c827659
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background-editable.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background-editable@2x.9.png b/src/quickcontrols/imagine/images/spinbox-background-editable@2x.9.png
new file mode 100644
index 0000000000..42c9dd6ba2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background-editable@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background-editable@3x.9.png b/src/quickcontrols/imagine/images/spinbox-background-editable@3x.9.png
new file mode 100644
index 0000000000..4ee974a144
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background-editable@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background-editable@4x.9.png b/src/quickcontrols/imagine/images/spinbox-background-editable@4x.9.png
new file mode 100644
index 0000000000..59b0091539
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background-editable@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background-focused.9.png b/src/quickcontrols/imagine/images/spinbox-background-focused.9.png
new file mode 100644
index 0000000000..27751eacc8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background-focused.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background-focused@2x.9.png b/src/quickcontrols/imagine/images/spinbox-background-focused@2x.9.png
new file mode 100644
index 0000000000..1692578f6c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background-focused@3x.9.png b/src/quickcontrols/imagine/images/spinbox-background-focused@3x.9.png
new file mode 100644
index 0000000000..4c44c1bbbc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background-focused@4x.9.png b/src/quickcontrols/imagine/images/spinbox-background-focused@4x.9.png
new file mode 100644
index 0000000000..f8632bf2f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background.9.png b/src/quickcontrols/imagine/images/spinbox-background.9.png
new file mode 100644
index 0000000000..ae8b043beb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background@2x.9.png b/src/quickcontrols/imagine/images/spinbox-background@2x.9.png
new file mode 100644
index 0000000000..eaae097e2f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background@3x.9.png b/src/quickcontrols/imagine/images/spinbox-background@3x.9.png
new file mode 100644
index 0000000000..d8add8117c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-background@4x.9.png b/src/quickcontrols/imagine/images/spinbox-background@4x.9.png
new file mode 100644
index 0000000000..d954febfc2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-disabled.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-disabled.9.png
new file mode 100644
index 0000000000..b3953398d8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-disabled@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-disabled@2x.9.png
new file mode 100644
index 0000000000..18e2ca65d4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-disabled@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-disabled@3x.9.png
new file mode 100644
index 0000000000..ed6674b47b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-disabled@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-disabled@4x.9.png
new file mode 100644
index 0000000000..0da2cf93ff
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-focused.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-focused.9.png
new file mode 100644
index 0000000000..46220a8ebe
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-focused.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-focused@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-focused@2x.9.png
new file mode 100644
index 0000000000..b8ebb7b7eb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-focused@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-focused@3x.9.png
new file mode 100644
index 0000000000..10561d8dbb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-focused@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-focused@4x.9.png
new file mode 100644
index 0000000000..ccd09d69a5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-hovered.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-hovered.9.png
new file mode 100644
index 0000000000..46220a8ebe
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-hovered@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-hovered@2x.9.png
new file mode 100644
index 0000000000..b8ebb7b7eb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-hovered@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-hovered@3x.9.png
new file mode 100644
index 0000000000..10561d8dbb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-hovered@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-hovered@4x.9.png
new file mode 100644
index 0000000000..ccd09d69a5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-focused.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-focused.9.png
new file mode 100644
index 0000000000..23842de4e6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-focused.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-focused@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-focused@2x.9.png
new file mode 100644
index 0000000000..e50789323a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-focused@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-focused@3x.9.png
new file mode 100644
index 0000000000..7edec0c9b3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-focused@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-focused@4x.9.png
new file mode 100644
index 0000000000..f6e5ff8201
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-hovered.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-hovered.9.png
new file mode 100644
index 0000000000..23842de4e6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-hovered@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-hovered@2x.9.png
new file mode 100644
index 0000000000..e50789323a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-hovered@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-hovered@3x.9.png
new file mode 100644
index 0000000000..7edec0c9b3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-hovered@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-hovered@4x.9.png
new file mode 100644
index 0000000000..f6e5ff8201
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-pressed.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-pressed.9.png
new file mode 100644
index 0000000000..b6917a036b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-pressed@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-pressed@2x.9.png
new file mode 100644
index 0000000000..8999d3e441
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-pressed@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-pressed@3x.9.png
new file mode 100644
index 0000000000..77aa004465
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-pressed@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-pressed@4x.9.png
new file mode 100644
index 0000000000..4f2fd261ab
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored.9.png
new file mode 100644
index 0000000000..3c3da5b1a1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored@2x.9.png
new file mode 100644
index 0000000000..e0760e07cd
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored@3x.9.png
new file mode 100644
index 0000000000..c37080f5b8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored@4x.9.png
new file mode 100644
index 0000000000..bdc248231a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-mirrored@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-pressed.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-pressed.9.png
new file mode 100644
index 0000000000..65f2821bcd
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-pressed@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-pressed@2x.9.png
new file mode 100644
index 0000000000..010dd9d0bb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-pressed@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-pressed@3x.9.png
new file mode 100644
index 0000000000..f647f489d2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-pressed@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-pressed@4x.9.png
new file mode 100644
index 0000000000..db0486d1fc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable.9.png
new file mode 100644
index 0000000000..c3207f311b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable@2x.9.png
new file mode 100644
index 0000000000..c8c2630e83
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable@3x.9.png
new file mode 100644
index 0000000000..d0a6c81816
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-editable@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable@4x.9.png
new file mode 100644
index 0000000000..40e897623b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-editable@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-focused.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-focused.9.png
new file mode 100644
index 0000000000..6ad31bb0e2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-focused.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-focused@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-focused@2x.9.png
new file mode 100644
index 0000000000..6cc60b4b54
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-focused@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-focused@3x.9.png
new file mode 100644
index 0000000000..722c7ec708
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-focused@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-focused@4x.9.png
new file mode 100644
index 0000000000..64fa4ab6c0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-hovered.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-hovered.9.png
new file mode 100644
index 0000000000..6ad31bb0e2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-hovered@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-hovered@2x.9.png
new file mode 100644
index 0000000000..6cc60b4b54
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-hovered@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-hovered@3x.9.png
new file mode 100644
index 0000000000..722c7ec708
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-hovered@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-hovered@4x.9.png
new file mode 100644
index 0000000000..64fa4ab6c0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-disabled.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-disabled.9.png
new file mode 100644
index 0000000000..ac7da20e65
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-disabled@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-disabled@2x.9.png
new file mode 100644
index 0000000000..a12f361535
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-disabled@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-disabled@3x.9.png
new file mode 100644
index 0000000000..de11317bc1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-disabled@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-disabled@4x.9.png
new file mode 100644
index 0000000000..8be41f3898
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-focused.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-focused.9.png
new file mode 100644
index 0000000000..6b6e526436
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-focused.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-focused@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-focused@2x.9.png
new file mode 100644
index 0000000000..e0c36da35d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-focused@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-focused@3x.9.png
new file mode 100644
index 0000000000..ca2389dac4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-focused@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-focused@4x.9.png
new file mode 100644
index 0000000000..7e6c547419
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-hovered.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-hovered.9.png
new file mode 100644
index 0000000000..6b6e526436
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-hovered@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-hovered@2x.9.png
new file mode 100644
index 0000000000..e0c36da35d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-hovered@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-hovered@3x.9.png
new file mode 100644
index 0000000000..ca2389dac4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-hovered@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-hovered@4x.9.png
new file mode 100644
index 0000000000..7e6c547419
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-pressed.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-pressed.9.png
new file mode 100644
index 0000000000..d756679feb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-pressed@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-pressed@2x.9.png
new file mode 100644
index 0000000000..e49c7e8985
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-pressed@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-pressed@3x.9.png
new file mode 100644
index 0000000000..6041ffdcc0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-pressed@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-pressed@4x.9.png
new file mode 100644
index 0000000000..e23dda155e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored.9.png
new file mode 100644
index 0000000000..58be212032
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored@2x.9.png
new file mode 100644
index 0000000000..709a1ab6c6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored@3x.9.png
new file mode 100644
index 0000000000..ee5b5b8225
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored@4x.9.png
new file mode 100644
index 0000000000..1e88d44dba
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-mirrored@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-pressed.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-pressed.9.png
new file mode 100644
index 0000000000..9703314b47
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-pressed@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-pressed@2x.9.png
new file mode 100644
index 0000000000..173eccfbe3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-pressed@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-pressed@3x.9.png
new file mode 100644
index 0000000000..77737c7593
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down-pressed@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down-pressed@4x.9.png
new file mode 100644
index 0000000000..6a2bb865cb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down.9.png
new file mode 100644
index 0000000000..a6c9679a43
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down@2x.9.png
new file mode 100644
index 0000000000..bd14cdbbfc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down@3x.9.png
new file mode 100644
index 0000000000..02d18c1d8e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-down@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-down@4x.9.png
new file mode 100644
index 0000000000..9ec1bf0459
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-down@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-disabled.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-disabled.9.png
new file mode 100644
index 0000000000..5fe5ab6ad5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-disabled@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-disabled@2x.9.png
new file mode 100644
index 0000000000..f7a2a5d56d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-disabled@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-disabled@3x.9.png
new file mode 100644
index 0000000000..3244c93f14
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-disabled@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-disabled@4x.9.png
new file mode 100644
index 0000000000..8248200559
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-focused.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-focused.9.png
new file mode 100644
index 0000000000..d291c50a76
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-focused.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-focused@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-focused@2x.9.png
new file mode 100644
index 0000000000..06e27b1b8e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-focused@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-focused@3x.9.png
new file mode 100644
index 0000000000..34b4373558
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-focused@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-focused@4x.9.png
new file mode 100644
index 0000000000..4a95cca469
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-hovered.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-hovered.9.png
new file mode 100644
index 0000000000..d291c50a76
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-hovered@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-hovered@2x.9.png
new file mode 100644
index 0000000000..06e27b1b8e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-hovered@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-hovered@3x.9.png
new file mode 100644
index 0000000000..34b4373558
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-hovered@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-hovered@4x.9.png
new file mode 100644
index 0000000000..4a95cca469
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-focused.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-focused.9.png
new file mode 100644
index 0000000000..a98d5a1d42
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-focused.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-focused@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-focused@2x.9.png
new file mode 100644
index 0000000000..4b8458600a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-focused@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-focused@3x.9.png
new file mode 100644
index 0000000000..da241c07ae
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-focused@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-focused@4x.9.png
new file mode 100644
index 0000000000..d1333671ff
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-hovered.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-hovered.9.png
new file mode 100644
index 0000000000..a98d5a1d42
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-hovered@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-hovered@2x.9.png
new file mode 100644
index 0000000000..4b8458600a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-hovered@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-hovered@3x.9.png
new file mode 100644
index 0000000000..da241c07ae
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-hovered@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-hovered@4x.9.png
new file mode 100644
index 0000000000..d1333671ff
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-pressed.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-pressed.9.png
new file mode 100644
index 0000000000..793e009d82
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-pressed@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-pressed@2x.9.png
new file mode 100644
index 0000000000..aca00c57c0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-pressed@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-pressed@3x.9.png
new file mode 100644
index 0000000000..a49b95498c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-pressed@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-pressed@4x.9.png
new file mode 100644
index 0000000000..e0814f3be3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored.9.png
new file mode 100644
index 0000000000..ac4c46d184
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored@2x.9.png
new file mode 100644
index 0000000000..b1c335ee53
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored@3x.9.png
new file mode 100644
index 0000000000..3f0d9f2f25
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored@4x.9.png
new file mode 100644
index 0000000000..cac6eca867
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-mirrored@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-pressed.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-pressed.9.png
new file mode 100644
index 0000000000..87a1ae7a9a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-pressed@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-pressed@2x.9.png
new file mode 100644
index 0000000000..95c5ea063d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-pressed@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-pressed@3x.9.png
new file mode 100644
index 0000000000..3ed6cddfb8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-pressed@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-pressed@4x.9.png
new file mode 100644
index 0000000000..8f5e3f02bd
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable.9.png
new file mode 100644
index 0000000000..b3cc7bea02
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable@2x.9.png
new file mode 100644
index 0000000000..51313f5953
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable@3x.9.png
new file mode 100644
index 0000000000..8db540f593
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-editable@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable@4x.9.png
new file mode 100644
index 0000000000..310400a2b5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-editable@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-focused.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-focused.9.png
new file mode 100644
index 0000000000..d88bd00d22
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-focused.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-focused@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-focused@2x.9.png
new file mode 100644
index 0000000000..77dbb52a6a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-focused@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-focused@3x.9.png
new file mode 100644
index 0000000000..0739b1b173
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-focused@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-focused@4x.9.png
new file mode 100644
index 0000000000..d53ee543e3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-hovered.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-hovered.9.png
new file mode 100644
index 0000000000..d88bd00d22
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-hovered@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-hovered@2x.9.png
new file mode 100644
index 0000000000..77dbb52a6a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-hovered@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-hovered@3x.9.png
new file mode 100644
index 0000000000..0739b1b173
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-hovered@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-hovered@4x.9.png
new file mode 100644
index 0000000000..d53ee543e3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-disabled.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-disabled.9.png
new file mode 100644
index 0000000000..53f6d7e59c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-disabled@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-disabled@2x.9.png
new file mode 100644
index 0000000000..7c7bb214af
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-disabled@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-disabled@3x.9.png
new file mode 100644
index 0000000000..5a69027cf3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-disabled@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-disabled@4x.9.png
new file mode 100644
index 0000000000..fe2171a546
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-focused.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-focused.9.png
new file mode 100644
index 0000000000..cf31f93668
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-focused.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-focused@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-focused@2x.9.png
new file mode 100644
index 0000000000..48b8861eac
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-focused@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-focused@3x.9.png
new file mode 100644
index 0000000000..d6a417202b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-focused@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-focused@4x.9.png
new file mode 100644
index 0000000000..e0c7e374ad
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-hovered.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-hovered.9.png
new file mode 100644
index 0000000000..cf31f93668
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-hovered@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-hovered@2x.9.png
new file mode 100644
index 0000000000..48b8861eac
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-hovered@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-hovered@3x.9.png
new file mode 100644
index 0000000000..d6a417202b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-hovered@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-hovered@4x.9.png
new file mode 100644
index 0000000000..e0c7e374ad
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-pressed.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-pressed.9.png
new file mode 100644
index 0000000000..4548cddd91
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-pressed@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-pressed@2x.9.png
new file mode 100644
index 0000000000..c5fb9d1b3d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-pressed@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-pressed@3x.9.png
new file mode 100644
index 0000000000..ffbe520a19
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-pressed@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-pressed@4x.9.png
new file mode 100644
index 0000000000..784f9bee96
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored.9.png
new file mode 100644
index 0000000000..f26794570d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored@2x.9.png
new file mode 100644
index 0000000000..7f07e625ad
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored@3x.9.png
new file mode 100644
index 0000000000..0b060816ec
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored@4x.9.png
new file mode 100644
index 0000000000..df76dfcec1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-mirrored@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-pressed.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-pressed.9.png
new file mode 100644
index 0000000000..cbba897fc4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-pressed@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-pressed@2x.9.png
new file mode 100644
index 0000000000..a49e11fa4e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-pressed@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-pressed@3x.9.png
new file mode 100644
index 0000000000..720e454326
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up-pressed@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up-pressed@4x.9.png
new file mode 100644
index 0000000000..46333e3df8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up.9.png
new file mode 100644
index 0000000000..67cbe4345b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up@2x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up@2x.9.png
new file mode 100644
index 0000000000..8e804b8735
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up@2x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up@3x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up@3x.9.png
new file mode 100644
index 0000000000..15baec74c8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up@3x.9.png
diff --git a/src/quickcontrols/imagine/images/spinbox-indicator-up@4x.9.png b/src/quickcontrols/imagine/images/spinbox-indicator-up@4x.9.png
new file mode 100644
index 0000000000..7112de67e3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/spinbox-indicator-up@4x.9.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle-disabled.png b/src/quickcontrols/imagine/images/splitview-handle-disabled.png
new file mode 100644
index 0000000000..8ab854b0a3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle-disabled.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle-disabled@2x.png b/src/quickcontrols/imagine/images/splitview-handle-disabled@2x.png
new file mode 100644
index 0000000000..325469b8d8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle-disabled@3x.png b/src/quickcontrols/imagine/images/splitview-handle-disabled@3x.png
new file mode 100644
index 0000000000..5357e84783
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle-disabled@4x.png b/src/quickcontrols/imagine/images/splitview-handle-disabled@4x.png
new file mode 100644
index 0000000000..e215cf5b7a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle-hovered.png b/src/quickcontrols/imagine/images/splitview-handle-hovered.png
new file mode 100644
index 0000000000..429d55081f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle-hovered.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle-hovered@2x.png b/src/quickcontrols/imagine/images/splitview-handle-hovered@2x.png
new file mode 100644
index 0000000000..6f17b06ef3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle-hovered@3x.png b/src/quickcontrols/imagine/images/splitview-handle-hovered@3x.png
new file mode 100644
index 0000000000..11dcfa261c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle-hovered@4x.png b/src/quickcontrols/imagine/images/splitview-handle-hovered@4x.png
new file mode 100644
index 0000000000..73963d754c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle-pressed.png b/src/quickcontrols/imagine/images/splitview-handle-pressed.png
new file mode 100644
index 0000000000..6e00db20e6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle-pressed.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle-pressed@2x.png b/src/quickcontrols/imagine/images/splitview-handle-pressed@2x.png
new file mode 100644
index 0000000000..e1392de62b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle-pressed@3x.png b/src/quickcontrols/imagine/images/splitview-handle-pressed@3x.png
new file mode 100644
index 0000000000..ff6a397f69
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle-pressed@4x.png b/src/quickcontrols/imagine/images/splitview-handle-pressed@4x.png
new file mode 100644
index 0000000000..278ba90007
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle.png b/src/quickcontrols/imagine/images/splitview-handle.png
new file mode 100644
index 0000000000..2b69cef6a3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle@2x.png b/src/quickcontrols/imagine/images/splitview-handle@2x.png
new file mode 100644
index 0000000000..cc3205f125
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle@2x.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle@3x.png b/src/quickcontrols/imagine/images/splitview-handle@3x.png
new file mode 100644
index 0000000000..b8be2b4d8f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle@3x.png
diff --git a/src/quickcontrols/imagine/images/splitview-handle@4x.png b/src/quickcontrols/imagine/images/splitview-handle@4x.png
new file mode 100644
index 0000000000..3145295446
--- /dev/null
+++ b/src/quickcontrols/imagine/images/splitview-handle@4x.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-disabled.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-disabled.9.png
new file mode 100644
index 0000000000..23570729d6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-disabled@2x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-disabled@2x.9.png
new file mode 100644
index 0000000000..c7abb65c3f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-disabled@3x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-disabled@3x.9.png
new file mode 100644
index 0000000000..46b84d7da4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-disabled@4x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-disabled@4x.9.png
new file mode 100644
index 0000000000..f4dfd338f9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-focused.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-focused.9.png
new file mode 100644
index 0000000000..6ae574d55a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-focused.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-focused@2x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-focused@2x.9.png
new file mode 100644
index 0000000000..6b61562c14
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-focused@3x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-focused@3x.9.png
new file mode 100644
index 0000000000..e46c0bf1d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-focused@4x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-focused@4x.9.png
new file mode 100644
index 0000000000..010444e8e1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-highlighted.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-highlighted.9.png
new file mode 100644
index 0000000000..e79d8e1d01
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-highlighted.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-highlighted@2x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-highlighted@2x.9.png
new file mode 100644
index 0000000000..ea68d35fc4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-highlighted@2x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-highlighted@3x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-highlighted@3x.9.png
new file mode 100644
index 0000000000..6d61041599
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-highlighted@3x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-highlighted@4x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-highlighted@4x.9.png
new file mode 100644
index 0000000000..590cca96a1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-highlighted@4x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-hovered.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-hovered.9.png
new file mode 100644
index 0000000000..b8749743d0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-hovered@2x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-hovered@2x.9.png
new file mode 100644
index 0000000000..5a136a0ca9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-hovered@3x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-hovered@3x.9.png
new file mode 100644
index 0000000000..f47a366b7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-hovered@4x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-hovered@4x.9.png
new file mode 100644
index 0000000000..9ecb680f20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-pressed.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-pressed.9.png
new file mode 100644
index 0000000000..6ae574d55a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-pressed@2x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-pressed@2x.9.png
new file mode 100644
index 0000000000..6b61562c14
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-pressed@3x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-pressed@3x.9.png
new file mode 100644
index 0000000000..e46c0bf1d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background-pressed@4x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background-pressed@4x.9.png
new file mode 100644
index 0000000000..010444e8e1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background.9.png b/src/quickcontrols/imagine/images/swipedelegate-background.9.png
new file mode 100644
index 0000000000..b8749743d0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background@2x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background@2x.9.png
new file mode 100644
index 0000000000..5a136a0ca9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background@3x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background@3x.9.png
new file mode 100644
index 0000000000..f47a366b7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/swipedelegate-background@4x.9.png b/src/quickcontrols/imagine/images/swipedelegate-background@4x.9.png
new file mode 100644
index 0000000000..9ecb680f20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/swipedelegate-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/switch-handle-disabled.png b/src/quickcontrols/imagine/images/switch-handle-disabled.png
new file mode 100644
index 0000000000..595dd5465d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-handle-disabled.png
diff --git a/src/quickcontrols/imagine/images/switch-handle-disabled@2x.png b/src/quickcontrols/imagine/images/switch-handle-disabled@2x.png
new file mode 100644
index 0000000000..5be736aafa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-handle-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/switch-handle-disabled@3x.png b/src/quickcontrols/imagine/images/switch-handle-disabled@3x.png
new file mode 100644
index 0000000000..c8002ca3d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-handle-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/switch-handle-disabled@4x.png b/src/quickcontrols/imagine/images/switch-handle-disabled@4x.png
new file mode 100644
index 0000000000..00e70c1ba5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-handle-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/switch-handle-pressed.png b/src/quickcontrols/imagine/images/switch-handle-pressed.png
new file mode 100644
index 0000000000..595dd5465d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-handle-pressed.png
diff --git a/src/quickcontrols/imagine/images/switch-handle-pressed@2x.png b/src/quickcontrols/imagine/images/switch-handle-pressed@2x.png
new file mode 100644
index 0000000000..5be736aafa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-handle-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/switch-handle-pressed@3x.png b/src/quickcontrols/imagine/images/switch-handle-pressed@3x.png
new file mode 100644
index 0000000000..c8002ca3d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-handle-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/switch-handle-pressed@4x.png b/src/quickcontrols/imagine/images/switch-handle-pressed@4x.png
new file mode 100644
index 0000000000..00e70c1ba5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-handle-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/switch-handle.png b/src/quickcontrols/imagine/images/switch-handle.png
new file mode 100644
index 0000000000..15649c34c7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-handle.png
diff --git a/src/quickcontrols/imagine/images/switch-handle@2x.png b/src/quickcontrols/imagine/images/switch-handle@2x.png
new file mode 100644
index 0000000000..04f84ed920
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-handle@2x.png
diff --git a/src/quickcontrols/imagine/images/switch-handle@3x.png b/src/quickcontrols/imagine/images/switch-handle@3x.png
new file mode 100644
index 0000000000..e0cfb63718
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-handle@3x.png
diff --git a/src/quickcontrols/imagine/images/switch-handle@4x.png b/src/quickcontrols/imagine/images/switch-handle@4x.png
new file mode 100644
index 0000000000..73fa381a4a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-handle@4x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked-focused.png b/src/quickcontrols/imagine/images/switch-indicator-checked-focused.png
new file mode 100644
index 0000000000..7f5ba5dfc4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked-focused.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked-focused@2x.png b/src/quickcontrols/imagine/images/switch-indicator-checked-focused@2x.png
new file mode 100644
index 0000000000..a0090df49f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked-focused@3x.png b/src/quickcontrols/imagine/images/switch-indicator-checked-focused@3x.png
new file mode 100644
index 0000000000..0c7e526459
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked-focused@4x.png b/src/quickcontrols/imagine/images/switch-indicator-checked-focused@4x.png
new file mode 100644
index 0000000000..3a5e1d36ca
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked-hovered.png b/src/quickcontrols/imagine/images/switch-indicator-checked-hovered.png
new file mode 100644
index 0000000000..7f5ba5dfc4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked-hovered.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked-hovered@2x.png b/src/quickcontrols/imagine/images/switch-indicator-checked-hovered@2x.png
new file mode 100644
index 0000000000..a0090df49f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked-hovered@3x.png b/src/quickcontrols/imagine/images/switch-indicator-checked-hovered@3x.png
new file mode 100644
index 0000000000..0c7e526459
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked-hovered@4x.png b/src/quickcontrols/imagine/images/switch-indicator-checked-hovered@4x.png
new file mode 100644
index 0000000000..3a5e1d36ca
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked-pressed.png b/src/quickcontrols/imagine/images/switch-indicator-checked-pressed.png
new file mode 100644
index 0000000000..ecbc552a17
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked-pressed.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked-pressed@2x.png b/src/quickcontrols/imagine/images/switch-indicator-checked-pressed@2x.png
new file mode 100644
index 0000000000..07fe7241d8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked-pressed@3x.png b/src/quickcontrols/imagine/images/switch-indicator-checked-pressed@3x.png
new file mode 100644
index 0000000000..8c65c27f4e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked-pressed@4x.png b/src/quickcontrols/imagine/images/switch-indicator-checked-pressed@4x.png
new file mode 100644
index 0000000000..f6a1e47658
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked.png b/src/quickcontrols/imagine/images/switch-indicator-checked.png
new file mode 100644
index 0000000000..2b7265cd0f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked@2x.png b/src/quickcontrols/imagine/images/switch-indicator-checked@2x.png
new file mode 100644
index 0000000000..6ec88c7fc8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked@2x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked@3x.png b/src/quickcontrols/imagine/images/switch-indicator-checked@3x.png
new file mode 100644
index 0000000000..48c979856a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked@3x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-checked@4x.png b/src/quickcontrols/imagine/images/switch-indicator-checked@4x.png
new file mode 100644
index 0000000000..e9f81807da
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-checked@4x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-disabled.png b/src/quickcontrols/imagine/images/switch-indicator-disabled.png
new file mode 100644
index 0000000000..9cfab79197
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-disabled.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-disabled@2x.png b/src/quickcontrols/imagine/images/switch-indicator-disabled@2x.png
new file mode 100644
index 0000000000..3bbbb8dfbc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-disabled@3x.png b/src/quickcontrols/imagine/images/switch-indicator-disabled@3x.png
new file mode 100644
index 0000000000..80d9a74685
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-disabled@4x.png b/src/quickcontrols/imagine/images/switch-indicator-disabled@4x.png
new file mode 100644
index 0000000000..9ee7bfabbc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-focused.png b/src/quickcontrols/imagine/images/switch-indicator-focused.png
new file mode 100644
index 0000000000..4867bcac54
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-focused.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-focused@2x.png b/src/quickcontrols/imagine/images/switch-indicator-focused@2x.png
new file mode 100644
index 0000000000..d833a0cdb4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-focused@3x.png b/src/quickcontrols/imagine/images/switch-indicator-focused@3x.png
new file mode 100644
index 0000000000..a632b6ae1c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-focused@4x.png b/src/quickcontrols/imagine/images/switch-indicator-focused@4x.png
new file mode 100644
index 0000000000..b5affab772
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-hovered.png b/src/quickcontrols/imagine/images/switch-indicator-hovered.png
new file mode 100644
index 0000000000..4867bcac54
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-hovered.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-hovered@2x.png b/src/quickcontrols/imagine/images/switch-indicator-hovered@2x.png
new file mode 100644
index 0000000000..d833a0cdb4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-hovered@3x.png b/src/quickcontrols/imagine/images/switch-indicator-hovered@3x.png
new file mode 100644
index 0000000000..a632b6ae1c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-hovered@4x.png b/src/quickcontrols/imagine/images/switch-indicator-hovered@4x.png
new file mode 100644
index 0000000000..b5affab772
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-pressed.png b/src/quickcontrols/imagine/images/switch-indicator-pressed.png
new file mode 100644
index 0000000000..4fbbc060e8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-pressed.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-pressed@2x.png b/src/quickcontrols/imagine/images/switch-indicator-pressed@2x.png
new file mode 100644
index 0000000000..7939f943e5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-pressed@3x.png b/src/quickcontrols/imagine/images/switch-indicator-pressed@3x.png
new file mode 100644
index 0000000000..adcbe45bb7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator-pressed@4x.png b/src/quickcontrols/imagine/images/switch-indicator-pressed@4x.png
new file mode 100644
index 0000000000..74c0c77e6f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator.png b/src/quickcontrols/imagine/images/switch-indicator.png
new file mode 100644
index 0000000000..b6b4f1cd79
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator@2x.png b/src/quickcontrols/imagine/images/switch-indicator@2x.png
new file mode 100644
index 0000000000..bfeedeb720
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator@2x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator@3x.png b/src/quickcontrols/imagine/images/switch-indicator@3x.png
new file mode 100644
index 0000000000..19e5ba2ca7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator@3x.png
diff --git a/src/quickcontrols/imagine/images/switch-indicator@4x.png b/src/quickcontrols/imagine/images/switch-indicator@4x.png
new file mode 100644
index 0000000000..9345cd4fdb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switch-indicator@4x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-disabled.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-disabled.9.png
new file mode 100644
index 0000000000..23570729d6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-disabled@2x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-disabled@2x.9.png
new file mode 100644
index 0000000000..c7abb65c3f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-disabled@3x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-disabled@3x.9.png
new file mode 100644
index 0000000000..46b84d7da4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-disabled@4x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-disabled@4x.9.png
new file mode 100644
index 0000000000..f4dfd338f9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-focused.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-focused.9.png
new file mode 100644
index 0000000000..6ae574d55a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-focused.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-focused@2x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-focused@2x.9.png
new file mode 100644
index 0000000000..6b61562c14
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-focused@3x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-focused@3x.9.png
new file mode 100644
index 0000000000..e46c0bf1d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-focused@4x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-focused@4x.9.png
new file mode 100644
index 0000000000..010444e8e1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-hovered.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-hovered.9.png
new file mode 100644
index 0000000000..b8749743d0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-hovered@2x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-hovered@2x.9.png
new file mode 100644
index 0000000000..5a136a0ca9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-hovered@3x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-hovered@3x.9.png
new file mode 100644
index 0000000000..f47a366b7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-hovered@4x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-hovered@4x.9.png
new file mode 100644
index 0000000000..9ecb680f20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-pressed.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-pressed.9.png
new file mode 100644
index 0000000000..6ae574d55a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-pressed@2x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-pressed@2x.9.png
new file mode 100644
index 0000000000..6b61562c14
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-pressed@3x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-pressed@3x.9.png
new file mode 100644
index 0000000000..e46c0bf1d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background-pressed@4x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background-pressed@4x.9.png
new file mode 100644
index 0000000000..010444e8e1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background.9.png b/src/quickcontrols/imagine/images/switchdelegate-background.9.png
new file mode 100644
index 0000000000..b8749743d0
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background@2x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background@2x.9.png
new file mode 100644
index 0000000000..5a136a0ca9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background@3x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background@3x.9.png
new file mode 100644
index 0000000000..f47a366b7b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-background@4x.9.png b/src/quickcontrols/imagine/images/switchdelegate-background@4x.9.png
new file mode 100644
index 0000000000..9ecb680f20
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-handle-disabled.png b/src/quickcontrols/imagine/images/switchdelegate-handle-disabled.png
new file mode 100644
index 0000000000..595dd5465d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-handle-disabled.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-handle-disabled@2x.png b/src/quickcontrols/imagine/images/switchdelegate-handle-disabled@2x.png
new file mode 100644
index 0000000000..5be736aafa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-handle-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-handle-disabled@3x.png b/src/quickcontrols/imagine/images/switchdelegate-handle-disabled@3x.png
new file mode 100644
index 0000000000..c8002ca3d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-handle-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-handle-disabled@4x.png b/src/quickcontrols/imagine/images/switchdelegate-handle-disabled@4x.png
new file mode 100644
index 0000000000..00e70c1ba5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-handle-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-handle-pressed.png b/src/quickcontrols/imagine/images/switchdelegate-handle-pressed.png
new file mode 100644
index 0000000000..595dd5465d
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-handle-pressed.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-handle-pressed@2x.png b/src/quickcontrols/imagine/images/switchdelegate-handle-pressed@2x.png
new file mode 100644
index 0000000000..5be736aafa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-handle-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-handle-pressed@3x.png b/src/quickcontrols/imagine/images/switchdelegate-handle-pressed@3x.png
new file mode 100644
index 0000000000..c8002ca3d9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-handle-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-handle-pressed@4x.png b/src/quickcontrols/imagine/images/switchdelegate-handle-pressed@4x.png
new file mode 100644
index 0000000000..00e70c1ba5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-handle-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-handle.png b/src/quickcontrols/imagine/images/switchdelegate-handle.png
new file mode 100644
index 0000000000..15649c34c7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-handle.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-handle@2x.png b/src/quickcontrols/imagine/images/switchdelegate-handle@2x.png
new file mode 100644
index 0000000000..04f84ed920
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-handle@2x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-handle@3x.png b/src/quickcontrols/imagine/images/switchdelegate-handle@3x.png
new file mode 100644
index 0000000000..e0cfb63718
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-handle@3x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-handle@4x.png b/src/quickcontrols/imagine/images/switchdelegate-handle@4x.png
new file mode 100644
index 0000000000..73fa381a4a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-handle@4x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-focused.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-focused.png
new file mode 100644
index 0000000000..7f5ba5dfc4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-focused.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-focused@2x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-focused@2x.png
new file mode 100644
index 0000000000..a0090df49f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-focused@3x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-focused@3x.png
new file mode 100644
index 0000000000..0c7e526459
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-focused@4x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-focused@4x.png
new file mode 100644
index 0000000000..3a5e1d36ca
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-hovered.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-hovered.png
new file mode 100644
index 0000000000..7f5ba5dfc4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-hovered.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-hovered@2x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-hovered@2x.png
new file mode 100644
index 0000000000..a0090df49f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-hovered@3x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-hovered@3x.png
new file mode 100644
index 0000000000..0c7e526459
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-hovered@4x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-hovered@4x.png
new file mode 100644
index 0000000000..3a5e1d36ca
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-pressed.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-pressed.png
new file mode 100644
index 0000000000..ecbc552a17
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-pressed.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-pressed@2x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-pressed@2x.png
new file mode 100644
index 0000000000..07fe7241d8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-pressed@3x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-pressed@3x.png
new file mode 100644
index 0000000000..8c65c27f4e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-pressed@4x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-pressed@4x.png
new file mode 100644
index 0000000000..f6a1e47658
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked.png
new file mode 100644
index 0000000000..2b7265cd0f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked@2x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked@2x.png
new file mode 100644
index 0000000000..6ec88c7fc8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked@2x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked@3x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked@3x.png
new file mode 100644
index 0000000000..48c979856a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked@3x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-checked@4x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked@4x.png
new file mode 100644
index 0000000000..e9f81807da
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-checked@4x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-disabled.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-disabled.png
new file mode 100644
index 0000000000..9cfab79197
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-disabled.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-disabled@2x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-disabled@2x.png
new file mode 100644
index 0000000000..3bbbb8dfbc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-disabled@2x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-disabled@3x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-disabled@3x.png
new file mode 100644
index 0000000000..80d9a74685
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-disabled@3x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-disabled@4x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-disabled@4x.png
new file mode 100644
index 0000000000..9ee7bfabbc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-disabled@4x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-focused.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-focused.png
new file mode 100644
index 0000000000..4867bcac54
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-focused.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-focused@2x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-focused@2x.png
new file mode 100644
index 0000000000..d833a0cdb4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-focused@2x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-focused@3x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-focused@3x.png
new file mode 100644
index 0000000000..a632b6ae1c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-focused@3x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-focused@4x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-focused@4x.png
new file mode 100644
index 0000000000..b5affab772
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-focused@4x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-hovered.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-hovered.png
new file mode 100644
index 0000000000..4867bcac54
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-hovered.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-hovered@2x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-hovered@2x.png
new file mode 100644
index 0000000000..d833a0cdb4
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-hovered@2x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-hovered@3x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-hovered@3x.png
new file mode 100644
index 0000000000..a632b6ae1c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-hovered@3x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-hovered@4x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-hovered@4x.png
new file mode 100644
index 0000000000..b5affab772
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-hovered@4x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-pressed.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-pressed.png
new file mode 100644
index 0000000000..4fbbc060e8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-pressed.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-pressed@2x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-pressed@2x.png
new file mode 100644
index 0000000000..7939f943e5
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-pressed@2x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-pressed@3x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-pressed@3x.png
new file mode 100644
index 0000000000..adcbe45bb7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-pressed@3x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator-pressed@4x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator-pressed@4x.png
new file mode 100644
index 0000000000..74c0c77e6f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator-pressed@4x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator.png b/src/quickcontrols/imagine/images/switchdelegate-indicator.png
new file mode 100644
index 0000000000..b6b4f1cd79
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator@2x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator@2x.png
new file mode 100644
index 0000000000..bfeedeb720
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator@2x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator@3x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator@3x.png
new file mode 100644
index 0000000000..19e5ba2ca7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator@3x.png
diff --git a/src/quickcontrols/imagine/images/switchdelegate-indicator@4x.png b/src/quickcontrols/imagine/images/switchdelegate-indicator@4x.png
new file mode 100644
index 0000000000..9345cd4fdb
--- /dev/null
+++ b/src/quickcontrols/imagine/images/switchdelegate-indicator@4x.png
diff --git a/src/quickcontrols/imagine/images/tabbar-background.png b/src/quickcontrols/imagine/images/tabbar-background.png
new file mode 100644
index 0000000000..002efdedde
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbar-background.png
diff --git a/src/quickcontrols/imagine/images/tabbar-background@2x.png b/src/quickcontrols/imagine/images/tabbar-background@2x.png
new file mode 100644
index 0000000000..aaa1cbaf4b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbar-background@2x.png
diff --git a/src/quickcontrols/imagine/images/tabbar-background@3x.png b/src/quickcontrols/imagine/images/tabbar-background@3x.png
new file mode 100644
index 0000000000..c4eb9e1f02
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbar-background@3x.png
diff --git a/src/quickcontrols/imagine/images/tabbar-background@4x.png b/src/quickcontrols/imagine/images/tabbar-background@4x.png
new file mode 100644
index 0000000000..4a4e234a6a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbar-background@4x.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-checked.9.png b/src/quickcontrols/imagine/images/tabbutton-background-checked.9.png
new file mode 100644
index 0000000000..d2f0fa76a6
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-checked.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-checked@2x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-checked@2x.9.png
new file mode 100644
index 0000000000..bee1329202
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-checked@2x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-checked@3x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-checked@3x.9.png
new file mode 100644
index 0000000000..70afb7d337
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-checked@3x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-checked@4x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-checked@4x.9.png
new file mode 100644
index 0000000000..3a2015c464
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-checked@4x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-disabled-checked.9.png b/src/quickcontrols/imagine/images/tabbutton-background-disabled-checked.9.png
new file mode 100644
index 0000000000..a6d3011bd9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-disabled-checked.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-disabled-checked@2x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-disabled-checked@2x.9.png
new file mode 100644
index 0000000000..8ebfa02686
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-disabled-checked@2x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-disabled-checked@3x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-disabled-checked@3x.9.png
new file mode 100644
index 0000000000..1d5a1d5149
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-disabled-checked@3x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-disabled-checked@4x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-disabled-checked@4x.9.png
new file mode 100644
index 0000000000..f06dc55f9b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-disabled-checked@4x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-disabled.9.png b/src/quickcontrols/imagine/images/tabbutton-background-disabled.9.png
new file mode 100644
index 0000000000..a6d3011bd9
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-disabled@2x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-disabled@2x.9.png
new file mode 100644
index 0000000000..8ebfa02686
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-disabled@3x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-disabled@3x.9.png
new file mode 100644
index 0000000000..1d5a1d5149
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-disabled@4x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-disabled@4x.9.png
new file mode 100644
index 0000000000..f06dc55f9b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-hovered.9.png b/src/quickcontrols/imagine/images/tabbutton-background-hovered.9.png
new file mode 100644
index 0000000000..3f945184f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-hovered@2x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-hovered@2x.9.png
new file mode 100644
index 0000000000..8a19720a2a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-hovered@3x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-hovered@3x.9.png
new file mode 100644
index 0000000000..eadcf45714
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-hovered@4x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-hovered@4x.9.png
new file mode 100644
index 0000000000..8bf8e992aa
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-pressed.9.png b/src/quickcontrols/imagine/images/tabbutton-background-pressed.9.png
new file mode 100644
index 0000000000..d48733ed81
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-pressed@2x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-pressed@2x.9.png
new file mode 100644
index 0000000000..fbbaad7bec
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-pressed@3x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-pressed@3x.9.png
new file mode 100644
index 0000000000..3a0ba70e63
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background-pressed@4x.9.png b/src/quickcontrols/imagine/images/tabbutton-background-pressed@4x.9.png
new file mode 100644
index 0000000000..c04f124e5e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background.9.png b/src/quickcontrols/imagine/images/tabbutton-background.9.png
new file mode 100644
index 0000000000..2266c72223
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background@2x.9.png b/src/quickcontrols/imagine/images/tabbutton-background@2x.9.png
new file mode 100644
index 0000000000..b7adb7adc3
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background@3x.9.png b/src/quickcontrols/imagine/images/tabbutton-background@3x.9.png
new file mode 100644
index 0000000000..d8f4eae55f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/tabbutton-background@4x.9.png b/src/quickcontrols/imagine/images/tabbutton-background@4x.9.png
new file mode 100644
index 0000000000..066d35b38c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tabbutton-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/textarea-background-disabled.9.png b/src/quickcontrols/imagine/images/textarea-background-disabled.9.png
new file mode 100644
index 0000000000..97d48f8c00
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textarea-background-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/textarea-background-disabled@2x.9.png b/src/quickcontrols/imagine/images/textarea-background-disabled@2x.9.png
new file mode 100644
index 0000000000..f9ea1d49dd
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textarea-background-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/textarea-background-disabled@3x.9.png b/src/quickcontrols/imagine/images/textarea-background-disabled@3x.9.png
new file mode 100644
index 0000000000..04e7ef6f07
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textarea-background-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/textarea-background-disabled@4x.9.png b/src/quickcontrols/imagine/images/textarea-background-disabled@4x.9.png
new file mode 100644
index 0000000000..feaaa3bcbc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textarea-background-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/textarea-background-focused.9.png b/src/quickcontrols/imagine/images/textarea-background-focused.9.png
new file mode 100644
index 0000000000..1d73acfa0a
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textarea-background-focused.9.png
diff --git a/src/quickcontrols/imagine/images/textarea-background-focused@2x.9.png b/src/quickcontrols/imagine/images/textarea-background-focused@2x.9.png
new file mode 100644
index 0000000000..5be4cd6f8c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textarea-background-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/textarea-background-focused@3x.9.png b/src/quickcontrols/imagine/images/textarea-background-focused@3x.9.png
new file mode 100644
index 0000000000..6ba3e24610
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textarea-background-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/textarea-background-focused@4x.9.png b/src/quickcontrols/imagine/images/textarea-background-focused@4x.9.png
new file mode 100644
index 0000000000..366aa5112f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textarea-background-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/textarea-background.9.png b/src/quickcontrols/imagine/images/textarea-background.9.png
new file mode 100644
index 0000000000..0b9ca9f3ec
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textarea-background.9.png
diff --git a/src/quickcontrols/imagine/images/textarea-background@2x.9.png b/src/quickcontrols/imagine/images/textarea-background@2x.9.png
new file mode 100644
index 0000000000..a806ed1b11
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textarea-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/textarea-background@3x.9.png b/src/quickcontrols/imagine/images/textarea-background@3x.9.png
new file mode 100644
index 0000000000..547ef33c41
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textarea-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/textarea-background@4x.9.png b/src/quickcontrols/imagine/images/textarea-background@4x.9.png
new file mode 100644
index 0000000000..b759b1e80b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textarea-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/textfield-background-disabled.9.png b/src/quickcontrols/imagine/images/textfield-background-disabled.9.png
new file mode 100644
index 0000000000..312a1294d1
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textfield-background-disabled.9.png
diff --git a/src/quickcontrols/imagine/images/textfield-background-disabled@2x.9.png b/src/quickcontrols/imagine/images/textfield-background-disabled@2x.9.png
new file mode 100644
index 0000000000..2c6c7e9165
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textfield-background-disabled@2x.9.png
diff --git a/src/quickcontrols/imagine/images/textfield-background-disabled@3x.9.png b/src/quickcontrols/imagine/images/textfield-background-disabled@3x.9.png
new file mode 100644
index 0000000000..1d1aca7177
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textfield-background-disabled@3x.9.png
diff --git a/src/quickcontrols/imagine/images/textfield-background-disabled@4x.9.png b/src/quickcontrols/imagine/images/textfield-background-disabled@4x.9.png
new file mode 100644
index 0000000000..ed93182a70
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textfield-background-disabled@4x.9.png
diff --git a/src/quickcontrols/imagine/images/textfield-background-focused.9.png b/src/quickcontrols/imagine/images/textfield-background-focused.9.png
new file mode 100644
index 0000000000..1251f4e4cc
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textfield-background-focused.9.png
diff --git a/src/quickcontrols/imagine/images/textfield-background-focused@2x.9.png b/src/quickcontrols/imagine/images/textfield-background-focused@2x.9.png
new file mode 100644
index 0000000000..d535e8bc98
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textfield-background-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/textfield-background-focused@3x.9.png b/src/quickcontrols/imagine/images/textfield-background-focused@3x.9.png
new file mode 100644
index 0000000000..9fca3bb239
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textfield-background-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/textfield-background-focused@4x.9.png b/src/quickcontrols/imagine/images/textfield-background-focused@4x.9.png
new file mode 100644
index 0000000000..a275a52e89
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textfield-background-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/textfield-background.9.png b/src/quickcontrols/imagine/images/textfield-background.9.png
new file mode 100644
index 0000000000..7ea6096880
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textfield-background.9.png
diff --git a/src/quickcontrols/imagine/images/textfield-background@2x.9.png b/src/quickcontrols/imagine/images/textfield-background@2x.9.png
new file mode 100644
index 0000000000..0a4c3f2a9f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textfield-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/textfield-background@3x.9.png b/src/quickcontrols/imagine/images/textfield-background@3x.9.png
new file mode 100644
index 0000000000..e855274187
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textfield-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/textfield-background@4x.9.png b/src/quickcontrols/imagine/images/textfield-background@4x.9.png
new file mode 100644
index 0000000000..29ef5bb9d2
--- /dev/null
+++ b/src/quickcontrols/imagine/images/textfield-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbar-background.png b/src/quickcontrols/imagine/images/toolbar-background.png
new file mode 100644
index 0000000000..9c67cf2702
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbar-background.png
diff --git a/src/quickcontrols/imagine/images/toolbar-background@2x.png b/src/quickcontrols/imagine/images/toolbar-background@2x.png
new file mode 100644
index 0000000000..b0602519a7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbar-background@2x.png
diff --git a/src/quickcontrols/imagine/images/toolbar-background@3x.png b/src/quickcontrols/imagine/images/toolbar-background@3x.png
new file mode 100644
index 0000000000..7f227ca343
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbar-background@3x.png
diff --git a/src/quickcontrols/imagine/images/toolbar-background@4x.png b/src/quickcontrols/imagine/images/toolbar-background@4x.png
new file mode 100644
index 0000000000..4788ecc743
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbar-background@4x.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-checked-focused.9.png b/src/quickcontrols/imagine/images/toolbutton-background-checked-focused.9.png
new file mode 100644
index 0000000000..287a2872de
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-checked-focused.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-checked-focused@2x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-checked-focused@2x.9.png
new file mode 100644
index 0000000000..aa84416561
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-checked-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-checked-focused@3x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-checked-focused@3x.9.png
new file mode 100644
index 0000000000..8c6822555b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-checked-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-checked-focused@4x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-checked-focused@4x.9.png
new file mode 100644
index 0000000000..89bdd096f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-checked-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-checked-hovered.9.png b/src/quickcontrols/imagine/images/toolbutton-background-checked-hovered.9.png
new file mode 100644
index 0000000000..287a2872de
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-checked-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-checked-hovered@2x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-checked-hovered@2x.9.png
new file mode 100644
index 0000000000..aa84416561
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-checked-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-checked-hovered@3x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-checked-hovered@3x.9.png
new file mode 100644
index 0000000000..8c6822555b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-checked-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-checked-hovered@4x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-checked-hovered@4x.9.png
new file mode 100644
index 0000000000..89bdd096f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-checked-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-checked.9.png b/src/quickcontrols/imagine/images/toolbutton-background-checked.9.png
new file mode 100644
index 0000000000..287a2872de
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-checked.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-checked@2x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-checked@2x.9.png
new file mode 100644
index 0000000000..aa84416561
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-checked@2x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-checked@3x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-checked@3x.9.png
new file mode 100644
index 0000000000..8c6822555b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-checked@3x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-checked@4x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-checked@4x.9.png
new file mode 100644
index 0000000000..89bdd096f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-checked@4x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-disabled-checked.9.png b/src/quickcontrols/imagine/images/toolbutton-background-disabled-checked.9.png
new file mode 100644
index 0000000000..287a2872de
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-disabled-checked.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-disabled-checked@2x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-disabled-checked@2x.9.png
new file mode 100644
index 0000000000..aa84416561
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-disabled-checked@2x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-disabled-checked@3x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-disabled-checked@3x.9.png
new file mode 100644
index 0000000000..8c6822555b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-disabled-checked@3x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-disabled-checked@4x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-disabled-checked@4x.9.png
new file mode 100644
index 0000000000..89bdd096f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-disabled-checked@4x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-focused.9.png b/src/quickcontrols/imagine/images/toolbutton-background-focused.9.png
new file mode 100644
index 0000000000..287a2872de
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-focused.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-focused@2x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-focused@2x.9.png
new file mode 100644
index 0000000000..aa84416561
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-focused@2x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-focused@3x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-focused@3x.9.png
new file mode 100644
index 0000000000..8c6822555b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-focused@3x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-focused@4x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-focused@4x.9.png
new file mode 100644
index 0000000000..89bdd096f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-focused@4x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-hovered.9.png b/src/quickcontrols/imagine/images/toolbutton-background-hovered.9.png
new file mode 100644
index 0000000000..287a2872de
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-hovered.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-hovered@2x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-hovered@2x.9.png
new file mode 100644
index 0000000000..aa84416561
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-hovered@2x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-hovered@3x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-hovered@3x.9.png
new file mode 100644
index 0000000000..8c6822555b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-hovered@3x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-hovered@4x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-hovered@4x.9.png
new file mode 100644
index 0000000000..89bdd096f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-hovered@4x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-pressed.9.png b/src/quickcontrols/imagine/images/toolbutton-background-pressed.9.png
new file mode 100644
index 0000000000..287a2872de
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-pressed.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-pressed@2x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-pressed@2x.9.png
new file mode 100644
index 0000000000..aa84416561
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-pressed@2x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-pressed@3x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-pressed@3x.9.png
new file mode 100644
index 0000000000..8c6822555b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-pressed@3x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background-pressed@4x.9.png b/src/quickcontrols/imagine/images/toolbutton-background-pressed@4x.9.png
new file mode 100644
index 0000000000..89bdd096f8
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background-pressed@4x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background.9.png b/src/quickcontrols/imagine/images/toolbutton-background.9.png
new file mode 100644
index 0000000000..5a72a62128
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background@2x.9.png b/src/quickcontrols/imagine/images/toolbutton-background@2x.9.png
new file mode 100644
index 0000000000..688a071a84
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background@3x.9.png b/src/quickcontrols/imagine/images/toolbutton-background@3x.9.png
new file mode 100644
index 0000000000..64375a7e5b
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/toolbutton-background@4x.9.png b/src/quickcontrols/imagine/images/toolbutton-background@4x.9.png
new file mode 100644
index 0000000000..96004a103c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolbutton-background@4x.9.png
diff --git a/src/quickcontrols/imagine/images/toolseparator-separator-horizontal.9.png b/src/quickcontrols/imagine/images/toolseparator-separator-horizontal.9.png
new file mode 100644
index 0000000000..75e3e66229
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolseparator-separator-horizontal.9.png
diff --git a/src/quickcontrols/imagine/images/toolseparator-separator-horizontal@2x.9.png b/src/quickcontrols/imagine/images/toolseparator-separator-horizontal@2x.9.png
new file mode 100644
index 0000000000..3662dec944
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolseparator-separator-horizontal@2x.9.png
diff --git a/src/quickcontrols/imagine/images/toolseparator-separator-horizontal@3x.9.png b/src/quickcontrols/imagine/images/toolseparator-separator-horizontal@3x.9.png
new file mode 100644
index 0000000000..2771470175
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolseparator-separator-horizontal@3x.9.png
diff --git a/src/quickcontrols/imagine/images/toolseparator-separator-horizontal@4x.9.png b/src/quickcontrols/imagine/images/toolseparator-separator-horizontal@4x.9.png
new file mode 100644
index 0000000000..deeda9f5fd
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolseparator-separator-horizontal@4x.9.png
diff --git a/src/quickcontrols/imagine/images/toolseparator-separator-vertical.9.png b/src/quickcontrols/imagine/images/toolseparator-separator-vertical.9.png
new file mode 100644
index 0000000000..5b607aaf5c
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolseparator-separator-vertical.9.png
diff --git a/src/quickcontrols/imagine/images/toolseparator-separator-vertical@2x.9.png b/src/quickcontrols/imagine/images/toolseparator-separator-vertical@2x.9.png
new file mode 100644
index 0000000000..f5a11e0467
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolseparator-separator-vertical@2x.9.png
diff --git a/src/quickcontrols/imagine/images/toolseparator-separator-vertical@3x.9.png b/src/quickcontrols/imagine/images/toolseparator-separator-vertical@3x.9.png
new file mode 100644
index 0000000000..c957280f37
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolseparator-separator-vertical@3x.9.png
diff --git a/src/quickcontrols/imagine/images/toolseparator-separator-vertical@4x.9.png b/src/quickcontrols/imagine/images/toolseparator-separator-vertical@4x.9.png
new file mode 100644
index 0000000000..c888689df7
--- /dev/null
+++ b/src/quickcontrols/imagine/images/toolseparator-separator-vertical@4x.9.png
diff --git a/src/quickcontrols/imagine/images/tooltip-background.9.png b/src/quickcontrols/imagine/images/tooltip-background.9.png
new file mode 100644
index 0000000000..2e0dc67c3e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tooltip-background.9.png
diff --git a/src/quickcontrols/imagine/images/tooltip-background@2x.9.png b/src/quickcontrols/imagine/images/tooltip-background@2x.9.png
new file mode 100644
index 0000000000..dd5609982f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tooltip-background@2x.9.png
diff --git a/src/quickcontrols/imagine/images/tooltip-background@3x.9.png b/src/quickcontrols/imagine/images/tooltip-background@3x.9.png
new file mode 100644
index 0000000000..fed465427e
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tooltip-background@3x.9.png
diff --git a/src/quickcontrols/imagine/images/tooltip-background@4x.9.png b/src/quickcontrols/imagine/images/tooltip-background@4x.9.png
new file mode 100644
index 0000000000..9bc964908f
--- /dev/null
+++ b/src/quickcontrols/imagine/images/tooltip-background@4x.9.png
diff --git a/src/quickcontrols/imagine/impl/CMakeLists.txt b/src/quickcontrols/imagine/impl/CMakeLists.txt
new file mode 100644
index 0000000000..830176f13e
--- /dev/null
+++ b/src/quickcontrols/imagine/impl/CMakeLists.txt
@@ -0,0 +1,46 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2imaginestyleimplplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "OpacityMask.qml"
+)
+
+qt_internal_add_qml_module(qtquickcontrols2imaginestyleimplplugin
+    URI "QtQuick.Controls.Imagine.impl"
+    VERSION "${PROJECT_VERSION}"
+    CLASS_NAME QtQuickControls2ImagineStyleImplPlugin
+    PLUGIN_TARGET qtquickcontrols2imaginestyleimplplugin
+    NO_PLUGIN_OPTIONAL
+    QML_FILES
+        ${qml_files}
+    IMPORTS
+        QtQuick.Controls.impl/auto
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::Gui
+        Qt::QmlPrivate
+        Qt::QuickControls2ImplPrivate
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+)
+
+# Resources:
+set(qmake_qtquickcontrols2imaginestyleimplplugin_resource_files
+    "shaders/+glslcore/OpacityMask.frag"
+    "shaders/+qsb/OpacityMask.frag"
+    "shaders/OpacityMask.frag"
+)
+
+qt_internal_add_resource(qtquickcontrols2imaginestyleimplplugin "qmake_qtquickcontrols2imaginestyleimplplugin"
+    PREFIX
+        "qt-project.org/imports/QtQuick/Controls/Imagine/impl"
+    FILES
+        ${qmake_qtquickcontrols2imaginestyleimplplugin_resource_files}
+)
diff --git a/src/quickcontrols/imagine/impl/OpacityMask.qml b/src/quickcontrols/imagine/impl/OpacityMask.qml
new file mode 100644
index 0000000000..6108901129
--- /dev/null
+++ b/src/quickcontrols/imagine/impl/OpacityMask.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+
+/*
+   A cross-graphics API implementation of QtGraphicalEffects' OpacityMask.
+ */
+Item {
+    id: rootItem
+
+    property variant source
+    property variant maskSource
+    property bool cached: false
+
+    ShaderEffectSource {
+        id: cacheItem
+        anchors.fill: parent
+        visible: rootItem.cached
+        smooth: true
+        sourceItem: shaderItem
+        live: true
+        hideSource: visible
+    }
+
+    ShaderEffect {
+        id: shaderItem
+        property variant source: rootItem.source
+        property variant maskSource: rootItem.maskSource
+
+        anchors.fill: parent
+
+        fragmentShader: "qrc:/qt-project.org/imports/QtQuick/Controls/Imagine/impl/shaders/OpacityMask.frag"
+    }
+}
diff --git a/src/quickcontrols/imagine/impl/shaders/+glslcore/OpacityMask.frag b/src/quickcontrols/imagine/impl/shaders/+glslcore/OpacityMask.frag
new file mode 100644
index 0000000000..529e269614
--- /dev/null
+++ b/src/quickcontrols/imagine/impl/shaders/+glslcore/OpacityMask.frag
@@ -0,0 +1,13 @@
+#version 150
+
+uniform float qt_Opacity;
+uniform sampler2D source;
+uniform sampler2D maskSource;
+
+in vec2 qt_TexCoord0;
+out vec4 fragColor;
+
+void main()
+{
+    fragColor = texture(source, qt_TexCoord0.st) * (texture(maskSource, qt_TexCoord0.st).a) * qt_Opacity;
+}
diff --git a/src/quickcontrols/imagine/impl/shaders/+qsb/OpacityMask.frag b/src/quickcontrols/imagine/impl/shaders/+qsb/OpacityMask.frag
new file mode 100644
index 0000000000..331b30b807
--- /dev/null
+++ b/src/quickcontrols/imagine/impl/shaders/+qsb/OpacityMask.frag
diff --git a/src/quickcontrols/imagine/impl/shaders/OpacityMask.frag b/src/quickcontrols/imagine/impl/shaders/OpacityMask.frag
new file mode 100644
index 0000000000..84f9bc3ee6
--- /dev/null
+++ b/src/quickcontrols/imagine/impl/shaders/OpacityMask.frag
@@ -0,0 +1,7 @@
+varying highp vec2 qt_TexCoord0;
+uniform highp float qt_Opacity;
+uniform lowp sampler2D source;
+uniform lowp sampler2D maskSource;
+void main(void) {
+    gl_FragColor = texture2D(source, qt_TexCoord0.st) * (texture2D(maskSource, qt_TexCoord0.st).a) * qt_Opacity;
+}
diff --git a/src/quickcontrols/imagine/impl/shaders/OpacityMask_rhi.frag b/src/quickcontrols/imagine/impl/shaders/OpacityMask_rhi.frag
new file mode 100644
index 0000000000..9ae3249978
--- /dev/null
+++ b/src/quickcontrols/imagine/impl/shaders/OpacityMask_rhi.frag
@@ -0,0 +1,17 @@
+#version 440
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+} ubuf;
+
+layout(binding = 1) uniform sampler2D source;
+layout(binding = 2) uniform sampler2D maskSource;
+
+void main()
+{
+    fragColor = texture(source, qt_TexCoord0.st) * (texture(maskSource, qt_TexCoord0.st).a) * ubuf.qt_Opacity;
+}
diff --git a/src/quickcontrols/imagine/impl/shaders/compile.bat b/src/quickcontrols/imagine/impl/shaders/compile.bat
new file mode 100644
index 0000000000..42b8cb45c0
--- /dev/null
+++ b/src/quickcontrols/imagine/impl/shaders/compile.bat
@@ -0,0 +1,4 @@
+:: Copyright (C) 2020 The Qt Company Ltd.
+:: SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+qsb --glsl "150,120,100 es" --hlsl 50 --msl 12 -o +qsb/OpacityMask.frag OpacityMask_rhi.frag
diff --git a/src/quickcontrols/imagine/qquickimaginestyle.cpp b/src/quickcontrols/imagine/qquickimaginestyle.cpp
new file mode 100644
index 0000000000..377103e2f2
--- /dev/null
+++ b/src/quickcontrols/imagine/qquickimaginestyle.cpp
@@ -0,0 +1,137 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickimaginestyle_p.h"
+
+#include <QtCore/qsettings.h>
+#include <QtQuickControls2/private/qquickstyle_p.h>
+
+QT_BEGIN_NAMESPACE
+
+Q_GLOBAL_STATIC_WITH_ARGS(QString, GlobalPath, (QLatin1String("qrc:/qt-project.org/imports/QtQuick/Controls/Imagine/images/")))
+
+static QString ensureSlash(const QString &path)
+{
+    const QChar slash = QLatin1Char('/');
+    return path.endsWith(slash) ? path : path + slash;
+}
+
+QQuickImagineStyle::QQuickImagineStyle(QObject *parent)
+    : QQuickAttachedPropertyPropagator(parent),
+      m_path(*GlobalPath())
+{
+    init();
+}
+
+QQuickImagineStyle *QQuickImagineStyle::qmlAttachedProperties(QObject *object)
+{
+    return new QQuickImagineStyle(object);
+}
+
+QString QQuickImagineStyle::path() const
+{
+    return m_path;
+}
+
+void QQuickImagineStyle::setPath(const QString &path)
+{
+    m_explicitPath = true;
+    if (m_path == path)
+        return;
+
+    m_path = path;
+    propagatePath();
+
+    emit pathChanged();
+}
+
+void QQuickImagineStyle::inheritPath(const QString &path)
+{
+    if (m_explicitPath || m_path == path)
+        return;
+
+    m_path = path;
+    propagatePath();
+    emit pathChanged();
+}
+
+void QQuickImagineStyle::propagatePath()
+{
+    const auto styles = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : styles) {
+        QQuickImagineStyle *imagine = qobject_cast<QQuickImagineStyle *>(child);
+        if (imagine)
+            imagine->inheritPath(m_path);
+    }
+}
+
+void QQuickImagineStyle::resetPath()
+{
+    if (!m_explicitPath)
+        return;
+
+    m_explicitPath = false;
+    QQuickImagineStyle *imagine = qobject_cast<QQuickImagineStyle *>(attachedParent());
+    inheritPath(imagine ? imagine->path() : *GlobalPath());
+}
+
+QUrl QQuickImagineStyle::url() const
+{
+    // Using ApplicationWindow as an example, its NinePatchImage url
+    // was previously assigned like this:
+    //
+    // soruce: Imagine.path + "applicationwindow-background"
+    //
+    // If Imagine.path is set to ":/images" by the user, then the final URL would be:
+    //
+    // QUrl("file:///home/user/qt/qtbase/qml/QtQuick/Controls/Imagine/:/images/applicationwindow-background")
+    //
+    // To ensure that the correct URL is constructed, we do it ourselves here,
+    // and then the control QML files use the "url" property instead.
+    const QString path = ensureSlash(m_path);
+    if (path.startsWith(QLatin1String("qrc")))
+        return QUrl(path);
+
+    if (path.startsWith(QLatin1String(":/")))
+        return QUrl(QLatin1String("qrc") + path);
+
+    return QUrl::fromLocalFile(path);
+}
+
+void QQuickImagineStyle::attachedParentChange(QQuickAttachedPropertyPropagator *newParent, QQuickAttachedPropertyPropagator *oldParent)
+{
+    Q_UNUSED(oldParent);
+    QQuickImagineStyle *imagine = qobject_cast<QQuickImagineStyle *>(newParent);
+    if (imagine)
+        inheritPath(imagine->path());
+}
+
+static QByteArray resolveSetting(const QByteArray &env, const QSharedPointer<QSettings> &settings, const QString &name)
+{
+    QByteArray value = qgetenv(env);
+#if QT_CONFIG(settings)
+    if (value.isNull() && !settings.isNull())
+        value = settings->value(name).toByteArray();
+#endif
+    return value;
+}
+
+void QQuickImagineStyle::init()
+{
+    static bool globalsInitialized = false;
+    if (!globalsInitialized) {
+        QSharedPointer<QSettings> settings = QQuickStylePrivate::settings(QStringLiteral("Imagine"));
+
+        QString path = QString::fromUtf8(resolveSetting("QT_QUICK_CONTROLS_IMAGINE_PATH", settings, QStringLiteral("Path")));
+        if (!path.isEmpty())
+            *GlobalPath() = m_path = ensureSlash(path);
+
+        globalsInitialized = true;
+    }
+
+    QQuickAttachedPropertyPropagator::initialize(); // TODO: lazy init?
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickimaginestyle_p.cpp"
diff --git a/src/quickcontrols/imagine/qquickimaginestyle_p.h b/src/quickcontrols/imagine/qquickimaginestyle_p.h
new file mode 100644
index 0000000000..81f17fb58c
--- /dev/null
+++ b/src/quickcontrols/imagine/qquickimaginestyle_p.h
@@ -0,0 +1,62 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKIMAGINESTYLE_P_H
+#define QQUICKIMAGINESTYLE_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtCore/qvariant.h>
+#include <QtQml/qqml.h>
+#include <QtQuickControls2/qquickattachedpropertypropagator.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickImagineStyle : public QQuickAttachedPropertyPropagator
+{
+    Q_OBJECT
+    Q_PROPERTY(QString path READ path WRITE setPath RESET resetPath NOTIFY pathChanged FINAL)
+    Q_PROPERTY(QUrl url READ url NOTIFY pathChanged FINAL)
+    QML_NAMED_ELEMENT(Imagine)
+    QML_ATTACHED(QQuickImagineStyle)
+    QML_UNCREATABLE("")
+    QML_ADDED_IN_VERSION(2, 3)
+
+public:
+    explicit QQuickImagineStyle(QObject *parent = nullptr);
+
+    static QQuickImagineStyle *qmlAttachedProperties(QObject *object);
+
+    QString path() const;
+    void setPath(const QString &path);
+    void inheritPath(const QString &path);
+    void propagatePath();
+    void resetPath();
+
+    QUrl url() const;
+
+Q_SIGNALS:
+    void pathChanged();
+
+protected:
+    void attachedParentChange(QQuickAttachedPropertyPropagator *newParent, QQuickAttachedPropertyPropagator *oldParent) override;
+
+private:
+    void init();
+
+    bool m_explicitPath = false;
+    QString m_path;
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKIMAGINESTYLE_P_H
diff --git a/src/quickcontrols/imagine/qquickimaginetheme.cpp b/src/quickcontrols/imagine/qquickimaginetheme.cpp
new file mode 100644
index 0000000000..921034962a
--- /dev/null
+++ b/src/quickcontrols/imagine/qquickimaginetheme.cpp
@@ -0,0 +1,33 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickimaginetheme_p.h"
+
+#include <QtQuickTemplates2/private/qquicktheme_p.h>
+
+QT_BEGIN_NAMESPACE
+
+void QQuickImagineTheme::initialize(QQuickTheme *theme)
+{
+    QFont systemFont;
+    systemFont.setFamilies(QStringList{QLatin1String("Open Sans")});
+    theme->setFont(QQuickTheme::System, systemFont);
+
+    const QColor accentColor = QColor::fromRgb(0x4fc1e9);
+    const QColor windowTextColor = QColor::fromRgb(0x434a54);
+    const QColor disabledWindowTextColor = QColor::fromRgb(0xccd1d9);
+
+    QPalette systemPalette;
+    systemPalette.setColor(QPalette::ButtonText, Qt::white);
+    systemPalette.setColor(QPalette::BrightText, Qt::white);
+    systemPalette.setColor(QPalette::Highlight, accentColor);
+    systemPalette.setColor(QPalette::HighlightedText, Qt::white);
+    systemPalette.setColor(QPalette::Text, windowTextColor);
+    systemPalette.setColor(QPalette::ToolTipText, Qt::white);
+    systemPalette.setColor(QPalette::WindowText, windowTextColor);
+    systemPalette.setColor(QPalette::Disabled, QPalette::Text, disabledWindowTextColor);
+    systemPalette.setColor(QPalette::Disabled, QPalette::WindowText, disabledWindowTextColor);
+    theme->setPalette(QQuickTheme::System, systemPalette);
+}
+
+QT_END_NAMESPACE
diff --git a/src/quickcontrols/imagine/qquickimaginetheme_p.h b/src/quickcontrols/imagine/qquickimaginetheme_p.h
new file mode 100644
index 0000000000..93b3063b78
--- /dev/null
+++ b/src/quickcontrols/imagine/qquickimaginetheme_p.h
@@ -0,0 +1,32 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKIMAGINETHEME_P_H
+#define QQUICKIMAGINETHEME_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickTheme;
+
+class QQuickImagineTheme
+{
+public:
+    static void initialize(QQuickTheme *theme);
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKIMAGINETHEME_P_H
diff --git a/src/quickcontrols/imagine/qtquickcontrols2imaginestyleplugin.cpp b/src/quickcontrols/imagine/qtquickcontrols2imaginestyleplugin.cpp
new file mode 100644
index 0000000000..ddf3927562
--- /dev/null
+++ b/src/quickcontrols/imagine/qtquickcontrols2imaginestyleplugin.cpp
@@ -0,0 +1,49 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickimaginestyle_p.h"
+#include "qquickimaginetheme_p.h"
+
+#include <QtCore/qloggingcategory.h>
+#include <QtQml/qqml.h>
+#include <QtQuickControls2/private/qquickstyleplugin_p.h>
+#include <QtQuickTemplates2/private/qquicktheme_p.h>
+
+QT_BEGIN_NAMESPACE
+
+extern void qml_register_types_QtQuick_Controls_Imagine();
+Q_GHS_KEEP_REFERENCE(qml_register_types_QtQuick_Controls_Imagine);
+
+class QtQuickControls2ImagineStylePlugin : public QQuickStylePlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtQuickControls2ImagineStylePlugin(QObject *parent = nullptr);
+
+    QString name() const override;
+    void initializeTheme(QQuickTheme *theme) override;
+
+    QQuickImagineTheme theme;
+};
+
+QtQuickControls2ImagineStylePlugin::QtQuickControls2ImagineStylePlugin(QObject *parent) : QQuickStylePlugin(parent)
+{
+    volatile auto registration = &qml_register_types_QtQuick_Controls_Imagine;
+    Q_UNUSED(registration);
+}
+
+QString QtQuickControls2ImagineStylePlugin::name() const
+{
+    return QStringLiteral("Imagine");
+}
+
+void QtQuickControls2ImagineStylePlugin::initializeTheme(QQuickTheme *theme)
+{
+    this->theme.initialize(theme);
+}
+
+QT_END_NAMESPACE
+
+#include "qtquickcontrols2imaginestyleplugin.moc"
diff --git a/src/quickcontrols/ios/Button.qml b/src/quickcontrols/ios/Button.qml
new file mode 100644
index 0000000000..6d8a6f8e09
--- /dev/null
+++ b/src/quickcontrols/ios/Button.qml
@@ -0,0 +1,48 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.Button {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    bottomPadding: 4
+    topPadding: 4
+    rightPadding: 4
+    leftPadding: 4
+
+    icon.width: 17
+    icon.height: 17
+    icon.color: control.flat ? (control.enabled ? (control.down ? control.palette.highlight : control.palette.button)
+                                                : control.palette.mid)
+                             : control.palette.buttonText
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.flat ? (control.enabled ? (control.down ? control.palette.highlight : control.palette.button)
+                                               : control.palette.mid)
+                            : control.palette.buttonText
+    }
+
+    background: Rectangle {
+        implicitHeight: 17
+        implicitWidth: 10
+        radius: 4
+
+        visible: !control.flat
+        color: !control.down ? control.palette.button : control.palette.highlight
+    }
+}
diff --git a/src/quickcontrols/ios/CMakeLists.txt b/src/quickcontrols/ios/CMakeLists.txt
new file mode 100644
index 0000000000..83faad5315
--- /dev/null
+++ b/src/quickcontrols/ios/CMakeLists.txt
@@ -0,0 +1,107 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2iosstyleplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "Slider.qml"
+    "RangeSlider.qml"
+    "Switch.qml"
+    "Button.qml"
+    "CheckBox.qml"
+    "RadioButton.qml"
+    "SpinBox.qml"
+    "ProgressBar.qml"
+    "Dial.qml"
+    "PageIndicator.qml"
+    "TextArea.qml"
+    "TextField.qml"
+    "ScrollIndicator.qml"
+    "ItemDelegate.qml"
+    "SwitchDelegate.qml"
+    "RadioDelegate.qml"
+    "CheckDelegate.qml"
+    "SwipeDelegate.qml"
+    "StackView.qml"
+    "TreeViewDelegate.qml"
+    "ScrollBar.qml"
+    "TabButton.qml"
+    "ToolButton.qml"
+    "MenuBarItem.qml"
+    "Frame.qml"
+    "GroupBox.qml"
+    "SplitView.qml"
+    "TabBar.qml"
+    "ToolBar.qml"
+    "MenuBar.qml"
+    "Drawer.qml"
+    "Popup.qml"
+    "Menu.qml"
+    "MenuItem.qml"
+    "MenuSeparator.qml"
+)
+
+set_source_files_properties(Slider.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.2;6.0"
+)
+
+qt_internal_add_qml_module(qtquickcontrols2iosstyleplugin
+    URI "QtQuick.Controls.iOS"
+    VERSION "${PROJECT_VERSION}"
+    CLASS_NAME QtQuickControls2IOSStylePlugin
+    IMPORTS
+        QtQuick.Controls.Basic/auto
+    PAST_MAJOR_VERSIONS 2
+    PLUGIN_TARGET qtquickcontrols2iosstyleplugin
+    NO_PLUGIN_OPTIONAL
+    NO_GENERATE_PLUGIN_SOURCE
+    SOURCES
+        qtquickcontrols2iosstyleplugin.cpp
+        qquickiostheme_p.h qquickiostheme.mm
+    QML_FILES
+        ${qml_files}
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::GuiPrivate
+        Qt::QmlPrivate
+        Qt::QuickControls2Private
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+        Qt::QuickControls2ImplPrivate
+)
+
+qt_internal_extend_target(qtquickcontrols2iosstyleplugin CONDITION APPLE AND IOS
+    LIBRARIES
+        ${FWUIKit}
+)
+
+file(GLOB resource_glob RELATIVE "${CMAKE_CURRENT_SOURCE_DIR}" "images/*.png")
+foreach(file IN LISTS resource_glob_0)
+    set_source_files_properties("${CMAKE_CURRENT_SOURCE_DIR}/${file}" PROPERTIES QT_RESOURCE_ALIAS "${file}")
+endforeach()
+
+# Resources:
+set(qmake_qtquickcontrols2iosstyleplugin_resource_files
+    ${resource_glob}
+)
+
+qt_internal_add_resource(qtquickcontrols2iosstyleplugin "qmake_qtquickcontrols2iosstyleplugin"
+    PREFIX
+        "/qt-project.org/imports/QtQuick/Controls/iOS"
+    FILES
+        ${qmake_qtquickcontrols2iosstyleplugin_resource_files}
+)
+
+add_subdirectory(impl)
+
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2iosstyleplugin
+                                              qtquickcontrols2iosstyleimplplugin)
+
+# Basic style is the required fallback style.
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2iosstyleplugin
+                                             qtquickcontrols2basicstyleplugin)
diff --git a/src/quickcontrols/ios/CheckBox.qml b/src/quickcontrols/ios/CheckBox.qml
new file mode 100644
index 0000000000..2ef8f83114
--- /dev/null
+++ b/src/quickcontrols/ios/CheckBox.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.iOS.impl
+import QtQuick.Controls.impl
+
+T.CheckBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 6
+
+    indicator: Image {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        opacity: control.enabled ? 1 : 0.5
+
+        source: IOS.url + (control.checkState === Qt.Unchecked ?  "radiobutton-indicator" : "checkbox-indicator")
+        ImageSelector on source {
+            states: [
+                {"checked": control.checkState === Qt.Checked},
+                {"partially-checked": control.checkState === Qt.PartiallyChecked},
+                {"light": Qt.styleHints.appearance === Qt.Light},
+                {"dark": Qt.styleHints.appearance === Qt.Dark}
+            ]
+        }
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+}
diff --git a/src/quickcontrols/ios/CheckDelegate.qml b/src/quickcontrols/ios/CheckDelegate.qml
new file mode 100644
index 0000000000..fbd2a4ce35
--- /dev/null
+++ b/src/quickcontrols/ios/CheckDelegate.qml
@@ -0,0 +1,75 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.iOS.impl
+import QtQuick.Controls.impl
+
+T.CheckDelegate {
+    id: control
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+    padding: 7
+    leftPadding: 16
+    rightPadding: 16
+    spacing: 14
+
+    icon.width: 29
+    icon.height: 29
+    icon.color: control.enabled ? control.palette.text : control.palette.mid
+
+    indicator: Image {
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        opacity: control.enabled ? 1 : 0.5
+
+        source: IOS.url + (control.checkState === Qt.Unchecked ?  "radiobutton-indicator" : "checkbox-indicator")
+        ImageSelector on source {
+            states: [
+                {"checked": control.checkState === Qt.Checked},
+                {"partially-checked": control.checkState === Qt.PartiallyChecked},
+                {"light": Qt.styleHints.appearance === Qt.Light},
+                {"dark": Qt.styleHints.appearance === Qt.Dark}
+            ]
+        }
+    }
+
+    contentItem: IconLabel {
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.palette.text : control.palette.mid
+    }
+
+    background: Rectangle {
+        implicitHeight: 44
+        color: Qt.styleHints.appearance === Qt.Dark ? control.palette.light : control.palette.base
+        NinePatchImage {
+            property real offset: control.icon.source.toString() !== "" ? control.icon.width + control.spacing : 0
+            x: control.down ? 0 : control.leftPadding + offset
+            y: control.down ? -1 : 0
+            height: control.height + (control.down ? 1 : 0)
+            width: control.down ? control.width : control.availableWidth + control.rightPadding - offset
+            source: IOS.url + "itemdelegate-background"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                    {"pressed": control.down}
+                ]
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/Dial.qml b/src/quickcontrols/ios/Dial.qml
new file mode 100644
index 0000000000..2a4c9666bc
--- /dev/null
+++ b/src/quickcontrols/ios/Dial.qml
@@ -0,0 +1,102 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+import QtQuick.Shapes
+
+T.Dial {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    leftInset: handle ? handle.width / 2 : 0
+    rightInset: handle ? handle.width / 2 : 0
+    topInset: handle ? handle.height / 2 : 0
+    bottomInset: handle ? handle.height / 2 : 0
+
+    background: Item {
+        implicitWidth: 104
+        implicitHeight: 104
+        x: control.leftInset + (control.availableWidth - width) / 2
+        y: control.topInset + (control.availableHeight - height) / 2
+
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            implicitWidth: parent.implicitWidth
+            implicitHeight: parent.implicitHeight
+            width: Math.max(50, Math.min(control.background.width, control.background.height))
+            height: width
+            color: "transparent"
+            border.color: control.palette.mid
+            border.width: 4
+            radius: width * 0.5
+            z: -1
+
+            opacity: control.enabled? 1 : 0.5
+        }
+
+        Shape {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            implicitWidth: parent.implicitWidth
+            implicitHeight: parent.implicitHeight
+            width: Math.max(50, Math.min(control.background.width, control.background.height))
+            height: width
+            layer.enabled: true
+            layer.samples: 4
+
+            ShapePath {
+                fillColor: "transparent"
+                strokeColor: control.palette.button
+                strokeWidth: 4
+
+                capStyle: ShapePath.RoundCap
+
+                PathAngleArc {
+                    centerX: control.background.children[0].width / 2
+                    centerY: control.background.children[0].height / 2
+                    radiusX: control.background.children[0].width / 2 - 2
+                    radiusY: radiusX
+                    startAngle: -230
+                    sweepAngle: 140 + control.angle
+                }
+            }
+        }
+    }
+
+    handle: Item {
+        height: dialHandle.height - dialHandle.topInset - dialHandle.bottomInset
+        width: dialHandle.width - dialHandle.rightInset - dialHandle.leftInset
+        x: control.background.x + control.background.width / 2 - width / 2
+        y: control.background.y + control.background.height / 2 - height / 2
+
+        transform: [
+            Translate {
+                x: Math.cos((angle - 90) * Math.PI / 180) * Math.min(control.background.width, control.background.height) * 0.5;
+                y: Math.sin((angle - 90) * Math.PI / 180) * Math.min(control.background.width, control.background.height) * 0.5;
+            }
+        ]
+
+        readonly property NinePatchImage dialHandle: NinePatchImage {
+            parent: control.handle
+            x: -leftInset
+            y: -topInset
+
+            source: IOS.url + "slider-handle"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                    {"disabled": !control.enabled}
+                ]
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/Drawer.qml b/src/quickcontrols/ios/Drawer.qml
new file mode 100644
index 0000000000..52cdb8b372
--- /dev/null
+++ b/src/quickcontrols/ios/Drawer.qml
@@ -0,0 +1,61 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.Drawer {
+    id: control
+
+    parent: T.Overlay.overlay
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    property real inset: control.dim ? 8 : 0
+    property bool vertical: control.edge === Qt.LeftEdge || control.edge === Qt.RightEdge
+
+    rightInset: background && control.edge === Qt.LeftEdge ? -inset : 0
+    leftInset: background && control.edge === Qt.RightEdge ? -inset : 0
+    bottomInset: background && control.edge === Qt.TopEdge ? -inset : 0
+    topInset: background && control.edge === Qt.BottomEdge ? -inset : 0
+
+    enter: Transition { SmoothedAnimation { velocity: 5 } }
+    exit: Transition { SmoothedAnimation { velocity: 5 } }
+
+    background: Item {
+        NinePatchImage {
+            source: IOS.url + "drawer-background"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                    {"modal": control.modal}
+                ]
+            }
+            y: (parent.height - height) / 2
+            x: (parent.width - width) / 2
+            rotation: control.edge === Qt.TopEdge ? 90 : (control.edge === Qt.BottomEdge ? -90
+                                                  : (control.edge === Qt.RightEdge ? 180 : 0))
+            width: vertical ? parent.width : parent.height
+            height: vertical ? parent.height : parent.width
+        }
+        Rectangle {
+            width: vertical ? 1 : parent.width
+            height: vertical ? parent.height : 1
+            color: control.palette.mid
+            x: control.edge === Qt.LeftEdge ? parent.width - 1 - inset : (control.edge === Qt.RightEdge ? inset : 0)
+            y: control.edge === Qt.BottomEdge ? inset : (control.edge === Qt.TopEdge ? parent.height - 1 - inset : 0)
+            z: 10
+        }
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: Color.transparent(control.palette.mid, 0.5)
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+}
diff --git a/src/quickcontrols/ios/Frame.qml b/src/quickcontrols/ios/Frame.qml
new file mode 100644
index 0000000000..5c52269a3c
--- /dev/null
+++ b/src/quickcontrols/ios/Frame.qml
@@ -0,0 +1,24 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.Frame {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 16
+    leftPadding: 20
+    rightPadding: 20
+    spacing: 10
+
+    background: Rectangle {
+        radius: 9
+        color: Qt.styleHints.appearance === Qt.Dark ? control.palette.light : control.palette.base
+    }
+}
diff --git a/src/quickcontrols/ios/GroupBox.qml b/src/quickcontrols/ios/GroupBox.qml
new file mode 100644
index 0000000000..3adc599ddf
--- /dev/null
+++ b/src/quickcontrols/ios/GroupBox.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.GroupBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitLabelWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 16
+    leftPadding: 20
+    rightPadding: 20
+    topPadding: padding + (implicitLabelWidth > 0 ? implicitLabelHeight + spacing : 0)
+    spacing: 10
+
+    label: Text {
+        x: control.leftPadding
+        width: control.availableWidth
+
+        text: control.title
+        font.pointSize: control.font.pointSize - 2.0
+        font.capitalization: Font.AllUppercase
+        color: control.palette.placeholderText
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: Rectangle {
+        y: control.topPadding - control.bottomPadding
+        width: parent.width
+        height: parent.height - control.topPadding + control.bottomPadding
+        radius: 9
+        color: Qt.styleHints.appearance === Qt.Dark ? control.palette.light : control.palette.base
+    }
+}
diff --git a/src/quickcontrols/ios/ItemDelegate.qml b/src/quickcontrols/ios/ItemDelegate.qml
new file mode 100644
index 0000000000..28146e51fd
--- /dev/null
+++ b/src/quickcontrols/ios/ItemDelegate.qml
@@ -0,0 +1,56 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.ItemDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+    padding: 7
+    leftPadding: 16
+    rightPadding: 16
+    spacing: 14
+
+    icon.width: 29
+    icon.height: 29
+    icon.color: control.enabled ? control.palette.text : control.palette.mid
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.palette.text : control.palette.mid
+    }
+
+    background: Rectangle {
+        implicitHeight: 44
+        color: Qt.styleHints.appearance === Qt.Dark ? control.palette.light : control.palette.base
+        NinePatchImage {
+            property real offset: control.icon.source.toString() !== "" ? control.icon.width + control.spacing : 0
+            x: control.down ? 0 : control.leftPadding + offset
+            y: control.down ? -1 : 0
+            height: control.height + (control.down ? 1 : 0)
+            width: control.down ? control.width : control.availableWidth + control.rightPadding - offset
+            source: IOS.url + "itemdelegate-background"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                    {"pressed": control.down}
+                ]
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/Menu.qml b/src/quickcontrols/ios/Menu.qml
new file mode 100644
index 0000000000..437731c19e
--- /dev/null
+++ b/src/quickcontrols/ios/Menu.qml
@@ -0,0 +1,71 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.Menu {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    delegate: MenuItem {}
+
+    margins: 0
+    cascade: true
+    dim: modal || control.parent && control.parent.menu
+    overlap: control.width
+
+    enter: Transition {
+        NumberAnimation { property: "scale"; from: 0.2; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
+        NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutCubic; duration: 150 }
+    }
+
+    exit: Transition {
+        NumberAnimation { property: "scale"; from: 1.0; to: 0.0; easing.type: Easing.OutQuint; duration: 220 }
+        NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
+    }
+
+    contentItem: ListView {
+        implicitHeight: contentHeight
+        model: control.contentModel
+        interactive: Window.window
+                        ? contentHeight + control.topPadding + control.bottomPadding > Window.window.height
+                        : false
+        clip: true
+        currentIndex: control.currentIndex
+
+        T.ScrollIndicator.vertical: ScrollIndicator { }
+    }
+
+    background: Item {
+        implicitHeight: 44
+        implicitWidth: 250
+        NinePatchImage {
+            width: parent.width
+            height: parent.height
+            source: IOS.url + "menu-background"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark}
+                ]
+            }
+        }
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: Color.transparent("black", 0.5)
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Color.transparent("black", 0.5)
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+}
diff --git a/src/quickcontrols/ios/MenuBar.qml b/src/quickcontrols/ios/MenuBar.qml
new file mode 100644
index 0000000000..06f549e82a
--- /dev/null
+++ b/src/quickcontrols/ios/MenuBar.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.MenuBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    delegate: MenuBarItem { }
+
+    contentItem: Row {
+        spacing: control.spacing
+        Repeater {
+            model: control.contentModel
+        }
+    }
+
+    background: Rectangle {
+        opacity: 0.98
+        color: Qt.styleHints.appearance === Qt.Dark ? control.palette.light : control.palette.base
+        Rectangle {
+            height: 1
+            width: parent.width
+            color: control.palette.mid
+            y: control.position === T.TabBar.Footer ? 0 : parent.height - 1
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/MenuBarItem.qml b/src/quickcontrols/ios/MenuBarItem.qml
new file mode 100644
index 0000000000..5fe36693e4
--- /dev/null
+++ b/src/quickcontrols/ios/MenuBarItem.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.MenuBarItem {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 6
+    padding: 6
+
+    icon.width: 25
+    icon.height: 25
+    icon.color: control.enabled ? (control.down ? control.palette.highlight : control.palette.button)
+                                : control.palette.mid
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? (control.down ? control.palette.highlight : control.palette.button)
+                               : control.palette.mid
+    }
+
+    background: Item {
+        implicitHeight: 49
+    }
+}
diff --git a/src/quickcontrols/ios/MenuItem.qml b/src/quickcontrols/ios/MenuItem.qml
new file mode 100644
index 0000000000..85137f5a21
--- /dev/null
+++ b/src/quickcontrols/ios/MenuItem.qml
@@ -0,0 +1,104 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.MenuItem {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    leftPadding: 12
+    rightPadding: 18
+    spacing: 9
+
+    icon.width: 19
+    icon.height: 19
+    icon.color: control.palette.windowText
+
+    property bool isSingleItem: control.menu && control.menu.count === 1
+    property bool isFirstItem: !isSingleItem && control.menu && control.menu.itemAt(0) === control ? true : false
+    property bool isLastItem: !isSingleItem && control.menu && control.menu.itemAt(control.menu.count - 1) === control ? true : false
+    property real indicatorWidth: 12
+
+    contentItem: IconLabel {
+        readonly property real padding: control.indicatorWidth + control.spacing
+        leftPadding: !control.mirrored ? padding : 0
+        rightPadding: control.mirrored ? padding : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+    }
+
+    arrow: ColorImage {
+        x: control.mirrored ? control.width - width - control.rightPadding : control.leftPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        width: 7
+        height: 12
+        rotation: control.subMenu && (control.down || control.subMenu.visible) ? 90 : 0
+
+        visible: control.subMenu
+        opacity: control.enabled ? 1 : 0.5
+        mirror: control.mirrored
+        color: control.palette.windowText
+        source: control.subMenu ? "qrc:/qt-project.org/imports/QtQuick/Controls/iOS/images/arrow-indicator-light.png" : ""
+
+        Behavior on rotation { RotationAnimation { duration: 100 } }
+    }
+
+    indicator: ColorImage {
+        x: control.mirrored ? control.width - width - control.rightPadding : control.leftPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        width: control.indicatorWidth
+        height: control.indicatorWidth
+
+        visible: control.checked
+        source: control.checkable ? "qrc:/qt-project.org/imports/QtQuick/Controls/iOS/images/radiodelegate-indicator-light.png" : ""
+        color: control.palette.windowText
+    }
+
+    background: Item {
+        implicitHeight: 44
+        implicitWidth: 250
+        NinePatchImage {
+            y: control.isLastItem ? -1 : 0
+            width: parent.width
+            height: control.isLastItem ? parent.height + 1 : parent.height
+            rotation: control.isLastItem ? 180 : 0
+            visible: !(isSingleItem && !control.down)
+            source: IOS.url + "menuitem-background"
+            NinePatchImageSelector on source {
+                states: [
+                    {"edge": control.isFirstItem || control.isLastItem},
+                    {"single": control.isSingleItem},
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                    {"pressed": control.down}
+                ]
+            }
+        }
+    }
+
+    states: [
+        State {
+            name: "submenu-opened"
+            when: control.subMenu && control.subMenu.visible
+            PropertyChanges { target: control.menu; scale: 0.9 }
+        }
+    ]
+}
+
diff --git a/src/quickcontrols/ios/MenuSeparator.qml b/src/quickcontrols/ios/MenuSeparator.qml
new file mode 100644
index 0000000000..ba69005611
--- /dev/null
+++ b/src/quickcontrols/ios/MenuSeparator.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.MenuSeparator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    contentItem: NinePatchImage {
+        source: IOS.url + "menuseparator-separator"
+        NinePatchImageSelector on source {
+            states: [
+                {"light": Qt.styleHints.appearance === Qt.Light},
+                {"dark": Qt.styleHints.appearance === Qt.Dark}
+            ]
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/PageIndicator.qml b/src/quickcontrols/ios/PageIndicator.qml
new file mode 100644
index 0000000000..036f952ea8
--- /dev/null
+++ b/src/quickcontrols/ios/PageIndicator.qml
@@ -0,0 +1,37 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.PageIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    delegate: Image {
+        source: IOS.url + "pageindicator-delegate"
+        ImageSelector on source {
+            states: [
+                {"light": Qt.styleHints.appearance === Qt.Light},
+                {"dark": Qt.styleHints.appearance === Qt.Dark},
+                {"current": index === control.currentIndex},
+            ]
+        }
+        opacity: control.enabled ? 1 : 0.5
+    }
+
+    contentItem: Row {
+        spacing: 10
+
+        Repeater {
+            model: control.count
+            delegate: control.delegate
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/Popup.qml b/src/quickcontrols/ios/Popup.qml
new file mode 100644
index 0000000000..47a6157f71
--- /dev/null
+++ b/src/quickcontrols/ios/Popup.qml
@@ -0,0 +1,54 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.Popup {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: 23
+    padding: 16
+
+    enter: Transition {
+        NumberAnimation { property: "scale"; from: 1.5; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
+        NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutCubic; duration: 150 }
+    }
+
+    exit: Transition {
+        NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
+    }
+
+    background: Item {
+        implicitWidth: 270
+        implicitHeight: 140
+        NinePatchImage {
+            width: parent.width
+            height: parent.height
+            source: IOS.url + "popup-background"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark}
+                ]
+            }
+        }
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: Color.transparent("black", 0.5)
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Color.transparent("black", 0.5)
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+}
diff --git a/src/quickcontrols/ios/ProgressBar.qml b/src/quickcontrols/ios/ProgressBar.qml
new file mode 100644
index 0000000000..c280d5f94f
--- /dev/null
+++ b/src/quickcontrols/ios/ProgressBar.qml
@@ -0,0 +1,66 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.ProgressBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    opacity: control.enabled ? 1 : 0.5
+
+    contentItem: Item {
+        parent: control.background
+        implicitWidth: progress.width
+        implicitHeight: progress.implicitHeight
+        scale: control.mirrored ? -1 : 1
+
+        readonly property NinePatchImage progress: NinePatchImage {
+            parent: control.contentItem
+            visible: control.indeterminate || control.value
+            y: (parent.height - height) / 2
+            width: control.indeterminate ? control.width * 0.4 : control.position * parent.width
+
+            source: IOS.url + "slider-progress"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark}
+                ]
+            }
+
+            NumberAnimation on x {
+                running: control.indeterminate && control.visible
+                from: -control.contentItem.progress.width
+                to: control.width
+                duration: 900
+                easing.type: Easing.Linear
+                loops: Animation.Infinite
+            }
+        }
+    }
+
+    background: Item {
+        implicitWidth: 150
+        implicitHeight: children[0].implicitHeight
+        clip: control.indeterminate
+        NinePatchImage {
+            source: IOS.url + "slider-background"
+            y: (parent.height - height) / 2
+            width: control.background.width
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark}
+                ]
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/RadioButton.qml b/src/quickcontrols/ios/RadioButton.qml
new file mode 100644
index 0000000000..37cf71e1f5
--- /dev/null
+++ b/src/quickcontrols/ios/RadioButton.qml
@@ -0,0 +1,45 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.iOS.impl
+import QtQuick.Controls.impl
+
+T.RadioButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 6
+
+    indicator: Image {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        opacity: control.enabled ? 1 : 0.5
+
+        source: IOS.url + "radiobutton-indicator"
+        ImageSelector on source {
+            states: [
+                {"checked": control.checked},
+                {"light": Qt.styleHints.appearance === Qt.Light},
+                {"dark": Qt.styleHints.appearance === Qt.Dark}
+            ]
+        }
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+}
diff --git a/src/quickcontrols/ios/RadioDelegate.qml b/src/quickcontrols/ios/RadioDelegate.qml
new file mode 100644
index 0000000000..6de6dbb622
--- /dev/null
+++ b/src/quickcontrols/ios/RadioDelegate.qml
@@ -0,0 +1,75 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.RadioDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+    padding: 7
+    leftPadding: 16
+    rightPadding: 16
+    spacing: 14
+
+    icon.width: 29
+    icon.height: 29
+    icon.color: control.enabled ? control.palette.text : control.palette.mid
+
+    indicator: Image {
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        opacity: control.enabled ? 1 : 0.5
+        visible: control.checked
+
+        source: IOS.url + "radiodelegate-indicator"
+        ImageSelector on source {
+            states: [
+                {"light": Qt.styleHints.appearance === Qt.Light},
+                {"dark": Qt.styleHints.appearance === Qt.Dark}
+            ]
+        }
+    }
+
+    contentItem: IconLabel {
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.palette.text : control.palette.mid
+    }
+
+    background: Rectangle {
+        implicitHeight: 44
+        color: Qt.styleHints.appearance === Qt.Dark ? control.palette.light : control.palette.base
+        NinePatchImage {
+            property real offset: control.icon.source.toString() !== "" ? control.icon.width + control.spacing : 0
+            x: control.down ? 0 : control.leftPadding + offset
+            y: control.down ? -1 : 0
+            height: control.height + (control.down ? 1 : 0)
+            width: control.down ? control.width : control.availableWidth + control.rightPadding - offset
+            source: IOS.url + "itemdelegate-background"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                    {"pressed": control.down}
+                ]
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/RangeSlider.qml b/src/quickcontrols/ios/RangeSlider.qml
new file mode 100644
index 0000000000..966f612ba8
--- /dev/null
+++ b/src/quickcontrols/ios/RangeSlider.qml
@@ -0,0 +1,91 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.iOS.impl
+import QtQuick.Controls.impl
+
+T.RangeSlider {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            first.implicitHandleWidth + leftPadding + rightPadding,
+                            second.implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             first.implicitHandleHeight + topPadding + bottomPadding,
+                             second.implicitHandleWidth + leftPadding + rightPadding)
+
+    first.handle: Item {
+        implicitWidth: children[0].implicitWidth - children[0].leftInset - children[0].rightInset
+        implicitHeight: children[0].implicitWidth - children[0].topInset - children[0].bottomInset
+        x: Math.round(control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2))
+        y: Math.round(control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height)))
+
+        NinePatchImage {
+            x: -leftInset
+            y: -topInset
+            source: IOS.url + "slider-handle"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                ]
+            }
+        }
+    }
+
+    second.handle: Item {
+        implicitWidth: children[0].implicitWidth - children[0].leftInset - children[0].rightInset
+        implicitHeight: children[0].implicitWidth - children[0].topInset - children[0].bottomInset
+        x: Math.round(control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2))
+        y: Math.round(control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height)))
+
+        NinePatchImage {
+            x: -leftInset
+            y: -topInset
+            source: IOS.url + "slider-handle"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                ]
+            }
+        }
+    }
+
+    background: Item {
+        implicitWidth: control.horizontal ? 114 : children[0].implicitHeight
+        implicitHeight: control.horizontal ? children[0].implicitHeight : 114
+        opacity: control.enabled ? 1 : 0.5
+
+        NinePatchImage {
+            source: IOS.url + "slider-background"
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            rotation: control.horizontal ? 0 : -90
+            width: control.horizontal ? control.background.width : control.background.height
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                ]
+            }
+
+            NinePatchImage {
+                x: control.first.handle.width / 2 + control.first.position * (parent.width - control.first.handle.width)
+                y: (parent.height - height) / 2
+                width: control.second.position * (parent.width - control.first.handle.width) - control.first.position * (parent.width - control.first.handle.width)
+                height: parent.height
+
+                source: IOS.url + "slider-progress"
+                NinePatchImageSelector on source {
+                    states: [
+                        {"light": Qt.styleHints.appearance === Qt.Light},
+                        {"dark": Qt.styleHints.appearance === Qt.Dark},
+                    ]
+                }
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/ScrollBar.qml b/src/quickcontrols/ios/ScrollBar.qml
new file mode 100644
index 0000000000..3bdabe4f08
--- /dev/null
+++ b/src/quickcontrols/ios/ScrollBar.qml
@@ -0,0 +1,49 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.iOS.impl
+import QtQuick.Controls.impl
+
+T.ScrollBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    visible: control.policy !== T.ScrollBar.AlwaysOff
+    minimumSize: orientation === Qt.Horizontal ? height / width : width / height
+
+    contentItem: NinePatchImage {
+        width: control.availableWidth
+        height: control.availableHeight
+
+        source: IOS.url + "scrollindicator-handle"
+        NinePatchImageSelector on source {
+            states: [
+                {"light": Qt.styleHints.appearance === Qt.Light},
+                {"dark": Qt.styleHints.appearance === Qt.Dark},
+                {"horizontal": control.horizontal},
+                {"vertical": control.vertical}
+            ]
+        }
+        opacity: 0.0
+    }
+
+    states: State {
+        name: "active"
+        when: control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0)
+        PropertyChanges { control.contentItem.opacity: 0.75 }
+    }
+
+    transitions: Transition {
+        from: "active"
+        SequentialAnimation {
+            PauseAnimation { duration: 450 }
+            NumberAnimation { target: control.contentItem; duration: 200; property: "opacity"; to: 0.0 }
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/ScrollIndicator.qml b/src/quickcontrols/ios/ScrollIndicator.qml
new file mode 100644
index 0000000000..d6d842196a
--- /dev/null
+++ b/src/quickcontrols/ios/ScrollIndicator.qml
@@ -0,0 +1,48 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.iOS.impl
+import QtQuick.Controls.impl
+
+T.ScrollIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    contentItem: NinePatchImage {
+        source: IOS.url + "scrollindicator-handle"
+        NinePatchImageSelector on source {
+            states: [
+                {"light": Qt.styleHints.appearance === Qt.Light},
+                {"dark": Qt.styleHints.appearance === Qt.Dark},
+                {"horizontal": control.horizontal},
+                {"vertical": control.vertical}
+            ]
+        }
+        width: control.availableWidth
+        height: control.availableHeight
+        visible: control.size < 1.0
+        opacity: 0.0
+
+        states: State {
+            name: "active"
+            when: control.active
+            PropertyChanges { control.contentItem.opacity: 0.75 }
+        }
+
+        transitions: [
+            Transition {
+                from: "active"
+                SequentialAnimation {
+                    PauseAnimation { duration: 450 }
+                    NumberAnimation { target: control.contentItem; duration: 200; property: "opacity"; to: 0.0 }
+                }
+            }
+        ]
+    }
+}
diff --git a/src/quickcontrols/ios/Slider.qml b/src/quickcontrols/ios/Slider.qml
new file mode 100644
index 0000000000..1f6ca9f242
--- /dev/null
+++ b/src/quickcontrols/ios/Slider.qml
@@ -0,0 +1,69 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.iOS.impl
+import QtQuick.Controls.impl
+
+T.Slider {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitHandleHeight + topPadding + bottomPadding)
+
+    handle: Item {
+        implicitWidth: children[0].implicitWidth - children[0].leftInset - children[0].rightInset
+        implicitHeight: children[0].implicitWidth - children[0].topInset - children[0].bottomInset
+        x: Math.round(control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2))
+        y: Math.round(control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height)))
+
+        NinePatchImage {
+            x: -leftInset
+            y: -topInset
+            source: IOS.url + "slider-handle"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                    {"disabled": !control.enabled}
+                ]
+            }
+        }
+    }
+
+    background: Item {
+        implicitWidth: control.horizontal ? 114 : children[0].implicitHeight
+        implicitHeight: control.horizontal ? children[0].implicitHeight : 114
+        opacity: control.enabled ? 1 : 0.5
+
+        NinePatchImage {
+            source: IOS.url + "slider-background"
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            rotation: control.horizontal ? 0 : -90
+            width: control.horizontal ? background.width : background.height
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                ]
+            }
+
+            NinePatchImage {
+                width: control.handle.width / 2 + control.position * (parent.width - control.handle.width)
+                height: parent.height
+
+                source: IOS.url + "slider-progress"
+                NinePatchImageSelector on source {
+                    states: [
+                        {"light": Qt.styleHints.appearance === Qt.Light},
+                        {"dark": Qt.styleHints.appearance === Qt.Dark},
+                    ]
+                }
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/SpinBox.qml b/src/quickcontrols/ios/SpinBox.qml
new file mode 100644
index 0000000000..ed4e4c1bc7
--- /dev/null
+++ b/src/quickcontrols/ios/SpinBox.qml
@@ -0,0 +1,97 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.iOS.impl
+import QtQuick.Controls.impl
+
+T.SpinBox {
+    id: control
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentItem.implicitWidth + 2 * padding +
+                            up.implicitIndicatorWidth +
+                            down.implicitIndicatorWidth)
+    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
+                             implicitBackgroundHeight,
+                             up.implicitIndicatorHeight,
+                             down.implicitIndicatorHeight)
+
+    padding: 0
+    leftPadding: control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0)
+    rightPadding: control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0)
+
+    validator: IntValidator {
+        locale: control.locale.name
+        bottom: Math.min(control.from, control.to)
+        top: Math.max(control.from, control.to)
+    }
+
+    contentItem: TextInput {
+        z: 2
+        text: control.displayText
+        padding: 6
+
+        font: control.font
+        color: control.palette.text
+        selectionColor: control.palette.highlight
+        selectedTextColor: control.palette.highlightedText
+        horizontalAlignment: Qt.AlignHCenter
+        verticalAlignment: Qt.AlignVCenter
+
+        readOnly: !control.editable
+        validator: control.validator
+        inputMethodHints: control.inputMethodHints
+    }
+
+    up.indicator: NinePatchImage {
+        x: control.mirrored ? 0 : control.width - width
+        height: control.height
+        opacity: control.up.indicator.enabled ? 1 : 0.5
+
+        source: IOS.url + "spinbox-indicator"
+        NinePatchImageSelector on source {
+            states: [
+                {"up": true},
+                {"pressed": control.up.pressed},
+                {"light": Qt.styleHints.appearance === Qt.Light},
+                {"dark": Qt.styleHints.appearance === Qt.Dark}
+            ]
+        }
+    }
+
+    down.indicator: NinePatchImage {
+        x: control.mirrored ? control.width - width : 0
+        height: control.height
+        opacity: control.down.indicator.enabled ? 1 : 0.5
+
+        source: IOS.url + "spinbox-indicator"
+        NinePatchImageSelector on source {
+            states: [
+                {"down": true},
+                {"pressed": control.down.pressed},
+                {"light": Qt.styleHints.appearance === Qt.Light},
+                {"dark": Qt.styleHints.appearance === Qt.Dark}
+            ]
+        }
+    }
+
+    background: Item {
+        implicitWidth: 150
+        implicitHeight: children[0].implicitHeight
+
+        NinePatchImage {
+            source: IOS.url + "spinbox-background"
+            width: control.background.width
+            height: control.background.height
+            opacity: control.enabled ? 1 : 0.5
+            y: (parent.height - height) / 2
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark}
+                ]
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/SplitView.qml b/src/quickcontrols/ios/SplitView.qml
new file mode 100644
index 0000000000..ab912b86b2
--- /dev/null
+++ b/src/quickcontrols/ios/SplitView.qml
@@ -0,0 +1,25 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.SplitView {
+    id: control
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    handle: Rectangle {
+        implicitWidth: control.orientation === Qt.Horizontal ? 1 : control.width
+        implicitHeight: control.orientation === Qt.Horizontal ? control.height : 1
+        color: control.palette.mid
+        // Increase the hit area
+        containmentMask: Item {
+            width: control.orientation === Qt.Horizontal ? 8 : control.width
+            height: control.orientation === Qt.Horizontal ? control.height : 8
+        }
+    }
+}
+
diff --git a/src/quickcontrols/ios/StackView.qml b/src/quickcontrols/ios/StackView.qml
new file mode 100644
index 0000000000..c116ad5227
--- /dev/null
+++ b/src/quickcontrols/ios/StackView.qml
@@ -0,0 +1,34 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.StackView {
+    id: control
+
+    popEnter: Transition {
+        XAnimator { from: (control.mirrored ? -1 : 1) * -control.width; to: 0; duration: 200; easing.type: Easing.OutCubic }
+    }
+
+    popExit: Transition {
+        XAnimator { from: 0; to: (control.mirrored ? -1 : 1) * control.width; duration: 200; easing.type: Easing.OutCubic }
+    }
+
+    pushEnter: Transition {
+        XAnimator { from: (control.mirrored ? -1 : 1) * control.width; to: 0; duration: 200; easing.type: Easing.OutCubic }
+    }
+
+    pushExit: Transition {
+        XAnimator { from: 0; to: (control.mirrored ? -1 : 1) * -control.width; duration: 200; easing.type: Easing.OutCubic }
+    }
+
+    replaceEnter: Transition {
+        XAnimator { from: (control.mirrored ? -1 : 1) * control.width; to: 0; duration: 200; easing.type: Easing.OutCubic }
+    }
+
+    replaceExit: Transition {
+        XAnimator { from: 0; to: (control.mirrored ? -1 : 1) * -control.width; duration: 200; easing.type: Easing.OutCubic }
+    }
+}
diff --git a/src/quickcontrols/ios/SwipeDelegate.qml b/src/quickcontrols/ios/SwipeDelegate.qml
new file mode 100644
index 0000000000..ccabfc0cb4
--- /dev/null
+++ b/src/quickcontrols/ios/SwipeDelegate.qml
@@ -0,0 +1,59 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.SwipeDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+    padding: 7
+    leftPadding: 16
+    rightPadding: 16
+    spacing: 14
+
+    icon.width: 29
+    icon.height: 29
+    icon.color: control.enabled ? control.palette.text : control.palette.mid
+
+    swipe.transition: Transition { SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic } }
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.palette.text : control.palette.mid
+    }
+
+    background: Rectangle {
+        implicitHeight: 44
+        color: Qt.styleHints.appearance === Qt.Dark ? control.palette.light : control.palette.base
+        NinePatchImage {
+            property real offset: control.icon.source.toString() !== "" ? control.icon.width + control.spacing : 0
+            x: control.down ? 0 : control.leftPadding + offset
+            y: control.down ? -1 : 0
+            height: control.height + (control.down ? 1 : 0)
+            width: control.down ? control.width : control.availableWidth + control.rightPadding - offset
+            source: IOS.url + "itemdelegate-background"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                    {"pressed": control.down}
+                ]
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/Switch.qml b/src/quickcontrols/ios/Switch.qml
new file mode 100644
index 0000000000..7a600afc5f
--- /dev/null
+++ b/src/quickcontrols/ios/Switch.qml
@@ -0,0 +1,79 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.Switch {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 0
+    topInset: 0
+    leftInset: 0
+    rightInset: 0
+    bottomInset: 0
+    spacing: 6
+
+    indicator: Image {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        width: implicitWidth
+        height: Math.max(implicitHeight, handle.implicitHeight)
+        opacity: control.enabled ? 1 : 0.5
+
+        source: IOS.url + "switch-indicator"
+        ImageSelector on source {
+            states: [
+                {"light": Qt.styleHints.appearance === Qt.Light},
+                {"dark": Qt.styleHints.appearance === Qt.Dark},
+                {"checked": control.checked}
+            ]
+        }
+
+        property NinePatchImage handle: NinePatchImage {
+            property real margin: 2
+            readonly property real minPos: leftPadding - leftInset + margin
+            readonly property real maxPos: parent.width - width + rightPadding + rightInset - margin
+            readonly property real dragPos: control.visualPosition * parent.width - (width / 2)
+
+            parent: control.indicator
+
+            x: Math.max(minPos, Math.min(maxPos, dragPos))
+            y: (parent.height - height) / 2 - topInset + margin
+            width: control.pressed ? implicitWidth + 4 : implicitWidth
+
+            source: IOS.url + "switch-handle"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                    {"disabled": !control.enabled}
+                ]
+            }
+
+            Behavior on x {
+                enabled: !control.down
+                SmoothedAnimation { velocity: 150 }
+            }
+        }
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+}
diff --git a/src/quickcontrols/ios/SwitchDelegate.qml b/src/quickcontrols/ios/SwitchDelegate.qml
new file mode 100644
index 0000000000..4cba6dcabf
--- /dev/null
+++ b/src/quickcontrols/ios/SwitchDelegate.qml
@@ -0,0 +1,102 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.SwitchDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+    padding: 7
+    leftPadding: 16
+    rightPadding: 16
+    spacing: 14
+
+    icon.width: 29
+    icon.height: 29
+    icon.color: control.enabled ? control.palette.text : control.palette.mid
+
+    indicator: Image {
+        x: control.text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        width: implicitWidth
+        height: Math.max(implicitHeight, handle.implicitHeight)
+        opacity: control.enabled ? 1 : 0.5
+
+        source: IOS.url + "switch-indicator"
+        ImageSelector on source {
+            states: [
+                {"light": Qt.styleHints.appearance === Qt.Light},
+                {"dark": Qt.styleHints.appearance === Qt.Dark},
+                {"checked": control.checked}
+            ]
+        }
+
+        property NinePatchImage handle: NinePatchImage {
+            property real margin: 2
+            readonly property real minPos: leftPadding - leftInset + margin
+            readonly property real maxPos: parent.width - width + rightPadding + rightInset - margin
+            readonly property real dragPos: control.visualPosition * parent.width - (width / 2)
+
+            parent: control.indicator
+
+            x: Math.max(minPos, Math.min(maxPos, dragPos))
+            y: (parent.height - height) / 2 - topInset + margin
+            width: control.pressed ? implicitWidth + 4 : implicitWidth
+
+            source: IOS.url + "switch-handle"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                    {"disabled": !control.enabled}
+                ]
+            }
+
+            Behavior on x {
+                enabled: !control.down
+                SmoothedAnimation { velocity: 150 }
+            }
+        }
+    }
+
+    contentItem: IconLabel {
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.palette.text : control.palette.mid
+    }
+
+    background: Rectangle {
+        implicitHeight: 44
+        color: Qt.styleHints.appearance === Qt.Dark ? control.palette.light : control.palette.base
+        NinePatchImage {
+            property real offset: control.icon.source.toString() !== "" ? control.icon.width + control.spacing : 0
+            x: control.leftPadding + offset
+            height: control.height
+            width: control.availableWidth + control.rightPadding - offset
+            source: IOS.url + "itemdelegate-background"
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark},
+                ]
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/TabBar.qml b/src/quickcontrols/ios/TabBar.qml
new file mode 100644
index 0000000000..1d289c71af
--- /dev/null
+++ b/src/quickcontrols/ios/TabBar.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+
+T.TabBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 1
+
+    contentItem: ListView {
+        model: control.contentModel
+        currentIndex: control.currentIndex
+
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+        snapMode: ListView.SnapToItem
+
+        highlightMoveDuration: 0
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: 40
+        preferredHighlightEnd: width - 40
+    }
+
+    background: Rectangle {
+        implicitHeight: 49
+        color: Qt.styleHints.appearance === Qt.Dark ? control.palette.light : control.palette.base
+        Rectangle {
+            height: 1
+            width: parent.width
+            color: control.palette.mid
+            y: control.position === T.TabBar.Footer ? 0 : parent.height - 1
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/TabButton.qml b/src/quickcontrols/ios/TabButton.qml
new file mode 100644
index 0000000000..0dc84e4f1d
--- /dev/null
+++ b/src/quickcontrols/ios/TabButton.qml
@@ -0,0 +1,42 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.TabButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+    padding: 6
+    spacing: 6
+
+    icon.width: 25
+    icon.height: 25
+    icon.color: checked ? control.palette.button : control.palette.dark
+
+    display: TabButton.TextUnderIcon
+    font.pointSize: 12
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignCenter
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: checked ? control.palette.button : control.palette.dark
+        opacity: control.enabled ? 1 : 0.5
+    }
+
+    background: Item {
+        implicitHeight: 49
+    }
+}
diff --git a/src/quickcontrols/ios/TextArea.qml b/src/quickcontrols/ios/TextArea.qml
new file mode 100644
index 0000000000..582af1bb64
--- /dev/null
+++ b/src/quickcontrols/ios/TextArea.qml
@@ -0,0 +1,49 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.TextArea {
+    id: control
+
+    implicitWidth: Math.max(contentWidth + leftPadding + rightPadding,
+                            implicitBackgroundWidth + leftInset + rightInset,
+                            placeholder.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
+                             implicitBackgroundHeight + topInset + bottomInset,
+                             placeholder.implicitHeight + topPadding + bottomPadding)
+
+    leftPadding: 6
+    rightPadding: 6
+
+    color: control.palette.text
+    selectionColor: control.palette.highlight
+    selectedTextColor: control.palette.highlightedText
+    placeholderTextColor: control.palette.placeholderText
+    cursorDelegate: CursorDelegate {}
+
+    PlaceholderText {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
+
+    background: Rectangle {
+        implicitWidth: 240
+        implicitHeight: 128
+        color: control.palette.base
+    }
+}
diff --git a/src/quickcontrols/ios/TextField.qml b/src/quickcontrols/ios/TextField.qml
new file mode 100644
index 0000000000..4b5a1fb48e
--- /dev/null
+++ b/src/quickcontrols/ios/TextField.qml
@@ -0,0 +1,55 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+
+T.TextField {
+    id: control
+
+    implicitWidth: implicitBackgroundWidth + leftInset + rightInset
+                   || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding,
+                             placeholder.implicitHeight + topPadding + bottomPadding)
+
+    padding: 6
+    topPadding: 7
+    bottomPadding: 7
+
+    color: control.palette.text
+    selectionColor: control.palette.highlight
+    selectedTextColor: control.palette.highlightedText
+    placeholderTextColor: control.palette.placeholderText
+    verticalAlignment: Qt.AlignVCenter
+    cursorDelegate: CursorDelegate {}
+
+    PlaceholderText {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
+
+    background: Rectangle {
+        implicitHeight: 34
+        implicitWidth: 97
+        radius: 4
+
+        border.width: 0.5
+        border.color: control.palette.mid
+        color: control.palette.base
+    }
+}
diff --git a/src/quickcontrols/ios/ToolBar.qml b/src/quickcontrols/ios/ToolBar.qml
new file mode 100644
index 0000000000..77b3d8ac0b
--- /dev/null
+++ b/src/quickcontrols/ios/ToolBar.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ToolBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    background: Rectangle {
+        implicitHeight: 49
+        color: Qt.styleHints.appearance === Qt.Dark ? control.palette.light : control.palette.base
+        Rectangle {
+            height: 1
+            width: parent.width
+            y: control.position === T.TabBar.Footer ? 0 : parent.height - 1
+            color: control.palette.mid
+        }
+    }
+}
diff --git a/src/quickcontrols/ios/ToolButton.qml b/src/quickcontrols/ios/ToolButton.qml
new file mode 100644
index 0000000000..b18073dc81
--- /dev/null
+++ b/src/quickcontrols/ios/ToolButton.qml
@@ -0,0 +1,39 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.ToolButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 25
+    icon.height: 25
+    icon.color: control.enabled ? (control.down ? control.palette.highlight : control.palette.button)
+                                : control.palette.mid
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? (control.down ? control.palette.highlight : control.palette.button)
+                               : control.palette.mid
+    }
+
+    background: Item {
+        implicitHeight: 49
+    }
+}
diff --git a/src/quickcontrols/ios/TreeViewDelegate.qml b/src/quickcontrols/ios/TreeViewDelegate.qml
new file mode 100644
index 0000000000..4dcfcbf39d
--- /dev/null
+++ b/src/quickcontrols/ios/TreeViewDelegate.qml
@@ -0,0 +1,77 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.iOS.impl
+
+T.TreeViewDelegate {
+    id: control
+
+    implicitWidth: leftMargin + __contentIndent + implicitContentWidth + rightPadding + rightMargin
+    implicitHeight: Math.max(implicitBackgroundHeight, implicitContentHeight, implicitIndicatorHeight)
+
+    indentation: indicator ? indicator.width : 12
+    leftMargin: 16
+    rightMargin: 16
+    spacing: 14
+
+    topPadding: contentItem ? (height - contentItem.implicitHeight) / 2 : 0
+    leftPadding: !mirrored ? leftMargin + __contentIndent : width - leftMargin - __contentIndent - implicitContentWidth
+
+    highlighted: control.selected || control.current
+               || ((control.treeView.selectionBehavior === TableView.SelectRows
+               || control.treeView.selectionBehavior === TableView.SelectionDisabled)
+               && control.row === control.treeView.currentRow)
+
+    required property int row
+    required property var model
+    readonly property real __contentIndent: !isTreeNode ? 0 : (depth * indentation) + (indicator ? indicator.width + spacing : 0)
+
+    indicator: Item {
+        readonly property real __indicatorIndent: control.leftMargin + (control.depth * control.indentation)
+        x: !control.mirrored ? __indicatorIndent : control.width - __indicatorIndent - width
+        y: (control.height - height) / 2
+        implicitWidth: Math.max(arrow.implicitWidth, 20)
+        implicitHeight: background.height
+
+        property Image arrow : Image {
+            parent: control.indicator
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            rotation:  control.expanded ? 90 : (control.mirrored ? 180 : 0)
+            opacity: control.enabled ? 1 : 0.5
+
+            source: IOS.url + "arrow-indicator"
+            ImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark}
+                ]
+            }
+        }
+    }
+
+    background: Rectangle {
+        implicitHeight: 44
+        color: Qt.styleHints.appearance === Qt.Dark ? control.palette.dark : control.palette.base
+        NinePatchImage {
+            height: parent.height
+            width: parent.width
+            source: IOS.url + (control.highlighted ? "itemdelegate-background-pressed" : "itemdelegate-background")
+            NinePatchImageSelector on source {
+                states: [
+                    {"light": Qt.styleHints.appearance === Qt.Light},
+                    {"dark": Qt.styleHints.appearance === Qt.Dark}
+                ]
+            }
+        }
+    }
+
+    contentItem: Label {
+        clip: false
+        text: control.model.display
+        elide: Text.ElideRight
+    }
+}
diff --git a/src/quickcontrols/ios/images/arrow-indicator-dark.png b/src/quickcontrols/ios/images/arrow-indicator-dark.png
new file mode 100644
index 0000000000..031ba049b7
--- /dev/null
+++ b/src/quickcontrols/ios/images/arrow-indicator-dark.png
diff --git a/src/quickcontrols/ios/images/arrow-indicator-dark@2x.png b/src/quickcontrols/ios/images/arrow-indicator-dark@2x.png
new file mode 100644
index 0000000000..9987384025
--- /dev/null
+++ b/src/quickcontrols/ios/images/arrow-indicator-dark@2x.png
diff --git a/src/quickcontrols/ios/images/arrow-indicator-dark@3x.png b/src/quickcontrols/ios/images/arrow-indicator-dark@3x.png
new file mode 100644
index 0000000000..d470ec6887
--- /dev/null
+++ b/src/quickcontrols/ios/images/arrow-indicator-dark@3x.png
diff --git a/src/quickcontrols/ios/images/arrow-indicator-light.png b/src/quickcontrols/ios/images/arrow-indicator-light.png
new file mode 100644
index 0000000000..2d95d8d07a
--- /dev/null
+++ b/src/quickcontrols/ios/images/arrow-indicator-light.png
diff --git a/src/quickcontrols/ios/images/arrow-indicator-light@2x.png b/src/quickcontrols/ios/images/arrow-indicator-light@2x.png
new file mode 100644
index 0000000000..cbc4b9e54f
--- /dev/null
+++ b/src/quickcontrols/ios/images/arrow-indicator-light@2x.png
diff --git a/src/quickcontrols/ios/images/arrow-indicator-light@3x.png b/src/quickcontrols/ios/images/arrow-indicator-light@3x.png
new file mode 100644
index 0000000000..be7d45d153
--- /dev/null
+++ b/src/quickcontrols/ios/images/arrow-indicator-light@3x.png
diff --git a/src/quickcontrols/ios/images/checkbox-indicator-checked-dark.png b/src/quickcontrols/ios/images/checkbox-indicator-checked-dark.png
new file mode 100644
index 0000000000..4e0749fded
--- /dev/null
+++ b/src/quickcontrols/ios/images/checkbox-indicator-checked-dark.png
diff --git a/src/quickcontrols/ios/images/checkbox-indicator-checked-dark@2x.png b/src/quickcontrols/ios/images/checkbox-indicator-checked-dark@2x.png
new file mode 100644
index 0000000000..b58cdc18b5
--- /dev/null
+++ b/src/quickcontrols/ios/images/checkbox-indicator-checked-dark@2x.png
diff --git a/src/quickcontrols/ios/images/checkbox-indicator-checked-dark@3x.png b/src/quickcontrols/ios/images/checkbox-indicator-checked-dark@3x.png
new file mode 100644
index 0000000000..331dbcab14
--- /dev/null
+++ b/src/quickcontrols/ios/images/checkbox-indicator-checked-dark@3x.png
diff --git a/src/quickcontrols/ios/images/checkbox-indicator-checked-light.png b/src/quickcontrols/ios/images/checkbox-indicator-checked-light.png
new file mode 100644
index 0000000000..a2e0cda8f5
--- /dev/null
+++ b/src/quickcontrols/ios/images/checkbox-indicator-checked-light.png
diff --git a/src/quickcontrols/ios/images/checkbox-indicator-checked-light@2x.png b/src/quickcontrols/ios/images/checkbox-indicator-checked-light@2x.png
new file mode 100644
index 0000000000..d90b64b6b8
--- /dev/null
+++ b/src/quickcontrols/ios/images/checkbox-indicator-checked-light@2x.png
diff --git a/src/quickcontrols/ios/images/checkbox-indicator-checked-light@3x.png b/src/quickcontrols/ios/images/checkbox-indicator-checked-light@3x.png
new file mode 100644
index 0000000000..d1b02f2004
--- /dev/null
+++ b/src/quickcontrols/ios/images/checkbox-indicator-checked-light@3x.png
diff --git a/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-dark.png b/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-dark.png
new file mode 100644
index 0000000000..39f8f71d06
--- /dev/null
+++ b/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-dark.png
diff --git a/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-dark@2x.png b/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-dark@2x.png
new file mode 100644
index 0000000000..5ce5545ee0
--- /dev/null
+++ b/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-dark@2x.png
diff --git a/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-dark@3x.png b/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-dark@3x.png
new file mode 100644
index 0000000000..0c6da9715a
--- /dev/null
+++ b/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-dark@3x.png
diff --git a/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-light.png b/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-light.png
new file mode 100644
index 0000000000..a6dc7d5d81
--- /dev/null
+++ b/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-light.png
diff --git a/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-light@2x.png b/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-light@2x.png
new file mode 100644
index 0000000000..1cc0559163
--- /dev/null
+++ b/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-light@2x.png
diff --git a/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-light@3x.png b/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-light@3x.png
new file mode 100644
index 0000000000..36f007efea
--- /dev/null
+++ b/src/quickcontrols/ios/images/checkbox-indicator-partially-checked-light@3x.png
diff --git a/src/quickcontrols/ios/images/drawer-background-dark.9.png b/src/quickcontrols/ios/images/drawer-background-dark.9.png
new file mode 100644
index 0000000000..2e0526198e
--- /dev/null
+++ b/src/quickcontrols/ios/images/drawer-background-dark.9.png
diff --git a/src/quickcontrols/ios/images/drawer-background-dark.9@2x.png b/src/quickcontrols/ios/images/drawer-background-dark.9@2x.png
new file mode 100644
index 0000000000..2a8b3b60e3
--- /dev/null
+++ b/src/quickcontrols/ios/images/drawer-background-dark.9@2x.png
diff --git a/src/quickcontrols/ios/images/drawer-background-dark.9@3x.png b/src/quickcontrols/ios/images/drawer-background-dark.9@3x.png
new file mode 100644
index 0000000000..19805fbd19
--- /dev/null
+++ b/src/quickcontrols/ios/images/drawer-background-dark.9@3x.png
diff --git a/src/quickcontrols/ios/images/drawer-background-light.9.png b/src/quickcontrols/ios/images/drawer-background-light.9.png
new file mode 100644
index 0000000000..9c8a42bcc4
--- /dev/null
+++ b/src/quickcontrols/ios/images/drawer-background-light.9.png
diff --git a/src/quickcontrols/ios/images/drawer-background-light.9@2x.png b/src/quickcontrols/ios/images/drawer-background-light.9@2x.png
new file mode 100644
index 0000000000..9975339c29
--- /dev/null
+++ b/src/quickcontrols/ios/images/drawer-background-light.9@2x.png
diff --git a/src/quickcontrols/ios/images/drawer-background-light.9@3x.png b/src/quickcontrols/ios/images/drawer-background-light.9@3x.png
new file mode 100644
index 0000000000..83d723b573
--- /dev/null
+++ b/src/quickcontrols/ios/images/drawer-background-light.9@3x.png
diff --git a/src/quickcontrols/ios/images/drawer-background-modal-dark.9.png b/src/quickcontrols/ios/images/drawer-background-modal-dark.9.png
new file mode 100644
index 0000000000..3ff175251b
--- /dev/null
+++ b/src/quickcontrols/ios/images/drawer-background-modal-dark.9.png
diff --git a/src/quickcontrols/ios/images/drawer-background-modal-dark.9@2x.png b/src/quickcontrols/ios/images/drawer-background-modal-dark.9@2x.png
new file mode 100644
index 0000000000..54770858f1
--- /dev/null
+++ b/src/quickcontrols/ios/images/drawer-background-modal-dark.9@2x.png
diff --git a/src/quickcontrols/ios/images/drawer-background-modal-dark.9@3x.png b/src/quickcontrols/ios/images/drawer-background-modal-dark.9@3x.png
new file mode 100644
index 0000000000..f5747ebdfe
--- /dev/null
+++ b/src/quickcontrols/ios/images/drawer-background-modal-dark.9@3x.png
diff --git a/src/quickcontrols/ios/images/drawer-background-modal-light.9.png b/src/quickcontrols/ios/images/drawer-background-modal-light.9.png
new file mode 100644
index 0000000000..ea4e753269
--- /dev/null
+++ b/src/quickcontrols/ios/images/drawer-background-modal-light.9.png
diff --git a/src/quickcontrols/ios/images/drawer-background-modal-light.9@2x.png b/src/quickcontrols/ios/images/drawer-background-modal-light.9@2x.png
new file mode 100644
index 0000000000..109fda953c
--- /dev/null
+++ b/src/quickcontrols/ios/images/drawer-background-modal-light.9@2x.png
diff --git a/src/quickcontrols/ios/images/drawer-background-modal-light.9@3x.png b/src/quickcontrols/ios/images/drawer-background-modal-light.9@3x.png
new file mode 100644
index 0000000000..02a52acf5f
--- /dev/null
+++ b/src/quickcontrols/ios/images/drawer-background-modal-light.9@3x.png
diff --git a/src/quickcontrols/ios/images/itemdelegate-background-dark.9.png b/src/quickcontrols/ios/images/itemdelegate-background-dark.9.png
new file mode 100644
index 0000000000..73f3ad8825
--- /dev/null
+++ b/src/quickcontrols/ios/images/itemdelegate-background-dark.9.png
diff --git a/src/quickcontrols/ios/images/itemdelegate-background-dark@2x.9.png b/src/quickcontrols/ios/images/itemdelegate-background-dark@2x.9.png
new file mode 100644
index 0000000000..5a4f22b3f9
--- /dev/null
+++ b/src/quickcontrols/ios/images/itemdelegate-background-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/itemdelegate-background-dark@3x.9.png b/src/quickcontrols/ios/images/itemdelegate-background-dark@3x.9.png
new file mode 100644
index 0000000000..92f36a96d1
--- /dev/null
+++ b/src/quickcontrols/ios/images/itemdelegate-background-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/itemdelegate-background-light.9.png b/src/quickcontrols/ios/images/itemdelegate-background-light.9.png
new file mode 100644
index 0000000000..162821415e
--- /dev/null
+++ b/src/quickcontrols/ios/images/itemdelegate-background-light.9.png
diff --git a/src/quickcontrols/ios/images/itemdelegate-background-light@2x.9.png b/src/quickcontrols/ios/images/itemdelegate-background-light@2x.9.png
new file mode 100644
index 0000000000..b14617e04f
--- /dev/null
+++ b/src/quickcontrols/ios/images/itemdelegate-background-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/itemdelegate-background-light@3x.9.png b/src/quickcontrols/ios/images/itemdelegate-background-light@3x.9.png
new file mode 100644
index 0000000000..6f2df3a583
--- /dev/null
+++ b/src/quickcontrols/ios/images/itemdelegate-background-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/itemdelegate-background-pressed-dark.9.png b/src/quickcontrols/ios/images/itemdelegate-background-pressed-dark.9.png
new file mode 100644
index 0000000000..4ca285bbbe
--- /dev/null
+++ b/src/quickcontrols/ios/images/itemdelegate-background-pressed-dark.9.png
diff --git a/src/quickcontrols/ios/images/itemdelegate-background-pressed-dark@2x.9.png b/src/quickcontrols/ios/images/itemdelegate-background-pressed-dark@2x.9.png
new file mode 100644
index 0000000000..6ddb779bca
--- /dev/null
+++ b/src/quickcontrols/ios/images/itemdelegate-background-pressed-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/itemdelegate-background-pressed-dark@3x.9.png b/src/quickcontrols/ios/images/itemdelegate-background-pressed-dark@3x.9.png
new file mode 100644
index 0000000000..6e9c02e288
--- /dev/null
+++ b/src/quickcontrols/ios/images/itemdelegate-background-pressed-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/itemdelegate-background-pressed-light.9.png b/src/quickcontrols/ios/images/itemdelegate-background-pressed-light.9.png
new file mode 100644
index 0000000000..b9b2ea03bb
--- /dev/null
+++ b/src/quickcontrols/ios/images/itemdelegate-background-pressed-light.9.png
diff --git a/src/quickcontrols/ios/images/itemdelegate-background-pressed-light@2x.9.png b/src/quickcontrols/ios/images/itemdelegate-background-pressed-light@2x.9.png
new file mode 100644
index 0000000000..141272953d
--- /dev/null
+++ b/src/quickcontrols/ios/images/itemdelegate-background-pressed-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/itemdelegate-background-pressed-light@3x.9.png b/src/quickcontrols/ios/images/itemdelegate-background-pressed-light@3x.9.png
new file mode 100644
index 0000000000..7201fb9e62
--- /dev/null
+++ b/src/quickcontrols/ios/images/itemdelegate-background-pressed-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/menu-background-dark.9.png b/src/quickcontrols/ios/images/menu-background-dark.9.png
new file mode 100644
index 0000000000..863a3c1759
--- /dev/null
+++ b/src/quickcontrols/ios/images/menu-background-dark.9.png
diff --git a/src/quickcontrols/ios/images/menu-background-dark@2x.9.png b/src/quickcontrols/ios/images/menu-background-dark@2x.9.png
new file mode 100644
index 0000000000..ddddaa3532
--- /dev/null
+++ b/src/quickcontrols/ios/images/menu-background-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/menu-background-dark@3x.9.png b/src/quickcontrols/ios/images/menu-background-dark@3x.9.png
new file mode 100644
index 0000000000..a640f6fe06
--- /dev/null
+++ b/src/quickcontrols/ios/images/menu-background-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/menu-background-light.9.png b/src/quickcontrols/ios/images/menu-background-light.9.png
new file mode 100644
index 0000000000..410abed278
--- /dev/null
+++ b/src/quickcontrols/ios/images/menu-background-light.9.png
diff --git a/src/quickcontrols/ios/images/menu-background-light@2x.9.png b/src/quickcontrols/ios/images/menu-background-light@2x.9.png
new file mode 100644
index 0000000000..82d99af518
--- /dev/null
+++ b/src/quickcontrols/ios/images/menu-background-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/menu-background-light@3x.9.png b/src/quickcontrols/ios/images/menu-background-light@3x.9.png
new file mode 100644
index 0000000000..48f3f7ed4e
--- /dev/null
+++ b/src/quickcontrols/ios/images/menu-background-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-dark.9.png b/src/quickcontrols/ios/images/menuitem-background-dark.9.png
new file mode 100644
index 0000000000..463def221b
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-dark.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-dark@2x.9.png b/src/quickcontrols/ios/images/menuitem-background-dark@2x.9.png
new file mode 100644
index 0000000000..53fdaa7c35
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-dark@3x.9.png b/src/quickcontrols/ios/images/menuitem-background-dark@3x.9.png
new file mode 100644
index 0000000000..a514f80071
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-edge-dark.9.png b/src/quickcontrols/ios/images/menuitem-background-edge-dark.9.png
new file mode 100644
index 0000000000..514c0901e6
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-edge-dark.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-edge-dark@2x.9.png b/src/quickcontrols/ios/images/menuitem-background-edge-dark@2x.9.png
new file mode 100644
index 0000000000..1ca1ee8d9e
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-edge-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-edge-dark@3x.9.png b/src/quickcontrols/ios/images/menuitem-background-edge-dark@3x.9.png
new file mode 100644
index 0000000000..6a4277a7c3
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-edge-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-edge-light.9.png b/src/quickcontrols/ios/images/menuitem-background-edge-light.9.png
new file mode 100644
index 0000000000..262c12d7b7
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-edge-light.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-edge-light@2x.9.png b/src/quickcontrols/ios/images/menuitem-background-edge-light@2x.9.png
new file mode 100644
index 0000000000..4838abb511
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-edge-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-edge-light@3x.9.png b/src/quickcontrols/ios/images/menuitem-background-edge-light@3x.9.png
new file mode 100644
index 0000000000..0e17b608da
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-edge-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-edge-pressed-dark.9.png b/src/quickcontrols/ios/images/menuitem-background-edge-pressed-dark.9.png
new file mode 100644
index 0000000000..290101b99b
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-edge-pressed-dark.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-edge-pressed-dark@2x.9.png b/src/quickcontrols/ios/images/menuitem-background-edge-pressed-dark@2x.9.png
new file mode 100644
index 0000000000..a738f20650
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-edge-pressed-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-edge-pressed-dark@3x.9.png b/src/quickcontrols/ios/images/menuitem-background-edge-pressed-dark@3x.9.png
new file mode 100644
index 0000000000..ef05342d0b
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-edge-pressed-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-edge-pressed-light.9.png b/src/quickcontrols/ios/images/menuitem-background-edge-pressed-light.9.png
new file mode 100644
index 0000000000..706f642552
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-edge-pressed-light.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-edge-pressed-light@2x.9.png b/src/quickcontrols/ios/images/menuitem-background-edge-pressed-light@2x.9.png
new file mode 100644
index 0000000000..e196a71bbe
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-edge-pressed-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-edge-pressed-light@3x.9.png b/src/quickcontrols/ios/images/menuitem-background-edge-pressed-light@3x.9.png
new file mode 100644
index 0000000000..4f5a71ff86
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-edge-pressed-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-light.9.png b/src/quickcontrols/ios/images/menuitem-background-light.9.png
new file mode 100644
index 0000000000..644f207a26
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-light.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-light@2x.9.png b/src/quickcontrols/ios/images/menuitem-background-light@2x.9.png
new file mode 100644
index 0000000000..d7c78cb5dc
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-light@3x.9.png b/src/quickcontrols/ios/images/menuitem-background-light@3x.9.png
new file mode 100644
index 0000000000..70ce76a961
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-pressed-dark.9.png b/src/quickcontrols/ios/images/menuitem-background-pressed-dark.9.png
new file mode 100644
index 0000000000..4f1fdfc82c
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-pressed-dark.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-pressed-dark@2x.9.png b/src/quickcontrols/ios/images/menuitem-background-pressed-dark@2x.9.png
new file mode 100644
index 0000000000..f72729f45d
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-pressed-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-pressed-dark@3x.9.png b/src/quickcontrols/ios/images/menuitem-background-pressed-dark@3x.9.png
new file mode 100644
index 0000000000..eaa574174b
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-pressed-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-pressed-light.9.png b/src/quickcontrols/ios/images/menuitem-background-pressed-light.9.png
new file mode 100644
index 0000000000..5141095a95
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-pressed-light.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-pressed-light@2x.9.png b/src/quickcontrols/ios/images/menuitem-background-pressed-light@2x.9.png
new file mode 100644
index 0000000000..b8fb91997f
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-pressed-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-pressed-light@3x.9.png b/src/quickcontrols/ios/images/menuitem-background-pressed-light@3x.9.png
new file mode 100644
index 0000000000..250247d322
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-pressed-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-single-pressed-dark.9.png b/src/quickcontrols/ios/images/menuitem-background-single-pressed-dark.9.png
new file mode 100644
index 0000000000..708285fe39
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-single-pressed-dark.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-single-pressed-dark@2x.9.png b/src/quickcontrols/ios/images/menuitem-background-single-pressed-dark@2x.9.png
new file mode 100644
index 0000000000..0cb6f175ff
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-single-pressed-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-single-pressed-dark@3x.9.png b/src/quickcontrols/ios/images/menuitem-background-single-pressed-dark@3x.9.png
new file mode 100644
index 0000000000..cb7c1f210c
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-single-pressed-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-single-pressed-light.9.png b/src/quickcontrols/ios/images/menuitem-background-single-pressed-light.9.png
new file mode 100644
index 0000000000..5a71309c91
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-single-pressed-light.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-single-pressed-light@2x.9.png b/src/quickcontrols/ios/images/menuitem-background-single-pressed-light@2x.9.png
new file mode 100644
index 0000000000..7798409aa3
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-single-pressed-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/menuitem-background-single-pressed-light@3x.9.png b/src/quickcontrols/ios/images/menuitem-background-single-pressed-light@3x.9.png
new file mode 100644
index 0000000000..77a69bd247
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuitem-background-single-pressed-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/menuseparator-separator-dark.9.png b/src/quickcontrols/ios/images/menuseparator-separator-dark.9.png
new file mode 100644
index 0000000000..819e465354
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuseparator-separator-dark.9.png
diff --git a/src/quickcontrols/ios/images/menuseparator-separator-dark@2x.9.png b/src/quickcontrols/ios/images/menuseparator-separator-dark@2x.9.png
new file mode 100644
index 0000000000..81e3cdd391
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuseparator-separator-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/menuseparator-separator-dark@3x.9.png b/src/quickcontrols/ios/images/menuseparator-separator-dark@3x.9.png
new file mode 100644
index 0000000000..95d88ee659
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuseparator-separator-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/menuseparator-separator-light.9.png b/src/quickcontrols/ios/images/menuseparator-separator-light.9.png
new file mode 100644
index 0000000000..46276666e2
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuseparator-separator-light.9.png
diff --git a/src/quickcontrols/ios/images/menuseparator-separator-light@2x.9.png b/src/quickcontrols/ios/images/menuseparator-separator-light@2x.9.png
new file mode 100644
index 0000000000..0e2b9986a9
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuseparator-separator-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/menuseparator-separator-light@3x.9.png b/src/quickcontrols/ios/images/menuseparator-separator-light@3x.9.png
new file mode 100644
index 0000000000..d3eb183bf3
--- /dev/null
+++ b/src/quickcontrols/ios/images/menuseparator-separator-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/pageindicator-delegate-current-dark.png b/src/quickcontrols/ios/images/pageindicator-delegate-current-dark.png
new file mode 100644
index 0000000000..8f51025a25
--- /dev/null
+++ b/src/quickcontrols/ios/images/pageindicator-delegate-current-dark.png
diff --git a/src/quickcontrols/ios/images/pageindicator-delegate-current-dark@2x.png b/src/quickcontrols/ios/images/pageindicator-delegate-current-dark@2x.png
new file mode 100644
index 0000000000..434b0e295c
--- /dev/null
+++ b/src/quickcontrols/ios/images/pageindicator-delegate-current-dark@2x.png
diff --git a/src/quickcontrols/ios/images/pageindicator-delegate-current-dark@3x.png b/src/quickcontrols/ios/images/pageindicator-delegate-current-dark@3x.png
new file mode 100644
index 0000000000..3d89f00f1a
--- /dev/null
+++ b/src/quickcontrols/ios/images/pageindicator-delegate-current-dark@3x.png
diff --git a/src/quickcontrols/ios/images/pageindicator-delegate-current-light.png b/src/quickcontrols/ios/images/pageindicator-delegate-current-light.png
new file mode 100644
index 0000000000..ab9a27a6c5
--- /dev/null
+++ b/src/quickcontrols/ios/images/pageindicator-delegate-current-light.png
diff --git a/src/quickcontrols/ios/images/pageindicator-delegate-current-light@2x.png b/src/quickcontrols/ios/images/pageindicator-delegate-current-light@2x.png
new file mode 100644
index 0000000000..94b23004e9
--- /dev/null
+++ b/src/quickcontrols/ios/images/pageindicator-delegate-current-light@2x.png
diff --git a/src/quickcontrols/ios/images/pageindicator-delegate-current-light@3x.png b/src/quickcontrols/ios/images/pageindicator-delegate-current-light@3x.png
new file mode 100644
index 0000000000..24229b4cbf
--- /dev/null
+++ b/src/quickcontrols/ios/images/pageindicator-delegate-current-light@3x.png
diff --git a/src/quickcontrols/ios/images/pageindicator-delegate-dark.png b/src/quickcontrols/ios/images/pageindicator-delegate-dark.png
new file mode 100644
index 0000000000..560c3be532
--- /dev/null
+++ b/src/quickcontrols/ios/images/pageindicator-delegate-dark.png
diff --git a/src/quickcontrols/ios/images/pageindicator-delegate-dark@2x.png b/src/quickcontrols/ios/images/pageindicator-delegate-dark@2x.png
new file mode 100644
index 0000000000..5159b47d56
--- /dev/null
+++ b/src/quickcontrols/ios/images/pageindicator-delegate-dark@2x.png
diff --git a/src/quickcontrols/ios/images/pageindicator-delegate-dark@3x.png b/src/quickcontrols/ios/images/pageindicator-delegate-dark@3x.png
new file mode 100644
index 0000000000..979badf935
--- /dev/null
+++ b/src/quickcontrols/ios/images/pageindicator-delegate-dark@3x.png
diff --git a/src/quickcontrols/ios/images/pageindicator-delegate-light.png b/src/quickcontrols/ios/images/pageindicator-delegate-light.png
new file mode 100644
index 0000000000..65bd5ad63c
--- /dev/null
+++ b/src/quickcontrols/ios/images/pageindicator-delegate-light.png
diff --git a/src/quickcontrols/ios/images/pageindicator-delegate-light@2x.png b/src/quickcontrols/ios/images/pageindicator-delegate-light@2x.png
new file mode 100644
index 0000000000..7bd65b8105
--- /dev/null
+++ b/src/quickcontrols/ios/images/pageindicator-delegate-light@2x.png
diff --git a/src/quickcontrols/ios/images/pageindicator-delegate-light@3x.png b/src/quickcontrols/ios/images/pageindicator-delegate-light@3x.png
new file mode 100644
index 0000000000..a46d8668dc
--- /dev/null
+++ b/src/quickcontrols/ios/images/pageindicator-delegate-light@3x.png
diff --git a/src/quickcontrols/ios/images/popup-background-dark.9.png b/src/quickcontrols/ios/images/popup-background-dark.9.png
new file mode 100644
index 0000000000..9afd3ab0ce
--- /dev/null
+++ b/src/quickcontrols/ios/images/popup-background-dark.9.png
diff --git a/src/quickcontrols/ios/images/popup-background-dark@2x.9.png b/src/quickcontrols/ios/images/popup-background-dark@2x.9.png
new file mode 100644
index 0000000000..115908f4e0
--- /dev/null
+++ b/src/quickcontrols/ios/images/popup-background-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/popup-background-dark@3x.9.png b/src/quickcontrols/ios/images/popup-background-dark@3x.9.png
new file mode 100644
index 0000000000..2377c6f5d7
--- /dev/null
+++ b/src/quickcontrols/ios/images/popup-background-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/popup-background-light.9.png b/src/quickcontrols/ios/images/popup-background-light.9.png
new file mode 100644
index 0000000000..c06ec445cc
--- /dev/null
+++ b/src/quickcontrols/ios/images/popup-background-light.9.png
diff --git a/src/quickcontrols/ios/images/popup-background-light@2x.9.png b/src/quickcontrols/ios/images/popup-background-light@2x.9.png
new file mode 100644
index 0000000000..0de7471cf0
--- /dev/null
+++ b/src/quickcontrols/ios/images/popup-background-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/popup-background-light@3x.9.png b/src/quickcontrols/ios/images/popup-background-light@3x.9.png
new file mode 100644
index 0000000000..04fa3cc354
--- /dev/null
+++ b/src/quickcontrols/ios/images/popup-background-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/radiobutton-indicator-checked-dark.png b/src/quickcontrols/ios/images/radiobutton-indicator-checked-dark.png
new file mode 100644
index 0000000000..f8ac628b14
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiobutton-indicator-checked-dark.png
diff --git a/src/quickcontrols/ios/images/radiobutton-indicator-checked-dark@2x.png b/src/quickcontrols/ios/images/radiobutton-indicator-checked-dark@2x.png
new file mode 100644
index 0000000000..6cdbb278a6
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiobutton-indicator-checked-dark@2x.png
diff --git a/src/quickcontrols/ios/images/radiobutton-indicator-checked-dark@3x.png b/src/quickcontrols/ios/images/radiobutton-indicator-checked-dark@3x.png
new file mode 100644
index 0000000000..9375a40623
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiobutton-indicator-checked-dark@3x.png
diff --git a/src/quickcontrols/ios/images/radiobutton-indicator-checked-light.png b/src/quickcontrols/ios/images/radiobutton-indicator-checked-light.png
new file mode 100644
index 0000000000..b17f80c522
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiobutton-indicator-checked-light.png
diff --git a/src/quickcontrols/ios/images/radiobutton-indicator-checked-light@2x.png b/src/quickcontrols/ios/images/radiobutton-indicator-checked-light@2x.png
new file mode 100644
index 0000000000..7cbaa12bfb
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiobutton-indicator-checked-light@2x.png
diff --git a/src/quickcontrols/ios/images/radiobutton-indicator-checked-light@3x.png b/src/quickcontrols/ios/images/radiobutton-indicator-checked-light@3x.png
new file mode 100644
index 0000000000..e10579c6e8
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiobutton-indicator-checked-light@3x.png
diff --git a/src/quickcontrols/ios/images/radiobutton-indicator-dark.png b/src/quickcontrols/ios/images/radiobutton-indicator-dark.png
new file mode 100644
index 0000000000..bede4a1bce
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiobutton-indicator-dark.png
diff --git a/src/quickcontrols/ios/images/radiobutton-indicator-dark@2x.png b/src/quickcontrols/ios/images/radiobutton-indicator-dark@2x.png
new file mode 100644
index 0000000000..3eacdfd0b5
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiobutton-indicator-dark@2x.png
diff --git a/src/quickcontrols/ios/images/radiobutton-indicator-dark@3x.png b/src/quickcontrols/ios/images/radiobutton-indicator-dark@3x.png
new file mode 100644
index 0000000000..0098efdc9d
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiobutton-indicator-dark@3x.png
diff --git a/src/quickcontrols/ios/images/radiobutton-indicator-light.png b/src/quickcontrols/ios/images/radiobutton-indicator-light.png
new file mode 100644
index 0000000000..44b999c4f0
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiobutton-indicator-light.png
diff --git a/src/quickcontrols/ios/images/radiobutton-indicator-light@2x.png b/src/quickcontrols/ios/images/radiobutton-indicator-light@2x.png
new file mode 100644
index 0000000000..1dda163af5
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiobutton-indicator-light@2x.png
diff --git a/src/quickcontrols/ios/images/radiobutton-indicator-light@3x.png b/src/quickcontrols/ios/images/radiobutton-indicator-light@3x.png
new file mode 100644
index 0000000000..e303d37fd0
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiobutton-indicator-light@3x.png
diff --git a/src/quickcontrols/ios/images/radiodelegate-indicator-dark.png b/src/quickcontrols/ios/images/radiodelegate-indicator-dark.png
new file mode 100644
index 0000000000..8a658b26d6
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiodelegate-indicator-dark.png
diff --git a/src/quickcontrols/ios/images/radiodelegate-indicator-dark@2x.png b/src/quickcontrols/ios/images/radiodelegate-indicator-dark@2x.png
new file mode 100644
index 0000000000..2477fa99a5
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiodelegate-indicator-dark@2x.png
diff --git a/src/quickcontrols/ios/images/radiodelegate-indicator-dark@3x.png b/src/quickcontrols/ios/images/radiodelegate-indicator-dark@3x.png
new file mode 100644
index 0000000000..4bf7b4c7cd
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiodelegate-indicator-dark@3x.png
diff --git a/src/quickcontrols/ios/images/radiodelegate-indicator-light.png b/src/quickcontrols/ios/images/radiodelegate-indicator-light.png
new file mode 100644
index 0000000000..f826b9e766
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiodelegate-indicator-light.png
diff --git a/src/quickcontrols/ios/images/radiodelegate-indicator-light@2x.png b/src/quickcontrols/ios/images/radiodelegate-indicator-light@2x.png
new file mode 100644
index 0000000000..9b5d5dbed2
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiodelegate-indicator-light@2x.png
diff --git a/src/quickcontrols/ios/images/radiodelegate-indicator-light@3x.png b/src/quickcontrols/ios/images/radiodelegate-indicator-light@3x.png
new file mode 100644
index 0000000000..0470240580
--- /dev/null
+++ b/src/quickcontrols/ios/images/radiodelegate-indicator-light@3x.png
diff --git a/src/quickcontrols/ios/images/scrollindicator-handle-dark-horizontal.9.png b/src/quickcontrols/ios/images/scrollindicator-handle-dark-horizontal.9.png
new file mode 100644
index 0000000000..8a77ce365c
--- /dev/null
+++ b/src/quickcontrols/ios/images/scrollindicator-handle-dark-horizontal.9.png
diff --git a/src/quickcontrols/ios/images/scrollindicator-handle-dark-horizontal@2x.9.png b/src/quickcontrols/ios/images/scrollindicator-handle-dark-horizontal@2x.9.png
new file mode 100644
index 0000000000..b7c68e90df
--- /dev/null
+++ b/src/quickcontrols/ios/images/scrollindicator-handle-dark-horizontal@2x.9.png
diff --git a/src/quickcontrols/ios/images/scrollindicator-handle-dark-horizontal@3x.9.png b/src/quickcontrols/ios/images/scrollindicator-handle-dark-horizontal@3x.9.png
new file mode 100644
index 0000000000..6c913d0edb
--- /dev/null
+++ b/src/quickcontrols/ios/images/scrollindicator-handle-dark-horizontal@3x.9.png
diff --git a/src/quickcontrols/ios/images/scrollindicator-handle-dark-vertical.9.png b/src/quickcontrols/ios/images/scrollindicator-handle-dark-vertical.9.png
new file mode 100644
index 0000000000..3172c935cc
--- /dev/null
+++ b/src/quickcontrols/ios/images/scrollindicator-handle-dark-vertical.9.png
diff --git a/src/quickcontrols/ios/images/scrollindicator-handle-dark-vertical@2x.9.png b/src/quickcontrols/ios/images/scrollindicator-handle-dark-vertical@2x.9.png
new file mode 100644
index 0000000000..e61822c035
--- /dev/null
+++ b/src/quickcontrols/ios/images/scrollindicator-handle-dark-vertical@2x.9.png
diff --git a/src/quickcontrols/ios/images/scrollindicator-handle-dark-vertical@3x.9.png b/src/quickcontrols/ios/images/scrollindicator-handle-dark-vertical@3x.9.png
new file mode 100644
index 0000000000..4f2b6734ea
--- /dev/null
+++ b/src/quickcontrols/ios/images/scrollindicator-handle-dark-vertical@3x.9.png
diff --git a/src/quickcontrols/ios/images/scrollindicator-handle-light-horizontal.9.png b/src/quickcontrols/ios/images/scrollindicator-handle-light-horizontal.9.png
new file mode 100644
index 0000000000..8a77ce365c
--- /dev/null
+++ b/src/quickcontrols/ios/images/scrollindicator-handle-light-horizontal.9.png
diff --git a/src/quickcontrols/ios/images/scrollindicator-handle-light-horizontal@2x.9.png b/src/quickcontrols/ios/images/scrollindicator-handle-light-horizontal@2x.9.png
new file mode 100644
index 0000000000..b7c68e90df
--- /dev/null
+++ b/src/quickcontrols/ios/images/scrollindicator-handle-light-horizontal@2x.9.png
diff --git a/src/quickcontrols/ios/images/scrollindicator-handle-light-horizontal@3x.9.png b/src/quickcontrols/ios/images/scrollindicator-handle-light-horizontal@3x.9.png
new file mode 100644
index 0000000000..6c913d0edb
--- /dev/null
+++ b/src/quickcontrols/ios/images/scrollindicator-handle-light-horizontal@3x.9.png
diff --git a/src/quickcontrols/ios/images/scrollindicator-handle-light-vertical.9.png b/src/quickcontrols/ios/images/scrollindicator-handle-light-vertical.9.png
new file mode 100644
index 0000000000..3172c935cc
--- /dev/null
+++ b/src/quickcontrols/ios/images/scrollindicator-handle-light-vertical.9.png
diff --git a/src/quickcontrols/ios/images/scrollindicator-handle-light-vertical@2x.9.png b/src/quickcontrols/ios/images/scrollindicator-handle-light-vertical@2x.9.png
new file mode 100644
index 0000000000..e61822c035
--- /dev/null
+++ b/src/quickcontrols/ios/images/scrollindicator-handle-light-vertical@2x.9.png
diff --git a/src/quickcontrols/ios/images/scrollindicator-handle-light-vertical@3x.9.png b/src/quickcontrols/ios/images/scrollindicator-handle-light-vertical@3x.9.png
new file mode 100644
index 0000000000..4f2b6734ea
--- /dev/null
+++ b/src/quickcontrols/ios/images/scrollindicator-handle-light-vertical@3x.9.png
diff --git a/src/quickcontrols/ios/images/slider-background-dark.9.png b/src/quickcontrols/ios/images/slider-background-dark.9.png
new file mode 100644
index 0000000000..fd53274888
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-background-dark.9.png
diff --git a/src/quickcontrols/ios/images/slider-background-dark@2x.9.png b/src/quickcontrols/ios/images/slider-background-dark@2x.9.png
new file mode 100644
index 0000000000..ff91196972
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-background-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/slider-background-dark@3x.9.png b/src/quickcontrols/ios/images/slider-background-dark@3x.9.png
new file mode 100644
index 0000000000..98b2e63cfb
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-background-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/slider-background-light.9.png b/src/quickcontrols/ios/images/slider-background-light.9.png
new file mode 100644
index 0000000000..5970f421ea
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-background-light.9.png
diff --git a/src/quickcontrols/ios/images/slider-background-light@2x.9.png b/src/quickcontrols/ios/images/slider-background-light@2x.9.png
new file mode 100644
index 0000000000..5a03521004
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-background-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/slider-background-light@3x.9.png b/src/quickcontrols/ios/images/slider-background-light@3x.9.png
new file mode 100644
index 0000000000..39b2fe1968
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-background-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/slider-handle-disabled-dark.9.png b/src/quickcontrols/ios/images/slider-handle-disabled-dark.9.png
new file mode 100644
index 0000000000..5c2666a2b7
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-handle-disabled-dark.9.png
diff --git a/src/quickcontrols/ios/images/slider-handle-disabled-dark@2x.9.png b/src/quickcontrols/ios/images/slider-handle-disabled-dark@2x.9.png
new file mode 100644
index 0000000000..a33d6625b4
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-handle-disabled-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/slider-handle-disabled-dark@3x.9.png b/src/quickcontrols/ios/images/slider-handle-disabled-dark@3x.9.png
new file mode 100644
index 0000000000..47dcc3183e
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-handle-disabled-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/slider-handle-disabled-light.9.png b/src/quickcontrols/ios/images/slider-handle-disabled-light.9.png
new file mode 100644
index 0000000000..be3f21dcb1
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-handle-disabled-light.9.png
diff --git a/src/quickcontrols/ios/images/slider-handle-disabled-light@2x.9.png b/src/quickcontrols/ios/images/slider-handle-disabled-light@2x.9.png
new file mode 100644
index 0000000000..9e73aec4fd
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-handle-disabled-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/slider-handle-disabled-light@3x.9.png b/src/quickcontrols/ios/images/slider-handle-disabled-light@3x.9.png
new file mode 100644
index 0000000000..35ad327fbe
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-handle-disabled-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/slider-handle.9.png b/src/quickcontrols/ios/images/slider-handle.9.png
new file mode 100644
index 0000000000..ed9894b60f
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-handle.9.png
diff --git a/src/quickcontrols/ios/images/slider-handle@2x.9.png b/src/quickcontrols/ios/images/slider-handle@2x.9.png
new file mode 100644
index 0000000000..f76e4fe945
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-handle@2x.9.png
diff --git a/src/quickcontrols/ios/images/slider-handle@3x.9.png b/src/quickcontrols/ios/images/slider-handle@3x.9.png
new file mode 100644
index 0000000000..a6a9fe33f9
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-handle@3x.9.png
diff --git a/src/quickcontrols/ios/images/slider-progress-dark.9.png b/src/quickcontrols/ios/images/slider-progress-dark.9.png
new file mode 100644
index 0000000000..e41ced1a0e
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-progress-dark.9.png
diff --git a/src/quickcontrols/ios/images/slider-progress-dark@2x.9.png b/src/quickcontrols/ios/images/slider-progress-dark@2x.9.png
new file mode 100644
index 0000000000..3be5c17f0d
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-progress-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/slider-progress-dark@3x.9.png b/src/quickcontrols/ios/images/slider-progress-dark@3x.9.png
new file mode 100644
index 0000000000..58a21bce2e
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-progress-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/slider-progress-light.9.png b/src/quickcontrols/ios/images/slider-progress-light.9.png
new file mode 100644
index 0000000000..764b273756
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-progress-light.9.png
diff --git a/src/quickcontrols/ios/images/slider-progress-light@2x.9.png b/src/quickcontrols/ios/images/slider-progress-light@2x.9.png
new file mode 100644
index 0000000000..59fd8395e1
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-progress-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/slider-progress-light@3x.9.png b/src/quickcontrols/ios/images/slider-progress-light@3x.9.png
new file mode 100644
index 0000000000..0294770364
--- /dev/null
+++ b/src/quickcontrols/ios/images/slider-progress-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-background-dark.9.png b/src/quickcontrols/ios/images/spinbox-background-dark.9.png
new file mode 100644
index 0000000000..429d5dda7f
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-background-dark.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-background-dark@2x.9.png b/src/quickcontrols/ios/images/spinbox-background-dark@2x.9.png
new file mode 100644
index 0000000000..acb8f3df35
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-background-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-background-dark@3x.9.png b/src/quickcontrols/ios/images/spinbox-background-dark@3x.9.png
new file mode 100644
index 0000000000..ea798e64aa
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-background-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-background-light.9.png b/src/quickcontrols/ios/images/spinbox-background-light.9.png
new file mode 100644
index 0000000000..a831906778
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-background-light.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-background-light@2x.9.png b/src/quickcontrols/ios/images/spinbox-background-light@2x.9.png
new file mode 100644
index 0000000000..467cef5b94
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-background-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-background-light@3x.9.png b/src/quickcontrols/ios/images/spinbox-background-light@3x.9.png
new file mode 100644
index 0000000000..5afa6c9232
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-background-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-down-dark.9.png b/src/quickcontrols/ios/images/spinbox-indicator-down-dark.9.png
new file mode 100644
index 0000000000..989eb661cb
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-down-dark.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-down-dark@2x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-down-dark@2x.9.png
new file mode 100644
index 0000000000..a22f19bf3d
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-down-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-down-dark@3x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-down-dark@3x.9.png
new file mode 100644
index 0000000000..1e0d12afbc
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-down-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-down-light.9.png b/src/quickcontrols/ios/images/spinbox-indicator-down-light.9.png
new file mode 100644
index 0000000000..10b614e8e5
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-down-light.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-down-light@2x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-down-light@2x.9.png
new file mode 100644
index 0000000000..48fedbe21d
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-down-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-down-light@3x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-down-light@3x.9.png
new file mode 100644
index 0000000000..1254e56ddf
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-down-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-dark.9.png b/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-dark.9.png
new file mode 100644
index 0000000000..1f279f6eef
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-dark.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-dark@2x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-dark@2x.9.png
new file mode 100644
index 0000000000..dbbb584f10
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-dark@3x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-dark@3x.9.png
new file mode 100644
index 0000000000..78ced50148
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-light.9.png b/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-light.9.png
new file mode 100644
index 0000000000..46f9ddbcf5
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-light.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-light@2x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-light@2x.9.png
new file mode 100644
index 0000000000..ad6573bbfa
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-light@3x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-light@3x.9.png
new file mode 100644
index 0000000000..0fec10338b
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-down-pressed-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-up-dark.9.png b/src/quickcontrols/ios/images/spinbox-indicator-up-dark.9.png
new file mode 100644
index 0000000000..ca688ef523
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-up-dark.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-up-dark@2x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-up-dark@2x.9.png
new file mode 100644
index 0000000000..970ea1e89e
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-up-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-up-dark@3x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-up-dark@3x.9.png
new file mode 100644
index 0000000000..2ae2dddf45
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-up-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-up-light.9.png b/src/quickcontrols/ios/images/spinbox-indicator-up-light.9.png
new file mode 100644
index 0000000000..ca8afb87ae
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-up-light.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-up-light@2x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-up-light@2x.9.png
new file mode 100644
index 0000000000..4c434039e7
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-up-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-up-light@3x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-up-light@3x.9.png
new file mode 100644
index 0000000000..3302d3f6d6
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-up-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-dark.9.png b/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-dark.9.png
new file mode 100644
index 0000000000..15426b4ce6
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-dark.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-dark@2x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-dark@2x.9.png
new file mode 100644
index 0000000000..6295a5ed2c
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-dark@3x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-dark@3x.9.png
new file mode 100644
index 0000000000..bdaa739803
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-light.9.png b/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-light.9.png
new file mode 100644
index 0000000000..09b8ad162c
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-light.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-light@2x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-light@2x.9.png
new file mode 100644
index 0000000000..2ec793c747
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-light@3x.9.png b/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-light@3x.9.png
new file mode 100644
index 0000000000..95e19eb2af
--- /dev/null
+++ b/src/quickcontrols/ios/images/spinbox-indicator-up-pressed-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/switch-handle-disabled-dark.9.png b/src/quickcontrols/ios/images/switch-handle-disabled-dark.9.png
new file mode 100644
index 0000000000..11f229c8ef
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-handle-disabled-dark.9.png
diff --git a/src/quickcontrols/ios/images/switch-handle-disabled-dark@2x.9.png b/src/quickcontrols/ios/images/switch-handle-disabled-dark@2x.9.png
new file mode 100644
index 0000000000..7a030a4232
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-handle-disabled-dark@2x.9.png
diff --git a/src/quickcontrols/ios/images/switch-handle-disabled-dark@3x.9.png b/src/quickcontrols/ios/images/switch-handle-disabled-dark@3x.9.png
new file mode 100644
index 0000000000..59b2b0a3e1
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-handle-disabled-dark@3x.9.png
diff --git a/src/quickcontrols/ios/images/switch-handle-disabled-light.9.png b/src/quickcontrols/ios/images/switch-handle-disabled-light.9.png
new file mode 100644
index 0000000000..12a3b4ef6a
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-handle-disabled-light.9.png
diff --git a/src/quickcontrols/ios/images/switch-handle-disabled-light@2x.9.png b/src/quickcontrols/ios/images/switch-handle-disabled-light@2x.9.png
new file mode 100644
index 0000000000..dedcb7f4eb
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-handle-disabled-light@2x.9.png
diff --git a/src/quickcontrols/ios/images/switch-handle-disabled-light@3x.9.png b/src/quickcontrols/ios/images/switch-handle-disabled-light@3x.9.png
new file mode 100644
index 0000000000..8daf9e7a96
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-handle-disabled-light@3x.9.png
diff --git a/src/quickcontrols/ios/images/switch-handle.9.png b/src/quickcontrols/ios/images/switch-handle.9.png
new file mode 100644
index 0000000000..8112808a81
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-handle.9.png
diff --git a/src/quickcontrols/ios/images/switch-handle@2x.9.png b/src/quickcontrols/ios/images/switch-handle@2x.9.png
new file mode 100644
index 0000000000..4767588b3b
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-handle@2x.9.png
diff --git a/src/quickcontrols/ios/images/switch-handle@3x.9.png b/src/quickcontrols/ios/images/switch-handle@3x.9.png
new file mode 100644
index 0000000000..af4bcd06f8
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-handle@3x.9.png
diff --git a/src/quickcontrols/ios/images/switch-indicator-checked-dark.png b/src/quickcontrols/ios/images/switch-indicator-checked-dark.png
new file mode 100644
index 0000000000..c72622096d
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-indicator-checked-dark.png
diff --git a/src/quickcontrols/ios/images/switch-indicator-checked-dark@2x.png b/src/quickcontrols/ios/images/switch-indicator-checked-dark@2x.png
new file mode 100644
index 0000000000..0275dc140e
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-indicator-checked-dark@2x.png
diff --git a/src/quickcontrols/ios/images/switch-indicator-checked-dark@3x.png b/src/quickcontrols/ios/images/switch-indicator-checked-dark@3x.png
new file mode 100644
index 0000000000..9b8684219e
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-indicator-checked-dark@3x.png
diff --git a/src/quickcontrols/ios/images/switch-indicator-checked-light.png b/src/quickcontrols/ios/images/switch-indicator-checked-light.png
new file mode 100644
index 0000000000..5633ce2816
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-indicator-checked-light.png
diff --git a/src/quickcontrols/ios/images/switch-indicator-checked-light@2x.png b/src/quickcontrols/ios/images/switch-indicator-checked-light@2x.png
new file mode 100644
index 0000000000..6859b04326
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-indicator-checked-light@2x.png
diff --git a/src/quickcontrols/ios/images/switch-indicator-checked-light@3x.png b/src/quickcontrols/ios/images/switch-indicator-checked-light@3x.png
new file mode 100644
index 0000000000..3181f82f80
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-indicator-checked-light@3x.png
diff --git a/src/quickcontrols/ios/images/switch-indicator-dark.png b/src/quickcontrols/ios/images/switch-indicator-dark.png
new file mode 100644
index 0000000000..939cd4e780
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-indicator-dark.png
diff --git a/src/quickcontrols/ios/images/switch-indicator-dark@2x.png b/src/quickcontrols/ios/images/switch-indicator-dark@2x.png
new file mode 100644
index 0000000000..294e4e6621
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-indicator-dark@2x.png
diff --git a/src/quickcontrols/ios/images/switch-indicator-dark@3x.png b/src/quickcontrols/ios/images/switch-indicator-dark@3x.png
new file mode 100644
index 0000000000..500c2891cb
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-indicator-dark@3x.png
diff --git a/src/quickcontrols/ios/images/switch-indicator-light.png b/src/quickcontrols/ios/images/switch-indicator-light.png
new file mode 100644
index 0000000000..250cf0d99c
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-indicator-light.png
diff --git a/src/quickcontrols/ios/images/switch-indicator-light@2x.png b/src/quickcontrols/ios/images/switch-indicator-light@2x.png
new file mode 100644
index 0000000000..08886b2004
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-indicator-light@2x.png
diff --git a/src/quickcontrols/ios/images/switch-indicator-light@3x.png b/src/quickcontrols/ios/images/switch-indicator-light@3x.png
new file mode 100644
index 0000000000..ec2c8dfadc
--- /dev/null
+++ b/src/quickcontrols/ios/images/switch-indicator-light@3x.png
diff --git a/src/quickcontrols/ios/impl/CMakeLists.txt b/src/quickcontrols/ios/impl/CMakeLists.txt
new file mode 100644
index 0000000000..e298335bb1
--- /dev/null
+++ b/src/quickcontrols/ios/impl/CMakeLists.txt
@@ -0,0 +1,27 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2iosstyleimplplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "CursorDelegate.qml"
+)
+
+qt_internal_add_qml_module(qtquickcontrols2iosstyleimplplugin
+    URI "QtQuick.Controls.iOS.impl"
+    VERSION "${PROJECT_VERSION}"
+    PLUGIN_TARGET qtquickcontrols2iosstyleimplplugin
+    NO_PLUGIN_OPTIONAL
+    SOURCES
+        qquickiosstyle.cpp qquickiosstyle_p.h
+        qquickioscursorflashtimer_p.h qquickioscursorflashtimer.cpp
+    QML_FILES
+        ${qml_files}
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::Gui
+        Qt::QmlPrivate
+        Qt::QuickPrivate
+)
diff --git a/src/quickcontrols/ios/impl/CursorDelegate.qml b/src/quickcontrols/ios/impl/CursorDelegate.qml
new file mode 100644
index 0000000000..9b675afeb2
--- /dev/null
+++ b/src/quickcontrols/ios/impl/CursorDelegate.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.iOS.impl
+
+Rectangle {
+    id: cursor
+
+    color: "#426bf2"
+    width: 2
+    radius: 1
+    visible: parent.activeFocus && !parent.readOnly && parent.selectionStart === parent.selectionEnd
+
+    opacity: timer.visible ? 1 : 0
+
+    CursorFlashTimer {
+        id: timer
+        cursorPosition: cursor.parent.cursorPosition
+        running: cursor.parent.activeFocus && !cursor.parent.readOnly
+    }
+}
diff --git a/src/quickcontrols/ios/impl/qquickioscursorflashtimer.cpp b/src/quickcontrols/ios/impl/qquickioscursorflashtimer.cpp
new file mode 100644
index 0000000000..8ae88b2a90
--- /dev/null
+++ b/src/quickcontrols/ios/impl/qquickioscursorflashtimer.cpp
@@ -0,0 +1,79 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickioscursorflashtimer_p.h"
+#include <QtGui/qguiapplication.h>
+#include <QtGui/qstylehints.h>
+
+QT_BEGIN_NAMESPACE
+
+QQuickIOSCursorFlashTimer::QQuickIOSCursorFlashTimer(QObject *parent)
+    : QObject(parent)
+{
+}
+
+bool QQuickIOSCursorFlashTimer::visible() const
+{
+    return m_visible;
+}
+
+void QQuickIOSCursorFlashTimer::setVisible(bool visible)
+{
+    if (m_visible == visible)
+        return;
+    m_visible = visible;
+    emit visibleChanged();
+}
+
+int QQuickIOSCursorFlashTimer::cursorPosition() const
+{
+    return m_cursorPosition;
+}
+
+void QQuickIOSCursorFlashTimer::setCursorPosition(int cursorPosition)
+{
+    if (m_cursorPosition == cursorPosition)
+        return;
+    m_cursorPosition = cursorPosition;
+    emit cursorPositionChanged();
+    start();
+}
+
+bool QQuickIOSCursorFlashTimer::running() const
+{
+    return m_running;
+}
+
+void QQuickIOSCursorFlashTimer::setRunning(bool running)
+{
+    if (running == m_running)
+        return;
+    m_running = running;
+    emit runningChanged(m_running);
+    if (!running) {
+        stop();
+        setVisible(false);
+    } else {
+        start();
+    }
+}
+
+void QQuickIOSCursorFlashTimer::start()
+{
+    stop();
+    m_timer = startTimer(QGuiApplication::styleHints()->cursorFlashTime() / 2);
+}
+
+void QQuickIOSCursorFlashTimer::stop()
+{
+    killTimer(m_timer);
+    m_timer = 0;
+}
+
+void QQuickIOSCursorFlashTimer::timerEvent(QTimerEvent *event)
+{
+    if (event->timerId() == m_timer)
+        setVisible(!visible());
+}
+
+QT_END_NAMESPACE
diff --git a/src/quickcontrols/ios/impl/qquickioscursorflashtimer_p.h b/src/quickcontrols/ios/impl/qquickioscursorflashtimer_p.h
new file mode 100644
index 0000000000..46e73ecb64
--- /dev/null
+++ b/src/quickcontrols/ios/impl/qquickioscursorflashtimer_p.h
@@ -0,0 +1,62 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKIOSCURSORFLASHTIMER_P_H
+#define QQUICKIOSCURSORFLASHTIMER_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtQml/qqml.h>
+#include <QtCore/qobject.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickIOSCursorFlashTimer : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(bool visible READ visible WRITE setVisible NOTIFY visibleChanged FINAL)
+    Q_PROPERTY(int cursorPosition READ cursorPosition WRITE setCursorPosition NOTIFY cursorPositionChanged FINAL)
+    Q_PROPERTY(bool running READ running WRITE setRunning NOTIFY runningChanged FINAL)
+    QML_NAMED_ELEMENT(CursorFlashTimer)
+
+public:
+    explicit QQuickIOSCursorFlashTimer(QObject *parent = nullptr);
+
+    bool visible() const;
+    void setVisible(bool visible);
+
+    int cursorPosition() const;
+    void setCursorPosition(int cursorPosition);
+
+    bool running() const;
+    void setRunning(bool running);
+
+    void start();
+    void stop();
+
+    void timerEvent(QTimerEvent *event) override;
+
+Q_SIGNALS:
+    void visibleChanged();
+    void cursorPositionChanged();
+    void runningChanged(bool running);
+
+private:
+    bool m_visible = false;
+    int m_cursorPosition = 0;
+    int m_timer = 0;
+    bool m_running = false;
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKIOSCURSORFLASHTIMER_P_H
diff --git a/src/quickcontrols/ios/impl/qquickiosstyle.cpp b/src/quickcontrols/ios/impl/qquickiosstyle.cpp
new file mode 100644
index 0000000000..cfbbfd69f5
--- /dev/null
+++ b/src/quickcontrols/ios/impl/qquickiosstyle.cpp
@@ -0,0 +1,20 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickiosstyle_p.h"
+
+QT_BEGIN_NAMESPACE
+
+Q_GLOBAL_STATIC_WITH_ARGS(QString, GlobalPath, (QLatin1String("qrc:/qt-project.org/imports/QtQuick/Controls/iOS/images/")))
+
+QQuickIOSStyle::QQuickIOSStyle(QObject *parent)
+    : QObject(parent)
+{
+}
+
+QUrl QQuickIOSStyle::url()
+{
+    return *GlobalPath();
+}
+
+QT_END_NAMESPACE
diff --git a/src/quickcontrols/ios/impl/qquickiosstyle_p.h b/src/quickcontrols/ios/impl/qquickiosstyle_p.h
new file mode 100644
index 0000000000..03144751ad
--- /dev/null
+++ b/src/quickcontrols/ios/impl/qquickiosstyle_p.h
@@ -0,0 +1,39 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKIOSSTYLE_P_H
+#define QQUICKIOSSTYLE_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtCore/qobject.h>
+#include <QtQml/qqml.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickIOSStyle : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QUrl url READ url CONSTANT)
+    QML_NAMED_ELEMENT(IOS)
+    QML_SINGLETON
+    QML_ADDED_IN_VERSION(6, 5)
+
+public:
+    explicit QQuickIOSStyle(QObject *parent = nullptr);
+
+    static QUrl url();
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKIOSSTYLE_P_H
diff --git a/src/quickcontrols/ios/qquickiostheme.mm b/src/quickcontrols/ios/qquickiostheme.mm
new file mode 100644
index 0000000000..9c58e68d9d
--- /dev/null
+++ b/src/quickcontrols/ios/qquickiostheme.mm
@@ -0,0 +1,82 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickiostheme_p.h"
+
+#include <QtGui/private/qcoregraphics_p.h>
+
+#ifdef Q_OS_IOS
+#include <UIKit/UIInterface.h>
+#endif
+
+#include <QtQuickTemplates2/private/qquicktheme_p.h>
+#include <QtQuickControls2/private/qquickstyle_p.h>
+
+QT_BEGIN_NAMESPACE
+
+void QQuickIOSTheme::initialize(QQuickTheme *theme)
+{
+    QPalette systemPalette;
+
+    QColor window;
+    QColor windowText;
+    QColor background;
+    QColor placeholderText;
+    QColor button;
+    QColor disabledButton;
+    QColor white;
+    QColor lightGray;
+    QColor gray;
+    QColor darkGray;
+#ifdef Q_OS_IOS
+    window = qt_mac_toQColor(UIColor.systemGroupedBackgroundColor.CGColor);
+    windowText = qt_mac_toQColor(UIColor.labelColor.CGColor);
+    background = qt_mac_toQColor(UIColor.systemBackgroundColor.CGColor);
+    placeholderText = qt_mac_toQColor(UIColor.placeholderTextColor.CGColor);
+    button = qt_mac_toQColor(UIColor.systemBlueColor.CGColor);
+    disabledButton = qt_mac_toQColor(UIColor.tertiarySystemFillColor.CGColor);
+    white = qt_mac_toQColor(UIColor.whiteColor.CGColor);
+    lightGray = qt_mac_toQColor(UIColor.systemGray6Color.CGColor);
+    gray = qt_mac_toQColor(UIColor.opaqueSeparatorColor.CGColor);
+    darkGray = qt_mac_toQColor(UIColor.systemGrayColor.CGColor);
+#else
+    bool isDarkSystemTheme = QQuickStylePrivate::isDarkSystemTheme();
+    window = isDarkSystemTheme ? QColor(qRgba(0, 0, 0, 255)) : QColor(qRgba(242, 242, 247, 255));
+    windowText = isDarkSystemTheme ? QColor(Qt::white) : QColor(Qt::black);
+    background = isDarkSystemTheme ? QColor(Qt::black) : QColor(Qt::white);
+    placeholderText = isDarkSystemTheme ? QColor(qRgba(235, 235, 245, 77)) : QColor(qRgba(60, 60, 67, 77));
+    button = isDarkSystemTheme ? QColor(qRgba(10, 132, 255, 255)) : QColor(qRgba(0, 122, 255, 255));
+    disabledButton = isDarkSystemTheme ? QColor(qRgba(118, 118, 128, 61)) : QColor(qRgba(118, 118, 128, 31));
+    white = QColor(Qt::white);
+    lightGray = isDarkSystemTheme ? QColor(qRgba(28, 28, 30, 255)) : QColor(qRgba(242, 242, 247, 255));
+    gray = isDarkSystemTheme ? QColor(qRgba(56, 56, 58, 255)) : QColor(qRgba(198, 198, 200, 2555));
+    darkGray = QColor(qRgba(142, 142, 147, 255));
+#endif
+    systemPalette.setColor(QPalette::Window, window);
+
+    systemPalette.setColor(QPalette::Active, QPalette::WindowText, windowText);
+    systemPalette.setColor(QPalette::Disabled, QPalette::WindowText, darkGray);
+
+    systemPalette.setColor(QPalette::Base, background);
+
+    systemPalette.setColor(QPalette::PlaceholderText, placeholderText);
+
+    systemPalette.setColor(QPalette::Button, button);
+    systemPalette.setColor(QPalette::Disabled, QPalette::Button, disabledButton);
+
+    systemPalette.setColor(QPalette::ButtonText, white);
+    white.setAlphaF(0.5);
+    systemPalette.setColor(QPalette::Disabled, QPalette::ButtonText, white);
+
+    button.setAlphaF(0.8);
+    systemPalette.setColor(QPalette::Highlight, button);
+
+    systemPalette.setColor(QPalette::Light, lightGray);
+    systemPalette.setColor(QPalette::Mid, gray);
+    systemPalette.setColor(QPalette::Dark, darkGray);
+
+    theme->setPalette(QQuickTheme::System, systemPalette);
+}
+
+QT_END_NAMESPACE
+
diff --git a/src/quickcontrols/ios/qquickiostheme_p.h b/src/quickcontrols/ios/qquickiostheme_p.h
new file mode 100644
index 0000000000..e85de7e439
--- /dev/null
+++ b/src/quickcontrols/ios/qquickiostheme_p.h
@@ -0,0 +1,32 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKIOSTHEME_P_H
+#define QQUICKIOSTHEME_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtCore/qglobal.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickTheme;
+
+class QQuickIOSTheme
+{
+public:
+    static void initialize(QQuickTheme *theme);
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKIOSTHEME_P_H
diff --git a/src/quickcontrols/ios/qtquickcontrols2iosstyleplugin.cpp b/src/quickcontrols/ios/qtquickcontrols2iosstyleplugin.cpp
new file mode 100644
index 0000000000..87110a9936
--- /dev/null
+++ b/src/quickcontrols/ios/qtquickcontrols2iosstyleplugin.cpp
@@ -0,0 +1,55 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickiostheme_p.h"
+
+#include <QtCore/qloggingcategory.h>
+#include <QtQml/qqml.h>
+#include <QtQuickControls2/private/qquickstyleplugin_p.h>
+#include <QtQuickTemplates2/private/qquicktheme_p.h>
+
+QT_BEGIN_NAMESPACE
+
+extern void qml_register_types_QtQuick_Controls_iOS();
+Q_GHS_KEEP_REFERENCE(qml_register_types_QtQuick_Controls_iOS);
+
+class QtQuickControls2IOSStylePlugin : public QQuickStylePlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtQuickControls2IOSStylePlugin(QObject *parent = nullptr);
+
+    QString name() const override;
+    void initializeTheme(QQuickTheme *theme) override;
+    void updateTheme() override;
+
+    QQuickIOSTheme m_theme;
+};
+
+QtQuickControls2IOSStylePlugin::QtQuickControls2IOSStylePlugin(QObject *parent) : QQuickStylePlugin(parent)
+{
+    volatile auto registration = &qml_register_types_QtQuick_Controls_iOS;
+    Q_UNUSED(registration);
+}
+
+QString QtQuickControls2IOSStylePlugin::name() const
+{
+    return QStringLiteral("iOS");
+}
+
+void QtQuickControls2IOSStylePlugin::initializeTheme(QQuickTheme *theme)
+{
+    m_theme.initialize(theme);
+}
+
+void QtQuickControls2IOSStylePlugin::updateTheme()
+{
+    QQuickTheme *theme = QQuickTheme::instance();
+    m_theme.initialize(theme);
+}
+
+QT_END_NAMESPACE
+
+#include "qtquickcontrols2iosstyleplugin.moc"
diff --git a/src/quickcontrols/macos/Button.qml b/src/quickcontrols/macos/Button.qml
new file mode 100644
index 0000000000..5fa56c2b13
--- /dev/null
+++ b/src/quickcontrols/macos/Button.qml
@@ -0,0 +1,12 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultButton {
+    id: control
+    readonly property Item __focusFrameTarget: control
+
+    font.pixelSize: background.styleFont(control).pixelSize
+}
diff --git a/src/quickcontrols/macos/CMakeLists.txt b/src/quickcontrols/macos/CMakeLists.txt
new file mode 100644
index 0000000000..f0a3dcd3f4
--- /dev/null
+++ b/src/quickcontrols/macos/CMakeLists.txt
@@ -0,0 +1,66 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2macosstyleplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "Button.qml"
+    "Slider.qml"
+    "GroupBox.qml"
+    "CheckBox.qml"
+    "RadioButton.qml"
+    "SelectionRectangle.qml"
+    "SpinBox.qml"
+    "TextField.qml"
+    "Frame.qml"
+    "TextArea.qml"
+    "ComboBox.qml"
+    "ScrollView.qml"
+    "ScrollBar.qml"
+    "ProgressBar.qml"
+    "Dial.qml"
+    "Dialog.qml"
+    "DialogButtonBox.qml"
+)
+
+if (QT_FEATURE_quick_treeview)
+    list(APPEND qml_files
+        "TreeViewDelegate.qml"
+    )
+endif()
+
+qt_internal_add_qml_module(qtquickcontrols2macosstyleplugin
+    URI "QtQuick.Controls.macOS"
+    VERSION "${PROJECT_VERSION}"
+    CLASS_NAME QtQuickControls2MacOSStylePlugin
+    IMPORTS
+        QtQuick.Controls.Fusion/auto
+    PAST_MAJOR_VERSIONS 2
+    PLUGIN_TARGET qtquickcontrols2macosstyleplugin
+    NO_PLUGIN_OPTIONAL
+    NO_GENERATE_PLUGIN_SOURCE
+    SOURCES
+        qtquickcontrols2macosstyleplugin.cpp
+    QML_FILES
+        ${qml_files}
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::GuiPrivate
+        Qt::QmlPrivate
+        Qt::QuickControls2Private
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+)
+
+# Native style is a dependency of the macOS style.
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2macosstyleplugin
+                                              qtquickcontrols2nativestyleplugin)
+
+# Fusion style is the required fallback style.
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2macosstyleplugin
+                                              qtquickcontrols2fusionstyleplugin)
diff --git a/src/quickcontrols/macos/CheckBox.qml b/src/quickcontrols/macos/CheckBox.qml
new file mode 100644
index 0000000000..09756cb594
--- /dev/null
+++ b/src/quickcontrols/macos/CheckBox.qml
@@ -0,0 +1,13 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultCheckBox {
+    id: control
+    readonly property Item __focusFrameTarget: indicator
+    readonly property Item __focusFrameStyleItem: indicator
+
+    font.pixelSize: indicator.styleFont(control).pixelSize
+}
diff --git a/src/quickcontrols/macos/ComboBox.qml b/src/quickcontrols/macos/ComboBox.qml
new file mode 100644
index 0000000000..4ea2012382
--- /dev/null
+++ b/src/quickcontrols/macos/ComboBox.qml
@@ -0,0 +1,32 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultComboBox {
+    id: control
+    readonly property Item __focusFrameTarget: control
+    font.pixelSize: background.styleFont(control).pixelSize
+
+    contentItem: T.TextField {
+        implicitWidth: contentWidth
+        implicitHeight: contentHeight
+        text: control.editable ? control.editText : control.displayText
+
+        enabled: control.editable
+        autoScroll: control.editable
+        readOnly: control.down
+        inputMethodHints: control.inputMethodHints
+        validator: control.validator
+        selectByMouse: control.selectTextByMouse
+
+        color: control.editable ? control.palette.text : control.palette.buttonText
+        selectionColor: control.palette.highlight
+        selectedTextColor: control.palette.highlightedText
+        verticalAlignment: Text.AlignVCenter
+
+        readonly property Item __focusFrameControl: control
+    }
+}
diff --git a/src/quickcontrols/macos/Dial.qml b/src/quickcontrols/macos/Dial.qml
new file mode 100644
index 0000000000..f0cbf9c691
--- /dev/null
+++ b/src/quickcontrols/macos/Dial.qml
@@ -0,0 +1,10 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultDial {
+    id: control
+    font.pixelSize: background.styleFont(control).pixelSize
+}
diff --git a/src/quickcontrols/macos/Dialog.qml b/src/quickcontrols/macos/Dialog.qml
new file mode 100644
index 0000000000..69e9d9bf46
--- /dev/null
+++ b/src/quickcontrols/macos/Dialog.qml
@@ -0,0 +1,70 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.macOS
+// We want to use the Fusion style's Dialog and DialogButtonBox implementation,
+// (at least until we come up with macOS styling for them) but our
+// Button implementation, so both are copied from Fusion.
+import QtQuick.Controls.Fusion.impl
+
+T.Dialog {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitHeaderWidth,
+                            implicitFooterWidth)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding
+                             + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+                             + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
+
+    padding: 6
+
+    background: Rectangle {
+        color: control.palette.window
+        border.color: control.palette.mid
+        radius: 2
+
+        Rectangle {
+            x: 1
+            y: 1
+            z: -1
+            width: parent.width
+            height: parent.height
+            color: control.palette.shadow
+            opacity: 0.2
+            radius: 2
+        }
+    }
+
+    header: Label {
+        text: control.title
+        visible: control.title
+        elide: Label.ElideRight
+        font.bold: true
+        padding: 6
+        background: Rectangle {
+            x: 1
+            y: 1
+            width: parent.width - 2
+            height: parent.height - 1
+            color: control.palette.window
+            radius: 2
+        }
+    }
+
+    footer: DialogButtonBox {
+        visible: count > 0
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: Fusion.topShadow
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: Fusion.topShadow
+    }
+}
diff --git a/src/quickcontrols/macos/DialogButtonBox.qml b/src/quickcontrols/macos/DialogButtonBox.qml
new file mode 100644
index 0000000000..b99de3354c
--- /dev/null
+++ b/src/quickcontrols/macos/DialogButtonBox.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.DialogButtonBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 6
+    padding: 6
+    alignment: Qt.AlignRight
+
+    delegate: Button { }
+
+    contentItem: ListView {
+        implicitWidth: contentWidth
+        model: control.contentModel
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        snapMode: ListView.SnapToItem
+    }
+
+    background: Rectangle {
+        x: 1
+        y: 1
+        implicitHeight: 32
+        width: parent.width - 2
+        height: parent.height - 2
+        color: control.palette.window
+        radius: 2
+    }
+}
diff --git a/src/quickcontrols/macos/Frame.qml b/src/quickcontrols/macos/Frame.qml
new file mode 100644
index 0000000000..bb37d8aa26
--- /dev/null
+++ b/src/quickcontrols/macos/Frame.qml
@@ -0,0 +1,8 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultFrame {
+}
diff --git a/src/quickcontrols/macos/GroupBox.qml b/src/quickcontrols/macos/GroupBox.qml
new file mode 100644
index 0000000000..38c82891a1
--- /dev/null
+++ b/src/quickcontrols/macos/GroupBox.qml
@@ -0,0 +1,28 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultGroupBox {
+    id: control
+    font.pixelSize: background.styleFont(control).pixelSize
+    label: Item {
+        readonly property point labelPos : control.__nativeBackground
+                                  ? background.labelPos
+                                  : Qt.point(0,0)
+        x: labelPos.x + background.x
+        y: labelPos.y + background.y - (control.__nativeBackground ? background.groupBoxPadding.top : 0)
+        width: children[0].implicitWidth
+        height: children[0].implicitHeight
+        Text {
+            width: parent.width
+            height: parent.height
+            text: control.title
+            font: control.font
+            color: control.palette.windowText
+            elide: Text.ElideRight
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+}
diff --git a/src/quickcontrols/macos/ProgressBar.qml b/src/quickcontrols/macos/ProgressBar.qml
new file mode 100644
index 0000000000..66456e029e
--- /dev/null
+++ b/src/quickcontrols/macos/ProgressBar.qml
@@ -0,0 +1,10 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultProgressBar {
+    id: control
+    font.pixelSize: background.styleFont(control).pixelSize
+}
diff --git a/src/quickcontrols/macos/RadioButton.qml b/src/quickcontrols/macos/RadioButton.qml
new file mode 100644
index 0000000000..56d1e537a4
--- /dev/null
+++ b/src/quickcontrols/macos/RadioButton.qml
@@ -0,0 +1,12 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultRadioButton {
+    id: control
+    readonly property Item __focusFrameTarget: indicator
+    readonly property Item __focusFrameStyleItem: indicator
+    font.pixelSize: indicator.styleFont(control).pixelSize
+}
diff --git a/src/quickcontrols/macos/ScrollBar.qml b/src/quickcontrols/macos/ScrollBar.qml
new file mode 100644
index 0000000000..15235ffc83
--- /dev/null
+++ b/src/quickcontrols/macos/ScrollBar.qml
@@ -0,0 +1,33 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultScrollBar {
+    id: controlRoot
+    font.pixelSize: background.styleFont(controlRoot).pixelSize
+
+    contentItem: NativeStyle.ScrollBar {
+        control: controlRoot
+        subControl: NativeStyle.ScrollBar.Handle
+        overrideState: NativeStyle.ScrollBar.NeverHovered
+        opacity: 0.5
+    }
+
+    NativeStyle.ScrollBar {
+        // Fade a hovered-looking version of the handle
+        // on top of the default handle when hovering it
+        x: contentItem.x
+        y: contentItem.y
+        width: contentItem.width
+        height: contentItem.height
+        control: controlRoot
+        subControl: NativeStyle.ScrollBar.Handle
+        overrideState: NativeStyle.StyleItem.AlwaysHovered
+        opacity: controlRoot.hovered || control.pressed ? 0.5 : 0
+        visible: contentItem instanceof NativeStyle.StyleItem
+        Behavior on opacity { NumberAnimation { duration: contentItem.transitionDuration } }
+    }
+
+}
diff --git a/src/quickcontrols/macos/ScrollView.qml b/src/quickcontrols/macos/ScrollView.qml
new file mode 100644
index 0000000000..594406fa55
--- /dev/null
+++ b/src/quickcontrols/macos/ScrollView.qml
@@ -0,0 +1,42 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+import QtQuick.NativeStyle as NativeStyle
+
+T.ScrollView {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    rightPadding: ScrollBar.vertical.visible ? ScrollBar.vertical.width : 0
+    bottomPadding: ScrollBar.horizontal.visible ? ScrollBar.horizontal.height : 0
+
+    ScrollBar.vertical: ScrollBar {
+        parent: control
+        x: control.mirrored ? 0 : control.width - width
+        y: 0
+        height: control.height - (control.ScrollBar.horizontal.visible ? control.ScrollBar.horizontal.height : 0)
+        active: control.ScrollBar.horizontal.active
+
+        NativeStyle.ScrollViewCorner {
+            y: parent.height
+            control: control
+            visible: control.ScrollBar.horizontal.visible
+            useNinePatchImage: false
+        }
+    }
+
+    ScrollBar.horizontal: ScrollBar {
+        parent: control
+        x: 0
+        y: control.height - height
+        width: control.width - (control.ScrollBar.vertical.visible ? control.ScrollBar.vertical.width : 0)
+        active: control.ScrollBar.vertical.active
+    }
+}
diff --git a/src/quickcontrols/macos/SelectionRectangle.qml b/src/quickcontrols/macos/SelectionRectangle.qml
new file mode 100644
index 0000000000..8efadd8e31
--- /dev/null
+++ b/src/quickcontrols/macos/SelectionRectangle.qml
@@ -0,0 +1,29 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Shapes
+
+T.SelectionRectangle {
+    id: control
+
+    topLeftHandle: Item {
+        width: 20
+        height: 20
+        visible: SelectionRectangle.control.active
+        // This item is deliberately empty. Selection handles don't feel at home
+        // for this style. But we provide an invisible handle that the user can
+        // drag on.
+    }
+
+    bottomRightHandle: Item {
+        width: 20
+        height: 20
+        visible: SelectionRectangle.control.active
+        // This item is deliberately empty. Selection handles don't feel at home
+        // for this style. But we provide an invisible handle that the user can
+        // drag on.
+    }
+
+}
diff --git a/src/quickcontrols/macos/Slider.qml b/src/quickcontrols/macos/Slider.qml
new file mode 100644
index 0000000000..33db57b16c
--- /dev/null
+++ b/src/quickcontrols/macos/Slider.qml
@@ -0,0 +1,36 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultSlider {
+    id: control
+    readonly property Item __focusFrameTarget: handle
+    readonly property Item __focusFrameStyleItem: handle
+    font.pixelSize: background.styleFont(control).pixelSize
+
+    background: NativeStyle.Slider {
+        control: control
+        subControl: NativeStyle.Slider.Groove | NativeStyle.Slider.Handle
+        // We normally cannot use a nine patch image for the
+        // groove if we draw tickmarks (since then the scaling
+        // would scale the tickmarks too). The groove might
+        // also use a different background color before, and
+        // after, the handle.
+        useNinePatchImage: false
+    }
+
+    handle: NativeStyle.Slider {
+        // The handle is hidden, since it will be drawn as a part
+        // of the background. But will still needs it to be here so
+        // that we can place the focus rect correctly.
+        visible: false
+
+        control: control
+        subControl: NativeStyle.Slider.Handle
+        x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
+        useNinePatchImage: false
+    }
+}
diff --git a/src/quickcontrols/macos/SpinBox.qml b/src/quickcontrols/macos/SpinBox.qml
new file mode 100644
index 0000000000..9f10a08e55
--- /dev/null
+++ b/src/quickcontrols/macos/SpinBox.qml
@@ -0,0 +1,66 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.NativeStyle as NativeStyle
+
+T.SpinBox {
+    id: control
+
+    implicitWidth: Math.max(implicitContentWidth + leftInset + rightInset)
+    implicitHeight: Math.max(implicitContentHeight, up.implicitIndicatorHeight + down.implicitIndicatorHeight)
+                    + topInset + bottomInset
+
+    spacing: 2
+    rightPadding: up.implicitIndicatorWidth + spacing
+
+    validator: IntValidator {
+        locale: control.locale.name
+        bottom: Math.min(control.from, control.to)
+        top: Math.max(control.from, control.to)
+    }
+
+    contentItem: TextField {
+        text: control.displayText
+        font: control.font
+        color: control.palette.text
+        selectionColor: control.palette.highlight
+        selectedTextColor: control.palette.highlightedText
+        horizontalAlignment: Qt.AlignLeft
+        verticalAlignment: Qt.AlignVCenter
+        implicitWidth: 100 // From IB XCode
+
+        topPadding: 2
+        bottomPadding: 2
+        leftPadding: 10
+        rightPadding: 10
+
+        readOnly: !control.editable
+        validator: control.validator
+        inputMethodHints: control.inputMethodHints
+    }
+
+    NativeStyle.SpinBox {
+        id: upAndDown
+        control: control
+        subControl: NativeStyle.SpinBox.Up
+        x: up.indicator.x
+        y: up.indicator.y
+        useNinePatchImage: false
+    }
+
+    up.indicator: Item {
+        x: parent.width - width
+        y: (parent.height / 2) - height
+        implicitWidth: upAndDown.width
+        implicitHeight: upAndDown.height / 2
+    }
+
+    down.indicator: Item {
+        x: parent.width - width
+        y: up.indicator.y + upAndDown.height / 2
+        implicitWidth: upAndDown.width
+        implicitHeight: upAndDown.height / 2
+    }
+}
diff --git a/src/quickcontrols/macos/TextArea.qml b/src/quickcontrols/macos/TextArea.qml
new file mode 100644
index 0000000000..9dbd0863bd
--- /dev/null
+++ b/src/quickcontrols/macos/TextArea.qml
@@ -0,0 +1,8 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultTextArea {
+}
diff --git a/src/quickcontrols/macos/TextField.qml b/src/quickcontrols/macos/TextField.qml
new file mode 100644
index 0000000000..2ef2c683da
--- /dev/null
+++ b/src/quickcontrols/macos/TextField.qml
@@ -0,0 +1,11 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultTextField {
+    id: control
+    readonly property Item __focusFrameTarget: control
+    font.pixelSize: background.styleFont(control).pixelSize
+}
diff --git a/src/quickcontrols/macos/TreeViewDelegate.qml b/src/quickcontrols/macos/TreeViewDelegate.qml
new file mode 100644
index 0000000000..43930cc7a9
--- /dev/null
+++ b/src/quickcontrols/macos/TreeViewDelegate.qml
@@ -0,0 +1,23 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultTreeViewDelegate {
+    id: control
+
+    palette.highlight: "#2f64e1"
+    palette.highlightedText: "white"
+
+    background: Rectangle {
+        color: control.highlighted ? control.palette.highlight
+               : (control.treeView.alternatingRows && control.row % 2 !== 0
+               ? control.palette.alternateBase : control.palette.base)
+        // Ideally we want a rounded background for the whole row, also when
+        // there are more than one column. But until Rectangle gains support
+        // for corners with individual radii, we simplify it (QTBUG-48774)
+        radius: control.row === control.treeView.currentRow && control.treeView.columns === 1 ? 5 : 0
+    }
+}
+
diff --git a/src/quickcontrols/macos/qtquickcontrols2macosstyleplugin.cpp b/src/quickcontrols/macos/qtquickcontrols2macosstyleplugin.cpp
new file mode 100644
index 0000000000..ec67ffa4dc
--- /dev/null
+++ b/src/quickcontrols/macos/qtquickcontrols2macosstyleplugin.cpp
@@ -0,0 +1,43 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include <QtQml/qqml.h>
+#include <QtQuickControls2/private/qquickstyleplugin_p.h>
+#include <QtQuickControls2/qquickstyle.h>
+
+QT_BEGIN_NAMESPACE
+
+extern void qml_register_types_QtQuick_Controls_macOS();
+Q_GHS_KEEP_REFERENCE(qml_register_types_QtQuick_Controls_macOS);
+
+class QtQuickControls2MacOSStylePlugin : public QQuickStylePlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtQuickControls2MacOSStylePlugin(QObject *parent = nullptr);
+    QString name() const override;
+    void initializeTheme(QQuickTheme *theme) override;
+};
+
+
+QtQuickControls2MacOSStylePlugin::QtQuickControls2MacOSStylePlugin(QObject *parent):
+    QQuickStylePlugin(parent)
+{
+    volatile auto registration = &qml_register_types_QtQuick_Controls_macOS;
+    Q_UNUSED(registration);
+}
+
+QString QtQuickControls2MacOSStylePlugin::name() const
+{
+    return QStringLiteral("macOS");
+}
+
+void QtQuickControls2MacOSStylePlugin::initializeTheme(QQuickTheme */*theme*/)
+{
+}
+
+QT_END_NAMESPACE
+
+#include "qtquickcontrols2macosstyleplugin.moc"
diff --git a/src/quickcontrols/material/ApplicationWindow.qml b/src/quickcontrols/material/ApplicationWindow.qml
new file mode 100644
index 0000000000..9ba951956b
--- /dev/null
+++ b/src/quickcontrols/material/ApplicationWindow.qml
@@ -0,0 +1,13 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+
+T.ApplicationWindow {
+    id: window
+
+    color: Material.backgroundColor
+}
diff --git a/src/quickcontrols/material/BusyIndicator.qml b/src/quickcontrols/material/BusyIndicator.qml
new file mode 100644
index 0000000000..9de6535651
--- /dev/null
+++ b/src/quickcontrols/material/BusyIndicator.qml
@@ -0,0 +1,28 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.BusyIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+
+    contentItem: BusyIndicatorImpl {
+        implicitWidth: control.Material.touchTarget
+        implicitHeight: control.Material.touchTarget
+        color: control.Material.accentColor
+
+        running: control.running
+        opacity: control.running ? 1 : 0
+        Behavior on opacity { OpacityAnimator { duration: 250 } }
+    }
+}
diff --git a/src/quickcontrols/material/Button.qml b/src/quickcontrols/material/Button.qml
new file mode 100644
index 0000000000..f2828b1eeb
--- /dev/null
+++ b/src/quickcontrols/material/Button.qml
@@ -0,0 +1,85 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.Button {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    topInset: 6
+    bottomInset: 6
+    padding: 12
+    horizontalPadding: padding - 4
+    spacing: 6
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: !enabled ? Material.hintTextColor :
+        flat && highlighted ? Material.accentColor :
+        highlighted ? Material.primaryHighlightedTextColor : Material.foreground
+
+    Material.elevation: flat ? control.down || (enabled && control.hovered) ? 2 : 0
+                             : control.down ? 8 : 2
+    Material.background: flat ? "transparent" : undefined
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: !control.enabled ? control.Material.hintTextColor :
+            control.flat && control.highlighted ? control.Material.accentColor :
+            control.highlighted ? control.Material.primaryHighlightedTextColor : control.Material.foreground
+    }
+
+    background: Rectangle {
+        implicitWidth: 64
+        implicitHeight: control.Material.buttonHeight
+
+        radius: 2
+        color: !control.enabled ? control.Material.buttonDisabledColor :
+                control.highlighted ? (control.checked ? control.Material.highlightedCheckedButtonColor :
+                control.Material.highlightedButtonColor) : control.Material.buttonColor
+
+        PaddedRectangle {
+            y: parent.height - 4
+            width: parent.width
+            height: 4
+            radius: 2
+            topPadding: -2
+            clip: true
+            visible: control.checkable && (!control.highlighted || control.flat)
+            color: control.checked && control.enabled ? control.Material.accentColor : control.Material.secondaryTextColor
+        }
+
+        // The layer is disabled when the button color is transparent so you can do
+        // Material.background: "transparent" and get a proper flat button without needing
+        // to set Material.elevation as well
+        layer.enabled: control.enabled && control.Material.buttonColor.a > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+        }
+
+        Ripple {
+            clipRadius: 2
+            width: parent.width
+            height: parent.height
+            pressed: control.pressed
+            anchor: control
+            active: enabled && (control.down || control.visualFocus || control.hovered)
+            color: control.flat && control.highlighted ? control.Material.highlightedRippleColor : control.Material.rippleColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/CMakeLists.txt b/src/quickcontrols/material/CMakeLists.txt
new file mode 100644
index 0000000000..f328e775c3
--- /dev/null
+++ b/src/quickcontrols/material/CMakeLists.txt
@@ -0,0 +1,158 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2materialstyleplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "ApplicationWindow.qml"
+    "BusyIndicator.qml"
+    "Button.qml"
+    "CheckBox.qml"
+    "CheckDelegate.qml"
+    "ComboBox.qml"
+    "DelayButton.qml"
+    "Dial.qml"
+    "Dialog.qml"
+    "DialogButtonBox.qml"
+    "Drawer.qml"
+    "Frame.qml"
+    "GroupBox.qml"
+    "HorizontalHeaderView.qml"
+    "ItemDelegate.qml"
+    "Label.qml"
+    "Menu.qml"
+    "MenuBar.qml"
+    "MenuBarItem.qml"
+    "MenuItem.qml"
+    "MenuSeparator.qml"
+    "Page.qml"
+    "PageIndicator.qml"
+    "Pane.qml"
+    "Popup.qml"
+    "ProgressBar.qml"
+    "RadioButton.qml"
+    "RadioDelegate.qml"
+    "RangeSlider.qml"
+    "RoundButton.qml"
+    "ScrollView.qml"
+    "ScrollBar.qml"
+    "ScrollIndicator.qml"
+    "SelectionRectangle.qml"
+    "Slider.qml"
+    "SpinBox.qml"
+    "SplitView.qml"
+    "StackView.qml"
+    "SwipeDelegate.qml"
+    "SwipeView.qml"
+    "Switch.qml"
+    "SwitchDelegate.qml"
+    "TabBar.qml"
+    "TabButton.qml"
+    "TextArea.qml"
+    "TextField.qml"
+    "ToolBar.qml"
+    "ToolButton.qml"
+    "ToolSeparator.qml"
+    "ToolTip.qml"
+    "TreeViewDelegate.qml"
+    "Tumbler.qml"
+    "VerticalHeaderView.qml"
+)
+set_source_files_properties(DelayButton.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.2;6.0"
+)
+set_source_files_properties(Dialog.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(DialogButtonBox.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(HorizontalHeaderView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.15;6.0"
+)
+set_source_files_properties(MenuBar.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.3;6.0"
+)
+set_source_files_properties(MenuBarItem.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.3;6.0"
+)
+set_source_files_properties(MenuSeparator.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(RoundButton.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(SplitView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.13;6.0"
+)
+set_source_files_properties(ToolSeparator.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(VerticalHeaderView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.15;6.0"
+)
+
+qt_internal_add_qml_module(qtquickcontrols2materialstyleplugin
+    URI "QtQuick.Controls.Material"
+    VERSION "${PROJECT_VERSION}"
+    PAST_MAJOR_VERSIONS 2
+    CLASS_NAME QtQuickControls2MaterialStylePlugin
+    DEPENDENCIES
+        QtQuick/auto
+    IMPORTS
+        QtQuick.Controls.Basic/auto
+    PLUGIN_TARGET qtquickcontrols2materialstyleplugin
+    NO_PLUGIN_OPTIONAL
+    NO_GENERATE_PLUGIN_SOURCE
+    SOURCES
+        qquickmaterialstyle.cpp qquickmaterialstyle_p.h
+        qquickmaterialtheme.cpp qquickmaterialtheme_p.h
+        qtquickcontrols2materialstyleplugin.cpp
+    QML_FILES
+        ${qml_files}
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::GuiPrivate
+        Qt::QmlPrivate
+        Qt::QuickControls2ImplPrivate
+        Qt::QuickControls2Private
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+)
+
+qt_internal_add_resource(qtquickcontrols2materialstyleplugin "qtquickcontrols2materialstyleplugin"
+    PREFIX
+        "/qt-project.org/imports/QtQuick/Controls/Material"
+    FILES
+        "images/arrow-indicator.png"
+        "images/arrow-indicator@2x.png"
+        "images/arrow-indicator@3x.png"
+        "images/arrow-indicator@4x.png"
+        "images/check.png"
+        "images/check@2x.png"
+        "images/check@3x.png"
+        "images/check@4x.png"
+        "images/drop-indicator.png"
+        "images/drop-indicator@2x.png"
+        "images/drop-indicator@3x.png"
+        "images/drop-indicator@4x.png"
+        "shaders/+glslcore/RectangularGlow.frag"
+        "shaders/+hlsl/RectangularGlow.frag"
+        "shaders/+qsb/RectangularGlow.frag"
+        "shaders/RectangularGlow.frag"
+)
+
+add_subdirectory(impl)
+
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2materialstyleplugin quickwindow)
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2materialstyleplugin
+                                              qtquickcontrols2materialstyleimplplugin)
+
+# Basic style is the required fallback style.
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2materialstyleplugin
+                                              qtquickcontrols2basicstyleplugin)
diff --git a/src/quickcontrols/material/CheckBox.qml b/src/quickcontrols/material/CheckBox.qml
new file mode 100644
index 0000000000..b74fb005fb
--- /dev/null
+++ b/src/quickcontrols/material/CheckBox.qml
@@ -0,0 +1,50 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.CheckBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 8
+    padding: 8
+    verticalPadding: padding + 7
+
+    indicator: CheckIndicator {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+
+        Ripple {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 28; height: 28
+
+            z: -1
+            anchor: control
+            pressed: control.pressed
+            active: enabled && (control.down || control.visualFocus || control.hovered)
+            color: control.checked ? control.Material.highlightedRippleColor : control.Material.rippleColor
+        }
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+}
diff --git a/src/quickcontrols/material/CheckDelegate.qml b/src/quickcontrols/material/CheckDelegate.qml
new file mode 100644
index 0000000000..0dead045a3
--- /dev/null
+++ b/src/quickcontrols/material/CheckDelegate.qml
@@ -0,0 +1,64 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.CheckDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 16
+    verticalPadding: 8
+    spacing: 16
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: enabled ? Material.foreground : Material.hintTextColor
+
+    indicator: CheckIndicator {
+        x: control.text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: IconLabel {
+        leftPadding: !control.mirrored ? 0 : control.indicator.width + control.spacing
+        rightPadding: control.mirrored ? 0 : control.indicator.width + control.spacing
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+    }
+
+    background: Rectangle {
+        implicitHeight: control.Material.delegateHeight
+
+        color: control.highlighted ? control.Material.listHighlightColor : "transparent"
+
+        Ripple {
+            width: parent.width
+            height: parent.height
+
+            clip: visible
+            pressed: control.pressed
+            anchor: control
+            active: enabled && (control.down || control.visualFocus || control.hovered)
+            color: control.Material.rippleColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/ComboBox.qml b/src/quickcontrols/material/ComboBox.qml
new file mode 100644
index 0000000000..30222c4180
--- /dev/null
+++ b/src/quickcontrols/material/ComboBox.qml
@@ -0,0 +1,145 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.ComboBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    topInset: 6
+    bottomInset: 6
+
+    leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+    rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+
+    Material.elevation: flat ? control.pressed || (enabled && control.hovered) ? 2 : 0
+                             : control.pressed ? 8 : 2
+    Material.background: flat ? "transparent" : undefined
+    Material.foreground: flat ? undefined : Material.primaryTextColor
+
+    delegate: MenuItem {
+        width: ListView.view.width
+        text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
+        Material.foreground: control.currentIndex === index ? ListView.view.contentItem.Material.accent : ListView.view.contentItem.Material.foreground
+        highlighted: control.highlightedIndex === index
+        hoverEnabled: control.hoverEnabled
+    }
+
+    indicator: ColorImage {
+        x: control.mirrored ? control.padding : control.width - width - control.padding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+        source: "qrc:/qt-project.org/imports/QtQuick/Controls/Material/images/drop-indicator.png"
+    }
+
+    contentItem: T.TextField {
+        padding: 6
+        leftPadding: control.editable ? 2 : control.mirrored ? 0 : 12
+        rightPadding: control.editable ? 2 : control.mirrored ? 12 : 0
+
+        text: control.editable ? control.editText : control.displayText
+
+        enabled: control.editable
+        autoScroll: control.editable
+        readOnly: control.down
+        inputMethodHints: control.inputMethodHints
+        validator: control.validator
+        selectByMouse: control.selectTextByMouse
+
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+        selectionColor: control.Material.accentColor
+        selectedTextColor: control.Material.primaryHighlightedTextColor
+        verticalAlignment: Text.AlignVCenter
+
+        cursorDelegate: CursorDelegate { }
+    }
+
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: control.Material.buttonHeight
+
+        radius: control.flat ? 0 : 2
+        color: !control.editable ? control.Material.dialogColor : "transparent"
+
+        layer.enabled: control.enabled && !control.editable && control.Material.background.a > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+        }
+
+        Rectangle {
+            visible: control.editable
+            y: parent.y + control.baselineOffset
+            width: parent.width
+            height: control.activeFocus ? 2 : 1
+            color: control.editable && control.activeFocus ? control.Material.accentColor : control.Material.hintTextColor
+        }
+
+        Ripple {
+            clip: control.flat
+            clipRadius: control.flat ? 0 : 2
+            x: control.editable && control.indicator ? control.indicator.x : 0
+            width: control.editable && control.indicator ? control.indicator.width : parent.width
+            height: parent.height
+            pressed: control.pressed
+            anchor: control.editable && control.indicator ? control.indicator : control
+            active: enabled && (control.pressed || control.visualFocus || control.hovered)
+            color: control.Material.rippleColor
+        }
+    }
+
+    popup: T.Popup {
+        y: control.editable ? control.height - 5 : 0
+        width: control.width
+        height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
+        transformOrigin: Item.Top
+        topMargin: 12
+        bottomMargin: 12
+
+        Material.theme: control.Material.theme
+        Material.accent: control.Material.accent
+        Material.primary: control.Material.primary
+
+        enter: Transition {
+            // grow_fade_in
+            NumberAnimation { property: "scale"; from: 0.9; easing.type: Easing.OutQuint; duration: 220 }
+            NumberAnimation { property: "opacity"; from: 0.0; easing.type: Easing.OutCubic; duration: 150 }
+        }
+
+        exit: Transition {
+            // shrink_fade_out
+            NumberAnimation { property: "scale"; to: 0.9; easing.type: Easing.OutQuint; duration: 220 }
+            NumberAnimation { property: "opacity"; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
+        }
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
+            highlightMoveDuration: 0
+
+            T.ScrollIndicator.vertical: ScrollIndicator { }
+        }
+
+        background: Rectangle {
+            radius: 2
+            color: parent.Material.dialogColor
+
+            layer.enabled: control.enabled
+            layer.effect: ElevationEffect {
+                elevation: 8
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/material/DelayButton.qml b/src/quickcontrols/material/DelayButton.qml
new file mode 100644
index 0000000000..f050d57a39
--- /dev/null
+++ b/src/quickcontrols/material/DelayButton.qml
@@ -0,0 +1,83 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.DelayButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    topInset: 6
+    bottomInset: 6
+    padding: 12
+    horizontalPadding: padding - 4
+
+    Material.elevation: control.down ? 8 : 2
+
+    transition: Transition {
+        NumberAnimation {
+            duration: control.delay * (control.pressed ? 1.0 - control.progress : 0.3 * control.progress)
+        }
+    }
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        color: !control.enabled ? control.Material.hintTextColor : control.Material.foreground
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
+    background: Rectangle {
+        implicitWidth: 64
+        implicitHeight: control.Material.buttonHeight
+
+        radius: 2
+        color: !control.enabled ? control.Material.buttonDisabledColor : control.Material.buttonColor
+
+        PaddedRectangle {
+            y: parent.height - 4
+            width: parent.width
+            height: 4
+            radius: 2
+            topPadding: -2
+            clip: true
+            color: control.checked && control.enabled ? control.Material.accentColor : control.Material.secondaryTextColor
+
+            PaddedRectangle {
+                width: parent.width * control.progress
+                height: 4
+                radius: 2
+                topPadding: -2
+                rightPadding: Math.max(-2, width - parent.width)
+                clip: true
+                color: control.Material.accentColor
+            }
+        }
+
+        layer.enabled: control.enabled && control.Material.buttonColor.a > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+        }
+
+        Ripple {
+            clipRadius: 2
+            width: parent.width
+            height: parent.height
+            pressed: control.pressed
+            anchor: control
+            active: enabled && (control.down || control.visualFocus || control.hovered)
+            color: control.Material.rippleColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/Dial.qml b/src/quickcontrols/material/Dial.qml
new file mode 100644
index 0000000000..a44938fe20
--- /dev/null
+++ b/src/quickcontrols/material/Dial.qml
@@ -0,0 +1,52 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.Dial {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 100
+
+        x: control.width / 2 - width / 2
+        y: control.height / 2 - height / 2
+        width: Math.max(64, Math.min(control.width, control.height))
+        height: width
+        color: "transparent"
+        radius: width / 2
+
+        border.color: control.enabled ? control.Material.accentColor : control.Material.hintTextColor
+    }
+
+    handle: SliderHandle {
+        x: control.background.x + control.background.width / 2 - width / 2
+        y: control.background.y + control.background.height / 2 - height / 2
+        transform: [
+            Translate {
+                y: -control.background.height * 0.4 + control.handle.height / 2
+            },
+            Rotation {
+                angle: control.angle
+                origin.x: control.handle.width / 2
+                origin.y: control.handle.height / 2
+            }
+        ]
+        implicitWidth: 10
+        implicitHeight: 10
+
+        value: control.value
+        handleHasFocus: control.visualFocus
+        handlePressed: control.pressed
+        handleHovered: control.hovered
+    }
+}
diff --git a/src/quickcontrols/material/Dialog.qml b/src/quickcontrols/material/Dialog.qml
new file mode 100644
index 0000000000..72f11ffd22
--- /dev/null
+++ b/src/quickcontrols/material/Dialog.qml
@@ -0,0 +1,79 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.Dialog {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitHeaderWidth,
+                            implicitFooterWidth)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding
+                             + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+                             + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
+
+    padding: 24
+    topPadding: 20
+
+    Material.elevation: 24
+
+    enter: Transition {
+        // grow_fade_in
+        NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
+        NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutCubic; duration: 150 }
+    }
+
+    exit: Transition {
+        // shrink_fade_out
+        NumberAnimation { property: "scale"; from: 1.0; to: 0.9; easing.type: Easing.OutQuint; duration: 220 }
+        NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
+    }
+
+    background: Rectangle {
+        radius: 2
+        color: control.Material.dialogColor
+
+        layer.enabled: control.Material.elevation > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+        }
+    }
+
+    header: Label {
+        text: control.title
+        visible: control.title
+        elide: Label.ElideRight
+        padding: 24
+        bottomPadding: 0
+        // TODO: QPlatformTheme::TitleBarFont
+        font.bold: true
+        font.pixelSize: 16
+        background: PaddedRectangle {
+            radius: 2
+            color: control.Material.dialogColor
+            bottomPadding: -2
+            clip: true
+        }
+    }
+
+    footer: DialogButtonBox {
+        visible: count > 0
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+}
diff --git a/src/quickcontrols/material/DialogButtonBox.qml b/src/quickcontrols/material/DialogButtonBox.qml
new file mode 100644
index 0000000000..dad1601931
--- /dev/null
+++ b/src/quickcontrols/material/DialogButtonBox.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.DialogButtonBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 8
+    padding: 8
+    verticalPadding: 2
+    alignment: Qt.AlignRight
+    buttonLayout: T.DialogButtonBox.AndroidLayout
+
+    Material.foreground: Material.accent
+
+    delegate: Button { flat: true }
+
+    contentItem: ListView {
+        implicitWidth: contentWidth
+        model: control.contentModel
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        snapMode: ListView.SnapToItem
+    }
+
+    background: PaddedRectangle {
+        implicitHeight: control.Material.dialogButtonBoxHeight
+        radius: 2
+        color: control.Material.dialogColor
+        // Rounded corners should be only at the top or at the bottom
+        topPadding: control.position === T.DialogButtonBox.Footer ? -2 : 0
+        bottomPadding: control.position === T.DialogButtonBox.Header ? -2 : 0
+        clip: true
+    }
+}
diff --git a/src/quickcontrols/material/Drawer.qml b/src/quickcontrols/material/Drawer.qml
new file mode 100644
index 0000000000..ecfe8836b9
--- /dev/null
+++ b/src/quickcontrols/material/Drawer.qml
@@ -0,0 +1,58 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.Drawer {
+    id: control
+
+    parent: T.Overlay.overlay
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: !dim && edge === Qt.BottomEdge && Material.elevation === 0
+    leftPadding: !dim && edge === Qt.RightEdge && Material.elevation === 0
+    rightPadding: !dim && edge === Qt.LeftEdge && Material.elevation === 0
+    bottomPadding: !dim && edge === Qt.TopEdge && Material.elevation === 0
+
+    enter: Transition { SmoothedAnimation { velocity: 5 } }
+    exit: Transition { SmoothedAnimation { velocity: 5 } }
+
+    Material.elevation: !interactive && !dim ? 0 : 16
+
+    background: Rectangle {
+        color: control.Material.dialogColor
+
+        Rectangle {
+            readonly property bool horizontal: control.edge === Qt.LeftEdge || control.edge === Qt.RightEdge
+            width: horizontal ? 1 : parent.width
+            height: horizontal ? parent.height : 1
+            color: control.Material.dividerColor
+            x: control.edge === Qt.LeftEdge ? parent.width - 1 : 0
+            y: control.edge === Qt.TopEdge ? parent.height - 1 : 0
+            visible: !control.dim && control.Material.elevation === 0
+        }
+
+        layer.enabled: control.position > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+            fullHeight: true
+        }
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+}
diff --git a/src/quickcontrols/material/Frame.qml b/src/quickcontrols/material/Frame.qml
new file mode 100644
index 0000000000..8b6674e16f
--- /dev/null
+++ b/src/quickcontrols/material/Frame.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.Frame {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 12
+    verticalPadding: Material.frameVerticalPadding
+
+    background: Rectangle {
+        radius: 2
+        color: control.Material.elevation > 0 ? control.Material.backgroundColor : "transparent"
+        border.color: control.Material.frameColor
+
+        layer.enabled: control.enabled && control.Material.elevation > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+        }
+    }
+}
diff --git a/src/quickcontrols/material/GroupBox.qml b/src/quickcontrols/material/GroupBox.qml
new file mode 100644
index 0000000000..be7e6fbadc
--- /dev/null
+++ b/src/quickcontrols/material/GroupBox.qml
@@ -0,0 +1,48 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.GroupBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitLabelWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 6
+    padding: 12
+    topPadding: Material.frameVerticalPadding + (implicitLabelWidth > 0 ? implicitLabelHeight + spacing : 0)
+    bottomPadding: Material.frameVerticalPadding
+
+    label: Text {
+        x: control.leftPadding
+        width: control.availableWidth
+
+        text: control.title
+        font: control.font
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: Rectangle {
+        y: control.topPadding - control.bottomPadding
+        width: parent.width
+        height: parent.height - control.topPadding + control.bottomPadding
+
+        radius: 2
+        color: control.Material.elevation > 0 ? control.Material.backgroundColor : "transparent"
+        border.color: control.Material.frameColor
+
+        layer.enabled: control.enabled && control.Material.elevation > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+        }
+    }
+}
diff --git a/src/quickcontrols/material/HorizontalHeaderView.qml b/src/quickcontrols/material/HorizontalHeaderView.qml
new file mode 100644
index 0000000000..671728c004
--- /dev/null
+++ b/src/quickcontrols/material/HorizontalHeaderView.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.HorizontalHeaderView {
+    id: control
+
+    implicitWidth: syncView ? syncView.width : 0
+    implicitHeight: contentHeight
+
+    delegate: Rectangle {
+        // Qt6: add cellPadding (and font etc) as public API in headerview
+        readonly property real cellPadding: 8
+
+        implicitWidth: text.implicitWidth + (cellPadding * 2)
+        implicitHeight: Math.max(control.height, text.implicitHeight + (cellPadding * 2))
+        color: control.Material.backgroundColor
+
+        Text {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            height: parent.height
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: enabled ? control.Material.foreground : control.Material.hintTextColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/ItemDelegate.qml b/src/quickcontrols/material/ItemDelegate.qml
new file mode 100644
index 0000000000..f394106d3b
--- /dev/null
+++ b/src/quickcontrols/material/ItemDelegate.qml
@@ -0,0 +1,55 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.ItemDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 16
+    verticalPadding: 8
+    spacing: 16
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: enabled ? Material.foreground : Material.hintTextColor
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+    }
+
+    background: Rectangle {
+        implicitHeight: control.Material.delegateHeight
+
+        color: control.highlighted ? control.Material.listHighlightColor : "transparent"
+
+        Ripple {
+            width: parent.width
+            height: parent.height
+
+            clip: visible
+            pressed: control.pressed
+            anchor: control
+            active: enabled && (control.down || control.visualFocus || control.hovered)
+            color: control.Material.rippleColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/LICENSE_ANGULARJS.txt b/src/quickcontrols/material/LICENSE_ANGULARJS.txt
new file mode 100644
index 0000000000..c1f2a826bb
--- /dev/null
+++ b/src/quickcontrols/material/LICENSE_ANGULARJS.txt
@@ -0,0 +1,19 @@
+Copyright (c) 2014-2016 Google, Inc. http://angularjs.org
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/src/quickcontrols/material/Label.qml b/src/quickcontrols/material/Label.qml
new file mode 100644
index 0000000000..ce4e01a058
--- /dev/null
+++ b/src/quickcontrols/material/Label.qml
@@ -0,0 +1,13 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+
+T.Label {
+    id: control
+
+    color: enabled ? Material.foreground : Material.hintTextColor
+    linkColor: Material.accentColor
+}
diff --git a/src/quickcontrols/material/Menu.qml b/src/quickcontrols/material/Menu.qml
new file mode 100644
index 0000000000..4601772196
--- /dev/null
+++ b/src/quickcontrols/material/Menu.qml
@@ -0,0 +1,74 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+import QtQuick.Window
+
+T.Menu {
+    id: control
+
+    Material.elevation: 8
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    margins: 0
+    verticalPadding: 8
+
+    transformOrigin: !cascade ? Item.Top : (mirrored ? Item.TopRight : Item.TopLeft)
+
+    delegate: MenuItem { }
+
+    enter: Transition {
+        // grow_fade_in
+        NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
+        NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutCubic; duration: 150 }
+    }
+
+    exit: Transition {
+        // shrink_fade_out
+        NumberAnimation { property: "scale"; from: 1.0; to: 0.9; easing.type: Easing.OutQuint; duration: 220 }
+        NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
+    }
+
+    contentItem: ListView {
+        implicitHeight: contentHeight
+
+        model: control.contentModel
+        interactive: Window.window
+                        ? contentHeight + control.topPadding + control.bottomPadding > Window.window.height
+                        : false
+        clip: true
+        currentIndex: control.currentIndex
+
+        ScrollIndicator.vertical: ScrollIndicator {}
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: control.Material.menuItemHeight
+
+        radius: 3
+        color: control.Material.dialogColor
+
+        layer.enabled: control.Material.elevation > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+        }
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+}
diff --git a/src/quickcontrols/material/MenuBar.qml b/src/quickcontrols/material/MenuBar.qml
new file mode 100644
index 0000000000..c31b5b3158
--- /dev/null
+++ b/src/quickcontrols/material/MenuBar.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.MenuBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    delegate: MenuBarItem { }
+
+    contentItem: Row {
+        spacing: control.spacing
+        Repeater {
+            model: control.contentModel
+        }
+    }
+
+    background: Rectangle {
+        implicitHeight: 40
+        color: control.Material.dialogColor
+    }
+}
diff --git a/src/quickcontrols/material/MenuBarItem.qml b/src/quickcontrols/material/MenuBarItem.qml
new file mode 100644
index 0000000000..1ef47659f4
--- /dev/null
+++ b/src/quickcontrols/material/MenuBarItem.qml
@@ -0,0 +1,55 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.MenuBarItem {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 16
+    verticalPadding: 12
+    spacing: 16
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: enabled ? Material.foreground : Material.hintTextColor
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+    }
+
+    background: Rectangle {
+        implicitWidth: 40
+        implicitHeight: 40
+        color: control.highlighted ? control.Material.listHighlightColor : "transparent"
+
+        Ripple {
+            width: parent.width
+            height: parent.height
+
+            clip: visible
+            pressed: control.pressed
+            anchor: control
+            active: control.down || control.highlighted
+            color: control.Material.rippleColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/MenuItem.qml b/src/quickcontrols/material/MenuItem.qml
new file mode 100644
index 0000000000..34e88a1e0b
--- /dev/null
+++ b/src/quickcontrols/material/MenuItem.qml
@@ -0,0 +1,78 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.MenuItem {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 16
+    verticalPadding: Material.menuItemVerticalPadding
+    spacing: 16
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: enabled ? Material.foreground : Material.hintTextColor
+
+    indicator: CheckIndicator {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        visible: control.checkable
+        control: control
+        checkState: control.checked ? Qt.Checked : Qt.Unchecked
+    }
+
+    arrow: ColorImage {
+        x: control.mirrored ? control.padding : control.width - width - control.padding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        visible: control.subMenu
+        mirror: control.mirrored
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+        source: "qrc:/qt-project.org/imports/QtQuick/Controls/Material/images/arrow-indicator.png"
+    }
+
+    contentItem: IconLabel {
+        readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
+        readonly property real indicatorPadding: control.checkable && control.indicator ? control.indicator.width + control.spacing : 0
+        leftPadding: !control.mirrored ? indicatorPadding : arrowPadding
+        rightPadding: control.mirrored ? indicatorPadding : arrowPadding
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: control.Material.menuItemHeight
+        color: control.highlighted ? control.Material.listHighlightColor : "transparent"
+
+        Ripple {
+            width: parent.width
+            height: parent.height
+
+            clip: visible
+            pressed: control.pressed
+            anchor: control
+            active: control.down || control.highlighted
+            color: control.Material.rippleColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/MenuSeparator.qml b/src/quickcontrols/material/MenuSeparator.qml
new file mode 100644
index 0000000000..c0c9fb34ec
--- /dev/null
+++ b/src/quickcontrols/material/MenuSeparator.qml
@@ -0,0 +1,23 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+
+T.MenuSeparator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    verticalPadding: 8
+
+    contentItem: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 1
+        color: control.Material.dividerColor
+    }
+}
diff --git a/src/quickcontrols/material/Page.qml b/src/quickcontrols/material/Page.qml
new file mode 100644
index 0000000000..f8b97a2d3e
--- /dev/null
+++ b/src/quickcontrols/material/Page.qml
@@ -0,0 +1,23 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+
+T.Page {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitHeaderWidth,
+                            implicitFooterWidth)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding
+                             + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+                             + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
+
+    background: Rectangle {
+        color: control.Material.backgroundColor
+    }
+}
diff --git a/src/quickcontrols/material/PageIndicator.qml b/src/quickcontrols/material/PageIndicator.qml
new file mode 100644
index 0000000000..a64ab67b53
--- /dev/null
+++ b/src/quickcontrols/material/PageIndicator.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+
+T.PageIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    delegate: Rectangle {
+        implicitWidth: 8
+        implicitHeight: 8
+
+        radius: width / 2
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+
+        // qmllint disable unqualified
+        // We can't make "pressed" a required property, as QQuickPageIndicator doesn't create
+        // the delegates, and so it can't set it as an initial property.
+        opacity: index === control.currentIndex ? 0.95 : pressed ? 0.7 : 0.45
+
+        required property int index
+
+        Behavior on opacity { OpacityAnimator { duration: 100 } }
+    }
+
+    contentItem: Row {
+        spacing: control.spacing
+
+        Repeater {
+            model: control.count
+            delegate: control.delegate
+        }
+    }
+}
diff --git a/src/quickcontrols/material/Pane.qml b/src/quickcontrols/material/Pane.qml
new file mode 100644
index 0000000000..a6e0ae5b33
--- /dev/null
+++ b/src/quickcontrols/material/Pane.qml
@@ -0,0 +1,28 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.Pane {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 12
+
+    background: Rectangle {
+        color: control.Material.backgroundColor
+        radius: control.Material.elevation > 0 ? 2 : 0
+
+        layer.enabled: control.enabled && control.Material.elevation > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+        }
+    }
+}
diff --git a/src/quickcontrols/material/Popup.qml b/src/quickcontrols/material/Popup.qml
new file mode 100644
index 0000000000..7727ef0d3c
--- /dev/null
+++ b/src/quickcontrols/material/Popup.qml
@@ -0,0 +1,52 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.Popup {
+    id: control
+
+    Material.elevation: 24
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 12
+
+    enter: Transition {
+        // grow_fade_in
+        NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
+        NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutCubic; duration: 150 }
+    }
+
+    exit: Transition {
+        // shrink_fade_out
+        NumberAnimation { property: "scale"; from: 1.0; to: 0.9; easing.type: Easing.OutQuint; duration: 220 }
+        NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
+    }
+
+    background: Rectangle {
+        radius: 2
+        color: control.Material.dialogColor
+
+        layer.enabled: control.Material.elevation > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+        }
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Material.backgroundDimColor
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+    }
+}
diff --git a/src/quickcontrols/material/ProgressBar.qml b/src/quickcontrols/material/ProgressBar.qml
new file mode 100644
index 0000000000..073088bdd2
--- /dev/null
+++ b/src/quickcontrols/material/ProgressBar.qml
@@ -0,0 +1,34 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.ProgressBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    contentItem: ProgressBarImpl {
+        implicitHeight: 4
+
+        scale: control.mirrored ? -1 : 1
+        color: control.Material.accentColor
+        progress: control.position
+        indeterminate: control.visible && control.indeterminate
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 4
+        y: (control.height - height) / 2
+        height: 4
+
+        color: Qt.rgba(control.Material.accentColor.r, control.Material.accentColor.g, control.Material.accentColor.b, 0.25)
+    }
+}
diff --git a/src/quickcontrols/material/RadioButton.qml b/src/quickcontrols/material/RadioButton.qml
new file mode 100644
index 0000000000..00c9390095
--- /dev/null
+++ b/src/quickcontrols/material/RadioButton.qml
@@ -0,0 +1,50 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.RadioButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 8
+    padding: 8
+    verticalPadding: padding + 6
+
+    indicator: RadioIndicator {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+
+        Ripple {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 28; height: 28
+
+            z: -1
+            anchor: control
+            pressed: control.pressed
+            active: control.down || control.visualFocus || control.hovered
+            color: control.checked ? control.Material.highlightedRippleColor : control.Material.rippleColor
+        }
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+}
diff --git a/src/quickcontrols/material/RadioDelegate.qml b/src/quickcontrols/material/RadioDelegate.qml
new file mode 100644
index 0000000000..ad9f95443f
--- /dev/null
+++ b/src/quickcontrols/material/RadioDelegate.qml
@@ -0,0 +1,64 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.RadioDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 16
+    verticalPadding: 8
+    spacing: 16
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: enabled ? Material.foreground : Material.hintTextColor
+
+    indicator: RadioIndicator {
+        x: control.text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: IconLabel {
+        leftPadding: !control.mirrored ? 0 : control.indicator.width + control.spacing
+        rightPadding: control.mirrored ? 0 : control.indicator.width + control.spacing
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+    }
+
+    background: Rectangle {
+        implicitHeight: control.Material.delegateHeight
+
+        color: control.highlighted ? control.Material.listHighlightColor : "transparent"
+
+        Ripple {
+            width: parent.width
+            height: parent.height
+
+            clip: visible
+            pressed: control.pressed
+            anchor: control
+            active: control.down || control.visualFocus || control.hovered
+            color: control.Material.rippleColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/RangeSlider.qml b/src/quickcontrols/material/RangeSlider.qml
new file mode 100644
index 0000000000..81507f334d
--- /dev/null
+++ b/src/quickcontrols/material/RangeSlider.qml
@@ -0,0 +1,59 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.RangeSlider {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            first.implicitHandleWidth + leftPadding + rightPadding,
+                            second.implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             first.implicitHandleHeight + topPadding + bottomPadding,
+                             second.implicitHandleHeight + topPadding + bottomPadding)
+
+    padding: 6
+
+    first.handle: SliderHandle {
+        x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
+        value: control.first.value
+        handleHasFocus: activeFocus
+        handlePressed: control.first.pressed
+        handleHovered: control.first.hovered
+    }
+
+    second.handle: SliderHandle {
+        x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
+        value: control.second.value
+        handleHasFocus: activeFocus
+        handlePressed: control.second.pressed
+        handleHovered: control.second.hovered
+    }
+
+    background: Rectangle {
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: control.horizontal ? 200 : 48
+        implicitHeight: control.horizontal ? 48 : 200
+        width: control.horizontal ? control.availableWidth : 4
+        height: control.horizontal ? 4 : control.availableHeight
+        scale: control.horizontal && control.mirrored ? -1 : 1
+        color: control.enabled ? Color.transparent(control.Material.accentColor, 0.33) : control.Material.sliderDisabledColor
+
+        Rectangle {
+            x: control.horizontal ? control.first.position * parent.width : 0
+            y: control.horizontal ? 0 : control.second.visualPosition * parent.height
+            width: control.horizontal ? control.second.position * parent.width - control.first.position * parent.width : 4
+            height: control.horizontal ? 4 : control.second.position * parent.height - control.first.position * parent.height
+
+            color: control.enabled ? control.Material.accentColor : control.Material.sliderDisabledColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/RoundButton.qml b/src/quickcontrols/material/RoundButton.qml
new file mode 100644
index 0000000000..3484fb9460
--- /dev/null
+++ b/src/quickcontrols/material/RoundButton.qml
@@ -0,0 +1,81 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.RoundButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    topInset: 6
+    leftInset: 6
+    rightInset: 6
+    bottomInset: 6
+    padding: 12
+    spacing: 6
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: !enabled ? Material.hintTextColor :
+        flat && highlighted ? Material.accentColor :
+        highlighted ? Material.primaryHighlightedTextColor : Material.foreground
+
+    Material.elevation: flat ? control.down || control.hovered ? 2 : 0
+                             : control.down ? 12 : 6
+    Material.background: flat ? "transparent" : undefined
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: !control.enabled ? control.Material.hintTextColor :
+            control.flat && control.highlighted ? control.Material.accentColor :
+            control.highlighted ? control.Material.primaryHighlightedTextColor : control.Material.foreground
+    }
+
+    // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
+    background: Rectangle {
+        implicitWidth: control.Material.buttonHeight
+        implicitHeight: control.Material.buttonHeight
+
+        radius: control.radius
+        color: !control.enabled ? control.Material.buttonDisabledColor
+            : control.checked || control.highlighted ? control.Material.highlightedButtonColor : control.Material.buttonColor
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            radius: control.radius
+            visible: enabled && (control.hovered || control.visualFocus)
+            color: control.Material.rippleColor
+        }
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            radius: control.radius
+            visible: control.down
+            color: control.Material.rippleColor
+        }
+
+        // The layer is disabled when the button color is transparent so that you can do
+        // Material.background: "transparent" and get a proper flat button without needing
+        // to set Material.elevation as well
+        layer.enabled: control.enabled && control.Material.buttonColor.a > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+        }
+    }
+}
diff --git a/src/quickcontrols/material/ScrollBar.qml b/src/quickcontrols/material/ScrollBar.qml
new file mode 100644
index 0000000000..b377f4042a
--- /dev/null
+++ b/src/quickcontrols/material/ScrollBar.qml
@@ -0,0 +1,56 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+
+T.ScrollBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: control.interactive ? 1 : 2
+    visible: control.policy !== T.ScrollBar.AlwaysOff
+    minimumSize: orientation === Qt.Horizontal ? height / width : width / height
+
+    contentItem: Rectangle {
+        implicitWidth: control.interactive ? 13 : 4
+        implicitHeight: control.interactive ? 13 : 4
+
+        color: control.pressed ? control.Material.scrollBarPressedColor :
+               control.interactive && control.hovered ? control.Material.scrollBarHoveredColor : control.Material.scrollBarColor
+        opacity: 0.0
+    }
+
+    background: Rectangle {
+        implicitWidth: control.interactive ? 16 : 4
+        implicitHeight: control.interactive ? 16 : 4
+        color: "#0e000000"
+        opacity: 0.0
+        visible: control.interactive
+    }
+
+    states: State {
+        name: "active"
+        when: control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0)
+    }
+
+    transitions: [
+        Transition {
+            to: "active"
+            NumberAnimation { targets: [control.contentItem, control.background]; property: "opacity"; to: 1.0 }
+        },
+        Transition {
+            from: "active"
+            SequentialAnimation {
+                PropertyAction{ targets: [control.contentItem, control.background]; property: "opacity"; value: 1.0 }
+                PauseAnimation { duration: 2450 }
+                NumberAnimation { targets: [control.contentItem, control.background]; property: "opacity"; to: 0.0 }
+            }
+        }
+    ]
+}
diff --git a/src/quickcontrols/material/ScrollIndicator.qml b/src/quickcontrols/material/ScrollIndicator.qml
new file mode 100644
index 0000000000..71f7eea104
--- /dev/null
+++ b/src/quickcontrols/material/ScrollIndicator.qml
@@ -0,0 +1,42 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+
+T.ScrollIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 2
+
+    contentItem: Rectangle {
+        implicitWidth: 4
+        implicitHeight: 4
+
+        color: control.Material.scrollBarColor
+        visible: control.size < 1.0
+        opacity: 0.0
+
+        states: State {
+            name: "active"
+            when: control.active
+            PropertyChanges { control.contentItem.opacity: 0.75 }
+        }
+
+        transitions: [
+            Transition {
+                from: "active"
+                SequentialAnimation {
+                    PauseAnimation { duration: 450 }
+                    NumberAnimation { target: control.contentItem; duration: 200; property: "opacity"; to: 0.0 }
+                }
+            }
+        ]
+    }
+}
diff --git a/src/quickcontrols/material/ScrollView.qml b/src/quickcontrols/material/ScrollView.qml
new file mode 100644
index 0000000000..60789313c9
--- /dev/null
+++ b/src/quickcontrols/material/ScrollView.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ScrollView {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    ScrollBar.vertical: ScrollBar {
+        parent: control
+        x: control.mirrored ? 0 : control.width - width
+        y: control.topPadding
+        height: control.availableHeight
+        active: control.ScrollBar.horizontal.active
+    }
+
+    ScrollBar.horizontal: ScrollBar {
+        parent: control
+        x: control.leftPadding
+        y: control.height - height
+        width: control.availableWidth
+        active: control.ScrollBar.vertical.active
+    }
+}
diff --git a/src/quickcontrols/material/SelectionRectangle.qml b/src/quickcontrols/material/SelectionRectangle.qml
new file mode 100644
index 0000000000..4e1b425f47
--- /dev/null
+++ b/src/quickcontrols/material/SelectionRectangle.qml
@@ -0,0 +1,33 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.SelectionRectangle {
+    id: control
+
+    topLeftHandle: handle
+    bottomRightHandle: handle
+
+    Component {
+        id: handle
+        SliderHandle {
+            palette: SelectionRectangle.control.palette
+            handlePressed: tapHandler.pressed || SelectionRectangle.dragging
+            handleHovered: hoverHandler.hovered
+            visible: SelectionRectangle.control.active
+
+            HoverHandler {
+                id: hoverHandler
+            }
+
+            TapHandler  {
+                id: tapHandler
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/material/Slider.qml b/src/quickcontrols/material/Slider.qml
new file mode 100644
index 0000000000..5061ecf03f
--- /dev/null
+++ b/src/quickcontrols/material/Slider.qml
@@ -0,0 +1,48 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.Slider {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitHandleHeight + topPadding + bottomPadding)
+
+    padding: 6
+
+    handle: SliderHandle {
+        x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
+        value: control.value
+        handleHasFocus: control.visualFocus
+        handlePressed: control.pressed
+        handleHovered: control.hovered
+    }
+
+    background: Rectangle {
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: control.horizontal ? 200 : 48
+        implicitHeight: control.horizontal ? 48 : 200
+        width: control.horizontal ? control.availableWidth : 4
+        height: control.horizontal ? 4 : control.availableHeight
+        scale: control.horizontal && control.mirrored ? -1 : 1
+        color: control.enabled ? Color.transparent(control.Material.accentColor, 0.33) : control.Material.sliderDisabledColor
+
+        Rectangle {
+            x: control.horizontal ? 0 : (parent.width - width) / 2
+            y: control.horizontal ? (parent.height - height) / 2 : control.visualPosition * parent.height
+            width: control.horizontal ? control.position * parent.width : 4
+            height: control.horizontal ? 4 : control.position * parent.height
+
+            color: control.enabled ? control.Material.accentColor : control.Material.sliderDisabledColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/SpinBox.qml b/src/quickcontrols/material/SpinBox.qml
new file mode 100644
index 0000000000..7529f8e9a0
--- /dev/null
+++ b/src/quickcontrols/material/SpinBox.qml
@@ -0,0 +1,123 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.SpinBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentItem.implicitWidth +
+                            up.implicitIndicatorWidth +
+                            down.implicitIndicatorWidth)
+    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
+                             implicitBackgroundHeight,
+                             up.implicitIndicatorHeight,
+                             down.implicitIndicatorHeight)
+
+    spacing: 6
+    topPadding: 8
+    bottomPadding: 16
+    leftPadding: (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
+    rightPadding: (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
+
+    validator: IntValidator {
+        locale: control.locale.name
+        bottom: Math.min(control.from, control.to)
+        top: Math.max(control.from, control.to)
+    }
+
+    contentItem: TextInput {
+        text: control.displayText
+
+        font: control.font
+        color: enabled ? control.Material.foreground : control.Material.hintTextColor
+        selectionColor: control.Material.textSelectionColor
+        selectedTextColor: control.Material.foreground
+        horizontalAlignment: Qt.AlignHCenter
+        verticalAlignment: Qt.AlignVCenter
+
+        cursorDelegate: CursorDelegate { }
+
+        readOnly: !control.editable
+        validator: control.validator
+        inputMethodHints: control.inputMethodHints
+    }
+
+    up.indicator: Item {
+        x: control.mirrored ? 0 : control.width - width
+        implicitWidth: control.Material.touchTarget
+        implicitHeight: control.Material.touchTarget
+        height: control.height
+        width: height
+
+        Ripple {
+            clipRadius: 2
+            x: control.spacing
+            y: control.spacing
+            width: parent.width - 2 * control.spacing
+            height: parent.height - 2 * control.spacing
+            pressed: control.up.pressed
+            active: control.up.pressed || control.up.hovered || control.visualFocus
+            color: control.Material.rippleColor
+        }
+
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: Math.min(parent.width / 3, parent.height / 3)
+            height: 2
+            color: enabled ? control.Material.foreground : control.Material.spinBoxDisabledIconColor
+        }
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 2
+            height: Math.min(parent.width / 3, parent.height / 3)
+            color: enabled ? control.Material.foreground : control.Material.spinBoxDisabledIconColor
+        }
+    }
+
+    down.indicator: Item {
+        x: control.mirrored ? control.width - width : 0
+        implicitWidth: control.Material.touchTarget
+        implicitHeight: control.Material.touchTarget
+        height: control.height
+        width: height
+
+        Ripple {
+            clipRadius: 2
+            x: control.spacing
+            y: control.spacing
+            width: parent.width - 2 * control.spacing
+            height: parent.height - 2 * control.spacing
+            pressed: control.down.pressed
+            active: control.down.pressed || control.down.hovered || control.visualFocus
+            color: control.Material.rippleColor
+        }
+
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: parent.width / 3
+            height: 2
+            color: enabled ? control.Material.foreground : control.Material.spinBoxDisabledIconColor
+        }
+    }
+
+    background: Item {
+        implicitWidth: 192
+        implicitHeight: control.Material.touchTarget
+
+        Rectangle {
+            x: parent.width / 2 - width / 2
+            y: parent.y + parent.height - height - control.bottomPadding / 2
+            width: control.availableWidth
+            height: control.activeFocus ? 2 : 1
+            color: control.activeFocus ? control.Material.accentColor : control.Material.hintTextColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/SplitView.qml b/src/quickcontrols/material/SplitView.qml
new file mode 100644
index 0000000000..0c53a0f557
--- /dev/null
+++ b/src/quickcontrols/material/SplitView.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+
+T.SplitView {
+    id: control
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    handle: Rectangle {
+        implicitWidth: control.orientation === Qt.Horizontal ? 6 : control.width
+        implicitHeight: control.orientation === Qt.Horizontal ? control.height : 6
+        color: T.SplitHandle.pressed ? control.Material.background
+            : Qt.lighter(control.Material.background, T.SplitHandle.hovered ? 1.2 : 1.1)
+
+        Rectangle {
+            color: control.Material.secondaryTextColor
+            width: control.orientation === Qt.Horizontal ? thickness : length
+            height: control.orientation === Qt.Horizontal ? length : thickness
+            radius: thickness
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+
+            property int length: parent.T.SplitHandle.pressed ? 3 : 8
+            readonly property int thickness: parent.T.SplitHandle.pressed ? 3 : 1
+
+            Behavior on length {
+                NumberAnimation {
+                    duration: 100
+                }
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/material/StackView.qml b/src/quickcontrols/material/StackView.qml
new file mode 100644
index 0000000000..241b91f2d7
--- /dev/null
+++ b/src/quickcontrols/material/StackView.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+
+T.StackView {
+    id: control
+
+    popEnter: Transition {
+        // slide_in_left
+        NumberAnimation { property: "x"; from: (control.mirrored ? -0.5 : 0.5) *  -control.width; to: 0; duration: 200; easing.type: Easing.OutCubic }
+        NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 200; easing.type: Easing.OutCubic }
+    }
+
+    popExit: Transition {
+        // slide_out_right
+        NumberAnimation { property: "x"; from: 0; to: (control.mirrored ? -0.5 : 0.5) * control.width; duration: 200; easing.type: Easing.OutCubic }
+        NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 200; easing.type: Easing.OutCubic }
+    }
+
+    pushEnter: Transition {
+        // slide_in_right
+        NumberAnimation { property: "x"; from: (control.mirrored ? -0.5 : 0.5) * control.width; to: 0; duration: 200; easing.type: Easing.OutCubic }
+        NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 200; easing.type: Easing.OutCubic }
+    }
+
+    pushExit: Transition {
+        // slide_out_left
+        NumberAnimation { property: "x"; from: 0; to: (control.mirrored ? -0.5 : 0.5) * -control.width; duration: 200; easing.type: Easing.OutCubic }
+        NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 200; easing.type: Easing.OutCubic }
+    }
+
+    replaceEnter: Transition {
+        // slide_in_right
+        NumberAnimation { property: "x"; from: (control.mirrored ? -0.5 : 0.5) * control.width; to: 0; duration: 200; easing.type: Easing.OutCubic }
+        NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 200; easing.type: Easing.OutCubic }
+    }
+
+    replaceExit: Transition {
+        // slide_out_left
+        NumberAnimation { property: "x"; from: 0; to: (control.mirrored ? -0.5 : 0.5) * -control.width; duration: 200; easing.type: Easing.OutCubic }
+        NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 200; easing.type: Easing.OutCubic }
+    }
+}
diff --git a/src/quickcontrols/material/SwipeDelegate.qml b/src/quickcontrols/material/SwipeDelegate.qml
new file mode 100644
index 0000000000..d445dafac1
--- /dev/null
+++ b/src/quickcontrols/material/SwipeDelegate.qml
@@ -0,0 +1,65 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.SwipeDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 16
+    verticalPadding: 8
+    spacing: 16
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: enabled ? Material.foreground : Material.hintTextColor
+
+    swipe.transition: Transition { SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic } }
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+    }
+
+    background: Rectangle {
+        implicitHeight: control.Material.delegateHeight
+
+        color: control.Material.backgroundColor
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            visible: control.highlighted
+            color: control.Material.listHighlightColor
+        }
+
+        Ripple {
+            width: parent.width
+            height: parent.height
+
+            clip: visible
+            pressed: control.pressed
+            anchor: control
+            active: enabled && (control.down || control.visualFocus || control.hovered)
+            color: control.Material.rippleColor
+            enabled: control.swipe.position === 0
+        }
+    }
+}
diff --git a/src/quickcontrols/material/SwipeView.qml b/src/quickcontrols/material/SwipeView.qml
new file mode 100644
index 0000000000..72e63dd4d2
--- /dev/null
+++ b/src/quickcontrols/material/SwipeView.qml
@@ -0,0 +1,33 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+
+T.SwipeView {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    contentItem: ListView {
+        model: control.contentModel
+        interactive: control.interactive
+        currentIndex: control.currentIndex
+        focus: control.focus
+
+        spacing: control.spacing
+        orientation: control.orientation
+        snapMode: ListView.SnapOneItem
+        boundsBehavior: Flickable.StopAtBounds
+
+        highlightRangeMode: ListView.StrictlyEnforceRange
+        preferredHighlightBegin: 0
+        preferredHighlightEnd: 0
+        highlightMoveDuration: 250
+        maximumFlickVelocity: 4 * (control.orientation === Qt.Horizontal ? width : height)
+    }
+}
diff --git a/src/quickcontrols/material/Switch.qml b/src/quickcontrols/material/Switch.qml
new file mode 100644
index 0000000000..db3fedfdc3
--- /dev/null
+++ b/src/quickcontrols/material/Switch.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+import QtQuick.Templates as T
+
+T.Switch {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 8
+    spacing: 8
+
+    indicator: SwitchIndicator {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+
+        Ripple {
+            x: parent.handle.x + parent.handle.width / 2 - width / 2
+            y: parent.handle.y + parent.handle.height / 2 - height / 2
+            width: 28; height: 28
+            pressed: control.pressed
+            active: enabled && (control.down || control.visualFocus || control.hovered)
+            color: control.checked ? control.Material.highlightedRippleColor : control.Material.rippleColor
+        }
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+}
diff --git a/src/quickcontrols/material/SwitchDelegate.qml b/src/quickcontrols/material/SwitchDelegate.qml
new file mode 100644
index 0000000000..39423887f9
--- /dev/null
+++ b/src/quickcontrols/material/SwitchDelegate.qml
@@ -0,0 +1,64 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.SwitchDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 16
+    verticalPadding: Material.switchDelegateVerticalPadding
+    spacing: 16
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: enabled ? Material.foreground : Material.hintTextColor
+
+    indicator: SwitchIndicator {
+        x: control.text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: IconLabel {
+        leftPadding: !control.mirrored ? 0 : control.indicator.width + control.spacing
+        rightPadding: control.mirrored ? 0 : control.indicator.width + control.spacing
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
+    }
+
+    background: Rectangle {
+        implicitHeight: control.Material.delegateHeight
+
+        color: control.highlighted ? control.Material.listHighlightColor : "transparent"
+
+        Ripple {
+            width: parent.width
+            height: parent.height
+
+            clip: visible
+            pressed: control.pressed
+            anchor: control
+            active: enabled && (control.down || control.visualFocus || control.hovered)
+            color: control.Material.rippleColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/TabBar.qml b/src/quickcontrols/material/TabBar.qml
new file mode 100644
index 0000000000..5daffc9797
--- /dev/null
+++ b/src/quickcontrols/material/TabBar.qml
@@ -0,0 +1,56 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.TabBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 1
+
+    contentItem: ListView {
+        model: control.contentModel
+        currentIndex: control.currentIndex
+
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+        snapMode: ListView.SnapToItem
+
+        highlightMoveDuration: 250
+        highlightResizeDuration: 0
+        highlightFollowsCurrentItem: true
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: 48
+        preferredHighlightEnd: width - 48
+
+        highlight: Item {
+            z: 2
+            Rectangle {
+                height: 2
+                width: parent.width
+                y: control.position === T.TabBar.Footer ? 0 : parent.height - height
+                color: control.Material.accentColor
+            }
+        }
+    }
+
+    background: Rectangle {
+        color: control.Material.backgroundColor
+
+        layer.enabled: control.Material.elevation > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+            fullWidth: true
+        }
+    }
+}
diff --git a/src/quickcontrols/material/TabButton.qml b/src/quickcontrols/material/TabButton.qml
new file mode 100644
index 0000000000..a57f652d37
--- /dev/null
+++ b/src/quickcontrols/material/TabButton.qml
@@ -0,0 +1,45 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.TabButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 12
+    spacing: 6
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: !enabled ? Material.hintTextColor : down || checked ? Material.accentColor : Material.foreground
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: !control.enabled ? control.Material.hintTextColor : control.down || control.checked ? control.Material.accentColor : control.Material.foreground
+    }
+
+    background: Ripple {
+        implicitHeight: control.Material.touchTarget
+
+        clip: true
+        pressed: control.pressed
+        anchor: control
+        active: enabled && (control.down || control.visualFocus || control.hovered)
+        color: control.Material.rippleColor
+    }
+}
diff --git a/src/quickcontrols/material/TextArea.qml b/src/quickcontrols/material/TextArea.qml
new file mode 100644
index 0000000000..242cbf691b
--- /dev/null
+++ b/src/quickcontrols/material/TextArea.qml
@@ -0,0 +1,50 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.TextArea {
+    id: control
+
+    implicitWidth: Math.max(contentWidth + leftPadding + rightPadding,
+                            implicitBackgroundWidth + leftInset + rightInset,
+                            placeholder.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
+                             implicitBackgroundHeight + topInset + bottomInset,
+                             placeholder.implicitHeight + 1 + topPadding + bottomPadding)
+
+    topPadding: 8
+    bottomPadding: 16
+
+    color: enabled ? Material.foreground : Material.hintTextColor
+    selectionColor: Material.accentColor
+    selectedTextColor: Material.primaryHighlightedTextColor
+    placeholderTextColor: Material.hintTextColor
+    cursorDelegate: CursorDelegate { }
+
+    PlaceholderText {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        elide: Text.ElideRight
+        renderType: control.renderType
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+    }
+
+    background: Rectangle {
+        y: parent.height - height - control.bottomPadding / 2
+        implicitWidth: 120
+        height: control.activeFocus ? 2 : 1
+        color: control.activeFocus ? control.Material.accentColor : control.Material.hintTextColor
+    }
+}
diff --git a/src/quickcontrols/material/TextField.qml b/src/quickcontrols/material/TextField.qml
new file mode 100644
index 0000000000..598f66f938
--- /dev/null
+++ b/src/quickcontrols/material/TextField.qml
@@ -0,0 +1,52 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.TextField {
+    id: control
+
+    implicitWidth: implicitBackgroundWidth + leftInset + rightInset
+                   || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding,
+                             placeholder.implicitHeight + topPadding + bottomPadding)
+
+    topPadding: 8
+    bottomPadding: 16
+
+    color: enabled ? Material.foreground : Material.hintTextColor
+    selectionColor: Material.accentColor
+    selectedTextColor: Material.primaryHighlightedTextColor
+    placeholderTextColor: Material.hintTextColor
+    verticalAlignment: TextInput.AlignVCenter
+
+    cursorDelegate: CursorDelegate { }
+
+    PlaceholderText {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        elide: Text.ElideRight
+        renderType: control.renderType
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+    }
+
+    background: Rectangle {
+        y: control.height - height - control.bottomPadding + 8
+        implicitWidth: 120
+        height: control.activeFocus || (enabled && control.hovered) ? 2 : 1
+        color: control.activeFocus ? control.Material.accentColor
+            : ((enabled && control.hovered) ? control.Material.primaryTextColor : control.Material.hintTextColor)
+    }
+}
diff --git a/src/quickcontrols/material/ToolBar.qml b/src/quickcontrols/material/ToolBar.qml
new file mode 100644
index 0000000000..96fa3c6302
--- /dev/null
+++ b/src/quickcontrols/material/ToolBar.qml
@@ -0,0 +1,33 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.ToolBar {
+    id: control
+
+    Material.elevation: 4
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    Material.foreground: Material.toolTextColor
+
+    spacing: 16
+
+    background: Rectangle {
+        implicitHeight: 48
+        color: control.Material.toolBarColor
+
+        layer.enabled: control.Material.elevation > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+            fullWidth: true
+        }
+    }
+}
diff --git a/src/quickcontrols/material/ToolButton.qml b/src/quickcontrols/material/ToolButton.qml
new file mode 100644
index 0000000000..ac397edeea
--- /dev/null
+++ b/src/quickcontrols/material/ToolButton.qml
@@ -0,0 +1,53 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.ToolButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 6
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: !enabled ? Material.hintTextColor : checked || highlighted ? Material.accent : Material.foreground
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: !control.enabled ? control.Material.hintTextColor :
+                control.checked || control.highlighted ? control.Material.accent : control.Material.foreground
+    }
+
+    background: Ripple {
+        implicitWidth: control.Material.touchTarget
+        implicitHeight: control.Material.touchTarget
+
+        readonly property bool square: control.contentItem.width <= control.contentItem.height
+
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+        clip: !square
+        width: square ? parent.height / 2 : parent.width
+        height: square ? parent.height / 2 : parent.height
+        pressed: control.pressed
+        anchor: control
+        active: control.enabled && (control.down || control.visualFocus || control.hovered)
+        color: control.Material.rippleColor
+    }
+}
diff --git a/src/quickcontrols/material/ToolSeparator.qml b/src/quickcontrols/material/ToolSeparator.qml
new file mode 100644
index 0000000000..456067ac0e
--- /dev/null
+++ b/src/quickcontrols/material/ToolSeparator.qml
@@ -0,0 +1,24 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+
+T.ToolSeparator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    horizontalPadding: vertical ? 12 : 5
+    verticalPadding: vertical ? 5 : 12
+
+    contentItem: Rectangle {
+        implicitWidth: control.vertical ? 1 : 38
+        implicitHeight: control.vertical ? 38 : 1
+        color: control.Material.hintTextColor
+    }
+}
diff --git a/src/quickcontrols/material/ToolTip.qml b/src/quickcontrols/material/ToolTip.qml
new file mode 100644
index 0000000000..b944c23557
--- /dev/null
+++ b/src/quickcontrols/material/ToolTip.qml
@@ -0,0 +1,50 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+
+T.ToolTip {
+    id: control
+
+    x: parent ? (parent.width - implicitWidth) / 2 : 0
+    y: -implicitHeight - 24
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    margins: 12
+    padding: 8
+    horizontalPadding: padding + 8
+
+    closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent
+
+    Material.theme: Material.Dark
+
+    enter: Transition {
+        // toast_enter
+        NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutQuad; duration: 500 }
+    }
+
+    exit: Transition {
+        // toast_exit
+        NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.InQuad; duration: 500 }
+    }
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        wrapMode: Text.Wrap
+        color: control.Material.foreground
+    }
+
+    background: Rectangle {
+        implicitHeight: control.Material.tooltipHeight
+        color: control.Material.tooltipColor
+        opacity: 0.9
+        radius: 2
+    }
+}
diff --git a/src/quickcontrols/material/TreeViewDelegate.qml b/src/quickcontrols/material/TreeViewDelegate.qml
new file mode 100644
index 0000000000..a7be36a555
--- /dev/null
+++ b/src/quickcontrols/material/TreeViewDelegate.qml
@@ -0,0 +1,62 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Material
+
+T.TreeViewDelegate {
+    id: control
+
+    implicitWidth: leftMargin + __contentIndent + implicitContentWidth + rightPadding + rightMargin
+    implicitHeight: Math.max(implicitBackgroundHeight, implicitContentHeight, implicitIndicatorHeight)
+
+    indentation: indicator ? indicator.width : 12
+    leftMargin: 16
+    rightMargin: 16
+    spacing: 14
+
+    topPadding: contentItem ? (height - contentItem.implicitHeight) / 2 : 0
+    leftPadding: !mirrored ? leftMargin + __contentIndent : width - leftMargin - __contentIndent - implicitContentWidth
+
+    highlighted: control.selected || control.current
+               || ((control.treeView.selectionBehavior === TableView.SelectRows
+               || control.treeView.selectionBehavior === TableView.SelectionDisabled)
+               && control.row === control.treeView.currentRow)
+
+    required property int row
+    required property var model
+    readonly property real __contentIndent: !isTreeNode ? 0 : (depth * indentation) + (indicator ? indicator.width + spacing : 0)
+
+    indicator: Item {
+        readonly property real __indicatorIndent: control.leftMargin + (control.depth * control.indentation)
+        x: !control.mirrored ? __indicatorIndent : control.width - __indicatorIndent - width
+        y: (control.height - height) / 2
+        implicitWidth: Math.max(arrow.implicitWidth, 20)
+        implicitHeight: control.Material.buttonHeight
+
+        property ColorImage arrow : ColorImage {
+            parent: control.indicator
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            rotation:  control.expanded ? 90 : (control.mirrored ? 180 : 0)
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Material/images/arrow-indicator.png"
+            color: control.palette.windowText
+            defaultColor: "#353637"
+        }
+    }
+
+    background: Rectangle {
+        implicitHeight: control.Material.buttonHeight
+        color: control.highlighted
+               ? control.palette.highlight
+               : (control.treeView.alternatingRows && control.row % 2 !== 0
+               ? control.palette.alternateBase : control.palette.base)
+    }
+
+    contentItem: Label {
+        text: control.model.display
+        elide: Text.ElideRight
+    }
+}
diff --git a/src/quickcontrols/material/Tumbler.qml b/src/quickcontrols/material/Tumbler.qml
new file mode 100644
index 0000000000..59320cf52b
--- /dev/null
+++ b/src/quickcontrols/material/Tumbler.qml
@@ -0,0 +1,45 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+
+T.Tumbler {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    delegate: Text {
+        text: modelData
+        color: control.Material.foreground
+        font: control.font
+        opacity: (1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)) * (control.enabled ? 1 : 0.6)
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        required property var modelData
+        required property int index
+    }
+
+    contentItem: TumblerView {
+        implicitWidth: 60
+        implicitHeight: 200
+        model: control.model
+        delegate: control.delegate
+        path: Path {
+            startX: control.contentItem.width / 2
+            startY: -control.contentItem.delegateHeight / 2
+            PathLine {
+                x: control.contentItem.width / 2
+                y: (control.visibleItemCount + 1) * control.contentItem.delegateHeight - control.contentItem.delegateHeight / 2
+            }
+        }
+
+        property real delegateHeight: control.availableHeight / control.visibleItemCount
+    }
+}
diff --git a/src/quickcontrols/material/VerticalHeaderView.qml b/src/quickcontrols/material/VerticalHeaderView.qml
new file mode 100644
index 0000000000..e497d4a84c
--- /dev/null
+++ b/src/quickcontrols/material/VerticalHeaderView.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+T.VerticalHeaderView {
+    id: control
+
+    implicitWidth: contentWidth
+    implicitHeight: syncView ? syncView.height : 0
+
+    delegate: Rectangle {
+        // Qt6: add cellPadding (and font etc) as public API in headerview
+        readonly property real cellPadding: 8
+
+        implicitWidth: Math.max(control.width, text.implicitWidth + (cellPadding * 2))
+        implicitHeight: text.implicitHeight + (cellPadding * 2)
+        color: control.Material.backgroundColor
+
+        Text {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            height: parent.height
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: enabled ? control.Material.foreground : control.Material.hintTextColor
+        }
+    }
+}
diff --git a/src/quickcontrols/material/images/arrow-indicator.png b/src/quickcontrols/material/images/arrow-indicator.png
new file mode 100644
index 0000000000..5a9780015b
--- /dev/null
+++ b/src/quickcontrols/material/images/arrow-indicator.png
diff --git a/src/quickcontrols/material/images/arrow-indicator.svg b/src/quickcontrols/material/images/arrow-indicator.svg
new file mode 100644
index 0000000000..1e7217c855
--- /dev/null
+++ b/src/quickcontrols/material/images/arrow-indicator.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="5"
+   height="10"
+   viewBox="0 0 5 10"
+   version="1.1"
+   id="svg2"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="arrow-indicator.svg">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1571"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="27.812867"
+     inkscape:cx="13.137558"
+     inkscape:cy="12.83583"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <path
+     d="M 0,10 5,5 0,0 Z"
+     id="path4"
+     inkscape:connector-curvature="0"
+     style="fill:#757575" />
+</svg>
diff --git a/src/quickcontrols/material/images/arrow-indicator@2x.png b/src/quickcontrols/material/images/arrow-indicator@2x.png
new file mode 100644
index 0000000000..37ce3a957e
--- /dev/null
+++ b/src/quickcontrols/material/images/arrow-indicator@2x.png
diff --git a/src/quickcontrols/material/images/arrow-indicator@3x.png b/src/quickcontrols/material/images/arrow-indicator@3x.png
new file mode 100644
index 0000000000..57abd97295
--- /dev/null
+++ b/src/quickcontrols/material/images/arrow-indicator@3x.png
diff --git a/src/quickcontrols/material/images/arrow-indicator@4x.png b/src/quickcontrols/material/images/arrow-indicator@4x.png
new file mode 100644
index 0000000000..26d3d7c1f1
--- /dev/null
+++ b/src/quickcontrols/material/images/arrow-indicator@4x.png
diff --git a/src/quickcontrols/material/images/check.png b/src/quickcontrols/material/images/check.png
new file mode 100644
index 0000000000..756a43a579
--- /dev/null
+++ b/src/quickcontrols/material/images/check.png
diff --git a/src/quickcontrols/material/images/check@2x.png b/src/quickcontrols/material/images/check@2x.png
new file mode 100644
index 0000000000..9d1d6a32b6
--- /dev/null
+++ b/src/quickcontrols/material/images/check@2x.png
diff --git a/src/quickcontrols/material/images/check@3x.png b/src/quickcontrols/material/images/check@3x.png
new file mode 100644
index 0000000000..32ed72f017
--- /dev/null
+++ b/src/quickcontrols/material/images/check@3x.png
diff --git a/src/quickcontrols/material/images/check@4x.png b/src/quickcontrols/material/images/check@4x.png
new file mode 100644
index 0000000000..1767cee617
--- /dev/null
+++ b/src/quickcontrols/material/images/check@4x.png
diff --git a/src/quickcontrols/material/images/drop-indicator.png b/src/quickcontrols/material/images/drop-indicator.png
new file mode 100644
index 0000000000..93560f507a
--- /dev/null
+++ b/src/quickcontrols/material/images/drop-indicator.png
diff --git a/src/quickcontrols/material/images/drop-indicator.svg b/src/quickcontrols/material/images/drop-indicator.svg
new file mode 100644
index 0000000000..94b5ca1514
--- /dev/null
+++ b/src/quickcontrols/material/images/drop-indicator.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <path d="M7,10l5,5,5-5z" fill="#757575"/>
+</svg>
diff --git a/src/quickcontrols/material/images/drop-indicator@2x.png b/src/quickcontrols/material/images/drop-indicator@2x.png
new file mode 100644
index 0000000000..d32f81604c
--- /dev/null
+++ b/src/quickcontrols/material/images/drop-indicator@2x.png
diff --git a/src/quickcontrols/material/images/drop-indicator@3x.png b/src/quickcontrols/material/images/drop-indicator@3x.png
new file mode 100644
index 0000000000..34c3e7d115
--- /dev/null
+++ b/src/quickcontrols/material/images/drop-indicator@3x.png
diff --git a/src/quickcontrols/material/images/drop-indicator@4x.png b/src/quickcontrols/material/images/drop-indicator@4x.png
new file mode 100644
index 0000000000..0613f6dd0d
--- /dev/null
+++ b/src/quickcontrols/material/images/drop-indicator@4x.png
diff --git a/src/quickcontrols/material/impl/BoxShadow.qml b/src/quickcontrols/material/impl/BoxShadow.qml
new file mode 100644
index 0000000000..f77412d554
--- /dev/null
+++ b/src/quickcontrols/material/impl/BoxShadow.qml
@@ -0,0 +1,39 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+/*
+   A implementation of CSS's box-shadow, used by ElevationEffect for a Material Design
+   elevation shadow effect.
+ */
+RectangularGlow {
+    // The 4 properties from CSS box-shadow, plus the inherited color property
+    property int offsetX
+    property int offsetY
+    property int blurRadius
+    property int spreadRadius
+
+    // The source item the shadow is being applied to, used for correctly
+    // calculating the corner radious
+    property Item source
+
+    property bool fullWidth
+    property bool fullHeight
+
+    x: (parent.width - width)/2 + offsetX
+    y: (parent.height - height)/2 + offsetY
+
+    implicitWidth: source ? source.width : parent.width
+    implicitHeight: source ? source.height : parent.height
+
+    width: implicitWidth + 2 * spreadRadius + (fullWidth ? 2 * cornerRadius : 0)
+    height: implicitHeight + 2 * spreadRadius + (fullHeight ? 2 * cornerRadius : 0)
+    glowRadius: blurRadius/2
+    spread: 0.05
+    // qmllint disable unqualified
+    // Intentionally duck-typed (QTBUG-94807)
+    cornerRadius: blurRadius + (source && source.radius || 0)
+}
diff --git a/src/quickcontrols/material/impl/CMakeLists.txt b/src/quickcontrols/material/impl/CMakeLists.txt
new file mode 100644
index 0000000000..8b8e2311b4
--- /dev/null
+++ b/src/quickcontrols/material/impl/CMakeLists.txt
@@ -0,0 +1,44 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2materialstyleimplplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "BoxShadow.qml"
+    "CheckIndicator.qml"
+    "CursorDelegate.qml"
+    "ElevationEffect.qml"
+    "RadioIndicator.qml"
+    "RectangularGlow.qml"
+    "SliderHandle.qml"
+    "SwitchIndicator.qml"
+)
+
+qt_internal_add_qml_module(qtquickcontrols2materialstyleimplplugin
+    URI "QtQuick.Controls.Material.impl"
+    VERSION "${PROJECT_VERSION}"
+    PAST_MAJOR_VERSIONS 2
+    CLASS_NAME QtQuickControls2MaterialStyleImplPlugin
+    DEPENDENCIES
+        QtQuick/auto
+    PLUGIN_TARGET qtquickcontrols2materialstyleimplplugin
+    NO_PLUGIN_OPTIONAL
+    SOURCES
+        qquickmaterialbusyindicator.cpp qquickmaterialbusyindicator_p.h
+        qquickmaterialprogressbar.cpp qquickmaterialprogressbar_p.h
+        qquickmaterialripple.cpp qquickmaterialripple_p.h
+    QML_FILES
+        ${qml_files}
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::Gui
+        Qt::QmlPrivate
+        Qt::QuickControls2ImplPrivate
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+)
diff --git a/src/quickcontrols/material/impl/CheckIndicator.qml b/src/quickcontrols/material/impl/CheckIndicator.qml
new file mode 100644
index 0000000000..b09567c04b
--- /dev/null
+++ b/src/quickcontrols/material/impl/CheckIndicator.qml
@@ -0,0 +1,87 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+Rectangle {
+    id: indicatorItem
+    implicitWidth: 18
+    implicitHeight: 18
+    color: "transparent"
+    border.color: !control.enabled ? control.Material.hintTextColor
+        : checkState !== Qt.Unchecked ? control.Material.accentColor : control.Material.secondaryTextColor
+    border.width: checkState !== Qt.Unchecked ? width / 2 : 2
+    radius: 2
+
+    property Item control
+    property int checkState: control.checkState
+
+    Behavior on border.width {
+        NumberAnimation {
+            duration: 100
+            easing.type: Easing.OutCubic
+        }
+    }
+
+    Behavior on border.color {
+        ColorAnimation {
+            duration: 100
+            easing.type: Easing.OutCubic
+        }
+    }
+
+    // TODO: This needs to be transparent
+    Image {
+        id: checkImage
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+        width: 14
+        height: 14
+        source: "qrc:/qt-project.org/imports/QtQuick/Controls/Material/images/check.png"
+        fillMode: Image.PreserveAspectFit
+
+        scale: indicatorItem.checkState === Qt.Checked ? 1 : 0
+        Behavior on scale { NumberAnimation { duration: 100 } }
+    }
+
+    Rectangle {
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+        width: 12
+        height: 3
+
+        scale: indicatorItem.checkState === Qt.PartiallyChecked ? 1 : 0
+        Behavior on scale { NumberAnimation { duration: 100 } }
+    }
+
+    states: [
+        State {
+            name: "checked"
+            when: indicatorItem.checkState === Qt.Checked
+        },
+        State {
+            name: "partiallychecked"
+            when: indicatorItem.checkState === Qt.PartiallyChecked
+        }
+    ]
+
+    transitions: Transition {
+        SequentialAnimation {
+            NumberAnimation {
+                target: indicatorItem
+                property: "scale"
+                // Go down 2 pixels in size.
+                to: 1 - 2 / indicatorItem.width
+                duration: 120
+            }
+            NumberAnimation {
+                target: indicatorItem
+                property: "scale"
+                to: 1
+                duration: 120
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/material/impl/CursorDelegate.qml b/src/quickcontrols/material/impl/CursorDelegate.qml
new file mode 100644
index 0000000000..811aa89e36
--- /dev/null
+++ b/src/quickcontrols/material/impl/CursorDelegate.qml
@@ -0,0 +1,32 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.Material
+
+Rectangle {
+    id: cursor
+
+    color: parent.Material.accentColor
+    width: 2
+    visible: parent.activeFocus && !parent.readOnly && parent.selectionStart === parent.selectionEnd
+
+    Connections {
+        target: cursor.parent
+        function onCursorPositionChanged() {
+            // keep a moving cursor visible
+            cursor.opacity = 1
+            timer.restart()
+        }
+    }
+
+    Timer {
+        id: timer
+        running: cursor.parent.activeFocus && !cursor.parent.readOnly && interval != 0
+        repeat: true
+        interval: Qt.styleHints.cursorFlashTime / 2
+        onTriggered: cursor.opacity = !cursor.opacity ? 1 : 0
+        // force the cursor visible when gaining focus
+        onRunningChanged: cursor.opacity = 1
+    }
+}
diff --git a/src/quickcontrols/material/impl/ElevationEffect.qml b/src/quickcontrols/material/impl/ElevationEffect.qml
new file mode 100644
index 0000000000..6690567617
--- /dev/null
+++ b/src/quickcontrols/material/impl/ElevationEffect.qml
@@ -0,0 +1,246 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+/*
+   An effect for standard Material Design elevation shadows. Useful for using as \c layer.effect.
+ */
+Item {
+    id: effect
+
+    /*
+       The source the effect is applied to.
+     */
+    property var source
+
+    /*
+       The elevation of the \l source Item.
+     */
+    property int elevation: 0
+
+    /*
+       Set to \c true if the \l source Item is the same width as its parent and the shadow
+       should be full width instead of rounding around the corner of the Item.
+
+       \sa fullHeight
+     */
+    property bool fullWidth: false
+
+    /*
+       Set to \c true if the \l source Item is the same height as its parent and the shadow
+       should be full height instead of rounding around the corner of the Item.
+
+       \sa fullWidth
+     */
+    property bool fullHeight: false
+
+    /*
+       \internal
+
+       The actual source Item the effect is applied to.
+     */
+    readonly property Item sourceItem: source.sourceItem
+
+    /*
+     * The following shadow values are taken from Angular Material
+     *
+     * The MIT License (MIT)
+     *
+     * Copyright (c) 2014-2016 Google, Inc. http://angularjs.org
+     *
+     * Permission is hereby granted, free of charge, to any person obtaining a copy
+     * of this software and associated documentation files (the "Software"), to deal
+     * in the Software without restriction, including without limitation the rights
+     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+     * copies of the Software, and to permit persons to whom the Software is
+     * furnished to do so, subject to the following conditions:
+     *
+     * The above copyright notice and this permission notice shall be included in all
+     * copies or substantial portions of the Software.
+     *
+     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+     * SOFTWARE.
+     */
+    /*
+       \internal
+
+       The shadows to use for each possible elevation. There are three shadows that when combined
+       make up the elevation.
+     */
+    readonly property var _shadows: [
+        [{offset: 0, blur: 0, spread: 0},
+         {offset: 0, blur: 0, spread: 0},
+         {offset: 0, blur: 0, spread: 0}],
+
+        [{offset: 1, blur: 3, spread: 0},
+         {offset: 1, blur: 1, spread: 0},
+         {offset: 2, blur: 1, spread: -1}],
+
+        [{offset: 1, blur: 5, spread: 0},
+         {offset: 2, blur: 2, spread: 0},
+         {offset: 3, blur: 1, spread: -2}],
+
+        [{offset: 1, blur: 8, spread: 0},
+         {offset: 3, blur: 4, spread: 0},
+         {offset: 3, blur: 3, spread: -2}],
+
+        [{offset: 2, blur: 4, spread: -1},
+         {offset: 4, blur: 5, spread: 0},
+         {offset: 1, blur: 10, spread: 0}],
+
+        [{offset: 3, blur: 5, spread: -1},
+         {offset: 5, blur: 8, spread: 0},
+         {offset: 1, blur: 14, spread: 0}],
+
+        [{offset: 3, blur: 5, spread: -1},
+         {offset: 6, blur: 10, spread: 0},
+         {offset: 1, blur: 18, spread: 0}],
+
+        [{offset: 4, blur: 5, spread: -2},
+         {offset: 7, blur: 10, spread: 1},
+         {offset: 2, blur: 16, spread: 1}],
+
+        [{offset: 5, blur: 5, spread: -3},
+         {offset: 8, blur: 10, spread: 1},
+         {offset: 3, blur: 14, spread: 2}],
+
+        [{offset: 5, blur: 6, spread: -3},
+         {offset: 9, blur: 12, spread: 1},
+         {offset: 3, blur: 16, spread: 2}],
+
+        [{offset: 6, blur: 6, spread: -3},
+         {offset: 10, blur: 14, spread: 1},
+         {offset: 4, blur: 18, spread: 3}],
+
+        [{offset: 6, blur: 7, spread: -4},
+         {offset: 11, blur: 15, spread: 1},
+         {offset: 4, blur: 20, spread: 3}],
+
+        [{offset: 7, blur: 8, spread: -4},
+         {offset: 12, blur: 17, spread: 2},
+         {offset: 5, blur: 22, spread: 4}],
+
+        [{offset: 7, blur: 8, spread: -4},
+         {offset: 13, blur: 19, spread: 2},
+         {offset: 5, blur: 24, spread: 4}],
+
+        [{offset: 7, blur: 9, spread: -4},
+         {offset: 14, blur: 21, spread: 2},
+         {offset: 5, blur: 26, spread: 4}],
+
+        [{offset: 8, blur: 9, spread: -5},
+         {offset: 15, blur: 22, spread: 2},
+         {offset: 6, blur: 28, spread: 5}],
+
+        [{offset: 8, blur: 10, spread: -5},
+         {offset: 16, blur: 24, spread: 2},
+         {offset: 6, blur: 30, spread: 5}],
+
+        [{offset: 8, blur: 11, spread: -5},
+         {offset: 17, blur: 26, spread: 2},
+         {offset: 6, blur: 32, spread: 5}],
+
+        [{offset: 9, blur: 11, spread: -5},
+         {offset: 18, blur: 28, spread: 2},
+         {offset: 7, blur: 34, spread: 6}],
+
+        [{offset: 9, blur: 12, spread: -6},
+         {offset: 19, blur: 29, spread: 2},
+         {offset: 7, blur: 36, spread: 6}],
+
+        [{offset: 10, blur: 13, spread: -6},
+         {offset: 20, blur: 31, spread: 3},
+         {offset: 8, blur: 38, spread: 7}],
+
+        [{offset: 10, blur: 13, spread: -6},
+         {offset: 21, blur: 33, spread: 3},
+         {offset: 8, blur: 40, spread: 7}],
+
+        [{offset: 10, blur: 14, spread: -6},
+         {offset: 22, blur: 35, spread: 3},
+         {offset: 8, blur: 42, spread: 7}],
+
+        [{offset: 11, blur: 14, spread: -7},
+         {offset: 23, blur: 36, spread: 3},
+         {offset: 9, blur: 44, spread: 8}],
+
+        [{offset: 11, blur: 15, spread: -7},
+         {offset: 24, blur: 38, spread: 3},
+         {offset: 9, blur: 46, spread: 8}]
+    ]
+
+    /*
+       \internal
+
+       The current shadow based on the elevation.
+     */
+    readonly property var _shadow: _shadows[Math.max(0, Math.min(elevation, _shadows.length - 1))]
+
+    // Nest the shadows and source view in two items rendered as a layer
+    // so the shadow is not clipped by the bounds of the source view
+    Item {
+        property int margin: -100
+
+        x: margin
+        y: margin
+        width: parent.width - 2 * margin
+        height: parent.height - 2 * margin
+
+        // By rendering as a layer, the shadow will never show through the source item,
+        // even when the source item's opacity is less than 1
+        layer.enabled: true
+
+        // The box shadows automatically pick up the size of the source Item and not
+        // the size of the parent, so we don't need to worry about the extra padding
+        // in the parent Item
+        BoxShadow {
+            offsetY: effect._shadow[0].offset
+            blurRadius: effect._shadow[0].blur
+            spreadRadius: effect._shadow[0].spread
+            color: Qt.rgba(0,0,0, 0.2)
+
+            fullWidth: effect.fullWidth
+            fullHeight: effect.fullHeight
+            source: effect.sourceItem
+        }
+
+        BoxShadow {
+            offsetY: effect._shadow[1].offset
+            blurRadius: effect._shadow[1].blur
+            spreadRadius: effect._shadow[1].spread
+            color: Qt.rgba(0,0,0, 0.14)
+
+            fullWidth: effect.fullWidth
+            fullHeight: effect.fullHeight
+            source: effect.sourceItem
+        }
+
+        BoxShadow {
+            offsetY: effect._shadow[2].offset
+            blurRadius: effect._shadow[2].blur
+            spreadRadius: effect._shadow[2].spread
+            color: Qt.rgba(0,0,0, 0.12)
+
+            fullWidth: effect.fullWidth
+            fullHeight: effect.fullHeight
+            source: effect.sourceItem
+        }
+
+        ShaderEffect {
+            property alias source: effect.source
+
+            x: (parent.width - width)/2
+            y: (parent.height - height)/2
+            width: effect.sourceItem.width
+            height: effect.sourceItem.height
+        }
+    }
+}
diff --git a/src/quickcontrols/material/impl/RadioIndicator.qml b/src/quickcontrols/material/impl/RadioIndicator.qml
new file mode 100644
index 0000000000..9570065692
--- /dev/null
+++ b/src/quickcontrols/material/impl/RadioIndicator.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+Rectangle {
+    id: indicator
+    implicitWidth: 20
+    implicitHeight: 20
+    radius: width / 2
+    border.width: 2
+    border.color: !control.enabled ? control.Material.hintTextColor
+        : control.checked || control.down ? control.Material.accentColor : control.Material.secondaryTextColor
+    color: "transparent"
+
+    property T.AbstractButton control
+
+    Rectangle {
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+        width: 10
+        height: 10
+        radius: width / 2
+        color: parent.border.color
+        visible: indicator.control.checked || indicator.control.down
+    }
+}
diff --git a/src/quickcontrols/material/impl/RectangularGlow.qml b/src/quickcontrols/material/impl/RectangularGlow.qml
new file mode 100644
index 0000000000..b604049cf9
--- /dev/null
+++ b/src/quickcontrols/material/impl/RectangularGlow.qml
@@ -0,0 +1,207 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+
+/*
+   A cross-graphics API implementation of QtGraphicalEffects' RectangularGlow.
+ */
+Item {
+    id: rootItem
+
+    /*
+        This property defines how many pixels outside the item area are reached
+        by the glow.
+
+        The value ranges from 0.0 (no glow) to inf (infinite glow). By default,
+        the property is set to \c 0.0.
+
+        \table
+        \header
+        \li Output examples with different glowRadius values
+        \li
+        \li
+        \row
+            \li \image RectangularGlow_glowRadius1.png
+            \li \image RectangularGlow_glowRadius2.png
+            \li \image RectangularGlow_glowRadius3.png
+        \row
+            \li \b { glowRadius: 10 }
+            \li \b { glowRadius: 20 }
+            \li \b { glowRadius: 40 }
+        \row
+            \li \l spread: 0
+            \li \l spread: 0
+            \li \l spread: 0
+        \row
+            \li \l color: #ffffff
+            \li \l color: #ffffff
+            \li \l color: #ffffff
+        \row
+            \li \l cornerRadius: 25
+            \li \l cornerRadius: 25
+            \li \l cornerRadius: 25
+        \endtable
+
+    */
+    property real glowRadius: 0.0
+
+    /*
+        This property defines how large part of the glow color is strenghtened
+        near the source edges.
+
+        The value ranges from 0.0 (no strenght increase) to 1.0 (maximum
+        strenght increase). By default, the property is set to \c 0.0.
+
+        \table
+        \header
+        \li Output examples with different spread values
+        \li
+        \li
+        \row
+            \li \image RectangularGlow_spread1.png
+            \li \image RectangularGlow_spread2.png
+            \li \image RectangularGlow_spread3.png
+        \row
+            \li \b { spread: 0.0 }
+            \li \b { spread: 0.5 }
+            \li \b { spread: 1.0 }
+        \row
+            \li \l glowRadius: 20
+            \li \l glowRadius: 20
+            \li \l glowRadius: 20
+        \row
+            \li \l color: #ffffff
+            \li \l color: #ffffff
+            \li \l color: #ffffff
+        \row
+            \li \l cornerRadius: 25
+            \li \l cornerRadius: 25
+            \li \l cornerRadius: 25
+        \endtable
+    */
+    property real spread: 0.0
+
+    /*
+        This property defines the RGBA color value which is used for the glow.
+
+        By default, the property is set to \c "white".
+
+        \table
+        \header
+        \li Output examples with different color values
+        \li
+        \li
+        \row
+            \li \image RectangularGlow_color1.png
+            \li \image RectangularGlow_color2.png
+            \li \image RectangularGlow_color3.png
+        \row
+            \li \b { color: #ffffff }
+            \li \b { color: #55ff55 }
+            \li \b { color: #5555ff }
+        \row
+            \li \l glowRadius: 20
+            \li \l glowRadius: 20
+            \li \l glowRadius: 20
+        \row
+            \li \l spread: 0
+            \li \l spread: 0
+            \li \l spread: 0
+        \row
+            \li \l cornerRadius: 25
+            \li \l cornerRadius: 25
+            \li \l cornerRadius: 25
+        \endtable
+    */
+    property color color: "white"
+
+    /*
+        This property defines the corner radius that is used to draw a glow with
+        rounded corners.
+
+        The value ranges from 0.0 to half of the effective width or height of
+        the glow, whichever is smaller. This can be calculated with: \c{
+        min(width, height) / 2.0 + glowRadius}
+
+        By default, the property is bound to glowRadius property. The glow
+        behaves as if the rectangle was blurred when adjusting the glowRadius
+        property.
+
+        \table
+        \header
+        \li Output examples with different cornerRadius values
+        \li
+        \li
+        \row
+            \li \image RectangularGlow_cornerRadius1.png
+            \li \image RectangularGlow_cornerRadius2.png
+            \li \image RectangularGlow_cornerRadius3.png
+        \row
+            \li \b { cornerRadius: 0 }
+            \li \b { cornerRadius: 25 }
+            \li \b { cornerRadius: 50 }
+        \row
+            \li \l glowRadius: 20
+            \li \l glowRadius: 20
+            \li \l glowRadius: 20
+        \row
+            \li \l spread: 0
+            \li \l spread: 0
+            \li \l spread: 0
+        \row
+            \li \l color: #ffffff
+            \li \l color: #ffffff
+            \li \l color: #ffffff
+        \endtable
+    */
+    property real cornerRadius: glowRadius
+
+    /*
+        This property allows the effect output pixels to be cached in order to
+        improve the rendering performance.
+
+        Every time the source or effect properties are changed, the pixels in
+        the cache must be updated. Memory consumption is increased, because an
+        extra buffer of memory is required for storing the effect output.
+
+        It is recommended to disable the cache when the source or the effect
+        properties are animated.
+
+        By default, the property is set to \c false.
+    */
+    property bool cached: false
+
+    ShaderEffectSource {
+         id: cacheItem
+         anchors.fill: shaderItem
+         visible: rootItem.cached
+         smooth: true
+         sourceItem: shaderItem
+         live: true
+         hideSource: visible
+     }
+
+    ShaderEffect {
+        id: shaderItem
+
+        x: (parent.width - width) / 2.0
+        y: (parent.height - height) / 2.0
+        width: parent.width + rootItem.glowRadius * 2 + cornerRadius * 2
+        height: parent.height + rootItem.glowRadius * 2 + cornerRadius * 2
+
+        function clampedCornerRadius() {
+            var maxCornerRadius = Math.min(rootItem.width, rootItem.height) / 2 + rootItem.glowRadius;
+            return Math.max(0, Math.min(rootItem.cornerRadius, maxCornerRadius))
+        }
+
+        property color color: rootItem.color
+        property real inverseSpread: 1.0 - rootItem.spread
+        property real relativeSizeX: ((inverseSpread * inverseSpread) * rootItem.glowRadius + cornerRadius * 2.0) / width
+        property real relativeSizeY: relativeSizeX * (width / height)
+        property real spread: rootItem.spread / 2.0
+        property real cornerRadius: clampedCornerRadius()
+
+        fragmentShader: "qrc:/qt-project.org/imports/QtQuick/Controls/Material/shaders/RectangularGlow.frag"
+    }
+}
diff --git a/src/quickcontrols/material/impl/SliderHandle.qml b/src/quickcontrols/material/impl/SliderHandle.qml
new file mode 100644
index 0000000000..ca7912b91d
--- /dev/null
+++ b/src/quickcontrols/material/impl/SliderHandle.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+Item {
+    id: root
+    implicitWidth: initialSize
+    implicitHeight: initialSize
+
+    property real value: 0
+    property bool handleHasFocus: false
+    property bool handlePressed: false
+    property bool handleHovered: false
+    readonly property int initialSize: 13
+    readonly property var control: parent
+
+    Rectangle {
+        id: handleRect
+        width: parent.width
+        height: parent.height
+        radius: width / 2
+        scale: root.handlePressed ? 1.5 : 1
+        color: root.control.enabled ? root.control.Material.accentColor : root.control.Material.sliderDisabledColor
+
+        Behavior on scale {
+            NumberAnimation {
+                duration: 250
+            }
+        }
+    }
+
+    Ripple {
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+        width: 22; height: 22
+        pressed: root.handlePressed
+        active: root.handlePressed || root.handleHasFocus || (enabled && root.handleHovered)
+        color: root.control.Material.highlightedRippleColor
+    }
+}
diff --git a/src/quickcontrols/material/impl/SwitchIndicator.qml b/src/quickcontrols/material/impl/SwitchIndicator.qml
new file mode 100644
index 0000000000..e439bc31b7
--- /dev/null
+++ b/src/quickcontrols/material/impl/SwitchIndicator.qml
@@ -0,0 +1,49 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Material
+import QtQuick.Controls.Material.impl
+
+Item {
+    id: indicator
+    implicitWidth: 38
+    implicitHeight: 32
+
+    property T.AbstractButton control
+    property alias handle: handle
+
+    Material.elevation: 1
+
+    Rectangle {
+        width: parent.width
+        height: 14
+        radius: height / 2
+        y: parent.height / 2 - height / 2
+        color: indicator.control.enabled ? (indicator.control.checked ? indicator.control.Material.switchCheckedTrackColor : indicator.control.Material.switchUncheckedTrackColor)
+                               : indicator.control.Material.switchDisabledTrackColor
+    }
+
+    Rectangle {
+        id: handle
+        x: Math.max(0, Math.min(parent.width - width, indicator.control.visualPosition * parent.width - (width / 2)))
+        y: (parent.height - height) / 2
+        width: 20
+        height: 20
+        radius: width / 2
+        color: indicator.control.enabled ? (indicator.control.checked ? indicator.control.Material.switchCheckedHandleColor : indicator.control.Material.switchUncheckedHandleColor)
+                               : indicator.control.Material.switchDisabledHandleColor
+
+        Behavior on x {
+            enabled: !indicator.control.pressed
+            SmoothedAnimation {
+                duration: 300
+            }
+        }
+        layer.enabled: indicator.Material.elevation > 0
+        layer.effect: ElevationEffect {
+            elevation: indicator.Material.elevation
+        }
+    }
+}
diff --git a/src/quickcontrols/material/impl/qquickmaterialbusyindicator.cpp b/src/quickcontrols/material/impl/qquickmaterialbusyindicator.cpp
new file mode 100644
index 0000000000..4d5b4e13e7
--- /dev/null
+++ b/src/quickcontrols/material/impl/qquickmaterialbusyindicator.cpp
@@ -0,0 +1,214 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickmaterialbusyindicator_p.h"
+
+#include <QtCore/qmath.h>
+#include <QtCore/qeasingcurve.h>
+#include <QtGui/qpainter.h>
+#include <QtQuick/qsgimagenode.h>
+#include <QtQuick/qquickwindow.h>
+#include <QtQuickControls2Impl/private/qquickanimatednode_p.h>
+
+QT_BEGIN_NAMESPACE
+
+/*
+    Relevant Android code:
+
+    - core/res/res/anim/progress_indeterminate_rotation_material.xml contains
+      the rotation animation data.
+    - core/res/res/anim/progress_indeterminate_material.xml contains the trim
+      animation data.
+    - core/res/res/interpolator/trim_start_interpolator.xml and
+      core/res/res/interpolator/trim_end_interpolator.xml contain the start
+      and end trim path interpolators.
+    - addCommand() in core/java/android/util/PathParser.java has a list of the
+      different path commands available.
+*/
+
+static const int SpanAnimationDuration = 700;
+static const int RotationAnimationDuration = SpanAnimationDuration * 6;
+static const int TargetRotation = 720;
+static const int OneDegree = 16;
+static const qreal MinSweepSpan = 10 * OneDegree;
+static const qreal MaxSweepSpan = 300 * OneDegree;
+
+class QQuickMaterialBusyIndicatorNode : public QQuickAnimatedNode
+{
+public:
+    QQuickMaterialBusyIndicatorNode(QQuickMaterialBusyIndicator *item);
+
+    void sync(QQuickItem *item) override;
+
+protected:
+    void updateCurrentTime(int time) override;
+
+private:
+    int m_lastStartAngle = 0;
+    int m_lastEndAngle = 0;
+    qreal m_width = 0;
+    qreal m_height = 0;
+    qreal m_devicePixelRatio = 1;
+    QColor m_color;
+};
+
+QQuickMaterialBusyIndicatorNode::QQuickMaterialBusyIndicatorNode(QQuickMaterialBusyIndicator *item)
+    : QQuickAnimatedNode(item)
+{
+    setLoopCount(Infinite);
+    setCurrentTime(item->elapsed());
+    setDuration(RotationAnimationDuration);
+
+    QSGImageNode *textureNode = item->window()->createImageNode();
+    textureNode->setOwnsTexture(true);
+    appendChildNode(textureNode);
+
+    // A texture seems to be required here, but we don't have one yet, as we haven't drawn anything,
+    // so just use a blank image.
+    QImage blankImage(item->width(), item->height(), QImage::Format_ARGB32_Premultiplied);
+    blankImage.fill(Qt::transparent);
+    textureNode->setTexture(item->window()->createTextureFromImage(blankImage));
+}
+
+void QQuickMaterialBusyIndicatorNode::updateCurrentTime(int time)
+{
+    const qreal w = m_width;
+    const qreal h = m_height;
+    const qreal size = qMin(w, h);
+    const qreal dx = (w - size) / 2;
+    const qreal dy = (h - size) / 2;
+
+    QImage image(size * m_devicePixelRatio, size * m_devicePixelRatio, QImage::Format_ARGB32_Premultiplied);
+    image.fill(Qt::transparent);
+
+    QPainter painter(&image);
+    painter.setRenderHint(QPainter::Antialiasing);
+
+    QPen pen;
+    QSGImageNode *textureNode = static_cast<QSGImageNode *>(firstChild());
+    pen.setColor(m_color);
+    pen.setWidth(qCeil(size / 12) * m_devicePixelRatio);
+    painter.setPen(pen);
+
+    const qreal percentageComplete = time / qreal(RotationAnimationDuration);
+    const qreal spanPercentageComplete = (time % SpanAnimationDuration) / qreal(SpanAnimationDuration);
+    const int iteration = time / SpanAnimationDuration;
+    int startAngle = 0;
+    int endAngle = 0;
+
+    if (iteration % 2 == 0) {
+        if (m_lastStartAngle > 360 * OneDegree)
+            m_lastStartAngle -= 360 * OneDegree;
+
+        // The start angle is only affected by the rotation animation for the "grow" phase.
+        startAngle = m_lastStartAngle;
+        QEasingCurve angleCurve(QEasingCurve::OutQuad);
+        const qreal percentage = angleCurve.valueForProgress(spanPercentageComplete);
+        endAngle = m_lastStartAngle + MinSweepSpan + percentage * (MaxSweepSpan - MinSweepSpan);
+        m_lastEndAngle = endAngle;
+    } else {
+        // Both the start angle *and* the span are affected by the "shrink" phase.
+        QEasingCurve angleCurve(QEasingCurve::InQuad);
+        const qreal percentage = angleCurve.valueForProgress(spanPercentageComplete);
+        startAngle = m_lastEndAngle - MaxSweepSpan + percentage * (MaxSweepSpan - MinSweepSpan);
+        endAngle = m_lastEndAngle;
+        m_lastStartAngle = startAngle;
+    }
+
+    const int halfPen = pen.width() / 2;
+    const QRectF arcBounds = QRectF(halfPen, halfPen,
+                                    m_devicePixelRatio * size - pen.width(),
+                                    m_devicePixelRatio * size - pen.width());
+    // The current angle of the rotation animation.
+    const qreal rotation = OneDegree * percentageComplete * -TargetRotation;
+    startAngle -= rotation;
+    endAngle -= rotation;
+    const int angleSpan = endAngle - startAngle;
+    painter.drawArc(arcBounds, -startAngle, -angleSpan);
+    painter.end();
+
+    textureNode->setRect(QRectF(dx, dy, size, size));
+    textureNode->setTexture(window()->createTextureFromImage(image));
+}
+
+void QQuickMaterialBusyIndicatorNode::sync(QQuickItem *item)
+{
+    QQuickMaterialBusyIndicator *indicator = static_cast<QQuickMaterialBusyIndicator *>(item);
+    m_color = indicator->color();
+    m_width = indicator->width();
+    m_height = indicator->height();
+    m_devicePixelRatio = indicator->window()->effectiveDevicePixelRatio();
+}
+
+QQuickMaterialBusyIndicator::QQuickMaterialBusyIndicator(QQuickItem *parent) :
+    QQuickItem(parent)
+{
+    setFlag(ItemHasContents);
+}
+
+QColor QQuickMaterialBusyIndicator::color() const
+{
+    return m_color;
+}
+
+void QQuickMaterialBusyIndicator::setColor(const QColor &color)
+{
+    if (m_color == color)
+        return;
+
+    m_color = color;
+    update();
+}
+
+bool QQuickMaterialBusyIndicator::isRunning() const
+{
+    return isVisible();
+}
+
+void QQuickMaterialBusyIndicator::setRunning(bool running)
+{
+    if (running)
+        setVisible(true);
+}
+
+int QQuickMaterialBusyIndicator::elapsed() const
+{
+    return m_elapsed;
+}
+
+void QQuickMaterialBusyIndicator::itemChange(QQuickItem::ItemChange change, const QQuickItem::ItemChangeData &data)
+{
+    QQuickItem::itemChange(change, data);
+    switch (change) {
+    case ItemOpacityHasChanged:
+        if (qFuzzyIsNull(data.realValue))
+            setVisible(false);
+        break;
+    case ItemVisibleHasChanged:
+        update();
+        break;
+    default:
+        break;
+    }
+}
+
+QSGNode *QQuickMaterialBusyIndicator::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *)
+{
+    QQuickMaterialBusyIndicatorNode *node = static_cast<QQuickMaterialBusyIndicatorNode *>(oldNode);
+    if (isRunning() && width() > 0 && height() > 0) {
+        if (!node) {
+            node = new QQuickMaterialBusyIndicatorNode(this);
+            node->start();
+        }
+        node->sync(this);
+    } else {
+        m_elapsed = node ? node->currentTime() : 0;
+        delete node;
+        node = nullptr;
+    }
+    return node;
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickmaterialbusyindicator_p.cpp"
diff --git a/src/quickcontrols/material/impl/qquickmaterialbusyindicator_p.h b/src/quickcontrols/material/impl/qquickmaterialbusyindicator_p.h
new file mode 100644
index 0000000000..b6bbd925c7
--- /dev/null
+++ b/src/quickcontrols/material/impl/qquickmaterialbusyindicator_p.h
@@ -0,0 +1,56 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKMATERIALBUSYINDICATOR_P_H
+#define QQUICKMATERIALBUSYINDICATOR_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtGui/qcolor.h>
+#include <QtQuick/qquickitem.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickMaterialBusyIndicator : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor color READ color WRITE setColor FINAL)
+    Q_PROPERTY(bool running READ isRunning WRITE setRunning FINAL)
+    QML_NAMED_ELEMENT(BusyIndicatorImpl)
+    QML_ADDED_IN_VERSION(2, 0)
+
+public:
+    explicit QQuickMaterialBusyIndicator(QQuickItem *parent = nullptr);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    bool isRunning() const;
+    void setRunning(bool running);
+
+    int elapsed() const;
+
+protected:
+    void itemChange(ItemChange change, const ItemChangeData &data) override;
+    QSGNode *updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) override;
+
+private:
+    int m_elapsed = 0;
+    QColor m_color = Qt::black;
+};
+
+QT_END_NAMESPACE
+
+QML_DECLARE_TYPE(QQuickMaterialBusyIndicator)
+
+#endif // QQUICKMATERIALBUSYINDICATOR_P_H
diff --git a/src/quickcontrols/material/impl/qquickmaterialprogressbar.cpp b/src/quickcontrols/material/impl/qquickmaterialprogressbar.cpp
new file mode 100644
index 0000000000..67c9f614f5
--- /dev/null
+++ b/src/quickcontrols/material/impl/qquickmaterialprogressbar.cpp
@@ -0,0 +1,214 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickmaterialprogressbar_p.h"
+
+#include <QtCore/qmath.h>
+#include <QtCore/qeasingcurve.h>
+#include <QtQuick/private/qquickitem_p.h>
+#include <QtQuick/private/qsgadaptationlayer_p.h>
+#include <QtQuick/qsgrectanglenode.h>
+#include <QtQuick/qsgimagenode.h>
+#include <QtQuick/qquickwindow.h>
+#include <QtQuickControls2Impl/private/qquickanimatednode_p.h>
+
+QT_BEGIN_NAMESPACE
+
+static const int PauseDuration = 520;
+static const int SlideDuration = 1240;
+static const int TotalDuration = SlideDuration + PauseDuration;
+
+class QQuickMaterialProgressBarNode : public QQuickAnimatedNode
+{
+public:
+    QQuickMaterialProgressBarNode(QQuickMaterialProgressBar *item);
+
+    void updateCurrentTime(int time) override;
+    void sync(QQuickItem *item) override;
+
+private:
+    void moveNode(QSGTransformNode *node, const QRectF &geometry, qreal progress);
+
+    bool m_indeterminate = false;
+    QEasingCurve m_easing = QEasingCurve::OutCubic;
+};
+
+QQuickMaterialProgressBarNode::QQuickMaterialProgressBarNode(QQuickMaterialProgressBar *item)
+    : QQuickAnimatedNode(item)
+{
+    setLoopCount(Infinite);
+    setDuration(TotalDuration);
+}
+
+void QQuickMaterialProgressBarNode::updateCurrentTime(int time)
+{
+    QSGRectangleNode *geometryNode = static_cast<QSGRectangleNode *>(firstChild());
+    Q_ASSERT(geometryNode->type() == QSGNode::GeometryNodeType);
+    const QRectF geometry = geometryNode->rect();
+
+    QSGTransformNode *firstNode = static_cast<QSGTransformNode *>(geometryNode->firstChild());
+    if (firstNode) {
+        Q_ASSERT(firstNode->type() == QSGNode::TransformNodeType);
+
+        const qreal progress = qMin<qreal>(1.0, static_cast<qreal>(time) / SlideDuration);
+        moveNode(static_cast<QSGTransformNode *>(firstNode), geometry, progress);
+    }
+
+    QSGTransformNode *secondNode = static_cast<QSGTransformNode *>(geometryNode->lastChild());
+    if (secondNode) {
+        Q_ASSERT(secondNode->type() == QSGNode::TransformNodeType);
+
+        const qreal progress = qMax<qreal>(0.0, static_cast<qreal>(time - PauseDuration) / SlideDuration);
+        moveNode(static_cast<QSGTransformNode *>(secondNode), geometry, progress);
+    }
+}
+
+void QQuickMaterialProgressBarNode::sync(QQuickItem *item)
+{
+    QQuickMaterialProgressBar *bar = static_cast<QQuickMaterialProgressBar *>(item);
+    if (m_indeterminate != bar->isIndeterminate()) {
+        m_indeterminate = bar->isIndeterminate();
+        if (m_indeterminate)
+            start();
+        else
+            stop();
+    }
+
+    QQuickItemPrivate *d = QQuickItemPrivate::get(item);
+
+    QRectF bounds = item->boundingRect();
+    bounds.setHeight(item->implicitHeight());
+    bounds.moveTop((item->height() - bounds.height()) / 2.0);
+
+    QSGRectangleNode *geometryNode = static_cast<QSGRectangleNode *>(firstChild());
+    if (!geometryNode) {
+        geometryNode = item->window()->createRectangleNode();
+        geometryNode->setColor(Qt::transparent);
+        appendChildNode(geometryNode);
+    }
+    geometryNode->setRect(bounds);
+
+    const int count = m_indeterminate ? 2 : 1;
+    const qreal w = m_indeterminate ? 0 : bar->progress() * item->width();
+    const QRectF rect(0, bounds.y(), w, bounds.height());
+
+    QSGNode *transformNode = geometryNode->firstChild();
+    for (int i = 0; i < count; ++i) {
+        if (!transformNode) {
+            transformNode = new QSGTransformNode;
+            geometryNode->appendChildNode(transformNode);
+
+            QSGInternalRectangleNode *rectNode = d->sceneGraphContext()->createInternalRectangleNode();
+            rectNode->setAntialiasing(true);
+            transformNode->appendChildNode(rectNode);
+        }
+        Q_ASSERT(transformNode->type() == QSGNode::TransformNodeType);
+        static_cast<QSGTransformNode *>(transformNode)->setMatrix(QMatrix4x4());
+
+        QSGInternalRectangleNode *rectNode = static_cast<QSGInternalRectangleNode *>(transformNode->firstChild());
+        Q_ASSERT(rectNode->type() == QSGNode::GeometryNodeType);
+
+        rectNode->setRect(rect);
+        rectNode->setColor(bar->color());
+        rectNode->update();
+
+        transformNode = transformNode->nextSibling();
+    }
+
+    while (transformNode) {
+        QSGNode *nextSibling = transformNode->nextSibling();
+        delete transformNode;
+        transformNode = nextSibling;
+    }
+}
+
+void QQuickMaterialProgressBarNode::moveNode(QSGTransformNode *transformNode, const QRectF &geometry, qreal progress)
+{
+    const qreal value = m_easing.valueForProgress(progress);
+    const qreal x = value * geometry.width();
+
+    QMatrix4x4 matrix;
+    matrix.translate(x, 0);
+    transformNode->setMatrix(matrix);
+
+    QSGInternalRectangleNode *rectNode = static_cast<QSGInternalRectangleNode *>(transformNode->firstChild());
+    Q_ASSERT(rectNode->type() == QSGNode::GeometryNodeType);
+
+    QRectF r = geometry;
+    r.setWidth(value * (geometry.width() - x));
+    rectNode->setRect(r);
+    rectNode->update();
+}
+
+QQuickMaterialProgressBar::QQuickMaterialProgressBar(QQuickItem *parent)
+    : QQuickItem(parent)
+{
+    setFlag(ItemHasContents);
+}
+
+QColor QQuickMaterialProgressBar::color() const
+{
+    return m_color;
+}
+
+void QQuickMaterialProgressBar::setColor(const QColor &color)
+{
+    if (color == m_color)
+        return;
+
+    m_color = color;
+    update();
+}
+
+qreal QQuickMaterialProgressBar::progress() const
+{
+    return m_progress;
+}
+
+void QQuickMaterialProgressBar::setProgress(qreal progress)
+{
+    if (progress == m_progress)
+        return;
+
+    m_progress = progress;
+    update();
+}
+
+bool QQuickMaterialProgressBar::isIndeterminate() const
+{
+    return m_indeterminate;
+}
+
+void QQuickMaterialProgressBar::setIndeterminate(bool indeterminate)
+{
+    if (indeterminate == m_indeterminate)
+        return;
+
+    m_indeterminate = indeterminate;
+    update();
+}
+
+void QQuickMaterialProgressBar::itemChange(QQuickItem::ItemChange change, const QQuickItem::ItemChangeData &data)
+{
+    QQuickItem::itemChange(change, data);
+    if (change == ItemVisibleHasChanged)
+        update();
+}
+
+QSGNode *QQuickMaterialProgressBar::updatePaintNode(QSGNode *oldNode, QQuickItem::UpdatePaintNodeData *)
+{
+    QQuickMaterialProgressBarNode *node = static_cast<QQuickMaterialProgressBarNode *>(oldNode);
+    if (isVisible() && width() > 0 && height() > 0) {
+        if (!node)
+            node = new QQuickMaterialProgressBarNode(this);
+        node->sync(this);
+    } else {
+        delete node;
+        node = nullptr;
+    }
+    return node;
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickmaterialprogressbar_p.cpp"
diff --git a/src/quickcontrols/material/impl/qquickmaterialprogressbar_p.h b/src/quickcontrols/material/impl/qquickmaterialprogressbar_p.h
new file mode 100644
index 0000000000..d250c2f76d
--- /dev/null
+++ b/src/quickcontrols/material/impl/qquickmaterialprogressbar_p.h
@@ -0,0 +1,59 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKMATERIALPROGRESSBAR_P_H
+#define QQUICKMATERIALPROGRESSBAR_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtGui/qcolor.h>
+#include <QtQuick/qquickitem.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickMaterialProgressBar : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor color READ color WRITE setColor FINAL)
+    Q_PROPERTY(qreal progress READ progress WRITE setProgress FINAL)
+    Q_PROPERTY(bool indeterminate READ isIndeterminate WRITE setIndeterminate FINAL)
+    QML_NAMED_ELEMENT(ProgressBarImpl)
+    QML_ADDED_IN_VERSION(2, 0)
+
+public:
+    explicit QQuickMaterialProgressBar(QQuickItem *parent = nullptr);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    qreal progress() const;
+    void setProgress(qreal progress);
+
+    bool isIndeterminate() const;
+    void setIndeterminate(bool indeterminate);
+
+protected:
+    void itemChange(ItemChange change, const ItemChangeData &data) override;
+    QSGNode *updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) override;
+
+private:
+    QColor m_color = Qt::black;
+    qreal m_progress = 0.0;
+    bool m_indeterminate = false;
+};
+
+QT_END_NAMESPACE
+
+QML_DECLARE_TYPE(QQuickMaterialProgressBar)
+
+#endif // QQUICKMATERIALPROGRESSBAR_P_H
diff --git a/src/quickcontrols/material/impl/qquickmaterialripple.cpp b/src/quickcontrols/material/impl/qquickmaterialripple.cpp
new file mode 100644
index 0000000000..04e171f190
--- /dev/null
+++ b/src/quickcontrols/material/impl/qquickmaterialripple.cpp
@@ -0,0 +1,411 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickmaterialripple_p.h"
+
+#include <QtCore/qmath.h>
+#include <QtQuick/private/qquickitem_p.h>
+#include <QtQuick/private/qsgadaptationlayer_p.h>
+#include <QtQuickControls2Impl/private/qquickanimatednode_p.h>
+#include <QtQuickTemplates2/private/qquickabstractbutton_p.h>
+#include <QtQuickTemplates2/private/qquickabstractbutton_p_p.h>
+
+QT_BEGIN_NAMESPACE
+
+namespace {
+    enum WavePhase { WaveEnter, WaveExit };
+}
+
+static const int RIPPLE_ENTER_DELAY = 80;
+static const int OPACITY_ENTER_DURATION_FAST = 120;
+static const int WAVE_OPACITY_DECAY_DURATION = 333;
+static const qreal WAVE_TOUCH_DOWN_ACCELERATION = 1024.0;
+
+class QQuickMaterialRippleWaveNode : public QQuickAnimatedNode
+{
+public:
+    QQuickMaterialRippleWaveNode(QQuickMaterialRipple *ripple);
+
+    void exit();
+    void updateCurrentTime(int time) override;
+    void sync(QQuickItem *item) override;
+
+private:
+    qreal m_from = 0;
+    qreal m_to = 0;
+    qreal m_value = 0;
+    WavePhase m_phase = WaveEnter;
+    QPointF m_anchor;
+    QRectF m_bounds;
+};
+
+QQuickMaterialRippleWaveNode::QQuickMaterialRippleWaveNode(QQuickMaterialRipple *ripple)
+    : QQuickAnimatedNode(ripple)
+{
+    start(qRound(1000.0 * qSqrt(ripple->diameter() / 2.0 / WAVE_TOUCH_DOWN_ACCELERATION)));
+
+    QSGOpacityNode *opacityNode = new QSGOpacityNode;
+    appendChildNode(opacityNode);
+
+    QQuickItemPrivate *d = QQuickItemPrivate::get(ripple);
+    QSGInternalRectangleNode *rectNode = d->sceneGraphContext()->createInternalRectangleNode();
+    rectNode->setAntialiasing(true);
+    opacityNode->appendChildNode(rectNode);
+}
+
+void QQuickMaterialRippleWaveNode::exit()
+{
+    m_phase = WaveExit;
+    m_from = m_value;
+    setDuration(WAVE_OPACITY_DECAY_DURATION);
+    restart();
+    connect(this, &QQuickAnimatedNode::stopped, this, &QObject::deleteLater);
+}
+
+void QQuickMaterialRippleWaveNode::updateCurrentTime(int time)
+{
+    qreal p = 1.0;
+    if (duration() > 0)
+        p = time / static_cast<qreal>(duration());
+
+    m_value = m_from + (m_to - m_from) * p;
+    p = m_value / m_to;
+
+    const qreal dx = (1.0 - p) * (m_anchor.x() - m_bounds.width() / 2);
+    const qreal dy = (1.0 - p) * (m_anchor.y() - m_bounds.height() / 2);
+
+    QMatrix4x4 m;
+    m.translate(qRound((m_bounds.width() - m_value) / 2 + dx),
+                qRound((m_bounds.height() - m_value) / 2 + dy));
+    setMatrix(m);
+
+    QSGOpacityNode *opacityNode = static_cast<QSGOpacityNode *>(firstChild());
+    Q_ASSERT(opacityNode->type() == QSGNode::OpacityNodeType);
+    qreal opacity = 1.0;
+    if (m_phase == WaveExit)
+        opacity -= static_cast<qreal>(time) / WAVE_OPACITY_DECAY_DURATION;
+    opacityNode->setOpacity(opacity);
+
+    QSGInternalRectangleNode *rectNode = static_cast<QSGInternalRectangleNode *>(opacityNode->firstChild());
+    Q_ASSERT(rectNode->type() == QSGNode::GeometryNodeType);
+    rectNode->setRect(QRectF(0, 0, m_value, m_value));
+    rectNode->setRadius(m_value / 2);
+    rectNode->update();
+}
+
+void QQuickMaterialRippleWaveNode::sync(QQuickItem *item)
+{
+    QQuickMaterialRipple *ripple = static_cast<QQuickMaterialRipple *>(item);
+    m_to = ripple->diameter();
+    m_anchor = ripple->anchorPoint();
+    m_bounds = ripple->boundingRect();
+
+    QSGOpacityNode *opacityNode = static_cast<QSGOpacityNode *>(firstChild());
+    Q_ASSERT(opacityNode->type() == QSGNode::OpacityNodeType);
+
+    QSGInternalRectangleNode *rectNode = static_cast<QSGInternalRectangleNode *>(opacityNode->firstChild());
+    Q_ASSERT(rectNode->type() == QSGNode::GeometryNodeType);
+    rectNode->setColor(ripple->color());
+}
+
+class QQuickMaterialRippleBackgroundNode : public QQuickAnimatedNode
+{
+    Q_OBJECT
+
+public:
+    QQuickMaterialRippleBackgroundNode(QQuickMaterialRipple *ripple);
+
+    void updateCurrentTime(int time) override;
+    void sync(QQuickItem *item) override;
+
+private:
+    bool m_active = false;
+};
+
+QQuickMaterialRippleBackgroundNode::QQuickMaterialRippleBackgroundNode(QQuickMaterialRipple *ripple)
+    : QQuickAnimatedNode(ripple)
+{
+    setDuration(OPACITY_ENTER_DURATION_FAST);
+
+    QSGOpacityNode *opacityNode = new QSGOpacityNode;
+    opacityNode->setOpacity(0.0);
+    appendChildNode(opacityNode);
+
+    QQuickItemPrivate *d = QQuickItemPrivate::get(ripple);
+    QSGInternalRectangleNode *rectNode = d->sceneGraphContext()->createInternalRectangleNode();
+    rectNode->setAntialiasing(true);
+    opacityNode->appendChildNode(rectNode);
+}
+
+void QQuickMaterialRippleBackgroundNode::updateCurrentTime(int time)
+{
+    qreal opacity = time / static_cast<qreal>(duration());
+    if (!m_active)
+        opacity = 1.0 - opacity;
+
+    QSGOpacityNode *opacityNode = static_cast<QSGOpacityNode *>(firstChild());
+    Q_ASSERT(opacityNode->type() == QSGNode::OpacityNodeType);
+    opacityNode->setOpacity(opacity);
+}
+
+void QQuickMaterialRippleBackgroundNode::sync(QQuickItem *item)
+{
+    QQuickMaterialRipple *ripple = static_cast<QQuickMaterialRipple *>(item);
+    if (m_active != ripple->isActive()) {
+        m_active = ripple->isActive();
+        setDuration(m_active ? OPACITY_ENTER_DURATION_FAST : WAVE_OPACITY_DECAY_DURATION);
+        restart();
+    }
+
+    QSGOpacityNode *opacityNode = static_cast<QSGOpacityNode *>(firstChild());
+    Q_ASSERT(opacityNode->type() == QSGNode::OpacityNodeType);
+
+    QSGInternalRectangleNode *rectNode = static_cast<QSGInternalRectangleNode *>(opacityNode->firstChild());
+    Q_ASSERT(rectNode->type() == QSGNode::GeometryNodeType);
+
+    const qreal w = ripple->width();
+    const qreal h = ripple->height();
+    const qreal sz = qSqrt(w * w + h * h);
+
+    QMatrix4x4 matrix;
+    if (qFuzzyIsNull(ripple->clipRadius())) {
+        matrix.translate(qRound((w - sz) / 2), qRound((h - sz) / 2));
+        rectNode->setRect(QRectF(0, 0, sz, sz));
+        rectNode->setRadius(sz / 2);
+    } else {
+        rectNode->setRect(QRectF(0, 0, w, h));
+        rectNode->setRadius(ripple->clipRadius());
+    }
+
+    setMatrix(matrix);
+    rectNode->setColor(ripple->color());
+    rectNode->update();
+}
+
+QQuickMaterialRipple::QQuickMaterialRipple(QQuickItem *parent)
+    : QQuickItem(parent)
+{
+    setFlag(ItemHasContents);
+}
+
+bool QQuickMaterialRipple::isActive() const
+{
+    return m_active;
+}
+
+void QQuickMaterialRipple::setActive(bool active)
+{
+    if (active == m_active)
+        return;
+
+    m_active = active;
+    update();
+}
+
+QColor QQuickMaterialRipple::color() const
+{
+    return m_color;
+}
+
+void QQuickMaterialRipple::setColor(const QColor &color)
+{
+    if (m_color == color)
+        return;
+
+    m_color = color;
+    update();
+}
+
+qreal QQuickMaterialRipple::clipRadius() const
+{
+    return m_clipRadius;
+}
+
+void QQuickMaterialRipple::setClipRadius(qreal radius)
+{
+    if (qFuzzyCompare(m_clipRadius, radius))
+        return;
+
+    m_clipRadius = radius;
+    setClip(!qFuzzyIsNull(radius));
+    update();
+}
+
+bool QQuickMaterialRipple::isPressed() const
+{
+    return m_pressed;
+}
+
+void QQuickMaterialRipple::setPressed(bool pressed)
+{
+    if (pressed == m_pressed)
+        return;
+
+    m_pressed = pressed;
+
+    if (!isEnabled()) {
+        exitWave();
+        return;
+    }
+
+    if (pressed) {
+        if (m_trigger == Press)
+            prepareWave();
+        else
+            exitWave();
+    } else {
+        if (m_trigger == Release)
+            enterWave();
+        else
+            exitWave();
+    }
+}
+
+QQuickMaterialRipple::Trigger QQuickMaterialRipple::trigger() const
+{
+    return m_trigger;
+}
+
+void QQuickMaterialRipple::setTrigger(Trigger trigger)
+{
+    m_trigger = trigger;
+}
+
+QPointF QQuickMaterialRipple::anchorPoint() const
+{
+    const QRectF bounds = boundingRect();
+    const QPointF center = bounds.center();
+    if (!m_anchor)
+        return center;
+
+    QPointF anchorPoint = bounds.center();
+    if (QQuickAbstractButton *button = qobject_cast<QQuickAbstractButton *>(m_anchor))
+        anchorPoint = QQuickAbstractButtonPrivate::get(button)->pressPoint;
+    anchorPoint = mapFromItem(m_anchor, anchorPoint);
+
+    // calculate whether the anchor point is within the ripple circle bounds,
+    // that is, whether waves should start expanding from the anchor point
+    const qreal r = qSqrt(bounds.width() * bounds.width() + bounds.height() * bounds.height()) / 2;
+    if (QLineF(center, anchorPoint).length() < r)
+        return anchorPoint;
+
+    // if the anchor point is outside the ripple circle bounds, start expanding
+    // from the intersection point of the ripple circle and a line from its center
+    // to the the anchor point
+    const qreal p = qAtan2(anchorPoint.y() - center.y(), anchorPoint.x() - center.x());
+    return QPointF(center.x() + r * qCos(p), center.y() + r * qSin(p));
+}
+
+QQuickItem *QQuickMaterialRipple::anchor() const
+{
+    return m_anchor;
+}
+
+void QQuickMaterialRipple::setAnchor(QQuickItem *item)
+{
+    m_anchor = item;
+}
+
+qreal QQuickMaterialRipple::diameter() const
+{
+    const qreal w = width();
+    const qreal h = height();
+    return qSqrt(w * w + h * h);
+}
+
+void QQuickMaterialRipple::itemChange(ItemChange change, const ItemChangeData &data)
+{
+    QQuickItem::itemChange(change, data);
+}
+
+QSGNode *QQuickMaterialRipple::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *)
+{
+    QQuickItemPrivate *d = QQuickItemPrivate::get(this);
+    QQuickDefaultClipNode *clipNode = d->clipNode();
+    if (clipNode) {
+        // TODO: QTBUG-51894
+        // clipNode->setRadius(m_clipRadius);
+        clipNode->setRect(boundingRect());
+        clipNode->update();
+    }
+
+    QSGNode *container = oldNode;
+    if (!container)
+        container = new QSGNode;
+
+    QQuickMaterialRippleBackgroundNode *backgroundNode = static_cast<QQuickMaterialRippleBackgroundNode *>(container->firstChild());
+    if (!backgroundNode) {
+        backgroundNode = new QQuickMaterialRippleBackgroundNode(this);
+        backgroundNode->setObjectName(objectName());
+        container->appendChildNode(backgroundNode);
+    }
+    backgroundNode->sync(this);
+
+    // enter new waves
+    int i = m_waves;
+    QQuickMaterialRippleWaveNode *enterNode = static_cast<QQuickMaterialRippleWaveNode *>(backgroundNode->nextSibling());
+    while (i-- > 0) {
+        if (!enterNode) {
+            enterNode = new QQuickMaterialRippleWaveNode(this);
+            container->appendChildNode(enterNode);
+        }
+        enterNode->sync(this);
+        enterNode = static_cast<QQuickMaterialRippleWaveNode *>(enterNode->nextSibling());
+    }
+
+    // exit old waves
+    int j = container->childCount() - 1 - m_waves;
+    while (j-- > 0) {
+        QQuickMaterialRippleWaveNode *exitNode = static_cast<QQuickMaterialRippleWaveNode *>(backgroundNode->nextSibling());
+        if (exitNode) {
+            exitNode->exit();
+            exitNode->sync(this);
+        }
+    }
+
+    return container;
+}
+
+void QQuickMaterialRipple::timerEvent(QTimerEvent *event)
+{
+    QQuickItem::timerEvent(event);
+
+    if (event->timerId() == m_enterDelay)
+        enterWave();
+}
+
+void QQuickMaterialRipple::prepareWave()
+{
+    if (m_enterDelay <= 0)
+        m_enterDelay = startTimer(RIPPLE_ENTER_DELAY);
+}
+
+void QQuickMaterialRipple::enterWave()
+{
+    if (m_enterDelay > 0) {
+        killTimer(m_enterDelay);
+        m_enterDelay = 0;
+    }
+
+    ++m_waves;
+    update();
+}
+
+void QQuickMaterialRipple::exitWave()
+{
+    if (m_enterDelay > 0) {
+        killTimer(m_enterDelay);
+        m_enterDelay = 0;
+    }
+
+    if (m_waves > 0) {
+        --m_waves;
+        update();
+    }
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickmaterialripple_p.cpp"
+
+#include "qquickmaterialripple.moc"
diff --git a/src/quickcontrols/material/impl/qquickmaterialripple_p.h b/src/quickcontrols/material/impl/qquickmaterialripple_p.h
new file mode 100644
index 0000000000..cdaaf13b1a
--- /dev/null
+++ b/src/quickcontrols/material/impl/qquickmaterialripple_p.h
@@ -0,0 +1,88 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKMATERIALRIPPLE_P_H
+#define QQUICKMATERIALRIPPLE_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtQuick/qquickitem.h>
+#include <QtGui/qcolor.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickMaterialRipple : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor color READ color WRITE setColor FINAL)
+    Q_PROPERTY(qreal clipRadius READ clipRadius WRITE setClipRadius FINAL)
+    Q_PROPERTY(bool pressed READ isPressed WRITE setPressed FINAL)
+    Q_PROPERTY(bool active READ isActive WRITE setActive FINAL)
+    Q_PROPERTY(QQuickItem *anchor READ anchor WRITE setAnchor FINAL)
+    Q_PROPERTY(Trigger trigger READ trigger WRITE setTrigger FINAL)
+    QML_NAMED_ELEMENT(Ripple)
+    QML_ADDED_IN_VERSION(2, 0)
+
+public:
+    QQuickMaterialRipple(QQuickItem *parent = nullptr);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    qreal clipRadius() const;
+    void setClipRadius(qreal radius);
+
+    bool isActive() const;
+    void setActive(bool active);
+
+    bool isPressed() const;
+    void setPressed(bool pressed);
+
+    enum Trigger { Press, Release };
+    Q_ENUM (Trigger)
+
+    Trigger trigger() const;
+    void setTrigger(Trigger trigger);
+
+    QPointF anchorPoint() const;
+
+    QQuickItem *anchor() const;
+    void setAnchor(QQuickItem *anchor);
+
+    qreal diameter() const;
+
+protected:
+    void itemChange(ItemChange change, const ItemChangeData &data) override;
+    QSGNode *updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) override;
+    void timerEvent(QTimerEvent *event) override;
+
+    void prepareWave();
+    void enterWave();
+    void exitWave();
+
+private:
+    bool m_active = false;
+    bool m_pressed = false;
+    int m_waves = 0;
+    int m_enterDelay = 0;
+    Trigger m_trigger = Press;
+    qreal m_clipRadius = 0.0;
+    QColor m_color;
+    QQuickItem *m_anchor = nullptr;
+};
+
+QT_END_NAMESPACE
+
+QML_DECLARE_TYPE(QQuickMaterialRipple)
+
+#endif // QQUICKMATERIALRIPPLE_P_H
diff --git a/src/quickcontrols/material/qquickmaterialstyle.cpp b/src/quickcontrols/material/qquickmaterialstyle.cpp
new file mode 100644
index 0000000000..dbe7347acc
--- /dev/null
+++ b/src/quickcontrols/material/qquickmaterialstyle.cpp
@@ -0,0 +1,1363 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickmaterialstyle_p.h"
+
+#include <QtCore/qdebug.h>
+#include <QtCore/qsettings.h>
+#include <QtQml/qqmlinfo.h>
+#include <QtQuickControls2/private/qquickstyle_p.h>
+
+QT_BEGIN_NAMESPACE
+
+static const QRgb colors[][14] = {
+    // Red
+    {
+        0xFFFFEBEE, // Shade50
+        0xFFFFCDD2, // Shade100
+        0xFFEF9A9A, // Shade200
+        0xFFE57373, // Shade300
+        0xFFEF5350, // Shade400
+        0xFFF44336, // Shade500
+        0xFFE53935, // Shade600
+        0xFFD32F2F, // Shade700
+        0xFFC62828, // Shade800
+        0xFFB71C1C, // Shade900
+        0xFFFF8A80, // ShadeA100
+        0xFFFF5252, // ShadeA200
+        0xFFFF1744, // ShadeA400
+        0xFFD50000  // ShadeA700
+    },
+    // Pink
+    {
+        0xFFFCE4EC, // Shade50
+        0xFFF8BBD0, // Shade100
+        0xFFF48FB1, // Shade200
+        0xFFF06292, // Shade300
+        0xFFEC407A, // Shade400
+        0xFFE91E63, // Shade500
+        0xFFD81B60, // Shade600
+        0xFFC2185B, // Shade700
+        0xFFAD1457, // Shade800
+        0xFF880E4F, // Shade900
+        0xFFFF80AB, // ShadeA100
+        0xFFFF4081, // ShadeA200
+        0xFFF50057, // ShadeA400
+        0xFFC51162  // ShadeA700
+    },
+    // Purple
+    {
+        0xFFF3E5F5, // Shade50
+        0xFFE1BEE7, // Shade100
+        0xFFCE93D8, // Shade200
+        0xFFBA68C8, // Shade300
+        0xFFAB47BC, // Shade400
+        0xFF9C27B0, // Shade500
+        0xFF8E24AA, // Shade600
+        0xFF7B1FA2, // Shade700
+        0xFF6A1B9A, // Shade800
+        0xFF4A148C, // Shade900
+        0xFFEA80FC, // ShadeA100
+        0xFFE040FB, // ShadeA200
+        0xFFD500F9, // ShadeA400
+        0xFFAA00FF  // ShadeA700
+    },
+    // DeepPurple
+    {
+        0xFFEDE7F6, // Shade50
+        0xFFD1C4E9, // Shade100
+        0xFFB39DDB, // Shade200
+        0xFF9575CD, // Shade300
+        0xFF7E57C2, // Shade400
+        0xFF673AB7, // Shade500
+        0xFF5E35B1, // Shade600
+        0xFF512DA8, // Shade700
+        0xFF4527A0, // Shade800
+        0xFF311B92, // Shade900
+        0xFFB388FF, // ShadeA100
+        0xFF7C4DFF, // ShadeA200
+        0xFF651FFF, // ShadeA400
+        0xFF6200EA  // ShadeA700
+    },
+    // Indigo
+    {
+        0xFFE8EAF6, // Shade50
+        0xFFC5CAE9, // Shade100
+        0xFF9FA8DA, // Shade200
+        0xFF7986CB, // Shade300
+        0xFF5C6BC0, // Shade400
+        0xFF3F51B5, // Shade500
+        0xFF3949AB, // Shade600
+        0xFF303F9F, // Shade700
+        0xFF283593, // Shade800
+        0xFF1A237E, // Shade900
+        0xFF8C9EFF, // ShadeA100
+        0xFF536DFE, // ShadeA200
+        0xFF3D5AFE, // ShadeA400
+        0xFF304FFE  // ShadeA700
+    },
+    // Blue
+    {
+        0xFFE3F2FD, // Shade50
+        0xFFBBDEFB, // Shade100
+        0xFF90CAF9, // Shade200
+        0xFF64B5F6, // Shade300
+        0xFF42A5F5, // Shade400
+        0xFF2196F3, // Shade500
+        0xFF1E88E5, // Shade600
+        0xFF1976D2, // Shade700
+        0xFF1565C0, // Shade800
+        0xFF0D47A1, // Shade900
+        0xFF82B1FF, // ShadeA100
+        0xFF448AFF, // ShadeA200
+        0xFF2979FF, // ShadeA400
+        0xFF2962FF  // ShadeA700
+    },
+    // LightBlue
+    {
+        0xFFE1F5FE, // Shade50
+        0xFFB3E5FC, // Shade100
+        0xFF81D4FA, // Shade200
+        0xFF4FC3F7, // Shade300
+        0xFF29B6F6, // Shade400
+        0xFF03A9F4, // Shade500
+        0xFF039BE5, // Shade600
+        0xFF0288D1, // Shade700
+        0xFF0277BD, // Shade800
+        0xFF01579B, // Shade900
+        0xFF80D8FF, // ShadeA100
+        0xFF40C4FF, // ShadeA200
+        0xFF00B0FF, // ShadeA400
+        0xFF0091EA  // ShadeA700
+    },
+    // Cyan
+    {
+        0xFFE0F7FA, // Shade50
+        0xFFB2EBF2, // Shade100
+        0xFF80DEEA, // Shade200
+        0xFF4DD0E1, // Shade300
+        0xFF26C6DA, // Shade400
+        0xFF00BCD4, // Shade500
+        0xFF00ACC1, // Shade600
+        0xFF0097A7, // Shade700
+        0xFF00838F, // Shade800
+        0xFF006064, // Shade900
+        0xFF84FFFF, // ShadeA100
+        0xFF18FFFF, // ShadeA200
+        0xFF00E5FF, // ShadeA400
+        0xFF00B8D4  // ShadeA700
+    },
+    // Teal
+    {
+        0xFFE0F2F1, // Shade50
+        0xFFB2DFDB, // Shade100
+        0xFF80CBC4, // Shade200
+        0xFF4DB6AC, // Shade300
+        0xFF26A69A, // Shade400
+        0xFF009688, // Shade500
+        0xFF00897B, // Shade600
+        0xFF00796B, // Shade700
+        0xFF00695C, // Shade800
+        0xFF004D40, // Shade900
+        0xFFA7FFEB, // ShadeA100
+        0xFF64FFDA, // ShadeA200
+        0xFF1DE9B6, // ShadeA400
+        0xFF00BFA5  // ShadeA700
+    },
+    // Green
+    {
+        0xFFE8F5E9, // Shade50
+        0xFFC8E6C9, // Shade100
+        0xFFA5D6A7, // Shade200
+        0xFF81C784, // Shade300
+        0xFF66BB6A, // Shade400
+        0xFF4CAF50, // Shade500
+        0xFF43A047, // Shade600
+        0xFF388E3C, // Shade700
+        0xFF2E7D32, // Shade800
+        0xFF1B5E20, // Shade900
+        0xFFB9F6CA, // ShadeA100
+        0xFF69F0AE, // ShadeA200
+        0xFF00E676, // ShadeA400
+        0xFF00C853  // ShadeA700
+    },
+    // LightGreen
+    {
+        0xFFF1F8E9, // Shade50
+        0xFFDCEDC8, // Shade100
+        0xFFC5E1A5, // Shade200
+        0xFFAED581, // Shade300
+        0xFF9CCC65, // Shade400
+        0xFF8BC34A, // Shade500
+        0xFF7CB342, // Shade600
+        0xFF689F38, // Shade700
+        0xFF558B2F, // Shade800
+        0xFF33691E, // Shade900
+        0xFFCCFF90, // ShadeA100
+        0xFFB2FF59, // ShadeA200
+        0xFF76FF03, // ShadeA400
+        0xFF64DD17  // ShadeA700
+    },
+    // Lime
+    {
+        0xFFF9FBE7, // Shade50
+        0xFFF0F4C3, // Shade100
+        0xFFE6EE9C, // Shade200
+        0xFFDCE775, // Shade300
+        0xFFD4E157, // Shade400
+        0xFFCDDC39, // Shade500
+        0xFFC0CA33, // Shade600
+        0xFFAFB42B, // Shade700
+        0xFF9E9D24, // Shade800
+        0xFF827717, // Shade900
+        0xFFF4FF81, // ShadeA100
+        0xFFEEFF41, // ShadeA200
+        0xFFC6FF00, // ShadeA400
+        0xFFAEEA00  // ShadeA700
+    },
+    // Yellow
+    {
+        0xFFFFFDE7, // Shade50
+        0xFFFFF9C4, // Shade100
+        0xFFFFF59D, // Shade200
+        0xFFFFF176, // Shade300
+        0xFFFFEE58, // Shade400
+        0xFFFFEB3B, // Shade500
+        0xFFFDD835, // Shade600
+        0xFFFBC02D, // Shade700
+        0xFFF9A825, // Shade800
+        0xFFF57F17, // Shade900
+        0xFFFFFF8D, // ShadeA100
+        0xFFFFFF00, // ShadeA200
+        0xFFFFEA00, // ShadeA400
+        0xFFFFD600  // ShadeA700
+    },
+    // Amber
+    {
+        0xFFFFF8E1, // Shade50
+        0xFFFFECB3, // Shade100
+        0xFFFFE082, // Shade200
+        0xFFFFD54F, // Shade300
+        0xFFFFCA28, // Shade400
+        0xFFFFC107, // Shade500
+        0xFFFFB300, // Shade600
+        0xFFFFA000, // Shade700
+        0xFFFF8F00, // Shade800
+        0xFFFF6F00, // Shade900
+        0xFFFFE57F, // ShadeA100
+        0xFFFFD740, // ShadeA200
+        0xFFFFC400, // ShadeA400
+        0xFFFFAB00  // ShadeA700
+    },
+    // Orange
+    {
+        0xFFFFF3E0, // Shade50
+        0xFFFFE0B2, // Shade100
+        0xFFFFCC80, // Shade200
+        0xFFFFB74D, // Shade300
+        0xFFFFA726, // Shade400
+        0xFFFF9800, // Shade500
+        0xFFFB8C00, // Shade600
+        0xFFF57C00, // Shade700
+        0xFFEF6C00, // Shade800
+        0xFFE65100, // Shade900
+        0xFFFFD180, // ShadeA100
+        0xFFFFAB40, // ShadeA200
+        0xFFFF9100, // ShadeA400
+        0xFFFF6D00  // ShadeA700
+    },
+    // DeepOrange
+    {
+        0xFFFBE9E7, // Shade50
+        0xFFFFCCBC, // Shade100
+        0xFFFFAB91, // Shade200
+        0xFFFF8A65, // Shade300
+        0xFFFF7043, // Shade400
+        0xFFFF5722, // Shade500
+        0xFFF4511E, // Shade600
+        0xFFE64A19, // Shade700
+        0xFFD84315, // Shade800
+        0xFFBF360C, // Shade900
+        0xFFFF9E80, // ShadeA100
+        0xFFFF6E40, // ShadeA200
+        0xFFFF3D00, // ShadeA400
+        0xFFDD2C00  // ShadeA700
+    },
+    // Brown
+    {
+        0xFFEFEBE9, // Shade50
+        0xFFD7CCC8, // Shade100
+        0xFFBCAAA4, // Shade200
+        0xFFA1887F, // Shade300
+        0xFF8D6E63, // Shade400
+        0xFF795548, // Shade500
+        0xFF6D4C41, // Shade600
+        0xFF5D4037, // Shade700
+        0xFF4E342E, // Shade800
+        0xFF3E2723, // Shade900
+        0xFF000000, // ShadeA100
+        0xFF000000, // ShadeA200
+        0xFF000000, // ShadeA400
+        0xFF000000  // ShadeA700
+    },
+    // Grey
+    {
+        0xFFFAFAFA, // Shade50
+        0xFFF5F5F5, // Shade100
+        0xFFEEEEEE, // Shade200
+        0xFFE0E0E0, // Shade300
+        0xFFBDBDBD, // Shade400
+        0xFF9E9E9E, // Shade500
+        0xFF757575, // Shade600
+        0xFF616161, // Shade700
+        0xFF424242, // Shade800
+        0xFF212121, // Shade900
+        0xFF000000, // ShadeA100
+        0xFF000000, // ShadeA200
+        0xFF000000, // ShadeA400
+        0xFF000000  // ShadeA700
+    },
+    // BlueGrey
+    {
+        0xFFECEFF1, // Shade50
+        0xFFCFD8DC, // Shade100
+        0xFFB0BEC5, // Shade200
+        0xFF90A4AE, // Shade300
+        0xFF78909C, // Shade400
+        0xFF607D8B, // Shade500
+        0xFF546E7A, // Shade600
+        0xFF455A64, // Shade700
+        0xFF37474F, // Shade800
+        0xFF263238, // Shade900
+        0xFF000000, // ShadeA100
+        0xFF000000, // ShadeA200
+        0xFF000000, // ShadeA400
+        0xFF000000  // ShadeA700
+    }
+};
+
+// If no value was inherited from a parent or explicitly set, the "global" values are used.
+// The initial, default values of the globals are hard-coded here, but the environment
+// variables and .conf file override them if specified.
+static QQuickMaterialStyle::Theme globalTheme = QQuickMaterialStyle::Light;
+static uint globalPrimary = QQuickMaterialStyle::Indigo;
+static uint globalAccent = QQuickMaterialStyle::Pink;
+static uint globalForeground = 0xDD000000; // primaryTextColorLight
+static uint globalBackground = 0xFFFAFAFA; // backgroundColorLight
+// These represent whether a global foreground/background was set.
+// Each style's m_hasForeground/m_hasBackground are initialized to these values.
+static bool hasGlobalForeground = false;
+static bool hasGlobalBackground = false;
+// These represent whether or not the global color value was specified as one of the
+// values that QColor accepts, as opposed to one of the pre-defined colors like Red.
+static bool globalPrimaryCustom = false;
+static bool globalAccentCustom = false;
+static bool globalForegroundCustom = true;
+static bool globalBackgroundCustom = true;
+// This is global because:
+// 1) The theme needs access to it to determine font sizes.
+// 2) There can only be one variant used for the whole application.
+static QQuickMaterialStyle::Variant globalVariant = QQuickMaterialStyle::Normal;
+
+static const QRgb backgroundColorLight = 0xFFFAFAFA;
+static const QRgb backgroundColorDark = 0xFF303030;
+static const QRgb dialogColorLight = 0xFFFFFFFF;
+static const QRgb dialogColorDark = 0xFF424242;
+static const QRgb primaryTextColorLight = 0xDD000000;
+static const QRgb primaryTextColorDark = 0xFFFFFFFF;
+static const QRgb secondaryTextColorLight = 0x89000000;
+static const QRgb secondaryTextColorDark = 0xB2FFFFFF;
+static const QRgb hintTextColorLight = 0x60000000;
+static const QRgb hintTextColorDark = 0x4CFFFFFF;
+static const QRgb dividerColorLight = 0x1E000000;
+static const QRgb dividerColorDark = 0x1EFFFFFF;
+static const QRgb iconColorLight = 0x89000000;
+static const QRgb iconColorDark = 0xFFFFFFFF;
+static const QRgb iconDisabledColorLight = 0x42000000;
+static const QRgb iconDisabledColorDark = 0x4CFFFFFF;
+static const QRgb raisedButtonColorLight = 0xFFD6D7D7;
+static const QRgb raisedButtonColorDark = 0x3FCCCCCC;
+static const QRgb raisedButtonDisabledColorLight = dividerColorLight;
+static const QRgb raisedButtonDisabledColorDark = dividerColorDark;
+static const QRgb frameColorLight = hintTextColorLight;
+static const QRgb frameColorDark = hintTextColorDark;
+static const QRgb switchUncheckedTrackColorLight = 0x42000000;
+static const QRgb switchUncheckedTrackColorDark = 0x4CFFFFFF;
+static const QRgb switchDisabledTrackColorLight = 0x1E000000;
+static const QRgb switchDisabledTrackColorDark = 0x19FFFFFF;
+static const QRgb rippleColorLight = 0x10000000;
+static const QRgb rippleColorDark = 0x20FFFFFF;
+static const QRgb spinBoxDisabledIconColorLight = 0xFFCCCCCC;
+static const QRgb spinBoxDisabledIconColorDark = 0xFF666666;
+static const QRgb sliderDisabledColorLight = 0xFF9E9E9E;
+static const QRgb sliderDisabledColorDark = 0xFF616161;
+
+static QQuickMaterialStyle::Theme effectiveTheme(QQuickMaterialStyle::Theme theme)
+{
+    if (theme == QQuickMaterialStyle::System)
+        theme = QQuickStylePrivate::isDarkSystemTheme() ? QQuickMaterialStyle::Dark : QQuickMaterialStyle::Light;
+    return theme;
+}
+
+QQuickMaterialStyle::QQuickMaterialStyle(QObject *parent) : QQuickAttachedPropertyPropagator(parent),
+    m_customPrimary(globalPrimaryCustom),
+    m_customAccent(globalAccentCustom),
+    m_customForeground(globalForegroundCustom),
+    m_customBackground(globalBackgroundCustom),
+    m_hasForeground(hasGlobalForeground),
+    m_hasBackground(hasGlobalBackground),
+    m_theme(globalTheme),
+    m_primary(globalPrimary),
+    m_accent(globalAccent),
+    m_foreground(globalForeground),
+    m_background(globalBackground)
+{
+    QQuickAttachedPropertyPropagator::initialize();
+}
+
+QQuickMaterialStyle *QQuickMaterialStyle::qmlAttachedProperties(QObject *object)
+{
+    return new QQuickMaterialStyle(object);
+}
+
+QQuickMaterialStyle::Theme QQuickMaterialStyle::theme() const
+{
+    return m_theme;
+}
+
+void QQuickMaterialStyle::setTheme(Theme theme)
+{
+    if (theme == System)
+        theme = QQuickStylePrivate::isDarkSystemTheme() ? Dark : Light;
+
+    m_explicitTheme = true;
+    if (m_theme == theme)
+        return;
+
+    m_theme = theme;
+    propagateTheme();
+    themeChange();
+    if (!m_customAccent)
+        accentChange();
+    if (!m_hasBackground)
+        backgroundChange();
+    if (!m_hasForeground)
+        foregroundChange();
+}
+
+void QQuickMaterialStyle::inheritTheme(Theme theme)
+{
+    if (m_explicitTheme || m_theme == theme)
+        return;
+
+    m_theme = theme;
+    propagateTheme();
+    themeChange();
+    if (!m_customAccent)
+        accentChange();
+    if (!m_hasBackground)
+        backgroundChange();
+    if (!m_hasForeground)
+        foregroundChange();
+}
+
+void QQuickMaterialStyle::propagateTheme()
+{
+    const auto styles = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : styles) {
+        QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(child);
+        if (material)
+            material->inheritTheme(m_theme);
+    }
+}
+
+void QQuickMaterialStyle::resetTheme()
+{
+    if (!m_explicitTheme)
+        return;
+
+    m_explicitTheme = false;
+    QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(attachedParent());
+    inheritTheme(material ? material->theme() : globalTheme);
+}
+
+void QQuickMaterialStyle::themeChange()
+{
+    emit themeChanged();
+    emit themeOrAccentChanged();
+    emit primaryHighlightedTextColor();
+    emit buttonColorChanged();
+    emit buttonDisabledColorChanged();
+    emit dialogColorChanged();
+    emit tooltipColorChanged();
+    emit toolBarColorChanged();
+    emit toolTextColorChanged();
+}
+
+QVariant QQuickMaterialStyle::primary() const
+{
+    return primaryColor();
+}
+
+void QQuickMaterialStyle::setPrimary(const QVariant &var)
+{
+    QRgb primary = 0;
+    bool custom = false;
+    if (!variantToRgba(var, "primary", &primary, &custom))
+        return;
+
+    m_explicitPrimary = true;
+    if (m_primary == primary)
+        return;
+
+    m_customPrimary = custom;
+    m_primary = primary;
+    propagatePrimary();
+    primaryChange();
+}
+
+void QQuickMaterialStyle::inheritPrimary(uint primary, bool custom)
+{
+    if (m_explicitPrimary || m_primary == primary)
+        return;
+
+    m_customPrimary = custom;
+    m_primary = primary;
+    propagatePrimary();
+    primaryChange();
+}
+
+void QQuickMaterialStyle::propagatePrimary()
+{
+    const auto styles = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : styles) {
+        QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(child);
+        if (material)
+            material->inheritPrimary(m_primary, m_customPrimary);
+    }
+}
+
+void QQuickMaterialStyle::resetPrimary()
+{
+    if (!m_explicitPrimary)
+        return;
+
+    m_customPrimary = false;
+    m_explicitPrimary = false;
+    QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(attachedParent());
+    if (material)
+        inheritPrimary(material->m_primary, material->m_customPrimary);
+    else
+        inheritPrimary(globalPrimary, false);
+}
+
+void QQuickMaterialStyle::primaryChange()
+{
+    emit primaryChanged();
+    emit toolBarColorChanged();
+    emit toolTextColorChanged();
+}
+
+QVariant QQuickMaterialStyle::accent() const
+{
+    return accentColor();
+}
+
+void QQuickMaterialStyle::setAccent(const QVariant &var)
+{
+    QRgb accent = 0;
+    bool custom = false;
+    if (!variantToRgba(var, "accent", &accent, &custom))
+        return;
+
+    m_explicitAccent = true;
+    if (m_accent == accent)
+        return;
+
+    m_customAccent = custom;
+    m_accent = accent;
+    propagateAccent();
+    accentChange();
+}
+
+void QQuickMaterialStyle::inheritAccent(uint accent, bool custom)
+{
+    if (m_explicitAccent || m_accent == accent)
+        return;
+
+    m_customAccent = custom;
+    m_accent = accent;
+    propagateAccent();
+    accentChange();
+}
+
+void QQuickMaterialStyle::propagateAccent()
+{
+    const auto styles = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : styles) {
+        QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(child);
+        if (material)
+            material->inheritAccent(m_accent, m_customAccent);
+    }
+}
+
+void QQuickMaterialStyle::resetAccent()
+{
+    if (!m_explicitAccent)
+        return;
+
+    m_customAccent = false;
+    m_explicitAccent = false;
+    QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(attachedParent());
+    if (material)
+        inheritAccent(material->m_accent, material->m_customAccent);
+    else
+        inheritAccent(globalAccent, false);
+}
+
+void QQuickMaterialStyle::accentChange()
+{
+    emit accentChanged();
+    emit themeOrAccentChanged();
+    emit buttonColorChanged();
+}
+
+QVariant QQuickMaterialStyle::foreground() const
+{
+    if (!m_hasForeground)
+        return QColor::fromRgba(m_theme == Light ? primaryTextColorLight : primaryTextColorDark);
+    if (m_customForeground)
+        return QColor::fromRgba(m_foreground);
+    if (m_foreground > BlueGrey)
+        return QColor();
+    return QColor::fromRgba(colors[m_foreground][Shade500]);
+}
+
+void QQuickMaterialStyle::setForeground(const QVariant &var)
+{
+    QRgb foreground = 0;
+    bool custom = false;
+    if (!variantToRgba(var, "foreground", &foreground, &custom))
+        return;
+
+    m_hasForeground = true;
+    m_explicitForeground = true;
+    if (m_foreground == foreground)
+        return;
+
+    m_customForeground = custom;
+    m_foreground = foreground;
+    propagateForeground();
+    foregroundChange();
+}
+
+void QQuickMaterialStyle::inheritForeground(uint foreground, bool custom, bool has)
+{
+    if (m_explicitForeground || m_foreground == foreground)
+        return;
+
+    m_hasForeground = has;
+    m_customForeground = custom;
+    m_foreground = foreground;
+    propagateForeground();
+    foregroundChange();
+}
+
+void QQuickMaterialStyle::propagateForeground()
+{
+    const auto styles = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : styles) {
+        QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(child);
+        if (material)
+            material->inheritForeground(m_foreground, m_customForeground, m_hasForeground);
+    }
+}
+
+void QQuickMaterialStyle::resetForeground()
+{
+    if (!m_explicitForeground)
+        return;
+
+    m_hasForeground = false;
+    m_customForeground = false;
+    m_explicitForeground = false;
+    QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(attachedParent());
+    inheritForeground(material ? material->m_foreground : globalForeground, true, material ? material->m_hasForeground : false);
+}
+
+void QQuickMaterialStyle::foregroundChange()
+{
+    emit foregroundChanged();
+    emit primaryHighlightedTextColorChanged();
+    // TODO: This causes a binding loop: see QTBUG-85699 and the comments on its fix
+//    emit toolTextColorChanged();
+}
+
+QVariant QQuickMaterialStyle::background() const
+{
+    return backgroundColor();
+}
+
+void QQuickMaterialStyle::setBackground(const QVariant &var)
+{
+    QRgb background = 0;
+    bool custom = false;
+    if (!variantToRgba(var, "background", &background, &custom))
+        return;
+
+    m_hasBackground = true;
+    m_explicitBackground = true;
+    if (m_background == background)
+        return;
+
+    m_customBackground = custom;
+    m_background = background;
+    propagateBackground();
+    backgroundChange();
+}
+
+void QQuickMaterialStyle::inheritBackground(uint background, bool custom, bool has)
+{
+    if (m_explicitBackground || m_background == background)
+        return;
+
+    m_hasBackground = has;
+    m_customBackground = custom;
+    m_background = background;
+    propagateBackground();
+    backgroundChange();
+}
+
+void QQuickMaterialStyle::propagateBackground()
+{
+    const auto styles = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : styles) {
+        QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(child);
+        if (material)
+            material->inheritBackground(m_background, m_customBackground, m_hasBackground);
+    }
+}
+
+void QQuickMaterialStyle::resetBackground()
+{
+    if (!m_explicitBackground)
+        return;
+
+    m_hasBackground = false;
+    m_customBackground = false;
+    m_explicitBackground = false;
+    QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(attachedParent());
+    inheritBackground(material ? material->m_background : globalBackground, true, material ? material->m_hasBackground : false);
+}
+
+void QQuickMaterialStyle::backgroundChange()
+{
+    emit backgroundChanged();
+    emit buttonColorChanged();
+    emit dialogColorChanged();
+    emit tooltipColorChanged();
+    emit toolBarColorChanged();
+}
+
+int QQuickMaterialStyle::elevation() const
+{
+    return m_elevation;
+}
+
+void QQuickMaterialStyle::setElevation(int elevation)
+{
+    if (m_elevation == elevation)
+        return;
+
+    m_elevation = elevation;
+    elevationChange();
+}
+
+void QQuickMaterialStyle::resetElevation()
+{
+    setElevation(0);
+}
+
+void QQuickMaterialStyle::elevationChange()
+{
+    emit elevationChanged();
+    emit buttonDisabledColorChanged();
+}
+
+QColor QQuickMaterialStyle::primaryColor() const
+{
+    if (m_customPrimary)
+        return QColor::fromRgba(m_primary);
+    if (m_primary > BlueGrey)
+        return QColor();
+    return colors[m_primary][Shade500];
+}
+
+QColor QQuickMaterialStyle::accentColor(Shade shade) const
+{
+    if (m_customAccent)
+        return shade == themeShade() ? QColor::fromRgba(m_accent)
+                                     : this->shade(QColor::fromRgba(m_accent), shade);
+    if (m_accent > BlueGrey)
+        return QColor();
+    return colors[m_accent][shade];
+}
+
+QColor QQuickMaterialStyle::accentColor() const
+{
+    return accentColor(themeShade());
+}
+
+QColor QQuickMaterialStyle::backgroundColor(Shade shade) const
+{
+    if (!m_hasBackground)
+        return QColor::fromRgba(m_theme == Light ? backgroundColorLight : backgroundColorDark);
+    if (m_customBackground)
+        return shade == themeShade() ? QColor::fromRgba(m_background)
+                                     : this->shade(QColor::fromRgba(m_background), shade);
+    if (m_background > BlueGrey)
+        return QColor();
+    return colors[m_background][shade];
+}
+
+QColor QQuickMaterialStyle::backgroundColor() const
+{
+    return backgroundColor(themeShade());
+}
+
+QColor QQuickMaterialStyle::primaryTextColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? primaryTextColorLight : primaryTextColorDark);
+}
+
+QColor QQuickMaterialStyle::primaryHighlightedTextColor() const
+{
+    if (m_explicitForeground)
+        return primaryTextColor();
+    return QColor::fromRgba(primaryTextColorDark);
+}
+
+QColor QQuickMaterialStyle::secondaryTextColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? secondaryTextColorLight : secondaryTextColorDark);
+}
+
+QColor QQuickMaterialStyle::hintTextColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? hintTextColorLight : hintTextColorDark);
+}
+
+QColor QQuickMaterialStyle::textSelectionColor() const
+{
+    QColor color = accentColor();
+    color.setAlphaF(0.4f);
+    return color;
+}
+
+QColor QQuickMaterialStyle::dropShadowColor() const
+{
+    return QColor::fromRgba(0x40000000);
+}
+
+QColor QQuickMaterialStyle::dividerColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? dividerColorLight : dividerColorDark);
+}
+
+QColor QQuickMaterialStyle::iconColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? iconColorLight : iconColorDark);
+}
+
+QColor QQuickMaterialStyle::iconDisabledColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? iconDisabledColorLight : iconDisabledColorDark);
+}
+
+QColor QQuickMaterialStyle::buttonColor(bool highlighted, bool checked) const
+{
+    Shade shade = themeShade();
+
+    QColor color = Qt::transparent;
+
+    if (m_explicitBackground) {
+        color = backgroundColor(shade);
+    } else if (highlighted) {
+        if (m_theme == Light) {
+            color = accentColor(shade);
+            if (checked)
+                color = color.lighter();
+        } else {
+            // A highlighted + checked button should become darker.
+            color = accentColor(checked ? Shade100 : shade);
+        }
+    } else if (elevation() > 0) {
+        color = QColor::fromRgba(m_theme == Light ? raisedButtonColorLight
+                                                  : raisedButtonColorDark);
+    }
+
+    return color;
+}
+
+QColor QQuickMaterialStyle::buttonColor() const
+{
+    return buttonColor(false);
+}
+
+QColor QQuickMaterialStyle::buttonDisabledColor() const
+{
+    if (elevation() > 0) {
+        return QColor::fromRgba(m_theme == Light ? raisedButtonDisabledColorLight
+                                                 : raisedButtonDisabledColorDark);
+    } else {
+        return Qt::transparent;
+    }
+}
+
+QColor QQuickMaterialStyle::highlightedButtonColor() const
+{
+    return buttonColor(true);
+}
+
+QColor QQuickMaterialStyle::highlightedCheckedButtonColor() const
+{
+    return buttonColor(true, true);
+}
+
+QColor QQuickMaterialStyle::frameColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? frameColorLight : frameColorDark);
+}
+
+QColor QQuickMaterialStyle::rippleColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? rippleColorLight : rippleColorDark);
+}
+
+QColor QQuickMaterialStyle::highlightedRippleColor() const
+{
+    QColor pressColor = accentColor();
+    pressColor.setAlpha(m_theme == Light ? 30 : 50);
+    return pressColor;
+}
+
+QColor QQuickMaterialStyle::switchUncheckedTrackColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? switchUncheckedTrackColorLight : switchUncheckedTrackColorDark);
+}
+
+QColor QQuickMaterialStyle::switchCheckedTrackColor() const
+{
+    QColor trackColor(accentColor());
+    trackColor.setAlphaF(0.5);
+    return trackColor;
+}
+
+QColor QQuickMaterialStyle::switchUncheckedHandleColor() const
+{
+    return m_theme == Light ? color(Grey, Shade50) : color(Grey, Shade400);
+}
+
+QColor QQuickMaterialStyle::switchCheckedHandleColor() const
+{
+    return m_theme == Light ? accentColor() : shade(accentColor(), Shade200);
+}
+
+QColor QQuickMaterialStyle::switchDisabledTrackColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? switchDisabledTrackColorLight : switchDisabledTrackColorDark);
+}
+
+QColor QQuickMaterialStyle::switchDisabledHandleColor() const
+{
+    return m_theme == Light ? color(Grey, Shade400) : color(Grey, Shade800);
+}
+
+QColor QQuickMaterialStyle::scrollBarColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? 0x40000000 : 0x40FFFFFF);
+}
+
+QColor QQuickMaterialStyle::scrollBarHoveredColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? 0x60000000 : 0x60FFFFFF);
+}
+
+QColor QQuickMaterialStyle::scrollBarPressedColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? 0x80000000 : 0x80FFFFFF);
+}
+
+QColor QQuickMaterialStyle::dialogColor() const
+{
+    if (m_hasBackground)
+        return backgroundColor();
+    return QColor::fromRgba(m_theme == Light ? dialogColorLight : dialogColorDark);
+}
+
+QColor QQuickMaterialStyle::backgroundDimColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? 0x99303030 : 0x99fafafa);
+}
+
+QColor QQuickMaterialStyle::listHighlightColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? 0x1e000000 : 0x1effffff);
+}
+
+QColor QQuickMaterialStyle::tooltipColor() const
+{
+    if (m_explicitBackground)
+        return backgroundColor();
+    return color(Grey, Shade700);
+}
+
+QColor QQuickMaterialStyle::toolBarColor() const
+{
+    if (m_explicitBackground)
+        return backgroundColor();
+    return primaryColor();
+}
+
+QColor QQuickMaterialStyle::toolTextColor() const
+{
+    if (m_hasForeground || m_customPrimary)
+        return primaryTextColor();
+
+    switch (m_primary) {
+    case Red:
+    case Pink:
+    case Purple:
+    case DeepPurple:
+    case Indigo:
+    case Blue:
+    case Teal:
+    case DeepOrange:
+    case Brown:
+    case BlueGrey:
+        return QColor::fromRgba(primaryTextColorDark);
+
+    case LightBlue:
+    case Cyan:
+    case Green:
+    case LightGreen:
+    case Lime:
+    case Yellow:
+    case Amber:
+    case Orange:
+    case Grey:
+        return QColor::fromRgba(primaryTextColorLight);
+
+    default:
+        break;
+    }
+
+    return primaryTextColor();
+}
+
+QColor QQuickMaterialStyle::spinBoxDisabledIconColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? spinBoxDisabledIconColorLight : spinBoxDisabledIconColorDark);
+}
+
+QColor QQuickMaterialStyle::sliderDisabledColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? sliderDisabledColorLight : sliderDisabledColorDark);
+}
+
+QColor QQuickMaterialStyle::color(QQuickMaterialStyle::Color color, QQuickMaterialStyle::Shade shade) const
+{
+    int count = sizeof(colors) / sizeof(colors[0]);
+    if (color < 0 || color >= count)
+        return QColor();
+
+    count = sizeof(colors[0]) / sizeof(colors[0][0]);
+    if (shade < 0 || shade >= count)
+        return QColor();
+
+    return colors[color][shade];
+}
+
+static QColor lighterShade(const QColor &color, qreal amount)
+{
+    QColor hsl = color.toHsl();
+    hsl.setHslF(hsl.hueF(), hsl.saturationF(), qBound<qreal>(0.0, hsl.lightnessF() + amount, 1.0), color.alphaF());
+    return hsl.convertTo(color.spec());
+}
+
+static QColor darkerShade(const QColor &color, qreal amount)
+{
+    QColor hsl = color.toHsl();
+    hsl.setHslF(hsl.hueF(), hsl.saturationF(), qBound<qreal>(0.0, hsl.lightnessF() - amount, 1.0), color.alphaF());
+    return hsl.convertTo(color.spec());
+}
+
+QQuickMaterialStyle::Shade QQuickMaterialStyle::themeShade() const
+{
+    return m_theme == Light ? Shade500 : Shade200;
+}
+
+/*
+ * The following lightness values originate from the Material Design Color Generator project.
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 mbitson
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+// Returns the same color, if shade == themeShade()
+QColor QQuickMaterialStyle::shade(const QColor &color, Shade shade) const
+{
+    switch (shade) {
+    case Shade50:
+        return lighterShade(color, m_theme == Light ? 0.52 : 0.26);
+    case Shade100:
+        return lighterShade(color, m_theme == Light ? 0.37 : 0.11);
+    case Shade200:
+        return m_theme == Light ? lighterShade(color, 0.26) : color;
+    case Shade300:
+        return m_theme == Light ? lighterShade(color, 0.12) : darkerShade(color, 0.14);
+    case Shade400:
+        return m_theme == Light ? lighterShade(color, 0.06) : darkerShade(color, 0.20);
+    case Shade500:
+        return m_theme == Light ? color : darkerShade(color, 0.26);
+    case Shade600:
+        return darkerShade(color, m_theme == Light ? 0.06 : 0.32);
+    case Shade700:
+        return darkerShade(color, m_theme == Light ? 0.12 : 0.38);
+    case Shade800:
+        return darkerShade(color, m_theme == Light ? 0.18 : 0.44);
+    case Shade900:
+        return darkerShade(color, m_theme == Light ? 0.24 : 0.50);
+    case ShadeA100:
+        return lighterShade(color, m_theme == Light ? 0.54 : 0.28);
+    case ShadeA200:
+        return lighterShade(color, m_theme == Light ? 0.37 : 0.11);
+    case ShadeA400:
+        return m_theme == Light ? lighterShade(color, 0.06) : darkerShade(color, 0.20);
+    case ShadeA700:
+        return darkerShade(color, m_theme == Light ? 0.12 : 0.38);
+    default:
+        Q_UNREACHABLE_RETURN(QColor());
+    }
+}
+
+int QQuickMaterialStyle::touchTarget() const
+{
+    // https://material.io/guidelines/components/buttons.html#buttons-style
+    return globalVariant == Dense ? 44 : 48;
+}
+
+int QQuickMaterialStyle::buttonHeight() const
+{
+    // https://material.io/guidelines/components/buttons.html#buttons-style
+    return globalVariant == Dense ? 32 : 36;
+}
+
+int QQuickMaterialStyle::delegateHeight() const
+{
+    // https://material.io/guidelines/components/lists.html#lists-specs
+    return globalVariant == Dense ? 40 : 48;
+}
+
+int QQuickMaterialStyle::dialogButtonBoxHeight() const
+{
+    return globalVariant == Dense ? 48 : 52;
+}
+
+int QQuickMaterialStyle::frameVerticalPadding() const
+{
+    return globalVariant == Dense ? 8 : 12;
+}
+
+int QQuickMaterialStyle::menuItemHeight() const
+{
+    // https://material.io/guidelines/components/menus.html#menus-simple-menus
+    return globalVariant == Dense ? 32 : 48;
+}
+
+int QQuickMaterialStyle::menuItemVerticalPadding() const
+{
+    return globalVariant == Dense ? 8 : 12;
+}
+
+int QQuickMaterialStyle::switchDelegateVerticalPadding() const
+{
+    // SwitchDelegate's indicator is much larger than the others due to the shadow,
+    // so we must reduce its padding to ensure its implicitHeight is 40 when dense.
+    return globalVariant == Dense ? 4 : 8;
+}
+
+int QQuickMaterialStyle::tooltipHeight() const
+{
+    // https://material.io/guidelines/components/tooltips.html
+    return globalVariant == Dense ? 22 : 32;
+}
+
+QQuickMaterialStyle::Variant QQuickMaterialStyle::variant()
+{
+    return globalVariant;
+}
+
+template <typename Enum>
+static Enum toEnumValue(const QByteArray &value, bool *ok)
+{
+    QMetaEnum enumeration = QMetaEnum::fromType<Enum>();
+    return static_cast<Enum>(enumeration.keyToValue(value, ok));
+}
+
+static QByteArray resolveSetting(const QByteArray &env, const QSharedPointer<QSettings> &settings, const QString &name)
+{
+    QByteArray value = qgetenv(env);
+#if QT_CONFIG(settings)
+    if (value.isNull() && !settings.isNull())
+        value = settings->value(name).toByteArray();
+#endif
+    return value;
+}
+
+void QQuickMaterialStyle::initGlobals()
+{
+    QSharedPointer<QSettings> settings = QQuickStylePrivate::settings(QStringLiteral("Material"));
+
+    bool ok = false;
+    QByteArray themeValue = resolveSetting("QT_QUICK_CONTROLS_MATERIAL_THEME", settings, QStringLiteral("Theme"));
+    Theme themeEnum = toEnumValue<Theme>(themeValue, &ok);
+    if (ok)
+        globalTheme = effectiveTheme(themeEnum);
+    else if (!themeValue.isEmpty())
+        qWarning().nospace().noquote() << "Material: unknown theme value: " << themeValue;
+
+    QByteArray variantValue = resolveSetting("QT_QUICK_CONTROLS_MATERIAL_VARIANT", settings, QStringLiteral("Variant"));
+    Variant variantEnum = toEnumValue<Variant>(variantValue, &ok);
+    if (ok)
+        globalVariant = variantEnum;
+    else if (!variantValue.isEmpty())
+        qWarning().nospace().noquote() << "Material: unknown variant value: " << variantValue;
+
+    QByteArray primaryValue = resolveSetting("QT_QUICK_CONTROLS_MATERIAL_PRIMARY", settings, QStringLiteral("Primary"));
+    Color primaryEnum = toEnumValue<Color>(primaryValue, &ok);
+    if (ok) {
+        globalPrimaryCustom = false;
+        globalPrimary = primaryEnum;
+    } else {
+        QColor color = QColor::fromString(primaryValue);
+        if (color.isValid()) {
+            globalPrimaryCustom = true;
+            globalPrimary = color.rgba();
+        } else if (!primaryValue.isEmpty()) {
+            qWarning().nospace().noquote() << "Material: unknown primary value: " << primaryValue;
+        }
+    }
+
+    QByteArray accentValue = resolveSetting("QT_QUICK_CONTROLS_MATERIAL_ACCENT", settings, QStringLiteral("Accent"));
+    Color accentEnum = toEnumValue<Color>(accentValue, &ok);
+    if (ok) {
+        globalAccentCustom = false;
+        globalAccent = accentEnum;
+    } else if (!accentValue.isEmpty()) {
+        QColor color = QColor::fromString(accentValue);
+        if (color.isValid()) {
+            globalAccentCustom = true;
+            globalAccent = color.rgba();
+        } else {
+            qWarning().nospace().noquote() << "Material: unknown accent value: " << accentValue;
+        }
+    }
+
+    QByteArray foregroundValue = resolveSetting("QT_QUICK_CONTROLS_MATERIAL_FOREGROUND", settings, QStringLiteral("Foreground"));
+    Color foregroundEnum = toEnumValue<Color>(foregroundValue, &ok);
+    if (ok) {
+        globalForegroundCustom = false;
+        globalForeground = foregroundEnum;
+        hasGlobalForeground = true;
+    } else if (!foregroundValue.isEmpty()) {
+        QColor color = QColor::fromString(foregroundValue);
+        if (color.isValid()) {
+            globalForegroundCustom = true;
+            globalForeground = color.rgba();
+            hasGlobalForeground = true;
+        } else {
+            qWarning().nospace().noquote() << "Material: unknown foreground value: " << foregroundValue;
+        }
+    }
+
+    QByteArray backgroundValue = resolveSetting("QT_QUICK_CONTROLS_MATERIAL_BACKGROUND", settings, QStringLiteral("Background"));
+    Color backgroundEnum = toEnumValue<Color>(backgroundValue, &ok);
+    if (ok) {
+        globalBackgroundCustom = false;
+        globalBackground = backgroundEnum;
+        hasGlobalBackground = true;
+    } else if (!backgroundValue.isEmpty()) {
+        QColor color = QColor::fromString(backgroundValue);
+        if (color.isValid()) {
+            globalBackgroundCustom = true;
+            globalBackground = color.rgba();
+            hasGlobalBackground = true;
+        } else {
+            qWarning().nospace().noquote() << "Material: unknown background value: " << backgroundValue;
+        }
+    }
+}
+
+void QQuickMaterialStyle::attachedParentChange(QQuickAttachedPropertyPropagator *newParent, QQuickAttachedPropertyPropagator *oldParent)
+{
+    Q_UNUSED(oldParent);
+    QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(newParent);
+    if (material) {
+        inheritPrimary(material->m_primary, material->m_customPrimary);
+        inheritAccent(material->m_accent, material->m_customAccent);
+        inheritForeground(material->m_foreground, material->m_customForeground, material->m_hasForeground);
+        inheritBackground(material->m_background, material->m_customBackground, material->m_hasBackground);
+        inheritTheme(material->theme());
+    }
+}
+
+bool QQuickMaterialStyle::variantToRgba(const QVariant &var, const char *name, QRgb *rgba, bool *custom) const
+{
+    *custom = false;
+    if (var.metaType().id() == QMetaType::Int) {
+        int val = var.toInt();
+        if (val > BlueGrey) {
+            qmlWarning(parent()) << "unknown Material." << name << " value: " << val;
+            return false;
+        }
+        *rgba = val;
+    } else {
+        int val = QMetaEnum::fromType<Color>().keyToValue(var.toByteArray());
+        if (val != -1) {
+            *rgba = val;
+        } else {
+            QColor color = QColor::fromString(var.toString());
+            if (!color.isValid()) {
+                qmlWarning(parent()) << "unknown Material." << name << " value: " << var.toString();
+                return false;
+            }
+            *custom = true;
+            *rgba = color.rgba();
+        }
+    }
+    return true;
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickmaterialstyle_p.cpp"
diff --git a/src/quickcontrols/material/qquickmaterialstyle_p.h b/src/quickcontrols/material/qquickmaterialstyle_p.h
new file mode 100644
index 0000000000..99344a6192
--- /dev/null
+++ b/src/quickcontrols/material/qquickmaterialstyle_p.h
@@ -0,0 +1,302 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKMATERIALSTYLE_P_H
+#define QQUICKMATERIALSTYLE_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtGui/qcolor.h>
+#include <QtQml/qqml.h>
+#include <QtQuickControls2/qquickattachedpropertypropagator.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickMaterialStyle : public QQuickAttachedPropertyPropagator
+{
+    Q_OBJECT
+    Q_PROPERTY(Theme theme READ theme WRITE setTheme RESET resetTheme NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QVariant primary READ primary WRITE setPrimary RESET resetPrimary NOTIFY primaryChanged FINAL)
+    Q_PROPERTY(QVariant accent READ accent WRITE setAccent RESET resetAccent NOTIFY accentChanged FINAL)
+    Q_PROPERTY(QVariant foreground READ foreground WRITE setForeground RESET resetForeground NOTIFY foregroundChanged FINAL)
+    Q_PROPERTY(QVariant background READ background WRITE setBackground RESET resetBackground NOTIFY backgroundChanged FINAL)
+    Q_PROPERTY(int elevation READ elevation WRITE setElevation RESET resetElevation NOTIFY elevationChanged FINAL)
+
+    Q_PROPERTY(QColor primaryColor READ primaryColor NOTIFY primaryChanged FINAL) // TODO: remove?
+    Q_PROPERTY(QColor accentColor READ accentColor NOTIFY accentChanged FINAL) // TODO: remove?
+    Q_PROPERTY(QColor backgroundColor READ backgroundColor NOTIFY backgroundChanged FINAL)
+    Q_PROPERTY(QColor primaryTextColor READ primaryTextColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor primaryHighlightedTextColor READ primaryHighlightedTextColor NOTIFY primaryHighlightedTextColorChanged FINAL)
+    Q_PROPERTY(QColor secondaryTextColor READ secondaryTextColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor hintTextColor READ hintTextColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor textSelectionColor READ textSelectionColor NOTIFY themeOrAccentChanged FINAL)
+    Q_PROPERTY(QColor dropShadowColor READ dropShadowColor CONSTANT FINAL)
+    Q_PROPERTY(QColor dividerColor READ dividerColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor iconColor READ iconColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor iconDisabledColor READ iconDisabledColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor buttonColor READ buttonColor NOTIFY buttonColorChanged FINAL)
+    Q_PROPERTY(QColor buttonDisabledColor READ buttonDisabledColor NOTIFY buttonDisabledColorChanged FINAL)
+    Q_PROPERTY(QColor highlightedButtonColor READ highlightedButtonColor NOTIFY buttonColorChanged FINAL)
+    Q_PROPERTY(QColor highlightedCheckedButtonColor READ highlightedCheckedButtonColor NOTIFY buttonColorChanged FINAL REVISION(6, 2))
+    Q_PROPERTY(QColor frameColor READ frameColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor rippleColor READ rippleColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor highlightedRippleColor READ highlightedRippleColor NOTIFY themeOrAccentChanged FINAL)
+    Q_PROPERTY(QColor switchUncheckedTrackColor READ switchUncheckedTrackColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor switchCheckedTrackColor READ switchCheckedTrackColor NOTIFY themeOrAccentChanged FINAL)
+    Q_PROPERTY(QColor switchUncheckedHandleColor READ switchUncheckedHandleColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor switchCheckedHandleColor READ switchCheckedHandleColor NOTIFY themeOrAccentChanged FINAL)
+    Q_PROPERTY(QColor switchDisabledTrackColor READ switchDisabledTrackColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor switchDisabledHandleColor READ switchDisabledHandleColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor scrollBarColor READ scrollBarColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor scrollBarHoveredColor READ scrollBarHoveredColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor scrollBarPressedColor READ scrollBarPressedColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor dialogColor READ dialogColor NOTIFY dialogColorChanged FINAL)
+    Q_PROPERTY(QColor backgroundDimColor READ backgroundDimColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor listHighlightColor READ listHighlightColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor tooltipColor READ tooltipColor NOTIFY tooltipColorChanged FINAL)
+    Q_PROPERTY(QColor toolBarColor READ toolBarColor NOTIFY toolBarColorChanged FINAL)
+    Q_PROPERTY(QColor toolTextColor READ toolTextColor NOTIFY toolTextColorChanged FINAL)
+    Q_PROPERTY(QColor spinBoxDisabledIconColor READ spinBoxDisabledIconColor NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QColor sliderDisabledColor READ sliderDisabledColor NOTIFY themeChanged FINAL REVISION(2, 15))
+
+    Q_PROPERTY(int touchTarget READ touchTarget CONSTANT FINAL)
+    Q_PROPERTY(int buttonHeight READ buttonHeight CONSTANT FINAL)
+    Q_PROPERTY(int delegateHeight READ delegateHeight CONSTANT FINAL)
+    Q_PROPERTY(int dialogButtonBoxHeight READ dialogButtonBoxHeight CONSTANT FINAL)
+    Q_PROPERTY(int frameVerticalPadding READ frameVerticalPadding CONSTANT FINAL)
+    Q_PROPERTY(int menuItemHeight READ menuItemHeight CONSTANT FINAL)
+    Q_PROPERTY(int menuItemVerticalPadding READ menuItemVerticalPadding CONSTANT FINAL)
+    Q_PROPERTY(int switchDelegateVerticalPadding READ switchDelegateVerticalPadding CONSTANT FINAL)
+    Q_PROPERTY(int tooltipHeight READ tooltipHeight CONSTANT FINAL)
+
+    QML_NAMED_ELEMENT(Material)
+    QML_ATTACHED(QQuickMaterialStyle)
+    QML_UNCREATABLE("")
+    QML_ADDED_IN_VERSION(2, 0)
+
+public:
+    enum Theme {
+        Light,
+        Dark,
+        System
+    };
+
+    enum Variant {
+        Normal,
+        Dense
+    };
+
+    enum Color {
+        Red,
+        Pink,
+        Purple,
+        DeepPurple,
+        Indigo,
+        Blue,
+        LightBlue,
+        Cyan,
+        Teal,
+        Green,
+        LightGreen,
+        Lime,
+        Yellow,
+        Amber,
+        Orange,
+        DeepOrange,
+        Brown,
+        Grey,
+        BlueGrey
+    };
+
+    enum Shade {
+        Shade50,
+        Shade100,
+        Shade200,
+        Shade300,
+        Shade400,
+        Shade500,
+        Shade600,
+        Shade700,
+        Shade800,
+        Shade900,
+        ShadeA100,
+        ShadeA200,
+        ShadeA400,
+        ShadeA700,
+    };
+
+    Q_ENUM(Theme)
+    Q_ENUM(Variant)
+    Q_ENUM(Color)
+    Q_ENUM(Shade)
+
+    explicit QQuickMaterialStyle(QObject *parent = nullptr);
+
+    static QQuickMaterialStyle *qmlAttachedProperties(QObject *object);
+
+    Theme theme() const;
+    void setTheme(Theme theme);
+    void inheritTheme(Theme theme);
+    void propagateTheme();
+    void resetTheme();
+    void themeChange();
+
+    QVariant primary() const;
+    void setPrimary(const QVariant &accent);
+    void inheritPrimary(uint primary, bool custom);
+    void propagatePrimary();
+    void resetPrimary();
+    void primaryChange();
+
+    QVariant accent() const;
+    void setAccent(const QVariant &accent);
+    void inheritAccent(uint accent, bool custom);
+    void propagateAccent();
+    void resetAccent();
+    void accentChange();
+
+    QVariant foreground() const;
+    void setForeground(const QVariant &foreground);
+    void inheritForeground(uint foreground, bool custom, bool has);
+    void propagateForeground();
+    void resetForeground();
+    void foregroundChange();
+
+    QVariant background() const;
+    void setBackground(const QVariant &background);
+    void inheritBackground(uint background, bool custom, bool has);
+    void propagateBackground();
+    void resetBackground();
+    void backgroundChange();
+
+    int elevation() const;
+    void setElevation(int elevation);
+    void resetElevation();
+    void elevationChange();
+
+    QColor primaryColor() const;
+    QColor accentColor() const;
+    QColor backgroundColor() const;
+    QColor primaryTextColor() const;
+    QColor primaryHighlightedTextColor() const;
+    QColor secondaryTextColor() const;
+    QColor hintTextColor() const;
+    QColor textSelectionColor() const;
+    QColor dropShadowColor() const;
+    QColor dividerColor() const;
+    QColor iconColor() const;
+    QColor iconDisabledColor() const;
+    QColor buttonColor() const;
+    QColor buttonDisabledColor() const;
+    QColor highlightedButtonColor() const;
+    QColor highlightedCheckedButtonColor() const;
+    QColor highlightedButtonDisabledColor() const;
+    QColor frameColor() const;
+    QColor rippleColor() const;
+    QColor highlightedRippleColor() const;
+    QColor switchUncheckedTrackColor() const;
+    QColor switchCheckedTrackColor() const;
+    QColor switchUncheckedHandleColor() const;
+    QColor switchCheckedHandleColor() const;
+    QColor switchDisabledTrackColor() const;
+    QColor switchDisabledHandleColor() const;
+    QColor scrollBarColor() const;
+    QColor scrollBarHoveredColor() const;
+    QColor scrollBarPressedColor() const;
+    QColor dialogColor() const;
+    QColor backgroundDimColor() const;
+    QColor listHighlightColor() const;
+    QColor tooltipColor() const;
+    QColor toolBarColor() const;
+    QColor toolTextColor() const;
+    QColor spinBoxDisabledIconColor() const;
+    QColor sliderDisabledColor() const;
+
+    Q_INVOKABLE QColor color(Color color, Shade shade = Shade500) const;
+    Q_INVOKABLE QColor shade(const QColor &color, Shade shade) const;
+
+    int touchTarget() const;
+    int buttonHeight() const;
+    int delegateHeight() const;
+    int dialogButtonBoxHeight() const;
+    int frameVerticalPadding() const;
+    int menuItemHeight() const;
+    int menuItemVerticalPadding() const;
+    int switchDelegateVerticalPadding() const;
+    int tooltipHeight() const;
+
+    static void initGlobals();
+
+    static Variant variant();
+
+Q_SIGNALS:
+    void themeChanged();
+    void primaryChanged();
+    void accentChanged();
+    void foregroundChanged();
+    void backgroundChanged();
+    void elevationChanged();
+
+    void themeOrAccentChanged();
+
+    void primaryHighlightedTextColorChanged();
+    void buttonColorChanged();
+    void buttonDisabledColorChanged();
+    void dialogColorChanged();
+    void tooltipColorChanged();
+    void toolBarColorChanged();
+    void toolTextColorChanged();
+
+protected:
+    void attachedParentChange(QQuickAttachedPropertyPropagator *newParent, QQuickAttachedPropertyPropagator *oldParent) override;
+
+private:
+    void init();
+    bool variantToRgba(const QVariant &var, const char *name, QRgb *rgba, bool *custom) const;
+
+    QColor backgroundColor(Shade shade) const;
+    QColor accentColor(Shade shade) const;
+    QColor buttonColor(bool highlighted, bool checked = false) const;
+    Shade themeShade() const;
+
+    // These reflect whether a color value was explicitly set on the specific
+    // item that this attached style object represents.
+    bool m_explicitTheme = false;
+    bool m_explicitPrimary = false;
+    bool m_explicitAccent = false;
+    bool m_explicitForeground = false;
+    bool m_explicitBackground = false;
+    // These reflect whether the color value that was either inherited or
+    // explicitly set is in the form that QColor expects, rather than one of
+    // our pre-defined color enum values.
+    bool m_customPrimary = false;
+    bool m_customAccent = false;
+    bool m_customForeground = false;
+    bool m_customBackground = false;
+    // These will be true when this item has an explicit or inherited foreground/background
+    // color, or these colors were declared globally via settings (e.g. conf or env vars).
+    // Some color properties of the style will return different values depending on whether
+    // or not these are set.
+    bool m_hasForeground = false;
+    bool m_hasBackground = false;
+    // The actual values for this item, whether explicit, inherited or globally set.
+    Theme m_theme = Light;
+    uint m_primary = 0;
+    uint m_accent = 0;
+    uint m_foreground = 0;
+    uint m_background = 0;
+    int m_elevation = 0;
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKMATERIALSTYLE_P_H
diff --git a/src/quickcontrols/material/qquickmaterialtheme.cpp b/src/quickcontrols/material/qquickmaterialtheme.cpp
new file mode 100644
index 0000000000..629c389be5
--- /dev/null
+++ b/src/quickcontrols/material/qquickmaterialtheme.cpp
@@ -0,0 +1,80 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickmaterialtheme_p.h"
+#include "qquickmaterialstyle_p.h"
+
+#include <QtGui/qpa/qplatformdialoghelper.h>
+#include <QtGui/qfont.h>
+#include <QtGui/qfontinfo.h>
+#include <QtQuickTemplates2/private/qquicktheme_p.h>
+
+QT_BEGIN_NAMESPACE
+
+void QQuickMaterialTheme::initialize(QQuickTheme *theme)
+{
+    QFont systemFont;
+    QFont buttonFont;
+    QFont toolTipFont;
+    QFont itemViewFont;
+    QFont listViewFont;
+    QFont menuItemFont;
+    QFont editorFont;
+
+    QFont font;
+    font.setFamilies(QStringList{QLatin1String("Roboto")});
+    QString family = QFontInfo(font).family();
+
+    if (family != QLatin1String("Roboto")) {
+        font.setFamilies(QStringList{QLatin1String("Noto")});
+        family = QFontInfo(font).family();
+    }
+
+    if (family == QLatin1String("Roboto") || family == QLatin1String("Noto")) {
+        const QStringList families{family};
+        systemFont.setFamilies(families);
+        buttonFont.setFamilies(families);
+        toolTipFont.setFamilies(families);
+        itemViewFont.setFamilies(families);
+        listViewFont.setFamilies(families);
+        menuItemFont.setFamilies(families);
+        editorFont.setFamilies(families);
+    }
+
+    const bool dense = QQuickMaterialStyle::variant() == QQuickMaterialStyle::Dense;
+    systemFont.setPixelSize(dense ? 13 : 14);
+    theme->setFont(QQuickTheme::System, systemFont);
+
+    // https://material.io/guidelines/components/buttons.html#buttons-style
+    buttonFont.setPixelSize(dense ? 13 : 14);
+    buttonFont.setCapitalization(QFont::AllUppercase);
+    buttonFont.setWeight(QFont::Medium);
+    theme->setFont(QQuickTheme::Button, buttonFont);
+    theme->setFont(QQuickTheme::TabBar, buttonFont);
+    theme->setFont(QQuickTheme::ToolBar, buttonFont);
+
+    // https://material.io/guidelines/components/tooltips.html
+    toolTipFont.setPixelSize(dense ? 10 : 14);
+    toolTipFont.setWeight(QFont::Medium);
+    theme->setFont(QQuickTheme::ToolTip, toolTipFont);
+
+    itemViewFont.setPixelSize(dense ? 13 : 14);
+    itemViewFont.setWeight(QFont::Medium);
+    theme->setFont(QQuickTheme::ItemView, itemViewFont);
+
+    // https://material.io/guidelines/components/lists.html#lists-specs
+    listViewFont.setPixelSize(dense ? 13 : 16);
+    theme->setFont(QQuickTheme::ListView, listViewFont);
+
+    menuItemFont.setPixelSize(dense ? 13 : 16);
+    theme->setFont(QQuickTheme::Menu, menuItemFont);
+    theme->setFont(QQuickTheme::MenuBar, menuItemFont);
+    theme->setFont(QQuickTheme::ComboBox, menuItemFont);
+
+    editorFont.setPixelSize(dense ? 13 : 16);
+    theme->setFont(QQuickTheme::TextArea, editorFont);
+    theme->setFont(QQuickTheme::TextField, editorFont);
+    theme->setFont(QQuickTheme::SpinBox, editorFont);
+}
+
+QT_END_NAMESPACE
diff --git a/src/quickcontrols/material/qquickmaterialtheme_p.h b/src/quickcontrols/material/qquickmaterialtheme_p.h
new file mode 100644
index 0000000000..893f441c86
--- /dev/null
+++ b/src/quickcontrols/material/qquickmaterialtheme_p.h
@@ -0,0 +1,32 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKMATERIALTHEME_P_H
+#define QQUICKMATERIALTHEME_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickTheme;
+
+class QQuickMaterialTheme
+{
+public:
+    static void initialize(QQuickTheme *theme);
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKMATERIALTHEME_P_H
diff --git a/src/quickcontrols/material/qt_attribution.json b/src/quickcontrols/material/qt_attribution.json
new file mode 100644
index 0000000000..85fdadf9e0
--- /dev/null
+++ b/src/quickcontrols/material/qt_attribution.json
@@ -0,0 +1,13 @@
+{
+    "Id": "shadow_angular_material",
+    "Name": "Shadow values from Angular Material",
+    "QDocModule": "qtquickcontrols",
+    "QtUsage": "Used in the Material Style of Qt Quick Controls 2.",
+    "Files": "ElevationEffect.qml",
+    "Description": "Shadow values for the elevation effect.",
+    "Homepage": "https://angularjs.org/",
+    "License": "MIT License",
+    "LicenseId": "MIT",
+    "LicenseFile": "LICENSE_ANGULARJS.txt",
+    "Copyright": "Copyright (c) 2014-2016 Google, Inc"
+}
diff --git a/src/quickcontrols/material/qtquickcontrols2materialstyleplugin.cpp b/src/quickcontrols/material/qtquickcontrols2materialstyleplugin.cpp
new file mode 100644
index 0000000000..10aa64b8cf
--- /dev/null
+++ b/src/quickcontrols/material/qtquickcontrols2materialstyleplugin.cpp
@@ -0,0 +1,49 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickmaterialstyle_p.h"
+#include "qquickmaterialtheme_p.h"
+
+#include <QtQuickControls2/private/qquickstyleplugin_p.h>
+#include <QtQuickControls2Impl/private/qquickpaddedrectangle_p.h>
+#include <QtQuickTemplates2/private/qquicktheme_p.h>
+
+QT_BEGIN_NAMESPACE
+
+extern void qml_register_types_QtQuick_Controls_Material();
+Q_GHS_KEEP_REFERENCE(qml_register_types_QtQuick_Controls_Material);
+
+class QtQuickControls2MaterialStylePlugin : public QQuickStylePlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtQuickControls2MaterialStylePlugin(QObject *parent = nullptr);
+
+    QString name() const override;
+    void initializeTheme(QQuickTheme *theme) override;
+
+    QQuickMaterialTheme theme;
+};
+
+QtQuickControls2MaterialStylePlugin::QtQuickControls2MaterialStylePlugin(QObject *parent) : QQuickStylePlugin(parent)
+{
+    volatile auto registration = &qml_register_types_QtQuick_Controls_Material;
+    Q_UNUSED(registration);
+}
+
+QString QtQuickControls2MaterialStylePlugin::name() const
+{
+    return QStringLiteral("Material");
+}
+
+void QtQuickControls2MaterialStylePlugin::initializeTheme(QQuickTheme *theme)
+{
+    QQuickMaterialStyle::initGlobals();
+    this->theme.initialize(theme);
+}
+
+QT_END_NAMESPACE
+
+#include "qtquickcontrols2materialstyleplugin.moc"
diff --git a/src/quickcontrols/material/shaders/+glslcore/RectangularGlow.frag b/src/quickcontrols/material/shaders/+glslcore/RectangularGlow.frag
new file mode 100644
index 0000000000..432d86b5d5
--- /dev/null
+++ b/src/quickcontrols/material/shaders/+glslcore/RectangularGlow.frag
@@ -0,0 +1,25 @@
+#version 150
+
+uniform float qt_Opacity;
+uniform float relativeSizeX;
+uniform float relativeSizeY;
+uniform float spread;
+uniform vec4 color;
+
+in vec2 qt_TexCoord0;
+out vec4 fragColor;
+
+float linearstep(float e0, float e1, float x)
+{
+    return clamp((x - e0) / (e1 - e0), 0.0, 1.0);
+}
+
+void main()
+{
+    float alpha =
+        smoothstep(0.0, relativeSizeX, 0.5 - abs(0.5 - qt_TexCoord0.x)) *
+        smoothstep(0.0, relativeSizeY, 0.5 - abs(0.5 - qt_TexCoord0.y));
+
+    float spreadMultiplier = linearstep(spread, 1.0 - spread, alpha);
+    fragColor = color * qt_Opacity * spreadMultiplier * spreadMultiplier;
+}
diff --git a/src/quickcontrols/material/shaders/+hlsl/RectangularGlow.frag b/src/quickcontrols/material/shaders/+hlsl/RectangularGlow.frag
new file mode 100644
index 0000000000..69d9f852fb
--- /dev/null
+++ b/src/quickcontrols/material/shaders/+hlsl/RectangularGlow.frag
@@ -0,0 +1,21 @@
+cbuffer ConstantBuffer : register(b0)
+{
+    float4x4 qt_Matrix;
+    float qt_Opacity;
+    float relativeSizeX;
+    float relativeSizeY;
+    float spread;
+    float4 color;
+}
+
+float linearstep(float e0, float e1, float x) { return clamp((x - e0) / (e1 - e0), 0.0, 1.0); }
+
+float4 main(float4 position : SV_POSITION, float2 coord : TEXCOORD0) : SV_TARGET
+{
+    float alpha =
+        smoothstep(0.0, relativeSizeX, 0.5 - abs(0.5 - coord.x)) *
+        smoothstep(0.0, relativeSizeY, 0.5 - abs(0.5 - coord.y));
+
+    float spreadMultiplier = linearstep(spread, 1.0 - spread, alpha);
+    return color * qt_Opacity * spreadMultiplier * spreadMultiplier;
+}
diff --git a/src/quickcontrols/material/shaders/+qsb/RectangularGlow.frag b/src/quickcontrols/material/shaders/+qsb/RectangularGlow.frag
new file mode 100644
index 0000000000..5cfa2db6ed
--- /dev/null
+++ b/src/quickcontrols/material/shaders/+qsb/RectangularGlow.frag
diff --git a/src/quickcontrols/material/shaders/RectangularGlow.frag b/src/quickcontrols/material/shaders/RectangularGlow.frag
new file mode 100644
index 0000000000..40bab5806c
--- /dev/null
+++ b/src/quickcontrols/material/shaders/RectangularGlow.frag
@@ -0,0 +1,19 @@
+uniform highp float qt_Opacity;
+uniform mediump float relativeSizeX;
+uniform mediump float relativeSizeY;
+uniform mediump float spread;
+uniform lowp vec4 color;
+varying highp vec2 qt_TexCoord0;
+
+highp float linearstep(highp float e0, highp float e1, highp float x) {
+    return clamp((x - e0) / (e1 - e0), 0.0, 1.0);
+}
+
+void main() {
+    lowp float alpha =
+        smoothstep(0.0, relativeSizeX, 0.5 - abs(0.5 - qt_TexCoord0.x)) *
+        smoothstep(0.0, relativeSizeY, 0.5 - abs(0.5 - qt_TexCoord0.y));
+
+    highp float spreadMultiplier = linearstep(spread, 1.0 - spread, alpha);
+    gl_FragColor = color * qt_Opacity * spreadMultiplier * spreadMultiplier;
+}
diff --git a/src/quickcontrols/material/shaders/RectangularGlow_rhi.frag b/src/quickcontrols/material/shaders/RectangularGlow_rhi.frag
new file mode 100644
index 0000000000..3e7d2dfe6f
--- /dev/null
+++ b/src/quickcontrols/material/shaders/RectangularGlow_rhi.frag
@@ -0,0 +1,28 @@
+#version 440
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    float relativeSizeX;
+    float relativeSizeY;
+    float spread;
+    vec4 color;
+} ubuf;
+
+float linearstep(float e0, float e1, float x)
+{
+    return clamp((x - e0) / (e1 - e0), 0.0, 1.0);
+}
+
+void main()
+{
+    float alpha =
+        smoothstep(0.0, ubuf.relativeSizeX, 0.5 - abs(0.5 - qt_TexCoord0.x)) *
+        smoothstep(0.0, ubuf.relativeSizeY, 0.5 - abs(0.5 - qt_TexCoord0.y));
+
+    float spreadMultiplier = linearstep(ubuf.spread, 1.0 - ubuf.spread, alpha);
+    fragColor = ubuf.color * ubuf.qt_Opacity * spreadMultiplier * spreadMultiplier;
+}
diff --git a/src/quickcontrols/material/shaders/compile.bat b/src/quickcontrols/material/shaders/compile.bat
new file mode 100644
index 0000000000..e0ccbb7ed5
--- /dev/null
+++ b/src/quickcontrols/material/shaders/compile.bat
@@ -0,0 +1,4 @@
+:: Copyright (C) 2019 The Qt Company Ltd.
+:: SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+qsb --glsl "150,120,100 es" --hlsl 50 --msl 12 -o +qsb/RectangularGlow.frag RectangularGlow_rhi.frag
diff --git a/src/quickcontrols/qquickattachedpropertypropagator.cpp b/src/quickcontrols/qquickattachedpropertypropagator.cpp
new file mode 100644
index 0000000000..ab6f47d4cd
--- /dev/null
+++ b/src/quickcontrols/qquickattachedpropertypropagator.cpp
@@ -0,0 +1,380 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickattachedpropertypropagator.h"
+
+#include <QtCore/qpointer.h>
+#include <QtQuick/qquickwindow.h>
+#include <QtQuick/private/qquickitem_p.h>
+#include <QtQuick/private/qquickitemchangelistener_p.h>
+#include <QtQuickTemplates2/private/qquickpopup_p.h>
+
+QT_BEGIN_NAMESPACE
+
+/*!
+    \class QQuickAttachedPropertyPropagator
+    \brief The QQuickAttachedPropertyPropagator class provides a way to
+    propagate attached properties.
+    \inmodule QtQuickControls2
+    \since 6.5
+
+    In QML, it is possible to
+    \l {Attached Properties and Attached Signal Handlers}{attach properties and
+    signal handlers} to objects. \l {Providing Attached Properties} goes into more
+    detail about how to expose your own C++ attached types.
+
+    QQuickAttachedPropertyPropagator provides an API to propagate attached
+    properties from a parent object to its children, similar to
+    \l {Control::}{font} and \l {Item::}{palette} propagation. It supports
+    propagation through \l {Item}{items}, \l {Popup}{popups}, and
+    \l {Window}{windows}.
+
+    If propagation of properties is not important, consider using a
+    \l {QML_SINGLETON}{C++} or
+    \l {Contents of a Module Definition qmldir File}{QML} singleton instead,
+    as it is better suited for that use case, and is more efficient in that
+    it only requires one QObject.
+
+    To use QQuickAttachedPropertyPropagator:
+    \list
+    \li Derive from it
+    \li Call \l initialize() in the constructor
+    \li Define set/inherit/propagate/reset functions for each property as needed
+    \li Reimplement \l attachedParentChange() to handle property inheritance
+    \endlist
+
+    For an example that demonstrates this in depth, see
+    \l {Qt Quick Controls - Attached Style Properties Example}.
+
+    \sa {Styling Qt Quick Controls}
+*/
+
+static QQuickAttachedPropertyPropagator *attachedObject(const QMetaObject *type, QObject *object, bool create = false)
+{
+    if (!object)
+        return nullptr;
+    auto func = qmlAttachedPropertiesFunction(object, type);
+    return qobject_cast<QQuickAttachedPropertyPropagator *>(qmlAttachedPropertiesObject(object, func, create));
+}
+
+/*!
+    \internal
+
+    Tries to find a QQuickAttachedPropertyPropagator whose type is \a ourAttachedType
+    and is attached to an ancestor of \a objectWeAreAttachedTo.
+
+    QQuickAttachedPropertyPropagator needs to know who its parent attached object is in
+    order to inherit attached property values from it. This is called when an
+    instance of QQuickAttachedPropertyPropagator is created, and whenever
+    \c {objectWeAreAttachedTo}'s parent changes, for example.
+*/
+static QQuickAttachedPropertyPropagator *findAttachedParent(const QMetaObject *ourAttachedType, QObject *objectWeAreAttachedTo)
+{
+    QQuickItem *item = qobject_cast<QQuickItem *>(objectWeAreAttachedTo);
+    if (item) {
+        // lookup parent items and popups
+        QQuickItem *parent = item->parentItem();
+        while (parent) {
+            QQuickAttachedPropertyPropagator *attached = attachedObject(ourAttachedType, parent);
+            if (attached)
+                return attached;
+
+            QQuickPopup *popup = qobject_cast<QQuickPopup *>(parent->parent());
+            if (popup)
+                return attachedObject(ourAttachedType, popup);
+
+            parent = parent->parentItem();
+        }
+
+        // fallback to item's window
+        QQuickAttachedPropertyPropagator *attached = attachedObject(ourAttachedType, item->window());
+        if (attached)
+            return attached;
+    } else {
+        // lookup popup's window
+        QQuickPopup *popup = qobject_cast<QQuickPopup *>(objectWeAreAttachedTo);
+        if (popup)
+            return attachedObject(ourAttachedType, popup->popupItem()->window());
+    }
+
+    // lookup parent window
+    QQuickWindow *window = qobject_cast<QQuickWindow *>(objectWeAreAttachedTo);
+    if (window) {
+        // It doesn't seem like a parent window can be anything but transient in Qt Quick.
+        QQuickWindow *parentWindow = qobject_cast<QQuickWindow *>(window->transientParent());
+        if (parentWindow) {
+            QQuickAttachedPropertyPropagator *attached = attachedObject(ourAttachedType, parentWindow);
+            if (attached)
+                return attached;
+        }
+    }
+
+    // fallback to engine (global)
+    if (objectWeAreAttachedTo) {
+        QQmlEngine *engine = qmlEngine(objectWeAreAttachedTo);
+        if (engine) {
+            QByteArray name = QByteArray("_q_") + ourAttachedType->className();
+            QQuickAttachedPropertyPropagator *attached = engine->property(name).value<QQuickAttachedPropertyPropagator *>();
+            if (!attached) {
+                attached = attachedObject(ourAttachedType, engine, true);
+                engine->setProperty(name, QVariant::fromValue(attached));
+            }
+            return attached;
+        }
+    }
+
+    return nullptr;
+}
+
+static QList<QQuickAttachedPropertyPropagator *> findAttachedChildren(const QMetaObject *type, QObject *object)
+{
+    QList<QQuickAttachedPropertyPropagator *> children;
+
+    QQuickItem *item = qobject_cast<QQuickItem *>(object);
+    if (!item) {
+        QQuickWindow *window = qobject_cast<QQuickWindow *>(object);
+        if (window)
+            item = window->contentItem();
+    }
+
+    if (!item)
+        return children;
+
+    // At this point, "item" could either be an item that the attached object is
+    // attached to directly, or the contentItem of a window that the attached object
+    // is attached to.
+
+    // Look for attached properties on items.
+    const auto childItems = item->childItems();
+    for (QQuickItem *child : childItems) {
+        QQuickAttachedPropertyPropagator *attached = attachedObject(type, child);
+        if (attached)
+            children += attached;
+        else
+            children += findAttachedChildren(type, child);
+    }
+
+    // Look for attached properties on windows. Windows declared in QML
+    // as children of a Window are QObject-parented to the contentItem (see
+    // QQuickWindowPrivate::data_append()). Windows declared as children
+    // of items are QObject-parented to those items.
+    const auto &windowChildren = item->children();
+    for (QObject *child : windowChildren) {
+        QQuickWindow *childWindow = qobject_cast<QQuickWindow *>(child);
+        if (childWindow) {
+            QQuickAttachedPropertyPropagator *attached = attachedObject(type, childWindow);
+            if (attached)
+                children += attached;
+        }
+    }
+
+    return children;
+}
+
+static QQuickItem *findAttachedItem(QObject *parent)
+{
+    QQuickItem *item = qobject_cast<QQuickItem *>(parent);
+    if (!item) {
+        QQuickPopup *popup = qobject_cast<QQuickPopup *>(parent);
+        if (popup)
+            item = popup->popupItem();
+    }
+    return item;
+}
+
+class QQuickAttachedPropertyPropagatorPrivate : public QObjectPrivate, public QQuickItemChangeListener
+{
+public:
+    Q_DECLARE_PUBLIC(QQuickAttachedPropertyPropagator)
+
+    static QQuickAttachedPropertyPropagatorPrivate *get(QQuickAttachedPropertyPropagator *attachedObject)
+    {
+        return attachedObject->d_func();
+    }
+
+    void attachTo(QObject *object);
+    void detachFrom(QObject *object);
+    void setAttachedParent(QQuickAttachedPropertyPropagator *parent);
+
+    void itemWindowChanged(QQuickWindow *window);
+    void itemParentChanged(QQuickItem *item, QQuickItem *parent) override;
+
+    QList<QQuickAttachedPropertyPropagator *> attachedChildren;
+    QPointer<QQuickAttachedPropertyPropagator> attachedParent;
+};
+
+void QQuickAttachedPropertyPropagatorPrivate::attachTo(QObject *object)
+{
+    QQuickItem *item = findAttachedItem(object);
+    if (item) {
+        connect(item, &QQuickItem::windowChanged, this, &QQuickAttachedPropertyPropagatorPrivate::itemWindowChanged);
+        QQuickItemPrivate::get(item)->addItemChangeListener(this, QQuickItemPrivate::Parent);
+    }
+}
+
+void QQuickAttachedPropertyPropagatorPrivate::detachFrom(QObject *object)
+{
+    QQuickItem *item = findAttachedItem(object);
+    if (item) {
+        disconnect(item, &QQuickItem::windowChanged, this, &QQuickAttachedPropertyPropagatorPrivate::itemWindowChanged);
+        QQuickItemPrivate::get(item)->removeItemChangeListener(this, QQuickItemPrivate::Parent);
+    }
+}
+
+/*!
+    \internal
+
+    This function sets the attached parent of this attached object.
+
+    Currently it is called when:
+    \list
+    \li The target item's parent changes.
+    \li The target item's window changes.
+    \li The attached object is constructed, to set the attached parent
+        and the attached parent of the attached object children.
+    \li The attached object is destructed.
+    \endlist
+
+    \quotefromfile ../../examples/quickcontrols/attachedstyleproperties/MyStyle/mystyle.cpp
+    \skipto MyStyle::resetTheme
+    \printuntil }
+*/
+void QQuickAttachedPropertyPropagatorPrivate::setAttachedParent(QQuickAttachedPropertyPropagator *parent)
+{
+    Q_Q(QQuickAttachedPropertyPropagator);
+    if (attachedParent == parent)
+        return;
+
+    QQuickAttachedPropertyPropagator *oldParent = attachedParent;
+    if (attachedParent)
+        QQuickAttachedPropertyPropagatorPrivate::get(attachedParent)->attachedChildren.removeOne(q);
+    attachedParent = parent;
+    if (parent)
+        QQuickAttachedPropertyPropagatorPrivate::get(parent)->attachedChildren.append(q);
+    q->attachedParentChange(parent, oldParent);
+}
+
+void QQuickAttachedPropertyPropagatorPrivate::itemWindowChanged(QQuickWindow *window)
+{
+    Q_Q(QQuickAttachedPropertyPropagator);
+    QQuickAttachedPropertyPropagator *attachedParent = nullptr;
+    QQuickItem *item = qobject_cast<QQuickItem *>(q->sender());
+    if (item)
+        attachedParent = findAttachedParent(q->metaObject(), item);
+    if (!attachedParent)
+        attachedParent = attachedObject(q->metaObject(), window);
+    setAttachedParent(attachedParent);
+}
+
+void QQuickAttachedPropertyPropagatorPrivate::itemParentChanged(QQuickItem *item, QQuickItem *parent)
+{
+    Q_Q(QQuickAttachedPropertyPropagator);
+    Q_UNUSED(parent);
+    setAttachedParent(findAttachedParent(q->metaObject(), item));
+}
+
+/*!
+    Constructs a QQuickAttachedPropertyPropagator with the given \a parent.
+
+    The \c parent will be used to find this object's
+    \l {attachedParent()}{attached parent}.
+
+    Derived classes should call \l initialize() in their constructor.
+*/
+QQuickAttachedPropertyPropagator::QQuickAttachedPropertyPropagator(QObject *parent)
+    : QObject(*(new QQuickAttachedPropertyPropagatorPrivate), parent)
+{
+    Q_D(QQuickAttachedPropertyPropagator);
+    d->attachTo(parent);
+}
+
+/*!
+    Destroys the QQuickAttachedPropertyPropagator.
+*/
+QQuickAttachedPropertyPropagator::~QQuickAttachedPropertyPropagator()
+{
+    Q_D(QQuickAttachedPropertyPropagator);
+    d->detachFrom(parent());
+    d->setAttachedParent(nullptr);
+}
+
+/*!
+    This function returns the attached children of this attached object.
+
+    The attached children are used when propagating property values:
+
+    \quotefromfile ../../examples/quickcontrols/attachedstyleproperties/MyStyle/mystyle.cpp
+    \skipto MyStyle::propagateTheme
+    \printuntil }
+    \printuntil }
+*/
+QList<QQuickAttachedPropertyPropagator *> QQuickAttachedPropertyPropagator::attachedChildren() const
+{
+    Q_D(const QQuickAttachedPropertyPropagator);
+    return d->attachedChildren;
+}
+
+/*!
+    This function returns the attached parent of this attached object.
+
+    The attached parent is used when inheriting property values:
+
+    \quotefromfile ../../examples/quickcontrols/attachedstyleproperties/MyStyle/mystyle.cpp
+    \skipto MyStyle::resetTheme
+    \printuntil }
+*/
+QQuickAttachedPropertyPropagator *QQuickAttachedPropertyPropagator::attachedParent() const
+{
+    Q_D(const QQuickAttachedPropertyPropagator);
+    return d->attachedParent;
+}
+
+/*!
+    Finds and sets the attached parent for this attached object, and then does
+    the same for its children. This must be called upon construction of the
+    attached object in order for propagation to work.
+
+    It can be useful to read global/default values before calling this
+    function. For example, before calling \c initialize(), the
+    \l {Imagine Style}{Imagine} style checks a static "globalsInitialized" flag
+    to see if it should read default values from \l QSettings. The values from
+    that file form the basis for any attached property values that have not
+    been explicitly set.
+
+    \quotefromfile ../../examples/quickcontrols/attachedstyleproperties/MyStyle/mystyle.cpp
+    \skipto MyStyle::MyStyle
+    \printuntil }
+*/
+void QQuickAttachedPropertyPropagator::initialize()
+{
+    Q_D(QQuickAttachedPropertyPropagator);
+    QQuickAttachedPropertyPropagator *attachedParent = findAttachedParent(metaObject(), parent());
+    if (attachedParent)
+        d->setAttachedParent(attachedParent);
+
+    const QList<QQuickAttachedPropertyPropagator *> attachedChildren = findAttachedChildren(metaObject(), parent());
+    for (QQuickAttachedPropertyPropagator *child : attachedChildren)
+        QQuickAttachedPropertyPropagatorPrivate::get(child)->setAttachedParent(this);
+}
+
+/*!
+    This function is called whenever the attached parent of this
+    QQuickAttachedPropertyPropagator changes from \a oldParent to \a newParent.
+
+    Subclasses should reimplement this function to inherit attached properties
+    from \c newParent.
+
+    \quotefromfile ../../examples/quickcontrols/attachedstyleproperties/MyStyle/mystyle.cpp
+    \skipto attachedParentChange
+    \printuntil }
+    \printuntil }
+*/
+void QQuickAttachedPropertyPropagator::attachedParentChange(QQuickAttachedPropertyPropagator *newParent, QQuickAttachedPropertyPropagator *oldParent)
+{
+    Q_UNUSED(newParent);
+    Q_UNUSED(oldParent);
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickattachedpropertypropagator.cpp"
diff --git a/src/quickcontrols/qquickattachedpropertypropagator.h b/src/quickcontrols/qquickattachedpropertypropagator.h
new file mode 100644
index 0000000000..ec5ff7991a
--- /dev/null
+++ b/src/quickcontrols/qquickattachedpropertypropagator.h
@@ -0,0 +1,37 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKATTACHEDOBJECT_H
+#define QQUICKATTACHEDOBJECT_H
+
+#include <QtCore/qobject.h>
+#include <QtQuickControls2/qtquickcontrols2global.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickAttachedPropertyPropagatorPrivate;
+
+class Q_QUICKCONTROLS2_EXPORT QQuickAttachedPropertyPropagator : public QObject
+{
+    Q_OBJECT
+
+public:
+    explicit QQuickAttachedPropertyPropagator(QObject *parent = nullptr);
+    ~QQuickAttachedPropertyPropagator();
+
+    QList<QQuickAttachedPropertyPropagator *> attachedChildren() const;
+
+    QQuickAttachedPropertyPropagator *attachedParent() const;
+
+protected:
+    void initialize();
+
+    virtual void attachedParentChange(QQuickAttachedPropertyPropagator *newParent, QQuickAttachedPropertyPropagator *oldParent);
+
+private:
+    Q_DECLARE_PRIVATE(QQuickAttachedPropertyPropagator)
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKATTACHEDOBJECT_H
diff --git a/src/quickcontrols/qquickstyle.cpp b/src/quickcontrols/qquickstyle.cpp
new file mode 100644
index 0000000000..da1bcd200b
--- /dev/null
+++ b/src/quickcontrols/qquickstyle.cpp
@@ -0,0 +1,474 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickstyle.h"
+#include "qquickstyle_p.h"
+
+#include <QtCore/qdir.h>
+#include <QtCore/qfile.h>
+#include <QtCore/qdebug.h>
+#include <QtCore/qsettings.h>
+#include <QtCore/qfileselector.h>
+#include <QtCore/qlibraryinfo.h>
+#include <QtCore/qloggingcategory.h>
+#include <QtCore/qmetaobject.h>
+#include <QtGui/qcolor.h>
+#include <QtGui/qfont.h>
+#include <QtGui/qpalette.h>
+#include <QtGui/private/qguiapplication_p.h>
+#include <QtGui/qpa/qplatformtheme.h>
+#include <QtQml/private/qqmlmetatype_p.h>
+#include <QtQml/qqmlengine.h>
+#include <QtQml/qqmlfile.h>
+
+#include <functional>
+
+QT_BEGIN_NAMESPACE
+
+Q_LOGGING_CATEGORY(lcQtQuickControlsStyle, "qt.quick.controls.style")
+
+/*!
+    \class QQuickStyle
+    \brief The QQuickStyle class allows configuring the application style.
+    \inmodule QtQuickControls2
+    \since 5.7
+
+    QQuickStyle provides API for querying and configuring the application
+    \l {Styling Qt Quick Controls}{styles} of Qt Quick Controls.
+
+    \code
+    #include <QGuiApplication>
+    #include <QQmlApplicationEngine>
+    #include <QQuickStyle>
+
+    int main(int argc, char *argv[])
+    {
+        QGuiApplication app(argc, argv);
+
+        QQuickStyle::setStyle("Material");
+
+        QQmlApplicationEngine engine;
+        engine.load(QUrl("qrc:/main.qml"));
+
+        return app.exec();
+    }
+    \endcode
+
+    \note The style must be configured \b before loading QML that imports
+    Qt Quick Controls. It is not possible to change the style after the QML
+    types have been registered.
+
+    \note QQuickStyle is not supported when using
+    \l {Compile-Time Style Selection}{compile-time style selection}.
+
+    To create your own custom style, see \l {Creating a Custom Style}. Custom
+    styles do not need to implement all controls. By default, the styling
+    system uses the \l {Basic style} as a fallback for controls that a custom
+    style does not provide. It is possible to specify a different fallback
+    style to customize or extend one of the built-in styles.
+
+    \code
+    QQuickStyle::setStyle("MyStyle");
+    QQuickStyle::setFallbackStyle("Material");
+    \endcode
+
+    \sa {Styling Qt Quick Controls}
+*/
+
+struct QQuickStyleSpec
+{
+    QQuickStyleSpec() { }
+
+    QString name()
+    {
+        if (!resolved)
+            resolve();
+        return style.mid(style.lastIndexOf(QLatin1Char('/')) + 1);
+    }
+
+    QString path()
+    {
+        if (!resolved)
+            resolve();
+        QString s = style;
+        if (QQmlFile::isLocalFile(s))
+            s = QQmlFile::urlToLocalFileOrQrc(s);
+        return s.left(s.lastIndexOf(QLatin1Char('/')) + 1);
+    }
+
+    void setStyle(const QString &s)
+    {
+        qCDebug(lcQtQuickControlsStyle) << "style" << s << "set on QQuickStyleSpec";
+        if (s.contains(QLatin1Char('/'))) {
+            qWarning() << "Style names must not contain paths; see the \"Definition of a Style\" documentation for more information";
+            return;
+        }
+
+        qCDebug(lcQtQuickControlsStyle) << "clearing resolved flag and resolving";
+        style = s;
+        resolved = false;
+        resolve();
+    }
+
+    void setFallbackStyle(const QString &fallback, const QByteArray &method)
+    {
+        if (!fallback.isEmpty())
+            qCDebug(lcQtQuickControlsStyle) << "fallback style" << fallback << "set on QQuickStyleSpec via" << method;
+
+        fallbackStyle = fallback;
+        fallbackMethod = method;
+    }
+
+    void resolve()
+    {
+        qCDebug(lcQtQuickControlsStyle) << "resolving style";
+
+        if (style.isEmpty())
+            style = QGuiApplicationPrivate::styleOverride;
+        if (style.isEmpty())
+            style = QString::fromLocal8Bit(qgetenv("QT_QUICK_CONTROLS_STYLE"));
+        if (fallbackStyle.isEmpty())
+            setFallbackStyle(QString::fromLocal8Bit(qgetenv("QT_QUICK_CONTROLS_FALLBACK_STYLE")), "QT_QUICK_CONTROLS_FALLBACK_STYLE");
+#if QT_CONFIG(settings)
+        if (style.isEmpty() || fallbackStyle.isEmpty()) {
+            QSharedPointer<QSettings> settings = QQuickStylePrivate::settings(QStringLiteral("Controls"));
+            if (settings) {
+                if (style.isEmpty())
+                    style = settings->value(QStringLiteral("Style")).toString();
+                if (fallbackStyle.isEmpty())
+                    setFallbackStyle(settings->value(QStringLiteral("FallbackStyle")).toString(), ":/qtquickcontrols2.conf");
+            }
+        }
+#endif
+
+        auto builtInStyleList = QQuickStylePrivate::builtInStyles();
+        if (!fallbackStyle.isEmpty() && !builtInStyleList.contains(fallbackStyle)) {
+            qWarning().nospace().noquote() << fallbackMethod << ": the specified fallback style \"" <<
+                fallbackStyle << "\" is not one of the built-in Qt Quick Controls 2 styles";
+            fallbackStyle.clear();
+        }
+
+        // Find the config file.
+        resolveConfigFilePath();
+
+        usingDefaultStyle = false;
+
+        if (style.isEmpty() || style.toLower() == QStringLiteral("default")) {
+            usingDefaultStyle = true;
+            style.clear();
+
+            qCDebug(lcQtQuickControlsStyle) << "no style (or Default) was specified;"
+                << "checking if we have an appropriate style for this platform";
+
+            // If these defaults are changed, ensure that the "Using Styles in Qt Quick Controls"
+            // section of qtquickcontrols2-styles.qdoc is updated.
+#if defined(Q_OS_MACOS)
+            style = QLatin1String("macOS");
+#elif defined(Q_OS_WINDOWS)
+            style = QLatin1String("Windows");
+#elif defined(Q_OS_ANDROID)
+            style = QLatin1String("Material");
+#elif defined(Q_OS_LINUX)
+            style = QLatin1String("Fusion");
+#elif defined(Q_OS_IOS)
+            style = QLatin1String("iOS");
+#endif
+            if (!style.isEmpty())
+                qCDebug(lcQtQuickControlsStyle) << "using" << style << "as a default";
+            else
+                qCDebug(lcQtQuickControlsStyle) << "no appropriate style found; using Basic as a default";
+        }
+
+        // If it's still empty by this point, then it means we have no native style available for this platform,
+        // as is the case on e.g. embedded. In that case, we want to default to the Basic style,
+        // which is what effectiveStyleName() returns when "style" is empty.
+        custom = !builtInStyleList.contains(QQuickStylePrivate::effectiveStyleName(style));
+
+        resolved = true;
+
+        qCDebug(lcQtQuickControlsStyle).nospace() << "done resolving:"
+            << "\n    style=" << style
+            << "\n    custom=" << custom
+            << "\n    resolved=" << resolved
+            << "\n    fallbackStyle=" << fallbackStyle
+            << "\n    fallbackMethod=" << fallbackMethod
+            << "\n    configFilePath=" << configFilePath;
+    }
+
+    void reset()
+    {
+        qCDebug(lcQtQuickControlsStyle) << "resetting values to their defaults";
+
+        custom = false;
+        resolved = false;
+        usingDefaultStyle = false;
+        style.clear();
+        fallbackStyle.clear();
+        fallbackMethod.clear();
+        configFilePath.clear();
+    }
+
+    QString resolveConfigFilePath()
+    {
+        if (configFilePath.isEmpty()) {
+            configFilePath = QFile::decodeName(qgetenv("QT_QUICK_CONTROLS_CONF"));
+            if (configFilePath.isEmpty() || !QFile::exists(configFilePath)) {
+                if (!configFilePath.isEmpty())
+                    qWarning("QT_QUICK_CONTROLS_CONF=%s: No such file", qPrintable(configFilePath));
+
+                configFilePath = QStringLiteral(":/qtquickcontrols2.conf");
+            }
+        }
+        return configFilePath;
+    }
+
+    // Is this a custom style defined by the user and not "built-in" style?
+    bool custom = false;
+    // Have we resolved the style yet?
+    bool resolved = false;
+    // Are we using the default style for this platform (because no style was specified)?
+    bool usingDefaultStyle = false;
+    // The name of the style.
+    QString style;
+    // The built-in style to use if the requested style cannot be found.
+    QString fallbackStyle;
+    // A description of the way in which fallbackStyle was set, used in e.g. warning messages shown to the user.
+    QByteArray fallbackMethod;
+    // The path to the qtquickcontrols2.conf file.
+    QString configFilePath;
+};
+
+Q_GLOBAL_STATIC(QQuickStyleSpec, styleSpec)
+
+/*
+    Note that most of these functions (with the exception of e.g. isResolved())
+    should not be called before the style has been resolved, as it's only after
+    that happens that they will have been set.
+*/
+QString QQuickStylePrivate::style()
+{
+    return styleSpec()->style;
+}
+
+QString QQuickStylePrivate::effectiveStyleName(const QString &styleName)
+{
+    return !styleName.isEmpty() ? styleName : QLatin1String("Basic");
+}
+
+QString QQuickStylePrivate::fallbackStyle()
+{
+    return styleSpec()->fallbackStyle;
+}
+
+bool QQuickStylePrivate::isCustomStyle()
+{
+    return styleSpec()->custom;
+}
+
+bool QQuickStylePrivate::isResolved()
+{
+    return styleSpec()->resolved;
+}
+
+bool QQuickStylePrivate::isUsingDefaultStyle()
+{
+    return styleSpec()->usingDefaultStyle;
+}
+
+void QQuickStylePrivate::init()
+{
+    QQuickStyleSpec *spec = styleSpec();
+    spec->resolve();
+}
+
+void QQuickStylePrivate::reset()
+{
+    if (styleSpec())
+        styleSpec()->reset();
+}
+
+QString QQuickStylePrivate::configFilePath()
+{
+    return styleSpec()->resolveConfigFilePath();
+}
+
+QSharedPointer<QSettings> QQuickStylePrivate::settings(const QString &group)
+{
+#ifndef QT_NO_SETTINGS
+    const QString filePath = QQuickStylePrivate::configFilePath();
+    if (QFile::exists(filePath)) {
+        QFileSelector selector;
+        QSettings *settings = new QSettings(selector.select(filePath), QSettings::IniFormat);
+        if (!group.isEmpty())
+            settings->beginGroup(group);
+        return QSharedPointer<QSettings>(settings);
+    }
+#endif // QT_NO_SETTINGS
+    return QSharedPointer<QSettings>();
+}
+
+#if QT_CONFIG(settings)
+static void readValue(const QSharedPointer<QSettings> &settings, const QString &name, std::function<void(const QVariant &)> setValue)
+{
+    const QVariant var = settings->value(name);
+    if (var.isValid())
+        setValue(var);
+}
+
+template <typename Enum>
+static Enum toEnumValue(const QVariant &var)
+{
+    // ### TODO: expose QFont enums to the meta object system using Q_ENUM
+    //QMetaEnum enumeration = QMetaEnum::fromType<Enum>();
+    //bool ok = false;
+    //int value = enumeration.keyToValue(var.toByteArray(), &ok);
+    //if (!ok)
+    //    value = var.toInt();
+    //return static_cast<Enum>(value);
+
+    return static_cast<Enum>(var.toInt());
+}
+
+const QFont *QQuickStylePrivate::readFont(const QSharedPointer<QSettings> &settings)
+{
+    const QVariant var = settings->value(QStringLiteral("Font"));
+    if (var.isValid())
+        return new QFont(var.value<QFont>());
+
+    QFont f;
+    settings->beginGroup(QStringLiteral("Font"));
+    readValue(settings, QStringLiteral("Family"), [&f](const QVariant &var) { f.setFamilies(QStringList{var.toString()}); });
+    readValue(settings, QStringLiteral("PointSize"), [&f](const QVariant &var) { f.setPointSizeF(var.toReal()); });
+    readValue(settings, QStringLiteral("PixelSize"), [&f](const QVariant &var) { f.setPixelSize(var.toInt()); });
+    readValue(settings, QStringLiteral("StyleHint"), [&f](const QVariant &var) { f.setStyleHint(toEnumValue<QFont::StyleHint>(var.toInt())); });
+    readValue(settings, QStringLiteral("Weight"), [&f](const QVariant &var) { f.setWeight(toEnumValue<QFont::Weight>(var)); });
+    readValue(settings, QStringLiteral("Style"), [&f](const QVariant &var) { f.setStyle(toEnumValue<QFont::Style>(var.toInt())); });
+    settings->endGroup();
+    return new QFont(f);
+}
+
+static void readColorGroup(const QSharedPointer<QSettings> &settings, QPalette::ColorGroup group, QPalette *palette)
+{
+    const QStringList keys = settings->childKeys();
+    if (keys.isEmpty())
+        return;
+
+    static const int index = QPalette::staticMetaObject.indexOfEnumerator("ColorRole");
+    Q_ASSERT(index != -1);
+    QMetaEnum metaEnum = QPalette::staticMetaObject.enumerator(index);
+
+    for (const QString &key : keys) {
+        bool ok = false;
+        int role = metaEnum.keyToValue(key.toUtf8(), &ok);
+        if (ok)
+            palette->setColor(group, static_cast<QPalette::ColorRole>(role), settings->value(key).value<QColor>());
+    }
+}
+
+const QPalette *QQuickStylePrivate::readPalette(const QSharedPointer<QSettings> &settings)
+{
+    QPalette p;
+    settings->beginGroup(QStringLiteral("Palette"));
+    readColorGroup(settings, QPalette::All, &p);
+
+    settings->beginGroup(QStringLiteral("Normal"));
+    readColorGroup(settings, QPalette::Normal, &p);
+    settings->endGroup();
+
+    settings->beginGroup(QStringLiteral("Disabled"));
+    readColorGroup(settings, QPalette::Disabled, &p);
+    settings->endGroup();
+    return new QPalette(p);
+}
+#endif // QT_CONFIG(settings)
+
+bool QQuickStylePrivate::isDarkSystemTheme()
+{
+    const bool dark = [](){
+        if (const QPlatformTheme *theme = QGuiApplicationPrivate::platformTheme())
+            return theme->appearance() == Qt::Appearance::Dark;
+        return false;
+    }();
+    return dark;
+}
+
+QStringList QQuickStylePrivate::builtInStyles()
+{
+    return {
+        QLatin1String("Basic"),
+        QLatin1String("Fusion"),
+        QLatin1String("Imagine"),
+#ifdef Q_OS_MACOS
+        QLatin1String("macOS"),
+        QLatin1String("iOS"),
+#endif
+#ifdef Q_OS_IOS
+        QLatin1String("iOS"),
+#endif
+        QLatin1String("Material"),
+        QLatin1String("Universal"),
+#ifdef Q_OS_WINDOWS
+        QLatin1String("Windows")
+#endif
+    };
+}
+
+/*!
+    Returns the name of the application style.
+
+    \note The application style can be specified by passing a \c -style command
+          line argument. Therefore \c name() may not return a fully resolved
+          value if called before constructing a QGuiApplication.
+*/
+QString QQuickStyle::name()
+{
+    return styleSpec()->name();
+}
+
+/*!
+    Sets the application style to \a style.
+
+    \note The style must be configured \b before loading QML that imports Qt Quick Controls.
+          It is not possible to change the style after the QML types have been registered.
+
+    \sa setFallbackStyle(), {Using Styles in Qt Quick Controls}
+*/
+void QQuickStyle::setStyle(const QString &style)
+{
+    qCDebug(lcQtQuickControlsStyle) << "setStyle called with" << style;
+
+    if (QQmlMetaType::matchingModuleVersion(
+                QStringLiteral("QtQuick.Controls"), QTypeRevision::fromVersion(2, 0)).isValid()) {
+        qWarning() << "ERROR: QQuickStyle::setStyle() must be called before loading QML that imports Qt Quick Controls 2.";
+        return;
+    }
+
+    styleSpec()->setStyle(style);
+}
+
+/*!
+    \since 5.8
+    Sets the application fallback style to \a style.
+
+    \note The fallback style must be the name of one of the built-in Qt Quick Controls styles, e.g. "Material".
+
+    \note The style must be configured \b before loading QML that imports Qt Quick Controls.
+          It is not possible to change the style after the QML types have been registered.
+
+    The fallback style can be also specified by setting the \c QT_QUICK_CONTROLS_FALLBACK_STYLE
+    \l {Supported Environment Variables in Qt Quick Controls}{environment variable}.
+
+    \sa setStyle(), {Using Styles in Qt Quick Controls}
+*/
+void QQuickStyle::setFallbackStyle(const QString &style)
+{
+    if (QQmlMetaType::matchingModuleVersion(
+                QStringLiteral("QtQuick.Controls"), QTypeRevision::fromVersion(2, 0)).isValid()) {
+        qWarning() << "ERROR: QQuickStyle::setFallbackStyle() must be called before loading QML that imports Qt Quick Controls 2.";
+        return;
+    }
+
+    styleSpec()->setFallbackStyle(style, "QQuickStyle::setFallbackStyle()");
+}
+
+QT_END_NAMESPACE
diff --git a/src/quickcontrols/qquickstyle.h b/src/quickcontrols/qquickstyle.h
new file mode 100644
index 0000000000..019cacef14
--- /dev/null
+++ b/src/quickcontrols/qquickstyle.h
@@ -0,0 +1,23 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKSTYLE_H
+#define QQUICKSTYLE_H
+
+#include <QtCore/qurl.h>
+#include <QtCore/qstring.h>
+#include <QtQuickControls2/qtquickcontrols2global.h>
+
+QT_BEGIN_NAMESPACE
+
+class Q_QUICKCONTROLS2_EXPORT QQuickStyle
+{
+public:
+    static QString name();
+    static void setStyle(const QString &style);
+    static void setFallbackStyle(const QString &style);
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKSTYLE_H
diff --git a/src/quickcontrols/qquickstyle_p.h b/src/quickcontrols/qquickstyle_p.h
new file mode 100644
index 0000000000..8a563aee7b
--- /dev/null
+++ b/src/quickcontrols/qquickstyle_p.h
@@ -0,0 +1,48 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKSTYLE_P_H
+#define QQUICKSTYLE_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtCore/qsharedpointer.h>
+#include <QtQuickControls2/qtquickcontrols2global.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QSettings;
+
+class Q_QUICKCONTROLS2_EXPORT QQuickStylePrivate
+{
+public:
+    static QString style();
+    static QString effectiveStyleName(const QString &styleName);
+    static QString fallbackStyle();
+    static bool isCustomStyle();
+    static bool isResolved();
+    static bool isUsingDefaultStyle();
+    static bool exists();
+    static void init();
+    static void reset();
+    static QString configFilePath();
+    static QSharedPointer<QSettings> settings(const QString &group = QString());
+    static const QFont *readFont(const QSharedPointer<QSettings> &settings);
+    static const QPalette *readPalette(const QSharedPointer<QSettings> &settings);
+    static bool isDarkSystemTheme();
+    static QStringList builtInStyles();
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKSTYLE_P_H
diff --git a/src/quickcontrols/qquickstyleplugin.cpp b/src/quickcontrols/qquickstyleplugin.cpp
new file mode 100644
index 0000000000..8f0a71c9ad
--- /dev/null
+++ b/src/quickcontrols/qquickstyleplugin.cpp
@@ -0,0 +1,127 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickstyle.h"
+#include "qquickstyle_p.h"
+#include "qquickstyleplugin_p.h"
+
+#include <QtCore/private/qfileselector_p.h>
+#include <QtCore/qloggingcategory.h>
+#include <QtGui/qstylehints.h>
+#include <QtGui/qguiapplication.h>
+#include <QtQml/qqmlengine.h>
+#include <QtQml/qqmlfile.h>
+#include <QtQml/private/qqmlmetatype_p.h>
+#include <QtQuickTemplates2/private/qquicktheme_p_p.h>
+
+QT_BEGIN_NAMESPACE
+
+Q_LOGGING_CATEGORY(lcStylePlugin, "qt.quick.controls.styleplugin")
+
+QQuickStylePlugin::QQuickStylePlugin(QObject *parent)
+    : QQmlExtensionPlugin(parent)
+{
+}
+
+QQuickStylePlugin::~QQuickStylePlugin()
+{
+}
+
+void QQuickStylePlugin::registerTypes(const char *uri)
+{
+    qCDebug(lcStylePlugin).nospace() << "registerTypes called with uri " << uri << "; plugin name is " << name();
+
+    const QTypeRevision latestControlsRevision = QQmlMetaType::latestModuleVersion(QLatin1String("QtQuick.Controls"));
+    // Use the private function because we don't want to cause resolve() to be called,
+    // as the logic that assigns a default style if one wasn't set would interfere with compile-time style selection.
+    QString styleName = QQuickStylePrivate::style();
+    if (!latestControlsRevision.isValid() && styleName.isEmpty()) {
+        // The user hasn't imported QtQuick.Controls, nor set a style via the runtime methods.
+        qCDebug(lcStylePlugin).nospace() << uri << " imported before QtQuick.Controls; using compile-time style selection";
+        QQuickStyle::setStyle(name());
+        styleName = name();
+    }
+
+    // Even if this style plugin isn't for the style set by the user,
+    // we still want to create the theme object, because that function
+    // is also responsible for reading values from qtquickcontrols2.conf.
+    // So, even if a style doesn't have a QQuickTheme, it can still have
+    // values set for (e.g. fonts and palettes) in qtquickcontrols2.conf.
+    const QString effectiveCurrentStyleName = QQuickStylePrivate::effectiveStyleName(styleName);
+    auto theme = QQuickTheme::instance();
+    if (!theme) {
+        qCDebug(lcStylePlugin) << "creating theme";
+        theme = createTheme(effectiveCurrentStyleName);
+    }
+
+    if (name() != effectiveCurrentStyleName) {
+        qCDebug(lcStylePlugin).nospace() << "theme does not belong to current style ("
+            << effectiveCurrentStyleName << "); not calling initializeTheme()";
+        return;
+    }
+
+    qCDebug(lcStylePlugin) << "theme has not yet been initialized; calling initializeTheme()";
+    initializeTheme(theme);
+    connect(QGuiApplication::styleHints(), &QStyleHints::appearanceChanged,
+                                     this, &QQuickStylePlugin::updateTheme);
+
+    if (!styleName.isEmpty())
+        QFileSelectorPrivate::addStatics(QStringList() << styleName);
+}
+
+void QQuickStylePlugin::unregisterTypes()
+{
+    qCDebug(lcStylePlugin) << "unregisterTypes called; plugin name is" << name();
+    if (!QQuickThemePrivate::instance)
+        return;
+
+    disconnect(QGuiApplication::styleHints(), &QStyleHints::appearanceChanged,
+                                        this, &QQuickStylePlugin::updateTheme);
+
+    // Not every style has a plugin - some styles are QML-only. So, we clean this
+    // stuff up when the first style plugin is unregistered rather than when the
+    // plugin for the current style is unregistered.
+    QQuickThemePrivate::instance.reset();
+    QQuickStylePrivate::reset();
+}
+
+/*!
+    \internal
+
+    Responsible for setting the font and palette settings that were specified in the
+    qtquickcontrols2.conf file.
+
+    Style-specific settings (e.g. Variant=Dense) are read in the constructor of the
+    appropriate style plugin (e.g. QtQuickControls2MaterialStylePlugin).
+
+    Implicit style-specific font and palette values are assigned in the relevant theme
+    (e.g. QQuickMaterialTheme).
+*/
+QQuickTheme *QQuickStylePlugin::createTheme(const QString &name)
+{
+    qCDebug(lcStylePlugin) << "creating QQuickTheme instance to be initialized by style-specific theme of" << name;
+
+    QQuickTheme *theme = new QQuickTheme;
+#if QT_CONFIG(settings)
+    QQuickThemePrivate *p = QQuickThemePrivate::get(theme);
+    QSharedPointer<QSettings> settings = QQuickStylePrivate::settings(name);
+    if (settings) {
+        p->defaultFont.reset(QQuickStylePrivate::readFont(settings));
+        // Set the default font as the System scope, because that's what
+        // QQuickControlPrivate::parentFont() uses as its fallback if no
+        // parent item has a font explicitly set. QQuickControlPrivate::parentFont()
+        // is used as the starting point for font inheritance/resolution.
+        // The same goes for palettes below.
+        theme->setFont(QQuickTheme::System, *p->defaultFont);
+
+        p->defaultPalette.reset(QQuickStylePrivate::readPalette(settings));
+        theme->setPalette(QQuickTheme::System, *p->defaultPalette);
+    }
+#endif
+    QQuickThemePrivate::instance.reset(theme);
+    return theme;
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickstyleplugin_p.cpp"
diff --git a/src/quickcontrols/qquickstyleplugin_p.h b/src/quickcontrols/qquickstyleplugin_p.h
new file mode 100644
index 0000000000..d0f690205c
--- /dev/null
+++ b/src/quickcontrols/qquickstyleplugin_p.h
@@ -0,0 +1,49 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKSTYLEPLUGIN_P_H
+#define QQUICKSTYLEPLUGIN_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtQml/qqmlextensionplugin.h>
+#include <QtQuickControls2/qtquickcontrols2global.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickTheme;
+
+class Q_QUICKCONTROLS2_EXPORT QQuickStylePlugin : public QQmlExtensionPlugin
+{
+    Q_OBJECT
+
+public:
+    explicit QQuickStylePlugin(QObject *parent = nullptr);
+    ~QQuickStylePlugin();
+
+    virtual QString name() const = 0;
+    virtual void initializeTheme(QQuickTheme *theme) = 0;
+    virtual void updateTheme() {}
+
+    void registerTypes(const char *uri) override;
+    void unregisterTypes() override;
+
+private:
+    QQuickTheme *createTheme(const QString &name);
+
+    Q_DISABLE_COPY(QQuickStylePlugin)
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKSTYLEPLUGIN_P_H
diff --git a/src/quickcontrols/qt_cmdline.cmake b/src/quickcontrols/qt_cmdline.cmake
new file mode 100644
index 0000000000..ed009c5407
--- /dev/null
+++ b/src/quickcontrols/qt_cmdline.cmake
@@ -0,0 +1,10 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+qt_commandline_option(style-fusion TYPE boolean NAME quickcontrols2-fusion)
+qt_commandline_option(style-imagine TYPE boolean NAME quickcontrols2-imagine)
+qt_commandline_option(style-ios TYPE boolean NAME quickcontrols2-ios)
+qt_commandline_option(style-material TYPE boolean NAME quickcontrols2-material)
+qt_commandline_option(style-universal TYPE boolean NAME quickcontrols2-universal)
+qt_commandline_option(style-macos TYPE boolean NAME quickcontrols2-macos)
+qt_commandline_option(style-windows TYPE boolean NAME quickcontrols2-windows)
diff --git a/src/quickcontrols/qtquickcontrols2global.h b/src/quickcontrols/qtquickcontrols2global.h
new file mode 100644
index 0000000000..7e52bb1863
--- /dev/null
+++ b/src/quickcontrols/qtquickcontrols2global.h
@@ -0,0 +1,16 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QTQUICKCONTROLS2GLOBAL_H
+#define QTQUICKCONTROLS2GLOBAL_H
+
+#include <QtCore/qglobal.h>
+#include <QtQuickControls2/qtquickcontrols2exports.h>
+
+QT_BEGIN_NAMESPACE
+
+Q_QUICKCONTROLS2_EXPORT void qml_register_types_QtQuick_Controls();
+
+QT_END_NAMESPACE
+
+#endif // QTQUICKCONTROLS2GLOBAL_H
diff --git a/src/quickcontrols/qtquickcontrols2plugin.cpp b/src/quickcontrols/qtquickcontrols2plugin.cpp
new file mode 100644
index 0000000000..8e30e8428b
--- /dev/null
+++ b/src/quickcontrols/qtquickcontrols2plugin.cpp
@@ -0,0 +1,140 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include <QtCore/private/qfileselector_p.h>
+#include <QtCore/qloggingcategory.h>
+#include <QtQml/qqmlengine.h>
+#include <QtQml/qqmlextensionplugin.h>
+#include <QtQuickTemplates2/private/qquicktheme_p_p.h>
+#include <QtQuickControls2/private/qquickstyle_p.h>
+#include <QtQuickControls2/private/qquickstyleplugin_p.h>
+#include <QtQuickControls2/qquickstyle.h>
+#include <QtQuickControls2/qtquickcontrols2global.h>
+
+QT_BEGIN_NAMESPACE
+
+Q_GHS_KEEP_REFERENCE(qml_register_types_QtQuick_Controls);
+
+Q_LOGGING_CATEGORY(lcQtQuickControls2Plugin, "qt.quick.controls.qtquickcontrols2plugin")
+
+class QtQuickControls2Plugin : public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtQuickControls2Plugin(QObject *parent = nullptr);
+    ~QtQuickControls2Plugin();
+
+    void registerTypes(const char *uri) override;
+    void unregisterTypes() override;
+
+private:
+    // We store these because the style plugins can be unregistered before
+    // QtQuickControls2Plugin, and since QQuickStylePlugin calls QQuickStylePrivate::reset(),
+    // the style information can be lost when it comes time to call qmlUnregisterModuleImport().
+    // It also avoids unnecessarily resolving the style after resetting it just to get the style
+    // name in unregisterTypes().
+    bool customStyle = false;
+    QString registeredStyleUri;
+    QString registeredFallbackStyleUri;
+};
+
+static const char *qtQuickControlsUri = "QtQuick.Controls";
+
+QString styleUri()
+{
+    const QString style = QQuickStyle::name();
+    if (!QQuickStylePrivate::isCustomStyle()) {
+        // The style set is a built-in style.
+        const QString styleName = QQuickStylePrivate::effectiveStyleName(style);
+        return QString::fromLatin1("QtQuick.Controls.%1").arg(styleName);
+    }
+
+    // This is a custom style, so just use the name as the import uri.
+    QString styleName = style;
+    if (styleName.startsWith(QLatin1String(":/")))
+        styleName.remove(0, 2);
+    return styleName;
+}
+
+QString fallbackStyleUri()
+{
+    // The fallback style must be a built-in style, so we don't need to check for custom styles here.
+    const QString fallbackStyle = QQuickStylePrivate::fallbackStyle();
+    const QString fallbackStyleName = QQuickStylePrivate::effectiveStyleName(fallbackStyle);
+    return QString::fromLatin1("QtQuick.Controls.%1").arg(fallbackStyleName);
+}
+
+QtQuickControls2Plugin::QtQuickControls2Plugin(QObject *parent) : QQmlExtensionPlugin(parent)
+{
+    volatile auto registration = &qml_register_types_QtQuick_Controls;
+    Q_UNUSED(registration);
+}
+
+QtQuickControls2Plugin::~QtQuickControls2Plugin()
+{
+    // Intentionally empty: we use register/unregisterTypes() to do
+    // initialization and cleanup, as plugins are not unloaded on macOS.
+}
+
+void QtQuickControls2Plugin::registerTypes(const char *uri)
+{
+    qCDebug(lcQtQuickControls2Plugin) << "registerTypes() called with uri" << uri;
+
+    // It's OK that the style is resolved more than once; some accessors like name() cause it to be called, for example.
+    QQuickStylePrivate::init();
+
+    const QString styleName = QQuickStylePrivate::effectiveStyleName(QQuickStyle::name());
+    const QString fallbackStyleName = QQuickStylePrivate::effectiveStyleName(QQuickStylePrivate::fallbackStyle());
+    qCDebug(lcQtQuickControls2Plugin) << "style:" << QQuickStyle::name() << "effective style:" << styleName
+        << "fallback style:" << QQuickStylePrivate::fallbackStyle() << "effective fallback style:" << fallbackStyleName;
+
+    // If the style is Basic, we don't need to register the fallback because the Basic style
+    // provides all controls. Also, if we didn't return early here, we can get an infinite import loop
+    // when the style is set to Basic.
+    if (styleName != fallbackStyleName && styleName != QLatin1String("Basic")) {
+        registeredFallbackStyleUri = ::fallbackStyleUri();
+        qCDebug(lcQtQuickControls2Plugin) << "calling qmlRegisterModuleImport() to register fallback style with"
+            << " uri \"" << qtQuickControlsUri << "\" moduleMajor" << QQmlModuleImportModuleAny
+            << "import" << registeredFallbackStyleUri << "importMajor" << QQmlModuleImportAuto;
+        // The fallback style must be a built-in style, so we match the version number.
+        qmlRegisterModuleImport(qtQuickControlsUri, QQmlModuleImportModuleAny, registeredFallbackStyleUri.toUtf8().constData(),
+            QQmlModuleImportAuto, QQmlModuleImportAuto);
+    }
+
+    // If the user imports QtQuick.Controls 2.15, and they're using the Material style, we should import version 2.15.
+    // However, if they import QtQuick.Controls 2.15, but are using a custom style, we want to use the latest version
+    // number of their style.
+    customStyle = QQuickStylePrivate::isCustomStyle();
+    registeredStyleUri = ::styleUri();
+    const int importMajor = !customStyle ? QQmlModuleImportAuto : QQmlModuleImportLatest;
+    qCDebug(lcQtQuickControls2Plugin).nospace() << "calling qmlRegisterModuleImport() to register primary style with"
+        << " uri \"" << qtQuickControlsUri << "\" moduleMajor " << importMajor
+        << " import " << registeredStyleUri << " importMajor " << importMajor;
+    qmlRegisterModuleImport(qtQuickControlsUri, QQmlModuleImportModuleAny, registeredStyleUri.toUtf8().constData(), importMajor);
+
+    if (customStyle)
+        QFileSelectorPrivate::addStatics(QStringList() << styleName);
+}
+
+void QtQuickControls2Plugin::unregisterTypes()
+{
+    qCDebug(lcQtQuickControls2Plugin) << "unregisterTypes() called";
+
+    if (!registeredFallbackStyleUri.isEmpty()) {
+        // We registered a fallback style, so now we need to unregister it.
+        qmlUnregisterModuleImport(qtQuickControlsUri, QQmlModuleImportModuleAny, registeredFallbackStyleUri.toUtf8().constData(),
+            QQmlModuleImportAuto, QQmlModuleImportAuto);
+        registeredFallbackStyleUri.clear();
+    }
+
+    const int importMajor = !customStyle ? QQmlModuleImportAuto : QQmlModuleImportLatest;
+    qmlUnregisterModuleImport(qtQuickControlsUri, QQmlModuleImportModuleAny, registeredStyleUri.toUtf8().constData(), importMajor);
+    customStyle = false;
+    registeredStyleUri.clear();
+}
+
+QT_END_NAMESPACE
+
+#include "qtquickcontrols2plugin.moc"
diff --git a/src/quickcontrols/universal/ApplicationWindow.qml b/src/quickcontrols/universal/ApplicationWindow.qml
new file mode 100644
index 0000000000..7828d20480
--- /dev/null
+++ b/src/quickcontrols/universal/ApplicationWindow.qml
@@ -0,0 +1,21 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+import QtQuick.Controls.Universal.impl
+
+T.ApplicationWindow {
+    id: window
+
+    color: Universal.background
+
+    FocusRectangle {
+        parent: window.activeFocusControl
+        width: parent ? parent.width : 0
+        height: parent ? parent.height : 0
+        visible: parent && !!parent.useSystemFocusVisuals && !!parent.visualFocus
+    }
+}
diff --git a/src/quickcontrols/universal/BusyIndicator.qml b/src/quickcontrols/universal/BusyIndicator.qml
new file mode 100644
index 0000000000..64dfdd251a
--- /dev/null
+++ b/src/quickcontrols/universal/BusyIndicator.qml
@@ -0,0 +1,27 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+import QtQuick.Controls.Universal.impl
+
+T.BusyIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    contentItem: BusyIndicatorImpl {
+        implicitWidth: 20
+        implicitHeight: 20
+
+        readonly property real size: Math.min(control.availableWidth, control.availableHeight)
+
+        count: size < 60 ? 5 : 6 // "Small" vs. "Large"
+        color: control.Universal.accent
+        visible: control.running
+    }
+}
diff --git a/src/quickcontrols/universal/Button.qml b/src/quickcontrols/universal/Button.qml
new file mode 100644
index 0000000000..bdf10e3c8c
--- /dev/null
+++ b/src/quickcontrols/universal/Button.qml
@@ -0,0 +1,56 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.Button {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 8
+    verticalPadding: padding - 4
+    spacing: 8
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: Color.transparent(Universal.foreground, enabled ? 1.0 : 0.2)
+
+    property bool useSystemFocusVisuals: true
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: Color.transparent(control.Universal.foreground, enabled ? 1.0 : 0.2)
+    }
+
+    background: Rectangle {
+        implicitWidth: 32
+        implicitHeight: 32
+
+        visible: !control.flat || control.down || control.checked || control.highlighted
+        color: control.down ? control.Universal.baseMediumLowColor :
+               control.enabled && (control.highlighted || control.checked) ? control.Universal.accent :
+                                                                             control.Universal.baseLowColor
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            color: "transparent"
+            visible: enabled && control.hovered
+            border.width: 2 // ButtonBorderThemeThickness
+            border.color: control.Universal.baseMediumLowColor
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/CMakeLists.txt b/src/quickcontrols/universal/CMakeLists.txt
new file mode 100644
index 0000000000..6f5dc1bb25
--- /dev/null
+++ b/src/quickcontrols/universal/CMakeLists.txt
@@ -0,0 +1,156 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2universalstyleplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "ApplicationWindow.qml"
+    "BusyIndicator.qml"
+    "Button.qml"
+    "CheckBox.qml"
+    "CheckDelegate.qml"
+    "ComboBox.qml"
+    "DelayButton.qml"
+    "Dial.qml"
+    "Dialog.qml"
+    "DialogButtonBox.qml"
+    "Drawer.qml"
+    "Frame.qml"
+    "GroupBox.qml"
+    "HorizontalHeaderView.qml"
+    "ItemDelegate.qml"
+    "Label.qml"
+    "Menu.qml"
+    "MenuBar.qml"
+    "MenuBarItem.qml"
+    "MenuItem.qml"
+    "MenuSeparator.qml"
+    "Page.qml"
+    "PageIndicator.qml"
+    "Pane.qml"
+    "Popup.qml"
+    "ProgressBar.qml"
+    "RadioButton.qml"
+    "RadioDelegate.qml"
+    "RangeSlider.qml"
+    "RoundButton.qml"
+    "ScrollView.qml"
+    "ScrollBar.qml"
+    "ScrollIndicator.qml"
+    "SelectionRectangle.qml"
+    "Slider.qml"
+    "SpinBox.qml"
+    "SplitView.qml"
+    "StackView.qml"
+    "SwipeDelegate.qml"
+    "SwitchDelegate.qml"
+    "Switch.qml"
+    "TabBar.qml"
+    "TabButton.qml"
+    "TextArea.qml"
+    "TextField.qml"
+    "ToolBar.qml"
+    "ToolButton.qml"
+    "ToolSeparator.qml"
+    "ToolTip.qml"
+    "Tumbler.qml"
+    "VerticalHeaderView.qml"
+)
+set_source_files_properties(DelayButton.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.2;6.0"
+)
+set_source_files_properties(Dialog.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(DialogButtonBox.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(HorizontalHeaderView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.15;6.0"
+)
+set_source_files_properties(MenuBar.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.3;6.0"
+)
+set_source_files_properties(MenuBarItem.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.3;6.0"
+)
+set_source_files_properties(MenuSeparator.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(RoundButton.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(SplitView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.13;6.0"
+)
+set_source_files_properties(ToolSeparator.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.1;6.0"
+)
+set_source_files_properties(VerticalHeaderView.qml PROPERTIES
+    QT_QML_SOURCE_VERSIONS "2.15;6.0"
+)
+
+qt_internal_add_qml_module(qtquickcontrols2universalstyleplugin
+    URI "QtQuick.Controls.Universal"
+    VERSION "${PROJECT_VERSION}"
+    PAST_MAJOR_VERSIONS 2
+    CLASS_NAME QtQuickControls2UniversalStylePlugin
+    DEPENDENCIES
+        QtQuick/auto
+    IMPORTS
+        QtQuick.Controls.Basic/auto
+    PLUGIN_TARGET qtquickcontrols2universalstyleplugin
+    NO_PLUGIN_OPTIONAL
+    NO_GENERATE_PLUGIN_SOURCE
+    SOURCES
+        qquickuniversalstyle.cpp qquickuniversalstyle_p.h
+        qquickuniversaltheme.cpp qquickuniversaltheme_p.h
+        qtquickcontrols2universalstyleplugin.cpp
+    QML_FILES
+        ${qml_files}
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::GuiPrivate
+        Qt::QmlPrivate
+        Qt::QuickControls2ImplPrivate
+        Qt::QuickControls2Private
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+)
+
+qt_internal_add_resource(qtquickcontrols2universalstyleplugin "qtquickcontrols2universalstyleplugin"
+    PREFIX
+        "/qt-project.org/imports/QtQuick/Controls/Universal"
+    FILES
+        "images/checkmark.png"
+        "images/checkmark@2x.png"
+        "images/checkmark@3x.png"
+        "images/checkmark@4x.png"
+        "images/downarrow.png"
+        "images/downarrow@2x.png"
+        "images/downarrow@3x.png"
+        "images/downarrow@4x.png"
+        "images/leftarrow.png"
+        "images/leftarrow@2x.png"
+        "images/leftarrow@3x.png"
+        "images/leftarrow@4x.png"
+        "images/rightarrow.png"
+        "images/rightarrow@2x.png"
+        "images/rightarrow@3x.png"
+        "images/rightarrow@4x.png"
+)
+
+add_subdirectory(impl)
+
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2universalstyleplugin quickwindow)
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2universalstyleplugin
+                                              qtquickcontrols2universalstyleimplplugin)
+
+# Basic style is the required fallback style.
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2universalstyleplugin
+                                              qtquickcontrols2basicstyleplugin)
diff --git a/src/quickcontrols/universal/CheckBox.qml b/src/quickcontrols/universal/CheckBox.qml
new file mode 100644
index 0000000000..c7f99b3b2b
--- /dev/null
+++ b/src/quickcontrols/universal/CheckBox.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+import QtQuick.Controls.Universal.impl
+
+T.CheckBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 8
+
+    property bool useSystemFocusVisuals: true
+
+    indicator: CheckIndicator {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+
+        opacity: enabled ? 1.0 : 0.2
+        color: control.Universal.foreground
+    }
+}
diff --git a/src/quickcontrols/universal/CheckDelegate.qml b/src/quickcontrols/universal/CheckDelegate.qml
new file mode 100644
index 0000000000..f11f0ac888
--- /dev/null
+++ b/src/quickcontrols/universal/CheckDelegate.qml
@@ -0,0 +1,63 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+import QtQuick.Controls.Universal.impl
+
+T.CheckDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 12
+
+    padding: 12
+    topPadding: padding - 1
+    bottomPadding: padding + 1
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: Color.transparent(Universal.foreground, enabled ? 1.0 : 0.2)
+
+    indicator: CheckIndicator {
+        x: control.text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: IconLabel {
+        leftPadding: !control.mirrored ? 0 : control.indicator.width + control.spacing
+        rightPadding: control.mirrored ? 0 : control.indicator.width + control.spacing
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: Color.transparent(control.Universal.foreground, enabled ? 1.0 : 0.2)
+    }
+
+    background: Rectangle {
+        visible: enabled && (control.down || control.highlighted || control.visualFocus || control.hovered)
+        color: control.down ? control.Universal.listMediumColor :
+               control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            visible: control.visualFocus || control.highlighted
+            color: control.Universal.accent
+            opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6
+        }
+
+    }
+}
diff --git a/src/quickcontrols/universal/ComboBox.qml b/src/quickcontrols/universal/ComboBox.qml
new file mode 100644
index 0000000000..9a812388aa
--- /dev/null
+++ b/src/quickcontrols/universal/ComboBox.qml
@@ -0,0 +1,124 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.ComboBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+    rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+
+    Universal.theme: editable && activeFocus ? Universal.Light : undefined
+
+    delegate: ItemDelegate {
+        width: ListView.view.width
+        text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
+        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
+        highlighted: control.highlightedIndex === index
+        hoverEnabled: control.hoverEnabled
+    }
+
+    indicator: ColorImage {
+        x: control.mirrored ? control.padding : control.width - width - control.padding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        color: !control.enabled ? control.Universal.baseLowColor : control.Universal.baseMediumHighColor
+        source: "qrc:/qt-project.org/imports/QtQuick/Controls/Universal/images/downarrow.png"
+
+        Rectangle {
+            z: -1
+            width: parent.width
+            height: parent.height
+            color: control.activeFocus ? control.Universal.accent :
+                   control.pressed ? control.Universal.baseMediumLowColor :
+                   control.hovered ? control.Universal.baseLowColor : "transparent"
+            visible: control.editable && !control.contentItem.hovered && (control.pressed || control.hovered)
+            opacity: control.activeFocus && !control.pressed ? 0.4 : 1.0
+        }
+    }
+
+    contentItem: T.TextField {
+        leftPadding: control.mirrored ? 1 : 12
+        rightPadding: control.mirrored ? 10 : 1
+        topPadding: 5 - control.topPadding
+        bottomPadding: 7 - control.bottomPadding
+
+        text: control.editable ? control.editText : control.displayText
+
+        enabled: control.editable
+        autoScroll: control.editable
+        readOnly: control.down
+        inputMethodHints: control.inputMethodHints
+        validator: control.validator
+        selectByMouse: control.selectTextByMouse
+
+        color: !control.enabled ? control.Universal.chromeDisabledLowColor :
+                control.editable && control.activeFocus ? control.Universal.chromeBlackHighColor : control.Universal.foreground
+        selectionColor: control.Universal.accent
+        selectedTextColor: control.Universal.chromeWhiteColor
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: 32
+
+        border.width: control.flat ? 0 : 2 // ComboBoxBorderThemeThickness
+        border.color: !control.enabled ? control.Universal.baseLowColor :
+                       control.editable && control.activeFocus ? control.Universal.accent :
+                       control.down ? control.Universal.baseMediumLowColor :
+                       control.hovered ? control.Universal.baseMediumColor : control.Universal.baseMediumLowColor
+        color: !control.enabled ? control.Universal.baseLowColor :
+                control.down ? control.Universal.listMediumColor :
+                control.flat && control.hovered ? control.Universal.listLowColor :
+                control.editable && control.activeFocus ? control.Universal.background : control.Universal.altMediumLowColor
+        visible: !control.flat || control.pressed || control.hovered || control.visualFocus
+
+        Rectangle {
+            x: 2
+            y: 2
+            width: parent.width - 4
+            height: parent.height - 4
+
+            visible: control.visualFocus && !control.editable
+            color: control.Universal.accent
+            opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6
+        }
+    }
+
+    popup: T.Popup {
+        width: control.width
+        height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
+        topMargin: 8
+        bottomMargin: 8
+
+        Universal.theme: control.Universal.theme
+        Universal.accent: control.Universal.accent
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
+            highlightMoveDuration: 0
+
+            T.ScrollIndicator.vertical: ScrollIndicator { }
+        }
+
+        background: Rectangle {
+            color: control.Universal.chromeMediumLowColor
+            border.color: control.Universal.chromeHighColor
+            border.width: 1 // FlyoutBorderThemeThickness
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/DelayButton.qml b/src/quickcontrols/universal/DelayButton.qml
new file mode 100644
index 0000000000..2b2cc83580
--- /dev/null
+++ b/src/quickcontrols/universal/DelayButton.qml
@@ -0,0 +1,61 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.DelayButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 8
+    verticalPadding: padding - 4
+
+    property bool useSystemFocusVisuals: true
+
+    transition: Transition {
+        NumberAnimation {
+            duration: control.delay * (control.pressed ? 1.0 - control.progress : 0.3 * control.progress)
+        }
+    }
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        elide: Text.ElideRight
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        opacity: enabled ? 1.0 : 0.2
+        color: control.Universal.foreground
+    }
+
+    background: Rectangle {
+        implicitWidth: 32
+        implicitHeight: 32
+
+        color: control.down ? control.Universal.baseMediumLowColor :
+               control.enabled && control.checked ? control.Universal.accent : control.Universal.baseLowColor
+
+        Rectangle {
+            visible: !control.checked
+            width: parent.width * control.progress
+            height: parent.height
+            color: control.Universal.accent
+        }
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            color: "transparent"
+            visible: enabled && control.hovered
+            border.width: 2 // ButtonBorderThemeThickness
+            border.color: control.Universal.baseMediumLowColor
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/Dial.qml b/src/quickcontrols/universal/Dial.qml
new file mode 100644
index 0000000000..6f86b00722
--- /dev/null
+++ b/src/quickcontrols/universal/Dial.qml
@@ -0,0 +1,53 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.Dial {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 100
+
+        x: control.width / 2 - width / 2
+        y: control.height / 2 - height / 2
+        width: Math.max(64, Math.min(control.width, control.height))
+        height: width
+        radius: width / 2
+        color: "transparent"
+        border.color: !control.enabled ? control.Universal.baseLowColor : control.Universal.baseMediumColor
+        border.width: 2
+    }
+
+    handle: Rectangle {
+        implicitWidth: 14
+        implicitHeight: 14
+
+        x: control.background.x + control.background.width / 2 - width / 2
+        y: control.background.y + control.background.height / 2 - height / 2
+
+        radius: width / 2
+        color: !control.enabled ? control.Universal.baseLowColor :
+                control.pressed ? control.Universal.baseMediumColor :
+                control.hovered ? control.Universal.baseHighColor : control.Universal.baseMediumHighColor
+
+        transform: [
+            Translate {
+                y: -control.background.height * 0.4 + control.handle.height / 2
+            },
+            Rotation {
+                angle: control.angle
+                origin.x: control.handle.width / 2
+                origin.y: control.handle.height / 2
+            }
+        ]
+    }
+}
diff --git a/src/quickcontrols/universal/Dialog.qml b/src/quickcontrols/universal/Dialog.qml
new file mode 100644
index 0000000000..0ed4e673c7
--- /dev/null
+++ b/src/quickcontrols/universal/Dialog.qml
@@ -0,0 +1,57 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.Dialog {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitHeaderWidth,
+                            implicitFooterWidth)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding
+                             + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+                             + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
+
+    padding: 24
+    verticalPadding: 18
+
+    background: Rectangle {
+        color: control.Universal.chromeMediumLowColor
+        border.color: control.Universal.chromeHighColor
+        border.width: 1 // FlyoutBorderThemeThickness
+    }
+
+    header: Label {
+        text: control.title
+        visible: control.title
+        elide: Label.ElideRight
+        topPadding: 18
+        leftPadding: 24
+        rightPadding: 24
+        // TODO: QPlatformTheme::TitleBarFont
+        font.pixelSize: 20
+        background: Rectangle {
+            x: 1; y: 1 // // FlyoutBorderThemeThickness
+            color: control.Universal.chromeMediumLowColor
+            width: parent.width - 2
+            height: parent.height - 1
+        }
+    }
+
+    footer: DialogButtonBox {
+        visible: count > 0
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Universal.baseLowColor
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Universal.baseLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/DialogButtonBox.qml b/src/quickcontrols/universal/DialogButtonBox.qml
new file mode 100644
index 0000000000..826a13efd3
--- /dev/null
+++ b/src/quickcontrols/universal/DialogButtonBox.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.DialogButtonBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            (control.count === 1 ? implicitContentWidth * 2 : implicitContentWidth) + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+    contentWidth: contentItem.contentWidth
+
+    spacing: 4
+    padding: 24
+    topPadding: position === T.DialogButtonBox.Footer ? 6 : 24
+    bottomPadding: position === T.DialogButtonBox.Header ? 6 : 24
+    alignment: count === 1 ? Qt.AlignRight : undefined
+
+    delegate: Button {
+        width: control.count === 1 ? control.availableWidth / 2 : undefined
+    }
+
+    contentItem: ListView {
+        implicitWidth: contentWidth
+        model: control.contentModel
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        snapMode: ListView.SnapToItem
+    }
+
+    background: Rectangle {
+        implicitHeight: 32
+        color: control.Universal.chromeMediumLowColor
+        x: 1; y: 1
+        width: parent.width - 2
+        height: parent.height - 2
+    }
+}
diff --git a/src/quickcontrols/universal/Drawer.qml b/src/quickcontrols/universal/Drawer.qml
new file mode 100644
index 0000000000..4c4ff5d443
--- /dev/null
+++ b/src/quickcontrols/universal/Drawer.qml
@@ -0,0 +1,45 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.Drawer {
+    id: control
+
+    parent: T.Overlay.overlay
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    topPadding: control.edge === Qt.BottomEdge
+    leftPadding: control.edge === Qt.RightEdge
+    rightPadding: control.edge === Qt.LeftEdge
+    bottomPadding: control.edge === Qt.TopEdge
+
+    enter: Transition { SmoothedAnimation { velocity: 5 } }
+    exit: Transition { SmoothedAnimation { velocity: 5 } }
+
+    background: Rectangle {
+        color: control.Universal.chromeMediumLowColor
+        Rectangle {
+            readonly property bool horizontal: control.edge === Qt.LeftEdge || control.edge === Qt.RightEdge
+            width: horizontal ? 1 : parent.width
+            height: horizontal ? parent.height : 1
+            color: control.Universal.chromeHighColor
+            x: control.edge === Qt.LeftEdge ? parent.width - 1 : 0
+            y: control.edge === Qt.TopEdge ? parent.height - 1 : 0
+        }
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Universal.baseLowColor
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Universal.baseLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/Frame.qml b/src/quickcontrols/universal/Frame.qml
new file mode 100644
index 0000000000..2e650d7913
--- /dev/null
+++ b/src/quickcontrols/universal/Frame.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.Frame {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 12
+
+    background: Rectangle {
+        color: "transparent"
+        border.color: control.Universal.chromeDisabledLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/GroupBox.qml b/src/quickcontrols/universal/GroupBox.qml
new file mode 100644
index 0000000000..b0b211bd95
--- /dev/null
+++ b/src/quickcontrols/universal/GroupBox.qml
@@ -0,0 +1,42 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.GroupBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitLabelWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 12
+    padding: 12
+    topPadding: padding + (implicitLabelWidth > 0 ? implicitLabelHeight + spacing : 0)
+
+    label: Text {
+        x: control.leftPadding
+        width: control.availableWidth
+
+        text: control.title
+        font: control.font
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+
+        opacity: enabled ? 1.0 : 0.2
+        color: control.Universal.foreground
+    }
+
+    background: Rectangle {
+        y: control.topPadding - control.bottomPadding
+        width: parent.width
+        height: parent.height - control.topPadding + control.bottomPadding
+
+        color: "transparent"
+        border.color: control.Universal.chromeDisabledLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/HorizontalHeaderView.qml b/src/quickcontrols/universal/HorizontalHeaderView.qml
new file mode 100644
index 0000000000..878fb1e10e
--- /dev/null
+++ b/src/quickcontrols/universal/HorizontalHeaderView.qml
@@ -0,0 +1,36 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+import QtQuick.Controls.Universal.impl
+
+T.HorizontalHeaderView {
+    id: control
+
+    implicitWidth: syncView ? syncView.width : 0
+    implicitHeight: contentHeight
+
+    delegate: Rectangle {
+        // Qt6: add cellPadding (and font etc) as public API in headerview
+        readonly property real cellPadding: 8
+
+        implicitWidth: text.implicitWidth + (cellPadding * 2)
+        implicitHeight: Math.max(control.height, text.implicitHeight + (cellPadding * 2))
+        color: control.Universal.background
+
+        Text {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            height: parent.height
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: Color.transparent(control.Universal.foreground, enabled ? 1.0 : 0.2)
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/ItemDelegate.qml b/src/quickcontrols/universal/ItemDelegate.qml
new file mode 100644
index 0000000000..ab999d6094
--- /dev/null
+++ b/src/quickcontrols/universal/ItemDelegate.qml
@@ -0,0 +1,53 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.ItemDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 12
+
+    padding: 12
+    topPadding: padding - 1
+    bottomPadding: padding + 1
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: Color.transparent(Universal.foreground, enabled ? 1.0 : 0.2)
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: Color.transparent(control.Universal.foreground, enabled ? 1.0 : 0.2)
+    }
+
+    background: Rectangle {
+        visible: enabled && (control.down || control.highlighted || control.visualFocus || control.hovered)
+        color: control.down ? control.Universal.listMediumColor :
+               control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            visible: control.visualFocus || control.highlighted
+            color: control.Universal.accent
+            opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6
+        }
+
+    }
+}
diff --git a/src/quickcontrols/universal/Label.qml b/src/quickcontrols/universal/Label.qml
new file mode 100644
index 0000000000..e77f48d185
--- /dev/null
+++ b/src/quickcontrols/universal/Label.qml
@@ -0,0 +1,14 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.Label {
+    id: control
+
+    opacity: enabled ? 1.0 : 0.2
+    color: control.Universal.foreground
+    linkColor: Universal.accent
+}
diff --git a/src/quickcontrols/universal/Menu.qml b/src/quickcontrols/universal/Menu.qml
new file mode 100644
index 0000000000..64dac0c4b8
--- /dev/null
+++ b/src/quickcontrols/universal/Menu.qml
@@ -0,0 +1,49 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+import QtQuick.Window
+
+T.Menu {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    margins: 0
+    overlap: 1
+
+    delegate: MenuItem { }
+
+    contentItem: ListView {
+        implicitHeight: contentHeight
+        model: control.contentModel
+        interactive: Window.window
+                        ? contentHeight + control.topPadding + control.bottomPadding > Window.window.height
+                        : false
+        clip: true
+        currentIndex: control.currentIndex
+
+        ScrollIndicator.vertical: ScrollIndicator {}
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 40
+        color: control.Universal.chromeMediumLowColor
+        border.color: control.Universal.chromeHighColor
+        border.width: 1 // FlyoutBorderThemeThickness
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Universal.baseLowColor
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Universal.baseLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/MenuBar.qml b/src/quickcontrols/universal/MenuBar.qml
new file mode 100644
index 0000000000..1c0f4c6b2d
--- /dev/null
+++ b/src/quickcontrols/universal/MenuBar.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.MenuBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    delegate: MenuBarItem { }
+
+    contentItem: Row {
+        spacing: control.spacing
+        Repeater {
+            model: control.contentModel
+        }
+    }
+
+    background: Rectangle {
+        implicitHeight: 40
+        color: control.Universal.chromeMediumColor
+    }
+}
diff --git a/src/quickcontrols/universal/MenuBarItem.qml b/src/quickcontrols/universal/MenuBarItem.qml
new file mode 100644
index 0000000000..84dfb22fad
--- /dev/null
+++ b/src/quickcontrols/universal/MenuBarItem.qml
@@ -0,0 +1,57 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.MenuBarItem {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 12
+    topPadding: padding - 1
+    bottomPadding: padding + 1
+    spacing: 12
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: !enabled ? Universal.baseLowColor : Universal.baseHighColor
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: !control.enabled ? control.Universal.baseLowColor : control.Universal.baseHighColor
+    }
+
+    background: Rectangle {
+        implicitWidth: 40
+        implicitHeight: 40
+
+        color: !control.enabled ? control.Universal.baseLowColor :
+                control.down ? control.Universal.listMediumColor :
+                control.highlighted ? control.Universal.listLowColor : "transparent"
+
+        Rectangle {
+            x: 1; y: 1
+            width: parent.width - 2
+            height: parent.height - 2
+
+            visible: control.visualFocus
+            color: control.Universal.accent
+            opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/MenuItem.qml b/src/quickcontrols/universal/MenuItem.qml
new file mode 100644
index 0000000000..00b9d16228
--- /dev/null
+++ b/src/quickcontrols/universal/MenuItem.qml
@@ -0,0 +1,81 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.MenuItem {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 12
+    topPadding: padding - 1
+    bottomPadding: padding + 1
+    spacing: 12
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: !enabled ? Universal.baseLowColor : Universal.baseHighColor
+
+    contentItem: IconLabel {
+        readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
+        readonly property real indicatorPadding: control.checkable && control.indicator ? control.indicator.width + control.spacing : 0
+        leftPadding: !control.mirrored ? indicatorPadding : arrowPadding
+        rightPadding: control.mirrored ? indicatorPadding : arrowPadding
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: !control.enabled ? control.Universal.baseLowColor : control.Universal.baseHighColor
+    }
+
+    arrow: ColorImage {
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        visible: control.subMenu
+        mirror: control.mirrored
+        color: !enabled ? control.Universal.baseLowColor : control.Universal.baseHighColor
+        source: "qrc:/qt-project.org/imports/QtQuick/Controls/Universal/images/rightarrow.png"
+    }
+
+    indicator: ColorImage {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        visible: control.checked
+        color: !control.enabled ? control.Universal.baseLowColor : control.down ? control.Universal.baseHighColor : control.Universal.baseMediumHighColor
+        source: !control.checkable ? "" : "qrc:/qt-project.org/imports/QtQuick/Controls/Universal/images/checkmark.png"
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 40
+
+        color: !control.enabled ? control.Universal.baseLowColor :
+                control.down ? control.Universal.listMediumColor :
+                control.highlighted ? control.Universal.listLowColor : control.Universal.altMediumLowColor
+
+        Rectangle {
+            x: 1; y: 1
+            width: parent.width - 2
+            height: parent.height - 2
+
+            visible: control.visualFocus
+            color: control.Universal.accent
+            opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/MenuSeparator.qml b/src/quickcontrols/universal/MenuSeparator.qml
new file mode 100644
index 0000000000..dc814ef2fe
--- /dev/null
+++ b/src/quickcontrols/universal/MenuSeparator.qml
@@ -0,0 +1,29 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.MenuSeparator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 12
+    topPadding: 9
+    bottomPadding: 10
+
+    contentItem: Rectangle {
+        implicitWidth: 188
+        implicitHeight: 1
+        color: control.Universal.baseMediumLowColor
+    }
+
+    background: Rectangle {
+        color: control.Universal.altMediumLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/Page.qml b/src/quickcontrols/universal/Page.qml
new file mode 100644
index 0000000000..7e2c69aa5b
--- /dev/null
+++ b/src/quickcontrols/universal/Page.qml
@@ -0,0 +1,23 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.Page {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding,
+                            implicitHeaderWidth,
+                            implicitFooterWidth)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding
+                             + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+                             + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
+
+    background: Rectangle {
+        color: control.Universal.background
+    }
+}
diff --git a/src/quickcontrols/universal/PageIndicator.qml b/src/quickcontrols/universal/PageIndicator.qml
new file mode 100644
index 0000000000..68147f6996
--- /dev/null
+++ b/src/quickcontrols/universal/PageIndicator.qml
@@ -0,0 +1,38 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.PageIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 7
+
+    delegate: Rectangle {
+        implicitWidth: 5
+        implicitHeight: 5
+
+        radius: width / 2
+        color: index === control.currentIndex ? control.Universal.baseMediumHighColor :
+                                      pressed ? control.Universal.baseMediumLowColor : control.Universal.baseLowColor
+
+        required property int index
+    }
+
+    contentItem: Row {
+        spacing: control.spacing
+
+        Repeater {
+            model: control.count
+            delegate: control.delegate
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/Pane.qml b/src/quickcontrols/universal/Pane.qml
new file mode 100644
index 0000000000..2f27979c4b
--- /dev/null
+++ b/src/quickcontrols/universal/Pane.qml
@@ -0,0 +1,21 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.Pane {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 12
+
+    background: Rectangle {
+        color: control.Universal.background
+    }
+}
diff --git a/src/quickcontrols/universal/Popup.qml b/src/quickcontrols/universal/Popup.qml
new file mode 100644
index 0000000000..5899919791
--- /dev/null
+++ b/src/quickcontrols/universal/Popup.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.Popup {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    padding: 12
+
+    background: Rectangle {
+        color: control.Universal.chromeMediumLowColor
+        border.color: control.Universal.chromeHighColor
+        border.width: 1 // FlyoutBorderThemeThickness
+    }
+
+    T.Overlay.modal: Rectangle {
+        color: control.Universal.baseLowColor
+    }
+
+    T.Overlay.modeless: Rectangle {
+        color: control.Universal.baseLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/ProgressBar.qml b/src/quickcontrols/universal/ProgressBar.qml
new file mode 100644
index 0000000000..803941f865
--- /dev/null
+++ b/src/quickcontrols/universal/ProgressBar.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+import QtQuick.Controls.Universal.impl
+
+T.ProgressBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    contentItem: ProgressBarImpl {
+        implicitHeight: 10
+
+        scale: control.mirrored ? -1 : 1
+        color: control.Universal.accent
+        progress: control.position
+        indeterminate: control.visible && control.indeterminate
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 10
+        y: (control.height - height) / 2
+        height: 10
+
+        visible: !control.indeterminate
+        color: control.Universal.baseLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/README.md b/src/quickcontrols/universal/README.md
new file mode 100644
index 0000000000..8d02d18ba3
--- /dev/null
+++ b/src/quickcontrols/universal/README.md
@@ -0,0 +1,9 @@
+# Universal Style
+
+This style is based on the [Microsoft Universal Design Guidelines](https://dev.windows.com/design).
+
+The colors and metrics used all around the QML and C++ files originate from the Windows 10 SDK. The files are called **generic.xaml** and **themeresources.xml**, and they are located in the following folder:
+
+    \(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic
+
+See also [XAML theme resources](https://msdn.microsoft.com/en-us/library/windows/apps/mt187274.aspx).
diff --git a/src/quickcontrols/universal/RadioButton.qml b/src/quickcontrols/universal/RadioButton.qml
new file mode 100644
index 0000000000..b7e594308b
--- /dev/null
+++ b/src/quickcontrols/universal/RadioButton.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+import QtQuick.Controls.Universal.impl
+
+T.RadioButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 8
+
+    property bool useSystemFocusVisuals: true
+
+    indicator: RadioIndicator {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+
+        opacity: enabled ? 1.0 : 0.2
+        color: control.Universal.foreground
+    }
+}
diff --git a/src/quickcontrols/universal/RadioDelegate.qml b/src/quickcontrols/universal/RadioDelegate.qml
new file mode 100644
index 0000000000..9e9899d15a
--- /dev/null
+++ b/src/quickcontrols/universal/RadioDelegate.qml
@@ -0,0 +1,63 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+import QtQuick.Controls.Universal.impl
+
+T.RadioDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 12
+
+    padding: 12
+    topPadding: padding - 1
+    bottomPadding: padding + 1
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: Color.transparent(Universal.foreground, enabled ? 1.0 : 0.2)
+
+    indicator: RadioIndicator {
+        x: control.text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: IconLabel {
+        leftPadding: !control.mirrored ? 0 : control.indicator.width + control.spacing
+        rightPadding: control.mirrored ? 0 : control.indicator.width + control.spacing
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: Color.transparent(control.Universal.foreground, enabled ? 1.0 : 0.2)
+    }
+
+    background: Rectangle {
+        visible: enabled && (control.down || control.highlighted || control.visualFocus || control.hovered)
+        color: control.down ? control.Universal.listMediumColor :
+               control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            visible: control.visualFocus || control.highlighted
+            color: control.Universal.accent
+            opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6
+        }
+
+    }
+}
diff --git a/src/quickcontrols/universal/RangeSlider.qml b/src/quickcontrols/universal/RangeSlider.qml
new file mode 100644
index 0000000000..cd85d930bb
--- /dev/null
+++ b/src/quickcontrols/universal/RangeSlider.qml
@@ -0,0 +1,76 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.RangeSlider {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            first.implicitHandleWidth + leftPadding + rightPadding,
+                            second.implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             first.implicitHandleHeight + topPadding + bottomPadding,
+                             second.implicitHandleHeight + topPadding + bottomPadding)
+
+    padding: 6
+
+    first.handle: Rectangle {
+        implicitWidth: control.horizontal ? 8 : 24
+        implicitHeight: control.horizontal ? 24 : 8
+
+        x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
+
+        radius: 4
+        color: control.first.pressed ? control.Universal.chromeHighColor :
+               control.first.hovered ? control.Universal.chromeAltLowColor :
+               control.enabled ? control.Universal.accent : control.Universal.chromeDisabledHighColor
+    }
+
+    second.handle: Rectangle {
+        implicitWidth: control.horizontal ? 8 : 24
+        implicitHeight: control.horizontal ? 24 : 8
+
+        x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
+
+        radius: 4
+        color: control.second.pressed ? control.Universal.chromeHighColor :
+               control.second.hovered ? control.Universal.chromeAltLowColor :
+               control.enabled ? control.Universal.accent : control.Universal.chromeDisabledHighColor
+    }
+
+    background: Item {
+        implicitWidth: control.horizontal ? 200 : 18
+        implicitHeight: control.horizontal ? 18 : 200
+
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
+
+        scale: control.horizontal && control.mirrored ? -1 : 1
+
+        Rectangle {
+            x: control.horizontal ? 0 : (parent.width - width) / 2
+            y: control.horizontal ? (parent.height - height) / 2 : 0
+            width: control.horizontal ? parent.width : 2 // SliderBackgroundThemeHeight
+            height: control.vertical ? parent.height : 2 // SliderBackgroundThemeHeight
+
+            color: enabled && control.hovered && !control.pressed ? control.Universal.baseMediumColor :
+                   control.enabled ? control.Universal.baseMediumLowColor : control.Universal.chromeDisabledHighColor
+        }
+
+        Rectangle {
+            x: control.horizontal ? control.first.position * parent.width : (parent.width - width) / 2
+            y: control.horizontal ? (parent.height - height) / 2 : control.second.visualPosition * parent.height
+            width: control.horizontal ? control.second.position * parent.width - control.first.position * parent.width : 2 // SliderBackgroundThemeHeight
+            height: control.vertical ? control.second.position * parent.height - control.first.position * parent.height : 2 // SliderBackgroundThemeHeight
+
+            color: control.enabled ? control.Universal.accent : control.Universal.chromeDisabledHighColor
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/RoundButton.qml b/src/quickcontrols/universal/RoundButton.qml
new file mode 100644
index 0000000000..c2d0f9e823
--- /dev/null
+++ b/src/quickcontrols/universal/RoundButton.qml
@@ -0,0 +1,57 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.RoundButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 8
+    spacing: 8
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: Color.transparent(Universal.foreground, enabled ? 1.0 : 0.2)
+
+    property bool useSystemFocusVisuals: true
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: Color.transparent(control.Universal.foreground, enabled ? 1.0 : 0.2)
+    }
+
+    background: Rectangle {
+        implicitWidth: 32
+        implicitHeight: 32
+
+        radius: control.radius
+        visible: !control.flat || control.down || control.checked || control.highlighted
+        color: control.down ? control.Universal.baseMediumLowColor :
+               control.enabled && (control.highlighted || control.checked) ? control.Universal.accent :
+                                                                             control.Universal.baseLowColor
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            radius: control.radius
+            color: "transparent"
+            visible: enabled && control.hovered
+            border.width: 2 // ButtonBorderThemeThickness
+            border.color: control.Universal.baseMediumLowColor
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/ScrollBar.qml b/src/quickcontrols/universal/ScrollBar.qml
new file mode 100644
index 0000000000..a5ab5fc762
--- /dev/null
+++ b/src/quickcontrols/universal/ScrollBar.qml
@@ -0,0 +1,61 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.ScrollBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    visible: control.policy !== T.ScrollBar.AlwaysOff
+    minimumSize: orientation === Qt.Horizontal ? height / width : width / height
+
+    // TODO: arrows
+
+    contentItem: Rectangle {
+        implicitWidth: control.interactive ? 12 : 6
+        implicitHeight: control.interactive ? 12: 6
+
+        color: control.pressed ? control.Universal.baseMediumColor :
+               enabled && control.interactive && control.hovered ? control.Universal.baseMediumLowColor :
+               control.Universal.chromeHighColor
+        opacity: 0.0
+    }
+
+    background: Rectangle {
+        implicitWidth: control.interactive ? 12 : 6
+        implicitHeight: control.interactive ? 12: 6
+
+        color: control.Universal.chromeLowColor
+        visible: control.size < 1.0
+        opacity: 0.0
+    }
+
+    states: [
+        State {
+            name: "active"
+            when: control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0)
+        }
+    ]
+
+    transitions: [
+        Transition {
+            to: "active"
+            NumberAnimation { targets: [control.contentItem, control.background]; property: "opacity"; to: 1.0 }
+        },
+        Transition {
+            from: "active"
+            SequentialAnimation {
+                PropertyAction{ targets: [control.contentItem, control.background]; property: "opacity"; value: 1.0 }
+                PauseAnimation { duration: 3000 }
+                NumberAnimation { targets: [control.contentItem, control.background]; property: "opacity"; to: 0.0 }
+            }
+        }
+    ]
+}
diff --git a/src/quickcontrols/universal/ScrollIndicator.qml b/src/quickcontrols/universal/ScrollIndicator.qml
new file mode 100644
index 0000000000..1df2163498
--- /dev/null
+++ b/src/quickcontrols/universal/ScrollIndicator.qml
@@ -0,0 +1,45 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.ScrollIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    contentItem: Rectangle {
+        implicitWidth: 6
+        implicitHeight: 6
+
+        color: control.Universal.baseMediumLowColor
+        visible: control.size < 1.0
+        opacity: 0.0
+
+        states: [
+            State {
+                name: "active"
+                when: control.active
+            }
+        ]
+
+        transitions: [
+            Transition {
+                to: "active"
+                NumberAnimation { target: control.contentItem; property: "opacity"; to: 1.0 }
+            },
+            Transition {
+                from: "active"
+                SequentialAnimation {
+                    PauseAnimation { duration: 5000 }
+                    NumberAnimation { target: control.contentItem; property: "opacity"; to: 0.0 }
+                }
+            }
+        ]
+    }
+}
diff --git a/src/quickcontrols/universal/ScrollView.qml b/src/quickcontrols/universal/ScrollView.qml
new file mode 100644
index 0000000000..60789313c9
--- /dev/null
+++ b/src/quickcontrols/universal/ScrollView.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ScrollView {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    ScrollBar.vertical: ScrollBar {
+        parent: control
+        x: control.mirrored ? 0 : control.width - width
+        y: control.topPadding
+        height: control.availableHeight
+        active: control.ScrollBar.horizontal.active
+    }
+
+    ScrollBar.horizontal: ScrollBar {
+        parent: control
+        x: control.leftPadding
+        y: control.height - height
+        width: control.availableWidth
+        active: control.ScrollBar.vertical.active
+    }
+}
diff --git a/src/quickcontrols/universal/SelectionRectangle.qml b/src/quickcontrols/universal/SelectionRectangle.qml
new file mode 100644
index 0000000000..e7b99852da
--- /dev/null
+++ b/src/quickcontrols/universal/SelectionRectangle.qml
@@ -0,0 +1,37 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.SelectionRectangle {
+    id: control
+
+    topLeftHandle: handle
+    bottomRightHandle: handle
+
+    Component {
+        id: handle
+        Rectangle {
+            implicitWidth: 8
+            implicitHeight: 24
+            radius: 4
+            color: tapHandler.pressed || SelectionRectangle.dragging ? control.Universal.chromeHighColor :
+                   hoverHandler.hovered ? control.Universal.chromeAltLowColor :
+                   control.Universal.accent
+            visible: control.active
+
+            property Item control: SelectionRectangle.control
+
+            HoverHandler {
+                id: hoverHandler
+            }
+
+            TapHandler  {
+                id: tapHandler
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/Slider.qml b/src/quickcontrols/universal/Slider.qml
new file mode 100644
index 0000000000..305c5c321f
--- /dev/null
+++ b/src/quickcontrols/universal/Slider.qml
@@ -0,0 +1,63 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.Slider {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitHandleHeight + topPadding + bottomPadding)
+
+    padding: 6
+
+    property bool useSystemFocusVisuals: true
+
+    handle: Rectangle {
+        implicitWidth: control.horizontal ? 8 : 24
+        implicitHeight: control.horizontal ? 24 : 8
+
+        x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
+
+        radius: 4
+        color: control.pressed ? control.Universal.chromeHighColor :
+               control.enabled ? control.hovered ? control.Universal.chromeAltLowColor :
+               control.Universal.accent : control.Universal.chromeDisabledHighColor
+    }
+
+    background: Item {
+        implicitWidth: control.horizontal ? 200 : 18
+        implicitHeight: control.horizontal ? 18 : 200
+
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
+
+        scale: control.horizontal && control.mirrored ? -1 : 1
+
+        Rectangle {
+            x: control.horizontal ? 0 : (parent.width - width) / 2
+            y: control.horizontal ? (parent.height - height) / 2 : 0
+            width: control.horizontal ? parent.width : 2 // SliderTrackThemeHeight
+            height: !control.horizontal ? parent.height : 2 // SliderTrackThemeHeight
+
+            color: enabled && control.hovered && !control.pressed ? control.Universal.baseMediumColor :
+                   control.enabled ? control.Universal.baseMediumLowColor : control.Universal.chromeDisabledHighColor
+        }
+
+        Rectangle {
+            x: control.horizontal ? 0 : (parent.width - width) / 2
+            y: control.horizontal ? (parent.height - height) / 2 : control.visualPosition * parent.height
+            width: control.horizontal ? control.position * parent.width : 2 // SliderTrackThemeHeight
+            height: !control.horizontal ? control.position * parent.height : 2 // SliderTrackThemeHeight
+
+            color: control.enabled ? control.Universal.accent : control.Universal.chromeDisabledHighColor
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/SpinBox.qml b/src/quickcontrols/universal/SpinBox.qml
new file mode 100644
index 0000000000..07721c8712
--- /dev/null
+++ b/src/quickcontrols/universal/SpinBox.qml
@@ -0,0 +1,114 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.SpinBox {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentItem.implicitWidth + 16 +
+                            up.implicitIndicatorWidth +
+                            down.implicitIndicatorWidth)
+    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
+                             implicitBackgroundHeight,
+                             up.implicitIndicatorHeight,
+                             down.implicitIndicatorHeight)
+
+    // TextControlThemePadding + 2 (border)
+    padding: 12
+    topPadding: padding - 7
+    leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
+    rightPadding: padding - 4 + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
+    bottomPadding: padding - 5
+
+    Universal.theme: activeFocus ? Universal.Light : undefined
+
+    validator: IntValidator {
+        locale: control.locale.name
+        bottom: Math.min(control.from, control.to)
+        top: Math.max(control.from, control.to)
+    }
+
+    contentItem: TextInput {
+        text: control.displayText
+
+        font: control.font
+        color: !enabled ? control.Universal.chromeDisabledLowColor :
+                activeFocus ? control.Universal.chromeBlackHighColor : control.Universal.foreground
+        selectionColor: control.Universal.accent
+        selectedTextColor: control.Universal.chromeWhiteColor
+        horizontalAlignment: Qt.AlignHCenter
+        verticalAlignment: TextInput.AlignVCenter
+
+        readOnly: !control.editable
+        validator: control.validator
+        inputMethodHints: control.inputMethodHints
+    }
+
+    up.indicator: Item {
+        implicitWidth: 28
+        height: control.height + 4
+        y: -2
+        x: control.mirrored ? 0 : control.width - width
+
+        Rectangle {
+            x: 2; y: 4
+            width: parent.width - 4
+            height: parent.height - 8
+            color: control.activeFocus ? control.Universal.accent :
+                   control.up.pressed ? control.Universal.baseMediumLowColor :
+                   control.up.hovered ? control.Universal.baseLowColor : "transparent"
+            visible: control.up.pressed || control.up.hovered
+            opacity: control.activeFocus && !control.up.pressed ? 0.4 : 1.0
+        }
+
+        ColorImage {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            color: !enabled ? control.Universal.chromeDisabledLowColor :
+                              control.activeFocus ? control.Universal.chromeBlackHighColor : control.Universal.baseHighColor
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Universal/images/" + (control.mirrored ? "left" : "right") + "arrow.png"
+        }
+    }
+
+    down.indicator: Item {
+        implicitWidth: 28
+        height: control.height + 4
+        y: -2
+        x: control.mirrored ? control.width - width : 0
+
+        Rectangle {
+            x: 2; y: 4
+            width: parent.width - 4
+            height: parent.height - 8
+            color: control.activeFocus ? control.Universal.accent :
+                   control.down.pressed ? control.Universal.baseMediumLowColor :
+                   control.down.hovered ? control.Universal.baseLowColor : "transparent"
+            visible: control.down.pressed || control.down.hovered
+            opacity: control.activeFocus && !control.down.pressed ? 0.4 : 1.0
+        }
+
+        ColorImage {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            color: !enabled ? control.Universal.chromeDisabledLowColor :
+                              control.activeFocus ? control.Universal.chromeBlackHighColor : control.Universal.baseHighColor
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Universal/images/" + (control.mirrored ? "right" : "left") + "arrow.png"
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 60 + 28 // TextControlThemeMinWidth - 4 (border)
+        implicitHeight: 28 // TextControlThemeMinHeight - 4 (border)
+
+        border.width: 2 // TextControlBorderThemeThickness
+        border.color: !control.enabled ? control.Universal.baseLowColor :
+                       control.activeFocus ? control.Universal.accent :
+                       control.hovered ? control.Universal.baseMediumColor : control.Universal.chromeDisabledLowColor
+        color: control.enabled ? control.Universal.background : control.Universal.baseLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/SplitView.qml b/src/quickcontrols/universal/SplitView.qml
new file mode 100644
index 0000000000..e18169db6a
--- /dev/null
+++ b/src/quickcontrols/universal/SplitView.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.SplitView {
+    id: control
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    handle: Rectangle {
+        implicitWidth: control.orientation === Qt.Horizontal ? 6 : control.width
+        implicitHeight: control.orientation === Qt.Horizontal ? control.height : 6
+        color: T.SplitHandle.pressed ? control.Universal.baseMediumColor
+            : (enabled && T.SplitHandle.hovered ? control.Universal.baseMediumLowColor : control.Universal.chromeHighColor)
+    }
+}
diff --git a/src/quickcontrols/universal/StackView.qml b/src/quickcontrols/universal/StackView.qml
new file mode 100644
index 0000000000..b5d568f98d
--- /dev/null
+++ b/src/quickcontrols/universal/StackView.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.StackView {
+    id: control
+
+    popEnter: Transition {
+        ParallelAnimation {
+            NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 200; easing.type: Easing.InQuint }
+            NumberAnimation { property: "x"; from: (control.mirrored ? -0.3 : 0.3) * -control.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
+        }
+    }
+
+    popExit: Transition {
+        NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 200; easing.type: Easing.OutQuint }
+    }
+
+    pushEnter: Transition {
+        ParallelAnimation {
+            NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 200; easing.type: Easing.InQuint }
+            NumberAnimation { property: "x"; from: (control.mirrored ? -0.3 : 0.3) * control.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
+        }
+    }
+
+    pushExit: Transition {
+        NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 200; easing.type: Easing.OutQuint }
+    }
+
+    replaceEnter: Transition {
+        ParallelAnimation {
+            NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 200; easing.type: Easing.InQuint }
+            NumberAnimation { property: "x"; from: (control.mirrored ? -0.3 : 0.3) * control.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
+        }
+    }
+
+    replaceExit: Transition {
+        NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 200; easing.type: Easing.OutQuint }
+    }
+}
diff --git a/src/quickcontrols/universal/SwipeDelegate.qml b/src/quickcontrols/universal/SwipeDelegate.qml
new file mode 100644
index 0000000000..0bb2367ca7
--- /dev/null
+++ b/src/quickcontrols/universal/SwipeDelegate.qml
@@ -0,0 +1,59 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.SwipeDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 12
+
+    padding: 12
+    topPadding: padding - 1
+    bottomPadding: padding + 1
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: Color.transparent(Universal.foreground, enabled ? 1.0 : 0.2)
+
+    swipe.transition: Transition { SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic } }
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: Color.transparent(control.Universal.foreground, enabled ? 1.0 : 0.2)
+    }
+
+    background: Rectangle {
+        color: control.Universal.background
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            color: control.down ? control.Universal.listMediumColor :
+                   enabled && control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor
+            Rectangle {
+                width: parent.width
+                height: parent.height
+                visible: control.visualFocus || control.highlighted
+                color: control.Universal.accent
+                opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/Switch.qml b/src/quickcontrols/universal/Switch.qml
new file mode 100644
index 0000000000..70de360bde
--- /dev/null
+++ b/src/quickcontrols/universal/Switch.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+import QtQuick.Controls.Universal.impl
+
+T.Switch {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 5
+    spacing: 8
+
+    property bool useSystemFocusVisuals: true
+
+    indicator: SwitchIndicator {
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+
+        opacity: enabled ? 1.0 : 0.2
+        color: control.Universal.foreground
+    }
+}
diff --git a/src/quickcontrols/universal/SwitchDelegate.qml b/src/quickcontrols/universal/SwitchDelegate.qml
new file mode 100644
index 0000000000..18a55e9cd9
--- /dev/null
+++ b/src/quickcontrols/universal/SwitchDelegate.qml
@@ -0,0 +1,63 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+import QtQuick.Controls.Universal.impl
+
+T.SwitchDelegate {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: 12
+
+    padding: 12
+    topPadding: padding - 1
+    bottomPadding: padding + 1
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: Color.transparent(Universal.foreground, enabled ? 1.0 : 0.2)
+
+    indicator: SwitchIndicator {
+        x: control.text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+
+    contentItem: IconLabel {
+        leftPadding: !control.mirrored ? 0 : control.indicator.width + control.spacing
+        rightPadding: control.mirrored ? 0 : control.indicator.width + control.spacing
+
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: Color.transparent(control.Universal.foreground, enabled ? 1.0 : 0.2)
+    }
+
+    background: Rectangle {
+        visible: enabled && (control.down || control.highlighted || control.visualFocus || control.hovered)
+        color: control.down ? control.Universal.listMediumColor :
+               control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            visible: control.visualFocus || control.highlighted
+            color: control.Universal.accent
+            opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6
+        }
+
+    }
+}
diff --git a/src/quickcontrols/universal/TabBar.qml b/src/quickcontrols/universal/TabBar.qml
new file mode 100644
index 0000000000..c06aaaf541
--- /dev/null
+++ b/src/quickcontrols/universal/TabBar.qml
@@ -0,0 +1,37 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.TabBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    contentItem: ListView {
+        model: control.contentModel
+        currentIndex: control.currentIndex
+
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+        snapMode: ListView.SnapToItem
+
+        highlightMoveDuration: 100
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: 48
+        preferredHighlightEnd: width - 48
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 48
+        color: control.Universal.background
+    }
+}
diff --git a/src/quickcontrols/universal/TabButton.qml b/src/quickcontrols/universal/TabButton.qml
new file mode 100644
index 0000000000..7c8080301e
--- /dev/null
+++ b/src/quickcontrols/universal/TabButton.qml
@@ -0,0 +1,36 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.TabButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 12 // PivotItemMargin
+    spacing: 8
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: Color.transparent(control.hovered ? control.Universal.baseMediumHighColor : control.Universal.foreground,
+                                                    control.checked || control.down || control.hovered ? 1.0 : 0.2)
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: Color.transparent(enabled && control.hovered ? control.Universal.baseMediumHighColor : control.Universal.foreground,
+                                 control.checked || control.down || (enabled && control.hovered) ? 1.0 : 0.2)
+    }
+}
diff --git a/src/quickcontrols/universal/TextArea.qml b/src/quickcontrols/universal/TextArea.qml
new file mode 100644
index 0000000000..8a3cdd1119
--- /dev/null
+++ b/src/quickcontrols/universal/TextArea.qml
@@ -0,0 +1,60 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.TextArea {
+    id: control
+
+    implicitWidth: Math.max(contentWidth + leftPadding + rightPadding,
+                            implicitBackgroundWidth + leftInset + rightInset,
+                            placeholder.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
+                             implicitBackgroundHeight + topInset + bottomInset,
+                             placeholder.implicitHeight + topPadding + bottomPadding)
+
+    // TextControlThemePadding + 2 (border)
+    padding: 12
+    topPadding: padding - 7
+    rightPadding: padding - 4
+    bottomPadding: padding - 5
+
+    Universal.theme: activeFocus ? Universal.Light : undefined
+
+    color: !enabled ? Universal.chromeDisabledLowColor : Universal.foreground
+    selectionColor: Universal.accent
+    selectedTextColor: Universal.chromeWhiteColor
+    placeholderTextColor: !enabled ? Universal.chromeDisabledLowColor :
+                                     activeFocus ? Universal.chromeBlackMediumLowColor :
+                                                   Universal.baseMediumColor
+
+    PlaceholderText {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        verticalAlignment: control.verticalAlignment
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
+
+    background: Rectangle {
+        implicitWidth: 60 // TextControlThemeMinWidth - 4 (border)
+        implicitHeight: 28 // TextControlThemeMinHeight - 4 (border)
+
+        border.width: 2 // TextControlBorderThemeThickness
+        border.color: !control.enabled ? control.Universal.baseLowColor :
+                       control.activeFocus ? control.Universal.accent :
+                       control.hovered ? control.Universal.baseMediumColor : control.Universal.chromeDisabledLowColor
+        color: control.enabled ? control.Universal.background : control.Universal.baseLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/TextField.qml b/src/quickcontrols/universal/TextField.qml
new file mode 100644
index 0000000000..fb20779156
--- /dev/null
+++ b/src/quickcontrols/universal/TextField.qml
@@ -0,0 +1,60 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.TextField {
+    id: control
+
+    implicitWidth: implicitBackgroundWidth + leftInset + rightInset
+                   || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding,
+                             placeholder.implicitHeight + topPadding + bottomPadding)
+
+    // TextControlThemePadding + 2 (border)
+    padding: 12
+    topPadding: padding - 7
+    rightPadding: padding - 4
+    bottomPadding: padding - 5
+
+    Universal.theme: activeFocus ? Universal.Light : undefined
+
+    color: !enabled ? Universal.chromeDisabledLowColor : Universal.foreground
+    selectionColor: Universal.accent
+    selectedTextColor: Universal.chromeWhiteColor
+    placeholderTextColor: !enabled ? Universal.chromeDisabledLowColor :
+                                     activeFocus ? Universal.chromeBlackMediumLowColor :
+                                                   Universal.baseMediumColor
+    verticalAlignment: TextInput.AlignVCenter
+
+    PlaceholderText {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        verticalAlignment: control.verticalAlignment
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
+
+    background: Rectangle {
+        implicitWidth: 60 // TextControlThemeMinWidth - 4 (border)
+        implicitHeight: 28 // TextControlThemeMinHeight - 4 (border)
+
+        border.width: 2 // TextControlBorderThemeThickness
+        border.color: !control.enabled ? control.Universal.baseLowColor :
+                       control.activeFocus ? control.Universal.accent :
+                       control.hovered ? control.Universal.baseMediumColor : control.Universal.chromeDisabledLowColor
+        color: control.enabled ? control.Universal.background : control.Universal.baseLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/ToolBar.qml b/src/quickcontrols/universal/ToolBar.qml
new file mode 100644
index 0000000000..33aa490c08
--- /dev/null
+++ b/src/quickcontrols/universal/ToolBar.qml
@@ -0,0 +1,20 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.ToolBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    background: Rectangle {
+        implicitHeight: 48 // AppBarThemeCompactHeight
+        color: control.Universal.chromeMediumColor
+    }
+}
diff --git a/src/quickcontrols/universal/ToolButton.qml b/src/quickcontrols/universal/ToolButton.qml
new file mode 100644
index 0000000000..08c346b99e
--- /dev/null
+++ b/src/quickcontrols/universal/ToolButton.qml
@@ -0,0 +1,50 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+T.ToolButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 8
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: Color.transparent(Universal.foreground, enabled ? 1.0 : 0.2)
+
+    property bool useSystemFocusVisuals: true
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: Color.transparent(control.Universal.foreground, enabled ? 1.0 : 0.2)
+    }
+
+    background: Rectangle {
+        implicitWidth: 68
+        implicitHeight: 48 // AppBarThemeCompactHeight
+
+        color: control.enabled && (control.highlighted || control.checked) ? control.Universal.accent : "transparent"
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            visible: enabled && (control.down || control.hovered)
+            color: control.down ? control.Universal.listMediumColor : control.Universal.listLowColor
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/ToolSeparator.qml b/src/quickcontrols/universal/ToolSeparator.qml
new file mode 100644
index 0000000000..2d6cc9a3cc
--- /dev/null
+++ b/src/quickcontrols/universal/ToolSeparator.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.ToolSeparator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    leftPadding: vertical ? 16 : 12
+    rightPadding: vertical ? 15 : 12
+    topPadding: vertical ? 12 : 16
+    bottomPadding: vertical ? 12 : 15
+
+    contentItem: Rectangle {
+        implicitWidth: control.vertical ? 1 : 20
+        implicitHeight: control.vertical ? 20 : 1
+        color: control.Universal.baseMediumLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/ToolTip.qml b/src/quickcontrols/universal/ToolTip.qml
new file mode 100644
index 0000000000..af1d49586e
--- /dev/null
+++ b/src/quickcontrols/universal/ToolTip.qml
@@ -0,0 +1,39 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+T.ToolTip {
+    id: control
+
+    x: parent ? (parent.width - implicitWidth) / 2 : 0
+    y: -implicitHeight - 16
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    margins: 8
+    padding: 8
+    topPadding: padding - 3
+    bottomPadding: padding - 1
+
+    closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        wrapMode: Text.Wrap
+        opacity: enabled ? 1.0 : 0.2
+        color: control.Universal.foreground
+    }
+
+    background: Rectangle {
+        color: control.Universal.chromeMediumLowColor
+        border.color: control.Universal.chromeHighColor
+        border.width: 1 // ToolTipBorderThemeThickness
+    }
+}
diff --git a/src/quickcontrols/universal/Tumbler.qml b/src/quickcontrols/universal/Tumbler.qml
new file mode 100644
index 0000000000..03b5fcca63
--- /dev/null
+++ b/src/quickcontrols/universal/Tumbler.qml
@@ -0,0 +1,45 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+import QtQuick.Controls.impl
+
+T.Tumbler {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    delegate: Text {
+        text: modelData
+        font: control.font
+        color: control.Universal.foreground
+        opacity: (1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)) * (control.enabled ? 1 : 0.6)
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        required property var modelData
+        required property int index
+    }
+
+    contentItem: TumblerView {
+        implicitWidth: 60
+        implicitHeight: 200
+        model: control.model
+        delegate: control.delegate
+        path: Path {
+            startX: control.contentItem.width / 2
+            startY: -control.contentItem.delegateHeight / 2
+            PathLine {
+                x: control.contentItem.width / 2
+                y: (control.visibleItemCount + 1) * control.contentItem.delegateHeight - control.contentItem.delegateHeight / 2
+            }
+        }
+
+        property real delegateHeight: control.availableHeight / control.visibleItemCount
+    }
+}
diff --git a/src/quickcontrols/universal/VerticalHeaderView.qml b/src/quickcontrols/universal/VerticalHeaderView.qml
new file mode 100644
index 0000000000..189bed0906
--- /dev/null
+++ b/src/quickcontrols/universal/VerticalHeaderView.qml
@@ -0,0 +1,36 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+import QtQuick.Controls.Universal.impl
+
+T.VerticalHeaderView {
+    id: control
+
+    implicitWidth: contentWidth
+    implicitHeight: syncView ? syncView.height : 0
+
+    delegate: Rectangle {
+        // Qt6: add cellPadding (and font etc) as public API in headerview
+        readonly property real cellPadding: 8
+
+        implicitWidth: Math.max(control.width, text.implicitWidth + (cellPadding * 2))
+        implicitHeight: text.implicitHeight + (cellPadding * 2)
+        color: control.Universal.background
+
+        Text {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            height: parent.height
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: Color.transparent(control.Universal.foreground, enabled ? 1.0 : 0.2)
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/images/checkmark.png b/src/quickcontrols/universal/images/checkmark.png
new file mode 100644
index 0000000000..e2aae6fe0f
--- /dev/null
+++ b/src/quickcontrols/universal/images/checkmark.png
diff --git a/src/quickcontrols/universal/images/checkmark@2x.png b/src/quickcontrols/universal/images/checkmark@2x.png
new file mode 100644
index 0000000000..0df4159a7c
--- /dev/null
+++ b/src/quickcontrols/universal/images/checkmark@2x.png
diff --git a/src/quickcontrols/universal/images/checkmark@3x.png b/src/quickcontrols/universal/images/checkmark@3x.png
new file mode 100644
index 0000000000..43466cbcb6
--- /dev/null
+++ b/src/quickcontrols/universal/images/checkmark@3x.png
diff --git a/src/quickcontrols/universal/images/checkmark@4x.png b/src/quickcontrols/universal/images/checkmark@4x.png
new file mode 100644
index 0000000000..7a47bd2159
--- /dev/null
+++ b/src/quickcontrols/universal/images/checkmark@4x.png
diff --git a/src/quickcontrols/universal/images/downarrow.png b/src/quickcontrols/universal/images/downarrow.png
new file mode 100644
index 0000000000..b66e2efc22
--- /dev/null
+++ b/src/quickcontrols/universal/images/downarrow.png
diff --git a/src/quickcontrols/universal/images/downarrow@2x.png b/src/quickcontrols/universal/images/downarrow@2x.png
new file mode 100644
index 0000000000..a704376c8f
--- /dev/null
+++ b/src/quickcontrols/universal/images/downarrow@2x.png
diff --git a/src/quickcontrols/universal/images/downarrow@3x.png b/src/quickcontrols/universal/images/downarrow@3x.png
new file mode 100644
index 0000000000..3b6d55ab4c
--- /dev/null
+++ b/src/quickcontrols/universal/images/downarrow@3x.png
diff --git a/src/quickcontrols/universal/images/downarrow@4x.png b/src/quickcontrols/universal/images/downarrow@4x.png
new file mode 100644
index 0000000000..818c6b24ff
--- /dev/null
+++ b/src/quickcontrols/universal/images/downarrow@4x.png
diff --git a/src/quickcontrols/universal/images/leftarrow.png b/src/quickcontrols/universal/images/leftarrow.png
new file mode 100644
index 0000000000..0153ccd421
--- /dev/null
+++ b/src/quickcontrols/universal/images/leftarrow.png
diff --git a/src/quickcontrols/universal/images/leftarrow@2x.png b/src/quickcontrols/universal/images/leftarrow@2x.png
new file mode 100644
index 0000000000..fa692d5b0f
--- /dev/null
+++ b/src/quickcontrols/universal/images/leftarrow@2x.png
diff --git a/src/quickcontrols/universal/images/leftarrow@3x.png b/src/quickcontrols/universal/images/leftarrow@3x.png
new file mode 100644
index 0000000000..06b0207a60
--- /dev/null
+++ b/src/quickcontrols/universal/images/leftarrow@3x.png
diff --git a/src/quickcontrols/universal/images/leftarrow@4x.png b/src/quickcontrols/universal/images/leftarrow@4x.png
new file mode 100644
index 0000000000..1049f616e4
--- /dev/null
+++ b/src/quickcontrols/universal/images/leftarrow@4x.png
diff --git a/src/quickcontrols/universal/images/rightarrow.png b/src/quickcontrols/universal/images/rightarrow.png
new file mode 100644
index 0000000000..b24d117d79
--- /dev/null
+++ b/src/quickcontrols/universal/images/rightarrow.png
diff --git a/src/quickcontrols/universal/images/rightarrow@2x.png b/src/quickcontrols/universal/images/rightarrow@2x.png
new file mode 100644
index 0000000000..80aca7c18f
--- /dev/null
+++ b/src/quickcontrols/universal/images/rightarrow@2x.png
diff --git a/src/quickcontrols/universal/images/rightarrow@3x.png b/src/quickcontrols/universal/images/rightarrow@3x.png
new file mode 100644
index 0000000000..ba01724065
--- /dev/null
+++ b/src/quickcontrols/universal/images/rightarrow@3x.png
diff --git a/src/quickcontrols/universal/images/rightarrow@4x.png b/src/quickcontrols/universal/images/rightarrow@4x.png
new file mode 100644
index 0000000000..21f7ed4d15
--- /dev/null
+++ b/src/quickcontrols/universal/images/rightarrow@4x.png
diff --git a/src/quickcontrols/universal/impl/CMakeLists.txt b/src/quickcontrols/universal/impl/CMakeLists.txt
new file mode 100644
index 0000000000..078e42e217
--- /dev/null
+++ b/src/quickcontrols/universal/impl/CMakeLists.txt
@@ -0,0 +1,39 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2universalstyleimplplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "CheckIndicator.qml"
+    "RadioIndicator.qml"
+    "SwitchIndicator.qml"
+)
+
+qt_internal_add_qml_module(qtquickcontrols2universalstyleimplplugin
+    URI "QtQuick.Controls.Universal.impl"
+    VERSION "${PROJECT_VERSION}"
+    PAST_MAJOR_VERSIONS 2
+    CLASS_NAME QtQuickControls2UniversalStyleImplPlugin
+    DEPENDENCIES
+        QtQuick/auto
+    PLUGIN_TARGET qtquickcontrols2universalstyleimplplugin
+    NO_PLUGIN_OPTIONAL
+    SOURCES
+        qquickuniversalbusyindicator.cpp qquickuniversalbusyindicator_p.h
+        qquickuniversalfocusrectangle.cpp qquickuniversalfocusrectangle_p.h
+        qquickuniversalprogressbar.cpp qquickuniversalprogressbar_p.h
+    QML_FILES
+        ${qml_files}
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::Gui
+        Qt::QmlPrivate
+        Qt::QuickControls2ImplPrivate
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+)
diff --git a/src/quickcontrols/universal/impl/CheckIndicator.qml b/src/quickcontrols/universal/impl/CheckIndicator.qml
new file mode 100644
index 0000000000..b78e57570d
--- /dev/null
+++ b/src/quickcontrols/universal/impl/CheckIndicator.qml
@@ -0,0 +1,48 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+
+Rectangle {
+    id: indicator
+    implicitWidth: 20
+    implicitHeight: 20
+
+    color: !control.enabled ? "transparent" :
+            control.down && !partiallyChecked ? control.Universal.baseMediumColor :
+            control.checkState === Qt.Checked ? control.Universal.accent : "transparent"
+    border.color: !control.enabled ? control.Universal.baseLowColor :
+                   control.down ? control.Universal.baseMediumColor :
+                   control.checked ? control.Universal.accent : control.Universal.baseMediumHighColor
+    border.width: 2 // CheckBoxBorderThemeThickness
+
+    property Item control
+    readonly property bool partiallyChecked: control.checkState === Qt.PartiallyChecked
+
+    ColorImage {
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+
+        visible: indicator.control.checkState === Qt.Checked
+        color: !indicator.control.enabled ? indicator.control.Universal.baseLowColor : indicator.control.Universal.chromeWhiteColor
+        source: "qrc:/qt-project.org/imports/QtQuick/Controls/Universal/images/checkmark.png"
+    }
+
+    Rectangle {
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+        width: indicator.partiallyChecked ? parent.width / 2 : parent.width
+        height: indicator.partiallyChecked ? parent.height / 2 : parent.height
+
+        visible: !indicator.control.pressed && enabled && indicator.control.hovered || indicator.partiallyChecked
+        color: !indicator.partiallyChecked ? "transparent" :
+               !indicator.control.enabled ? indicator.control.Universal.baseLowColor :
+                indicator.control.down ? indicator.control.Universal.baseMediumColor :
+                indicator.control.hovered ? indicator.control.Universal.baseHighColor : indicator.control.Universal.baseMediumHighColor
+        border.width: indicator.partiallyChecked ? 0 : 2 // CheckBoxBorderThemeThickness
+        border.color: indicator.control.Universal.baseMediumLowColor
+    }
+}
diff --git a/src/quickcontrols/universal/impl/RadioIndicator.qml b/src/quickcontrols/universal/impl/RadioIndicator.qml
new file mode 100644
index 0000000000..73fc2e964f
--- /dev/null
+++ b/src/quickcontrols/universal/impl/RadioIndicator.qml
@@ -0,0 +1,47 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.Universal
+
+Rectangle {
+    id: indicator
+    implicitWidth: 20
+    implicitHeight: 20
+    radius: width / 2
+    color: "transparent"
+    border.width: 2 // RadioButtonBorderThemeThickness
+    border.color:  control.checked ? "transparent" :
+                  !control.enabled ? control.Universal.baseLowColor :
+                   control.down ? control.Universal.baseMediumColor :
+                   control.hovered ? control.Universal.baseHighColor : control.Universal.baseMediumHighColor
+
+    property var control
+
+    Rectangle {
+        id: checkOuterEllipse
+        width: parent.width
+        height: parent.height
+
+        radius: width / 2
+        opacity: indicator.control.checked ? 1 : 0
+        color: "transparent"
+        border.width: 2 // RadioButtonBorderThemeThickness
+        border.color: !indicator.control.enabled ? indicator.control.Universal.baseLowColor :
+                       indicator.control.down ? indicator.control.Universal.baseMediumColor : indicator.control.Universal.accent
+    }
+
+    Rectangle {
+        id: checkGlyph
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+        width: parent.width / 2
+        height: parent.height / 2
+
+        radius: width / 2
+        opacity: indicator.control.checked ? 1 : 0
+        color: !indicator.control.enabled ? indicator.control.Universal.baseLowColor :
+                indicator.control.down ? indicator.control.Universal.baseMediumColor :
+                indicator.control.hovered ? indicator.control.Universal.baseHighColor : indicator.control.Universal.baseMediumHighColor
+    }
+}
diff --git a/src/quickcontrols/universal/impl/SwitchIndicator.qml b/src/quickcontrols/universal/impl/SwitchIndicator.qml
new file mode 100644
index 0000000000..f88094becc
--- /dev/null
+++ b/src/quickcontrols/universal/impl/SwitchIndicator.qml
@@ -0,0 +1,48 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.Universal
+
+Item {
+    id: indicator
+    implicitWidth: 44
+    implicitHeight: 20
+
+    property T.AbstractButton control
+
+    Rectangle {
+        width: parent.width
+        height: parent.height
+
+        radius: 10
+        color: !indicator.control.enabled ? "transparent" :
+                indicator.control.pressed ? indicator.control.Universal.baseMediumColor :
+                indicator.control.checked ? indicator.control.Universal.accent : "transparent"
+        border.color: !indicator.control.enabled ? indicator.control.Universal.baseLowColor :
+                       indicator.control.checked && !indicator.control.pressed ? indicator.control.Universal.accent :
+                       indicator.control.hovered && !indicator.control.checked && !indicator.control.pressed ? indicator.control.Universal.baseHighColor : indicator.control.Universal.baseMediumColor
+        opacity: enabled && indicator.control.hovered && indicator.control.checked && !indicator.control.pressed ? (indicator.control.Universal.theme === Universal.Light ? 0.7 : 0.9) : 1.0
+        border.width: 2
+    }
+
+    Rectangle {
+        width: 10
+        height: 10
+        radius: 5
+
+        color: !indicator.control.enabled ? indicator.control.Universal.baseLowColor :
+                indicator.control.pressed || indicator.control.checked ? indicator.control.Universal.chromeWhiteColor :
+                indicator.control.hovered && !indicator.control.checked ? indicator.control.Universal.baseHighColor : indicator.control.Universal.baseMediumHighColor
+
+        x: Math.max(5, Math.min(parent.width - width - 5,
+                                indicator.control.visualPosition * parent.width - (width / 2)))
+        y: (parent.height - height) / 2
+
+        Behavior on x {
+            enabled: !indicator.control.pressed
+            SmoothedAnimation { velocity: 200 }
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/impl/qquickuniversalbusyindicator.cpp b/src/quickcontrols/universal/impl/qquickuniversalbusyindicator.cpp
new file mode 100644
index 0000000000..d0fdd925cd
--- /dev/null
+++ b/src/quickcontrols/universal/impl/qquickuniversalbusyindicator.cpp
@@ -0,0 +1,220 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickuniversalbusyindicator_p.h"
+
+#include <QtCore/qmath.h>
+#include <QtCore/qeasingcurve.h>
+#include <QtQuick/private/qquickitem_p.h>
+#include <QtQuick/private/qsgadaptationlayer_p.h>
+#include <QtQuickControls2Impl/private/qquickanimatednode_p.h>
+
+QT_BEGIN_NAMESPACE
+
+static const int PhaseCount = 6;
+static const int Interval = 167;
+static const int TotalDuration = 4052;
+
+class QQuickUniversalBusyIndicatorNode : public QQuickAnimatedNode
+{
+public:
+    QQuickUniversalBusyIndicatorNode(QQuickUniversalBusyIndicator *item);
+
+    void updateCurrentTime(int time) override;
+    void sync(QQuickItem *item) override;
+
+private:
+    struct Phase {
+        Phase() = default;
+        Phase(int d, qreal f, qreal t, QEasingCurve::Type c) : duration(d), from(f), to(t), curve(c) { }
+        int duration = 0;
+        qreal from = 0;
+        qreal to = 0;
+        QEasingCurve curve = QEasingCurve::Linear;
+    };
+
+    Phase m_phases[PhaseCount];
+};
+
+QQuickUniversalBusyIndicatorNode::QQuickUniversalBusyIndicatorNode(QQuickUniversalBusyIndicator *item)
+    : QQuickAnimatedNode(item)
+{
+    setLoopCount(Infinite);
+    setDuration(TotalDuration);
+    setCurrentTime(item->elapsed());
+
+    m_phases[0] = Phase(433, -110,  10, QEasingCurve::BezierSpline);
+    m_phases[1] = Phase(767,   10,  93, QEasingCurve::Linear      );
+    m_phases[2] = Phase(417,   93, 205, QEasingCurve::BezierSpline);
+    m_phases[3] = Phase(400,  205, 357, QEasingCurve::BezierSpline);
+    m_phases[4] = Phase(766,  357, 439, QEasingCurve::Linear      );
+    m_phases[5] = Phase(434,  439, 585, QEasingCurve::BezierSpline);
+
+    m_phases[0].curve.addCubicBezierSegment(QPointF(0.02, 0.33), QPointF(0.38, 0.77), QPointF(1.00, 1.00));
+    m_phases[2].curve.addCubicBezierSegment(QPointF(0.57, 0.17), QPointF(0.95, 0.75), QPointF(1.00, 1.00));
+    m_phases[3].curve.addCubicBezierSegment(QPointF(0.00, 0.19), QPointF(0.07, 0.72), QPointF(1.00, 1.00));
+    m_phases[5].curve.addCubicBezierSegment(QPointF(0.00, 0.00), QPointF(0.95, 0.37), QPointF(1.00, 1.00));
+}
+
+void QQuickUniversalBusyIndicatorNode::updateCurrentTime(int time)
+{
+    int nodeIndex = 0;
+    int count = childCount();
+    QSGTransformNode *transformNode = static_cast<QSGTransformNode *>(firstChild());
+    while (transformNode) {
+        Q_ASSERT(transformNode->type() == QSGNode::TransformNodeType);
+
+        QSGOpacityNode *opacityNode = static_cast<QSGOpacityNode *>(transformNode->firstChild());
+        Q_ASSERT(opacityNode->type() == QSGNode::OpacityNodeType);
+
+        int begin = nodeIndex * Interval;
+        int end = TotalDuration - (PhaseCount - nodeIndex - 1) * Interval;
+
+        bool visible = time >= begin && time <= end;
+        opacityNode->setOpacity(visible ? 1.0 : 0.0);
+
+        if (visible) {
+            int phaseIndex, remain = time, elapsed = 0;
+            for (phaseIndex = 0; phaseIndex < PhaseCount - 1; ++phaseIndex) {
+                if (remain <= m_phases[phaseIndex].duration + begin)
+                    break;
+                remain -= m_phases[phaseIndex].duration;
+                elapsed += m_phases[phaseIndex].duration;
+            }
+
+            const Phase &phase = m_phases[phaseIndex];
+
+            qreal from = phase.from - nodeIndex * count;
+            qreal to = phase.to - nodeIndex * count;
+            qreal pos = time - elapsed - begin;
+
+            qreal value = phase.curve.valueForProgress(pos / phase.duration);
+            qreal rotation = from + (to - from) * value;
+
+            QMatrix4x4 matrix;
+            matrix.rotate(rotation, 0, 0, 1);
+            transformNode->setMatrix(matrix);
+        }
+
+        transformNode = static_cast<QSGTransformNode *>(transformNode->nextSibling());
+        ++nodeIndex;
+    }
+}
+
+void QQuickUniversalBusyIndicatorNode::sync(QQuickItem *item)
+{
+    QQuickUniversalBusyIndicator *indicator = static_cast<QQuickUniversalBusyIndicator *>(item);
+    QQuickItemPrivate *d = QQuickItemPrivate::get(item);
+
+    QMatrix4x4 matrix;
+    matrix.translate(item->width() / 2, item->height() / 2);
+    setMatrix(matrix);
+
+    qreal size = qMin(item->width(), item->height());
+    qreal diameter = size / 10.0;
+    qreal radius = diameter / 2;
+    qreal offset = (size - diameter * 2) / M_PI;
+    const QRectF rect(offset, offset, diameter, diameter);
+
+    int count = indicator->count();
+    QSGNode *transformNode = firstChild();
+    for (int i = 0; i < count; ++i) {
+        if (!transformNode) {
+            transformNode = new QSGTransformNode;
+            appendChildNode(transformNode);
+
+            QSGOpacityNode *opacityNode = new QSGOpacityNode;
+            transformNode->appendChildNode(opacityNode);
+
+            QSGInternalRectangleNode *rectNode = d->sceneGraphContext()->createInternalRectangleNode();
+            rectNode->setAntialiasing(true);
+            opacityNode->appendChildNode(rectNode);
+        }
+
+        QSGNode *opacityNode = transformNode->firstChild();
+        Q_ASSERT(opacityNode->type() == QSGNode::OpacityNodeType);
+
+        QSGInternalRectangleNode *rectNode = static_cast<QSGInternalRectangleNode *>(opacityNode->firstChild());
+        Q_ASSERT(rectNode->type() == QSGNode::GeometryNodeType);
+
+        rectNode->setRect(rect);
+        rectNode->setColor(indicator->color());
+        rectNode->setRadius(radius);
+        rectNode->update();
+
+        transformNode = transformNode->nextSibling();
+    }
+
+    while (transformNode) {
+        QSGNode *nextSibling = transformNode->nextSibling();
+        delete transformNode;
+        transformNode = nextSibling;
+    }
+}
+
+QQuickUniversalBusyIndicator::QQuickUniversalBusyIndicator(QQuickItem *parent)
+    : QQuickItem(parent)
+{
+    setFlag(ItemHasContents);
+}
+
+int QQuickUniversalBusyIndicator::count() const
+{
+    return m_count;
+}
+
+void QQuickUniversalBusyIndicator::setCount(int count)
+{
+    if (m_count == count)
+        return;
+
+    m_count = count;
+    update();
+}
+
+QColor QQuickUniversalBusyIndicator::color() const
+{
+    return m_color;
+}
+
+void QQuickUniversalBusyIndicator::setColor(const QColor &color)
+{
+    if (m_color == color)
+        return;
+
+    m_color = color;
+    update();
+}
+
+int QQuickUniversalBusyIndicator::elapsed() const
+{
+    return m_elapsed;
+}
+
+void QQuickUniversalBusyIndicator::itemChange(QQuickItem::ItemChange change, const QQuickItem::ItemChangeData &data)
+{
+    QQuickItem::itemChange(change, data);
+    if (change == ItemVisibleHasChanged)
+        update();
+}
+
+QSGNode *QQuickUniversalBusyIndicator::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *)
+{
+    QQuickUniversalBusyIndicatorNode *node = static_cast<QQuickUniversalBusyIndicatorNode *>(oldNode);
+    if (isVisible() && width() > 0 && height() > 0) {
+        if (!node) {
+            node = new QQuickUniversalBusyIndicatorNode(this);
+            node->start();
+        }
+        node->sync(this);
+    } else {
+        m_elapsed = node ? node->currentTime() : 0;
+        delete node;
+        node = nullptr;
+    }
+    return node;
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickuniversalbusyindicator_p.cpp"
diff --git a/src/quickcontrols/universal/impl/qquickuniversalbusyindicator_p.h b/src/quickcontrols/universal/impl/qquickuniversalbusyindicator_p.h
new file mode 100644
index 0000000000..1000bbab09
--- /dev/null
+++ b/src/quickcontrols/universal/impl/qquickuniversalbusyindicator_p.h
@@ -0,0 +1,57 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKUNIVERSALBUSYINDICATOR_P_H
+#define QQUICKUNIVERSALBUSYINDICATOR_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtGui/qcolor.h>
+#include <QtQuick/qquickitem.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickUniversalBusyIndicator : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(int count READ count WRITE setCount FINAL)
+    Q_PROPERTY(QColor color READ color WRITE setColor FINAL)
+    QML_NAMED_ELEMENT(BusyIndicatorImpl)
+    QML_ADDED_IN_VERSION(2, 0)
+
+public:
+    explicit QQuickUniversalBusyIndicator(QQuickItem *parent = nullptr);
+
+    int count() const;
+    void setCount(int count);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    int elapsed() const;
+
+protected:
+    void itemChange(ItemChange change, const ItemChangeData &data) override;
+    QSGNode *updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) override;
+
+private:
+    int m_count = 5;
+    int m_elapsed = 0;
+    QColor m_color = Qt::black;
+};
+
+QT_END_NAMESPACE
+
+QML_DECLARE_TYPE(QQuickUniversalBusyIndicator)
+
+#endif // QQUICKUNIVERSALBUSYINDICATOR_P_H
diff --git a/src/quickcontrols/universal/impl/qquickuniversalfocusrectangle.cpp b/src/quickcontrols/universal/impl/qquickuniversalfocusrectangle.cpp
new file mode 100644
index 0000000000..9b815b9147
--- /dev/null
+++ b/src/quickcontrols/universal/impl/qquickuniversalfocusrectangle.cpp
@@ -0,0 +1,53 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickuniversalfocusrectangle_p.h"
+
+#include <QtGui/qpixmap.h>
+#include <QtGui/qpainter.h>
+#include <QtGui/qpixmapcache.h>
+#include <QtQuick/private/qquickitem_p.h>
+
+QT_BEGIN_NAMESPACE
+
+QQuickUniversalFocusRectangle::QQuickUniversalFocusRectangle(QQuickItem *parent)
+    : QQuickPaintedItem(parent)
+{
+    QQuickItemPrivate::get(this)->setTransparentForPositioner(true);
+}
+
+void QQuickUniversalFocusRectangle::paint(QPainter *painter)
+{
+    if (!isVisible() || width() <= 0 || height() <= 0)
+        return;
+
+    QRect bounds = boundingRect().toAlignedRect();
+    const int boundsWidth = bounds.width();
+    const int boundsHeight = bounds.width();
+    const QString key = QStringLiteral("qquickuniversalfocusrectangle_%1_%2").arg(QString::number(boundsWidth), QString::number(boundsHeight));
+
+    QPixmap pixmap(boundsWidth, boundsHeight);
+    if (!QPixmapCache::find(key, &pixmap)) {
+        bounds.adjust(0, 0, -1, -1);
+        pixmap.fill(Qt::transparent);
+        QPainter p(&pixmap);
+
+        QPen pen;
+        pen.setWidth(1);
+        pen.setColor(Qt::white);
+        p.setPen(pen);
+        p.drawRect(bounds);
+
+        pen.setColor(Qt::black);
+        pen.setDashPattern(QList<qreal>(2, 1));
+        p.setPen(pen);
+        p.drawRect(bounds);
+
+        QPixmapCache::insert(key, pixmap);
+    }
+    painter->drawPixmap(0, 0, pixmap);
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickuniversalfocusrectangle_p.cpp"
diff --git a/src/quickcontrols/universal/impl/qquickuniversalfocusrectangle_p.h b/src/quickcontrols/universal/impl/qquickuniversalfocusrectangle_p.h
new file mode 100644
index 0000000000..909c566722
--- /dev/null
+++ b/src/quickcontrols/universal/impl/qquickuniversalfocusrectangle_p.h
@@ -0,0 +1,37 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKUNIVERSALFOCUSRECTANGLE_P_H
+#define QQUICKUNIVERSALFOCUSRECTANGLE_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtQuick/qquickpainteditem.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickUniversalFocusRectangle : public QQuickPaintedItem
+{
+    Q_OBJECT
+    QML_NAMED_ELEMENT(FocusRectangle)
+    QML_ADDED_IN_VERSION(2, 0)
+
+public:
+    QQuickUniversalFocusRectangle(QQuickItem *parent = nullptr);
+
+    void paint(QPainter *painter) override;
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKUNIVERSALFOCUSRECTANGLE_P_H
diff --git a/src/quickcontrols/universal/impl/qquickuniversalprogressbar.cpp b/src/quickcontrols/universal/impl/qquickuniversalprogressbar.cpp
new file mode 100644
index 0000000000..0ab47e8804
--- /dev/null
+++ b/src/quickcontrols/universal/impl/qquickuniversalprogressbar.cpp
@@ -0,0 +1,307 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickuniversalprogressbar_p.h"
+
+#include <QtCore/qmath.h>
+#include <QtCore/qeasingcurve.h>
+#include <QtQuick/private/qquickitem_p.h>
+#include <QtQuick/private/qsgadaptationlayer_p.h>
+#include <QtQuick/qsgrectanglenode.h>
+#include <QtQuickControls2Impl/private/qquickanimatednode_p.h>
+
+QT_BEGIN_NAMESPACE
+
+static const int PhaseCount = 4;
+static const int EllipseCount = 5;
+static const int Interval = 167;
+static const int TotalDuration = 3917;
+static const int VisibleDuration = 3000;
+static const qreal EllipseDiameter = 4;
+static const qreal EllipseOffset = 4;
+static const qreal ContainerAnimationStartPosition = -34; // absolute
+static const qreal ContainerAnimationEndPosition = 0.435222; // relative
+static const qreal EllipseAnimationWellPosition = 0.333333333333333; // relative
+static const qreal EllipseAnimationEndPosition = 0.666666666666667; // relative
+
+class QQuickUniversalProgressBarNode : public QQuickAnimatedNode
+{
+public:
+    QQuickUniversalProgressBarNode(QQuickUniversalProgressBar *item);
+
+    void updateCurrentTime(int time) override;
+    void sync(QQuickItem *item) override;
+
+private:
+    struct Phase {
+        Phase() = default;
+        Phase(int d, qreal f, qreal t) : duration(d), from(f), to(t) { }
+        int duration = 0;
+        qreal from = 0;
+        qreal to = 0;
+    };
+
+    bool m_indeterminate = false;
+    Phase m_borderPhases[PhaseCount];
+    Phase m_ellipsePhases[PhaseCount];
+};
+
+QQuickUniversalProgressBarNode::QQuickUniversalProgressBarNode(QQuickUniversalProgressBar *item)
+    : QQuickAnimatedNode(item)
+{
+    setLoopCount(Infinite);
+    setDuration(TotalDuration);
+
+    m_borderPhases[0] = Phase( 500, -50,   0);
+    m_borderPhases[1] = Phase(1500,   0,   0);
+    m_borderPhases[2] = Phase(1000,   0, 100);
+    m_borderPhases[3] = Phase( 917, 100, 100);
+
+    m_ellipsePhases[0] = Phase(1000,                            0, EllipseAnimationWellPosition);
+    m_ellipsePhases[1] = Phase(1000, EllipseAnimationWellPosition, EllipseAnimationWellPosition);
+    m_ellipsePhases[2] = Phase(1000, EllipseAnimationWellPosition, EllipseAnimationEndPosition);
+    m_ellipsePhases[3] = Phase(1000, EllipseAnimationWellPosition, EllipseAnimationEndPosition);
+}
+
+void QQuickUniversalProgressBarNode::updateCurrentTime(int time)
+{
+    QSGRectangleNode *geometryNode = static_cast<QSGRectangleNode *>(firstChild());
+    Q_ASSERT(!geometryNode || geometryNode->type() == QSGNode::GeometryNodeType);
+    if (!geometryNode)
+        return;
+
+    QSGTransformNode *gridNode = static_cast<QSGTransformNode *>(geometryNode->firstChild());
+    Q_ASSERT(!gridNode || gridNode->type() == QSGNode::TransformNodeType);
+    if (!gridNode)
+        return;
+
+    qreal width = geometryNode->rect().width();
+    {
+        qreal from = ContainerAnimationStartPosition;
+        qreal to = from + ContainerAnimationEndPosition * width;
+        qreal progress = static_cast<qreal>(time) / TotalDuration;
+        qreal dx = from + (to - from) * progress;
+
+        QMatrix4x4 matrix;
+        matrix.translate(dx, 0);
+        gridNode->setMatrix(matrix);
+    }
+
+    int nodeIndex = 0;
+    QSGTransformNode *borderNode = static_cast<QSGTransformNode *>(gridNode->firstChild());
+    while (borderNode) {
+        Q_ASSERT(borderNode->type() == QSGNode::TransformNodeType);
+
+        QSGTransformNode *ellipseNode = static_cast<QSGTransformNode *>(borderNode->firstChild());
+        Q_ASSERT(ellipseNode->type() == QSGNode::TransformNodeType);
+
+        QSGOpacityNode *opacityNode = static_cast<QSGOpacityNode *>(ellipseNode->firstChild());
+        Q_ASSERT(opacityNode->type() == QSGNode::OpacityNodeType);
+
+        int begin = nodeIndex * Interval;
+        int end = VisibleDuration + nodeIndex * Interval;
+
+        bool visible = time >= begin && time <= end;
+        opacityNode->setOpacity(visible ? 1.0 : 0.0);
+
+        if (visible) {
+            {
+                int phaseIndex, remain = time, elapsed = 0;
+                for (phaseIndex = 0; phaseIndex < PhaseCount - 1; ++phaseIndex) {
+                    if (remain <= m_borderPhases[phaseIndex].duration + begin)
+                        break;
+                    remain -= m_borderPhases[phaseIndex].duration;
+                    elapsed += m_borderPhases[phaseIndex].duration;
+                }
+
+                const Phase &phase = m_borderPhases[phaseIndex];
+
+                qreal pos = time - elapsed - begin;
+                qreal progress = pos / phase.duration;
+                qreal dx = phase.from + (phase.to - phase.from) * progress;
+
+                QMatrix4x4 matrix;
+                matrix.translate(dx, 0);
+                borderNode->setMatrix(matrix);
+            }
+
+            {
+                QEasingCurve curve(QEasingCurve::BezierSpline);
+                curve.addCubicBezierSegment(QPointF(0.4, 0.0), QPointF(0.6, 1.0), QPointF(1.0, 1.0));
+
+                int phaseIndex, remain = time, elapsed = 0;
+                for (phaseIndex = 0; phaseIndex < PhaseCount - 1; ++phaseIndex) {
+                    if (remain <= m_ellipsePhases[phaseIndex].duration + begin)
+                        break;
+                    remain -= m_ellipsePhases[phaseIndex].duration;
+                    elapsed += m_ellipsePhases[phaseIndex].duration;
+                }
+
+                const Phase &phase = m_ellipsePhases[phaseIndex];
+
+                qreal from = phase.from * width;
+                qreal to = phase.to * width;
+                qreal pos = time - elapsed - begin;
+                qreal progress = curve.valueForProgress(pos / phase.duration);
+                qreal dx = from + (to - from) * progress;
+
+                QMatrix4x4 matrix;
+                matrix.translate(dx, 0);
+                ellipseNode->setMatrix(matrix);
+            }
+        }
+
+        borderNode = static_cast<QSGTransformNode *>(borderNode->nextSibling());
+        ++nodeIndex;
+    }
+}
+
+void QQuickUniversalProgressBarNode::sync(QQuickItem *item)
+{
+    QQuickUniversalProgressBar *bar = static_cast<QQuickUniversalProgressBar *>(item);
+    if (m_indeterminate != bar->isIndeterminate()) {
+        m_indeterminate = bar->isIndeterminate();
+        if (m_indeterminate)
+            start();
+        else
+            stop();
+    }
+
+    QQuickItemPrivate *d = QQuickItemPrivate::get(item);
+
+    QRectF bounds = item->boundingRect();
+    bounds.setHeight(item->implicitHeight());
+    bounds.moveTop((item->height() - bounds.height()) / 2.0);
+    if (!m_indeterminate)
+        bounds.setWidth(bar->progress() * bounds.width());
+
+    QSGRectangleNode *geometryNode = static_cast<QSGRectangleNode *>(firstChild());
+    if (!geometryNode) {
+        geometryNode = item->window()->createRectangleNode();
+        appendChildNode(geometryNode);
+    }
+    geometryNode->setRect(bounds);
+    geometryNode->setColor(m_indeterminate ? Qt::transparent : bar->color());
+
+    if (!m_indeterminate) {
+        while (QSGNode *node = geometryNode->firstChild())
+            delete node;
+        return;
+    }
+
+    QSGTransformNode *gridNode = static_cast<QSGTransformNode *>(geometryNode->firstChild());
+    if (!gridNode) {
+        gridNode = new QSGTransformNode;
+        geometryNode->appendChildNode(gridNode);
+    }
+    Q_ASSERT(gridNode->type() == QSGNode::TransformNodeType);
+
+    QSGNode *borderNode = gridNode->firstChild();
+    for (int i = 0; i < EllipseCount; ++i) {
+        if (!borderNode) {
+            borderNode = new QSGTransformNode;
+            gridNode->appendChildNode(borderNode);
+
+            QSGTransformNode *ellipseNode = new QSGTransformNode;
+            borderNode->appendChildNode(ellipseNode);
+
+            QSGOpacityNode *opacityNode = new QSGOpacityNode;
+            ellipseNode->appendChildNode(opacityNode);
+
+            QSGInternalRectangleNode *rectNode = d->sceneGraphContext()->createInternalRectangleNode();
+            rectNode->setAntialiasing(true);
+            rectNode->setRadius(EllipseDiameter / 2);
+            opacityNode->appendChildNode(rectNode);
+        }
+        Q_ASSERT(borderNode->type() == QSGNode::TransformNodeType);
+
+        QSGNode *ellipseNode = borderNode->firstChild();
+        Q_ASSERT(ellipseNode->type() == QSGNode::TransformNodeType);
+
+        QSGNode *opacityNode = ellipseNode->firstChild();
+        Q_ASSERT(opacityNode->type() == QSGNode::OpacityNodeType);
+
+        QSGInternalRectangleNode *rectNode = static_cast<QSGInternalRectangleNode *>(opacityNode->firstChild());
+        Q_ASSERT(rectNode->type() == QSGNode::GeometryNodeType);
+
+        rectNode->setRect(QRectF((EllipseCount - i - 1) * (EllipseDiameter + EllipseOffset), (item->height() - EllipseDiameter) / 2, EllipseDiameter, EllipseDiameter));
+        rectNode->setColor(bar->color());
+        rectNode->update();
+
+        borderNode = borderNode->nextSibling();
+    }
+}
+
+QQuickUniversalProgressBar::QQuickUniversalProgressBar(QQuickItem *parent)
+    : QQuickItem(parent)
+{
+    setFlag(ItemHasContents);
+}
+
+QColor QQuickUniversalProgressBar::color() const
+{
+    return m_color;
+}
+
+void QQuickUniversalProgressBar::setColor(const QColor &color)
+{
+    if (m_color == color)
+        return;
+
+    m_color = color;
+    update();
+}
+
+qreal QQuickUniversalProgressBar::progress() const
+{
+    return m_progress;
+}
+
+void QQuickUniversalProgressBar::setProgress(qreal progress)
+{
+    if (progress == m_progress)
+        return;
+
+    m_progress = progress;
+    update();
+}
+
+bool QQuickUniversalProgressBar::isIndeterminate() const
+{
+    return m_indeterminate;
+}
+
+void QQuickUniversalProgressBar::setIndeterminate(bool indeterminate)
+{
+    if (indeterminate == m_indeterminate)
+        return;
+
+    m_indeterminate = indeterminate;
+    setClip(m_indeterminate);
+    update();
+}
+
+void QQuickUniversalProgressBar::itemChange(QQuickItem::ItemChange change, const QQuickItem::ItemChangeData &data)
+{
+    QQuickItem::itemChange(change, data);
+    if (change == ItemVisibleHasChanged)
+        update();
+}
+
+QSGNode *QQuickUniversalProgressBar::updatePaintNode(QSGNode *oldNode, QQuickItem::UpdatePaintNodeData *)
+{
+    QQuickUniversalProgressBarNode *node = static_cast<QQuickUniversalProgressBarNode *>(oldNode);
+    if (isVisible() && width() > 0 && height() > 0) {
+        if (!node)
+            node = new QQuickUniversalProgressBarNode(this);
+        node->sync(this);
+    } else {
+        delete node;
+        node = nullptr;
+    }
+    return node;
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickuniversalprogressbar_p.cpp"
diff --git a/src/quickcontrols/universal/impl/qquickuniversalprogressbar_p.h b/src/quickcontrols/universal/impl/qquickuniversalprogressbar_p.h
new file mode 100644
index 0000000000..a4bbae8cb5
--- /dev/null
+++ b/src/quickcontrols/universal/impl/qquickuniversalprogressbar_p.h
@@ -0,0 +1,59 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKUNIVERSALPROGRESSBAR_P_H
+#define QQUICKUNIVERSALPROGRESSBAR_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtGui/qcolor.h>
+#include <QtQuick/qquickitem.h>
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickUniversalProgressBar : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor color READ color WRITE setColor FINAL)
+    Q_PROPERTY(qreal progress READ progress WRITE setProgress FINAL)
+    Q_PROPERTY(bool indeterminate READ isIndeterminate WRITE setIndeterminate FINAL)
+    QML_NAMED_ELEMENT(ProgressBarImpl)
+    QML_ADDED_IN_VERSION(2, 0)
+
+public:
+    explicit QQuickUniversalProgressBar(QQuickItem *parent = nullptr);
+
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    qreal progress() const;
+    void setProgress(qreal progress);
+
+    bool isIndeterminate() const;
+    void setIndeterminate(bool indeterminate);
+
+protected:
+    void itemChange(ItemChange change, const ItemChangeData &data) override;
+    QSGNode *updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) override;
+
+private:
+    QColor m_color = Qt::black;
+    qreal m_progress = 0.0;
+    bool m_indeterminate = false;
+};
+
+QT_END_NAMESPACE
+
+QML_DECLARE_TYPE(QQuickUniversalProgressBar)
+
+#endif // QQUICKUNIVERSALPROGRESSBAR_P_H
diff --git a/src/quickcontrols/universal/qquickuniversalstyle.cpp b/src/quickcontrols/universal/qquickuniversalstyle.cpp
new file mode 100644
index 0000000000..cacf20a75f
--- /dev/null
+++ b/src/quickcontrols/universal/qquickuniversalstyle.cpp
@@ -0,0 +1,587 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickuniversalstyle_p.h"
+
+#include <QtCore/qdebug.h>
+#include <QtCore/qsettings.h>
+#include <QtQml/qqmlinfo.h>
+#include <QtQuickControls2/private/qquickstyle_p.h>
+
+QT_BEGIN_NAMESPACE
+
+static QRgb qquickuniversal_light_color(QQuickUniversalStyle::SystemColor role)
+{
+    static const QRgb colors[] = {
+        0xFFFFFFFF, // SystemAltHighColor
+        0x33FFFFFF, // SystemAltLowColor
+        0x99FFFFFF, // SystemAltMediumColor
+        0xCCFFFFFF, // SystemAltMediumHighColor
+        0x66FFFFFF, // SystemAltMediumLowColor
+        0xFF000000, // SystemBaseHighColor
+        0x33000000, // SystemBaseLowColor
+        0x99000000, // SystemBaseMediumColor
+        0xCC000000, // SystemBaseMediumHighColor
+        0x66000000, // SystemBaseMediumLowColor
+        0xFF171717, // SystemChromeAltLowColor
+        0xFF000000, // SystemChromeBlackHighColor
+        0x33000000, // SystemChromeBlackLowColor
+        0x66000000, // SystemChromeBlackMediumLowColor
+        0xCC000000, // SystemChromeBlackMediumColor
+        0xFFCCCCCC, // SystemChromeDisabledHighColor
+        0xFF7A7A7A, // SystemChromeDisabledLowColor
+        0xFFCCCCCC, // SystemChromeHighColor
+        0xFFF2F2F2, // SystemChromeLowColor
+        0xFFE6E6E6, // SystemChromeMediumColor
+        0xFFF2F2F2, // SystemChromeMediumLowColor
+        0xFFFFFFFF, // SystemChromeWhiteColor
+        0x19000000, // SystemListLowColor
+        0x33000000  // SystemListMediumColor
+    };
+    return colors[role];
+}
+
+static QRgb qquickuniversal_dark_color(QQuickUniversalStyle::SystemColor role)
+{
+    static const QRgb colors[] = {
+        0xFF000000, // SystemAltHighColor
+        0x33000000, // SystemAltLowColor
+        0x99000000, // SystemAltMediumColor
+        0xCC000000, // SystemAltMediumHighColor
+        0x66000000, // SystemAltMediumLowColor
+        0xFFFFFFFF, // SystemBaseHighColor
+        0x33FFFFFF, // SystemBaseLowColor
+        0x99FFFFFF, // SystemBaseMediumColor
+        0xCCFFFFFF, // SystemBaseMediumHighColor
+        0x66FFFFFF, // SystemBaseMediumLowColor
+        0xFFF2F2F2, // SystemChromeAltLowColor
+        0xFF000000, // SystemChromeBlackHighColor
+        0x33000000, // SystemChromeBlackLowColor
+        0x66000000, // SystemChromeBlackMediumLowColor
+        0xCC000000, // SystemChromeBlackMediumColor
+        0xFF333333, // SystemChromeDisabledHighColor
+        0xFF858585, // SystemChromeDisabledLowColor
+        0xFF767676, // SystemChromeHighColor
+        0xFF171717, // SystemChromeLowColor
+        0xFF1F1F1F, // SystemChromeMediumColor
+        0xFF2B2B2B, // SystemChromeMediumLowColor
+        0xFFFFFFFF, // SystemChromeWhiteColor
+        0x19FFFFFF, // SystemListLowColor
+        0x33FFFFFF  // SystemListMediumColor
+    };
+    return colors[role];
+}
+
+static QRgb qquickuniversal_accent_color(QQuickUniversalStyle::Color accent)
+{
+    static const QRgb colors[] = {
+        0xFFA4C400, // Lime
+        0xFF60A917, // Green
+        0xFF008A00, // Emerald
+        0xFF00ABA9, // Teal
+        0xFF1BA1E2, // Cyan
+        0xFF3E65FF, // Cobalt
+        0xFF6A00FF, // Indigo
+        0xFFAA00FF, // Violet
+        0xFFF472D0, // Pink
+        0xFFD80073, // Magenta
+        0xFFA20025, // Crimson
+        0xFFE51400, // Red
+        0xFFFA6800, // Orange
+        0xFFF0A30A, // Amber
+        0xFFE3C800, // Yellow
+        0xFF825A2C, // Brown
+        0xFF6D8764, // Olive
+        0xFF647687, // Steel
+        0xFF76608A, // Mauve
+        0xFF87794E  // Taupe
+    };
+    return colors[accent];
+}
+
+static QQuickUniversalStyle::Theme qquickuniversal_effective_theme(QQuickUniversalStyle::Theme theme)
+{
+    if (theme == QQuickUniversalStyle::System)
+        theme = QQuickStylePrivate::isDarkSystemTheme() ? QQuickUniversalStyle::Dark : QQuickUniversalStyle::Light;
+    return theme;
+}
+
+// If no value was inherited from a parent or explicitly set, the "global" values are used.
+// The initial, default values of the globals are hard-coded here, but the environment
+// variables and .conf file override them if specified.
+static QQuickUniversalStyle::Theme GlobalTheme = QQuickUniversalStyle::Light;
+static QRgb GlobalAccent = qquickuniversal_accent_color(QQuickUniversalStyle::Cobalt);
+static QRgb GlobalForeground = qquickuniversal_light_color(QQuickUniversalStyle::BaseHigh);
+static QRgb GlobalBackground = qquickuniversal_light_color(QQuickUniversalStyle::AltHigh);
+// These represent whether a global foreground/background was set.
+// Each style's m_hasForeground/m_hasBackground are initialized to these values.
+static bool HasGlobalForeground = false;
+static bool HasGlobalBackground = false;
+
+QQuickUniversalStyle::QQuickUniversalStyle(QObject *parent) : QQuickAttachedPropertyPropagator(parent),
+    m_hasForeground(HasGlobalForeground), m_hasBackground(HasGlobalBackground), m_theme(GlobalTheme),
+    m_accent(GlobalAccent), m_foreground(GlobalForeground), m_background(GlobalBackground)
+{
+    initialize();
+}
+
+QQuickUniversalStyle *QQuickUniversalStyle::qmlAttachedProperties(QObject *object)
+{
+    return new QQuickUniversalStyle(object);
+}
+
+QQuickUniversalStyle::Theme QQuickUniversalStyle::theme() const
+{
+    return m_theme;
+}
+
+void QQuickUniversalStyle::setTheme(Theme theme)
+{
+    theme = qquickuniversal_effective_theme(theme);
+    m_explicitTheme = true;
+    if (m_theme == theme)
+        return;
+
+    m_theme = theme;
+    propagateTheme();
+    emit themeChanged();
+    emit paletteChanged();
+    emit foregroundChanged();
+    emit backgroundChanged();
+}
+
+void QQuickUniversalStyle::inheritTheme(Theme theme)
+{
+    if (m_explicitTheme || m_theme == theme)
+        return;
+
+    m_theme = theme;
+    propagateTheme();
+    emit themeChanged();
+    emit paletteChanged();
+    emit foregroundChanged();
+    emit backgroundChanged();
+}
+
+void QQuickUniversalStyle::propagateTheme()
+{
+    const auto styles = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : styles) {
+        QQuickUniversalStyle *universal = qobject_cast<QQuickUniversalStyle *>(child);
+        if (universal)
+            universal->inheritTheme(m_theme);
+    }
+}
+
+void QQuickUniversalStyle::resetTheme()
+{
+    if (!m_explicitTheme)
+        return;
+
+    m_explicitTheme = false;
+    QQuickUniversalStyle *universal = qobject_cast<QQuickUniversalStyle *>(attachedParent());
+    inheritTheme(universal ? universal->theme() : GlobalTheme);
+}
+
+QVariant QQuickUniversalStyle::accent() const
+{
+    return QColor::fromRgba(m_accent);
+}
+
+void QQuickUniversalStyle::setAccent(const QVariant &var)
+{
+    QRgb accent = 0;
+    if (!variantToRgba(var, "accent", &accent))
+        return;
+
+    m_explicitAccent = true;
+    if (m_accent == accent)
+        return;
+
+    m_accent = accent;
+    propagateAccent();
+    emit accentChanged();
+}
+
+void QQuickUniversalStyle::inheritAccent(QRgb accent)
+{
+    if (m_explicitAccent || m_accent == accent)
+        return;
+
+    m_accent = accent;
+    propagateAccent();
+    emit accentChanged();
+}
+
+void QQuickUniversalStyle::propagateAccent()
+{
+    const auto styles = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : styles) {
+        QQuickUniversalStyle *universal = qobject_cast<QQuickUniversalStyle *>(child);
+        if (universal)
+            universal->inheritAccent(m_accent);
+    }
+}
+
+void QQuickUniversalStyle::resetAccent()
+{
+    if (!m_explicitAccent)
+        return;
+
+    m_explicitAccent = false;
+    QQuickUniversalStyle *universal = qobject_cast<QQuickUniversalStyle *>(attachedParent());
+    inheritAccent(universal ? universal->m_accent : GlobalAccent);
+}
+
+QVariant QQuickUniversalStyle::foreground() const
+{
+    if (m_hasForeground)
+        return QColor::fromRgba(m_foreground);
+    return baseHighColor();
+}
+
+void QQuickUniversalStyle::setForeground(const QVariant &var)
+{
+    QRgb foreground = 0;
+    if (!variantToRgba(var, "foreground", &foreground))
+        return;
+
+    m_hasForeground = true;
+    m_explicitForeground = true;
+    if (m_foreground == foreground)
+        return;
+
+    m_foreground = foreground;
+    propagateForeground();
+    emit foregroundChanged();
+}
+
+void QQuickUniversalStyle::inheritForeground(QRgb foreground, bool has)
+{
+    if (m_explicitForeground || m_foreground == foreground)
+        return;
+
+    m_hasForeground = has;
+    m_foreground = foreground;
+    propagateForeground();
+    emit foregroundChanged();
+}
+
+void QQuickUniversalStyle::propagateForeground()
+{
+    const auto styles = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : styles) {
+        QQuickUniversalStyle *universal = qobject_cast<QQuickUniversalStyle *>(child);
+        if (universal)
+            universal->inheritForeground(m_foreground, m_hasForeground);
+    }
+}
+
+void QQuickUniversalStyle::resetForeground()
+{
+    if (!m_explicitForeground)
+        return;
+
+    m_hasForeground = false;
+    m_explicitForeground = false;
+    QQuickUniversalStyle *universal = qobject_cast<QQuickUniversalStyle *>(attachedParent());
+    inheritForeground(universal ? universal->m_foreground : GlobalForeground, universal ? universal->m_hasForeground : false);
+}
+
+QVariant QQuickUniversalStyle::background() const
+{
+    if (m_hasBackground)
+        return QColor::fromRgba(m_background);
+    return altHighColor();
+}
+
+void QQuickUniversalStyle::setBackground(const QVariant &var)
+{
+    QRgb background = 0;
+    if (!variantToRgba(var, "background", &background))
+        return;
+
+    m_hasBackground = true;
+    m_explicitBackground = true;
+    if (m_background == background)
+        return;
+
+    m_background = background;
+    propagateBackground();
+    emit backgroundChanged();
+}
+
+void QQuickUniversalStyle::inheritBackground(QRgb background, bool has)
+{
+    if (m_explicitBackground || m_background == background)
+        return;
+
+    m_hasBackground = has;
+    m_background = background;
+    propagateBackground();
+    emit backgroundChanged();
+}
+
+void QQuickUniversalStyle::propagateBackground()
+{
+    const auto styles = attachedChildren();
+    for (QQuickAttachedPropertyPropagator *child : styles) {
+        QQuickUniversalStyle *universal = qobject_cast<QQuickUniversalStyle *>(child);
+        if (universal)
+            universal->inheritBackground(m_background, m_hasBackground);
+    }
+}
+
+void QQuickUniversalStyle::resetBackground()
+{
+    if (!m_explicitBackground)
+        return;
+
+    m_hasBackground = false;
+    m_explicitBackground = false;
+    QQuickUniversalStyle *universal = qobject_cast<QQuickUniversalStyle *>(attachedParent());
+    inheritBackground(universal ? universal->m_background : GlobalBackground, universal ? universal->m_hasBackground : false);
+}
+
+QColor QQuickUniversalStyle::color(Color color) const
+{
+    return qquickuniversal_accent_color(color);
+}
+
+QColor QQuickUniversalStyle::altHighColor() const
+{
+    return systemColor(AltHigh);
+}
+
+QColor QQuickUniversalStyle::altLowColor() const
+{
+    return systemColor(AltLow);
+}
+
+QColor QQuickUniversalStyle::altMediumColor() const
+{
+    return systemColor(AltMedium);
+}
+
+QColor QQuickUniversalStyle::altMediumHighColor() const
+{
+    return systemColor(AltMediumHigh);
+}
+
+QColor QQuickUniversalStyle::altMediumLowColor() const
+{
+    return systemColor(AltMediumLow);
+}
+
+QColor QQuickUniversalStyle::baseHighColor() const
+{
+    return systemColor(BaseHigh);
+}
+
+QColor QQuickUniversalStyle::baseLowColor() const
+{
+    return systemColor(BaseLow);
+}
+
+QColor QQuickUniversalStyle::baseMediumColor() const
+{
+    return systemColor(BaseMedium);
+}
+
+QColor QQuickUniversalStyle::baseMediumHighColor() const
+{
+    return systemColor(BaseMediumHigh);
+}
+
+QColor QQuickUniversalStyle::baseMediumLowColor() const
+{
+    return systemColor(BaseMediumLow);
+}
+
+QColor QQuickUniversalStyle::chromeAltLowColor() const
+{
+    return systemColor(ChromeAltLow);
+}
+
+QColor QQuickUniversalStyle::chromeBlackHighColor() const
+{
+    return systemColor(ChromeBlackHigh);
+}
+
+QColor QQuickUniversalStyle::chromeBlackLowColor() const
+{
+    return systemColor(ChromeBlackLow);
+}
+
+QColor QQuickUniversalStyle::chromeBlackMediumLowColor() const
+{
+    return systemColor(ChromeBlackMediumLow);
+}
+
+QColor QQuickUniversalStyle::chromeBlackMediumColor() const
+{
+    return systemColor(ChromeBlackMedium);
+}
+
+QColor QQuickUniversalStyle::chromeDisabledHighColor() const
+{
+    return systemColor(ChromeDisabledHigh);
+}
+
+QColor QQuickUniversalStyle::chromeDisabledLowColor() const
+{
+    return systemColor(ChromeDisabledLow);
+}
+
+QColor QQuickUniversalStyle::chromeHighColor() const
+{
+    return systemColor(ChromeHigh);
+}
+
+QColor QQuickUniversalStyle::chromeLowColor() const
+{
+    return systemColor(ChromeLow);
+}
+
+QColor QQuickUniversalStyle::chromeMediumColor() const
+{
+    return systemColor(ChromeMedium);
+}
+
+QColor QQuickUniversalStyle::chromeMediumLowColor() const
+{
+    return systemColor(ChromeMediumLow);
+}
+
+QColor QQuickUniversalStyle::chromeWhiteColor() const
+{
+    return systemColor(ChromeWhite);
+}
+
+QColor QQuickUniversalStyle::listLowColor() const
+{
+    return systemColor(ListLow);
+}
+
+QColor QQuickUniversalStyle::listMediumColor() const
+{
+    return systemColor(ListMedium);
+}
+
+QColor QQuickUniversalStyle::systemColor(SystemColor role) const
+{
+    return QColor::fromRgba(m_theme == QQuickUniversalStyle::Dark ? qquickuniversal_dark_color(role) : qquickuniversal_light_color(role));
+}
+
+void QQuickUniversalStyle::attachedParentChange(QQuickAttachedPropertyPropagator *newParent, QQuickAttachedPropertyPropagator *oldParent)
+{
+    Q_UNUSED(oldParent);
+    QQuickUniversalStyle *universal = qobject_cast<QQuickUniversalStyle *>(newParent);
+    if (universal) {
+        inheritTheme(universal->theme());
+        inheritAccent(universal->m_accent);
+        inheritForeground(universal->m_foreground, universal->m_hasForeground);
+        inheritBackground(universal->m_background, universal->m_hasBackground);
+    }
+}
+
+template <typename Enum>
+static Enum toEnumValue(const QByteArray &value, bool *ok)
+{
+    QMetaEnum enumeration = QMetaEnum::fromType<Enum>();
+    return static_cast<Enum>(enumeration.keyToValue(value, ok));
+}
+
+static QByteArray resolveSetting(const QByteArray &env, const QSharedPointer<QSettings> &settings, const QString &name)
+{
+    QByteArray value = qgetenv(env);
+#if QT_CONFIG(settings)
+    if (value.isNull() && !settings.isNull())
+        value = settings->value(name).toByteArray();
+#endif
+    return value;
+}
+
+void QQuickUniversalStyle::initGlobals()
+{
+    QSharedPointer<QSettings> settings = QQuickStylePrivate::settings(QStringLiteral("Universal"));
+
+    bool ok = false;
+    QByteArray themeValue = resolveSetting("QT_QUICK_CONTROLS_UNIVERSAL_THEME", settings, QStringLiteral("Theme"));
+    Theme themeEnum = toEnumValue<Theme>(themeValue, &ok);
+    if (ok)
+        GlobalTheme = qquickuniversal_effective_theme(themeEnum);
+    else if (!themeValue.isEmpty())
+        qWarning().nospace().noquote() << "Universal: unknown theme value: " << themeValue;
+
+    QByteArray accentValue = resolveSetting("QT_QUICK_CONTROLS_UNIVERSAL_ACCENT", settings, QStringLiteral("Accent"));
+    Color accentEnum = toEnumValue<Color>(accentValue, &ok);
+    if (ok) {
+        GlobalAccent = qquickuniversal_accent_color(accentEnum);
+    } else if (!accentValue.isEmpty()) {
+        QColor color = QColor::fromString(accentValue);
+        if (color.isValid())
+            GlobalAccent = color.rgba();
+        else
+            qWarning().nospace().noquote() << "Universal: unknown accent value: " << accentValue;
+    }
+
+    QByteArray foregroundValue = resolveSetting("QT_QUICK_CONTROLS_UNIVERSAL_FOREGROUND", settings, QStringLiteral("Foreground"));
+    Color foregroundEnum = toEnumValue<Color>(foregroundValue, &ok);
+    if (ok) {
+        GlobalForeground = qquickuniversal_accent_color(foregroundEnum);
+        HasGlobalForeground = true;
+    } else if (!foregroundValue.isEmpty()) {
+        QColor color = QColor::fromString(foregroundValue);
+        if (color.isValid()) {
+            GlobalForeground = color.rgba();
+            HasGlobalForeground = true;
+        } else {
+            qWarning().nospace().noquote() << "Universal: unknown foreground value: " << foregroundValue;
+        }
+    }
+
+    QByteArray backgroundValue = resolveSetting("QT_QUICK_CONTROLS_UNIVERSAL_BACKGROUND", settings, QStringLiteral("Background"));
+    Color backgroundEnum = toEnumValue<Color>(backgroundValue, &ok);
+    if (ok) {
+        GlobalBackground = qquickuniversal_accent_color(backgroundEnum);
+        HasGlobalBackground = true;
+    } else if (!backgroundValue.isEmpty()) {
+        QColor color = QColor::fromString(backgroundValue);
+        if (color.isValid()) {
+            GlobalBackground = color.rgba();
+            HasGlobalBackground = true;
+        } else {
+            qWarning().nospace().noquote() << "Universal: unknown background value: " << backgroundValue;
+        }
+    }
+}
+
+bool QQuickUniversalStyle::variantToRgba(const QVariant &var, const char *name, QRgb *rgba) const
+{
+    if (var.metaType().id() == QMetaType::Int) {
+        int val = var.toInt();
+        if (val < Lime || val > Taupe) {
+            qmlWarning(parent()) << "unknown Universal." << name << " value: " << val;
+            return false;
+        }
+        *rgba = qquickuniversal_accent_color(static_cast<Color>(val));
+    } else {
+        int val = QMetaEnum::fromType<Color>().keyToValue(var.toByteArray());
+        if (val != -1) {
+            *rgba = qquickuniversal_accent_color(static_cast<Color>(val));
+        } else {
+            QColor color = QColor::fromString(var.toString());
+            if (!color.isValid()) {
+                qmlWarning(parent()) << "unknown Universal." << name << " value: " << var.toString();
+                return false;
+            }
+            *rgba = color.rgba();
+        }
+    }
+    return true;
+}
+
+QT_END_NAMESPACE
+
+#include "moc_qquickuniversalstyle_p.cpp"
diff --git a/src/quickcontrols/universal/qquickuniversalstyle_p.h b/src/quickcontrols/universal/qquickuniversalstyle_p.h
new file mode 100644
index 0000000000..024fde2192
--- /dev/null
+++ b/src/quickcontrols/universal/qquickuniversalstyle_p.h
@@ -0,0 +1,212 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKUNIVERSALSTYLE_P_H
+#define QQUICKUNIVERSALSTYLE_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtGui/qcolor.h>
+#include <QtQml/qqml.h>
+#include <QtQuickControls2/qquickattachedpropertypropagator.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickUniversalStylePrivate;
+
+class QQuickUniversalStyle : public QQuickAttachedPropertyPropagator
+{
+    Q_OBJECT
+    Q_PROPERTY(Theme theme READ theme WRITE setTheme RESET resetTheme NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QVariant accent READ accent WRITE setAccent RESET resetAccent NOTIFY accentChanged FINAL)
+    Q_PROPERTY(QVariant foreground READ foreground WRITE setForeground RESET resetForeground NOTIFY foregroundChanged FINAL)
+    Q_PROPERTY(QVariant background READ background WRITE setBackground RESET resetBackground NOTIFY backgroundChanged FINAL)
+
+    Q_PROPERTY(QColor altHighColor READ altHighColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor altLowColor READ altLowColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor altMediumColor READ altMediumColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor altMediumHighColor READ altMediumHighColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor altMediumLowColor READ altMediumLowColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor baseHighColor READ baseHighColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor baseLowColor READ baseLowColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor baseMediumColor READ baseMediumColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor baseMediumHighColor READ baseMediumHighColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor baseMediumLowColor READ baseMediumLowColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor chromeAltLowColor READ chromeAltLowColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor chromeBlackHighColor READ chromeBlackHighColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor chromeBlackLowColor READ chromeBlackLowColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor chromeBlackMediumLowColor READ chromeBlackMediumLowColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor chromeBlackMediumColor READ chromeBlackMediumColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor chromeDisabledHighColor READ chromeDisabledHighColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor chromeDisabledLowColor READ chromeDisabledLowColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor chromeHighColor READ chromeHighColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor chromeLowColor READ chromeLowColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor chromeMediumColor READ chromeMediumColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor chromeMediumLowColor READ chromeMediumLowColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor chromeWhiteColor READ chromeWhiteColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor listLowColor READ listLowColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor listMediumColor READ listMediumColor NOTIFY paletteChanged FINAL)
+
+    QML_NAMED_ELEMENT(Universal)
+    QML_ATTACHED(QQuickUniversalStyle)
+    QML_UNCREATABLE("")
+    QML_ADDED_IN_VERSION(2, 0)
+
+public:
+    explicit QQuickUniversalStyle(QObject *parent = nullptr);
+
+    static QQuickUniversalStyle *qmlAttachedProperties(QObject *object);
+
+    enum Theme { Light, Dark, System };
+    Q_ENUM(Theme)
+
+    Theme theme() const;
+    void setTheme(Theme theme);
+    void inheritTheme(Theme theme);
+    void propagateTheme();
+    void resetTheme();
+
+    enum Color {
+        Lime,
+        Green,
+        Emerald,
+        Teal,
+        Cyan,
+        Cobalt,
+        Indigo,
+        Violet,
+        Pink,
+        Magenta,
+        Crimson,
+        Red,
+        Orange,
+        Amber,
+        Yellow,
+        Brown,
+        Olive,
+        Steel,
+        Mauve,
+        Taupe
+    };
+    Q_ENUM(Color)
+
+    QVariant accent() const;
+    void setAccent(const QVariant &accent);
+    void inheritAccent(QRgb accent);
+    void propagateAccent();
+    void resetAccent();
+
+    QVariant foreground() const;
+    void setForeground(const QVariant &foreground);
+    void inheritForeground(QRgb foreground, bool has);
+    void propagateForeground();
+    void resetForeground();
+
+    QVariant background() const;
+    void setBackground(const QVariant &background);
+    void inheritBackground(QRgb background, bool has);
+    void propagateBackground();
+    void resetBackground();
+
+    Q_INVOKABLE QColor color(Color color) const;
+
+    QColor altHighColor() const;
+    QColor altLowColor() const;
+    QColor altMediumColor() const;
+    QColor altMediumHighColor() const;
+    QColor altMediumLowColor() const;
+    QColor baseHighColor() const;
+    QColor baseLowColor() const;
+    QColor baseMediumColor() const;
+    QColor baseMediumHighColor() const;
+    QColor baseMediumLowColor() const;
+    QColor chromeAltLowColor() const;
+    QColor chromeBlackHighColor() const;
+    QColor chromeBlackLowColor() const;
+    QColor chromeBlackMediumLowColor() const;
+    QColor chromeBlackMediumColor() const;
+    QColor chromeDisabledHighColor() const;
+    QColor chromeDisabledLowColor() const;
+    QColor chromeHighColor() const;
+    QColor chromeLowColor() const;
+    QColor chromeMediumColor() const;
+    QColor chromeMediumLowColor() const;
+    QColor chromeWhiteColor() const;
+    QColor listLowColor() const;
+    QColor listMediumColor() const;
+
+    enum SystemColor {
+        AltHigh,
+        AltLow,
+        AltMedium,
+        AltMediumHigh,
+        AltMediumLow,
+        BaseHigh,
+        BaseLow,
+        BaseMedium,
+        BaseMediumHigh,
+        BaseMediumLow,
+        ChromeAltLow,
+        ChromeBlackHigh,
+        ChromeBlackLow,
+        ChromeBlackMediumLow,
+        ChromeBlackMedium,
+        ChromeDisabledHigh,
+        ChromeDisabledLow,
+        ChromeHigh,
+        ChromeLow,
+        ChromeMedium,
+        ChromeMediumLow,
+        ChromeWhite,
+        ListLow,
+        ListMedium
+    };
+
+    QColor systemColor(SystemColor role) const;
+
+    static void initGlobals();
+
+Q_SIGNALS:
+    void themeChanged();
+    void accentChanged();
+    void foregroundChanged();
+    void backgroundChanged();
+    void paletteChanged();
+
+protected:
+    void attachedParentChange(QQuickAttachedPropertyPropagator *newParent, QQuickAttachedPropertyPropagator *oldParent) override;
+
+private:
+    bool variantToRgba(const QVariant &var, const char *name, QRgb *rgba) const;
+
+    // These reflect whether a color value was explicitly set on the specific
+    // item that this attached style object represents.
+    bool m_explicitTheme = false;
+    bool m_explicitAccent = false;
+    bool m_explicitForeground = false;
+    bool m_explicitBackground = false;
+    // These will be true when this item has an explicit or inherited foreground/background
+    // color, or these colors were declared globally via settings (e.g. conf or env vars).
+    // Some color properties of the style will return different values depending on whether
+    // or not these are set.
+    bool m_hasForeground = false;
+    bool m_hasBackground = false;
+    // The actual values for this item, whether explicit, inherited or globally set.
+    Theme m_theme = Light;
+    QRgb m_accent = Qt::blue;
+    QRgb m_foreground = Qt::black;
+    QRgb m_background = Qt::white;
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKUNIVERSALSTYLE_P_H
diff --git a/src/quickcontrols/universal/qquickuniversaltheme.cpp b/src/quickcontrols/universal/qquickuniversaltheme.cpp
new file mode 100644
index 0000000000..fff5400986
--- /dev/null
+++ b/src/quickcontrols/universal/qquickuniversaltheme.cpp
@@ -0,0 +1,37 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickuniversaltheme_p.h"
+
+#include <QtGui/qfontinfo.h>
+#include <QtQuickTemplates2/private/qquicktheme_p.h>
+
+QT_BEGIN_NAMESPACE
+
+void QQuickUniversalTheme::initialize(QQuickTheme *theme)
+{
+    QFont systemFont;
+    QFont groupBoxTitleFont;
+    QFont tabButtonFont;
+
+    const QFont font(QLatin1String("Segoe UI"));
+    if (QFontInfo(font).family() == QLatin1String("Segoe UI")) {
+        const QStringList families{font.family()};
+        systemFont.setFamilies(families);
+        groupBoxTitleFont.setFamilies(families);
+        tabButtonFont.setFamilies(families);
+    }
+
+    systemFont.setPixelSize(15);
+    theme->setFont(QQuickTheme::System, systemFont);
+
+    groupBoxTitleFont.setPixelSize(15);
+    groupBoxTitleFont.setWeight(QFont::DemiBold);
+    theme->setFont(QQuickTheme::GroupBox, groupBoxTitleFont);
+
+    tabButtonFont.setPixelSize(24);
+    tabButtonFont.setWeight(QFont::Light);
+    theme->setFont(QQuickTheme::TabBar, tabButtonFont);
+}
+
+QT_END_NAMESPACE
diff --git a/src/quickcontrols/universal/qquickuniversaltheme_p.h b/src/quickcontrols/universal/qquickuniversaltheme_p.h
new file mode 100644
index 0000000000..84789c5da1
--- /dev/null
+++ b/src/quickcontrols/universal/qquickuniversaltheme_p.h
@@ -0,0 +1,32 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#ifndef QQUICKUNIVERSALTHEME_P_H
+#define QQUICKUNIVERSALTHEME_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtCore/private/qglobal_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickTheme;
+
+class QQuickUniversalTheme
+{
+public:
+    static void initialize(QQuickTheme *theme);
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKUNIVERSALTHEME_P_H
diff --git a/src/quickcontrols/universal/qtquickcontrols2universalstyleplugin.cpp b/src/quickcontrols/universal/qtquickcontrols2universalstyleplugin.cpp
new file mode 100644
index 0000000000..683c966833
--- /dev/null
+++ b/src/quickcontrols/universal/qtquickcontrols2universalstyleplugin.cpp
@@ -0,0 +1,48 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include "qquickuniversalstyle_p.h"
+#include "qquickuniversaltheme_p.h"
+
+#include <QtQuickControls2/private/qquickstyleplugin_p.h>
+#include <QtQuickTemplates2/private/qquicktheme_p.h>
+
+QT_BEGIN_NAMESPACE
+
+extern void qml_register_types_QtQuick_Controls_Universal();
+Q_GHS_KEEP_REFERENCE(qml_register_types_QtQuick_Controls_Universal);
+
+class QtQuickControls2UniversalStylePlugin : public QQuickStylePlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtQuickControls2UniversalStylePlugin(QObject *parent = nullptr);
+
+    QString name() const override;
+    void initializeTheme(QQuickTheme *theme) override;
+
+    QQuickUniversalTheme theme;
+};
+
+QtQuickControls2UniversalStylePlugin::QtQuickControls2UniversalStylePlugin(QObject *parent) : QQuickStylePlugin(parent)
+{
+    volatile auto registration = &qml_register_types_QtQuick_Controls_Universal;
+    Q_UNUSED(registration);
+}
+
+QString QtQuickControls2UniversalStylePlugin::name() const
+{
+    return QStringLiteral("Universal");
+}
+
+void QtQuickControls2UniversalStylePlugin::initializeTheme(QQuickTheme *theme)
+{
+    QQuickUniversalStyle::initGlobals();
+    this->theme.initialize(theme);
+}
+
+QT_END_NAMESPACE
+
+#include "qtquickcontrols2universalstyleplugin.moc"
diff --git a/src/quickcontrols/windows/Button.qml b/src/quickcontrols/windows/Button.qml
new file mode 100644
index 0000000000..c16965b021
--- /dev/null
+++ b/src/quickcontrols/windows/Button.qml
@@ -0,0 +1,43 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultButton {
+    id: control
+
+    background: NativeStyle.Button {
+        control: control
+        contentWidth: contentItem.implicitWidth
+        contentHeight: contentItem.implicitHeight
+        useNinePatchImage: false
+        overrideState: NativeStyle.StyleItem.NeverHovered
+    }
+
+    NativeStyle.Button {
+        id: hoverButton
+        control: control
+        x: background.x
+        y: background.y
+        width: background.width
+        height: background.height
+        useNinePatchImage: false
+        overrideState: NativeStyle.StyleItem.AlwaysHovered
+        opacity: control.hovered ? 1 : 0
+        visible: opacity !== 0
+        Behavior on opacity { NumberAnimation { duration: hoverButton.transitionDuration } }
+    }
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText
+    }
+}
diff --git a/src/quickcontrols/windows/CMakeLists.txt b/src/quickcontrols/windows/CMakeLists.txt
new file mode 100644
index 0000000000..b5319fef52
--- /dev/null
+++ b/src/quickcontrols/windows/CMakeLists.txt
@@ -0,0 +1,56 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+#####################################################################
+## qtquickcontrols2windowsstyleplugin Plugin:
+#####################################################################
+
+set(qml_files
+    "Button.qml"
+    "CheckBox.qml"
+    "ComboBox.qml"
+    "Frame.qml"
+    "GroupBox.qml"
+    "ProgressBar.qml"
+    "RadioButton.qml"
+    "SelectionRectangle.qml"
+    "Slider.qml"
+    "SpinBox.qml"
+    "TextArea.qml"
+    "TextField.qml"
+    "ScrollBar.qml"
+    "ScrollView.qml"
+)
+
+qt_internal_add_qml_module(qtquickcontrols2windowsstyleplugin
+    URI "QtQuick.Controls.Windows"
+    VERSION "${PROJECT_VERSION}"
+    CLASS_NAME QtQuickControls2WindowsStylePlugin
+    IMPORTS
+        QtQuick.Controls.Fusion/auto
+    PAST_MAJOR_VERSIONS 2
+    PLUGIN_TARGET qtquickcontrols2windowsstyleplugin
+    NO_PLUGIN_OPTIONAL
+    NO_GENERATE_PLUGIN_SOURCE
+    SOURCES
+        qtquickcontrols2windowsstyleplugin.cpp
+    QML_FILES
+        ${qml_files}
+    DEFINES
+        QT_NO_CAST_FROM_ASCII
+        QT_NO_CAST_TO_ASCII
+    LIBRARIES
+        Qt::CorePrivate
+        Qt::GuiPrivate
+        Qt::QmlPrivate
+        Qt::QuickControls2Private
+        Qt::QuickPrivate
+        Qt::QuickTemplates2Private
+)
+
+# Native style is a dependency of the Windows style.
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2windowsstyleplugin
+                                              qtquickcontrols2nativestyleplugin)
+# Fusion style is the required fallback style.
+_qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2windowsstyleplugin
+                                              qtquickcontrols2fusionstyleplugin)
diff --git a/src/quickcontrols/windows/CheckBox.qml b/src/quickcontrols/windows/CheckBox.qml
new file mode 100644
index 0000000000..651caff5d2
--- /dev/null
+++ b/src/quickcontrols/windows/CheckBox.qml
@@ -0,0 +1,74 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls
+import QtQuick.Controls.impl
+import QtQuick.NativeStyle as NativeStyle
+
+T.CheckBox {
+    id: control
+
+    readonly property bool nativeIndicator: indicator instanceof NativeStyle.StyleItem
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: nativeIndicator ? 0 : 6
+    padding: nativeIndicator ? 0 : 6
+
+    indicator: NativeStyle.CheckBox {
+        control: control
+        y: control.topPadding + (control.availableHeight - height) >> 1
+        contentWidth: contentItem.implicitWidth
+        contentHeight: contentItem.implicitHeight
+        useNinePatchImage: false
+        overrideState: NativeStyle.StyleItem.NeverHovered
+    }
+
+    NativeStyle.CheckBox {
+        id: hoverCheckBox
+        control: control
+        x: indicator.x
+        y: indicator.y
+        z: 99   // Needs to be above the "unhovered" indicator
+        width: indicator.width
+        height: indicator.height
+        useNinePatchImage: false
+        overrideState: NativeStyle.StyleItem.AlwaysHovered
+        opacity: control.hovered ? 1 : 0
+        visible: opacity !== 0
+        Behavior on opacity { NumberAnimation { duration: hoverCheckBox.transitionDuration } }
+    }
+
+    contentItem: CheckLabel {
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+
+        // For some reason, the other styles set padding here (in the delegate), instead of in
+        // the control above. And they also adjust the indicator position by setting x and y
+        // explicitly (instead of using insets). So we follow the same pattern to ensure that
+        // setting a custom contentItem delegate from the app will end up looking the same for
+        // all styles. But this should probably be fixed for all styles (to make them work the
+        // same way as e.g Buttons).
+        leftPadding: {
+            if (nativeIndicator)
+                indicator.contentPadding.left
+            else
+                indicator && !mirrored ? indicator.width + spacing : 0
+        }
+
+        topPadding: nativeIndicator ? indicator.contentPadding.top : 0
+        rightPadding: {
+            if (nativeIndicator)
+                indicator.contentPadding.right
+            else
+                indicator && mirrored ? indicator.width + spacing : 0
+        }
+    }
+}
diff --git a/src/quickcontrols/windows/ComboBox.qml b/src/quickcontrols/windows/ComboBox.qml
new file mode 100644
index 0000000000..7226fa11f8
--- /dev/null
+++ b/src/quickcontrols/windows/ComboBox.qml
@@ -0,0 +1,94 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+import QtQuick.NativeStyle as NativeStyle
+
+T.ComboBox {
+    id: control
+
+    readonly property bool __nativeBackground: background instanceof NativeStyle.StyleItem
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding,
+                            90 /* minimum */ )
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    leftPadding: __nativeBackground ? background.contentPadding.left : 5
+    rightPadding: __nativeBackground ? background.contentPadding.right : 5
+    topPadding: __nativeBackground ? background.contentPadding.top : 5
+    bottomPadding: __nativeBackground ? background.contentPadding.bottom : 5
+
+    contentItem: T.TextField {
+        implicitWidth: contentWidth
+        implicitHeight: contentHeight
+        text: control.editable ? control.editText : control.displayText
+
+        enabled: control.editable
+        autoScroll: control.editable
+        readOnly: control.down
+        inputMethodHints: control.inputMethodHints
+        validator: control.validator
+        selectByMouse: control.selectTextByMouse
+
+        color: control.editable ? control.palette.text : control.palette.buttonText
+        selectionColor: control.palette.highlight
+        selectedTextColor: control.palette.highlightedText
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: NativeStyle.ComboBox {
+        control: control
+        contentWidth: contentItem.implicitWidth
+        contentHeight: contentItem.implicitHeight
+        useNinePatchImage: false
+    }
+
+    delegate: ItemDelegate {
+        width: ListView.view.width
+        text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
+        palette.text: control.palette.text
+        palette.highlightedText: control.palette.highlightedText
+        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
+        highlighted: control.highlightedIndex === index
+        hoverEnabled: control.hoverEnabled
+    }
+
+    popup: T.Popup {
+        readonly property var layoutMargins: control.__nativeBackground ? control.background.layoutMargins : null
+        x: layoutMargins ? layoutMargins.left : 0
+        y: control.height - (layoutMargins ? layoutMargins.bottom : 0)
+        width: control.width - (layoutMargins ? layoutMargins.left + layoutMargins.right : 0)
+        height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
+        topMargin: 6
+        bottomMargin: 6
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
+            highlightMoveDuration: 0
+
+            Rectangle {
+                z: 10
+                width: parent.width
+                height: parent.height
+                color: "transparent"
+                border.color: control.palette.mid
+            }
+
+            T.ScrollIndicator.vertical: ScrollIndicator { }
+        }
+
+        background: Rectangle {
+            color: control.palette.window
+        }
+    }
+}
diff --git a/src/quickcontrols/windows/Frame.qml b/src/quickcontrols/windows/Frame.qml
new file mode 100644
index 0000000000..bb37d8aa26
--- /dev/null
+++ b/src/quickcontrols/windows/Frame.qml
@@ -0,0 +1,8 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultFrame {
+}
diff --git a/src/quickcontrols/windows/GroupBox.qml b/src/quickcontrols/windows/GroupBox.qml
new file mode 100644
index 0000000000..0002feb676
--- /dev/null
+++ b/src/quickcontrols/windows/GroupBox.qml
@@ -0,0 +1,8 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultGroupBox {
+}
diff --git a/src/quickcontrols/windows/ProgressBar.qml b/src/quickcontrols/windows/ProgressBar.qml
new file mode 100644
index 0000000000..421070cf7f
--- /dev/null
+++ b/src/quickcontrols/windows/ProgressBar.qml
@@ -0,0 +1,8 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultProgressBar {
+}
diff --git a/src/quickcontrols/windows/RadioButton.qml b/src/quickcontrols/windows/RadioButton.qml
new file mode 100644
index 0000000000..b32a8a7a6b
--- /dev/null
+++ b/src/quickcontrols/windows/RadioButton.qml
@@ -0,0 +1,8 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultRadioButton {
+}
diff --git a/src/quickcontrols/windows/ScrollBar.qml b/src/quickcontrols/windows/ScrollBar.qml
new file mode 100644
index 0000000000..6906f7dfa2
--- /dev/null
+++ b/src/quickcontrols/windows/ScrollBar.qml
@@ -0,0 +1,95 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultScrollBar {
+    id: controlRoot
+
+    topPadding:    orientation === Qt.Vertical   ? controlRoot.__decreaseVisual.indicator.height : 0
+    bottomPadding: orientation === Qt.Vertical   ? controlRoot.__increaseVisual.indicator.height : 0
+    leftPadding:   orientation === Qt.Horizontal ? controlRoot.__decreaseVisual.indicator.width : 0
+    rightPadding:  orientation === Qt.Horizontal ? controlRoot.__increaseVisual.indicator.width : 0
+
+    contentItem: NativeStyle.ScrollBar {
+        control: controlRoot
+        subControl: NativeStyle.ScrollBar.Handle
+    }
+
+    NativeStyle.ScrollBar {
+        // Fade a hovered-looking version of the handle
+        // on top of the default handle when hovering it
+        x: contentItem.x
+        y: contentItem.y
+        z: 1
+        width: contentItem.width
+        height: contentItem.height
+        control: controlRoot
+        subControl: NativeStyle.ScrollBar.Handle
+        overrideState: NativeStyle.StyleItem.AlwaysHovered
+        opacity: controlRoot.hovered || control.pressed ? 1 : 0
+        visible: contentItem instanceof NativeStyle.StyleItem
+        Behavior on opacity { NumberAnimation { duration: contentItem.transitionDuration } }
+    }
+
+    // The groove background should have window color
+    Rectangle {
+        x: background.x
+        y: background.y
+        z: -1
+        width: background.width
+        height: background.height
+        color: controlRoot.palette.window
+    }
+
+    background: NativeStyle.ScrollBar {
+        control: controlRoot
+        subControl: NativeStyle.ScrollBar.Groove
+        overrideState: NativeStyle.ScrollBar.NeverHovered
+    }
+
+    __decreaseVisual.indicator: NativeStyle.ScrollBar {
+        control: controlRoot
+        subControl: NativeStyle.ScrollBar.SubLine
+        overrideState: NativeStyle.ScrollBar.AlwaysHovered
+        opacity: controlRoot.__decreaseVisual.hovered ? 1 : 0
+        visible: contentItem instanceof NativeStyle.StyleItem
+        Behavior on opacity { NumberAnimation { duration: contentItem.transitionDuration } }
+        useNinePatchImage: false
+    }
+
+    NativeStyle.ScrollBar {
+        control: controlRoot
+        subControl: NativeStyle.ScrollBar.SubLine
+        overrideState: NativeStyle.ScrollBar.AlwaysSunken
+        opacity: controlRoot.__decreaseVisual.pressed ? 1 : 0
+        visible: contentItem instanceof NativeStyle.StyleItem
+        useNinePatchImage: false
+        z: 1
+    }
+
+    __increaseVisual.indicator: NativeStyle.ScrollBar {
+        control: controlRoot
+        subControl: NativeStyle.ScrollBar.AddLine
+        x: orientation === Qt.Horizontal ? controlRoot.width - width : 0
+        y: orientation === Qt.Vertical ? controlRoot.height - height : 0
+        overrideState: NativeStyle.ScrollBar.AlwaysHovered
+        opacity: controlRoot.__increaseVisual.hovered ? 1 : 0
+        visible: contentItem instanceof NativeStyle.StyleItem
+        Behavior on opacity { NumberAnimation { duration: contentItem.transitionDuration } }
+        useNinePatchImage: false
+    }
+
+    NativeStyle.ScrollBar {
+        control: controlRoot
+        subControl: NativeStyle.ScrollBar.AddLine
+        x: __increaseVisual.indicator.x
+        y: __increaseVisual.indicator.y
+        z: 1
+        overrideState: NativeStyle.ScrollBar.AlwaysSunken
+        opacity: controlRoot.__increaseVisual.pressed ? 1 : 0
+        visible: contentItem instanceof NativeStyle.StyleItem
+        useNinePatchImage: false
+    }
+}
diff --git a/src/quickcontrols/windows/ScrollView.qml b/src/quickcontrols/windows/ScrollView.qml
new file mode 100644
index 0000000000..62619b8649
--- /dev/null
+++ b/src/quickcontrols/windows/ScrollView.qml
@@ -0,0 +1,34 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ScrollView {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    rightPadding: ScrollBar.vertical.visible ? ScrollBar.vertical.width : 0
+    bottomPadding: ScrollBar.horizontal.visible ? ScrollBar.horizontal.height : 0
+
+    ScrollBar.vertical: ScrollBar {
+        parent: control
+        x: control.mirrored ? 0 : control.width - width
+        y: 0
+        height: control.height - (control.ScrollBar.horizontal.visible ? control.ScrollBar.horizontal.height : 0)
+        active: control.ScrollBar.horizontal.active
+    }
+
+    ScrollBar.horizontal: ScrollBar {
+        parent: control
+        x: 0
+        y: control.height - height
+        width: control.width - (control.ScrollBar.vertical.visible ? control.ScrollBar.vertical.width : 0)
+        active: control.ScrollBar.vertical.active
+    }
+}
diff --git a/src/quickcontrols/windows/SelectionRectangle.qml b/src/quickcontrols/windows/SelectionRectangle.qml
new file mode 100644
index 0000000000..8efadd8e31
--- /dev/null
+++ b/src/quickcontrols/windows/SelectionRectangle.qml
@@ -0,0 +1,29 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Shapes
+
+T.SelectionRectangle {
+    id: control
+
+    topLeftHandle: Item {
+        width: 20
+        height: 20
+        visible: SelectionRectangle.control.active
+        // This item is deliberately empty. Selection handles don't feel at home
+        // for this style. But we provide an invisible handle that the user can
+        // drag on.
+    }
+
+    bottomRightHandle: Item {
+        width: 20
+        height: 20
+        visible: SelectionRectangle.control.active
+        // This item is deliberately empty. Selection handles don't feel at home
+        // for this style. But we provide an invisible handle that the user can
+        // drag on.
+    }
+
+}
diff --git a/src/quickcontrols/windows/Slider.qml b/src/quickcontrols/windows/Slider.qml
new file mode 100644
index 0000000000..67c8e9638a
--- /dev/null
+++ b/src/quickcontrols/windows/Slider.qml
@@ -0,0 +1,8 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultSlider {
+}
diff --git a/src/quickcontrols/windows/SpinBox.qml b/src/quickcontrols/windows/SpinBox.qml
new file mode 100644
index 0000000000..0d54e1a4c5
--- /dev/null
+++ b/src/quickcontrols/windows/SpinBox.qml
@@ -0,0 +1,88 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.NativeStyle as NativeStyle
+
+T.SpinBox {
+    id: control
+
+    property bool nativeIndicators: up.indicator.hasOwnProperty("_qt_default")
+                                    && down.indicator.hasOwnProperty("_qt_default")
+
+    implicitWidth: Math.max(contentItem.implicitWidth + leftInset + rightInset,
+                            90 /* minimum */ )
+    implicitHeight: Math.max(contentItem.implicitHeight, up.implicitIndicatorHeight + down.implicitIndicatorHeight)
+                    + topInset + bottomInset
+
+    spacing: 2
+
+    leftPadding: 0
+    topPadding: 0
+    rightPadding: rightInset
+    bottomPadding: 0
+
+    validator: IntValidator {
+        locale: control.locale.name
+        bottom: Math.min(control.from, control.to)
+        top: Math.max(control.from, control.to)
+    }
+
+    contentItem: TextField {
+        text: control.displayText
+        font: control.font
+        color: control.palette.text
+        selectionColor: control.palette.highlight
+        selectedTextColor: control.palette.highlightedText
+        horizontalAlignment: Qt.AlignLeft
+        verticalAlignment: Qt.AlignVCenter
+
+        topPadding: 0
+        bottomPadding: 0
+        leftPadding: 10
+        rightPadding: 10
+
+        readOnly: !control.editable
+        validator: control.validator
+        inputMethodHints: control.inputMethodHints
+
+        // Since the indicators are embedded inside the TextField we need to avoid that
+        // the TextField consumes mouse events for that area.
+        // We achieve that by setting a containmentMask
+        containmentMask: Item { height: contentItem.height; width: contentItem.width - upAndDown.width }
+    }
+
+    NativeStyle.SpinBox {
+        id: upAndDown
+        control: control
+        subControl: NativeStyle.SpinBox.Up
+        visible: nativeIndicators
+        x: up.indicator.x
+        y: up.indicator.y
+        //implicitHeight: contentItem.implicitHeight-2
+        height: parent.height-2
+        useNinePatchImage: false
+        z:99
+    }
+
+    up.indicator: Item {
+        x: parent.width - width - 2
+        y: 1
+        height: upAndDown.height >> 1
+        implicitWidth: upAndDown.implicitWidth
+        implicitHeight: (upAndDown.implicitHeight >> 1)
+        property bool _qt_default
+    }
+
+    down.indicator: Item {
+        x: parent.width - width - 2
+        y: up.indicator.y + (upAndDown.height >> 1)
+        height: upAndDown.height - up.indicator.height
+        implicitWidth: upAndDown.implicitWidth
+        implicitHeight: upAndDown.implicitHeight >> 1
+        property bool _qt_default
+    }
+
+    background: Item {} // No background, the TextField will cover the whole control
+}
diff --git a/src/quickcontrols/windows/TextArea.qml b/src/quickcontrols/windows/TextArea.qml
new file mode 100644
index 0000000000..9dbd0863bd
--- /dev/null
+++ b/src/quickcontrols/windows/TextArea.qml
@@ -0,0 +1,8 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultTextArea {
+}
diff --git a/src/quickcontrols/windows/TextField.qml b/src/quickcontrols/windows/TextField.qml
new file mode 100644
index 0000000000..1cedb17389
--- /dev/null
+++ b/src/quickcontrols/windows/TextField.qml
@@ -0,0 +1,8 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.NativeStyle as NativeStyle
+
+NativeStyle.DefaultTextField {
+}
diff --git a/src/quickcontrols/windows/qtquickcontrols2windowsstyleplugin.cpp b/src/quickcontrols/windows/qtquickcontrols2windowsstyleplugin.cpp
new file mode 100644
index 0000000000..a3431af921
--- /dev/null
+++ b/src/quickcontrols/windows/qtquickcontrols2windowsstyleplugin.cpp
@@ -0,0 +1,42 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+#include <QtQml/qqml.h>
+#include <QtQuickControls2/private/qquickstyleplugin_p.h>
+#include <QtQuickControls2/qquickstyle.h>
+
+QT_BEGIN_NAMESPACE
+
+extern void qml_register_types_QtQuick_Controls_Windows();
+Q_GHS_KEEP_REFERENCE(qml_register_types_QtQuick_Controls_Windows);
+
+class QtQuickControls2WindowsStylePlugin : public QQuickStylePlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtQuickControls2WindowsStylePlugin(QObject *parent = nullptr);
+    QString name() const override;
+    void initializeTheme(QQuickTheme *theme) override;
+};
+
+QtQuickControls2WindowsStylePlugin::QtQuickControls2WindowsStylePlugin(QObject *parent):
+    QQuickStylePlugin(parent)
+{
+    volatile auto registration = &qml_register_types_QtQuick_Controls_Windows;
+    Q_UNUSED(registration);
+}
+
+QString QtQuickControls2WindowsStylePlugin::name() const
+{
+    return QStringLiteral("Windows");
+}
+
+void QtQuickControls2WindowsStylePlugin::initializeTheme(QQuickTheme * /*theme*/)
+{
+}
+
+QT_END_NAMESPACE
+
+#include "qtquickcontrols2windowsstyleplugin.moc"