Merge v5.1.0 releasebaserock/morph

34 files changed, 468 insertions, 224 deletions

diff --git a/src/styles/Base/ButtonStyle.qml b/src/styles/Base/ButtonStyle.qml
index a524d93f..519e4d67 100644
--- a/src/styles/Base/ButtonStyle.qml
+++ b/src/styles/Base/ButtonStyle.qml
@@ -45,6 +45,7 @@ import QtQuick.Controls.Private 1.0
     \qmltype ButtonStyle
     \inqmlmodule QtQuick.Controls.Styles 1.0
     \since QtQuick.Controls.Styles 1.0
+    \ingroup controlsstyling
     \brief Provides custom styling for Button
 
     You can create a custom button by replacing the "background" delegate
@@ -72,7 +73,7 @@ import QtQuick.Controls.Private 1.0
     If you need a custom label, you can replace the label item.
 */
 
-PaddedStyle {
+Style {
     id: buttonstyle
 
     /*! The \l Button attached to this style. */
@@ -92,7 +93,7 @@ PaddedStyle {
         bottom: 4
     }
 
-    /*! The background of the button. */
+    /*! This defines the background of the button. */
     property Component background: Item {
         implicitWidth: 100
         implicitHeight: 25
@@ -129,7 +130,7 @@ PaddedStyle {
         }
     }
 
-    /*! The label of the button. */
+    /*! This defines the label of the button.  */
     property Component label: Text {
         renderType: Text.NativeRendering
         verticalAlignment: Text.AlignVCenter
diff --git a/src/styles/Base/CheckBoxStyle.qml b/src/styles/Base/CheckBoxStyle.qml
index 1323aa85..6aa6f9b5 100644
--- a/src/styles/Base/CheckBoxStyle.qml
+++ b/src/styles/Base/CheckBoxStyle.qml
@@ -45,13 +45,14 @@ import QtQuick.Controls.Private 1.0
     \qmltype CheckBoxStyle
     \inqmlmodule QtQuick.Controls.Styles 1.0
     \since QtQuick.Controls.Styles 1.0
+    \ingroup controlsstyling
     \brief Provides custom styling for CheckBox
 
     Example:
     \qml
     CheckBox {
         text: "Check Box"
-        style: CheckBoxStyle{
+        style: CheckBoxStyle {
             indicator: Rectangle {
                     implicitWidth: 16
                     implicitHeight: 16
@@ -66,13 +67,12 @@ import QtQuick.Controls.Private 1.0
                         anchors.margins: 4
                         anchors.fill: parent
                     }
-                }
             }
         }
     }
     \endqml
 */
-PaddedStyle {
+Style {
     id: checkboxStyle
 
     /*! The \l CheckBox attached to this style. */
@@ -83,7 +83,7 @@ PaddedStyle {
                         SystemPalette.Active : SystemPalette.Disabled
     }
 
-    /*! The text label. */
+    /*! This defines the text label. */
     property Component label: Text {
         text: control.text
         color: __syspal.text
@@ -102,7 +102,7 @@ PaddedStyle {
     /*! The spacing between indicator and label. */
     property int spacing: 4
 
-    /*! The indicator button. */
+    /*! This defines the indicator button. */
     property Component indicator:  Item {
         implicitWidth: 18
         implicitHeight: 18
diff --git a/src/styles/Base/ComboBoxStyle.qml b/src/styles/Base/ComboBoxStyle.qml
index 9795d1a8..7984a329 100644
--- a/src/styles/Base/ComboBoxStyle.qml
+++ b/src/styles/Base/ComboBoxStyle.qml
@@ -46,10 +46,11 @@ import QtQuick.Controls.Private 1.0
     \qmltype ComboBoxStyle
     \inqmlmodule QtQuick.Controls.Styles 1.0
     \since QtQuick.Controls.Styles 1.0
+    \ingroup controlsstyling
     \brief Provides custom styling for ComboBox
 */
 
-PaddedStyle {
+Style {
 
     /*! \internal */
     property var __syspal: SystemPalette {
@@ -62,7 +63,7 @@ PaddedStyle {
     /*! The padding between the background and the label components. */
     padding { top: 4 ; left: 6 ; right: 6 ; bottom:4 }
 
-    /*! The background of the button. */
+    /*! This defines the background of the button. */
     property Component background: Item {
         implicitWidth: 100
         implicitHeight: 25
@@ -98,7 +99,7 @@ PaddedStyle {
         }
     }
 
-    /*! The label of the button. */
+    /*! This defines the label of the button. */
     property Component label: Item {
         implicitWidth: textitem.implicitWidth + 20
         Text {
diff --git a/src/styles/Base/GroupBoxStyle.qml b/src/styles/Base/GroupBoxStyle.qml
index 86fc83fe..1c3acada 100644
--- a/src/styles/Base/GroupBoxStyle.qml
+++ b/src/styles/Base/GroupBoxStyle.qml
@@ -45,9 +45,10 @@ import QtQuick.Controls.Private 1.0
     \qmltype GroupBoxStyle
     \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
+    \ingroup controlsstyling
     \since QtQuick.Controls.Styles 1.0
 */
-PaddedStyle {
+Style {
 
     /*! \internal */
     property var __syspal: SystemPalette {
diff --git a/src/styles/Base/MenuBarStyle.qml b/src/styles/Base/MenuBarStyle.qml
index e5b91be6..4effd6ee 100644
--- a/src/styles/Base/MenuBarStyle.qml
+++ b/src/styles/Base/MenuBarStyle.qml
@@ -45,6 +45,7 @@ import "../../Private/style.js" as StyleHelpers
 /*!
     \qmltype MenuBarStyle
     \internal
+    \ingroup applicationwindowstyling
     \inqmlmodule QtQuick.Controls.Styles 1.0
 */
 
diff --git a/src/styles/Base/MenuStyle.qml b/src/styles/Base/MenuStyle.qml
index 69dffc73..eab18f7d 100644
--- a/src/styles/Base/MenuStyle.qml
+++ b/src/styles/Base/MenuStyle.qml
@@ -43,6 +43,13 @@ import QtQuick.Controls 1.0
 import QtQuick.Controls.Private 1.0
 import "../../Private/style.js" as StyleHelpers
 
+/*!
+    \qmltype MenuStyle
+    \internal
+    \ingroup menusstyling
+    \inqmlmodule QtQuick.Controls.Styles 1.0
+*/
+
 Style {
     id: styleRoot
 
diff --git a/src/styles/Base/ProgressBarStyle.qml b/src/styles/Base/ProgressBarStyle.qml
index 1d7c98a8..ada97c10 100644
--- a/src/styles/Base/ProgressBarStyle.qml
+++ b/src/styles/Base/ProgressBarStyle.qml
@@ -47,6 +47,7 @@ import QtQuick.Controls.Private 1.0
 
     \inqmlmodule QtQuick.Controls.Styles 1.0
     \since QtQuick.Controls.Styles 1.0
+    \ingroup controlsstyling
     \brief Provides custom styling for ProgressBar
 
     Example:
@@ -71,7 +72,7 @@ import QtQuick.Controls.Private 1.0
     \endqml
 */
 
-PaddedStyle {
+Style {
     id: progressBarStyle
 
     /*! \internal */
@@ -89,11 +90,14 @@ PaddedStyle {
     /*! This property holds the visible contents of the progress bar
         You can access the Slider through the \c control property.
 
-        For convenience, you can also access the readonly property \c controlState.progress
+        For convenience, you can also access the readonly property \c styleData.progress
         which provides the current progress as a \c real in the range [0-1]
     */
     padding { top: 0 ; left: 0 ; right: 0 ; bottom: 0 }
 
+    /*! \qmlproperty Component ProgressBarStyle::progress
+        The progress component for this style.
+    */
     property Component progress: Rectangle {
         property color progressColor: "#49d"
         anchors.fill: parent
@@ -129,6 +133,9 @@ PaddedStyle {
         }
     }
 
+    /*! \qmlproperty Component ProgressBarStyle::background
+        The background component for this style.
+    */
     property Component background: Item {
         implicitWidth: 200
         implicitHeight: 24
@@ -145,6 +152,9 @@ PaddedStyle {
         }
     }
 
+    /*! \qmlproperty Component ProgressBarStyle::panel
+        The panel component for this style.
+    */
     property Component panel: Item{
         property bool horizontal: control.orientation == Qt.Horizontal
         implicitWidth: horizontal ? backgroundLoader.implicitWidth : backgroundLoader.implicitHeight
diff --git a/src/styles/Base/RadioButtonStyle.qml b/src/styles/Base/RadioButtonStyle.qml
index 49d15e3d..ef3f2229 100644
--- a/src/styles/Base/RadioButtonStyle.qml
+++ b/src/styles/Base/RadioButtonStyle.qml
@@ -45,13 +45,14 @@ import QtQuick.Controls.Private 1.0
     \qmltype RadioButtonStyle
     \inqmlmodule QtQuick.Controls.Styles 1.0
     \since QtQuick.Controls.Styles 1.0
+    \ingroup controlsstyling
     \brief Provides custom styling for RadioButton
 
     Example:
     \qml
     RadioButton {
         text: "Radio Button"
-        style: RadioButtonStyle{
+        style: RadioButtonStyle {
             indicator: Rectangle {
                     implicitWidth: 16
                     implicitHeight: 16
@@ -65,14 +66,13 @@ import QtQuick.Controls.Private 1.0
                         radius: 9
                         anchors.margins: 4
                     }
-                }
             }
         }
-    }
+     }
     \endqml
 */
 
-PaddedStyle {
+Style {
     id: radiobuttonStyle
 
     /*! \internal */
@@ -83,7 +83,7 @@ PaddedStyle {
     /*! The \l RadioButton attached to this style. */
     readonly property RadioButton control: __control
 
-    /*! The text label. */
+    /*! This defines the text label. */
     property Component label: Text {
         text: control.text
         renderType: Text.NativeRendering
@@ -97,7 +97,7 @@ PaddedStyle {
     /*! The spacing between indicator and label. */
     property int spacing: 4
 
-    /*! The indicator button. */
+    /*! This defines the indicator button.  */
     property Component indicator: Rectangle {
         width: 17
         height: 17
diff --git a/src/styles/Base/ScrollViewStyle.qml b/src/styles/Base/ScrollViewStyle.qml
index 8bf5a120..ed7dd171 100644
--- a/src/styles/Base/ScrollViewStyle.qml
+++ b/src/styles/Base/ScrollViewStyle.qml
@@ -45,9 +45,10 @@ import QtQuick.Controls.Private 1.0
     \qmltype ScrollViewStyle
     \inqmlmodule QtQuick.Controls.Styles 1.0
     \since QtQuick.Controls.Styles 1.0
+    \ingroup viewsstyling
     \brief Provides custom styling for ScrollView
 */
-PaddedStyle {
+Style {
     id: root
 
     /*! \internal */
@@ -95,10 +96,12 @@ PaddedStyle {
     /*! This component controls the appearance of the
         scroll bar background.
 
-        \list
-        \li property bool hovered
-        \li property bool horizontal
-        \endlist
+        You can access the following state properties:
+
+        \table
+            \row \li property bool \b styleData.hovered
+            \row \li property bool \b styleData.horizontal
+        \endtable
     */
 
     property Component scrollBarBackground: Item {
@@ -109,26 +112,28 @@ PaddedStyle {
             anchors.fill: parent
             color: "#ddd"
             border.color: "#aaa"
-            anchors.rightMargin: horizontal ? -2 : -1
-            anchors.leftMargin: horizontal ? -2 : 0
-            anchors.topMargin: horizontal ? 0 : -2
-            anchors.bottomMargin: horizontal ? -1 : -2
+            anchors.rightMargin: styleData.horizontal ? -2 : -1
+            anchors.leftMargin: styleData.horizontal ? -2 : 0
+            anchors.topMargin: styleData.horizontal ? 0 : -2
+            anchors.bottomMargin: styleData.horizontal ? -1 : -2
         }
     }
 
     /*! This component controls the appearance of the
         scroll bar handle.
 
-        \list
-        \li property bool hovered
-        \li property bool pressed
-        \li property bool horizontal
-        \endlist
+        You can access the following state properties:
+
+        \table
+            \row \li property bool \b styleData.hovered
+            \row \li property bool \b styleData.pressed
+            \row \li property bool \b styleData.horizontal
+        \endtable
     */
 
     property Component handle: BorderImage{
-        opacity: pressed ? 0.5 : hovered ? 1 : 0.8
-        source: "images/scrollbar-handle-" + (horizontal ? "horizontal" : "vertical") + ".png"
+        opacity: styleData.pressed ? 0.5 : styleData.hovered ? 1 : 0.8
+        source: "images/scrollbar-handle-" + (styleData.horizontal ? "horizontal" : "vertical") + ".png"
         border.left: 2
         border.top: 2
         border.right: 2
@@ -140,11 +145,11 @@ PaddedStyle {
 
         You can access the following state properties:
 
-        \list
-        \li property bool hovered
-        \li property bool pressed
-        \li property bool horizontal
-        \endlist
+        \table
+            \row \li property bool \b styleData.hovered
+            \row \li property bool \b styleData.pressed
+            \row \li property bool \b styleData.horizontal
+        \endtable
     */
     property Component incrementControl: Rectangle {
         implicitWidth: 16
@@ -161,13 +166,13 @@ PaddedStyle {
                 border.color: "#88ffffff"
             }
             Image {
-                source: horizontal ? "images/arrow-right.png" : "images/arrow-down.png"
+                source: styleData.horizontal ? "images/arrow-right.png" : "images/arrow-down.png"
                 anchors.centerIn: parent
                 opacity: control.enabled ? 0.7 : 0.5
             }
             gradient: Gradient {
-                GradientStop {color: pressed ? "lightgray" : "white" ; position: 0}
-                GradientStop {color: pressed ? "lightgray" : "lightgray" ; position: 1}
+                GradientStop {color: styleData.pressed ? "lightgray" : "white" ; position: 0}
+                GradientStop {color: styleData.pressed ? "lightgray" : "lightgray" ; position: 1}
             }
         }
     }
@@ -175,21 +180,23 @@ PaddedStyle {
     /*! This component controls the appearance of the
         scroll bar decrement button.
 
-        \list
-        \li property bool hovered
-        \li property bool pressed
-        \li property bool horizontal
-        \endlist
+        You can access the following state properties:
+
+        \table
+            \row \li property bool \b styleData.hovered
+            \row \li property bool \b styleData.pressed
+            \row \li property bool \b styleData.horizontal
+        \endtable
     */
     property Component decrementControl: Rectangle {
         implicitWidth: 16
         implicitHeight: 16
         Rectangle {
             anchors.fill: parent
-            anchors.topMargin: horizontal ? 0 : -1
-            anchors.leftMargin:  horizontal ? -1 : 0
-            anchors.bottomMargin: horizontal ? -1 : 0
-            anchors.rightMargin: horizontal ? 0 : -1
+            anchors.topMargin: styleData.horizontal ? 0 : -1
+            anchors.leftMargin:  styleData.horizontal ? -1 : 0
+            anchors.bottomMargin: styleData.horizontal ? -1 : 0
+            anchors.rightMargin: styleData.horizontal ? 0 : -1
             color: "lightgray"
             Rectangle {
                 anchors.fill: parent
@@ -198,15 +205,15 @@ PaddedStyle {
                 border.color: "#88ffffff"
             }
             Image {
-                source: horizontal ? "images/arrow-left.png" : "images/arrow-up.png"
+                source: styleData.horizontal ? "images/arrow-left.png" : "images/arrow-up.png"
                 anchors.centerIn: parent
-                anchors.verticalCenterOffset: horizontal ? 0 : -1
-                anchors.horizontalCenterOffset: horizontal ? -1 : 0
+                anchors.verticalCenterOffset: styleData.horizontal ? 0 : -1
+                anchors.horizontalCenterOffset: styleData.horizontal ? -1 : 0
                 opacity: control.enabled ? 0.7 : 0.5
             }
             gradient: Gradient {
-                GradientStop {color: pressed ? "lightgray" : "white" ; position: 0}
-                GradientStop {color: pressed ? "lightgray" : "lightgray" ; position: 1}
+                GradientStop {color: styleData.pressed ? "lightgray" : "white" ; position: 0}
+                GradientStop {color: styleData.pressed ? "lightgray" : "lightgray" ; position: 1}
             }
             border.color: "#aaa"
         }
@@ -217,14 +224,13 @@ PaddedStyle {
         id: panel
         property string activeControl: ""
         property bool scrollToClickPosition: true
-        property var controlStateRef: controlState
 
-        implicitWidth: controlState.horizontal ? 200 : bg.implicitWidth
-        implicitHeight: controlState.horizontal ? bg.implicitHeight : 200
+        implicitWidth: __styleData.horizontal ? 200 : bg.implicitWidth
+        implicitHeight: __styleData.horizontal ? bg.implicitHeight : 200
 
         function pixelMetric(arg) {
             if (arg === "scrollbarExtent")
-                return (controlState.horizontal ? bg.height : bg.width);
+                return (__styleData.horizontal ? bg.height : bg.width);
             return 0;
         }
 
@@ -240,7 +246,7 @@ PaddedStyle {
             else if (itemIsHit(decrementLoader, argX, argY))
                 return "down";
             else if (itemIsHit(bg, argX, argY)) {
-                if (controlState.horizontal && argX < handleControl.x || !controlState.horizontal && argY < handleControl.y)
+                if (__styleData.horizontal && argX < handleControl.x || !__styleData.horizontal && argY < handleControl.y)
                     return "upPage"
                 else
                     return "downPage"
@@ -253,7 +259,7 @@ PaddedStyle {
             if (arg === "handle") {
                 return Qt.rect(handleControl.x, handleControl.y, handleControl.width, handleControl.height);
             } else if (arg === "groove") {
-                if (controlState.horizontal) {
+                if (__styleData.horizontal) {
                     return Qt.rect(incrementLoader.width - handleOverlap,
                                    0,
                                    __control.width - (incrementLoader.width + decrementLoader.width - handleOverlap * 2),
@@ -278,49 +284,57 @@ PaddedStyle {
             anchors.top: parent.top
             anchors.left: parent.left
             sourceComponent: decrementControl
-            property bool hovered: activeControl === "up"
-            property bool pressed: controlState.upPressed
-            property bool horizontal: controlState.horizontal
+            property QtObject styleData: QtObject {
+                readonly property bool hovered: activeControl === "up"
+                readonly property bool pressed: __styleData.upPressed
+                readonly property bool horizontal: __styleData.horizontal
+            }
         }
 
         Loader {
             id: bg
-            anchors.top: controlState.horizontal ? undefined : incrementLoader.bottom
-            anchors.bottom: controlState.horizontal ? undefined : decrementLoader.top
-            anchors.left:  controlState.horizontal ? incrementLoader.right : undefined
-            anchors.right: controlState.horizontal ? decrementLoader.left : undefined
+            anchors.top: __styleData.horizontal ? undefined : incrementLoader.bottom
+            anchors.bottom: __styleData.horizontal ? undefined : decrementLoader.top
+            anchors.left:  __styleData.horizontal ? incrementLoader.right : undefined
+            anchors.right: __styleData.horizontal ? decrementLoader.left : undefined
             sourceComponent: scrollBarBackground
-            property bool horizontal: controlState.horizontal
-            property bool hovered: activeControl !== "none"
+            property QtObject styleData: QtObject {
+                readonly property bool horizontal: __styleData.horizontal
+                readonly property bool hovered: activeControl !== "none"
+            }
         }
 
         Loader {
             id: decrementLoader
-            anchors.bottom: controlState.horizontal ? undefined : parent.bottom
-            anchors.right: controlState.horizontal ? parent.right : undefined
+            anchors.bottom: __styleData.horizontal ? undefined : parent.bottom
+            anchors.right: __styleData.horizontal ? parent.right : undefined
             sourceComponent: incrementControl
-            property bool hovered: activeControl === "down"
-            property bool pressed: controlState.downPressed
-            property bool horizontal: controlState.horizontal
+            property QtObject styleData: QtObject {
+                readonly property bool hovered: activeControl === "down"
+                readonly property bool pressed: __styleData.downPressed
+                readonly property bool horizontal: __styleData.horizontal
+            }
         }
 
         property var flickableItem: control.flickableItem
-        property int extent: Math.max(minimumHandleLength, controlState.horizontal ?
+        property int extent: Math.max(minimumHandleLength, __styleData.horizontal ?
                                           (flickableItem ? flickableItem.width/flickableItem.contentWidth : 0 ) * bg.width :
                                           (flickableItem ? flickableItem.height/flickableItem.contentHeight : 0) * bg.height)
 
         Loader {
             id: handleControl
-            height: controlState.horizontal ? implicitHeight : extent
-            width: controlState.horizontal ? extent : implicitWidth
+            height: __styleData.horizontal ? implicitHeight : extent
+            width: __styleData.horizontal ? extent : implicitWidth
             anchors.top: bg.top
             anchors.left: bg.left
-            anchors.topMargin: controlState.horizontal ? 0 : -handleOverlap + (__control.value / __control.maximumValue) * (bg.height + 2 * handleOverlap- height)
-            anchors.leftMargin: controlState.horizontal ? -handleOverlap + (__control.value / __control.maximumValue) * (bg.width + 2 * handleOverlap - width) : 0
+            anchors.topMargin: __styleData.horizontal ? 0 : -handleOverlap + (__control.value / __control.maximumValue) * (bg.height + 2 * handleOverlap- height)
+            anchors.leftMargin: __styleData.horizontal ? -handleOverlap + (__control.value / __control.maximumValue) * (bg.width + 2 * handleOverlap - width) : 0
             sourceComponent: handle
-            property bool hovered: activeControl === "handle"
-            property bool pressed: controlState.handlePressed
-            property bool horizontal: controlState.horizontal
+            property QtObject styleData: QtObject {
+                readonly property bool hovered: activeControl === "handle"
+                readonly property bool pressed: __styleData.handlePressed
+                readonly property bool horizontal: __styleData.horizontal
+            }
         }
     }
 
diff --git a/src/styles/Base/SliderStyle.qml b/src/styles/Base/SliderStyle.qml
index 7870e2f2..a6df15c0 100644
--- a/src/styles/Base/SliderStyle.qml
+++ b/src/styles/Base/SliderStyle.qml
@@ -45,6 +45,7 @@ import QtQuick.Controls.Private 1.0
     \qmltype SliderStyle
     \inqmlmodule QtQuick.Controls.Styles 1.0
     \since QtQuick.Controls.Styles 1.0
+    \ingroup controlsstyling
     \brief Provides custom styling for Slider
 
     The slider style allows you to create a custom appearance for
@@ -78,7 +79,7 @@ import QtQuick.Controls.Private 1.0
     }
     \endqml
 */
-PaddedStyle {
+Style {
     id: styleitem
 
     /*! \internal */
@@ -121,7 +122,8 @@ PaddedStyle {
     }
 
     /*! This property holds the background groove of the slider.
-        You can access the handle position through the \c handlePosition property.
+
+        You can access the handle position through the \c styleData.handlePosition property.
     */
     property Component groove: Item {
         anchors.verticalCenter: parent.verticalCenter
@@ -163,7 +165,9 @@ PaddedStyle {
 
             Loader {
                 id: grooveLoader
-                property int handlePosition: handleLoader.x + handleLoader.width/2
+                property QtObject styleData: QtObject {
+                    readonly property int handlePosition: handleLoader.x + handleLoader.width/2
+                }
                 x: padding.left
                 sourceComponent: groove
                 width: (horizontal ? parent.width : parent.height) - padding.left - padding.right
diff --git a/src/styles/Base/SpinBoxStyle.qml b/src/styles/Base/SpinBoxStyle.qml
index 9b37fe5b..931db588 100644
--- a/src/styles/Base/SpinBoxStyle.qml
+++ b/src/styles/Base/SpinBoxStyle.qml
@@ -46,10 +46,11 @@ import QtQuick.Controls.Private 1.0
     \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
     \since QtQuick.Controls.Styles 1.0
+    \ingroup controlsstyling
     \brief Provides custom styling for SpinBox
 */
 
-PaddedStyle {
+Style {
     id: spinboxStyle
 
     /*! The \l SpinBox attached to this style. */
@@ -129,7 +130,7 @@ PaddedStyle {
     /*! \internal */
     property Component panel: Item {
         id: styleitem
-        implicitWidth: controlState.contentWidth + 26
+        implicitWidth: styleData.contentWidth + 26
         implicitHeight: backgroundLoader.implicitHeight
 
         property color foregroundColor: spinboxStyle.textColor
diff --git a/src/styles/Base/StatusBarStyle.qml b/src/styles/Base/StatusBarStyle.qml
index 049b15f2..f8ffffd9 100644
--- a/src/styles/Base/StatusBarStyle.qml
+++ b/src/styles/Base/StatusBarStyle.qml
@@ -44,16 +44,20 @@ import QtQuick.Controls.Private 1.0
 /*!
     \qmltype StatusBarStyle
     \internal
+    \ingroup applicationwindowstyling
     \inqmlmodule QtQuick.Controls.Styles 1.0
     \since QtQuick.Controls.Styles 1.0
 */
-Item {
-    implicitHeight: 22
-    implicitWidth: 200
+Style {
 
-    Rectangle {
+    padding.left: 3
+    padding.right: 3
+    padding.top: 3
+    padding.bottom: 2
 
-        anchors.fill: parent
+    property Component panel: Rectangle {
+        implicitHeight: 16
+        implicitWidth: 200
 
         gradient: Gradient{
             GradientStop{color: "#eee" ; position: 0}
diff --git a/src/styles/Base/TabViewStyle.qml b/src/styles/Base/TabViewStyle.qml
index dfe1e4e9..f5cd1047 100644
--- a/src/styles/Base/TabViewStyle.qml
+++ b/src/styles/Base/TabViewStyle.qml
@@ -45,6 +45,7 @@ import QtQuick.Controls.Private 1.0
     \qmltype TabViewStyle
     \inqmlmodule QtQuick.Controls.Styles 1.0
     \since QtQuick.Controls.Styles 1.0
+    \ingroup viewsstyling
     \brief Provides custom styling for TabView
 
 \qml
@@ -59,7 +60,7 @@ import QtQuick.Controls.Private 1.0
         style: TabViewStyle {
             frameOverlap: 1
             tab: Rectangle {
-                color: tab.selected ? "steelblue" :"lightsteelblue"
+                color: styleData.selected ? "steelblue" :"lightsteelblue"
                 border.color:  "steelblue"
                 implicitWidth: Math.max(text.width + 4, 80)
                 implicitHeight: 20
@@ -67,8 +68,8 @@ import QtQuick.Controls.Private 1.0
                 Text {
                     id: text
                     anchors.centerIn: parent
-                    text: tab.title
-                    color: tab.selected ? "white" : "black"
+                    text: styleData.title
+                    color: styleData.selected ? "white" : "black"
                 }
             }
             frame: Rectangle { color: "steelblue" }
@@ -119,23 +120,24 @@ Style {
     }
 
     /*! This defines the tab. You can access the tab state through the
-        \c tab property, with the following properties:
+        \c styleData property, with the following properties:
 
         \table
-            \li readonly property int index - This is the current tab index.
-            \li readonly property bool selected - This is the active tab.
-            \li readonly property string title - Tab title text.
-            \li readonly property bool nextSelected - The next tab is selected.
-            \li readonly property bool previousSelected - The previous tab is selected.
-            \li readonly property bool hovered - The tab is currently under the mouse.
-            \li readonly property bool activeFocus - The tab button has keyboard focus.
+            \row \li readonly property int \b styleData.index \li This is the current tab index.
+            \row \li readonly property bool \b styleData.selected \li This is the active tab.
+            \row \li readonly property string \b styleData.title \li Tab title text.
+            \row \li readonly property bool \b styleData.nextSelected \li The next tab is selected.
+            \row \li readonly property bool \b styleData.previousSelected \li The previous tab is selected.
+            \row \li readonly property bool \b styleData.hovered \li The tab is being hovered.
+            \row \li readonly property bool \b styleData.activeFocus \li The tab button has keyboard focus.
+            \row \li readonly property bool \b styleData.availableWidth \li The available width for the tabs.
         \endtable
     */
     property Component tab: Item {
         scale: control.tabPosition === Qt.TopEdge ? 1 : -1
 
         property int totalOverlap: tabOverlap * (control.count - 1)
-        property real maxTabWidth: (availableWidth + totalOverlap) / control.count
+        property real maxTabWidth: (styleData.availableWidth + totalOverlap) / control.count
 
         implicitWidth: Math.round(Math.min(maxTabWidth, textitem.implicitWidth + 20))
         implicitHeight: Math.round(textitem.implicitHeight + 10)
@@ -143,16 +145,16 @@ Style {
         clip: true
         Item {
             anchors.fill: parent
-            anchors.bottomMargin: tab.selected ? 0 : 2
+            anchors.bottomMargin: styleData.selected ? 0 : 2
             clip: true
             BorderImage {
                 anchors.fill: parent
-                source: tab.selected ? "images/tab_selected.png" : "images/tab.png"
+                source: styleData.selected ? "images/tab_selected.png" : "images/tab.png"
                 border.top: 6
                 border.bottom: 6
                 border.left: 6
                 border.right: 6
-                anchors.topMargin: tab.selected ? 0 : 1
+                anchors.topMargin: styleData.selected ? 0 : 1
             }
             BorderImage {
                 anchors.fill: parent
@@ -160,7 +162,7 @@ Style {
                 anchors.leftMargin: -2
                 anchors.rightMargin: -1
                 source: "images/focusframe.png"
-                visible: tab.activeFocus && tab.selected
+                visible: styleData.activeFocus && styleData.selected
                 border.left: 4
                 border.right: 4
                 border.top: 4
@@ -170,7 +172,7 @@ Style {
         Text {
             id: textitem
             anchors.centerIn: parent
-            text: tab.title
+            text: styleData.title
             renderType: Text.NativeRendering
             scale: control.tabPosition === Qt.TopEdge ? 1 : -1
             color: __syspal.text
diff --git a/src/styles/Base/TableViewStyle.qml b/src/styles/Base/TableViewStyle.qml
index 669b934f..ff7237b0 100644
--- a/src/styles/Base/TableViewStyle.qml
+++ b/src/styles/Base/TableViewStyle.qml
@@ -45,6 +45,7 @@ import QtQuick.Controls.Private 1.0
     \qmltype TableViewStyle
     \inqmlmodule QtQuick.Controls.Styles 1.0
     \since QtQuick.Controls.Styles 1.0
+    \ingroup viewsstyling
     \brief Provides custom styling for TableView
 
     Note that this class derives from \l ScrollViewStyle
@@ -59,7 +60,13 @@ ScrollViewStyle {
     /*! The text color. */
     property color textColor: __syspal.text
 
-    /*! The text highlight color, used behind selections. */
+    /*! The background color. */
+    property color backgroundColor: __syspal.base
+
+    /*! The alternate background color. */
+    property color alternateBackgroundColor: Qt.darker(__syspal.base, 1.06)
+
+    /*! The text highlight color, used within selections. */
     property color highlightedTextColor: "white"
 
     /*! Activates items on single click. */
@@ -67,15 +74,19 @@ ScrollViewStyle {
 
     padding.top: control.headerVisible ? 0 : 1
 
-    /* Delegate for header. This delegate is described in \l TableView::headerDelegate */
+    /*! \qmlproperty Component TableViewStyle::headerDelegate
+    Delegate for header. This delegate is described in \l {TableView::headerDelegate}
+    */
     property Component headerDelegate: BorderImage {
         source: "images/header.png"
+        border.left: 4
         Text {
             anchors.fill: parent
             verticalAlignment: Text.AlignVCenter
             horizontalAlignment: Text.AlignLeft
-            anchors.leftMargin: 4
-            text: itemValue
+            anchors.leftMargin: 12
+            text: styleData.value
+            elide: Text.ElideRight
             color: textColor
             renderType: Text.NativeRendering
         }
@@ -89,52 +100,63 @@ ScrollViewStyle {
         }
     }
 
-    /* Delegate for header. This delegate is described in \l TableView::rowDelegate */
+    /*! \qmlproperty Component TableViewStyle::rowDelegate
+    Delegate for header. This delegate is described in \l {TableView::rowDelegate}
+    */
     property Component rowDelegate: Rectangle {
-        implicitHeight: 20
-        implicitWidth: 80
-        property color selectedColor: hasActiveFocus ? "#38d" : "#999"
+        height: 20
+        property color selectedColor: styleData.hasActiveFocus ? "#38d" : "#999"
         gradient: Gradient {
-            GradientStop { color: rowSelected ? Qt.lighter(selectedColor, 1.3)  : alternateBackground ? "#f2f2f2" : "white" ; position: 0 }
-            GradientStop { color: rowSelected ? Qt.lighter(selectedColor, 1.0)  : alternateBackground ? "#f2f2f2" : "white" ; position: 1 }
+            GradientStop {
+                color: styleData.selected ? Qt.lighter(selectedColor, 1.3) :
+                                            styleData.alternate ? alternateBackgroundColor : backgroundColor
+                position: 0
+            }
+            GradientStop {
+                color: styleData.selected ? Qt.lighter(selectedColor, 1.0) :
+                                            styleData.alternate ? alternateBackgroundColor : backgroundColor
+                position: 1
+            }
         }
         Rectangle {
             anchors.bottom: parent.bottom
             width: parent.width
             height: 1
-            color: rowSelected ? Qt.darker(selectedColor, 1.4) : "transparent"
+            color: styleData.selected ? Qt.darker(selectedColor, 1.4) : "transparent"
         }
         Rectangle {
             anchors.top: parent.top
             width: parent.width ; height: 1
-            color: rowSelected ? Qt.darker(selectedColor, 1.1) : "transparent"
+            color: styleData.selected ? Qt.darker(selectedColor, 1.1) : "transparent"
         }
     }
 
-    /* Delegate for header. This delegate is described in \l TableView::itemDelegate */
+    /*! \qmlproperty Component TableViewStyle::itemDelegate
+    Delegate for item. This delegate is described in \l {TableView::itemDelegate}
+    */
     property Component itemDelegate: Item {
         height: Math.max(16, label.implicitHeight)
-        property int implicitWidth: sizehint.paintedWidth + 4
+        property int implicitWidth: sizehint.paintedWidth + 20
 
         Text {
             id: label
             objectName: "label"
             width: parent.width
-            anchors.margins: 6
+            anchors.leftMargin: 12
             anchors.left: parent.left
             anchors.right: parent.right
-            horizontalAlignment: itemTextAlignment
+            horizontalAlignment: styleData.textAlignment
             anchors.verticalCenter: parent.verticalCenter
             anchors.verticalCenterOffset: 1
-            elide: itemElideMode
-            text: itemValue != undefined ? itemValue : ""
-            color: itemTextColor
+            elide: styleData.elideMode
+            text: styleData.value != undefined ? styleData.value : ""
+            color: styleData.textColor
             renderType: Text.NativeRendering
         }
         Text {
             id: sizehint
             font: label.font
-            text: itemValue ? itemValue : ""
+            text: styleData.value ? styleData.value : ""
             visible: false
         }
     }
diff --git a/src/styles/Base/TextFieldStyle.qml b/src/styles/Base/TextFieldStyle.qml
index 3c1a10a6..16d0fe94 100644
--- a/src/styles/Base/TextFieldStyle.qml
+++ b/src/styles/Base/TextFieldStyle.qml
@@ -45,6 +45,7 @@ import QtQuick.Controls.Private 1.0
     \qmltype TextFieldStyle
     \inqmlmodule QtQuick.Controls.Styles 1.0
     \since QtQuick.Controls.Styles 1.0
+    \ingroup controlsstyling
     \brief Provides custom styling for TextField.
 
     Example:
@@ -64,7 +65,7 @@ import QtQuick.Controls.Private 1.0
     \endqml
 */
 
-PaddedStyle {
+Style {
     id: style
 
     /*! \internal */
diff --git a/src/styles/Base/ToolBarStyle.qml b/src/styles/Base/ToolBarStyle.qml
index aa21195a..a5c03e7a 100644
--- a/src/styles/Base/ToolBarStyle.qml
+++ b/src/styles/Base/ToolBarStyle.qml
@@ -39,26 +39,36 @@
 ****************************************************************************/
 import QtQuick 2.1
 import QtQuick.Controls 1.0
+import QtQuick.Controls.Private 1.0
 
 /*!
     \qmltype ToolBarStyle
     \internal
+    \ingroup applicationwindowstyling
     \inqmlmodule QtQuick.Controls.Styles 1.0
 */
-Item {
-    implicitHeight: 42
-    implicitWidth: 200
-    Rectangle {
-        anchors.fill: parent
-        gradient: Gradient{
-            GradientStop{color: "#eee" ; position: 0}
-            GradientStop{color: "#ccc" ; position: 1}
-        }
+Style {
+
+    padding.left: 6
+    padding.right: 6
+    padding.top: 3
+    padding.bottom: 3
+
+    property Component panel: Item {
+        implicitHeight: 40
+        implicitWidth: 200
         Rectangle {
-            anchors.bottom: parent.bottom
-            width: parent.width
-            height: 1
-            color: "#999"
+            anchors.fill: parent
+            gradient: Gradient{
+                GradientStop{color: "#eee" ; position: 0}
+                GradientStop{color: "#ccc" ; position: 1}
+            }
+            Rectangle {
+                anchors.bottom: parent.bottom
+                width: parent.width
+                height: 1
+                color: "#999"
+            }
         }
     }
 }
diff --git a/src/styles/Base/ToolButtonStyle.qml b/src/styles/Base/ToolButtonStyle.qml
index e8d05d6c..0ead0750 100644
--- a/src/styles/Base/ToolButtonStyle.qml
+++ b/src/styles/Base/ToolButtonStyle.qml
@@ -44,6 +44,7 @@ import QtQuick.Controls.Private 1.0
 /*!
     \qmltype ToolButtonStyle
     \internal
+    \ingroup controlsstyling
     \inqmlmodule QtQuick.Controls.Styles 1.0
 */
 Style {
diff --git a/src/styles/Desktop/ButtonStyle.qml b/src/styles/Desktop/ButtonStyle.qml
index 3ae42c03..53c4ef7f 100644
--- a/src/styles/Desktop/ButtonStyle.qml
+++ b/src/styles/Desktop/ButtonStyle.qml
@@ -46,7 +46,7 @@ Style {
         elementType: "button"
         sunken: control.pressed || (control.checkable && control.checked)
         raised: !(control.pressed || (control.checkable && control.checked))
-        hover: control.__containsMouse
+        hover: control.hovered
         text: control.iconSource === "" ? "" : control.text
         hasFocus: control.activeFocus
         hints: control.styleHints
@@ -54,7 +54,7 @@ Style {
         activeControl: control.isDefault ? "default" : "f"
 
         properties: {
-            "icon": control.__action.__icon,
+            "icon": control.__iconAction.__icon,
             "menu": control.menu
         }
     }
diff --git a/src/styles/Desktop/CheckBoxStyle.qml b/src/styles/Desktop/CheckBoxStyle.qml
index 65c517ba..9b19300f 100644
--- a/src/styles/Desktop/CheckBoxStyle.qml
+++ b/src/styles/Desktop/CheckBoxStyle.qml
@@ -52,19 +52,11 @@ Style {
             elementType: "checkbox"
             sunken: control.pressed
             on: control.checked || control.pressed
-            hover: control.__containsMouse
+            hover: control.hovered
             enabled: control.enabled
             hasFocus: control.activeFocus && styleitem.style == "mac"
-            hints: {
-                if (control.checkedState === Qt.PartiallyChecked)
-                    control.styleHints.push("partiallyChecked");
-                else {
-                    var index = control.styleHints.indexOf("partiallyChecked");
-                    if (index !== -1)
-                        control.styleHints.splice(index, 1);
-                }
-                control.styleHints;
-            }
+            hints: control.styleHints
+            properties: {"partiallyChecked": (control.checkedState === Qt.PartiallyChecked) }
             contentHeight: textitem.implicitHeight
             contentWidth: textitem.implicitWidth + indicatorWidth
             property int indicatorWidth: pixelMetric("indicatorwidth") + (macStyle ? 2 : 4)
diff --git a/src/styles/Desktop/ComboBoxStyle.qml b/src/styles/Desktop/ComboBoxStyle.qml
index 78e52f53..95397641 100644
--- a/src/styles/Desktop/ComboBoxStyle.qml
+++ b/src/styles/Desktop/ComboBoxStyle.qml
@@ -58,7 +58,7 @@ Style {
             elementType: "combobox"
             sunken: control.pressed
             raised: !sunken
-            hover: control.__containsMouse
+            hover: control.hovered
             enabled: control.enabled
             // The style makes sure the text rendering won't overlap the decoration.
             // In that case, 35 pixels margin in this case looks good enough. Worst
diff --git a/src/styles/Desktop/GroupBoxStyle.qml b/src/styles/Desktop/GroupBoxStyle.qml
index 3c4bfc43..81d6de86 100644
--- a/src/styles/Desktop/GroupBoxStyle.qml
+++ b/src/styles/Desktop/GroupBoxStyle.qml
@@ -42,7 +42,7 @@ import QtQuick.Controls 1.0
 import QtQuick.Controls.Private 1.0
 
 
-PaddedStyle {
+Style {
     readonly property GroupBox control: __control
 
     property var __style: StyleItem { id: style }
@@ -55,10 +55,10 @@ PaddedStyle {
     }
 
     padding {
-        top: (control.title.length > 0 || control.checkable ? titleHeight : 0) + 6
-        left: 8
-        right: 8
-        bottom: 6
+        top: Math.round(Settings.dpiScaleFactor * (control.title.length > 0 || control.checkable ? titleHeight : 0) + (style.style == "mac" ? 9 : 6))
+        left: Math.round(Settings.dpiScaleFactor * 8)
+        right: Math.round(Settings.dpiScaleFactor * 8)
+        bottom: Math.round(Settings.dpiScaleFactor * 7 + (style.style.indexOf("windows") > -1 ? 2 : 0))
     }
 
     property Component panel: StyleItem {
diff --git a/src/styles/Desktop/RadioButtonStyle.qml b/src/styles/Desktop/RadioButtonStyle.qml
index c5a3c80d..b41b959a 100644
--- a/src/styles/Desktop/RadioButtonStyle.qml
+++ b/src/styles/Desktop/RadioButtonStyle.qml
@@ -56,7 +56,7 @@ Style {
             anchors.verticalCenterOffset: macStyle ? -1 : 0
             sunken: control.pressed
             on: control.checked || control.pressed
-            hover: control.__containsMouse
+            hover: control.hovered
             enabled: control.enabled
             hasFocus: control.activeFocus && styleitem.style == "mac"
             hints: control.styleHints
diff --git a/src/styles/Desktop/ScrollViewStyle.qml b/src/styles/Desktop/ScrollViewStyle.qml
index 42c9fc3e..deddc354 100644
--- a/src/styles/Desktop/ScrollViewStyle.qml
+++ b/src/styles/Desktop/ScrollViewStyle.qml
@@ -42,7 +42,7 @@ import QtQuick.Controls 1.0
 import QtQuick.Controls.Private 1.0
 import "." as Desktop
 
-PaddedStyle {
+Style {
     id: root
 
     padding {
@@ -74,11 +74,11 @@ PaddedStyle {
         elementType: "scrollbar"
         hover: activeControl != "none"
         activeControl: "none"
-        sunken: __control.upPressed | __control.downPressed | __control.handlePressed
+        sunken: __styleData.upPressed | __styleData.downPressed | __styleData.handlePressed
         minimum: __control.minimumValue
         maximum: __control.maximumValue
         value: __control.value
-        horizontal: __control.orientation === Qt.Horizontal
+        horizontal: __styleData.horizontal
         enabled: __control.enabled
 
         implicitWidth: horizontal ? 200 : pixelMetric("scrollbarExtent")
diff --git a/src/styles/Desktop/SliderStyle.qml b/src/styles/Desktop/SliderStyle.qml
index 1c89d21c..fbe2cfb6 100644
--- a/src/styles/Desktop/SliderStyle.qml
+++ b/src/styles/Desktop/SliderStyle.qml
@@ -40,7 +40,7 @@
 import QtQuick 2.1
 import QtQuick.Controls.Private 1.0
 
-PaddedStyle {
+Style {
     readonly property Item control: __control
     property Component panel: StyleItem {
         elementType: "slider"
diff --git a/src/styles/Desktop/SpinBoxStyle.qml b/src/styles/Desktop/SpinBoxStyle.qml
index 2da3db1f..24f51427 100644
--- a/src/styles/Desktop/SpinBoxStyle.qml
+++ b/src/styles/Desktop/SpinBoxStyle.qml
@@ -41,7 +41,7 @@ import QtQuick 2.1
 import QtQuick.Controls 1.0
 import QtQuick.Controls.Private 1.0
 
-PaddedStyle {
+Style {
     readonly property SpinBox control: __control
 
     property var __syspal: SystemPalette {
@@ -50,11 +50,12 @@ PaddedStyle {
     }
 
     padding {
-       top: control.__panel ? control.__panel.topPadding + (control.__panel.style === "mac" ? 1 : 0) : 0
+       top: control.__panel ? control.__panel.topPadding + (styleitem.style === "mac" ? 2 : 0) : 0
        left: control.__panel ? control.__panel.leftPadding : 0
        right: control.__panel ? control.__panel.rightPadding : 0
        bottom: control.__panel ? control.__panel.bottomPadding : 0
    }
+    StyleItem {id: styleitem ; visible: false}
 
     property Component panel: Item {
         id: style
@@ -114,17 +115,17 @@ PaddedStyle {
             id: styleitem
             elementType: "spinbox"
             anchors.fill: parent
-            sunken: (controlState.downEnabled && controlState.downPressed) || (controlState.upEnabled && controlState.upPressed)
-            hover: controlState.containsMouse
+            sunken: (styleData.downEnabled && styleData.downPressed) || (styleData.upEnabled && styleData.upPressed)
+            hover: control.hovered
             hints: control.styleHints
             hasFocus: control.activeFocus
             enabled: control.enabled
-            value: (controlState.upPressed ? 1 : 0)           |
-                   (controlState.downPressed ? 1<<1 : 0) |
-                   (controlState.upEnabled ? (1<<2) : 0)      |
-                   (controlState.downEnabled ? (1<<3) : 0)
-            contentWidth: controlState.contentWidth
-            contentHeight: controlState.contentHeight
+            value: (styleData.upPressed ? 1 : 0)           |
+                   (styleData.downPressed ? 1<<1 : 0) |
+                   (styleData.upEnabled ? (1<<2) : 0)      |
+                   (styleData.downEnabled ? (1<<3) : 0)
+            contentWidth: styleData.contentWidth
+            contentHeight: styleData.contentHeight
         }
     }
 }
diff --git a/src/styles/Desktop/StatusBarStyle.qml b/src/styles/Desktop/StatusBarStyle.qml
index 6921a2fe..930ca773 100644
--- a/src/styles/Desktop/StatusBarStyle.qml
+++ b/src/styles/Desktop/StatusBarStyle.qml
@@ -46,11 +46,16 @@ import QtQuick.Controls.Private 1.0
     \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
 */
-Item {
-    implicitHeight: 20
-    implicitWidth: parent ? parent.width : style.implicitWidth
-    StyleItem {
-        id: style
+Style {
+
+    padding.left: 4
+    padding.right: 4
+    padding.top: 3
+    padding.bottom: 2
+
+    property Component panel: StyleItem {
+        implicitHeight: 16
+        implicitWidth: 200
         anchors.fill: parent
         elementType: "statusbar"
     }
diff --git a/src/styles/Desktop/TabViewStyle.qml b/src/styles/Desktop/TabViewStyle.qml
index 455b99db..51b70ea4 100644
--- a/src/styles/Desktop/TabViewStyle.qml
+++ b/src/styles/Desktop/TabViewStyle.qml
@@ -51,7 +51,7 @@ Style {
 
     property StyleItem __barstyle: StyleItem {
         elementType: "tab"
-        hints: [control.tabPosition === Qt.TopEdge ? "Top" : "Bottom"]
+        properties: { "tabposition" : (control.tabPosition === Qt.TopEdge ? "Top" : "Bottom") }
         visible: false
     }
 
@@ -65,6 +65,7 @@ Style {
         minimum: tabbarItem && tabsVisible && tabbarItem.tab(currentIndex) ? tabbarItem.tab(currentIndex).width : 0
         maximum: tabbarItem && tabsVisible ? tabbarItem.width : width
         properties: { "selectedTabRect" : tabbarItem.__selectedTabRect, "orientation" : control.tabPosition }
+        hints: control.styleHints
         Component.onCompleted: {
             stack.frameWidth = styleitem.pixelMetric("defaultframewidth");
             stack.style = style;
@@ -74,13 +75,13 @@ Style {
     property Component tab: Item {
         id: item
         property string tabpos: control.count === 1 ? "only" : index === 0 ? "beginning" : index === control.count - 1 ? "end" : "middle"
-        property string selectedpos: tab.nextSelected ? "next" : tab.previousSelected ? "previous" : ""
+        property string selectedpos: styleData.nextSelected ? "next" : styleData.previousSelected ? "previous" : ""
         property string orientation: control.tabPosition === Qt.TopEdge ? "Top" : "Bottom"
         property int tabHSpace: __barstyle.pixelMetric("tabhspace");
         property int tabVSpace: __barstyle.pixelMetric("tabvspace");
         property int totalOverlap: tabOverlap * (control.count - 1)
         property real maxTabWidth: (control.width + totalOverlap) / control.count
-        implicitWidth: Math.min(maxTabWidth, Math.max(50, styleitem.textWidth(tab.title)) + tabHSpace + 2)
+        implicitWidth: Math.min(maxTabWidth, Math.max(50, styleitem.textWidth(styleData.title)) + tabHSpace + 2)
         implicitHeight: Math.max(styleitem.font.pixelSize + tabVSpace + 6, 0)
 
         StyleItem {
@@ -94,12 +95,12 @@ Style {
             anchors.rightMargin: -paintMargins
             anchors.bottomMargin: -1
             anchors.leftMargin: -paintMargins + (style === "mac" && selected ? -1 : 0)
-            properties: { "hasFrame" : true }
-            hints: [orientation, tabpos, selectedpos]
+            properties: { "hasFrame" : true, "orientation": orientation, "tabpos": tabpos, "selectedpos": selectedpos }
+            hints: control.styleHints
 
-            selected: tab.selected
-            text: elidedText(tab.title, tabbarItem.elide, item.width - item.tabHSpace)
-            hover: tab.hovered
+            selected: styleData.selected
+            text: elidedText(styleData.title, tabbarItem.elide, item.width - item.tabHSpace)
+            hover: styleData.hovered
             hasFocus: tabbarItem.activeFocus && selected
         }
     }
diff --git a/src/styles/Desktop/TableViewStyle.qml b/src/styles/Desktop/TableViewStyle.qml
index da6a47e5..171678a3 100644
--- a/src/styles/Desktop/TableViewStyle.qml
+++ b/src/styles/Desktop/TableViewStyle.qml
@@ -44,10 +44,15 @@ import QtQuick.Controls.Private 1.0
 ScrollViewStyle {
     id: root
 
+    property var __syspal: SystemPalette {
+        colorGroup: control.enabled ?
+                        SystemPalette.Active : SystemPalette.Disabled
+    }
     readonly property TableView control: __control
     property bool activateItemOnSingleClick: __styleitem.styleHint("activateItemOnSingleClick")
-    property color textColor: __styleitem.styleHint("textColor")
-    property color highlightedTextColor: __styleitem.styleHint("highlightedTextColor")
+    property color textColor: __styleitem.textColor
+    property color backgroundColor: __syspal.base
+    property color highlightedTextColor: __styleitem.highlightedTextColor
 
     property StyleItem __styleitem: StyleItem{
         property color textColor: styleHint("textColor")
@@ -55,50 +60,59 @@ ScrollViewStyle {
         elementType: "item"
         visible: false
         active: control.activeFocus
+        onActiveChanged: {
+            highlightedTextColor = styleHint("highlightedTextColor")
+            textColor = styleHint("textColor")
+        }
     }
 
     property Component headerDelegate: StyleItem {
         elementType: "header"
         activeControl: itemSort
         raised: true
-        sunken: itemPressed
-        text: itemValue
-        hover: itemContainsMouse
-        hints: itemPosition
+        sunken: styleData.pressed
+        text: styleData.value
+        hover: styleData.containsMouse
+        hints: control.styleHints
+        properties: {"headerpos": headerPosition}
+        property string itemSort:  (control.sortIndicatorVisible && styleData.column === control.sortIndicatorColumn) ? (control.sortIndicatorOrder == Qt.AscendingOrder ? "up" : "down") : "";
+        property string headerPosition: control.columnCount === 1 ? "only" :
+                                                          styleData.column === control.columnCount-1 ? "end" :
+                                                                                  styleData.column === 0 ? "beginning" : ""
     }
 
     property Component rowDelegate: StyleItem {
         id: rowstyle
         elementType: "itemrow"
-        activeControl: alternateBackground ? "alternate" : ""
-        selected: rowSelected ? true : false
+        activeControl: styleData.alternate ? "alternate" : ""
+        selected: styleData.selected ? true : false
         height: Math.max(16, rowstyle.implicitHeight)
-        active: hasActiveFocus
+        active: styleData.hasActiveFocus
     }
 
     property Component itemDelegate: Item {
         height: Math.max(16, label.implicitHeight)
-        property int implicitWidth: sizehint.paintedWidth + 4
+        property int implicitWidth: sizehint.paintedWidth + 16
 
         Text {
             id: label
             objectName: "label"
             width: parent.width
-            anchors.margins: 6
+            anchors.leftMargin: 8
             font: __styleitem.font
             anchors.left: parent.left
             anchors.right: parent.right
-            horizontalAlignment: itemTextAlignment
+            horizontalAlignment: styleData.textAlignment
             anchors.verticalCenter: parent.verticalCenter
-            elide: itemElideMode
-            text: itemValue != undefined ? itemValue : ""
-            color: itemTextColor
+            elide: styleData.elideMode
+            text: styleData.value !== undefined ? styleData.value : ""
+            color: styleData.textColor
             renderType: Text.NativeRendering
         }
         Text {
             id: sizehint
             font: label.font
-            text: itemValue ? itemValue : ""
+            text: styleData.value ? styleData.value : ""
             visible: false
         }
     }
diff --git a/src/styles/Desktop/TextFieldStyle.qml b/src/styles/Desktop/TextFieldStyle.qml
index 9a093d2a..8f71a45c 100644
--- a/src/styles/Desktop/TextFieldStyle.qml
+++ b/src/styles/Desktop/TextFieldStyle.qml
@@ -48,7 +48,7 @@ Style {
 
         sunken: true
         hasFocus: control.activeFocus
-        hover: __containsMouse
+        hover: hovered
         hints: control.styleHints
 
         SystemPalette {
@@ -64,9 +64,9 @@ Style {
         property color selectedTextColor: syspal.highlightedText
 
 
-        property bool rounded: hints.indexOf("rounded") > -1
+        property bool rounded: !!hints["rounded"]
         property int topMargin: style === "mac" ? 3 : 2
-        property int leftMargin: rounded ? 8 : 4
+        property int leftMargin: rounded ? 12 : 4
         property int rightMargin: leftMargin
         property int bottomMargin: 2
 
@@ -76,7 +76,7 @@ Style {
 
         FocusFrame {
             anchors.fill: parent
-            visible: textfield.activeFocus && textfieldstyle.styleHint("focuswidget")
+            visible: textfield.activeFocus && textfieldstyle.styleHint("focuswidget") && !rounded
         }
     }
 }
diff --git a/src/styles/Desktop/ToolBarStyle.qml b/src/styles/Desktop/ToolBarStyle.qml
index 4c7e036e..56dfbce3 100644
--- a/src/styles/Desktop/ToolBarStyle.qml
+++ b/src/styles/Desktop/ToolBarStyle.qml
@@ -46,10 +46,16 @@ import QtQuick.Controls.Private 1.0
     \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
 */
-Item {
-    implicitHeight: Math.max(childrenRect.height, toolbar.implicitHeight)
-    implicitWidth: parent ? parent.width : toolbar.implicitWidth
-    StyleItem {
+Style {
+
+    padding.left: 6
+    padding.right: 6
+    padding.top: 1
+    padding.bottom: style.style == "mac" ? 1 : 2
+
+    StyleItem { id: style ; visible: false}
+
+    property Component panel: StyleItem {
         id: toolbar
         anchors.fill: parent
         elementType: "toolbar"
diff --git a/src/styles/Desktop/ToolButtonStyle.qml b/src/styles/Desktop/ToolButtonStyle.qml
index b54eeee2..54726962 100644
--- a/src/styles/Desktop/ToolButtonStyle.qml
+++ b/src/styles/Desktop/ToolButtonStyle.qml
@@ -46,16 +46,17 @@ Style {
 
         anchors.fill: parent
         elementType: "toolbutton"
-        on: control.pressed || (control.checkable && control.checked)
-        sunken: control.pressed || (control.checkable && control.checked)
-        raised: !(control.checkable && control.checked) && control.__containsMouse
-        hover: control.__containsMouse
+        on: control.checkable && control.checked
+        sunken: control.pressed
+        raised: !(control.checkable && control.checked) && control.hovered
+        hover: control.hovered
         hasFocus: control.activeFocus
-        hints: control.styleHints.concat([control.__position])
+        hints: control.styleHints
         text: control.text
 
         properties: {
-            "icon": control.__action.__icon
+            "icon": control.__iconAction.__icon,
+            "position": control.__position
         }
     }
 }
diff --git a/src/styles/doc/qtquickcontrolsstyles.qdocconf b/src/styles/doc/qtquickcontrolsstyles.qdocconf
new file mode 100644
index 00000000..6c1e51b1
--- /dev/null
+++ b/src/styles/doc/qtquickcontrolsstyles.qdocconf
@@ -0,0 +1,43 @@
+include($QT_INSTALL_DOCS/global/qt-module-defaults.qdocconf)
+
+project                 = QtQuickControlsStyles
+description             = Qt Quick Controls Styles Reference Documentation
+url                     = http://qt-project.org/doc/qt-$QT_VER/qtquickcontrolsstyles/
+version                 = $QT_VERSION
+
+qhp.projects            = QtQuickControlsStyles
+
+qhp.QtQuickControlsStyles.file          = qtquickcontrolsstyles.qhp
+qhp.QtQuickControlsStyles.namespace     = org.qt-project.qtquickcontrolsstyles.$QT_VERSION_TAG
+qhp.QtQuickControlsStyles.virtualFolder = qtquickcontrolsstyles
+qhp.QtQuickControlsStyles.indexTitle    = Qt Quick Controls Styles
+qhp.QtQuickControlsStyles.indexRoot     =
+#qhp.QtQuickControlsStyles.extraFiles = style/qtquickcontrolsstyles.css
+
+qhp.QtQuickControlsStyles.filterAttributes    = qtquickcontrolsstyles $QT_VERSION qtrefdoc
+qhp.QtQuickControlsStyles.customFilters.Qt.name = QtQuickControlsStyles $QT_VERSION
+qhp.QtQuickControlsStyles.customFilters.Qt.filterAttributes = qtquickcontrolsstyles $QT_VERSION
+
+qhp.QtQuickControlsStyles.subprojects = qtquickcontrolsstylesqmltypes
+qhp.QtQuickControlsStyles.subprojects.qtquickcontrolsstylesqmltypes.title = QML Types
+qhp.QtQuickControlsStyles.subprojects.qtquickcontrolsstylesqmltypes.indexTitle = Qt Quick Controls Styles QML Types
+qhp.QtQuickControlsStyles.subprojects.qtquickcontrolsstylesqmltypes.selectors = class fake:qmlclass
+qhp.QtQuickControlsStyles.subprojects.qtquickcontrolsstylesqmltypes.sortPages = true
+
+depends = qtqml qtquick qtwidgets qtdoc qtquicklayouts qtquickcontrols
+
+exampledirs += ../../../examples/quick/controlsstyles
+
+# Specify the install path under QT_INSTALL_EXAMPLES
+examplesinstallpath = quick/controlsstyles
+
+headerdirs += ../Base
+
+sourcedirs += ../Base
+
+sources += ../../private/qquickstyleitem.cpp \
+           ../../private/Style.qml \
+           ../../private/qquickabstractstyle.h \
+           ../../private/qquickabstractstyle.cpp
+
+imagedirs += images
diff --git a/src/styles/doc/src/qtquickcontrolsstyles-index.qdoc b/src/styles/doc/src/qtquickcontrolsstyles-index.qdoc
new file mode 100644
index 00000000..ed4a0082
--- /dev/null
+++ b/src/styles/doc/src/qtquickcontrolsstyles-index.qdoc
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.  Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+
+
+/*!
+    \group applicationwindowstyling
+    \title Styling Application Window
+    \internal
+*/
+
+/*!
+    \group viewsstyling
+    \title Styling Views
+*/
+
+/*!
+    \group controlsstyling
+    \title Styling Controls
+*/
+
+/*!
+    \group menusstyling
+    \title Styling Menus
+    \internal
+*/
+
+
+/*!
+    \page qtquickcontrolsstyles-index.html
+    \title Qt Quick Controls Styles
+    \brief The Qt Quick Controls Styles submodule provides custom styles for Qt Quick Controls.
+
+    The Qt Quick Controls Styles submodule allows custom styling for \l {Qt Quick Controls}.
+
+    The submodule is new in Qt 5.1 and requires \l{Qt Quick} 2.1.
+
+    \section1 Getting started
+
+    The QML types can be imported into your application using the following import statement in your \c {.qml} file.
+
+    \code
+    import QtQuick.Controls.Styles 1.0
+    \endcode
+
+    \section1 Styling Views
+    \annotatedlist viewsstyling
+
+    \section1 Styling Controls
+    \annotatedlist controlsstyling
+
+    \section1 Related information
+
+     \list
+      \li \l{Qt Quick}
+      \li \l{Qt Quick Controls}
+      \li \l{Qt Quick Controls Styles QML Types}
+     \endlist
+
+*/
+
+/*!
+    \qmlmodule QtQuick.Controls.Styles 1
+    \title Qt Quick Controls Styles QML Types
+    \ingroup qmlmodules
+    \brief Provides QML types for Qt Quick Controls styles.
+
+    The \l{Qt Quick Controls} module provides a set of QML types for handling
+    styles.
+
+    Some of the controls allow custom styling similar to widget style sheets.
+    A styling object is usually a collection of properties that control behavior and simple delegates
+    that can be replaced with custom QML snippets.
+
+*/
diff --git a/src/styles/styles.pro b/src/styles/styles.pro
index 4c0ee5d3..158c1dd1 100644
--- a/src/styles/styles.pro
+++ b/src/styles/styles.pro
@@ -1,5 +1,7 @@
 TARGETPATH = QtQuick/Controls/Styles
 
+QMAKE_DOCS = $$PWD/doc/qtquickcontrolsstyles.qdocconf
+
 # Base
 QML_FILES = \
     Base/ButtonStyle.qml \