Popup: add support for background insets

[ChangeLog][Controls][Popup] Added topInset, bottomInset, leftInset,
and rightInset properties to control the geometry of the background
similarly to how paddings control the geometry of the contentItem.

Task-number: QTBUG-60156
Change-Id: I02873f129d2a804986d0db52d1b94899f9219c03
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

5 files changed, 761 insertions, 327 deletions

diff --git a/src/imports/controls/doc/images/qtquickcontrols2-control.svg b/src/imports/controls/doc/images/qtquickcontrols2-control.svg
index e39f3dce..4b2057d1 100644
--- a/src/imports/controls/doc/images/qtquickcontrols2-control.svg
+++ b/src/imports/controls/doc/images/qtquickcontrols2-control.svg
@@ -9,9 +9,9 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="640"
-   height="420"
-   viewBox="0 0 639.99997 419.99999"
+   width="760"
+   height="580"
+   viewBox="0 0 759.99997 579.99999"
    id="svg2"
    version="1.1"
    inkscape:version="0.92.3 (2405546, 2018-03-11)"
@@ -411,6 +411,126 @@
          style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
          transform="scale(0.8)" />
     </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-1-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-8-3"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-96-3"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-4-46"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5-6-9-5"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2-6-6"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8-4-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9-8-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-1-9-7"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-8-3-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-96-3-2"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-4-46-3"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5-6-9-5-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2-6-6-1"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8-4-1-3"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9-8-7-6"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
   </defs>
   <sodipodi:namedview
      id="base"
@@ -419,9 +539,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="2.8284271"
-     inkscape:cx="328.65009"
-     inkscape:cy="205.42326"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="138.75529"
+     inkscape:cy="425.28174"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -451,26 +571,26 @@
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(91.482322,-192.9581)">
+     transform="translate(91.482322,-32.9581)">
     <rect
        style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.05102265;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="rect4136"
        width="518.94897"
        height="298.94897"
-       x="-30.956812"
-       y="253.48361" />
+       x="29.043194"
+       y="193.48361" />
     <rect
        style="fill:#ffd5d5;fill-opacity:1;stroke:none;stroke-width:0.83021182;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="rect4136-3"
        width="440"
        height="220"
-       x="8.5176783"
-       y="292.9581" />
+       x="68.517685"
+       y="232.9581" />
     <flowRoot
        xml:space="preserve"
        id="flowRoot4138"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(1.1690183,0,0,1.1690183,55.80022,-171.31953)"><flowRegion
+       transform="matrix(1.1690183,0,0,1.1690183,115.80023,-231.31953)"><flowRegion
          id="flowRegion4140"
          style="fill:#ff2a2a"><rect
            id="rect4142"
@@ -487,13 +607,13 @@
        id="rect4148"
        width="360"
        height="140"
-       x="48.517677"
-       y="332.95813" />
+       x="108.51768"
+       y="272.95813" />
     <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,124.5726,101.29422)"><flowRegion
+       transform="matrix(0.6007979,0,0,0.6007979,184.57261,41.294224)"><flowRegion
          id="flowRegion4140-6"
          style="fill:#0055d4"><rect
            id="rect4142-6"
@@ -507,7 +627,7 @@
        xml:space="preserve"
        id="flowRoot4138-6-1"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,187.75902,280.21488)"><flowRegion
+       transform="matrix(0.6007979,0,0,0.6007979,247.75903,220.21488)"><flowRegion
          id="flowRegion4140-6-9"><rect
            id="rect4142-6-0"
            width="270.72089"
@@ -518,19 +638,19 @@
          id="flowPara4146-6-2"
          style="font-size:17.5px;line-height:1.25">Width</flowPara></flowRoot>    <path
        style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.93053311;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-3);marker-end:url(#TriangleOutL-0)"
-       d="M -26.831023,563.52033 H 483.32947"
+       d="M 33.168982,505.52033 H 543.32948"
        id="path4179-8"
        inkscape:connector-curvature="0" />
     <path
        style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9);marker-end:url(#TriangleOutL-1)"
-       d="M -41.482322,547.33858 V 258.57762"
+       d="M 16.517683,487.33858 V 198.57762"
        id="path4179-9"
        inkscape:connector-curvature="0" />
     <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6-1-7"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,-110.00353,107.19582)"><flowRegion
+       transform="matrix(0.6007979,0,0,0.6007979,-50.003525,47.195824)"><flowRegion
          id="flowRegion4140-6-9-7"><rect
            id="rect4142-6-0-5"
            width="270.72089"
@@ -543,7 +663,7 @@
        xml:space="preserve"
        id="flowRoot4138-6-3"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,138.50125,-84.786365)"><flowRegion
+       transform="matrix(0.6007979,0,0,0.6007979,206.65956,-144.78636)"><flowRegion
          id="flowRegion4140-6-67"><rect
            id="rect4142-6-5"
            width="334.36047"
@@ -551,12 +671,12 @@
            x="42.426407"
            y="481.62601"
            style="font-size:60px;fill:#000000" /></flowRegion><flowPara
-         id="flowPara4146-6-3"
-         style="font-size:60px;line-height:1.25">Control</flowPara></flowRoot>    <flowRoot
+         style="font-size:60px;line-height:1.25"
+         id="flowPara14323">Popup</flowPara></flowRoot>    <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6-2-7-5"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,-18.782253,209.93493)"><flowRegion
+       transform="matrix(0.6007979,0,0,0.6007979,41.217752,149.93493)"><flowRegion
          id="flowRegion4140-6-6-4-6"
          style="text-align:center;text-anchor:middle;fill:#0055d4"><rect
            id="rect4142-6-1-4-2"
@@ -572,7 +692,7 @@
        xml:space="preserve"
        id="flowRoot4138-6-2-7-5-1"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,324.82398,-9.0464154)"><flowRegion
+       transform="matrix(0.6007979,0,0,0.6007979,384.82399,-69.046412)"><flowRegion
          id="flowRegion4140-6-6-4-6-2"
          style="fill:#0055d4"><rect
            id="rect4142-6-1-4-2-7"
@@ -588,7 +708,7 @@
        xml:space="preserve"
        id="flowRoot4138-6-2-7-5-9"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,398.1404,59.190638)"><flowRegion
+       transform="matrix(0.6007979,0,0,0.6007979,458.14041,-0.80935844)"><flowRegion
          id="flowRegion4140-6-6-4-6-3"
          style="fill:#0055d4"><rect
            id="rect4142-6-1-4-2-6"
