StyleKit: Implement Dial

Change-Id: Ied5003539c2f54c57ef5e5b2ba6f90ad3a3f1f0f
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>
(cherry picked from commit 79bf949ca805272dba1b4d387de2a3e730d0d52e)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

11 files changed, 182 insertions, 1 deletions

diff --git a/src/labs/stylekit/CMakeLists.txt b/src/labs/stylekit/CMakeLists.txt
index 0e664c8312..7b60d4d624 100644
--- a/src/labs/stylekit/CMakeLists.txt
+++ b/src/labs/stylekit/CMakeLists.txt
@@ -43,6 +43,7 @@ qt_internal_add_qml_module(LabsStyleKit
         CheckDelegate.qml
         ComboBox.qml
         DelayButton.qml
+        Dial.qml
         Dialog.qml
         DialogButtonBox.qml
         Frame.qml
diff --git a/src/labs/stylekit/Dial.qml b/src/labs/stylekit/Dial.qml
new file mode 100644
index 0000000000..dbdb38ef1d
--- /dev/null
+++ b/src/labs/stylekit/Dial.qml
@@ -0,0 +1,68 @@
+// Copyright (C) 2026 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+// Qt-Security score:significant reason:default
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+import Qt.labs.StyleKit
+import Qt.labs.StyleKit.impl
+
+T.Dial {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    leftPadding: styleReader.leftPadding
+    rightPadding: styleReader.rightPadding
+    topPadding: styleReader.topPadding
+    bottomPadding: styleReader.bottomPadding
+
+    leftInset: styleReader.background.leftMargin
+    rightInset: styleReader.background.rightMargin
+    topInset: styleReader.background.topMargin
+    bottomInset: styleReader.background.bottomMargin
+
+    spacing: styleReader.spacing
+
+    StyleVariation.controlType: styleReader.controlType
+    StyleReader {
+        id: styleReader
+        controlType: StyleReader.Dial
+        enabled: control.enabled
+        focused: control.activeFocus
+        hovered: control.hovered
+        pressed: control.pressed
+        palette: control.palette
+    }
+
+    handle: HandleDelegate {
+        id: handleItem
+        quickControl: control
+        handleStyle: styleReader.handle
+
+        x: control.background.indicator.x + (control.background.indicator.width - width) / 2
+        y: control.background.indicator.y + (control.background.indicator.height - height) / 2
+        transform: [
+            Translate {
+                y: -Math.min(control.background.indicator.width, control.background.indicator.height) / 2
+                    + (handleItem.height / 2)
+                    + styleReader.spacing
+            },
+            Rotation {
+                angle: control.angle
+                origin.x: handleItem.width / 2
+                origin.y: handleItem.height / 2
+            }
+        ]
+    }
+
+    background: BackgroundAndIndicatorDelegate {
+        quickControl: control
+        indicatorStyle: styleReader.indicator
+        backgroundStyle: styleReader.background
+    }
+}
diff --git a/src/labs/stylekit/doc/snippets/ControlsSnippets.qml b/src/labs/stylekit/doc/snippets/ControlsSnippets.qml
index 12e79f89ec..217cbb9292 100644
--- a/src/labs/stylekit/doc/snippets/ControlsSnippets.qml
+++ b/src/labs/stylekit/doc/snippets/ControlsSnippets.qml
@@ -204,6 +204,27 @@ ApplicationWindow {
         }
         //! [delayButton]
 
+        //! [dial]
+        dial {
+            spacing: 0
+            handle.width: 15
+            handle.height: 15
+            background.visible: false
+            indicator {
+                width: 60
+                height: 60
+                radius: 255
+                foreground {
+                    fillWidth: true
+                    fillHeight: true
+                    width: 6
+                    height: 6
+                    color: palette.accent
+                }
+            }
+        }
+        //! [dial]
+
         //! [dialog]
         dialog {
             text {
diff --git a/src/labs/stylekit/doc/snippets/ReferenceFallbackStyle.qml b/src/labs/stylekit/doc/snippets/ReferenceFallbackStyle.qml
index 0515c741ae..5ae69bb0bc 100644
--- a/src/labs/stylekit/doc/snippets/ReferenceFallbackStyle.qml
+++ b/src/labs/stylekit/doc/snippets/ReferenceFallbackStyle.qml
@@ -194,6 +194,25 @@ BaseStyle {
         }
     }
 
+    dial {
+        spacing: 0
+        handle.width: 15
+        handle.height: 15
+        background.visible: false
+        indicator {
+            width: 60
+            height: 60
+            radius: 255
+            foreground {
+                fillWidth: true
+                fillHeight: true
+                width: 6
+                height: 6
+                delegate: DialDelegate {}
+            }
+        }
+    }
+
     dialog {
         text {
             padding: 12
diff --git a/src/labs/stylekit/impl/CMakeLists.txt b/src/labs/stylekit/impl/CMakeLists.txt
index a96be763f0..67f3659a36 100644
--- a/src/labs/stylekit/impl/CMakeLists.txt
+++ b/src/labs/stylekit/impl/CMakeLists.txt
@@ -16,6 +16,7 @@ qt_internal_add_qml_module(LabsStyleKitImpl
         BackgroundAndIndicatorDelegate.qml
         BackgroundDelegate.qml
         BusyIndicatorDelegate.qml
+        DialDelegate.qml
         FallbackStyle.qml
         HandleDelegate.qml
         IndicatorDelegate.qml
diff --git a/src/labs/stylekit/impl/DialDelegate.qml b/src/labs/stylekit/impl/DialDelegate.qml
new file mode 100644
index 0000000000..bfefef209b
--- /dev/null
+++ b/src/labs/stylekit/impl/DialDelegate.qml
@@ -0,0 +1,37 @@
+// Copyright (C) 2026 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+// Qt-Security score:significant reason:default
+
+import QtQuick
+import QtQuick.Shapes
+import Qt.labs.StyleKit
+
+Shape {
+    id: root
+
+    required property DelegateStyle delegateStyle
+    required property QtObject control
+
+    implicitWidth: delegateStyle.width
+    implicitHeight: delegateStyle.height
+    width: parent.width
+    height: parent.height
+
+    preferredRendererType: Shape.CurveRenderer
+
+    ShapePath {
+        strokeWidth: root.delegateStyle.width
+        strokeColor: root.delegateStyle.color
+        fillColor: "transparent"
+        capStyle: ShapePath.RoundCap
+
+        PathAngleArc {
+            centerX: root.width / 2
+            centerY: root.height / 2
+            radiusX: root.width / 2 - root.delegateStyle.width / 2
+            radiusY: root.height / 2 - root.delegateStyle.width / 2
+            startAngle: root.control.startAngle - 90
+            sweepAngle: root.control.position * (root.control.endAngle - root.control.startAngle)
+        }
+    }
+}
diff --git a/src/labs/stylekit/impl/FallbackStyle.qml b/src/labs/stylekit/impl/FallbackStyle.qml
index 2b7b88ad40..5fb9f0a37d 100644
--- a/src/labs/stylekit/impl/FallbackStyle.qml
+++ b/src/labs/stylekit/impl/FallbackStyle.qml
@@ -196,6 +196,25 @@ BaseStyle {
         }
     }
 
+    dial {
+        spacing: 0
+        handle.width: 15
+        handle.height: 15
+        background.visible: false
+        indicator {
+            width: 60
+            height: 60
+            radius: 255
+            foreground {
+                fillWidth: true
+                fillHeight: true
+                width: 6
+                height: 6
+                delegate: DialDelegate {}
+            }
+        }
+    }
+
     dialog {
         text {
             padding: 12
diff --git a/src/labs/stylekit/qqstylekitcontrols.cpp b/src/labs/stylekit/qqstylekitcontrols.cpp
index 97344012a6..283fbf1ba7 100644
--- a/src/labs/stylekit/qqstylekitcontrols.cpp
+++ b/src/labs/stylekit/qqstylekitcontrols.cpp
@@ -156,6 +156,16 @@ QT_BEGIN_NAMESPACE
 */
 
 /*!
+    \qmlproperty ControlStyle AbstractStylableControls::dial
+
+    Grouped property for styling \l [QtQuickControls]{Dial}.
+
+    Unset properties fall back to \l control.
+
+    \snippet ControlsSnippets.qml dial
+*/
+
+/*!
     \qmlproperty ControlStyle AbstractStylableControls::dialog
 
     Grouped property for styling \l [QtQuickControls]{Dialog}.
@@ -672,6 +682,7 @@ IMPLEMENT_ACCESSORS(checkBox, QQStyleKitReader::ControlType::CheckBox)
 IMPLEMENT_ACCESSORS(checkDelegate, QQStyleKitReader::ControlType::CheckDelegate)
 IMPLEMENT_ACCESSORS(comboBox, QQStyleKitReader::ControlType::ComboBox)
 IMPLEMENT_ACCESSORS(delayButton, QQStyleKitReader::ControlType::DelayButton)
+IMPLEMENT_ACCESSORS(dial, QQStyleKitReader::ControlType::Dial)
 IMPLEMENT_ACCESSORS(dialog, QQStyleKitReader::ControlType::Dialog)
 IMPLEMENT_ACCESSORS(dialogButtonBox, QQStyleKitReader::ControlType::DialogButtonBox)
 IMPLEMENT_ACCESSORS(progressBar, QQStyleKitReader::ControlType::ProgressBar)
diff --git a/src/labs/stylekit/qqstylekitcontrols_p.h b/src/labs/stylekit/qqstylekitcontrols_p.h
index b4b727d546..747021ae23 100644
--- a/src/labs/stylekit/qqstylekitcontrols_p.h
+++ b/src/labs/stylekit/qqstylekitcontrols_p.h
@@ -40,6 +40,7 @@ class QQStyleKitControls : public QObject, public QQmlParserStatus
     Q_PROPERTY(QQStyleKitControl *checkDelegate READ checkDelegate WRITE set_checkDelegate NOTIFY checkDelegateChanged FINAL)
     Q_PROPERTY(QQStyleKitControl *comboBox READ comboBox WRITE set_comboBox NOTIFY comboBoxChanged FINAL)
     Q_PROPERTY(QQStyleKitControl *delayButton READ delayButton WRITE set_delayButton NOTIFY delayButtonChanged FINAL)
+    Q_PROPERTY(QQStyleKitControl *dial READ dial WRITE set_dial NOTIFY dialChanged FINAL)
     Q_PROPERTY(QQStyleKitControl *dialog READ dialog WRITE set_dialog NOTIFY dialogChanged FINAL)
     Q_PROPERTY(QQStyleKitControl *dialogButtonBox READ dialogButtonBox WRITE set_dialogButtonBox NOTIFY dialogButtonBoxChanged FINAL)
     Q_PROPERTY(QQStyleKitControl *flatButton READ flatButton WRITE set_flatButton NOTIFY flatButtonChanged FINAL)
@@ -99,6 +100,7 @@ public:
     IMPLEMENT_ACCESSORS(checkDelegate)
     IMPLEMENT_ACCESSORS(comboBox)
     IMPLEMENT_ACCESSORS(delayButton)
+    IMPLEMENT_ACCESSORS(dial)
     IMPLEMENT_ACCESSORS(dialog)
     IMPLEMENT_ACCESSORS(dialogButtonBox)
     IMPLEMENT_ACCESSORS(flatButton)
@@ -155,6 +157,7 @@ signals:
     void checkDelegateChanged();
     void comboBoxChanged();
     void delayButtonChanged();
+    void dialChanged();
     void dialogChanged();
     void dialogButtonBoxChanged();
     void flatButtonChanged();
diff --git a/src/labs/stylekit/qqstylekitreader.cpp b/src/labs/stylekit/qqstylekitreader.cpp
index 032f830f1a..4894d731bf 100644
--- a/src/labs/stylekit/qqstylekitreader.cpp
+++ b/src/labs/stylekit/qqstylekitreader.cpp
@@ -68,6 +68,7 @@ QT_BEGIN_NAMESPACE
     \value StyleReader.CheckDelegate    \l {CheckDelegate}
     \value StyleReader.ComboBox         \l {ComboBox}
     \value StyleReader.DelayButton      \l {DelayButton}
+    \value StyleReader.Dial             \l {Dial}
     \value StyleReader.Dialog           \l {Dialog}
     \value StyleReader.DialogButtonBox  \l {DialogButtonBox}
     \value StyleReader.Frame            \l {Frame}
@@ -79,7 +80,6 @@ QT_BEGIN_NAMESPACE
     \value StyleReader.MenuBarItem      \l {MenuBarItem}
     \value StyleReader.MenuItem         \l {MenuItem}
     \value StyleReader.MenuSeparator    \l {MenuSeparator}
-    \value StyleReader.Dialog           \l {Dialog}
     \value StyleReader.Page             \l {Page}
     \value StyleReader.PageIndicator    \l {PageIndicator}
     \value StyleReader.Pane             \l {Pane}
diff --git a/src/labs/stylekit/qqstylekitreader_p.h b/src/labs/stylekit/qqstylekitreader_p.h
index 838bf5832a..782a6c4ca1 100644
--- a/src/labs/stylekit/qqstylekitreader_p.h
+++ b/src/labs/stylekit/qqstylekitreader_p.h
@@ -61,6 +61,7 @@ public:
         CheckDelegate,
         ComboBox,
         DelayButton,
+        Dial,
         Dialog,
         DialogButtonBox,
         FlatButton,