Refactor and clean up public style API

Change-Id: I10271c860abd9b45a262e3548628e6a3026e1a4f
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>

54 files changed, 1055 insertions, 775 deletions

diff --git a/src/controls/Button.qml b/src/controls/Button.qml
index 742696c6..cf725085 100644
--- a/src/controls/Button.qml
+++ b/src/controls/Button.qml
@@ -56,6 +56,9 @@ import QtQuick.Controls.Private 1.0
 
     Button is similar to the QPushButton widget.
 
+    You can create a custom appearance for a Button by
+    assigning a ButtonStyle.
+
  */
 BasicButton {
     id: button
@@ -90,14 +93,17 @@ BasicButton {
      */
     property Menu menu: null
 
+    /*! \qmlproperty bool BasicButton::pressed
+
+        This property holds whether the button is pressed. */
+    readonly property bool pressed: __behavior.effectivePressed || menu && menu.__popupVisible
+
     activeFocusOnTab: true
 
     Accessible.name: text
 
     style: Qt.createComponent(Settings.theme() + "/ButtonStyle.qml", button)
 
-    readonly property bool pressed: __behavior.effectivePressed || menu && menu.__popupVisible
-
     Binding {
         target: menu
         property: "__minimumWidth"
diff --git a/src/controls/ComboBox.qml b/src/controls/ComboBox.qml
index 366ed78f..03db9c64 100644
--- a/src/controls/ComboBox.qml
+++ b/src/controls/ComboBox.qml
@@ -91,7 +91,7 @@ Control {
     property bool activeFocusOnPress: false
 
     /*! \internal */
-    readonly property bool __pressed: mouseArea.pressed && mouseArea.containsMouse || popup.__popupVisible
+    readonly property bool pressed: mouseArea.pressed && mouseArea.containsMouse || popup.__popupVisible
     /*! \internal */
     property alias __containsMouse: mouseArea.containsMouse
     /*! \internal */
@@ -128,7 +128,7 @@ Control {
         id: popup
         objectName: "popup"
 
-        style: isPopup ? __style.popupStyle : __style.dropDownStyle
+        style: isPopup ? __style.__popupStyle : __style.__dropDownStyle
 
         readonly property string selectedText: items[__selectedIndex] ? items[__selectedIndex].text : ""
         property string textRole: ""
diff --git a/src/controls/GroupBox.qml b/src/controls/GroupBox.qml
index 52be7dc5..cdb1530e 100644
--- a/src/controls/GroupBox.qml
+++ b/src/controls/GroupBox.qml
@@ -157,7 +157,6 @@ Item {
 
     Loader {
         id: loader
-        property alias control: groupbox
         anchors.fill: parent
         property int topMargin: (title.length > 0 || checkable ? 16 : 0) + content.margin
         property int bottomMargin: 4
@@ -167,7 +166,7 @@ Item {
         onLoaded: item.z = -1
         Loader {
             id: styleLoader
-            property alias control: groupbox
+            property alias __control: groupbox
             sourceComponent: groupbox.style
         }
     }
diff --git a/src/controls/Menu.qml b/src/controls/Menu.qml
index 35fe21bb..7d872b23 100644
--- a/src/controls/Menu.qml
+++ b/src/controls/Menu.qml
@@ -166,6 +166,7 @@ MenuPrivate {
             id: styleLoader
             active: !root.isNative
             sourceComponent: root.style
+            property alias __control: menuFrameLoader
             onStatusChanged: {
                 if (status === Loader.Error)
                     console.error("Failed to load Style for", root)
diff --git a/src/controls/MenuBar.qml b/src/controls/MenuBar.qml
index 95d215c0..feb446ad 100644
--- a/src/controls/MenuBar.qml
+++ b/src/controls/MenuBar.qml
@@ -99,6 +99,7 @@ MenuBarPrivate {
 
         Loader {
             id: styleLoader
+            property alias __control: menuBarLoader
             sourceComponent: root.style
             onStatusChanged: {
                 if (status === Loader.Error)
diff --git a/src/controls/ProgressBar.qml b/src/controls/ProgressBar.qml
index db476b7d..92181df1 100644
--- a/src/controls/ProgressBar.qml
+++ b/src/controls/ProgressBar.qml
@@ -118,8 +118,8 @@ Control {
     Accessible.role: Accessible.ProgressBar
     Accessible.name: value
 
-    implicitWidth: orientation === Qt.Horizontal ? 200 : (__panel ? __panel.implicitHeight : 0)
-    implicitHeight: orientation === Qt.Horizontal ? (__panel ? __panel.implicitHeight : 0) : 200
+    implicitWidth:(__panel ? __panel.implicitWidth : 0)
+    implicitHeight: (__panel ? __panel.implicitHeight: 0)
 
     /* \internal */
     function setValue(v) {
diff --git a/src/controls/ScrollView.qml b/src/controls/ScrollView.qml
index 62c0a8b2..a6d8a482 100644
--- a/src/controls/ScrollView.qml
+++ b/src/controls/ScrollView.qml
@@ -80,6 +80,8 @@ import QtQuick.Controls.Styles 1.0
     In this case the content size of the ScrollView will simply mirror that of its contained
     \l flickableItem.
 
+    You can create a custom appearance for a ScrollView by
+    assigning a ScrollViewStyle.
 */
 
 FocusScope {
@@ -175,7 +177,7 @@ FocusScope {
                 if (status === Loader.Error)
                     console.error("Failed to load Style for", root)
             }
-            property alias control: root
+            property alias __control: root
         }
 
         Binding {
@@ -272,9 +274,8 @@ FocusScope {
         ScrollViewHelper {
             id: scroller
             anchors.fill: parent
-            property int frameWidth: frameVisible ? __style.frameWidth : 0
-            property bool outerFrame: !frameVisible || !(__style ? __style.externalScrollBars : 0)
-            property int scrollBarSpacing: outerFrame ? 0 : (__style ? __style.scrollBarSpacing : 0)
+            property bool outerFrame: !frameVisible || !(__style ? __style.__externalScrollBars : 0)
+            property int scrollBarSpacing: outerFrame ? 0 : (__style ? __style.__scrollBarSpacing : 0)
             property int verticalScrollbarOffset: verticalScrollBar.visible && !verticalScrollBar.isTransient ?
                                                       verticalScrollBar.width + scrollBarSpacing : 0
             property int horizontalScrollbarOffset: horizontalScrollBar.visible && !horizontalScrollBar.isTransient ?
@@ -291,9 +292,10 @@ FocusScope {
             Item {
                 id: viewportItem
                 anchors.fill: frameLoader
-                anchors.margins: scroller.frameWidth
-                anchors.rightMargin: scroller.frameWidth + (scroller.outerFrame ? scroller.verticalScrollbarOffset : 0)
-                anchors.bottomMargin: scroller.frameWidth + (scroller.outerFrame ? scroller.horizontalScrollbarOffset : 0)
+                anchors.topMargin: frameVisible ? __style.padding.top : 0
+                anchors.leftMargin: frameVisible ? __style.padding.left : 0
+                anchors.rightMargin:  (frameVisible ? __style.padding.right : 0) +  (scroller.outerFrame ? scroller.verticalScrollbarOffset : 0)
+                anchors.bottomMargin: (frameVisible ? __style.padding.bottom : 0) + (scroller.outerFrame ? scroller.horizontalScrollbarOffset : 0)
                 clip: true
             }
         }
diff --git a/src/controls/Slider.qml b/src/controls/Slider.qml
index b7bdd7be..7723496e 100644
--- a/src/controls/Slider.qml
+++ b/src/controls/Slider.qml
@@ -61,6 +61,9 @@ import QtQuick.Controls.Private 1.0
 
     The Slider value is by default in the range [0, 1]. If integer values are
     needed, you can set the \l stepSize.
+
+    You can create a custom appearance for a Slider by
+    assigning a SliderStyle.
 */
 
 Control {
diff --git a/src/controls/SpinBox.qml b/src/controls/SpinBox.qml
index 6d366dc3..ab0eeb0b 100644
--- a/src/controls/SpinBox.qml
+++ b/src/controls/SpinBox.qml
@@ -146,26 +146,22 @@ Control {
     }
 
     /*! \internal */
-    readonly property bool __upEnabled: value != maximumValue;
-    /*! \internal */
-    readonly property bool __downEnabled: value != minimumValue;
-    /*! \internal */
-    readonly property alias __upPressed: mouseUp.pressed
-    /*! \internal */
-    readonly property alias __downPressed: mouseDown.pressed
-    /*! \internal */
-    property alias __upHovered: mouseUp.containsMouse
-    /*! \internal */
-    property alias __downHovered: mouseDown.containsMouse
-    /*! \internal */
-    property alias __containsMouse: mouseArea.containsMouse
-    /*! \internal */
     property alias __text: input.text
-    /*! \internal */
-    readonly property int __contentHeight: Math.max(input.implicitHeight, 20)
-    /*! \internal */
-    readonly property int __contentWidth: Math.max(maxSizeHint.implicitWidth,
-                                                   minSizeHint.implicitWidth)
+
+    __controlState: QtObject {
+        readonly property bool upEnabled: value != maximumValue;
+        readonly property alias upHovered: mouseUp.containsMouse
+        readonly property alias upPressed: mouseUp.pressed
+
+        readonly property bool downEnabled: value != minimumValue;
+        readonly property alias downPressed: mouseDown.pressed
+        readonly property alias downHovered: mouseDown.containsMouse
+
+        readonly property alias containsMouse: mouseArea.containsMouse
+
+        readonly property int contentHeight: Math.max(input.implicitHeight, 20)
+        readonly property int contentWidth: Math.max(maxSizeHint.implicitWidth, minSizeHint.implicitWidth)
+    }
 
     Text {
         id: maxSizeHint
@@ -205,10 +201,10 @@ Control {
         id: input
         clip: true
         anchors.fill: parent
-        anchors.leftMargin: __panel ? __panel.leftMargin : 0
-        anchors.topMargin: __panel ? __panel.topMargin : 0
-        anchors.rightMargin: __panel ? __panel.rightMargin: 0
-        anchors.bottomMargin: __panel ? __panel.bottomMargin: 0
+        anchors.leftMargin: __panel ? __panel.margins.left : 0
+        anchors.topMargin: __panel ? __panel.margins.top : 0
+        anchors.rightMargin: __panel ? __panel.margins.right: 0
+        anchors.bottomMargin: __panel ? __panel.margins.bottom: 0
 
         focus: true
         activeFocusOnPress: spinbox.activeFocusOnPress
diff --git a/src/controls/StatusBar.qml b/src/controls/StatusBar.qml
index c984d0bd..b5d9e4d8 100644
--- a/src/controls/StatusBar.qml
+++ b/src/controls/StatusBar.qml
@@ -77,5 +77,6 @@ Item {
         id: loader
         anchors.fill: parent
         sourceComponent: style
+        property var __control: statusbar
     }
 }
diff --git a/src/controls/TabView.qml b/src/controls/TabView.qml
index 153c2400..7871cdd6 100644
--- a/src/controls/TabView.qml
+++ b/src/controls/TabView.qml
@@ -49,6 +49,8 @@ import QtQuick.Controls.Private 1.0
     \ingroup views
     \brief A control that allows the user to select one of multiple stacked items.
 
+    You can create a custom appearance for a TabView by
+    assigning a TabViewStyle.
 */
 
 FocusScope {
@@ -176,7 +178,7 @@ FocusScope {
         id: loader
         z: tabbarItem.z - 1
         sourceComponent: style
-        property var control: root
+        property var __control: root
     }
 
     Loader {
@@ -184,10 +186,11 @@ FocusScope {
         z: tabbarItem.z - 1
 
         anchors.fill: parent
-        anchors.topMargin: tabbarItem && tabsVisible && tabPosition == Qt.TopEdge ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
-        anchors.bottomMargin: tabbarItem && tabsVisible && tabPosition == Qt.BottomEdge ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
+        anchors.topMargin: tabPosition === Qt.TopEdge && tabbarItem && tabsVisible  ? Math.max(0, tabbarItem.height - baseOverlap) : 0
+        anchors.bottomMargin: tabPosition === Qt.BottomEdge && tabbarItem && tabsVisible ? Math.max(0, tabbarItem.height -baseOverlap) : 0
         sourceComponent: frameVisible && loader.item ? loader.item.frame : null
-        property var control: root
+
+        property int baseOverlap: __styleItem ? __styleItem.frameOverlap : 0
 
         Item {
             id: stack
@@ -199,7 +202,6 @@ FocusScope {
 
             property int frameWidth
             property string style
-            property int baseOverlap
 
             Component.onCompleted: addTabs(stack.children)
 
@@ -240,15 +242,14 @@ FocusScope {
     states: [
         State {
             name: "Bottom"
-            when: tabPosition == Qt.BottomEdge && tabbarItem != undefined
+            when: tabPosition === Qt.BottomEdge && tabbarItem != undefined
             PropertyChanges {
                 target: tabbarItem
-                anchors.topMargin: tabbarItem.height
+                anchors.topMargin: -frameLoader.baseOverlap
             }
             AnchorChanges {
                 target: tabbarItem
-                anchors.top: undefined
-                anchors.bottom: root.bottom
+                anchors.top: frameLoader.bottom
             }
         }
     ]
diff --git a/src/controls/TableView.qml b/src/controls/TableView.qml
index 8abd8330..6669feaa 100644
--- a/src/controls/TableView.qml
+++ b/src/controls/TableView.qml
@@ -147,7 +147,7 @@ ScrollView {
         }
     }
     \endcode */
-    property Component itemDelegate: __style ? __style.standardDelegate : null
+    property Component itemDelegate: __style ? __style.itemDelegate : null
 
     /*! This property defines a delegate to draw a row.
 
@@ -496,8 +496,10 @@ ScrollView {
             parent: __scroller
             visible: headerVisible
             anchors.top: parent.top
+            anchors.topMargin: viewport.anchors.topMargin
+            anchors.leftMargin: viewport.anchors.leftMargin
             anchors.margins: viewport.anchors.margins
-            anchors.rightMargin: __scroller.frameWidth +
+            anchors.rightMargin: __scroller.rightMargin +
                                  (__scroller.outerFrame && __scrollBarTopMargin ? 0 : __scroller.verticalScrollBar.width
                                                           + __scroller.scrollBarSpacing)
 
diff --git a/src/controls/TextField.qml b/src/controls/TextField.qml
index a8c7ee1b..e374c83d 100644
--- a/src/controls/TextField.qml
+++ b/src/controls/TextField.qml
@@ -55,6 +55,9 @@ import "Styles"
     inputMask). Setting \l echoMode to an appropriate value enables
     TextField to be used for a password input field.
 
+    You can create a custom appearance for a TextField by
+    assigning a TextFieldStyle.
+
     \sa TextArea, TextInput
 */
 
@@ -562,7 +565,7 @@ Control {
         anchors.fill: parent
         verticalAlignment: Text.AlignVCenter
 
-        color: __panel ? __panel.foregroundColor : "darkgray"
+        color: __panel ? __panel.textColor : "darkgray"
         clip: true
         renderType: Text.NativeRendering
 
diff --git a/src/controls/ToolBar.qml b/src/controls/ToolBar.qml
index 36330c77..abf8c2fa 100644
--- a/src/controls/ToolBar.qml
+++ b/src/controls/ToolBar.qml
@@ -80,5 +80,6 @@ Item {
         id: loader
         anchors.fill: parent
         sourceComponent: style
+        property var __control: toolbar
     }
 }
diff --git a/src/controls/doc/qtquickcontrols.qdocconf b/src/controls/doc/qtquickcontrols.qdocconf
index 9f01eaec..863c9d61 100644
--- a/src/controls/doc/qtquickcontrols.qdocconf
+++ b/src/controls/doc/qtquickcontrols.qdocconf
@@ -37,8 +37,10 @@ exampledirs += ../../../examples/quick/controls
 examplesinstallpath = quick/controls
 
 headerdirs += ../
+headerdirs += ../ ../../styles
 
 sourcedirs += ../
+sourcedirs += ../ ../../styles
 
 sources += ../../private/qstyleitem.cpp \
            ../../private/AbstractCheckable.qml \
@@ -57,7 +59,6 @@ sources += ../../private/qstyleitem.cpp \
            ../../styles/MenuBarStyle.qml \
            ../../styles/ProgressBarStyle.qml \
            ../../styles/RadioButtonStyle.qml \
-           ../../styles/ScrollBarStyle.qml \
            ../../styles/SliderStyle.qml \
            ../../styles/SpinBoxStyle.qml \
            ../../styles/TabViewStyle.qml \
diff --git a/src/private/Control.qml b/src/private/Control.qml
index 624b14f1..6c963d22 100644
--- a/src/private/Control.qml
+++ b/src/private/Control.qml
@@ -67,16 +67,18 @@ FocusScope {
 
     activeFocusOnTab: false
 
+    property alias __controlState: styleLoader.controlState
+
     Loader {
         id: panelLoader
         anchors.fill: parent
         sourceComponent: __style ? __style.panel : null
-        property alias control: root
         onStatusChanged: if (status === Loader.Error) console.error("Failed to load Style for", root)
         Loader {
             id: styleLoader
             sourceComponent: style
-            property Item control: root
+            property Item __control: root
+            property QtObject controlState: null
             onStatusChanged: {
                 if (status === Loader.Error)
                     console.error("Failed to load Style for", root)
diff --git a/src/styles/Desktop/ScrollBarStyle.qml b/src/private/Margins.qml
index 182dfabd..c52f55b8 100644
--- a/src/styles/Desktop/ScrollBarStyle.qml
+++ b/src/private/Margins.qml
@@ -37,33 +37,17 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-
 import QtQuick 2.1
-import QtQuick.Controls 1.0
-import QtQuick.Controls.Private 1.0
 import QtQuick.Controls.Styles 1.0
 
-Style {
-    id: scrollbarStyle
-    readonly property bool horizontal: control.orientation === Qt.Horizontal
-    property bool scrollToClickPosition: control.__panel.scrollToClickPosition
-
-    property Component panel: StyleItem {
-        id: styleitem
-        anchors.fill:parent
-        elementType: "scrollbar"
-        hover: activeControl != "none"
-        activeControl: "none"
-        sunken: control.upPressed | control.downPressed | control.handlePressed
-        minimum: control.minimumValue
-        maximum: control.maximumValue
-        value: control.value
-        horizontal: scrollbarStyle.horizontal
-        enabled: control.enabled
-
-        implicitWidth: horizontal ? 200 : pixelMetric("scrollbarExtent")
-        implicitHeight: horizontal ? pixelMetric("scrollbarExtent") : 200
-        property int scrollToClickPosition: styleHint("scrollToClickPosition")
-    }
+/*!
+        \qmltype Margins
+        \internal
+        \inqmlmodule QtQuick.Controls.Private 1.0
+*/
+QtObject {
+    property int top
+    property int left
+    property int right
+    property int bottom
 }
-
diff --git a/src/private/ScrollBar.qml b/src/private/ScrollBar.qml
index 50047d6a..cb09675a 100644
--- a/src/private/ScrollBar.qml
+++ b/src/private/ScrollBar.qml
@@ -47,7 +47,7 @@ import QtQuick.Controls.Private 1.0
         \internal
         \inqmlmodule QtQuick.Controls.Private 1.0
 */
-Control {
+Item {
     id: scrollbar
 
     property int orientation: Qt.Horizontal
@@ -58,24 +58,34 @@ Control {
     activeFocusOnTab: false
 
     Accessible.role: Accessible.ScrollBar
-    implicitWidth: __panel.implicitWidth
-    implicitHeight: __panel.implicitHeight
+    implicitWidth: panelLoader.implicitWidth
+    implicitHeight: panelLoader.implicitHeight
 
-    readonly property alias upPressed: internal.upPressed
-    readonly property alias downPressed: internal.downPressed
-    readonly property alias pageUpPressed: internal.pageUpPressed
-    readonly property alias pageDownPressed: internal.pageDownPressed
-    readonly property alias handlePressed: internal.handlePressed
+    property bool upPressed
+    property bool downPressed
+    property bool pageUpPressed
+    property bool pageDownPressed
+    property bool handlePressed
+
+
+    property Item __panel: panelLoader.item
+    Loader {
+        id: panelLoader
+        anchors.fill: parent
+        sourceComponent: __style ? __style.__scrollbar : null
+        onStatusChanged: if (status === Loader.Error) console.error("Failed to load Style for", root)
+        property alias __control: scrollbar
+        property QtObject controlState: QtObject {
+            readonly property alias horizontal: internal.horizontal
+            readonly property alias upPressed: scrollbar.upPressed
+            readonly property alias downPressed: scrollbar.downPressed
+            readonly property alias handlePressed: scrollbar.handlePressed
+        }
+    }
 
     MouseArea {
         id: internal
 
-        property bool upPressed
-        property bool downPressed
-        property bool pageUpPressed
-        property bool pageDownPressed
-        property bool handlePressed
-
         property bool horizontal: orientation === Qt.Horizontal
         property int pageStep: internal.horizontal ? width : height
         property int singleStep: 20
@@ -84,7 +94,7 @@ Control {
         anchors.fill: parent
 
         property bool autoincrement: false
-        property bool scrollToClickPosition: __style ? __style.scrollToClickPosition : 0
+        property bool scrollToClickPosition: __style ? __style.scrollToClickedPosition : 0
 
         // Update hover item
         onEntered: if (!pressed) __panel.activeControl = __panel.hitTest(mouseX, mouseY)
@@ -139,21 +149,21 @@ Control {
             if (__panel.activeControl === "handle") {
                 pressedX = mouseX;
                 pressedY = mouseY;
-                internal.handlePressed = true;
+                handlePressed = true;
                 oldPosition = slider.position;
             } else if (__panel.activeControl === "up") {
                 decrement();
-                internal.upPressed = Qt.binding(function() {return containsMouse});
+                upPressed = Qt.binding(function() {return containsMouse});
             } else if (__panel.activeControl === "down") {
                 increment();
-                internal.downPressed = Qt.binding(function() {return containsMouse});
+                downPressed = Qt.binding(function() {return containsMouse});
             } else if (!scrollToClickposition){
                 if (__panel.activeControl === "upPage") {
                     decrementPage();
-                    internal.pageUpPressed = true;
+                    pageUpPressed = true;
                 } else if (__panel.activeControl === "downPage") {
                     incrementPage();
-                    internal.pageDownPressed = true;
+                    pageDownPressed = true;
                 }
             } else {
                 slider.position = horizontal ? mouseX -  handleRect.width/2
@@ -164,11 +174,11 @@ Control {
         onReleased: {
             __panel.activeControl = __panel.hitTest(mouseX, mouseY);
             autoincrement = false;
-            internal.upPressed = false;
-            internal.downPressed = false;
-            internal.handlePressed = false;
-            internal.pageUpPressed = false;
-            internal.pageDownPressed = false;
+            upPressed = false;
+            downPressed = false;
+            handlePressed = false;
+            pageUpPressed = false;
+            pageDownPressed = false;
         }
 
         function incrementPage() {
diff --git a/src/private/ScrollViewHelper.qml b/src/private/ScrollViewHelper.qml
index c8e1c836..cf5c514f 100644
--- a/src/private/ScrollViewHelper.qml
+++ b/src/private/ScrollViewHelper.qml
@@ -58,9 +58,12 @@ Item {
     property int contentHeight
     property int contentWidth
 
-    anchors.fill: parent
+    property int leftMargin: outerFrame ? root.__style.padding.left : 0
+    property int rightMargin: outerFrame ? root.__style.padding.right : 0
+    property int topMargin: outerFrame ? root.__style.padding.top : 0
+    property int bottomMargin: outerFrame ? root.__style.padding.bottom : 0
 
-    property int frameMargin: outerFrame ? frameWidth : 0
+    anchors.fill: parent
 
     property bool recursionGuard: false
 
@@ -101,11 +104,12 @@ Item {
 
     Loader {
         id: cornerFill
+        z: 1
         sourceComponent: __style.corner
         anchors.right: parent.right
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: frameMargin
-        anchors.rightMargin: frameMargin
+        anchors.bottomMargin: bottomMargin
+        anchors.rightMargin: rightMargin
         width: visible ? vscrollbar.width : 0
         height: visible ? hscrollbar.height : 0
         visible: hscrollbar.visible && !hscrollbar.isTransient && vscrollbar.visible && !vscrollbar.isTransient
@@ -115,7 +119,6 @@ Item {
         id: hscrollbar
         property bool isTransient: !!__panel && __panel.styleHint("transientScrollBars")
         property bool active: !!__panel && (__panel.sunken || __panel.activeControl != "none")
-        style: root.__style.scrollBar
         orientation: Qt.Horizontal
         visible: contentWidth > availableWidth
         height: visible ? implicitHeight : 0
@@ -125,8 +128,8 @@ Item {
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.right: cornerFill.left
-        anchors.leftMargin: frameMargin
-        anchors.bottomMargin: frameMargin
+        anchors.leftMargin:  leftMargin
+        anchors.bottomMargin: bottomMargin
         onValueChanged: {
             if (!blockUpdates) {
                 flickableItem.contentX = value
@@ -150,19 +153,17 @@ Item {
         id: vscrollbar
         property bool isTransient: !!__panel && __panel.styleHint("transientScrollBars")
         property bool active: !!__panel && (__panel.sunken || __panel.activeControl !== "none")
-        style: root.__style.scrollBar
         orientation: Qt.Vertical
         visible: contentHeight > availableHeight
         width: visible ? implicitWidth : 0
         z: 1
         anchors.bottom: cornerFill.top
-        anchors.bottomMargin: hscrollbar.visible ? 0 : frameMargin
         maximumValue: contentHeight > availableHeight ? contentHeight - availableHeight + __viewTopMargin : 0
         minimumValue: 0
         anchors.right: parent.right
         anchors.top: parent.top
-        anchors.topMargin: __scrollBarTopMargin + frameMargin
-        anchors.rightMargin: frameMargin
+        anchors.topMargin: __scrollBarTopMargin + topMargin
+        anchors.rightMargin: rightMargin
         onValueChanged: {
             if (flickableItem && !blockUpdates && enabled) {
                 flickableItem.contentY = value
diff --git a/src/private/Style.qml b/src/private/Style.qml
index 6cb65380..990f61dd 100644
--- a/src/private/Style.qml
+++ b/src/private/Style.qml
@@ -38,12 +38,21 @@
 **
 ****************************************************************************/
 import QtQuick 2.1
-
+import QtQuick.Controls 1.0
 
 /*!
-        \qmltype Style
-        \internal
-        \inqmlmodule QtQuick.Controls.Styles 1.0
+    \qmltype Style
+    \internal
+    \inqmlmodule QtQuick.Controls.Private 1.0
 */
 
-QtObject { }
+QtObject {
+    /*! The control attached to this style */
+    readonly property Item control: __control
+
+    /*! \internal */
+    property var __syspal: SystemPalette {
+        colorGroup: control.enabled ?
+                        SystemPalette.Active : SystemPalette.Disabled
+    }
+}
diff --git a/src/private/TabBar.qml b/src/private/TabBar.qml
index e9938737..28c351d4 100644
--- a/src/private/TabBar.qml
+++ b/src/private/TabBar.qml
@@ -69,11 +69,9 @@ FocusScope {
     property var style
     property var styleItem: tabView.__styleItem ? tabView.__styleItem : null
 
-    property string tabBarAlignment: styleItem ? styleItem.tabBarAlignment : "left"
-    property string position: tabView ? tabView.tabPosition : "Top"
+    property int tabsAlignment: styleItem ? styleItem.tabsAlignment : Qt.AlignLeft
 
     property int tabOverlap: styleItem ? styleItem.tabOverlap : 0
-    property int tabBaseOverlap: styleItem ? styleItem.tabBaseOverlap : 0
 
     property int elide: Text.ElideRight
 
@@ -95,20 +93,20 @@ FocusScope {
         states: [
             State {
                 name: "left"
-                when: tabBarAlignment == "left"
+                when: tabsAlignment === Qt.AlignLeft
                 AnchorChanges { target:tabrow ; anchors.left: parent.left }
-                PropertyChanges { target:tabrow ; anchors.leftMargin: styleItem ? styleItem.leftMargin : 0 }
+                PropertyChanges { target:tabrow ; anchors.leftMargin: styleItem ? styleItem.tabsLeftPadding : 0 }
             },
             State {
                 name: "center"
-                when: tabBarAlignment == "center"
+                when: tabsAlignment === Qt.AlignHCenter
                 AnchorChanges { target:tabrow ; anchors.horizontalCenter: tabbar.horizontalCenter }
             },
             State {
                 name: "right"
-                when: tabBarAlignment == "right"
+                when: tabsAlignment === Qt.AlignRight
                 AnchorChanges { target:tabrow ; anchors.right: parent.right }
-                PropertyChanges { target:tabrow ; anchors.rightMargin: styleItem ? styleItem.rightMargin : 0 }
+                PropertyChanges { target:tabrow ; anchors.rightMargin: styleItem ? styleItem.tabsRightPadding : 0 }
             }
         ]
 
@@ -124,11 +122,11 @@ FocusScope {
                 focus: true
 
                 property int tabindex: index
-                property bool selectedHelper: selected
-                property bool selected : tabView.currentIndex == index
+                property bool selected : tabView.currentIndex === index
                 property bool hover: mousearea.containsMouse
-                property bool first: index === 0
                 property string title: modelData.title
+                property bool nextSelected: tabView.currentIndex === index + 1
+                property bool previousSelected: tabView.currentIndex === index - 1
 
                 z: selected ? 1 : -index
                 implicitWidth: Math.min(tabloader.implicitWidth, tabbar.width/repeater.count) + 1
@@ -141,11 +139,16 @@ FocusScope {
                     anchors.fill: parent
 
                     property Item control: tabView
-                    property Item tab: tabitem
                     property int index: tabindex
-                    property bool nextSelected: tabView.currentIndex === index + 1
-                    property bool previousSelected: tabView.currentIndex === index - 1
-                    property string title: tab.title
+
+                    property QtObject tab: QtObject {
+                        readonly property alias index: tabitem.tabindex
+                        readonly property alias selected: tabitem.selected
+                        readonly property alias title: tabitem.title
+                        readonly property alias nextSelected: tabitem.nextSelected
+                        readonly property alias previsousSelected: tabitem.previousSelected
+                        readonly property alias hovered: tabitem.hover
+                    }
                 }
 
                 MouseArea {
diff --git a/src/private/private.pro b/src/private/private.pro
index 34205d97..16b6cf81 100644
--- a/src/private/private.pro
+++ b/src/private/private.pro
@@ -25,6 +25,7 @@ QML_FILES += \
     TabBar.qml \
     BasicButton.qml \
     Control.qml \
+    Margins.qml \
     Style.qml \
     style.js \
     ModalPopupBehavior.qml \
diff --git a/src/private/qmldir b/src/private/qmldir
index e5615656..2b61a762 100644
--- a/src/private/qmldir
+++ b/src/private/qmldir
@@ -3,6 +3,7 @@ plugin privateplugin
 AbstractCheckable 1.0 AbstractCheckable.qml
 Control 1.0 Control.qml
 FocusFrame 1.0 FocusFrame.qml
+Margins 1.0 Margins.qml
 BasicButton 1.0 BasicButton.qml
 ScrollBar 1.0 ScrollBar.qml
 ScrollViewHelper 1.0 ScrollViewHelper.qml
diff --git a/src/src.pro b/src/src.pro
index 2108ac7e..0c42dabb 100644
--- a/src/src.pro
+++ b/src/src.pro
@@ -1,5 +1,5 @@
 TEMPLATE = subdirs
 
-SUBDIRS += controls styles private
+SUBDIRS += controls styles private stylesprivate
 
 SUBDIRS += layouts
diff --git a/src/styles/ButtonStyle.qml b/src/styles/ButtonStyle.qml
index e7455029..91796292 100644
--- a/src/styles/ButtonStyle.qml
+++ b/src/styles/ButtonStyle.qml
@@ -43,32 +43,45 @@ import QtQuick.Controls.Private 1.0
 
 /*!
     \qmltype ButtonStyle
-    \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
-    \brief provides custom styling for Button
+    \since QtQuick.Controls.Styles 1.0
+    \brief Provides custom styling for Button
+
+    You can create a custom button by replacing the "background" delegate
+    of the ButtonStyle with a custom design.
+
+    Example:
+    \qml
+    Button {
+        text: "A button"
+        style: ButtonStyle {
+            background: Rectangle {
+                implicitWidth: 100
+                implicitHeight: 25
+                border.width: control.activeFocus ? 2 : 1
+                border.color: "#888"
+                radius: 4
+                gradient: Gradient {
+                    GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
+                    GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
+                }
+            }
+        }
+    }
+    \endqml
+    If you need a custom label, you can replace the label item.
 */
 
 Style {
     id: buttonstyle
-    property font font
-    property color backgroundColor: "lightGray"
-    property color foregroundColor: __syspal.text
 
-    property var __syspal: SystemPalette {
-        colorGroup: control.enabled ? SystemPalette.Active : SystemPalette.Disabled
-    }
+    /*! The \l Button attached to this style. */
+    readonly property Button control: __control
 
-    property Component label: Item {
-        Text {
-            id: textitem
-            anchors.centerIn: parent
-            renderType: Text.NativeRendering
-            text: control.text
-            color: buttonstyle.foregroundColor
-            font: buttonstyle.font
-        }
-    }
+    /*! The padding between the background and the label components. */
+    property Margins padding: Margins { top: 4 ; left: 4 ; right: 4 ; bottom: 4 }
 
+    /*! The background of the button. */
     property Component background: Item {
         implicitWidth: 100
         implicitHeight: 25
@@ -94,29 +107,47 @@ Style {
                 border.bottom: 4
             }
         }
+        Image {
+            id: imageItem
+            visible: control.menu !== null
+            source: "images/arrow-down.png"
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+            opacity: control.enabled ? 0.7 : 0.5
+        }
+    }
+
+    /*! The label of the button. */
+    property Component label: Text {
+        renderType: Text.NativeRendering
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        text: control.text
+        color: __syspal.text
     }
 
+    /*! \internal */
     property Component panel: Item {
-        property Item controlref: control
+        anchors.centerIn: parent
         anchors.fill: parent
-
-        implicitWidth: backgroundLoader.implicitWidth
-        implicitHeight: backgroundLoader.implicitHeight
+        implicitWidth: Math.max(labelLoader.implicitWidth + padding.left + padding.right, backgroundLoader.implicitWidth)
+        implicitHeight: Math.max(labelLoader.implicitHeight + padding.top + padding.bottom, backgroundLoader.implicitHeight)
 
         Loader {
             id: backgroundLoader
             anchors.fill: parent
             sourceComponent: background
-            property Item control: controlref
-            property Item label: labelLoader.item
         }
 
         Loader {
             id: labelLoader
             sourceComponent: label
             anchors.fill: parent
-            property Item control: controlref
+            anchors.leftMargin: padding.left
+            anchors.topMargin: padding.top
+            anchors.rightMargin: padding.right
+            anchors.bottomMargin: padding.bottom
         }
     }
 }
-
diff --git a/src/styles/CheckBoxStyle.qml b/src/styles/CheckBoxStyle.qml
index ecd3e433..ccf40f0d 100644
--- a/src/styles/CheckBoxStyle.qml
+++ b/src/styles/CheckBoxStyle.qml
@@ -43,20 +43,57 @@ import QtQuick.Controls.Private 1.0
 
 /*!
     \qmltype CheckBoxStyle
-    \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
-    \brief provides custom styling for CheckBox
+    \since QtQuick.Controls.Styles 1.0
+    \brief Provides custom styling for CheckBox
+
+    Example:
+    \qml
+    CheckBox {
+        text: "Check Box"
+        style: CheckBoxStyle{
+            indicator: Rectangle {
+                    implicitWidth: 16
+                    implicitHeight: 16
+                    radius: 3
+                    border.color: control.activeFocus ? "darkblue" : "gray"
+                    border.width: 1
+                    Rectangle {
+                        visible: control.checked
+                        color: "#555"
+                        border.color: "#333"
+                        radius: 1
+                        anchors.margins: 4
+                        anchors.fill: parent
+                    }
+                }
+            }
+        }
+    }
+    \endqml
 */
 Style {
+    id: checkboxStyle
 
-    property int labelSpacing: 6
-    property color textColor: __syspal.text
+    /*! The \l CheckBox attached to this style. */
+    readonly property CheckBox control: __control
 
-    property SystemPalette __syspal: SystemPalette {
-        colorGroup: control.enabled ? SystemPalette.Active : SystemPalette.Disabled
+    /*! The text label. */
+    property Component label: Text {
+        text: control.text
+        color: __syspal.text
+        renderType: Text.NativeRendering
+        verticalAlignment: Text.AlignVCenter
     }
 
-    property Component indicator: Item {
+    /*! The content padding. */
+    property Margins padding: Margins { top: 0 ; left: 0 ; right: 4 ; bottom: 0 }
+
+    /*! The spacing between indicator and label. */
+    property int spacing: 4
+
+    /*! The indicator button. */
+    property Component indicator:  Item {
         implicitWidth: 18
         implicitHeight: 18
         BorderImage {
@@ -79,6 +116,7 @@ Style {
             anchors.topMargin: 3
             anchors.bottomMargin: 5
             border.color: "#222"
+            opacity: control.enabled ? 1 : 0.5
             Rectangle {
                 anchors.fill: parent
                 anchors.margins: 1
@@ -101,31 +139,26 @@ Style {
         }
     }
 
-    property Component label: Text {
-        text: control.text
-        color: textColor
-        renderType: Text.NativeRendering
-    }
-
+    /*! \internal */
     property Component panel: Item {
-        implicitWidth: Math.round(row.width + 4)
-        implicitHeight: row.height
-        property var _cref: control
+        implicitWidth: Math.round(row.width + padding.left + padding.right)
+        implicitHeight: Math.max(indicatorLoader.implicitHeight, labelLoader.implicitHeight) + padding.top + padding.bottom
 
         Row {
             id: row
-            spacing: labelSpacing
+            y: padding.top
+            x: padding.left
+            spacing: checkboxStyle.spacing
             Loader {
                 id: indicatorLoader
                 sourceComponent: indicator
                 anchors.verticalCenter: parent.verticalCenter
-                property CheckBox control: _cref
             }
             Loader {
                 id: labelLoader
                 sourceComponent: label
-                anchors.verticalCenter: parent.verticalCenter
-                property CheckBox control: _cref
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
             }
         }
     }
diff --git a/src/styles/ComboBoxStyle.qml b/src/styles/ComboBoxStyle.qml
index 1227c194..7b55a928 100644
--- a/src/styles/ComboBoxStyle.qml
+++ b/src/styles/ComboBoxStyle.qml
@@ -38,31 +38,32 @@
 **
 ****************************************************************************/
 import QtQuick 2.1
+import QtQuick.Controls 1.0
 import QtQuick.Controls.Styles 1.0
 import QtQuick.Controls.Private 1.0
 
 /*!
     \qmltype ComboBoxStyle
-    \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
+    \since QtQuick.Controls.Styles 1.0
+    \brief Provides custom styling for ComboBox
 */
 
 Style {
-    property color foregroundColor: __syspal.text
 
-    property var __syspal: SystemPalette {
-        colorGroup: control.enabled ? SystemPalette.Active : SystemPalette.Disabled
-    }
+    /*! The \l ComboBox attached to this style. */
+    readonly property ComboBox control: __control
 
-    property Component panel: Item {
-        implicitWidth: 100
-        implicitHeight: 24
-        property bool popup: false
-        property alias font: textitem.font
+    /*! The padding between the background and the label components. */
+    property Margins padding: Margins { top: 4 ; left: 6 ; right: 6 ; bottom:4 }
 
+    /*! The background of the button. */
+    property Component background: Item {
+        implicitWidth: 100
+        implicitHeight: 25
         BorderImage {
             anchors.fill: parent
-            source: control.__pressed ? "images/button_down.png" : "images/button.png"
+            source: control.pressed ? "images/button_down.png" : "images/button.png"
             border.top: 6
             border.bottom: 6
             border.left: 6
@@ -81,28 +82,61 @@ Style {
                 border.top: 4
                 border.bottom: 4
             }
-            Text {
-                id: textitem
-                anchors.centerIn: parent
-                text: control.currentText
-                color: foregroundColor
-                renderType: Text.NativeRendering
-            }
             Image {
+                id: imageItem
                 source: "images/arrow-down.png"
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.right: parent.right
                 anchors.rightMargin: 8
-                opacity: 0.7
+                opacity: control.enabled ? 0.7 : 0.5
             }
         }
     }
 
-    property Component dropDownStyle: MenuStyle {
+    /*! The label of the button. */
+    property Component label: Item {
+        implicitWidth: textitem.implicitWidth + 20
+        Text {
+            id: textitem
+            anchors.centerIn: parent
+            text: control.currentText
+            renderType: Text.NativeRendering
+            color: __syspal.text
+        }
+    }
+
+    /*! \internal */
+    property Component panel: Item {
+        property bool popup: false
+        anchors.centerIn: parent
+        anchors.fill: parent
+        implicitWidth: Math.max(labelLoader.implicitWidth + padding.left + padding.right, backgroundLoader.implicitWidth)
+        implicitHeight: Math.max(labelLoader.implicitHeight + padding.top + padding.bottom, backgroundLoader.implicitHeight)
+
+        Loader {
+            id: backgroundLoader
+            anchors.fill: parent
+            sourceComponent: background
+        }
+
+        Loader {
+            id: labelLoader
+            sourceComponent: label
+            anchors.fill: parent
+            anchors.leftMargin: padding.left
+            anchors.topMargin: padding.top
+            anchors.rightMargin: padding.right
+            anchors.bottomMargin: padding.bottom
+        }
+    }
+
+    /*! \internal */
+    property Component __dropDownStyle: MenuStyle {
         __menuItemType: "comboboxitem"
     }
 
-    property Component popupStyle: Style {
+    /*! \internal */
+    property Component __popupStyle: Style {
 
         property Component frame: Rectangle {
             width: (parent ? parent.contentWidth : 0)
@@ -111,9 +145,15 @@ Style {
         }
 
         property Component menuItem: Rectangle {
+            property string textRef: text
             implicitWidth: textItem.contentWidth
             implicitHeight: textItem.contentHeight
             border.color: "#777"
+            Text {
+                id: textItem
+                visible: false
+                text: textRef
+            }
         }
     }
 }
diff --git a/src/styles/Desktop/CheckBoxStyle.qml b/src/styles/Desktop/CheckBoxStyle.qml
index e979d94a..15b20d2d 100644
--- a/src/styles/Desktop/CheckBoxStyle.qml
+++ b/src/styles/Desktop/CheckBoxStyle.qml
@@ -81,11 +81,7 @@ Style {
                 renderType: Text.NativeRendering
                 elide: Text.ElideRight
                 enabled: control.enabled
-                color: syspal.windowText
-                SystemPalette {
-                    id: syspal
-                    colorGroup: enabled ? SystemPalette.Active : SystemPalette.Disabled
-                }
+                color: __syspal.windowText
             }
         }
     }
diff --git a/src/styles/Desktop/ComboBoxStyle.qml b/src/styles/Desktop/ComboBoxStyle.qml
index 852ef741..a27bb4d4 100644
--- a/src/styles/Desktop/ComboBoxStyle.qml
+++ b/src/styles/Desktop/ComboBoxStyle.qml
@@ -38,12 +38,14 @@
 **
 ****************************************************************************/
 import QtQuick 2.1
+import QtQuick.Controls 1.0
 import QtQuick.Controls.Styles 1.0
 import QtQuick.Controls.Private 1.0
 
 Style {
+    readonly property ComboBox control: __control
     property Component panel: Item {
-        property int popup: styleItem.styleHint("comboboxpopup")
+        property bool popup: !!styleItem.styleHint("comboboxpopup")
 
         implicitWidth: 115
         implicitHeight: styleItem.implicitHeight
@@ -55,7 +57,7 @@ Style {
             height: parent.height
             width: parent.width
             elementType: "combobox"
-            sunken: control.__pressed
+            sunken: control.pressed
             raised: !sunken
             hover: control.__containsMouse
             enabled: control.enabled
@@ -74,11 +76,11 @@ Style {
         }
     }
 
-    property Component popupStyle: MenuStyle {
+    property Component __popupStyle: MenuStyle {
         __menuItemType: "comboboxitem"
     }
 
-    property Component dropDownStyle: Style {
+    property Component __dropDownStyle: Style {
         property Component frame: StyleItem {
             elementType: "frame"
 
diff --git a/src/styles/Desktop/GroupBoxStyle.qml b/src/styles/Desktop/GroupBoxStyle.qml
index 6d675c9e..40c5ce58 100644
--- a/src/styles/Desktop/GroupBoxStyle.qml
+++ b/src/styles/Desktop/GroupBoxStyle.qml
@@ -44,7 +44,7 @@ import QtQuick.Controls.Private 1.0
 
 Style {
     property int margin: 8
-
+    readonly property GroupBox control: __control
     property Component panel: StyleItem {
         id: styleitem
         elementType: "groupbox"
diff --git a/src/styles/Desktop/MenuStyle.qml b/src/styles/Desktop/MenuStyle.qml
index bd85a1c1..960a163d 100644
--- a/src/styles/Desktop/MenuStyle.qml
+++ b/src/styles/Desktop/MenuStyle.qml
@@ -57,15 +57,13 @@ Style {
 
         property int subMenuOverlap: pixelMetric("submenuoverlap")
 
-        SystemPalette { id: syspal }
-
         Rectangle {
             visible: anchors.margins > 0
             anchors {
                 fill: parent
                 margins: pixelMetric("menupanelwidth")
             }
-            color: syspal.window
+            color: __syspal.window
         }
     }
 
diff --git a/src/styles/Desktop/ProgressBarStyle.qml b/src/styles/Desktop/ProgressBarStyle.qml
index a7ac50dc..b61dadd1 100644
--- a/src/styles/Desktop/ProgressBarStyle.qml
+++ b/src/styles/Desktop/ProgressBarStyle.qml
@@ -52,9 +52,9 @@ Style {
         minimum: indeterminate ? 0 : control.minimumValue.toFixed(decimals) * factor
         maximum: indeterminate ? 0 : control.maximumValue.toFixed(decimals) * factor
         enabled: control.enabled
-        horizontal: control.orientation == Qt.Horizontal
+        horizontal: control.orientation === Qt.Horizontal
         hints: control.styleHints
-        contentWidth: 23
-        contentHeight: 23
+        contentWidth: horizontal ? 200 : 23
+        contentHeight: horizontal ? 23 : 200
     }
 }
diff --git a/src/styles/Desktop/RadioButtonStyle.qml b/src/styles/Desktop/RadioButtonStyle.qml
index 8281df6d..be74ae55 100644
--- a/src/styles/Desktop/RadioButtonStyle.qml
+++ b/src/styles/Desktop/RadioButtonStyle.qml
@@ -38,9 +38,11 @@
 **
 ****************************************************************************/
 import QtQuick 2.1
+import QtQuick.Controls 1.0
 import QtQuick.Controls.Private 1.0
 
 Style {
+    readonly property RadioButton control: __control
     property Component panel: Item {
         anchors.fill: parent
 
@@ -74,11 +76,7 @@ Style {
                 renderType: Text.NativeRendering
                 elide: Text.ElideRight
                 enabled: control.enabled
-                color: syspal.windowText
-                SystemPalette {
-                    id: syspal
-                    colorGroup: enabled ? SystemPalette.Active : SystemPalette.Disabled
-                }
+                color: __syspal.windowText
             }
         }
     }
diff --git a/src/styles/Desktop/ScrollViewStyle.qml b/src/styles/Desktop/ScrollViewStyle.qml
index d9768ac2..cc13cb42 100644
--- a/src/styles/Desktop/ScrollViewStyle.qml
+++ b/src/styles/Desktop/ScrollViewStyle.qml
@@ -45,14 +45,16 @@ import "." as Desktop
 Style {
     id: root
 
-    readonly property bool externalScrollBars: __styleitem.styleHint("externalScrollBars")
-    readonly property int scrollBarSpacing: __styleitem.pixelMetric("scrollbarspacing")
-    readonly property int frameWidth: __styleitem.pixelMetric("defaultframewidth")
+    property Margins padding: Margins {
+        property int frameWidth: __styleitem.pixelMetric("defaultframewidth")
+        left: frameWidth
+        top: frameWidth
+        bottom: frameWidth
+        right: frameWidth
+    }
 
     property StyleItem __styleitem: StyleItem { elementType: "frame" }
 
-    property Component scrollBar: Desktop.ScrollBarStyle {}
-
     property Component frame: StyleItem {
         id: styleitem
         elementType: "frame"
@@ -61,4 +63,26 @@ Style {
     }
 
     property Component corner: StyleItem { elementType: "scrollareacorner" }
+
+    readonly property bool __externalScrollBars: __styleitem.styleHint("externalScrollBars")
+    readonly property int __scrollBarSpacing: __styleitem.pixelMetric("scrollbarspacing")
+    readonly property bool scrollToClickedPosition: __styleitem.styleHint("scrollToClickPosition") !== 0
+
+    property Component __scrollbar: StyleItem {
+        readonly property bool isTransient: __styleitem.styleHint("transientScrollBars")
+        anchors.fill:parent
+        elementType: "scrollbar"
+        hover: activeControl != "none"
+        activeControl: "none"
+        sunken: __control.upPressed | __control.downPressed | __control.handlePressed
+        minimum: __control.minimumValue
+        maximum: __control.maximumValue
+        value: __control.value
+        horizontal: __control.orientation === Qt.Horizontal
+        enabled: __control.enabled
+
+        implicitWidth: horizontal ? 200 : pixelMetric("scrollbarExtent")
+        implicitHeight: horizontal ? pixelMetric("scrollbarExtent") : 200
+    }
+
 }
diff --git a/src/styles/Desktop/SpinBoxStyle.qml b/src/styles/Desktop/SpinBoxStyle.qml
index 54cd0fb5..02b2ecbe 100644
--- a/src/styles/Desktop/SpinBoxStyle.qml
+++ b/src/styles/Desktop/SpinBoxStyle.qml
@@ -42,28 +42,27 @@ import QtQuick.Controls 1.0
 import QtQuick.Controls.Private 1.0
 
 Style {
+    readonly property SpinBox control: __control
     property Component panel: Item {
         id: style
 
         property rect upRect
         property rect downRect
 
-        property int topMargin: edit.anchors.topMargin
-        property int leftMargin: 2 + edit.anchors.leftMargin
-        property int rightMargin: 2 + edit.anchors.rightMargin
-        property int bottomMargin: edit.anchors.bottomMargin
+        property Margins margins: Margins{
+            top: edit.anchors.topMargin
+            left: 2 + edit.anchors.leftMargin
+            right: 2 + edit.anchors.leftMargin
+            bottom: edit.anchors.bottomMargin
+        }
+
         property int horizontalTextAlignment: Qt.AlignLeft
         property int verticalTextAlignment: Qt.AlignVCenter
 
-        property color foregroundColor: syspal.text
-        property color backgroundColor: syspal.base
-        property color selectionColor: syspal.highlight
-        property color selectedTextColor: syspal.highlightedText
-
-        SystemPalette {
-            id: syspal
-            colorGroup: control.enabled ? SystemPalette.Active : SystemPalette.Disabled
-        }
+        property color foregroundColor: __syspal.text
+        property color backgroundColor: __syspal.base
+        property color selectionColor: __syspal.highlight
+        property color selectedTextColor: __syspal.highlightedText
 
         width: 100
         height: styleitem.implicitHeight
@@ -104,17 +103,17 @@ Style {
             id: styleitem
             elementType: "spinbox"
             anchors.fill: parent
-            sunken: (control.__downEnabled && control.__downPressed) || (control.__upEnabled && control.__upPressed)
-            hover: __containsMouse
+            sunken: (controlState.downEnabled && controlState.downPressed) || (controlState.upEnabled && controlState.upPressed)
+            hover: controlState.containsMouse
             hints: control.styleHints
             hasFocus: control.activeFocus
             enabled: control.enabled
-            value: (control.__upPressed ? 1 : 0)           |
-                   (control.__downPressed ? 1<<1 : 0) |
-                   (control.__upEnabled ? (1<<2) : 0)      |
-                   (control.__downEnabled ? (1<<3) : 0)
-            contentWidth: control.__contentWidth
-            contentHeight: control.__contentHeight
+            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
         }
     }
 }
diff --git a/src/styles/Desktop/TabViewStyle.qml b/src/styles/Desktop/TabViewStyle.qml
index b5fc2319..830732bb 100644
--- a/src/styles/Desktop/TabViewStyle.qml
+++ b/src/styles/Desktop/TabViewStyle.qml
@@ -44,38 +44,36 @@ import QtQuick.Controls.Styles 1.0
 Style {
     id: root
 
-    property int leftMargin: 0
-    property int rightMargin: 0
-    property StyleItem __barstyle: StyleItem { elementType: "tabbar" ; visible: false }
-    property string tabBarAlignment: __barstyle.styleHint("tabbaralignment");
+    property int tabsLeftPadding: 0
+    property int tabsRightPadding: 0
+    property int tabsAlignment: __barstyle.styleHint("tabbaralignment") === "center" ? Qt.AlignHCenter : Qt.AlignLeft;
     property int tabOverlap: __barstyle.pixelMetric("taboverlap");
-    property int tabBaseOverlap: __barstyle.pixelMetric("tabbaseoverlap");
-    property string tabPosition: control.tabPosition == Qt.TopEdge ? "Top" : "Bottom"
+    property int frameOverlap: __barstyle.pixelMetric("tabbaseoverlap");
 
+    property StyleItem __barstyle: StyleItem { elementType: "tabbar" ; visible: false }
     property Component frame: StyleItem {
         id: styleitem
         anchors.fill: parent
         anchors.topMargin: 1//stack.baseOverlap
         z: style == "oxygen" ? 1 : 0
         elementType: "tabframe"
-        hints: tabPosition
+        hints: control.tabPosition === Qt.TopEdge ? "Top" : "Bottom"
         value: tabbarItem && tabsVisible && tabbarItem.tab(currentIndex) ? tabbarItem.tab(currentIndex).x : 0
         minimum: tabbarItem && tabsVisible && tabbarItem.tab(currentIndex) ? tabbarItem.tab(currentIndex).width : 0
         maximum: tabbarItem && tabsVisible ? tabbarItem.width : width
         Component.onCompleted: {
             stack.frameWidth = styleitem.pixelMetric("defaultframewidth");
             stack.style = style;
-            stack.baseOverlap = root.tabBaseOverlap;
         }
     }
 
     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: nextSelected ? "next" : previousSelected ? "previous" : ""
+        property string selectedpos: tab.nextSelected ? "next" : tab.previousSelected ? "previous" : ""
         property int tabHSpace: __barstyle.pixelMetric("tabhspace");
         property int tabVSpace: __barstyle.pixelMetric("tabvspace");
-        implicitWidth: Math.max(50, styleitem.textWidth(title)) + tabHSpace + 2
+        implicitWidth: Math.max(50, styleitem.textWidth(tab.title)) + tabHSpace + 2
         implicitHeight: Math.max(styleitem.font.pixelSize + tabVSpace + 6, 0)
 
         StyleItem {
@@ -93,8 +91,8 @@ Style {
             hints: [tabPosition, tabpos, selectedpos]
 
             selected: tab.selected
-            text: elidedText(title, tabbarItem.elide, item.width - item.tabHSpace)
-            hover: tab.hover
+            text: elidedText(tab.title, tabbarItem.elide, item.width - item.tabHSpace)
+            hover: tab.hovered
             hasFocus: tabbarItem.activeFocus && selected
         }
     }
diff --git a/src/styles/Desktop/TableViewStyle.qml b/src/styles/Desktop/TableViewStyle.qml
index 716afa61..6cb13749 100644
--- a/src/styles/Desktop/TableViewStyle.qml
+++ b/src/styles/Desktop/TableViewStyle.qml
@@ -75,7 +75,7 @@ ScrollViewStyle {
         active: hasActiveFocus
     }
 
-    property Component standardDelegate: Item {
+    property Component itemDelegate: Item {
         height: Math.max(16, label.implicitHeight)
         property int implicitWidth: sizehint.paintedWidth + 4
 
diff --git a/src/styles/Desktop/TextFieldStyle.qml b/src/styles/Desktop/TextFieldStyle.qml
index 68fd5d2c..9bb83ccf 100644
--- a/src/styles/Desktop/TextFieldStyle.qml
+++ b/src/styles/Desktop/TextFieldStyle.qml
@@ -58,8 +58,7 @@ Style {
                             SystemPalette.Disabled
         }
 
-        property color foregroundColor: syspal.text
-        property color backgroundColor: syspal.base
+        property color textColor: syspal.text
         property color placeholderTextColor: "darkGray"
         property color selectionColor: syspal.highlight
         property color selectedTextColor: syspal.highlightedText
diff --git a/src/styles/GroupBoxStyle.qml b/src/styles/GroupBoxStyle.qml
index 0020f4e3..83904209 100644
--- a/src/styles/GroupBoxStyle.qml
+++ b/src/styles/GroupBoxStyle.qml
@@ -45,15 +45,20 @@ import QtQuick.Controls.Private 1.0
     \qmltype GroupBoxStyle
     \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
+    \since QtQuick.Controls.Styles 1.0
 */
 Style {
+
+    /*! The \l GroupBox attached to this style. */
+    readonly property GroupBox control: __control
+
+    /*! The margin. */
     property int margin: 9
-    property color textColor: __syspal.text
 
-    property SystemPalette __syspal: SystemPalette {
-        colorGroup: control.enabled ? SystemPalette.Active : SystemPalette.Disabled
-    }
+    /*! The title text color. */
+    property color textColor: __syspal.text
 
+    /*! The groupbox frame. */
     property Component panel:
         Item {
         implicitWidth: control.contentWidth + 2 * margin
diff --git a/src/styles/ProgressBarStyle.qml b/src/styles/ProgressBarStyle.qml
index 12e3db25..4d2fea73 100644
--- a/src/styles/ProgressBarStyle.qml
+++ b/src/styles/ProgressBarStyle.qml
@@ -44,61 +44,119 @@ import QtQuick.Controls.Private 1.0
 
 /*!
     \qmltype ProgressBarStyle
-    \internal
+
     \inqmlmodule QtQuick.Controls.Styles 1.0
-    \brief provides custom styling for ProgressBar
+    \since QtQuick.Controls.Styles 1.0
+    \brief Provides custom styling for ProgressBar
+
+    Example:
+    \qml
+    ProgressBar {
+        value: slider.value
+        style: ProgressBarStyle {
+            background: Rectangle {
+                radius: 2
+                color: "lightgray"
+                border.color: "gray"
+                border.width: 1
+                implicitWidth: 200
+                implicitHeight: 24
+            }
+            progress: Rectangle {
+                color: "lightsteelblue"
+                border.color: "steelblue"
+            }
+        }
+    }
+    \endqml
 */
 
 Style {
-    property color backgroundColor: "darkgrey"
-    property color progressColor: "#49d"
+    id: progressBarStyle
+
+    /*! The \l ProgressBar attached to this style. */
+    readonly property ProgressBar control: __control
+
+    /*! A value in the range [0-1] indicating the current progress. */
+    readonly property real currentProgress: control.indeterminate ? 1.0 :
+                                                                    control.value / control.maximumValue
+
+    /*! 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
+        which provides the current progress as a \c real in the range [0-1]
+    */
+    property Margins padding: Margins { top: 0 ; left: 0 ; right: 0 ; bottom: 0 }
+
+
+    property Component progress: Rectangle {
+        property color progressColor: "#49d"
+        anchors.fill: parent
+        radius: 2
+        antialiasing: true
+        gradient: Gradient {
+            GradientStop {color: Qt.lighter(progressColor, 1.3)  ; position: 0}
+            GradientStop {color: progressColor ; position: 1.4}
+        }
+        border.width: 1
+        border.color: Qt.darker(progressColor, 1.2)
+        Rectangle {
+            color: "transparent"
+            radius: 1.5
+            antialiasing: true
+            anchors.fill: parent
+            anchors.margins: 1
+            border.color: Qt.rgba(1,1,1,0.3)
+        }
+    }
 
     property Component background: Item {
         implicitWidth: 200
         implicitHeight: 24
         BorderImage {
             anchors.fill: parent
+            anchors.bottomMargin: -2
+            anchors.leftMargin: -1
+            anchors.rightMargin: -1
             source: "images/editbox.png"
             border.left: 4
             border.right: 4
             border.top: 4
             border.bottom: 4
         }
-        Rectangle {
-            id: progressItem
-            implicitWidth: control.indeterminate ? parent.width : parent.width * control.value / control.maximumValue
-            radius: 2
-            antialiasing: true
-            height: parent.height - 2
-            gradient: Gradient {
-                GradientStop {color: Qt.lighter(progressColor, 1.3)  ; position: 0}
-                GradientStop {color: progressColor ; position: 1.4}
-            }
-            border.width: 1
-            border.color: Qt.darker(progressColor, 1.2)
-            Rectangle {
-                color: "transparent"
-                radius: 1.5
-                antialiasing: true
-                anchors.fill: parent
-                anchors.margins: 1
-                border.color: Qt.rgba(1,1,1,0.3)
-            }
-        }
     }
 
-    property Component panel: Item {
-        property Item controlref: control
-        anchors.fill: parent
+    property Component panel: Item{
+        property bool horizontal: control.orientation == Qt.Horizontal
+        implicitWidth: horizontal ? backgroundLoader.implicitWidth : backgroundLoader.implicitHeight
+        implicitHeight: horizontal ? backgroundLoader.implicitHeight : backgroundLoader.implicitWidth
 
-        implicitWidth: backgroundLoader.implicitWidth
-        implicitHeight: backgroundLoader.implicitHeight
+        Item {
+            width: horizontal ? parent.width : parent.height
+            height: !horizontal ? parent.width : parent.height
+            y: horizontal ? 0 : width
+            rotation: horizontal ? 0 : -90
+            transformOrigin: Item.TopLeft
 
-        Loader {
-            id: backgroundLoader
-            anchors.fill: parent
-            sourceComponent: background
-            property Item control: controlref
+            Loader {
+                id: backgroundLoader
+                anchors.fill: parent
+                sourceComponent: background
+            }
+
+            Loader {
+                sourceComponent: progressBarStyle.progress
+                anchors.topMargin: padding.top
+                anchors.leftMargin: padding.left
+                anchors.rightMargin: padding.right
+                anchors.bottomMargin: padding.bottom
+
+                anchors.top: parent.top
+                anchors.left: parent.left
+                anchors.bottom: parent.bottom
+                width: currentProgress * (parent.width - padding.left - padding.right)
+            }
         }
     }
 }
diff --git a/src/styles/RadioButtonStyle.qml b/src/styles/RadioButtonStyle.qml
index cf7b7ff9..e1696ad2 100644
--- a/src/styles/RadioButtonStyle.qml
+++ b/src/styles/RadioButtonStyle.qml
@@ -43,20 +43,57 @@ import QtQuick.Controls.Private 1.0
 
 /*!
     \qmltype RadioButtonStyle
-    \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
-    \brief provides custom styling for RadioButton
+    \since QtQuick.Controls.Styles 1.0
+    \brief Provides custom styling for RadioButton
+
+    Example:
+    \qml
+    RadioButton {
+        text: "Radio Button"
+        style: RadioButtonStyle{
+            indicator: Rectangle {
+                    implicitWidth: 16
+                    implicitHeight: 16
+                    radius: 9
+                    border.color: control.activeFocus ? "darkblue" : "gray"
+                    border.width: 1
+                    Rectangle {
+                        anchors.fill: parent
+                        visible: control.checked
+                        color: "#555"
+                        radius: 9
+                        anchors.margins: 4
+                    }
+                }
+            }
+        }
+    }
+    \endqml
 */
+
 Style {
+    id: radiobuttonStyle
 
-    property int labelSpacing: 6
-    property color textColor: __syspal.text
+    /*! The \l RadioButton attached to this style. */
+    readonly property RadioButton control: __control
 
-    property SystemPalette __syspal: SystemPalette {
-        colorGroup: control.enabled ? SystemPalette.Active : SystemPalette.Disabled
+    /*! The text label. */
+    property Component label: Text {
+        text: control.text
+        renderType: Text.NativeRendering
+        verticalAlignment: Text.AlignVCenter
+        color: __syspal.text
     }
 
-    property Component indicator:  Rectangle {
+    /*! The content padding. */
+    property Margins padding: Margins { top: 0 ; left: 0 ; right: 4 ; bottom: 0 }
+
+    /*! The spacing between indicator and label. */
+    property int spacing: 4
+
+    /*! The indicator button. */
+    property Component indicator: Rectangle {
         width: 17
         height: 17
         color: "white"
@@ -73,33 +110,30 @@ Style {
             border.color: "#222"
             antialiasing: true
             radius: height/2
+            opacity: control.enabled ? 1 : 0.5
         }
     }
-    property Component label: Text {
-        text: control.text
-        color: textColor
-        renderType: Text.NativeRendering
-    }
 
+    /*! \internal */
     property Component panel: Item {
-        implicitWidth: row.width
-        implicitHeight: row.height
-        property var _cref: control
+        implicitWidth: Math.round(row.width + padding.left + padding.right)
+        implicitHeight: Math.max(indicatorLoader.implicitHeight, labelLoader.implicitHeight) + padding.top + padding.bottom
 
         Row {
             id: row
-            spacing: labelSpacing
+            y: padding.top
+            x: padding.left
+            spacing: radiobuttonStyle.spacing
             Loader {
                 id: indicatorLoader
                 sourceComponent: indicator
                 anchors.verticalCenter: parent.verticalCenter
-                property Item control: _cref
             }
             Loader {
                 id: labelLoader
                 sourceComponent: label
-                anchors.verticalCenter: parent.verticalCenter
-                property Item control: _cref
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
             }
         }
     }
diff --git a/src/styles/ScrollBarStyle.qml b/src/styles/ScrollBarStyle.qml
deleted file mode 100644
index 6912b63b..00000000
--- a/src/styles/ScrollBarStyle.qml
+++ /dev/null
@@ -1,273 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the Qt Quick Controls module of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.1
-import QtQuick.Controls 1.0
-import QtQuick.Controls.Private 1.0
-
-/*!
-    \qmltype ScrollBarStyle
-    \internal
-    \inqmlmodule QtQuick.Controls.Styles 1.0
-    \brief provides custom styling for scroll bars
-
-    The ScrollBar style can only be set as part of a
-    a \l ScrollViewStyle.
-*/
-Style {
-    id: styleitem
-
-    /*! This is the current orientation of the scroll bar. */
-    readonly property bool horizontal: control.orientation === Qt.Horizontal
-
-    /*! This property determines if the scrollBar should directly move to
-        the offset that is clicked by the user or if it should simply increment
-        or decrement it's position.
-
-        The default value is \cfalse.
-    */
-    property bool scrollToClickPosition: true
-
-    /*! This is the minimum extent of the scroll bar handle.
-
-        The default value is \c 30.
-    */
-    property int minimumHandleLength: 30
-
-    /*! This property controls the edge overlap
-        between the handle and the increment/decrement buttons.
-
-        The default value is \c 30.
-    */
-    property int handleOverlap: 1
-
-    /*! This component controls the appearance of the
-        scroll bar background.
-    */
-    property Component background: Item {
-        implicitWidth: 16
-        implicitHeight: 16
-        clip: true
-        Rectangle {
-            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
-        }
-    }
-
-    /*! This component controls the appearance of the
-        scroll bar handle.
-    */
-    property Component handle: Item {
-        implicitWidth: 16
-        implicitHeight: 16
-        Rectangle {
-            anchors.fill: parent
-            color: mouseOver ? "#ddd" : "lightgray"
-            border.color: "#aaa"
-            anchors.rightMargin: horizontal ? 0 : -1
-            anchors.bottomMargin: horizontal ? -1 : 0
-            Rectangle {
-                anchors.fill: parent
-                anchors.margins: 1
-                color: "transparent"
-                border.color: "#44ffffff"
-            }
-        }
-    }
-
-    /*! This component controls the appearance of the
-        scroll bar increment button.
-    */
-    property Component incrementControl: Rectangle {
-        implicitWidth: 16
-        implicitHeight: 16
-        Rectangle {
-            anchors.fill: parent
-            anchors.bottomMargin: -1
-            anchors.rightMargin: -1
-            border.color: "#aaa"
-            Image {
-                source: horizontal ? "images/arrow-right.png" : "images/arrow-down.png"
-                anchors.centerIn: parent
-                opacity: 0.7
-            }
-            gradient: Gradient {
-                GradientStop {color: control.downPressed ? "lightgray" : "white" ; position: 0}
-                GradientStop {color: control.downPressed ? "lightgray" : "lightgray" ; position: 1}
-            }
-        }
-    }
-
-    /*! This component controls the appearance of the
-        scroll bar decrement button.
-    */
-    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
-            color: "lightgray"
-            Image {
-                source: horizontal ? "images/arrow-left.png" : "images/arrow-up.png"
-                anchors.centerIn: parent
-                anchors.verticalCenterOffset: horizontal ? 0 : -1
-                anchors.horizontalCenterOffset: horizontal ? -1 : 0
-                opacity: 0.7
-            }
-            gradient: Gradient {
-                GradientStop {color: control.upPressed ? "lightgray" : "white" ; position: 0}
-                GradientStop {color: control.upPressed ? "lightgray" : "lightgray" ; position: 1}
-            }
-            border.color: "#aaa"
-        }
-    }
-
-    /*! \internal */
-    property Component panel: Item {
-
-        property string activeControl: ""
-
-        implicitWidth: horizontal ? 200 : bg.implicitWidth
-        implicitHeight: horizontal ? bg.implicitHeight : 200
-
-        function pixelMetric(arg) {
-            if (arg === "scrollbarExtent")
-                return (styleitem.horizontal ? bg.height : bg.width);
-            return 0;
-        }
-
-        function styleHint(arg) {
-            return false;
-        }
-
-        function hitTest(argX, argY) {
-            if (itemIsHit(handleControl, argX, argY))
-                return "handle"
-            else if (itemIsHit(upControl, argX, argY))
-                return "up";
-            else if (itemIsHit(downControl, argX, argY))
-                return "down";
-            else if (itemIsHit(bg, argX, argY)) {
-                if (styleitem.horizontal && argX < handleControl.x || !styleitem.horizontal && argY < handleControl.y)
-                    return "upPage"
-                else
-                    return "downPage"
-            }
-
-            return "none";
-        }
-
-        function subControlRect(arg) {
-            if (arg === "handle") {
-                return Qt.rect(handleControl.x, handleControl.y, handleControl.width, handleControl.height);
-            } else if (arg === "groove") {
-                if (styleitem.horizontal) {
-                    return Qt.rect(upControl.width - styleitem.handleOverlap,
-                                   0,
-                                   control.width - (upControl.width + downControl.width - styleitem.handleOverlap * 2),
-                                   control.height);
-                } else {
-                    return Qt.rect(0,
-                                   upControl.height - styleitem.handleOverlap,
-                                   control.width,
-                                   control.height - (upControl.height + downControl.height - styleitem.handleOverlap * 2));
-                }
-            }
-            return Qt.rect(0,0,0,0);
-        }
-
-        function itemIsHit(argItem, argX, argY) {
-            var pos = argItem.mapFromItem(control, argX, argY);
-            return (pos.x >= 0 && pos.x <= argItem.width && pos.y >= 0 && pos.y <= argItem.height);
-        }
-
-        Loader {
-            id: upControl
-            anchors.top: parent.top
-            anchors.left: parent.left
-            sourceComponent: decrementControl
-            property bool mouseOver: activeControl === "up"
-            property bool pressed: control.upPressed
-        }
-
-        Loader {
-            id: bg
-            anchors.top: horizontal ? undefined : upControl.bottom
-            anchors.bottom: horizontal ? undefined : downControl.top
-            anchors.left:  horizontal ? upControl.right : undefined
-            anchors.right: horizontal ? downControl.left : undefined
-            sourceComponent: background
-        }
-
-        Loader {
-            id: downControl
-            anchors.bottom: horizontal ? undefined : parent.bottom
-            anchors.right: horizontal ? parent.right : undefined
-            sourceComponent: incrementControl
-            property bool mouseOver: activeControl === "down"
-            property bool pressed: control.downPressed
-        }
-
-        Loader{
-            id: handleControl
-            property bool mouseOver: activeControl === "handle"
-            property var flickableItem: control.parent.parent.flickableItem
-            property int extent: Math.max(minimumHandleLength, horizontal ?
-                                              (flickableItem.width/flickableItem.contentWidth) * bg.width :
-                                              (flickableItem.height/flickableItem.contentHeight) * bg.height)
-            height: horizontal ? implicitHeight : extent
-            width: horizontal ? extent : implicitWidth
-            anchors.top: bg.top
-            anchors.left: bg.left
-            anchors.topMargin: horizontal ? 0 : -handleOverlap + (control.value / control.maximumValue) * (bg.height + 2 * handleOverlap- height)
-            anchors.leftMargin: horizontal ? -handleOverlap + (control.value / control.maximumValue) * (bg.width + 2 * handleOverlap - width) : 0
-            sourceComponent: handle
-        }
-    }
-}
diff --git a/src/styles/ScrollViewStyle.qml b/src/styles/ScrollViewStyle.qml
index 11bdc59e..38dea2b4 100644
--- a/src/styles/ScrollViewStyle.qml
+++ b/src/styles/ScrollViewStyle.qml
@@ -43,41 +43,26 @@ import QtQuick.Controls.Private 1.0
 
 /*!
     \qmltype ScrollViewStyle
-    \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
-    \brief provides custom styling for ScrollView
+    \since QtQuick.Controls.Styles 1.0
+    \brief Provides custom styling for ScrollView
 */
 Style {
     id: root
 
-    /*! This property controls if the scroll bars
-        should stay outside or inside the scroll view
-        frame.
+    /*! The \l ScrollView attached to this style. */
+    readonly property ScrollView control: __control
 
-        The default value is \c false.
-    */
-    property bool externalScrollBars: false
-
-    /*! This property controls the spacing between the
-        scroll bars and the frame when \l externalScrollBars
-        is \c true.
-
-        The default value is \c 4.
-    */
-    property int scrollBarSpacing: 4
-
-    /*! This property controls the frame width of the scrollView.
-
-        The default value is \c 1.
-    */
-    property int frameWidth: 1
-
-    /*! This property controls the  scroll bar appearance */
-    property Component scrollBar: ScrollBarStyle {}
+    /*! This property controls the frame border padding of the scrollView. */
+    property Margins padding: Margins {left: 1; top: 1; right: 1; bottom: 1}
 
     /*! This Component paints the corner area between scroll bars */
     property Component corner: Rectangle { color: "#ccc" }
 
+    /*! This component determines if the flickable should reposition itself at the
+    mouse location when clicked. */
+    property bool scrollToClickedPosition: true
+
     /*! This Component paints the frame around scroll bars. */
     property Component frame: Rectangle {
         color: "white"
@@ -86,4 +71,253 @@ Style {
         radius: 1
         visible: control.frameVisible
     }
+
+    /*! This is the minimum extent of the scroll bar handle.
+
+        The default value is \c 30.
+    */
+
+    property int minimumHandleLength: 30
+
+    /*! This property controls the edge overlap
+        between the handle and the increment/decrement buttons.
+
+        The default value is \c 30.
+    */
+
+    property int handleOverlap: 1
+
+    /*! This component controls the appearance of the
+        scroll bar background.
+
+        \list
+        \li property bool hovered
+        \li property bool horizontal
+        \endlist
+    */
+
+    property Component scrollBarBackground: Item {
+        implicitWidth: 16
+        implicitHeight: 16
+        clip: true
+        Rectangle {
+            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
+        }
+    }
+
+    /*! This component controls the appearance of the
+        scroll bar handle.
+
+        \list
+        \li property bool hovered
+        \li property bool pressed
+        \li property bool horizontal
+        \endlist
+    */
+
+    property Component handle: Item {
+        implicitWidth: 16
+        implicitHeight: 16
+        Rectangle {
+            anchors.fill: parent
+            color: hovered ? "#ddd" : "lightgray"
+            border.color: "#aaa"
+            anchors.rightMargin: horizontal ? 0 : -1
+            anchors.bottomMargin: horizontal ? -1 : 0
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                border.color: "#44ffffff"
+            }
+        }
+    }
+
+    /*! This component controls the appearance of the
+        scroll bar increment button.
+
+        You can access the following state properties:
+
+        \list
+        \li property bool hovered
+        \li property bool pressed
+        \li property bool horizontal
+        \endlist
+    */
+    property Component incrementControl: Rectangle {
+        implicitWidth: 16
+        implicitHeight: 16
+        Rectangle {
+            anchors.fill: parent
+            anchors.bottomMargin: -1
+            anchors.rightMargin: -1
+            border.color: "#aaa"
+            Image {
+                source: 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}
+            }
+        }
+    }
+
+    /*! 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
+    */
+    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
+            color: "lightgray"
+            Image {
+                source: horizontal ? "images/arrow-left.png" : "images/arrow-up.png"
+                anchors.centerIn: parent
+                anchors.verticalCenterOffset: horizontal ? 0 : -1
+                anchors.horizontalCenterOffset: 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}
+            }
+            border.color: "#aaa"
+        }
+    }
+
+    /*! \internal */
+    property Component __scrollbar: Item {
+        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
+
+        function pixelMetric(arg) {
+            if (arg === "scrollbarExtent")
+                return (controlState.horizontal ? bg.height : bg.width);
+            return 0;
+        }
+
+        function styleHint(arg) {
+            return false;
+        }
+
+        function hitTest(argX, argY) {
+            if (itemIsHit(handleControl, argX, argY))
+                return "handle"
+            else if (itemIsHit(incrementLoader, argX, argY))
+                return "up";
+            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)
+                    return "upPage"
+                else
+                    return "downPage"
+            }
+
+            return "none";
+        }
+
+        function subControlRect(arg) {
+            if (arg === "handle") {
+                return Qt.rect(handleControl.x, handleControl.y, handleControl.width, handleControl.height);
+            } else if (arg === "groove") {
+                if (controlState.horizontal) {
+                    return Qt.rect(incrementLoader.width - handleOverlap,
+                                   0,
+                                   __control.width - (incrementLoader.width + decrementLoader.width - handleOverlap * 2),
+                                   __control.height);
+                } else {
+                    return Qt.rect(0,
+                                   incrementLoader.height - handleOverlap,
+                                   __control.width,
+                                   __control.height - (incrementLoader.height + decrementLoader.height - handleOverlap * 2));
+                }
+            }
+            return Qt.rect(0,0,0,0);
+        }
+
+        function itemIsHit(argItem, argX, argY) {
+            var pos = argItem.mapFromItem(__control, argX, argY);
+            return (pos.x >= 0 && pos.x <= argItem.width && pos.y >= 0 && pos.y <= argItem.height);
+        }
+
+        Loader {
+            id: incrementLoader
+            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
+        }
+
+        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
+            sourceComponent: scrollBarBackground
+            property bool horizontal: controlState.horizontal
+            property bool hovered: activeControl !== "none"
+        }
+
+        Loader {
+            id: decrementLoader
+            anchors.bottom: controlState.horizontal ? undefined : parent.bottom
+            anchors.right: controlState.horizontal ? parent.right : undefined
+            sourceComponent: incrementControl
+            property bool hovered: activeControl === "down"
+            property bool pressed: controlState.downPressed
+            property bool horizontal: controlState.horizontal
+        }
+
+        property var flickableItem: control.flickableItem
+        property int extent: Math.max(minimumHandleLength, controlState.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
+            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
+            sourceComponent: handle
+            property bool hovered: activeControl === "handle"
+            property bool pressed: controlState.handlePressed
+            property bool horizontal: controlState.horizontal
+        }
+    }
+
+    /*! \internal */
+    property bool __externalScrollBars: false
+    /*! \internal */
+    property int __scrollBarSpacing: 4
 }
diff --git a/src/styles/SliderStyle.qml b/src/styles/SliderStyle.qml
index 27001182..02ad173f 100644
--- a/src/styles/SliderStyle.qml
+++ b/src/styles/SliderStyle.qml
@@ -44,6 +44,8 @@ import QtQuick.Controls.Private 1.0
 /*!
     \qmltype SliderStyle
     \inqmlmodule QtQuick.Controls.Styles 1.0
+    \since QtQuick.Controls.Styles 1.0
+    \brief Provides custom styling for Slider
 
     The slider style allows you to create a custom appearance for
     a \l Slider control.
@@ -55,27 +57,21 @@ import QtQuick.Controls.Private 1.0
     Example:
     \qml
     Slider {
+        anchors.centerIn: parent
         style: SliderStyle {
-            background: Rectangle {
+            groove: Rectangle {
                 implicitWidth: 200
                 implicitHeight: 8
                 color: "gray"
                 radius: 8
-                Rectangle {
-                    height: parent.height
-                    width: handlePosition
-                    radius: 8
-                    border.color: "gray"
-                    border.width: 2
-                    color: "lightsteelblue"
-                }
             }
             handle: Rectangle {
+                anchors.centerIn: parent
                 color: control.pressed ? "white" : "lightgray"
                 border.color: "gray"
                 border.width: 2
-                width: 24
-                height: 24
+                width: 34
+                height: 34
                 radius: 12
             }
         }
@@ -85,6 +81,12 @@ import QtQuick.Controls.Private 1.0
 Style {
     id: styleitem
 
+    /*! The \l Slider attached to this style. */
+    readonly property Slider control: __control
+
+    /*! The padding around the groove item. */
+    property Margins padding: Margins { top: 0 ; left: 0 ; right: 0 ; bottom: 0 }
+
     /*! This property holds the item for the slider handle.
         You can access the slider through the \c control property
     */
@@ -114,12 +116,10 @@ Style {
         }
     }
 
-    /*! This property holds the background for the slider.
-
-        You can access the slider through the \c control property.
+    /*! This property holds the background groove of the slider.
         You can access the handle position through the \c handlePosition property.
     */
-    property Component background: Item {
+    property Component groove: Item {
         anchors.verticalCenter: parent.verticalCenter
         implicitWidth: 100
         implicitHeight: 8
@@ -140,29 +140,32 @@ Style {
     property Component panel: Item {
         id: root
         property bool horizontal : control.orientation === Qt.Horizontal
-        property Control __cref: control
-        implicitWidth: horizontal ? backgroundLoader.implicitWidth : Math.max(handleLoader.implicitHeight, backgroundLoader.implicitHeight)
-        implicitHeight: horizontal ? Math.max(handleLoader.implicitHeight, backgroundLoader.implicitHeight) : backgroundLoader.implicitWidth
+        property int horizontalSize: grooveLoader.implicitWidth + padding.left + padding.right
+        property int verticalSize: Math.max(handleLoader.implicitHeight, grooveLoader.implicitHeight) + padding.top + padding.bottom
+
+        implicitWidth: horizontal ? horizontalSize : verticalSize
+        implicitHeight: horizontal ? verticalSize : horizontalSize
+
         y: horizontal ? 0 : height
         rotation: horizontal ? 0 : -90
         transformOrigin: Item.TopLeft
+
         Item {
+
             anchors.fill: parent
+
             Loader {
-                id: backgroundLoader
-                property Control control: __cref
-                property Item handle: handleLoader.item
+                id: grooveLoader
                 property int handlePosition: handleLoader.x + handleLoader.width/2
-
-                sourceComponent: background
-                width: horizontal ? parent.width : parent.height
-                y: Math.round(horizontal ? parent.height/2 : parent.width/2) - backgroundLoader.item.height/2
+                x: padding.left
+                sourceComponent: groove
+                width: (horizontal ? parent.width : parent.height) - padding.left - padding.right
+                y:  padding.top +  (Math.round(horizontal ? parent.height : parent.width - padding.top - padding.bottom) - grooveLoader.item.height)/2
             }
             Loader {
                 id: handleLoader
-                property Control control: __cref
                 sourceComponent: handle
-                anchors.verticalCenter: backgroundLoader.verticalCenter
+                anchors.verticalCenter: grooveLoader.verticalCenter
                 x: Math.round(control.value / control.maximumValue * ((horizontal ? root.width : root.height)- item.width))
             }
         }
diff --git a/src/styles/SpinBoxStyle.qml b/src/styles/SpinBoxStyle.qml
index db10fcab..4c966566 100644
--- a/src/styles/SpinBoxStyle.qml
+++ b/src/styles/SpinBoxStyle.qml
@@ -45,48 +45,53 @@ import QtQuick.Controls.Private 1.0
     \qmltype SpinBoxStyle
     \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
-    \brief provides custom styling for SpinBox
+    \since QtQuick.Controls.Styles 1.0
+    \brief Provides custom styling for SpinBox
 */
 
 Style {
     id: spinboxStyle
 
-    property int topMargin: 0
-    property int leftMargin: 4
-    property int rightMargin: 12
-    property int bottomMargin: 0
+    /*! The \l SpinBox attached to this style. */
+    readonly property SpinBox control: __control
 
-    property color foregroundColor: __syspal.text
-    property color backgroundColor: __syspal.base
+    /*! The content margins of the text field. */
+    property Margins margins: Margins { top: 0 ; left: 4 ; right: 12 ; bottom: 0 }
+
+    /*! The text color. */
+    property color textColor: __syspal.text
+
+    /*! The text highlight color, used behind selections. */
     property color selectionColor: __syspal.highlight
-    property color selectedTextColor: __syspal.highlightedText
 
-    property var __syspal: SystemPalette {
-        colorGroup: control.enabled ? SystemPalette.Active : SystemPalette.Disabled
-    }
+    /*! The highlighted text color, used in selections. */
+    property color selectedTextColor: __syspal.highlightedText
 
-    property Component upControl: Item {
+    /*! The button used to increment the value. */
+    property Component incrementControl: Item {
         implicitWidth: 18
         Image {
             source: "images/arrow-up.png"
             anchors.centerIn: parent
             anchors.verticalCenterOffset: 1
-            opacity: 0.7
+            opacity: control.enabled ? 0.7 : 0.5
             anchors.horizontalCenterOffset:  -1
         }
     }
 
-    property Component downControl: Item {
+    /*! The button used to decrement the value. */
+    property Component decrementControl: Item {
         implicitWidth: 18
         Image {
             source: "images/arrow-down.png"
             anchors.centerIn: parent
             anchors.verticalCenterOffset: -1
             anchors.horizontalCenterOffset:  -1
-            opacity: 0.7
+            opacity: control.enabled ? 0.7 : 0.5
         }
     }
 
+    /*! The background of the SpinBox. */
     property Component background: Item {
         BorderImage {
             anchors.fill: parent
@@ -96,71 +101,62 @@ Style {
             border.top: 4
             border.bottom: 4
             anchors.bottomMargin: -2
+            BorderImage {
+                anchors.fill: parent
+                anchors.margins: -1
+                anchors.topMargin: -2
+                anchors.bottomMargin: 1
+                anchors.rightMargin: 0
+                source: "images/focusframe.png"
+                visible: control.activeFocus
+                border.left: 4
+                border.right: 4
+                border.top: 4
+                border.bottom: 4
+            }
         }
     }
 
-    property Component panel:  Item {
+    /*! \internal */
+    property Component panel: Item {
         id: styleitem
-        implicitWidth: control.__contentWidth + 26
+        implicitWidth: controlState.contentWidth + 26
         implicitHeight: 23
 
-        property color foregroundColor: spinboxStyle.foregroundColor
-        property color backgroundColor: spinboxStyle.backgroundColor
+        property color foregroundColor: spinboxStyle.textColor
         property color selectionColor: spinboxStyle.selectionColor
         property color selectedTextColor: spinboxStyle.selectedTextColor
 
-        property int leftMargin: spinboxStyle.leftMargin
-        property int rightMargin: spinboxStyle.rightMargin
-        property int topMargin: spinboxStyle.topMargin
-        property int bottomMargin: spinboxStyle.bottomMargin
+        property var margins: spinboxStyle.margins
 
-        property rect upRect: Qt.rect(width - upControlLoader.implicitWidth, 0, upControlLoader.implicitWidth, height / 2 + 1)
-        property rect downRect: Qt.rect(width - downControlLoader.implicitWidth, height / 2, downControlLoader.implicitWidth, height / 2)
+        property rect upRect: Qt.rect(width - incrementControlLoader.implicitWidth, 0, incrementControlLoader.implicitWidth, height / 2 + 1)
+        property rect downRect: Qt.rect(width - decrementControlLoader.implicitWidth, height / 2, decrementControlLoader.implicitWidth, height / 2)
 
         property int horizontalTextAlignment: Qt.AlignLeft
         property int verticalTextAlignment: Qt.AlignVCenter
 
-        property SpinBox cref: control
-
         Loader {
             id: backgroundLoader
             anchors.fill: parent
             sourceComponent: background
-            property SpinBox control: cref
         }
 
         Loader {
-            id: upControlLoader
+            id: incrementControlLoader
             x: upRect.x
             y: upRect.y
             width: upRect.width
             height: upRect.height
-            sourceComponent: upControl
-            property SpinBox control: cref
+            sourceComponent: incrementControl
         }
 
         Loader {
-            id: downControlLoader
+            id: decrementControlLoader
             x: downRect.x
             y: downRect.y
             width: downRect.width
             height: downRect.height
-            sourceComponent: downControl
-            property SpinBox control: cref
+            sourceComponent: decrementControl
         }
-
-        BorderImage {
-            anchors.fill: parent
-            anchors.margins: -1
-            anchors.topMargin: -2
-            anchors.rightMargin: 0
-            source: "images/focusframe.png"
-            visible: control.activeFocus
-            border.left: 4
-            border.right: 4
-            border.top: 4
-            border.bottom: 4
-        }
-
     }
 }
diff --git a/src/styles/StatusBarStyle.qml b/src/styles/StatusBarStyle.qml
index 77ce8d0a..049b15f2 100644
--- a/src/styles/StatusBarStyle.qml
+++ b/src/styles/StatusBarStyle.qml
@@ -45,6 +45,7 @@ import QtQuick.Controls.Private 1.0
     \qmltype StatusBarStyle
     \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
+    \since QtQuick.Controls.Styles 1.0
 */
 Item {
     implicitHeight: 22
diff --git a/src/styles/TabViewStyle.qml b/src/styles/TabViewStyle.qml
index 75c63314..48a401d1 100644
--- a/src/styles/TabViewStyle.qml
+++ b/src/styles/TabViewStyle.qml
@@ -38,67 +38,106 @@
 **
 ****************************************************************************/
 import QtQuick 2.1
+import QtQuick.Controls 1.0
 import QtQuick.Controls.Private 1.0
 
 /*!
     \qmltype TabViewStyle
-    \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
-    \brief provides custom styling for TabView
+    \since QtQuick.Controls.Styles 1.0
+    \brief Provides custom styling for TabView
+
+\qml
+    TabView {
+        id: frame
+        anchors.fill: parent
+        anchors.margins: 4
+        Tab { title: "Tab 1" }
+        Tab { title: "Tab 2" }
+        Tab { title: "Tab 3" }
+
+        style: TabViewStyle {
+            frameOverlap: 1
+            tab: Rectangle {
+                color: tab.selected ? "steelblue" :"lightsteelblue"
+                border.color:  "steelblue"
+                implicitWidth: Math.max(text.width + 4, 80)
+                implicitHeight: 20
+                radius: 2
+                Text {
+                    id: text
+                    anchors.centerIn: parent
+                    text: tab.title
+                    color: tab.selected ? "white" : "black"
+                }
+            }
+            frame: Rectangle { color: "steelblue" }
+        }
+    }
+\endqml
+
 */
 
 Style {
 
-    /*! This property holds the base alignment of the tab bar.
-      The default value is "left". Supporeted alignments are
-      "left", "center" or "right".
-    */
-    property string tabBarAlignment: "left"
+    /*! The \l ScrollView attached to this style. */
+    readonly property TabView control: __control
 
-    /*! This property holds the left margin of the tab bar.
-      It will only affect tabs \l tabBarAligment set to "right".
+    /*! This property holds the horizontal alignment of
+        the tab buttons. Supported values are:
+        \list
+        \li Qt.AlignLeft (default)
+        \li Qt.AlignHCenter
+        \li Qt.AlignRight
+        \endlist
     */
-    property int leftMargin: 0
+    property int tabsAlignment: Qt.AlignLeft
 
-    /*! This property holds the right margin of the tab bar.
-      It will only affect tabs \l tabBarAligment set to "right".
-    */
-    property int rightMargin: 0
+    /*! This property holds the left padding of the tab bar.  */
+    property int tabsLeftPadding: 0
+
+    /*! This property holds the right padding of the tab bar.  */
+    property int tabsRightPadding: 0
 
     /*! This property holds the amount of overlap there are between
-      individual tab buttons. The default value is 0
-    */
-    property int tabOverlap: 3
+      individual tab buttons. */
+    property int tabOverlap: 1
 
-    property int tabvshift : 0
-    property int tabBaseOverlap: 2
+    /*! This property holds the amount of overlap there are between
+      individual tab buttons and the frame. */
+    property int frameOverlap: 2
 
-    property color textColor: __syspal.text
+    /*! This defines the tab frame. */
+    property Component frame: Rectangle {
+        color: "#dcdcdc"
+        border.color: "#aaa"
 
-    property var __syspal: SystemPalette {
-        colorGroup: control.enabled ? SystemPalette.Active : SystemPalette.Disabled
-    }
-
-    property Component frame: Item {
         Rectangle {
             anchors.fill: parent
-            anchors.topMargin: -tabBaseOverlap
-            color: "#dcdcdc"
-            border.color: "#aaa"
-
-            Rectangle {
-                anchors.fill: parent
-                color: "transparent"
-                border.color: "#66ffffff"
-                anchors.margins: 1
-            }
+            color: "transparent"
+            border.color: "#66ffffff"
+            anchors.margins: 1
         }
     }
 
+    /*! This defines the tab. You can access the tab state through the
+        \c tab 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 previsousSelected - The previous tab is selected.
+            \li readonly property bool hovered - The tab is currently under the mouse.
+        \endtable
+    */
     property Component tab: Item {
         scale: control.tabPosition === Qt.TopEdge ? 1 : -1
+
         implicitWidth: Math.round(textitem.implicitWidth + 20)
         implicitHeight: Math.round(textitem.implicitHeight + 10)
+
         clip: true
         Item {
             anchors.fill: parent
@@ -111,7 +150,7 @@ Style {
                 border.bottom: 6
                 border.left: 6
                 border.right: 6
-                anchors.topMargin: control.tabPosition === Qt.TopEdge ? (tab.selected ? 0 : 1) : 0
+                anchors.topMargin: tab.selected ? 0 : 1
             }
             BorderImage {
                 anchors.fill: parent
@@ -119,20 +158,20 @@ Style {
                 anchors.leftMargin: -2
                 anchors.rightMargin: -1
                 source: "images/focusframe.png"
-                visible: tabbarItem.activeFocus && tab.selected
+                visible: control.activeFocus && tab.selected
                 border.left: 4
                 border.right: 4
                 border.top: 4
                 border.bottom: 4
             }
-
-        }
-        Text {
-            id: textitem
-            anchors.centerIn: parent
-            text: tab.title
-            color: textColor
-            renderType: Text.NativeRendering
+            Text {
+                id: textitem
+                anchors.centerIn: parent
+                text: tab.title
+                renderType: Text.NativeRendering
+                scale: control.tabPosition === Qt.TopEdge ? 1 : -1
+                color: __syspal.text
+            }
         }
     }
 }
diff --git a/src/styles/TableViewStyle.qml b/src/styles/TableViewStyle.qml
index 86678f97..e2d3c0c7 100644
--- a/src/styles/TableViewStyle.qml
+++ b/src/styles/TableViewStyle.qml
@@ -41,17 +41,31 @@ import QtQuick 2.1
 import QtQuick.Controls 1.0
 import QtQuick.Controls.Private 1.0
 
+/*!
+    \qmltype TableViewStyle
+    \inqmlmodule QtQuick.Controls.Styles 1.0
+    \since QtQuick.Controls.Styles 1.0
+    \brief Provides custom styling for TableView
+
+    Note that this class derives from \l ScrollViewStyle
+    and supports all of the properties defined there.
+*/
 ScrollViewStyle {
     id: root
 
-    property bool activateItemOnSingleClick: false
+    /*! The \l TableView attached to this style. */
+    readonly property TableView control: __control
+
+    /*! The text color. */
     property color textColor: __syspal.text
+
+    /*! The text highlight color, used behind selections. */
     property color highlightedTextColor: "white"
 
-    property SystemPalette __syspal: SystemPalette {
-        colorGroup: control.enabled ? SystemPalette.Active : SystemPalette.Disabled
-    }
+    /*! Activates items on single click. */
+    property bool activateItemOnSingleClick: false
 
+    /* Delegate for header. This delegate is described in \l TableView::headerDelegate */
     property Component headerDelegate: Rectangle {
         gradient: Gradient {
             GradientStop {position: 0 ; color: "#eee"}
@@ -85,6 +99,7 @@ ScrollViewStyle {
         }
     }
 
+    /* Delegate for header. This delegate is described in \l TableView::rowDelegate */
     property Component rowDelegate: Rectangle {
         implicitHeight: 20
         implicitWidth: 80
@@ -107,7 +122,8 @@ ScrollViewStyle {
         }
     }
 
-    property Component standardDelegate: Item {
+    /* Delegate for header. This delegate is described in \l TableView::itemDelegate */
+    property Component itemDelegate: Item {
         height: Math.max(16, label.implicitHeight)
         property int implicitWidth: sizehint.paintedWidth + 4
 
diff --git a/src/styles/TextFieldStyle.qml b/src/styles/TextFieldStyle.qml
index 4414f33b..4e7e8b66 100644
--- a/src/styles/TextFieldStyle.qml
+++ b/src/styles/TextFieldStyle.qml
@@ -43,30 +43,49 @@ import QtQuick.Controls.Private 1.0
 
 /*!
     \qmltype TextFieldStyle
-    \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
-    \brief provides custom styling for TextField.
+    \since QtQuick.Controls.Styles 1.0
+    \brief Provides custom styling for TextField.
+
+    Example:
+    \qml
+    TextField {
+        style: TextFieldStyle {
+            textColor: "black"
+            background: Rectangle {
+                radius: 2
+                implicitWidth: 100
+                implicitHeight: 24
+                border.color: "#333"
+                border.width: 1
+            }
+        }
+    }
+    \endqml
 */
 
 Style {
     id: style
 
-    property int topMargin: 4
-    property int leftMargin: 6
-    property int rightMargin: 6
-    property int bottomMargin: 4
+    /*! The \l TextField attached to this style. */
+    readonly property TextField control: __control
 
-    property color foregroundColor: __syspal.text
-    property color backgroundColor: "white"
-    property color selectionColor: __syspal.highlight
-    property color selectedTextColor: __syspal.highlightedText
-
-    property SystemPalette __syspal: SystemPalette {
-        colorGroup: control.enabled ? SystemPalette.Active : SystemPalette.Disabled
-    }
+    /*! The content margins of the text field. */
+    property Margins padding: Margins { top: 4 ; left: 6 ; right: 6 ; bottom:4 }
 
+    /*! The current font. */
     property font font
 
+    /*! The text color. */
+    property color textColor: __syspal.text
+
+    /*! The text highlight color, used behind selections. */
+    property color selectionColor: __syspal.highlight
+
+    /*! The highlighted text color, used in selections. */
+    property color selectedTextColor: __syspal.highlightedText
+
+    /*! The background of the text field. */
     property Component background: Item {
         implicitWidth: 100
         implicitHeight: 25
@@ -93,16 +112,16 @@ Style {
         }
     }
 
+    /*! \internal */
     property Component panel: Item {
         anchors.fill: parent
 
-        property int topMargin: style.topMargin
-        property int leftMargin: style.leftMargin
-        property int rightMargin: style.rightMargin
-        property int bottomMargin: style.bottomMargin
+        property int topMargin: padding.top
+        property int leftMargin: padding.left
+        property int rightMargin: padding.right
+        property int bottomMargin: padding.bottom
 
-        property color foregroundColor: style.foregroundColor
-        property color backgroundColor: style.backgroundColor
+        property color textColor: style.textColor
         property color selectionColor: style.selectionColor
         property color selectedTextColor: style.selectedTextColor
 
diff --git a/src/styles/ToolButtonStyle.qml b/src/styles/ToolButtonStyle.qml
index 8c8bdc3c..e8d05d6c 100644
--- a/src/styles/ToolButtonStyle.qml
+++ b/src/styles/ToolButtonStyle.qml
@@ -47,6 +47,7 @@ import QtQuick.Controls.Private 1.0
     \inqmlmodule QtQuick.Controls.Styles 1.0
 */
 Style {
+    readonly property ToolButton control: __control
     property Component panel: Item {
         id: styleitem
         implicitWidth: 36
diff --git a/src/styles/qmldir b/src/styles/qmldir
index 8a0b058c..d9595239 100644
--- a/src/styles/qmldir
+++ b/src/styles/qmldir
@@ -2,17 +2,10 @@ module QtQuick.Controls.Styles
 ButtonStyle 1.0 ButtonStyle.qml
 CheckBoxStyle 1.0 CheckBoxStyle.qml
 ComboBoxStyle 1.0 ComboBoxStyle.qml
-FocusFrameStyle 1.0 FocusFrameStyle.qml
-GroupBoxStyle 1.0 GroupBoxStyle.qml
 ProgressBarStyle 1.0 ProgressBarStyle.qml
 RadioButtonStyle 1.0 RadioButtonStyle.qml
 ScrollViewStyle 1.0 ScrollViewStyle.qml
-ScrollBarStyle 1.0 ScrollBarStyle.qml
 SliderStyle 1.0 SliderStyle.qml
-SpinBoxStyle 1.0 SpinBoxStyle.qml
-StatusBarStyle 1.0 StatusBarStyle.qml
 TabViewStyle 1.0 TabViewStyle.qml
 TableViewStyle 1.0 TableViewStyle.qml
 TextFieldStyle 1.0 TextFieldStyle.qml
-ToolBarStyle 1.0 ToolBarStyle.qml
-ToolButtonStyle 1.0 ToolButtonStyle.qml
diff --git a/src/styles/styles.pro b/src/styles/styles.pro
index d9198fef..30806565 100644
--- a/src/styles/styles.pro
+++ b/src/styles/styles.pro
@@ -10,7 +10,6 @@ QML_FILES = \
     MenuStyle.qml \
     ProgressBarStyle.qml \
     RadioButtonStyle.qml \
-    ScrollBarStyle.qml \
     ScrollViewStyle.qml\
     SliderStyle.qml \
     SpinBoxStyle.qml \
@@ -33,7 +32,6 @@ QML_FILES += \
     Desktop/ProgressBarStyle.qml \
     Desktop/RadioButtonStyle.qml \
     Desktop/ScrollViewStyle.qml \
-    Desktop/ScrollBarStyle.qml \
     Desktop/SliderStyle.qml \
     Desktop/SpinBoxStyle.qml \
     Desktop/StatusBarStyle.qml\
diff --git a/src/stylesprivate/qmldir b/src/stylesprivate/qmldir
new file mode 100644
index 00000000..866388ca
--- /dev/null
+++ b/src/stylesprivate/qmldir
@@ -0,0 +1,7 @@
+module QtQuick.Controls.Styles.Private
+
+GroupBoxStyle 1.0 ../GroupBoxStyle.qml
+SpinBoxStyle 1.0 ../SpinBoxStyle.qml
+ToolBarStyle 1.0 ../ToolBarStyle.qml
+StatusBarStyle 1.0 ../StatusBarStyle.qml
+ToolButtonStyle 1.0 ../ToolButtonStyle.qml
diff --git a/src/stylesprivate/stylesprivate.pro b/src/stylesprivate/stylesprivate.pro
new file mode 100644
index 00000000..9a5bcd1e
--- /dev/null
+++ b/src/stylesprivate/stylesprivate.pro
@@ -0,0 +1,3 @@
+TARGETPATH = QtQuick/Controls/Styles/Private
+
+load(qml_module)