@@ -602,7 +722,7 @@
        xml:space="preserve"
        id="flowRoot4138-6-2-7-5-9-2"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,-40.826553,147.13311)"><flowRegion
+       transform="matrix(0.6007979,0,0,0.6007979,19.173452,87.133114)"><flowRegion
          id="flowRegion4140-6-6-4-6-3-5"
          style="fill:#0055d4"><rect
            id="rect4142-6-1-4-2-6-4"
@@ -614,19 +734,19 @@
          style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#0055d4"
          id="flowPara4386-0">Left padding</flowPara></flowRoot>    <path
        style="fill:#ff2a2a;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87824047;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9-6);marker-end:url(#TriangleOutL-1-1)"
-       d="M 12.916178,287.96278 V 258.98852"
+       d="M 72.916183,227.96278 V 198.98852"
        id="path4179-9-8"
        inkscape:connector-curvature="0" />
     <path
        style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87323481;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5);marker-end:url(#TriangleOutL-9-4)"
-       d="M -25.470947,298.58445 H 3.5629489"
+       d="M 34.529058,238.58445 H 63.562954"
        id="path4179-7-8"
        inkscape:connector-curvature="0" />
     <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6-2-7-5-1-5"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,-12.104603,-28.000512)"><flowRegion
+       transform="matrix(0.6007979,0,0,0.6007979,47.895402,-88.000508)"><flowRegion
          id="flowRegion4140-6-6-4-6-2-9"
          style="fill:#ff2a2a"><rect
            id="rect4142-6-1-4-2-7-7"
@@ -640,7 +760,7 @@
        xml:space="preserve"
        id="flowRoot4138-6-2-7-5-9-2-3"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,-59.558586,16.047754)"><flowRegion
+       transform="matrix(0.6007979,0,0,0.6007979,0.4414194,-43.952242)"><flowRegion
          id="flowRegion4140-6-6-4-6-3-5-8"
          style="fill:#ff2a2a"><rect
            id="rect4142-6-1-4-2-6-4-8"
@@ -652,19 +772,19 @@
          style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ff2a2a"
          id="flowPara4386-0-3">Left inset</flowPara></flowRoot>    <path
        style="fill:#0055d4;fill-rule:evenodd;stroke:#0055d4;stroke-width:0.97500122;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-1);marker-end:url(#TriangleOutL-96)"
-       d="M 402.28756,327.38769 V 259.50991"
+       d="M 462.28757,267.38769 V 199.50991"
        id="path4179-3"
        inkscape:connector-curvature="0" />
     <path
        style="fill:#ff2a2a;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87794411;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9-6-4);marker-end:url(#TriangleOutL-1-1-6)"
-       d="M 444.22783,546.94146 V 517.98675"
+       d="M 504.22784,486.94146 V 457.98675"
        id="path4179-9-8-9"
        inkscape:connector-curvature="0" />
     <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6-2-7-5-1-5-0"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,364.36984,230.98794)"><flowRegion
+       transform="matrix(0.6007979,0,0,0.6007979,424.36985,170.98794)"><flowRegion
          id="flowRegion4140-6-6-4-6-2-9-6"
          style="fill:#ff2a2a"><rect
            id="rect4142-6-1-4-2-7-7-8"
