Merge remote-tracking branch 'origin/5.6' into dev

Conflicts:
	.gitignore
	src/templates/qquickcombobox_p.h
	src/templates/qquickmenu_p.h
	src/templates/qquickmenu_p_p.h
	src/templates/qquickoverlay_p.h
	src/templates/qquickpopup.cpp
	src/templates/qquickpopup_p.h
	src/templates/qquickstackview_p.cpp

Change-Id: I89c7d518697beec0b81ef3a12205286a4f3ccf89

30 files changed, 447 insertions, 187 deletions

diff --git a/src/imports/calendar/qquickcalendarmodel.cpp b/src/imports/calendar/qquickcalendarmodel.cpp
index 832513d7..6b59d45a 100644
--- a/src/imports/calendar/qquickcalendarmodel.cpp
+++ b/src/imports/calendar/qquickcalendarmodel.cpp
@@ -60,6 +60,8 @@ QT_BEGIN_NAMESPACE
         \row \li \b model.year : int \li The number of the year
     \endtable
 
+    \labs
+
     \sa MonthGrid
 */
 
diff --git a/src/imports/calendar/qquickdayofweekrow.cpp b/src/imports/calendar/qquickdayofweekrow.cpp
index e87c3d45..1f5e4387 100644
--- a/src/imports/calendar/qquickdayofweekrow.cpp
+++ b/src/imports/calendar/qquickdayofweekrow.cpp
@@ -64,6 +64,8 @@ QT_BEGIN_NAMESPACE
     The visual appearance of DayOfWeekRow can be changed by
     implementing a \l {delegate}{custom delegate}.
 
+    \labs
+
     \sa MonthGrid, WeekNumberColumn
 */
 
diff --git a/src/imports/calendar/qquickmonthgrid.cpp b/src/imports/calendar/qquickmonthgrid.cpp
index 07e3448a..8fe9ad63 100644
--- a/src/imports/calendar/qquickmonthgrid.cpp
+++ b/src/imports/calendar/qquickmonthgrid.cpp
@@ -49,7 +49,7 @@ QT_BEGIN_NAMESPACE
     \inherits Control
     \instantiates QQuickMonthGrid
     \inqmlmodule Qt.labs.calendar
-    \brief A calendar view.
+    \brief A grid of days for a calendar month.
 
     MonthGrid presents a calendar month in a grid. The contents are
     calculated for a given \l month and \l year, using the specified
@@ -68,6 +68,8 @@ QT_BEGIN_NAMESPACE
     The visual appearance of MonthGrid can be changed by
     implementing a \l {delegate}{custom delegate}.
 
+    \labs
+
     \sa DayOfWeekRow, WeekNumberColumn, CalendarModel
 */
 
diff --git a/src/imports/calendar/qquickweeknumbercolumn.cpp b/src/imports/calendar/qquickweeknumbercolumn.cpp
index 1a796ce0..031b0555 100644
--- a/src/imports/calendar/qquickweeknumbercolumn.cpp
+++ b/src/imports/calendar/qquickweeknumbercolumn.cpp
@@ -66,6 +66,8 @@ QT_BEGIN_NAMESPACE
     The visual appearance of WeekNumberColumn can be changed by
     implementing a \l {delegate}{custom delegate}.
 
+    \labs
+
     \sa MonthGrid, DayOfWeekRow
 */
 
diff --git a/src/imports/controls/Button.qml b/src/imports/controls/Button.qml
index 1196f56b..290f4ce4 100644
--- a/src/imports/controls/Button.qml
+++ b/src/imports/controls/Button.qml
@@ -71,7 +71,7 @@ T.Button {
         implicitWidth: 100
         implicitHeight: 40
         opacity: enabled ? 1 : 0.3
-        color: control.pressed ? (control.highlighted ? "#585a5c" : "#e4e4e4") : (control.highlighted ? "#353637" : "#ffffff")
+        color: control.pressed ? (control.highlighted ? "#585a5c" : "#e4e4e4") : (control.highlighted ? "#353637" : "#f6f6f6")
         border.color: control.pressed ? "#26282a" : "#353637"
     }
     //! [background]
