Control: add support for background insets

[ChangeLog][Controls][Control] 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: Id8228d32f6a5fffeb771964a153ee062a5a083b5
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

6 files changed, 877 insertions, 158 deletions

diff --git a/src/imports/controls/doc/images/qtquickcontrols2-control.png b/src/imports/controls/doc/images/qtquickcontrols2-control.png
index 26babc9f..71840a49 100644
--- a/src/imports/controls/doc/images/qtquickcontrols2-control.png
+++ b/src/imports/controls/doc/images/qtquickcontrols2-control.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-control.svg b/src/imports/controls/doc/images/qtquickcontrols2-control.svg
index b0ffae7c..e39f3dce 100644
--- a/src/imports/controls/doc/images/qtquickcontrols2-control.svg
+++ b/src/imports/controls/doc/images/qtquickcontrols2-control.svg
@@ -9,16 +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="679.31317"
-   height="357.84125"
-   viewBox="0 0 679.31314 357.84124"
+   width="640"
+   height="420"
+   viewBox="0 0 639.99997 419.99999"
    id="svg2"
    version="1.1"
-   inkscape:version="0.91 r13725"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
    sodipodi:docname="qtquickcontrols2-control.svg"
-   inkscape:export-filename="/home/mitch/Dropbox/qtquickcontrols2-control.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90">
+   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
@@ -31,9 +31,9 @@
        inkscape:isstock="true">
       <path
          id="path4327"
-         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
-         transform="scale(0.8,0.8)"
+         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
@@ -46,9 +46,9 @@
        inkscape:isstock="true">
       <path
          id="path4318"
-         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
-         transform="scale(-0.8,-0.8)"
+         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
@@ -61,8 +61,8 @@
        inkscape:isstock="true">
       <path
          id="path4191"
-         d="M 0,0 5,-5 -12.5,0 5,5 0,0 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
          transform="matrix(0.4,0,0,0.4,4,0)"
          inkscape:connector-curvature="0" />
     </marker>
@@ -78,7 +78,7 @@
          id="path4212"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
          d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
-         transform="scale(-0.6,-0.6)"
+         transform="scale(-0.6)"
          inkscape:connector-curvature="0" />
     </marker>
     <marker
@@ -92,9 +92,9 @@
       <path
          inkscape:connector-curvature="0"
          id="path4318-4"
-         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
-         transform="scale(-0.8,-0.8)" />
+         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"
@@ -107,9 +107,9 @@
       <path
          inkscape:connector-curvature="0"
          id="path4327-1"
-         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
-         transform="scale(0.8,0.8)" />
+         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"
@@ -121,9 +121,9 @@
        inkscape:isstock="true">
       <path
          id="path4318-9"
-         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
-         transform="scale(-0.8,-0.8)"
+         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
@@ -136,9 +136,9 @@
        inkscape:isstock="true">
       <path
          id="path4327-5"
-         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
-         transform="scale(0.8,0.8)"
+         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
@@ -151,9 +151,9 @@
        inkscape:isstock="true">
       <path
          id="path4318-2"
-         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
-         transform="scale(-0.8,-0.8)"
+         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
@@ -166,11 +166,251 @@
        inkscape:isstock="true">
       <path
          id="path4327-2"
-         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
-         transform="scale(0.8,0.8)"
+         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-9-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4318-2-2"
+         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"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-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="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-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)" />
+    </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>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-96"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-4"
+         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>
+    <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>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5-6"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2"
+         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="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9"
+         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-2-5-6-9"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2-6"
+         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="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>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-96-7"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4327-4-4"
+         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>
+    <marker
+       inkscape:stockid="TriangleInL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleInL-2-5-6-9-1"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4318-4-7-2-6-7"
+         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="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9-4-8-4-0"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4327-1-1-9-8-6"
+         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>
   </defs>
   <sodipodi:namedview
      id="base"
@@ -179,16 +419,16 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="2.8"
-     inkscape:cx="370.99138"
-     inkscape:cy="234.56612"
+     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="3742"
-     inkscape:window-height="2124"
-     inkscape:window-x="98"
-     inkscape:window-y="36"
+     inkscape:window-width="3840"
+     inkscape:window-height="2031"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
      inkscape:window-maximized="1"
      fit-margin-top="0"
      fit-margin-left="0"