@@ -676,14 +796,14 @@
          style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#ff2a2a"
          id="flowPara11237-7">Bottom inset</flowPara></flowRoot>    <path
        style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87314719;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6);marker-end:url(#TriangleOutL-9-4-8)"
-       d="m 453.47561,508.6218 h 29.02808"
+       d="M 513.47562,448.6218 H 542.5037"
        id="path4179-7-8-6"
        inkscape:connector-curvature="0" />
     <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6-2-7-5-9-2-3-0"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,419.24022,186.32002)"><flowRegion
+       transform="matrix(0.6007979,0,0,0.6007979,479.24023,126.32002)"><flowRegion
          id="flowRegion4140-6-6-4-6-3-5-8-7"
          style="fill:#ff2a2a"><rect
            id="rect4142-6-1-4-2-6-4-8-0"
@@ -695,18 +815,122 @@
          style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ff2a2a"
          id="flowPara3807">Right inset</flowPara></flowRoot>    <path
        style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.05938387;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6-9);marker-end:url(#TriangleOutL-9-4-8-4)"
-       d="m 414.52522,338.31524 h 66.93934"
+       d="m 474.52523,278.31524 h 66.93934"
        id="path4179-7-8-6-0"
        inkscape:connector-curvature="0" />
     <path
        style="fill:#0055d4;fill-rule:evenodd;stroke:#0055d4;stroke-width:0.97513783;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-1-7);marker-end:url(#TriangleOutL-96-7)"
-       d="M 54.589106,546.37854 V 478.48175"
+       d="M 114.58911,486.37854 V 418.48175"
        id="path4179-3-9"
        inkscape:connector-curvature="0" />
     <path
        style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.05900466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6-9-1);marker-end:url(#TriangleOutL-9-4-8-4-0)"
-       d="M -24.417773,466.88667 H 42.473651"
+       d="M 35.582232,406.88667 H 102.47366"
        id="path4179-7-8-6-0-0"
        inkscape:connector-curvature="0" />
-  </g>
+    <rect
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.38;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-9"
+       width="638.62036"
+       height="418.6203"
+       x="-30.792475"
+       y="133.64795" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-3-8"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,192.12072,-213.92909)"><flowRegion
+         id="flowRegion4140-6-67-1"><rect
+           id="rect4142-6-5-6"
+           width="334.36047"
+           height="80.812172"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:60px;fill:#000000" /></flowRegion><flowPara
+         style="font-size:60px;line-height:1.25"
+         id="flowPara14323-3">Window</flowPara></flowRoot>    <path
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.83036995;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-1-9);marker-end:url(#TriangleOutL-96-3)"
+       d="M 16.507747,188.209 V 138.97553"
+       id="path4179-3-1"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.90094262;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6-9-5);marker-end:url(#TriangleOutL-9-4-8-4-1)"
+       d="m 553.67227,505.52244 h 48.41379"
+       id="path4179-7-8-6-0-2"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1-2"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-53.285062,-138.90295)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-92"
+         style="fill:#000000"><rect
+           id="rect4142-6-1-4-2-7-8"
+           width="71.826065"
+           height="43.785866"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara10048-9-0-1">Top</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara4830-2">margin</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1-2-4"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,530.78767,225.71855)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-92-7"
+         style="fill:#000000"><rect
+           id="rect4142-6-1-4-2-7-8-8"
+           width="71.826065"
+           height="43.785866"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara10048-9-0-1-6">Right</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara4830-2-3">margin</flowPara></flowRoot>    <path
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.83036995;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-1-9-7);marker-end:url(#TriangleOutL-96-3-2)"
+       d="M 16.459117,546.78218 V 497.54871"
+       id="path4179-3-1-7"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1-2-2"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-0.06072146,225.50386)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-92-5"
+         style="fill:#000000"><rect
+           id="rect4142-6-1-4-2-7-8-3"
+           width="71.826065"
+           height="43.785866"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara10048-9-0-1-7">Bottom</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara4830-2-6">margin</flowPara></flowRoot>    <path
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.89733517;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6-9-5-8);marker-end:url(#TriangleOutL-9-4-8-4-1-3)"
+       d="M -25.075855,505.54405 H 22.951007"
+       id="path4179-7-8-6-0-2-4"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-1-2-2-0"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-55.529842,180.17847)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-92-5-3"
+         style="fill:#000000"><rect
+           id="rect4142-6-1-4-2-7-8-3-5"
+           width="71.826065"
+           height="43.785866"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara10048-9-0-1-7-8">Left</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#000000"
+         id="flowPara4830-2-6-5">margin</flowPara></flowRoot>  </g>
 </svg>
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-popup.png b/src/imports/controls/doc/images/qtquickcontrols2-popup.png
index a0bc3d8c..01d65709 100644
--- a/src/imports/controls/doc/images/qtquickcontrols2-popup.png
+++ b/src/imports/controls/doc/images/qtquickcontrols2-popup.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-popup.svg b/src/imports/controls/doc/images/qtquickcontrols2-popup.svg
index 91bde0c5..e39f3dce 100644
--- a/src/imports/controls/doc/images/qtquickcontrols2-popup.svg
+++ b/src/imports/controls/doc/images/qtquickcontrols2-popup.svg
@@ -9,15 +9,16 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="817.22076"
-   height="605.42444"
-   viewBox="0 0 766.14443 567.58541"
+   width="640"
+   height="420"
+   viewBox="0 0 639.99997 419.99999"
    id="svg2"
    version="1.1"
-   inkscape:version="0.92.1 r15371"
-   sodipodi:docname="qtquickcontrols2-popup.svg"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90">
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="qtquickcontrols2-control.svg"
+   inkscape:export-filename="/home/jpnurmi/Projects/qt-dev/qtquickcontrols2/src/imports/controls/doc/images/qtquickcontrols2-control.png"
+   inkscape:export-xdpi="192"
+   inkscape:export-ydpi="192">
   <defs
      id="defs4">
     <marker
@@ -175,13 +176,13 @@
        orient="auto"
        refY="0"
        refX="0"
-       id="TriangleInL-7"
+       id="TriangleInL-9-6"
        style="overflow:visible"
        inkscape:isstock="true">
       <path
-         id="path4318-5"
+         id="path4318-2-2"
          d="M 5.77,0 -2.88,5 V -5 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
          transform="scale(-0.8)"
          inkscape:connector-curvature="0" />
     </marker>
@@ -190,13 +191,13 @@
        orient="auto"
        refY="0"
        refX="0"
-       id="TriangleOutL-4"
+       id="TriangleOutL-1-1"
        style="overflow:visible"
        inkscape:isstock="true">
       <path
-         id="path4327-17"
+         id="path4327-2-7"
          d="M 5.77,0 -2.88,5 V -5 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
          transform="scale(0.8)"
          inkscape:connector-curvature="0" />
     </marker>
@@ -205,13 +206,43 @@
        orient="auto"
        refY="0"
        refX="0"
-       id="TriangleInL-7-1"
+       id="TriangleInL-2-5"
        style="overflow:visible"
        inkscape:isstock="true">
       <path
-         id="path4318-5-2"
+         inkscape:connector-curvature="0"
+         id="path4318-4-7"
          d="M 5.77,0 -2.88,5 V -5 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-8"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
          transform="scale(-0.8)"
          inkscape:connector-curvature="0" />
     </marker>
@@ -220,13 +251,43 @@
        orient="auto"
        refY="0"
        refX="0"
-       id="TriangleOutL-4-3"
+       id="TriangleOutL-96"
        style="overflow:visible"
        inkscape:isstock="true">
       <path
-         id="path4327-17-4"
+         id="path4327-4"
          d="M 5.77,0 -2.88,5 V -5 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-9-6-4"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-2-2-7"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-1-1-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-2-7-8"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
          transform="scale(0.8)"
          inkscape:connector-curvature="0" />
     </marker>
@@ -235,14 +296,14 @@
        orient="auto"
        refY="0"
        refX="0"
-       id="TriangleInL-2-4"
+       id="TriangleInL-2-5-6"
        style="overflow:visible"
        inkscape:isstock="true">
       <path
          inkscape:connector-curvature="0"
-         id="path4318-4-7"
+         id="path4318-4-7-2"
          d="M 5.77,0 -2.88,5 V -5 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
          transform="scale(-0.8)" />
     </marker>
     <marker
@@ -250,14 +311,14 @@
        orient="auto"
        refY="0"
        refX="0"
-       id="TriangleOutL-9-3"
+       id="TriangleOutL-9-4-8"
        style="overflow:visible"
        inkscape:isstock="true">
       <path
          inkscape:connector-curvature="0"
-         id="path4327-1-1"
+         id="path4327-1-1-9"
          d="M 5.77,0 -2.88,5 V -5 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:1.00000003pt;stroke-opacity:1"
          transform="scale(0.8)" />
     </marker>
     <marker
@@ -265,13 +326,43 @@
        orient="auto"
        refY="0"
        refX="0"
-       id="TriangleInL-7-1-4"
+       id="TriangleInL-2-5-6-9"
        style="overflow:visible"
        inkscape:isstock="true">
       <path
-         id="path4318-5-2-3"
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2-6"
          d="M 5.77,0 -2.88,5 V -5 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(-0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8-4"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9-8"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="scale(0.8)" />
+    </marker>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-1-7"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-8-9"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
          transform="scale(-0.8)"
          inkscape:connector-curvature="0" />
     </marker>
@@ -280,13 +371,13 @@
        orient="auto"
        refY="0"
        refX="0"
-       id="TriangleOutL-4-3-5"
+       id="TriangleOutL-96-7"
        style="overflow:visible"
        inkscape:isstock="true">
       <path
-         id="path4327-17-4-6"
+         id="path4327-4-4"
          d="M 5.77,0 -2.88,5 V -5 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
          transform="scale(0.8)"
          inkscape:connector-curvature="0" />
     </marker>
@@ -295,14 +386,14 @@
        orient="auto"
        refY="0"
        refX="0"
-       id="TriangleInL-2-4-7"
+       id="TriangleInL-2-5-6-9-1"
        style="overflow:visible"
        inkscape:isstock="true">
       <path
          inkscape:connector-curvature="0"
-         id="path4318-4-7-4"
+         id="path4318-4-7-2-6-7"
          d="M 5.77,0 -2.88,5 V -5 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
          transform="scale(-0.8)" />
     </marker>
     <marker
@@ -310,14 +401,14 @@
        orient="auto"
        refY="0"
        refX="0"
-       id="TriangleOutL-9-3-6"
+       id="TriangleOutL-9-4-8-4-0"
        style="overflow:visible"
        inkscape:isstock="true">
       <path
          inkscape:connector-curvature="0"
-         id="path4327-1-1-5"
+         id="path4327-1-1-9-8-6"
          d="M 5.77,0 -2.88,5 V -5 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
+         style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.00000003pt;stroke-opacity:1"
          transform="scale(0.8)" />
     </marker>
   </defs>
@@ -328,21 +419,21 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="1"
-     inkscape:cx="433.56809"
-     inkscape:cy="282.4206"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="328.65009"
+     inkscape:cy="205.42326"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
-     inkscape:window-width="1920"
-     inkscape:window-height="1137"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
+     inkscape:window-width="3840"
+     inkscape:window-height="2031"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
      inkscape:window-maximized="1"
-     fit-margin-top="1"
-     fit-margin-left="1"
-     fit-margin-right="1"
-     fit-margin-bottom="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
      units="px" />
   <metadata
      id="metadata7">
@@ -360,312 +451,262 @@
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(117.89629,-192.1482)">
+     transform="translate(91.482322,-192.9581)">
     <rect
-       style="fill:#cccccc;fill-opacity:1;stroke:#000000;stroke-width:1.21129668;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.05102265;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="rect4136"
-       width="564.20264"
-       height="365.80341"
-       x="-21.075951"
-       y="321.69159" />
+       width="518.94897"
+       height="298.94897"
+       x="-30.956812"
+       y="253.48361" />
+    <rect
+       style="fill:#ffd5d5;fill-opacity:1;stroke:none;stroke-width:0.83021182;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-3"
+       width="440"
+       height="220"
+       x="8.5176783"
+       y="292.9581" />
     <flowRoot
        xml:space="preserve"
        id="flowRoot4138"
-       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(1.1690183,0,0,1.1690183,28.907253,-141.43255)"><flowRegion
-         id="flowRegion4140"><rect
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(1.1690183,0,0,1.1690183,55.80022,-171.31953)"><flowRegion
+         id="flowRegion4140"
+         style="fill:#ff2a2a"><rect
            id="rect4142"
            width="129.78784"
            height="31.668232"
            x="-34.519978"
            y="400.22751"
-           style="font-size:15.41801071px;fill:#000000" /></flowRegion><flowPara
+           style="font-size:15.41801071px;fill:#ff2a2a" /></flowRegion><flowPara
+         id="flowPara4144"
+         style="font-size:20.55734825px;line-height:1.25;fill:#ff2a2a">Background</flowPara><flowPara
          id="flowPara4146"
-         style="font-size:19.24691807px;line-height:1.25">Background</flowPara></flowRoot>    <rect
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:32.28859329;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58381503"
+         style="font-size:20.55734825px;line-height:1.25;fill:#ff2a2a"> </flowPara></flowRoot>    <rect
+       style="fill:#d7e3f4;fill-opacity:1;stroke:none;stroke-width:22.32431984;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58381503"
        id="rect4148"
-       width="432.17508"
-       height="243.95665"
-       x="44.027798"
-       y="384.97104" />
+       width="360"
+       height="140"
+       x="48.517677"
+       y="332.95813" />
     <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6"
-       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-size:37.45019655px;"
-       transform="matrix(0.6007979,0,0,0.6007979,156.36974,204.3766)"><flowRegion
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,124.5726,101.29422)"><flowRegion
          id="flowRegion4140-6"
