StyleKit: Implement Tumbler

Pick-to: 6.12
Change-Id: I5d846bbe13babc1001d12a1230513cc59fca6f8f
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>

10 files changed, 123 insertions, 1 deletions

diff --git a/src/labs/stylekit/CMakeLists.txt b/src/labs/stylekit/CMakeLists.txt
index 7594c90ccc..01153b518f 100644
--- a/src/labs/stylekit/CMakeLists.txt
+++ b/src/labs/stylekit/CMakeLists.txt
@@ -78,6 +78,7 @@ qt_internal_add_qml_module(LabsStyleKit
         ToolButton.qml
         ToolSeparator.qml
         ToolTip.qml
+        Tumbler.qml
         Page.qml
         Pane.qml
         Popup.qml
diff --git a/src/labs/stylekit/Tumbler.qml b/src/labs/stylekit/Tumbler.qml
new file mode 100644
index 0000000000..4602da4982
--- /dev/null
+++ b/src/labs/stylekit/Tumbler.qml
@@ -0,0 +1,74 @@
+// 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.Tumbler {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    readonly property real __delegateHeight: availableHeight / visibleItemCount
+
+    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
+    font: styleReader.font
+
+    StyleVariation.controlType: styleReader.controlType
+    StyleReader {
+        id: styleReader
+        controlType: StyleReader.Tumbler
+        enabled: control.enabled
+        focused: control.activeFocus
+        hovered: control.hovered
+        palette: control.palette
+    }
+
+    delegate: Text {
+        text: modelData
+        color: styleReader.text.color
+        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 {
+        model: control.model
+        delegate: control.delegate
+        path: Path {
+            startX: control.contentItem.width / 2
+            startY: -control.__delegateHeight / 2
+
+            PathLine {
+                x: control.contentItem.width / 2
+                y: (control.visibleItemCount + 1) * control.__delegateHeight - control.__delegateHeight / 2
+            }
+        }
+    }
+
+    background: BackgroundDelegate {
+        quickControl: control
+        backgroundStyle: styleReader.background
+    }
+}
diff --git a/src/labs/stylekit/doc/snippets/ControlsSnippets.qml b/src/labs/stylekit/doc/snippets/ControlsSnippets.qml
index db52050d4a..d677c11124 100644
--- a/src/labs/stylekit/doc/snippets/ControlsSnippets.qml
+++ b/src/labs/stylekit/doc/snippets/ControlsSnippets.qml
@@ -929,6 +929,17 @@ ApplicationWindow {
         }
         //! [toolTip]
 
+        //! [tumbler]
+        tumbler {
+            background {
+                height: 200
+                width: 60
+                color: "transparent"
+                border.width: 0
+            }
+        }
+        //! [tumbler]
+
         //! [theme]
         light: Theme {
             applicationWindow.background.color: "#f0f0f0"
diff --git a/src/labs/stylekit/doc/snippets/ReferenceFallbackStyle.qml b/src/labs/stylekit/doc/snippets/ReferenceFallbackStyle.qml
index 009dc95fc8..f5874f3fb4 100644
--- a/src/labs/stylekit/doc/snippets/ReferenceFallbackStyle.qml
+++ b/src/labs/stylekit/doc/snippets/ReferenceFallbackStyle.qml
@@ -699,5 +699,14 @@ BaseStyle {
             color: __baseWhite
         }
     }
+
+    tumbler {
+        background {
+            height: 200
+            width: 60
+            color: __transparent
+            border.width: 0
+        }
+    }
 }
 //! [1]
diff --git a/src/labs/stylekit/impl/FallbackStyle.qml b/src/labs/stylekit/impl/FallbackStyle.qml
index 48182eb416..130a19e8ce 100644
--- a/src/labs/stylekit/impl/FallbackStyle.qml
+++ b/src/labs/stylekit/impl/FallbackStyle.qml
@@ -758,4 +758,13 @@ BaseStyle {
             color: __baseWhite
         }
     }
+
+    tumbler {
+        background {
+            height: 200
+            width: 60
+            color: __transparent
+            border.width: 0
+        }
+    }
 }
diff --git a/src/labs/stylekit/qqstylekitcontrols.cpp b/src/labs/stylekit/qqstylekitcontrols.cpp
index 28adc23329..73fc78b4d4 100644
--- a/src/labs/stylekit/qqstylekitcontrols.cpp
+++ b/src/labs/stylekit/qqstylekitcontrols.cpp
@@ -610,7 +610,7 @@ QT_BEGIN_NAMESPACE
 */
 
 /*!
-    \qmlproperty ControlStyle AbstractStylableControls::toolTip
+    \qmlproperty ControlStyle StylableControls::toolTip
 
     Grouped property for styling \l [QtQuickControls]{ToolTip}.
 
@@ -619,6 +619,16 @@ QT_BEGIN_NAMESPACE
     \snippet ControlsSnippets.qml toolTip
 */
 
+/*!
+    \qmlproperty ControlStyle StylableControls::tumbler
+
+    Grouped property for styling \l [QtQuickControls]{Tumbler}.
+
+    Unset properties fall back to \l control.
+
+    \snippet ControlsSnippets.qml tumbler
+*/
+
 using namespace Qt::StringLiterals;
 
 QQStyleKitControls::QQStyleKitControls(QObject *parent)