@@ -203,7 +443,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -211,88 +451,63 @@
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(91.482322,-255.11685)">
+     transform="translate(91.482322,-192.9581)">
     <rect
-       style="fill:#cccccc;fill-opacity:1;stroke:#000000;stroke-width:1;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.41473"
-       height="248.82799"
-       x="-30.289024"
-       y="321.69858" />
+       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;font-size:15.41801071px;line-height:125%;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,19.800223,-141.31953)"><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;fill:#000000">Background</flowPara><flowPara
-         id="flowPara4146" /></flowRoot>    <rect
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:27.60000038;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58381503"
+         style="font-size:20.55734825px;line-height:1.25;fill:#ff2a2a">Background</flowPara><flowPara
+         id="flowPara4146"
+         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="464.22452"
-       height="165.94499"
-       x="18.895706"
-       y="364.74274" />
+       width="360"
+       height="140"
+       x="48.517677"
+       y="332.95813" />
     <flowRoot
        xml:space="preserve"
        id="flowRoot4138-6"
-       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;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,144.03104,146.23557)"><flowRegion
-         id="flowRegion4140-6"><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,124.5726,101.29422)"><flowRegion
+         id="flowRegion4140-6"
+         style="fill:#0055d4"><rect
            id="rect4142-6"
            width="334.36047"
            height="80.812172"
            x="42.426407"
            y="481.62601"
-           style="font-size:40px;fill:#000000" /></flowRegion><flowPara
-         id="flowPara4146-6">Content item</flowPara></flowRoot>    <path
-       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)"
-       d="m 27.018805,516.90108 0,-133.62042"
-       id="path4179"
-       inkscape:connector-curvature="0" />
-    <path
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.93839902;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)"
-       d="m 26.776662,538.68728 451.028788,0"
-       id="path4179-7"
-       inkscape:connector-curvature="0" />
-    <flowRoot
-       xml:space="preserve"
-       id="flowRoot4138-6-2"
-       style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;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,10.003309,144.31674)"><flowRegion
-         id="flowRegion4140-6-6"><rect
-           id="rect4142-6-1"
-           width="117.17769"
-           height="101.01524"
-           x="42.426407"
-           y="481.62601"
-           style="font-size:20px;fill:#000000" /></flowRegion><flowPara
-         id="flowPara9732"
-         style="font-size:17.5px;fill:#000000">Available height</flowPara></flowRoot>    <flowRoot
-       xml:space="preserve"
-       id="flowRoot4138-6-2-7"
-       style="font-style:normal;font-weight:normal;font-size:17.5px;line-height:125%;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,10.811464,253.07573)"><flowRegion
-         id="flowRegion4140-6-6-4"><rect
-           id="rect4142-6-1-4"
-           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;fill:#000000"
-         id="flowPara10048">Available width</flowPara></flowRoot>    <flowRoot
+           style="font-size:40px;fill:#0055d4" /></flowRegion><flowPara
+         id="flowPara4146-6"
+         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;font-size:25px;line-height:125%;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,210.99354,300.96896)"><flowRegion
+       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"
@@ -301,21 +516,21 @@
            y="481.62601"
            style="font-size:25px;fill:#000000" /></flowRegion><flowPara
          id="flowPara4146-6-2"
-         style="font-size:17.5px">Width</flowPara></flowRoot>    <path
-       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)"
-       d="m -26.522148,583.27143 557.292688,0"
+         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: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)"
-       d="m -43.461661,566.30584 0,-239.7552"
+       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-1-7"
-       style="font-style:normal;font-weight:normal;font-size:17.5px;line-height:125%;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,-112.00353,150.83655)"><flowRegion
+       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
          id="flowRegion4140-6-9-7"><rect
            id="rect4142-6-0-5"
            width="270.72089"
@@ -324,11 +539,11 @@
            y="481.62601"
            style="font-size:17.5px;fill:#000000" /></flowRegion><flowPara
          id="flowPara4146-6-2-9"
-         style="font-size:17.5px;fill:#000000">Height</flowPara></flowRoot>    <flowRoot
+         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:60px;line-height:125%;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,156.72375,-24.786365)"><flowRegion
+       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"
@@ -336,57 +551,162 @@
            x="42.426407"
            y="481.62601"
            style="font-size:60px;fill:#000000" /></flowRegion><flowPara