-         style="font-size:37.45019655px;"><rect
+         style="fill:#0055d4"><rect
            id="rect4142-6"
            width="334.36047"
            height="80.812172"
            x="42.426407"
            y="481.62601"
-           style="font-size:37.45019655px;fill:#000000;" /></flowRegion><flowPara
+           style="font-size:40px;fill:#0055d4" /></flowRegion><flowPara
          id="flowPara4146-6"
-         style="font-size:37.45019655px;line-height:1.25;">Content item</flowPara></flowRoot>    <g
-       id="g8534"
-       transform="translate(3.75)">
-      <path
-         sodipodi:nodetypes="cc"
-         inkscape:connector-curvature="0"
-         id="path4179"
-         d="M 53.000835,594.60056 V 394.41764"
-         style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.04880464;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL);marker-end:url(#TriangleOutL)" />
-      <flowRoot
-         transform="matrix(0.6007979,0,0,0.6007979,35.985339,191.89348)"
-         style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         id="flowRoot4138-6-2"
-         xml:space="preserve"><flowRegion
-           id="flowRegion4140-6-6"><rect
-             style="font-size:20px;fill:#000000"
-             y="481.62601"
-             x="42.426407"
-             height="101.01524"
-             width="117.17769"
-             id="rect4142-6-1" /></flowRegion><flowPara
-           style="font-size:17.5px;line-height:1.25;fill:#000000"
-           id="flowPara9732">Available height</flowPara></flowRoot>    </g>
-    <g
-       id="g8545">
-      <path
-         sodipodi:nodetypes="cc"
-         inkscape:connector-curvature="0"
-         id="path4179-7"
-         d="M 56.564013,608.03247 H 464.47744"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.91225624;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2);marker-end:url(#TriangleOutL-9)" />
-    </g>
+         style="font-size:40px;line-height:1.25;fill:#0055d4">Content item</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-1"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,187.75902,280.21488)"><flowRegion
+         id="flowRegion4140-6-9"><rect
+           id="rect4142-6-0"
+           width="270.72089"
+           height="68.690361"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:25px;fill:#000000" /></flowRegion><flowPara
+         id="flowPara4146-6-2"
+         style="font-size:17.5px;line-height:1.25">Width</flowPara></flowRoot>    <path
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.93053311;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-3);marker-end:url(#TriangleOutL-0)"
+       d="M -26.831023,563.52033 H 483.32947"
+       id="path4179-8"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9);marker-end:url(#TriangleOutL-1)"
+       d="M -41.482322,547.33858 V 258.57762"
+       id="path4179-9"
+       inkscape:connector-curvature="0" />
     <flowRoot
        xml:space="preserve"
-       id="flowRoot4138-6-2-7"
+       id="flowRoot4138-6-1-7"
        style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.5748758,0,0,0.59339159,197.89365,327.81679)"><flowRegion