diff --git a/src/imports/controls/CheckBox.qml b/src/imports/controls/CheckBox.qml
index b7d67fe6..20d8ef1c 100644
--- a/src/imports/controls/CheckBox.qml
+++ b/src/imports/controls/CheckBox.qml
@@ -60,7 +60,7 @@ T.CheckBox {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
 
-        color: control.enabled ? (control.pressed ? "#e4e4e4" : "#ffffff") : "#353637"
+        color: control.enabled ? (control.pressed ? "#e4e4e4" : "#f6f6f6") : "#353637"
         border.color: control.enabled ? (control.pressed ? "#26282a" : "#353637") : "transparent"
 
         Image {
diff --git a/src/imports/controls/ComboBox.qml b/src/imports/controls/ComboBox.qml
index 5be26304..33568699 100644
--- a/src/imports/controls/ComboBox.qml
+++ b/src/imports/controls/ComboBox.qml
@@ -99,35 +99,29 @@ T.ComboBox {
 
     //! [popup]
     popup: T.Popup {
-        contentItem: Rectangle {
-            // TODO: Popup::anchors
-            readonly property var above: popup.visible ? control.mapToItem(null, 0, -height + 1) : Qt.point(0, 0)
-            readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height - 1) : Qt.point(0, 0)
+        y: control.height - 1
+        implicitWidth: control.width
+        implicitHeight: Math.min(200, listview.contentHeight)
 
-            x: below.x
-            y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y
-            width: control.width
-            height: listview.height
-
-            ListView {
-                id: listview
-                width: control.width
-                height: Math.min(200, contentHeight)
-
-                clip: true
-                model: control.delegateModel
-                currentIndex: control.highlightedIndex
-
-//                ScrollIndicator.vertical: ScrollIndicator { }
-            }
+        contentItem: ListView {
+            id: listview
+            clip: true
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
 
             Rectangle {
-                width: parent.width
-                height: parent.height
-                color: "transparent"
+                z: 10
+                parent: listview
+                width: listview.width
+                height: listview.height
                 border.color: "#353637"
+                color: "transparent"
             }
+
+//            ScrollIndicator.vertical: ScrollIndicator { }
         }
+
+        background: Rectangle { }
     }
     //! [popup]
 }
diff --git a/src/imports/controls/Menu.qml b/src/imports/controls/Menu.qml
index f4a4243e..6692ef08 100644
--- a/src/imports/controls/Menu.qml
+++ b/src/imports/controls/Menu.qml
@@ -41,10 +41,14 @@ import Qt.labs.templates 1.0 as T
 T.Menu {
     id: control
 
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
+    implicitHeight: Math.min(background ? background.implicitHeight : 0,
+                             contentItem ? contentItem.implicitHeight + topPadding + bottomPadding : 0)
+
     //! [contentItem]
     contentItem: ListView {
-        implicitWidth: 200
-        implicitHeight: Math.min(contentHeight, 200)
+        implicitHeight: contentHeight
         model: control.contentModel
         // TODO: improve this?
         interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false
@@ -53,14 +57,15 @@ T.Menu {
         currentIndex: -1
 
         ScrollIndicator.vertical: ScrollIndicator {}
-
-        Rectangle {
-            width: parent.width
-            height: parent.height
-            color: "#ffffff"
-            border.color: "#353637"
-            z: -1
-        }
     }
     //! [contentItem]
+
+    //! [background]
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 200
+        color: "#ffffff"
+        border.color: "#353637"
+    }
+    //! [background]
 }
diff --git a/src/imports/controls/Popup.qml b/src/imports/controls/Popup.qml
index b7c6fe08..bc7c610c 100644
--- a/src/imports/controls/Popup.qml
+++ b/src/imports/controls/Popup.qml
@@ -39,4 +39,18 @@ import Qt.labs.templates 1.0 as T
 
 T.Popup {
     id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding)
+
+    contentWidth: contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0
+    contentHeight: contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0
+
+    padding: 6
+
+    contentItem: Item { }
+
+    background: Rectangle {
+        border.color: "#353637"
+    }
 }
diff --git a/src/imports/controls/RadioButton.qml b/src/imports/controls/RadioButton.qml
index 82d74b88..8e1e0bce 100644
--- a/src/imports/controls/RadioButton.qml
+++ b/src/imports/controls/RadioButton.qml
@@ -64,7 +64,7 @@ T.RadioButton {
         radius: width / 2
         border.width: 1
         border.color: (control.pressed ? "#26282a" : "#353637")
-        color: control.pressed ? "#e4e4e4" : "#ffffff"
+        color: control.pressed ? "#e4e4e4" : "#f6f6f6"
 
         Rectangle {
             x: (parent.width - width) / 2
diff --git a/src/imports/controls/Slider.qml b/src/imports/controls/Slider.qml
index 250dbd3a..95cfc54e 100644
--- a/src/imports/controls/Slider.qml
+++ b/src/imports/controls/Slider.qml
@@ -57,7 +57,7 @@ T.Slider {
         implicitHeight: 28
         radius: width / 2
         border.color: "#353637"
-        color: control.pressed ? "#bdbebf" : "#ffffff"
+        color: control.pressed ? "#bdbebf" : "#f6f6f6"
 
         readonly property bool horizontal: control.orientation === Qt.Horizontal
     }
diff --git a/src/imports/controls/SpinBox.qml b/src/imports/controls/SpinBox.qml
index 4b42a839..c84a2e3e 100644
--- a/src/imports/controls/SpinBox.qml
+++ b/src/imports/controls/SpinBox.qml
@@ -84,7 +84,7 @@ T.SpinBox {
         x: control.mirrored ? 0 : parent.width - width
         implicitWidth: 40
         implicitHeight: 40
-        color: up.pressed ? "#e4e4e4" : "#ffffff"
+        color: up.pressed ? "#e4e4e4" : "#f6f6f6"
         border.color: control.enabled ? "#353637" : "#bdbebf"
 
         Rectangle {
@@ -109,7 +109,7 @@ T.SpinBox {
         x: control.mirrored ? parent.width - width : 0
         implicitWidth: 40
         implicitHeight: 40
-        color: down.pressed ? "#e4e4e4" : "#ffffff"
+        color: down.pressed ? "#e4e4e4" : "#f6f6f6"
         border.color: control.enabled ? "#353637" : "#bdbebf"
 
         Rectangle {
diff --git a/src/imports/controls/Switch.qml b/src/imports/controls/Switch.qml
index e1627d32..51348e77 100644
--- a/src/imports/controls/Switch.qml
+++ b/src/imports/controls/Switch.qml
@@ -75,7 +75,7 @@ T.Switch {
             width: 28
             height: 28
             radius: 16
-            color: control.pressed ? "#e4e4e4" : "#ffffff"
+            color: control.pressed ? "#e4e4e4" : "#f6f6f6"
             border.width: 1
             border.color: control.pressed ? "#26282a" : "#353637"
 
diff --git a/src/imports/controls/doc/qtlabscontrols.qdocconf b/src/imports/controls/doc/qtlabscontrols.qdocconf
index df004294..cfd5ec55 100644
--- a/src/imports/controls/doc/qtlabscontrols.qdocconf
+++ b/src/imports/controls/doc/qtlabscontrols.qdocconf
@@ -60,3 +60,5 @@ macro.styleimport.HTML = "<table class=\"alignedsummary\"><tbody><tr><td class=\
 # \endstyleproperty
 macro.styleproperty.HTML = "<div class=\"qmlproto\"><table class=\"qmlname\"><tbody><tr valign=\"top\" class=\"odd\" id=\"\3\"><td class=\"tblQmlPropNode\"><p><span class=\"name\">\1</span> : <span class=\"type\">\2</span></p></td></tr></tbody></table></div>"
 macro.endstyleproperty = "\\br"
+
+macro.labs = "\\note \\e{Types in the Qt.labs module are not guaranteed to remain compatible in future versions.}"
diff --git a/src/imports/controls/doc/src/qtlabscontrols-gettingstarted.qdoc b/src/imports/controls/doc/src/qtlabscontrols-gettingstarted.qdoc
new file mode 100644
index 00000000..3f6d2898
--- /dev/null
+++ b/src/imports/controls/doc/src/qtlabscontrols-gettingstarted.qdoc
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \page qtlabscontrols-gettingstarted.html
+    \title Getting Started with Qt Labs Controls
+
+    A basic example of a QML file that makes use of controls is shown here:
+
+    \snippet basic-example.qml 0
+
+    \section1 Setting Up Controls from C++
+
+    Although QQuickView has traditionally been used to display QML files in a
+    C++ application, doing this means you can only set window properties from
+    C++.
+
+    With Qt Labs Controls, declare an ApplicationWindow as the root item of
+    your application and launch it by using QQmlApplicationEngine instead.
+    This ensures that you can control top level window properties from QML.
+
+    A basic example of a source file that makes use of controls is shown here:
+
+    \code
+    #include <QGuiApplication>
+    #include <QQmlApplicationEngine>
+
+    int main(int argc, char *argv[])
+    {
+        QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+        QGuiApplication app(argc, argv);
+        QQmlApplicationEngine engine("main.qml");
+        return app.exec();
+    }
+    \endcode
+
+    \section2 Using C++ Data From QML
+
+    If you need to register a C++ class to use from QML, you can call
+    qmlRegisterType() before declaring your QQmlApplicationEngine.
+    See \l [QtQml] {Defining QML Types from C++} for more information.
+
+    If you need to expose data to QML components, you need to make them
+    available to the context of the current QML engine. See QQmlContext for
+    more information.
+*/
diff --git a/src/imports/controls/doc/src/qtlabscontrols-index.qdoc b/src/imports/controls/doc/src/qtlabscontrols-index.qdoc
index dc198135..93040e3f 100644
--- a/src/imports/controls/doc/src/qtlabscontrols-index.qdoc
+++ b/src/imports/controls/doc/src/qtlabscontrols-index.qdoc
@@ -42,50 +42,10 @@
     \section2 Qt.labs.calendar Module
     \generatelist {qmltypesbymodule Qt.labs.calendar}
 
-    \section1 Getting Started
-
-    A basic example of a QML file that makes use of controls is shown here:
-
-    \snippet basic-example.qml 0
-
-    \section1 Setting Up Controls from C++
-
-    Although QQuickView has traditionally been used to display QML files in a
-    C++ application, doing this means you can only set window properties from
-    C++.
-
-    With Qt Labs Controls, declare an ApplicationWindow as the root item of
-    your application and launch it by using QQmlApplicationEngine instead.
-    This ensures that you can control top level window properties from QML.
-
-    A basic example of a source file that makes use of controls is shown here:
-
-    \code
-    #include <QGuiApplication>
-    #include <QQmlApplicationEngine>
-
-    int main(int argc, char *argv[])
-    {
-        QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
-        QGuiApplication app(argc, argv);
-        QQmlApplicationEngine engine("main.qml");
-        return app.exec();
-    }
-    \endcode
-
-    \section2 Using C++ Data From QML
-
-    If you need to register a C++ class to use from QML, you can call
-    qmlRegisterType() before declaring your QQmlApplicationEngine.
-    See \l [QtQml] {Defining QML Types from C++} for more information.
-
-    If you need to expose data to QML components, you need to make them
-    available to the context of the current QML engine. See QQmlContext for
-    more information.
-
     \section1 Important Concepts in Qt Labs Controls
 
     \list
+      \li \l{Getting Started with Qt Labs Controls}
       \li \l{Styling Qt Labs Controls}
       \li \l{High-DPI Support in Qt Labs Controls}
       \li \l{Differences between Qt Quick Controls}
diff --git a/src/imports/controls/doc/src/qtlabscontrols-material.qdoc b/src/imports/controls/doc/src/qtlabscontrols-material.qdoc
index f9b6a008..e2cadbda 100644
--- a/src/imports/controls/doc/src/qtlabscontrols-material.qdoc
+++ b/src/imports/controls/doc/src/qtlabscontrols-material.qdoc
@@ -38,6 +38,7 @@
 
     \list
         \li \l {accent-attached-prop}{\b accent} : color
+        \li \l {primary-attached-prop}{\b primary} : color
         \li \l {theme-attached-prop}{\b theme} : enumeration
     \endlist
 
@@ -59,9 +60,9 @@
 
     \section2 Customization
 
-    The Material style allows customizing two attributes, \l {theme-attached-prop}{theme}
-    and \l {accent-attached-prop}{accent}. The following example illustrates how to create
-    a red \e stop button with light text:
+    The Material style allows customizing three attributes, \l {theme-attached-prop}{theme},
+    \l {primary-attached-prop}{primary} and \l {accent-attached-prop}{accent}. The following
+    example illustrates how to create a red \e stop button with light text:
 
     \table
         \row
@@ -123,18 +124,13 @@
     of explicit Material style-specific references, the Material style must
     be deployed with the application.
 
-    \section1 Attached Property Documentation
-
-    \styleproperty {Material.accent} {color} {accent-attached-prop}
-    \target accent-attached-prop
-    This attached property holds the accent color of the theme. The property
-    can be attached to any window or item. The value is propagated to children.
+    \section2 Pre-defined Colors
 
-    Even though the accent can be any \l {colorbasictypedocs}{color}, it is
-    recommended to use one of the pre-defined accents that have been designed
+    Even though primary and accent can be any \l {colorbasictypedocs}{color}, it
+    is recommended to use one of the pre-defined colors that have been designed
     to work well with the rest of the Material style palette:
 
-    Available accents:
+    Available pre-defined colors:
     \value Material.Red Red (#F44336)
     \value Material.Pink Pink (#E91E63)
     \value Material.Purple Purple (#9C27B0)
@@ -143,7 +139,7 @@
     \value Material.Blue Blue (#2196F3)
     \value Material.LightBlue Light Blue (#03A9F4)
     \value Material.Cyan Cyan (#00BCD4)
-    \value Material.Teal Teal (#009688, default)
+    \value Material.Teal Teal (#009688)
     \value Material.Green Green (#4CAF50)
     \value Material.LightGreen Light Green (#8BC34A)
     \value Material.Lime Lime (#CDDC39)
@@ -155,6 +151,34 @@
     \value Material.Grey Grey (#9E9E9E)
     \value Material.BlueGrey Blue Grey (#607D8B)
 
+    \labs
+
+    \section1 Attached Property Documentation
+
+    \styleproperty {Material.accent} {color} {accent-attached-prop}
+    \target accent-attached-prop
+    This attached property holds the accent color of the theme. The property
+    can be attached to any window or item. The value is propagated to children.
+
+    The default value is \c Material.Teal.
+
+    \note Even though the accent can be any \l {colorbasictypedocs}{color}, it is
+    recommended to use one of the \l {pre-defined colors} that have been designed
+    to work well with the rest of the Material style palette.
+
+    \endstyleproperty
+
+    \styleproperty {Material.primary} {color} {primary-attached-prop}
+    \target primary-attached-prop
+    This attached property holds the primary color of the theme. The property
+    can be attached to any window or item. The value is propagated to children.
+
+    The default value is \c Material.BlueGray.
+
+    \note Even though the primary can be any \l {colorbasictypedocs}{color}, it is
+    recommended to use one of the \l {pre-defined colors} that have been designed
+    to work well with the rest of the Material style palette.
+
     \endstyleproperty
 
     \styleproperty {Material.theme} {enumeration} {theme-attached-prop}
diff --git a/src/imports/controls/doc/src/qtlabscontrols-universal.qdoc b/src/imports/controls/doc/src/qtlabscontrols-universal.qdoc
index 3c616d84..bf3dcfdc 100644
--- a/src/imports/controls/doc/src/qtlabscontrols-universal.qdoc
+++ b/src/imports/controls/doc/src/qtlabscontrols-universal.qdoc
@@ -124,6 +124,8 @@
     of explicit Universal style-specific references, the Universal style must
     be deployed with the application.
 
+    \labs
+
     \section1 Attached Property Documentation
 
     \styleproperty {Universal.accent} {color} {accent-attached-prop}
diff --git a/src/imports/controls/doc/src/qtlabscontrols.qdoc b/src/imports/controls/doc/src/qtlabscontrols.qdoc
index 10476f08..17e93a44 100644
--- a/src/imports/controls/doc/src/qtlabscontrols.qdoc
+++ b/src/imports/controls/doc/src/qtlabscontrols.qdoc
@@ -49,6 +49,8 @@
     import Qt.labs.calendar 1.0
     \endcode
 
+    \labs
+
     \section1 QML Types
 
     \section2 Qt.labs.controls Module
diff --git a/src/imports/controls/doc/src/templates/qtlabstemplates.qdoc b/src/imports/controls/doc/src/templates/qtlabstemplates.qdoc
index 84eabe44..0f7f7d86 100644
--- a/src/imports/controls/doc/src/templates/qtlabstemplates.qdoc
+++ b/src/imports/controls/doc/src/templates/qtlabstemplates.qdoc
@@ -41,6 +41,8 @@
     import Qt.labs.templates 1.0 as T
     \endcode
 
+    \labs
+
     For the sake of clarity, there is a one-to-one mapping between the types
     provided by the \c Qt.labs.templates and \c Qt.labs.controls imports. For
     every type available in the \c Qt.labs.controls import, a non-visual template
diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml
index 4b154182..fc284be1 100644
--- a/src/imports/controls/material/ComboBox.qml
+++ b/src/imports/controls/material/ComboBox.qml
@@ -115,6 +115,10 @@ T.ComboBox {
 
     //! [popup]
     popup: T.Popup {
+        y: control.height
+        implicitWidth: control.width
+        implicitHeight: Math.min(200, listview.contentHeight)
+
         enter: Transition {
             // grow_fade_in
             NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
@@ -127,18 +131,17 @@ T.ComboBox {
             NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
         }
 
-        contentItem: Item {
-            // TODO: Popup::anchors
-            readonly property var above: popup.visible ? control.mapToItem(null, 0, -height) : Qt.point(0, 0)
-            readonly property var below: popup.visible ? control.mapToItem(null, 0, control.height) : Qt.point(0, 0)
-            readonly property bool showAbove: above.y >= 0 && below.y + height > control.Window.height
+        contentItem: ListView {
+            id: listview
+            clip: true
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
+            transformOrigin: popup.showAbove ? Item.Bottom : Item.Top
 
-            x: below.x
-            y: showAbove ? above.y : below.y
-            width: control.width
-            height: listview.height
-            transformOrigin: showAbove ? Item.Bottom : Item.Top
+//            ScrollIndicator.vertical: ScrollIndicator { }
+        }
 
+        background: Item {
             Rectangle {
                 id: panel
                 width: parent.width
@@ -156,18 +159,6 @@ T.ComboBox {
                 samples: 15
                 spread: 0.5
             }
-
-            ListView {
-                id: listview
-                width: control.width
-                height: Math.min(200, contentHeight) // TODO: 396
-
-                clip: true
-                model: control.delegateModel
-                currentIndex: control.highlightedIndex
-
-//                ScrollIndicator.vertical: ScrollIndicator { }
-            }
         }
     }
     //! [popup]
diff --git a/src/imports/controls/material/Menu.qml b/src/imports/controls/material/Menu.qml
index 4523fc26..6a5c6f61 100644
--- a/src/imports/controls/material/Menu.qml
+++ b/src/imports/controls/material/Menu.qml
@@ -43,6 +43,11 @@ import QtGraphicalEffects 1.0
 T.Menu {
     id: control
 
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
+    implicitHeight: Math.min(background ? background.implicitHeight : 0,
+                             contentItem ? contentItem.implicitHeight + topPadding + bottomPadding : 0)
+
     enter: Transition {
         // grow_fade_in
         NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
@@ -56,11 +61,26 @@ T.Menu {
     }
 
     //! [contentItem]
-    contentItem: Item {
-        implicitWidth: 200
-        implicitHeight: Math.min(listview.contentHeight, 200)
+    contentItem: ListView {
+        implicitHeight: contentHeight
         transformOrigin: Item.Top
 
+        model: control.contentModel
+        // TODO: improve this?
+        interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false
+        clip: true
+        keyNavigationWraps: false
+        currentIndex: -1
+
+        ScrollIndicator.vertical: ScrollIndicator {}
+    }
+    //! [contentItem]
+
+    //! [background]
+    background: Item {
+        implicitWidth: 200
+        implicitHeight: 200
+
         Rectangle {
             id: panel
             width: parent.width
@@ -77,20 +97,6 @@ T.Menu {
             samples: 15
             spread: 0.5
         }
-
-        ListView {
-            id: listview
-            width: parent.width
-            height: parent.height
-            model: control.contentModel
-            // TODO: improve this?
-            interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false
-            clip: true
-            keyNavigationWraps: false
-            currentIndex: -1
-
-            ScrollIndicator.vertical: ScrollIndicator {}
-        }
     }
-    //! [contentItem]
+    //! [background]
 }
diff --git a/src/imports/controls/material/Popup.qml b/src/imports/controls/material/Popup.qml
index 40531c61..b1c73b0c 100644
--- a/src/imports/controls/material/Popup.qml
+++ b/src/imports/controls/material/Popup.qml
@@ -35,11 +35,21 @@
 ****************************************************************************/
 
 import QtQuick 2.6
+import QtGraphicalEffects 1.0
 import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.material 1.0
 
 T.Popup {
     id: control
 
+    implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding)
+
+    contentWidth: contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0
+    contentHeight: contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0
+
+    padding: 6
+
     enter: Transition {
         // grow_fade_in
         NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
@@ -51,4 +61,18 @@ T.Popup {
         NumberAnimation { property: "scale"; from: 1.0; to: 0.9; easing.type: Easing.OutQuint; duration: 220 }
         NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
     }
+
+    contentItem: Item { }
+
+    background: Rectangle {
+        radius: 3
+        color: control.Material.dialogColor
+
+        layer.effect: DropShadow {
+            verticalOffset: 1
+            color: control.Material.dropShadowColor
+            samples: 15
+            spread: 0.5
+        }
+    }
 }
diff --git a/src/imports/controls/material/ToolBar.qml b/src/imports/controls/material/ToolBar.qml
index 83f07be1..ad34e1a0 100644
--- a/src/imports/controls/material/ToolBar.qml
+++ b/src/imports/controls/material/ToolBar.qml
@@ -54,7 +54,7 @@ T.ToolBar {
     //! [background]
     background: Rectangle {
         implicitHeight: 48
-        color: control.Material.accentColor
+        color: control.Material.primaryColor
     }
     //! [background]
 }
diff --git a/src/imports/controls/material/qquickmaterialstyle.cpp b/src/imports/controls/material/qquickmaterialstyle.cpp
index 04e96480..71b48a2b 100644
--- a/src/imports/controls/material/qquickmaterialstyle.cpp
+++ b/src/imports/controls/material/qquickmaterialstyle.cpp
@@ -43,21 +43,6 @@
 
 QT_BEGIN_NAMESPACE
 
-/*!
-    \qmltype Material
-    \inherits QtObject
-    \instantiates QQuickMaterialStyleAttached
-    \inqmlmodule QtQuick.Controls.Material
-    \ingroup utilities
-    \brief A style interface.
-
-    TODO
-*/
-
-/*!
-    \qmlattachedproperty color QtQuickControls2::Material::textColorPrimaray
-*/
-
 static const QRgb colors[][14] = {
     // Red
     {
@@ -385,8 +370,10 @@ static const QRgb colors[][14] = {
 };
 
 static QQuickMaterialStyle::Theme defaultTheme = QQuickMaterialStyle::Light;
-static uint defaultAccent = QQuickMaterialStyle::Teal;
-static bool defaultCustom = false;
+static uint defaultPrimary = QQuickMaterialStyle::Indigo;
+static uint defaultAccent = QQuickMaterialStyle::Pink;
+static bool defaultPrimaryCustom = false;
+static bool defaultAccentCustom = false;
 static const QRgb backgroundColorLight = 0xFFFAFAFA;
 static const QRgb backgroundColorDark = 0xFF303030;
 static const QRgb dialogColorLight = 0xFFFFFFFF;
@@ -420,9 +407,12 @@ static const QRgb checkBoxUncheckedRippleColorDark = 0x20FFFFFF;
 
 QQuickMaterialStyle::QQuickMaterialStyle(QObject *parent) : QQuickStyle(parent),
     m_explicitTheme(false),
+    m_explicitPrimary(false),
     m_explicitAccent(false),
-    m_customAccent(defaultCustom),
+    m_customPrimary(defaultPrimaryCustom),
+    m_customAccent(defaultAccentCustom),
     m_theme(defaultTheme),
+    m_primary(defaultPrimary),
     m_accent(defaultAccent)
 {
     init();
@@ -478,6 +468,76 @@ void QQuickMaterialStyle::resetTheme()
     }
 }
 
+QVariant QQuickMaterialStyle::primary() const
+{
+    return primaryColor();
+}
+
+void QQuickMaterialStyle::setPrimary(const QVariant &var)
+{
+    QRgb primary = 0;
+    bool custom = false;
+    if (var.type() == QVariant::Int) {
+        int val = var.toInt();
+        if (val > BlueGrey) {
+            qmlInfo(parent()) << "unknown Material.primary value: " << val;
+            return;
+        }
+        primary = val;
+    } else {
+        int val = QMetaEnum::fromType<Color>().keyToValue(var.toByteArray());
+        if (val != -1) {
+            primary = val;
+        } else {
+            QColor color(var.toString());
+            if (!color.isValid()) {
+                qmlInfo(parent()) << "unknown Material.primary value: " << var.toString();
+                return;
+            }
+            custom = true;
+            primary = color.rgba();
+        }
+    }
+
+    m_explicitPrimary = true;
+    if (m_primary != primary) {
+        m_customPrimary = custom;
+        m_primary = primary;
+        propagatePrimary();
+        emit primaryChanged();
+        emit paletteChanged();
+    }
+}
+
+void QQuickMaterialStyle::inheritPrimary(uint primary, bool custom)
+{
+    if (!m_explicitPrimary && m_primary != primary) {
+        m_customPrimary = custom;
+        m_primary = primary;
+        propagatePrimary();
+        emit primaryChanged();
+    }
+}
+
+void QQuickMaterialStyle::propagatePrimary()
+{
+    foreach (QQuickStyle *child, childStyles()) {
+        QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(child);
+        if (material)
+            material->inheritPrimary(m_primary, m_customPrimary);
+    }
+}
+
+void QQuickMaterialStyle::resetPrimary()
+{
+    if (m_explicitPrimary) {
+        m_customPrimary = false;
+        m_explicitPrimary = false;
+        QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(parentStyle());
+        inheritPrimary(material ? material->m_primary : defaultPrimary, true);
+    }
+}
+
 QVariant QQuickMaterialStyle::accent() const
 {
     return accentColor();
@@ -549,6 +609,15 @@ void QQuickMaterialStyle::resetAccent()
     }
 }
 
+QColor QQuickMaterialStyle::primaryColor() const
+{
+    if (m_customPrimary)
+        return QColor::fromRgba(m_primary);
+    if (m_primary > BlueGrey)
+        return QColor();
+    return colors[m_primary][Shade500];
+}
+
 QColor QQuickMaterialStyle::accentColor() const
 {
     if (m_customAccent)
@@ -820,6 +889,7 @@ void QQuickMaterialStyle::parentStyleChange(QQuickStyle *newParent, QQuickStyle
     Q_UNUSED(oldParent);
     QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(newParent);
     if (material) {
+        inheritPrimary(material->m_primary, material->m_customPrimary);
         inheritAccent(material->m_accent, material->m_customAccent);
         inheritTheme(material->theme());
     }
@@ -846,15 +916,30 @@ void QQuickMaterialStyle::init()
             else if (!value.isEmpty())
                 qWarning().nospace().noquote() << settings->fileName() << ": unknown Material theme value: " << value;
 
+            value = settings->value(QStringLiteral("Primary")).toByteArray();
+            Color primary = toEnumValue<Color>(value, &ok);
+            if (ok) {
+                defaultPrimaryCustom = m_customPrimary = false;
+                defaultPrimary = m_primary = primary;
+            } else {
+                QColor color(value.constData());
+                if (color.isValid()) {
+                    defaultPrimaryCustom = m_customPrimary = true;
+                    defaultPrimary = m_primary = color.rgba();
+                } else if (!value.isEmpty()) {
+                    qWarning().nospace().noquote() << settings->fileName() << ": unknown Material primary value: " << value;
+                }
+            }
+
             value = settings->value(QStringLiteral("Accent")).toByteArray();
             Color accent = toEnumValue<Color>(value, &ok);
             if (ok) {
-                defaultCustom = m_customAccent = false;
+                defaultAccentCustom = m_customAccent = false;
                 defaultAccent = m_accent = accent;
             } else {
                 QColor color(value.constData());
                 if (color.isValid()) {
-                    defaultCustom = m_customAccent = true;
+                    defaultAccentCustom = m_customAccent = true;
                     defaultAccent = m_accent = color.rgba();
                 } else if (!value.isEmpty()) {
                     qWarning().nospace().noquote() << settings->fileName() << ": unknown Material accent value: " << value;
diff --git a/src/imports/controls/material/qquickmaterialstyle_p.h b/src/imports/controls/material/qquickmaterialstyle_p.h
index b9236216..00103361 100644
--- a/src/imports/controls/material/qquickmaterialstyle_p.h
+++ b/src/imports/controls/material/qquickmaterialstyle_p.h
@@ -59,7 +59,9 @@ class QQuickMaterialStyle : public QQuickStyle
 {
     Q_OBJECT
     Q_PROPERTY(Theme theme READ theme WRITE setTheme RESET resetTheme NOTIFY themeChanged FINAL)
+    Q_PROPERTY(QVariant primary READ primary WRITE setPrimary RESET resetPrimary NOTIFY primaryChanged FINAL)
     Q_PROPERTY(QVariant accent READ accent WRITE setAccent RESET resetAccent NOTIFY accentChanged FINAL)
+    Q_PROPERTY(QColor primaryColor READ primaryColor NOTIFY primaryChanged FINAL) // TODO: remove?
     Q_PROPERTY(QColor accentColor READ accentColor NOTIFY accentChanged FINAL) // TODO: remove?
     Q_PROPERTY(QColor backgroundColor READ backgroundColor NOTIFY paletteChanged FINAL)
     Q_PROPERTY(QColor primaryTextColor READ primaryTextColor NOTIFY paletteChanged FINAL)
@@ -153,12 +155,19 @@ public:
     void propagateTheme();
     void resetTheme();
 
+    QVariant primary() const;
+    void setPrimary(const QVariant &accent);
+    void inheritPrimary(uint primary, bool custom);
+    void propagatePrimary();
+    void resetPrimary();
+
     QVariant accent() const;
     void setAccent(const QVariant &accent);
     void inheritAccent(uint accent, bool custom);
     void propagateAccent();
     void resetAccent();
 
+    QColor primaryColor() const;
     QColor accentColor() const;
     QColor backgroundColor() const;
     QColor primaryTextColor() const;
@@ -198,6 +207,7 @@ public:
 
 Q_SIGNALS:
     void themeChanged();
+    void primaryChanged();
     void accentChanged();
     void paletteChanged();
 
@@ -208,9 +218,12 @@ private:
     void init();
 
     bool m_explicitTheme;
+    bool m_explicitPrimary;
     bool m_explicitAccent;
+    bool m_customPrimary;
     bool m_customAccent;
     Theme m_theme;
+    uint m_primary;
     uint m_accent;
 };
 
diff --git a/src/imports/controls/universal/ComboBox.qml b/src/imports/controls/universal/ComboBox.qml
index 38c8e6e2..f61ab634 100644
--- a/src/imports/controls/universal/ComboBox.qml
+++ b/src/imports/controls/universal/ComboBox.qml
@@ -110,29 +110,22 @@ T.ComboBox {
 
     //! [popup]
     popup: T.Popup {
-        contentItem: Rectangle {
-            // TODO: Popup::anchors
-            readonly property var above: popup.visible ? control.mapToItem(null, 0, control.height - height) : Qt.point(0, 0)
-            readonly property var below: popup.visible ? control.mapToItem(null, 0, 0) : Qt.point(0, 0)
+        implicitWidth: control.width
+        implicitHeight: Math.min(200, listview.contentHeight) // TODO: 396
 
-            x: below.x
-            y: above.y >= 0 && below.y + height > control.Window.height ? above.y : below.y
-            width: control.width
-            height: listview.height
+        contentItem: ListView {
+            id: listview
+            clip: true
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
 
-            color: control.Universal.chromeMediumLowColor
-
-            ListView {
-                id: listview
-                width: control.width
-                height: Math.min(200, contentHeight) // TODO: 396
-
-                clip: true
-                model: control.delegateModel
-                currentIndex: control.highlightedIndex
+//            ScrollIndicator.vertical: ScrollIndicator { }
+        }
 
-//                ScrollIndicator.vertical: ScrollIndicator { }
-            }
+        background: Rectangle {
+            color: control.Universal.chromeMediumLowColor
+            border.color: control.Universal.chromeHighColor
+            border.width: 1 // FlyoutBorderThemeThickness
         }
     }
     //! [popup]
diff --git a/src/imports/controls/universal/Menu.qml b/src/imports/controls/universal/Menu.qml
index fec16c16..7cae65f1 100644
--- a/src/imports/controls/universal/Menu.qml
+++ b/src/imports/controls/universal/Menu.qml
@@ -42,10 +42,14 @@ import Qt.labs.controls.universal 1.0
 T.Menu {
     id: control
 
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
+    implicitHeight: Math.min(background ? background.implicitHeight : 0,
+                             contentItem ? contentItem.implicitHeight + topPadding + bottomPadding : 0)
+
     //! [contentItem]
     contentItem: ListView {
-        implicitWidth: 200
-        implicitHeight: Math.min(contentHeight, 200)
+        implicitHeight: contentHeight
         model: control.contentModel
         // TODO: improve this?
         interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false
@@ -54,15 +58,16 @@ T.Menu {
         currentIndex: -1
 
         ScrollIndicator.vertical: ScrollIndicator {}
-
-        Rectangle {
-            z: -1
-            width: parent.width
-            height: parent.height
-            color: control.Universal.chromeMediumLowColor
-            border.color: control.Universal.chromeHighColor
-            border.width: 1 // FlyoutBorderThemeThickness
-        }
     }
     //! [contentItem]
+
+    //! [background]
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 200
+        color: control.Universal.chromeMediumLowColor
+        border.color: control.Universal.chromeHighColor
+        border.width: 1 // FlyoutBorderThemeThickness
+    }
+    //! [background]
 }
diff --git a/src/imports/controls/universal/Popup.qml b/src/imports/controls/universal/Popup.qml
new file mode 100644
index 00000000..16ed5451
--- /dev/null
+++ b/src/imports/controls/universal/Popup.qml
@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.universal 1.0
+
+T.Popup {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding)
+
+    contentWidth: contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0
+    contentHeight: contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0
+
+    padding: 12
+
+    contentItem: Item { }
+
+    background: Rectangle {
+        color: control.Universal.chromeMediumLowColor
+        border.color: control.Universal.chromeHighColor
+        border.width: 1 // FlyoutBorderThemeThickness
+    }
+}
diff --git a/src/imports/controls/universal/universal.pri b/src/imports/controls/universal/universal.pri
index 73547f4d..965228cb 100644
--- a/src/imports/controls/universal/universal.pri
+++ b/src/imports/controls/universal/universal.pri
@@ -14,6 +14,7 @@ QML_FILES += \
     $$PWD/Page.qml \
     $$PWD/PageIndicator.qml \
     $$PWD/Pane.qml \
+    $$PWD/Popup.qml \
     $$PWD/ProgressBar.qml \
     $$PWD/RadioButton.qml \
     $$PWD/RangeSlider.qml \