-         id="flowPara4146-6-3">Control</flowPara></flowRoot>    <flowRoot
+         id="flowPara4146-6-3"
+         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;font-size:17.5px;line-height:125%;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,186.57489,257.45801)"><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;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;font-size:17.5px;line-height:125%;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.9747,48.798368)"><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;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;font-size:17.5px;line-height:125%;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,457.80767,148.11921)"><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;font-size:17.5px;line-height:125%;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,-54.735211,151.06168)"><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>  </g>
+           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-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: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
+       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-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:#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/qquickcontrol.cpp b/src/quicktemplates2/qquickcontrol.cpp
index de68b4ef..8b571612 100644
--- a/src/quicktemplates2/qquickcontrol.cpp
+++ b/src/quicktemplates2/qquickcontrol.cpp
@@ -76,15 +76,48 @@ QT_BEGIN_NAMESPACE
 
     The \l {Item::}{implicitWidth} and \l {Item::}{implicitHeight} of a control
     are typically based on the implicit sizes of the background and the content
-    item plus any \l {Control::}{padding}. These properties determine how large
+    item plus any insets and paddings. These properties determine how large
     the control will be when no explicit \l {Item::}{width} or
     \l {Item::}{height} is specified.
 
+    The geometry of the \l {Control::}{contentItem} is determined by the padding.
+    The following example reserves 10px padding between the boundaries of the
+    control and its content:
+
+    \code
+    Control {
+        padding: 10
+
+        contentItem: Text {
+            text: "Content"
+        }
+    }
+    \endcode
+
     The \l {Control::}{background} item fills the entire width and height of the
-    control, unless an explicit size has been given for it.
+    control, unless insets or an explicit size have been given for it. Background
+    insets are useful for extending the touchable/interactive area of a control
+    without affecting its visual size. This is often used on touch devices to
+    ensure that a control is not too small to be interacted with by the user.
+    Insets affect the size of the control, and hence will affect how much space
+    they take up in a layout, for example.
 
-    The geometry of the \l {Control::}{contentItem} is determined by the
-    padding.
+    Negative insets can be used to make the background larger than the control.
+    The following example uses negative insets to place a shadow outside the
+    control's boundaries:
+
+    \code
+    Control {
+        topInset: -2
+        leftInset: -2
+        rightInset: -6
+        bottomInset: -6
+
+        background: BorderImage {
+            source: ":/images/shadowed-background.png"
+        }
+    }
+    \endcode
 
     \section1 Event Handling
 
@@ -110,10 +143,18 @@ QQuickControlPrivate::ExtraData::ExtraData()
       hasRightPadding(false),
       hasBottomPadding(false),
       hasBaselineOffset(false),
+      hasTopInset(false),
+      hasLeftInset(false),
+      hasRightInset(false),
+      hasBottomInset(false),
       topPadding(0),
       leftPadding(0),
       rightPadding(0),
-      bottomPadding(0)
+      bottomPadding(0),
+      topInset(0),
+      leftInset(0),
+      rightInset(0),
+      bottomInset(0)
 {
 }
 
@@ -306,19 +347,71 @@ void QQuickControlPrivate::setVerticalPadding(qreal value, bool reset)
     }
 }
 