-         id="flowRegion4140-6-6-4"><rect
-           id="rect4142-6-1-4"
-           width="252.53812"
-           height="61.619293"
+       transform="matrix(0.6007979,0,0,0.6007979,-110.00353,107.19582)"><flowRegion
+         id="flowRegion4140-6-9-7"><rect
+           id="rect4142-6-0-5"
+           width="270.72089"
+           height="68.690361"
            x="42.426407"
            y="481.62601"
            style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
-         style="font-size:17.5px;line-height:1.25;fill:#000000"
-         id="flowPara10048">Available width</flowPara></flowRoot>    <g
-       id="g7654"
-       transform="translate(0,118.125)">
-      <flowRoot
-         transform="matrix(0.6007979,0,0,0.6007979,220.10057,300.85594)"
-         style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         id="flowRoot4138-6-1"
-         xml:space="preserve"><flowRegion
-           id="flowRegion4140-6-9"><rect
-             style="font-size:25px;fill:#000000"
-             y="481.62601"
-             x="42.426407"
-             height="68.690361"
-             width="270.72089"
-             id="rect4142-6-0" /></flowRegion><flowPara
-           style="font-size:17.5px;line-height:1.25"
-           id="flowPara4146-6-2">Width</flowPara></flowRoot>      <path
-         inkscape:connector-curvature="0"
-         id="path4179-8"
-         d="M -17.415118,583.15841 H 539.87757"
-         style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.90119678;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-3);marker-end:url(#TriangleOutL-0)" />
-    </g>
-    <g
-       id="g7868">
-      <path
-         sodipodi:nodetypes="cc"
-         inkscape:connector-curvature="0"
-         id="path4179-9"
-         d="M -34.354631,681.50532 V 326.43762"
-         style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.9011969;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9);marker-end:url(#TriangleOutL-1)" />
-      <flowRoot
-         transform="matrix(0.6007979,0,0,0.6007979,-102.8965,207.92708)"
-         style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         id="flowRoot4138-6-1-7"
-         xml:space="preserve"><flowRegion
-           id="flowRegion4140-6-9-7"><rect
-             style="font-size:17.5px;fill:#000000"
-             y="481.62601"
-             x="42.426407"
-             height="68.690361"
-             width="270.72089"
-             id="rect4142-6-0-5" /></flowRegion><flowPara
-           style="font-size:17.5px;line-height:1.25;fill:#000000"
-           id="flowPara4146-6-2-9">Height</flowPara></flowRoot>    </g>
-    <flowRoot
+         id="flowPara4146-6-2-9"
+         style="font-size:17.5px;line-height:1.25;fill:#000000">Height</flowPara></flowRoot>    <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6-3"
-       style="font-style:normal;font-weight:normal;font-size:54.09472656px;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,189.12753,-15.52439)"><flowRegion
-         id="flowRegion4140-6-67"
-         style="font-size:54.09472656px"><rect
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,138.50125,-84.786365)"><flowRegion
+         id="flowRegion4140-6-67"><rect
            id="rect4142-6-5"
            width="334.36047"
            height="80.812172"
            x="42.426407"
            y="481.62601"
-           style="font-size:54.09472656px;fill:#000000" /></flowRegion><flowPara
+           style="font-size:60px;fill:#000000" /></flowRegion><flowPara
          id="flowPara4146-6-3"
-         style="font-size:54.09472656px;line-height:1.25">Popup</flowPara></flowRoot>    <flowRoot
+         style="font-size:60px;line-height:1.25">Control</flowPara></flowRoot>    <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6-2-7-5"
-       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,193.38009,362.34499)"><flowRegion
-         id="flowRegion4140-6-6-4-6"><rect
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-18.782253,209.93493)"><flowRegion
+         id="flowRegion4140-6-6-4-6"
+         style="text-align:center;text-anchor:middle;fill:#0055d4"><rect
            id="rect4142-6-1-4-2"
            width="252.53812"
            height="61.619293"
            x="42.426407"
            y="481.62601"
-           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
-         style="font-size:17.5px;line-height:1.25;fill:#000000"
-         id="flowPara10048-9">Bottom padding</flowPara></flowRoot>    <flowRoot
+           style="font-size:17.5px;text-align:center;text-anchor:middle;fill:#0055d4" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#0055d4"
+         id="flowPara10048-9">Bottom</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#0055d4"
+         id="flowPara5290">padding</flowPara></flowRoot>    <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6-2-7-5-1"
-       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,203.99672,59.935343)"><flowRegion
-         id="flowRegion4140-6-6-4-6-2"><rect
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,324.82398,-9.0464154)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2"
+         style="fill:#0055d4"><rect
            id="rect4142-6-1-4-2-7"
-           width="252.53812"
-           height="61.619293"
+           width="71.826065"
+           height="43.785866"
            x="42.426407"
            y="481.62601"
-           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
-         style="font-size:17.5px;line-height:1.25;fill:#000000"
-         id="flowPara10048-9-0">Top padding</flowPara></flowRoot>    <flowRoot
+           style="font-size:17.5px;fill:#0055d4" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#0055d4"
+         id="flowPara10048-9-0">Top</flowPara><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#0055d4"
+         id="flowPara4830">padding</flowPara></flowRoot>    <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6-2-7-5-9"
-       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,459.4147,204.33375)"><flowRegion
-         id="flowRegion4140-6-6-4-6-3"><rect
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,398.1404,59.190638)"><flowRegion
+         id="flowRegion4140-6-6-4-6-3"
+         style="fill:#0055d4"><rect
            id="rect4142-6-1-4-2-6"
            width="81.109558"
            height="93.762154"
            x="42.426407"
            y="481.62601"