@@ -724,6 +734,7 @@ IMPLEMENT_ACCESSORS(toolBar, QQStyleKitReader::ControlType::ToolBar)
 IMPLEMENT_ACCESSORS(toolButton, QQStyleKitReader::ControlType::ToolButton)
 IMPLEMENT_ACCESSORS(toolSeparator, QQStyleKitReader::ControlType::ToolSeparator)
 IMPLEMENT_ACCESSORS(toolTip, QQStyleKitReader::ControlType::ToolTip)
+IMPLEMENT_ACCESSORS(tumbler, QQStyleKitReader::ControlType::Tumbler)
 IMPLEMENT_ACCESSORS(radioButton, QQStyleKitReader::ControlType::RadioButton)
 IMPLEMENT_ACCESSORS(radioDelegate, QQStyleKitReader::ControlType::RadioDelegate)
 IMPLEMENT_ACCESSORS(roundButton, QQStyleKitReader::ControlType::RoundButton)
diff --git a/src/labs/stylekit/qqstylekitcontrols_p.h b/src/labs/stylekit/qqstylekitcontrols_p.h
index f83c5b0c29..f9536a2238 100644
--- a/src/labs/stylekit/qqstylekitcontrols_p.h
+++ b/src/labs/stylekit/qqstylekitcontrols_p.h
@@ -60,6 +60,7 @@ class QQStyleKitControls : public QObject, public QQmlParserStatus
     Q_PROPERTY(QQStyleKitControl *toolButton READ toolButton WRITE set_toolButton NOTIFY toolButtonChanged FINAL)
     Q_PROPERTY(QQStyleKitControl *toolSeparator READ toolSeparator WRITE set_toolSeparator NOTIFY toolSeparatorChanged FINAL)
     Q_PROPERTY(QQStyleKitControl *toolTip READ toolTip WRITE set_toolTip NOTIFY toolTipChanged FINAL)
+    Q_PROPERTY(QQStyleKitControl *tumbler READ tumbler WRITE set_tumbler NOTIFY tumblerChanged FINAL)
     Q_PROPERTY(QQStyleKitControl *swipeDelegate READ swipeDelegate WRITE set_swipeDelegate NOTIFY swipeDelegateChanged FINAL)
     Q_PROPERTY(QQStyleKitControl *switchControl READ switchControl WRITE set_switchControl NOTIFY switchControlChanged FINAL)
     Q_PROPERTY(QQStyleKitControl *switchDelegate READ switchDelegate WRITE set_switchDelegate NOTIFY switchDelegateChanged FINAL)
@@ -122,6 +123,7 @@ public:
     IMPLEMENT_ACCESSORS(toolButton)
     IMPLEMENT_ACCESSORS(toolSeparator)
     IMPLEMENT_ACCESSORS(toolTip)
+    IMPLEMENT_ACCESSORS(tumbler)
     IMPLEMENT_ACCESSORS(swipeDelegate)
     IMPLEMENT_ACCESSORS(switchControl)
     IMPLEMENT_ACCESSORS(switchDelegate)
@@ -181,6 +183,7 @@ signals:
     void toolButtonChanged();
     void toolSeparatorChanged();
     void toolTipChanged();
+    void tumblerChanged();
     void swipeDelegateChanged();
     void switchControlChanged();
     void switchDelegateChanged();
diff --git a/src/labs/stylekit/qqstylekitreader.cpp b/src/labs/stylekit/qqstylekitreader.cpp
index d8858d3e9d..d55b117258 100644
--- a/src/labs/stylekit/qqstylekitreader.cpp
+++ b/src/labs/stylekit/qqstylekitreader.cpp
@@ -105,6 +105,7 @@ QT_BEGIN_NAMESPACE
     \value StyleReader.ToolButton       \l {ToolButton}
     \value StyleReader.ToolSeparator    \l {ToolSeparator}
     \value StyleReader.ToolTip          \l {ToolTip}
+    \value StyleReader.Tumbler          \l {Tumbler}
 
     \sa {StyleVariation::controlType}{StyleVariation.controlType}
 */
diff --git a/src/labs/stylekit/qqstylekitreader_p.h b/src/labs/stylekit/qqstylekitreader_p.h
index b40afebf9b..d12c887ebf 100644
--- a/src/labs/stylekit/qqstylekitreader_p.h
+++ b/src/labs/stylekit/qqstylekitreader_p.h
@@ -85,6 +85,7 @@ public:
         ToolButton,
         ToolSeparator,
         ToolTip,
+        Tumbler,
         RadioButton,
         RadioDelegate,
         RoundButton,
diff --git a/src/labs/stylekit/qqstylekittheme.cpp b/src/labs/stylekit/qqstylekittheme.cpp
index f398a7d8b7..a0dfdb7d4f 100644
--- a/src/labs/stylekit/qqstylekittheme.cpp
+++ b/src/labs/stylekit/qqstylekittheme.cpp
@@ -98,6 +98,8 @@ static QQuickTheme::Scope scopeForType(QQStyleKitExtendableControlType type)
         return QQuickTheme::ToolBar;
     case QQStyleKitReader::ControlType::ToolTip:
         return QQuickTheme::ToolTip;
+    case QQStyleKitReader::ControlType::Tumbler:
+        return QQuickTheme::Tumbler;
     default:
         return QQuickTheme::System;
     }