-void QQuickControlPrivate::resizeBackground()
+void QQuickControlPrivate::setTopInset(qreal value, bool reset)
 {
     Q_Q(QQuickControl);
-    if (background) {
-        QQuickItemPrivate *p = QQuickItemPrivate::get(background);
-        if (!p->widthValid && qFuzzyIsNull(background->x())) {
-            background->setWidth(q->width());
-            p->widthValid = false;
-        }
-        if (!p->heightValid && qFuzzyIsNull(background->y())) {
-            background->setHeight(q->height());
-            p->heightValid = false;
-        }
+    const QMarginsF oldInset = getInset();
+    extra.value().topInset = value;
+    extra.value().hasTopInset = !reset;
+    if (!qFuzzyCompare(oldInset.top(), value)) {
+        emit q->topInsetChanged();
+        q->insetChange(getInset(), oldInset);
+    }
+}
+
+void QQuickControlPrivate::setLeftInset(qreal value, bool reset)
+{
+    Q_Q(QQuickControl);
+    const QMarginsF oldInset = getInset();
+    extra.value().leftInset = value;
+    extra.value().hasLeftInset = !reset;
+    if (!qFuzzyCompare(oldInset.left(), value)) {
+        emit q->leftInsetChanged();
+        q->insetChange(getInset(), oldInset);
+    }
+}
+
+void QQuickControlPrivate::setRightInset(qreal value, bool reset)
+{
+    Q_Q(QQuickControl);
+    const QMarginsF oldInset = getInset();
+    extra.value().rightInset = value;
+    extra.value().hasRightInset = !reset;
+    if (!qFuzzyCompare(oldInset.right(), value)) {
+        emit q->rightInsetChanged();
+        q->insetChange(getInset(), oldInset);
+    }
+}
+
+void QQuickControlPrivate::setBottomInset(qreal value, bool reset)
+{
+    Q_Q(QQuickControl);
+    const QMarginsF oldInset = getInset();
+    extra.value().bottomInset = value;
+    extra.value().hasBottomInset = !reset;
+    if (!qFuzzyCompare(oldInset.bottom(), value)) {
+        emit q->bottomInsetChanged();
+        q->insetChange(getInset(), oldInset);
+    }
+}
+
+void QQuickControlPrivate::resizeBackground()
+{
+    if (!background)
+        return;
+
+    QQuickItemPrivate *p = QQuickItemPrivate::get(background);
+    if ((!p->widthValid && qFuzzyIsNull(background->x()))
+            || (extra.isAllocated() && (extra->hasLeftInset || extra->hasRightInset))) {
+        background->setX(getLeftInset());
+        background->setWidth(width - getLeftInset() - getRightInset());
+        p->widthValid = false;
+    }
+    if ((!p->heightValid && qFuzzyIsNull(background->y()))
+            || (extra.isAllocated() && (extra->hasTopInset || extra->hasBottomInset))) {
+        background->setY(getTopInset());
+        background->setHeight(height - getTopInset() - getBottomInset());
+        p->heightValid = false;
     }
 }
 
@@ -1691,7 +1784,8 @@ void QQuickControl::resetVerticalPadding()
 
     \code
     Control {
-        implicitWidth: Math.max(implicitBackgroundWidth, implicitContentWidth + leftPadding + rightPadding)
+        implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                                implicitContentWidth + leftPadding + rightPadding)
     }
     \endcode
 
@@ -1718,7 +1812,8 @@ qreal QQuickControl::implicitContentWidth() const
 
     \code
     Control {
-        implicitHeight: Math.max(implicitBackgroundHeight, implicitContentHeight + topPadding + bottomPadding)
+        implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                                 implicitContentHeight + topPadding + bottomPadding)
     }
     \endcode
 
@@ -1744,7 +1839,8 @@ qreal QQuickControl::implicitContentHeight() const
 
     \code
     Control {
-        implicitWidth: Math.max(implicitBackgroundWidth, implicitContentWidth + leftPadding + rightPadding)
+        implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                                implicitContentWidth + leftPadding + rightPadding)
     }
     \endcode
 
@@ -1772,7 +1868,8 @@ qreal QQuickControl::implicitBackgroundWidth() const
 
     \code
     Control {
-        implicitHeight: Math.max(implicitBackgroundHeight, implicitContentHeight + topPadding + bottomPadding)
+        implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                                 implicitContentHeight + topPadding + bottomPadding)
     }
     \endcode
 
@@ -1786,6 +1883,110 @@ qreal QQuickControl::implicitBackgroundHeight() const
     return d->background->implicitHeight();
 }
 