-           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
-         style="font-size:17.5px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000"
+           style="font-size:17.5px;fill:#0055d4" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#0055d4"
          id="flowPara4386">Right padding</flowPara></flowRoot>    <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6-2-7-5-9-2"
-       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,-38.128181,202.36202)"><flowRegion
-         id="flowRegion4140-6-6-4-6-3-5"><rect
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0055d4;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-40.826553,147.13311)"><flowRegion
+         id="flowRegion4140-6-6-4-6-3-5"
+         style="fill:#0055d4"><rect
            id="rect4142-6-1-4-2-6-4"
            width="81.109558"
            height="93.762154"
            x="42.426407"
            y="481.62601"
-           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
-         style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000"
-         id="flowPara4386-0">Left padding</flowPara></flowRoot>    <rect
-       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.09440184;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect4757"
-       width="763.17505"
-       height="514.7428"
-       x="-116.41159"
-       y="243.5061" />
+           style="font-size:17.5px;fill:#0055d4" /></flowRegion><flowPara
+         style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#0055d4"
+         id="flowPara4386-0">Left padding</flowPara></flowRoot>    <path
+       style="fill:#ff2a2a;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87824047;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9-6);marker-end:url(#TriangleOutL-1-1)"
+       d="M 12.916178,287.96278 V 258.98852"
+       id="path4179-9-8"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87323481;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5);marker-end:url(#TriangleOutL-9-4)"
+       d="M -25.470947,298.58445 H 3.5629489"
+       id="path4179-7-8"
+       inkscape:connector-curvature="0" />
     <flowRoot
        xml:space="preserve"
-       id="flowRoot4138-6-3-4"
-       style="font-style:normal;font-weight:normal;font-size:59.99999619px;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,175.59116,-90.52439)"><flowRegion
-         id="flowRegion4140-6-67-2"
-         style="font-size:59.99999619px"><rect
-           id="rect4142-6-5-4"
-           width="334.36047"
-           height="80.812172"
+       id="flowRoot4138-6-2-7-5-1-5"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-12.104603,-28.000512)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-9"
+         style="fill:#ff2a2a"><rect
+           id="rect4142-6-1-4-2-7-7"
+           width="66.476036"
+           height="55.080368"
            x="42.426407"
            y="481.62601"
-           style="font-size:59.99999619px;fill:#000000" /></flowRegion><flowPara
-         id="flowPara4146-6-3-0"
-         style="font-size:54.09472656px;line-height:1.25">Window</flowPara></flowRoot>    <g
-       id="g5624"
-       transform="translate(0,116.25)">
-      <path
-         sodipodi:nodetypes="cc"
-         inkscape:connector-curvature="0"
-         id="path4179-98"
-         d="M 562.38606,632.48202 V 575.7366"
-         style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.04880464;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-7);marker-end:url(#TriangleOutL-4)" />
-      <flowRoot
-         transform="matrix(0.6007979,0,0,0.6007979,549.95467,303.47098)"
-         style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         id="flowRoot4138-6-2-7-5-9-1"
-         xml:space="preserve"><flowRegion
-           id="flowRegion4140-6-6-4-6-3-2"><rect
-             style="font-size:17.5px;fill:#000000"
-             y="481.62601"
-             x="42.426407"
-             height="93.762154"
-             width="81.109558"
-             id="rect4142-6-1-4-2-6-9" /></flowRegion><flowPara
-           id="flowPara5598"
-           style="font-size:17.5px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000">Bottom margin</flowPara></flowRoot>    </g>
-    <g
-       id="g5669"
-       transform="translate(-9.0164,-96.197039)">
-      <path
-         sodipodi:nodetypes="cc"
-         inkscape:connector-curvature="0"
-         id="path4179-98-8"
-         d="M 571.40246,409.73194 V 352.98652"
-         style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.04880464;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-7-1);marker-end:url(#TriangleOutL-4-3)" />
-      <flowRoot
-         transform="matrix(0.6007979,0,0,0.6007979,558.97106,80.720903)"
-         style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         id="flowRoot4138-6-2-7-5-9-1-8"
-         xml:space="preserve"><flowRegion
-           id="flowRegion4140-6-6-4-6-3-2-8"><rect
-             style="font-size:17.5px;fill:#000000"
-             y="481.62601"
-             x="42.426407"
-             height="93.762154"
-             width="81.109558"
-             id="rect4142-6-1-4-2-6-9-2" /></flowRegion><flowPara
-           id="flowPara5598-6"
-           style="font-size:17.5px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000">Top margin</flowPara></flowRoot>    </g>
-    <g
-       id="g7367"
-       transform="translate(32.877167,129.04286)">
-      <path
-         transform="translate(-32.87717,-4.3906312)"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.93839908;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-4);marker-end:url(#TriangleOutL-9-3)"
-         d="m 558.40434,364.18736 h 70.4038"
-         id="path4179-7-5"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="cc" />
-      <flowRoot
-         transform="matrix(0.6007979,0,0,0.6007979,510.85405,81.658403)"
-         style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         id="flowRoot4138-6-2-7-5-9-1-8-0"
-         xml:space="preserve"><flowRegion
-           id="flowRegion4140-6-6-4-6-3-2-8-5"><rect
-             style="font-size:17.5px;fill:#000000"
-             y="481.62601"
-             x="42.426407"
-             height="93.762154"
-             width="81.109558"
-             id="rect4142-6-1-4-2-6-9-2-6" /></flowRegion><flowPara
-           id="flowPara5598-6-1"
-           style="font-size:17.5px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000">Right margin</flowPara></flowRoot>    </g>
+           style="font-size:17.5px;fill:#ff2a2a" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#ff2a2a"
+         id="flowPara11237">Top inset</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-9-2-3"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,-59.558586,16.047754)"><flowRegion
+         id="flowRegion4140-6-6-4-6-3-5-8"
+         style="fill:#ff2a2a"><rect
+           id="rect4142-6-1-4-2-6-4-8"
+           width="75.759529"
+           height="93.167732"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#ff2a2a" /></flowRegion><flowPara
+         style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ff2a2a"
+         id="flowPara4386-0-3">Left inset</flowPara></flowRoot>    <path
+       style="fill:#0055d4;fill-rule:evenodd;stroke:#0055d4;stroke-width:0.97500122;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-1);marker-end:url(#TriangleOutL-96)"
+       d="M 402.28756,327.38769 V 259.50991"
+       id="path4179-3"
+       inkscape:connector-curvature="0" />
     <path
-       sodipodi:nodetypes="cc"
-       inkscape:connector-curvature="0"
-       id="path4179-7-5-2"
-       d="m -96.90814,305.30865 h 70.4038"
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.93839908;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-4-7);marker-end:url(#TriangleOutL-9-3-6)" />
+       style="fill:#ff2a2a;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87794411;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-9-6-4);marker-end:url(#TriangleOutL-1-1-6)"
+       d="M 444.22783,546.94146 V 517.98675"
+       id="path4179-9-8-9"
+       inkscape:connector-curvature="0" />
     <flowRoot
        xml:space="preserve"
-       id="flowRoot4138-6-2-7-5-9-1-8-0-4"
-       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       transform="matrix(0.6007979,0,0,0.6007979,-111.58126,-21.57968)"><flowRegion
-         id="flowRegion4140-6-6-4-6-3-2-8-5-3"><rect
-           id="rect4142-6-1-4-2-6-9-2-6-0"
-           width="81.109558"
-           height="93.762154"
+       id="flowRoot4138-6-2-7-5-1-5-0"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,364.36984,230.98794)"><flowRegion
+         id="flowRegion4140-6-6-4-6-2-9-6"
+         style="fill:#ff2a2a"><rect
+           id="rect4142-6-1-4-2-7-7-8"
+           width="91.442841"
+           height="44.974762"
            x="42.426407"
            y="481.62601"
-           style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
-         style="font-size:17.5px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000"
-         id="flowPara5598-6-1-4">Left margin</flowPara></flowRoot>  </g>
+           style="font-size:17.5px;fill:#ff2a2a" /></flowRegion><flowPara
+         style="font-size:17.5px;line-height:1.25;text-align:center;text-anchor:middle;fill:#ff2a2a"
+         id="flowPara11237-7">Bottom inset</flowPara></flowRoot>    <path
+       style="fill:#ff2a2a;fill-opacity:1;fill-rule:evenodd;stroke:#ff2a2a;stroke-width:0.87314719;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6);marker-end:url(#TriangleOutL-9-4-8)"
+       d="m 453.47561,508.6218 h 29.02808"
+       id="path4179-7-8-6"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4138-6-2-7-5-9-2-3-0"
+       style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff2a2a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.6007979,0,0,0.6007979,419.24022,186.32002)"><flowRegion
+         id="flowRegion4140-6-6-4-6-3-5-8-7"
+         style="fill:#ff2a2a"><rect
+           id="rect4142-6-1-4-2-6-4-8-0"
+           width="75.759529"
+           height="93.167732"
+           x="42.426407"
+           y="481.62601"
+           style="font-size:17.5px;fill:#ff2a2a" /></flowRegion><flowPara
+         style="font-size:17.02554321px;line-height:125%;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ff2a2a"
+         id="flowPara3807">Right inset</flowPara></flowRoot>    <path
+       style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.05938387;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6-9);marker-end:url(#TriangleOutL-9-4-8-4)"
+       d="m 414.52522,338.31524 h 66.93934"
+       id="path4179-7-8-6-0"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#0055d4;fill-rule:evenodd;stroke:#0055d4;stroke-width:0.97513783;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-1-7);marker-end:url(#TriangleOutL-96-7)"
+       d="M 54.589106,546.37854 V 478.48175"
+       id="path4179-3-9"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#0055d4;fill-opacity:1;fill-rule:evenodd;stroke:#0055d4;stroke-width:1.05900466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#TriangleInL-2-5-6-9-1);marker-end:url(#TriangleOutL-9-4-8-4-0)"
+       d="M -24.417773,466.88667 H 42.473651"
+       id="path4179-7-8-6-0-0"
+       inkscape:connector-curvature="0" />
+  </g>
 </svg>
diff --git a/src/quicktemplates2/qquickpopup.cpp b/src/quicktemplates2/qquickpopup.cpp
index 8c0624f2..08b3ee63 100644
--- a/src/quicktemplates2/qquickpopup.cpp
+++ b/src/quicktemplates2/qquickpopup.cpp
@@ -110,14 +110,42 @@ QT_BEGIN_NAMESPACE
     \image qtquickcontrols2-popup.png
 
     The \l implicitWidth and \l implicitHeight of a popup are typically based
-    on the implicit sizes of the background and the content item plus any
-    \l padding. These properties determine how large the popup will be when no
+    on the implicit sizes of the background and the content item plus any insets
+    and paddings. These properties determine how large the popup will be when no
     explicit \l width or \l height is specified.
 
+    The geometry of the \l contentItem is determined by the padding. The following
+    example reserves 10px padding between the boundaries of the popup and its content:
+
+    \code
+    Popup {
+        padding: 10
+
+        contentItem: Text {
+            text: "Content"
+        }
+    }
+    \endcode
+
     The \l background item fills the entire width and height of the popup,
-    unless an explicit size has been given for it.
+    unless insets or an explicit size have been given for it.
+
+    Negative insets can be used to make the background larger than the popup.
+    The following example uses negative insets to place a shadow outside the
+    popup's boundaries:
+
+    \code
+    Popup {
+        topInset: -2
+        leftInset: -2
+        rightInset: -6
+        bottomInset: -6
 
-    The geometry of the \l contentItem is determined by the \l padding.
+        background: BorderImage {
+            source: ":/images/shadowed-background.png"
+        }
+    }
+    \endcode
 
     \section1 Popup Sizing
 
@@ -2258,6 +2286,110 @@ qreal QQuickPopup::implicitBackgroundHeight() const
     return d->popupItem->implicitBackgroundHeight();
 }
 