+/*!
+    \since QtQuick.Controls 2.5 (Qt 5.12)
+    \qmlproperty real QtQuick.Controls::Control::topInset
+
+    This property holds the top inset for the background.
+
+    \sa {Control Layout}, bottomInset
+*/
+qreal QQuickControl::topInset() const
+{
+    Q_D(const QQuickControl);
+    return d->getTopInset();
+}
+
+void QQuickControl::setTopInset(qreal inset)
+{
+    Q_D(QQuickControl);
+    d->setTopInset(inset);
+}
+
+void QQuickControl::resetTopInset()
+{
+    Q_D(QQuickControl);
+    d->setTopInset(0, true);
+}
+
+/*!
+    \since QtQuick.Controls 2.5 (Qt 5.12)
+    \qmlproperty real QtQuick.Controls::Control::leftInset
+
+    This property holds the left inset for the background.
+
+    \sa {Control Layout}, rightInset
+*/
+qreal QQuickControl::leftInset() const
+{
+    Q_D(const QQuickControl);
+    return d->getLeftInset();
+}
+
+void QQuickControl::setLeftInset(qreal inset)
+{
+    Q_D(QQuickControl);
+    d->setLeftInset(inset);
+}
+
+void QQuickControl::resetLeftInset()
+{
+    Q_D(QQuickControl);
+    d->setLeftInset(0, true);
+}
+
+/*!
+    \since QtQuick.Controls 2.5 (Qt 5.12)
+    \qmlproperty real QtQuick.Controls::Control::rightInset
+
+    This property holds the right inset for the background.
+
+    \sa {Control Layout}, leftInset
+*/
+qreal QQuickControl::rightInset() const
+{
+    Q_D(const QQuickControl);
+    return d->getRightInset();
+}
+
+void QQuickControl::setRightInset(qreal inset)
+{
+    Q_D(QQuickControl);
+    d->setRightInset(inset);
+}
+
+void QQuickControl::resetRightInset()
+{
+    Q_D(QQuickControl);
+    d->setRightInset(0, true);
+}
+
+/*!
+    \since QtQuick.Controls 2.5 (Qt 5.12)
+    \qmlproperty real QtQuick.Controls::Control::bottomInset
+
+    This property holds the bottom inset for the background.
+
+    \sa {Control Layout}, topInset
+*/
+qreal QQuickControl::bottomInset() const
+{
+    Q_D(const QQuickControl);
+    return d->getBottomInset();
+}
+
+void QQuickControl::setBottomInset(qreal inset)
+{
+    Q_D(QQuickControl);
+    d->setBottomInset(inset);
+}
+
+void QQuickControl::resetBottomInset()
+{
+    Q_D(QQuickControl);
+    d->setBottomInset(0, true);
+}
+
 void QQuickControl::classBegin()
 {
     Q_D(QQuickControl);
@@ -2005,6 +2206,14 @@ void QQuickControl::paletteChange(const QPalette &newPalette, const QPalette &ol
     Q_UNUSED(oldPalette);
 }
 
+void QQuickControl::insetChange(const QMarginsF &newInset, const QMarginsF &oldInset)
+{
+    Q_D(QQuickControl);
+    Q_UNUSED(newInset);
+    Q_UNUSED(oldInset);
+    d->resizeBackground();
+}
+
 #if QT_CONFIG(accessibility)
 QAccessible::Role QQuickControl::accessibleRole() const
 {
diff --git a/src/quicktemplates2/qquickcontrol_p.h b/src/quicktemplates2/qquickcontrol_p.h
index 5716a725..a38e34f9 100644
--- a/src/quicktemplates2/qquickcontrol_p.h
+++ b/src/quicktemplates2/qquickcontrol_p.h
@@ -89,6 +89,10 @@ class Q_QUICKTEMPLATES2_PRIVATE_EXPORT QQuickControl : public QQuickItem
     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")
 
 public:
@@ -180,6 +184,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();
+
 Q_SIGNALS:
     void fontChanged();
     void availableWidthChanged();
@@ -210,6 +230,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:
     virtual QFont defaultFont() const;
@@ -253,6 +277,7 @@ protected:
     virtual void contentItemChange(QQuickItem *newItem, QQuickItem *oldItem);
     virtual void localeChange(const QLocale &newLocale, const QLocale &oldLocale);
     virtual void paletteChange(const QPalette &newPalette, const QPalette &oldPalette);
+    virtual void insetChange(const QMarginsF &newInset, const QMarginsF &oldInset);
 
 #if QT_CONFIG(accessibility)
     virtual QAccessible::Role accessibleRole() const;
diff --git a/src/quicktemplates2/qquickcontrol_p_p.h b/src/quicktemplates2/qquickcontrol_p_p.h
index f1873da9..757452a6 100644
--- a/src/quicktemplates2/qquickcontrol_p_p.h
+++ b/src/quicktemplates2/qquickcontrol_p_p.h
@@ -107,6 +107,17 @@ public:
     void setHorizontalPadding(qreal value, bool reset = false);
     void setVerticalPadding(qreal value, bool reset = false);
 
+    inline QMarginsF getInset() const { return QMarginsF(getLeftInset(), getTopInset(), getRightInset(), getBottomInset()); }
+    inline qreal getTopInset() const { return extra.isAllocated() ? extra->topInset : 0; }
+    inline qreal getLeftInset() const { return extra.isAllocated() ? extra->leftInset : 0; }
+    inline qreal getRightInset() const { return extra.isAllocated() ? extra->rightInset : 0; }
+    inline qreal getBottomInset() const { return extra.isAllocated() ? extra->bottomInset : 0; }
+
+    void setTopInset(qreal value, bool reset = false);
+    void setLeftInset(qreal value, bool reset = false);
+    void setRightInset(qreal value, bool reset = false);
+    void setBottomInset(qreal value, bool reset = false);
+
     void resizeBackground();
     virtual void resizeContent();
 
@@ -180,10 +191,18 @@ public:
         bool hasRightPadding;
         bool hasBottomPadding;
         bool hasBaselineOffset;
+        bool hasTopInset;
+        bool hasLeftInset;
+        bool hasRightInset;
+        bool hasBottomInset;
         qreal topPadding;
         qreal leftPadding;
         qreal rightPadding;
         qreal bottomPadding;
+        qreal topInset;
+        qreal leftInset;
+        qreal rightInset;
+        qreal bottomInset;
         QFont requestedFont;
         QPalette requestedPalette;
     };
diff --git a/tests/auto/controls/data/tst_control.qml b/tests/auto/controls/data/tst_control.qml
index c6158a3e..e5a7d093 100644
--- a/tests/auto/controls/data/tst_control.qml
+++ b/tests/auto/controls/data/tst_control.qml
@@ -1262,4 +1262,150 @@ TestCase {
         compare(control.baselineOffset, 0)
         compare(baselineSpy.count, 6)
     }
+
+    function test_inset() {
+        var control = createTemporaryObject(component, testCase, {background: rectangle.createObject(control)})
+        verify(control)
+
+        var topInsetSpy = createTemporaryObject(signalSpy, testCase, {target: control, signalName: "topInsetChanged"})
+        verify(topInsetSpy.valid)
+
+        var leftInsetSpy = createTemporaryObject(signalSpy, testCase, {target: control, signalName: "leftInsetChanged"})
+        verify(leftInsetSpy.valid)
+
+        var rightInsetSpy = createTemporaryObject(signalSpy, testCase, {target: control, signalName: "rightInsetChanged"})
+        verify(rightInsetSpy.valid)
+
+        var bottomInsetSpy = createTemporaryObject(signalSpy, testCase, {target: control, signalName: "bottomInsetChanged"})
+        verify(bottomInsetSpy.valid)
+
+        var topInsetChanges = 0
+        var leftInsetChanges = 0
+        var rightInsetChanges = 0
+        var bottomInsetChanges = 0
+
+        compare(control.topInset, 0)
+        compare(control.leftInset, 0)
+        compare(control.rightInset, 0)
+        compare(control.bottomInset, 0)
+
+        control.width = 100
+        control.height = 100
+        compare(control.background.x, 0)
+        compare(control.background.y, 0)
+        compare(control.background.width, 100)
+        compare(control.background.height, 100)
+
+        control.topInset = 10
+        compare(control.topInset, 10)
+        compare(control.leftInset, 0)
+        compare(control.rightInset, 0)
+        compare(control.bottomInset, 0)
+        compare(topInsetSpy.count, ++topInsetChanges)
+        compare(leftInsetSpy.count, leftInsetChanges)
+        compare(rightInsetSpy.count, rightInsetChanges)
+        compare(bottomInsetSpy.count, bottomInsetChanges)
+        compare(control.background.x, 0)
+        compare(control.background.y, 10)
+        compare(control.background.width, 100)
+        compare(control.background.height, 90)
+
+        control.leftInset = 20
+        compare(control.topInset, 10)
+        compare(control.leftInset, 20)
+        compare(control.rightInset, 0)
+        compare(control.bottomInset, 0)
+        compare(topInsetSpy.count, topInsetChanges)
+        compare(leftInsetSpy.count, ++leftInsetChanges)
+        compare(rightInsetSpy.count, rightInsetChanges)
+        compare(bottomInsetSpy.count, bottomInsetChanges)
+        compare(control.background.x, 20)
+        compare(control.background.y, 10)
+        compare(control.background.width, 80)
+        compare(control.background.height, 90)
+
+        control.rightInset = 30
+        compare(control.topInset, 10)
+        compare(control.leftInset, 20)
+        compare(control.rightInset, 30)
+        compare(control.bottomInset, 0)
+        compare(topInsetSpy.count, topInsetChanges)
+        compare(leftInsetSpy.count, leftInsetChanges)
+        compare(rightInsetSpy.count, ++rightInsetChanges)
+        compare(bottomInsetSpy.count, bottomInsetChanges)
+        compare(control.background.x, 20)
+        compare(control.background.y, 10)
+        compare(control.background.width, 50)
+        compare(control.background.height, 90)
+
+        control.bottomInset = 40
+        compare(control.topInset, 10)
+        compare(control.leftInset, 20)
+        compare(control.rightInset, 30)
+        compare(control.bottomInset, 40)
+        compare(topInsetSpy.count, topInsetChanges)
+        compare(leftInsetSpy.count, leftInsetChanges)
+        compare(rightInsetSpy.count, rightInsetChanges)
+        compare(bottomInsetSpy.count, ++bottomInsetChanges)
+        compare(control.background.x, 20)
+        compare(control.background.y, 10)
+        compare(control.background.width, 50)
+        compare(control.background.height, 50)
+
+        control.topInset = undefined
+        compare(control.topInset, 0)
+        compare(control.leftInset, 20)
+        compare(control.rightInset, 30)
+        compare(control.bottomInset, 40)
+        compare(topInsetSpy.count, ++topInsetChanges)
+        compare(leftInsetSpy.count, leftInsetChanges)
+        compare(rightInsetSpy.count, rightInsetChanges)
+        compare(bottomInsetSpy.count, bottomInsetChanges)
+        compare(control.background.x, 20)
+        compare(control.background.y, 0)
+        compare(control.background.width, 50)
+        compare(control.background.height, 60)
+
+        control.leftInset = undefined
+        compare(control.topInset, 0)
+        compare(control.leftInset, 0)
+        compare(control.rightInset, 30)
+        compare(control.bottomInset, 40)
+        compare(topInsetSpy.count, topInsetChanges)
+        compare(leftInsetSpy.count, ++leftInsetChanges)
+        compare(rightInsetSpy.count, rightInsetChanges)
+        compare(bottomInsetSpy.count, bottomInsetChanges)
+        compare(control.background.x, 0)
+        compare(control.background.y, 0)
+        compare(control.background.width, 70)
+        compare(control.background.height, 60)
+
+        control.rightInset = undefined
+        compare(control.topInset, 0)
+        compare(control.leftInset, 0)
+        compare(control.rightInset, 0)
+        compare(control.bottomInset, 40)
+        compare(topInsetSpy.count, topInsetChanges)
+        compare(leftInsetSpy.count, leftInsetChanges)
+        compare(rightInsetSpy.count, ++rightInsetChanges)
+        compare(bottomInsetSpy.count, bottomInsetChanges)
+        compare(control.background.x, 0)
+        compare(control.background.y, 0)
+        compare(control.background.width, 100)
+        compare(control.background.height, 60)
+
+        control.bottomInset = undefined
+        compare(control.topInset, 0)
+        compare(control.leftInset, 0)
+        compare(control.rightInset, 0)
+        compare(control.bottomInset, 0)
+        compare(topInsetSpy.count, topInsetChanges)
+        compare(leftInsetSpy.count, leftInsetChanges)
+        compare(rightInsetSpy.count, rightInsetChanges)
+        compare(bottomInsetSpy.count, ++bottomInsetChanges)
+        compare(control.background.x, 0)
+        compare(control.background.y, 0)
+        compare(control.background.width, 100)
+        compare(control.background.height, 100)
+    }
 }