+/*!
+    \since QtQuick.Controls 2.5 (Qt 5.12)
+    \qmlproperty real QtQuick.Controls::Popup::topInset
+
+    This property holds the top inset for the background.
+
+    \sa {Popup Layout}, bottomInset
+*/
+qreal QQuickPopup::topInset() const
+{
+    Q_D(const QQuickPopup);
+    return d->popupItem->topInset();
+}
+
+void QQuickPopup::setTopInset(qreal inset)
+{
+    Q_D(QQuickPopup);
+    d->popupItem->setTopInset(inset);
+}
+
+void QQuickPopup::resetTopInset()
+{
+    Q_D(QQuickPopup);
+    d->popupItem->resetTopInset();
+}
+
+/*!
+    \since QtQuick.Controls 2.5 (Qt 5.12)
+    \qmlproperty real QtQuick.Controls::Popup::leftInset
+
+    This property holds the left inset for the background.
+
+    \sa {Popup Layout}, rightInset
+*/
+qreal QQuickPopup::leftInset() const
+{
+    Q_D(const QQuickPopup);
+    return d->popupItem->leftInset();
+}
+
+void QQuickPopup::setLeftInset(qreal inset)
+{
+    Q_D(QQuickPopup);
+    d->popupItem->setLeftInset(inset);
+}
+
+void QQuickPopup::resetLeftInset()
+{
+    Q_D(QQuickPopup);
+    d->popupItem->resetLeftInset();
+}
+
+/*!
+    \since QtQuick.Controls 2.5 (Qt 5.12)
+    \qmlproperty real QtQuick.Controls::Popup::rightInset
+
+    This property holds the right inset for the background.
+
+    \sa {Popup Layout}, leftInset
+*/
+qreal QQuickPopup::rightInset() const
+{
+    Q_D(const QQuickPopup);
+    return d->popupItem->rightInset();
+}
+
+void QQuickPopup::setRightInset(qreal inset)
+{
+    Q_D(QQuickPopup);
+    d->popupItem->setRightInset(inset);
+}
+
+void QQuickPopup::resetRightInset()
+{
+    Q_D(QQuickPopup);
+    d->popupItem->resetRightInset();
+}
+
+/*!
+    \since QtQuick.Controls 2.5 (Qt 5.12)
+    \qmlproperty real QtQuick.Controls::Popup::bottomInset
+
+    This property holds the bottom inset for the background.
+
+    \sa {Popup Layout}, topInset
+*/
+qreal QQuickPopup::bottomInset() const
+{
+    Q_D(const QQuickPopup);
+    return d->popupItem->bottomInset();
+}
+
+void QQuickPopup::setBottomInset(qreal inset)
+{
+    Q_D(QQuickPopup);
+    d->popupItem->setBottomInset(inset);
+}
+
+void QQuickPopup::resetBottomInset()
+{
+    Q_D(QQuickPopup);
+    d->popupItem->resetBottomInset();
+}
+
 bool QQuickPopup::filtersChildMouseEvents() const
 {
     Q_D(const QQuickPopup);
@@ -2540,6 +2672,18 @@ void QQuickPopup::spacingChange(qreal newSpacing, qreal oldSpacing)
     emit spacingChanged();
 }
 
+void QQuickPopup::insetChange(const QMarginsF &newInset, const QMarginsF &oldInset)
+{
+    if (!qFuzzyCompare(newInset.top(), oldInset.top()))
+        emit topInsetChanged();
+    if (!qFuzzyCompare(newInset.left(), oldInset.left()))
+        emit leftInsetChanged();
+    if (!qFuzzyCompare(newInset.right(), oldInset.right()))
+        emit rightInsetChanged();
+    if (!qFuzzyCompare(newInset.bottom(), oldInset.bottom()))
+        emit bottomInsetChanged();
+}
+
 QFont QQuickPopup::defaultFont() const
 {
     return QQuickTheme::themeFont(QQuickTheme::System);
diff --git a/src/quicktemplates2/qquickpopup_p.h b/src/quicktemplates2/qquickpopup_p.h
index 1d232e92..12dbd247 100644
--- a/src/quicktemplates2/qquickpopup_p.h
+++ b/src/quicktemplates2/qquickpopup_p.h
@@ -130,6 +130,10 @@ class Q_QUICKTEMPLATES2_PRIVATE_EXPORT QQuickPopup : public QObject, public QQml
     Q_PROPERTY(qreal implicitContentHeight READ implicitContentHeight NOTIFY implicitContentHeightChanged FINAL REVISION 5)
     Q_PROPERTY(qreal implicitBackgroundWidth READ implicitBackgroundWidth NOTIFY implicitBackgroundWidthChanged FINAL REVISION 5)
     Q_PROPERTY(qreal implicitBackgroundHeight READ implicitBackgroundHeight NOTIFY implicitBackgroundHeightChanged FINAL REVISION 5)
+    Q_PROPERTY(qreal topInset READ topInset WRITE setTopInset RESET resetTopInset NOTIFY topInsetChanged FINAL REVISION 5)
+    Q_PROPERTY(qreal leftInset READ leftInset WRITE setLeftInset RESET resetLeftInset NOTIFY leftInsetChanged FINAL REVISION 5)
+    Q_PROPERTY(qreal rightInset READ rightInset WRITE setRightInset RESET resetRightInset NOTIFY rightInsetChanged FINAL REVISION 5)
+    Q_PROPERTY(qreal bottomInset READ bottomInset WRITE setBottomInset RESET resetBottomInset NOTIFY bottomInsetChanged FINAL REVISION 5)
     Q_CLASSINFO("DeferredPropertyNames", "background,contentItem")
     Q_CLASSINFO("DefaultProperty", "contentData")
 
@@ -325,6 +329,22 @@ public:
     qreal implicitBackgroundWidth() const;
     qreal implicitBackgroundHeight() const;
 
+    qreal topInset() const;
+    void setTopInset(qreal inset);
+    void resetTopInset();
+
+    qreal leftInset() const;
+    void setLeftInset(qreal inset);
+    void resetLeftInset();
+
+    qreal rightInset() const;
+    void setRightInset(qreal inset);
+    void resetRightInset();
+
+    qreal bottomInset() const;
+    void setBottomInset(qreal inset);
+    void resetBottomInset();
+
 public Q_SLOTS:
     void open();
     void close();
@@ -387,6 +407,10 @@ Q_SIGNALS:
     Q_REVISION(5) void implicitContentHeightChanged();
     Q_REVISION(5) void implicitBackgroundWidthChanged();
     Q_REVISION(5) void implicitBackgroundHeightChanged();
+    Q_REVISION(5) void topInsetChanged();
+    Q_REVISION(5) void leftInsetChanged();
+    Q_REVISION(5) void rightInsetChanged();
+    Q_REVISION(5) void bottomInsetChanged();
 
 protected:
     QQuickPopup(QQuickPopupPrivate &dd, QObject *parent);
@@ -424,6 +448,7 @@ protected:
     virtual void paddingChange(const QMarginsF &newPadding, const QMarginsF &oldPadding);
     virtual void paletteChange(const QPalette &newPalette, const QPalette &oldPalette);
     virtual void spacingChange(qreal newSpacing, qreal oldSpacing);
+    virtual void insetChange(const QMarginsF &newInset, const QMarginsF &oldInset);
 
     virtual QFont defaultFont() const;
     virtual QPalette defaultPalette() const;